:root {
  --bg:#f3f2f1; --card:#ffffff; --ink:#252423; --muted:#605e5c; --line:#e1dfdd;
  --accent:#118DFF; --sidebar:#1f3a5f; --sidebar-ink:#eaf1fb;
  --green:#2E7D32; --amber:#F9A825; --orange:#EF6C00; --red:#C62828; --grey:#9E9E9E;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; font-family:"Segoe UI",system-ui,Arial,sans-serif; color:var(--ink); background:var(--bg); }
#app { display:flex; height:100vh; overflow:hidden; }

/* ---- sidebar ---- */
#sidebar { width:250px; flex:0 0 250px; background:var(--sidebar); color:var(--sidebar-ink); display:flex; flex-direction:column; padding:16px 14px; overflow-y:auto; }
.brand-title { font-size:18px; font-weight:700; }
.brand-sub { font-size:12px; opacity:.8; margin-bottom:8px; }
.slicer-group { margin-top:14px; }
.slicer-group label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px; opacity:.75; margin-bottom:4px; }
.slicer-group select { width:100%; padding:6px 8px; border-radius:4px; border:1px solid rgba(255,255,255,.2); background:#fff; color:var(--ink); font-size:13px; }
.checkset { display:flex; flex-direction:column; gap:4px; background:#fff; border:1px solid rgba(255,255,255,.2); border-radius:4px; padding:6px 8px; }
.checkset .chk { display:flex; align-items:center; gap:8px; margin:0; font-size:13px; text-transform:none; letter-spacing:normal; opacity:1; color:var(--ink); cursor:pointer; }
.checkset .chk input { margin:0; cursor:pointer; }
.daterange { margin-top:10px; font-size:12px; opacity:.85; }
#page-nav { list-style:none; padding:0; margin:18px 0 0; }
#page-nav li { padding:8px 10px; border-radius:5px; font-size:13px; cursor:pointer; margin-bottom:2px; }
#page-nav li:hover { background:rgba(255,255,255,.08); }
#page-nav li.active { background:var(--accent); color:#fff; font-weight:600; }
#reload-btn { margin-top:auto; width:100%; padding:9px 10px; border:1px solid rgba(255,255,255,.25); border-radius:6px; background:rgba(255,255,255,.06); color:#fff; font-size:12px; cursor:pointer; }
#reload-btn:hover:not(:disabled) { background:rgba(255,255,255,.16); }
#reload-btn:disabled { opacity:.6; cursor:default; }
.foot { font-size:11px; opacity:.6; padding-top:10px; }

/* ---- content ---- */
#content { flex:1; overflow-y:auto; padding:20px 24px; }
.loading { padding:40px; color:var(--muted); }
.page-title { font-size:22px; font-weight:600; margin:0 0 4px; }
.page-sub { font-size:13px; color:var(--muted); margin:0 0 18px; }
.page-toolbar { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:16px; }
.page-toolbar .slicer-group { margin:0; min-width:220px; }
.page-toolbar .slicer-group label { color:var(--muted); }
.page-toolbar .slicer-group select { border:1px solid var(--line); }

/* ---- cards ---- */
.card-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:12px 14px; min-width:150px; flex:1; box-shadow:0 1px 2px rgba(0,0,0,.05); border-top:3px solid var(--grey); }
.kpi .label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.kpi .value { font-size:26px; font-weight:700; margin-top:6px; line-height:1; }
.kpi .foot { font-size:11px; color:var(--muted); margin-top:6px; }
.kpi.ok { border-top-color:var(--green); } .kpi.ok .value { color:var(--green); }
.kpi.warn { border-top-color:var(--orange); } .kpi.warn .value { color:var(--orange); }
.kpi.alert { border-top-color:var(--red); } .kpi.alert .value { color:var(--red); }
.kpi.clickable { cursor:pointer; transition:box-shadow .12s, border-color .12s; }
.kpi.clickable:hover { border-color:var(--accent); box-shadow:0 2px 8px rgba(17,141,255,.18); }
.kpi.wide { flex:1.6; min-width:190px; }
.band-mini { margin-top:8px; display:flex; flex-direction:column; gap:3px; }
.band-mini-row { display:flex; align-items:center; gap:6px; font-size:12px; }
.band-mini-row .dot { width:9px; height:9px; border-radius:50%; flex:none; }
.band-mini-lbl { color:var(--ink); }
.band-mini-val { margin-left:auto; font-variant-numeric:tabular-nums; font-weight:600; }

/* ---- panels ---- */
.panel { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:12px 14px; box-shadow:0 1px 2px rgba(0,0,0,.05); margin-bottom:16px; }
.panel h2 { font-size:13px; margin:0 0 10px; font-weight:600; }
.panel h2 .hint { font-weight:400; color:var(--muted); font-size:11px; }
.grid2 { display:grid; grid-template-columns:1.1fr 1fr; gap:16px; }
.grid-1 { display:grid; grid-template-columns:1fr; gap:16px; }

/* ---- tables ---- */
table { width:100%; border-collapse:collapse; font-size:12px; }
th,td { text-align:left; padding:5px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
th { position:sticky; top:0; background:#faf9f8; color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.3px; cursor:pointer; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tfoot td { position:sticky; bottom:0; background:#eef4ff; font-weight:700; border-top:2px solid var(--line); border-bottom:none; }
tfoot td.total { color:var(--ink); }
.table-scroll { max-height:560px; overflow:auto; }
tr:hover td { background:#f7fbff; }
tr.clickable { cursor:pointer; }
tr.clickable:hover td { background:#eef6ff; }
tr.row-highlight td { background:#fff4ce !important; }
.page-toolbar .slicer-group.narrow { min-width:150px; }
.page-toolbar input[type=date] { padding:6px 8px; border-radius:4px; border:1px solid var(--line); background:#fff; color:var(--ink); font-size:13px; }
.btn-clear { align-self:flex-end; padding:7px 12px; border:1px solid var(--line); background:#fff; border-radius:4px; cursor:pointer; font-size:12px; color:var(--muted); }
.btn-clear:hover { background:#f2f2f2; }
.table-block { display:flex; flex-direction:column; }
.table-tools { display:flex; justify-content:flex-end; margin-bottom:8px; }
.btn-export { padding:6px 12px; border:1px solid var(--line); background:#fff; border-radius:4px; cursor:pointer; font-size:12px; color:var(--accent); font-weight:600; }
.btn-export:hover { background:#eef6ff; border-color:var(--accent); }
.toolbar-count { align-self:flex-end; margin-left:auto; font-size:12px; color:var(--muted); font-weight:600; }
.badge { padding:2px 8px; border-radius:10px; color:#fff; font-size:11px; font-weight:600; display:inline-block; }
.matrix td.rowhdr, .matrix th.rowhdr { font-weight:600; background:#faf9f8; }
.matrix td.total, .matrix th.total { font-weight:700; background:#f0f6ff; }
.matrix td.drill { cursor:pointer; }
.matrix td.drill:hover { background:#eef6ff; box-shadow:inset 0 0 0 1px #b9d6ff; }
tr.clickable td.rowhdr { color:var(--accent); }
.filter-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:-4px 0 10px; }
.filter-chips:empty { display:none; }
.filter-chip { display:inline-flex; align-items:center; gap:6px; background:#eef2ff; border:1px solid #c7d2fe; color:#3730a3; border-radius:12px; padding:3px 6px 3px 10px; font-size:12px; }
.filter-chip button { border:none; background:transparent; color:#3730a3; cursor:pointer; font-size:14px; line-height:1; padding:0 2px; }
.filter-chip button:hover { color:#c62828; }
.databar-wrap { display:flex; align-items:center; gap:6px; justify-content:flex-end; }
.databar { height:8px; border-radius:4px; background:var(--accent); }

.chart-box { position:relative; height:420px; }
.small { font-size:11px; color:var(--muted); }
.legend { display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; font-size:11px; }
.legend span { display:inline-flex; align-items:center; gap:5px; color:var(--muted); }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; }

/* ---- data model diagram ---- */
.dm-legend { display:flex; gap:18px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--muted); margin-bottom:14px; }
.dm-legend span { display:inline-flex; align-items:center; gap:6px; }
.dm-legend i { width:14px; height:14px; border-radius:3px; display:inline-block; }
.dm-wrap { overflow:auto; }
.dm-canvas { position:relative; }
.dm-svg { position:absolute; left:0; top:0; z-index:0; pointer-events:none; overflow:visible; }
.dm-rel { transition:opacity .15s, stroke-width .15s; }
.dm-rel.dm-dim { opacity:.1; }
.dm-rel.dm-on { stroke-width:2.6 !important; }
.dm-mark { fill:var(--muted); font-size:13px; font-weight:700; font-family:"Segoe UI",Arial,sans-serif; }
.dm-card { position:absolute; width:210px; background:var(--card); border:1px solid var(--line); border-radius:6px; box-shadow:0 1px 5px rgba(0,0,0,.14); z-index:1; transition:opacity .15s, box-shadow .15s; }
.dm-card:hover { box-shadow:0 3px 12px rgba(0,0,0,.22); }
.dm-card.dm-card-dim { opacity:.28; }
.dm-card-hd { font-weight:700; font-size:12px; padding:6px 9px; border-radius:5px 5px 0 0; }
.dm-card-file { font-size:10px; color:var(--muted); padding:3px 9px; border-bottom:1px solid var(--line); word-break:break-word; }
.dm-fields { list-style:none; margin:0; padding:4px 0; }
.dm-fields li { padding:2px 9px; font-size:11px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.dm-fields li.k { font-weight:600; }
.dm-badge { font-size:9px; padding:1px 4px; border-radius:3px; color:#fff; letter-spacing:.3px; }
.dm-badge.pk { background:var(--accent); }
.dm-badge.fk { background:var(--muted); }
.dm-fact .dm-card-hd { background:var(--sidebar); color:#fff; }
.dm-dim .dm-card-hd { background:#eef4fb; color:var(--sidebar); }
.dm-source .dm-card-hd { background:var(--orange); color:#fff; }