/* Apple-inspired look with Dark/Light modes, left sidebar, drawer with chart */

:root{
  --bg:#0e1116;
  --panel:rgba(20,24,31,0.75);
  --panel-border:rgba(255,255,255,0.06);
  --mut:#9aa4b2;
  --fg:#e8edf3;
  --acc:#8ab4ff;
  --ok:#35d29c;
  --bad:#ff6b6b;
  --shadow: 0 12px 30px rgba(0,0,0,0.35);
}
:root[data-theme="light"]{
  --bg:#f5f7fb;
  --panel:#ffffffd9;
  --panel-border:rgba(0,0,0,0.08);
  --mut:#6b7280;
  --fg:#0b1220;
  --acc:#3b82f6;
  --ok:#0ea5a4;
  --bad:#e11d48;
  --shadow: 0 10px 28px rgba(0,0,0,0.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(138,180,255,0.08), transparent 50%),
    radial-gradient(900px 700px at 110% 30%, rgba(53,210,156,0.06), transparent 50%),
    var(--bg);
  color:var(--fg);
  font: clamp(13px, 1.6vw, 14px)/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, system-ui;
  letter-spacing:.2px;
}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}
.small{font-size:12px}
.muted{color:var(--mut)}

.nav{
  display:flex;justify-content:space-between;align-items:center;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, var(--panel), rgba(20,24,31,0.2));
  border-bottom:1px solid var(--panel-border);
  padding:10px 16px; position:sticky; top:0; z-index:20;
}
.brand{font-weight:700; letter-spacing:0.3px; font-size:16px}
.nav-actions{display:flex; gap:10px; align-items:center}
.container{padding:18px; max-width:1380px; margin:0 auto}

/* split layout with sticky left sidebar */
.split{display:grid; grid-template-columns: 320px 1fr; gap:14px}
.leftcol{position:sticky; top:68px; align-self:start; height:max-content}
.rightcol{min-width:0}

.card{
  background: var(--panel);
  border:1px solid var(--panel-border);
  border-radius:14px;
  padding:16px;
  box-shadow: var(--shadow);
}
.title{color:var(--mut);margin-bottom:8px;font-weight:600; letter-spacing:.2px}

.search{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--panel-border);
  background: rgba(255,255,255,0.03); color:var(--fg); outline:none;
  margin-bottom:10px;
}
:root[data-theme="light"] .search{background: rgba(0,0,0,0.02)}
.search:focus{border-color:var(--acc)}

.btn{
  padding:10px 14px; border-radius:12px; border:1px solid var(--panel-border);
  background: rgba(255,255,255,0.06); color:var(--fg); cursor:pointer;
}
:root[data-theme="light"] .btn{background: rgba(0,0,0,0.04)}
.btn:hover{border-color:var(--acc)}
.btn.theme{font-weight:600}

.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--panel-border); padding:10px 8px; text-align:left; white-space:nowrap}
.table th{color:var(--mut); font-weight:600}
.table tr:hover td{background:rgba(255,255,255,0.02)}
:root[data-theme="light"] .table tr:hover td{background:rgba(0,0,0,0.02)}
.table-scroll{overflow:auto; -webkit-overflow-scrolling: touch}

.sort-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  border:none;
  color:inherit;
  font:inherit;
  padding:0;
  cursor:pointer;
}
.sort-btn:focus-visible{outline:2px solid var(--acc); outline-offset:2px}
.sort-btn .sort-indicator{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  width:10px;
  height:12px;
}
.sort-btn .sort-indicator::before,
.sort-btn .sort-indicator::after{
  content:"";
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  display:block;
}
.sort-btn .sort-indicator::before{border-bottom:6px solid var(--mut);}
.sort-btn .sort-indicator::after{border-top:6px solid var(--mut); margin-top:2px;}
.sort-btn.active.asc .sort-indicator::before{border-bottom-color:var(--fg);}
.sort-btn.active.asc . sort-indicator::after{border-top-color:transparent;}
.sort-btn.active.desc .sort-indicator::before{border-bottom-color:transparent;}
.sort-btn.active.desc .sort-indicator::after{border-top-color:var(--fg);}

.badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px}
.badge.new{background:rgba(53,210,156,0.2); color:#0bd199}
.badge.update{background:rgba(255,214,102,0.25); color:#b08900}

.metrics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:720px){.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.news-list{list-style:none;padding-left:0;margin:0;display:flex;flex-direction:column;gap:6px}
.news-list li{line-height:1.45}
.news-list li a{color:var(--fg);text-decoration:none}
.news-list li a:hover{text-decoration:underline}
.news-list .muted{margin-left:6px}

.pos{color:var(--ok)} .neg{color:var(--bad)}

.hero-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:12px;
}
@media(max-width:1200px){ .hero-grid{grid-template-columns: repeat(3, minmax(0, 1fr));} }
@media(max-width:780px){ .hero-grid{grid-template-columns: repeat(2, minmax(0, 1fr));} }
@media(max-width:540px){ .hero-grid{grid-template-columns: 1fr;} }

.hero-card{
  border:1px solid var(--panel-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-radius:14px; padding:12px; box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:6px;
  text-align:left; cursor:pointer;
}
:root[data-theme="light"] .hero-card{background:linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02))}
.hc-top{display:flex; justify-content:space-between; align-items:center; gap:8px}
.hc-row{display:flex; justify-content:space-between; gap:10px}
.hc-bottom{display:flex; justify-content:space-between; align-items:center; margin-top:6px}
.tkr{font-weight:700}

.btn-day{
  display:block; width:100%; text-align:left; padding:12px; border-radius:12px;
  border:1px solid var(--panel-border);
  background: rgba(15,17,23,0.6); color:var(--fg); margin-bottom:10px;
  transition: border-color .15s ease, transform .08s ease;
}
:root[data-theme="light"] .btn-day{background: rgba(255,255,255,0.75)}
.btn-day:hover{border-color:var(--acc); transform: translateY(-1px)}
.btn-day.active{border-color:var(--acc);}
.daylist{max-height:72vh; overflow:auto; -webkit-overflow-scrolling:touch}

.toolbar{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.toolbar select{
  background: rgba(255,255,255,0.06);
  color: var(--fg);
  padding:8px 10px; border:1px solid var(--panel-border); border-radius:10px;
}
:root[data-theme="light"] .toolbar select{background: rgba(0,0,0,0.04)}
.toolbar-wide{padding-top:12px}
.toolbar-grid{display:grid; gap:12px; grid-template-columns: 2fr 2fr 1fr 1fr}
.ctl label{display:block; color:var(--mut); font-size:12px; margin-bottom:6px}
.ctl input[type="range"]{width:100%}

.health{
  width:10px; height:10px; border-radius:999px; display:inline-block;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.06) inset;
}
.health.ok{ background:#00d18f } .health.warn{ background:#ffd666 } .health.bad{ background:#ff6b6b }

.mt{margin-top:14px}

/* ===== Drawer ===== */
.drawer{position:fixed; inset:0; z-index:50; display:flex; align-items:stretch; justify-content:flex-end}
.drawer-backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.45)}
.drawer-panel{
  position:relative; width: clamp(640px, 80vw, 1200px); background:var(--panel); border-left:1px solid var(--panel-border);
  box-shadow: -10px 0 30px rgba(0,0,0,0.35); display:flex; flex-direction:column;
}
.drawer-header{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--panel-border)}
.drawer-body{padding:14px 16px; overflow:auto}
.inner{margin-top:10px}
.stats{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; margin-bottom:12px}
@media(max-width:720px){
  .container{padding:14px}
  .split{grid-template-columns: 1fr}
  .leftcol{position:static}
  .stats{grid-template-columns: repeat(2, minmax(0,1fr))}
  .table{display:block; overflow-x:auto; -webkit-overflow-scrolling: touch}
  .table table{min-width:720px}
}

/* Tabs for detail drawer */
.tabs{display:flex; gap:8px; margin:10px 0}
.tab{
  padding:8px 12px; border-radius:10px; border:1px solid var(--panel-border);
  background: rgba(255,255,255,0.04); color:var(--fg); cursor:pointer;
}
:root[data-theme="light"] .tab{background: rgba(0,0,0,0.04)}
.tab.active{border-color:var(--acc)}

.prochart{width:100%; height:300px}
.subcharts{display:grid; grid-template-columns: 1fr; gap:8px; margin-top:8px}
.prochart-small{width:100%; height:160px}

.overlays{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px}
.overlays .chk{display:flex; align-items:center; gap:6px; font-size:12px; color: var(--mut)}
.overlays input{accent-color: var(--acc)}