/* ─── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --bg: 244, 246, 249;
  --panel: 255, 255, 255;
  --panel-strong: 248, 250, 252;
  --muted: 99, 115, 129;
  --text: 26, 35, 50;
  --border: 224, 230, 239;
  --brand: 10, 136, 144;
  --brand-text: 255, 255, 255;
  --brand2: 32, 199, 181;
  --accent: 242, 181, 68;
  --accent-text: 17, 24, 39;
  --action-bg: 10, 136, 144;
  --action-text: 255, 255, 255;
  --action-hover-bg: 9, 122, 130;
  --success: 0, 135, 90;
  --warning: 245, 166, 35;
  --danger: 192, 57, 43;
  --nav-bg: 11, 39, 64;
  --topbar-bg: 11, 39, 64;
  --nav-text: 255, 255, 255;
  --nav-muted: 203, 213, 225;
  --topbar-text: 255, 255, 255;
  --topbar-muted: 203, 213, 225;
  --shell-color: 11, 39, 64;
  --shell-secondary-color: 18, 58, 82;
  --shell-background: #0B2740;
  --nav-background: #0B2740;
  --topbar-background: #0B2740;
  --sidebar-w: 224px;
  --filter-w: 230px;
  --radius: 6px;
  --radius-lg: 8px;
  --shadow: 0 1px 4px rgba(10,22,40,0.08);
  --shadow-lg: 0 6px 20px rgba(10,22,40,0.13);
}

body.theme-dark {
  --bg: 3, 7, 18;
  --panel: 10, 16, 34;
  --panel-strong: 14, 21, 44;
  --muted: 148, 163, 184;
  --text: 226, 232, 240;
  --border: 30, 41, 59;
  --brand: 83, 157, 255;
  --brand2: 61, 126, 211;
  --accent: 245, 166, 35;
  --success: 52, 184, 137;
  --warning: 245, 166, 35;
  --danger: 248, 113, 113;
  --nav-bg: 8, 18, 34;
  --topbar-bg: 8, 18, 34;
  --shell-color: 8, 18, 34;
  --shell-secondary-color: 27, 43, 73;
  --shell-background: #081222;
  --nav-background: #081222;
  --topbar-background: #081222;
}

/* ─── Reset & base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ─── Global focus ring (accessibility) ─────────────────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid rgba(var(--brand), 0.65);
  outline-offset: 2px;
  border-radius: 6px;
}
.nav-item:focus-visible,
.primary-btn:focus-visible,
.secondary-btn:focus-visible,
.ghost-btn:focus-visible,
.danger-btn:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 2px rgba(var(--brand), 0.25);
}

/* Screen-reader-only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13.5px;
  color: rgb(var(--text));
  background: linear-gradient(180deg, rgba(var(--panel-strong), 0.92), rgb(var(--bg)) 220px);
}

body { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

/* ── Thin custom scrollbar (Webkit / Blink) ─────────────────────────────────── */
::-webkit-scrollbar               { width: 6px; height: 6px; }
::-webkit-scrollbar-track         { background: transparent; }
::-webkit-scrollbar-thumb         { background: rgba(255,255,255,0.12); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover   { background: rgba(var(--brand),0.45); }
::-webkit-scrollbar-corner        { background: transparent; }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }

/* ─── Shell layout ──────────────────────────────────────────────────────────── */
.shell {
  display: flex;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

/* ─── Sidebar ───────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  border-right: 1px solid rgb(var(--border));
  background: linear-gradient(180deg,
    rgba(var(--brand), 0.22),
    rgba(var(--brand), 0.05) 44%,
    rgba(var(--brand2), 0.08));
  padding: 12px 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brand-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(var(--border), 0.9);
  background: rgba(var(--panel), 0.85);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 6px;
}

.brand-badge {
  height: 44px;
  width: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: white;
  background: linear-gradient(135deg, rgb(var(--accent)), rgb(var(--brand)) 70%, rgb(var(--brand2)));
  box-shadow: 0 8px 20px rgba(var(--accent), 0.25);
  flex-shrink: 0;
}

.brand-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: rgb(var(--accent));
  line-height: 1.2;
}

.brand-subtitle {
  margin-top: 3px;
  color: rgb(var(--muted));
  font-size: 0.75rem;
  line-height: 1.3;
}

.brand-owner {
  margin-top: 2px;
  color: rgb(var(--nav-muted));
  font-size: 0.61rem;
  line-height: 1.25;
}

.nav-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgb(var(--muted));
  padding: 10px 8px 3px;
  opacity: 0.65;
  line-height: 1;
  margin-top: 4px;
}

/* Collapsible nav sections (button label + chevron) */
button.nav-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: opacity 0.15s;
}
button.nav-section-label:hover { opacity: 1; }
button.nav-section-label:focus-visible {
  outline: 2px solid rgb(var(--brand));
  outline-offset: -2px;
  border-radius: 6px;
  opacity: 1;
}
.nav-section-label .collapse-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  opacity: 0.8;
  transition: transform 0.18s ease;
}
.nav-section-label .collapse-chevron::before {
  content: '⌄';
  font-size: 12px;
  line-height: 1;
}
.nav-list {
  max-height: 1000px;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: max-height 0.2s ease, opacity 0.16s ease, visibility 0.2s ease;
}
.nav-section.is-collapsed .nav-list {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.nav-section.is-collapsed .nav-section-label .collapse-chevron { transform: rotate(-90deg); }
.nav-section + .nav-section { margin-top: 0; }
.nav-list { display: grid; gap: 2px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius);
  color: rgb(var(--muted));
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.2;
}

.nav-item:hover {
  background: rgba(var(--text), 0.05);
  color: rgb(var(--text));
}

.nav-item.active {
  background: rgba(var(--brand), 0.15);
  border-color: rgba(var(--brand), 0.28);
  color: rgb(var(--text));
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(var(--brand), 0.10);
}

.nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  opacity: 0.8;
}
.nav-item.active .nav-icon,
.nav-item:hover .nav-icon { opacity: 1; }

/* ─── Main shell ────────────────────────────────────────────────────────────── */
.main-shell {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  overflow: hidden;
}

/* ─── Topbar ────────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid rgb(var(--border));
  background: rgba(var(--bg), 0.88);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 16px;
}

.topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }

.page-kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  color: rgb(var(--muted));
}

.topbar h1 {
  margin: 2px 0 0;
  font-size: 1.18rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Search bar */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(var(--panel-strong), 0.95);
  border: 1px solid rgb(var(--border));
  border-radius: 999px;
  padding: 5px 12px;
  width: 220px;
  transition: width 0.2s ease, border-color 0.15s;
}

.search-bar:focus-within {
  border-color: rgba(var(--brand), 0.5);
  width: 270px;
  box-shadow: 0 0 0 3px rgba(var(--brand), 0.08);
}

.search-bar input {
  border: none;
  background: transparent;
  outline: none;
  color: rgb(var(--text));
  width: 100%;
  font-size: 0.84rem;
}

.search-bar input::placeholder { color: rgb(var(--muted)); }

.search-icon { color: rgb(var(--muted)); width:14px; height:14px; flex-shrink:0; display:block; }

/* ─── Buttons ───────────────────────────────────────────────────────────────── */
.primary-btn, .ghost-btn, .secondary-btn, .text-link, .danger-btn {
  border-radius: var(--radius);
  padding: 6px 11px;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.primary-btn {
  color: rgb(var(--action-text));
  background: rgb(var(--action-bg));
  border-color: rgb(var(--action-bg));
  box-shadow: 0 4px 14px rgba(var(--action-bg), 0.16);
}
.primary-btn:hover {
  color: rgb(var(--action-text));
  background: rgb(var(--action-hover-bg));
  border-color: rgb(var(--action-hover-bg));
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(var(--action-bg), 0.22);
}

.secondary-btn {
  color: rgb(var(--text));
  background: rgba(var(--panel), 0.95);
  border-color: rgb(var(--border));
}
.secondary-btn:hover { background: rgba(var(--panel-strong), 0.98); }

.ghost-btn {
  color: rgb(var(--brand));
  background: rgba(var(--brand), 0.08);
  border-color: rgba(var(--brand), 0.22);
}
.ghost-btn:hover { background: rgba(var(--brand), 0.14); }

.danger-btn {
  color: rgb(var(--danger));
  background: rgba(var(--danger), 0.08);
  border-color: rgba(var(--danger), 0.22);
}

.text-link {
  color: rgb(var(--brand));
  padding: 0;
  border: none;
  background: none;
  font-size: 0.84rem;
}
.text-link:hover { text-decoration: underline; }

.full-width { width: 100%; }
button:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* Icon inside a button (used with primary-btn, secondary-btn, ghost-btn) */
.btn-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  display: block;
}

/* ─── Badges & chips ────────────────────────────────────────────────────────── */
.status-badge, .filter-chip, .subtle-badge, .inline-badge, .kpi-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid transparent;
}

.status-ready {
  color: rgb(var(--success));
  background: rgba(var(--success), 0.10);
  border-color: rgba(var(--success), 0.22);
}
.status-warning {
  color: rgb(var(--warning));
  background: rgba(var(--warning), 0.10);
  border-color: rgba(var(--warning), 0.22);
}

.filter-chip {
  color: rgb(var(--brand));
  background: rgba(var(--brand), 0.10);
  border-color: rgba(var(--brand), 0.22);
  cursor: pointer;
}
.filter-chip:hover { background: rgba(var(--brand), 0.18); }

.subtle-badge, .inline-badge {
  color: rgb(var(--muted));
  background: rgba(var(--panel), 0.86);
  border-color: rgba(var(--border), 0.92);
}

.filter-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgb(var(--brand));
  color: white;
}

.filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 14px 0;
}

/* ─── Breadcrumbs ───────────────────────────────────────────────────────────── */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 7px 14px 0;
  font-size: 11.5px;
  font-weight: 600;
  color: rgb(var(--muted));
}
.breadcrumbs .breadcrumb-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: rgb(var(--muted));
  background: rgba(var(--panel-strong), 0.65);
  border: 1px solid rgba(var(--border), 0.7);
  transition: color .15s ease, border-color .15s ease;
}
.breadcrumbs .breadcrumb-home:hover { color: rgb(var(--brand)); border-color: rgba(var(--brand), 0.45); }
.breadcrumbs .breadcrumb-sep { color: rgba(var(--muted), .6); font-weight: 400; }
.breadcrumbs .breadcrumb-item {
  padding: 2px 6px;
  border-radius: 6px;
  color: rgb(var(--muted));
  transition: color .15s ease, background .15s ease;
}
.breadcrumbs a.breadcrumb-item:hover { color: rgb(var(--brand)); background: rgba(var(--brand), 0.08); }
.breadcrumbs .breadcrumb-item.is-current { color: rgb(var(--text)); font-weight: 700; }

/* ─── Cue tags & info tooltip (self-explanatory hero pattern) ───────────────── */
.cue-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cue {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  color: rgb(var(--brand));
  background: rgba(var(--brand), 0.08);
  border: 1px solid rgba(var(--brand), 0.20);
  white-space: nowrap;
}
.cue.accent { color: rgb(var(--accent)); background: rgba(var(--accent), 0.08); border-color: rgba(var(--accent), 0.22); }
.cue.muted  { color: rgb(var(--muted)); background: rgba(var(--panel-strong), 0.92); border-color: rgba(var(--border), 0.85); }

.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: rgb(var(--muted));
  background: rgba(var(--panel-strong), 0.95);
  border: 1px solid rgba(var(--border), 0.92);
  cursor: help;
  user-select: none;
  margin-left: 4px;
  position: relative;
}
.info-tip:hover, .info-tip:focus-visible {
  color: rgb(var(--brand));
  border-color: rgba(var(--brand), 0.45);
  outline: none;
}
.info-tip[data-tip]:hover::after,
.info-tip[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  transform: translateX(-30%);
  z-index: 50;
  min-width: 240px;
  max-width: 340px;
  padding: 8px 10px;
  background: rgb(var(--text));
  color: rgb(var(--panel));
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  white-space: normal;
  text-align: left;
  pointer-events: none;
}

/* ─── Reusable section header (partial) ────────────────────────────────────── */
.section-header { margin-bottom: 10px; }
.section-header-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.section-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(var(--brand), 0.10);
  color: rgb(var(--brand));
  border: 1px solid rgba(var(--brand), 0.20);
}
.section-title { margin: 0; color: rgb(var(--text)); font-size: 16px; font-weight: 900; line-height: 1.25; }
.section-eyebrow {
  color: rgb(var(--muted));
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}

/* ─── Reusable KPI card (partial) ───────────────────────────────────────────── */
.kpi-card {
  background: rgb(var(--panel));
  border: 1px solid rgb(var(--border));
  border-radius: 12px;
  padding: 12px 14px;
  min-width: 0;
}
.kpi-card-val { color: rgb(var(--text)); font-size: 20px; font-weight: 900; line-height: 1.12; overflow-wrap: anywhere; }
.kpi-card-label {
  margin-top: 5px;
  color: rgb(var(--muted));
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kpi-card-note { margin-top: 4px; color: rgb(var(--muted)); font-size: 11px; line-height: 1.35; }
.kpi-card-drill { margin-top: 8px; color: rgb(var(--brand)); font-size: 11px; font-weight: 900; }
.kpi-card.good .kpi-card-val { color: rgb(var(--success)); }
.kpi-card.warn .kpi-card-val { color: rgb(var(--warning)); }
.kpi-card.risk .kpi-card-val { color: rgb(var(--danger)); }
a.kpi-card--link { display: block; color: inherit; text-decoration: none; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
a.kpi-card--link:hover, a.kpi-card--link:focus-visible {
  border-color: rgba(var(--brand), 0.42);
  box-shadow: 0 10px 26px rgba(var(--brand), 0.10);
  transform: translateY(-1px);
  outline: none;
}

/* Charts: shimmer placeholder until Chart.js renders */
canvas[data-chart]:not(.chart-rendered) {
  background: linear-gradient(90deg,
    rgba(var(--border), 0.18) 0%,
    rgba(var(--border), 0.45) 50%,
    rgba(var(--border), 0.18) 100%);
  background-size: 600px 100%;
  animation: mi-shimmer 1.4s linear infinite;
  border-radius: 8px;
}

/* ─── Reusable skeleton loaders (partial) ──────────────────────────────────── */
@keyframes mi-shimmer {
  0% { background-position: -300px 0; }
  100% { background-position: 300px 0; }
}
.shimmer, .skeleton-line, .skeleton-chart, .skeleton-kpi, .skeleton-card, .skeleton-trow > .skeleton-line {
  background: linear-gradient(90deg, rgba(var(--border), 0.18) 0%, rgba(var(--border), 0.45) 50%, rgba(var(--border), 0.18) 100%);
  background-size: 600px 100%;
  animation: mi-shimmer 1.4s linear infinite;
  border-radius: 6px;
}
.skeleton-line { height: 10px; margin: 6px 0; }
.skeleton-line.lg { height: 18px; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-70 { width: 70%; }
.skeleton-line.w-80 { width: 80%; }
.skeleton-line.w-90 { width: 90%; }
.skeleton-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.skeleton-kpi {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgb(var(--border));
  background: rgb(var(--panel));
  animation: none;
}
.skeleton-card {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgb(var(--border));
  background: rgb(var(--panel));
  animation: none;
}
.skeleton-table {
  border: 1px solid rgb(var(--border));
  border-radius: 10px;
  padding: 8px;
  background: rgb(var(--panel));
  animation: none;
}
.skeleton-trow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 6px 0; }
.skeleton-trow > .skeleton-line { height: 12px; }

/* Layout: content shell */
.content-shell {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
}

.content-shell.with-filters {
  display: grid;
  grid-template-columns: var(--filter-w) 1fr;
  gap: 16px;
}

/* ─── Cards & panels ────────────────────────────────────────────────────────── */
.filter-panel, .page-panel, .panel, .card,
.table-wrap, .chat-card, .empty-state, .mapping-preview {
  border: 1px solid rgba(var(--border), 0.92);
  background: rgba(var(--panel), 0.95);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.filter-panel { padding: 12px; overflow-y: auto; transition: opacity 0.2s ease; }

/* Wrapper for mib-bar + page-panel — fills col 3 in filter grid, or stretches in flex layout */
.content-main-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  flex: 1 1 auto;
}
.page-panel { padding: 12px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }

.card, .panel, .table-wrap, .chat-card, .mapping-preview, .empty-state { padding: 12px; }

/* ─── Filter pane collapse/expand ───────────────────────────────────────────── */
/* 3-column grid: [filter panel] [28px toggle strip] [page content] */
.content-shell.with-filters {
  grid-template-columns: var(--filter-w) 28px 1fr;
  gap: 0 8px;
}

.filter-toggle-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
}

.filter-collapse-tab {
  width: 24px;
  height: 42px;
  background: rgb(var(--panel));
  border: 1px solid rgba(var(--border), 0.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.filter-collapse-tab:hover { background: rgb(var(--brand)); }
.filter-collapse-icon {
  font-size: 1rem;
  font-weight: 700;
  color: rgb(var(--muted));
  transition: transform 0.22s, color 0.15s;
  line-height: 1;
}
.filter-collapse-tab:hover .filter-collapse-icon { color: #fff; }

/* collapsed: filter column squishes to 0, toggle stays visible */
.content-shell.with-filters.filters-collapsed {
  grid-template-columns: 0px 28px 1fr;
}
.content-shell.with-filters.filters-collapsed .filter-panel {
  overflow: hidden;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  border-color: transparent;
  box-shadow: none;
  min-width: 0;
}
.content-shell.with-filters.filters-collapsed .filter-collapse-icon {
  transform: rotate(180deg);
}

/* ─── Filter pane (enterprise) ──────────────────────────────────────────────── */
.filter-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(var(--border), 0.8);
}

.filter-panel h2, .section-header h2, .panel-header h2 {
  margin: 3px 0 0;
  font-size: 0.98rem;
  font-weight: 700;
}

.filter-group {
  border: 1px solid rgba(var(--border), 0.7);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
  background: rgba(var(--panel-strong), 0.5);
}

.filter-group summary {
  list-style: none;
  cursor: pointer;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgb(var(--text));
  user-select: none;
}
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary::after {
  content: '›';
  font-size: 1rem;
  color: rgb(var(--muted));
  transform: rotate(90deg);
  transition: transform 0.18s;
  flex-shrink: 0;
}
.filter-group[open] summary::after { transform: rotate(-90deg); }
.filter-group summary:hover { background: rgba(var(--brand), 0.05); }

.filter-group-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.filter-group-body {
  padding: 0 10px 10px;
  border-top: 1px solid rgba(var(--border), 0.5);
}

.filter-search-input {
  width: 100%;
  margin: 8px 0 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgb(var(--border));
  background: rgb(var(--panel));
  color: rgb(var(--text));
  font-size: 0.78rem;
  outline: none;
}
.filter-search-input:focus { border-color: rgba(var(--brand), 0.4); }

.checkbox-list {
  max-height: 126px;
  overflow-y: auto;
  display: grid;
  gap: 1px;
}
.checkbox-list::-webkit-scrollbar { width: 4px; }
.checkbox-list::-webkit-scrollbar-thumb { background: rgba(var(--border), 0.6); border-radius: 4px; }

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  color: rgb(var(--muted));
  transition: background 0.1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.checkbox-label:hover { background: rgba(var(--brand), 0.07); color: rgb(var(--text)); }
.checkbox-label input[type="checkbox"] {
  accent-color: rgb(var(--brand));
  flex-shrink: 0;
  cursor: pointer;
}
.checkbox-label.is-checked { color: rgb(var(--text)); font-weight: 500; }

.filter-grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.filter-date-group label {
  display: block;
  font-size: 0.78rem;
  color: rgb(var(--muted));
  margin-bottom: 4px;
  font-weight: 500;
}

.filter-date-group input {
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgb(var(--border));
  background: rgb(var(--panel));
  color: rgb(var(--text));
  font-size: 0.8rem;
  outline: none;
}

.filter-actions { margin-top: 12px; display: grid; gap: 8px; }

.micro-copy {
  color: rgb(var(--muted));
  font-size: 0.75rem;
  line-height: 1.4;
}

/* ─── Stats / KPI grid ──────────────────────────────────────────────────────── */
.stats-grid, .kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 9px;
  margin-bottom: 10px;
}

.stat-card {
  position: relative;
  overflow: hidden;
  padding: 12px;
  cursor: default;
}

.stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, rgb(var(--brand)), rgb(var(--brand2)), rgb(var(--accent)));
}

.stat-icon {
  font-size: 1.15rem;
  margin-bottom: 7px;
  display: block;
}

.stat-label {
  color: rgb(var(--muted));
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-value {
  font-size: 1.38rem;
  font-weight: 800;
  margin-top: 4px;
  line-height: 1;
  background: linear-gradient(135deg, rgb(var(--text)), rgba(var(--text), 0.75));
  -webkit-background-clip: text;
  background-clip: text;
}

.stat-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.stat-note {
  color: rgb(var(--muted));
  font-size: 0.78rem;
  flex: 1;
}

.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
}
.kpi-trend.up { color: rgb(var(--success)); background: rgba(var(--success), 0.1); }
.kpi-trend.down { color: rgb(var(--danger)); background: rgba(var(--danger), 0.1); }
.kpi-trend.neutral { color: rgb(var(--muted)); background: rgba(var(--muted), 0.1); }

/* ─── Section layout ────────────────────────────────────────────────────────── */
.dual-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.triple-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.upload-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.section-header, .panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.panel-kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  color: rgb(var(--muted));
  font-weight: 600;
}

.helper-copy { margin: 0 0 8px; color: rgb(var(--muted)); line-height: 1.45; font-size: 0.82rem; }
.small-copy { color: rgb(var(--muted)); font-size: 0.8rem; line-height: 1.4; }

/* ─── Charts ────────────────────────────────────────────────────────────────── */
.chart-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.chart-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.chart-wrap-sm { height: 150px; }
.chart-wrap-md { height: 205px; }
.chart-wrap-lg { height: 255px; }
.chart-wrap-xl { height: 285px; }

.opportunity-split {
  display: grid;
  gap: 12px;
}
.opportunity-split-panel {
  min-width: 0;
  padding: 10px 11px 8px;
  border: 1px solid rgba(var(--border), 0.82);
  border-radius: 8px;
  background: rgba(var(--panel-strong), 0.48);
}
.opportunity-split-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.opportunity-split-head strong {
  color: rgb(var(--text));
  font-size: 0.78rem;
}
.opportunity-split-head span {
  color: rgb(var(--muted));
  font-size: 0.68rem;
}
.opportunity-split-chart { height: 210px; }

@media (max-width: 700px) {
  .opportunity-split-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .opportunity-split-chart { height: 235px; }
}

.chart-caption {
  text-align: center;
  font-size: 0.75rem;
  color: rgb(var(--muted));
  margin-top: 6px;
}

.chart-drill-hint {
  font-size: 0.72rem;
  color: rgb(var(--muted));
  text-align: right;
  margin-top: 4px;
  font-style: italic;
}

/* ─── Bar list (legacy + enhanced) ─────────────────────────────────────────── */
.bar-list { display: grid; gap: 7px; }

.bar-row {
  display: grid;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.1s;
}
.bar-row:hover { background: rgba(var(--brand), 0.05); }

.bar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bar-label { font-weight: 600; font-size: 0.84rem; }
.bar-meta { color: rgb(var(--muted)); font-size: 0.78rem; }

.bar-track {
  width: 100%;
  height: 6px;
  background: rgba(var(--brand), 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(var(--brand)), rgb(var(--brand2)));
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bar-fill.opp {
  background: linear-gradient(90deg, rgb(var(--success)), rgba(var(--success), 0.6));
}

/* ─── Tables ────────────────────────────────────────────────────────────────── */
.table-wrap { overflow: auto; padding: 0; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.table thead th {
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--muted));
  padding: 8px 10px;
  border-bottom: 1px solid rgba(var(--border), 0.9);
  white-space: nowrap;
  background: rgba(var(--panel-strong), 0.7);
}

.table thead th.th-sort {
  cursor: pointer;
  user-select: none;
}
.table thead th.th-sort:hover { color: rgb(var(--brand)); }
.table thead th.th-sort::after { content: ' ↕'; opacity: 0.4; font-size: 0.65rem; }
.table thead th.th-sort.sort-asc::after { content: ' ↑'; opacity: 1; color: rgb(var(--brand)); }
.table thead th.th-sort.sort-desc::after { content: ' ↓'; opacity: 1; color: rgb(var(--brand)); }

.table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(var(--border), 0.6);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }

.table tbody tr.clickable-row {
  cursor: pointer;
  transition: background 0.1s;
}
.table tbody tr.clickable-row:hover {
  background: rgba(var(--brand), 0.05);
}
.table tbody tr.clickable-row:active { background: rgba(var(--brand), 0.10); }

.metric-strong { font-weight: 700; }

.table-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  background: rgba(var(--panel-strong), 0.9);
  border: 1px solid rgb(var(--border));
  border-radius: 10px;
  padding: 6px 10px;
  width: 100%;
}
.table-search-bar input {
  border: none;
  background: transparent;
  outline: none;
  color: rgb(var(--text));
  width: 100%;
  font-size: 0.84rem;
}
.table-search-bar input::placeholder { color: rgb(var(--muted)); }

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.table-toolbar-left { display: flex; align-items: center; gap: 8px; }
.table-toolbar-right { display: flex; align-items: center; gap: 8px; }

/* Shared data-table controls: every enhanced table gets a compact, consistent
   filter/paging bar and a bounded scroll surface. Existing server-managed
   tables opt out through data-mi-managed-pagination. */
.mi-table-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  padding: 7px 9px;
  border: 1px solid rgb(var(--border));
  border-radius: 9px;
  background: rgba(var(--panel-strong), .72);
  color: rgb(var(--muted));
  font-size: 11px;
}
.mi-table-controls-left,
.mi-table-controls-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mi-table-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgb(var(--muted));
  font-weight: 700;
  white-space: nowrap;
}
.mi-table-filter {
  width: min(230px, 34vw);
  min-width: 130px;
  height: 30px;
  box-sizing: border-box;
  padding: 0 9px;
  border: 1px solid rgb(var(--border));
  border-radius: 7px;
  outline: none;
  background: rgb(var(--panel));
  color: rgb(var(--text));
  font: inherit;
}
.mi-table-filter:focus {
  border-color: rgba(var(--brand), .7);
  box-shadow: 0 0 0 3px rgba(var(--brand), .12);
}
.mi-table-count,
.mi-table-page,
.mi-table-page-size { white-space: nowrap; }
.mi-table-controls button {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgb(var(--border));
  border-radius: 7px;
  background: rgb(var(--panel));
  color: rgb(var(--text));
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}
.mi-table-controls button:hover:not(:disabled) {
  border-color: rgba(var(--brand), .7);
  background: rgba(var(--brand), .08);
}
.mi-table-controls button:disabled {
  cursor: not-allowed;
  opacity: .45;
}
.mi-table-scroll {
  max-width: 100%;
  max-height: min(58vh, 560px);
  overflow: auto;
  scrollbar-color: rgba(var(--muted), .55) rgba(var(--border), .28);
  scrollbar-width: thin;
}
.mi-table-scroll table { min-width: max-content; }
.mi-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}
.mi-detailable-row {
  cursor: pointer;
}
.mi-detailable-row:hover {
  background: rgba(var(--brand), .055);
}
.mi-source-th,
.mi-source-td {
  white-space: nowrap;
}
.mi-source-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.mi-source-internal { color: rgb(var(--muted)); background: rgba(var(--muted), .08); }
.mi-source-public { color: rgb(var(--brand)); background: rgba(var(--brand), .08); }
.mi-source-ai { color: rgb(var(--accent)); background: rgba(var(--accent), .1); }
.mi-source-discovery { color: rgb(var(--brand)); background: rgba(var(--brand), .13); }
.mi-source-mixed { color: rgb(var(--warning)); background: rgba(var(--warning), .1); }
.mi-detail-source-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 13px;
  padding: 10px;
  border: 1px solid rgba(var(--brand), .22);
  border-radius: 9px;
  background: rgba(var(--brand), .045);
  color: rgb(var(--text));
  font-size: 12px;
}
.mi-detail-label {
  margin-bottom: 4px;
  color: rgb(var(--muted));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mi-detail-source-panel a { color: rgb(var(--brand)); font-weight: 700; overflow-wrap: anywhere; }
.mi-detail-section { margin-top: 14px; }
.mi-detail-section h4 { margin: 0 0 7px; color: rgb(var(--text)); font-size: 12px; }
.mi-detail-table-wrap { max-height: 260px; overflow: auto; border: 1px solid rgb(var(--border)); border-radius: 8px; }
.mi-detail-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 11px; }
.mi-detail-table th { position: sticky; top: 0; z-index: 1; padding: 7px 8px; color: rgb(var(--muted)); background: rgb(var(--panel-strong)); font-size: 9px; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.mi-detail-table td { padding: 8px; border-top: 1px solid rgba(var(--border), .7); color: rgb(var(--text)); vertical-align: top; }
.mi-detail-table a { color: rgb(var(--brand)); overflow-wrap: anywhere; }
.mi-detail-table .small-copy { margin-top: 3px; line-height: 1.35; }
@media (max-width: 720px) {
  .mi-detail-source-panel { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .mi-table-controls { align-items: stretch; }
  .mi-table-controls-left,
  .mi-table-controls-right { width: 100%; justify-content: space-between; }
  .mi-table-filter { width: min(100%, 230px); }
}

/* ─── Row detail modal ──────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.55);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fade-in 0.15s ease;
}

.modal-overlay.hidden { display: none; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal-panel {
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--border), 0.92);
  background: rgb(var(--panel));
  box-shadow: var(--shadow-lg);
  animation: slide-up 0.2s ease;
}

.modal-overlay.mi-compliance-detail-modal .modal-panel {
  max-width: 980px;
}

.modal-overlay.mi-compliance-detail-modal .mi-detail-source-panel {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mi-compliance-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 9px;
}

.mi-compliance-metric {
  padding: 11px;
  border: 1px solid rgba(var(--border), .8);
  border-radius: 10px;
  background: rgba(var(--panel-strong), .72);
}

.mi-compliance-metric strong {
  display: block;
  margin-top: 4px;
  color: rgb(var(--text));
  font-size: 16px;
}

.mi-compliance-metric.variance {
  border-color: rgba(var(--danger), .32);
  background: rgba(var(--danger), .06);
}

.mi-compliance-formula {
  margin-top: 9px;
  padding: 10px;
  border-left: 3px solid rgb(var(--brand));
  background: rgba(var(--brand), .055);
  color: rgb(var(--text));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  overflow-wrap: anywhere;
}

@media (max-width: 840px) {
  .mi-compliance-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-overlay.mi-compliance-detail-modal .mi-detail-source-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .modal-overlay.mi-compliance-detail-modal .mi-detail-source-panel {
    grid-template-columns: 1fr;
  }
}

@keyframes slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(var(--border), 0.8);
}

.modal-title {
  font-weight: 700;
  font-size: 1rem;
}

.modal-close {
  background: rgba(var(--border), 0.4);
  border: none;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  color: rgb(var(--muted));
  transition: background 0.1s;
}
.modal-close:hover { background: rgba(var(--danger), 0.12); color: rgb(var(--danger)); }

.modal-body { padding: 14px; }

/* ─── App confirmation dialog ──────────────────────────────────────────────── */
.app-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.50);
  backdrop-filter: blur(8px);
  animation: fade-in 0.15s ease;
}
.app-confirm-overlay.hidden { display: none; }

.app-confirm-panel {
  width: min(440px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(var(--border), 0.96);
  border-radius: 14px;
  background: rgb(var(--panel));
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.34);
  color: rgb(var(--text));
  animation: slide-up 0.18s ease;
}

.app-confirm-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--brand), 0.12);
  color: rgb(var(--brand));
  border: 1px solid rgba(var(--brand), 0.24);
  font-size: 22px;
  font-weight: 800;
}
.app-confirm-panel[data-tone="danger"] .app-confirm-icon {
  background: rgba(var(--danger), 0.10);
  color: rgb(var(--danger));
  border-color: rgba(var(--danger), 0.24);
}

.app-confirm-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.app-confirm-title {
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 800;
  color: rgb(var(--text));
}
.app-confirm-message {
  color: rgb(var(--muted));
  font-size: 0.88rem;
  line-height: 1.45;
  white-space: pre-line;
}
.app-confirm-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}
.app-confirm-ok {
  min-width: 92px;
  justify-content: center;
}
.app-confirm-panel[data-tone="danger"] .app-confirm-ok {
  background: rgb(var(--danger));
  box-shadow: 0 8px 22px rgba(var(--danger), 0.20);
}
.app-confirm-panel[data-tone="danger"] .app-confirm-ok:hover {
  box-shadow: 0 10px 26px rgba(var(--danger), 0.28);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.detail-field {
  padding: 9px;
  background: rgba(var(--panel-strong), 0.8);
  border-radius: 10px;
  border: 1px solid rgba(var(--border), 0.7);
}
.detail-field.full-span { grid-column: 1 / -1; }

.detail-field-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(var(--muted));
  margin-bottom: 4px;
  font-weight: 600;
}

.detail-field-value {
  font-weight: 600;
  font-size: 0.92rem;
  word-break: break-word;
}

.detail-field-value.spend-highlight {
  font-size: 1.1rem;
  font-weight: 800;
  background: linear-gradient(90deg, rgb(var(--brand)), rgb(var(--accent)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ─── Code chip ─────────────────────────────────────────────────────────────── */
.code-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  padding: 3px 8px;
  background: rgba(var(--brand), 0.08);
  color: rgb(var(--brand));
  font-size: 0.75rem;
  font-weight: 600;
}

/* ─── Upload page ───────────────────────────────────────────────────────────── */
.upload-zone {
  border: 2px dashed rgba(var(--brand), 0.38);
  padding: 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(var(--brand), 0.04), rgba(var(--brand2), 0.03));
  text-align: center;
  transition: border-color 0.15s;
}
.upload-zone:hover { border-color: rgba(var(--brand), 0.6); }

.upload-zone h3, .mapping-preview h3, .chat-card h3, .empty-state h3 { margin-top: 0; }

.file-input { margin-top: 12px; }

.mapping-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 9px;
}

.mapping-field {
  padding: 9px;
  border: 1px solid rgba(var(--border), 0.9);
  border-radius: var(--radius);
  background: rgb(var(--panel-strong));
}

.mapping-field label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.84rem; }

.field-input, .file-input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgb(var(--border));
  background: rgb(var(--panel-strong));
  color: rgb(var(--text));
  padding: 8px 10px;
}

.preview-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.preview-table th, .preview-table td {
  border-bottom: 1px solid rgba(var(--border), 0.9);
  padding: 6px 9px;
  text-align: left;
}
.preview-table th { color: rgb(var(--muted)); position: sticky; top: 0; background: rgba(var(--panel), 0.98); }

.preview-scroll {
  max-height: 240px;
  overflow: auto;
  border: 1px solid rgba(var(--border), 0.9);
  border-radius: var(--radius);
}

/* ─── Empty states ──────────────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 24px 18px;
}
.empty-state .empty-icon { font-size: 1.6rem; margin-bottom: 8px; display: block; }
.empty-state p { max-width: 520px; margin: 0 auto; color: rgb(var(--muted)); line-height: 1.6; font-size: 0.88rem; }
.empty-state-title { color: rgb(var(--text)); font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; }
.empty-state-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ─── Lever accordion ───────────────────────────────────────────────────────── */
.lever-accordion, .lever-accordion details { display: grid; gap: 7px; }

.lever-accordion details {
  border: 1px solid rgba(var(--border), 0.88);
  border-radius: var(--radius);
  padding: 8px 10px;
  background: rgb(var(--panel-strong));
}

.lever-accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lever-accordion summary::-webkit-details-marker { display: none; }

.lever-summary-block { display: grid; gap: 3px; }
.lever-title { font-weight: 700; font-size: 0.9rem; }
.lever-stats { color: rgb(var(--muted)); font-size: 0.8rem; }

.lever-children { display: grid; gap: 6px; margin-top: 7px; }

.lever-leaf {
  border-radius: 10px;
  border: 1px solid rgba(var(--border), 0.8);
  padding: 10px 12px;
  background: rgba(var(--brand), 0.03);
}

.lever-leaf-actions { margin-top: 8px; }

/* ─── Chat / Assistant page ─────────────────────────────────────────────────── */
.chat-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 16px;
}

.chat-history {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 460px;
  overflow-y: auto;
  padding-right: 4px;
}
.chat-history::-webkit-scrollbar { width: 4px; }
.chat-history::-webkit-scrollbar-thumb { background: rgba(var(--border), 0.6); border-radius: 4px; }

.chat-bubble {
  border-radius: var(--radius);
  padding: 12px 14px;
  white-space: pre-wrap;
  line-height: 1.55;
  font-size: 0.86rem;
  position: relative;
}
.chat-bubble.user {
  background: rgba(var(--brand), 0.09);
  border: 1px solid rgba(var(--brand), 0.22);
}
.chat-bubble.assistant {
  background: rgba(var(--panel-strong), 0.98);
  border: 1px solid rgba(var(--border), 0.88);
}

.chat-role {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgb(var(--muted));
  margin-bottom: 6px;
  font-weight: 600;
}

.chat-timestamp {
  font-size: 0.7rem;
  color: rgb(var(--muted));
  margin-top: 6px;
  text-align: right;
}

.copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(var(--border), 0.4);
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.72rem;
  cursor: pointer;
  color: rgb(var(--muted));
  opacity: 0;
  transition: opacity 0.15s, background 0.1s;
}
.chat-bubble:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: rgba(var(--brand), 0.15); color: rgb(var(--brand)); }

.chat-input-wrap {
  display: grid;
  gap: 10px;
}

.chat-input-wrap textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  border-radius: var(--radius);
  border: 1px solid rgb(var(--border));
  background: rgb(var(--panel-strong));
  color: rgb(var(--text));
  padding: 10px 12px;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.15s;
}
.chat-input-wrap textarea:focus { border-color: rgba(var(--brand), 0.45); }

.chat-input-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Pre-built question chips */
.question-section { margin-bottom: 14px; }
.question-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(var(--muted));
  margin-bottom: 6px;
}

.question-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.question-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(var(--brand), 0.22);
  background: rgba(var(--brand), 0.07);
  color: rgb(var(--text));
  transition: all 0.14s;
  text-align: left;
}
.question-chip:hover {
  background: rgba(var(--brand), 0.16);
  border-color: rgba(var(--brand), 0.45);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--brand), 0.12);
}
.question-chip.cat-supplier { border-color: rgba(var(--brand), 0.25); background: rgba(var(--brand), 0.07); }
.question-chip.cat-category { border-color: rgba(var(--brand2), 0.3); background: rgba(var(--brand2), 0.07); }
.question-chip.cat-lever { border-color: rgba(var(--success), 0.3); background: rgba(var(--success), 0.07); }
.question-chip.cat-market { border-color: rgba(var(--warning), 0.3); background: rgba(var(--warning), 0.07); }

/* Typing dots animation */
.typing-dots { display: inline-flex; gap: 4px; align-items: center; }
.typing-dots span {
  width: 6px; height: 6px;
  background: rgb(var(--muted));
  border-radius: 50%;
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-5px); opacity: 1; }
}

.context-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(var(--brand), 0.08);
  border: 1px solid rgba(var(--brand), 0.18);
  font-size: 0.76rem;
  color: rgb(var(--muted));
}
.context-indicator strong { color: rgb(var(--brand)); }

/* Recent chat list */
.recent-chat-list {
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
}
.recent-chat-item {
  border: 1px solid rgba(var(--border), 0.88);
  border-radius: var(--radius);
  padding: 12px;
  background: rgb(var(--panel-strong));
  font-size: 0.84rem;
}
.muted { color: rgb(var(--muted)); }

/* Notice banners */
.notice-banner {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: rgba(var(--brand), 0.07);
  border: 1px solid rgba(var(--brand), 0.18);
  font-size: 0.86rem;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.notice-banner.warning { background: rgba(var(--warning), 0.07); border-color: rgba(var(--warning), 0.18); }
.notice-banner.success { background: rgba(var(--success), 0.07); border-color: rgba(var(--success), 0.18); }

/* Details stack for panels */
.details-stack { display: grid; gap: 10px; }

/* Section tabs */
.section-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 9px;
  border-bottom: 1px solid rgba(var(--border), 0.7);
  padding-bottom: 0;
}
.section-tab {
  padding: 6px 11px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgb(var(--muted));
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.14s;
  border-radius: 0;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
}
.section-tab:hover { color: rgb(var(--text)); }
.section-tab.active { color: rgb(var(--brand)); border-bottom-color: rgb(var(--brand)); }

/* Supplier scorecard */
.supplier-card {
  padding: 10px;
  border: 1px solid rgba(var(--border), 0.88);
  border-radius: var(--radius);
  background: rgba(var(--panel-strong), 0.7);
  cursor: pointer;
  transition: all 0.14s;
}
.supplier-card:hover {
  border-color: rgba(var(--brand), 0.35);
  box-shadow: 0 4px 16px rgba(var(--brand), 0.08);
}
.supplier-card-name { font-weight: 700; font-size: 0.92rem; margin-bottom: 4px; }
.supplier-card-spend { font-size: 1.1rem; font-weight: 800; color: rgb(var(--brand)); }
.supplier-card-meta { font-size: 0.76rem; color: rgb(var(--muted)); margin-top: 4px; }
.supplier-card-bar { margin-top: 8px; }

/* Opportunity indicator */
.opp-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(var(--success), 0.1);
  color: rgb(var(--success));
  border: 1px solid rgba(var(--success), 0.22);
}

/* Data management snapshot */
.db-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.db-snapshot-card {
  padding: 9px;
  background: rgba(var(--brand), 0.05);
  border: 1px solid rgba(var(--brand), 0.14);
  border-radius: var(--radius);
  text-align: center;
}
.db-snapshot-value { font-size: 1.4rem; font-weight: 800; }
.db-snapshot-label { font-size: 0.75rem; color: rgb(var(--muted)); margin-top: 3px; }

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 1400px) {
  :root { --sidebar-w: 240px; --filter-w: 280px; }
  .topbar h1 { font-size: 1.15rem; }
}

@media (max-width: 1200px) {
  .dual-grid { grid-template-columns: 1fr; }
  .search-bar { width: 180px; }
  .search-bar:focus-within { width: 220px; }
}

@media (max-width: 1080px) {
  body { overflow: auto; }
  .shell { flex-direction: column; max-height: none; }
  .sidebar { width: 100%; flex-basis: auto; }
  .main-shell { max-height: none; }
  .content-shell.with-filters,
  .triple-grid,
  .chat-layout,
  .filter-grid-two,
  .upload-grid { grid-template-columns: 1fr; }
  .content-shell.with-filters .filter-toggle-col { display: none; }
  .content-shell, .page-panel, .filter-panel { overflow: visible; }
  .detail-grid { grid-template-columns: 1fr; }
}

/* ─── Floating chatbot ───────────────────────────────────────────────────────── */
.fchat-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  /* The assistant follows the active tenant shell, not the global product
     accent. This keeps project-specific single-color and blended themes in
     sync across the launcher and open assistant window. */
  --brand: var(--shell-color, var(--nav-bg));
  --brand2: var(--shell-secondary-color, var(--nav-bg));
  --accent: var(--shell-secondary-color, var(--nav-bg));
}

.fchat-fab {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--shell-background);
  border: none;
  cursor: pointer;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 8px 28px rgba(var(--accent), 0.40), 0 0 0 0 rgba(var(--accent), 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  flex-shrink: 0;
  animation: fchat-pulse 3s infinite;
}
.fchat-fab:hover { transform: scale(1.1); box-shadow: 0 14px 40px rgba(var(--accent), 0.50); animation: none; }
.fchat-fab:active { transform: scale(0.95); }

@keyframes fchat-pulse {
  0%, 100% { box-shadow: 0 8px 28px rgba(var(--accent), 0.40), 0 0 0 0 rgba(var(--accent), 0.25); }
  50%       { box-shadow: 0 8px 28px rgba(var(--accent), 0.40), 0 0 0 10px rgba(var(--accent), 0); }
}

.fchat-unread {
  position: absolute;
  top: -3px;
  right: -3px;
  background: rgb(var(--danger));
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgb(var(--bg));
}

.fchat-panel {
  position: relative;
  width: 380px;
  height: 560px;
  min-width: min(320px, calc(100vw - 24px));
  min-height: min(420px, calc(100vh - 32px));
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 32px);
  border-radius: 22px;
  border: 1px solid rgba(var(--border), 0.7);
  background: rgb(var(--panel));
  box-shadow:
    0 24px 64px rgba(15, 23, 42, 0.18),
    0 2px 8px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fchat-rise 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fchat-panel.hidden { display: none; }

/* Drag the left/top edges or corner to resize the assistant window. */
.fchat-resize-handle {
  position: absolute;
  z-index: 6;
  touch-action: none;
}
.fchat-resize-left {
  top: 24px;
  bottom: 24px;
  left: 0;
  width: 8px;
  cursor: ew-resize;
}
.fchat-resize-top {
  top: 0;
  right: 24px;
  left: 24px;
  height: 8px;
  cursor: ns-resize;
}
.fchat-resize-corner {
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  cursor: nwse-resize;
}
body.fchat-resizing,
body.fchat-resizing * {
  user-select: none !important;
}
body.fchat-resizing-left, body.fchat-resizing-left * { cursor: ew-resize !important; }
body.fchat-resizing-top, body.fchat-resizing-top * { cursor: ns-resize !important; }
body.fchat-resizing-top-left, body.fchat-resizing-top-left * { cursor: nwse-resize !important; }
body.fchat-moving,
body.fchat-moving * {
  user-select: none !important;
}
body.fchat-moving .fchat-fab,
body.fchat-moving .fchat-fab * {
  cursor: grabbing !important;
}

@keyframes fchat-rise {
  from { opacity: 0; transform: translateY(24px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Enterprise density overrides ───────────────────────────────────────────
   Keeps the app scan-friendly on data-heavy pages and prevents page-local
   styles from reintroducing large consumer-style whitespace. */
.page-panel > *:first-child { margin-top: 0 !important; }
.page-panel h1, .page-panel h2, .page-panel h3 { line-height: 1.18 !important; }
.page-panel h2 { font-size: 1.12rem !important; }
.page-panel h3 { font-size: .95rem !important; }

.stat-card,
.panel,
.card,
.table-wrap,
.chat-card,
.mapping-preview,
.empty-state,
.section-card,
.ci-chart-box,
.ci-kpi,
.bm-kpi,
.ac-kpi,
.benchmark-card,
.market-card,
.geo-card {
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(15,23,42,0.07) !important;
}

.section-card,
.ci-chart-box,
.bm-kpi,
.ac-kpi,
.ci-kpi {
  padding: 12px 14px !important;
}

.bm-kpi-row,
.ac-kpi-row,
.ci-kpi-row,
.insight-kpi-row {
  gap: 9px !important;
  margin-bottom: 10px !important;
}

.bm-kpi-value,
.ac-kpi-value,
.ci-kpi .kpi-val,
.insight-kpi-value {
  font-size: 1.28rem !important;
  line-height: 1.05 !important;
}

.bm-kpi-label,
.ac-kpi-label,
.ci-kpi .kpi-lbl,
.insight-kpi-label {
  font-size: .66rem !important;
  margin-bottom: 3px !important;
}

.section-card,
.ci-section,
.mid-section,
.insight-section {
  margin-bottom: 12px !important;
}

.section-card h3,
.ci-section-header,
.mid-section-title {
  margin-bottom: 8px !important;
}

.ci-section-header,
.panel-header,
.section-header {
  align-items: center !important;
}

.ci-chart-box {
  padding: 12px !important;
}
.ci-chart-box canvas {
  max-height: 240px !important;
}

.mib-bar {
  margin-bottom: 8px !important;
}
.mib-panel,
.mib-news-card,
.mid-card,
.mid-lever-item,
.insight-card,
.insight-section {
  border-radius: 12px !important;
  padding: 12px !important;
}

.insight-panel-header,
.insight-panel-body {
  padding: 14px 16px !important;
}

.mid-lever-list,
.details-stack,
.bar-list {
  gap: 7px !important;
}

.pivot-table thead th,
.mid-metrics-tbl thead th,
.story-table th,
.table thead th {
  padding: 7px 9px !important;
}

.pivot-table td,
.mid-metrics-tbl td,
.story-table td,
.table tbody td {
  padding: 7px 9px !important;
}

input,
select,
textarea {
  border-radius: 8px !important;
}

/* ── Header ── */
.fchat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(var(--border), 0.6);
  background: var(--shell-background);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.fchat-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.fchat-header-left { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }

.fchat-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.40);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.fchat-assistant-icon {
  width: 25px;
  height: 25px;
  display: block;
  color: rgba(255, 255, 255, 0.96);
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.18));
}
.fchat-assistant-icon-fab {
  width: 30px;
  height: 30px;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.24));
}
.fchat-avatar::after {
  content: '';
  position: absolute;
  bottom: 1px; right: 1px;
  width: 10px; height: 10px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid rgb(var(--brand));
}

.fchat-name {
  font-weight: 800;
  font-size: 0.9rem;
  color: #fff;
  letter-spacing: 0.01em;
}
.fchat-status {
  font-size: 0.70rem;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  gap: 4px;
}
.fchat-status::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #86efac;
  animation: fchat-blink 2.4s infinite;
}
@keyframes fchat-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.fchat-icon-btn {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
  transition: background 0.13s;
  position: relative;
  z-index: 1;
}
.fchat-icon-btn:hover { background: rgba(255, 255, 255, 0.32); color: #fff; }

/* ── Page context pill ── */
.fchat-page-pill {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: rgb(var(--panel));
  border: 1px solid rgba(var(--border), 0.8);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 3px 10px;
  font-size: 0.67rem;
  font-weight: 700;
  color: rgb(var(--brand));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 2;
}

/* ── Messages ── */
.fchat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
  background: rgb(var(--panel));
}
.fchat-messages::-webkit-scrollbar { width: 3px; }
.fchat-messages::-webkit-scrollbar-thumb { background: rgba(var(--border), 0.7); border-radius: 4px; }

.fchat-bubble {
  border-radius: 16px;
  padding: 10px 13px;
  font-size: 0.84rem;
  line-height: 1.55;
  text-align: left;
  max-width: 93%;
}
.fchat-bubble-user { white-space: pre-wrap; }
.fchat-bubble-user {
  background: linear-gradient(135deg, rgba(var(--brand), 0.15), rgba(var(--accent), 0.08));
  border: 1px solid rgba(var(--brand), 0.28);
  align-self: flex-end;
  border-bottom-right-radius: 5px;
}
.fchat-bubble-ai {
  background: rgb(var(--panel-strong));
  border: 1px solid rgba(var(--border), 1);
  border-left: 3px solid rgba(var(--brand), 0.55);
  align-self: flex-start;
  border-bottom-left-radius: 5px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

/* Welcome bubble gets a branded intro card treatment */
.fchat-bubble-ai.fchat-welcome {
  background: linear-gradient(135deg,
    rgba(var(--brand), 0.07) 0%,
    rgba(var(--accent), 0.04) 100%);
  border: 1px solid rgba(var(--brand), 0.20);
  border-left: 3px solid rgb(var(--brand));
  padding: 13px 14px 14px;
  max-width: 100%;
}
.fchat-welcome-greeting {
  font-size: 0.86rem;
  font-weight: 700;
  color: rgb(var(--text));
  margin-bottom: 3px;
  line-height: 1.4;
}
.fchat-welcome-sub {
  font-size: 0.76rem;
  color: rgb(var(--muted));
  margin-bottom: 10px;
}
.fchat-welcome-caps {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 11px;
  padding: 9px 10px;
  background: rgba(var(--brand), 0.05);
  border-radius: 8px;
  border: 1px solid rgba(var(--brand), 0.10);
}
.fchat-cap-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.77rem;
  color: rgb(var(--text));
  line-height: 1.3;
}
.fchat-cap-dot {
  flex-shrink: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgb(var(--brand));
  opacity: 0.7;
}
.fchat-welcome-cta {
  font-size: 0.80rem;
  font-weight: 600;
  color: rgb(var(--brand));
}

.fchat-role {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgb(var(--brand));
  font-weight: 800;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.fchat-role::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgb(var(--brand));
  opacity: 0.65;
}
.fchat-bubble-user .fchat-role {
  color: rgb(var(--accent));
}
.fchat-bubble-user .fchat-role::before {
  background: rgb(var(--accent));
}

/* ── Suggestions ── */
.fchat-suggestions {
  padding: 8px 12px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid rgba(var(--border), 0.7);
  background: linear-gradient(180deg, rgb(var(--panel-strong)) 0%, rgb(var(--panel)) 100%);
  flex-shrink: 0;
}

.fchat-suggestion {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(var(--brand), 0.28);
  background: rgba(var(--brand), 0.06);
  color: rgb(var(--brand));
  transition: all 0.14s;
  white-space: nowrap;
  line-height: 1.3;
}
.fchat-suggestion:hover {
  background: rgba(var(--brand), 0.14);
  border-color: rgba(var(--brand), 0.55);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(var(--brand), 0.16);
}

/* ── Input row ── */
.fchat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px 13px;
  border-top: 1px solid rgba(var(--border), 0.7);
  background: rgb(var(--panel));
  flex-shrink: 0;
}

.fchat-input-row textarea {
  flex: 1;
  border-radius: 13px;
  border: 1.5px solid rgba(var(--border), 0.9);
  background: rgb(var(--panel-strong));
  color: rgb(var(--text));
  padding: 9px 13px;
  resize: none;
  font-size: 0.84rem;
  outline: none;
  line-height: 1.45;
  min-height: 40px;
  max-height: 100px;
  overflow-y: auto;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fchat-input-row textarea::placeholder { color: rgb(var(--muted)); opacity: 0.7; }
.fchat-input-row textarea:focus {
  border-color: rgba(var(--brand), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--brand), 0.09);
}

.fchat-send-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(var(--brand)) 0%, rgb(var(--brand2)) 100%);
  border: none;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 14px rgba(var(--brand), 0.35);
}
.fchat-send-btn:hover { transform: scale(1.1); box-shadow: 0 7px 20px rgba(var(--brand), 0.44); }
.fchat-send-btn:disabled { opacity: 0.45; transform: none; cursor: not-allowed; box-shadow: none; }

/* ── Typing indicator ── */
.typing-dots { display: flex; gap: 4px; align-items: center; padding: 4px 2px; }
.typing-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgb(var(--brand));
  opacity: 0.5;
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40%            { transform: translateY(-5px); opacity: 1; }
}

/* ── Chat response markdown formatting ── */
.fchat-body { font-size: 0.84rem; line-height: 1.6; }
.fchat-h2 {
  font-size: 0.88rem; font-weight: 800;
  color: rgb(var(--text));
  margin: 10px 0 4px;
  border-bottom: 1px solid rgba(var(--border), 0.7);
  padding-bottom: 3px;
}
.fchat-h3 {
  font-size: 0.82rem; font-weight: 700;
  color: rgb(var(--brand));
  margin: 8px 0 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fchat-li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 4px 0;
  line-height: 1.5;
}
.fchat-li-dot {
  flex-shrink: 0;
  width: 6px; height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: rgb(var(--brand));
  opacity: 0.7;
}
.fchat-li-num .fchat-li-dot {
  background: rgb(var(--accent));
}
.fchat-gap { height: 8px; }

/* ─── Insight panel (overlay) ───────────────────────────────────────────────── */
.insight-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.60);
  backdrop-filter: blur(8px);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fade-in 0.18s ease;
}
.insight-overlay.hidden { display: none; }

.insight-panel {
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  border: 1px solid rgba(var(--border), 0.9);
  background: rgb(var(--panel));
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  animation: slide-up 0.22s ease;
}

.insight-panel-header {
  padding: 20px 24px 18px;
  border-bottom: 1px solid rgba(var(--border), 0.8);
  background: linear-gradient(135deg, rgba(var(--brand), 0.10), rgba(var(--accent), 0.06));
  flex-shrink: 0;
}

.insight-type-badge {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: rgb(var(--brand));
  margin-bottom: 6px;
}

.insight-title {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.2;
}

.insight-kpi-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.insight-kpi {
  padding: 10px 14px;
  background: rgba(var(--panel-strong), 0.9);
  border: 1px solid rgba(var(--border), 0.8);
  border-radius: 12px;
  min-width: 110px;
}
.insight-kpi-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(var(--muted));
  font-weight: 600;
  margin-bottom: 4px;
}
.insight-kpi-value {
  font-size: 1.1rem;
  font-weight: 800;
}
.insight-kpi-value.green { color: rgb(var(--success)); }
.insight-kpi-value.amber { color: rgb(var(--warning)); }
.insight-kpi-value.red   { color: rgb(var(--danger)); }
.insight-kpi-value.brand { color: rgb(var(--brand)); }

.insight-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 24px;
  display: grid;
  gap: 18px;
}
.insight-panel-body::-webkit-scrollbar { width: 5px; }
.insight-panel-body::-webkit-scrollbar-thumb { background: rgba(var(--border), 0.6); border-radius: 4px; }

.insight-section {
  padding: 16px;
  background: rgba(var(--panel-strong), 0.7);
  border: 1px solid rgba(var(--border), 0.7);
  border-radius: 14px;
}

.insight-section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgb(var(--brand));
  margin-bottom: 10px;
}

.insight-section p {
  margin: 0 0 8px;
  color: rgb(var(--muted));
  font-size: 0.88rem;
  line-height: 1.6;
}
.insight-section p:last-child { margin-bottom: 0; }

.insight-section ul, .insight-section ol {
  margin: 0;
  padding-left: 18px;
  color: rgb(var(--muted));
  font-size: 0.87rem;
  line-height: 1.7;
}
.insight-section li strong { color: rgb(var(--text)); }

.insight-risk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}
.insight-risk-label {
  font-size: 0.78rem;
  font-weight: 700;
  min-width: 70px;
}

.insight-panel-footer {
  padding: 14px 24px;
  border-top: 1px solid rgba(var(--border), 0.8);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  background: rgba(var(--panel-strong), 0.5);
}

/* ─── Market Insights Banner ─────────────────────────────────────────────────── */
.mib-bar {
  flex-shrink: 0;
  padding: 10px 14px 10px;
  background: rgba(var(--panel-strong), 0.7);
  border-bottom: 1px solid rgba(var(--border), 0.7);
  backdrop-filter: blur(6px);
}
.mib-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.mib-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: rgba(var(--muted), 0.9);
  white-space: nowrap; flex-shrink: 0;
}
.mib-icon { font-size: 0.9rem; }
.mib-badge {
  background: rgba(var(--brand), 0.15); color: rgb(var(--brand));
  border-radius: 99px; padding: 1px 7px; font-size: 0.68rem; font-weight: 800;
}
.mib-header-right {
  display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0;
}
.mib-close {
  background: none; border: none; cursor: pointer;
  color: rgba(var(--muted), 0.6); font-size: 0.85rem; line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.mib-close:hover { background: rgba(var(--danger), 0.12); color: rgb(var(--danger)); }

/* ── Tabs (pill toggle) ── */
.mib-tabs {
  display: flex; gap: 2px;
  background: rgba(var(--border), 0.18); border-radius: 8px; padding: 2px;
  flex-shrink: 0;
}
.mib-tab {
  padding: 4px 13px; border-radius: 6px;
  font-size: 0.68rem; font-weight: 600;
  background: transparent; border: none;
  color: rgb(var(--muted)); cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
}
.mib-tab:hover { color: rgb(var(--text)); background: rgba(var(--panel), 0.5); }
.mib-tab.active {
  background: rgb(var(--panel)); color: rgb(var(--accent));
  box-shadow: 0 1px 3px rgba(0,0,0,0.06); font-weight: 700;
}
.mib-news-count {
  font-size: 0.56rem; font-weight: 700;
  background: rgb(var(--danger)); color: #fff;
  border-radius: 8px; padding: 0 5px; min-width: 14px;
  text-align: center; line-height: 1.4;
}
.mib-news-count:empty { display: none; }

/* ── Tab panes ── */
.mib-pane { display: none; }
.mib-pane.active { display: block; }

/* ── Progress bar ── */
.mib-progress {
  height: 3px; background: rgba(var(--border), 0.15);
  border-radius: 2px; overflow: hidden; margin-bottom: 8px;
}
.mib-progress-bar {
  height: 100%; width: 30%;
  background: linear-gradient(90deg, rgb(var(--accent)), rgb(var(--brand)));
  border-radius: 2px;
  animation: mibProgress 1.4s ease-in-out infinite;
}
@keyframes mibProgress {
  0%   { width: 5%;  margin-left: 0; }
  50%  { width: 40%; margin-left: 30%; }
  100% { width: 5%;  margin-left: 95%; }
}

/* ── Refresh button ── */
.mib-refresh-btn {
  font-size: 0.66rem; font-weight: 600;
  padding: 3px 10px; border-radius: 6px;
  background: rgba(var(--accent), 0.08); border: 1px solid rgba(var(--accent), 0.15);
  color: rgb(var(--accent)); cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.mib-refresh-btn:hover { background: rgba(var(--accent), 0.16); }
.mib-refresh-btn:disabled { opacity: 0.5; cursor: default; }
.mib-refresh-icon { display: inline-block; transition: transform 0.3s; }
.mib-refresh-btn.spinning .mib-refresh-icon { animation: mibSpin 0.8s linear infinite; }
@keyframes mibSpin { to { transform: rotate(360deg); } }

/* ── News impact strip ── */
.mib-news-impact {
  display: none; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 7px 11px; border-radius: 8px; margin-bottom: 8px;
  background: rgba(var(--accent), 0.04);
  border: 1px solid rgba(var(--accent), 0.1);
  font-size: 0.7rem;
}
.mib-news-impact.visible { display: flex; }
.mib-news-signal {
  font-weight: 700; font-size: 0.66rem;
  padding: 2px 9px; border-radius: 5px; white-space: nowrap;
}
.mib-news-stats {
  font-size: 0.68rem; color: rgb(var(--text)); white-space: nowrap;
}
.mib-lever-chips {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.mib-lever-chip {
  font-size: 0.6rem; padding: 2px 7px; border-radius: 4px;
  font-weight: 600; white-space: nowrap;
  background: rgba(var(--border), 0.2); color: rgb(var(--muted));
}
.mib-lever-chip.up   { background: rgba(56,161,105,0.12); color: #22863a; }
.mib-lever-chip.down { background: rgba(229,62,62,0.10); color: #cb2431; }

/* ── News footer ── */
.mib-news-footer {
  padding-top: 5px; margin-top: 5px;
  border-top: 1px solid rgba(var(--border), 0.2);
}
.mib-news-ts {
  font-size: 0.6rem; color: rgb(var(--muted)); font-style: italic;
}

/* ── News card refinements ── */
.mib-news-meta {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 3px;
}
.mib-price-dir {
  font-size: 0.62rem; font-weight: 700; padding: 1px 6px;
  border-radius: 4px; display: inline-flex; align-items: center; gap: 2px;
}
.mib-price-dir.up   { background: rgba(229,62,62,0.10); color: #e53e3e; }
.mib-price-dir.down { background: rgba(56,161,105,0.10); color: #38a169; }
.mib-price-dir.stable { background: rgba(var(--border),0.15); color: rgb(var(--muted)); }
.mib-confidence {
  font-size: 0.58rem; color: rgb(var(--muted));
  display: flex; align-items: center; gap: 3px;
}
.mib-conf-bar {
  width: 32px; height: 3px; border-radius: 2px;
  background: rgba(var(--border), 0.25); overflow: hidden;
}
.mib-conf-fill {
  height: 100%; border-radius: 2px; background: rgb(var(--accent));
}
.mib-news-source {
  font-size: 0.58rem; color: rgba(var(--muted), 0.6); margin-top: 2px;
}
.mib-news-levers {
  display: flex; gap: 3px; flex-wrap: wrap; margin-top: 3px;
}
.mib-news-lever-tag {
  font-size: 0.56rem; padding: 1px 5px; border-radius: 3px;
  background: rgba(var(--accent), 0.08); color: rgb(var(--accent));
  font-weight: 600;
}

/* Card scroll row */
.mib-cards {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--border), 0.8) transparent;
}
.mib-cards::-webkit-scrollbar { height: 4px; }
.mib-cards::-webkit-scrollbar-track { background: transparent; }
.mib-cards::-webkit-scrollbar-thumb { background: rgba(var(--border), 0.8); border-radius: 4px; }

.mib-card {
  flex: 0 0 280px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.78rem;
  transition: transform 0.15s;
}
.mib-card:hover { transform: translateY(-1px); }

.mib-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mib-sig-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mib-card-label {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mib-card-source {
  font-size: 0.62rem;
  color: rgba(var(--muted), 0.65);
  margin-left: auto;
}
.mib-card-title {
  font-weight: 700;
  font-size: 0.8rem;
  color: rgb(var(--text));
  line-height: 1.3;
}
.mib-card-detail {
  font-size: 0.72rem;
  color: rgba(var(--muted), 0.85);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mib-card-footer {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.mib-lever-tag {
  background: rgba(var(--brand), 0.12);
  color: rgb(var(--brand));
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 0.63rem;
  font-weight: 700;
}
.mib-impact {
  background: rgba(var(--success), 0.10);
  color: rgb(var(--success));
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 0.63rem;
  font-weight: 700;
}
.mib-dp {
  font-size: 0.63rem;
  font-weight: 800;
  color: rgba(var(--text), 0.5);
  margin-left: auto;
}
.mib-card-action {
  font-size: 0.68rem;
  color: rgba(var(--muted), 0.75);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 1px;
}
.mib-action-icon { margin-right: 4px; opacity: 0.6; }

/* Double-click hint */
.mib-dbl-hint {
  font-size: 0.60rem;
  color: rgba(var(--muted), 0.4);
  text-align: right;
  margin-top: 4px;
  letter-spacing: 0.03em;
  font-style: italic;
  opacity: 0;
  transition: opacity 0.2s;
}
.mib-card:hover .mib-dbl-hint { opacity: 1; }
.mib-card { cursor: pointer; }

/* ─── Market Insight Detail Modal ────────────────────────────────────────────── */
.mid-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3,7,18,0.72);
  backdrop-filter: blur(10px);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px 24px;
  animation: fade-in 0.18s ease;
  overflow-y: auto;
}
.mid-overlay.hidden { display: none; }

.mid-panel {
  width: 100%;
  max-width: 820px;
  background: rgb(var(--panel));
  border: 1px solid rgba(var(--border), 0.9);
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slide-up 0.22s ease;
}

.mid-panel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: rgba(var(--panel-strong), 0.8);
  border-bottom: 1px solid rgba(var(--border), 0.6);
  flex-shrink: 0;
}
.mid-panel-brand {
  font-size: 0.70rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(var(--muted), 0.7);
}
.mid-panel-close {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(var(--muted), 0.6);
  font-size: 0.9rem;
  padding: 4px 8px;
  border-radius: 7px;
  transition: background 0.15s, color 0.15s;
}
.mid-panel-close:hover { background: rgba(var(--danger),0.12); color: rgb(var(--danger)); }

.mid-panel-body {
  padding: 20px 22px 24px;
  overflow-y: auto;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mid-loading {
  text-align: center;
  padding: 40px;
  font-size: 0.88rem;
  color: rgba(var(--muted), 0.7);
}

/* Header */
.mid-header {
  border-left: 3px solid;
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mid-header-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mid-sig-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mid-period {
  font-size: 0.64rem;
  color: rgba(var(--muted), 0.5);
  margin-left: auto;
}
.mid-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: rgb(var(--text));
  margin: 0;
  line-height: 1.3;
}
.mid-summary {
  font-size: 0.82rem;
  color: rgba(var(--muted), 0.85);
  margin: 0;
  line-height: 1.55;
}

/* Section wrapper */
.mid-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mid-section-title {
  font-size: 0.70rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(var(--muted), 0.6);
  border-bottom: 1px solid rgba(var(--border), 0.5);
  padding-bottom: 6px;
}

/* News-first article section (shown for kind === 'news') */
.mid-news-article { gap: 12px; }
.mid-news-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mid-news-desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgb(var(--text));
}
.mid-news-link {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgb(var(--brand));
  text-decoration: none;
  align-self: flex-start;
}
.mid-news-link:hover { text-decoration: underline; }
.mid-news-attrib {
  font-size: 0.74rem;
  color: rgba(var(--muted), 0.85);
  letter-spacing: 0.01em;
}
.mid-news-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(var(--brand), 0.06);
  border: 1px solid rgba(var(--brand), 0.18);
  font-size: 0.78rem;
}
.mid-news-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgb(var(--text));
}
.mid-news-strip-item strong { color: rgb(var(--text)); font-weight: 800; }
.mid-news-conf-bar {
  display: inline-block;
  width: 60px;
  height: 6px;
  border-radius: 999px;
  background: rgba(var(--border), 0.6);
  overflow: hidden;
}
.mid-news-conf-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #38a169, #3182ce);
}
.mid-news-levers-inline { gap: 4px; flex-wrap: wrap; }
.mid-news-lever-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(49, 130, 206, 0.14);
  color: #3182ce;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.mid-news-action {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(56, 161, 105, 0.32);
  background: rgba(56, 161, 105, 0.08);
}
.mid-news-action-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: #2f855a;
}
.mid-news-action-text {
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgb(var(--text));
}

/* Metrics table */
.mid-metrics-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.mid-metrics-tbl thead th {
  text-align: left;
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(var(--muted), 0.55);
  padding: 4px 8px 6px;
  border-bottom: 1px solid rgba(var(--border), 0.4);
}
.mid-metrics-tbl tbody tr:hover { background: rgba(var(--brand), 0.04); }
.mid-metrics-tbl td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(var(--border), 0.2);
  vertical-align: middle;
}
.mid-metric-name { font-weight: 600; color: rgb(var(--text)); }
.mid-metric-val  { font-weight: 800; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.mid-metric-unit { font-size: 0.66rem; color: rgba(var(--muted), 0.5); }
.mid-metric-change { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Context list */
.mid-ctx-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mid-ctx-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.79rem;
  line-height: 1.55;
}
.mid-ctx-dot {
  color: rgb(var(--brand));
  font-size: 1rem;
  line-height: 1.3;
  flex-shrink: 0;
}
.mid-ctx-text { color: rgb(var(--text)); }
.mid-ctx-src  { color: rgba(var(--muted), 0.5); font-size: 0.68rem; margin-left: 6px; }

/* Live category news */
.mid-news-list {
  display: grid;
  gap: 8px;
}
.mid-news-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(var(--border), 0.45);
  background: rgba(var(--panel-strong), 0.45);
  text-decoration: none;
}
.mid-news-item:hover {
  border-color: rgba(var(--brand), 0.45);
  background: rgba(var(--brand), 0.05);
}
.mid-news-title {
  font-size: 0.78rem;
  line-height: 1.35;
  font-weight: 800;
  color: rgb(var(--text));
}
.mid-news-meta {
  font-size: 0.64rem;
  color: rgba(var(--muted), 0.62);
}
.mid-news-desc {
  font-size: 0.70rem;
  line-height: 1.4;
  color: rgba(var(--muted), 0.84);
}

/* Category impact grid */
.mid-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.mid-cat-card {
  border: 1px solid;
  border-radius: 10px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: rgba(var(--panel-strong), 0.4);
}
.mid-cat-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mid-cat-name {
  font-weight: 800;
  font-size: 0.80rem;
  color: rgb(var(--text));
}
.mid-cat-impact {
  font-size: 0.65rem;
  font-weight: 800;
  margin-left: auto;
}
.mid-cat-context {
  font-size: 0.71rem;
  color: rgba(var(--muted), 0.80);
  line-height: 1.4;
}
.mid-cat-drivers {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.mid-cat-driver {
  background: rgba(var(--brand), 0.10);
  color: rgba(var(--brand), 1);
  border-radius: 5px;
  padding: 1px 7px;
  font-size: 0.62rem;
  font-weight: 700;
}
.mid-cat-action {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgb(var(--text));
  margin-top: 2px;
}
.mid-cat-action-icon { margin-right: 4px; opacity: 0.6; }
.mid-cat-urgency {
  font-size: 0.62rem;
  color: rgba(var(--muted), 0.55);
  font-style: italic;
}

/* Lever actions */
.mid-lever-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mid-lever-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(var(--panel-strong), 0.5);
  border: 1px solid rgba(var(--border), 0.4);
}
.mid-lever-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px;
}
.mid-lever-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mid-lever-name {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgb(var(--brand));
}
.mid-lever-action {
  font-size: 0.80rem;
  color: rgb(var(--text));
  line-height: 1.45;
}
.mid-lever-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.mid-lever-saving {
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(var(--success),0.12);
  color: rgb(var(--success));
  border-radius: 5px;
  padding: 2px 8px;
}
.mid-lever-time {
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(var(--brand),0.10);
  color: rgba(var(--brand),1);
  border-radius: 5px;
  padding: 2px 8px;
}

/* Sources footer */
.mid-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--border), 0.4);
}
.mid-src-item {
  font-size: 0.66rem;
  color: rgba(var(--muted), 0.55);
  background: rgba(var(--panel-strong), 0.6);
  border-radius: 6px;
  padding: 3px 9px;
}
.mid-src-item em { font-style: normal; opacity: 0.7; margin-left: 4px; }

/* ── Records Grid / Pivot Table ───────────────────────────────────────────────── */
.pivot-table {
  border-collapse: collapse; width: 100%; table-layout: auto;
}
.pivot-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: rgb(var(--panel-strong));
  border-bottom: 2px solid rgba(var(--accent), 0.15);
  padding: 9px 12px;
  font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: rgb(var(--muted));
  white-space: nowrap; text-align: left;
}
.pivot-table thead th.num { text-align: right; }
.pivot-table tbody tr {
  border-bottom: 1px solid rgba(var(--border), 0.2);
  transition: background 0.1s;
}
.pivot-table tbody tr:hover { background: rgba(var(--accent), 0.04); }
.pivot-table tbody tr.alt-row { background: rgba(var(--border), 0.03); }
.pivot-table td {
  padding: 7px 12px;
  font-size: 0.73rem; color: rgb(var(--text));
  white-space: nowrap; max-width: 220px;
  overflow: hidden; text-overflow: ellipsis;
}
.pivot-table td.num {
  text-align: right; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Shared Table Enhancements: sorting + column resizing ─────────────────── */
.mi-enhanced-table {
  border-collapse: collapse;
}
.mi-enhanced-table th,
.mi-enhanced-table td {
  max-width: none;
}
.mi-sortable-th {
  cursor: pointer;
  user-select: none;
  padding-right: 22px !important;
}
.mi-sortable-th::after {
  content: "↕";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.62rem;
  opacity: .35;
  pointer-events: none;
}
.mi-sortable-th.sort-asc::after {
  content: "↑";
  opacity: .9;
  color: rgba(var(--accent), 1);
}
.mi-sortable-th.sort-desc::after {
  content: "↓";
  opacity: .9;
  color: rgba(var(--accent), 1);
}
.mi-col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 9px;
  cursor: col-resize;
  z-index: 4;
  touch-action: none;
}
.mi-col-resizer::after {
  content: "";
  position: absolute;
  top: 22%;
  bottom: 22%;
  right: 3px;
  width: 1px;
  background: rgba(var(--border), .9);
}
.mi-col-resizer:hover::after,
.mi-table-resizing .mi-col-resizer::after {
  width: 2px;
  background: rgba(var(--accent), .9);
}
body.mi-col-resize-active {
  cursor: col-resize !important;
  user-select: none;
}

/* ── Enterprise dashboard primitives ───────────────────────────────────────
   Reusable scan-first patterns for persona pages: compact cues instead of
   explanatory copy, labeled signal rows, restrained cards, and clamped proof. */
.ed-cue-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ed-cue {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(var(--border), 0.78);
  border-radius: 999px;
  background: rgba(var(--panel), 0.72);
  color: rgb(var(--muted));
  font-size: .7rem;
  font-weight: 780;
  line-height: 1.2;
  white-space: nowrap;
}
.ed-insight-stack {
  display: grid;
  gap: 7px;
}
.ed-insight-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}
.ed-insight-row > span {
  color: rgb(var(--muted));
  font-size: .66rem;
  font-weight: 820;
  letter-spacing: .06em;
  line-height: 1.35;
  text-transform: uppercase;
}
.ed-insight-row > strong {
  color: rgb(var(--text));
  font-size: .76rem;
  font-weight: 680;
  line-height: 1.35;
}
.ed-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Scan-first enterprise pages: keep guidance visible as controls, chips, and
   chart/table affordances instead of long explanatory copy. */
.page-panel .story-banner {
  border-radius: 8px !important;
  padding: 9px 12px !important;
}
.page-panel .story-banner p,
.page-panel .chart-drill-hint,
.page-panel .empty-state p,
.page-panel .ci-empty p {
  display: none !important;
}
.page-panel .helper-copy,
.page-panel .ci-section-sub,
.page-panel .ss-sub,
.page-panel .risk-signal-detail,
.page-panel .lever-path-sub,
.page-panel .lever-action-evidence,
.page-panel .lever-evidence-proof,
.page-panel .story-narrative,
.page-panel .small-copy {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.page-panel .lever-tab-evidence .lever-evidence-proof {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  overflow: visible;
}
.page-panel table td.small-copy {
  display: table-cell;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  overflow: hidden;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.page-panel #supplierTable tbody td {
  vertical-align: top;
}
.page-panel .section-header,
.page-panel .panel-header,
.page-panel .ci-section-header {
  align-items: flex-start;
}

/* ─── Server-paginated list (suppliers, etc.) ──────────────────────────────── */
.supplier-pagination {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.supplier-pagination .ghost-btn { padding: 4px 10px; font-size: 12px; }
.supplier-pagination .ghost-btn.is-disabled {
  opacity: .45;
  pointer-events: none;
  cursor: default;
}
.supplier-pagination-status {
  font-size: 12px;
  color: rgb(var(--muted));
}
.supplier-pagination-status strong { color: rgb(var(--text)); font-weight: 800; }

/* ─── Export progress chip ─────────────────────────────────────────────────── */
.export-chip {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgb(var(--panel));
  border: 1px solid rgb(var(--border));
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  font-size: 12.5px;
  font-weight: 700;
  color: rgb(var(--text));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.export-chip.open { opacity: 1; transform: translateY(0); }
.export-chip-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(var(--brand), 0.18);
  border-top-color: rgb(var(--brand));
  animation: mi-spin .9s linear infinite;
}
.export-chip.done .export-chip-spinner {
  border-color: rgb(var(--success));
  border-top-color: transparent;
  animation: none;
}
@keyframes mi-spin { to { transform: rotate(360deg); } }

/* ─── Topbar notification bell ──────────────────────────────────────────────── */
.topbar-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  text-decoration: none;
}
.topbar-bell.is-active {
  color: rgb(var(--brand));
  background: rgba(var(--brand), 0.12);
  border-color: rgba(var(--brand), 0.28);
}
.topbar-bell-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px rgb(var(--panel));
}

/* ─── Idle warning modal ────────────────────────────────────────────────────── */
.idle-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.idle-modal.open { display: flex; }
.idle-modal-card {
  width: min(420px, 92vw);
  background: rgb(var(--panel));
  border: 1px solid rgb(var(--border));
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 28px 26px;
  text-align: center;
}
.idle-modal-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(var(--warning), 0.12);
  color: rgb(var(--warning));
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.idle-modal-title { margin: 0 0 6px; font-size: 18px; font-weight: 900; color: rgb(var(--text)); }
.idle-modal-message { margin: 0 0 18px; font-size: 13.5px; color: rgb(var(--muted)); line-height: 1.45; }
.idle-modal-actions { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ─── Audit drawer (per-record history side panel) ─────────────────────────── */
.audit-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 92vw);
  background: rgb(var(--panel));
  border-left: 1px solid rgb(var(--border));
  box-shadow: -16px 0 32px rgba(15, 23, 42, 0.18);
  z-index: 100;
  transform: translateX(100%);
  transition: transform .22s ease;
  display: flex;
  flex-direction: column;
}
.audit-drawer.open { transform: translateX(0); }
.audit-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.36);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.audit-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.audit-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgb(var(--border));
}
.audit-drawer-kicker {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgb(var(--muted));
}
.audit-drawer-title {
  font-size: 16px;
  font-weight: 900;
  color: rgb(var(--text));
  margin-top: 3px;
  line-height: 1.25;
}
.audit-drawer-close {
  appearance: none;
  background: rgba(var(--panel-strong), 0.6);
  border: 1px solid rgb(var(--border));
  color: rgb(var(--muted));
  border-radius: 999px;
  width: 30px; height: 30px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.audit-drawer-close:hover { color: rgb(var(--brand)); border-color: rgba(var(--brand), 0.45); }
.audit-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 18px 18px;
}
.audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.audit-entry {
  background: rgba(var(--panel-strong), 0.6);
  border: 1px solid rgba(var(--border), 0.85);
  border-radius: 10px;
  padding: 10px 12px;
}
.audit-entry.is-error {
  border-color: rgba(var(--danger), 0.4);
  background: rgba(var(--danger), 0.06);
}
.audit-entry-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.audit-entry-action {
  font-size: 12.5px;
  font-weight: 800;
  color: rgb(var(--text));
}
.audit-entry-ts {
  font-size: 10.5px;
  font-weight: 600;
  color: rgb(var(--muted));
  white-space: nowrap;
}
.audit-entry-meta {
  margin-top: 3px;
  font-size: 11.5px;
  color: rgb(var(--muted));
}
.audit-entry-detail {
  margin-top: 6px;
  font-size: 11.5px;
  color: rgb(var(--text));
  background: rgb(var(--panel));
  border: 1px solid rgba(var(--border), 0.6);
  border-radius: 6px;
  padding: 6px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-word;
}

/* ─── Responsive table-to-card (opt-in via data-mobile-card) ──────────────── */
@media (max-width: 720px) {
  table[data-mobile-card] {
    display: block;
    width: 100%;
    border: none;
    background: transparent;
  }
  table[data-mobile-card] thead {
    /* Visually hide headers but keep them for AT (cell labels come from data-label) */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
  }
  table[data-mobile-card] tbody { display: block; }
  table[data-mobile-card] tr {
    display: block;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: rgb(var(--panel));
    border: 1px solid rgb(var(--border));
    border-radius: 10px;
    box-shadow: var(--shadow);
  }
  table[data-mobile-card] tr:hover td { background: transparent !important; }
  table[data-mobile-card] td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    border: none !important;
    text-align: right;
    font-size: 12px;
    line-height: 1.4;
    white-space: normal;
  }
  table[data-mobile-card] td:not(:last-child) {
    border-bottom: 1px solid rgba(var(--border), 0.55) !important;
  }
  table[data-mobile-card] td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgb(var(--muted));
    text-align: left;
  }
  /* Allow tables to ignore min-width / scroll wrappers when in card mode */
  .pc-tbl-wrap:has(table[data-mobile-card]),
  .bc-tbl-wrap:has(table[data-mobile-card]),
  .table-wrap:has(table[data-mobile-card]) {
    overflow: visible;
    max-height: none;
    border: none;
    background: transparent;
  }
  table[data-mobile-card].pc-tbl,
  table[data-mobile-card].bc-tbl {
    min-width: 0 !important;
  }
}

/* ─── Print styles ──────────────────────────────────────────────────────────── */
@media print {
  /* Force a clean light page for paper / PDF */
  body, body.theme-dark {
    --bg: 255, 255, 255 !important;
    --panel: 255, 255, 255 !important;
    --panel-strong: 250, 250, 252 !important;
    --muted: 71, 85, 105 !important;
    --text: 15, 23, 42 !important;
    --border: 220, 224, 232 !important;
    background: #fff !important;
    color: #0f172a !important;
    overflow: visible !important;
  }
  /* Hide chrome that isn't useful on paper */
  .sidebar,
  .topbar,
  .filter-panel,
  .filter-chip-row,
  .breadcrumbs,
  .floating-chatbot,
  .chat-overlay,
  #global-error-toast,
  .info-tip,
  .secondary-btn,
  .ghost-btn,
  .primary-btn,
  .danger-btn,
  .empty-state-actions {
    display: none !important;
  }
  /* Expand main column */
  .shell, .main-shell, .content-shell {
    display: block !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .content-shell.with-filters { grid-template-columns: 1fr !important; }
  main, section, article, .card, .panel, .kpi-card, .pc-panel, .mi-panel, .ss-band {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none !important;
    border-color: #e2e8f0 !important;
  }
  a { color: inherit !important; text-decoration: none !important; }
  /* Show full URL after external links on paper */
  a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 90%; color: #475569; }
  /* Make tables readable */
  table, .pc-tbl, .bc-tbl { width: 100% !important; min-width: 0 !important; font-size: 11px !important; }
  table thead { display: table-header-group; }
  table tr { page-break-inside: avoid; }
  /* Always reveal collapsed detail sections when printing */
  [data-collapse].is-collapsed .collapse-body { display: block !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * COLLAPSIBLE SECTIONS — shared "summary-first + collapsible detail" pattern
 * Reused across category / value / records and any page that needs progressive
 * disclosure. Markup:
 *   <div ... data-collapse [data-collapsed] [data-collapse-key="x"]>
 *     <div class="collapse-toggle"> …header… <span class="collapse-chevron"></span></div>
 *     <div class="collapse-body"> …detail… </div>
 *   </div>
 * JS (app.js initCollapsibles) wires the toggle, persistence and aria state.
 * ═══════════════════════════════════════════════════════════════════════════ */
.collapse-toggle {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.collapse-toggle:focus-visible {
  outline: 2px solid rgb(var(--brand));
  outline-offset: 2px;
  border-radius: 8px;
}
.collapse-chevron {
  display: inline-block;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: rgb(var(--muted));
}
.collapse-chevron::before { content: '▾'; }
[data-collapse].is-collapsed .collapse-chevron { transform: rotate(-90deg); }
.collapse-body {
  overflow: hidden;
  animation: collapse-reveal 0.2s ease;
}
[data-collapse].is-collapsed .collapse-body { display: none; }
@keyframes collapse-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Small "show / hide" hint, right-aligned in a section header */
.collapse-hint {
  font-size: 11px;
  font-weight: 700;
  color: rgb(var(--muted));
  letter-spacing: 0.3px;
  white-space: nowrap;
}
[data-collapse]:not(.is-collapsed) .collapse-hint .ch-show,
[data-collapse].is-collapsed .collapse-hint .ch-hide { display: none; }

/* Filter-impact indicator — "Showing X of Y records" near the filter chips */
.filter-impact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 8px;
  font-size: 12px;
  color: rgb(var(--muted));
}
.filter-impact svg { color: rgb(var(--brand)); flex-shrink: 0; }
.filter-impact strong { color: rgb(var(--text)); font-weight: 700; }
.filter-impact-tag {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: rgb(var(--brand));
  background: rgba(var(--brand), 0.12);
  border: 1px solid rgba(var(--brand), 0.28);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * TOPBAR — overflow menu + user/avatar component (replaces inline styles)
 * ═══════════════════════════════════════════════════════════════════════════ */
.topbar-overflow-wrap { position: relative; display: inline-flex; }
.topbar-overflow-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 190px;
  background: rgb(var(--panel));
  border: 1px solid rgb(var(--border));
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 12px 28px rgba(0,0,0,0.28));
  padding: 6px;
  z-index: 120;
}
.topbar-overflow-menu[hidden] { display: none; }
.overflow-menu-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(var(--muted));
  padding: 4px 10px 6px;
}
.overflow-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgb(var(--text));
  text-decoration: none;
}
.overflow-item svg { color: rgb(var(--muted)); flex-shrink: 0; }
.overflow-item:hover { background: rgba(var(--brand), 0.10); color: rgb(var(--brand)); }
.overflow-item:hover svg { color: rgb(var(--brand)); }
.overflow-item[hidden] { display: none; }

.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 1px solid rgb(var(--border));
  padding-left: 14px;
  margin-left: 4px;
}
.topbar-user-meta { text-align: right; line-height: 1.2; }
.topbar-user-name { font-size: 12px; font-weight: 700; color: rgb(var(--text)); }
.topbar-user-role { font-size: 10px; color: rgb(var(--muted)); text-transform: capitalize; }
.topbar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgb(var(--brand));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
}
.topbar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.topbar-avatar:focus-visible { outline: 2px solid rgb(var(--brand)); outline-offset: 2px; }
.topbar-logout-btn { padding: 6px 10px; }

/* ── Enterprise product surface ─────────────────────────────────────────── */
/* A restrained, authored system is the single shell theme. */
html, body { background: rgb(var(--bg)); }
.sidebar {
  background: rgb(var(--panel));
  border-right-color: rgb(var(--border));
  padding: 14px 12px;
}
.brand-card {
  border-radius: 8px;
  background: rgb(var(--panel));
  box-shadow: none;
  padding: 12px;
}
.brand-badge {
  border-radius: 7px;
  background: rgb(var(--brand));
  box-shadow: none;
}
.brand-title { color: rgb(var(--brand)); letter-spacing: .01em; }
.nav-section-label { letter-spacing: .07em; color: rgb(var(--muted)); }
.nav-item { border-radius: 5px; padding: 8px 9px; }
.nav-item.active {
  background: rgba(var(--brand), .09);
  border-color: transparent;
  border-left: 3px solid rgb(var(--brand));
  box-shadow: none;
}
.topbar {
  background: rgb(var(--panel));
  backdrop-filter: none;
  padding: 11px 20px;
}
.content-shell { padding: 18px 20px 28px; }
.page-panel { border-radius: 8px; box-shadow: none; }
.panel, .section-card, .it-card, .nf-card { box-shadow: var(--shadow); }
.scale-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 13px;
  color: rgb(var(--text));
  background: rgba(var(--brand), .06);
  border: 1px solid rgba(var(--brand), .20);
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.45;
}
.scale-banner strong { display: block; color: rgb(var(--brand)); font-size: 12px; }
.scale-banner span { display: block; color: rgb(var(--muted)); margin-top: 2px; }
.scale-banner-mark { display: grid; place-items: center; color: rgb(var(--brand)); flex: 0 0 auto; }

.workflow-page { display: grid; gap: 14px; }
.workflow-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 4px 2px 8px; }
.workflow-hero h2 { margin: 4px 0 5px; font-size: 23px; letter-spacing: -.02em; }
.workflow-hero p { max-width: 760px; margin: 0; color: rgb(var(--muted)); line-height: 1.55; }
.eyebrow { color: rgb(var(--brand)); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.workflow-hero-meta { min-width: 150px; padding: 12px 14px; border-left: 3px solid rgb(var(--brand)); background: rgba(var(--brand), .05); }
.workflow-hero-meta strong { display: block; font-size: 24px; color: rgb(var(--brand)); }
.workflow-hero-meta span { color: rgb(var(--muted)); font-size: 11px; }
.workflow-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.workflow-kpis > div { padding: 12px 14px; border: 1px solid rgb(var(--border)); border-radius: 7px; background: rgb(var(--panel)); box-shadow: var(--shadow); }
.workflow-kpis span { display: block; color: rgb(var(--muted)); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.workflow-kpis strong { display: block; margin-top: 4px; color: rgb(var(--text)); font-size: 18px; }
.workflow-kpis small { display: block; margin-top: 3px; color: rgb(var(--muted)); font-size: 10px; line-height: 1.3; }
.workflow-filter { display: flex; gap: 10px; align-items: end; padding: 10px 12px; border: 1px solid rgb(var(--border)); background: rgb(var(--panel-strong)); border-radius: 7px; }
.workflow-filter label { display: grid; gap: 4px; color: rgb(var(--muted)); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.workflow-filter select { min-width: 260px; padding: 8px 10px; border: 1px solid rgb(var(--border)); border-radius: 5px; background: rgb(var(--panel)); color: rgb(var(--text)); }
.workflow-card { padding: 15px; border: 1px solid rgb(var(--border)); border-radius: 7px; background: rgb(var(--panel)); box-shadow: var(--shadow); }
.workflow-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.workflow-card h3 { margin: 3px 0 0; font-size: 16px; }
.source-note { color: rgb(var(--muted)); font-size: 11px; }
.workflow-table { font-size: 12px; }
.workflow-table td { vertical-align: top; }
.workflow-table .small-copy { margin-top: 3px; line-height: 1.4; }
.status-chip { display: inline-flex; padding: 3px 7px; border-radius: 4px; font-size: 10px; font-weight: 800; border: 1px solid currentColor; }
.status-chip.low { color: #16804f; background: rgba(22,128,79,.08); }
.status-chip.medium { color: #9a6700; background: rgba(154,103,0,.08); }
.status-chip.high { color: #b42318; background: rgba(180,35,24,.08); }
.status-chip.neutral { color: rgb(var(--muted)); background: rgba(var(--muted), .08); }
.driver-stack { display: grid; gap: 3px; color: rgb(var(--muted)); font-size: 10px; }
.workflow-callout { display: flex; gap: 12px; align-items: flex-start; background: rgba(var(--brand), .045); border-color: rgba(var(--brand), .18); }
.workflow-callout strong { color: rgb(var(--brand)); white-space: nowrap; }
.workflow-callout span { color: rgb(var(--muted)); line-height: 1.5; }
@media (max-width: 800px) {
  .workflow-hero { display: grid; }
  .workflow-kpis { grid-template-columns: 1fr; }
  .workflow-filter { align-items: stretch; flex-direction: column; }
  .workflow-filter select { min-width: 0; width: 100%; }
  .workflow-card-head { display: grid; }
}
.scale-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.scale-action { display: grid; gap: 5px; padding: 12px; border: 1px solid rgb(var(--border)); border-radius: 6px; background: rgb(var(--panel-strong)); }
.scale-action:hover { border-color: rgba(var(--brand), .45); background: rgba(var(--brand), .05); }
.scale-action strong { color: rgb(var(--brand)); font-size: 12px; }
.scale-action span { color: rgb(var(--muted)); font-size: 11px; line-height: 1.45; }
.scale-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.scale-list { display: grid; gap: 7px; }
.scale-list > div { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 8px 0; border-bottom: 1px solid rgb(var(--border)); }
.scale-list > div:last-child { border-bottom: 0; }
.scale-list span { font-weight: 700; font-size: 12px; }
.scale-list strong { color: rgb(var(--brand)); font-size: 12px; }
.scale-list small { grid-column: 1 / -1; color: rgb(var(--muted)); font-size: 10px; }
.scale-lever-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.scale-lever-grid > div { display: grid; gap: 4px; padding: 10px; border-left: 2px solid rgb(var(--brand)); background: rgb(var(--panel-strong)); }
.scale-lever-grid strong { font-size: 11px; }
.scale-lever-grid span { color: rgb(var(--brand)); font-weight: 800; }
.scale-lever-grid small { color: rgb(var(--muted)); font-size: 10px; }
.role-home-standard-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.role-home-standard-actions .scale-action { min-height: 88px; }
.role-home-context-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.role-home-context-grid > div { display: grid; gap: 4px; padding: 10px 11px; border-left: 2px solid rgba(var(--brand), .65); background: rgb(var(--panel-strong)); }
.role-home-context-grid span { color: rgb(var(--muted)); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.role-home-context-grid strong { color: rgb(var(--text)); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.role-home-empty { display: grid !important; gap: 4px !important; }
.role-home-empty span { color: rgb(var(--muted)); font-weight: 600; }
@media (max-width: 900px) { .scale-actions, .scale-lever-grid { grid-template-columns: 1fr 1fr; } .scale-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .scale-actions, .scale-lever-grid, .role-home-context-grid { grid-template-columns: 1fr; } }

/* ── Tenant experience surfaces ─────────────────────────────────────────── */
.tenant-logo { width: 29px; height: 29px; object-fit: contain; border-radius: 5px; background: #fff; }
.tenant-logo.product-mark { width: 32px; height: 32px; border-radius: 5px; }
.tenant-logo-fallback { color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .04em; }

.public-landing { min-height: 100vh; background: rgb(var(--bg)); color: rgb(var(--text)); }
.landing-shell { width: min(1180px, calc(100% - 44px)); margin: 0 auto; }
.landing-nav { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; }
.landing-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.landing-brand img, .landing-logo-fallback { width: 38px; height: 38px; display: grid; place-items: center; object-fit: contain; border-radius: 8px; background: rgb(var(--brand)); color: #fff; font-weight: 900; }
.landing-brand .landing-product-logo { width: 164px; height: 42px; padding: 0; border-radius: 0; background: transparent; }
.landing-brand strong, .landing-brand small { display: block; }
.landing-brand strong { font-size: 14px; }
.landing-brand small { margin-top: 2px; color: rgb(var(--muted)); font-size: 10px; }
.landing-login { padding: 9px 15px; color: rgb(var(--brand)); border: 1px solid rgba(var(--brand), .35); border-radius: 6px; font-size: 12px; font-weight: 800; text-decoration: none; }
.landing-hero { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(34px, 7vw, 100px); padding: 92px 0 100px; }
.landing-hero h1 { max-width: 670px; margin: 10px 0 18px; font-size: clamp(38px, 6vw, 72px); letter-spacing: -.055em; line-height: .98; }
.landing-hero p { max-width: 620px; margin: 0; color: rgb(var(--muted)); font-size: 17px; line-height: 1.7; }
.landing-actions { display: flex; gap: 10px; margin-top: 28px; }
.landing-actions a { text-decoration: none; }
.landing-proof-card { padding: 24px; border: 1px solid rgb(var(--border)); border-top: 3px solid rgb(var(--brand)); background: rgb(var(--panel)); box-shadow: var(--shadow-lg); }
.landing-proof-kicker { color: rgb(var(--brand)); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.landing-proof-step { display: grid; grid-template-columns: 34px 1fr; gap: 13px; padding: 19px 0; border-bottom: 1px solid rgb(var(--border)); }
.landing-proof-step:last-child { border-bottom: 0; padding-bottom: 0; }
.landing-proof-step > strong { color: rgb(var(--accent)); font-size: 13px; }
.landing-proof-step b, .landing-proof-step small { display: block; }
.landing-proof-step b { font-size: 14px; }
.landing-proof-step small { margin-top: 4px; color: rgb(var(--muted)); font-size: 12px; line-height: 1.5; }
.landing-capabilities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; border-top: 1px solid rgb(var(--border)); padding: 28px 0 72px; }
.landing-capabilities > div { padding: 8px 12px 8px 0; }
.landing-capability-number { color: rgb(var(--brand)); font-size: 11px; font-weight: 900; }
.landing-capabilities h2 { margin: 12px 0 6px; font-size: 20px; }
.landing-capabilities p { margin: 0; color: rgb(var(--muted)); font-size: 13px; line-height: 1.55; }
.landing-footer { display: flex; justify-content: space-between; gap: 12px; padding: 18px 0 28px; border-top: 1px solid rgb(var(--border)); color: rgb(var(--muted)); font-size: 11px; }
@media (max-width: 800px) { .landing-footer { display: grid; } .landing-capabilities, .landing-hero { grid-template-columns: 1fr; } .landing-hero { padding: 56px 0 70px; } .landing-proof-card { max-width: 620px; } }

/* ── Artifact-inspired enterprise shell ───────────────────────────────────
 * Shared product chrome: navy navigation, compact command bar, active-filter
 * strip and right-side context filters. Page-specific templates keep their
 * own content components and data behavior.
 */
html, body { background: rgb(var(--bg)); }

.sidebar {
  width: var(--sidebar-w);
  flex-basis: var(--sidebar-w);
  flex-shrink: 0;
  padding: 10px 0;
  gap: 0;
  overflow: hidden;
  background: var(--nav-background);
  border-right: 0;
  color: rgb(var(--nav-text));
  transition: width .2s ease, flex-basis .2s ease;
}
.brand-card {
  margin: 0 10px 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 7px;
  background: rgba(var(--nav-text),.04);
  box-shadow: none;
}
.brand-badge {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background: rgb(var(--accent));
  color: rgb(var(--accent-text));
  box-shadow: none;
}
.brand-title { color: rgb(var(--nav-text)); font-size: .86rem; }
.brand-subtitle { color: rgb(var(--nav-muted)); font-size: .68rem; }
.brand-owner { color: rgb(var(--nav-muted)); }
.proj-badge-sidebar {
  margin: 0 10px 6px;
  color: rgb(var(--nav-muted));
  background: rgba(var(--nav-text),.05);
  border-color: rgba(var(--nav-text),.1);
}
.nav-section-label {
  padding: 8px 12px 4px;
  color: rgb(var(--nav-muted));
  font-size: .65rem;
}
.nav-section[data-nav-active="1"] .nav-section-label,
.nav-section-label:hover { color: rgb(var(--nav-text)); }
.nav-section-label-number { display: none; }
.nav-section-label .collapse-chevron { color: rgb(var(--nav-muted)); }
.nav-item {
  margin: 1px 0;
  padding: 7px 12px 7px 35px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  color: rgb(var(--nav-muted));
  font-size: .78rem;
}
.nav-item:hover {
  color: rgb(var(--nav-text));
  background: rgba(var(--nav-text),.06);
}
.nav-item.active {
  color: rgb(var(--nav-text));
  background: rgba(var(--nav-text),.09);
  border: 0;
  border-left: 2px solid rgb(var(--accent));
  box-shadow: none;
  font-weight: 700;
}
.nav-item.active .nav-icon, .nav-item:hover .nav-icon { color: rgb(var(--nav-text)); }
.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 8px;
}
.sidebar-footer {
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(var(--nav-text),.10);
  background: rgba(var(--nav-text),.04);
}
.sidebar-user {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 4px 0;
}
.sidebar-user-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sidebar-user-meta { min-width: 0; line-height: 1.2; }
.sidebar-user-name {
  overflow: hidden;
  color: rgb(var(--nav-text));
  font-size: .82rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-user-role {
  margin-top: 3px;
  overflow: hidden;
  color: rgb(var(--nav-muted));
  font-size: .68rem;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}
.sidebar-user-avatar,
.sidebar-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(var(--nav-text),.16);
  border-radius: 50%;
  background: rgba(var(--nav-text),.08);
  color: rgb(var(--nav-text));
  font-size: .78rem;
  font-weight: 800;
  overflow: hidden;
  text-decoration: none;
}
.sidebar-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-user-avatar:hover,
.sidebar-user-avatar:focus-visible,
.sidebar-logout:hover,
.sidebar-logout:focus-visible {
  border-color: rgba(var(--nav-text),.5);
  background: rgba(var(--nav-text),.16);
  outline: none;
}
.sidebar-logout-form { margin: 0; }
.sidebar-logout {
  border-radius: 8px;
  cursor: pointer;
}
.sidebar-overflow-wrap { position: relative; display: inline-flex; }
.sidebar-user .sidebar-overflow-wrap .ghost-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  gap: 0;
  border-radius: 8px;
  color: rgb(var(--nav-text));
  background: rgba(var(--nav-text),.08);
  border-color: rgba(var(--nav-text),.16);
}
.sidebar-user .sidebar-overflow-wrap .ghost-btn:hover,
.sidebar-user .sidebar-overflow-wrap .ghost-btn:focus-visible {
  color: rgb(var(--nav-text));
  background: rgba(var(--nav-text),.16);
  border-color: rgba(var(--nav-text),.48);
  outline: none;
}
.sidebar-user .topbar-overflow-menu {
  top: auto;
  right: 0;
  bottom: calc(100% + 8px);
}

.topbar {
  min-height: 48px;
  padding: 8px 14px;
  background: var(--topbar-background);
  border-bottom-color: rgba(var(--topbar-text),.12);
  backdrop-filter: none;
}
.page-kicker { color: rgb(var(--topbar-muted)); font-size: .62rem; }
.topbar h1 { color: rgb(var(--topbar-text)); font-size: 1rem; }
.topbar .search-bar {
  width: 210px;
  padding: 5px 10px;
  background: rgba(var(--topbar-text),.08);
  border-color: rgba(var(--topbar-text),.15);
}
.topbar .search-bar:focus-within { width: 250px; border-color: rgba(var(--topbar-text),.42); box-shadow: 0 0 0 3px rgba(var(--topbar-text),.08); }
.topbar .search-bar input { color: rgb(var(--topbar-text)); }
.topbar .search-bar input::placeholder, .topbar .search-icon { color: rgb(var(--topbar-muted)); }
.topbar .ghost-btn {
  color: rgb(var(--topbar-muted));
  background: rgba(var(--topbar-text),.08);
  border-color: rgba(var(--topbar-text),.15);
}
.topbar .ghost-btn:hover, .topbar .ghost-btn.is-active {
  color: rgb(var(--topbar-text));
  background: rgba(var(--topbar-text),.15);
  border-color: rgba(var(--topbar-text),.28);
}
.topbar-shell-toggle { white-space: nowrap; }
.topbar-shell-toggle {
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 9px;
  font-size: .84rem;
  font-weight: 700;
}
.topbar-scope-meta {
  color: rgb(var(--topbar-muted));
  font-size: .84rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .01em;
}
.topbar #topbarFilterToggle.is-active {
  border: 2px solid rgb(var(--topbar-text));
  color: rgb(var(--topbar-text));
  background: rgba(var(--topbar-text),.12);
}
.topbar-control-label { font-size: .72rem; }
.topbar-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgb(var(--accent));
  color: rgb(var(--accent-text));
  font-size: 9px;
  font-weight: 800;
}
.topbar-user { border-left-color: rgba(var(--topbar-text),.16); }
.topbar-user-name { color: rgb(var(--topbar-text)); }
.topbar-user-role { color: rgb(var(--topbar-muted)); }
.topbar-avatar { background: rgb(var(--accent)); color: rgb(var(--accent-text)); }

.filter-chip-row {
  min-height: 30px;
  padding: 4px 14px;
  gap: 4px;
  background: rgb(var(--panel));
  border-bottom: 1px solid rgb(var(--border));
}
.filter-chip {
  padding: 2px 7px;
  color: #1e40af;
  background: #dbeafe;
  border-color: #93c5fd;
  font-size: 10px;
}
.filter-chip:hover { background: #bfdbfe; }
.filter-empty { color: rgb(var(--muted)); font-size: 10px; }
.filter-impact { margin: 4px 18px 0; font-size: 11px; }

.content-shell.with-filters {
  grid-template-columns: minmax(0, 1fr) var(--filter-w);
  grid-template-areas: "content filters";
  gap: 0 12px;
  padding: 16px 18px 24px;
}
.content-shell.with-filters.filters-collapsed {
  grid-template-columns: minmax(0, 1fr) 0;
  grid-template-areas: "content filters";
}
.content-main-col { grid-area: content; min-width: 0; }
.filter-toggle-col { display: none !important; }
.filter-panel {
  grid-area: filters;
  min-width: 0;
  padding: 12px 11px;
  border-radius: 8px;
  border: 1px solid rgb(var(--border));
  border-left: 1px solid rgb(var(--border));
  background: rgb(var(--panel));
  box-shadow: var(--shadow);
}
.filter-panel-header { margin-bottom: 9px; padding-bottom: 8px; }
.filter-panel h2 { font-size: .9rem; }
.filter-group { margin-bottom: 7px; border-radius: 5px; background: rgba(var(--panel-strong),.72); }
.filter-group summary { padding: 7px 8px; font-size: .77rem; }
.filter-group-body { padding: 0 8px 8px; }
.filter-search-input, .filter-date-group input { border-radius: 5px; }
.checkbox-label { font-size: .75rem; }
.filter-collapse-tab { border-radius: 5px; }

.page-panel {
  border-radius: 8px;
  box-shadow: none;
}
.card, .panel, .table-wrap, .kpi-card, .workflow-card { box-shadow: var(--shadow); }

@media (min-width: 1081px) {
  body.nav-collapsed .sidebar { width: 62px; flex-basis: 62px; }
  body.nav-collapsed .brand-card { justify-content: center; margin-left: 8px; margin-right: 8px; padding-left: 0; padding-right: 0; }
  body.nav-collapsed .brand-text, body.nav-collapsed .proj-badge-sidebar { display: none; }
  body.nav-collapsed .nav-section-label { justify-content: center; padding-left: 4px; padding-right: 4px; }
  body.nav-collapsed .nav-section-label-text { display: none; }
  body.nav-collapsed .nav-section-label-number { display: inline; color: rgba(255,255,255,.42); font-size: .65rem; }
  body.nav-collapsed .nav-section-label .collapse-chevron { display: none; }
  body.nav-collapsed .nav-item { justify-content: center; padding: 8px 0; border-left-color: transparent; font-size: 0; }
  body.nav-collapsed .nav-item.active { border-left-color: rgb(var(--accent)); }
  body.nav-collapsed .nav-icon { width: 18px; height: 18px; }
  body.nav-collapsed .sidebar-footer { padding-left: 8px; padding-right: 8px; }
  body.nav-collapsed .sidebar-user { grid-template-columns: 1fr; justify-items: center; padding-left: 0; padding-right: 0; }
  body.nav-collapsed .sidebar-user-meta { display: none; }
  body.nav-collapsed .sidebar-user-actions { flex-direction: column; }
  body.nav-collapsed .sidebar-user-avatar { width: 34px; height: 34px; }
  body.nav-collapsed .sidebar-user .sidebar-overflow-wrap .ghost-btn { width: 34px; height: 34px; }
  body.nav-collapsed .sidebar-logout { width: 34px; height: 34px; }
}

@media (max-width: 1080px) {
  .topbar-control-label { display: none; }
  .topbar-nav-toggle { display: none; }
  .content-shell.with-filters {
    grid-template-columns: 1fr;
    grid-template-areas: "content" "filters";
    gap: 12px;
  }
  .filter-panel { max-height: none; }
}

@media (max-width: 620px) {
  .topbar { align-items: flex-start; }
  .topbar-right { gap: 5px; }
  .topbar .search-bar { order: 5; width: 100%; }
  .topbar .search-bar:focus-within { width: 100%; }
  .content-shell.with-filters { padding: 12px; }
}

/* ── Enterprise coherence layer ─────────────────────────────────────────────
   A small set of shared rules keeps the shell, evidence cues, public identity,
   and dense data surfaces visually consistent across legacy templates. */
.brand-title {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  color: rgb(var(--nav-text));
  font-size: .75rem;
  line-height: 1.22;
  letter-spacing: 0;
}
.brand-tenant-name,
.brand-powered-by {
  display: block;
  max-width: 100%;
}
.brand-tenant-name {
  overflow-wrap: break-word;
  font-weight: 800;
}
.brand-powered-by {
  margin-top: 1px;
  color: rgb(var(--nav-text));
  font-size: .68rem;
  font-weight: 650;
}
.brand-text {
  min-width: 0;
  flex: 1 1 auto;
}
.brand-subtitle {
  margin-top: 6px;
  color: rgba(255,255,255,.62);
  font-size: .62rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: .01em;
  white-space: normal;
}
.brand-owner {
  margin-top: 3px;
  font-size: .57rem;
  line-height: 1.25;
  white-space: normal;
}
.nav-section-label {
  min-height: 30px;
  padding-top: 8px;
  padding-bottom: 6px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .075em;
}
.nav-item {
  min-height: 32px;
  font-size: .8rem;
}
.nav-item.active {
  background: linear-gradient(90deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
}

.workspace-context-bar {
  display: flex;
  min-height: 33px;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
  padding: 5px 18px 6px;
  color: rgb(var(--muted));
  background: rgba(var(--panel), .96);
  border-bottom: 1px solid rgb(var(--border));
  font-size: 11px;
  line-height: 1.35;
}
.workspace-context-bar span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.workspace-context-bar b { color: rgb(var(--text)); font-weight: 750; }
.workspace-context-state {
  color: rgb(var(--success));
  font-weight: 800;
}
.workspace-context-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--success));
  box-shadow: 0 0 0 3px rgba(var(--success), .11);
}

/* Data has to remain legible during long review sessions. */
.table,
.workflow-table,
.mi-detail-table,
.preview-table { font-size: 12px; }
.table thead th,
.mi-detail-table th,
.preview-table th {
  min-height: 34px;
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: .045em;
}
.table tbody td,
.mi-detail-table td,
.preview-table td { line-height: 1.45; }
.source-note,
.small-copy,
.helper-copy { line-height: 1.5; }

.landing-tenant-context {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: rgb(var(--muted));
  font-size: 11px;
}
.landing-tenant-context span {
  padding: 5px 9px;
  color: rgb(var(--brand));
  border: 1px solid rgba(var(--brand), .28);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.landing-tenant-context strong { color: rgb(var(--text)); font-size: 12px; }
.landing-trust-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgb(var(--border));
}
.landing-trust-row span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgb(var(--muted));
  font-size: 10px;
  line-height: 1.35;
}
.landing-trust-row span::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgb(var(--success));
}

/* Keep the assistant available without making it the loudest global action. */
.fchat-fab {
  width: 50px;
  height: 50px;
  animation: none;
  box-shadow: 0 8px 22px rgba(var(--accent), .28);
}
.fchat-fab:hover { transform: translateY(-2px); }

/* Shared enterprise framing for analytical workspaces and governed empty states. */
.enterprise-page-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid rgb(var(--border));
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(var(--brand), .07), rgba(var(--brand2), .05), rgb(var(--panel)) 70%);
}
.enterprise-page-intro h2 {
  margin: 3px 0 4px;
  color: rgb(var(--text));
  font-size: 1rem;
  line-height: 1.25;
}
.enterprise-page-intro p {
  max-width: 760px;
  margin: 0;
  color: rgb(var(--muted));
  font-size: .77rem;
  line-height: 1.5;
}
.enterprise-eyebrow {
  color: rgb(var(--brand));
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.enterprise-intro-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.enterprise-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 30px 18px;
  text-align: center;
  color: rgb(var(--muted));
}
.enterprise-empty-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(var(--brand), .22);
  border-radius: 10px;
  background: rgba(var(--brand), .07);
  color: rgb(var(--brand));
}
.enterprise-empty strong { color: rgb(var(--text)); font-size: .86rem; }
.enterprise-empty p { max-width: 560px; margin: 0; font-size: .76rem; line-height: 1.5; }
.enterprise-empty .secondary-btn { margin-top: 4px; }

:where(a, button, [role="button"], input, select, textarea):focus-visible {
  outline: 3px solid rgba(var(--brand), .28);
  outline-offset: 2px;
}

@media (max-width: 1080px) {
  .sidebar {
    width: 100%;
    flex: 0 0 auto;
    max-height: 280px;
  }
  .workspace-context-bar { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 700px) {
  .workspace-context-bar span:nth-child(n+4) { display: none; }
  .landing-trust-row { grid-template-columns: 1fr; }
  .enterprise-page-intro { align-items: flex-start; flex-direction: column; }
  .enterprise-intro-actions { width: 100%; }
  .enterprise-intro-actions > * { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}