/* ==========================================================================
   theme.css — global design system for the Preislisten tool.

   Loaded by base.html on EVERY page, after the page-specific CSS files, so
   the shared component styles below win over page-local duplicates.

   Palette: Bootstrap 5 tokens. Page CSS files should reference the
   --pz-* variables instead of hardcoded hex values.
   ========================================================================== */

:root {
    /* Accent colors (Bootstrap 5 aligned) */
    --pz-primary: #0d6efd;
    --pz-primary-dark: #0a58ca;
    --pz-success: #198754;
    --pz-success-dark: #146c43;
    --pz-danger: #dc3545;
    --pz-danger-dark: #a71d2a;
    --pz-warning: #ffc107;
    --pz-info: #0dcaf0;

    /* Neutrals */
    --pz-bg: #f4f6f9;
    --pz-surface: #ffffff;
    --pz-border: #dee2e6;
    --pz-border-strong: #c0c7d0;
    --pz-text: #212529;
    --pz-text-muted: #6c757d;
    --pz-head-bg: #f8f9fa;

    /* Navbar */
    --pz-nav-bg-top: #1e293b;
    --pz-nav-bg-bottom: #16202c;
    --pz-nav-link: rgba(255, 255, 255, 0.75);
    --pz-nav-hover: rgba(255, 255, 255, 0.09);

    /* Shape */
    --pz-radius: 8px;
    --pz-radius-sm: 6px;
    --pz-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.05);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
    background-color: var(--pz-bg);
    color: var(--pz-text);
    font-size: 0.95rem;
}

h2, h3, h4 {
    font-weight: 600;
    letter-spacing: 0.1px;
}

a {
    color: var(--pz-primary);
}

/* Content wrapper (replaces the old p-5 utility) — full width */
.page-container {
    padding: 1.5rem 2rem 3rem;
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */

.app-navbar {
    background: linear-gradient(180deg, var(--pz-nav-bg-top), var(--pz-nav-bg-bottom));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.app-navbar .navbar-brand {
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--pz-primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
}

.app-navbar .nav-link {
    color: var(--pz-nav-link);
    border-radius: 0.5rem;
    padding: 0.5rem 0.9rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.app-navbar .nav-link:hover {
    color: #fff;
    background-color: var(--pz-nav-hover);
}

.app-navbar .nav-link.active {
    color: #fff;
    background-color: var(--pz-primary);
    font-weight: 500;
}

.nav-user {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff !important;
}

.user-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pz-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Cards, login, stats containers
   -------------------------------------------------------------------------- */

.card {
    border: 1px solid var(--pz-border);
    border-radius: var(--pz-radius);
    box-shadow: var(--pz-shadow);
}

.login-wrapper {
    display: flex;
    justify-content: center;
    padding-top: 4rem;
}

.login-card {
    width: 100%;
    max-width: 420px;
}

/* Sidebar stats boxes (used by artikel list / structured list) */
.stats-container {
    background: var(--pz-surface);
    border: 1px solid var(--pz-border);
    border-radius: var(--pz-radius);
    box-shadow: var(--pz-shadow);
}

/* --------------------------------------------------------------------------
   Tables (shared .table-layout base lives in prices.css)
   -------------------------------------------------------------------------- */

.table-layout {
    background: var(--pz-surface);
    font-size: 0.9rem;
    border-radius: var(--pz-radius-sm);
}

.table-layout th {
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Unified buttons: normalize the legacy custom button classes onto the
   Bootstrap palette so every page uses the same colors for the same action.
   -------------------------------------------------------------------------- */

a.button, button.button,
a.button-abgleich, button.button-abgleich,
a.button-enrich, button.button-enrich,
a.button-delete, button.button-delete {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border: none;
    border-radius: var(--pz-radius-sm);
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out;
}

.button,
.button-abgleich {
    background-color: var(--pz-primary);
}

.button:hover, .button-abgleich:hover {
    background-color: var(--pz-primary-dark);
    color: #fff;
}

.button-enrich {
    background-color: var(--pz-success);
}

.button-enrich:hover {
    background-color: var(--pz-success-dark);
    color: #fff;
}

.button-delete {
    background-color: var(--pz-danger);
}

.button-delete:hover {
    background-color: var(--pz-danger-dark);
    color: #fff;
}

/* Artikel list action buttons */
.btn-edit {
    color: var(--pz-primary);
    border: 1px solid var(--pz-primary);
    background: var(--pz-surface);
    border-radius: var(--pz-radius-sm);
    padding: 0.25rem 0.7rem;
    text-decoration: none;
    display: inline-block;
}

.btn-edit:hover {
    background: var(--pz-primary);
    color: #fff;
}

.btn-save {
    background: var(--pz-success);
    border-color: var(--pz-success);
    color: #fff;
}

.btn-save:hover {
    background: var(--pz-success-dark);
    border-color: var(--pz-success-dark);
    color: #fff;
}

.btn-reset-all,
.reset-btn {
    border: 1px solid var(--pz-border);
    background: var(--pz-surface);
    color: var(--pz-text-muted);
    border-radius: var(--pz-radius-sm);
}

.btn-reset-all {
    padding: 0.35rem 0.8rem;
    text-decoration: none;
    display: inline-block;
}

.btn-reset-all:hover,
.reset-btn:hover {
    color: var(--pz-danger);
    border-color: var(--pz-danger);
}

/* --------------------------------------------------------------------------
   Small shared bits
   -------------------------------------------------------------------------- */

.copy-tooltip {
    background-color: var(--pz-success);
}

.pagination .current-page {
    background-color: var(--pz-primary);
    border-color: var(--pz-primary);
}

/* Percentage deviation next to Preis 2 (set by JS via classes) */
.prozent-abweichung.positive {
    color: var(--pz-success);
}

.prozent-abweichung.negative {
    color: var(--pz-danger);
}

/* Flash messages rendered by base (uses Bootstrap alert classes from
   includes/_messages.html) — no extra styling needed. */

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-control, .form-select {
    border-radius: var(--pz-radius-sm);
}

.form-control:focus, .form-select:focus {
    border-color: #9ec3fe;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

/* --------------------------------------------------------------------------
   Unbranded form controls — Filtern buttons, native selects, file pickers.
   These elements render without Bootstrap classes, so theme them here so
   they match the rest of the UI.
   -------------------------------------------------------------------------- */

/* Submit buttons inside the artikel filter row ("Filtern") */
.filter-row button[type="submit"] {
    background: var(--pz-primary);
    color: #fff;
    border: 1px solid var(--pz-primary-dark);
    border-radius: var(--pz-radius-sm);
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
}

.filter-row button[type="submit"]:hover {
    background: var(--pz-primary-dark);
    border-color: var(--pz-primary-dark);
}

.filter-row button[type="submit"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

/* Native <select> dropdowns (no .form-select class) */
select:not([class*="form-"]) {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--pz-surface);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    background-size: 10px;
    border: 1px solid var(--pz-border-strong);
    border-radius: var(--pz-radius-sm);
    padding: 0.35rem 1.9rem 0.35rem 0.6rem;
    font-size: 0.9rem;
    color: var(--pz-text);
    vertical-align: middle;
}

select:not([class*="form-"]):focus {
    outline: none;
    border-color: #9ec3fe;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

select:not([class*="form-"]):disabled {
    background-color: var(--pz-head-bg);
    color: var(--pz-text-muted);
}

/* Native file pickers ("Datei auswählen") */
input[type="file"] {
    color: var(--pz-text);
    font-size: 0.9rem;
}

input[type="file"]::file-selector-button {
    background: var(--pz-primary);
    color: #fff;
    border: 1px solid var(--pz-primary-dark);
    border-radius: var(--pz-radius-sm);
    padding: 0.35rem 0.8rem;
    margin-right: 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
    background: var(--pz-primary-dark);
    border-color: var(--pz-primary-dark);
}