:root{
--bg:#0b110d; --panel:#0f1712; --panel-2:#121b15; --line:#1e2a22; --line-2:#182219;
--tx:#e6efe8; --tx-2:#9fb3a6; --tx-3:#6b7f72;
--gold:#d9a441; --gold-d:#b8862c; --gold-s:#2a2313;
--ok:#6fbf8b; --warn:#d9a441; --bad:#d97757; --blue:#6aa9d9; --pur:#a98cd4;
--r:12px; --mono:"DejaVu Sans Mono","IBM Plex Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:14.5px/1.55 "Carlito","Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--tx);
 -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--tx-2)}.dim{color:var(--tx-3)}.small{font-size:13px}.tiny{font-size:11.5px}
.row{display:flex;gap:14px}.row.mid{align-items:center}.grow{flex:1}
.lab{font-size:10.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--tx-3)}

/* shell */
.app{display:flex;min-height:100vh}
aside{width:250px;flex:none;background:var(--panel);border-right:1px solid var(--line);
 display:flex;flex-direction:column;position:relative;overflow:hidden}
.brand{display:flex;align-items:center;gap:11px;padding:20px 20px 26px;font-size:20px;font-weight:700}
.brand i{width:30px;height:30px;border-radius:9px;background:linear-gradient(150deg,var(--gold),#eac576);
 display:grid;place-items:center;font-style:normal;color:#231a06;font-size:15px}
nav.side{display:flex;flex-direction:column;gap:1px;padding:0 12px 130px;position:relative;z-index:2}
nav.side a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:9px;color:var(--tx-2);
 font-size:14.5px;position:relative}
nav.side a span.ic{width:19px;text-align:center;opacity:.85}
nav.side a.on{background:var(--panel-2);color:var(--tx);font-weight:600}
nav.side a.on:before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;
 background:var(--gold);border-radius:0 3px 3px 0}
.trees{position:absolute;left:0;right:0;bottom:0;height:110px;opacity:.45;pointer-events:none;z-index:1}
.moon{position:absolute;left:196px;bottom:86px;z-index:1;width:22px;height:22px;border-radius:50%;
 background:var(--gold);opacity:.75}
main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:14px;padding:14px 26px;border-bottom:1px solid var(--line-2)}
.org{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:7px 12px;
 font-size:13.5px;display:flex;gap:9px;align-items:center}
.out{margin-left:auto;color:var(--tx-2);font-size:13.5px;display:flex;gap:7px;align-items:center}
.body{padding:26px;flex:1}

/* controale */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--gold);
 color:#231a06;border:0;padding:10px 17px;border-radius:9px;font:700 13.5px/1 inherit;cursor:pointer;white-space:nowrap}
.btn.o{background:transparent;color:var(--tx-2);border:1px solid var(--line)}
.seg{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:3px}
.seg span{padding:6px 14px;border-radius:7px;font-size:13.5px;color:var(--tx-2);cursor:pointer}
.seg span.on{background:#1b261f;color:var(--tx);font-weight:600}
.nav2{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);
 border-radius:9px;padding:6px 12px;font-size:13.5px}
select,input{font:inherit;color:var(--tx);background:var(--panel-2);border:1px solid var(--line);
 border-radius:9px;padding:10px 12px;width:100%}

/* panouri */
.pan{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:16px}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:13px}
.kpi{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:14px 15px;min-height:96px;
 display:flex;flex-direction:column}
.kpi .k{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--tx-3)}
.kpi .v{font-family:var(--mono);font-size:20px;font-weight:700;margin-top:7px;letter-spacing:-.5px}
.kpi .v.sm{font-size:17px}
.kpi .s{margin-top:auto;height:22px}
.bar{height:11px;border-radius:6px;background:var(--line-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px;background:var(--gold)}
.bar.red i{background:var(--bad)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lg{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:13.5px}
.lg .dot{width:9px;height:9px;border-radius:50%;flex:none}
.lg .v{margin-left:auto;font-family:var(--mono);font-size:13px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:10px;letter-spacing:1.1px;text-transform:uppercase;color:var(--tx-3);
 font-weight:700;padding:0 12px 10px;border-bottom:1px solid var(--line)}
td{padding:10px 12px;border-bottom:1px solid var(--line-2)}
tr:hover td{background:var(--panel-2)}
.pill{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;
 border:1px solid transparent}
.pill.ok{background:rgba(111,191,139,.12);color:var(--ok);border-color:rgba(111,191,139,.25)}
.pill.w{background:rgba(217,164,65,.12);color:var(--gold);border-color:rgba(217,164,65,.25)}
.pill.b{background:rgba(217,119,87,.12);color:var(--bad);border-color:rgba(217,119,87,.25)}
.pill.n{background:var(--line-2);color:var(--tx-3)}
h1{font-size:27px;font-weight:700;letter-spacing:-.6px}
h2{font-size:19px;font-weight:700;letter-spacing:-.3px}
.sub{color:var(--tx-2);font-size:13.5px;margin-top:3px}
.cardg{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.sc h3{font-size:15.5px;font-weight:600}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:12px}
.cal .dw{text-align:center;color:var(--tx-3);font-size:10.5px;font-weight:700;padding:4px 0}
.cal .dd{aspect-ratio:1/.62;border-radius:7px;display:grid;place-items:center;color:var(--tx-2);
 font-family:var(--mono);font-size:12px}
.cal .dd.hi{background:#1a2a1e;border:1px solid var(--gold);color:var(--tx);position:relative}
.cal .dd.hi:after{content:"";position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--gold)}
.cal .dd.mut{color:var(--tx-3);opacity:.4}

/* telefon */
@media (max-width:820px){
  .app{flex-direction:column}
  aside{width:auto;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .brand{padding:13px 16px 11px;font-size:18px}
  nav.side{flex-direction:row;gap:6px;padding:0 12px 12px;overflow-x:auto;
   -webkit-overflow-scrolling:touch}
  nav.side a{flex:none;white-space:nowrap;padding:8px 12px;font-size:13.5px}
  nav.side a.on:before{display:none}
  .trees,.moon{display:none}

  .top{padding:12px 16px;gap:10px}
  .body{padding:16px}

  /* Randurile flex cu doua panouri alaturate trec unul sub altul. */
  .row{flex-wrap:wrap}
  .body>.row.mid>.row.mid{margin-left:0 !important;width:100%}

  /* Grile: `minmax(0,1fr)`, nu `1fr` — cu `1fr` simplu minimul coloanei ramane
     cat cel mai lat continut si grila iese din ecran chiar si pe o coloana. */
  .split{grid-template-columns:minmax(0,1fr);gap:14px}
  .cardg{grid-template-columns:minmax(0,1fr);gap:12px}
  /* Casetele de indicatori raman pe doua coloane: cea mai lunga cifra reala e
     "82.971,98 RON" (13 caractere) si incape la marimile de mai jos. */
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  /* abonamente.html scrie `repeat(4,1fr)` in atributul style= al aceluiasi
     element — singurul mod de a-l anula e !important. */
  .kpis[style]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .kpi{padding:12px 13px;min-height:84px}
  .kpi .v{font-size:17px}
  .kpi .v.sm{font-size:14.5px}
  .kpi .s{height:0}

  h1{font-size:22px}
  h2{font-size:17px}
  .seg span{padding:6px 11px}
  /* Eticheta si valoarea din legende trec una sub alta cand nu incap pe un rand,
     in loc sa se rupa la jumatate de cuvant. */
  .lg{flex-wrap:wrap}

  .tiny{font-size:10.5px}
  #trend{overflow-x:auto}
  #trend>div{min-width:440px}

  /* Tabelul de randament pe campanii: 4 coloane, ~430px minim cu numele de
     campanie nerupt. Se deruleaza in cutia lui, cu fontul neatins. */
  #camp{overflow-x:auto}
  #camp table{min-width:440px}

  /* Casute de calendar putin mai inalte: la 7 coloane pe 375px ies ~40px late,
     iar raportul de pe desktop le-ar lasa sub 25px inaltime. */
  .cal .dd{aspect-ratio:1/.8}
}