/* ============================================================
   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: 222 47% 11%;
  --primary-foreground: 210 40% 98%;
  --accent: 187 92% 40%;
  --radius: 0.75rem;
}

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(var(--muted)) !important;
  color: hsl(var(--foreground)) !important;
  box-shadow: none !important; border: none !important;
}

/* 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(222 47% 20%) !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(187 92% 94%) !important; color: hsl(192 91% 25%) !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(192 91% 30%); }

/* 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: 999px !important; background: hsl(var(--muted)) !important; }
.progress-bar { border-radius: 999px !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;
}

/* ════ END SHADCN SKIN ════ */