/* ============================================================
   ZeroLix Audit - admin theme over Bootstrap 5.3 (light content)
   Brand frame: light navbar + sidebar, ZeroLix blue actions.
   Content surfaces stay light: every existing template keeps
   working. One component vocabulary across all screens.
   ============================================================ */

:root {
  --zx-navy: #0a0e1a;
  --zx-navy-2: #0e1424;
  --zx-blue: #1a6cf5;
  --zx-blue-hover: #1558d4;
  --zx-blue-active: #1248b0;
  --zx-cyan: #00d4ff;
  --zx-border: #e2e7f0;
  --zx-ink: #1c2333;
  --zx-muted: #5e6a82;
  --zx-surface: #f4f6fa;       /* cool light, tinted toward brand hue */
  --zx-card-border: #e2e7f0;
  --zx-ease: cubic-bezier(0.23, 1, 0.32, 1);

  --bs-primary: var(--zx-blue);
  --bs-primary-rgb: 26, 108, 245;
  --bs-link-color: var(--zx-blue);
  --bs-link-color-rgb: 26, 108, 245;
  --bs-link-hover-color: var(--zx-blue-hover);
  --bs-link-hover-color-rgb: 21, 88, 212;
  --bs-body-color: var(--zx-ink);
  --bs-border-radius: 8px;
}

body {
  background-color: var(--zx-surface);
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.92rem;
  color: var(--zx-ink);
  -webkit-font-smoothing: antialiased;
}

code, pre, .font-monospace { font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; }

:focus-visible {
  outline: 2px solid var(--zx-blue);
  outline-offset: 2px;
}

/* ---------- navbar: light app frame ---------- */
.navbar.bg-white {
  background-color: #fff !important;
  border-bottom: 1px solid var(--zx-border);
  box-shadow: 0 1px 2px rgba(28, 42, 74, 0.04);
}

.navbar-brand { color: var(--zx-ink); font-weight: 600; letter-spacing: -0.01em; }
.navbar-brand:hover, .navbar-brand:focus { color: var(--zx-ink); }
.navbar-brand span { color: var(--zx-blue); font-weight: 700; }

/* ---------- sidebar: light app rail ---------- */
.sidebar {
  min-height: calc(100vh - 56px);
  background: #fff;
  border-right: 1px solid var(--zx-border);
  padding-top: 1.25rem;
}

.sidebar .nav-link {
  color: var(--zx-muted);
  border-radius: 8px;
  margin-bottom: 2px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  transition: background-color 160ms var(--zx-ease), color 160ms var(--zx-ease);
}

.sidebar .nav-link i { width: 20px; color: #7b879d; transition: color 160ms var(--zx-ease); }

.sidebar .nav-link:hover {
  background: rgba(26, 108, 245, 0.06);
  color: var(--zx-ink);
}

.sidebar .nav-link:hover i { color: var(--zx-blue); }

.sidebar .nav-link.active {
  background: rgba(26, 108, 245, 0.1);
  color: var(--zx-blue);
  box-shadow: inset 2px 0 0 var(--zx-blue);
  font-weight: 600;
}

.sidebar .nav-link.active i { color: var(--zx-blue); }

.sidebar .text-muted { color: #7b879d !important; }
.sidebar hr { border-color: var(--zx-border); opacity: 1; }

/* ---------- content ---------- */
.main-content { padding: 2rem; min-width: 0; overflow-x: auto; }
.container-fluid > .row > .col { min-width: 0; }

/* ---------- cards ---------- */
.card {
  border: 1px solid var(--zx-card-border);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(28, 42, 74, 0.05);
}

.card-header {
  background: #fff;
  border-bottom: 1px solid var(--zx-card-border);
  font-weight: 600;
}

/* ---------- buttons: one action vocabulary ---------- */
.btn { transition: background-color 160ms var(--zx-ease), border-color 160ms var(--zx-ease), color 160ms var(--zx-ease), transform 140ms var(--zx-ease); }
.btn:active { transform: scale(0.98); }

.btn-primary {
  --bs-btn-bg: var(--zx-blue);
  --bs-btn-border-color: var(--zx-blue);
  --bs-btn-hover-bg: var(--zx-blue-hover);
  --bs-btn-hover-border-color: var(--zx-blue-hover);
  --bs-btn-active-bg: var(--zx-blue-active);
  --bs-btn-active-border-color: var(--zx-blue-active);
  --bs-btn-disabled-bg: var(--zx-blue);
  --bs-btn-disabled-border-color: var(--zx-blue);
}

.btn-outline-primary {
  --bs-btn-color: var(--zx-blue);
  --bs-btn-border-color: var(--zx-blue);
  --bs-btn-hover-bg: var(--zx-blue);
  --bs-btn-hover-border-color: var(--zx-blue);
  --bs-btn-active-bg: var(--zx-blue-active);
  --bs-btn-active-border-color: var(--zx-blue-active);
}

/* ---------- forms ---------- */
.form-control:focus, .form-select:focus {
  border-color: var(--zx-blue);
  box-shadow: 0 0 0 0.2rem rgba(26, 108, 245, 0.15);
}

.form-check-input:checked {
  background-color: var(--zx-blue);
  border-color: var(--zx-blue);
}

/* ---------- tables ---------- */
.table th {
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #5e6a82;
}

.table-hover > tbody > tr:hover > * { background-color: rgba(26, 108, 245, 0.04); }

/* ---------- nav pills / tabs / pagination ---------- */
.nav-pills .nav-link.active { background-color: var(--zx-blue); }
.nav-tabs .nav-link.active { border-bottom-color: var(--zx-blue); }
.page-link { color: var(--zx-blue); }
.active > .page-link, .page-link.active { background-color: var(--zx-blue); border-color: var(--zx-blue); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--zx-blue); }
.progress-bar { background-color: var(--zx-blue); }

/* ---------- status vocabulary (preserved semantics) ---------- */
.badge-status-draft { background: #6c757d; }
.badge-status-active { background: var(--zx-blue); }
.badge-status-complete { background: #198754; }
.badge-status-archived { background: #adb5bd; }
.section-status-not_started { color: #98a2b8; }
.section-status-in_progress { color: #d97a06; }
.section-status-submitted { color: #198754; }

.stat-card .display-6 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:active { transition: none; transform: none; }
  .sidebar .nav-link { transition: none; }
}


/* ════ SHADCN-STYLE SKIN (2026-06-11) — design-only overrides; delete this block to revert ════ */
/* ── shadcn/ui design language applied to the REAL Zerolix Audit dashboard ──
   Light theme (audit stays white in production). Pure CSS skin over the
   existing Bootstrap markup — no markup or app changes required.            */

:root {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;
  --border: 214 32% 91%;
  --primary: 46 65% 52%;            /* champagne gold */
  --primary-foreground: 40 55% 11%; /* dark ink on gold */
  --accent: 46 65% 52%;             /* gold focus rings / active */
  --gold-ink: 43 74% 31%;           /* readable gold for links/active text on white */
  --radius: 0;                      /* square — match the landings' cards */
}

body { background: hsl(var(--background)) !important; color: hsl(var(--foreground)); }

/* navbar → clean top bar */
.navbar {
  border-bottom: 1px solid hsl(var(--border)) !important;
  box-shadow: none !important;
  background: hsl(var(--background)) !important;
}

/* sidebar → flat shadcn nav */
.sidebar { background: hsl(var(--background)) !important; border-right: 1px solid hsl(var(--border)); }
.sidebar .nav-link {
  border-radius: calc(var(--radius) - 4px) !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: .875rem; font-weight: 500;
  padding: .42rem .65rem !important; margin-bottom: 2px;
  transition: background .15s, color .15s;
}
.sidebar .nav-link:hover { background: hsl(var(--muted)) !important; color: hsl(var(--foreground)) !important; }
.sidebar .nav-link.active {
  background: hsl(46 80% 95%) !important;
  color: hsl(var(--gold-ink)) !important;
  box-shadow: inset 2px 0 0 hsl(var(--accent)) !important; border: none !important;
  font-weight: 600;
}

/* cards → shadcn cards */
.card {
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
  background: hsl(var(--card)) !important;
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  font-weight: 600; font-size: .9rem;
  color: hsl(var(--foreground));
  padding: 1rem 1.25rem !important;
}
.stat-card { border-radius: var(--radius) !important; }
.stat-card .display-6 {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700 !important; font-size: 1.9rem !important;
}
.stat-card .text-muted { font-size: .78rem; color: hsl(var(--muted-foreground)) !important; }

/* buttons → shadcn buttons */
.btn { border-radius: calc(var(--radius) - 4px) !important; font-weight: 500 !important; box-shadow: none !important; }
.btn-primary {
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}
.btn-primary:hover { background: hsl(46 60% 46%) !important; border-color: hsl(46 60% 46%) !important; }
.btn-outline-primary, .btn-outline-secondary {
  background: transparent !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
}
.btn-outline-primary:hover, .btn-outline-secondary:hover { background: hsl(var(--muted)) !important; }

/* badges → soft shadcn badges */
.badge {
  border-radius: calc(var(--radius) - 6px) !important;
  font-weight: 600 !important; letter-spacing: .02em;
  padding: .25em .6em !important;
}
.badge.bg-success { background: hsl(142 71% 95%) !important; color: hsl(142 72% 26%) !important; }
.badge.bg-danger { background: hsl(0 86% 97%) !important; color: hsl(0 74% 42%) !important; }
.badge.bg-warning { background: hsl(48 96% 89%) !important; color: hsl(28 73% 26%) !important; }
.badge.bg-secondary { background: hsl(var(--muted)) !important; color: hsl(var(--muted-foreground)) !important; }
.badge.bg-primary, .badge-status-active { background: hsl(46 80% 92%) !important; color: hsl(43 74% 28%) !important; }

/* tables → shadcn tables */
.table { font-size: .875rem; }
.table thead th, .table-light th {
  background: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid hsl(var(--border)) !important;
}
.table td { border-color: hsl(var(--border)) !important; padding-top: .7rem; padding-bottom: .7rem; }
.table-hover tbody tr:hover { background: hsl(var(--muted)) !important; }

/* alerts → quiet callouts */
.alert {
  border-radius: var(--radius) !important;
  border: 1px solid hsl(var(--border)) !important;
  box-shadow: none !important;
}
.alert-success { background: hsl(142 71% 97%) !important; color: hsl(142 72% 24%) !important; border-color: hsl(142 50% 88%) !important; }
.alert-warning { background: hsl(48 96% 95%) !important; color: hsl(28 73% 26%) !important; border-color: hsl(45 80% 85%) !important; }

a { color: hsl(var(--gold-ink)); }
.text-primary { color: hsl(var(--gold-ink)) !important; }

/* forms & inputs → shadcn inputs */
.form-control, .form-select {
  border: 1px solid hsl(var(--border)) !important;
  border-radius: calc(var(--radius) - 4px) !important;
  font-size: .875rem !important;
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
  border-color: hsl(var(--accent)) !important;
  box-shadow: 0 0 0 3px hsl(var(--accent) / .15) !important;
}
.form-label, label { font-size: .85rem; font-weight: 500; color: hsl(var(--foreground)); }
.form-text { color: hsl(var(--muted-foreground)) !important; }
.input-group-text {
  background: hsl(var(--muted)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: calc(var(--radius) - 4px) !important;
  color: hsl(var(--muted-foreground)) !important;
}

/* modals, dropdowns, progress, list groups */
.modal-content {
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / .25) !important;
}
.modal-header, .modal-footer { border-color: hsl(var(--border)) !important; }
.dropdown-menu {
  border: 1px solid hsl(var(--border)) !important;
  border-radius: calc(var(--radius) - 2px) !important;
  box-shadow: 0 8px 24px -12px rgb(0 0 0 / .25) !important;
}
.dropdown-item { border-radius: calc(var(--radius) - 6px); font-size: .875rem; }
.dropdown-item:hover { background: hsl(var(--muted)) !important; }
.progress { border-radius: 0 !important; background: hsl(var(--muted)) !important; }
.progress-bar { border-radius: 0 !important; background: hsl(var(--accent)) !important; }
.list-group-item { border-color: hsl(var(--border)) !important; }
.list-group { border-radius: var(--radius) !important; }
.pagination .page-link {
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
  border-radius: calc(var(--radius) - 6px) !important; margin: 0 2px;
}

/* brand + stray cyan/blue accents → gold (no cyan/blue anywhere) */
.navbar-brand span { color: hsl(var(--gold-ink)) !important; }
.text-info { color: hsl(var(--gold-ink)) !important; }
.sidebar .nav-link.active i { color: hsl(var(--accent)) !important; }
.nav-pills .nav-link.active { background: hsl(var(--accent)) !important; color: hsl(var(--primary-foreground)) !important; }
.nav-tabs .nav-link.active { color: hsl(var(--gold-ink)) !important; border-bottom-color: hsl(var(--accent)) !important; }
.link-primary, .text-info a { color: hsl(var(--gold-ink)) !important; }
/* ════ END SHADCN SKIN ════ */


/* ════ AUTH SHELL — auth-5 split-screen, built on the shadcn light tokens above.
   Scoped to .auth-* so it never touches the dashboard. ════ */
.auth-body {
  /* gold/metal accent tokens — champagne for fills, deeper gold for text on white */
  --zx-gold: #d4af37; --zx-gold-bright: #e3c45c; --zx-gold-ink: #8a6a16;
  background: hsl(var(--background)); color: hsl(var(--foreground)); min-height: 100vh; overflow-x: hidden;
}
.auth-split { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
.auth-aside, .auth-main { min-width: 0; }   /* let grid items shrink — no horizontal overflow */
@media (min-width: 992px) { .auth-split { grid-template-columns: 1.05fr 1fr; } }

/* left brand panel (desktop) — BLACK, hosts the landing "scan" animation */
.auth-aside { display: none; }
@media (min-width: 992px) {
  .auth-aside {
    display: block; position: relative; overflow: hidden;
    background: #050505;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
}
.auth-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.auth-aside__content {
  position: relative; z-index: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(2rem, 4vw, 3.25rem);
}
/* left-side scrim keeps text readable while the animation shows through on the right */
.auth-aside__content::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(102deg,
    rgba(5, 5, 5, 0.92) 0%, rgba(5, 5, 5, 0.72) 34%, rgba(5, 5, 5, 0.22) 66%, rgba(5, 5, 5, 0) 100%);
}

.auth-brand, .auth-mark { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: hsl(var(--foreground)); text-decoration: none; }
.auth-brand span, .auth-mark span { color: var(--zx-gold-ink); }

.auth-eyebrow {
  display: inline-block; font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--zx-gold-ink);
}
.auth-headline {
  font-size: clamp(1.7rem, 2.5vw, 2.25rem); font-weight: 700; line-height: 1.12;
  letter-spacing: -0.025em; margin: 0.9rem 0 0.85rem; max-width: 16ch; color: hsl(var(--foreground));
}
.auth-aside__sub { color: hsl(var(--muted-foreground)); font-size: 0.95rem; line-height: 1.6; max-width: 40ch; margin: 0; }
.auth-trust { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.auth-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.03em;
  color: hsl(var(--muted-foreground)); background: hsl(var(--background));
  border: 1px solid hsl(var(--border)); border-radius: 100px; padding: 0.32rem 0.8rem;
}

/* dark-panel text colours (override the white-form defaults inside the aside) */
.auth-aside .auth-brand { color: #fff; }
.auth-aside .auth-brand span { color: var(--zx-gold); }
.auth-aside .auth-eyebrow { color: var(--zx-gold); }
.auth-aside .auth-headline { color: #fff; }
.auth-aside .auth-aside__sub { color: rgba(255, 255, 255, 0.72); }
.auth-aside .auth-brand, .auth-aside .auth-eyebrow,
.auth-aside .auth-headline, .auth-aside .auth-aside__sub { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); }
.auth-aside .auth-chip {
  color: rgba(255, 255, 255, 0.74); background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}

/* right form panel */
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.auth-card { width: 100%; max-width: 384px; }
.auth-card > *, .auth-form .input-group { max-width: 100%; }
.auth-card--wide { max-width: 480px; }
.auth-otp { letter-spacing: 0.45em; font-family: 'JetBrains Mono', monospace; }
.auth-head { margin-bottom: 1.6rem; }
.auth-mark { display: block; margin-bottom: 0.85rem; }
.auth-head .auth-eyebrow { display: block; margin-bottom: 0.6rem; }
@media (min-width: 992px) { .auth-mark { display: none; } }
.auth-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 0.5rem 0 0.3rem; color: hsl(var(--foreground)); }
.auth-muted { color: hsl(var(--muted-foreground)); font-size: 0.9rem; margin: 0; }

.auth-field { margin-bottom: 1.05rem; }
.auth-label {
  display: block; margin-bottom: 0.4rem; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--muted-foreground));
}
.auth-form .input-group-text { background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.auth-form .form-control { padding: 0.6rem 0.8rem; }
.auth-check { margin: 0.1rem 0 1.35rem; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.auth-submit { padding: 0.62rem 1rem; font-weight: 600 !important; }

.auth-foot {
  margin-top: 1.7rem; padding-top: 1.2rem; border-top: 1px solid hsl(var(--border));
  display: flex; flex-direction: column; gap: 0.45rem; text-align: center;
}
.auth-foot__legal { font-family: 'JetBrains Mono', monospace; font-size: 0.69rem; letter-spacing: 0.03em; color: hsl(var(--muted-foreground)); }
.auth-foot__link { font-size: 0.82rem; color: var(--zx-gold-ink); text-decoration: none; }
.auth-foot__link:hover { text-decoration: underline; }

/* gold accent overrides — focus rings + primary CTA (audit white + gold) */
.auth-form .form-control:focus, .auth-form .form-select:focus {
  border-color: var(--zx-gold) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.20) !important;
}
.auth-submit.btn-primary {
  background: var(--zx-gold) !important; border-color: var(--zx-gold) !important; color: #1c1606 !important;
}
.auth-submit.btn-primary:hover {
  background: var(--zx-gold-bright) !important; border-color: var(--zx-gold-bright) !important; color: #1c1606 !important;
}
/* ════ END AUTH SHELL ════ */