/* ============================================================
   Barberan Gestionale – Design System
   FiC / Stripe / Linear enterprise SaaS aesthetic
   ============================================================ */

/* ──────────────────────────────────────────
   DESIGN TOKENS
────────────────────────────────────────── */
:root {
  /* Brand */
  --primary:       #0066cc;
  --primary-dark:  #0052a3;
  --primary-light: #e6f0fa;
  --primary-rgb:   0, 102, 204;

  /* Semantic */
  --success:       #10b981;
  --success-light: #ecfdf5;
  --warning:       #f59e0b;
  --warning-light: #fffbeb;
  --danger:        #ef4444;
  --danger-light:  #fef2f2;
  --info:          #06b6d4;
  --info-light:    #ecfeff;

  /* Aggiunti unificando i colori scritti a mano nelle
     regole: stesso valore di prima, un nome solo. */
  --danger-strong: #dc2626;
  --primary-bootstrap: #0d6efd;
  --primary-pale: #93c5fd;
  --success-strong: #059669;
  --surface-alt: #f8f9fa;
  --warning-deep: #b45309;
  --warning-strong: #d97706;

  /* Densita'. I valori qui sono quelli comodi, buoni per il dito e per
     uno schermo piccolo; piu' sotto un blocco li stringe dove c'e' un
     mouse e uno schermo largo. Stanno in token perche' prima erano
     numeri sparsi in dieci regole, e stringere voleva dire trovarli
     tutti. */
  --riga-y: 12px;
  --riga-x: 14px;
  --intesta-y: 10px;
  --intesta-x: 14px;
  --campo-y: 8px;
  --campo-x: 12px;
  --scheda-y: 12px;
  --scheda-corpo-y: 16px;
  --scheda-x: 18px;
  --riquadro: 18px;

  /* Bande di colonna (vedi in fondo): tinte molto chiare, perche' devono
     dire "questa colonna e' l'altro lato" senza competere col testo. */
  --banda-attivo:  #eef8f1;
  --banda-passivo: #fdf3e7;

  /* Neutral scale */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Surfaces */
  --bg:          #f5f7fa;
  --surface:     #ffffff;
  --border:      #e5e7eb;
  --border-soft: #f1f3f5;

  /* Text */
  --text:      #1f2937;
  --text-soft: #4b5563;
  --muted:     #6b7280;

  /* Layout */
  --sidebar-width:     248px;
  --sidebar-collapsed: 64px;
  --topbar-height:     56px;
  --border-radius:     8px;
  --border-radius-sm:  6px;
  --border-radius-lg:  10px;

  /* Shadows – flat SaaS style */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow:    0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 8px 24px -4px rgb(0 0 0 / 0.10);

  /* Motion */
  --transition:      all 0.15s ease;
  --transition-fast: all 0.1s ease;

  /* Bootstrap 5 variable overrides */
  --bs-body-bg:                var(--bg);
  --bs-body-color:             var(--text);
  --bs-body-font-size:         14px;
  --bs-body-font-family:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bs-border-color:           var(--border);
  --bs-border-radius:          var(--border-radius);
  --bs-border-radius-sm:       var(--border-radius-sm);
  --bs-border-radius-lg:       var(--border-radius-lg);
  --bs-card-bg:                var(--surface);
  --bs-card-border-color:      var(--border);
  --bs-card-border-radius:     var(--border-radius);
  --bs-modal-bg:               var(--surface);
  --bs-modal-border-color:     var(--border);
  --bs-modal-border-radius:    var(--border-radius);
  --bs-dropdown-bg:            var(--surface);
  --bs-dropdown-border-color:  var(--border);
  --bs-dropdown-border-radius: var(--border-radius);
  --bs-dropdown-font-size:     13px;
  --bs-dropdown-link-color:    var(--text-soft);
  --bs-dropdown-link-hover-bg: var(--gray-100);
  --bs-dropdown-link-hover-color: var(--text);
}

/* Dark mode tokens */
[data-theme="dark"] {
  --banda-attivo:  rgba(16, 185, 129, 0.10);
  --banda-passivo: rgba(245, 158, 11, 0.12);

  --primary:       #3b82f6;
  --primary-dark:  #2563eb;
  --primary-light: rgba(59, 130, 246, 0.15);
  --primary-rgb:   59, 130, 246;

  --bg:          #0b1220;
  --surface:     #1e293b;
  --border:      rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.04);

  --text:      #f1f5f9;
  --text-soft: #cbd5e1;
  --muted:     #64748b;

  --gray-50:  #0f172a;
  --gray-100: #1e293b;
  --gray-200: #334155;
  --gray-300: #475569;
  --gray-400: #64748b;
  --gray-500: #94a3b8;
  --gray-600: #cbd5e1;
  --gray-700: #e2e8f0;
  --gray-800: #f1f5f9;
  --gray-900: #f8fafc;
}

/* ──────────────────────────────────────────
   RESET & BASE
────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition);
}
a:hover { color: var(--primary-dark); }

/* ──────────────────────────────────────────
   APP LAYOUT
────────────────────────────────────────── */
.app-wrapper {
  display: flex;
  min-height: 100vh;
}

.app-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  transition: margin-left 0.2s ease;
  min-width: 0;
}

.sidebar-collapsed .app-main {
  margin-left: var(--sidebar-collapsed);
}

.app-content {
  flex: 1;
  padding: 20px 24px;
}

/* ──────────────────────────────────────────
   SIDEBAR
────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: width 0.2s ease;
  overflow: hidden;
}

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

/* Brand */
.sidebar-brand {
  height: var(--topbar-height);
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sidebar-brand .brand-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar-brand .brand-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.sidebar-brand .brand-text {
  overflow: hidden;
  transition: var(--transition);
}
.sidebar-collapsed .sidebar-brand .brand-text {
  opacity: 0;
  width: 0;
  pointer-events: none;
}

.brand-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: 0.1px;
}
.brand-subtitle {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

/* Sidebar scroll */
.sidebar-menu {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
}
.sidebar-menu::-webkit-scrollbar { width: 3px; }
.sidebar-menu::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }

/* Section titles */
.nav-section-title {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 16px 20px 6px;
}
.sidebar-collapsed .nav-section-title { display: none; }

.nav-section { margin: 0; padding: 0; }

/* Plain nav items (top-level direct links) */
.nav-item { list-style: none; margin: 0 8px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  border-radius: var(--border-radius-sm);
  border-left: 3px solid transparent;
  transition: var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.nav-link:hover {
  background: var(--gray-100);
  color: var(--text);
}
.nav-link.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
  padding-left: 9px;
}

.nav-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}
.sidebar-collapsed .nav-text { display: none; }

.nav-badge {
  background: var(--danger);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  margin-left: auto;
}
.sidebar-collapsed .nav-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 1px 4px;
  font-size: 9px;
}

/* Accordion nav groups */
.nav-group { margin: 0 8px; }

.nav-group-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
  white-space: nowrap;
}
.nav-group-btn:hover {
  background: var(--gray-100);
  color: var(--text);
}
.nav-group-btn[aria-expanded="true"],
.nav-group-btn:not(.collapsed) {
  color: var(--primary);
  font-weight: 600;
}
.sidebar-collapsed .nav-group-btn { justify-content: center; }
.sidebar-collapsed .nav-group-btn .nav-text { display: none; }
.sidebar-collapsed .nav-group-btn .nav-group-arrow { display: none; }

.nav-group-arrow { margin-left: auto; flex-shrink: 0; color: var(--gray-400); }
.nav-group-arrow svg { transition: transform 0.18s ease; }
.nav-group-btn:not(.collapsed) .nav-group-arrow svg { transform: rotate(180deg); }

/* Sub-links */
.nav-sub { list-style: none; padding: 2px 0 6px; margin: 0; }

.nav-sub-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  padding: 6px 10px 6px 42px;
  border-left: 3px solid transparent;
  border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
  transition: var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.nav-sub-link:hover {
  background: var(--gray-100);
  color: var(--text);
}
.nav-sub-link.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
  border-left: 3px solid var(--primary);
  padding-left: 39px;
}

/* Sidebar footer */
.sidebar-footer {
  padding: 10px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.sidebar-legal {
  padding: 0 16px 8px;
  text-align: center;
  font-size: 11px;
}
.sidebar-legal a {
  color: var(--muted);
  text-decoration: none;
}
.sidebar-legal a:hover { color: var(--primary); }

.sidebar-toggle {
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--border-radius-sm);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  transition: var(--transition);
}
.sidebar-toggle:hover {
  background: var(--gray-100);
  color: var(--primary);
}
.sidebar-collapsed .sidebar-toggle span { display: none; }

/* ──────────────────────────────────────────
   TOPBAR
────────────────────────────────────────── */
.app-topbar {
  height: var(--topbar-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-left h1 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-btn {
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  color: var(--muted);
  position: relative;
}
.topbar-btn:hover {
  background: var(--gray-100);
  color: var(--primary);
}

.topbar-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-soft);
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
}

.topbar-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: var(--transition);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}
.topbar-user-btn:hover { background: var(--gray-100); }

.topbar-avatar {
  width: 30px;
  height: 30px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: white;
  flex-shrink: 0;
}

.topbar-user-name {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

/* ──────────────────────────────────────────
   PAGE BAND (breadcrumb ERP)
────────────────────────────────────────── */
.page-band {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  position: sticky;
  top: var(--topbar-height);
  z-index: 90;
}
.page-band a { color: var(--muted); }
.page-band a:hover { color: var(--primary); }
.page-band .sep { color: var(--gray-300); font-size: 14px; }
.page-band .current { color: var(--text); font-weight: 600; }

/* ──────────────────────────────────────────
   CARDS
────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  box-shadow: none;
  overflow: hidden;
}

.card-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--scheda-y) var(--scheda-x);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.card-body { padding: var(--scheda-corpo-y) var(--scheda-x); }

.card-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: var(--scheda-y) var(--scheda-x);
}

/* ──────────────────────────────────────────
   KPI CARDS (Dashboard)
────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: var(--riquadro);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: var(--transition);
  box-shadow: none;
}
.kpi-card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-sm);
}

.kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--border-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-icon.blue   { background: rgba(0,102,204,0.1);  color: var(--primary); }
.kpi-icon.green  { background: rgba(16,185,129,0.1); color: var(--success); }
.kpi-icon.orange { background: rgba(245,158,11,0.1); color: var(--warning); }
.kpi-icon.red    { background: rgba(239,68,68,0.1);  color: var(--danger); }
.kpi-icon.purple { background: rgba(139,92,246,0.1); color: #7c3aed; }
.kpi-icon.cyan   { background: rgba(6,182,212,0.1);  color: var(--info); }

.kpi-content { flex: 1; min-width: 0; }

.kpi-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 4px;
}

.kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
}

.kpi-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  margin-top: 6px;
}
.kpi-trend.up   { color: var(--success); }
.kpi-trend.down { color: var(--danger); }

/* ──────────────────────────────────────────
   STATS ROW
────────────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: var(--riquadro) var(--scheda-x);
  text-align: center;
  box-shadow: none;
}
.stat-card.highlight {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.stat-card.highlight .stat-label { color: rgba(255,255,255,0.8); }
.stat-card.highlight .stat-value { color: white; }

.stat-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
}
.stat-value.success { color: var(--success); }
.stat-value.danger  { color: var(--danger); }

/* ──────────────────────────────────────────
   TABLES
────────────────────────────────────────── */
.table-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.table-header {
  padding: var(--scheda-y) var(--scheda-x);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.table-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.table-actions { display: flex; gap: 8px; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table thead th,
.table > thead > * > th {
  background: var(--bg);
  padding: var(--intesta-y) var(--intesta-x);
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table tbody td,
.table > tbody > * > td {
  padding: var(--riga-y) var(--riga-x);
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-soft);
  vertical-align: middle;
}

.table tbody tr:hover td { background: var(--gray-50); }
.table tbody tr:last-child td { border-bottom: none; }

/* Bootstrap 5 table specificity override */
.table > :not(caption) > * > * {
  border-color: var(--border-soft);
}
.table > thead > * > * {
  border-bottom-color: var(--border);
}

/* DataTables overrides */
.dataTables_wrapper { padding: 0; }

.dataTables_filter { padding: 12px 18px 8px; margin-bottom: 0; }
.dataTables_filter label { font-size: 13px; color: var(--muted); }
.dataTables_filter input {
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  padding: 6px 10px;
  font-size: 13px;
  margin-left: 6px;
  background: var(--surface);
  color: var(--text);
}

.dataTables_length { padding: 12px 18px 0; }
.dataTables_length select {
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  padding: 5px 8px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  margin: 0 4px;
}

.dataTables_info { padding: 12px 18px; color: var(--muted); font-size: 12px; }
.dataTables_paginate { padding: 10px 18px; }
.dataTables_paginate .paginate_button {
  padding: 5px 10px;
  margin: 0 2px;
  border-radius: var(--border-radius-sm);
  border: none !important;
  background: var(--gray-100) !important;
  color: var(--text-soft) !important;
  font-size: 13px;
  cursor: pointer;
}
.dataTables_paginate .paginate_button:hover {
  background: var(--gray-200) !important;
  color: var(--text) !important;
}
.dataTables_paginate .paginate_button.current {
  background: var(--primary) !important;
  color: white !important;
}
.dataTables_paginate .paginate_button.disabled { opacity: 0.4; cursor: default; }

/* ──────────────────────────────────────────
   BUTTONS
────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--border-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: white;
}

.btn-success {
  background: var(--success);
  border-color: var(--success);
  color: white;
}
.btn-success:hover { background: var(--success-strong); border-color: var(--success-strong); color: white; }

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
}
.btn-danger:hover { background: var(--danger-strong); border-color: var(--danger-strong); color: white; }

.btn-warning {
  background: var(--warning);
  border-color: var(--warning);
  color: white;
}
.btn-warning:hover { background: var(--warning-strong); border-color: var(--warning-strong); color: white; }

.btn-secondary {
  background: var(--gray-100);
  border-color: var(--gray-200);
  color: var(--text-soft);
}
.btn-secondary:hover {
  background: var(--gray-200);
  border-color: var(--gray-300);
  color: var(--text);
}

.btn-light {
  background: var(--gray-50);
  border-color: var(--border);
  color: var(--text-soft);
}

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

.btn-outline-secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
}
.btn-outline-secondary:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--text);
}

.btn-outline-danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
.btn-outline-danger:hover { background: var(--danger); color: white; }

.btn-outline-success {
  background: transparent;
  border-color: var(--success);
  color: var(--success);
}
.btn-outline-success:hover { background: var(--success); color: white; }

.btn-sm  { padding: 4px 10px; font-size: 12px; }
.btn-lg  { padding: 10px 20px; font-size: 15px; }
.btn-icon { width: 32px; height: 32px; padding: 0; }

/* Bootstrap btn-group compatibility */
.btn-group .btn + .btn { margin-left: -1px; }
.btn-group .btn:not(:first-child):not(:last-child) { border-radius: 0; }
.btn-group .btn:first-child { border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm); }
.btn-group .btn:last-child  { border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0; }

/* ──────────────────────────────────────────
   BADGES
────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  white-space: nowrap;
}

.badge.bg-success, .badge-success {
  background: var(--success-light) !important;
  color: var(--success-strong) !important;
}
.badge.bg-warning, .badge-warning {
  background: var(--warning-light) !important;
  color: var(--warning-deep) !important;
}
.badge.bg-danger, .badge-danger {
  background: var(--danger-light) !important;
  color: var(--danger-strong) !important;
}
.badge.bg-info, .badge-info {
  background: var(--info-light) !important;
  color: #0e7490 !important;
}
.badge.bg-secondary, .badge-secondary {
  background: var(--gray-100) !important;
  color: var(--text-soft) !important;
}
.badge.bg-primary, .badge-primary {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
}

/* ──────────────────────────────────────────
   FORMS
────────────────────────────────────────── */
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  margin-bottom: 5px;
}

.form-control {
  width: 100%;
  padding: var(--campo-y) var(--campo-x);
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  background: var(--surface);
  color: var(--text);
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}
.form-control::placeholder { color: var(--gray-400); }

.form-select {
  width: 100%;
  padding: var(--campo-y) var(--campo-x);
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

.form-text {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* ──────────────────────────────────────────
   ALERTS
────────────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: var(--border-radius-sm);
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  border: 1px solid transparent;
}

.alert-success {
  background: var(--success-light);
  border-color: rgba(16,185,129,0.25);
  color: #065f46;
}
.alert-warning {
  background: var(--warning-light);
  border-color: rgba(245,158,11,0.25);
  color: #92400e;
}
.alert-danger {
  background: var(--danger-light);
  border-color: rgba(239,68,68,0.25);
  color: #991b1b;
}
.alert-info {
  background: var(--info-light);
  border-color: rgba(6,182,212,0.25);
  color: #155e75;
}

/* ──────────────────────────────────────────
   DROPDOWNS
────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  padding: 6px;
  background: var(--surface);
}
.dropdown-item {
  border-radius: var(--border-radius-sm);
  padding: 7px 12px;
  font-size: 13px;
  color: var(--text-soft);
  transition: var(--transition);
}
.dropdown-item:hover {
  background: var(--gray-100);
  color: var(--text);
}
.dropdown-item.text-danger { color: var(--danger); }
.dropdown-item.text-danger:hover { background: var(--danger-light); color: var(--danger); }
.dropdown-divider { border-color: var(--border); margin: 4px 0; }

/* ──────────────────────────────────────────
   BREADCRUMBS
────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  padding: 0;
  background: none;
  list-style: none;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  margin-right: 8px;
  color: var(--gray-300);
}

/* ──────────────────────────────────────────
   MODALS
────────────────────────────────────────── */
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
.modal-header {
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
}
.modal-title { font-size: 15px; font-weight: 600; color: var(--text); }
.modal-body  { padding: 16px 18px; }
.modal-footer {
  border-top: 1px solid var(--border);
  padding: 12px 18px;
  gap: 8px;
  background: var(--bg);
}

/* ──────────────────────────────────────────
   SCADENZE WIDGET
────────────────────────────────────────── */
.scadenze-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  overflow: hidden;
  height: 100%;
}

.scadenze-header {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.scadenze-list { max-height: 380px; overflow-y: auto; }

.scadenza-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-soft);
  transition: var(--transition);
  color: inherit;
  text-decoration: none;
}
.scadenza-item:hover { background: var(--gray-50); }
.scadenza-item:last-child { border-bottom: none; }

.scadenza-date { width: 48px; text-align: center; flex-shrink: 0; }
.scadenza-day { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1; }
.scadenza-month { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

.scadenza-content { flex: 1; min-width: 0; }
.scadenza-title { font-size: 13px; font-weight: 500; color: var(--text); }
.scadenza-meta  { font-size: 11px; color: var(--muted); margin-top: 1px; }

.scadenza-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.scadenza-badge.urgent { background: var(--danger-light);  color: var(--danger); }
.scadenza-badge.soon   { background: var(--warning-light); color: var(--warning-deep); }
.scadenza-badge.ok     { background: var(--success-light); color: var(--success-strong); }

/* ──────────────────────────────────────────
   CHARTS
────────────────────────────────────────── */
.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 18px;
  height: 100%;
  box-shadow: none;
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.chart-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.chart-container { position: relative; height: 280px; }

/* ──────────────────────────────────────────
   QUICK STATS
────────────────────────────────────────── */
.quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}
.quick-stat {
  text-align: center;
  padding: 14px;
  background: var(--bg);
  border-radius: var(--border-radius-sm);
}
.quick-stat-value { font-size: 22px; font-weight: 700; color: var(--text); }
.quick-stat-label { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ──────────────────────────────────────────
   MOBILE SIDEBAR OVERLAY
────────────────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sidebar-overlay.active { display: block; opacity: 1; }

@media (min-width: 1025px) {
  .sidebar-overlay { display: none !important; }
}

/* ──────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease, width 0.2s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .app-main { margin-left: 0 !important; }
  /* Il pulsante che apre il menu deve esistere dove la barra e' fuori
     scena, cioe' fin qui.

     Era marcato `d-lg-none`, che Bootstrap nasconde da 992px in su,
     mentre questa media query manda la barra fuori fino a 1024. Fra
     992 e 1024 c'era una fascia - iPad in orizzontale, finestre piccole
     di portatile - dove la barra stava fuori schermo e **nessun
     pulsante sullo schermo la apriva**: il menu era irraggiungibile.
     Misurato a 1000px: barra a x=-248, zero pulsanti raggiungibili. */
  .topbar-btn.d-lg-none { display: inline-flex !important; }

  /* Quarantaquattro punti e' il bersaglio minimo che iOS raccomanda per
     un dito. Il pulsante del menu ne misurava trentasei: si centra, ma
     si sbaglia spesso, e su un telefono e' l'unico modo di navigare. */
  .topbar-btn {
    min-width: 44px;
    min-height: 44px;
  }


  /* Il menu aperto scorre per conto suo - settanta voci, 1530px dentro
     709 - ma `overscroll-behavior` valeva `auto`: arrivato in fondo il
     dito continua e trascina la pagina dietro. Su iOS e' l'effetto
     elastico, e da' la sensazione che il menu «rimbalzi in alto» e non
     si riesca a toccare le ultime voci.

     `contain` ferma il gesto dove finisce il menu. */
  .sidebar-menu {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* La barra intera non deve scorrere: scorre il menu dentro di lei.
     Senza questo, due aree di scorrimento annidate si rubano il gesto. */
  .sidebar {
    overscroll-behavior-y: contain;
  }
  .sidebar-collapsed .sidebar { transform: translateX(-100%); }
  .stats-row { grid-template-columns: 1fr; }
}

/* Le file di filtri sul telefono.

   `d-flex` da solo non manda a capo: una fila con due campi data da
   140px fissi e le loro etichette misura 405px, e su uno schermo da 390
   la pagina scorre in orizzontale. Su iOS la barra di scorrimento non si
   vede finche' non si scorre, quindi quei quindici pixel fuori non
   sembrano raggiungibili: sembrano persi.

   Si corregge qui e non nei template perche' quella tripletta di classi
   compare in ventotto file: ventotto modifiche che divergono, contro una
   regola. Il selettore e' la tripletta esatta, non `.d-flex`, per non
   mandare a capo le file che stanno su una riga di proposito. */
@media (max-width: 575.98px) {
  .d-flex.align-items-center.gap-2 { flex-wrap: wrap; }

  /* La larghezza fissa e' scritta in linea nei template, quindi serve
     `!important` per lasciarle il passo. Si tiene un minimo leggibile:
     un campo data piu' stretto di centoventotto pixel non si legge. */
  .d-flex.align-items-center.gap-2 input[type="date"],
  .d-flex.align-items-center.gap-2 input[type="text"],
  .d-flex.align-items-center.gap-2 select {
    width: auto !important;
    min-width: 128px;
    flex: 1 1 128px;
  }

  /* I gruppi di pulsanti vanno a capo.

     Un `.btn-group` di Bootstrap e' una fila sola per disegno: tre
     pulsanti di azione su una riga di tabella arrivano a 539px su uno
     schermo da 390, e la pagina scorre in orizzontale. Misurato su
     /fatture-fornitori.

     Andando a capo si perde l'effetto «pulsanti uniti», che e' il
     motivo per cui il gruppo esiste: quindi sul telefono si restituisce
     a ciascuno il suo angolo e un po' di spazio, altrimenti il risultato
     sembra rotto invece che adattato. */
  .btn-group {
    flex-wrap: wrap;
    gap: 4px;
  }

  .btn-group > .btn {
    border-radius: var(--border-radius-sm) !important;
    margin-left: 0 !important;
  }

  /* Le tabelle scorrono dentro invece di spingere la pagina.

     Centoventiquattro template usano `class="table"` e solo
     centouno le mettono in un `table-responsive`: le altre, con cinque
     colonne e un nome di cliente vero dentro, sono piu' larghe di 390px
     e allargano la pagina. «Fatture Scadute Recenti» del cruscotto
     avanzato e' una di quelle.

     Non si vede coi dati di esempio, dove le ragioni sociali sono corte:
     si vede sui dati veri. Per questo la regola sta qui e non in
     ventitre' template.

     `display: block` fa della tabella un contenitore che scorre; le
     righe e le celle mantengono il loro `display`, quindi l'impaginazione
     interna resta quella di una tabella. */
  .table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* Dove il contenitore c'e' gia', si lascia fare a lui: due aree di
     scorrimento annidate si rubano il gesto. */
  .table-responsive > .table {
    display: table;
    overflow-x: visible;
  }
}

@media (max-width: 768px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .topbar-date { display: none; }
  .topbar-user-name { display: none; }
  .app-content { padding: 16px; }
  .page-band { padding: 6px 16px; }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────
   UTILITIES
────────────────────────────────────────── */
.text-muted   { color: var(--muted) !important; }
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-primary { color: var(--primary) !important; }

.fw-bold   { font-weight: 600; }
.fw-normal { font-weight: 400; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.p-0  { padding: 0; }
.p-3  { padding: 16px; }
.p-4  { padding: 24px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 16px; }
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.text-center { text-align: center; }
.text-end    { text-align: right; }
.text-nowrap { white-space: nowrap; }

/* ──────────────────────────────────────────
   DARK MODE
────────────────────────────────────────── */
[data-theme="dark"] body,
[data-theme="dark"] .app-main,
[data-theme="dark"] .app-content {
  background: var(--bg);
  color: var(--text);
}

[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, var(--gray-50) 0%, var(--surface) 100%);
  border-right-color: var(--border);
}
[data-theme="dark"] .sidebar-brand  { background: transparent; border-bottom-color: var(--border); }
[data-theme="dark"] .brand-title    { color: #ffffff; }
[data-theme="dark"] .brand-subtitle { color: rgba(255,255,255,0.5); }

[data-theme="dark"] .nav-link            { color: var(--gray-500); }
[data-theme="dark"] .nav-link:hover      { background: rgba(255,255,255,0.07); color: white; }
[data-theme="dark"] .nav-link.active     { background: rgba(59,130,246,0.15); color: var(--primary-pale); border-left-color: var(--primary); }
[data-theme="dark"] .nav-section-title   { color: var(--muted); }
[data-theme="dark"] .nav-group-btn              { color: var(--gray-500); }
[data-theme="dark"] .nav-group-btn:hover        { background: rgba(255,255,255,0.07); color: white; }
[data-theme="dark"] .nav-group-btn:not(.collapsed) { color: var(--primary-pale); }
[data-theme="dark"] .nav-sub-link               { color: var(--muted); }
[data-theme="dark"] .nav-sub-link:hover         { background: rgba(255,255,255,0.06); color: white; }
[data-theme="dark"] .nav-sub-link.active        { background: rgba(59,130,246,0.15); color: var(--primary-pale); border-left-color: var(--primary); }
[data-theme="dark"] .sidebar-footer    { background: transparent; border-top-color: var(--border); }
[data-theme="dark"] .sidebar-toggle    { color: var(--muted); }
[data-theme="dark"] .sidebar-toggle:hover { background: rgba(255,255,255,0.07); color: white; }
[data-theme="dark"] .sidebar-legal a   { color: var(--muted); }

[data-theme="dark"] .app-topbar,
[data-theme="dark"] .page-band {
  background: var(--gray-50);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .topbar-left h1     { color: white; }
[data-theme="dark"] .topbar-btn         { color: rgba(255,255,255,0.7); }
[data-theme="dark"] .topbar-btn:hover   { background: rgba(255,255,255,0.08); color: white; }
[data-theme="dark"] .topbar-date        { background: rgba(255,255,255,0.05); border-color: var(--border); color: var(--text-soft); }
[data-theme="dark"] .topbar-user-btn    { color: white; }
[data-theme="dark"] .topbar-user-btn:hover { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .topbar-user-name   { color: white; }
[data-theme="dark"] .page-band          { color: var(--muted); }
[data-theme="dark"] .page-band a        { color: var(--muted); }
[data-theme="dark"] .page-band .current { color: var(--primary-pale); }

[data-theme="dark"] .card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .chart-card,
[data-theme="dark"] .scadenze-widget,
[data-theme="dark"] .table-container {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .card-header { background: var(--surface); border-bottom-color: var(--border); color: var(--text); }
[data-theme="dark"] .card-body   { color: var(--text); }
[data-theme="dark"] .card-footer { background: var(--gray-100); border-top-color: var(--border); }

[data-theme="dark"] .table thead th,
[data-theme="dark"] .table > thead > * > th {
  background: var(--gray-100);
  color: var(--muted);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .table tbody td,
[data-theme="dark"] .table > tbody > * > td {
  border-bottom-color: var(--border-soft);
  color: var(--text-soft);
}
[data-theme="dark"] .table > :not(caption) > * > * { border-color: var(--border-soft); }
[data-theme="dark"] .table tbody tr:hover td { background: rgba(255,255,255,0.04); }

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: var(--gray-100);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .form-control::placeholder { color: var(--muted); }

[data-theme="dark"] .dropdown-menu     { background: var(--surface); border-color: var(--border); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
[data-theme="dark"] .dropdown-item     { color: var(--text-soft); }
[data-theme="dark"] .dropdown-item:hover { background: var(--gray-200); color: var(--text); }
[data-theme="dark"] .dropdown-divider  { border-color: var(--border); }

[data-theme="dark"] .modal-content { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .modal-header  { border-bottom-color: var(--border); }
[data-theme="dark"] .modal-footer  { background: var(--gray-100); border-top-color: var(--border); }
[data-theme="dark"] .modal-title   { color: var(--text); }

[data-theme="dark"] .alert { border-color: var(--border); }

[data-theme="dark"] .btn-secondary {
  background: var(--gray-200);
  border-color: var(--gray-300);
  color: var(--text);
}
[data-theme="dark"] .btn-secondary:hover { background: var(--gray-300); }

[data-theme="dark"] .dataTables_filter input,
[data-theme="dark"] .dataTables_length select {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .dataTables_info { color: var(--muted); }
[data-theme="dark"] .dataTables_paginate .paginate_button {
  background: var(--gray-200) !important;
  color: var(--text-soft) !important;
}
[data-theme="dark"] .dataTables_paginate .paginate_button:hover {
  background: var(--gray-300) !important;
  color: var(--text) !important;
}

/* ──────────────────────────────────────────
   PRINT
────────────────────────────────────────── */
@media print {
  .sidebar, .app-topbar, .page-band, .btn,
  .dataTables_filter, .dataTables_length, .dataTables_paginate { display: none !important; }
  .app-main { margin-left: 0 !important; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}

/* ──────────────────────────────────────────
   UNIFORMAZIONE GRAFICA (alias classi legacy → stile fatture passive)
   Aggiunto 2026-05-19. Sovrascrive con !important gli stili inline
   nei template legacy (stats-grid/stat-box/filter-bar/filter-btn)
   per allinearli al riferimento fatture_fornitori_list.
────────────────────────────────────────── */

/* Stats: stats-grid → stats-row, stat-box → stat-card */
.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

.stat-box {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--border-radius) !important;
  padding: 20px 18px !important;
  text-align: center !important;
  box-shadow: none !important;
}

.stat-box .number,
.stat-box .stat-number,
.stat-box .value {
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: var(--text) !important;
}

/* Mantieni le tinte semantiche per i numeri */
.stat-box.primary .number { color: var(--primary) !important; }
.stat-box.success .number { color: var(--success, var(--success)) !important; }
.stat-box.warning .number { color: var(--warning, var(--warning)) !important; }
.stat-box.danger  .number { color: var(--danger,  var(--danger)) !important; }
.stat-box.info    .number { color: var(--info,    var(--primary)) !important; }
.stat-box.secondary .number { color: var(--muted, #6b7280) !important; }

.stat-box .label,
.stat-box .stat-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  margin-top: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Filtri legacy: filter-bar → contenitore flessibile senza pannello grigio */
.filter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-bottom: 1rem !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  align-items: center !important;
}

/* filter-btn → look "btn btn-sm btn-outline-secondary" */
.filter-btn {
  padding: 0.25rem 0.6rem !important;
  border: 1px solid #ced4da !important;
  border-radius: 0.25rem !important;
  background: #fff !important;
  color: #495057 !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
}
.filter-btn:hover {
  border-color: var(--primary, var(--primary-bootstrap)) !important;
  color: var(--primary, var(--primary-bootstrap)) !important;
  background: var(--surface-alt) !important;
}
.filter-btn.active {
  background: var(--primary, var(--primary-bootstrap)) !important;
  border-color: var(--primary, var(--primary-bootstrap)) !important;
  color: #fff !important;
}
.filter-btn .count {
  display: inline-block !important;
  background: rgba(0,0,0,0.08) !important;
  padding: 0.05rem 0.4rem !important;
  border-radius: 10px !important;
  font-size: 0.72rem !important;
  margin-left: 0.3rem !important;
  font-weight: 600 !important;
}
.filter-btn.active .count {
  background: rgba(255,255,255,0.25) !important;
  color: #fff !important;
}

/* Card "elenco" coerente con riferimento */
.card > .card-header {
  background: var(--surface-alt);
  border-bottom: 1px solid #e9ecef;
  font-weight: 600;
}

/* Dark mode tweaks */
[data-theme="dark"] .stat-box {
  background: var(--surface-elev, #1f2937) !important;
  border-color: var(--border, #374151) !important;
}
[data-theme="dark"] .filter-btn {
  background: var(--surface-elev, #1f2937) !important;
  border-color: var(--border, #374151) !important;
  color: var(--text, var(--border)) !important;
}
[data-theme="dark"] .filter-btn:hover { background: var(--gray-700, #374151) !important; }
[data-theme="dark"] .card > .card-header {
  background: var(--surface-elev, #1f2937);
  border-color: var(--border, #374151);
}


/* ===========================================================================
   Qui sotto stava erp-theme.css, un file a parte caricato dopo questo.
   Conteneva soltanto queste regole: il suo stesso commento diceva che tutto
   il resto era gia' confluito qui, e un file che esiste "per compatibilita'"
   e' un file che nessuno osa toccare perche' non sa piu' cosa contenga.
   Spostarle qui non cambia la cascata: components.css non tocca questi
   selettori, e windows.css li raggiunge con selettori piu' specifici, che
   vincono per specificita' e non per ordine.
   =========================================================================== */

/* ===== iPhone safe-area (notch / Dynamic Island / home indicator) ===== */
/* env() = 0 su desktop: i fallback preservano i padding originali */
@supports (padding: max(0px)) {
  .app-topbar {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
    padding-top: env(safe-area-inset-top);
    height: calc(var(--topbar-height) + env(safe-area-inset-top));
  }
  .app-content {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .sidebar { padding-bottom: env(safe-area-inset-bottom); }
}


/* ===========================================================================
   Densita' da scrivania
   ===========================================================================
   Righe piu' strette dove c'e' un mouse e uno schermo largo: in una
   schermata ci stanno circa il quaranta per cento di righe in piu', che
   su un elenco di ordini e' la differenza fra scorrere e vedere.

   `pointer: fine` vuol dire mouse o trackpad, non dito. Un bersaglio da
   cinque pixel si centra col mouse; col pollice e' un errore di battitura
   che aspetta di succedere. Chi apre la stessa pagina da un tablet vede
   le misure comode, senza che nessuno debba ricordarsi di prevederlo.

   Le pagine fatte per il telefono non arrivano mai qui: hanno il proprio
   <style> e questo foglio non lo caricano.
   =========================================================================== */
@media (pointer: fine) and (min-width: 992px) {
  :root {
    --riga-y: 5px;
    --riga-x: 9px;
    --intesta-y: 5px;
    --intesta-x: 9px;
    --campo-y: 4px;
    --campo-x: 9px;
    --scheda-y: 8px;
    --scheda-corpo-y: 11px;
    --scheda-x: 13px;
    --riquadro: 12px;
  }

  /* Un'idea presa dalla schermata Gespe: l'intestazione va a capo invece
     di allargare la colonna. Lo spazio orizzontale e' il piu' scarso di
     tutti, e "Pattuito / Forfait" su due righe ne restituisce parecchio. */
  .table thead th,
  .table > thead > * > th {
    white-space: normal;
    line-height: 1.15;
  }
}


/* ===========================================================================
   Tre idee prese dalla schermata Gespe
   ===========================================================================
   Nessuna si applica automaticamente: vanno dichiarate sulla singola
   tabella. Su una tabella priva di due lati contrapposti una banda di
   colore non veicola alcuna informazione.

   1. BANDE DI COLONNA. Il colore non marca la riga, marca la colonna, e
      dice a quale lato dell'operazione appartiene quel numero: verde
      chiaro il ricavo, arancio chiaro il costo. Si legge senza leggere
      l'intestazione, che su una tabella larga e' lontana.

   2. RIGA DEI TOTALI DENTRO LA GRIGLIA, sotto le colonne che somma invece
      che in un riquadro staccato: il totale sta incolonnato con gli
      addendi, e si verifica a occhio.

   3. RIGA DI INSERIMENTO sempre pronta in fondo, segnata con un asterisco.
      Si aggiunge senza aprire un'altra pagina.
   =========================================================================== */

.table td.lato-attivo,
.table th.lato-attivo,
.table tbody tr:hover td.lato-attivo {
  background: var(--banda-attivo);
}

.table td.lato-passivo,
.table th.lato-passivo,
.table tbody tr:hover td.lato-passivo {
  background: var(--banda-passivo);
}

/* Il bordo verticale separa le due bande: senza, due tinte chiare
   adiacenti sembrano una sfumatura invece di due colonne. */
.table td.lato-attivo + td.lato-passivo,
.table th.lato-attivo + th.lato-passivo {
  border-left: 1px solid var(--border);
}

.table tr.totali > td,
.table tr.totali > th,
.table tbody tr.totali:hover > td {
  border-top: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
}

.table tr.riga-nuova > td,
.table tbody tr.riga-nuova:hover > td {
  background: var(--bg);
  color: var(--muted);
  font-style: italic;
}

.table tr.riga-nuova .segno-nuova {
  font-style: normal;
  font-weight: 700;
  color: var(--primary);
  margin-right: 6px;
}

==============
   Schermo da telefono: la barra in alto deve starci dentro
   ===========================================================================
   Su uno schermo da 390 pixel la barra sbordava di una quindicina: il
   titolo non si lascia rimpicciolire sotto la sua larghezza naturale, e i
   24 pixel di margine per lato pesano. Il risultato era che **ogni**
   pagina del gestionale, aperta da telefono, chiedeva lo scorrimento
   laterale - comprese quelle che si usano in cabina e in magazzino.

   Sta qui, in fondo, e non nel blocco @media piu' sopra, perche' il
   blocco @supports della safe-area riporta il margine a 24 pixel e, a
   parita' di specificita', vince chi viene dopo. Il max() con env()
   conserva comunque il rispetto del notch.

   Trovato da tests/test_browser_viaggio.py, che misura la pagina su una
   finestra da telefono: nessun controllo precedente poteva vederlo,
   perche' nessuno apriva una pagina vera. */
@media (max-width: 480px) {
  .app-topbar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  /* Senza min-width:0 un elemento flex non scende sotto il suo
     contenuto, quindi il titolo spinge la barra oltre lo schermo. */
  .topbar-left { min-width: 0; }
  .topbar-left h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}