/* ──────────────────────────────────────────────────────────
   Wincloth Insight — Premium Design System (Phase 2-3)
   Calm · Intelligent · Expensive · Precise · Highly Readable
   Dark Sophisticated Neutral — accent only for active/focus
   ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* -- Surface & Background (sophisticated slate/zinc) */
  --premium-bg: #080a0f;
  --premium-bg-soft: #0c101a;
  --premium-surface: #111827;
  --premium-surface-2: #162032;
  --premium-surface-3: #1c2a44;
  --premium-elevated: #1a2842;
  /* -- Text */
  --premium-text: #e8edf6;
  --premium-text-2: #aab6cc;
  --premium-text-3: #7686a3;
  /* -- Border */
  --premium-border: rgba(148,163,184,0.11);
  --premium-border-strong: rgba(148,163,184,0.18);
  --premium-border-subtle: rgba(148,163,184,0.07);
  /* -- Accent (muted, only active/focus) */
  --premium-accent: #38bdf8;
  --premium-accent-soft: rgba(56,189,248,0.10);
  --premium-accent-border: rgba(56,189,248,0.28);
  /* -- Semantic */
  --premium-success: #22c55e;
  --premium-success-soft: rgba(34,197,94,0.10);
  --premium-warning: #f59e0b;
  --premium-warning-soft: rgba(245,158,11,0.10);
  --premium-danger: #ef4444;
  --premium-danger-soft: rgba(239,68,68,0.10);
  /* -- Radius / Shadow / Transition */
  --premium-radius-sm: 8px;
  --premium-radius: 12px;
  --premium-radius-lg: 16px;
  --premium-radius-xl: 20px;
  --premium-shadow-card: 0 8px 32px rgba(0,0,0,0.42), 0 1px 0 rgba(255,255,255,0.04) inset;
  --premium-shadow-elevated: 0 16px 48px rgba(0,0,0,0.52);
  --premium-transition: 160ms ease;
  /* -- Spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
}

/* ── Base override when premium shell is active ─────────────────── */
body.premium {
  font-family: 'Inter', ui-sans-system, system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(56,189,248,0.06), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(99,102,241,0.05), transparent 65%),
              var(--premium-bg);
  color: var(--premium-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}
body.premium * { box-sizing: border-box; }
body.premium a { color: var(--premium-accent); }
body.premium ::selection { background: rgba(56,189,248,0.22); }

/* Tabular numbers for KPIs / tables */
.premium .tabular, .premium .kpi-value, .premium table td:nth-child(n+2) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── App Shell ──────────────────────────────────────────────────── */
.premium .app-shell {
  display: grid;
  grid-template-columns: 256px 1fr;
  min-height: 100vh;
}
.premium .app-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.premium .app-content {
  flex: 1;
  padding: 28px 28px 40px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

/* Sidebar */
.premium .sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0b1220 0%, #0a1020 55%, #0c1326 100%);
  border-right: 1px solid var(--premium-border);
  z-index: 50;
}
.premium .sidebar-brand {
  padding: 22px 18px 16px;
  border-bottom: 1px solid var(--premium-border);
}
.premium .sidebar-brand-mark {
  display: flex; align-items: center; gap: 10px;
}
.premium .sidebar-logo {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 14px; letter-spacing: -0.02em;
  box-shadow: 0 6px 18px rgba(14,165,233,0.35);
}
.premium .sidebar-brand-title {
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--premium-text);
  line-height: 1;
}
.premium .sidebar-brand-sub {
  font-size: 11px; color: var(--premium-text-3); font-weight: 500; letter-spacing: 0.02em;
  margin-top: 2px;
}
.premium .sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 14px 10px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.18) transparent;
}
.premium .sidebar-nav::-webkit-scrollbar { width: 4px; }
.premium .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.18); border-radius: 99px; }
.premium .sidebar-section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--premium-text-3);
  padding: 16px 10px 6px;
}
.premium .sidebar-section-label:first-child { padding-top: 4px; }
.premium .sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--premium-text-2);
  text-decoration: none;
  font-size: 13px; font-weight: 500; line-height: 1.2;
  border: 1px solid transparent;
  transition: background var(--premium-transition), color var(--premium-transition), border-color var(--premium-transition);
  white-space: nowrap;
}
.premium .sidebar-link:hover {
  background: rgba(255,255,255,0.06);
  color: var(--premium-text);
  border-color: rgba(255,255,255,0.06);
}
.premium .sidebar-link.active {
  background: rgba(56,189,248,0.10);
  border-color: var(--premium-accent-border);
  color: var(--premium-text);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(56,189,248,0.08) inset;
}
.premium .sidebar-link-icon {
  width: 18px; height: 18px; display: grid; place-items: center;
  font-size: 13px; opacity: 0.9; flex-shrink: 0;
}
.premium .sidebar-link.active .sidebar-link-icon { opacity: 1; }
.premium .sidebar-foot {
  padding: 12px 12px 14px;
  border-top: 1px solid var(--premium-border);
  display: flex; flex-direction: column; gap: 8px;
}
.premium .sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--premium-border-subtle);
}
.premium .sidebar-user-avatar {
  width: 28px; height: 28px; border-radius: 999px;
  background: linear-gradient(135deg, #1e293b, #334155);
  border: 1px solid rgba(255,255,255,0.08);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--premium-text-2);
  flex-shrink: 0;
}
.premium .sidebar-user-name { font-size: 12px; font-weight: 600; color: var(--premium-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.premium .sidebar-user-role { font-size: 11px; color: var(--premium-text-3); }
.premium .sidebar-logout {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--premium-border);
  background: transparent;
  color: var(--premium-text-2);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.premium .sidebar-logout:hover { background: rgba(255,255,255,0.06); color: var(--premium-text); }
.premium .sidebar-toggle {
  display: none;
}

/* Topbar */
.premium .topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 28px;
  background: rgba(8,10,15,0.78);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border-bottom: 1px solid var(--premium-border);
}
.premium .topbar-left { flex: 1; min-width: 0; }
.premium .topbar-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--premium-accent);
  margin: 0 0 2px;
}
.premium .topbar-title {
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--premium-text);
  margin: 0; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.premium .topbar-subtitle {
  font-size: 12.5px; color: var(--premium-text-3); margin: 2px 0 0; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.premium .topbar-actions {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.premium .topbar-search {
  position: relative;
}
.premium .topbar-search input {
  width: 220px;
  padding: 8px 10px 8px 32px;
  border-radius: 999px;
  border: 1px solid var(--premium-border);
  background: rgba(255,255,255,0.05);
  color: var(--premium-text);
  font-size: 13px; outline: none;
  transition: width var(--premium-transition), border-color var(--premium-transition), background var(--premium-transition);
}
.premium .topbar-search input::placeholder { color: var(--premium-text-3); }
.premium .topbar-search input:focus {
  width: 280px;
  border-color: var(--premium-accent-border);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.10);
}
.premium .topbar-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--premium-text-3); font-size: 13px; pointer-events: none;
}
.premium .topbar-period {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--premium-border);
  background: rgba(255,255,255,0.04);
  color: var(--premium-text-2); font-size: 12px; font-weight: 500;
}
.premium .topbar-menu-btn {
  display: none;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--premium-border);
  background: rgba(255,255,255,0.05);
  color: var(--premium-text);
  font-size: 18px; cursor: pointer;
}

/* Context bar */
.premium .context-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 28px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--premium-border);
}
.premium .context-summary {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--premium-text-2);
}
.premium .context-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--premium-border);
  font-size: 12px; font-weight: 500; color: var(--premium-text-2);
}
.premium .context-chip strong { color: var(--premium-text); font-weight: 600; }
.premium .context-sep { color: var(--premium-text-3); font-size: 12px; }
.premium .context-action {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
}
.premium .btn-ghost {
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--premium-border);
  background: rgba(255,255,255,0.04);
  color: var(--premium-text-2); font-size: 12px; font-weight: 600; cursor: pointer;
}
.premium .btn-ghost:hover { background: rgba(255,255,255,0.08); color: var(--premium-text); }
.premium .btn-primary-sm {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--premium-accent-border);
  background: var(--premium-accent-soft);
  color: var(--premium-accent); font-size: 12px; font-weight: 700; cursor: pointer;
}
.premium .btn-primary-sm:hover { background: rgba(56,189,248,0.16); }

/* Filter drawer */
.premium .filter-drawer {
  position: fixed; inset: 0; z-index: 70;
  display: none;
}
.premium .filter-drawer.open { display: block; }
.premium .filter-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(2px);
}
.premium .filter-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  background: #0f172a;
  border-left: 1px solid var(--premium-border-strong);
  box-shadow: var(--premium-shadow-elevated);
  display: flex; flex-direction: column;
  animation: drawer-in 180ms ease;
}
@keyframes drawer-in { from { transform: translateX(12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.premium .filter-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--premium-border);
}
.premium .filter-drawer-head h3 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--premium-text); }
.premium .filter-drawer-head p { margin: 2px 0 0; font-size: 11px; color: var(--premium-text-3); }
.premium .filter-drawer-body {
  flex: 1; overflow-y: auto; padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.premium .filter-drawer-body .field { display: flex; flex-direction: column; gap: 6px; }
.premium .filter-drawer-body .field label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--premium-text-3); }
.premium .filter-drawer-body .field input,
.premium .filter-drawer-body .field select {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--premium-border-strong);
  background: rgba(255,255,255,0.04);
  color: var(--premium-text); font-size: 13px; outline: none;
}
.premium .filter-drawer-body .field input:focus,
.premium .filter-drawer-body .field select:focus { border-color: var(--premium-accent-border); box-shadow: 0 0 0 3px rgba(56,189,248,0.10); }
.premium .filter-drawer-foot {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--premium-border);
  display: flex; gap: 10px;
}
.premium .filter-drawer-foot .btn-primary-sm { flex: 1; justify-content: center; display: inline-flex; }

/* ── Page header inside content (premium) ────────────────────────── */
.premium .page-title-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.premium .page-title-row h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.premium .page-title-row p { margin: 6px 0 0; font-size: 13px; color: var(--premium-text-3); line-height: 1.5; max-width: 640px; }

/* ── KPI system ──────────────────────────────────────────────────── */
.premium .kpi-primary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 10px;
}
.premium .kpi-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--premium-border);
  border-radius: var(--premium-radius-lg);
  padding: 16px 16px 14px;
  box-shadow: var(--premium-shadow-card);
  position: relative;
  overflow: hidden;
}
.premium .kpi-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(380px 120px at 20% 0%, rgba(56,189,248,0.07), transparent 70%);
  pointer-events: none;
}
.premium .kpi-card-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--premium-text-3);
  margin: 0 0 10px;
  display: flex; align-items: center; gap: 6px;
}
.premium .kpi-card-label .info-badge { width: 16px; height: 16px; font-size: 10px; }
.premium .kpi-card-value {
  font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1;
  color: var(--premium-text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.premium .kpi-card-value .si-num { border: none; cursor: default; font: inherit; color: inherit; }
.premium .kpi-card-delta {
  margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11px; font-weight: 600; color: var(--premium-text-3);
}
.premium .delta-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: -0.01em;
}
.premium .delta-pill.up { background: var(--premium-success-soft); color: var(--premium-success); border: 1px solid rgba(34,197,94,0.22); }
.premium .delta-pill.down { background: var(--premium-danger-soft); color: var(--premium-danger); border: 1px solid rgba(239,68,68,0.20); }
.premium .delta-pill.flat { background: rgba(148,163,184,0.10); color: var(--premium-text-3); border: 1px solid var(--premium-border); }

/* Secondary metrics compact row */
.premium .secondary-metrics {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: var(--premium-radius);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--premium-border);
  margin-bottom: 18px;
}
.premium .metric-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--premium-border-subtle);
  font-size: 12px; color: var(--premium-text-3);
  white-space: nowrap;
}
.premium .metric-chip strong { color: var(--premium-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.premium .metric-chip .si-num { border: none; color: inherit; font: inherit; }

/* ── Section / Panel ─────────────────────────────────────────────── */
.premium .section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--premium-text-3);
  margin: 22px 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.premium .section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--premium-border); opacity: 0.9;
}
.premium .panel.premium-panel {
  background: rgba(17,24,39,0.92);
  border: 1px solid var(--premium-border);
  border-radius: var(--premium-radius-lg);
  box-shadow: var(--premium-shadow-card);
  padding: 18px;
  margin-top: 0;
}
.premium .panel.premium-panel + .panel.premium-panel,
.premium .panel.premium-panel + .section-label,
.premium .section-label + .panel.premium-panel { margin-top: 14px; }
.premium .panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.premium .panel-head h2 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--premium-text); }
.premium .panel-head p { margin: 3px 0 0; font-size: 12px; color: var(--premium-text-3); line-height: 1.45; }
.premium .panel-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.premium .panel-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--premium-text-3); }
.premium .panel-head .comparison-note { margin: 6px 0 0; font-size: 12px; }

/* Insight cards (Needs Attention) */
.premium .insight-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.premium .insight-card {
  border-radius: var(--premium-radius);
  border: 1px solid var(--premium-border);
  background: rgba(255,255,255,0.03);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  border-left-width: 3px;
}
.premium .insight-card.critical { border-left-color: var(--premium-danger); background: rgba(239,68,68,0.06); }
.premium .insight-card.warning { border-left-color: var(--premium-warning); background: rgba(245,158,11,0.06); }
.premium .insight-card.healthy { border-left-color: var(--premium-success); background: rgba(34,197,94,0.06); }
.premium .insight-card-head { display: flex; align-items: center; gap: 8px; }
.premium .insight-card-head strong { font-size: 12px; font-weight: 700; letter-spacing: -0.01em; color: var(--premium-text); }
.premium .insight-card p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--premium-text-2); }
.premium .insight-card a { font-size: 12px; font-weight: 600; text-decoration: none; }
.premium .insight-card a:hover { text-decoration: underline; }

/* Chart container */
.premium .chart-card {
  background: rgba(255,255,255,0.02);
  border-color: var(--premium-border);
}
.premium .chart-canvas-wrap { height: 300px; }
.premium .wide-chart-card .chart-canvas-wrap { height: 360px; }

/* Breakdown 2-col */
.premium .breakdown-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}

/* Table */
.premium table { min-width: 0; }
.premium th { background: rgba(255,255,255,0.02); color: var(--premium-text-3); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.premium td { font-size: 13px; color: var(--premium-text-2); }
.premium td:first-child { color: var(--premium-text); font-weight: 500; }

/* Owner Brief specific */
.premium .brief-hero {
  display: grid; gap: 14px;
  padding: 18px;
  border-radius: var(--premium-radius-lg);
  background: linear-gradient(135deg, rgba(56,189,248,0.08), rgba(99,102,241,0.06) 55%, rgba(255,255,255,0.02));
  border: 1px solid var(--premium-border);
  box-shadow: var(--premium-shadow-card);
}
.premium .brief-hero-grid {
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
}
.premium .health-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid transparent;
}
.premium .health-badge.healthy { background: var(--premium-success-soft); color: var(--premium-success); border-color: rgba(34,197,94,0.22); }
.premium .health-badge.warning { background: var(--premium-warning-soft); color: var(--premium-warning); border-color: rgba(245,158,11,0.22); }
.premium .health-badge.critical { background: var(--premium-danger-soft); color: var(--premium-danger); border-color: rgba(239,68,68,0.20); }
.premium .brief-exec {
  font-size: 13.5px; line-height: 1.65; color: var(--premium-text-2);
  max-width: 780px;
}
.premium .brief-exec strong { color: var(--premium-text); font-weight: 600; }
.premium .priority-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.premium .priority-card {
  border-radius: var(--premium-radius);
  border: 1px solid var(--premium-border);
  background: rgba(255,255,255,0.03);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.premium .priority-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.premium .priority-card h4 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--premium-text); line-height: 1.3; }
.premium .priority-meta { font-size: 11px; color: var(--premium-text-3); }
.premium .priority-card p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--premium-text-2); }
.premium .disclosure { margin-top: 10px; }
.premium .disclosure summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--premium-accent);
}
.premium .disclosure summary::-webkit-details-marker { display: none; }
.premium .disclosure[open] summary { margin-bottom: 12px; }

/* Hide old horizontal nav when premium active */
body.premium #si-nav.top-nav { display: none !important; }
body.premium .page-header { display: none !important; }
body.premium .onboarding-banner { display: none !important; }
body.premium #activeFilterBadges { display: none !important; }
body.premium .brief-period-banner { display: none !important; }

/* Filter bar legacy hidden — lives inside drawer now (fix display:contents bug #WIN-premium-1) */
body.premium #filterBar { display: none !important; }
body.premium .filter-drawer .field label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--premium-text-3); }
body.premium .filter-drawer .drawer-field { display:flex; flex-direction:column; gap:6px; }
body.premium .filter-drawer .drawer-field label { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--premium-text-3); }
/* Lucide sidebar icon normalize */
body.premium .sidebar-link [data-lucide], body.premium .sidebar-link i[data-lucide], body.premium .sidebar-link svg.lucide { width:16px; height:16px; stroke-width:1.75; flex-shrink:0; color: currentColor; }
body.premium .sidebar-link-icon { width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; }
/* Breadcrumb */
.premium .breadcrumb { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; color:var(--premium-text-3); margin-bottom:10px; }
.premium .breadcrumb a { color:var(--premium-text-2); text-decoration:none; }
.premium .breadcrumb a:hover { color:var(--premium-accent); }
.premium .breadcrumb span.sep { opacity:.6; }
/* Distributor detail hero */
.premium .hero-card { background: linear-gradient(135deg, rgba(56,189,248,0.08), rgba(99,102,241,0.06) 55%, rgba(255,255,255,0.02)); border:1px solid var(--premium-border); border-radius: var(--premium-radius-lg); padding:18px; box-shadow: var(--premium-shadow-card); display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.premium .hero-card h1 { font-size:20px; font-weight:800; letter-spacing:-0.02em; margin:0; line-height:1.15; }
.premium .hero-card .hero-code { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--premium-text-3); margin-top:4px; }
.premium .hero-card .hero-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
/* Chart polish: single primary neutral/accent */
.premium .chart-card canvas { max-width:100%; }
/* KPI semantic fix: Stock label pcs only */
.premium .kpi-card-stock-note { font-size:11px; color:var(--premium-text-3); margin-top:6px; }
/* Horizontal bar article mix */
.premium .h-bar { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--premium-border-subtle); }
.premium .h-bar:last-child { border-bottom:none; }
.premium .h-bar-label { flex:0 0 160px; font-size:12px; font-weight:600; color:var(--premium-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.premium .h-bar-track { flex:1; height:10px; border-radius:999px; background: rgba(255,255,255,0.06); overflow:hidden; }
.premium .h-bar-fill { height:100%; border-radius:999px; background: #38bdf8; transition: width 300ms ease; }
.premium .h-bar-value { flex:0 0 90px; text-align:right; font-size:12px; font-weight:600; color:var(--premium-text-2); font-variant-numeric: tabular-nums; }

/* Responsive */
@media (max-width: 1100px) {
  .premium .kpi-primary-grid { grid-template-columns: repeat(2, 1fr); }
  .premium .insight-grid { grid-template-columns: repeat(2, 1fr); }
  .premium .breakdown-grid { grid-template-columns: 1fr; }
  .premium .priority-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .premium .app-shell { grid-template-columns: 1fr; }
  .premium .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw);
    transform: translateX(-100%);
    transition: transform 200ms ease;
    box-shadow: var(--premium-shadow-elevated);
  }
  .premium .sidebar.open { transform: translateX(0); }
  .premium .sidebar-backdrop {
    position: fixed; inset: 0; z-index: 49;
    background: rgba(0,0,0,0.44);
    backdrop-filter: blur(2px);
    display: none;
  }
  .premium .sidebar-backdrop.open { display: block; }
  .premium .topbar { padding: 12px 16px; }
  .premium .topbar-menu-btn { display: inline-grid; place-items: center; }
  .premium .topbar-search input { width: 160px; }
  .premium .topbar-search input:focus { width: 180px; }
  .premium .app-content { padding: 18px 16px 32px; }
  .premium .context-bar { padding: 10px 16px; }
  .premium .kpi-primary-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .premium .kpi-card-value { font-size: 20px; }
  .premium .insight-grid { grid-template-columns: 1fr; }
  .premium .priority-grid { grid-template-columns: 1fr; }
  .premium .brief-hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .premium .kpi-primary-grid { grid-template-columns: 1fr; }
  .premium .topbar-actions { gap: 8px; }
  .premium .topbar-period { display: none; }
}

/* Print: keep existing print rules, premium adds nothing */

/* ── Phase 4: aliases for legacy pages (migrated 15 pages keep body.premium shell) ── */
body.premium .container,
body.premium main.container {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
body.premium section.container,
body.premium div.container {
  margin-top: 14px;
}
body.premium section.container:first-of-type,
body.premium div.container:first-of-type { margin-top: 0; }

/* kpi-grid legacy -> premium kpi-primary-grid */
body.premium .kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 10px;
}
body.premium .kpi-grid .card,
body.premium .kpi-grid .kpi-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--premium-border);
  border-radius: var(--premium-radius-lg);
  padding: 16px 16px 14px;
  box-shadow: var(--premium-shadow-card);
  position: relative;
  overflow: hidden;
  min-height: 0;
}
body.premium .kpi-grid .card::before { content:''; position:absolute; inset:0; background: radial-gradient(380px 120px at 20% 0%, rgba(56,189,248,0.07), transparent 70%); pointer-events:none; }
body.premium .kpi-grid .card h3 { font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--premium-text-3); margin:0 0 10px; display:flex; align-items:center; gap:6px; }
body.premium .kpi-grid .card strong,
body.premium .kpi-grid .card .kpi-card-value { font-size:24px; font-weight:700; letter-spacing:-0.03em; line-height:1.1; color:var(--premium-text); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
body.premium .kpi-grid .card .comparison-line,
body.premium .kpi-grid .card .kpi-card-delta { margin-top:8px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11px; font-weight:600; color:var(--premium-text-3); }

/* panel legacy -> premium-panel */
body.premium .panel,
body.premium section.panel {
  background: rgba(17,24,39,0.92);
  border: 1px solid var(--premium-border);
  border-radius: var(--premium-radius-lg);
  box-shadow: var(--premium-shadow-card);
  padding: 18px;
  margin-top: 14px;
}
body.premium .panel-header h2,
body.premium .panel h2 { font-size:14px; font-weight:700; letter-spacing:-0.01em; color:var(--premium-text); margin:0; }
body.premium .panel-header p,
body.premium .panel .comparison-note { font-size:12px; color:var(--premium-text-3); line-height:1.45; }
body.premium .panel .panel-header { margin-bottom:14px; }

/* chart-card legacy */
body.premium .chart-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--premium-border);
  border-radius: var(--premium-radius-lg);
  box-shadow: var(--premium-shadow-card);
}
body.premium .chart-card h3 { color:var(--premium-text); font-size:13px; font-weight:700; letter-spacing:-0.01em; margin:0 0 8px; }

/* grid-two / grid-three legacy keep premium spacing */
body.premium .grid-two { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
body.premium .grid-three { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-top:14px; }
@media (max-width:1100px){ body.premium .kpi-grid{ grid-template-columns:repeat(2,1fr);} body.premium .grid-two, body.premium .grid-three{ grid-template-columns:1fr; } }
@media (max-width:520px){ body.premium .kpi-grid{ grid-template-columns:1fr; } }

/* quadrant / dictionary cards keep subtle */
body.premium .quadrant-legend, body.premium .quadrant-hint-grid { margin-top:14px; }
body.premium .card.si-flash { outline: 1px solid var(--premium-accent-border); }

/* ensure legacy tables inherit premium table styles */
body.premium .table-wrap { overflow-x:auto; max-width:100%; min-width:0; }
body.premium th, body.premium td { white-space:nowrap; }

/* ── V1.2 FINAL FREEZE: 390px overflow containment (minimal, no redesign) ──────────
   Root cause: wide-table 860px + hero fixed min-width 200/180 + search min-width at 390 viewport causes documentElement.scrollWidth > innerWidth.
   Fix: constrain scroll-table wraps to viewport, collapse hero right column, ensure grids/cards min-width:0 containment.
   Required: report before fixing page/viewport/scrollWidth/innerWidth/delta/offending selector, then fix. */
@media (max-width:520px){
  body.premium .hero-card div[style*="min-width:200px"],
  body.premium .hero-card div[style*="min-width:180px"]{ min-width:0 !important; text-align:left !important; width:100%; }
  body.premium .container, body.premium main.container { min-width:0; max-width:100%; }
  body.premium .kpi-grid, body.premium .grid-two, body.premium .grid-three { min-width:0; }
  body.premium .card, body.premium .panel, body.premium .chart-card { min-width:0; overflow:hidden; }
  body.premium .hero-card { min-width:0; }
  body.premium .table-wrap, body.premium .scroll-table-wrap { max-width:100%; min-width:0; }
  body.premium .table-wrap table { min-width:0; }
}
/* search input min-width collapse at narrow viewport */
@media (max-width:520px){
  #productSearch[style*="min-width:180px"]{ min-width:0 !important; }
  #allProductsWrap .table-wrap { max-width:100%; }
}
/* ── delta 8px containment at 1366 viewport: app-content + container overflow guard (no redesign) ── */
html, body { overflow-x: clip; }
body.premium .app-content { min-width:0; overflow-x: clip; }
body.premium .container, body.premium main.container { overflow-x: clip; }

/* ── Anti-FOUC: sembunyikan body sampai shell selesai wrap; failsafe di shell ── */
html.wci-boot body { visibility: hidden; }
html.wci-shell-ready body, html.wci-shell-failed body { visibility: visible; }