/* ============================================================
   CITAM Safari Group System — Theme Tokens + component overlay
   Palette sampled from https://safari-citam.boldet.com (logo + live computed styles).

   Adaptations from the original token sheet:
     • Dark mode keys off html[data-bs-theme="dark"] (what theme.js and
       Bootstrap 5.3 already toggle) instead of data-theme. theme.js also
       mirrors the value onto data-theme for forward compatibility.
     • Tokens are bridged into Bootstrap variables so the Minia template
       follows the brand without editing assets/**.

   Never hardcode hex in components — always reference a token.

   THE RED PROBLEM: red appears only on (a) the active-nav indicator,
   (b) one primary CTA per view (dark-mode primary), (c) genuine danger
   states. Hover/highlight accent is sky. Budget: <5% of any screen.
   ============================================================ */

/* ---------- 1. Brand constants (mode-stable) ---------- */
:root {
    --citam-red: #E01020;
    --citam-red-bright: #EF0000; /* legacy — prefer --citam-red */
    --citam-navy: #000119;
    --citam-slate: #292B33;
    --citam-sky: #4BB5D8;

    --font-heading: "Montserrat", -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: "Cairo", -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;

    --motion: .22s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 2. Light mode ---------- */
:root,
html[data-bs-theme="light"] {
    --bg-canvas: #F4F5F7;
    --bg-surface: #FFFFFF;
    --bg-raised: #FAFAFB;
    --bg-sunken: #EDEEF2;

    --text-primary: #0B0C14;
    --text-secondary: #5A5D6B;
    --text-muted: #8A8D99;
    --text-inverse: #FFFFFF;

    --border: #E4E5EA;
    --border-strong: #CFD1D9;
    --border-focus: #E01020;

    /* Structure carries the UI. Navy is the workhorse. */
    --primary: #000119;
    --primary-hover: #1A1B33;
    --on-primary: #FFFFFF;
    --primary-rgb: 0, 1, 25;

    /* Red is the accent. Strict budget. */
    --accent: #E01020;
    --accent-hover: #B80D1A;
    --accent-bg: #FCEAEB;
    --accent-text: #8F0D17;
    --on-accent: #FFFFFF;

    --success: #1B7F4D;
    --success-bg: #E8F5EE;
    --success-text: #125C38;

    --warning: #B26A00;
    --warning-bg: #FDF2E0;
    --warning-text: #7A4900;

    --danger: #C4121F;
    --danger-bg: #FCEAEB;
    --danger-text: #8F0D17;

    --info: #2E7FA8;
    --info-bg: #E4F4FA;
    --info-text: #0B3D4D;

    --chart-grid: #E7E8ED;
    --chart-axis: #C3C5CE;
}

/* ---------- 3. Dark mode (navy IS the canvas; red leads) ---------- */
html[data-bs-theme="dark"] {
    --bg-canvas: #000119;
    --bg-surface: #0B0D1F;
    --bg-raised: #141731;
    --bg-sunken: #05060F;

    --text-primary: #F2F3F7;
    --text-secondary: #A8ABBD;
    --text-muted: #6E7186;
    --text-inverse: #0B0C14;

    --border: #22253D;
    --border-strong: #343854;
    --border-focus: #FF6B6B;

    --primary: #E01020;
    --primary-hover: #FF3B47;
    --on-primary: #FFFFFF;
    --primary-rgb: 224, 16, 32;

    --accent: #FF6B6B;
    --accent-hover: #FF8A8A;
    --accent-bg: #3D141A;
    --accent-text: #FF9BA0;
    --on-accent: #0B0C14;

    --success: #3DD68C;
    --success-bg: #0E3D28;
    --success-text: #7BE8B4;

    --warning: #F5A623;
    --warning-bg: #3D2C08;
    --warning-text: #F7C56B;

    --danger: #FF5A5F;
    --danger-bg: #3D141A;
    --danger-text: #FF9BA0;

    --info: #4BB5D8;
    --info-bg: #0B2F3D;
    --info-text: #8FD9EE;

    --chart-grid: #1E2138;
    --chart-axis: #343854;
}

/* ---------- 4. Categorical chart series (red-free, fixed order) ---------- */
:root {
    --series-1: #2A78D6;
    --series-2: #1BAF7A;
    --series-3: #4A3AA7;
    --series-4: #EDA100;
    --series-5: #E87BA4;
    --series-6: #EB6834;
    --series-7: #008300;
    --series-8: #1BA0AF;
}

html[data-bs-theme="dark"] {
    --series-1: #3987E5;
    --series-2: #199E70;
    --series-3: #9085E9;
    --series-4: #C98500;
    --series-5: #D55181;
    --series-6: #D95926;
    --series-7: #009300;
    --series-8: #22B5C5;
}

/* ---------- 5. Group-size band ramp ---------- */
:root {
    --band-small: #B5D4F4;
    --band-ideal: #2A78D6;
    --band-over: #C4121F;
}

html[data-bs-theme="dark"] {
    --band-small: #1E4F87;
    --band-ideal: #3987E5;
    --band-over: #FF5A5F;
}

/* ============================================================
   Bootstrap / Minia bridge — tokens drive the template.
   ============================================================ */
:root,
html[data-bs-theme="light"],
html[data-bs-theme="dark"] {
    --bs-primary: var(--primary);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-danger: var(--danger);
    --bs-info: var(--info);
    --bs-success: var(--success);
    --bs-warning: var(--warning);
    --bs-body-bg: var(--bg-canvas);
    --bs-body-color: var(--text-primary);
    --bs-secondary-bg: var(--bg-sunken);
    --bs-tertiary-bg: var(--bg-raised);
    --bs-border-color: var(--border);
    --bs-link-color: var(--info);
    --bs-link-hover-color: var(--info-text);
    --bs-secondary-color: var(--text-secondary);
}

/* ---------- Base typography & canvas ---------- */
body {
    background: var(--bg-canvas);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .modal-title, .navbar-brand {
    font-family: var(--font-heading);
    font-weight: 600;
}

a { transition: color var(--motion); }

/* Focus visibility (accessibility, per token sheet) */
*:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* ---------- Topbar & footer ---------- */
#page-topbar {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}

#page-topbar .header-item { color: var(--text-secondary); transition: color var(--motion), background-color var(--motion); }
#page-topbar .header-item:hover { color: var(--info); }

.footer {
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
}

/* ---------- Cards: modern surface + entrance + hover ---------- */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(0, 1, 25, .04);
    transition: box-shadow var(--motion), transform var(--motion), border-color var(--motion);
}

.card-title { color: var(--text-primary); }

/* Staggered entrance for page content cards (covers every list/report/dashboard
   view without touching them). Kept short and GPU-friendly.
   fill-mode must be `backwards`, NOT `both`: a transform animation that keeps
   filling leaves the card a permanent stacking context, which traps pop-overs
   (e.g. the cash-sale item picker) behind the next card. */
.page-content .card {
    animation: citam-fade-up .34s cubic-bezier(.25, .6, .3, 1) backwards;
}
.page-content .card:nth-of-type(2), .page-content .row > div:nth-child(2) .card { animation-delay: .04s; }
.page-content .card:nth-of-type(3), .page-content .row > div:nth-child(3) .card { animation-delay: .08s; }
.page-content .row > div:nth-child(4) .card { animation-delay: .12s; }
.page-content .row > div:nth-child(5) .card { animation-delay: .16s; }
.page-content .row > div:nth-child(6) .card { animation-delay: .20s; }
.page-content .row > div:nth-child(7) .card { animation-delay: .24s; }
.page-content .row > div:nth-child(8) .card { animation-delay: .28s; }

/* End on transform:none (not translateY(0)) — a retained transform makes every
   card a stacking context, trapping pop-overs (e.g. the sale item picker)
   behind the following card. */
@keyframes citam-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

/* Hover lift for interactive/statistic cards only (not every card). */
.kpi-card:hover,
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 1, 25, .10);
    border-color: var(--border-strong);
}

/* ---------- Buttons ---------- */
.btn { border-radius: var(--radius-sm); transition: background-color var(--motion), border-color var(--motion), color var(--motion), transform .12s ease, box-shadow var(--motion); }
.btn:active { transform: translateY(1px); }

.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-color: var(--on-primary);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-hover-color: var(--on-primary);
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
    --bs-btn-disabled-color: var(--on-primary);
    --bs-btn-focus-shadow-rgb: var(--primary-rgb);
}

.btn-danger {
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
}

.btn-soft-primary {
    background: rgba(var(--primary-rgb), .08) !important;
    color: var(--text-primary) !important;
    border: none;
}
.btn-soft-primary:hover { background: rgba(var(--primary-rgb), .16) !important; }

.btn-soft-success { background: var(--success-bg) !important; color: var(--success-text) !important; border: none; }
.btn-soft-success:hover { filter: brightness(.96); }
.btn-soft-danger { background: var(--danger-bg) !important; color: var(--danger-text) !important; border: none; }
.btn-soft-secondary { background: var(--bg-sunken) !important; color: var(--text-secondary) !important; border: none; }
.btn-soft-info { background: var(--info-bg) !important; color: var(--info-text) !important; border: none; }

.btn-light { --bs-btn-bg: var(--bg-raised); --bs-btn-border-color: var(--border); --bs-btn-color: var(--text-primary); --bs-btn-hover-bg: var(--bg-sunken); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-hover-color: var(--text-primary); }

/* ---------- Badges (colour + form, never colour alone) ---------- */
.badge { border-radius: 20px; font-weight: 600; letter-spacing: .01em; }
.badge.bg-success { background: var(--success-bg) !important; color: var(--success-text) !important; }
.badge.bg-warning { background: var(--warning-bg) !important; color: var(--warning-text) !important; }
.badge.bg-danger { background: var(--danger-bg) !important; color: var(--danger-text) !important; }
.badge.bg-info { background: var(--info-bg) !important; color: var(--info-text) !important; }
.badge.bg-secondary { background: var(--bg-sunken) !important; color: var(--text-secondary) !important; }
.badge.bg-primary { background: rgba(var(--primary-rgb), .10) !important; color: var(--text-primary) !important; }
/* Decorative "primary" tints (KPI icons, info icons) resolve to SKY, not red/navy:
   navy text is near-invisible on dark and red would blow the red budget. */
.bg-soft-primary { background: var(--info-bg) !important; }
.text-primary { color: var(--info) !important; }

/* Avatar-sized soft chips used on dashboards keep their semantic soft-bg colors */
.bg-soft-success { background: var(--success-bg) !important; }
.bg-soft-warning { background: var(--warning-bg) !important; }
.bg-soft-danger { background: var(--danger-bg) !important; }
.bg-soft-info { background: var(--info-bg) !important; }
.bg-soft-secondary { background: var(--bg-sunken) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-info { color: var(--info) !important; }
.text-muted { color: var(--text-muted) !important; }

/* ---------- Tables & DataTables ---------- */
.table { --bs-table-color: var(--text-primary); --bs-table-bg: transparent; --bs-table-border-color: var(--border); }
.table thead th {
    background: var(--bg-raised);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--border-strong);
}
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--bg-raised); }
.table-hover > tbody > tr:hover > *,
.table > tbody > tr:hover > * { background: var(--info-bg); transition: background-color .15s ease; }

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.page-item.active .page-link {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--on-primary) !important;
}
.page-link { color: var(--text-secondary); transition: background-color var(--motion), color var(--motion); }
.page-link:hover { color: var(--info); background: var(--info-bg); }
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
}

/* ---------- Forms ---------- */
/* NOTE: background-COLOR only — the `background:` shorthand would wipe out
   Bootstrap's .form-select caret layering (image/no-repeat/position/size),
   which made the dark-mode caret tile across the control ("VVVV" bug). */
.form-control, .form-select {
    background-color: var(--bg-surface);
    border-color: var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    transition: border-color var(--motion), box-shadow var(--motion), background-color var(--motion);
}
.form-control:focus, .form-select:focus {
    border-color: var(--info);
    box-shadow: 0 0 0 .2rem var(--info-bg);
    background-color: var(--bg-surface);
    color: var(--text-primary);
}
.form-control[readonly] { background-color: var(--bg-sunken); color: var(--text-secondary); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-label { color: var(--text-secondary); font-weight: 600; }

/* ---------- Dropdowns & modals: entrance motion ---------- */
.dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 1, 25, .14);
    background: var(--bg-surface);
    color: var(--text-primary);
    animation: citam-pop .16s ease both;
}
.dropdown-item { color: var(--text-primary); transition: background-color .15s ease, color .15s ease; }
.dropdown-item:hover { background: var(--info-bg); color: var(--info-text); }

@keyframes citam-pop {
    from { opacity: 0; transform: translateY(-4px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-content {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.modal.fade .modal-dialog { transition: transform .2s ease-out, opacity .2s ease-out; transform: translateY(8px) scale(.99); }
.modal.show .modal-dialog { transform: translateY(0) scale(1); }
.modal-header { border-bottom-color: var(--border); }
.modal-footer { border-top-color: var(--border); }

/* Alerts */
.alert { border-radius: var(--radius); }
.alert-success { background: var(--success-bg); color: var(--success-text); border-color: transparent; }
.alert-danger { background: var(--danger-bg); color: var(--danger-text); border-color: transparent; }
.alert-warning { background: var(--warning-bg); color: var(--warning-text); border-color: transparent; }
.alert-info { background: var(--info-bg); color: var(--info-text); border-color: transparent; }

/* Breadcrumbs */
.breadcrumb-item a { color: var(--text-secondary); }
.breadcrumb-item.active { color: var(--text-muted); }

/* ---------- Responsive niceties ---------- */
@media (max-width: 767.98px) {
    .page-content { padding-left: .25rem; padding-right: .25rem; }
    .card { border-radius: var(--radius); }
    .table-responsive { -webkit-overflow-scrolling: touch; }
    h4 { font-size: 1.1rem; }
}

/* ---------- Reduced motion: kill it all ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}