/* =========================================================
   HĂRȚI TEMATICE — SHARED.CSS / MASTER STYLE SYSTEM
   =========================================================
   Scopul acestui fișier
   ---------------------------------------------------------
   Acest fișier este gândit ca un „single source of truth”
   pentru stilurile comune ale aplicației:
   - layout general
   - topbar și navigație
   - carduri, tabele, formulare și butoane
   - paginile Prezentare / Analiză / Tabel / Evoluție / Despre
   - hook-uri de stil pentru elemente populate din JavaScript

   Ce am urmărit în această versiune
   ---------------------------------------------------------
   1. Acoperire cât mai bună a elementelor existente în site.
   2. Parametrizare extinsă prin CSS custom properties.
   3. Comentarii suficient de detaliate încât fișierul să poată
      fi folosit și ca documentație tehnică.
   4. Separare logică între:
      - TOKENS / variabile globale
      - reguli de bază
      - layout comun
      - componente reutilizabile
      - module pe pagini
      - control layer (override rapid)
      - responsive

   Cum lucrezi profesional cu acest fișier
   ---------------------------------------------------------
   Regula recomandată este:
   1) modifici întâi variabilele din :root
   2) apoi variabilele din CONTROL LAYER
   3) abia apoi selectorii individuali

   Astfel păstrezi consistența vizuală și eviți override-uri
   inutile sau greu de urmărit.

   Convenție de organizare
   ---------------------------------------------------------
   - Variabile globale = valori de bază, reutilizabile peste tot
   - Variabile pe module = reglaje locale pentru o pagină/zonă
   - Selectorii pe clase = stil vizual general
   - Selectorii pe ID = hook-uri pentru componente generate sau
     controlate din JavaScript

   Observație importantă
   ---------------------------------------------------------
   Acest fișier păstrează compatibilitatea cu HTML-ul și JS-ul
   existente. Numele variabilelor deja folosite în scripturi au
   fost păstrate, iar noile variabile au fost adăugate ca strat
   suplimentar de control, nu ca ruptură de structură.
========================================================= */


/* =========================================================
   1. THEME TOKENS
========================================================= */

:root {
  color-scheme: light;

  /* Culori principale */
  --bg: #eef3f8;
  --panel: #ffffff;
  --soft: #f7f9fc;
  --line: #d7e1ec;
  --line-strong: #bfd0e0;
  --text: #132033;
  --muted: #607289;

  --accent: #135dba;
  --accent-2: #1f7ae0;
  --accent-soft: rgba(19, 93, 186, .12);

  /* Statusuri rețea */
  --status-operational: #198754;
  --status-construction: #d9822b;
  --status-licitatie: #7a5af5;
  --status-design: #135dba;

  /*
    Culoare neutră pentru elemente care trebuie să reflecte
    selecția "Toate statusurile" fără să sugereze un status anume.
    Este folosită acum în cardul "Top loturi".
  */
  --top-lot-all-statuses-color: #5f6f86;

  --status-operational-soft: rgba(25, 135, 84, .12);
  --status-construction-soft: rgba(217, 130, 43, .14);
  --status-licitatie-soft: rgba(122, 90, 245, .14);
  --status-design-soft: rgba(19, 93, 186, .14);

  /* Umbre / raze */
  --shadow-sm: 0 6px 18px rgba(15, 34, 58, .08);
  --shadow-md: 0 10px 28px rgba(15, 34, 58, .08);
  --shadow-lg: 0 18px 40px rgba(15, 34, 58, .12);

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Font */
  --font-ui: Inter, "Segoe UI", Arial, sans-serif;
  --fz-11: 11px;
  --fz-12: 12px;
  --fz-13: 13px;
  --fz-14: 14px;
  --fz-15: 15px;
  --fz-16: 16px;
  --fz-18: 18px;
  --fz-20: 20px;
  --fz-24: 24px;
  --fz-28: 28px;
  --fz-34: 34px;
  --fz-48: 48px;

  /* Spațiere */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;

  /* Container */
  --container-max: 1680px;
  --container-pad-x: 28px;
  --container-pad-y-top: 14px;
  --container-pad-y-bottom: 16px;
  --topbar-pad-y: 14px;

  /* Scale globale
     1    = layout normal
     0.95 = mai compact
     1.05 = mai aerisit */
  --card-height-scale: 1;
  --chart-height-scale: 1;
  --map-height-scale: 1;
  --spacing-scale: 1;
  --font-scale: 1;

  /* Carduri generale */
  --card-border-radius-global: 18px;
  --card-padding-y-global: 14px;
  --card-padding-x-global: 14px;

  /* -------------------------------------------------------
     STYLE API / reglaje rapide cu impact mare
     -------------------------------------------------------
     Aceste variabile sunt gândite pentru reglaje frecvente:
     fonturi, densitate, poziționări, dimensiuni de componente.
  */

  /* Tipografie globală */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;

  /* Înălțimi de linie */
  --line-height-tight: 1.2;
  --line-height-ui: 1.4;
  --line-height-copy: 1.6;

  /* Topbar */
  --topbar-logo-size: 42px;
  --topbar-logo-radius: 14px;
  --topbar-brand-title-size: calc(var(--fz-20) * var(--font-scale));
  --topbar-brand-subtitle-size: calc(var(--fz-13) * var(--font-scale));
  --topbar-pill-font-size: calc(var(--fz-14) * var(--font-scale));
  --topbar-pill-padding-y: 9px;
  --topbar-pill-padding-x: 15px;
  --topbar-theme-btn-min-height: 40px;

  /* Carduri generale */
  --card-title-font-size: calc(var(--fz-18) * var(--font-scale));
  --card-subtitle-font-size: calc(var(--fz-13) * var(--font-scale));
  --card-body-font-size: calc(var(--fz-14) * var(--font-scale));
  --card-body-line-height: var(--line-height-copy);
  --card-gap-internal: calc(var(--space-14) * var(--spacing-scale));

  /* Formulare / filtre */
  --label-font-size: calc(var(--fz-12) * var(--font-scale));
  --label-font-weight: var(--font-weight-semibold);
  --control-font-size: calc(var(--fz-14) * var(--font-scale));
  --control-min-height: 42px;
  --control-padding-x: 12px;
  --control-radius: 12px;

  /* Butoane */
  --button-font-size: calc(var(--fz-14) * var(--font-scale));
  --button-font-weight: var(--font-weight-semibold);
  --button-min-height: 40px;
  --button-padding-y: 9px;
  --button-padding-x: 15px;

  /* Tabele */
  --table-font-size: calc(var(--fz-13) * var(--font-scale));
  --table-header-font-size: calc(var(--fz-12) * var(--font-scale));
  --table-cell-padding-y: 12px;
  --table-cell-padding-x: 12px;
  --table-note-font-size: calc(var(--fz-12) * var(--font-scale));

  /* Pagina Analiză */
  --analysis-context-title-font-size: calc(var(--fz-18) * var(--font-scale));
  --analysis-context-label-font-size: calc(var(--fz-11) * var(--font-scale));
  --analysis-chip-font-size: calc(var(--fz-12) * var(--font-scale));
  --analysis-chip-gap: calc(var(--space-10) * var(--spacing-scale));
  --analysis-list-font-size: calc(var(--fz-13) * var(--font-scale));
  --analysis-list-gap: calc(var(--space-10) * var(--spacing-scale));
  --analysis-meta-gap: calc(var(--space-10) * var(--spacing-scale));

  /* Pagina Evoluție */
  --gallery-status-font-size: calc(var(--fz-14) * var(--font-scale));
  --gallery-year-display-font-size: clamp(36px, 5vw, 56px);
  --gallery-year-popup-font-size: calc(var(--fz-12) * var(--font-scale));
  --gallery-controls-gap: calc(var(--space-8) * var(--spacing-scale));
  --gallery-controls-padding-y: 6px;
  --gallery-controls-padding-x: 8px;
  --gallery-control-button-size: 38px;

  /* Pagina Despre */
  --about-eyebrow-font-size: calc(var(--fz-11) * var(--font-scale));
  --about-title-font-size: clamp(28px, 4vw, 46px);
  --about-lead-font-size: calc(var(--fz-16) * var(--font-scale));
  --about-copy-font-size: calc(var(--fz-14) * var(--font-scale));
  --about-list-gap: calc(var(--space-10) * var(--spacing-scale));

  /* Media / iframe hartă */
  --map-frame-min-height: 72vh;
  --map-frame-radius: 20px;
}

body.theme-dark {
  color-scheme: dark;

  --bg: #0b1320;
  --panel: #121d2b;
  --soft: #172433;
  --line: #22344a;
  --line-strong: #2d4762;
  --text: #edf4fb;
  --muted: #afc0d2;

  --accent: #7cb7ff;
  --accent-2: #529cff;
  --accent-soft: rgba(124, 183, 255, .14);

  --status-operational-soft: rgba(25, 135, 84, .18);
  --status-construction-soft: rgba(217, 130, 43, .20);
  --status-licitatie-soft: rgba(122, 90, 245, .20);
  --status-design-soft: rgba(124, 183, 255, .18);

  --shadow-sm: 0 8px 18px rgba(0, 0, 0, .18);
  --shadow-md: 0 16px 36px rgba(0, 0, 0, .32);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, .38);
}


/* =========================================================
   2. BASE / RESET
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #eef3f8;
}

html:has(body.theme-dark) {
  background: #0b1320;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

button,
select,
input {
  font: inherit;
}

button {
  cursor: pointer;
}


/* =========================================================
   3. LAYOUT SYSTEM
========================================================= */

.main,
.page-shell {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding:
    var(--container-pad-y-top)
    var(--container-pad-x)
    var(--container-pad-y-bottom);
  background: transparent;
}

.stack {
  display: grid;
  gap: calc(var(--grid-gap-main) * var(--spacing-scale));
  background: transparent;
}

.analysis-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: calc(var(--grid-gap-analysis) * var(--spacing-scale));
}

.analysis-uniform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--grid-gap-analysis) * var(--spacing-scale));
}

.three-col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--space-16) * var(--spacing-scale));
}

.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: calc(var(--space-22) * var(--spacing-scale));
}


/* =========================================================
   4. COMPONENTE GENERALE
========================================================= */

/* ---------- Topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid rgba(191, 208, 224, .9);
  box-shadow: 0 6px 22px rgba(15, 34, 58, .05);
}

body.theme-dark .topbar {
  background: rgba(11, 19, 32, .84);
  border-bottom-color: rgba(45, 71, 98, .92);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}

.topbar-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: calc(var(--topbar-pad-y) + 2px) var(--container-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-18);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-14);
}

.logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0)),
    linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 24px rgba(19, 93, 186, .22);
}

.brand h1 {
  margin: 0;
  font-size: calc(var(--fz-20) * var(--font-scale));
  letter-spacing: -.02em;
}

.brand p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: calc(var(--fz-13) * var(--font-scale));
  letter-spacing: .02em;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.nav-pills {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.nav-pill,
.theme-btn,
.ghost-btn,
.controls .btn {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--panel), var(--soft));
  color: var(--text);
  padding: 9px 15px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.nav-pill.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(19, 93, 186, .18);
}

.nav-pill:hover,
.theme-btn:hover,
.ghost-btn:hover,
.controls .btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--line-strong);
}


/* ---------- Buton compact light / dark ---------- */
.theme-icon-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
}

.theme-icon-btn .theme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform: translateY(-1px);
}

.theme-icon-btn[data-theme="light"] .theme-icon {
  font-size: 18px;
}

.theme-icon-btn[data-theme="dark"] .theme-icon {
  font-size: 17px;
}

/* ---------- Carduri ---------- */

.card {
  width: 100%;
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--card-border-radius-global);
  box-shadow: 0 8px 22px rgba(15, 34, 58, .07);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.card-pad {
  padding: var(--card-padding-y-global) var(--card-padding-x-global);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-12);
  min-height: 52px;
  margin-bottom: 6px;
}

.section-head > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.section-head h2,
.section-head h3 {
  margin: 0 0 2px 0;
  line-height: 1.18;
  font-size: calc(var(--fz-16) * var(--font-scale));
  min-height: 20px;
}

.section-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.30;
  font-size: calc(var(--fz-11) * var(--font-scale));
}

.section-head .ghost-btn,
.section-head .btn {
  align-self: flex-start;
}

/* ---------- Conținut comun ---------- */

.muted {
  color: var(--muted);
}

.footer-note {
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: calc(var(--fz-12) * var(--font-scale));
}

.list-grid,
.node-list,
.profile-meta,
.route-meta {
  display: grid;
  gap: var(--space-10);
}

.list-item,
.route-meta div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--soft);
}

.swatch {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 999px;
  margin-right: 10px;
  vertical-align: middle;
}

/* ---------- Form / filtre ---------- */

.filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.field label {
  display: block;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: calc(var(--fz-11) * var(--font-scale));
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.field select {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--text);
}

/* ---------- Tabele ---------- */

.table-wrap {
  overflow: auto;
  background: transparent;
}

.data-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.data-table th {
  color: var(--muted);
  font-size: calc(var(--fz-12) * var(--font-scale));
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---------- Pills ---------- */

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  font-size: calc(var(--fz-12) * var(--font-scale));
  font-weight: 700;
}

.status-utilizare {
  background: var(--status-operational-soft);
  color: var(--status-operational);
}

.status-constructie {
  background: var(--status-construction-soft);
  color: var(--status-construction);
}

.status-proiectare {
  background: var(--status-design-soft);
  color: var(--status-design);
}

.status-licitatie {
  background: var(--status-licitatie-soft);
  color: var(--status-licitatie);
}

/* ---------- Hărți / media ---------- */

.map-frame {
  width: 100%;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #dce6ef;
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* =========================================================
   5. PAGE MODULE — PREZENTARE
========================================================= */

/* Rândul principal: stânga = filtre + sinteză, dreapta = hartă */
.presentation-dashboard-hero {
  display: grid;
  grid-template-columns: var(--row-2-col-left) var(--row-2-col-right);
  gap: calc(var(--grid-gap-row-2) * var(--spacing-scale));
  align-items: stretch;
}

.presentation-left-stack {
  display: grid;
  gap: var(--presentation-left-stack-gap);
  align-content: start;
  min-width: 0;
}

.index-filter-vertical {
  min-height: var(--index-filter-card-min-h);
  max-height: var(--index-filter-card-max-h);
  overflow: hidden;
}

.index-filter-vertical .section-head {
  min-height: auto;
  margin-bottom: 8px;
}

.index-filter-vertical .filter-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.index-filter-vertical .field select {
  min-height: var(--index-filter-select-min-h);
}

/* Sinteză */
.presentation-summary-card,
.index-summary-card {
  min-width: 0;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.summary-box {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--soft);
}

.summary-box strong {
  display: block;
  margin: 6px 0 4px;
  font-size: calc(var(--fz-16) * var(--font-scale));
  line-height: 1.2;
}

#filteredSummary.summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#filteredSummary .summary-box {
  min-height: calc(var(--row-2-summary-box-min-h) * var(--card-height-scale));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
}

#filteredSummary .summary-box strong {
  font-size: calc(var(--row-2-summary-value-font-size) * var(--font-scale));
}

#filteredSummary .summary-box .muted {
  font-size: calc(var(--row-2-summary-muted-font-size) * var(--font-scale));
  line-height: 1.3;
}

#filteredSummary .summary-box.summary-operational {
  background: linear-gradient(180deg, var(--panel), var(--status-operational-soft));
}

#filteredSummary .summary-box.summary-construction {
  background: linear-gradient(180deg, var(--panel), var(--status-construction-soft));
}

#filteredSummary .summary-box.summary-licitatie {
  background: linear-gradient(180deg, var(--panel), var(--status-licitatie-soft));
}

#filteredSummary .summary-box.summary-design {
  background: linear-gradient(180deg, var(--panel), var(--status-design-soft));
}

.analysis-summary-card #filteredSummary .summary-box strong,
.analysis-summary-card .summary-meta-box strong {
  font-size: 20px;
  line-height: 1.2;
}

.analysis-summary-card #filteredSummary .summary-box .muted,
.analysis-summary-card .summary-meta-box .muted {
  font-size: 12px;
  line-height: 1.35;
}

.analysis-summary-card .section-head h2,
.analysis-summary-card .section-head h3 {
  font-size: 16px;
}

/*
  Indicatorii secundari din cardul de sinteză (pagina Analiză).
  Sunt separați vizual de box-urile principale pe status pentru a păstra
  ierarhia informațională: sus compoziția pe status, jos contextul structural.
*/
.summary-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.summary-meta-box {
  min-height: calc(var(--row-2-summary-box-min-h) * var(--card-height-scale));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--soft));
}

.summary-meta-box strong {
  display: block;
  margin: 6px 0 4px;
  font-size: calc(var(--row-2-summary-value-font-size) * var(--font-scale));
  line-height: 1.2;
}

.summary-meta-box .muted {
  font-size: calc(var(--row-2-summary-muted-font-size) * var(--font-scale));
  line-height: 1.3;
}

/* În Prezentare ascundem cele 2 itemuri suplimentare */
.index-summary-card #filteredSummary .summary-box.is-hidden-on-presentation {
  display: none;
}



/* Rândul 3 */
.presentation-triple-grid {
  display: grid;
  grid-template-columns: var(--row-3-col-1) var(--row-3-col-2) var(--row-3-col-3);
  gap: calc(var(--grid-gap-row-3) * var(--spacing-scale));
  align-items: stretch;
}

.uniform-card,
.chart-card,
.route-progress-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.chart-card .section-head,
.route-progress-card .section-head {
  margin-bottom: 2px;
}

.chart-card svg,
.route-progress-card svg {
  width: 100%;
  height: 100%;
  min-height: calc(var(--row-3-chart-min-h) * var(--chart-height-scale));
  overflow: visible;
}

.presentation-triple-grid .uniform-card {
  min-height: calc(var(--row-3-card-min-h) * var(--card-height-scale));
}

.presentation-triple-grid .chart-card:has(#statusChart) svg {
  min-height: calc((var(--row-3-chart-min-h) + 40px) * var(--chart-height-scale));
}


/* =========================================================
   6. PAGE MODULE — ANALIZĂ
========================================================= */

.analysis-page-filter-card .filter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.analysis-uniform-grid .uniform-card,
.analysis-uniform-grid .chart-card,
.analysis-uniform-grid .route-progress-card {
  min-height: calc(var(--analysis-card-min-h) * var(--card-height-scale));
  display: flex;
  flex-direction: column;
}

.analysis-uniform-grid .chart-card svg,
.analysis-uniform-grid .route-progress-card svg {
  min-height: calc(var(--analysis-chart-min-h) * var(--chart-height-scale));
}

.analysis-uniform-grid .chart-card:has(#statusChart) svg {
  min-height: calc((var(--analysis-chart-min-h) + 40px) * var(--chart-height-scale));
}

.node-list .node-item,
.node-list > div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--soft);
}



/*
  ANALIZA — layout executiv
  ---------------------------------------------------------
  Pagina este reorganizată în 3 rânduri logice:
  1. context + KPI-uri + distribuție
  2. progres + evoluție
  3. tabel detaliu + coloană laterală
*/

.analysis-context-card {
  padding-top: 12px;
  padding-bottom: 12px;
}

.analysis-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.analysis-context-main {
  min-width: 220px;
}

.analysis-context-label {
  display: block;
  color: var(--muted);
  font-size: calc(var(--fz-11) * var(--font-scale));
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  margin-bottom: 4px;
}

.analysis-context-main strong {
  font-size: calc(var(--fz-18) * var(--font-scale));
  line-height: 1.25;
}

.analysis-context-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  flex: 1 1 760px;
}

.analysis-context-chip {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel), var(--soft));
  min-width: 0;
}

.analysis-context-chip span {
  display: block;
  color: var(--muted);
  font-size: calc(var(--fz-11) * var(--font-scale));
  margin-bottom: 4px;
}

.analysis-context-chip strong {
  font-size: calc(var(--fz-15) * var(--font-scale));
  line-height: 1.25;
}

.analysis-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: calc(var(--grid-gap-analysis) * var(--spacing-scale));
  align-items: stretch;
}

.analysis-middle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--grid-gap-analysis) * var(--spacing-scale));
  align-items: stretch;
}

.analysis-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.85fr);
  gap: calc(var(--grid-gap-analysis) * var(--spacing-scale));
  align-items: stretch;
}

.analysis-side-stack {
  display: grid;
  grid-template-rows: auto auto;
  gap: calc(var(--grid-gap-analysis) * var(--spacing-scale));
  min-width: 0;
}

.analysis-table-card .table-wrap {
  flex: 1 1 auto;
}

.analysis-toplots-card,
.analysis-nodes-card {
  min-height: 280px;
}

.top-lots-list {
  display: grid;
  gap: 12px;
}

.top-lot-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel), var(--soft));
  padding: 12px 14px;
}

.top-lot-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.top-lot-rank {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: calc(var(--fz-12) * var(--font-scale));
  font-weight: 800;
}

.top-lot-main {
  min-width: 0;
}

.top-lot-main strong {
  display: block;
  line-height: 1.25;
}

.top-lot-main .muted {
  display: block;
  margin-top: 3px;
  font-size: calc(var(--fz-12) * var(--font-scale));
}

.top-lot-bar {
  margin: 10px 0 8px;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(127, 140, 160, .16);
  overflow: hidden;
}

.top-lot-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;

  /*
    Culoarea efectivă a barei este setată din JS, în funcție de:
    - statusul selectat în filtru
    - sau culoarea neutră pentru "Toate statusurile"

    Fallback-ul de mai jos rămâne doar ca plasă de siguranță.
  */
  background: var(--top-lot-all-statuses-color);
}

.top-lot-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: calc(var(--fz-12) * var(--font-scale));
}

.top-lot-meta strong {
  color: var(--text);
  font-size: calc(var(--fz-13) * var(--font-scale));
}

.analysis-summary-card,
.analysis-status-card,
.analysis-middle-grid .card {
  min-height: calc(var(--analysis-card-min-h) * var(--card-height-scale));
}

.analysis-detail-grid .card {
  min-height: 0;
}
/* =========================================================
   7. PAGE MODULE — TABEL DATE
========================================================= */

.table-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-note {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--soft);
  color: var(--muted);
  font-size: calc(var(--fz-13) * var(--font-scale));
  font-weight: 700;
}

.table-page-wrap {
  max-height: 80vh;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--soft);
}

.table-page-table {
  width: 100%;
  min-width: 1220px;
  table-layout: fixed;
}

.table-page-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
}

.table-page-table tbody tr:nth-child(even) {
  background: rgba(127, 140, 160, .06);
}

/* Coloane tabel dedicate */
.table-page-table th:nth-child(1),
.table-page-table td:nth-child(1) {
  width: 90px;
  font-weight: 600;
  text-align: left;
}

.table-page-table th:nth-child(2),
.table-page-table td:nth-child(2) {
  width: 340px;
  white-space: normal;
  line-height: 1.35;
  text-align: left;
}

.table-page-table th:nth-child(3),
.table-page-table td:nth-child(3) {
  width: 110px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.table-page-table th:nth-child(4),
.table-page-table td:nth-child(4) {
  width: 150px;
  text-align: center;
}

.table-page-table th:nth-child(5),
.table-page-table td:nth-child(5) {
  width: 200px;
  text-align: center;
  white-space: normal;
}

.table-page-table th:nth-child(6),
.table-page-table td:nth-child(6) {
  width: 110px;
  text-align: center;
  font-weight: 600;
}

.table-page-table th:nth-child(7),
.table-page-table td:nth-child(7) {
  width: 110px;
  text-align: center;
}


/* =========================================================
   8. PAGE MODULE — EVOLUȚIE
========================================================= */

.gallery-shell {
  position: relative;
  overflow: hidden;
  width: 90%;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--panel), var(--soft));
}

.gallery-stage {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: stretch;
}

.gallery-image-area {
  position: relative;
  width: 100%;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 4px 54px;
  background: var(--panel);
}

.gallery-image-area img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: calc(90vh - 120px);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.year-display {
  position: absolute;
  top: 10%;
  right: 22%;
  z-index: 2;
  color: var(--accent);
  font-size: 50px;
  font-weight: 500;
  text-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  pointer-events: none;
}

.control-overlay {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  max-width: calc(100% - 24px);
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .90);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
}

.slider-wrap {
  position: relative;
  width: 240px;
  margin: 0;
}

#slider {
  width: 100%;
  height: 14px;
  margin: 0;
}

.year-popup {
  position: absolute;
  top: -20px;
  left: 0;
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  font-size: 10px;
  line-height: 1.1;
}

.controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.controls .btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 6px;
  font-size: 12px;
}

.status-message {
  color: var(--muted);
  font-size: calc(var(--fz-16) * var(--font-scale));
  text-align: center;
}

body.theme-dark .gallery-image-area {
  background: var(--panel);
}

body.theme-dark .control-overlay {
  background: rgba(18, 29, 43, .92);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}


/* =========================================================
   9. PAGE MODULE — DESPRE
   ---------------------------------------------------------
   Reguli dedicate EXCLUSIV paginii Despre.
   IMPORTANT:
   - toate ajustările tipografice sunt scoped pe `.about-page`
   - nu suprascriem global `.section-head`, `.chip`, `.lead`
   - evităm efectele laterale asupra celorlalte pagini
========================================================= */


.about-page {
  max-width: 1260px;
  margin: 0 auto;
  gap: 24px;
}

.about-page .about-section {
  margin: 0;
}

.about-page .section-head {
  margin-bottom: 14px;
}

.about-page .section-head h2,
.about-page .section-head h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.18;
}

.about-page .section-head p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}

/* HERO */
.about-hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 22%, rgba(19, 93, 186, 0.08), transparent 22%),
    linear-gradient(135deg, var(--panel) 0%, var(--panel) 62%, rgba(19, 93, 186, 0.06) 100%);
}

body.theme-dark .about-hero {
  background:
    radial-gradient(circle at 82% 22%, rgba(124, 183, 255, 0.11), transparent 24%),
    linear-gradient(135deg, var(--panel) 0%, var(--panel) 62%, rgba(124, 183, 255, 0.06) 100%);
}

.about-hero-content {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 34px;
  align-items: center;
}

.about-intro {
  max-width: 760px;
}

.about-page .eyebrow {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.about-page .hero-title {
  margin: 0 0 14px;
  font-size: clamp(24px, 4vw, 42px);
  line-height: 1.08;
}

.about-page .lead {
  margin: 0;
  max-width: 700px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.72;
}

.about-lead-secondary {
  margin-top: 14px !important;
}

.about-page .chips {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.about-page .chip {
  padding: 7px 13px;
  border-radius: 20px;
  font-size: 12px;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--text);
}

/* CARD AUTOR */
.author-panel {
  display: flex;
  justify-content: flex-end;
}

.author-card {
  width: min(100%, 330px);
  padding: 24px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--soft));
  box-shadow: var(--shadow-md);
}

.author-avatar {
  width: 78px;
  height: 78px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 28px;
  margin-bottom: 16px;
}

.author-card h2 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.2;
}

.author-meta {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.author-details {
  margin-top: 20px;
  display: grid;
  gap: 14px;
}

.author-details span {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
}

.author-details strong {
  font-size: 14px;
  line-height: 1.35;
}

/* PILONI GIS */
.about-pillars {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.about-pillar {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--soft), var(--panel));
}

.about-pillar h3 {
  margin: 0 0 10px;
  font-size: 17px;
}

.about-pillar p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

/* FLUX DE LUCRU */
.about-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.about-flow-step {
  position: relative;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--soft));
}

.about-flow-index {
  display: inline-flex;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: .08em;
}

.about-flow-step h3 {
  margin: 0 0 10px;
  font-size: 17px;
}

.about-flow-step p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

/* GRID SECȚIUNI ECHILIBRATE */
.about-grid-balanced {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 24px;
}

.about-dual-list {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.about-list-card {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--soft), var(--panel));
}

.about-list-card h3 {
  margin: 0 0 10px;
  font-size: 17px;
}

.about-list-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.72;
}

.about-list-card li + li {
  margin-top: 6px;
}

/* TEHNOLOGII */
.tech-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tech {
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--line);
}

.tech-gis {
  background: rgba(42, 111, 207, 0.12);
  color: #2a6fcf;
}

.tech-map {
  background: rgba(47, 138, 72, 0.12);
  color: #2f8a48;
}

.tech-web {
  background: rgba(90, 76, 207, 0.12);
  color: #5a4ccf;
}

body.theme-dark .tech-web {
  background: rgba(122, 90, 245, 0.16);
  color: #bbaeff;
}

.about-tech-text {
  margin-top: 18px;
  color: var(--muted);
  line-height: 1.72;
}

/* LINKURI / RESURSE
   Structură simplă și ușor de extins: fiecare item este un link card. */
.about-links-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.about-link-item {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--soft), var(--panel));
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.about-link-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--line-strong);
}

.about-link-item strong {
  font-size: 15px;
}

.about-link-item span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}


@media (max-width: 1380px) {
  .analysis-context-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1380px) {
  .analysis-context-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-pillars,
  .about-grid-balanced {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1280px) {
  .about-hero-content {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .author-panel {
    justify-content: flex-start;
  }
}

@media (max-width: 860px) {
  .about-page .hero-title {
    font-size: 32px;
  }

  .about-dual-list,
  .about-links-list,
  .about-flow-grid,
  .about-pillars {
    grid-template-columns: 1fr;
  }

  .author-card {
    width: 100%;
  }
}


/* =========================================================
   10. CHART MODULES
   ---------------------------------------------------------
   IMPORTANT:
   Variabilele de mai jos sunt citite de app.js.
   Numele lor trebuie păstrate.
========================================================= */

.chart-card,
.route-progress-card {
  display: flex;
  flex-direction: column;
}

.chart-card .section-head,
.route-progress-card .section-head {
  flex: 0 0 auto;
  margin-bottom: 2px;
}

.chart-card svg,
.route-progress-card svg {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  align-self: stretch;
  overflow: visible;
}

/* =========================================================
   GRAFIC 1: EVOLUȚIE KM NOI PUȘI ÎN UTILIZARE
   ---------------------------------------------------------
   Variabile utile:
   --chart-width / --chart-height           dimensiunea viewBox
   --chart-margin-*                         margini interioare
   --chart-grid-lines                       număr de linii pe axa Y
   --chart-bar-width-ratio                  grosimea relativă a coloanelor
   --chart-bar-min-width                    grosimea minimă
   --chart-bar-radius                       rotunjirea barelor
   --chart-grid-color                       culoarea liniilor de ghidaj
   --chart-axis-font-size                   font pentru axa Y și anii de jos
   --chart-axis-font-weight                 grosime text axe
   --chart-value-font-size                  font pentru valorile de deasupra
   --chart-value-font-weight                grosime valori
   --chart-selected-fill                    culoare bară selectată
   --chart-default-fill                     culoare bară standard
   --chart-muted-opacity                    opacitate pentru bare inactive
========================================================= */

#annualChart {
  --chart-width: 900;
  --chart-height: 500;
  
  --chart-margin-top: 20;
  --chart-margin-right: 8;
  --chart-margin-bottom: 40;
  --chart-margin-left: 58;
  
  --chart-grid-lines: 5;
  --chart-grid-step: 50;
  --chart-grid-color: rgba(127, 140, 160, 0.28);
  
  --chart-bar-width-ratio: 0.40;
  --chart-bar-min-width: 10;
  --chart-bar-radius: 7;
  
  --chart-axis-font-size: 2;
  --chart-axis-font-weight: 700;
  
  --chart-year-font-size: 16;
  --chart-year-font-weight: 700;
  
  --chart-value-font-size: 22;
  --chart-value-font-weight: 800;
  
  --chart-selected-fill: var(--status-design);
  --chart-default-fill: var(--status-design);
  --chart-muted-opacity: 0.45;
  --chart-active-opacity: 1;
  --chart-text-opacity: 0.82;
}

body.theme-dark #annualChart {
  --chart-grid-color: rgba(175, 192, 210, 0.22);
}


/* =========================================================
   GRAFIC 1B: TREND VALORI PE STATUSURI
   ---------------------------------------------------------
   Grafic de tip line chart, folosit în pagina Analiză.
   Arată evoluția anuală a lungimilor totale pe fiecare status:
   - În utilizare
   - În construcție
   - În planificare

   Filtre aplicate:
   - ruta și județul modifică valorile seriilor
   - statusul selectat evidențiază seria activă
   - anul selectat este marcat discret pe axa X
========================================================= */

#trendChart {
  --trend-width: 900;
  --trend-height: 430;

  --trend-margin-top: 28;
  --trend-margin-right: 28;
  --trend-margin-bottom: 44;
  --trend-margin-left: 80;

  --trend-grid-color: rgba(127, 140, 160, 0.24);
  --trend-axis-font-size: 15;
  --trend-axis-font-weight: 700;
  --trend-legend-font-size: 15;
  --trend-legend-font-weight: 700;

  --trend-line-width: 5;
  --trend-point-radius: 5;
  --trend-selected-point-radius: 6;

  --trend-active-opacity: 1;
  --trend-muted-opacity: 0.28;
  --trend-label-opacity: 0.82;
  --trend-selected-year-opacity: 1;
  --trend-unselected-year-opacity: 0.75;
}

body.theme-dark #trendChart {
  --trend-grid-color: rgba(175, 192, 210, 0.18);
}

/* =========================================================
   GRAFIC 2: STATUS REȚEA 2026 (DONUT / PIE CHART)
   ---------------------------------------------------------
   Variabile utile:
   --pie-width / --pie-height               dimensiunea viewBox
   --pie-center-x / --pie-center-y          poziția cercului
   --pie-outer-radius / --pie-inner-radius  mărimea donutului
   --pie-legend-x                           poziția legendei
   --pie-legend-start-y                     primul rând din legendă
   --pie-legend-step                        distanța între itemi
   --pie-swatch-size                        pătrățelul colorat
   --pie-swatch-radius                      rotunjirea pătrățelului
   --pie-label-font-size                    font nume status
   --pie-value-font-size                    font valoare km
   --pie-percent-font-size                  font procent legendă
   --pie-slice-percent-font-size            font procente pe segmente
   --pie-center-title-size                  font etichetă „Total”
   --pie-center-value-size                  font valoare totală
========================================================= */

#statusChart {
  --pie-width: 900;
  --pie-height: 430;
  
  --pie-center-x: 280;
  --pie-center-y: 220;
  --pie-outer-radius: 200;
  --pie-inner-radius: 100;
  
  --pie-legend-x: 600;
  --pie-legend-start-y: 20;
  --pie-legend-step: 100;
  
  --pie-swatch-size: 22;
  --pie-swatch-radius: 5;
  
  --pie-label-font-size: 24;
  --pie-label-font-weight: 800;
  
  --pie-value-font-size: 24;
  --pie-value-font-weight: 700;
  
  --pie-percent-font-size: 20;
  --pie-slice-percent-font-size: 24;
  --pie-slice-percent-weight: 800;
  
  --pie-center-title-size: 28;
  --pie-center-title-weight: 700;
  --pie-center-value-size: 28;
  --pie-center-value-weight: 800;
  
  --pie-empty-font-size: 18;
  
  --pie-color-operational: var(--status-operational);
  --pie-color-construction: var(--status-construction);
  --pie-color-licitatie: var(--status-licitatie);
  --pie-color-design: var(--status-design);
}

/* =========================================================
   GRAFIC 3: PROGRES PE RUTE – SEGMENTED PROGRESS RIBBON
   ---------------------------------------------------------
   Concept:
   - sus: titlu + total km + procent operațional
   - mijloc: ribbon segmentat pe statusuri
   - jos: legendă compactă cu km și procente

   Graficul folosește aceiași parametri de date:
   - route
   - status
   - lengthKm
   - year
   - filtrele active

   Parametri configurabili:
   --route-progress-width / --route-progress-height
   --route-progress-title-size / --route-progress-title-weight
   --route-progress-kpi-size / --route-progress-kpi-weight
   --route-progress-note-size
   --route-progress-ribbon-x / --route-progress-ribbon-y
   --route-progress-ribbon-width / --route-progress-ribbon-height
   --route-progress-ribbon-radius
   --route-progress-ribbon-track
   --route-progress-inside-label-size / --route-progress-inside-label-weight
   --route-progress-legend-x / --route-progress-legend-start-y
   --route-progress-legend-step / --route-progress-swatch-size
   --route-progress-legend-label-size / --route-progress-legend-value-size
========================================================= */

#routeProgressChart {
  --route-progress-width: 900;
  --route-progress-height: 430;
  
  --route-progress-title-size: 32;
  --route-progress-title-weight: 800;
  
  --route-progress-kpi-size: 30;
  --route-progress-kpi-weight: 800;
  
  --route-progress-note-size: 20;
  
  --route-progress-ribbon-x: 56;
  --route-progress-ribbon-y: 112;
  --route-progress-ribbon-width: 792;
  --route-progress-ribbon-height: 64;
  --route-progress-ribbon-radius: 22;
  --route-progress-ribbon-track: rgba(127, 140, 160, 0.12);
  
  --route-progress-inside-label-size: 18;
  --route-progress-inside-label-weight: 600;
  
  --route-progress-legend-x: 56;
  --route-progress-legend-start-y: 224;
  --route-progress-legend-step: 52;
  --route-progress-swatch-size: 16;
  --route-progress-swatch-radius: 5;
  
  --route-progress-legend-label-size: 40;
  --route-progress-legend-label-weight: 800;
  --route-progress-legend-value-size: 28;
  --route-progress-legend-value-weight: 700;
}

body.theme-dark #routeProgressChart {
  --route-progress-ribbon-track: rgba(175, 192, 210, 0.14);
}


/* =========================================================
   11. CONTROL LAYER
   ---------------------------------------------------------
   AICI FACI REGLAJELE MARI DE LAYOUT.
========================================================= */

/* =========================================================
   11. CONTROL LAYER
   ---------------------------------------------------------
   Zonă de reglaj rapid. Aici modifici valorile-cheie fără să
   umbli în selectorii de bază. Ideal pentru fine tuning de:
   - densitate vizuală
   - proporții între carduri
   - dimensiuni de font
   - înălțimi minime / maxime
========================================================= */

:root {
  /* Gap-uri generale */
  --grid-gap-main: 10px;
  --grid-gap-row-2: 10px;
  --grid-gap-row-3: 10px;
  --grid-gap-analysis: 18px;

  /* Card filtre principal */
  --card-filters-padding-y: 12px;
  --card-filters-padding-x: 14px;
  --card-filters-header-min-h: 26px;

  /* Rând 2: stânga / dreapta în Prezentare */
  --row-2-col-left: 0.9fr;
  --row-2-col-right: 2.1fr;
  --row-2-card-min-h: 300px;
  --row-2-card-max-h: none;
  --row-2-header-min-h: 38px;
  --row-2-header-max-h: none;
  --row-2-header-margin-bottom: 6px;
  --row-2-map-min-height: 0;
  --row-2-map-height: auto;
  --row-2-summary-gap: 10px;
  --row-2-summary-box-min-h: 74px;
  --row-2-summary-value-font-size: 16px;
  --row-2-summary-muted-font-size: 10px;

  /* Prezentare — filtre verticale */
  --presentation-left-stack-gap: 10px;
  --presentation-hero-map-min-h: 0;
  --index-filter-card-min-h: 300px;
  --index-filter-card-max-h: 300px;
  --index-filter-select-min-h: 40px;

  /* Rând 3 */
  --row-3-col-1: 0.9fr;
  --row-3-col-2: 1.05fr;
  --row-3-col-3: 1.05fr;
  --row-3-card-min-h: 270px;
  --row-3-card-padding-y: 10px;
  --row-3-card-padding-x: 12px;
  --row-3-chart-min-h: 210px;

  /* Analiză */
  --analysis-card-min-h: 440px;
  --analysis-chart-min-h: 340px;

  /* Hook-uri suplimentare pentru elemente controlate din JS */
  --analysis-selection-title-gap: 8px;
  --analysis-top-lots-gap: 10px;
  --analysis-nodes-gap: 10px;

  --gallery-status-max-width: 820px;
  --gallery-year-display-top: 10%;
  --gallery-year-display-right: 12%;
  --gallery-year-popup-offset: -26px;

  --table-count-weight: var(--font-weight-semibold);
}

/* Aplicare */
.main.stack,
.presentation-dashboard-hero,
.presentation-triple-grid,
.analysis-uniform-grid,
.about-grid,
.analysis-grid {
  row-gap: calc(var(--grid-gap-main) * var(--spacing-scale));
}

.index-page-filter-card,
.analysis-page-filter-card {
  padding-top: calc(var(--card-filters-padding-y) * var(--spacing-scale));
  padding-bottom: calc(var(--card-filters-padding-y) * var(--spacing-scale));
  padding-left: calc(var(--card-filters-padding-x) * var(--spacing-scale));
  padding-right: calc(var(--card-filters-padding-x) * var(--spacing-scale));
}

.index-page-filter-card .section-head,
.analysis-page-filter-card .section-head {
  min-height: calc(var(--card-filters-header-min-h) * var(--spacing-scale));
}

/* Analiză păstrează filtrele în 4 coloane */
.analysis-page-filter-card .filter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Tabel note */
.table-note,
.table-toolbar {
  flex-wrap: wrap;
}


/* =========================================================
   12. RESPONSIVE
========================================================= */


@media (max-width: 1380px) {
  .analysis-context-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .analysis-grid,
  .analysis-uniform-grid,
  .analysis-hero-grid,
  .analysis-middle-grid,
  .analysis-detail-grid,
  .about-grid,
  .presentation-dashboard-hero,
  .presentation-triple-grid,
  .about-hero-content,
  .about-detail-grid {
    grid-template-columns: 1fr;
  }

  .analysis-side-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .analysis-context-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analysis-page-filter-card .filter-grid,
  .filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .index-filter-vertical {
    min-height: auto;
    max-height: none;
  }

  .presentation-map-card-expanded .map-frame {
    min-height: 420px;
  }

  .gallery-stage {
    min-height: 62vh;
  }

  .gallery-image-area {
    min-height: 56vh;
    padding: 20px 20px 70px;
  }

  .gallery-image-area img {
    max-height: calc(62vh - 98px);
  }

  .control-overlay {
    bottom: 10px;
    padding: 5px 7px;
  }

  .slider-wrap {
    width: 210px;
  }
}

@media (max-width: 900px) {
  .year-display {
    font-size: 42px;
    top: 10%;
    right: 12%;
  }

  .gallery-stage {
    min-height: 54vh;
  }

  .gallery-image-area {
    min-height: 48vh;
    padding: 16px 16px 66px;
  }

  .gallery-image-area img {
    max-height: calc(54vh - 92px);
  }

  .control-overlay {
    bottom: 8px;
    max-width: calc(100% - 12px);
  }

  .slider-wrap {
    width: 180px;
  }
}

@media (max-width: 860px) {
  .topbar-inner,
  .main {
    padding-left: 16px;
    padding-right: 16px;
  }

  .summary-grid,
  .summary-meta-grid,
  .analysis-page-filter-card .filter-grid,
  .filter-grid,
  .three-col,
  .about-info-grid,
  .analysis-context-chips,
  .analysis-side-stack {
    grid-template-columns: 1fr;
  }

  .brand p {
    display: none;
  }

  .section-head {
    min-height: auto;
    gap: 8px;
  }
}


/* Card shadow ajustat pentru dark mode (aspect mai premium) */
body.theme-dark .card {
  box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}

/* =========================================================
   ALIASURI NOI PENTRU MODELUL DE DATE DIN EXCEL
   ---------------------------------------------------------
   Noul workbook folosește trei statusuri:
   - În utilizare
   - În construcție
   - În planificare

   Pentru a păstra designul vechi aproape neschimbat,
   mapăm „În planificare” pe paleta vizuală folosită anterior
   pentru statusurile de proiectare.
========================================================= */

.status-planificare {
  background: var(--status-design-soft);
  color: var(--status-design);
}

#filteredSummary .summary-box.summary-planificare {
  background: linear-gradient(180deg, var(--panel), var(--status-design-soft));
}


/* =========================================================
   11A. STYLE HOOKS PENTRU ELEMENTE CU ID
   ---------------------------------------------------------
   Aceste reguli există pentru elementele identificate în HTML
   și/sau populate din JavaScript. Chiar dacă o parte dintre ele
   moștenesc deja stiluri prin clase, aici au fost definite
   hook-uri explicite pentru control fin.
========================================================= */

/* ---------- Analiză: filtre și context ---------- */

#yearFilter,
#routeFilter,
#statusFilter,
#countyFilter {
  min-height: var(--control-min-height);
  font-size: var(--control-font-size);
}

#resetAnalysisFilters {
  min-height: var(--button-min-height);
  font-size: var(--button-font-size);
}

#analysisSelectionTitle {
  font-size: var(--analysis-context-title-font-size);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

#analysisSelectionChips {
  gap: var(--analysis-chip-gap);
}

#filteredSummaryMeta {
  gap: var(--analysis-meta-gap);
}

#statusCardTitle,
#segmentsCardTitle {
  letter-spacing: var(--letter-spacing-tight);
}

/* ---------- Analiză: liste dinamice ---------- */

#topLotsList,
#nodesList {
  gap: var(--analysis-list-gap);
  font-size: var(--analysis-list-font-size);
}

/* tbody-urile nu au nevoie de layout propriu, dar primesc
   hook-uri explicite pentru eventuale reglaje viitoare. */
#segmentTableBody,
#segmentsTableBody {
  font-size: inherit;
}

#tableCount {
  font-size: var(--table-note-font-size);
  font-weight: var(--table-count-weight);
}

/* ---------- Evoluție ---------- */

#statusMessage {
  max-width: var(--gallery-status-max-width);
  font-size: var(--gallery-status-font-size);
  line-height: var(--line-height-copy);
}

#yearDisplay {
  top: var(--gallery-year-display-top);
  right: var(--gallery-year-display-right);
  font-size: var(--gallery-year-display-font-size);
  letter-spacing: var(--letter-spacing-tight);
}

#yearPopup {
  top: var(--gallery-year-popup-offset);
  font-size: var(--gallery-year-popup-font-size);
}

#controlsPanel {
  gap: var(--gallery-controls-gap);
  padding: var(--gallery-controls-padding-y) var(--gallery-controls-padding-x);
}

#prevBtn,
#playBtn,
#nextBtn {
  width: var(--gallery-control-button-size);
  min-width: var(--gallery-control-button-size);
  min-height: var(--gallery-control-button-size);
}

/* Imaginea principală din galerie */
#mainImage {
  border-radius: inherit;
}

/* =========================================================
   11B. PAGE MODULES — HOOK-URI EXPLICITE PE PAGINI
   ---------------------------------------------------------
   Scopul acestei secțiuni este să ofere puncte clare de intrare
   pentru personalizarea fiecărei pagini, fără să depinzi doar de
   stilurile comune moștenite.
========================================================= */

/* ---------- INDEX / PREZENTARE ---------- */

.map-frame {
  min-height: var(--map-frame-min-height);
  border-radius: var(--map-frame-radius);
}

/* ---------- ANALIZĂ ---------- */

.analysis-context-label {
  font-size: var(--analysis-context-label-font-size);
}

.analysis-context-chips .chip {
  font-size: var(--analysis-chip-font-size);
}

.top-lots-list,
.node-list {
  gap: var(--analysis-list-gap);
}

.summary-meta-grid {
  gap: var(--analysis-meta-gap);
}

/* ---------- TABEL DATE ---------- */

.table-note {
  font-size: var(--table-note-font-size);
}

.data-table {
  font-size: var(--table-font-size);
}

.data-table th {
  font-size: var(--table-header-font-size);
}

.data-table th,
.data-table td {
  padding:
    calc(var(--table-cell-padding-y) * var(--spacing-scale))
    calc(var(--table-cell-padding-x) * var(--spacing-scale));
}

/* ---------- EVOLUȚIE ---------- */

.status-message {
  font-size: var(--gallery-status-font-size);
}

.year-display {
  font-size: var(--gallery-year-display-font-size);
}

.year-popup {
  font-size: var(--gallery-year-popup-font-size);
}

.controls {
  gap: var(--gallery-controls-gap);
}

/* ---------- DESPRE ---------- */

.eyebrow {
  font-size: var(--about-eyebrow-font-size);
  letter-spacing: .08em;
}

.hero-title {
  font-size: var(--about-title-font-size);
  letter-spacing: var(--letter-spacing-tight);
}

.lead {
  font-size: var(--about-lead-font-size);
  line-height: var(--line-height-copy);
}

.about-intro,
.about-section,
.about-tech-text,
.about-list-card,
.about-link-item,
.author-details,
.about-pillar,
.about-flow-step {
  font-size: var(--about-copy-font-size);
  line-height: var(--line-height-copy);
}

.about-links-list,
.about-dual-list,
.about-pillars,
.about-flow-grid {
  gap: var(--about-list-gap);
}

.secret-link {
  color: inherit;        /* aceeași culoare ca textul normal */
  text-decoration: none; /* fără subliniere */
  cursor: default;       /* NU arată ca link (foarte stealth) */
}

.secret-link:hover {
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   11C. DOCUMENTAȚIE RAPIDĂ PENTRU EDITĂRI FRECVENTE
   ---------------------------------------------------------
   Exemple de modificări rapide:
   - mărești toate textele: --font-scale
   - faci layout-ul mai aerisit: --spacing-scale
   - faci cardurile mai joase/mai înalte: variabilele de rând
   - modifici doar pagina Analiză: variabilele --analysis-*
   - modifici doar pagina Evoluție: variabilele --gallery-*
   - modifici doar pagina Despre: variabilele --about-*

   Recomandare:
   păstrează această secțiune la finalul fișierului, deoarece
   funcționează și ca override layer controlat.
========================================================= */