/* =========================================================================
   Modern Dark Theme  (replaces the old Windows 98 look)
   Layers on top of Bootstrap 5.3 native dark mode (data-bs-theme="dark").
   ========================================================================= */

:root {
    /* Surfaces */
    --bg:          #0f1420;   /* page background */
    --surface:     #171d2b;   /* cards, navbar, footer */
    --surface-2:   #1f2740;   /* hovered / elevated surface */
    --border:      #2a3450;   /* hairline borders */
    --border-soft: #222b44;

    /* Text */
    --text:        #e6e8ef;
    --muted:       #9aa3b8;

    /* Accents */
    --accent:        #7c6cf0;  /* violet — primary */
    --accent-hover:  #8e80f5;
    --accent-soft:   rgba(124, 108, 240, .15);
    --cyan:          #22d3ee;  /* secondary highlight */
    --hl:            34, 211, 238;  /* .panel-highlight tint (rgb of --cyan) */
    --hl-accent:     #22d3ee;

    /* Status */
    --success: #34d399;
    --danger:  #f87171;
    --warning: #fbbf24;
    --info:    #38bdf8;

    /* Shape & motion */
    --radius:    14px;
    --radius-sm: 10px;
    --shadow:    0 6px 24px rgba(0, 0, 0, .35);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .25);
    --ease:      .18s cubic-bezier(.4, 0, .2, 1);

    /* Tell Bootstrap our accent so its own components match */
    --bs-primary:       var(--accent);
    --bs-primary-rgb:   124, 108, 240;
    --bs-body-bg:       var(--bg);
    --bs-body-color:    var(--text);
    --bs-border-color:  var(--border);

    /* Theme-swappable surfaces */
    --input-bg:  #0d121d;
    --navbar-bg: rgba(20, 26, 40, .85);
}

/* ---------- Light theme overrides (silver, neutral steel accent) ---------- */
[data-bs-theme="light"] {
    --bg:          #e6e9ee;   /* silver page */
    --surface:     #f3f5f8;   /* soft off-white cards */
    --surface-2:   #dfe4ea;   /* hover / elevated */
    --border:      #c7ceda;
    --border-soft: #d6dce4;

    --text:        #1f2430;
    --muted:       #566072;

    /* Neutral steel accent — no purple */
    --accent:        #52607a;
    --accent-hover:  #3f4b60;
    --accent-soft:   rgba(82, 96, 122, .18);

    --shadow:    0 8px 26px rgba(30, 41, 59, .10);
    --shadow-sm: 0 2px 10px rgba(30, 41, 59, .07);

    --input-bg:  #ffffff;
    --navbar-bg: rgba(233, 236, 241, .85);

    /* keep Bootstrap's primary tints in step with the steel accent */
    --bs-primary-rgb: 82, 96, 122;

    /* Deeper teal: bright cyan washes out on the silver page */
    --hl:        8, 145, 178;
    --hl-accent: #0e7490;
}
/* Drop the violet/cyan page glow and the gradient wordmark in light mode */
[data-bs-theme="light"] body { background-image: none; }
[data-bs-theme="light"] .docdoc-brand .brand-text {
    background: none;
    -webkit-text-fill-color: var(--text);
    color: var(--text);
}
/* Neutralize the violet glows/gradients in light mode */
[data-bs-theme="light"] .btn-primary { box-shadow: 0 4px 14px rgba(30, 41, 59, .18); }
[data-bs-theme="light"] .price-badge,
[data-bs-theme="light"] .balance-display {
    background: linear-gradient(135deg, var(--accent), #6b7a94);
    box-shadow: 0 3px 12px rgba(30, 41, 59, .18);
}

/* ---------- Base ---------- */
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg);
    background-image:
        radial-gradient(900px 500px at 100% -10%, rgba(124, 108, 240, .10), transparent 60%),
        radial-gradient(800px 480px at -10% 0%, rgba(34, 211, 238, .07), transparent 55%);
    background-attachment: fixed;
    color: var(--text);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.01em; }

a { color: var(--accent); text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--accent-hover); }

::selection { background: var(--accent-soft); }

/* Nicer scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--surface-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 8px; }

/* ---------- Navbar ---------- */
.navbar {
    background-color: var(--navbar-bg) !important;
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .02);
    padding: .6rem 0 !important;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.navbar-brand { color: var(--text) !important; font-weight: 800; padding: 4px 8px; }

.nav-link {
    color: var(--muted) !important;
    padding: 6px 12px !important;
    margin: 0 2px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: color var(--ease), background-color var(--ease);
}
.nav-link:hover,
.nav-link:focus { color: var(--text) !important; background-color: var(--surface-2); }

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--radius-sm);
    padding: .5rem .95rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: transform var(--ease), background-color var(--ease),
                box-shadow var(--ease), border-color var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(124, 108, 240, .35);
}
.btn-primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); }

.btn-success { background-color: var(--success); border-color: var(--success); color: #07210f; }
.btn-danger  { background-color: var(--danger);  border-color: var(--danger);  color: #2a0a0a; }

.btn-outline-primary   { color: var(--accent); border-color: var(--accent);
                          /* selected state (e.g. .btn-check toggles) in the accent, not Bootstrap blue */
                          --bs-btn-active-bg: var(--accent); --bs-btn-active-border-color: var(--accent);
                          --bs-btn-active-color: #fff; }
.btn-outline-primary:hover   { background-color: var(--accent); color: #fff; }
.btn-outline-secondary { color: var(--muted);  border-color: var(--border); }
.btn-outline-secondary:hover { background-color: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-outline-info      { color: var(--cyan);   border-color: var(--cyan); }
.btn-outline-info:hover      { background-color: var(--cyan); color: #042027; }

/* subtle lift used on contact buttons in base.html */
.hover-lift { transition: transform var(--ease), box-shadow var(--ease); }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ---------- Cards ---------- */
.card {
    background-color: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    overflow: hidden;
}
.card:hover { border-color: var(--border); box-shadow: var(--shadow); }

.card-header {
    background-color: transparent;
    color: var(--text);
    font-weight: 700;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--border-soft);
}
.card-body { padding: 1.1rem; }

/* ---------- Highlight panel ----------
   A teal-tinted surface for tools that should stand out from the regular grey
   cards (pay period picker, salary calculator). The tint sits on the solid
   surface colour, so the panel is opaque and works in both themes. */
.panel-highlight {
    background: linear-gradient(rgba(var(--hl), .08), rgba(var(--hl), .08)), var(--surface);
    border: 1px solid rgba(var(--hl), .35);
}
.card.panel-highlight:hover { border-color: rgba(var(--hl), .55); }
.panel-highlight__bar,
.card.panel-highlight > .card-header {
    background: rgba(var(--hl), .14);
    border-bottom: 1px solid rgba(var(--hl), .30);
}

/* ---------- Category & Product cards ---------- */
.category-card, .product-card {
    background-color: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.category-card:hover, .product-card:hover {
    transform: translateY(-3px);
    background-color: var(--surface);
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

/* ---------- Forms ---------- */
.form-control, .form-select {
    background-color: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .6rem .8rem;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.form-control::placeholder { color: #6b7488; }
/* Keep room for the dropdown arrow so the selected text isn't clipped */
.form-select { padding-right: 2.25rem; }
.form-control:focus, .form-select:focus {
    background-color: var(--input-bg);
    color: var(--text);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-label { color: var(--muted); font-weight: 600; margin-bottom: .35rem; }

/* ---------- Alerts ---------- */
.alert {
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--text);
    padding: .85rem 1rem;
}
.alert-success { border-left-color: var(--success); background-color: rgba(52, 211, 153, .10); }
.alert-danger  { border-left-color: var(--danger);  background-color: rgba(248, 113, 113, .10); }
.alert-warning { border-left-color: var(--warning); background-color: rgba(251, 191, 36, .10); }
.alert-info    { border-left-color: var(--info);    background-color: rgba(56, 189, 248, .10); }

/* ---------- Badges / price / balance ---------- */
.price-badge, .balance-display {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--accent), #5b8def);
    color: #fff;
    font-weight: 700;
    padding: .35rem .7rem;
    border-radius: 999px;
    border: none;
    box-shadow: 0 3px 12px rgba(124, 108, 240, .3);
}
.balance-display { margin-right: 8px; }

/* ---------- Tables ---------- */
.table {
    --bs-table-bg: transparent;
    color: var(--text);
    border-radius: var(--radius);
    overflow: hidden;
}
.table th {
    background-color: var(--surface-2);
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .04em;
    border-color: var(--border-soft);
}
.table td { border-color: var(--border-soft); }
.table tbody tr { transition: background-color var(--ease); }
.table-hover tbody tr:hover { background-color: var(--surface-2); }

/* ---------- Modal ---------- */
.modal-content {
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.modal-header, .modal-footer { border-color: var(--border-soft); }

/* ---------- Pagination ---------- */
.pagination { gap: 4px; }
.pagination .page-link {
    background-color: var(--surface);
    border: 1px solid var(--border-soft);
    color: var(--text);
    border-radius: var(--radius-sm);
    transition: background-color var(--ease), border-color var(--ease);
}
.pagination .page-link:hover { background-color: var(--surface-2); border-color: var(--border); }
.pagination .active .page-link,
.pagination .page-item.active .page-link {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ---------- Footer ---------- */
.footer {
    background-color: var(--surface);
    border-top: 1px solid var(--border-soft);
    box-shadow: none;
    padding: 1.5rem 0;
    margin-top: 3rem;
    color: var(--muted);
}

/* ---------- Misc text helpers used in templates ---------- */
.text-muted { color: var(--muted) !important; }

/* Compact live-search field (icon + input + clear, single rounded box) */
.search-field {
    position: relative;
    max-width: 480px;
}
.search-field__input {
    width: 100%;
    background-color: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .5rem 2.3rem;
    font-size: .95rem;
    line-height: 1.4;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.search-field__input::placeholder { color: #6b7488; }
.search-field__input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-field__icon {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .9rem;
    opacity: .75;
    pointer-events: none;
}
.search-field__clear {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.7rem;
    height: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--muted);
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
    transition: color var(--ease), background-color var(--ease);
}
.search-field__clear:hover,
.search-field__clear:focus {
    background-color: var(--surface-2);
    color: var(--text);
    outline: none;
}

/* Product form: template thumbnail labels use hardcoded dark inline colors
   (color:#333) which are invisible on the dark background. Force them light. */
.template-img-item span,
.template-img-grid span,
.template-img + span { color: var(--text) !important; }

/* Make template thumbnails read as selectable */
.template-img {
    border: 2px solid var(--border) !important;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.template-img:hover {
    border-color: var(--accent) !important;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .4) !important;
}

/* Crispy/Bootstrap form labels & help text stay readable on dark */
form label,
.form-check-label,
.form-text,
legend { color: var(--text); }

/* =========================================================================
   Gray theme  (SITE_THEME=gray in .env)
   One fixed neutral theme: base.html sets data-site-theme="gray" next to
   data-bs-theme="dark" (Bootstrap's dark components) and hides the light/dark
   choice. Fills use a mid gray with white text; text-on-dark uses a lighter
   gray, so links and outline buttons stay readable.
   ========================================================================= */
[data-site-theme="gray"] {
    --bg:          #1e1f21;
    --surface:     #27282b;
    --surface-2:   #313236;
    --border:      #414247;
    --border-soft: #36373b;

    --text:        #e6e6e8;
    --muted:       #a3a4a9;

    --accent:        #5f6268;   /* fills: white text on it is ~6:1 */
    --accent-hover:  #6d7077;
    --accent-soft:   rgba(170, 172, 178, .18);
    --accent-text:   #c9cacf;   /* links / outline buttons on the dark surfaces */
    --cyan:          #b4b6bb;
    --hl:            170, 172, 178;
    --hl-accent:     #c9cacf;

    --success: #6fbf8e;
    --danger:  #e07a7a;
    --warning: #d9b45c;
    --info:    #8fb3cf;

    --shadow:    0 6px 24px rgba(0, 0, 0, .40);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .30);

    --bs-primary-rgb:  95, 98, 104;
    --bs-link-color:   var(--accent-text);
    --bs-link-color-rgb: 201, 202, 207;
    --bs-link-hover-color: #ffffff;

    --input-bg:  #1a1b1d;
    --navbar-bg: rgba(33, 34, 36, .92);
}
[data-site-theme="gray"] body { background-image: none; }
[data-site-theme="gray"] a { color: var(--accent-text); }
[data-site-theme="gray"] a:hover { color: #ffffff; }
[data-site-theme="gray"] .text-primary { color: var(--accent-text) !important; }

/* Wordmark and top loading bar: base.html paints them violet/cyan inline */
[data-site-theme="gray"] .docdoc-brand .brand-text {
    background: none;
    -webkit-text-fill-color: var(--text);
    color: var(--text);
}
[data-site-theme="gray"] #page-loading-bar { background: #c9cacf; }

[data-site-theme="gray"] .btn-primary { color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
[data-site-theme="gray"] .btn-outline-primary { color: var(--accent-text); border-color: #6d7077; }
[data-site-theme="gray"] .btn-outline-primary:hover { background-color: var(--accent); color: #fff; }
[data-site-theme="gray"] .btn-outline-info:hover { color: #1e1f21; }
[data-site-theme="gray"] .btn-success { color: #102016; }
[data-site-theme="gray"] .btn-danger  { color: #2a0d0d; }
[data-site-theme="gray"] .category-card:hover,
[data-site-theme="gray"] .product-card:hover { border-color: #6d7077; }
[data-site-theme="gray"] .price-badge,
[data-site-theme="gray"] .balance-display {
    background: linear-gradient(135deg, #5f6268, #4c4f54);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .30);
}
[data-site-theme="gray"] .alert-success { background-color: rgba(111, 191, 142, .10); }
[data-site-theme="gray"] .alert-danger  { background-color: rgba(224, 122, 122, .10); }
[data-site-theme="gray"] .alert-warning { background-color: rgba(217, 180, 92, .10); }
[data-site-theme="gray"] .alert-info    { background-color: rgba(143, 179, 207, .10); }