/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root {
  /* Brand */
  --rdg-green:        #2d7a4f;
  --rdg-green-light:  #3a9460;
  --rdg-green-pale:   #e8f5ee;
  --rdg-amber:        #e07b0d;
  --rdg-amber-pale:   #fff3e0;

  /* Sidebar */
  --sidebar-bg:       #16201a;
  --sidebar-section:  #22312a;
  --sidebar-text:     #a8bfb2;
  --sidebar-active-bg:#2d7a4f;
  --sidebar-active:   #ffffff;
  --sidebar-hover-bg: #1f2e25;
  --sidebar-width:    252px;
  --sidebar-collapsed: 68px;

  /* Surface */
  --surface-bg:       #f2f5f3;
  --surface-card:     #ffffff;
  --surface-border:   #e0e8e3;

  /* Text */
  --text-primary:     #111c15;
  --text-secondary:   #5a7066;
  --text-muted:       #8fa89e;

  /* Navbar */
  --navbar-h:         60px;

  /* Misc */
  --radius:           10px;
  --shadow-card:      0 1px 4px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);
  --transition:       0.22s ease;

  /* Component tokens — usati dai CSS secondari, ridefiniti in dark mode */
  --input-bg:              #ffffff;
  --input-bg-tinted:       #f4f8f5;
  --input-border-tinted:   #a8c0b4;
  --table-head-bg:         #f8faf9;
  --card-select-border:    #dee2e6;
  --card-select-hover-bg:  #f4f8f5;
  --card-select-hover-bdr: #a8c0b4;
  --ui-muted:              #6c757d;
  --photo-border:          #e9ecef;
  --dropzone-bg:           #f8faf9;
  --dropzone-border:       #a8c0b4;
  --thumb-bg:              #e9ecef;
  --badge-info-bg:         #ddeef8;
  --badge-info-fg:         #1a5c8a;
  --badge-neutral-bg:      #e8ecef;
  --badge-neutral-fg:      #4a5568;

  /* Card section system */
  --cs-header-bg:          var(--rdg-green-pale);
  --cs-header-border:      var(--surface-border);
  --cs-disabled-opacity:   0.45;
}

/* ═══════════════════════════════════════
   DARK MODE
   Tutte le ridefinizioni in un solo posto:
   solo variabili + pochissimi override mirati.
═══════════════════════════════════════ */
[data-theme="dark"] {
  /* Surfaces & text */
  --surface-bg:            #0f1a13;
  --surface-card:          #16201a;
  --surface-border:        #263320;
  --text-primary:          #ddeee5;
  --text-secondary:        #a8bfb2;
  --text-muted:            #6a8e7e;
  --rdg-green-pale:        #1a2e22;
  --rdg-amber-pale:        #2a1e0a;
  --shadow-card:           0 1px 4px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.25);

  /* Component tokens */
  --input-bg:              #1e2d26;
  --input-bg-tinted:       #192619;
  --input-border-tinted:   #3a5240;
  --table-head-bg:         #182518;
  --card-select-border:    #2e4038;
  --card-select-hover-bg:  #1e2f25;
  --card-select-hover-bdr: #3a5240;
  --ui-muted:              #7a9e8e;
  --photo-border:          #2e4038;
  --dropzone-bg:           #16201a;
  --dropzone-border:       #3a5240;
  --thumb-bg:              #1e2822;
  --badge-info-bg:         #0e1f2e;
  --badge-info-fg:         #6ab4e8;
  --badge-neutral-bg:      #1e2428;
  --badge-neutral-fg:      #a0aab4;

  /* Card section system */
  --cs-header-bg:          #1a2e22;
}

/* Alert: bg già gestito dalle pale-vars; solo testo leggibile */
[data-theme="dark"] .alert         { background: var(--surface-card); }
[data-theme="dark"] .alert-success { color: #7ed4a8; }
[data-theme="dark"] .alert-warning { color: #d4a855; }
[data-theme="dark"] .alert-danger  { background: #2a1010; color: #e88080; }
[data-theme="dark"] .alert-info    { background: #0e1f2e; color: #6ab4e8; }

/* Cantieri: badge di stato con colori dedicati */
[data-theme="dark"] .badge-stato-da_confermare { background: #2a1800; color: #e8943a; }
[data-theme="dark"] .badge-stato-attivo        { background: #162a1e; color: #7ed4a8; }
[data-theme="dark"] .badge-stato-sospeso       { background: #0e1f2e; color: #6ab4e8; }
[data-theme="dark"] .badge-stato-in_chiusura   { background: #2a1010; color: #e88080; }
[data-theme="dark"] .badge-stato-chiuso        { background: #1e2428; color: #a0aab4; }

/* campo-valore vuoto (cantieri dettaglio) */
[data-theme="dark"] .campo-valore.vuoto { color: var(--text-muted); }

/* Bootstrap bg-* utilities */
[data-theme="dark"] .bg-light { background-color: var(--surface-bg)   !important; color: var(--text-primary) !important; }
[data-theme="dark"] .bg-white { background-color: var(--surface-card) !important; color: var(--text-primary) !important; }

/* Bootstrap border utilities */
[data-theme="dark"] .border        { border-color: var(--surface-border) !important; }
[data-theme="dark"] .border-top    { border-top-color:    var(--surface-border) !important; }
[data-theme="dark"] .border-bottom { border-bottom-color: var(--surface-border) !important; }
[data-theme="dark"] .border-left   { border-left-color:   var(--surface-border) !important; }
[data-theme="dark"] .border-right  { border-right-color:  var(--surface-border) !important; }

/* hr */
[data-theme="dark"] hr { border-top-color: var(--surface-border); }

/* nav-tabs border-bottom (Bootstrap hardcoda #dee2e6) */
[data-theme="dark"] .nav-tabs { border-bottom-color: var(--surface-border); }

/* Bootstrap modal */
[data-theme="dark"] .modal-content   { background: var(--surface-card); border-color: var(--surface-border); color: var(--text-primary); }
[data-theme="dark"] .modal-header    { border-bottom-color: var(--surface-border); }
[data-theme="dark"] .modal-footer    { border-top-color: var(--surface-border); }
[data-theme="dark"] .close           { color: var(--text-primary); text-shadow: none; }
[data-theme="dark"] .close:hover     { color: var(--text-primary); opacity: 0.75; }

/* Bootstrap pagination */
[data-theme="dark"] .page-link                     { background: var(--surface-card); border-color: var(--surface-border); color: var(--rdg-green); }
[data-theme="dark"] .page-link:hover               { background: var(--surface-bg); border-color: var(--surface-border); color: var(--rdg-green-light); }
[data-theme="dark"] .page-item.disabled .page-link { background: var(--surface-card); border-color: var(--surface-border); color: var(--text-muted); }
[data-theme="dark"] .page-item.active  .page-link  { background: var(--rdg-green); border-color: var(--rdg-green); color: #fff; }

/* thead-light override esplicito */
[data-theme="dark"] .thead-light th  { background-color: var(--table-head-bg) !important; color: var(--text-secondary) !important; border-color: var(--surface-border) !important; }

/* badge-sospeso: colore testo hardcoded → leggibile in dark */
[data-theme="dark"] .badge-sospeso   { color: #d4a855; }

/* Toggle luna/sole */
.btn-theme-toggle {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--surface-border);
  background: var(--surface-bg);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  flex-shrink: 0;
}
.btn-theme-toggle:hover {
  background: var(--surface-card);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--surface-bg);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--text-primary);
  min-height: 100vh;
}

/* ═══════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════ */
#sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background-color: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--transition);
  z-index: 1050;
}

#sidebar.collapsed { width: var(--sidebar-collapsed); }

/* ── Brand ── */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  height: var(--navbar-h);
  min-height: var(--navbar-h);
  background-color: #0e1610;
  text-decoration: none !important;
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar-brand-icon {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--rdg-green), var(--rdg-green-light));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  color: #fff;
}

.sidebar-brand-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transition: opacity var(--transition);
}

.sidebar-brand-text strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
}

.sidebar-brand-text small {
  font-size: 0.7rem;
  color: var(--sidebar-text);
  font-weight: 400;
}

#sidebar.collapsed .sidebar-brand-text { opacity: 0; }

/* ── Scroll area ── */
.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 20px;
}

.sidebar-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: #2a3d32; border-radius: 2px; }

/* ── Section headers ── */
.section-header {
  padding: 20px 18px 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #4a6358;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--transition);
}

#sidebar.collapsed .section-header { opacity: 0; }

/* ── Nav items ── */
#sidebar .nav { padding: 0 10px; gap: 2px; display: flex; flex-direction: column; }

#sidebar .nav-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 8px;
  color: var(--sidebar-text);
  text-decoration: none !important;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--transition), color var(--transition);
  position: relative;
}

#sidebar .nav-item a:hover {
  background-color: var(--sidebar-hover-bg);
  color: #d4e8dc;
}

#sidebar .nav-item a.active {
  background-color: var(--sidebar-active-bg);
  color: var(--sidebar-active);
  font-weight: 600;
}

#sidebar .nav-item a i {
  font-size: 0.9rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.85;
}

#sidebar .nav-item a.active i { opacity: 1; }

.nav-label {
  transition: opacity var(--transition);
  overflow: hidden;
}

#sidebar.collapsed .nav-label { opacity: 0; }

/* Tooltip quando collapsed */
#sidebar.collapsed .nav-item a[data-tip] {
  position: relative;
}

#sidebar.collapsed .nav-item a[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(var(--sidebar-collapsed) - 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--text-primary);
  color: #fff;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  z-index: 2000;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* ── Sidebar footer (toggle) ── */
.sidebar-footer {
  border-top: 1px solid #1f2e25;
  padding: 12px 10px;
  flex-shrink: 0;
  height: var(--navbar-h);
}

.btn-toggle-sidebar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sidebar-text);
  font-size: 0.85rem;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--transition);
}

.btn-toggle-sidebar:hover { background: var(--sidebar-hover-bg); color: #d4e8dc; }
.btn-toggle-sidebar i { flex-shrink: 0; width: 20px; text-align: center; font-size: 0.9rem; }
.btn-toggle-sidebar span { transition: opacity var(--transition); }
#sidebar.collapsed .btn-toggle-sidebar span { opacity: 0;}

/* ═══════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════ */
#main-content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transition);
}

#main-content.expanded { margin-left: var(--sidebar-collapsed); }

/* ═══════════════════════════════════════
   TOP NAVBAR
═══════════════════════════════════════ */
.top-navbar {
  height: var(--navbar-h);
  background: var(--surface-card);
  border-bottom: 1px solid var(--surface-border);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 900;
  box-shadow: 0 1px 0 var(--surface-border);
}

.breadcrumb {
  margin: 0;
  padding: 0;
  background: none;
  font-size: 0.83rem;
  color: var(--text-muted);
}

.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); }
.breadcrumb-item.active { color: var(--text-secondary); font-weight: 500; }

/* ═══════════════════════════════════════
   PAGE CONTENT
═══════════════════════════════════════ */
.page-content {
  padding: 30px 32px;
  flex: 1;
}

.page-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}

.page-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 28px;
}

/* ═══════════════════════════════════════
   NAV TABS
═══════════════════════════════════════ */
.nav-tabs .nav-link,
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--rdg-green);
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: transparent transparent var(--surface-border);
  background: var(--rdg-green-pale);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  font-weight: 600;
  background: var(--surface-card);
  border-color: var(--surface-border) var(--surface-border) var(--surface-card);
}

/* ═══════════════════════════════════════
   CARDS
═══════════════════════════════════════ */
.card {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  background: var(--surface-card);
  margin-bottom: 24px;
}

.card-header {
  background: var(--surface-card);
  border-bottom: 1px solid var(--surface-border);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 14px 20px;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-header i { color: var(--rdg-green); }

/* ═══════════════════════════════════════
   STAT CARDS
═══════════════════════════════════════ */
.stat-card {
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background: repeating-linear-gradient(
    45deg, #fff 0px, #fff 1px, transparent 1px, transparent 8px
  );
  pointer-events: none;
}

.stat-card .stat-info { position: relative; z-index: 1; }
.stat-card .stat-icon {
  font-size: 2rem;
  opacity: 0.25;
  position: relative;
  z-index: 1;
}

.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.stat-card .stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-top: 6px;
}

.bg-cantiere   { background: linear-gradient(135deg, #1e6b3e 0%, #2d7a4f 100%); border-color: #2d7a4f; }
.bg-lavoratori { background: linear-gradient(135deg, #1a5c8a 0%, #2478b5 100%); border-color: #2478b5; }
.bg-materiali  { background: linear-gradient(135deg, #5a6e1a 0%, #7a9424 100%); border-color: #7a9424; }
.bg-scadenze   { background: linear-gradient(135deg, #8a2a1a 0%, #b53a22 100%); border-color: #b53a22; }

/* ═══════════════════════════════════════
   TABLES
═══════════════════════════════════════ */
.table {
  font-size: 0.875rem;
  color: var(--text-primary);
}

.table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-top: none;
  border-bottom: 1px solid var(--surface-border);
  padding: 10px 16px;
  background: var(--table-head-bg);
}

.table td {
  padding: 12px 16px;
  vertical-align: middle;
  border-top: 1px solid var(--surface-border);
}

.table tbody tr:hover { background: var(--rdg-green-pale); }

.table tr:nth-child(even) { background: var(--rdg-green-pale); }

/* Lista table (compact) */
#tabella-lista td, #tabella-lista tbody th { padding: .35rem .85rem; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
#tabella-lista thead th { padding: .60rem .85rem; }
#tabella-lista td:last-child, #tabella-lista th:last-child { overflow: visible; text-overflow: clip; max-width: none; }

/* Tabelle con troncamento mobile (stessa tecnica) */
.table-truncate td, .table-truncate th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn-primary {
  background: var(--rdg-green);
  border-color: var(--rdg-green);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 7px;
  padding: 8px 18px;
  font-family: 'DM Sans', sans-serif;
}

.btn-primary:hover {
  background: var(--rdg-green-light);
  border-color: var(--rdg-green-light);
}

.btn-outline-primary {
  color: var(--rdg-green);
  border-color: var(--rdg-green);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 7px;
}

.btn-outline-primary:hover {
  background: var(--rdg-green);
  border-color: var(--rdg-green);
}

/* ═══════════════════════════════════════
   BADGES DI STATO
═══════════════════════════════════════ */
.badge {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 5px;
  letter-spacing: 0.5px;
}

.badge-in-corso    { background: var(--badge-info-bg);    color: var(--badge-info-fg); }
.badge-completato  { background: var(--rdg-green-pale);  color: var(--rdg-green); }
.badge-sospeso     { background: var(--rdg-amber-pale);  color: #a06510; }
.badge-pianificato { background: var(--badge-neutral-bg); color: var(--badge-neutral-fg); }

/* ── Colori per stato cantiere (variabili riutilizzabili) ── */
.sc-da_confermare { --sc-bg: var(--badge-neutral-bg); --sc-fg: var(--badge-neutral-fg); }
.sc-attivo        { --sc-bg: var(--badge-info-bg);    --sc-fg: var(--badge-info-fg); }
.sc-sospeso       { --sc-bg: var(--rdg-amber-pale);   --sc-fg: #a06510; }
.sc-in_chiusura   { --sc-bg: var(--rdg-amber-pale);   --sc-fg: #a06510; }
.sc-chiuso        { --sc-bg: var(--rdg-green-pale);   --sc-fg: var(--rdg-green); }

.badge-sc          { background: var(--sc-bg); color: var(--sc-fg); }
.btn.btn-sc-outline                        { background: transparent; border-color: var(--sc-fg); color: var(--sc-fg); }
.btn.btn-sc-outline:hover,
.btn.btn-sc-outline:focus                  { background: var(--sc-bg); border-color: var(--sc-fg); color: var(--sc-fg); }
.btn.btn-sc-active                         { background: var(--sc-bg); border-color: var(--sc-fg); color: var(--sc-fg); font-weight: 600; }
.btn.btn-sc-active:hover,
.btn.btn-sc-active:focus                   { background: var(--sc-bg); border-color: var(--sc-fg); color: var(--sc-fg); }

/* ═══════════════════════════════════════
   ALERTS
═══════════════════════════════════════ */
.alert {
  border-radius: var(--radius);
  font-size: 0.875rem;
  border-left-width: 4px;
  border-top: none;
  border-right: none;
  border-bottom: none;
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

.alert-success { border-color: var(--rdg-green); background: var(--rdg-green-pale); color: #1d5c38; }
.alert-warning { border-color: var(--rdg-amber); background: var(--rdg-amber-pale); color: #7a4a10; }
.alert-danger  { border-color: #c0392b; background: #fdecea; color: #7a1a10; }
.alert-info    { border-color: #2478b5; background: #e8f3fb; color: #1a4a7a; }

/* ═══════════════════════════════════════
   FORMS
═══════════════════════════════════════ */
.form-control {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  border: 1px solid var(--surface-border);
  border-radius: 7px;
  padding: 9px 14px;
  color: var(--text-primary);
  background: var(--input-bg);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control-sm {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  border: 1px solid var(--surface-border);
  border-radius: 7px;
  padding: 0 9px;
  color: var(--text-primary);
  background: var(--input-bg);
  transition: border-color 0.15s, box-shadow 0.15s;
  height: 30px;
  line-height: 30px;
}

.form-control:focus {
  border-color: var(--rdg-green);
  box-shadow: 0 0 0 3px rgba(45, 122, 79, 0.12);
  outline: none;
}

label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
  margin-bottom: 5px;
}

/* Scadenze grid (mezzi) */
.scadenze-grid .col { min-width: 170px; }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
footer {
  background: var(--surface-card);
  border-top: 1px solid var(--surface-border);
  padding: 14px 32px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: 'DM Mono', monospace;
}

/* ═══════════════════════════════════════
   BURGER BUTTON
═══════════════════════════════════════ */
#burger-btn {
  display: none;
  position: fixed;
  left: 14px;
  top: 14px;
  z-index: 1200;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 8px;
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  transition: left var(--transition), background var(--transition);
}
#burger-btn:hover { background: var(--surface-bg); }
#burger-btn.sidebar-open { left: calc(var(--sidebar-width) + 10px); }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 1023px) {
  #burger-btn { display: flex; align-items: center; justify-content: center; }

  #sidebar {
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform var(--transition);
  }

  #sidebar.open { transform: translateX(0); }
  #main-content { margin-left: 0 !important; }

  .page-content { padding: 20px 16px; }
  .top-navbar { padding: 0 16px; }
}

/* ═══════════════════════════════════════
   UTILITY
═══════════════════════════════════════ */
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.cursor-pointer { cursor: pointer; }
.fs-xs { font-size: .8rem; }
.fs-sm { font-size: .875rem; }
a.link-green, .link-green { color: var(--rdg-green); text-decoration: none; }
a.link-green:hover { color: var(--rdg-green-light); text-decoration: none; }
.section-header a { color: inherit; }
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--rdg-green-pale); color: var(--rdg-green);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; cursor: default;
}
footer .version { color: var(--rdg-green); font-weight: 500; }

/* ── Meteo icon colors ─────────────────── */
:root {
  --meteo-sun:  #f0a500;
  --meteo-rain: #4a90d9;
  --meteo-hot:  #e55c2c;
  --meteo-cold: #3ab0e2;
}
.meteo-sun  { color: var(--meteo-sun);  }
.meteo-rain { color: var(--meteo-rain); }
.meteo-hot  { color: var(--meteo-hot);  }
.meteo-cold { color: var(--meteo-cold); }