/* Solo regole CSS native: niente @apply (non funziona con Tailwind CDN). */
/* Palette swap a Carel Design System v2 (2026-05-13). */

/* ----------------------------------------------------------------
   Sfondo del board (area centrale dell'app) — neutro chiaro DS v2
   ---------------------------------------------------------------- */
.app-body {
  background: #f8fafc;   /* ink-50 del DS */
}
.board-bg {
  /* sfumatura blu Carel molto leggera in alto, fade verso fondo neutro */
  background:
    linear-gradient(180deg, rgba(25,85,181,0.06) 0%, rgba(25,85,181,0.00) 220px),
    #f8fafc;
}

/* ----------------------------------------------------------------
   Login screen: sfondo blu Carel con sfumatura
   ---------------------------------------------------------------- */
.login-bg {
  background:
    radial-gradient(1200px 700px at 20% 10%, #2666d6 0%, transparent 60%),
    radial-gradient(900px 600px at 80% 90%, #134694 0%, transparent 55%),
    linear-gradient(135deg, #0a2a5c 0%, #1955b5 50%, #2666d6 100%);
}
.drop-shadow {
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* ----------------------------------------------------------------
   Scrollbar (coerente sia su sidebar dark che su board chiaro)
   ---------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #c2c8d0;
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

/* Sidebar dark: scrollbar più scura */
aside ::-webkit-scrollbar-thumb { background: #3a4148; }
aside ::-webkit-scrollbar-thumb:hover { background: #525a64; }

/* ----------------------------------------------------------------
   Loading spinner — blu Carel
   ---------------------------------------------------------------- */
.spinner {
  width: 28px; height: 28px;
  border: 3px solid #e2e8f0;          /* ink-200 */
  border-top-color: #1955b5;          /* carel-blue-600 */
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------
   Hover lift su righe tabella cliccabili (sembrano "card sul board")
   ---------------------------------------------------------------- */
.row-clickable { transition: background 120ms, box-shadow 120ms, transform 120ms; }
.row-clickable:hover {
  background: #ecf2fd;   /* carel-blue-50: leggero alone azzurrino su hover riga */
  cursor: pointer;
}

/* ----------------------------------------------------------------
   Effetto "card sul tavolo": leggero lift + ombra più decisa al hover
   ---------------------------------------------------------------- */
.card-lift { transition: transform 120ms, box-shadow 120ms; }
.card-lift:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(15,23,42,.12), 0 1px 2px rgba(15,23,42,.04);
}

/* ----------------------------------------------------------------
   Tabelle: header italiano professionale (sticky, sfondo neutro DS, uppercase)
   ---------------------------------------------------------------- */
table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;        /* ink-600 */
  background: #f1f5f9;   /* ink-100 */
}

/* ================================================================
   RESPONSIVE — tablet (<=1024px) e mobile (<=768px)
   ================================================================
   Aggiunto 2026-05-13. Approccio top-down: regole CSS che agiscono
   su selettori generici dell'app shell, modali e tabelle senza
   richiedere modifiche alle 26+ view. La sidebar diventa drawer,
   le tabelle scrollano orizzontalmente, le modali full-screen su
   mobile, i form passano automaticamente a una colonna.
   ---------------------------------------------------------------- */

/* ----- Hamburger button: visibile solo da <=1024px ----- */
.sidebar-toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #e2e8f0;     /* ink-200 */
  background: white;
  color: #475569;                /* ink-600 */
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  flex-shrink: 0;
}
.sidebar-toggle:hover {
  background: #f1f5f9;            /* ink-100 */
  border-color: #cbd5e1;          /* ink-300 */
}

/* ----- Backdrop drawer: visibile solo quando sidebar e' aperta su mobile ----- */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);  /* ink-900/45 */
  z-index: 35;
  backdrop-filter: blur(2px);
}
.sidebar-backdrop.show { display: block; }

/* ======================================================
   Desktop (>=1025px): sidebar collassabile "a panino" (2026-06-10)
   Hamburger sempre visibile; in stato collassato la sidebar sparisce
   e il <main> (flex-1) si allarga a tutto schermo. Stato in localStorage.
   ====================================================== */
@media (min-width: 1025px) {
  .sidebar-toggle { display: inline-flex; }
  #app-shell.sidebar-collapsed > aside#app-shell-sidebar { display: none; }
}

/* ================================================================
   AIUTO IN-APP — drawer laterale destro (2026-06-16)
   Pannello contestuale aperto dal bottone "? Aiuto" della topbar.
   Stato aperto via classe .open su #help-drawer-root. Coerente con
   il resto del chrome (navy/blu Carel, ombre sobrie DS v2).
   ================================================================ */
#help-drawer-root {
  position: fixed;
  inset: 0;
  z-index: 60;          /* sopra le modali base (40+) e sopra la topbar */
  pointer-events: none; /* invisibile/inerte finche' non e' .open */
}
#help-drawer-root.open { pointer-events: auto; }

.help-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.40);  /* ink-900/40 */
  opacity: 0;
  transition: opacity 200ms ease;
}
#help-drawer-root.open .help-backdrop { opacity: 1; }

.help-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 92vw;
  background: #ffffff;
  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(.4, 0, .2, 1);
}
#help-drawer-root.open .help-panel { transform: translateX(0); }

.help-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #f1f5f9;   /* ink-100 */
}
.help-panel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ecf2fd;                 /* carel-blue-50 */
  color: #1955b5;                      /* carel-blue-600 */
  flex-shrink: 0;
}
.help-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #64748b;                      /* ink-500 */
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 120ms, color 120ms;
}
.help-close-btn:hover { background: #f1f5f9; color: #0f172a; }

.help-search {
  position: relative;
  padding: 12px 18px;
  border-bottom: 1px solid #f1f5f9;
}
.help-search-icon {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.help-search-input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  font-size: 14px;
  border: 1px solid #cbd5e1;           /* ink-300 */
  border-radius: 8px;
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.help-search-input:focus {
  border-color: #2666d6;               /* carel-blue-500 */
  box-shadow: 0 0 0 3px rgba(38, 102, 214, 0.15);
}

.help-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 28px;
}

.help-context-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1955b5;                      /* carel-blue-600 */
  margin-bottom: 8px;
}
.help-context, .help-full { margin-bottom: 8px; }
.help-full {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}
.help-full.hidden { display: none; }

.help-actions { margin-top: 14px; }

.help-results { display: flex; flex-direction: column; gap: 8px; }
.help-result {
  text-align: left;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;           /* ink-200 */
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.help-result:hover {
  background: #ecf2fd;                 /* carel-blue-50 */
  border-color: #bcd0f5;               /* carel-blue-200 */
}

/* --- Assistente AI (RAG-lite) nel drawer di aiuto (2026-06-16) --- */
.help-assistant {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;        /* ink-100 */
}
/* L'input dell'assistente riusa .help-search-input ma senza icona a sx:
   compenso il padding sinistro pensato per l'icona della ricerca. */
.help-ask-form .help-search-input { padding-left: 12px; }
.help-ask-output:empty { display: none; }
.help-source-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  text-align: left;
  font-size: 12px;
  line-height: 1.2;
  padding: 4px 9px;
  border: 1px solid #bcd0f5;            /* carel-blue-200 */
  border-radius: 999px;
  background: #ecf2fd;                  /* carel-blue-50 */
  color: #1955b5;                       /* carel-blue-600 */
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.help-source-chip:hover {
  background: #dbe8fc;
  border-color: #95b6ef;
}

/* Su mobile il drawer occupa tutta la larghezza. */
@media (max-width: 480px) {
  .help-panel { width: 100%; max-width: 100%; }
}

/* ======================================================
   Breakpoint TABLET: <= 1024px
   La sidebar diventa drawer fixed-left. Topbar mostra hamburger.
   ====================================================== */
@media (max-width: 1024px) {
  /* Mostra il toggle */
  .sidebar-toggle { display: inline-flex; }

  /* Sidebar diventa drawer overlay */
  #app-shell aside {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 80vw;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(.4,0,.2,1);
    box-shadow: 0 8px 32px rgba(15,23,42,.25);
  }
  #app-shell aside.sidebar-open {
    transform: translateX(0);
  }

  /* Main occupa l'intera larghezza */
  #app-shell main {
    width: 100%;
    min-width: 0;
  }

  /* Topbar: padding ridotto, gap stretto */
  #app-shell main > header {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Page content: padding ridotto */
  #app-shell main > div {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Tabelle: scroll orizzontale su tablet (no card stack — richiede sweep
     delle 26 view per aggiungere data-label). Lo scroll su orizzontale
     e' la soluzione safe che funziona retroattivamente per tutte le tabelle. */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  table thead, table tbody { display: table; width: 100%; }
  /* Eccezione per quando il wrapper esterno gia' gestisce overflow */
  .table-wrap-ok table { display: table; overflow-x: visible; white-space: normal; }
}

/* ======================================================
   Breakpoint MOBILE: <= 768px
   Modali full-screen. Topbar piu' compatta. Form 1 colonna.
   ====================================================== */
@media (max-width: 768px) {
  /* Modali openModal: rimuove padding overlay + full width + sharp corners */
  .modal-overlay {
    padding: 0 !important;
    padding-top: 0 !important;
    align-items: stretch !important;
  }
  .modal-overlay > div {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .modal-overlay > div > div:nth-child(2) {
    /* body scrollabile occupa lo spazio disponibile */
    max-height: none !important;
    flex: 1;
    overflow-y: auto;
  }

  /* Topbar compatta */
  #app-shell main > header {
    height: 52px;
    padding-left: 8px;
    padding-right: 8px;
    gap: 8px;
  }
  #app-shell main > header h2 {
    font-size: 0.9rem;
  }
  /* Badge BU e user chip: piu' compatti su mobile */
  #user-unit-badge { display: none; }

  /* Form grid: forza una sola colonna su mobile.
     Tailwind grid-cols-N viene sovrascritto. Le viste che vogliono
     mantenere 2 colonne anche su mobile possono usare la classe
     .keep-cols (escludi dalla regola). */
  .grid:not(.keep-cols) {
    grid-template-columns: 1fr !important;
  }

  /* Input/select/textarea: font-size 16px previene zoom iOS su focus */
  input, select, textarea {
    font-size: 16px !important;
  }
  /* Eccezione: span dentro <select> o tag <code> piccoli restano */
  code, .text-xs, .text-\[10px\], .text-\[11px\] {
    font-size: inherit !important;
  }

  /* Bottoni full-width comodi al pollice. Solo i bottoni standalone,
     non quelli dentro flex group (icone topbar, footer modale). */
  .btn-primary, .btn-secondary, .btn-danger {
    min-height: 40px;
  }
}

/* =========================================================================
   FORM COMPATTA — 2026-08-21
   Vale SOLO dentro una form che porta la classe `form-compatta` (oggi:
   «Modifica anagrafica»). Serve a far stare piu' campi nella finestra senza
   togliere niente: le note di aiuto restano, pesano meno.

   ⚠️ Niente `!important`, e non dipende dall'ordine di caricamento:
   `.form-compatta .label` ha specificita' (0,2,0) e batte `.label`;
   `.form-compatta p` (0,1,1) batte `.mt-1` di Tailwind (0,1,0). Conta perche'
   `style.css` viene caricato PRIMA del blocco text/tailwindcss della CDN.
   ========================================================================= */
.form-compatta .label {
  margin-bottom: .1rem;
  font-size: .72rem;
  line-height: 1.2;
}
.form-compatta .input,
.form-compatta select.input {
  padding-top: .3rem;
  padding-bottom: .3rem;
}
/* Le note sotto i campi: restano leggibili, ma smettono di occupare
   mezza riga ciascuna. In questa form ogni <p> e' un suggerimento. */
.form-compatta p {
  margin-top: .1rem;
  line-height: 1.25;
}