/* Tema comună a dashboardurilor „Proiect Pilot" (agregat + detaliu).
 *
 * O SINGURĂ temă: luminoasă, „glassy", în tonul restului platformei. Tot ce e
 * comun celor două pagini stă aici (panouri, KPI-uri, carduri de grafic,
 * spinner, legendă, modal, tooltip); în șabloane rămâne doar ce ține strict de
 * așezarea acelei pagini.
 */

:root {
    --pp-harta-fundal: #e9f0f8;
    --pp-panou: rgba(255, 255, 255, 0.72);
    --pp-panou-tare: rgba(255, 255, 255, 0.93);
    --pp-blur: blur(22px) saturate(1.6);
    --pp-chenar-sticla: rgba(255, 255, 255, 0.85);
    --pp-chenar: rgba(15, 23, 42, 0.1);
    --pp-text-tare: #0f172a;
    --pp-text: #24324a;
    --pp-text-slab: rgba(15, 23, 42, 0.62);
    --pp-text-mut: rgba(15, 23, 42, 0.45);
    --pp-elem: rgba(15, 23, 42, 0.05);
    --pp-elem-hover: rgba(15, 23, 42, 0.1);
    --pp-accent: #2563eb;
    --pp-accent-fundal: rgba(37, 99, 235, 0.1);
    --pp-accent-chenar: rgba(37, 99, 235, 0.4);
    --pp-umbra: 0 20px 50px rgba(30, 64, 175, 0.16);
    --pp-tip-fundal: rgba(255, 255, 255, 0.96);

    /* Statusuri — paleta de stare a produsului, niciodată reutilizată ca serie. */
    --st-ok: #15803d;    --st-ok-bg: rgba(21, 128, 61, 0.1);
    --st-activ: #b45309; --st-activ-bg: rgba(180, 83, 9, 0.1);
    --st-plan: #0369a1;  --st-plan-bg: rgba(3, 105, 161, 0.1);
    --st-oprit: #b91c1c; --st-oprit-bg: rgba(185, 28, 28, 0.1);
    --st-alt: #475569;   --st-alt-bg: rgba(71, 85, 105, 0.1);
}

/* ── Panou de sticlă (bază pentru panoul stâng, carduri, legendă, modal) ──── */

.pp-sticla {
    background: var(--pp-panou);
    border: 1px solid var(--pp-chenar-sticla);
    border-radius: 14px;
    box-shadow: var(--pp-umbra);
    backdrop-filter: var(--pp-blur);
    -webkit-backdrop-filter: var(--pp-blur);
    color: var(--pp-text);
}

/* Banda de accent din capul panourilor principale. */
.pp-banda { position: relative; overflow: hidden; }
.pp-banda::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #22d3ee);
    opacity: 0.85;
}

/* ── Antet de panou ──────────────────────────────────────────────────────── */

.pp-head {
    position: relative;
    padding: 13px 16px 10px;
    border-bottom: 1px solid var(--pp-chenar);
}
.pp-head .legend-kicker { color: var(--pp-accent); }
.pp-head h2 { margin: 1px 0 0; font-size: 1rem; color: var(--pp-text-tare); }
.pp-head h2 i { color: var(--pp-accent); margin-right: 6px; }

.pp-head-actiune {
    position: absolute; top: 11px; right: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 10px;
    font: inherit; font-size: 0.72rem; font-weight: 700; line-height: 1;
    border-radius: 8px;
    background: var(--pp-elem); color: var(--pp-text-slab);
    border: 1px solid var(--pp-chenar);
    text-decoration: none; cursor: pointer;
}
.pp-head-actiune:hover { background: var(--pp-accent-fundal); color: var(--pp-accent); }

/* Firul Ariadnei (țară › județ › UAT) */
.pp-crumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    margin-top: 7px; font-size: 0.78rem;
}
.pp-crumb button {
    border: 0; background: none; padding: 0; cursor: pointer;
    color: var(--pp-accent); font-size: 0.78rem; font-weight: 600;
}
.pp-crumb button:disabled { color: var(--pp-text-slab); cursor: default; font-weight: 700; }
.pp-crumb .sep { color: var(--pp-text-mut); }

/* ── KPI-uri ─────────────────────────────────────────────────────────────── */

/* Șase indicatori pe trei coloane. Pe ecranele sub 1700px coloana din dreapta
   are 340px, deci un tile ajunge la ~95px utili: de asta etichetele sunt scurte
   („Valoare €", nu „Valoare contracte €") și spațierea e strânsă — un text rupt
   pe două rânduri înălța toată banda și mânca din spațiul graficelor. */
.pp-kpis {
    /* `minmax(0, 1fr)`, nu `1fr`: `1fr` nu coboară sub lățimea minimă a conținutului,
       deci o valoare lungă (nowrap) lățea coloana ei și le strivea pe celelalte. */
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
    padding: 9px 10px;
}
.pp-kpi {
    min-width: 0;
    padding: 6px 2px; text-align: center; border-radius: 9px;
    background: var(--pp-elem); border: 1px solid var(--pp-chenar);
}
.pp-kpi strong {
    display: block; font-size: 0.86rem; line-height: 1.25;
    color: var(--pp-text-tare);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pp-kpi span {
    display: block; margin-top: 1px; line-height: 1.2;
    /* Eticheta e cea citită prima, deci merită mărimea asta. Ca „ENERGIE
       PRIMARĂ" (cea mai lungă) să rămână pe UN rând și pe coloana îngustă,
       tile-ul are nevoie de ~104px utili — de aici lățimea de 360px din
       șablon. Nu urca peste 0.62rem fără să lărgești și coloana. */
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.015em;
    text-transform: uppercase; color: var(--pp-text-mut);
}
/* Al treilea rând, doar la indicatorii declarați pe contracte: numitorul lor.
   Nu e decor — un procent din două contracte citit fără „din 970" pare o
   concluzie despre tot portofoliul. */
.pp-kpi .din {
    display: block; margin-top: 2px; line-height: 1.2;
    font-size: 0.52rem; font-weight: 600; letter-spacing: 0;
    text-transform: none; color: var(--pp-text-slab);
}
/* Valoarea cu unitate: numărul mare pe primul rând, unitatea și procentul mai mici,
   în ACEEAȘI culoare, pe rândul de sub el (vezi `strong small`). */
.pp-kpi strong.cu-unitate { white-space: normal; }
.pp-kpi strong small {
    /* Pe rândul lui, sub număr: „−919k kgCO₂/m²·an" nu încape pe un rând în tile-ul
       de ~110px și se rupea în mijlocul unității. Procentul poate coborî pe încă un
       rând — spațiul nesecabil din JS îl ține lipit de săgeată. */
    display: block;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0;
}
/* Sensul îmbunătățirii: la consum și emisii, mai puțin = mai bine. */
.pp-kpi strong.bun { color: #15803d; }
.pp-kpi strong.rau { color: #b91c1c; }

/* ── Filtre ──────────────────────────────────────────────────────────────── */

/* Panoul de filtre e acum graficul „Distribuție pe taguri": antet, comutatorul
   de categorie, pastilele filtrelor active din alte categorii, apoi barele.
   Coloană flex, ca barele (`.pp-lista-bare`) să primească toată înălțimea rămasă
   — de asta atârnă „mai mare pe verticală". Regulile de creștere stau în șablon,
   lângă restul geometriei paginii. */
.pp-filtre { padding: 2px 14px 12px; }
.pp-filtre h3 {
    margin: 8px 0 4px; font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--pp-text-mut);
}
.pp-filtre .pp-seg { margin-bottom: 6px; flex-wrap: wrap; }
/* Antetul secțiunii de filtre: eticheta la stânga, resetarea lipită de marginea
   din dreapta a panoului — pe același rând, nu sub filtre. */
.pp-filtre-cap {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pp-filtre-cap h3 { margin: 8px 0 4px; }

/* Filtrele puse din ALTE categorii decât cea afișată: fără ele, un filtru pus și
   uitat ar rămâne invizibil, iar barele „lipsă" ar părea date lipsă. */
.pp-filtre-active { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.pp-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; border-radius: 20px; cursor: pointer;
    font: inherit; font-size: 0.68rem; font-weight: 700;
    background: var(--pp-accent-fundal); color: var(--pp-accent);
    border: 1px solid var(--pp-accent-chenar);
}
.pp-chip i { font-size: 0.6rem; opacity: 0.8; }
.pp-chip:hover { filter: brightness(1.05); }
.pp-reset {
    flex: 0 0 auto; margin: 8px 0 4px; padding: 3px 9px;
    font: inherit; font-size: 0.68rem; font-weight: 700;
    border-radius: 20px; border: 1px solid var(--pp-chenar);
    background: var(--pp-elem); color: var(--pp-text-slab); cursor: pointer;
    white-space: nowrap;
}
.pp-reset:hover { background: var(--pp-accent-fundal); color: var(--pp-accent); }

/* ── Carduri de grafic ───────────────────────────────────────────────────── */

.pp-card {
    display: flex; flex-direction: column; min-width: 0;
    padding: 12px 14px 10px; border-radius: 13px;
    background: var(--pp-panou); border: 1px solid var(--pp-chenar-sticla);
    box-shadow: var(--pp-umbra);
    backdrop-filter: var(--pp-blur);
    -webkit-backdrop-filter: var(--pp-blur);
}
.pp-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 8px;
}
.pp-card h3 { margin: 0; font-size: 0.8rem; color: var(--pp-text-tare); }
.pp-card h3 i { color: var(--pp-accent); margin-right: 6px; font-size: 0.7rem; }
.pp-card .pp-hint { margin: 6px 0 0; font-size: 0.66rem; color: var(--pp-text-mut); }

/* Comutator în capul cardului (metrică / categorie de tag) */
.pp-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--pp-elem); }
.pp-seg button {
    border: 0; background: none; cursor: pointer;
    padding: 3px 8px; font: inherit; font-size: 0.68rem; font-weight: 700;
    border-radius: 6px; color: var(--pp-text-slab);
}
.pp-seg button.activ { background: var(--pp-accent-fundal); color: var(--pp-accent); }
.pp-seg button:hover:not(.activ) { color: var(--pp-text-tare); }

/* ── Grafice ─────────────────────────────────────────────────────────────── */

/* `flex: 0 0 auto` — într-un card flex, SVG-ul s-ar strânge sub înălțimea lui
   naturală și graficul ar ieși turtit; pe ecrane late îl lăsăm să crească
   (regula din șablon). */
.pp-grafic { width: 100%; display: block; flex: 0 0 auto; }
.pp-grafic .bara { cursor: default; }
.pp-grafic .bara.clicabil { cursor: pointer; }
.pp-grafic .bara:hover { filter: brightness(1.12); }
.pp-grafic .bara.sel { stroke: var(--pp-accent); stroke-width: 1.5; }
.pp-grafic text { font-family: inherit; }
.pp-grafic .et-cat { font-size: 12px; fill: var(--pp-text-slab); }
.pp-grafic .et-val { font-size: 12px; font-weight: 700; fill: var(--pp-text-tare); }
/* Totalul din mijlocul inelului */
.pp-grafic .et-total { font-size: 24px; font-weight: 800; fill: var(--pp-text-tare); }
/* Eticheta scrisă direct în celula de treemap */
.pp-grafic .et-celula { font-size: 12px; font-weight: 700; }
.pp-grafic .axa { stroke: var(--pp-chenar); stroke-width: 1; }
.pp-gol { margin: 16px 0; font-size: 0.76rem; color: var(--pp-text-slab); text-align: center; }

/* Clasamente cu multe categorii: listă-bare HTML, derulabilă în card */
.pp-lista-bare { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.pp-lb {
    display: grid; grid-template-columns: minmax(90px, 42%) 1fr auto;
    align-items: center; gap: 8px; flex: 0 0 auto;
    padding: 3px 6px; border: 0; border-radius: 7px;
    background: none; text-align: right; cursor: default;
    font: inherit; color: var(--pp-text);
}
.pp-lb.clicabil { cursor: pointer; }
.pp-lb.clicabil:hover { background: var(--pp-elem-hover); }
.pp-lb.sel { background: var(--pp-accent-fundal); box-shadow: inset 0 0 0 1px var(--pp-accent-chenar); }
.pp-lb-et {
    font-size: 0.72rem; color: var(--pp-text-slab); text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pp-lb-cont { height: 13px; border-radius: 5px; background: var(--pp-elem); overflow: hidden; }
.pp-lb-bara { display: block; height: 100%; border-radius: 5px; }
.pp-lb-val {
    font-size: 0.72rem; font-weight: 700; color: var(--pp-text-tare);
    font-variant-numeric: tabular-nums;
}

/* Banda „fără informații" de sub barele fiecărui grafic: cât din selecție NU are
   valoarea măsurată acolo. Separată de axă printr-o linie, ca să se citească pe
   scara ei (proporție din total), nu pe scara barelor de deasupra. */
.pp-fara {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 8px;
    margin-top: auto; padding-top: 7px;
    border-top: 1px solid var(--pp-chenar);
    font-size: 0.68rem; color: var(--pp-text-mut);
}
.pp-fara .et { white-space: nowrap; }
.pp-fara .cont {
    height: 8px; border-radius: 4px; background: var(--pp-elem); overflow: hidden;
}
.pp-fara .bara { display: block; height: 100%; border-radius: 4px; background: #c3ccd8; }
.pp-fara .val { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Fără date deloc: n-are ce raporta, dar linia rămâne ca graficele să se alinieze. */
.pp-fara.goala { min-height: 1px; padding-top: 0; border-top: 0; }
.pp-fara.completa { display: block; }

/* Legendă de grafic (status, componente) — identitatea nu stă doar în culoare. */
.pp-legenda-grafic {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
    font-size: 0.7rem; color: var(--pp-text-slab);
}
.pp-legenda-grafic .item { display: inline-flex; align-items: center; gap: 5px; }
.pp-legenda-grafic .buleta { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

/* ── Coloana din stânga: panou + legendă + zoom, într-un singur teanc ─────
 *
 * Toate trei sunt fixate ca un TEANC, nu independent cu `bottom` fiecare:
 * altfel, pe ecrane joase, panoul creștea peste legendă. Aici panoul se
 * strânge (derulează pe dinăuntru), iar legenda și zoom-ul rămân lipite de
 * baza coloanei. Marginea de jos lasă loc rândului de atribuire al hărții.
 */
.pp-rail {
    position: absolute; top: 82px; left: 16px; bottom: 36px; z-index: 45;
    width: min(320px, calc(100vw - 32px));
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    pointer-events: none;   /* harta rămâne trasabilă printre panouri */
}
.pp-rail > * { pointer-events: auto; }
.pp-rail .pp-legenda { margin-top: auto; }

/* ── Legenda hărții ──────────────────────────────────────────────────────── */

.pp-legenda {
    align-self: flex-start; min-height: 0; overflow-y: auto;
    max-width: 100%; padding: 8px 11px; border-radius: 10px;
    background: var(--pp-panou-tare); border: 1px solid var(--pp-chenar-sticla);
    font-size: 0.72rem; color: var(--pp-text-slab);
    backdrop-filter: var(--pp-blur);
    -webkit-backdrop-filter: var(--pp-blur);
}
.pp-legenda[hidden] { display: none; }
.pp-legenda h4 {
    margin: 0 0 5px; font-size: 0.64rem; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase; color: var(--pp-text-mut);
}
.pp-legenda .rand { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.pp-legenda .buleta {
    width: 11px; height: 11px; border-radius: 3px;
    border: 1px solid var(--pp-chenar); flex: 0 0 auto;
}
.pp-legenda button.rand {
    width: 100%; border: 0; background: none; padding: 1px 2px;
    font: inherit; font-size: 0.72rem; color: inherit; cursor: pointer;
    border-radius: 5px; text-align: left;
}
.pp-legenda button.rand:hover { background: var(--pp-elem-hover); }
.pp-legenda button.rand.stins { opacity: 0.4; }
.pp-legenda .sub-legenda {
    margin: 1px 0 2px 17px; font-size: 0.64rem; line-height: 1.35;
    color: var(--pp-text-mut);
}

/* ── Spinner peste hartă, cât timp vin datele ────────────────────────────── */

.pp-spinner {
    position: absolute; inset: 0; z-index: 60;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px;
    background: rgba(233, 240, 248, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.pp-spinner[hidden] { display: none; }
.pp-spinner .rotor {
    width: 42px; height: 42px; border-radius: 50%;
    border: 3px solid rgba(37, 99, 235, 0.18);
    border-top-color: var(--pp-accent);
    animation: pp-rotire 0.8s linear infinite;
}
.pp-spinner p {
    margin: 0; padding: 5px 14px; border-radius: 20px;
    font-size: 0.78rem; font-weight: 600; color: var(--pp-text);
    background: var(--pp-panou-tare); border: 1px solid var(--pp-chenar-sticla);
}
@keyframes pp-rotire { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .pp-spinner .rotor { animation-duration: 2.4s; }
}

/* ── Eticheta de zoom + atribuire ────────────────────────────────────────── */

.pp-zoom {
    align-self: flex-start; flex: 0 0 auto;
    padding: 3px 10px; font-size: 0.68rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-radius: 14px; border: 1px solid var(--pp-chenar);
    background: var(--pp-panou-tare); color: var(--pp-text-slab);
    pointer-events: none;
}

/* Atribuirea stă în stânga jos pe ambele dashboarduri (dreapta e ocupată de
   coloana de grafice, respectiv de modalul clădirii). */
.maplibregl-ctrl-bottom-left { z-index: 44; }
.maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib { margin: 0 0 8px 8px; border-radius: 6px; }
.maplibregl-ctrl-attrib { background: var(--pp-panou-tare) !important; color: var(--pp-text-slab); }
.maplibregl-ctrl-attrib a { color: var(--pp-accent); }

/* ── Tooltip pe hartă ────────────────────────────────────────────────────── */

.maplibregl-popup.pp-tip .maplibregl-popup-content {
    background: var(--pp-tip-fundal); color: var(--pp-text);
    border: 1px solid var(--pp-chenar-sticla); border-radius: 8px;
    padding: 0; font-size: 0.82rem; box-shadow: var(--pp-umbra);
    overflow: hidden;
}
.maplibregl-popup.pp-tip .maplibregl-popup-tip { border-top-color: var(--pp-tip-fundal); }
.pp-tip strong { color: var(--pp-accent); }
.pp-tip .tip-plain { padding: 8px 12px; }
.pp-tip .tip-card { border-left: 3px solid #64748b; padding: 8px 12px 9px; }
.pp-tip .tip-meta { color: var(--pp-text-slab); font-size: 0.76rem; margin: 2px 0 0; }
.pp-tip .tip-sep { border-top: 1px dashed var(--pp-chenar); margin: 7px 0; }
.pp-tip .tip-foot { margin: 0; font-size: 0.78rem; font-weight: 600; color: var(--pp-text-tare); }

/* Tooltip pentru grafice (urmărește cursorul) */
.pp-tip-grafic {
    position: fixed; z-index: 70; pointer-events: none; display: none;
    padding: 6px 10px; border-radius: 8px; font-size: 0.72rem;
    background: var(--pp-tip-fundal); color: var(--pp-text);
    border: 1px solid var(--pp-chenar-sticla); box-shadow: var(--pp-umbra);
}
.pp-tip-grafic strong { color: var(--pp-text-tare); font-variant-numeric: tabular-nums; }
.pp-tip-grafic .tl { color: var(--pp-text-slab); }

/* ── Pastile de status ───────────────────────────────────────────────────── */

.pp-status {
    flex: 0 0 auto; font-size: 0.64rem; font-weight: 700;
    padding: 2px 8px; border-radius: 12px; white-space: nowrap;
}
.pp-status--ok    { background: var(--st-ok-bg);    color: var(--st-ok);    border: 1px solid var(--st-ok); }
.pp-status--activ { background: var(--st-activ-bg); color: var(--st-activ); border: 1px solid var(--st-activ); }
.pp-status--plan  { background: var(--st-plan-bg);  color: var(--st-plan);  border: 1px solid var(--st-plan); }
.pp-status--oprit { background: var(--st-oprit-bg); color: var(--st-oprit); border: 1px solid var(--st-oprit); }
.pp-status--alt   { background: var(--st-alt-bg);   color: var(--st-alt);   border: 1px solid var(--st-alt); }