/* ============================================================
   DESIGN TOKENS — Sistema di variabili CSS per WelfarePro
   Tema di default: "Medicale" (blu istituzionale + verde clinico)

   Le variabili sono organizzate in tre livelli:
     1. Primitivi  — valori puri (colori, misure)
     2. Semantici  — significato (primary, danger, surface…)
     3. Componenti — mapping specifici (sidebar, form, card…)
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     PRIMITIVI — palette cromatica
  ---------------------------------------------------------- */
  --blu-900: #0d2d52;
  --blu-800: #162d4a;
  --blu-700: #1a3a5e;
  --blu-600: #1d5fa8;
  --blu-500: #2b7cd8;
  --blu-300: #7ab5f5;
  --blu-100: #dceeff;
  --blu-050: #f0f6ff;

  --verde-900: #0b3d24;
  --verde-700: #1e7a4c;
  --verde-500: #28a060;
  --verde-100: #d4f0e3;

  --grigio-900: #1a202c;
  --grigio-800: #2d3748;
  --grigio-700: #4a5568;
  --grigio-500: #718096;
  --grigio-300: #cbd5e0;
  --grigio-200: #e2e8f0;
  --grigio-100: #f7fafc;
  --grigio-050: #fafbfc;

  --rosso-600: #c53030;
  --rosso-100: #fff5f5;
  --arancio-500: #dd6b20;
  --giallo-500: #d69e2e;
  --giallo-100: #fffbeb;
  --teal-600: #0891b2;

  /* ----------------------------------------------------------
     SEMANTICI — tema "Medicale" (default)
  ---------------------------------------------------------- */
  --color-primary:       var(--blu-600);
  --color-primary-dark:  var(--blu-700);
  --color-primary-light: var(--blu-100);
  --color-accent:        var(--verde-700);
  --color-accent-light:  var(--verde-100);

  --color-danger:        var(--rosso-600);
  --color-warning:       var(--arancio-500);
  --color-success:       var(--verde-700);
  --color-info:          var(--teal-600);

  --color-text-primary:  var(--grigio-900);
  --color-text-secondary:var(--grigio-700);
  --color-text-muted:    var(--grigio-500);
  --color-text-inverse:  #ffffff;

  --color-bg:            #f0f4f8;
  --color-surface:       #ffffff;
  --color-surface-alt:   var(--grigio-050);
  --color-border:        var(--grigio-200);
  --color-border-strong: var(--grigio-300);

  /* ----------------------------------------------------------
     COMPONENTI — Sidebar
  ---------------------------------------------------------- */
  --sidebar-bg:          var(--blu-800);
  --sidebar-bg-hover:    var(--blu-700);
  --sidebar-bg-active:   var(--blu-600);
  --sidebar-text:        #c8d8ea;
  --sidebar-text-active: #ffffff;
  --sidebar-border:      rgba(255,255,255,.08);
  --sidebar-logo-bg:     var(--blu-900);
  --sidebar-width:       230px;

  /* Alias usati da app.css (shell-sidebar). --color-sidebar-hover-bg e
     --color-sidebar-active-bg restano volutamente distinti (Fase 4 del
     redesign UX/UI): prima puntavano allo stesso valore (--blu-700),
     rendendo la voce attiva indistinguibile da una semplicemente in
     hover quando il mouse non è sopra. --sidebar-bg-active/-text-active
     esistevano già (usati dal componente legacy .sidebar-nav) ma non
     erano mai stati collegati al componente sidebar attuale. */
  --color-sidebar-bg:          var(--blu-800);
  --color-sidebar-hover-bg:    var(--blu-700);
  --color-sidebar-active-bg:   var(--sidebar-bg-active);
  --color-sidebar-active-text: var(--sidebar-text-active);
  --color-sidebar-text:        #c8d8ea;
  --color-sidebar-text-muted:  rgba(200,216,234,.55);
  --color-tertiary:             var(--blu-500);
  --shell-sidebar-width:        230px;
  --shell-sidebar-width-collapsed: 60px;

  /* ----------------------------------------------------------
     COMPONENTI — Form
  ---------------------------------------------------------- */
  --input-bg:            #ffffff;
  --input-border:        var(--grigio-300);
  --input-border-focus:  var(--color-primary);
  --input-shadow-focus:  0 0 0 3px rgba(29,95,168,.15);
  --input-radius:        6px;
  --input-padding-y:     .45rem;
  --input-padding-x:     .75rem;
  --label-color:         var(--grigio-800);
  --label-weight:        600;
  --label-size:          .8rem;

  /* ----------------------------------------------------------
     COMPONENTI — Card
  ---------------------------------------------------------- */
  --card-radius:         10px;
  --card-shadow:         0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --card-shadow-hover:   0 4px 12px rgba(0,0,0,.12);
  --card-border:         var(--color-border);
  --card-header-bg:      var(--grigio-050);
  --card-header-border:  var(--color-border);

  /* ----------------------------------------------------------
     COMPONENTI — Bottoni
  ---------------------------------------------------------- */
  --btn-radius:          6px;
  --btn-shadow:          0 1px 2px rgba(0,0,0,.08);
  --btn-transition:      background .15s, border-color .15s, box-shadow .15s, transform .1s;

  /* ----------------------------------------------------------
     COMPONENTI — Agenda
  ---------------------------------------------------------- */
  --agenda-slot-height:  1.5rem;
  --agenda-font-size:    .78rem;

  /* ----------------------------------------------------------
     TIPOGRAFIA
  ---------------------------------------------------------- */
  --font-family:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-base:     14px;
  --font-size-sm:       .8rem;
  --font-size-xs:       .72rem;
  --line-height-base:   1.55;

  /* ----------------------------------------------------------
     SPAZIATURE E RAGGI
  ---------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* ----------------------------------------------------------
     TRANSIZIONI
  ---------------------------------------------------------- */
  --transition-fast:   all .15s ease;
  --transition-normal: all .25s ease;
}

/* ============================================================
   TEMA: SALUTE (verde salvia + terracotta)
============================================================ */
[data-tema="salute"] {
  --color-primary:       #2d7d5f;
  --color-primary-dark:  #1f5942;
  --color-primary-light: #d4ede4;
  --color-accent:        #c05e3a;
  --color-accent-light:  #fbe8e0;
  --color-bg:            #f4f5f0;
  --sidebar-bg:          #1a4a38;
  --sidebar-bg-hover:    #1f5942;
  --sidebar-bg-active:   #2d7d5f;
  --sidebar-text:        #b8d4c8;
  --sidebar-logo-bg:     #12332a;
  --input-border-focus:  #2d7d5f;
  --input-shadow-focus:  0 0 0 3px rgba(45,125,95,.15);
  /* alias app.css */
  --color-sidebar-bg:          #1a4a38;
  --color-sidebar-hover-bg:    #1f5942;
  --color-sidebar-active-bg:   var(--sidebar-bg-active);
  --color-sidebar-active-text: var(--sidebar-text-active);
  --color-sidebar-text:        #b8d4c8;
  --color-sidebar-text-muted: rgba(184,212,200,.55);
  --color-tertiary:          #2d7d5f;
}

/* ============================================================
   TEMA: MODERNO (slate + teal)
============================================================ */
[data-tema="moderno"] {
  --color-primary:       #0891b2;
  --color-primary-dark:  #0e7490;
  --color-primary-light: #cffafe;
  --color-accent:        #7c3aed;
  --color-accent-light:  #ede9fe;
  --color-bg:            #f8fafc;
  --sidebar-bg:          #1e293b;
  --sidebar-bg-hover:    #283548;
  --sidebar-bg-active:   #0891b2;
  --sidebar-text:        #cbd5e1;
  --sidebar-logo-bg:     #0f172a;
  --input-border-focus:  #0891b2;
  --input-shadow-focus:  0 0 0 3px rgba(8,145,178,.15);
  /* alias app.css */
  --color-sidebar-bg:          #1e293b;
  --color-sidebar-hover-bg:    #283548;
  --color-sidebar-active-bg:   var(--sidebar-bg-active);
  --color-sidebar-active-text: var(--sidebar-text-active);
  --color-sidebar-text:      #cbd5e1;
  --color-sidebar-text-muted: rgba(203,213,225,.55);
  --color-tertiary:          #0891b2;
}

/* ============================================================
   APPLICAZIONE DEI TOKEN — Reset e base
============================================================ */
body {
  font-family: var(--font-family);
  font-size:   var(--font-size-base);
  background:  var(--color-bg);
  color:       var(--color-text-primary);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   SIDEBAR — Restyling completo
============================================================ */
#sidebar {
  background: var(--sidebar-bg) !important;
  width: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: var(--transition-normal);
  border-right: none;
  box-shadow: 2px 0 8px rgba(0,0,0,.15);
}

/* Logo / header sidebar */
.sidebar-brand {
  background: var(--sidebar-logo-bg) !important;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-brand .brand-title {
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
  line-height: 1.2;
}
.sidebar-brand .brand-subtitle {
  font-size: .68rem;
  color: var(--sidebar-text);
  opacity: .8;
}

/* Sezioni sidebar */
.sidebar-section-label {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--sidebar-text);
  opacity: .5;
  padding: .7rem 1rem .2rem;
}

/* Voci di menu */
.sidebar-nav .nav-link {
  color: var(--sidebar-text) !important;
  padding: .38rem 1rem;
  border-radius: var(--radius-md);
  margin: 1px .5rem;
  font-size: .82rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .6rem;
  transition: background .15s, color .15s;
  border: none;
  line-height: 1.4;
}
.sidebar-nav .nav-link i {
  font-size: .95rem;
  width: 1.1rem;
  text-align: center;
  opacity: .8;
  flex-shrink: 0;
}
.sidebar-nav .nav-link:hover {
  background: var(--sidebar-bg-hover) !important;
  color: #fff !important;
}
.sidebar-nav .nav-link:hover i { opacity: 1; }
.sidebar-nav .nav-link.active {
  background: var(--sidebar-bg-active) !important;
  color: var(--sidebar-text-active) !important;
  font-weight: 600;
}
.sidebar-nav .nav-link.active i { opacity: 1; }

/* Separatore sidebar */
.sidebar-divider {
  border-top: 1px solid var(--sidebar-border);
  margin: .5rem 0;
}

/* Utente corrente in fondo */
.sidebar-user {
  border-top: 1px solid var(--sidebar-border);
  padding: .6rem .75rem;
  margin-top: auto;
}
.sidebar-user .user-name {
  font-size: .78rem;
  font-weight: 600;
  color: #fff;
}
.sidebar-user .user-role {
  font-size: .65rem;
  color: var(--sidebar-text);
  opacity: .7;
}

/* ============================================================
   CONTENUTO PRINCIPALE
============================================================ */
#main-content {
  background: var(--color-bg);
  flex: 1;
  min-height: 100vh;
}
.content-inner {
  padding: 1.5rem;
  max-width: 1400px;
}

/* ============================================================
   CARD
============================================================ */
.card {
  border-radius: var(--card-radius) !important;
  border-color: var(--card-border) !important;
  box-shadow: var(--card-shadow);
  transition: box-shadow .2s;
  background: var(--color-surface) !important;
}
.card:hover { box-shadow: var(--card-shadow-hover); }
.card-header {
  background: var(--card-header-bg) !important;
  border-bottom-color: var(--card-header-border) !important;
  font-weight: 600;
  font-size: .85rem;
  color: var(--color-text-primary);
  padding: .65rem 1rem;
}
.card-body { padding: 1rem; }

/* ============================================================
   FORM — Restyling professionale
============================================================ */
.form-label {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--label-color);
  margin-bottom: .3rem;
  display: flex;
  align-items: center;
  gap: .25rem;
}

/* Campo obbligatorio */
.form-label .req {
  color: var(--color-danger);
  font-weight: 700;
}

.form-control, .form-select {
  background: var(--input-bg) !important;
  border: 1.5px solid var(--input-border) !important;
  border-radius: var(--input-radius) !important;
  font-size: var(--font-size-base) !important;
  padding: var(--input-padding-y) var(--input-padding-x) !important;
  color: var(--color-text-primary) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--input-border-focus) !important;
  box-shadow: var(--input-shadow-focus) !important;
  background: #fff !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--color-text-muted) !important; opacity: 1; }

.form-control.is-invalid, .form-select.is-invalid {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 3px rgba(197,48,48,.12) !important;
}
.invalid-feedback { font-size: .75rem; color: var(--color-danger); }

/* Form sm */
.form-control-sm, .form-select-sm {
  padding: .3rem .6rem !important;
  font-size: var(--font-size-sm) !important;
}

/* Sezione form con sfondo colorato */
.form-section {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.form-section-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary-light);
  padding-bottom: .4rem;
  margin-bottom: .75rem;
}

/* ============================================================
   BOTTONI
============================================================ */
.btn {
  border-radius: var(--btn-radius) !important;
  font-weight: 500 !important;
  font-size: .82rem !important;
  transition: var(--btn-transition) !important;
  box-shadow: var(--btn-shadow) !important;
  letter-spacing: .01em;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  box-shadow: 0 4px 12px rgba(29,95,168,.3) !important;
}
.btn-outline-primary {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.btn-outline-primary:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
}

/* ============================================================
   BADGE
============================================================ */
.badge { border-radius: var(--radius-pill) !important; font-weight: 500; }

/* ============================================================
   TABELLE
============================================================ */
.table { font-size: var(--font-size-sm); }
.table thead th {
  font-weight: 700;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-border);
  background: var(--color-surface-alt);
  padding: .5rem .75rem;
}
.table tbody tr:hover { background: var(--blu-050); }

/* ============================================================
   ALERT
============================================================ */
.alert {
  border-radius: var(--radius-md) !important;
  border-left-width: 4px !important;
  font-size: var(--font-size-sm);
}

/* ============================================================
   BREADCRUMB
============================================================ */
.breadcrumb { font-size: .78rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--color-text-muted); }

/* ============================================================
   HEADER DI PAGINA
============================================================ */
.page-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: .75rem 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.page-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* ============================================================
   SCROLLBAR
============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--grigio-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--grigio-500); }

/* ============================================================
   UTILITÀ
============================================================ */
.text-primary-color { color: var(--color-primary) !important; }
.bg-primary-light   { background: var(--color-primary-light) !important; }
.border-primary     { border-color: var(--color-primary) !important; }
.rounded-app        { border-radius: var(--radius-lg) !important; }
.shadow-app         { box-shadow: var(--card-shadow) !important; }

/* Nasconde overflow su testo lungo */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Fix gap Bootstrap + variabili */
.min-width-0 { min-width: 0; }