/* reports.opti.li — UI v3 */

:root{
  --bg: #0b1220;
  --bg2:#0a0f1a;
  --panel: rgba(255,255,255,.035);
  --panel2: rgba(255,255,255,.05);
  --border: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --muted2: rgba(255,255,255,.45);

  --accent: #6ea8fe;
  --ok: #36d399;
  --warn: #fbbf24;
  --bad: #fb7185;
  --neutral: rgba(255,255,255,.25);

  --shadow: 0 12px 40px rgba(0,0,0,.35);
  --radius: 18px;
  --radius-sm: 12px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--sans);
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(110,168,254,.16), transparent 55%),
    radial-gradient(900px 500px at 85% 12%, rgba(54,211,153,.14), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.95}

.muted{color:var(--muted)}
.small{font-size:12px}
.strong{font-weight:650}
.mono{font-family:var(--mono)}
.divider{height:1px;background:var(--border);margin:18px 0}

/* Layout */
.layout{display:flex;min-height:100vh}
.sidebar{
  width: 320px;
  background: rgba(0,0,0,.22);
  border-right: 1px solid var(--border);
  padding: 18px 14px;
  position: sticky;
  top:0;
  height:100vh;
  overflow:auto;
}
.main{
  flex:1;
  padding: 18px 22px 40px 22px;
}

/* Brand */
.brand{padding:8px 10px 14px 10px}
.brand-title{font-size:18px;font-weight:750;letter-spacing:.2px}
.brand-sub{margin-top:2px;font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}
code{
  font-family:var(--mono);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  padding:2px 6px;border-radius:8px;
}

/* Icons */
.icon{
  width:16px;height:16px;
  fill: currentColor;
  opacity:.9;
  margin-right:10px;
  flex:0 0 auto;
}
.icon.small{width:14px;height:14px;margin-right:8px;opacity:.85}

/* Sidebar nav */
.nav{display:flex;flex-direction:column;gap:10px;padding:10px}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid transparent;
  color: var(--text);
  background: transparent;
}
.nav-item:hover{background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.06)}
.nav-item.active{
  background: rgba(110,168,254,.10);
  border-color: rgba(110,168,254,.22);
}
.nav-item.child{padding:8px 10px 8px 14px; margin-left:8px}

.nav-group{margin-top:6px}
.nav-group-title{
  display:flex;align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:14px;
  color: var(--muted);
}
.nav-group-title.active{background: rgba(255,255,255,.035); color: var(--text)}
.nav-group-title a{color:inherit;flex:1}
.nav-group-items{display:flex;flex-direction:column;gap:6px;margin-top:6px}

/* Pills */
.nav-pill, .pill{
  margin-left:auto;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-size:12px;
  line-height:1.4;
  color: var(--muted);
}
.nav-pill.ok, .pill.ok{border-color: rgba(54,211,153,.25); background: rgba(54,211,153,.10); color: rgba(54,211,153,.95)}
.nav-pill.warn, .pill.warn{border-color: rgba(251,191,36,.30); background: rgba(251,191,36,.10); color: rgba(251,191,36,.95)}
.nav-pill.bad, .pill.bad{border-color: rgba(251,113,133,.30); background: rgba(251,113,133,.12); color: rgba(251,113,133,.95)}
.nav-pill{font-size:11px;min-width:30px;padding:2px 7px}

/* Sidebar footer hint */
.sidebar-footer{padding:12px 14px}
.hint{
  font-size:12px;color:var(--muted);
  border:1px dashed rgba(255,255,255,.12);
  padding:10px 12px;border-radius:14px;
  background: rgba(255,255,255,.03);
}

/* Topbar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.breadcrumbs{display:flex;align-items:center;gap:10px;color:var(--muted)}
.crumb.strong{color:var(--text);font-weight:650}
.sep{color:rgba(255,255,255,.25)}
.range{display:flex;align-items:center;gap:8px}
.range-item{
  padding:7px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size:13px;
}
.range-item.active{
  background: rgba(110,168,254,.12);
  border-color: rgba(110,168,254,.25);
  color: var(--text);
}

/* Flash / Callout */
.flash, .callout{
  margin: 16px 0 14px 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.flash.ok{border-color:rgba(54,211,153,.22); background: rgba(54,211,153,.08)}
.flash.warn{border-color:rgba(251,191,36,.25); background: rgba(251,191,36,.08)}
.flash.bad{border-color:rgba(251,113,133,.22); background: rgba(251,113,133,.10)}
.callout{display:flex;align-items:center;gap:10px}
.callout.warn{border-color:rgba(251,191,36,.25); background: rgba(251,191,36,.07)}
.callout .btn{margin-left:auto}

/* Panels / Sections */
.panel{
  margin-top: 18px;
  padding: 16px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.section-title h2{
  margin:0;
  font-size: 15px;
  font-weight: 750;
  display:flex;
  align-items:center;
  letter-spacing:.2px;
}
.section-title h2 .icon{opacity:.95}
.section-right{display:flex;align-items:center;gap:10px}

/* KPI */
.kpi-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.kpi{
  grid-column: span 4;
  padding: 14px 14px 12px 14px;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  min-height: 106px;
}
.kpi-top{display:flex;align-items:center;justify-content:space-between}
.kpi-title{display:flex;align-items:center;font-size:12px;color:var(--muted);font-weight:650}
.kpi-value{margin-top:8px;font-size:26px;font-weight:780;letter-spacing:.2px}
.kpi-sub{margin-top:4px;font-size:12px;color:var(--muted)}
.kpi-chart{margin-top:10px;display:flex;align-items:center;justify-content:flex-start}

@media (max-width: 1100px){
  .kpi{grid-column: span 6}
}
@media (max-width: 820px){
  .sidebar{display:none}
  .kpi{grid-column: span 12}
}

/* Tone accents (subtle) */
.tone-1{background: linear-gradient(180deg, rgba(110,168,254,.09), rgba(255,255,255,.03))}
.tone-2{background: linear-gradient(180deg, rgba(54,211,153,.08), rgba(255,255,255,.03))}
.tone-3{background: linear-gradient(180deg, rgba(251,191,36,.08), rgba(255,255,255,.03))}
.tone-4{background: linear-gradient(180deg, rgba(251,113,133,.08), rgba(255,255,255,.03))}
.tone-5{background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03))}
.tone-6{background: linear-gradient(180deg, rgba(110,168,254,.06), rgba(255,255,255,.03))}

/* Tables */
.table{
  width:100%;
  border-collapse: collapse;
  border-spacing:0;
  font-size: 13px;
}
.table th, .table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  vertical-align: top;
}
.table th{
  text-align:left;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  letter-spacing:.15px;
}
.table .num{text-align:right}
.table.compact th, .table.compact td{padding:8px 10px}
.table tr:hover td{background: rgba(255,255,255,.025)}
.table a{color: var(--accent)}
.table a:hover{text-decoration: underline}

.subhead{
  margin: 12px 0 8px 0;
  font-size: 12px;
  color: var(--muted);
  font-weight: 750;
  letter-spacing:.18px;
  text-transform: uppercase;
}

/* Forms */
.form{display:flex;flex-direction:column;gap:10px}
.form-row{display:flex;flex-direction:column;gap:6px}
label{color:var(--muted);font-size:12px;font-weight:700}
.input{
  width:100%;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  color: var(--text);
  outline:none;
}
.input:focus{
  border-color: rgba(110,168,254,.32);
  box-shadow: 0 0 0 4px rgba(110,168,254,.14);
}
textarea.input{resize:vertical;font-family:var(--mono);font-size:12px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding: 10px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor:pointer;
  font-weight:700;
}
.btn:hover{background: rgba(255,255,255,.07)}
.btn.danger{
  border-color: rgba(251,113,133,.30);
  background: rgba(251,113,133,.12);
}
.btn.small{padding:7px 10px;border-radius:12px;font-size:12px}
.inline{display:inline}

/* Filters row */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}

/* Charts */
.spark{display:block}
.spark-bar{fill: rgba(110,168,254,.55)}
.barchart .bar{fill: rgba(110,168,254,.55)}
.barchart .bar-label{fill: rgba(255,255,255,.55); font-size:10px; font-family:var(--mono)}
.donut-bg{stroke: rgba(255,255,255,.12)}
.donut-seg{stroke-linecap: butt}
.seg-ok{stroke: rgba(54,211,153,.9)}
.seg-warn{stroke: rgba(251,191,36,.95)}
.seg-bad{stroke: rgba(251,113,133,.9)}
.seg-accent{stroke: rgba(110,168,254,.95)}
.seg-neutral{stroke: rgba(255,255,255,.25)}

/* Gauge */
.gauge{
  width: 160px;
  height: 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  overflow:hidden;
}
.gauge-fill{
  height:100%;
  width:0%;
  background: rgba(110,168,254,.65);
}
.gauge-fill.ok{background: rgba(54,211,153,.65)}
.gauge-fill.warn{background: rgba(251,191,36,.70)}
.gauge-fill.bad{background: rgba(251,113,133,.70)}

/* Logs */
.log{
  margin:0;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,.84);
  overflow:auto;
}

/* Recos */
.reco{margin:0;padding-left:18px}
.reco li{margin:10px 0}
.reco li .pill{margin-right:10px}
.reco-ok{color: rgba(54,211,153,.95)}
.reco-warn{color: rgba(251,191,36,.95)}
.reco-bad{color: rgba(251,113,133,.95)}

.grid-2{display:grid;grid-template-columns: 1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns: 1fr 1fr 1fr;gap:14px}
@media (max-width: 980px){
  .grid-2, .grid-3{grid-template-columns:1fr}
}

/* Footer */
.footer{margin-top:18px;padding:10px 0;color:var(--muted);font-size:12px}