/* =====================================================================
   ZIQSY CMS — UI REFRESH (global consistency polish layer)
   ---------------------------------------------------------------------
   PURPOSE
     A purely-additive, presentational layer that enforces a single,
     consistent visual language across every INNER page of the CMS:
     typography scale, buttons, form controls, badges, cards and tables.
     Its job is to make even the old "novice" markup (full-saturation
     coloured card headers, .form-control on <select>, 274 hardcoded
     px font-sizes, inline styles) read as calm, modern and cohesive —
     WITHOUT requiring any markup, class, id or JS change.

   LOAD ORDER (must be LAST of the global stylesheets)
     1. bootstrap.min.css
     2. theme.css           (legacy 5.3k-line system — overridden here)
     3. design-system.css   (canonical --zq-* token layer)
     4. components/sidebar.css
     5. ui-refresh.css       <-- THIS FILE wins where it sets rules

   RULES OF ENGAGEMENT
     • Uses ONLY the existing --zq-* design tokens (with safe fallbacks).
       No new brand hex values are introduced.
     • Never sets a global body font-size that fights design-system.css;
       the type scale is established via headings, .h1–.h6, labels,
       table cells, .form-label, .btn and .badge instead.
     • Hands-off zones — NOT touched / never selected here:
         - the home dashboard  (anything matching .dash2*)
         - the left sidebar    (.app-sidebar, .app-nav-*, .zq-* shell)
         - the fixed top header (.top-header)
       Aggressive rules are scoped to Bootstrap component classes so the
       shell cannot regress.
   ===================================================================== */

/* ------------------------------------------------------------------ *
 * 0. LOCAL ALIASES
 *    Re-expose a couple of subtle tints as tokens so the rest of the
 *    file never hardcodes a hex. These mirror values already present
 *    in design-system.css.
 * ------------------------------------------------------------------ */
:root {
    --zq-success-soft: #ecfdf5;
    --zq-success-ink:  #047857;
    --zq-warning-soft: #fffbeb;
    --zq-warning-ink:  #b45309;
    --zq-danger-soft:  #fef2f2;
    --zq-danger-ink:   #b91c1c;
    --zq-info-soft:    #eff6ff;
    --zq-info-ink:     #0369a1;
    --zq-brand-soft:   var(--zq-brand-50, #e6f7fd);
    --zq-brand-ink:    var(--zq-brand-700, #00719e);
}

/* ------------------------------------------------------------------ *
 * 1. TYPOGRAPHY SCALE
 *    Establish a calm, consistent hierarchy WITHOUT a global body
 *    font-size. We only normalise the building blocks that vary wildly
 *    across the 25 legacy view groups. The sidebar/header/dashboard are
 *    excluded because we only style content-region Bootstrap classes.
 * ------------------------------------------------------------------ */

/* Display headings — reaffirm display font + a tighter, deliberate ramp.
   Bare h-tags are safe: the shell uses its own .app-* / .dash2* classes. */
h1, .h1 { font-size: clamp(1.5rem, 1.2rem + .9vw, 1.75rem); line-height: 1.25; }
h2, .h2 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.5rem);  line-height: 1.3; }
h3, .h3 { font-size: 1.25rem;  line-height: 1.35; }
h4, .h4 { font-size: 1.0625rem; line-height: 1.4; }   /* matches --zq-fs-lg */
h5, .h5 { font-size: var(--zq-fs-md, .9375rem); line-height: 1.45; font-weight: 700; }
h6, .h6 { font-size: var(--zq-fs-sm, .8125rem); line-height: 1.5;  font-weight: 700;
          letter-spacing: .01em; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--zq-font-display, 'Plus Jakarta Sans', 'Inter', sans-serif);
}

/* Card-title / lead inside content cards — consistent weight + colour */
.card-title { font-family: var(--zq-font-display, 'Plus Jakarta Sans', sans-serif);
              font-weight: 700; color: var(--zq-slate-900, #0f172a); }
.card-subtitle { color: var(--zq-text-muted, #64748b); font-size: var(--zq-fs-sm, .8125rem); }

/* Muted / fine print — unify the many ad-hoc <small> + .text-muted sizes */
small, .small { font-size: var(--zq-fs-sm, .8125rem); }
.text-muted { color: var(--zq-text-muted, #64748b) !important; }

/* Section / page heading helper (legacy + design-system .page-title) */
.page-title,
.section-title {
    font-family: var(--zq-font-display, 'Plus Jakarta Sans', sans-serif);
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--zq-slate-900, #0f172a);
    line-height: 1.25;
}

/* ------------------------------------------------------------------ *
 * 2. FORM LABELS & HELP TEXT
 * ------------------------------------------------------------------ */
.form-label,
.col-form-label {
    font-size: var(--zq-fs-sm, .8125rem);
    font-weight: 600;
    color: var(--zq-slate-700, #334155);
    margin-bottom: .375rem;
    letter-spacing: .005em;
}
.form-text { font-size: var(--zq-fs-xs, .75rem); color: var(--zq-text-muted, #64748b); }
.form-check-label { font-size: var(--zq-fs-md, .9375rem); }
/* Dark mode: the light base sets labels to slate-700 (#334155 ≈ 1.7:1 on the
   Eclipse canvas). Lift them onto the dark text token so every form is legible. */
html[data-bs-theme="dark"] .form-label,
html[data-bs-theme="dark"] .col-form-label { color: var(--zq-text, #e7ecf3); }

/* Dark mode: legacy .btn-outline-secondary hardcodes color:var(--text-color)=#2c3e50
   (≈1.6:1 on the Eclipse canvas — invisible). Lift onto dark text + border tokens. */
html[data-bs-theme="dark"] .btn-outline-secondary {
  color: var(--zq-text, #e7ecf3);
  border-color: var(--zq-border-strong, var(--zq-border, #2a3344));
}
html[data-bs-theme="dark"] .btn-outline-secondary:hover,
html[data-bs-theme="dark"] .btn-outline-secondary:focus {
  color: #fff;
  background-color: var(--zq-slate-600, #475569);
  border-color: var(--zq-slate-600, #475569);
}

/* ------------------------------------------------------------------ *
 * 3. BUTTONS — one consistent size, radius, weight
 * ------------------------------------------------------------------ */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: var(--zq-fs-sm, .8125rem);
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: .95rem;
    --bs-btn-border-radius: var(--zq-radius-sm, .5rem);
    border-radius: var(--zq-radius-sm, .5rem);
    letter-spacing: .005em;
    line-height: 1.4;
}
.btn-sm {
    --bs-btn-font-size: var(--zq-fs-xs, .75rem);
    --bs-btn-padding-y: .3rem;
    --bs-btn-padding-x: .65rem;
    --bs-btn-border-radius: .4rem;
    border-radius: .4rem;
}
.btn-lg {
    --bs-btn-font-size: var(--zq-fs-md, .9375rem);
    --bs-btn-padding-y: .65rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-border-radius: var(--zq-radius, .75rem);
    border-radius: var(--zq-radius, .75rem);
}

/* Icons inside buttons sit tidily next to the label (covers <i class="fas">) */
.btn > i,
.btn > .fa,
.btn > .fas,
.btn > .far,
.btn > svg { margin-right: .4em; }
.btn > i:only-child,
.btn > .fa:only-child,
.btn > .fas:only-child,
.btn > svg:only-child { margin-right: 0; }

/* Tame the loud legacy "secondary" grey to a neutral, on-system button */
.btn-secondary {
    --bs-btn-bg: var(--zq-surface, #fff);
    --bs-btn-color: var(--zq-slate-700, #334155);
    --bs-btn-border-color: var(--zq-border-strong, #cbd5e1);
    --bs-btn-hover-bg: var(--zq-slate-50, #f8fafc);
    --bs-btn-hover-color: var(--zq-slate-900, #0f172a);
    --bs-btn-hover-border-color: var(--zq-slate-400, #94a3b8);
    --bs-btn-active-bg: var(--zq-slate-100, #f1f5f9);
    --bs-btn-active-color: var(--zq-slate-900, #0f172a);
}

/* Dark-mode parity for the neutral secondary button: the light tokens above
   (slate-700 ink on a surface fill) render dark-on-dark under Eclipse. Give it
   readable ink + a visible fill, mirroring .btn-outline-secondary. */
html[data-bs-theme="dark"] .btn-secondary {
    --bs-btn-bg: var(--zq-surface-2, #1d2433);
    --bs-btn-color: var(--zq-text, #e7ecf3);
    --bs-btn-border-color: var(--zq-border-strong, #2a3344);
    --bs-btn-hover-bg: var(--zq-slate-600, #475569);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--zq-slate-600, #475569);
    --bs-btn-active-bg: var(--zq-slate-700, #334155);
    --bs-btn-active-color: #fff;
}

/* Dark-mode parity for legacy hand-rolled card/section surfaces that hard-code a
   light background (e.g. .user-card #f8f9fa, .task-card #fff + light priority
   gradients, .role-section #fff). Without this the global text-lightening leaves
   their content (and headings) light-on-light under Eclipse. */
html[data-bs-theme="dark"] .user-card,
html[data-bs-theme="dark"] .task-card,
html[data-bs-theme="dark"] .task-card[data-priority="High"],
html[data-bs-theme="dark"] .task-card[data-priority="Medium"],
html[data-bs-theme="dark"] .task-card[data-priority="Low"],
html[data-bs-theme="dark"] .role-section {
    background: var(--zq-surface, #161c2b) !important;
    border-color: var(--zq-border, #2a3344) !important;
}

/* ------------------------------------------------------------------ *
 * 4. FORM CONTROLS — consistent height, radius, brand focus ring
 *    Critically: legacy pages put .form-control on <select>; Bootstrap
 *    only auto-styles .form-select. We give <select> the chevron + sizing
 *    so it matches real selects with no markup change.
 * ------------------------------------------------------------------ */
.form-control,
.form-select {
    font-size: var(--zq-fs-md, .9375rem);
    padding: .5rem .75rem;
    border-radius: var(--zq-radius-sm, .5rem);
    border-color: var(--zq-border-strong, #cbd5e1);
    color: var(--zq-text, #1e293b);
    background-color: var(--zq-surface, #fff);
    transition: border-color var(--zq-dur, 180ms) var(--zq-ease, ease),
                box-shadow var(--zq-dur, 180ms) var(--zq-ease, ease);
}
.form-control::placeholder { color: var(--zq-slate-400, #94a3b8); }

.form-control:focus,
.form-select:focus {
    border-color: var(--zq-brand-400, #21bcee);
    box-shadow: 0 0 0 .2rem rgba(0, 174, 239, .18);
}

/* Make <select class="form-control"> look like a proper select control */
select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.25rem;
    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='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 14px 11px;
}
select.form-control[multiple],
select.form-control[size]:not([size="1"]) { background-image: none; padding-right: .75rem; }

.form-control-sm,
.form-select-sm { font-size: var(--zq-fs-sm, .8125rem); padding: .35rem .6rem; border-radius: .4rem; }
.form-control-lg,
.form-select-lg { font-size: var(--zq-fs-lg, 1.0625rem); padding: .65rem .9rem;
                  border-radius: var(--zq-radius, .75rem); }

textarea.form-control { min-height: 4.5rem; line-height: 1.5; }

/* Input groups — align addon styling with the new control look */
.input-group-text {
    font-size: var(--zq-fs-sm, .8125rem);
    background: var(--zq-slate-50, #f8fafc);
    border-color: var(--zq-border-strong, #cbd5e1);
    color: var(--zq-text-muted, #64748b);
}

/* Toggles / checks pick up the brand tint */
.form-check-input:checked {
    background-color: var(--zq-brand-500, #00aeef);
    border-color: var(--zq-brand-500, #00aeef);
}
.form-check-input:focus {
    border-color: var(--zq-brand-400, #21bcee);
    box-shadow: 0 0 0 .2rem rgba(0, 174, 239, .18);
}

/* ------------------------------------------------------------------ *
 * 5. CARDS — refined surface + tasteful tinted headers
 *    The big win: bg-success / bg-primary / bg-info / bg-warning /
 *    bg-danger .card-header bars become soft tinted headers with an
 *    accent ink + left keyline instead of loud full-saturation bands.
 * ------------------------------------------------------------------ */
.card {
    --bs-card-border-color: var(--zq-border, #e2e8f0);
    --bs-card-border-radius: var(--zq-radius, .75rem);
    --bs-card-bg: var(--zq-surface, #fff);
    border: 1px solid var(--zq-border, #e2e8f0);
    border-radius: var(--zq-radius, .75rem);
    box-shadow: var(--zq-shadow-sm, 0 1px 2px rgba(15, 23, 42, .04));
}
.card.shadow,
.card.shadow-sm { box-shadow: var(--zq-shadow-md, 0 2px 4px rgba(15, 23, 42, .04)) !important; }

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--zq-border, #e2e8f0);
    padding: .875rem 1.1rem;
    font-weight: 600;
    color: var(--zq-slate-900, #0f172a);
}
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 { margin-bottom: 0; }

.card-body { padding: 1.1rem; }
.card-footer {
    background-color: var(--zq-slate-25, #fbfcfe);
    border-top: 1px solid var(--zq-border, #e2e8f0);
    padding: .875rem 1.1rem;
}

/* --- Tasteful tinted coloured headers (kills the loud full-sat bars) --- */
/* These selectors are intentionally specific to a .card-header carrying a
   Bootstrap bg-* utility, so we override the utility's !important reliably. */
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-info,
.card-header.bg-warning,
.card-header.bg-danger,
.card-header.bg-secondary,
.card-header.bg-dark {
    color: var(--zq-slate-900, #0f172a) !important;
    border-bottom: 1px solid var(--zq-border, #e2e8f0);
    border-left: 3px solid transparent;
    text-shadow: none;
}
/* Force the text colour of nested headings/icons back to readable ink */
.card-header.bg-primary :where(h1,h2,h3,h4,h5,h6,i,.text-white,small),
.card-header.bg-success :where(h1,h2,h3,h4,h5,h6,i,.text-white,small),
.card-header.bg-info    :where(h1,h2,h3,h4,h5,h6,i,.text-white,small),
.card-header.bg-warning :where(h1,h2,h3,h4,h5,h6,i,.text-white,small),
.card-header.bg-danger  :where(h1,h2,h3,h4,h5,h6,i,.text-white,small),
.card-header.bg-secondary :where(h1,h2,h3,h4,h5,h6,i,.text-white,small),
.card-header.bg-dark    :where(h1,h2,h3,h4,h5,h6,i,.text-white,small) {
    color: inherit !important;
}

.card-header.bg-primary { background-color: var(--zq-brand-soft) !important;
    border-left-color: var(--zq-brand-500, #00aeef); color: var(--zq-brand-ink) !important; }
.card-header.bg-primary :where(h1,h2,h3,h4,h5,h6,i) { color: var(--zq-brand-ink) !important; }

.card-header.bg-success { background-color: var(--zq-success-soft) !important;
    border-left-color: var(--zq-success, #10b981); color: var(--zq-success-ink) !important; }
.card-header.bg-success :where(h1,h2,h3,h4,h5,h6,i) { color: var(--zq-success-ink) !important; }

.card-header.bg-info { background-color: var(--zq-info-soft) !important;
    border-left-color: var(--zq-info, #0ea5e9); color: var(--zq-info-ink) !important; }
.card-header.bg-info :where(h1,h2,h3,h4,h5,h6,i) { color: var(--zq-info-ink) !important; }

.card-header.bg-warning { background-color: var(--zq-warning-soft) !important;
    border-left-color: var(--zq-warning, #f59e0b); color: var(--zq-warning-ink) !important; }
.card-header.bg-warning :where(h1,h2,h3,h4,h5,h6,i) { color: var(--zq-warning-ink) !important; }

.card-header.bg-danger { background-color: var(--zq-danger-soft) !important;
    border-left-color: var(--zq-danger, #ef4444); color: var(--zq-danger-ink) !important; }
.card-header.bg-danger :where(h1,h2,h3,h4,h5,h6,i) { color: var(--zq-danger-ink) !important; }

.card-header.bg-secondary,
.card-header.bg-dark { background-color: var(--zq-slate-100, #f1f5f9) !important;
    border-left-color: var(--zq-slate-400, #94a3b8); color: var(--zq-slate-700, #334155) !important; }
.card-header.bg-secondary :where(h1,h2,h3,h4,h5,h6,i),
.card-header.bg-dark :where(h1,h2,h3,h4,h5,h6,i) { color: var(--zq-slate-700, #334155) !important; }

/* Coloured "outline" cards (e.g. .card.border-primary) — soften to a hairline */
.card.border-primary { border-color: var(--zq-brand-200, #8fdef7) !important; }
.card.border-success { border-color: #a7f3d0 !important; }
.card.border-info    { border-color: #bae6fd !important; }
.card.border-warning { border-color: #fde68a !important; }
.card.border-danger  { border-color: #fecaca !important; }

/* The ubiquitous ".card.bg-light" summary panels — quiet surface */
.card.bg-light { background-color: var(--zq-slate-50, #f8fafc) !important;
                 border-color: var(--zq-border, #e2e8f0); }

/* ------------------------------------------------------------------ *
 * 6. TABLES — consistent header, comfortable cells, gentle hover
 * ------------------------------------------------------------------ */
.table {
    --bs-table-color: var(--zq-text, #1e293b);
    --bs-table-border-color: var(--zq-border, #e2e8f0);
    font-size: var(--zq-fs-sm, .8125rem);
    margin-bottom: 0;
}
.table > :not(caption) > * > * { padding: .7rem .85rem; vertical-align: middle; }

.table > thead > tr > th,
.table > thead > tr > td {
    background-color: var(--zq-slate-50, #f8fafc);
    text-transform: uppercase;
    font-size: var(--zq-fs-xs, .75rem);
    letter-spacing: .04em;
    color: var(--zq-text-muted, #64748b);
    font-weight: 700;
    border-bottom: 1px solid var(--zq-border-strong, #cbd5e1);
    white-space: nowrap;
}

.table > tbody > tr > td { color: var(--zq-text, #1e293b); }

.table-hover > tbody > tr { transition: background-color var(--zq-dur, 180ms) var(--zq-ease, ease); }
.table-hover > tbody > tr:hover { --bs-table-hover-bg: var(--zq-brand-50, #e6f7fd); }

/* Borderless summary tables (used in the budget/income view) stay airy */
.table-borderless > :not(caption) > * > * { padding: .4rem .5rem; }

/* Cards that wrap a table: let the table meet the card edges cleanly */
.card > .table,
.card > .table-responsive > .table { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * 7. BADGES & PILLS — pill shape, token colours, readable on tint
 * ------------------------------------------------------------------ */
.badge {
    font-size: var(--zq-fs-xs, .75rem);
    font-weight: 600;
    letter-spacing: .01em;
    padding: .35em .6em;
    border-radius: var(--zq-radius-pill, 999px);
    line-height: 1.4;
    vertical-align: middle;
}

/* Solid badge variants → AA-safe token fills (white ink ≥4.5:1).
   Use the deeper brand/status shades so #fff text clears WCAG AA on the
   12px badge type: brand-500 #00aeef (2.5:1) → brand-700 #00719e (5.4:1);
   success/info/danger likewise deepened. bg-warning keeps dark ink on amber. */
.badge.bg-primary   { background-color: var(--zq-brand-700, #00719e) !important; color: #fff; }
.badge.bg-success   { background-color: var(--zq-success-strong, #047857) !important; color: #fff; }
.badge.bg-info      { background-color: var(--zq-info-strong, #0369a1) !important; color: #fff; }
.badge.bg-warning   { background-color: var(--zq-warning, #f59e0b) !important; color: #1f2937 !important; }
.badge.bg-danger    { background-color: var(--zq-danger-strong, #dc2626) !important; color: #fff; }
.badge.bg-secondary { background-color: var(--zq-slate-600, #475569) !important; color: #fff; }
.badge.bg-light     { background-color: var(--zq-slate-100, #f1f5f9) !important;
                      color: var(--zq-slate-700, #334155); }
.badge.bg-dark      { background-color: var(--zq-slate-800, #1e293b) !important; color: #fff; }

/* Soft "subtle" badge variants — preferred modern status chip look */
.badge.bg-primary-subtle { background-color: var(--zq-brand-50, #e6f7fd) !important;
                           color: var(--zq-brand-700, #00719e) !important; }
.badge.bg-success-subtle { background-color: var(--zq-success-soft) !important;
                           color: var(--zq-success-ink) !important; }
.badge.bg-info-subtle    { background-color: var(--zq-info-soft) !important;
                           color: var(--zq-info-ink) !important; }
.badge.bg-warning-subtle { background-color: var(--zq-warning-soft) !important;
                           color: var(--zq-warning-ink) !important; }
.badge.bg-danger-subtle  { background-color: var(--zq-danger-soft) !important;
                           color: var(--zq-danger-ink) !important; }

/* Dark mode: keep dark ink on amber chips. The layout's .text-dark dark
   safety-net (html[data-bs-theme=dark] .text-dark) would otherwise lighten
   badge text to near-white and tank contrast on the amber fill. */
html[data-bs-theme="dark"] .badge.bg-warning,
html[data-bs-theme="dark"] .legend-badge.bg-warning { color: #1f2937 !important; }

/* ------------------------------------------------------------------ *
 * 8. TABS (.nav-tabs) — quieter underline-style tabs
 * ------------------------------------------------------------------ */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--zq-border, #e2e8f0);
    border-bottom: 1px solid var(--zq-border, #e2e8f0);
    gap: .25rem;
}
.nav-tabs .nav-link {
    font-size: var(--zq-fs-sm, .8125rem);
    font-weight: 600;
    color: var(--zq-text-muted, #64748b);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .6rem .9rem;
    transition: color var(--zq-dur, 180ms) var(--zq-ease, ease),
                border-color var(--zq-dur, 180ms) var(--zq-ease, ease);
}
.nav-tabs .nav-link:hover { color: var(--zq-slate-900, #0f172a); border-bottom-color: var(--zq-border-strong, #cbd5e1); }
.nav-tabs .nav-link.active {
    color: var(--zq-brand-600, #008fc7);
    background: transparent;
    border-bottom-color: var(--zq-brand-500, #00aeef);
}

/* Pill nav (.nav-pills) brand tint for the active item */
.nav-pills .nav-link {
    font-size: var(--zq-fs-sm, .8125rem);
    font-weight: 600;
    color: var(--zq-text-muted, #64748b);
    border-radius: var(--zq-radius-sm, .5rem);
}
.nav-pills .nav-link.active { background-color: var(--zq-brand-500, #00aeef); color: #fff; }

/* ------------------------------------------------------------------ *
 * 9. ALERTS — align with soft token palette + radius
 * ------------------------------------------------------------------ */
.alert {
    border: 1px solid transparent;
    border-radius: var(--zq-radius, .75rem);
    font-size: var(--zq-fs-sm, .8125rem);
    padding: .8rem 1rem;
}
.alert > i,
.alert > .fa,
.alert > .fas { margin-right: .4em; }
.alert-primary { background: var(--zq-brand-50, #e6f7fd); color: var(--zq-brand-ink); border-color: var(--zq-brand-200, #8fdef7); }
.alert-success { background: var(--zq-success-soft); color: var(--zq-success-ink); border-color: #a7f3d0; }
.alert-info    { background: var(--zq-info-soft);    color: var(--zq-info-ink);    border-color: #bae6fd; }
.alert-warning { background: var(--zq-warning-soft); color: var(--zq-warning-ink); border-color: #fde68a; }
.alert-danger  { background: var(--zq-danger-soft);  color: var(--zq-danger-ink);  border-color: #fecaca; }

/* ------------------------------------------------------------------ *
 * 10. SMALL TYPOGRAPHIC UTILITIES used across content pages
 * ------------------------------------------------------------------ */
.text-primary { color: var(--zq-link, #00719e) !important; }
.text-success { color: var(--zq-success-strong, #059669) !important; }
.text-danger  { color: var(--zq-danger-strong, #dc2626) !important; }
.text-warning { color: var(--zq-warning-ink) !important; }
.text-info    { color: var(--zq-info-ink) !important; }

/* Links inside content read calm + on-brand (shell links use .app-* classes) */
.card a:not(.btn):not(.nav-link):not(.badge),
.content a:not(.btn):not(.nav-link):not(.badge) {
    color: var(--zq-link, #00719e);
    text-decoration-color: rgba(0, 174, 239, .45);
}

/* ------------------------------------------------------------------ *
 * 11. SKIP LINK — keyboard users jump straight to <main id="zqMain">
 * ------------------------------------------------------------------ */
.zq-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: .65rem 1.1rem;
    background: var(--zq-brand-700, #00719e);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 var(--zq-radius-sm, .5rem) 0;
    box-shadow: var(--zq-shadow-md);
    text-decoration: none;
}
.zq-skip-link:focus {
    left: 0;
    outline: 3px solid #fff;
    outline-offset: -3px;
}

/* ------------------------------------------------------------------ *
 * 12. PAGE CHROME — shared header, card, and tab patterns
 *     Covers the common components used across 180+ views that aren't
 *     yet in the dedicated per-view CSS files. All token-only.
 * ------------------------------------------------------------------ */

/* --- 12a. .header-section --- premium hero banner used across many inner pages
   (admin/users, hr/employees, super-admin/roles, budget/*, etc.)
   The class predates .zq-page-header and .page-header; all three coexist.
   This is purely additive: existing pages with inline CSS keep their style;
   pages that have NO local override pick this up and immediately look cohesive. */
.header-section {
    background: var(--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%));
    border-radius: var(--zq-radius-lg, 1rem);
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
    color: #fff;
    box-shadow: var(--zq-hero-shadow, 0 14px 32px rgba(0,78,110,.26), 0 2px 6px rgba(6,40,61,.16));
    position: relative;
    overflow: hidden;
}
/* Subtle top-right luminance bloom for depth */
.header-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.12) 0%, transparent 55%);
    pointer-events: none;
}
.header-section .page-title,
.header-section h1,
.header-section h2 {
    color: #fff;
    margin-bottom: .35rem;
    position: relative;
    z-index: 1;
}
.header-section .page-subtitle,
.header-section > p,
.header-section .lead {
    color: rgba(255,255,255,.85);
    margin-bottom: 0;
    font-size: var(--zq-fs-md, .9375rem);
    position: relative;
    z-index: 1;
}
/* Badges sitting on the gradient */
.header-section .badge.bg-primary { background: rgba(255,255,255,.18) !important; color: #fff !important; }
.header-section .badge-pending     { background: rgba(245,158,11,.25) !important;  color: #fef3c7 !important; border: 1px solid rgba(245,158,11,.4) !important; }

/* Action buttons on the gradient — frosted glass treatment */
.header-section .btn-primary,
.header-section .btn-outline-primary,
.header-section .btn-secondary {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.35);
    color: #fff;
    font-weight: 600;
    position: relative;
    z-index: 1;
}
.header-section .btn-primary:hover,
.header-section .btn-outline-primary:hover,
.header-section .btn-secondary:hover {
    background: rgba(255,255,255,.28);
    border-color: rgba(255,255,255,.6);
    color: #fff;
}
.header-section .btn-outline-success {
    background: rgba(16,185,129,.15);
    border-color: rgba(16,185,129,.45);
    color: #fff;
    position: relative; z-index: 1;
}
.header-section .btn-outline-success:hover { background: rgba(16,185,129,.28); color: #fff; }
.header-section .btn-light {
    background: rgba(255,255,255,.95);
    border-color: rgba(255,255,255,.9);
    color: var(--zq-brand-700, #00719e);
    font-weight: 600;
    position: relative; z-index: 1;
}
.header-section .btn-light:hover {
    background: #fff;
    color: var(--zq-brand-800, #045a7c);
}

/* Button groups inside the header */
.header-button-group,
.header-actions-group {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    z-index: 1;
}
@media (max-width: 575.98px) {
    .header-section { padding: 1.25rem 1.25rem; }
    .header-button-group,
    .header-actions-group { width: 100%; }
    .header-button-group .btn,
    .header-actions-group .btn { flex: 1 1 auto; }
}

/* --- 12b. .modern-card --- enhanced card variant for page content sections */
.modern-card {
    border: 1px solid var(--zq-border, #e2e8f0);
    border-radius: var(--zq-radius-lg, 1rem);
    box-shadow: var(--zq-shadow-sm);
    transition: box-shadow var(--zq-dur, 180ms) var(--zq-ease, ease);
    overflow: hidden;
    background: var(--zq-surface, #fff);
}
.modern-card:hover { box-shadow: var(--zq-shadow-md); }

/* --- 12c. .nav-tabs-modern --- pill-style horizontal tabs with count chips */
.nav-tabs-modern {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    border: none;
    padding: 0;
    margin: 0;
    list-style: none;
}
.nav-tabs-modern .nav-item { list-style: none; }
.nav-tabs-modern .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem;
    border: 1.5px solid transparent;
    border-radius: var(--zq-radius-sm, .5rem);
    font-size: var(--zq-fs-sm, .8125rem);
    font-weight: 600;
    color: var(--zq-text-muted, #64748b);
    background: transparent;
    cursor: pointer;
    transition: color var(--zq-dur, 180ms) var(--zq-ease, ease),
                background var(--zq-dur, 180ms) var(--zq-ease, ease),
                border-color var(--zq-dur, 180ms) var(--zq-ease, ease);
    white-space: nowrap;
    line-height: 1.4;
}
.nav-tabs-modern .nav-link:hover {
    color: var(--zq-text, #1e293b);
    background: var(--zq-slate-100, #f1f5f9);
    border-color: var(--zq-border, #e2e8f0);
}
.nav-tabs-modern .nav-link.active {
    color: var(--zq-brand-700, #00719e);
    background: var(--zq-brand-50, #e6f7fd);
    border-color: var(--zq-brand-200, #8fdef7);
}

/* Count chips inside tabs */
.tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    padding: .1em .4em;
    border-radius: var(--zq-radius-pill, 999px);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.4;
    background: var(--zq-slate-200, #e2e8f0);
    color: var(--zq-slate-600, #475569);
    transition: background var(--zq-dur, 180ms) var(--zq-ease, ease),
                color var(--zq-dur, 180ms) var(--zq-ease, ease);
}
.nav-tabs-modern .nav-link.active .tab-count {
    background: var(--zq-brand-200, #8fdef7);
    color: var(--zq-brand-800, #045a7c);
}
.tab-count.pending-count-bg  { background: rgba(245,158,11,.15); color: #b45309; }
.tab-count.approved-count-bg { background: var(--zq-success-soft, #ecfdf5); color: var(--zq-success-ink, #047857); }
.tab-count.rejected-count-bg { background: var(--zq-danger-soft, #fef2f2);  color: var(--zq-danger-ink, #b91c1c); }

/* Pending badge with animated attention pulse */
@keyframes zq-attention-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .45); }
    60%       { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); }
}
.badge-pending {
    display: inline-flex;
    align-items: center;
    padding: .25em .65em;
    border-radius: var(--zq-radius-pill, 999px);
    font-size: var(--zq-fs-xs, .75rem);
    font-weight: 700;
    background: rgba(245,158,11,.14);
    color: #b45309;
    border: 1px solid rgba(245,158,11,.32);
    vertical-align: middle;
}
.badge-pending.pulse { animation: zq-attention-pulse 2.2s ease-in-out infinite; }

/* --- 12d. Table toolbar / filter bar  ---
   Scoped to common class names that appear before data tables on listing pages.
   Ensures the search input + filter chips + action buttons look cohesive even when
   the surrounding card has no bespoke styling. */
.table-toolbar,
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1.1rem;
    background: var(--zq-surface, #fff);
    border-bottom: 1px solid var(--zq-border, #e2e8f0);
}
.table-toolbar .input-group,
.filter-bar .input-group { flex: 1 1 15rem; max-width: 26rem; }

/* --- 12e. Empty state ---
   Shown when a table or list has no rows. Centres a muted icon + message. */
.empty-state-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--zq-text-muted, #64748b);
}
.empty-state-block .bi,
.empty-state-block .fa {
    font-size: 3rem;
    color: var(--zq-slate-300, #cbd5e1);
    margin-bottom: 1rem;
    display: block;
}
.empty-state-block h5,
.empty-state-block h4 {
    font-weight: 700;
    color: var(--zq-text, #1e293b);
    margin-bottom: .35rem;
}
.empty-state-block p { margin-bottom: 1.25rem; max-width: 36ch; }

/* --- 12f. Inline row-action buttons  ---
   Compact icon-only action buttons used in table cells (.action-buttons,
   .btn-action-sm). Consistent size, spacing and hover feedback. */
.action-buttons {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: nowrap;
}
.btn-action-sm {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--zq-radius-sm, .5rem);
    font-size: .8125rem;
    border: 1px solid var(--zq-border, #e2e8f0);
    background: var(--zq-surface, #fff);
    color: var(--zq-text-muted, #64748b);
    cursor: pointer;
    transition: background var(--zq-dur, 180ms) var(--zq-ease, ease),
                color var(--zq-dur, 180ms) var(--zq-ease, ease),
                border-color var(--zq-dur, 180ms) var(--zq-ease, ease),
                box-shadow var(--zq-dur, 180ms) var(--zq-ease, ease);
    text-decoration: none;
    padding: 0;
}
.btn-action-sm:hover {
    background: var(--zq-brand-50, #e6f7fd);
    color: var(--zq-brand-700, #00719e);
    border-color: var(--zq-brand-200, #8fdef7);
    box-shadow: var(--zq-shadow-xs);
}
.btn-action-sm.danger:hover,
.btn-action-sm.delete:hover {
    background: var(--zq-danger-soft, #fef2f2);
    color: var(--zq-danger-ink, #b91c1c);
    border-color: #fecaca;
}

/* --- 12g. Stat summary rows / key-value info panels ---
   e.g. "Total: 12" label + number rows inside card-body for quick summaries. */
.info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem 0;
    font-size: var(--zq-fs-sm, .8125rem);
}
.info-row + .info-row { border-top: 1px dashed var(--zq-border, #e2e8f0); }
.info-row__label { color: var(--zq-text-muted, #64748b); font-weight: 500; }
.info-row__value { font-weight: 700; color: var(--zq-text, #1e293b); }

/* --- 12h. Dark mode counterparts ---------------------------------------- */
[data-bs-theme="dark"] .header-section {
    /* hero gradient already reads fine on dark — only the glow needs toning */
    box-shadow: 0 14px 32px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .25);
}
[data-bs-theme="dark"] .modern-card,
[data-bs-theme="dark"] .table-toolbar,
[data-bs-theme="dark"] .filter-bar {
    background: var(--zq-surface);
    border-color: var(--zq-border);
}
[data-bs-theme="dark"] .nav-tabs-modern .nav-link:hover { background: var(--zq-surface-2); }
[data-bs-theme="dark"] .nav-tabs-modern .nav-link.active {
    background: rgba(0, 174, 239, .14);
    border-color: rgba(0, 174, 239, .35);
    color: var(--zq-brand-300, #54cdf2);
}
[data-bs-theme="dark"] .tab-count { background: var(--zq-slate-700, #334155); color: var(--zq-slate-200, #e2e8f0); }
[data-bs-theme="dark"] .nav-tabs-modern .nav-link.active .tab-count {
    background: rgba(0, 174, 239, .22);
    color: var(--zq-brand-200, #8fdef7);
}
[data-bs-theme="dark"] .btn-action-sm { background: var(--zq-surface); border-color: var(--zq-border); }
[data-bs-theme="dark"] .btn-action-sm:hover {
    background: rgba(0, 174, 239, .12);
    color: var(--zq-brand-300);
    border-color: rgba(0, 174, 239, .3);
}