/* =========================================================================
   Matrix Dark Theme  (black + phosphor green; replaced the violet look)
   Layers on top of Bootstrap 5.3 native dark mode (data-bs-theme="dark").
   ========================================================================= */

:root {
    /* Surfaces */
    --bg:          #020703;   /* page background: near-black, green cast */
    --surface:     #07120a;   /* cards, navbar, footer */
    --surface-2:   #0c1f12;   /* hovered / elevated surface */
    --border:      #14532d;   /* hairline borders */
    --border-soft: #0e3a1f;

    /* Text */
    --text:        #c8f7d4;   /* pale green, easy to read for long text */
    --muted:       #6fbf86;

    /* Accents */
    --accent:        #00ff41;  /* matrix green — primary */
    --accent-hover:  #5bff85;
    --accent-rgb:    0, 255, 65;
    --accent-soft:   rgba(0, 255, 65, .14);
    --on-accent:     #001a07;  /* text on a green fill */
    --cyan:          #39ff14;  /* secondary highlight (neon green) */
    --hl:            0, 255, 65;  /* .panel-highlight tint (rgb of --accent) */
    --hl-accent:     #00ff41;

    /* Headings, brand, buttons */
    --font-mono: "Share Tech Mono", "Consolas", "Courier New", monospace;

    /* Status */
    --success: #00ff41;
    --danger:  #ff4d4d;
    --warning: #e6ff3d;
    --info:    #3dffb0;

    /* Shape & motion */
    --radius:    14px;
    --radius-sm: 10px;
    --shadow:    0 6px 24px rgba(0, 0, 0, .6), 0 0 18px rgba(0, 255, 65, .06);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .5);
    --glow:      0 0 6px rgba(0, 255, 65, .55);
    --ease:      .18s cubic-bezier(.4, 0, .2, 1);

    /* Tell Bootstrap our accent so its own components match */
    --bs-primary:       var(--accent);
    --bs-primary-rgb:   0, 255, 65;
    --bs-success-rgb:   0, 255, 65;
    --bs-body-bg:       var(--bg);
    --bs-body-color:    var(--text);
    --bs-border-color:  var(--border);
    --bs-link-color:    var(--accent);
    --bs-link-color-rgb: 0, 255, 65;
    --bs-link-hover-color: var(--accent-hover);

    /* Theme-swappable surfaces */
    --input-bg:  #010502;
    --navbar-bg: rgba(2, 10, 4, .88);
}

/* ---------- 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-rgb:    82, 96, 122;
    --accent-soft:   rgba(82, 96, 122, .18);
    --on-accent:     #fff;
    --cyan:          #0e7490;
    --success: #059669;
    --danger:  #dc2626;
    --warning: #d97706;
    --info:    #0284c7;
    --glow:      none;
    --bs-success-rgb: 5, 150, 105;
    --bs-link-color-rgb: 82, 96, 122;

    --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(0, 255, 65, .07), transparent 60%),
        radial-gradient(800px 480px at -10% 0%, rgba(0, 255, 65, .05), 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; }

/* Matrix look (dark only): terminal font + phosphor glow on headings */
[data-bs-theme="dark"] :is(h1, h2, h3, h4, h5, h6, .navbar-brand, .btn, .card-header, .table th, .price-badge, .balance-display) {
    font-family: var(--font-mono);
    letter-spacing: .02em;
}
[data-bs-theme="dark"] :is(h1, h2, h3) { color: var(--accent); text-shadow: var(--glow); }
/* Faint CRT scanlines over the whole page; never blocks clicks */
[data-bs-theme="dark"] body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2001;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px);
}
/* Digital rain canvas (drawn by base.html), sits behind everything */
#matrix-rain {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: .16;
}
[data-bs-theme="light"] #matrix-rain { display: none; }

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: var(--on-accent);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), .35);
}
.btn-primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }

.btn-success { background-color: var(--success); border-color: var(--success); color: var(--on-accent); }
.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: var(--on-accent); }
.btn-outline-primary:hover   { background-color: var(--accent); color: var(--on-accent); }
.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: var(--on-accent); }

/* 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: var(--muted); opacity: .6; }
/* 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(0, 255, 65, .08); }
.alert-danger  { border-left-color: var(--danger);  background-color: rgba(255, 77, 77, .10); }
.alert-warning { border-left-color: var(--warning); background-color: rgba(230, 255, 61, .08); }
.alert-info    { border-left-color: var(--info);    background-color: rgba(61, 255, 176, .08); }

/* ---------- Badges / price / balance ---------- */
.price-badge, .balance-display {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--accent), #00b82e);
    color: var(--on-accent);
    font-weight: 700;
    padding: .35rem .7rem;
    border-radius: 999px;
    border: none;
    box-shadow: 0 0 12px rgba(var(--accent-rgb), .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: var(--on-accent);
}

/* ---------- 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: var(--muted); opacity: .6; }
.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); }

/* Brand wordmark in the terminal font (base.html sets Inter inline) */
[data-bs-theme="dark"] .docdoc-brand .brand-text {
    font-family: var(--font-mono);
    letter-spacing: .02em;
    filter: drop-shadow(0 0 6px rgba(0, 255, 65, .45));
}