/* ==========================================================================
   mappale — style immobiliare Emporia Digital Group
   Drop-in dopo bootstrap.css. Nessun build step.
   v0.2 — geometria spigolosa, mono come linguaggio UI
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKEN — LIGHT
   -------------------------------------------------------------------------- */

:root {
  /* Superfici */
  --clb-color-bg:            #f5f6f2;
  --clb-color-surface:       #fdfdfb;
  --clb-color-surface-2:     #f6f8f0;
  --clb-color-surface-sunk:  #eceee5;

  /* Bordi */
  --clb-color-border:        #dae1bf;
  --clb-color-border-strong: #a3b553;
  --clb-color-border-hair:   #e6e8de;

  /* Testo */
  --clb-color-text:          #1c1f16;
  --clb-color-text-2:        #4a5142;
  --clb-color-text-3:        #6a7161;
  --clb-color-text-inv:      #fdfdfb;

  /* Accento — tre gradi, vedi STYLE.md §2 */
  --clb-color-accent:        #8ca040;  /* fill, bordi, decoro. NON per testo. */
  --clb-color-accent-hover:  #68762d;  /* bg bottone solido + hover */
  --clb-color-accent-text:   #5a6726;  /* link e testo su fondo chiaro */
  --clb-color-accent-bg:     #eef1e2;
  --clb-color-accent-fg:     #fdfdfb;

  /* Semantici */
  --clb-color-success:       #1f6b54;
  --clb-color-success-bg:    #e3f1ec;
  --clb-color-warning:       #8a5a12;
  --clb-color-warning-bg:    #f8eeda;
  --clb-color-danger:        #a63125;
  --clb-color-danger-bg:     #f7e4e1;
  --clb-color-info:          #2a5f80;
  --clb-color-info-bg:       #e2eef5;

  /* Tipografia */
  --clb-font-display: "Inter", system-ui, -apple-system, sans-serif;
  --clb-font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --clb-font-sans:    "Inter", system-ui, -apple-system, sans-serif;
  --clb-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scala type */
  --clb-text-xs:   0.6875rem;  /* 11px — microlabel mono */
  --clb-text-sm:   0.8125rem;  /* 13px — tabelle, UI densa */
  --clb-text-base: 0.9375rem;  /* 15px — body */
  --clb-text-md:   1.0625rem;
  --clb-text-lg:   1.375rem;
  --clb-text-xl:   1.75rem;
  --clb-text-2xl:  2.25rem;
  --clb-text-3xl:  3rem;
  --clb-text-4xl:  4rem;

  --clb-leading-tight: 1.08;
  --clb-leading-snug:  1.35;
  --clb-leading-base:  1.65;

  /* Tracking */
  --clb-track-display: -0.03em;
  --clb-track-label:    0.14em;
  --clb-track-chip:     0.1em;

  /* Spacing — multipli di 4px */
  --clb-space-1:  4px;
  --clb-space-2:  8px;
  --clb-space-3:  12px;
  --clb-space-4:  16px;
  --clb-space-5:  20px;
  --clb-space-6:  24px;
  --clb-space-8:  32px;
  --clb-space-10: 40px;
  --clb-space-16: 64px;
  --clb-space-24: 96px;

  /* Geometria — spigoli vivi */
  --clb-radius-sm: 0px;
  --clb-radius-md: 2px;
  --clb-radius-lg: 3px;

  --clb-shadow:    none;
  --clb-shadow-lg: 0 8px 32px rgba(28, 31, 22, 0.14);
}

/* --------------------------------------------------------------------------
   2. TOKEN — DARK
   -------------------------------------------------------------------------- */

/* Il fondo non e' nero: e' terra scura. Un quasi-nero fa sparire tutto
   quello che ci sta sopra con poco contrasto — una rete di linee sottili,
   una mappa, un bordo — e appiattisce la pagina in un unico piano. Alzando
   il fondo di un gradino la profondita' torna leggibile, e i livelli
   (fondo, superficie, superficie alta) si distinguono davvero.

   I testi salgono in proporzione: ogni coppia resta sopra il 4.5:1 di AA,
   verificato, e non ereditata dal fatto che prima il fondo era piu' scuro. */
[data-bs-theme="dark"] {
  --clb-color-bg:            #1f2419;
  --clb-color-surface:       #272d1f;
  --clb-color-surface-2:     #323926;
  --clb-color-surface-sunk:  #181c13;

  --clb-color-border:        #434b33;
  --clb-color-border-strong: #5e6a44;
  --clb-color-border-hair:   #323926;

  --clb-color-text:          #eef1e6;
  --clb-color-text-2:        #bfc5b1;
  --clb-color-text-3:        #9aa28d;
  --clb-color-text-inv:      #1f2419;

  --clb-color-accent:        #b3c566;
  --clb-color-accent-hover:  #c8d886;
  --clb-color-accent-text:   #c8d886;
  --clb-color-accent-bg:     #323926;
  --clb-color-accent-fg:     #1f2419;

  --clb-color-success:       #4cb897;
  --clb-color-success-bg:    #1d3128;
  --clb-color-warning:       #dda749;
  --clb-color-warning-bg:    #33291a;
  --clb-color-danger:        #e98a7b;
  --clb-color-danger-bg:     #35201c;
  --clb-color-info:          #6aacd4;
  --clb-color-info-bg:       #1c2b34;

  --clb-shadow:    none;
  /* Su un fondo piu' chiaro un'ombra nera piena stacca troppo: si abbassa. */
  --clb-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   3. BRIDGE BOOTSTRAP
   -------------------------------------------------------------------------- */

:root {
  --bs-body-bg:          var(--clb-color-bg);
  --bs-body-color:       var(--clb-color-text);
  --bs-body-font-family: var(--clb-font-body);
  --bs-primary:          var(--clb-color-accent);
  --bs-border-color:     var(--clb-color-border);

  --bs-body-font-size:   var(--clb-text-base);
  --bs-body-line-height: var(--clb-leading-base);
  --bs-border-radius:    var(--clb-radius-md);
  --bs-border-radius-sm: var(--clb-radius-sm);
  --bs-border-radius-lg: var(--clb-radius-lg);
  --bs-link-color:       var(--clb-color-accent-text);
  --bs-link-hover-color: var(--clb-color-accent-hover);
  --bs-emphasis-color:   var(--clb-color-text);
  --bs-secondary-color:  var(--clb-color-text-2);
  --bs-tertiary-color:   var(--clb-color-text-3);
  --bs-success:          var(--clb-color-success);
  --bs-warning:          var(--clb-color-warning);
  --bs-danger:           var(--clb-color-danger);
  --bs-info:             var(--clb-color-info);
}

/* --------------------------------------------------------------------------
   4. OVERRIDE COMPONENTI
   -------------------------------------------------------------------------- */

body {
  font-family: var(--clb-font-body);
  font-size: var(--clb-text-base);
  line-height: var(--clb-leading-base);
  color: var(--clb-color-text);
  background-color: var(--clb-color-bg);
  -webkit-font-smoothing: antialiased;
}

/* --- Titoli: grandi, stretti, pesanti ------------------------------------ */

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--clb-font-display);
  font-weight: 700;
  line-height: var(--clb-leading-tight);
  letter-spacing: var(--clb-track-display);
  color: var(--clb-color-text);
}

h1, .h1 { font-size: var(--clb-text-3xl); }
h2, .h2 { font-size: var(--clb-text-2xl); }
h3, .h3 { font-size: var(--clb-text-lg); letter-spacing: -0.02em; }
h4, .h4 { font-size: var(--clb-text-md); letter-spacing: -0.015em; font-weight: 600; }

.clb-display {
  font-family: var(--clb-font-display);
  font-size: var(--clb-text-4xl);
  font-weight: 700;
  line-height: var(--clb-leading-tight);
  letter-spacing: var(--clb-track-display);
}

.clb-lead {
  font-size: var(--clb-text-md);
  line-height: var(--clb-leading-base);
  color: var(--clb-color-text-2);
  max-width: 62ch;
}

/* --- Mono come linguaggio UI --------------------------------------------- */

/* Etichetta di sezione: data-clb-num="01" + testo -> "01 — CAPACITÀ" */
.clb-section-label {
  display: flex;
  align-items: center;
  gap: var(--clb-space-2);
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--clb-track-label);
  color: var(--clb-color-text-3);
  margin-bottom: var(--clb-space-5);
}

.clb-section-label[data-clb-num]::before {
  content: attr(data-clb-num) "  —";
  color: var(--clb-color-accent-text);
  white-space: pre;
}

/* Microlabel generica */
.clb-eyebrow {
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--clb-track-label);
  color: var(--clb-color-text-3);
}

/* Numerale in filigrana */
.clb-ghost-num {
  font-family: var(--clb-font-mono);
  font-size: 3.25rem;
  font-weight: 300;
  line-height: 1;
  color: var(--clb-color-border);
  user-select: none;
  pointer-events: none;
}

/* Riga di metadati sotto un blocco */
.clb-meta {
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-xs);
  letter-spacing: 0.04em;
  color: var(--clb-color-text-3);
}

/* Numeri: prezzi, metrature, coordinate, ID catastali */
.clb-num,
.clb-price,
.clb-coord,
code, kbd, pre, samp {
  font-family: var(--clb-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.clb-price {
  font-size: var(--clb-text-xl);
  font-weight: 600;
  color: var(--clb-color-text);
  letter-spacing: -0.02em;
}

.clb-price-unit {
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-xs);
  letter-spacing: 0.04em;
  color: var(--clb-color-text-3);
}

code {
  background-color: var(--clb-color-surface-sunk);
  padding: 0.1em 0.4em;
  font-size: 0.9em;
  color: var(--clb-color-text-2);
}

/* --- Regola orizzontale con segmento in accento -------------------------- */

.clb-rule {
  height: 1px;
  background-color: var(--clb-color-border-hair);
  position: relative;
  margin: var(--clb-space-8) 0;
}

.clb-rule::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 1px;
  background-color: var(--clb-color-accent);
}

/* --- Chip / filtri mono --------------------------------------------------- */

.clb-chip {
  display: inline-block;
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--clb-track-chip);
  color: var(--clb-color-text-3);
  background-color: var(--clb-color-surface-2);
  border: 1px solid transparent;
  border-radius: var(--clb-radius-sm);
  padding: var(--clb-space-2) var(--clb-space-3);
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.clb-chip:hover {
  color: var(--clb-color-text);
  border-color: var(--clb-color-border);
}

.clb-chip.active,
.clb-chip[aria-pressed="true"] {
  color: var(--clb-color-accent-text);
  border-color: var(--clb-color-accent);
  background-color: var(--clb-color-accent-bg);
}

/* --- Bottoni: squadrati, senza sollevamento ------------------------------ */

.btn {
  --bs-btn-font-family: var(--clb-font-sans);
  --bs-btn-font-size: var(--clb-text-base);
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--clb-radius-md);
  --bs-btn-padding-y: 0.625rem;
  --bs-btn-padding-x: 1.25rem;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn-sm {
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-font-size: var(--clb-text-sm);
}

.btn-primary {
  --bs-btn-bg: var(--clb-color-accent-hover);
  --bs-btn-border-color: var(--clb-color-accent-hover);
  --bs-btn-color: var(--clb-color-accent-fg);
  --bs-btn-hover-bg: var(--clb-color-accent-text);
  --bs-btn-hover-border-color: var(--clb-color-accent-text);
  --bs-btn-hover-color: var(--clb-color-accent-fg);
  --bs-btn-active-bg: var(--clb-color-accent-text);
  --bs-btn-active-border-color: var(--clb-color-accent-text);
  --bs-btn-disabled-bg: var(--clb-color-border);
  --bs-btn-disabled-border-color: var(--clb-color-border);
  --bs-btn-disabled-color: var(--clb-color-text-3);
}

.btn-outline-primary {
  --bs-btn-color: var(--clb-color-accent-text);
  --bs-btn-border-color: var(--clb-color-border-strong);
  --bs-btn-hover-bg: var(--clb-color-accent-bg);
  --bs-btn-hover-border-color: var(--clb-color-accent);
  --bs-btn-hover-color: var(--clb-color-accent-text);
  --bs-btn-active-bg: var(--clb-color-accent-bg);
  --bs-btn-active-color: var(--clb-color-accent-text);
}

.btn-secondary,
.btn-light {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--clb-color-border);
  --bs-btn-color: var(--clb-color-text-2);
  --bs-btn-hover-bg: var(--clb-color-surface-2);
  --bs-btn-hover-border-color: var(--clb-color-border-strong);
  --bs-btn-hover-color: var(--clb-color-text);
}

.btn-link {
  --bs-btn-color: var(--clb-color-accent-text);
  --bs-btn-hover-color: var(--clb-color-accent-hover);
  text-decoration: none;
  text-underline-offset: 3px;
}
.btn-link:hover { text-decoration: underline; }

/* Bottone ghost quadrato per navigazione */
.clb-btn-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--clb-color-border);
  border-radius: var(--clb-radius-sm);
  color: var(--clb-color-text-2);
  font-family: var(--clb-font-mono);
  cursor: pointer;
}
.clb-btn-square:hover {
  border-color: var(--clb-color-border-strong);
  color: var(--clb-color-text);
}

/* --- Card: bordo, niente ombra ------------------------------------------- */

.card {
  --bs-card-bg: var(--clb-color-surface);
  --bs-card-border-color: var(--clb-color-border);
  --bs-card-border-radius: var(--clb-radius-lg);
  --bs-card-inner-border-radius: var(--clb-radius-sm);
  --bs-card-spacer-y: var(--clb-space-6);
  --bs-card-spacer-x: var(--clb-space-6);
  box-shadow: var(--clb-shadow);
}

.card-header {
  background-color: transparent;
  border-bottom-color: var(--clb-color-border-hair);
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--clb-track-label);
  color: var(--clb-color-text-3);
  padding: var(--clb-space-4) var(--clb-space-6);
}

.card-footer {
  background-color: transparent;
  border-top-color: var(--clb-color-border-hair);
  padding: var(--clb-space-4) var(--clb-space-6);
}

/* Card con barra di accento a sinistra (item attivo) */
.clb-card-active {
  border-left: 2px solid var(--clb-color-accent);
}

/* Card numerata: numerale in filigrana in alto a destra */
.clb-card-num { position: relative; }
.clb-card-num > .clb-ghost-num {
  position: absolute;
  top: var(--clb-space-4);
  right: var(--clb-space-6);
}

/* --- Tabelle: dense, filiformi ------------------------------------------- */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--clb-color-text);
  --bs-table-border-color: var(--clb-color-border-hair);
  --bs-table-striped-bg: var(--clb-color-surface-2);
  --bs-table-hover-bg: var(--clb-color-accent-bg);
  font-size: var(--clb-text-sm);
  margin-bottom: 0;
}

.table > thead > tr > th {
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--clb-track-chip);
  color: var(--clb-color-text-3);
  border-bottom: 1px solid var(--clb-color-border);
  padding: var(--clb-space-3);
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: var(--clb-space-3);
  vertical-align: middle;
  border-bottom-color: var(--clb-color-border-hair);
}

.table > tbody > tr:last-child > td { border-bottom: 0; }

.table .clb-col-num,
.table td.text-end,
.table th.text-end {
  font-family: var(--clb-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --- Stepper verticale numerato ------------------------------------------ */

.clb-steps {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--clb-space-4);
  border-left: 1px solid var(--clb-color-border-hair);
}

.clb-steps > li {
  display: flex;
  align-items: baseline;
  gap: var(--clb-space-4);
  padding: var(--clb-space-3) 0;
  color: var(--clb-color-text-3);
  position: relative;
}

.clb-steps > li::before {
  content: attr(data-clb-num);
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-xs);
  letter-spacing: 0.04em;
  color: var(--clb-color-text-3);
}

.clb-steps > li.active {
  color: var(--clb-color-text);
  font-weight: 600;
}

.clb-steps > li.active::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--clb-space-4) - 1px);
  top: var(--clb-space-2);
  bottom: var(--clb-space-2);
  width: 2px;
  background-color: var(--clb-color-accent);
}

.clb-steps > li.active::before { color: var(--clb-color-accent-text); }

/* --- Form: campi squadrati, label mono ----------------------------------- */

.form-control,
.form-select {
  background-color: var(--clb-color-surface-sunk);
  border-color: var(--clb-color-border-hair);
  border-radius: var(--clb-radius-sm);
  color: var(--clb-color-text);
  font-size: var(--clb-text-base);
  padding: 0.625rem 0.75rem;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--clb-color-surface);
  border-color: var(--clb-color-border-strong);
  color: var(--clb-color-text);
  box-shadow: none;
  outline: 1px solid var(--clb-color-border-strong);
  outline-offset: -2px;
}

.form-control::placeholder { color: var(--clb-color-text-3); }

.form-label {
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--clb-track-label);
  color: var(--clb-color-text-3);
  margin-bottom: var(--clb-space-2);
}

.clb-optional {
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--clb-track-chip);
  color: var(--clb-color-text-3);
  opacity: 0.65;
  margin-left: var(--clb-space-2);
}

.form-text {
  font-family: var(--clb-font-mono);
  color: var(--clb-color-text-3);
  font-size: var(--clb-text-xs);
  letter-spacing: 0.02em;
}

.form-check-input {
  border-radius: 0;
  border-color: var(--clb-color-border);
  background-color: var(--clb-color-surface-sunk);
}
.form-check-input:checked {
  background-color: var(--clb-color-accent-hover);
  border-color: var(--clb-color-accent-hover);
}
.form-check-input:focus {
  border-color: var(--clb-color-border-strong);
  box-shadow: none;
  outline: 1px solid var(--clb-color-border-strong);
  outline-offset: 1px;
}

.input-group-text {
  background-color: var(--clb-color-surface-2);
  border-color: var(--clb-color-border-hair);
  border-radius: var(--clb-radius-sm);
  color: var(--clb-color-text-3);
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-xs);
  letter-spacing: 0.04em;
}

/* --- Badge: rettangolari, mono ------------------------------------------- */

.badge {
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--clb-track-chip);
  padding: 0.35em 0.6em;
  border-radius: var(--clb-radius-sm);
}

.badge.text-bg-primary {
  background-color: var(--clb-color-accent-bg) !important;
  color: var(--clb-color-accent-text) !important;
}
.badge.text-bg-success {
  background-color: var(--clb-color-success-bg) !important;
  color: var(--clb-color-success) !important;
}
.badge.text-bg-warning {
  background-color: var(--clb-color-warning-bg) !important;
  color: var(--clb-color-warning) !important;
}
.badge.text-bg-danger {
  background-color: var(--clb-color-danger-bg) !important;
  color: var(--clb-color-danger) !important;
}
.badge.text-bg-info {
  background-color: var(--clb-color-info-bg) !important;
  color: var(--clb-color-info) !important;
}
.badge.text-bg-secondary {
  background-color: var(--clb-color-surface-2) !important;
  color: var(--clb-color-text-2) !important;
}

/* --- Navbar --------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   RESPONSIVITA' — correzioni trasversali
   -------------------------------------------------------------------------- */

/* Una `.row` con gutter piu' larghi di quelli del contenitore sporge di
   mezzo gutter per lato: i margini negativi della riga crescono con
   `--bs-gutter-x`, il padding del contenitore no, perche' e' calcolato dal
   suo valore e un genitore non puo' leggere quello del figlio.

   Sopra i 576px il contenitore ha un `max-width` e i pixel in eccesso hanno
   dove stare. Sotto, e' a tutta larghezza: quei 12 pixel diventano
   scorrimento orizzontale di tutta la pagina, che su un telefono e' il
   difetto che si nota per primo. Misurato: 377 px di contenuto in un
   viewport da 365.

   Si tiene il gutter grande dove serve e lo si riporta a quello del
   contenitore dove non c'e' spazio, invece di mettere `overflow-x: hidden`
   sul body — che nasconderebbe il sintomo e romperebbe le posizioni
   sticky. */
@media (max-width: 575.98px) {
  .row.g-5,
  .row.gx-5,
  .row.g-4,
  .row.gx-4 {
    --bs-gutter-x: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   BARRA DI SEZIONE, BRICIOLE E TESTATA — impalcatura della dashboard
   -------------------------------------------------------------------------- */

/* La barra di sezione: dove si e' e dove si puo' andare, in una riga sola.
   Prima ogni pagina si portava dietro i propri link, e bastava aggiungerne
   una perche' l'elenco divergesse da quello della pagina accanto. */
.dash-barra {
  background: var(--clb-color-surface);
  border-bottom: 1px solid var(--clb-color-border-hair);
}
.dash-barra__voci {
  display: flex;
  /* Su telefono le voci scorrono invece di andare a capo: una barra di
     sezione su due righe smette di leggersi come una barra. */
  overflow-x: auto;
  scrollbar-width: none;
}
.dash-barra__voci::-webkit-scrollbar { display: none; }

.dash-barra__voce {
  padding: 0.85rem 1.1rem;
  color: var(--clb-color-text-3);
  text-decoration: none;
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Il filo sotto c'e' sempre, trasparente: se comparisse solo sull'attiva
     la riga si alzerebbe di due pixel al passaggio da una voce all'altra. */
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.dash-barra__voce:hover,
.dash-barra__voce:focus-visible { color: var(--clb-color-text); }
.dash-barra__voce.e-attiva {
  color: var(--clb-color-accent-text);
  border-bottom-color: var(--clb-color-accent);
}

/* Le briciole: la strada percorsa, non un elenco di scorciatoie. L'ultima
   voce e' la pagina corrente e non e' un link — portarebbe dove si e' gia'. */
.clb-briciole { margin-bottom: var(--clb-space-4); }
.clb-briciole ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clb-color-text-3);
}
.clb-briciole li + li::before {
  content: "/";
  margin: 0 0.5rem;
  color: var(--clb-color-border-strong);
}
.clb-briciole a {
  color: var(--clb-color-text-3);
  text-decoration: none;
}
.clb-briciole a:hover,
.clb-briciole a:focus-visible {
  color: var(--clb-color-accent-text);
  text-decoration: underline;
}
.clb-briciole [aria-current="page"] { color: var(--clb-color-text-2); }

/* Testata: titolo a sinistra, azioni a destra, e su schermo stretto le
   azioni vanno sotto invece di stringere il titolo. */
.clb-testata {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: var(--clb-space-5);
}
.clb-testata__azioni {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* La barra sta in cima a ogni pagina e ci resta: in fondo a un elenco di
   POI lungo, o a meta' di una mappa, la navigazione deve essere ancora li'.
   Il fondo e' pieno di default — su una pagina di contenuto una barra
   trasparente si fa attraversare dal testo che le scorre sotto. La landing
   la rende trasparente per conto suo, perche' li' dietro c'e' l'animazione
   ed e' quella che si deve vedere. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: var(--clb-color-bg);
  border-bottom: 1px solid var(--clb-color-border-hair);
}

.navbar {
  background-color: var(--clb-color-bg);
  border-bottom: 1px solid var(--clb-color-border-hair);
  padding: var(--clb-space-4) 0;
}

.navbar .navbar-brand {
  font-family: var(--clb-font-display);
  font-weight: 700;
  font-size: var(--clb-text-md);
  letter-spacing: -0.03em;
  color: var(--clb-color-text);
}

.navbar .nav-link {
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--clb-track-chip);
  color: var(--clb-color-text-3);
  border-radius: var(--clb-radius-sm);
  padding: var(--clb-space-2) var(--clb-space-3);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus { color: var(--clb-color-text); }

.navbar .nav-link.active {
  color: var(--clb-color-accent-text);
  background-color: var(--clb-color-accent-bg);
}

/* --- Sidebar -------------------------------------------------------------- */

.clb-sidebar {
  background-color: transparent;
  border-right: 1px solid var(--clb-color-border-hair);
  padding: var(--clb-space-4) var(--clb-space-4) var(--clb-space-4) 0;
}

.clb-sidebar .nav-link {
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--clb-track-chip);
  color: var(--clb-color-text-3);
  border-radius: var(--clb-radius-sm);
  padding: var(--clb-space-2) var(--clb-space-3);
  border-left: 2px solid transparent;
}

.clb-sidebar .nav-link:hover { color: var(--clb-color-text); }

.clb-sidebar .nav-link.active {
  background-color: var(--clb-color-accent-bg);
  border-left-color: var(--clb-color-accent);
  color: var(--clb-color-accent-text);
}

.clb-sidebar-label {
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--clb-track-label);
  color: var(--clb-color-text-3);
  opacity: 0.7;
  padding: var(--clb-space-6) var(--clb-space-3) var(--clb-space-2);
}

/* --- Modali --------------------------------------------------------------- */

.modal-content {
  background-color: var(--clb-color-surface);
  border: 1px solid var(--clb-color-border);
  border-radius: var(--clb-radius-lg);
  box-shadow: var(--clb-shadow-lg);
}
.modal-header,
.modal-footer { border-color: var(--clb-color-border-hair); }
.modal-backdrop.show { opacity: 0.5; }

/* --- Alert / toast -------------------------------------------------------- */

.alert {
  border-radius: var(--clb-radius-sm);
  border-width: 1px;
  border-left-width: 2px;
  font-size: var(--clb-text-sm);
  padding: var(--clb-space-3) var(--clb-space-4);
}

.alert-success {
  background-color: var(--clb-color-success-bg);
  border-color: var(--clb-color-success);
  color: var(--clb-color-text);
}
.alert-warning {
  background-color: var(--clb-color-warning-bg);
  border-color: var(--clb-color-warning);
  color: var(--clb-color-text);
}
.alert-danger {
  background-color: var(--clb-color-danger-bg);
  border-color: var(--clb-color-danger);
  color: var(--clb-color-text);
}
.alert-info {
  background-color: var(--clb-color-info-bg);
  border-color: var(--clb-color-info);
  color: var(--clb-color-text);
}

.clb-toast-stack {
  position: fixed;
  bottom: var(--clb-space-5);
  right: var(--clb-space-5);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: var(--clb-space-2);
  max-width: 380px;
}

/* --- Dropdown ------------------------------------------------------------- */

.dropdown-menu {
  background-color: var(--clb-color-surface);
  border-color: var(--clb-color-border);
  border-radius: var(--clb-radius-md);
  box-shadow: var(--clb-shadow-lg);
  font-size: var(--clb-text-sm);
}
.dropdown-item { color: var(--clb-color-text-2); }
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--clb-color-surface-2);
  color: var(--clb-color-text);
}
.dropdown-divider { border-color: var(--clb-color-border-hair); }

/* --- Paginazione ---------------------------------------------------------- */

.pagination {
  --bs-pagination-font-family: var(--clb-font-mono);
  --bs-pagination-font-size: var(--clb-text-xs);
  --bs-pagination-color: var(--clb-color-text-3);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-color: var(--clb-color-border-hair);
  --bs-pagination-hover-bg: var(--clb-color-surface-2);
  --bs-pagination-hover-color: var(--clb-color-text);
  --bs-pagination-active-bg: var(--clb-color-accent-hover);
  --bs-pagination-active-border-color: var(--clb-color-accent-hover);
  --bs-pagination-active-color: var(--clb-color-accent-fg);
  --bs-pagination-border-radius: var(--clb-radius-sm);
}

/* --- Statistica: filetto sopra, niente scatola --------------------------- */

.clb-stat {
  display: flex;
  flex-direction: column;
  gap: var(--clb-space-2);
  padding: var(--clb-space-5) 0;
  border-top: 1px solid var(--clb-color-border);
}

.clb-stat-label {
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--clb-track-label);
  color: var(--clb-color-text-3);
}

.clb-stat-value {
  font-family: var(--clb-font-mono);
  font-size: var(--clb-text-xl);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--clb-color-text);
}

/* --- Utility -------------------------------------------------------------- */

.clb-hair { border-top: 1px solid var(--clb-color-border-hair); }

.clb-section { padding: var(--clb-space-24) 0; }

:focus-visible {
  outline: 1px solid var(--clb-color-border-strong);
  outline-offset: 2px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--clb-color-border) transparent;
}

/* --------------------------------------------------------------------------
   5. PRINT — palette rimappata su neutro B/N
   -------------------------------------------------------------------------- */

@media print {
  :root,
  [data-bs-theme="dark"] {
    --clb-color-bg:            #ffffff;
    --clb-color-surface:       #ffffff;
    --clb-color-surface-2:     #ffffff;
    --clb-color-surface-sunk:  #ffffff;
    --clb-color-border:        #999999;
    --clb-color-border-strong: #333333;
    --clb-color-border-hair:   #cccccc;
    --clb-color-text:          #000000;
    --clb-color-text-2:        #333333;
    --clb-color-text-3:        #555555;
    --clb-color-accent:        #000000;
    --clb-color-accent-hover:  #000000;
    --clb-color-accent-text:   #000000;
    --clb-color-accent-bg:     #ffffff;
    --clb-color-success:       #000000;
    --clb-color-success-bg:    #ffffff;
    --clb-color-warning:       #000000;
    --clb-color-warning-bg:    #ffffff;
    --clb-color-danger:        #000000;
    --clb-color-danger-bg:     #ffffff;
    --clb-color-info:          #000000;
    --clb-color-info-bg:       #ffffff;
    --clb-shadow:    none;
    --clb-shadow-lg: none;
  }

  body {
    background: #ffffff;
    color: #000000;
    font-size: 10pt;
  }

  .navbar,
  .clb-sidebar,
  .btn,
  .clb-btn-square,
  .clb-chip,
  .pagination,
  .dropdown-menu,
  .clb-toast-stack,
  .clb-ghost-num,
  .clb-no-print { display: none !important; }

  .clb-section { padding: 0 0 1.5rem; }

  .card {
    border: 1px solid #999999;
    box-shadow: none;
    break-inside: avoid;
  }

  .badge {
    border: 1px solid #333333;
    background: #ffffff !important;
    color: #000000 !important;
  }

  .table { font-size: 9pt; }
  .table > thead { display: table-header-group; }
  .table > tbody > tr { break-inside: avoid; }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555555;
  }
  a[href^="#"]::after,
  a[href^="javascript:"]::after { content: ""; }
}