/* October & Co BI — Silsal-inspired dark BI aesthetic */
:root {
  --bg: #0E0B1A;
  --bg-2: #181428;
  --surface: #15111F;
  --surface-2: #1E1930;
  --border: #2A2440;
  --border-2: #3A3358;
  --ink: #F5F2FF;
  --ink-2: #C9C3DD;
  --ink-3: #9089AD;
  --ink-4: #6C6587;
  --muted: #4A4566;

  --accent: #7C7CF5;
  --accent-2: #9090F8;
  --accent-soft: rgba(124, 124, 245, 0.18);
  --accent-softer: rgba(124, 124, 245, 0.10);

  --c1: #7C7CF5;
  --c2: #FF8FB1;
  --c3: #6FD2C0;
  --c4: #FFB876;
  --c5: #87B6FF;
  --c6: #C39BF5;

  --pos: #4ECB94;
  --pos-soft: rgba(78, 203, 148, 0.16);
  --neg: #FF6B7E;
  --neg-soft: rgba(255, 107, 126, 0.16);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01', 'tnum';
}
#root { min-height: 100vh; }

/* App shell */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

/* Sidebar */
.sb {
  background: #0A0A12;
  border-right: 1px solid #1F1B2E;
  padding: 18px 14px;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 4px; color: #fff;
}
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; }
.sb-logo {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--c1), var(--c6) 60%, var(--c2));
  display: grid; place-items: center;
  color: white; font-weight: 700; font-size: 13px;
  box-shadow: 0 4px 14px rgba(91,91,240,0.35);
  letter-spacing: -0.02em;
}
.sb-name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; color: #fff; }
.sb-sub { font-size: 11px; color: #8A8499; margin-top: 1px; }

.sb-section {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #6E6880; padding: 14px 10px 6px;
}
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 9px;
  color: #C8C3D9; cursor: pointer;
  font-size: 13px; font-weight: 500;
  transition: all 0.12s ease; position: relative;
}
.sb-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sb-item.active { background: rgba(91,91,240,0.18); color: #fff; }
.sb-item.active::before {
  content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.sb-icon { width: 18px; height: 18px; display: grid; place-items: center; color: #8A8499; }
.sb-item.active .sb-icon { color: #A5A5FF; }
.sb-foot { margin-top: auto; padding: 10px; display: flex; align-items: center; gap: 10px; border-top: 1px solid #1F1B2E; color: #8A8499; font-size: 11px; }

.main { min-width: 0; display: flex; flex-direction: column; }

/* Topbar */
.tb {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; border-bottom: 1px solid #1F1B2E;
  background: #0A0A12; backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 20; color: #fff;
}
.tb-left { display: flex; align-items: center; gap: 14px; }
.tb-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.tb-crumb { color: #8A8499; font-size: 13px; }
.tb-right { display: flex; align-items: center; gap: 8px; }

/* Buttons & controls */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-2);
  font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: all 0.12s ease; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--border-2); color: var(--ink); }

.seg { display: inline-flex; background: var(--bg-2); border-radius: 9px; padding: 3px; gap: 2px; }
.seg-item {
  height: 26px; padding: 0 12px;
  display: inline-flex; align-items: center;
  border-radius: 6px; font-size: 12px; font-weight: 500;
  color: var(--ink-3); cursor: pointer;
  transition: all 0.12s ease; white-space: nowrap;
}
.seg-item:hover { color: var(--ink-2); }
.seg-item.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* Sub-tabs */
.tabs {
  display: flex; gap: 2px; padding: 10px 28px;
  background: rgba(14, 11, 26, 0.85);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 65px; z-index: 19;
  backdrop-filter: blur(12px);
  align-items: center; flex-wrap: nowrap;
}
.tab {
  position: relative; padding: 12px 14px;
  font-size: 13px; font-weight: 500; color: var(--ink-3);
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  transition: color 0.12s ease; white-space: nowrap;
}
.tab:hover { color: var(--ink-2); }
.tab.active { color: var(--accent); }
.tab.active::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--accent);
}

.content { padding: 22px 28px 60px; display: flex; flex-direction: column; gap: 18px; }

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
}
.card-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.card-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.card-sub { font-size: 11px; color: var(--ink-3); }

/* KPI grid */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.kpi-label { font-size: 11px; color: var(--ink-3); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.kpi-val { font-size: 22px; font-weight: 600; color: var(--ink); margin-top: 6px; letter-spacing: -0.01em; }
.kpi-sub { font-size: 11px; color: var(--ink-4); margin-top: 4px; }
.kpi-delta { font-size: 11px; font-weight: 600; margin-top: 6px; display: inline-block; padding: 2px 7px; border-radius: 5px; }
.kpi-delta.pos { background: var(--pos-soft); color: var(--pos); }
.kpi-delta.neg { background: var(--neg-soft); color: var(--neg); }

/* Table */
.tbl {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
}
.tbl th, .tbl td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.tbl th { font-weight: 600; color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; background: var(--bg-2); }
.tbl td { color: var(--ink-2); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr:hover td { background: var(--accent-softer); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 500; }
.badge.enabled { background: var(--pos-soft); color: var(--pos); }
.badge.paused  { background: var(--neg-soft); color: var(--neg); }
.badge.removed { background: rgba(108,101,135,0.16); color: var(--ink-4); }

/* Empty state */
.empty {
  text-align: center; padding: 60px 24px;
  color: var(--ink-3);
}
.empty-icon { font-size: 36px; margin-bottom: 16px; opacity: 0.6; }
.empty-title { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.empty-sub { font-size: 12px; max-width: 480px; margin: 0 auto; line-height: 1.55; }

/* Chart */
.chart-wrap { width: 100%; }
.chart-grid { stroke: var(--border); stroke-dasharray: 2 4; }
.chart-line { fill: none; stroke-width: 2; }
.chart-area { stroke: none; opacity: 0.16; }
.chart-axis { fill: var(--ink-3); font-size: 10px; font-weight: 500; }

/* Updated banner */
.upd-banner {
  font-size: 11px; color: var(--ink-3); padding: 8px 14px;
  background: var(--accent-softer); border: 1px solid var(--accent-softer);
  border-radius: 8px; display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
}

/* Two-column layout for charts */
.row-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .row-2 { grid-template-columns: 1fr; } }