/* =====================================================================
   ZIQSY CMS — DESIGN SYSTEM (Elevate-Bootstrap layer)
   ---------------------------------------------------------------------
   Loaded AFTER bootstrap.min.css and the legacy theme.css so it can
   refine the look WITHOUT touching any markup, class names, ids or JS.
   Strategy: remap Bootstrap's own --bs-* custom properties to a cohesive
   token set anchored on the Ziqsy azure brand (#00AEEF), then add a thin
   layer of polish for global components + a dark mode.
   NOTHING here changes behaviour — purely presentational.
   ===================================================================== */

/* ------------------------------------------------------------------ *
 * 1. DESIGN TOKENS
 * ------------------------------------------------------------------ */
:root {
    /* Brand ramp (azure) — derived from the legacy #00AEEF signature */
    --zq-brand-50:  #e6f7fd;
    --zq-brand-100: #c2ecfb;
    --zq-brand-200: #8fdef7;
    --zq-brand-300: #54cdf2;
    --zq-brand-400: #21bcee;
    --zq-brand-500: #00aeef;   /* primary */
    --zq-brand-600: #008fc7;
    --zq-brand-700: #00719e;
    --zq-brand-800: #045a7c;
    --zq-brand-900: #0a4a66;

    /* Neutral ramp (slate) — consolidates the mixed greys in theme.css */
    --zq-slate-25:  #fbfcfe;
    --zq-slate-50:  #f8fafc;
    --zq-slate-100: #f1f5f9;
    --zq-slate-200: #e2e8f0;
    --zq-slate-300: #cbd5e1;
    --zq-slate-400: #94a3b8;
    --zq-slate-500: #64748b;
    --zq-slate-600: #475569;
    --zq-slate-700: #334155;
    --zq-slate-800: #1e293b;
    --zq-slate-900: #0f172a;

    /* Semantic accents */
    --zq-success: #10b981;
    --zq-success-strong: #047857; /* emerald-700: white text = 5.5:1 AA (was #059669 = 3.76 fail) */
    --zq-warning: #f59e0b;
    --zq-danger:  #ef4444;
    --zq-danger-strong: #dc2626;
    --zq-info:    #0ea5e9;

    /* Surface + text (light theme defaults) */
    --zq-bg:        var(--zq-slate-50);
    --zq-surface:   #ffffff;
    --zq-surface-2: var(--zq-slate-50);
    --zq-border:    var(--zq-slate-200);
    --zq-border-strong: var(--zq-slate-300);
    --zq-text:      var(--zq-slate-800);
    --zq-text-muted: #4d5d6e;              /* WCAG AA ~6.4:1 on light surfaces — crisper secondary text across the piece (was #5b6b7f 5.4:1, visually faint on white) */
    --zq-brand-ink:  var(--zq-brand-700);  /* azure TEXT on light-azure chips/alerts/headers (5.4:1) */
    --zq-link:       var(--zq-brand-700);  /* azure links + .text-primary on the page bg (5.4:1 light) */

    /* Typography scale */
    --zq-font-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --zq-font-display: 'Hanken Grotesk', 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --zq-fs-xs: .75rem;
    --zq-fs-sm: .8125rem;
    --zq-fs-md: .9375rem;
    --zq-fs-lg: 1.0625rem;
    --zq-lh:    1.5;

    /* Radii */
    --zq-radius-sm: .5rem;
    --zq-radius:    .75rem;
    --zq-radius-lg: 1rem;
    --zq-radius-pill: 999px;

    /* Layered elevation (soft, brand-tinted) */
    --zq-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --zq-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 6px rgba(15, 23, 42, .05);
    --zq-shadow-md: 0 2px 4px rgba(15, 23, 42, .04), 0 6px 16px rgba(15, 23, 42, .08);
    --zq-shadow-lg: 0 8px 24px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06);
    --zq-shadow-brand: 0 6px 18px rgba(0, 174, 239, .28);

    /* Hero spine — ONE premium banner treatment shared by every gradient hero
       (.app-header-card, .dashboard-header, per-view heroes). Deep navy→azure
       with a soft top-right bloom; white text on it clears WCAG AAA. Single
       source so the hero look can never drift per-view again. */
    --zq-hero-bg:
        radial-gradient(135% 175% at 86% -40%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 46%),
        linear-gradient(108deg, #06283d 0%, #0d6e93 56%, #00aeef 122%);
    --zq-hero-shadow: 0 14px 32px rgba(0, 78, 110, .26), 0 2px 6px rgba(6, 40, 61, .16);

    /* Motion */
    --zq-ease: cubic-bezier(.4, 0, .2, 1);
    --zq-dur: 180ms;

    /* ---- Remap Bootstrap so EVERY .btn/.card/.badge inherits the brand ---- */
    --bs-primary: var(--zq-brand-500);
    --bs-primary-rgb: 0, 174, 239;
    --bs-link-color: var(--zq-link);
    --bs-link-color-rgb: 0, 113, 158;
    --bs-link-hover-color: var(--zq-brand-700);
    --bs-border-color: var(--zq-border);
    --bs-border-radius: var(--zq-radius-sm);
    --bs-border-radius-sm: .4rem;
    --bs-border-radius-lg: var(--zq-radius);
    --bs-body-color: var(--zq-text);
    --bs-body-bg: var(--zq-bg);
    --bs-secondary-color: var(--zq-text-muted);
    --bs-emphasis-color: var(--zq-slate-900);
    --bs-font-sans-serif: var(--zq-font-sans);
}

/* ------------------------------------------------------------------ *
 * 2. BASE
 * ------------------------------------------------------------------ */
body {
    font-family: var(--zq-font-sans);
    color: var(--zq-text);
    background-color: var(--zq-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .1px;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--zq-font-display);
    font-weight: 700;
    letter-spacing: -.018em;
    color: var(--zq-slate-900);
}

.navbar-brand,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--zq-font-display);
    letter-spacing: -.02em;
}

::selection { background: var(--zq-brand-200); color: var(--zq-slate-900); }

a { transition: color var(--zq-dur) var(--zq-ease); }

/* Accessible, on-brand focus ring across the whole app */
:where(a, button, .btn, .form-control, .form-select, .form-check-input,
       .dropdown-item, [tabindex]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(0, 174, 239, .35) !important;
    border-color: var(--zq-brand-400) !important;
}

/* ------------------------------------------------------------------ *
 * 3. BUTTONS
 * ------------------------------------------------------------------ */
.btn {
    --bs-btn-font-weight: 600;
    border-radius: var(--zq-radius-sm);
    transition: transform var(--zq-dur) var(--zq-ease),
                box-shadow var(--zq-dur) var(--zq-ease),
                background-color var(--zq-dur) var(--zq-ease),
                border-color var(--zq-dur) var(--zq-ease),
                color var(--zq-dur) var(--zq-ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    /* brand-700 base so white label clears AA (5.44:1). brand-500 (#00aeef) is the
       signature azure but only 2.52:1 with white text — reserve it for large
       gradients/accents, not text-bearing buttons. */
    --bs-btn-bg: var(--zq-brand-700);
    --bs-btn-border-color: var(--zq-brand-700);
    --bs-btn-hover-bg: var(--zq-brand-800);
    --bs-btn-hover-border-color: var(--zq-brand-800);
    --bs-btn-active-bg: var(--zq-brand-800);
    --bs-btn-active-border-color: var(--zq-brand-800);
    --bs-btn-disabled-bg: var(--zq-brand-300);
    --bs-btn-disabled-border-color: var(--zq-brand-300);
    color: #fff;
}
.btn-primary:hover { box-shadow: var(--zq-shadow-brand); }

.btn-outline-primary {
    --bs-btn-color: var(--zq-brand-600);
    --bs-btn-border-color: var(--zq-brand-500);
    --bs-btn-hover-bg: var(--zq-brand-500);
    --bs-btn-hover-border-color: var(--zq-brand-500);
    --bs-btn-active-bg: var(--zq-brand-600);
}

.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--zq-border);
    --bs-btn-hover-bg: var(--zq-slate-50);
    --bs-btn-hover-border-color: var(--zq-border-strong);
}

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

/* ------------------------------------------------------------------ *
 * 4. CARDS
 * ------------------------------------------------------------------ */
.card {
    --bs-card-border-color: var(--zq-border);
    --bs-card-border-radius: var(--zq-radius);
    --bs-card-bg: var(--zq-surface);
    border-radius: var(--zq-radius);
    box-shadow: var(--zq-shadow-sm);
    transition: box-shadow var(--zq-dur) var(--zq-ease),
                transform var(--zq-dur) var(--zq-ease);
}
.card.shadow-sm { box-shadow: var(--zq-shadow-md) !important; }
/* Lift interactive cards (those wrapped in a link or carrying .card-hover) */
a > .card:hover,
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--zq-shadow-lg);
}
.card-header {
    --bs-card-cap-bg: transparent;
    border-bottom: 1px solid var(--zq-border);
    font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * 5. FORMS
 * ------------------------------------------------------------------ */
.form-control, .form-select {
    border-radius: var(--zq-radius-sm);
    border-color: var(--zq-border-strong);
    transition: border-color var(--zq-dur) var(--zq-ease),
                box-shadow var(--zq-dur) var(--zq-ease);
}
.form-control:focus, .form-select:focus {
    border-color: var(--zq-brand-400);
    box-shadow: 0 0 0 .2rem rgba(0, 174, 239, .18);
}
.input-group-text {
    background: var(--zq-slate-50);
    border-color: var(--zq-border-strong);
    color: var(--zq-text-muted);
}
.form-check-input:checked {
    background-color: var(--zq-brand-500);
    border-color: var(--zq-brand-500);
}

/* ------------------------------------------------------------------ *
 * 6. TABLES
 * ------------------------------------------------------------------ */
.table {
    --bs-table-color: var(--zq-text);
    --bs-table-border-color: var(--zq-border);
}
.table > thead {
    --bs-table-bg: var(--zq-slate-50);
}
.table > thead th {
    text-transform: uppercase;
    font-size: var(--zq-fs-xs);
    letter-spacing: .04em;
    color: var(--zq-text-muted);
    font-weight: 700;
    border-bottom: 1px solid var(--zq-border-strong);
}
.table-hover > tbody > tr {
    transition: background-color var(--zq-dur) var(--zq-ease);
}
.table-hover > tbody > tr:hover {
    --bs-table-hover-bg: var(--zq-brand-50);
}

/* ------------------------------------------------------------------ *
 * 7. BADGES & PILLS
 * ------------------------------------------------------------------ */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: .45rem; }
.rounded-pill { border-radius: var(--zq-radius-pill) !important; }

/* Subtle badge variants (used by the reconciliation page + elsewhere) */
.bg-primary-subtle  { background-color: var(--zq-brand-50)  !important; }
.text-primary       { color: var(--zq-link) !important; }
.bg-success-subtle  { background-color: #dcfce7 !important; }
.bg-warning-subtle  { background-color: #fef3c7 !important; }
.bg-danger-subtle   { background-color: #fee2e2 !important; }
.bg-info-subtle     { background-color: #e0f2fe !important; }

/* ------------------------------------------------------------------ *
 * 8. DROPDOWNS, ALERTS, MODALS
 * ------------------------------------------------------------------ */
.dropdown-menu {
    border: 1px solid var(--zq-border);
    border-radius: var(--zq-radius);
    box-shadow: var(--zq-shadow-lg);
    padding: .375rem;
}
.dropdown-item {
    border-radius: var(--zq-radius-sm);
    transition: background-color var(--zq-dur) var(--zq-ease);
}
.dropdown-item:active { background-color: var(--zq-brand-500); }

.alert { border: 1px solid transparent; border-radius: var(--zq-radius); }
.alert.shadow-sm { box-shadow: var(--zq-shadow-sm) !important; }

.modal-content {
    border: none;
    border-radius: var(--zq-radius-lg);
    box-shadow: var(--zq-shadow-lg);
}

/* ------------------------------------------------------------------ *
 * 9. UTILITIES used by the redesigned reconciliation view
 * ------------------------------------------------------------------ */
.dashboard-header {
    /* Shared hero spine (see --zq-hero-bg). Previously brand-500→brand-700, whose
       light #00aeef edge failed white-text contrast (2.5:1); the deep spine clears AAA. */
    background: var(--zq-hero-bg);
    border-radius: var(--zq-radius-lg);
    color: #fff;
    box-shadow: var(--zq-hero-shadow);
    overflow: hidden;
}
.dashboard-header .dashboard-title { font-weight: 700; }
.dashboard-header .dashboard-subtitle { color: rgba(255, 255, 255, .85); }
.btn-action { font-weight: 600; }

/* ------------------------------------------------------------------ *
 * 10. SCROLLBAR (webkit) — subtle, on-brand
 * ------------------------------------------------------------------ */
* { scrollbar-width: thin; scrollbar-color: var(--zq-slate-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: var(--zq-slate-300);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--zq-slate-400); background-clip: content-box; }

/* ------------------------------------------------------------------ *
 * 11. MOTION-REDUCE RESPECT
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------ *
 * 12. DARK MODE
 *   OPT-IN ONLY via <html data-bs-theme="dark">.
 *   Deliberately NOT triggered by prefers-color-scheme: the 25 legacy
 *   view groups still carry hard-coded light surfaces that are not yet
 *   dark-audited, so auto-flipping a dark-OS user would look broken.
 *   Wire a navbar toggle that sets data-bs-theme + localStorage to enable.
 * ------------------------------------------------------------------ */
[data-bs-theme="dark"] {
    --zq-bg:        var(--zq-slate-900);
    --zq-surface:   var(--zq-slate-800);
    --zq-surface-2: #243140;
    --zq-border:    #2c3a4d;
    --zq-border-strong: #3a4a5f;
    --zq-text:      var(--zq-slate-100);
    --zq-text-muted:var(--zq-slate-400);
    --zq-link:      var(--zq-brand-300);          /* light azure on dark page bg (8:1) */
    --bs-link-hover-color: var(--zq-brand-200);
    --bs-body-bg:   var(--zq-slate-900);
    --bs-body-color:var(--zq-slate-100);
}

/* ------------------------------------------------------------------ *
 * 13. EMPTY STATE  (canonical, reusable — <x-empty-state> / .zq-empty)
 *   One premium, on-brand "no data yet" pattern so every list/table view
 *   matches: a soft tinted disc holding a brand icon, a clear title,
 *   readable subtext (AA muted token), and room for one CTA. Token-driven
 *   → inherits dark mode automatically.
 * ------------------------------------------------------------------ */
.zq-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
    gap: .3rem;
}
.zq-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 1rem;
    border-radius: var(--zq-radius-lg);
    background: var(--zq-brand-50, #e6f7fd);
    color: var(--zq-brand-600, #008fc7);
    font-size: 2rem;
    line-height: 1;
    box-shadow: inset 0 0 0 1px rgba(0, 174, 239, .14);
}
.zq-empty__title {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.01em;
    color: var(--zq-text);
}
.zq-empty__text {
    margin: 0;
    max-width: 32rem;
    color: var(--zq-text-muted);
    font-size: .925rem;
    line-height: 1.55;
}
.zq-empty__actions {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
}
[data-bs-theme="dark"] .zq-empty__icon {
    background: rgba(0, 174, 239, .12);
    color: var(--zq-brand-200);
    box-shadow: inset 0 0 0 1px rgba(0, 174, 239, .22);
}

/* --- Legacy alias — upgrade every bespoke .empty-state to the canonical look ---
   The app shipped 3 conflicting .empty-state rules (theme.css) plus per-view
   variants: faint opacity:.4 bare-glyph icons and mixed padding. This single
   block maps the legacy markup — BOTH <div class="empty-state"><i>… and the
   .empty-state-icon / .empty-state-title / .empty-state-text variant — onto the
   same premium tinted-disc pattern as .zq-empty, so the long tail matches
   without editing 15+ views. !important: several competing .empty-state rules
   load AFTER this file (calendar-scheduling.css, per-view @stack <style>).
   Direct-child > i is scoped so a CTA button's icon inside the block is never
   turned into a disc. */
.empty-state {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem !important;
    gap: .3rem;
    color: var(--zq-text-muted) !important;
}
.empty-state > i,
.empty-state > .empty-state-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 4.5rem !important;
    height: 4.5rem !important;
    margin: 0 0 1rem !important;
    padding: 0 !important;
    border-radius: var(--zq-radius-lg);
    background: var(--zq-brand-50, #e6f7fd) !important;
    color: var(--zq-brand-600, #008fc7) !important;
    font-size: 2rem !important;
    line-height: 1 !important;
    opacity: 1 !important;
    box-shadow: inset 0 0 0 1px rgba(0, 174, 239, .14);
}
.empty-state > .empty-state-icon > i {
    font-size: inherit !important;
    color: inherit !important;
    opacity: 1 !important;
    margin: 0 !important;
}
.empty-state h3,
.empty-state h4,
.empty-state .empty-state-title {
    margin: 0 !important;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.01em;
    color: var(--zq-text) !important;
}
.empty-state p,
.empty-state .empty-state-text {
    margin: 0 auto !important;
    max-width: 32rem;
    color: var(--zq-text-muted) !important;
    font-size: .925rem;
    line-height: 1.55;
}
.empty-state .btn {
    margin-top: 1.25rem !important;
}
/* Keep CTA / link / button icons INSIDE an empty-state normal-sized — the legacy
   ".empty-state i" descendant rules (theme.css 3rem/opacity .4) otherwise inflate
   them into oversized faded glyphs that stack above the button label. Margin is
   left untouched so utilities like .me-2 keep the icon↔label gap. */
.empty-state .btn i,
.empty-state a i,
.empty-state button i {
    width: auto !important;
    height: auto !important;
    font-size: 1em !important;
    line-height: inherit !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: inherit !important;
    opacity: 1 !important;
    display: inline-block !important;
    padding: 0 !important;
}
[data-bs-theme="dark"] .empty-state > i,
[data-bs-theme="dark"] .empty-state > .empty-state-icon {
    background: rgba(0, 174, 239, .12) !important;
    color: var(--zq-brand-200) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 174, 239, .22);
}

/* --- Dashboard stat-card accents — calm the rainbow onto one brand family ---
   super-admin/dashboard (8 cards) and hr/dashboard (6 cards) shipped saturated
   per-card --card-color hexes (#dc3545, #ffc107, #28a745, #9c27b0, …) that
   painted a fully-filled .stat-icon chip + a corner ::before bloom in a
   different hue on every card — a literal rainbow. This converges them onto the
   same canonical tinted-azure disc used by the empty states and the manager
   dashboard .stat-icon-big, so the chips read as one cohesive brand set
   differentiated only by glyph. Scoped to the two dashboards — the base
   .stat-icon / .stat-card class is shared by finance + admin views, which keep
   their own treatment. Specificity (0,2,0)/(0,2,1) beats base .stat-icon (0,1,0)
   and .stat-card::before (0,1,1) — including super-admin's inline <style>
   duplicate — so no !important is needed. The inline --card-color props are now
   inert (nothing references them) and are removed from the two blades. */
.super-admin-dashboard .stat-icon,
.hr-dashboard .stat-icon {
    background: var(--zq-brand-50, #e6f7fd);
    color: var(--zq-brand-700, #00719e);
    box-shadow: inset 0 0 0 1px rgba(0, 174, 239, .16);
}
.super-admin-dashboard .stat-card::before,
.hr-dashboard .stat-card::before {
    background: var(--zq-brand-500, #00aeef);
}
[data-bs-theme="dark"] .super-admin-dashboard .stat-icon,
[data-bs-theme="dark"] .hr-dashboard .stat-icon {
    background: rgba(0, 174, 239, .12);
    color: var(--zq-brand-200);
    box-shadow: inset 0 0 0 1px rgba(0, 174, 239, .22);
}