/* ============================================================
   Digital Validation Tool — modern design system
   Layered over Bootstrap 5; every legacy class still works.
   Dark mode auto-activates via <html data-bs-theme="dark">.
   ============================================================ */

:root {
  /* Brand */
  --dvt-primary:        #1e3a8a;   /* deep indigo */
  --dvt-primary-2:      #3b82f6;   /* mid blue (for gradient stops) */
  --dvt-accent:         #06b6d4;   /* cyan accent */
  --dvt-success:        #16a34a;
  --dvt-warning:        #f59e0b;
  --dvt-danger:         #dc2626;
  --dvt-info:           #0284c7;

  /* Surface */
  --dvt-bg:             #f5f7fb;
  --dvt-bg-pattern:     radial-gradient(#dfe5ee 0.6px, transparent 0.6px);
  --dvt-surface:        #ffffff;
  --dvt-surface-2:      #f8fafc;
  --dvt-surface-muted:  #f1f5f9;
  --dvt-border:         #e2e8f0;
  --dvt-border-strong:  #cbd5e1;

  /* Text */
  --dvt-text:           #0f172a;
  --dvt-text-muted:     #64748b;
  --dvt-text-soft:      #94a3b8;

  /* Shadows */
  --dvt-shadow-sm:      0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --dvt-shadow:         0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --dvt-shadow-lg:      0 10px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --dvt-ring-primary:   0 0 0 3px rgba(59, 130, 246, 0.25);

  /* Radii */
  --dvt-radius-sm:      6px;
  --dvt-radius:         10px;
  --dvt-radius-lg:      14px;
  --dvt-radius-pill:    9999px;

  /* Motion */
  --dvt-trans:          0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Dark mode token overrides ---------- */
:root[data-bs-theme="dark"] {
  --dvt-primary:        #60a5fa;
  --dvt-primary-2:      #3b82f6;
  --dvt-accent:         #22d3ee;

  --dvt-bg:             #0b1220;
  --dvt-bg-pattern:     radial-gradient(#1f2a44 0.6px, transparent 0.6px);
  --dvt-surface:        #131c2f;
  --dvt-surface-2:      #0f1729;
  --dvt-surface-muted:  #1a2238;
  --dvt-border:         #243049;
  --dvt-border-strong:  #2d3b58;

  --dvt-text:           #e2e8f0;
  --dvt-text-muted:     #94a3b8;
  --dvt-text-soft:      #64748b;

  --dvt-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.3);
  --dvt-shadow:         0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --dvt-shadow-lg:      0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

/* ---------- Base typography ---------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  background-color: var(--dvt-bg);
  background-image: var(--dvt-bg-pattern);
  background-size: 24px 24px;
  color: var(--dvt-text);
  min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 { color: var(--dvt-text); letter-spacing: -0.01em; }
h3 { font-weight: 700; }
code, pre, kbd, .req-link {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12.5px;
}
code { color: var(--dvt-primary); background: var(--dvt-surface-muted); padding: 1px 6px; border-radius: 4px; }
:root[data-bs-theme="dark"] code { color: var(--dvt-accent); }
kbd {
  background: var(--dvt-surface-muted); border: 1px solid var(--dvt-border);
  border-bottom-width: 2px; border-radius: var(--dvt-radius-sm);
  padding: 1px 6px; color: var(--dvt-text);
}
.text-muted { color: var(--dvt-text-muted) !important; }
small { font-size: 0.85em; }

/* ---------- Bootstrap surface overrides ---------- */
.bg-white { background: var(--dvt-surface) !important; }
.bg-light { background: var(--dvt-surface-muted) !important; }
:root[data-bs-theme="dark"] .table { color: var(--dvt-text); }
:root[data-bs-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent; color: var(--dvt-text);
}
:root[data-bs-theme="dark"] .form-control,
:root[data-bs-theme="dark"] .form-select {
  background-color: var(--dvt-surface-2);
  border-color: var(--dvt-border-strong); color: var(--dvt-text);
}
:root[data-bs-theme="dark"] .form-control::placeholder { color: var(--dvt-text-soft); }
:root[data-bs-theme="dark"] .breadcrumb { --bs-breadcrumb-divider-color: var(--dvt-text-soft); }
:root[data-bs-theme="dark"] .breadcrumb-item.active { color: var(--dvt-text-muted); }
:root[data-bs-theme="dark"] .breadcrumb-item a { color: var(--dvt-primary); }
:root[data-bs-theme="dark"] .modal-content { background: var(--dvt-surface); color: var(--dvt-text); border-color: var(--dvt-border); }

/* ---------- Navbar (sticky, glass) ---------- */
.navbar-dvt {
  background: linear-gradient(135deg, var(--dvt-primary) 0%, var(--dvt-primary-2) 100%) !important;
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  box-shadow: var(--dvt-shadow);
  position: sticky; top: 0; z-index: 1030;
  padding-top: 0.55rem; padding-bottom: 0.55rem;
}
.navbar-dvt .navbar-brand {
  font-weight: 700; letter-spacing: -0.01em; font-size: 1.05rem;
  display: inline-flex; align-items: center; gap: 8px;
}
.navbar-dvt .navbar-brand::before {
  content: ""; display: inline-block; width: 22px; height: 22px;
  background: linear-gradient(135deg, #fff 0%, var(--dvt-accent) 100%);
  border-radius: 6px;
  mask-image: radial-gradient(circle at center, #000 60%, transparent 65%);
  -webkit-mask-image: radial-gradient(circle at center, #000 60%, transparent 65%);
}
.navbar-dvt .nav-link {
  color: rgba(255, 255, 255, 0.88) !important;
  padding: 0.4rem 0.8rem !important; border-radius: var(--dvt-radius-sm);
  transition: background var(--dvt-trans), color var(--dvt-trans);
  font-weight: 500;
}
.navbar-dvt .nav-link:hover { background: rgba(255, 255, 255, 0.12); color: #fff !important; }
.navbar-dvt .nav-link .badge { animation: dvt-pulse 2.4s ease-in-out infinite; }
@keyframes dvt-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

/* ---------- Buttons ---------- */
.btn { transition: all var(--dvt-trans); border-radius: var(--dvt-radius-sm); font-weight: 500; }
.btn:focus, .btn:focus-visible { box-shadow: var(--dvt-ring-primary); }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.btn-primary {
  background: linear-gradient(135deg, var(--dvt-primary) 0%, var(--dvt-primary-2) 100%);
  border-color: var(--dvt-primary);
  box-shadow: 0 1px 2px rgba(30, 58, 138, 0.18);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--dvt-shadow); }
.btn-success {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%); border-color: #15803d;
}
.btn-success:hover { transform: translateY(-1px); box-shadow: var(--dvt-shadow); }
.btn-outline-primary { color: var(--dvt-primary); border-color: var(--dvt-border-strong); }
.btn-outline-primary:hover {
  background: linear-gradient(135deg, var(--dvt-primary) 0%, var(--dvt-primary-2) 100%);
  border-color: var(--dvt-primary); color: #fff;
}
.btn-outline-secondary { border-color: var(--dvt-border-strong); color: var(--dvt-text); }
.btn-outline-secondary:hover { background: var(--dvt-surface-muted); border-color: var(--dvt-border-strong); color: var(--dvt-text); }
.btn-outline-warning { border-color: var(--dvt-warning); color: #92400e; }
.btn-outline-warning:hover { background: var(--dvt-warning); color: #fff; }
.btn-outline-danger { border-color: var(--dvt-danger); color: var(--dvt-danger); }
.btn-outline-danger:hover { background: var(--dvt-danger); color: #fff; }
.btn-outline-light { border-color: rgba(255,255,255,0.4); }

/* ---------- Cards ---------- */
.card {
  background: var(--dvt-surface);
  border: 1px solid var(--dvt-border);
  border-radius: var(--dvt-radius);
  box-shadow: var(--dvt-shadow-sm);
  transition: box-shadow var(--dvt-trans), transform var(--dvt-trans);
}
.card-header {
  background: var(--dvt-surface-2);
  border-bottom: 1px solid var(--dvt-border);
  border-top-left-radius: var(--dvt-radius); border-top-right-radius: var(--dvt-radius);
}
.list-group-item { background: var(--dvt-surface); border-color: var(--dvt-border); color: var(--dvt-text); }
.list-group-item-action:hover { background: var(--dvt-surface-muted); }

/* ---------- Alerts ---------- */
.alert { border-radius: var(--dvt-radius); border: 1px solid transparent; }
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-warning { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.alert-danger  { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
:root[data-bs-theme="dark"] .alert-success { background: #052e1f; border-color: #14532d; color: #6ee7b7; }
:root[data-bs-theme="dark"] .alert-warning { background: #422006; border-color: #78350f; color: #fcd34d; }
:root[data-bs-theme="dark"] .alert-danger  { background: #3b0a0a; border-color: #7f1d1d; color: #fca5a5; }
:root[data-bs-theme="dark"] .alert-info    { background: #082236; border-color: #1e3a5f; color: #93c5fd; }

/* ---------- Tags (legacy class names — refreshed visuals) ---------- */
.tag {
  display: inline-flex; align-items: center; padding: 2px 10px;
  border-radius: var(--dvt-radius-pill);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase; line-height: 1.4;
  border: 1px solid transparent;
}
.tag-cat-1 { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.tag-cat-3 { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.tag-cat-4 { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.tag-cat-5 { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.tag-status-planning      { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.tag-status-in_validation { background: #dbeafe; color: #1e3a8a; border-color: #bfdbfe; }
.tag-status-validated     { background: #dcfce7; color: #15803d; border-color: #86efac; }
.tag-status-retired       { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.tag-pass    { background: #dcfce7; color: #15803d; border-color: #86efac; }
.tag-fail    { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.tag-not_run { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; }
.tag-blocked { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.tag-low    { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.tag-medium { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.tag-high   { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.tag-critical { background: #7f1d1d; color: #fef2f2; border-color: #7f1d1d; }
.tag-major  { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.tag-minor  { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; }

/* ---------- Regulatory note ---------- */
.regulatory-note {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), rgba(6, 182, 212, 0.04));
  border-left: 4px solid var(--dvt-primary);
  border-radius: var(--dvt-radius);
  padding: 12px 16px; font-size: 13px; color: var(--dvt-text);
  margin-bottom: 16px;
  box-shadow: var(--dvt-shadow-sm);
}
:root[data-bs-theme="dark"] .regulatory-note {
  background: rgba(59, 130, 246, 0.08); color: var(--dvt-text);
}

/* ---------- Anchor-target highlight (deep-linked cards/rows pulse briefly) ---- */
@keyframes dvt-target-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.55); background: rgba(99, 102, 241, 0.12); }
  60%  { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); background: rgba(99, 102, 241, 0.06); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); background: transparent; }
}
.card:target, tr:target, div:target {
  animation: dvt-target-pulse 2.4s ease-out;
  scroll-margin-top: 80px;   /* don't sit behind the sticky navbar */
  border-color: var(--dvt-primary) !important;
}

/* ---------- KPIs ---------- */
.kpi {
  background: var(--dvt-surface);
  border: 1px solid var(--dvt-border);
  border-radius: var(--dvt-radius-lg);
  padding: 18px 18px 14px;
  box-shadow: var(--dvt-shadow-sm);
  transition: transform var(--dvt-trans), box-shadow var(--dvt-trans);
  position: relative; overflow: hidden;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--dvt-shadow); }
.kpi::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--dvt-primary), var(--dvt-accent));
  opacity: 0.85;
}
.kpi .num {
  font-size: 2rem; font-weight: 700; line-height: 1.1;
  background: linear-gradient(135deg, var(--dvt-primary), var(--dvt-primary-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}
.kpi .lbl {
  font-size: 11px; color: var(--dvt-text-muted);
  text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600;
}
.kpi-danger::before { background: linear-gradient(90deg, #dc2626, #f87171); }
.kpi-danger .num { background: linear-gradient(135deg, #b91c1c, #ef4444); -webkit-background-clip: text; background-clip: text; }
.kpi-warn::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.kpi-warn .num { background: linear-gradient(135deg, #b45309, #f59e0b); -webkit-background-clip: text; background-clip: text; }

/* ---------- Section titles ---------- */
.section-title {
  color: var(--dvt-text); font-weight: 700; letter-spacing: -0.01em;
  padding-bottom: 10px; margin-bottom: 18px; position: relative;
}
.section-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px;
  background: linear-gradient(90deg, var(--dvt-primary), var(--dvt-accent));
  border-radius: 2px;
}

/* ---------- Signature block ---------- */
.signature-block {
  background: var(--dvt-surface-muted);
  border: 1px solid var(--dvt-border);
  border-left: 3px solid var(--dvt-accent);
  border-radius: var(--dvt-radius);
  padding: 10px 14px; margin-bottom: 8px; font-size: 13px;
}
.signature-block code {
  font-size: 11px; color: var(--dvt-text-muted);
  background: transparent; padding: 0;
}

/* ---------- Tables ---------- */
.table { color: var(--dvt-text); margin-bottom: 0; }
.table thead th {
  background: var(--dvt-surface-2); color: var(--dvt-text);
  text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.4px;
  font-weight: 600; border-bottom: 1px solid var(--dvt-border);
}
.table tbody tr { transition: background var(--dvt-trans); }
.table tbody tr:hover { background: var(--dvt-surface-2); }
.table > :not(caption) > * > * {
  border-bottom-color: var(--dvt-border);
  padding: 0.55rem 0.65rem;
}
.table-sm > :not(caption) > * > * { padding: 0.4rem 0.55rem; }

/* ---------- Coverage bar (legacy) ---------- */
.coverage-bar { height: 8px; border-radius: var(--dvt-radius-pill);
  background: var(--dvt-surface-muted); overflow: hidden; }
.coverage-bar > span { display: block; height: 100%;
  background: linear-gradient(90deg, var(--dvt-success), #4ade80); }

/* ---------- Progress bars (Bootstrap) ---------- */
.progress { background: var(--dvt-surface-muted); border-radius: var(--dvt-radius-pill); height: 18px; }
.progress-bar { background: linear-gradient(90deg, var(--dvt-primary), var(--dvt-primary-2)); transition: width 0.4s ease; }
.progress-bar.bg-success { background: linear-gradient(90deg, #15803d, #22c55e); }
.progress-bar.bg-warning { background: linear-gradient(90deg, #b45309, #f59e0b); }
.progress-bar.bg-danger  { background: linear-gradient(90deg, #b91c1c, #ef4444); }
.progress-bar.bg-info    { background: linear-gradient(90deg, #0c4a6e, #0284c7); }

/* ---------- Audit diff helpers ---------- */
.audit-old { color: #b91c1c; text-decoration: line-through; }
.audit-new { color: #15803d; }

/* ---------- Forms ---------- */
.form-control, .form-select {
  border-radius: var(--dvt-radius-sm); border-color: var(--dvt-border-strong);
  transition: border-color var(--dvt-trans), box-shadow var(--dvt-trans);
}
.form-control:focus, .form-select:focus {
  border-color: var(--dvt-primary-2); box-shadow: var(--dvt-ring-primary);
}
.form-label { font-weight: 600; font-size: 12.5px; color: var(--dvt-text); margin-bottom: 4px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { background: transparent; padding: 0; margin-bottom: 16px; font-size: 13px; }
.breadcrumb-item a { color: var(--dvt-primary); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--dvt-primary-2); }

/* ---------- Modal ---------- */
.modal-content { border-radius: var(--dvt-radius-lg); border: 1px solid var(--dvt-border); box-shadow: var(--dvt-shadow-lg); }
.modal-header  { border-bottom: 1px solid var(--dvt-border); }

/* ---------- DVT-specific component classes ---------- */
.dvt-backbar { margin-bottom: 14px; }
.dvt-comments { font-size: 13px; }

/* Protocol table */
.dvt-protocol-table { font-size: 12.5px; }
.dvt-protocol-table thead th {
  background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%); color: #1e3a8a;
  font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.4px;
}
:root[data-bs-theme="dark"] .dvt-protocol-table thead th {
  background: linear-gradient(180deg, #1e2438 0%, #1a2238 100%); color: var(--dvt-primary);
}
.dvt-protocol-table td, .dvt-protocol-table th { vertical-align: top; padding: 6px 8px; }
.dvt-protocol-table tr { page-break-inside: avoid; }
.dvt-protocol-table tr.dvt-row-exec { background: rgba(245, 158, 11, 0.08); }
.dvt-protocol-table tr.dvt-row-exec td { border-color: rgba(245, 158, 11, 0.25); }
.dvt-protocol-table .dvt-step-comment.dvt-needs-comment {
  border-color: var(--dvt-danger);
  box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.15);
}

/* Phase stepper */
.dvt-stepper { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; }
.dvt-step {
  flex: 1 0 9%; min-width: 130px; padding: 10px 12px;
  border-radius: var(--dvt-radius); text-align: center; text-decoration: none;
  border: 1px solid var(--dvt-border); color: var(--dvt-text-muted);
  font-size: 11px; line-height: 1.3; background: var(--dvt-surface);
  transition: all var(--dvt-trans);
}
.dvt-step:hover { transform: translateY(-2px); box-shadow: var(--dvt-shadow-sm); color: var(--dvt-text); }
.dvt-step-num   { display: block; font-size: 17px; font-weight: 700; color: var(--dvt-text); }
.dvt-step-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
.dvt-step-complete    { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #15803d; border-color: #86efac; }
.dvt-step-complete .dvt-step-num    { color: #15803d; }
.dvt-step-in_progress { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; border-color: #fcd34d; }
.dvt-step-in_progress .dvt-step-num { color: #92400e; }
.dvt-step-blocked     { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #b91c1c; border-color: #fca5a5; }
.dvt-step-blocked .dvt-step-num     { color: #b91c1c; }
.dvt-step-na          { background: var(--dvt-surface-muted); color: var(--dvt-text-soft); }

/* Phase cards */
.dvt-phase-card { transition: box-shadow var(--dvt-trans), transform var(--dvt-trans); }
.dvt-phase-card:hover { transform: translateY(-1px); box-shadow: var(--dvt-shadow); }
.dvt-check { list-style: none; padding-left: 0; margin-bottom: 5px; }
.dvt-pct {
  background: linear-gradient(135deg, var(--dvt-primary), var(--dvt-primary-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Validation package cover */
.dvt-cover { padding: 30px 0; border-bottom: 4px solid var(--dvt-primary); margin-bottom: 30px; }
.dvt-cover h1 { color: var(--dvt-primary); }
.dvt-section-h {
  color: var(--dvt-primary);
  border-bottom: 2px solid var(--dvt-primary);
  padding-bottom: 6px; margin: 30px 0 12px; font-weight: 700;
}
.dvt-phase-row { border-left: 4px solid var(--dvt-primary); padding: 6px 12px; margin-bottom: 6px; background: var(--dvt-surface-2); }
.dvt-page-break { page-break-before: always; height: 1px; }
.dvt-rtm td, .dvt-rtm th { vertical-align: top; font-size: 11px; }

/* Part 11 assessment cards */
.dvt-p11-clause { transition: box-shadow var(--dvt-trans); }
.dvt-p11-clause:hover { box-shadow: var(--dvt-shadow); }
.dvt-p11-clause.status-compliant     { border-left: 4px solid var(--dvt-success); }
.dvt-p11-clause.status-partial       { border-left: 4px solid var(--dvt-warning); }
.dvt-p11-clause.status-non_compliant { border-left: 4px solid var(--dvt-danger); }
.dvt-p11-clause.status-na            { border-left: 4px solid var(--dvt-text-soft); }
.dvt-p11-clause.status-not_assessed  { border-left: 4px solid var(--dvt-border-strong); }
.dvt-p11-table td, .dvt-p11-table th { vertical-align: top; font-size: 11px; }
.dvt-p11-table thead th { background: var(--dvt-surface-muted) !important; color: var(--dvt-primary); }

/* Tag aliases used by Part 11 assessment */
.tag-compliant      { background: #dcfce7; color: #15803d; border-color: #86efac; }
.tag-partial        { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.tag-non_compliant  { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.tag-not_assessed   { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; }

/* ---------- Theme toggle ---------- */
.dvt-theme-toggle {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  border-radius: var(--dvt-radius-sm);
  padding: 4px 9px;
  font-size: 13px;
  line-height: 1.2;
  margin-right: 8px;
  cursor: pointer;
  transition: background var(--dvt-trans), transform var(--dvt-trans);
}
.dvt-theme-toggle:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-1px); }

/* ---------- Print ---------- */
body.print-mode { background: #fff; background-image: none; }
body.print-mode .btn,
body.print-mode form,
body.print-mode .dvt-backbar,
body.print-mode .navbar-dvt,
body.print-mode footer { display: none !important; }
@media print {
  body { background: #fff; background-image: none; }
  .navbar, footer, .btn, form, .dvt-backbar { display: none !important; }
  .card { border: 1px solid #888 !important; box-shadow: none !important; page-break-inside: avoid; }
  .signature-block { page-break-inside: avoid; }
  .dvt-protocol-table { font-size: 11px; }
  .dvt-protocol-table thead th { background: #eef5ff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dvt-row-exec { background: #fffbe6 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dvt-cover h1 { color: var(--dvt-primary) !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dvt-section-h { color: var(--dvt-primary) !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
}

/* ---------- Light niceties ---------- */
::selection { background: rgba(59, 130, 246, 0.25); color: var(--dvt-text); }
*:focus-visible:not(.btn) {
  outline: 2px solid var(--dvt-primary-2); outline-offset: 2px;
  border-radius: 4px;
}
.badge { font-weight: 600; padding: 4px 8px; border-radius: var(--dvt-radius-pill); }

/* Scrollbar polish (Webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--dvt-border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--dvt-text-soft); }


/* ============================================================
   Phase 20 — Modern visualization pass
   Refines the design system: page-enter, empty states, sticky table
   headers, status indicators, polished navbar active link, chip filter,
   gradient stat callouts, animated section enters, polished alerts +
   modals, and tabular-numeric metrics everywhere.
   ============================================================ */

/* ---------- Page-enter animation ---------- */
@keyframes dvt-page-enter {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
main.container, main.container-fluid {
  animation: dvt-page-enter 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  main.container, main.container-fluid { animation: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Modern empty-state row (auto-applies to every table) ----------
   Targets the legacy pattern <td class="text-muted text-center py-3">…</td>
   used in 30+ list templates and lifts it without per-template edits. */
table tr td.text-muted.text-center {
  padding-top: 28px !important; padding-bottom: 28px !important;
  font-style: italic; font-weight: 500; color: var(--dvt-text-muted) !important;
  background: linear-gradient(180deg,
    var(--dvt-surface) 0%, var(--dvt-surface-2) 60%, var(--dvt-surface) 100%);
}
table tr td.text-muted.text-center::before {
  content: "○"; display: inline-block; margin-right: 8px; opacity: 0.55;
  font-size: 16px; vertical-align: -1px;
}
:root[data-bs-theme="dark"] table tr td.text-muted.text-center {
  background: linear-gradient(180deg,
    var(--dvt-surface) 0%, var(--dvt-surface-muted) 60%, var(--dvt-surface) 100%);
}

/* ---------- .dvt-empty-state component (for non-table empty surfaces) -- */
.dvt-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 36px 24px; text-align: center;
  background: var(--dvt-surface); border: 1px dashed var(--dvt-border-strong);
  border-radius: var(--dvt-radius-lg); color: var(--dvt-text-muted);
}
.dvt-empty-state .dvt-empty-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--dvt-surface-muted), var(--dvt-surface-2));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--dvt-primary); margin-bottom: 12px;
  box-shadow: var(--dvt-shadow-sm);
}
.dvt-empty-state h6 {
  margin: 0 0 4px 0; font-weight: 600; color: var(--dvt-text);
  font-size: 15px;
}
.dvt-empty-state p { margin: 0; font-size: 13px; }
.dvt-empty-state .btn { margin-top: 12px; }

/* ---------- Active navbar link indicator ----------
   Activated by JS in base.html which adds .dvt-nav-active to the matching
   link based on window.location.pathname. */
.navbar-dvt .nav-link.dvt-nav-active {
  background: rgba(255, 255, 255, 0.16); color: #fff !important;
  font-weight: 600; position: relative;
}
.navbar-dvt .nav-link.dvt-nav-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 1px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,0.6));
}

/* ---------- Sticky table headers (when wrapped in .dvt-sticky-thead) ---- */
.dvt-sticky-thead { position: relative; }
.dvt-sticky-thead .table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--dvt-surface-2);
  box-shadow: inset 0 -1px 0 var(--dvt-border);
}

/* ---------- Status dots (active / inactive / warning indicators) -------- */
.dvt-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1px;
  background: var(--dvt-text-soft);
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.18);
}
.dvt-dot-success { background: var(--dvt-success); box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18); }
.dvt-dot-warn    { background: var(--dvt-warning); box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.18); }
.dvt-dot-danger  { background: var(--dvt-danger);  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18); }
.dvt-dot-info    { background: var(--dvt-info);    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.18); }
.dvt-dot-live {
  background: var(--dvt-success);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.20);
  animation: dvt-dot-live-pulse 2s ease-out infinite;
}
@keyframes dvt-dot-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* ---------- Polished chip / filter pill ---------- */
.dvt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--dvt-radius-pill);
  font-size: 12px; font-weight: 500;
  background: var(--dvt-surface-muted); color: var(--dvt-text);
  border: 1px solid var(--dvt-border); text-decoration: none;
  transition: all var(--dvt-trans);
}
.dvt-chip:hover {
  background: var(--dvt-surface); border-color: var(--dvt-primary-2); color: var(--dvt-primary);
  transform: translateY(-1px); box-shadow: var(--dvt-shadow-sm);
}
.dvt-chip-active {
  background: linear-gradient(135deg, var(--dvt-primary), var(--dvt-primary-2));
  color: #fff; border-color: transparent;
}
.dvt-chip-active:hover { color: #fff; }

/* ---------- Breadcrumb chevrons (Bootstrap default is `/`) -------------- */
.breadcrumb { --bs-breadcrumb-divider: "›"; }
.breadcrumb-item + .breadcrumb-item::before {
  font-size: 14px; color: var(--dvt-text-soft); padding-right: 0.4rem;
}

/* ---------- Polished alerts (icon + tighter spacing) -------------------- */
.alert { padding: 12px 16px; line-height: 1.45; box-shadow: var(--dvt-shadow-sm); }
.alert-success::before, .alert-warning::before,
.alert-danger::before,  .alert-info::before {
  display: inline-block; margin-right: 8px; font-weight: 700;
  vertical-align: -1px; font-size: 15px;
}
.alert-success::before { content: "✓"; color: #15803d; }
.alert-warning::before { content: "⚠"; color: #92400e; }
.alert-danger::before  { content: "✕"; color: #b91c1c; }
.alert-info::before    { content: "ℹ"; color: var(--dvt-primary); }

/* ---------- Modal backdrop polish ---------- */
.modal-backdrop.show { opacity: 0.55; }
.modal-content {
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}

/* ---------- Tabular numerics everywhere a number matters --------------- */
.tag, .badge, .dvt-pct, .progress, .progress-bar,
.kpi .num, h1, h2, h3, h4, h5,
.fs-1, .fs-2, .fs-3, .fs-4, .fs-5 {
  font-variant-numeric: tabular-nums;
}

/* ---------- Stat callout (alternative to .kpi for inline metrics) ------ */
.dvt-stat {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 6px 12px; border-radius: var(--dvt-radius);
  background: var(--dvt-surface); border: 1px solid var(--dvt-border);
}
.dvt-stat .dvt-stat-num {
  font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums;
  color: var(--dvt-text);
}
.dvt-stat .dvt-stat-lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--dvt-text-muted); font-weight: 600;
}

/* ---------- Interactive card (subtle lift on hover) -------------------- */
.card.dvt-interactive { cursor: pointer; }
.card.dvt-interactive:hover {
  transform: translateY(-2px); box-shadow: var(--dvt-shadow);
  border-color: var(--dvt-primary-2);
}

/* ---------- Card status accents ---------- */
.card.dvt-status-success { border-top: 3px solid var(--dvt-success); }
.card.dvt-status-warning { border-top: 3px solid var(--dvt-warning); }
.card.dvt-status-danger  { border-top: 3px solid var(--dvt-danger); }
.card.dvt-status-info    { border-top: 3px solid var(--dvt-info); }

/* ---------- Improved <details> disclosure ---------- */
details > summary {
  cursor: pointer; outline: none; user-select: none;
  padding: 6px 0; transition: color var(--dvt-trans);
  list-style: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: "▸"; display: inline-block; margin-right: 8px;
  transition: transform var(--dvt-trans); color: var(--dvt-primary);
}
details[open] > summary::before { transform: rotate(90deg); }
details > summary:hover { color: var(--dvt-primary); }

/* ---------- Skeleton shimmer utility (for any "loading" placeholder) -- */
@keyframes dvt-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.dvt-skeleton {
  background: linear-gradient(90deg,
    var(--dvt-surface-muted) 0%,
    var(--dvt-surface-2) 50%,
    var(--dvt-surface-muted) 100%);
  background-size: 200% 100%;
  animation: dvt-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--dvt-radius-sm); display: inline-block;
}

/* ---------- Pill button group (used by /incidents filter row, etc.) ---- */
.dvt-pill-group { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.dvt-pill-group .dvt-chip { font-size: 11px; padding: 3px 10px; }

/* ---------- Improved tag emphasis on critical / fail ------------------- */
.tag-critical, .tag-fail, .tag-non_compliant, .tag-high {
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.12);
}
.tag-critical { background: linear-gradient(135deg, #7f1d1d, #b91c1c); border-color: #7f1d1d; }
.tag-pass     { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #166534; }
.tag-compliant { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #166534; }

/* ---------- Polish for sticky filter banner ---------------------------- */
.alert-info.py-2.d-flex {
  border-left: 4px solid var(--dvt-primary);
  background: linear-gradient(135deg, #eff6ff 0%, rgba(239, 246, 255, 0.6) 100%);
}
:root[data-bs-theme="dark"] .alert-info.py-2.d-flex {
  background: linear-gradient(135deg, #082236 0%, rgba(8, 34, 54, 0.6) 100%);
}

/* ---------- Subtle row-enter animation for filtered tables ------------- */
@keyframes dvt-row-enter { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
table.table tbody tr { animation: dvt-row-enter 0.22s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  table.table tbody tr { animation: none; }
}

/* ---------- Improved focus rings on links + interactive elements ------ */
a:focus-visible, button:focus-visible,
.list-group-item-action:focus-visible {
  outline: 2px solid var(--dvt-primary-2);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Polish for inline code in dark mode ----------------------- */
:root[data-bs-theme="dark"] code { background: rgba(96, 165, 250, 0.12); }

/* ---------- Brand-mark refinement on navbar --------------------------- */
.navbar-dvt .navbar-brand::before {
  background: linear-gradient(135deg, #fff 0%, var(--dvt-accent) 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

/* ---------- Footer tweak — soft gradient divider ---------------------- */
footer.mt-5 {
  position: relative; padding-top: 18px !important;
}
footer.mt-5::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 80px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--dvt-primary), var(--dvt-accent));
  opacity: 0.7;
}

/* ---------- Print: hide the page-enter animation residue --------------- */
@media print { main.container, main.container-fluid { animation: none; } }


/* ============================================================
   Phase 21 — Contemporary UI refresh (2026 design language)
   Layered on top of the Phase 20 system. Adds an aurora ambient
   background, larger soft radii, tinted diffuse elevation, a
   glass navbar search pill and springy micro-interactions.
   Every existing class is preserved — this block only refines
   visuals and is fully dark-mode / reduced-motion / print aware.
   ============================================================ */

/* ---------- Refined design tokens ---------- */
:root {
  --dvt-radius-sm:   9px;
  --dvt-radius:     13px;
  --dvt-radius-lg:  20px;

  /* Tinted, diffuse elevation — softer + indigo-tinted */
  --dvt-shadow-sm:  0 1px 2px rgba(30, 41, 99, 0.05),
                    0 2px 8px rgba(30, 41, 99, 0.045);
  --dvt-shadow:     0 6px 18px -4px rgba(30, 41, 99, 0.12),
                    0 2px 8px -3px rgba(30, 41, 99, 0.07);
  --dvt-shadow-lg:  0 22px 44px -14px rgba(30, 41, 99, 0.22),
                    0 8px 18px -10px rgba(30, 41, 99, 0.12);

  /* Springy easing for restrained, delightful micro-interactions */
  --dvt-spring: 0.32s cubic-bezier(0.34, 1.40, 0.64, 1);
}
:root[data-bs-theme="dark"] {
  --dvt-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.45);
  --dvt-shadow:     0 6px 20px -4px rgba(0, 0, 0, 0.60);
  --dvt-shadow-lg:  0 24px 48px -14px rgba(0, 0, 0, 0.72);
}

/* ---------- Aurora ambient background ----------
   Replaces the dot grid with three soft colour blooms fixed
   behind all content. Low opacity keeps text fully legible. */
html { scroll-behavior: smooth; }
body { background-image: none; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46rem 34rem at 6% -8%,   rgba(59, 130, 246, 0.13), transparent 62%),
    radial-gradient(40rem 30rem at 102% 2%,  rgba(6, 182, 212, 0.13),  transparent 58%),
    radial-gradient(50rem 40rem at 70% 112%, rgba(99, 102, 241, 0.11), transparent 60%);
}
:root[data-bs-theme="dark"] body::before {
  background:
    radial-gradient(46rem 34rem at 6% -8%,   rgba(59, 130, 246, 0.20), transparent 62%),
    radial-gradient(40rem 30rem at 102% 2%,  rgba(34, 211, 238, 0.14), transparent 58%),
    radial-gradient(50rem 40rem at 70% 112%, rgba(99, 102, 241, 0.22), transparent 60%);
}

/* ---------- Cards — larger radius, gentle elevation on hover ---------- */
.card {
  border-radius: var(--dvt-radius-lg);
  transition: box-shadow var(--dvt-spring), transform var(--dvt-spring),
              border-color var(--dvt-trans);
}
.card:hover { box-shadow: var(--dvt-shadow); }
.card-header {
  border-top-left-radius: var(--dvt-radius-lg);
  border-top-right-radius: var(--dvt-radius-lg);
}

/* ---------- KPI tiles — premium refresh ---------- */
.kpi {
  border-radius: var(--dvt-radius-lg);
  background: linear-gradient(180deg, var(--dvt-surface) 0%, var(--dvt-surface-2) 100%);
  padding: 20px 14px 16px;
  transition: transform var(--dvt-spring), box-shadow var(--dvt-spring),
              border-color var(--dvt-trans);
}
.kpi:hover { transform: translateY(-4px); box-shadow: var(--dvt-shadow-lg); }
.kpi::before { height: 4px; opacity: 1; filter: saturate(1.15); }
.kpi .num { font-size: 2.2rem; letter-spacing: -0.025em; }
/* Compact label so single long words (e.g. "Requirements") never clip
   inside the narrow KPI column. */
.kpi .lbl { font-size: 10.5px; letter-spacing: 0.3px; }
a:hover .kpi { border-color: var(--dvt-primary-2); }

/* ---------- Buttons — springy press feedback ---------- */
.btn {
  transition: transform var(--dvt-spring), box-shadow var(--dvt-trans),
              background var(--dvt-trans), color var(--dvt-trans),
              border-color var(--dvt-trans);
}
.btn-primary:hover, .btn-success:hover,
.btn-outline-primary:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.97); }

/* ---------- Navbar — refined depth + interactive polish ---------- */
.navbar-dvt {
  box-shadow: 0 4px 20px -6px rgba(15, 23, 42, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.navbar-dvt .nav-link { transition: background var(--dvt-trans), transform var(--dvt-trans); }
.navbar-dvt .nav-link:hover { transform: translateY(-1px); }

/* ---------- Navbar search — frosted glass pill ---------- */
#dvt-search {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  border-radius: var(--dvt-radius-pill);
  transition: background var(--dvt-trans), box-shadow var(--dvt-trans),
              border-color var(--dvt-trans);
}
#dvt-search::placeholder { color: rgba(255, 255, 255, 0.62); }
#dvt-search:focus {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.40);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* ---------- Theme toggle — pill ---------- */
.dvt-theme-toggle { border-radius: var(--dvt-radius-pill); }

/* ---------- Inputs — smoother, softer focus ---------- */
.form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
}

/* ---------- Section title — wider gradient underline ---------- */
.section-title::after { width: 64px; height: 4px; border-radius: var(--dvt-radius-pill); }

/* ---------- Tables — airier rows ---------- */
.table > :not(caption) > * > * { padding: 0.62rem 0.7rem; }

/* ---------- Tag — micro refinement ---------- */
.tag { padding: 3px 11px; }

/* ---------- Reduced motion + print: disable the new flourishes ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media print { body::before { display: none !important; } }
body.print-mode::before { display: none !important; }


/* ============================================================
   Phase 22 — Bento-grid layout + Pro (compact) density mode
   A 12-column bento grid for dashboard-style boards, and a
   persistent power-user density mode toggled from the navbar
   (<html data-dvt-density="pro">, set pre-paint from localStorage).
   ============================================================ */

/* ---------- Bento grid ----------
   12-col grid with a unified gap. Cells carry .dvt-bento-N (N = column
   span at desktop). Mobile-first: every cell is full width, then 2-up
   on small screens, then the full bento layout from 992px up. */
.dvt-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  grid-auto-rows: auto;
  align-items: stretch;
}
.dvt-bento > * { grid-column: 1 / -1; min-width: 0; }
.dvt-bento > a { display: flex; flex-direction: column; text-decoration: none; }
.dvt-bento > a > .kpi { flex: 1 1 auto; }
.dvt-bento .kpi,
.dvt-bento > .card { height: 100%; }

@media (min-width: 576px) {
  .dvt-bento-2, .dvt-bento-3, .dvt-bento-4 { grid-column: span 6; }
}
@media (min-width: 768px) {
  .dvt-bento-2 { grid-column: span 2; }
  .dvt-bento-3 { grid-column: span 3; }
  .dvt-bento-4 { grid-column: span 4; }
  .dvt-bento-5 { grid-column: span 5; }
  .dvt-bento-6 { grid-column: span 6; }
  .dvt-bento-7 { grid-column: span 7; }
  .dvt-bento-8 { grid-column: span 8; }
}

/* ---------- Pro (compact) density mode ----------
   Cuts whitespace aggressively while keeping text readable — an
   information-density mode for power users. Selectors are scoped to
   html[data-dvt-density="pro"] so the comfortable default is untouched. */
html[data-dvt-density="pro"] .dvt-bento { gap: 9px; }
html[data-dvt-density="pro"] .kpi { padding: 11px 12px 9px; }
html[data-dvt-density="pro"] .kpi .num { font-size: 1.6rem; }
html[data-dvt-density="pro"] .kpi .lbl { font-size: 9.5px; letter-spacing: 0.2px; }
html[data-dvt-density="pro"] .card-body { padding: 0.7rem 0.85rem; }
html[data-dvt-density="pro"] .regulatory-note {
  padding: 8px 12px; font-size: 12px; margin-bottom: 10px;
}
html[data-dvt-density="pro"] .table > :not(caption) > * > * { padding: 0.32rem 0.5rem; }
html[data-dvt-density="pro"] .table-sm > :not(caption) > * > * { padding: 0.22rem 0.4rem; }
html[data-dvt-density="pro"] .section-title { margin-bottom: 11px; padding-bottom: 7px; }
html[data-dvt-density="pro"] h3 { font-size: 1.4rem; }
html[data-dvt-density="pro"] h4 { font-size: 1.2rem; }
html[data-dvt-density="pro"] h5.section-title { font-size: 1.05rem; }
html[data-dvt-density="pro"] main.container,
html[data-dvt-density="pro"] main.container-fluid { padding-top: 0.25rem; }
html[data-dvt-density="pro"] .navbar-dvt { padding-top: 0.32rem; padding-bottom: 0.32rem; }
html[data-dvt-density="pro"] .alert { padding: 8px 12px; }
/* Compact the Bootstrap spacing utilities used across the list pages */
html[data-dvt-density="pro"] .mb-4 { margin-bottom: 0.85rem !important; }
html[data-dvt-density="pro"] .mb-3 { margin-bottom: 0.55rem !important; }
html[data-dvt-density="pro"] .mb-2 { margin-bottom: 0.35rem !important; }
html[data-dvt-density="pro"] .my-3 {
  margin-top: 0.55rem !important; margin-bottom: 0.55rem !important;
}
html[data-dvt-density="pro"] .py-3 {
  padding-top: 0.5rem !important; padding-bottom: 0.5rem !important;
}
html[data-dvt-density="pro"] .g-3 { --bs-gutter-x: 0.6rem; --bs-gutter-y: 0.6rem; }
/* Brighten the density toggle while pro mode is active */
html[data-dvt-density="pro"] #dvt-density-toggle {
  background: rgba(255, 255, 255, 0.30);
  border-color: rgba(255, 255, 255, 0.45);
}

/* ---------- Navbar hamburger toggler (shown below the lg breakpoint) ----
   The collapsed navbar previously had no toggler, so the nav links and the
   search / theme / density controls were unreachable under 992px wide. */
.navbar-dvt .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--dvt-radius-sm);
  padding: 5px 9px;
  transition: background var(--dvt-trans), box-shadow var(--dvt-trans);
}
.navbar-dvt .navbar-toggler:hover { background: rgba(255, 255, 255, 0.12); }
.navbar-dvt .navbar-toggler:focus,
.navbar-dvt .navbar-toggler:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22); outline: none;
}
/* Collapsed-menu polish — give the stacked controls room to breathe. */
@media (max-width: 991.98px) {
  .navbar-dvt .navbar-collapse { padding: 10px 0 4px; }
  .navbar-dvt .navbar-collapse .navbar-nav { margin-bottom: 8px; }
  .navbar-dvt .navbar-collapse form,
  .navbar-dvt .navbar-collapse .dropdown,
  .navbar-dvt .navbar-collapse .navbar-text { margin: 5px 0 !important; }
  .navbar-dvt #dvt-search { min-width: 100% !important; }
}


/* ============================================================
   Phase 41 — Platform shell redesign (sidebar navigation)
   ValidFor-class SaaS layout: fixed dark sidebar with grouped,
   icon-led navigation; slim glass top bar (search, tools, user);
   indigo/violet accent palette. Every legacy content class is
   untouched — this block restyles only the shell + accents and
   is dark-mode / density / reduced-motion / print aware.
   ============================================================ */

/* ---------- Accent palette shift (indigo -> violet) ---------- */
:root {
  --dvt-primary:    #4338ca;   /* indigo-700 */
  --dvt-primary-2:  #6366f1;   /* indigo-500 */
  --dvt-accent:     #8b5cf6;   /* violet-500 */

  --dvt-sidebar-w:  248px;
  --dvt-side-bg-1:  #12142b;   /* deep indigo-slate */
  --dvt-side-bg-2:  #0b0d1f;
  --dvt-side-text:  rgba(233, 235, 255, 0.78);
  --dvt-side-soft:  rgba(233, 235, 255, 0.42);
  --dvt-side-line:  rgba(255, 255, 255, 0.08);
  --dvt-topbar-h:   58px;
}
:root[data-bs-theme="dark"] {
  --dvt-primary:    #818cf8;
  --dvt-primary-2:  #6366f1;
  --dvt-accent:     #a78bfa;
  --dvt-side-bg-1:  #101226;
  --dvt-side-bg-2:  #090b18;
}

/* Aurora blooms re-tinted to the new palette */
body::before {
  background:
    radial-gradient(46rem 34rem at 6% -8%,   rgba(99, 102, 241, 0.12), transparent 62%),
    radial-gradient(40rem 30rem at 102% 2%,  rgba(139, 92, 246, 0.10), transparent 58%),
    radial-gradient(50rem 40rem at 70% 112%, rgba(67, 56, 202, 0.10),  transparent 60%);
}
:root[data-bs-theme="dark"] body::before {
  background:
    radial-gradient(46rem 34rem at 6% -8%,   rgba(99, 102, 241, 0.20), transparent 62%),
    radial-gradient(40rem 30rem at 102% 2%,  rgba(167, 139, 250, 0.13), transparent 58%),
    radial-gradient(50rem 40rem at 70% 112%, rgba(67, 56, 202, 0.22),  transparent 60%);
}

/* ---------- Shell layout ---------- */
.dvt-shell {
  margin-left: var(--dvt-sidebar-w);
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.dvt-shell > main { flex: 1 1 auto; padding-top: 1.1rem; }
.dvt-shell-print { margin-left: 0; }
@media (max-width: 991.98px) { .dvt-shell { margin-left: 0; } }

/* ---------- Sidebar ---------- */
.dvt-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--dvt-sidebar-w);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--dvt-side-bg-1) 0%, var(--dvt-side-bg-2) 100%);
  border-right: 1px solid var(--dvt-side-line);
  z-index: 1040;
  transition: transform var(--dvt-trans);
}
.dvt-side-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px 14px;
  color: #fff; font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em;
  text-decoration: none;
  border-bottom: 1px solid var(--dvt-side-line);
}
.dvt-side-brand:hover { color: #fff; }
.dvt-side-brand::before {
  content: ""; display: inline-block; width: 24px; height: 24px; flex: 0 0 24px;
  background: linear-gradient(135deg, var(--dvt-primary-2) 0%, var(--dvt-accent) 100%);
  border-radius: 7px;
  mask-image: radial-gradient(circle at center, #000 60%, transparent 65%);
  -webkit-mask-image: radial-gradient(circle at center, #000 60%, transparent 65%);
  box-shadow: 0 1px 6px rgba(99, 102, 241, 0.5);
}
.dvt-side-nav {
  flex: 1 1 auto; overflow-y: auto; padding: 10px 12px 16px;
  scrollbar-width: thin;
}
.dvt-side-sec {
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--dvt-side-soft);
  margin: 16px 8px 5px;
}
.dvt-side-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; margin-bottom: 2px;
  border-radius: 9px;
  color: var(--dvt-side-text); text-decoration: none;
  font-size: 13.25px; font-weight: 500; line-height: 1.3;
  transition: background var(--dvt-trans), color var(--dvt-trans), transform var(--dvt-trans);
}
.dvt-side-link:hover {
  background: rgba(255, 255, 255, 0.07); color: #fff;
  transform: translateX(2px);
}
.dvt-side-link .dvt-ic { opacity: 0.75; }
.dvt-side-link:hover .dvt-ic { opacity: 1; }
.dvt-side-link.dvt-nav-active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.28), rgba(139, 92, 246, 0.22));
  color: #fff; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.35);
  position: relative;
}
.dvt-side-link.dvt-nav-active::before {
  content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--dvt-primary-2), var(--dvt-accent));
}
.dvt-side-link.dvt-nav-active .dvt-ic { opacity: 1; }
.dvt-side-link .badge { font-size: 10px; padding: 3px 7px; }
.dvt-side-foot {
  padding: 12px 18px; border-top: 1px solid var(--dvt-side-line);
  display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; color: var(--dvt-side-soft);
}
.dvt-side-foot a { color: var(--dvt-side-text); text-decoration: none; }
.dvt-side-foot a:hover { color: #fff; }

/* Sidebar icons (inline SVG, currentColor) */
.dvt-ic {
  width: 16px; height: 16px; flex: 0 0 16px;
  fill: currentColor;
}

/* Mobile: off-canvas sidebar + overlay */
@media (max-width: 991.98px) {
  .dvt-sidebar { transform: translateX(-100%); box-shadow: var(--dvt-shadow-lg); }
  body.dvt-sidebar-open .dvt-sidebar { transform: translateX(0); }
  .dvt-side-overlay {
    position: fixed; inset: 0; z-index: 1039;
    background: rgba(9, 11, 24, 0.55); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity var(--dvt-trans);
  }
  body.dvt-sidebar-open .dvt-side-overlay { opacity: 1; pointer-events: auto; }
}
@media (min-width: 992px) { .dvt-side-overlay { display: none; } }

/* ---------- Top bar ---------- */
.dvt-topbar {
  position: sticky; top: 0; z-index: 1030;
  height: var(--dvt-topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
  background: color-mix(in srgb, var(--dvt-surface) 78%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--dvt-border);
}
.dvt-topbar-actions {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}

/* Hamburger (mobile) */
.dvt-hamburger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 36px; height: 36px; padding: 8px;
  background: var(--dvt-surface); border: 1px solid var(--dvt-border);
  border-radius: var(--dvt-radius-sm); cursor: pointer;
}
.dvt-hamburger span {
  display: block; height: 2px; border-radius: 2px;
  background: var(--dvt-text);
}

/* Search — light pill in the topbar (overrides the Phase 21 glass style) */
.dvt-search-form {
  position: relative; display: flex; align-items: center;
  flex: 0 1 460px; min-width: 200px;
}
.dvt-search-ic {
  position: absolute; left: 12px; width: 15px; height: 15px;
  fill: var(--dvt-text-soft); pointer-events: none;
}
#dvt-search {
  width: 100%;
  background: var(--dvt-surface-muted);
  border: 1px solid var(--dvt-border);
  color: var(--dvt-text);
  border-radius: var(--dvt-radius-pill);
  padding: 7px 40px 7px 34px;
  font-size: 13px;
  transition: background var(--dvt-trans), box-shadow var(--dvt-trans), border-color var(--dvt-trans);
}
#dvt-search::placeholder { color: var(--dvt-text-soft); }
#dvt-search:focus {
  background: var(--dvt-surface);
  border-color: var(--dvt-primary-2);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.16);
  color: var(--dvt-text); outline: none;
}
.dvt-search-kbd {
  position: absolute; right: 10px;
  font-size: 10.5px; padding: 1px 6px;
  color: var(--dvt-text-soft);
  background: var(--dvt-surface); border: 1px solid var(--dvt-border);
  border-bottom-width: 2px; border-radius: 5px;
  pointer-events: none;
}

/* Topbar tool buttons (language / density / theme / shortcuts / logout) */
.dvt-tool {
  background: var(--dvt-surface);
  border: 1px solid var(--dvt-border);
  color: var(--dvt-text);
  border-radius: var(--dvt-radius-pill);
  padding: 5px 11px; font-size: 12.5px; font-weight: 500; line-height: 1.3;
  cursor: pointer;
  transition: background var(--dvt-trans), transform var(--dvt-trans), border-color var(--dvt-trans);
}
.dvt-tool:hover {
  background: var(--dvt-surface-muted); border-color: var(--dvt-border-strong);
  transform: translateY(-1px);
}
.dvt-tool-logout { color: var(--dvt-danger); border-color: rgba(220, 38, 38, 0.35); }
.dvt-tool-logout:hover { background: var(--dvt-danger); border-color: var(--dvt-danger); color: #fff; }
/* Legacy .dvt-theme-toggle overrides (was styled for the dark navbar) */
.dvt-theme-toggle {
  background: var(--dvt-surface); border: 1px solid var(--dvt-border);
  color: var(--dvt-text); margin-right: 0;
}
.dvt-theme-toggle:hover { background: var(--dvt-surface-muted); }

/* User chip */
.dvt-user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; margin-left: 4px;
  background: var(--dvt-surface); border: 1px solid var(--dvt-border);
  border-radius: var(--dvt-radius-pill);
}
.dvt-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--dvt-primary-2), var(--dvt-accent));
  color: #fff; font-weight: 700; font-size: 12.5px;
}
.dvt-user-meta { display: flex; flex-direction: column; line-height: 1.15; }
.dvt-user-name { font-size: 12px; font-weight: 600; color: var(--dvt-text); }
.dvt-user-role { font-size: 10px; color: var(--dvt-text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.dvt-user-role a { color: var(--dvt-primary); text-decoration: none; text-transform: none; letter-spacing: 0; }
@media (max-width: 767.98px) { .dvt-user-meta { display: none; } }

/* KPI / section-title gradients pick up the new palette automatically via
   the token overrides above. Anchor-target offset accounts for the topbar. */
.card:target, tr:target, div:target { scroll-margin-top: calc(var(--dvt-topbar-h) + 18px); }
.dvt-sticky-thead .table thead th { top: var(--dvt-topbar-h); }

/* ---------- Density (pro) adjustments for the new shell ---------- */
html[data-dvt-density="pro"] .dvt-topbar { height: 48px; }
html[data-dvt-density="pro"] .dvt-side-link { padding: 5px 9px; font-size: 12.5px; }
html[data-dvt-density="pro"] .dvt-side-sec { margin: 11px 8px 3px; }
html[data-dvt-density="pro"] #dvt-density-toggle {
  background: linear-gradient(135deg, var(--dvt-primary-2), var(--dvt-accent));
  border-color: transparent; color: #fff;
}

/* ---------- Print: the shell disappears entirely ---------- */
body.print-mode .dvt-sidebar,
body.print-mode .dvt-topbar,
body.print-mode .dvt-side-overlay { display: none !important; }
body.print-mode .dvt-shell { margin-left: 0; }
@media print {
  .dvt-sidebar, .dvt-topbar, .dvt-side-overlay { display: none !important; }
  .dvt-shell { margin-left: 0 !important; }
}