/* ------------------------------------------------------------
   Provantis Dashboard 2026 — Cockpit Rail design
   Standalone layout; does not rely on app.css or redesign.css.
   All classes scoped under .db26-page to avoid conflicts.
   ------------------------------------------------------------ */

/* ── Variables ─────────────────────────────────────────────── */
.db26-page {
  --navy:  #101c2c;
  --ivory: #faf7f0;
  --soft:  #f4efe4;
  --gold:  #b8902a;
  --line:  #e3ddd0;
  --muted: #66717c;
  --font:  Inter, ui-sans-serif, sans-serif;
  /* Shared type scale — admin & support screens reference these
     instead of hardcoding sizes, so scale changes stick everywhere. */
  --fs-detail: 10px;  /* eyebrows, badges, meta labels */
  --fs-small:  12px;  /* secondary text, buttons, controls */
  --fs-body:   13px;  /* body copy, descriptions */
  --fs-lead:   15px;  /* empty-state titles, lead text */
  --fs-h5:     16px;  /* panel headings, inline stats */
  --fs-h4:     20px;  /* card titles, compact detail titles */
  --fs-h3:     22px;  /* detail titles */
  --fs-h2:     26px;  /* page headings, big stats */
  --fs-h1:     28px;  /* hero headings */
  --fs-display:32px;  /* placeholder icons, oversized marks */
  /* Shared spacing scale — admin & support layouts reference these
     instead of per-template literals, so spacing changes stick.
     Token number = pixel value, e.g. --sp-12 is 12px. */
  --sp-4:  4px;
  --sp-6:  6px;
  --sp-8:  8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  /* Shared admin/support palette — cool slate ramp + deep gold used
     by platform_admin and support inline styles. Change here, not
     per-template, so contrast fixes stick everywhere. */
  --ink:       #0f172a; /* headings, strongest text */
  --ink-soft:  #334155; /* primary body text */
  --ink-dim:   #475569; /* secondary body text */
  --slate:     #64748b; /* muted descriptions */
  --slate-lt:  #94a3b8; /* faint labels, empty states */
  --meta-gray: #8a918e; /* bylines, timestamps */
  --msg-ink:   #3b4650; /* message body copy */
  --gold-deep: #a87f2b; /* admin accent gold */
  --border-lt: #cbd5e1; /* light cool borders */
  --line-warm: #e2e3df; /* warm hairline borders */
  --white:     #fff;    /* card/panel surfaces */
  --sand:      #f5f2ea; /* warm inset backgrounds */
  --bg-gray:   #f8f9fa; /* cool inset backgrounds */
  --tan-1:     #cfc7b8; /* warm border, strong */
  --tan-2:     #d8d0c1; /* warm border, medium */
  --tan-3:     #c9c2b5; /* warm border, scrollbars */
  --navy-deep: #0f1e33; /* deep navy surfaces */
  --slate-dk:  #1e293b; /* dark slate accents */
  --purple:    #7c3aed; /* platform-admin accent */
  --danger-dk: #7f1d1d; /* danger/urgent text */
  --success-dk:#166534; /* success/resolved text */
  --teal:      #0f766e; /* in-progress state */
  --rust:      #a75b2d; /* warning/escalated state */
  --gold-dk:   #8a6818; /* dark gold text on gold tints */
  font-family: var(--font);
  background: var(--ivory);
  color: var(--navy);
  font-size: 12px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.db26-page * { box-sizing: border-box; }

/* ── Full-page shell ────────────────────────────────────────── */
.db26-shell {
  display: flex;
  min-height: 100dvh;
}

/* ── Navigation rail ────────────────────────────────────────── */
.db26-rail {
  width: 232px;
  background: var(--navy);
  color: var(--ivory);
  display: flex;
  flex-direction: column;
  flex: none;
  min-height: 100dvh;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.db26-brand {
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(250,247,240,.16);
  flex: none;
}

.db26-plan-badge {
  display: inline-block;
  margin-top: 8px;
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8997a6;
  border: 1px solid rgba(250,247,240,.22);
  padding: 2px 6px;
}

.db26-plan-badge--super {
  color: var(--gold);
  border-color: rgba(212,175,55,.45);
}

.db26-rail-cta {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(250,247,240,.10);
  flex: none;
}

.db26-rail-cta .btn {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font, 'Inter', system-ui, sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--navy, #101c2c);
  background: var(--gold, #b8902a);
  border: 1px solid var(--gold, #b8902a);
  padding: 10px 12px;
  text-decoration: none;
  border-radius: 0;
  box-sizing: border-box;
  transition: background .14s, color .14s;
}

.db26-rail-cta .btn:hover {
  background: var(--ivory, #faf7f0);
  border-color: var(--ivory, #faf7f0);
  color: var(--navy, #101c2c);
}

.db26-brand strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .13em;
  color: var(--ivory);
}

.db26-brand small {
  display: block;
  color: #aeb8c1;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: 8px;
}

.db26-nav {
  padding: 22px 12px;
  flex: 1;
}

.db26-nav-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #8997a6;
  font-weight: 500;
  padding: 0 12px 10px;
}

.db26-nav-label:not(:first-child) {
  margin-top: 22px;
}

/* Links without an icon — indent text to align with iconed labels */
.db26-nav a.db26-sub {
  padding: 8px 12px 8px 40px;
}

.db26-nav a.db26-sub.active {
  padding-left: 38px;
}

.db26-nav a.db26-gold,
.db26-nav a.db26-gold:hover {
  color: var(--gold);
}

.db26-nav-flag {
  margin-left: auto;
  font-size: 8px;
  letter-spacing: .14em;
  color: #8997a6;
  border: 1px solid rgba(250,247,240,.22);
  padding: 1px 5px;
}

.db26-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #cbd1d6;
  text-decoration: none;
  padding: 11px 12px;
  margin: 2px 0;
  font-size: 12px;
  transition: background .15s, color .15s;
}

.db26-nav a:hover,
.db26-nav a.active {
  background: #1c2c40;
  color: var(--ivory);
}

.db26-nav a.active {
  border-left: 2px solid var(--gold);
  padding-left: 10px;
}

.db26-rail-foot {
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(250,247,240,.16);
  color: #aeb8c1;
  font-size: 10px;
  line-height: 1.6;
  flex: none;
}

/* ── Nav count badges ───────────────────────────────────────── */
.db26-nav-count {
  margin-left: auto;
  font-size: 11px;
  color: #7e8ca0;
  letter-spacing: 0;
}
.db26-nav-count--gold {
  color: var(--navy, #101c2c);
  background: var(--gold);
  padding: 1px 7px;
  font-weight: 500;
}
.db26-nav a { display: flex; align-items: center; }
.db26-nav a > span:first-of-type { flex: 1; min-width: 0; }
.db26-nav a .db26-nav-flag { flex: none; }

/* ── Platform admin — tenant rail entry link ─────────────────── */
.db26-padmin-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  font-size: 12px;
  color: #8fa0b6;
  text-decoration: none;
  transition: color .15s;
}
.db26-padmin-link:hover { color: var(--ivory); }
.db26-padmin-arrow { font-size: 11px; color: #6b7a90; }

/* ── Platform admin surface — body class override ───────────── */
/* Rail accent stays navy; crimson banner provides the distinction */
.db26-padmin-page {}

/* Mode indicator banner in admin rail */
.db26-padmin-banner {
  background: #c0392b;
  color: #fff;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 7px 16px;
  font-weight: 500;
  flex: none;
  text-align: center;
}

/* Back-to-customer link in admin rail foot */
.db26-padmin-back {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  font-size: 12px;
  color: #8fa0b6;
  text-decoration: none;
  border-bottom: 1px solid rgba(250,247,240,.08);
  margin-bottom: 4px;
  transition: color .15s;
}
.db26-padmin-back:hover { color: var(--ivory); }
.db26-padmin-back svg { flex: none; }

/* Admin rail: slightly tighter topbar accent line */
.db26-topbar--admin {
  border-bottom-color: rgba(192,57,43,.35);
}

/* ── Avatar / account menu ──────────────────────────────────── */
.db26-usermenu { position: relative; margin-top: 2px; border-top: 1px solid rgba(250,247,240,.08); }
.db26-usermenu summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  cursor: pointer;
  list-style: none;
}
.db26-usermenu summary::-webkit-details-marker { display: none; }
.db26-usermenu summary:hover { background: #1c2c40; }
.db26-usermenu-id { flex: 1; min-width: 0; }
.db26-usermenu-name {
  display: block;
  font-size: 12px;
  color: #d6dee9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db26-usermenu-sub { display: block; font-size: 10px; color: #6b7a90; }
.db26-usermenu-caret { font-size: 11px; color: #6b7a90; flex: none; }
.db26-usermenu[open] .db26-usermenu-caret { transform: rotate(180deg); }
.db26-usermenu-panel {
  /* In-flow so the menu opens downward, beneath the user name,
     expanding the rail rather than covering the row above. */
  position: static;
  margin: 2px 8px 10px;
  background: #0c1624;
  border: 1px solid rgba(250,247,240,.16);
  padding: 4px 0;
}
/* Breathing room so the open menu never sits flush on the viewport edge */
.db26-usermenu { padding-bottom: 8px; }
.db26-usermenu-panel a,
.db26-usermenu-panel button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  font-size: 12px;
  font-family: inherit;
  color: #d6dee9;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}
.db26-usermenu-panel a:hover,
.db26-usermenu-panel a.active,
.db26-usermenu-panel button:hover { background: #1c2c40; color: var(--ivory); }
.db26-usermenu-panel form { margin: 0; border-top: 1px solid rgba(250,247,240,.12); }

.db26-user {
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--ivory);
  margin-bottom: 4px;
}

.db26-avatar {
  width: 26px;
  height: 26px;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--gold);
  flex: none;
}

/* ── Main area ──────────────────────────────────────────────── */
.db26-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ── Topbar ─────────────────────────────────────────────────── */
.db26-topbar {
  height: 70px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 3.5vw, 52px);
  background: rgba(250,247,240,.95);
  flex: none;
  position: sticky;
  top: 0;
  z-index: 10;
}

.db26-breadcrumb {
  font-size: 11px;
  color: var(--muted);
}

.db26-breadcrumb a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 500;
}

.db26-breadcrumb a:hover { color: var(--gold); }

.db26-top-actions {
  display: flex;
  gap: 20px;
  align-items: center;
}

.db26-dot {
  color: var(--gold);
  font-size: 10px;
}

.db26-date-label {
  font-size: 10px;
  color: var(--muted);
}

/* ── Flash messages ─────────────────────────────────────────── */
.db26-flash {
  padding: 10px clamp(20px, 3.5vw, 52px);
  font-size: 11px;
  border-bottom: 1px solid var(--line);
}

.db26-flash.success { background: #f0f9f0; color: #2d6a2d; }
.db26-flash.error   { background: #fef2f2; color: #991b1b; }
.db26-flash.warning { background: #fffbeb; color: #92400e; }
.db26-flash.info    { background: #f0f7ff; color: #1e40af; }

/* ── Sample ribbon ──────────────────────────────────────────── */
.db26-sample-ribbon {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px clamp(20px, 3.5vw, 52px);
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  font-size: 11px;
  color: #92400e;
}

.db26-sample-ribbon strong {
  font-weight: 500;
  background: #fde68a;
  padding: 2px 7px;
  border-radius: 2px;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.db26-sample-ribbon a,
.db26-sample-ribbon button {
  margin-left: auto;
  font-size: 10px;
  color: var(--navy);
  border: 1px solid var(--line);
  background: transparent;
  padding: 5px 12px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font);
}

.db26-sample-ribbon a:hover,
.db26-sample-ribbon button:hover { border-color: var(--navy); }

/* ── Inner content ──────────────────────────────────────────── */
.db26-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 38px clamp(20px, 3.5vw, 52px) 52px;
  width: 100%;
}

/* ── Page heading ───────────────────────────────────────────── */
.db26-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 28px;
}

.db26-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--gold);
  font-weight: 500;
}

.db26-heading h1 {
  font-size: 28px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -.045em;
  margin: 7px 0 10px;
  color: var(--navy);
}

.db26-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.db26-last-refreshed {
  text-align: right;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
  flex: none;
}

.db26-last-refreshed strong {
  display: block;
  color: var(--navy);
  font-weight: 500;
  font-size: 11px;
}

/* ── 12-column grid ─────────────────────────────────────────── */
.db26-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

/* Column spans */
.db26-span-4  { grid-column: span 4; }
.db26-span-6  { grid-column: span 6; }
.db26-span-8  { grid-column: span 8; }
.db26-span-12 { grid-column: span 12; }

/* ── Panel base ─────────────────────────────────────────────── */
.db26-panel {
  border: 1px solid var(--line);
  background: rgba(244,239,228,.45);
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.db26-panel-head {
  min-height: 49px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: none;
}

.db26-panel-head h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 500;
  margin: 0;
  color: var(--navy);
}

.db26-panel-head .db26-panel-meta {
  font-size: 10px;
  color: var(--muted);
  text-align: right;
}

.db26-panel-head a {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 500;
  background: var(--navy);
  color: var(--ivory, #faf7f0);
  border: 1px solid var(--navy);
  padding: 8px 14px;
  text-decoration: none;
  flex: none;
  transition: background .14s, color .14s;
}

.db26-panel-head a:hover {
  background: var(--gold, #b8902a);
  border-color: var(--gold, #b8902a);
  color: var(--navy);
}

/* ── Readiness posture panel ────────────────────────────────── */
.db26-posture-body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  flex: 1;
}

.db26-metric {
  padding: 20px 18px 18px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

.db26-metric:last-child { border-right: 0; }

.db26-metric .number {
  font-size: 37px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.06em;
}

.db26-metric .number em {
  font-size: 13px;
  font-style: normal;
  color: var(--muted);
  letter-spacing: 0;
}

.db26-metric .label {
  font-size: 12px;
  margin-top: 10px;
}

.db26-metric .meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.5;
}

.db26-meter {
  height: 3px;
  background: #ddd7ca;
  margin-top: auto;
  padding-top: 17px;
}

.db26-meter i {
  display: block;
  height: 3px;
  background: var(--gold);
}

/* ── Scan provenance panel ──────────────────────────────────── */
.db26-provenance {
  background: var(--navy);
  color: var(--ivory);
  padding: 22px;
  display: flex;
  flex-direction: column;
}

.db26-provenance .db26-kicker { color: #aeb8c1; }

.db26-provenance h2 {
  font-size: 18px;
  line-height: 1.25;
  font-weight: 400;
  margin: 13px 0 20px;
  max-width: 220px;
  color: var(--ivory);
}

.db26-provenance-detail {
  border-top: 1px solid rgba(250,247,240,.2);
  padding-top: 14px;
  color: #c2cbd2;
  font-size: 11px;
  line-height: 1.7;
  margin-top: auto;
}

.db26-provenance-detail a {
  color: var(--gold);
  text-decoration: none;
}

.db26-gold { color: var(--gold); font-weight: 500; }

/* ── Setup panel ────────────────────────────────────────────── */
.db26-setup-body {
  padding: 18px;
  flex: 1;
}

.db26-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 12px;
}

.db26-progress-label b { font-weight: 500; }

.db26-progress-track {
  height: 4px;
  background: #ded8cc;
  margin-bottom: 19px;
}

.db26-progress-fill {
  height: 100%;
  display: block;
  background: var(--gold);
}

.db26-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.45;
  text-decoration: none;
  color: inherit;
}

.db26-check:first-of-type { border-top: 0; }

.db26-check-mark {
  width: 14px;
  height: 14px;
  border: 1px solid var(--gold);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: 10px;
  flex: none;
  font-style: normal;
}

.db26-check.pending .db26-check-mark {
  border-color: #98a0a4;
  color: #98a0a4;
}

/* ── Quick wins / Do next panel ─────────────────────────────── */
.db26-quick-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.db26-quick-row {
  display: grid;
  grid-template-columns: 62px 1fr 54px 22px;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background .12s;
  cursor: pointer;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  font-size: 13px;
}

.db26-quick-row:hover { background: #eee8db; }

.db26-tag {
  font-size: 10px;
  letter-spacing: .1em;
  font-weight: 500;
}

.db26-tag.conduct { color: #7d5f15; }
.db26-tag.cyber   { color: #3d6373; }
.db26-tag.scan    { color: #4a5568; }

.db26-task-title { font-size: 12px; }

.db26-uplift {
  font-size: 12px;
  color: #687d56;
  text-align: right;
}

.db26-quick-caret {
  color: var(--muted);
  font-size: 10px;
  text-align: center;
  transition: transform .15s;
}
.db26-quick-row[aria-expanded="true"] .db26-quick-caret { transform: rotate(180deg); }
.db26-quick-item { border-bottom: 1px solid var(--line); }
.db26-quick-item .db26-quick-row { border-bottom: 0; }

.db26-quick-detail {
  padding: 4px 18px 18px 90px;
  background: #f6f1e6;
  border-top: 1px solid var(--line);
}
.db26-quick-full-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--navy);
  margin: 14px 0 6px;
}
.db26-quick-remedy {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 12px;
  max-width: 560px;
}
.db26-quick-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0 0 14px;
}
.db26-quick-facts dt {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.db26-quick-facts dd { margin: 0; font-size: 12px; color: var(--navy); }
.db26-qw-critical { color: #91423e !important; }
.db26-qw-high     { color: #a65f31 !important; }
.db26-qw-medium   { color: #b8902a !important; }
.db26-qw-low      { color: #2d6856 !important; }

.db26-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--navy);
  color: var(--ivory, #faf7f0);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 10px 16px;
  text-decoration: none;
  border: 1px solid var(--navy);
  transition: background .14s, color .14s;
}
.db26-cta:hover { background: var(--gold, #b8902a); border-color: var(--gold, #b8902a); color: var(--navy); }

.db26-quick-foot {
  padding: 15px 18px 16px;
  color: var(--muted);
  font-size: 11px;
  margin-top: auto;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.db26-quick-foot b {
  color: var(--navy);
  font-weight: 500;
}

/* ── Regulatory developments panel ──────────────────────────── */
.db26-dev {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}

.db26-dev:last-child { border-bottom: 0; }

.db26-dev time {
  font-size: 10px;
  color: var(--gold);
  letter-spacing: .1em;
  font-style: normal;
}

.db26-dev p {
  font-size: 12px;
  line-height: 1.5;
  margin: 7px 0 0;
}

.db26-dev a {
  display: inline-block;
  margin-top: 9px;
  font-size: 10px;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}

.db26-dev a:hover { color: var(--gold); }

.db26-dev-empty {
  padding: 20px 18px;
  color: var(--muted);
  font-size: 12px;
}

/* ── Trend chart panel ───────────────────────────────────────── */
.db26-chart-wrap {
  padding: 14px 18px 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.db26-chart {
  width: 100%;
  height: 128px;
  display: block;
  flex: 1;
}

.db26-chart-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  margin-top: 6px;
}

/* ── Open findings panel ─────────────────────────────────────── */
.db26-findings-body {
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.db26-severity {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0;
}

.db26-severity:first-child { margin-top: 0; }
.db26-severity:last-child  { margin-bottom: 0; }

.db26-severity .sev-name {
  width: 52px;
  font-size: 11px;
  color: var(--muted);
  flex: none;
}

.db26-severity .sev-bar {
  height: 5px;
  background: var(--gold);
  min-width: 4px;
  transition: width .3s;
}

.db26-severity strong { font-size: 13px; font-weight: 500; }

/* ── Recent scans table ──────────────────────────────────────── */
.db26-table {
  width: 100%;
  border-collapse: collapse;
}

.db26-table th,
.db26-table td {
  text-align: left;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.db26-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-weight: 500;
}

.db26-table tr:last-child td { border-bottom: 0; }

.db26-score-pill {
  color: #55704e;
  font-weight: 500;
}

/* ── Reports & evidence packs panel ──────────────────────────── */
.db26-doc {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  text-decoration: none;
  color: inherit;
  transition: background .12s;
}

.db26-doc:last-child { border-bottom: 0; }
.db26-doc:hover { background: #eee8db; }

.db26-doc p {
  margin: 0;
  font-size: 12px;
  color: var(--navy);
}

.db26-doc small {
  display: block;
  color: var(--muted);
  margin-top: 5px;
}

.db26-doc .doc-type {
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .08em;
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Empty state ─────────────────────────────────────────────── */
.db26-empty {
  padding: 24px 18px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.db26-empty a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}

/* ── SVG icons ───────────────────────────────────────────────── */
.db26-icon {
  flex: none;
  vertical-align: middle;
}

/* ── Mobile nav — hamburger button & slide-out drawer ─────────── */
.db26-hamburger {
  display: none;          /* shown only at ≤620 px via media query */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
  flex: none;
  margin-right: 12px;
}
.db26-hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--navy);
  border-radius: 1px;
  transition: transform .2s, opacity .2s;
}
/* Animate into ✕ when drawer is open */
body.db26-nav-open .db26-hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.db26-nav-open .db26-hamburger span:nth-child(2) { opacity: 0; }
body.db26-nav-open .db26-hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Backdrop — covers the main panel while the drawer is open */
.db26-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,18,28,.55);
  z-index: 199;
}

/* ── Entry animation ─────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .db26-panel,
  .db26-provenance,
  .db26-heading {
    animation: db26In .4s ease both;
  }

  .db26-panel:nth-child(2) { animation-delay: .05s; }
  .db26-panel:nth-child(3) { animation-delay: .10s; }
  .db26-panel:nth-child(4) { animation-delay: .15s; }
  .db26-panel:nth-child(5) { animation-delay: .20s; }
  .db26-panel:nth-child(6) { animation-delay: .25s; }
  .db26-panel:nth-child(7) { animation-delay: .30s; }

  @keyframes db26In {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  /* The rail now carries the full grouped nav (mostly text links), so it
     stays at full width instead of collapsing to an icon-only strip —
     collapsing would hide every icon-less destination. It narrows slightly. */
  .db26-rail { width: 200px; }
}

@media (max-width: 900px) {
  .db26-span-4,
  .db26-span-6,
  .db26-span-8  { grid-column: span 6; }
}

@media (max-width: 620px) {
  .db26-shell  { display: block; }
  .db26-topbar { height: 58px; }
  .db26-hamburger { display: flex; }

  /* Rail becomes a fixed slide-out drawer — same element, repositioned */
  .db26-rail {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100%;
    z-index: 200;
    display: flex;             /* restore flex (desktop has display:flex too) */
    transform: translateX(-100%);
    transition: transform .25s ease;
  }
  body.db26-nav-open .db26-rail         { transform: translateX(0); }
  body.db26-nav-open .db26-nav-backdrop { display: block; }
  .db26-heading { display: block; }
  .db26-last-refreshed { text-align: left; margin-top: 15px; }
  .db26-span-4,
  .db26-span-6,
  .db26-span-8  { grid-column: span 12; }
  .db26-posture-body { grid-template-columns: 1fr; }
  .db26-metric { border-right: 0; border-bottom: 1px solid var(--line); }
  .db26-metric:last-child { border-bottom: 0; }
  .db26-heading h1 { font-size: 22px; }
}

/* .back-to-top styles are in app.css (loaded before this sheet) */

/* ═══════════════════════════════════════════════════════════════════════
   Support split-inbox (.si-*) — shared by customer (support/my_tickets.html)
   and staff (support/tickets.html) ticket screens. Screen-specific
   overrides stay in each template's extra_css block.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Split-inbox shell ── */
.si-shell { display:grid; grid-template-columns:420px 1fr; border:1px solid var(--line); min-height:580px; background:var(--ivory); }
@media (max-width:900px){ .si-shell { grid-template-columns:1fr; } }

/* ── Left: ticket list ── */
.si-list { border-right:1px solid var(--line); display:flex; flex-direction:column; }
.si-list-head { display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-10) var(--sp-16); border-bottom:1px solid var(--line);
  font-size:var(--fs-detail); text-transform:uppercase; letter-spacing:.16em; color:var(--muted); }
.si-list-scroll { overflow-y:auto; flex:1; }
.si-list-scroll::-webkit-scrollbar { width:4px; }
.si-list-scroll::-webkit-scrollbar-thumb { background:var(--tan-1); }

.si-row { display:block; width:100%; text-align:left; background:none; border:none;
  border-bottom:1px solid var(--line); border-left:3px solid transparent;
  padding:var(--sp-16); cursor:pointer; text-decoration:none; color:var(--navy);
  transition:background .12s; }
.si-row:hover { background:var(--soft); }
.si-row.si-row--active { background:var(--soft); border-left-color:var(--gold); padding-left:13px; }
.si-row-subject { font-size:var(--fs-body); font-weight:500; line-height:1.4; margin-bottom:5px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-8); }
.si-row-subject-text { flex:1; }
.si-row-chevron { color:var(--gold); flex-shrink:0; margin-top:2px; transition:transform .15s; }
.si-row--active .si-row-chevron { transform:rotate(-90deg); }
.si-row-meta { font-size:var(--fs-detail); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:var(--sp-8); }
.si-row-foot { display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap; }

/* ── Status / priority chips ── */
.si-chip { display:inline-block; padding:2px 7px; font-size:var(--fs-detail); font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; }
.si-chip--open     { background:var(--navy); color:var(--ivory); }
.si-chip--progress { background:var(--soft); color:var(--gold-dk); border:1px solid var(--gold); }
.si-chip--done     { color:var(--muted); border:1px solid var(--tan-3); }
.si-chip--high     { color:var(--rust); }
.si-chip--normal, .si-chip--low { color:var(--muted); }
.si-time { font-size:var(--fs-detail); color:var(--muted); margin-left:auto; }

/* ── Right: detail pane ── */
.si-detail { display:flex; flex-direction:column; }
.si-detail-head { padding:var(--sp-22) var(--sp-28) var(--sp-16); border-bottom:1px solid var(--line); }
.si-detail-ref   { font-size:var(--fs-detail); text-transform:uppercase; letter-spacing:.18em; color:var(--gold); margin-bottom:var(--sp-6); }
.si-detail-title { font-size:var(--fs-h3); font-weight:500; letter-spacing:-.025em; line-height:1.25; }
.si-detail-meta  { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); margin-top:var(--sp-14); padding-top:var(--sp-14); }
.si-meta-item label { display:block; font-size:var(--fs-detail); text-transform:uppercase; letter-spacing:.16em; color:var(--muted); margin-bottom:var(--sp-4); }
.si-meta-item span  { font-size:var(--fs-small); }

.si-body { flex:1; padding:var(--sp-22) var(--sp-28); overflow-y:auto; }
.si-body::-webkit-scrollbar { width:4px; }
.si-body::-webkit-scrollbar-thumb { background:var(--tan-1); }

.si-description { border-left:2px solid var(--gold); background:var(--soft); padding:var(--sp-14) var(--sp-18); margin-bottom:var(--sp-22); }
.si-description-label { font-size:var(--fs-detail); text-transform:uppercase; letter-spacing:.16em; color:var(--muted); margin-bottom:var(--sp-6); }
.si-description-text  { font-size:var(--fs-body); line-height:1.7; color:var(--navy); }

.si-thread-label { display:flex; align-items:center; gap:var(--sp-10); font-size:var(--fs-detail);
  text-transform:uppercase; letter-spacing:.18em; color:var(--muted); margin-bottom:var(--sp-16); }
.si-thread-label::after { content:''; flex:1; height:1px; background:var(--line); }

.si-msg { display:flex; gap:var(--sp-10); margin-bottom:var(--sp-18); }
.si-msg--staff { padding-left:var(--sp-32); }
.si-msg-avatar { width:28px; height:28px; display:flex; align-items:center;
  justify-content:center; font-size:var(--fs-detail); font-weight:500; flex-shrink:0; }
.si-msg-avatar--client { border:1px solid var(--line); background:var(--soft); color:var(--muted); }
.si-msg-avatar--staff  { background:var(--navy); color:var(--gold); font-size:var(--fs-detail); letter-spacing:.08em; }
.si-msg-name   { font-size:var(--fs-small); font-weight:500; }
.si-msg-byline { font-size:var(--fs-detail); color:var(--meta-gray); margin-left:var(--sp-6); }
.si-msg-time   { font-size:var(--fs-detail); color:var(--meta-gray); }
.si-msg-body   { font-size:var(--fs-body); line-height:1.7; color:var(--msg-ink); margin-top:var(--sp-4); max-width:620px; }

/* ── Reply box ── */
.si-reply { border-top:1px solid var(--line); background:var(--soft); padding:var(--sp-16) var(--sp-28); }
.si-reply-label { font-size:var(--fs-detail); text-transform:uppercase; letter-spacing:.16em; font-weight:500; margin-bottom:var(--sp-8); }
.si-reply textarea { width:100%; resize:none; border:1px solid var(--tan-2); background:var(--ivory);
  padding:var(--sp-10) var(--sp-12); font-size:var(--fs-body); line-height:1.5; outline:none;
  font-family:inherit; color:var(--navy); }
.si-reply textarea:focus { border-color:var(--gold); }
.si-reply-foot { display:flex; justify-content:flex-end; margin-top:var(--sp-10); }

/* ── No-selection placeholder ── */
.si-placeholder { display:flex; flex-direction:column; align-items:center;
  justify-content:center; flex:1; color:var(--muted); }
.si-placeholder-icon { font-size:var(--fs-display); margin-bottom:var(--sp-10); opacity:.35; }
.si-placeholder-text { font-size:var(--fs-small); letter-spacing:.04em; }