:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:rgba(15,23,42,.10);
  --shadow:0 8px 22px rgba(15,23,42,.08);
  --brand:#2563eb;
  --brand2:#0ea5e9;
  --good:#16a34a;
  --warn:#d97706;
  --bad:#dc2626;
  --sidebar:#ffffff;
  --sidebarText:#0f172a;
  --chip:#f1f5f9;
  --chipText:#0f172a;
  --chipActiveBg:#e0f2fe;
  --chipActiveText:#0369a1;
}

.theme-dark{
  --bg:#0b1220;
  --panel:#0f172a;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --border:rgba(148,163,184,.18);
  --shadow:0 14px 30px rgba(0,0,0,.35);
  --brand:#38bdf8;
  --brand2:#60a5fa;
  --sidebar:#0f172a;
  --sidebarText:#e2e8f0;
  --chip:#111c33;
  --chipText:#e2e8f0;
  --chipActiveBg:rgba(56,189,248,.16);
  --chipActiveText:#38bdf8;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background:var(--bg); color:var(--text)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(100,116,139,.35);border-radius:10px}
::-webkit-scrollbar-track{background:rgba(100,116,139,.12)}

.app{display:flex; height:100vh; overflow:hidden}

.sidebar{width:280px; background:var(--sidebar); border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0}
.brand{display:flex; align-items:center; gap:10px; padding:18px 16px; border-bottom:1px solid var(--border)}
.brand-icon{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow)}
.brand-icon svg{width:22px;height:22px}
.brand-title{font-weight:800; letter-spacing:.2px}
.brand-sub{font-size:12px; color:var(--muted); margin-top:2px}

.nav{padding:10px 10px 14px; overflow:auto}
.nav-item{width:100%; display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:12px; border:1px solid transparent; background:transparent; color:var(--sidebarText); cursor:pointer; font-size:14px; text-align:left}
.nav-item:hover{background:rgba(37,99,235,.06); border-color:rgba(37,99,235,.10)}
.nav-item.is-active{background:rgba(37,99,235,.10); border-color:rgba(37,99,235,.18)}
.theme-dark .nav-item:hover{background:rgba(56,189,248,.08); border-color:rgba(56,189,248,.12)}
.theme-dark .nav-item.is-active{background:rgba(56,189,248,.12); border-color:rgba(56,189,248,.16)}
.nav-ic{width:20px;height:20px; color:var(--muted); display:flex; align-items:center; justify-content:center}
.nav-ic svg{width:20px;height:20px}

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

.topbar{height:64px; background:var(--panel); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 18px; gap:14px}
.topbar-left{display:flex; align-items:center; gap:12px; min-width:0}
.page-title{font-weight:800; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tenant-pill{display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:var(--chip); color:var(--chipText); border:1px solid var(--border); font-size:12px; max-width:42vw}
.tenant-dot{width:8px;height:8px;border-radius:999px; background:var(--good)}
#tenantName{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.topbar-right{display:flex; align-items:center; gap:10px}
.period{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.chip{border:1px solid var(--border); background:var(--chip); color:var(--chipText); padding:8px 10px; border-radius:999px; font-size:12px; cursor:pointer}
.chip.is-active{background:var(--chipActiveBg); color:var(--chipActiveText); border-color:rgba(37,99,235,.18)}
.theme-dark .chip.is-active{border-color:rgba(56,189,248,.22)}

.range{display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:var(--panel)}
.range-input{border:1px solid var(--border); background:transparent; color:var(--text); border-radius:10px; padding:6px 8px; font-size:12px}
.range-sep{color:var(--muted); font-size:12px}
.btn{border:1px solid rgba(37,99,235,.22); background:rgba(37,99,235,.10); color:var(--text); padding:7px 10px; border-radius:10px; cursor:pointer; font-size:12px}
.theme-dark .btn{border-color:rgba(56,189,248,.22); background:rgba(56,189,248,.12)}

.actions{display:flex; align-items:center; gap:6px}
.icon-btn{width:38px;height:38px;border-radius:12px;border:1px solid var(--border); background:var(--panel); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--muted)}
.icon-btn:hover{color:var(--text)}
.icon-btn svg{width:18px;height:18px}
.ic-moon{display:none}
.theme-dark .ic-moon{display:block}
.theme-dark .ic-sun{display:none}

.dropdown{position:relative}
.dropdown-menu{position:absolute; right:0; top:44px; width:170px; background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); padding:6px; z-index:50}
.dropdown-item{width:100%; text-align:left; border:1px solid transparent; background:transparent; color:var(--text); padding:10px 10px; border-radius:10px; cursor:pointer; font-size:13px}
.dropdown-item:hover{background:rgba(37,99,235,.08); border-color:rgba(37,99,235,.12)}
.theme-dark .dropdown-item:hover{background:rgba(56,189,248,.10); border-color:rgba(56,189,248,.14)}

.content{padding:16px 18px 26px; overflow:auto}
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:14px}
.card{background:var(--panel); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow)}
.kpi{padding:14px 14px}
.kpi-label{font-size:12px; color:var(--muted); font-weight:600}
.kpi-value{font-size:20px; font-weight:900; margin-top:8px}
.kpi-value.is-warn{color:var(--warn)}

.views{display:block}
.view{display:none}
.view.is-active{display:block}

.grid{display:grid; gap:12px}
.grid-2{grid-template-columns:1.4fr 1fr}

.card-head{padding:14px 14px 0}
.card-title{font-weight:800; font-size:14px}
.chart{height:320px}
.chart-tall{height:420px}

.table-wrap{padding:10px 14px 14px; overflow:auto}
.table{width:100%; border-collapse:separate; border-spacing:0; font-size:12px}
.table th{position:sticky; top:0; background:var(--panel); text-align:left; padding:10px 10px; border-bottom:1px solid var(--border); color:var(--muted); font-weight:800}
.table td{padding:10px 10px; border-bottom:1px solid var(--border); vertical-align:top}
.table tr:hover td{background:rgba(37,99,235,.05)}
.theme-dark .table tr:hover td{background:rgba(56,189,248,.06)}

.empty{padding:14px; color:var(--muted); font-size:13px}

.plan{padding:14px}
.plan-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px}
.plan-item{padding:10px 12px; border:1px solid var(--border); border-radius:14px; background:rgba(100,116,139,.06)}
.plan-k{font-size:12px; color:var(--muted); font-weight:700}
.plan-v{margin-top:6px; font-size:14px; font-weight:900}

.toast{position:fixed; bottom:16px; right:16px; background:var(--panel); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:14px; padding:12px 12px; max-width:min(420px, calc(100vw - 32px)); z-index:80}

@media (max-width: 1100px){
  .sidebar{width:250px}
  .grid-2{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px){
  .sidebar{display:none}
  .kpis{grid-template-columns:1fr}
  .tenant-pill{max-width:60vw}
}


.progress{height:10px;border-radius:999px;background:rgba(100,116,139,.18);overflow:hidden;margin-top:10px}
.progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand2))}
.progress-meta{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:12px;color:var(--muted);font-weight:700}

[hidden]{display:none!important}