/* ==========================================================================
 * CARETTA — limbajul vizual „tablou de bord premium" (g-*)
 * ==========================================================================
 * Panouri cu antet discret, cifre mari cu evoluția desenată în fundal, benzi
 * proporționale, hărți de căldură. Tabelul brut stă PLIAT sub „vezi cifrele".
 * Ăsta e standardul pentru ecranele de raport (cerință Daniel, 20.08.2026:
 * „premium, ceva actual, nu chart-uri de demult") — vezi
 * feedback_ecrane_premium_dashboard.
 *
 * FOLOSIRE: pune clasa `g-dash` pe containerul view-ului. Tokenii de mai jos se
 * rezolvă din design-system, deci dark mode iese singur, fără al doilea set de reguli.
 * Brand: navy #003349 + roșu #E0004D (reference_caretta_brand).
 * ========================================================================== */

.g-dash {
    --g-surface: var(--bg-surface, #fff);
    --g-line: var(--border-subtle, #e3e8ef);
    --g-ink: var(--text-strong, #0f172a);
    --g-soft: var(--text-soft, #6b7280);
    --g-navy: var(--caretta-navy, #003349);
    --g-red: var(--caretta-red, #E0004D);
    --g-gap: 12px;
    --g-radius: 8px;
}

/* ── Bara de sus ────────────────────────────────────────────────────────── */
.g-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 8px 12px; margin-bottom: var(--g-gap);
    border: 1px solid var(--g-line); border-radius: var(--g-radius);
    background: var(--g-surface);
}
.g-tb-left { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.g-tb-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.g-tb-live {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .74rem; color: var(--g-soft); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.g-tb-live i { font-size: .42rem; color: var(--signal-on-track, #10b981); }
.g-picker {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 9px; border: 1px solid var(--g-line); border-radius: 6px;
    background: var(--bg-subtle, #f6f8fb); color: var(--g-soft);
}
.g-picker i { font-size: .74rem; }
.g-picker select {
    border: 0; background: transparent; color: var(--text-default, #1f2937);
    font-size: .8rem; font-weight: 600; cursor: pointer; max-width: 230px;
}
.g-picker select:focus-visible { outline: 2px solid var(--g-red); outline-offset: 2px; }
.g-picker-an select { max-width: 80px; }
.g-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--g-line); background: var(--bg-subtle, #f6f8fb);
    color: var(--g-soft); font-size: .82rem;
}
.g-btn:hover { border-color: var(--g-red); color: var(--g-red); }

/* ── Panou ──────────────────────────────────────────────────────────────── */
.g-panel {
    display: flex; flex-direction: column; min-width: 0;
    border: 1px solid var(--g-line); border-radius: var(--g-radius);
    background: var(--g-surface);
}
.g-panel-head {
    display: flex; align-items: baseline; gap: 8px;
    padding: 9px 12px 8px; border-bottom: 1px solid var(--g-line);
}
.g-panel-head h3 {
    margin: 0; font-size: .8rem; font-weight: 700; color: var(--g-ink);
    letter-spacing: .01em; white-space: nowrap;
}
.g-panel-sub {
    font-size: .7rem; color: var(--g-soft); flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.g-badge {
    flex: 0 0 auto; padding: 1px 7px; border-radius: 999px;
    font-size: .62rem; font-weight: 700; letter-spacing: .03em;
    background: var(--caretta-navy-50, #e8eef0); color: var(--g-navy);
}
body.dark-mode .g-badge { color: #9ecbff; }
.g-badge-warn { background: color-mix(in srgb, var(--signal-watch, #f59e0b) 22%, transparent); color: #b7791f; }
body.dark-mode .g-badge-warn { color: #fbbf24; }
.g-panel-body { padding: 10px 12px 12px; flex: 1 1 auto; min-width: 0; }

/* Titlu de zona: panoul CEO are patru capitole, nu unul singur. */
.g-zona {
    display: flex; align-items: center; gap: 8px;
    margin: 18px 0 10px; font-size: .84rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em; color: var(--g-navy);
}
.g-zona::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--g-line); }
.g-zona i { color: var(--g-red); }
body.dark-mode .g-zona { color: #9ecbff; }
.g-muted { color: var(--text-faint, #9ca3af); }
/* Trimitere spre alt modul, scrisă în text: buton, ca navigarea să treacă prin
   `data-goto-view` (adică prin RBAC), nu printr-un <a href> care ocolește ruta. */
.g-link {
    border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
    color: var(--g-red); font-weight: 700; text-decoration: underline;
}

/* ── Grile ──────────────────────────────────────────────────────────────── */
.g-grid { display: grid; gap: var(--g-gap); margin-bottom: var(--g-gap); }
.g-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-grid-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
/* Numărul de coloane vine din HTML (--n = câte panouri sunt): fără feat-profit
   rămân 4 în loc de 6, iar rândul trebuie să se umple, nu să lase goluri.
   `auto-fit` nu e bun aici — lasă o pistă goală și un spațiu mort la dreapta. */
.g-stats {
    display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr));
    gap: var(--g-gap); margin-bottom: var(--g-gap);
}

/* ── Panoul „stat": cifra mare + evoluția desenată în fundal ─────────────── */
.g-stat {
    /* padding-bottom > înălțimea sparkline-ului (34px): evoluția rămâne DEDESUBTUL
       subsolului, nu peste el. */
    position: relative; overflow: hidden;
    padding: 10px 12px 40px; min-height: 118px;
}
.g-stat-head {
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
    font-size: .66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--g-soft);
}
.g-stat-unit { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .8; }
.g-stat-val {
    margin-top: 6px; font-size: 1.75rem; font-weight: 800; line-height: 1.05;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.g-stat-foot { margin-top: 3px; font-size: .7rem; color: var(--g-soft); position: relative; z-index: 1; }
.g-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100% !important; height: 34px !important; opacity: .85; }
.g-delta { font-weight: 700; }
.g-delta.sus { color: var(--signal-on-track, #10b981); }
.g-delta.jos { color: var(--signal-action, #dc2626); }
.g-delta-invers.sus { color: var(--signal-action, #dc2626); }
.g-delta-invers.jos { color: var(--signal-on-track, #10b981); }

/* Panoul-stat care duce în modulul-sursă: e un <button>, deci îi scoatem stilul. */
.g-stat-btn {
    width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.g-stat-btn:hover { border-color: var(--g-red); }
.g-stat-btn:focus-visible { outline: 2px solid var(--g-red); outline-offset: 2px; }

/* Semafor: bulina din dreptul titlului. */
.g-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint, #9ca3af); margin-left: auto; flex: 0 0 auto; }
.g-dot-ok { background: var(--signal-on-track, #10b981); }
.g-dot-warn { background: var(--signal-watch, #f59e0b); }
.g-dot-crit { background: var(--signal-action, #dc2626); }
.g-stat-sub { font-size: .78rem; font-weight: 600; color: var(--g-soft); margin-left: 7px; }

/* Bară de progres cu REPER: cât s-a făcut vs unde ar trebui să fim azi (pro-rata). */
.g-prog {
    position: relative; height: 5px; border-radius: 3px; margin-top: 7px;
    background: var(--bg-subtle, #f1f4f9); overflow: hidden;
}
body.dark-mode .g-prog { background: rgba(255, 255, 255, .08); }
.g-prog i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.g-prog u {
    position: absolute; top: -2px; bottom: -2px; width: 2px;
    background: var(--g-ink); opacity: .55; text-decoration: none;
}

/* ── Liste de context (abateri, riscuri, decizii) ───────────────────────── */
.g-ctx { list-style: none; margin: 0; padding: 0; }
.g-ctx li {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px;
    padding: 7px 0; border-bottom: 1px dashed var(--g-line);
}
.g-ctx li:last-child { border-bottom: none; }
.g-ctx-name {
    font-size: .78rem; font-weight: 700; color: var(--text-default, #1f2937);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.g-ctx-val { font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.g-ctx-val.neg { color: var(--signal-action, #dc2626); }
.g-ctx-note { grid-column: 1 / -1; font-size: .68rem; color: var(--g-soft); }
.g-ctx-bar {
    grid-column: 1 / -1; position: relative; height: 4px; border-radius: 2px;
    background: var(--bg-subtle, #f1f4f9); margin-top: 3px; overflow: hidden;
}
body.dark-mode .g-ctx-bar { background: rgba(255, 255, 255, .08); }
.g-ctx-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--g-red); opacity: .8; }
.g-chip {
    display: inline-block; padding: 0 6px; border-radius: 999px; font-size: .62rem;
    font-weight: 700; background: var(--bg-subtle, #f1f4f9); color: var(--g-soft);
}
body.dark-mode .g-chip { background: rgba(255, 255, 255, .08); }
.g-tb-meta { font-size: .7rem; color: var(--g-soft); white-space: nowrap; }

/* ── Banda „Ce spun cifrele" (svm-*) ──────────────────────────── */
.svm-slot:empty { display: none; }
.svm { margin-bottom: var(--g-gap); }
.svm-b-critic {
    background: color-mix(in srgb, var(--signal-action, #dc2626) 18%, transparent);
    color: var(--signal-action, #dc2626);
}
/* `body.dark-mode .g-badge` vine mai jos in fisier si ar face insigna rosie
   albastra pe dark — o re-tintim cu aceeasi greutate de selector. */
body.dark-mode .g-badge.svm-b-critic { color: #fca5a5; }
.svm-lista { display: flex; flex-direction: column; gap: 6px; }

/* Rezumatul in cuvinte + butoanele care il cer */
.svm-actiuni { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.svm-btn {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 7px 12px; border-radius: 7px; font: inherit; font-size: .76rem; font-weight: 700;
    border: 1px solid var(--g-line); background: var(--bg-subtle, #f6f8fb); color: var(--g-soft);
}
body.dark-mode .svm-btn { background: rgba(255, 255, 255, .05); }
.svm-btn:hover { border-color: var(--g-red); color: var(--g-red); }
.svm-btn-primar { background: var(--g-navy); border-color: var(--g-navy); color: #fff; }
.svm-btn-primar:hover { background: var(--g-red); border-color: var(--g-red); color: #fff; }
.svm-rez {
    margin-bottom: 12px; padding: 12px 14px; border-radius: 8px;
    border: 1px solid var(--g-line); border-left: 3px solid var(--g-red);
    background: var(--bg-subtle, #f7f9fc);
}
body.dark-mode .svm-rez { background: rgba(255, 255, 255, .04); }
.svm-rez-load { display: flex; align-items: center; gap: 9px; font-size: .8rem; color: var(--g-soft); }
.svm-rez-text p { margin: 0 0 6px; font-size: .86rem; line-height: 1.55; color: var(--text-default, #1f2937); }
.svm-rez-text p:first-child { font-weight: 700; color: var(--g-ink); }
.svm-rez-text p:last-child { margin-bottom: 0; }
.svm-rez-jos {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--g-line);
}
.svm-rez-nota { flex: 1 1 auto; font-size: .68rem; color: var(--text-faint, #9ca3af); }
.svm-item {
    display: flex; align-items: flex-start; gap: 10px; width: 100%;
    padding: 9px 11px; border-radius: 7px; text-align: left; font: inherit;
    border: 1px solid var(--g-line); background: var(--bg-subtle, #f7f9fc);
    color: var(--text-default, #1f2937); cursor: pointer;
    border-left-width: 3px;
}
body.dark-mode .svm-item { background: rgba(255, 255, 255, .03); }
div.svm-item { cursor: default; }
.svm-item:hover { border-color: var(--g-red); }
.svm-item > i:first-child { margin-top: 2px; font-size: .82rem; flex: 0 0 auto; }
.svm-critic { border-left-color: var(--signal-action, #dc2626); }
.svm-critic > i:first-child { color: var(--signal-action, #dc2626); }
.svm-atentie { border-left-color: var(--signal-watch, #f59e0b); }
.svm-atentie > i:first-child { color: var(--signal-watch, #f59e0b); }
.svm-bun { border-left-color: var(--signal-on-track, #10b981); }
.svm-bun > i:first-child { color: var(--signal-on-track, #10b981); }
.svm-info { border-left-color: var(--g-navy); }
.svm-info > i:first-child { color: var(--g-soft); }
.svm-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.svm-text b { font-size: .82rem; font-weight: 700; }
.svm-detaliu { font-size: .76rem; color: var(--g-soft); line-height: 1.45; }
.svm-actiune { font-size: .72rem; color: var(--g-red); font-weight: 600; }
.svm-go { align-self: center; font-size: .7rem; color: var(--text-faint, #9ca3af); flex: 0 0 auto; }
.svm-mai {
    margin-top: 8px; border: 0; background: none; padding: 0; cursor: pointer;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--g-soft);
}
.svm-mai:hover { color: var(--g-red); }
.svm-gol { margin: 0; font-size: .82rem; color: var(--g-soft); display: flex; align-items: center; gap: 8px; }
.svm-gol i { color: var(--signal-on-track, #10b981); }

/* ── Grafice ────────────────────────────────────────────────────────────── */
.g-chart { position: relative; height: 230px; }
.g-chart-lg { height: 300px; }
.g-chart-donut { height: 170px; }
.g-donut { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 1.1fr); gap: 12px; align-items: center; }
.g-mini { padding: 6px 0; border-bottom: 1px dashed var(--g-line); }
.g-mini span { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--g-soft); }
.g-mini b { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.g-mini em { font-style: normal; font-size: .68rem; color: var(--g-soft); margin-left: 6px; }
.g-list { list-style: none; margin: 8px 0 0; padding: 0; }
.g-list li { display: flex; align-items: baseline; gap: 6px; font-size: .74rem; padding: 2px 0; }
.g-list li span { flex: 1 1 auto; color: var(--g-soft); }
.g-list li b { font-variant-numeric: tabular-nums; }
.g-list li em { font-style: normal; color: var(--g-red); font-weight: 700; font-size: .68rem; }

/* ── Bandă proporțională (bar gauge) ────────────────────────────────────── */
.g-gauge { display: flex; flex-direction: column; gap: 5px; }
.g-gauge-row { display: grid; grid-template-columns: minmax(90px, 1.35fr) minmax(0, 2.6fr) 46px; gap: 8px; align-items: center; }
.g-gauge-row:has(.g-gauge-marja) { grid-template-columns: minmax(90px, 1.35fr) minmax(0, 2.6fr) 46px 46px; }
.g-gauge-name {
    font-size: .74rem; color: var(--text-default, #1f2937);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.g-gauge-track {
    position: relative; height: 20px; border-radius: 3px;
    background: var(--bg-subtle, #f1f4f9); overflow: hidden;
    display: flex; align-items: center;
}
body.dark-mode .g-gauge-track { background: rgba(255, 255, 255, .06); }
.g-gauge-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; opacity: .85; }
.g-gauge-track b {
    position: relative; z-index: 1; padding-left: 7px;
    font-size: .7rem; font-weight: 700; color: var(--g-ink);
    font-variant-numeric: tabular-nums; text-shadow: 0 0 3px var(--g-surface);
}
.g-gauge-pct, .g-gauge-marja {
    font-size: .7rem; text-align: right; color: var(--g-soft);
    font-variant-numeric: tabular-nums;
}
.g-gauge-marja { color: var(--signal-watch, #b7791f); font-weight: 700; }

/* ── Hartă de căldură ───────────────────────────────────────────────────── */
.g-heat-wrap { overflow-x: auto; }
.g-heat { display: flex; flex-direction: column; gap: 3px; min-width: 420px; }
.g-heat-row {
    display: grid; gap: 3px; align-items: stretch;
    grid-template-columns: minmax(84px, 1.2fr) repeat(var(--luni), minmax(30px, 1fr)) 52px;
}
.g-heat-name {
    font-size: .7rem; color: var(--text-default, #1f2937); align-self: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.g-heat-cell {
    display: flex; align-items: center; justify-content: center;
    height: 26px; border-radius: 3px; font-size: .64rem; font-weight: 600;
    color: var(--text-default, #1f2937); font-variant-numeric: tabular-nums;
}
.g-heat-cell.g-heat-strong { color: #fff; }
.g-heat-total {
    display: flex; align-items: center; justify-content: flex-end;
    font-size: .68rem; font-weight: 700; color: var(--g-ink); font-variant-numeric: tabular-nums;
}
.g-heat-head .g-heat-cell, .g-heat-head .g-heat-total {
    height: auto; background: transparent !important; color: var(--g-soft);
    font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
}

/* ── Cifrele goale, pliate ──────────────────────────────────────────────── */
.g-details { margin-top: 10px; border-top: 1px dashed var(--g-line); padding-top: 6px; }
.g-details > summary {
    cursor: pointer; list-style: none; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--g-soft);
}
.g-details > summary::-webkit-details-marker { display: none; }
.g-details > summary::before { content: '\f0d7'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-right: 6px; }
.g-details[open] > summary::before { content: '\f0d8'; }
.g-details > summary:hover { color: var(--g-red); }
.g-tw { overflow: auto; max-height: 340px; margin-top: 8px; }
table.g-t { width: 100%; border-collapse: collapse; font-size: .74rem; }
table.g-t th, table.g-t td { padding: 5px 8px; border-bottom: 1px solid var(--g-line); white-space: nowrap; }
table.g-t th {
    position: sticky; top: 0; z-index: 1; text-align: right;
    background: var(--bg-subtle, #f1f4f9); color: var(--g-soft);
    font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
table.g-t th:first-child, table.g-t td:first-child { text-align: left; white-space: normal; min-width: 130px; }
table.g-t td { text-align: right; color: var(--text-default, #1f2937); font-variant-numeric: tabular-nums; }
table.g-t tbody tr:hover td { background: var(--bg-surface-hover, #f4f8fc); }

.g-tag {
    display: inline-block; padding: 0 6px; border-radius: 999px;
    font-size: .6rem; font-weight: 700; text-transform: uppercase;
    background: var(--caretta-red-soft, #fde6ee); color: var(--g-red);
}
.g-note { margin: 0 0 8px; font-size: .74rem; color: var(--g-soft); }
.g-note b { color: var(--g-ink); }
.g-empty { padding: 26px; text-align: center; color: var(--g-soft); font-size: .84rem; margin: 0; }
.g-loading { opacity: .55; transition: opacity .15s; }

/* ── Ecrane mai mici ────────────────────────────────────────────────────── */
@media (max-width: 1400px) { .g-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1200px) {
    /* `1fr` singur = minmax(AUTO, 1fr): un tabel lat ar umfla coloana peste ecran.
       minmax(0, 1fr) lasă conținutul să scroleze în cutia lui. */
    .g-grid-2, .g-grid-2-1, .g-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .g-chart-lg { height: 260px; }
}
@media (max-width: 760px) {
    .g-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Sumele neprescurtate („4.485.961 RON") nu încap la 28px într-o coloană de
       ~150px — micșorăm cifra și trecem a doua valoare pe rândul ei. */
    .g-stat-val { font-size: 1.2rem; }
    .g-stat-sub { display: block; margin-left: 0; margin-top: 2px; }
    .g-donut { grid-template-columns: minmax(0, 1fr); }
    /* Pe telefon selectorul de perioadă trece pe rând propriu; altfel grupul din
       dreapta iese din ecran și scoate pagina pe orizontală. */
    .g-toolbar { align-items: stretch; }
    .g-tb-left, .g-tb-right { flex: 1 1 100%; min-width: 0; }
    .g-tb-right { flex-wrap: wrap; }
    .g-picker { flex: 1 1 130px; min-width: 0; }
    .g-picker-an { flex: 0 0 auto; }
    .g-picker select { max-width: none; width: 100%; min-width: 0; }
    .g-gauge-row { grid-template-columns: minmax(72px, 1fr) minmax(0, 1.8fr) 40px; }
    .g-gauge-row:has(.g-gauge-marja) { grid-template-columns: minmax(72px, 1fr) minmax(0, 1.8fr) 40px 40px; }
}
@media (max-width: 360px) { .g-stats { grid-template-columns: minmax(0, 1fr); } }