/* Hub di Famiglia RCB — Design system */

/* =========================================================
   VARIABILI
   ========================================================= */
:root {
  --colore-sfondo:      #F7F4F0;
  --colore-superficie:  #FFFFFF;
  --colore-bordo:       #E5DDD5;
  --colore-testo:       #2C2420;
  --colore-testo-2:     #6B5E57;
  --colore-accent:      #7C3D2F;
  --colore-accento:     #7C3D2F;  /* alias italiano */
  --colore-accent-2:    #A85240;
  --colore-accent-light:#F3E8E5;
  --colore-successo:    #2D6A4F;
  --colore-avviso:      #D4622A;
  --colore-pericolo:    #B91C1C;
  --colore-info:        #1D4ED8;

  --semaforo-verde:     #2D6A4F;
  --semaforo-giallo:    #B45309;
  --semaforo-arancio:   #D4622A;
  --semaforo-rosso:     #B91C1C;

  --raggio:             0.75rem;
  --raggio-sm:          0.375rem;
  --ombra:              0 1px 3px rgba(44,36,32,0.08), 0 1px 2px rgba(44,36,32,0.06);
  --ombra-md:           0 4px 6px rgba(44,36,32,0.07), 0 2px 4px rgba(44,36,32,0.05);
  --font:               'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sidebar-w:          240px;
  --header-h:           60px;
}

/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--colore-sfondo);
  color: var(--colore-testo);
  line-height: 1.5;
  min-height: 100dvh;
}
img { max-width: 100%; }
a { color: var(--colore-accent); text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* =========================================================
   LAYOUT PRINCIPALE
   ========================================================= */
#app { display: flex; min-height: 100dvh; }

/* Sidebar desktop */
.sidebar {
  width: var(--sidebar-w);
  background: var(--colore-superficie);
  border-right: 1px solid var(--colore-bordo);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: transform 0.25s ease;
}
.sidebar-logo {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--colore-bordo);
}
.sidebar-logo h1 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--colore-accent);
  letter-spacing: -0.01em;
}
.sidebar-logo p {
  font-size: 0.7rem;
  color: var(--colore-testo-2);
  margin-top: 2px;
}
.sidebar-nav { flex: 1; padding: 0.5rem 0; overflow-y: auto; }
.nav-voce {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--colore-testo-2);
  transition: background 0.15s, color 0.15s;
  border-radius: 0;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.nav-voce:hover { background: var(--colore-sfondo); color: var(--colore-testo); }
.nav-voce.attiva {
  background: var(--colore-accent-light);
  color: var(--colore-accent);
  font-weight: 600;
}
.nav-voce .icona { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.sidebar-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--colore-bordo);
  font-size: 0.75rem;
  color: var(--colore-testo-2);
}

/* Contenuto principale */
.main {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.header-top {
  height: var(--header-h);
  background: var(--colore-superficie);
  border-bottom: 1px solid var(--colore-bordo);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-ricerca {
  flex: 1;
  max-width: 360px;
  position: relative;
}
.header-ricerca input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2rem;
  background: var(--colore-sfondo);
  border: 1px solid var(--colore-bordo);
  border-radius: 2rem;
  font-size: 0.875rem;
  color: var(--colore-testo);
  outline: none;
  transition: border-color 0.15s;
}
.header-ricerca input:focus { border-color: var(--colore-accent); }
.header-ricerca .icona-ricerca {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  color: var(--colore-testo-2);
}
.header-azioni { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.header-utente {
  font-size: 0.8rem;
  color: var(--colore-testo-2);
}

.contenuto { padding: 1.5rem; flex: 1; }
.titolo-pagina {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--colore-testo);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

/* =========================================================
   CARD
   ========================================================= */
.card {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}
.card-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--colore-bordo);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-titolo {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--colore-testo);
}
.card-corpo { padding: 1.25rem; }

/* =========================================================
   GRIGLIA
   ========================================================= */
.griglia-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.griglia-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.griglia-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

/* =========================================================
   STAT CARD (dashboard)
   ========================================================= */
.stat-card {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: 1.25rem;
  box-shadow: var(--ombra);
}
.stat-card .etichetta {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--colore-testo-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.stat-card .valore {
  font-size: 2rem;
  font-weight: 700;
  color: var(--colore-testo);
  line-height: 1.1;
  margin-top: 0.25rem;
}
.stat-card .sub { font-size: 0.75rem; color: var(--colore-testo-2); margin-top: 0.25rem; }

/* =========================================================
   SEMAFORO SCADENZE
   ========================================================= */
.badge-scadenza {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
}
.scad-verde   { background: #D1FAE5; color: var(--semaforo-verde); }
.scad-giallo  { background: #FEF3C7; color: var(--semaforo-giallo); }
.scad-arancio { background: #FFEDD5; color: var(--semaforo-arancio); }
.scad-rosso   { background: #FEE2E2; color: var(--semaforo-rosso); }

/* =========================================================
   LISTA ELEMENTI
   ========================================================= */
.lista-elementi { display: flex; flex-direction: column; gap: 0; }
.elemento {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--colore-bordo);
  transition: background 0.1s;
  cursor: pointer;
}
.elemento:last-child { border-bottom: none; }
.elemento:hover { background: var(--colore-sfondo); }
.elemento-icona {
  width: 2rem;
  height: 2rem;
  border-radius: var(--raggio-sm);
  background: var(--colore-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--colore-accent);
}
.elemento-testo { flex: 1; min-width: 0; }
.elemento-testo .nome {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--colore-testo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.elemento-testo .sub {
  font-size: 0.75rem;
  color: var(--colore-testo-2);
  margin-top: 1px;
}
.elemento-destra { font-size: 0.75rem; color: var(--colore-testo-2); flex-shrink: 0; }

/* =========================================================
   BOTTONI
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--raggio-sm);
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--colore-accent);
  color: #FFF;
  border-color: var(--colore-accent);
}
.btn-primary:hover { background: var(--colore-accent-2); }
.btn-ghost {
  background: transparent;
  color: var(--colore-testo-2);
  border-color: var(--colore-bordo);
}
.btn-ghost:hover { background: var(--colore-sfondo); color: var(--colore-testo); }
.btn-sm { padding: 0.35rem 0.625rem; font-size: 0.8rem; }
.btn-icon {
  padding: 0.5rem;
  border-radius: var(--raggio-sm);
  background: transparent;
  border: 1px solid var(--colore-bordo);
  color: var(--colore-testo-2);
}
.btn-icon:hover { background: var(--colore-sfondo); color: var(--colore-testo); }

/* =========================================================
   FORM
   ========================================================= */
.campo {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1rem;
}
.campo label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--colore-testo-2);
}
.campo input,
.campo select,
.campo textarea {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-sm);
  font-size: 0.875rem;
  color: var(--colore-testo);
  background: var(--colore-superficie);
  outline: none;
  transition: border-color 0.15s;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--colore-accent); }
.campo textarea { resize: vertical; min-height: 80px; }
.griglia-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

/* =========================================================
   MODAL
   ========================================================= */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(44,36,32,0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal {
  background: var(--colore-superficie);
  border-radius: var(--raggio);
  box-shadow: 0 20px 60px rgba(44,36,32,0.2);
  width: 100%;
  max-width: 520px;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  padding: 1.25rem;
  border-bottom: 1px solid var(--colore-bordo);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.modal-titolo { font-size: 1rem; font-weight: 700; }
.modal-corpo { padding: 1.25rem; overflow-y: auto; flex: 1; }
.modal-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--colore-bordo);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* =========================================================
   PILL / CATEGORIA
   ========================================================= */
.pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  background: var(--colore-sfondo);
  color: var(--colore-testo-2);
  border: 1px solid var(--colore-bordo);
}

/* =========================================================
   AVATAR PERSONA
   ========================================================= */
.avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--colore-accent-light);
  color: var(--colore-accent);
  font-weight: 700;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; }

/* =========================================================
   LOGIN PAGE
   ========================================================= */
.login-wrap {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--colore-sfondo);
}
.login-box {
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-md);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 380px;
}
.login-box h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--colore-accent);
  margin-bottom: 0.25rem;
}
.login-box .sub { font-size: 0.875rem; color: var(--colore-testo-2); margin-bottom: 2rem; }
.errore-msg {
  background: #FEE2E2;
  color: var(--colore-pericolo);
  border-radius: var(--raggio-sm);
  padding: 0.625rem 0.875rem;
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

/* =========================================================
   SCHEDA PERSONA (dettaglio)
   ========================================================= */
.scheda-persona-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  padding: 1.25rem;
}
.scheda-persona-header .info h2 { font-size: 1.25rem; font-weight: 700; }
.scheda-persona-header .info .sub { color: var(--colore-testo-2); font-size: 0.875rem; }
.scheda-persona-header .badge-ruolo {
  margin-top: 0.375rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--colore-accent);
}

/* =========================================================
   STATO VUOTO
   ========================================================= */
.stato-vuoto {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--colore-testo-2);
}
.stato-vuoto .icona-grande { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.4; }
.stato-vuoto p { font-size: 0.875rem; }

/* =========================================================
   UPLOAD AREA
   ========================================================= */
.upload-area {
  border: 2px dashed var(--colore-bordo);
  border-radius: var(--raggio);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  color: var(--colore-testo-2);
  font-size: 0.875rem;
}
.upload-area:hover { border-color: var(--colore-accent); background: var(--colore-accent-light); }
.upload-area.drag-over { border-color: var(--colore-accent); background: var(--colore-accent-light); }

/* =========================================================
   LOADING
   ========================================================= */
.spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--colore-bordo);
  border-top-color: var(--colore-accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.caricamento {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 0.75rem;
  color: var(--colore-testo-2);
  font-size: 0.875rem;
}

/* =========================================================
   TOAST NOTIFICHE
   ========================================================= */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.toast {
  background: var(--colore-testo);
  color: #FFF;
  padding: 0.75rem 1rem;
  border-radius: var(--raggio-sm);
  font-size: 0.875rem;
  box-shadow: var(--ombra-md);
  animation: scivola-su 0.2s ease;
}
.toast.successo { background: var(--colore-successo); }
.toast.errore   { background: var(--colore-pericolo); }
@keyframes scivola-su {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   MOBILE (max 768px)
   ========================================================= */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.aperta {
    transform: translateX(0);
  }
  .main {
    margin-left: 0;
  }
  .griglia-2, .griglia-3, .griglia-4 {
    grid-template-columns: 1fr;
  }
  .griglia-form-2 {
    grid-template-columns: 1fr;
  }
  .contenuto { padding: 1rem; }

  /* Bottom navigation mobile */
  .nav-mobile {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--colore-superficie);
    border-top: 1px solid var(--colore-bordo);
    display: flex;
    justify-content: space-around;
    padding: 0.5rem 0 max(0.5rem, env(safe-area-inset-bottom));
    z-index: 100;
  }
  .nav-mobile-voce {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 0.65rem;
    color: var(--colore-testo-2);
    padding: 0.25rem 0.75rem;
    border-radius: var(--raggio-sm);
    cursor: pointer;
    background: none;
    border: none;
    transition: color 0.15s;
  }
  .nav-mobile-voce.attiva { color: var(--colore-accent); }
  .nav-mobile-voce svg { width: 1.375rem; height: 1.375rem; }

  /* FAB azione rapida */
  .fab {
    position: fixed;
    bottom: 4.5rem;
    right: 1rem;
    width: 3.25rem;
    height: 3.25rem;
    background: var(--colore-accent);
    color: #FFF;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    box-shadow: 0 4px 14px rgba(124,61,47,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 150;
    cursor: pointer;
  }

  .main { padding-bottom: 4rem; }
  .titolo-pagina { font-size: 1.125rem; }
}

/* Desktop: nascondi nav mobile e FAB */
@media (min-width: 769px) {
  .nav-mobile, .fab { display: none; }
}

/* =========================================================
   CLASSI COMUNI MODULI (usate in tutti i nuovi moduli)
   ========================================================= */

/* Input generico con classe .input */
.input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-sm);
  font-size: 0.875rem;
  color: var(--colore-testo);
  background: var(--colore-superficie);
  outline: none;
  transition: border-color 0.15s;
  font-family: var(--font);
}
.input:focus { border-color: var(--colore-accent); box-shadow: 0 0 0 2px rgba(124,61,47,0.1); }
.input[disabled] { background: var(--colore-sfondo); color: var(--colore-testo-2); cursor: not-allowed; }
textarea.input { resize: vertical; min-height: 76px; }

/* Form campo con etichetta */
.form-campo {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.875rem;
}
.form-etichetta {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--colore-testo-2);
  letter-spacing: 0.01em;
}

/* Lista elementi stile moduli nuovi */
.elemento-lista {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--colore-bordo);
  transition: background 0.1s;
}
.elemento-lista:last-child { border-bottom: none; }
.elemento-lista:hover { background: var(--colore-sfondo); margin: 0 -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; border-radius: var(--raggio-sm); }
.elemento-info { flex: 1; min-width: 0; }
.elemento-titolo {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--colore-testo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.elemento-meta {
  display: block;
  font-size: 0.75rem;
  color: var(--colore-testo-2);
  margin-top: 0.15rem;
  line-height: 1.4;
}

/* Badge colori (nuovo sistema) */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 2rem;
  white-space: nowrap;
}
.badge.verde   { background: #D1FAE5; color: #065F46; }
.badge.giallo  { background: #FEF3C7; color: #92400E; }
.badge.arancio { background: #FFEDD5; color: #9A3412; }
.badge.rosso   { background: #FEE2E2; color: #991B1B; }
.badge.grigio  { background: #F3F4F6; color: #4B5563; }

/* KPI stat card stile nuovo (usato in spese.js) */
.stat-card .stat-numero {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--colore-testo);
  line-height: 1.2;
  margin-bottom: 0.2rem;
}
.stat-card .stat-etichetta {
  font-size: 0.75rem;
  color: var(--colore-testo-2);
}
.stat-card .stat-sub {
  font-size: 0.72rem;
  color: var(--colore-testo-2);
  margin-top: 0.25rem;
}

/* Griglia form generica */
.griglia-form-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 0.75rem; }
@media (max-width: 768px) {
  .griglia-form-3 { grid-template-columns: 1fr; }
}

/* Divisore sezione */
.sezione-titolo {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--colore-accent);
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}

/* =========================================================
   RICERCA GLOBALE — dropdown risultati
   ========================================================= */
#ricerca-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--colore-superficie);
  border: 1px solid var(--colore-bordo);
  border-radius: 0.625rem;
  box-shadow: var(--ombra-md);
  z-index: 200;
  overflow: hidden;
  max-height: 400px;
  overflow-y: auto;
}
.ricerca-header {
  padding: 0.5rem 0.875rem;
  font-size: 0.72rem;
  color: var(--colore-testo-2);
  background: var(--colore-sfondo);
  border-bottom: 1px solid var(--colore-bordo);
}
.ricerca-voce {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  cursor: pointer;
  border-bottom: 1px solid var(--colore-bordo);
  transition: background 0.1s;
}
.ricerca-voce:last-child { border-bottom: none; }
.ricerca-voce:hover,
.ricerca-voce.attiva { background: var(--colore-sfondo); outline: none; }
.ricerca-voce.attiva { border-left: 3px solid var(--colore-accento); padding-left: calc(0.875rem - 3px); }
.ricerca-icona { font-size: 1rem; flex-shrink: 0; }
.ricerca-titolo {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--colore-testo);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ricerca-sub {
  font-size: 0.72rem;
  color: var(--colore-testo-2);
  white-space: nowrap;
  margin-left: auto;
}