/* ─────────────────────────────────────────────
 *  ML-Visits - gestionale visite PROLIGHTS HQ
 *  Design system: palette ufficiale Prolights,
 *  modello di elevazione FLAT portato da HaluConnect.
 * ───────────────────────────────────────────── */

:root {
  /* Palette ufficiale Prolights */
  --prolights-yellow:   #f3cb12;
  --prolights-night:    #141414;
  --prolights-seasalt:  #f8f8f8;
  --prolights-blue:     #5a96f0;
  --prolights-orange:   #fa640a;
  --prolights-silver:   #c1c1c1;
  --prolights-gray:     #898989;
  --prolights-xanthous: #f3b412;
  --prolights-jet:      #303030;
  --prolights-violet:   #9b6dff;

  /* Alias semantici */
  --brand: var(--prolights-yellow);
  --brand-dim: rgba(243, 203, 18, 0.12);
  --brand-bg-soft: rgba(243, 203, 18, 0.12);
  --brand-bg-hover: rgba(243, 203, 18, 0.20);
  /* Brand per TESTO: su tema scuro = giallo; su chiaro il giallo non ha
     contrasto su bianco -> override in html.light-mode con ambra scuro. */
  --brand-ink: var(--prolights-yellow);

  --save-color: var(--prolights-orange);
  --save-hover: #d75500;
  --save-bg-soft: rgba(250, 100, 10, 0.12);

  --danger: #ef4444;
  --success: #00e676;
  --warning: var(--prolights-xanthous);

  --orange-ink: var(--prolights-orange);
  --blue-ink: var(--prolights-blue);
  --success-ink: var(--success);
  --danger-ink: #ff6b6b;
  --violet-ink: var(--prolights-violet);
  --warning-ink: var(--prolights-xanthous);

  /* Spaziature */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap: 16px;
  --gap-lg: 24px;
  --gap-xl: 32px;

  --card-pad: 16px;
  --card-pad-sm: 12px;
  --card-pad-lg: 20px;

  --header-h: 60px;

  /* Inter: disegnato per le interfacce. Su Windows la pila precedente
     ricadeva su Segoe UI, perche' Avenir e' un font macOS e Nunito Sans
     non era caricato: il risultato era il font di sistema, non una
     scelta. */
  --font-brand: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                Roboto, Arial, sans-serif;
}

/* Tema scuro (default). Elevazione FLAT:
   livello 0 = pagina, livello 1 = pannelli (bordo 1px, nessuna ombra),
   livello 2 = flottanti (dialog, menu, toast: ombra). */
:root {
  --app-bg: var(--prolights-night);
  --app-panel: #1c1c1c;
  --app-panel-2: #262626;
  --app-surface: #181818;
  --app-text: var(--prolights-seasalt);
  --app-muted: #9a9a9a;
  --app-border: rgba(255, 255, 255, 0.08);
  --app-border-strong: rgba(255, 255, 255, 0.14);
  color-scheme: dark;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --hover-soft: rgba(255, 255, 255, 0.06);
  --hover-soft-2: rgba(255, 255, 255, 0.1);
  --input-bg: #222222;
  --input-bg-hover: #282828;
  --input-bg-focus: #222222;
  --btn-secondary-bg: #262626;
  --btn-secondary-bg-hover: #2f2f2f;
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.35);
  --dialog-mask: rgba(0, 0, 0, 0.6);
  --focus-ring: 0 0 0 3px rgba(243, 203, 18, 0.35);
  --focus-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.3);
  --scroll-thumb: #333;
  --scroll-thumb-hover: #444;
}

/* Tema chiaro - classe "light-mode" su <html> */
html.light-mode {
  --brand-ink: #8f5f00;    /* 5.5:1 su bianco: il giallo puro sarebbe 1.4:1 */
  --orange-ink: #b54600;
  --blue-ink: #2563eb;
  --success-ink: #15803d;
  --danger-ink: #b91c1c;
  --violet-ink: #6f42d8;
  --warning-ink: #8a6400;

  --app-bg: var(--prolights-seasalt);
  --app-panel: #ffffff;
  --app-panel-2: #ededed;
  --app-surface: #f1f1f1;
  --app-text: var(--prolights-night);
  --app-muted: #6b6b6b;
  --app-border: rgba(0, 0, 0, 0.1);
  --app-border-strong: rgba(0, 0, 0, 0.18);
  color-scheme: light;

  --hover-soft: rgba(0, 0, 0, 0.05);
  --hover-soft-2: rgba(0, 0, 0, 0.08);
  --input-bg: #f3f3f3;
  --input-bg-hover: #ececec;
  --input-bg-focus: #ffffff;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-bg-hover: #f0f0f0;
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.14);
  --dialog-mask: rgba(20, 20, 20, 0.35);
  --focus-ring: 0 0 0 3px rgba(143, 95, 0, 0.3);
  --scroll-thumb: #cfcfcf;
  --scroll-thumb-hover: #adadad;
}

* { box-sizing: border-box; }

html, body, #root {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--font-brand);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body { transition: background-color .15s ease, color .15s ease; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

/* ─── Tipografia ───
   Scala ereditata da HaluConnect. Tre pesi, con ruoli distinti:
     800  titolo di pagina e valore delle statistiche. Nient'altro.
     700  titoli di sezione (h2) e poco altro.
     600  peso di lavoro: etichette, intestazioni di tabella, badge,
          nomi nelle liste. E' qui che finisce quasi tutto.
     400  testo corrente (valore di default, non dichiarato).
   Il grassetto sulle voci ripetute (righe di tabella, celle del
   calendario) appiattisce la gerarchia invece di rafforzarla: la',
   600 e' il massimo.
   letter-spacing solo sul maiuscoletto, dove compensa le maiuscole.
   Sul testo in minuscolo allarga le parole senza dare leggibilita'. */
h1 { font-size: 24px; font-weight: 800; letter-spacing: 1px; margin: 0; }
h2 { font-size: 18px; font-weight: 700; margin: 0; }
h3 {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--app-muted); margin: 0;
}
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: var(--app-muted); }
.small { font-size: 12.5px; }
.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Layout applicazione ─── */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  height: var(--header-h);
  flex: 0 0 var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 0 var(--gap-lg);
  background: var(--app-panel);
  border-bottom: 1px solid var(--app-border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar-logo { display: flex; align-items: center; gap: 10px; }
.topbar-logo svg { height: 26px; width: auto; display: block; }
.topbar-title {
  font-size: 13px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--app-muted);
  padding-left: var(--gap); border-left: 1px solid var(--app-border);
}
.topbar-spacer { flex: 1 1 auto; }

.nav-tabs { display: flex; gap: var(--gap-xs); align-items: center; }
.nav-tab {
  appearance: none; border: 1px solid transparent; background: transparent;
  color: var(--app-muted); font-family: inherit; font-size: 13px;
  font-weight: 600; padding: 7px 14px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background-color .15s, color .15s;
  display: inline-flex; align-items: center; gap: 7px;
}
.nav-tab:hover { background: var(--hover-soft); color: var(--app-text); }
.nav-tab.is-active {
  background: var(--brand-dim); color: var(--brand-ink);
  border-color: rgba(243, 203, 18, 0.25);
}
.nav-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Lato destro della topbar, come in Tradeshow Manager: tema,
   impostazioni e chip dell'utente con il suo menu. */
.nav-right { display: flex; align-items: center; gap: var(--gap-xs); }
.icon-btn {
  appearance: none; background: transparent; border: 1px solid transparent;
  color: var(--app-muted); width: 32px; height: 32px; border-radius: var(--radius-sm);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; transition: background-color .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--hover-soft); color: var(--app-text); }
.icon-btn.is-active { background: var(--brand-dim); color: var(--brand-ink); }
.user-wrap { position: relative; margin-left: var(--gap-xs); }
.user-chip {
  display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px;
  border-radius: 999px; background: var(--btn-secondary-bg);
  border: 1px solid var(--app-border-strong); cursor: pointer; color: var(--app-text);
  font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background-color .15s ease;
}
.user-chip:hover { background: var(--btn-secondary-bg-hover); }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--brand);
  color: var(--prolights-night); display: grid; place-items: center;
  font-weight: 700; font-size: 11.5px;
}
.icon-btn:focus-visible, .user-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.user-menu {
  position: absolute; right: 0; top: calc(100% + 8px); background: var(--app-panel);
  border: 1px solid var(--app-border-strong); border-radius: var(--radius-md);
  min-width: 240px; padding: 4px; box-shadow: var(--shadow-float); z-index: 50;
}
.user-menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--app-border); margin-bottom: 4px; }
.user-menu button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--app-text); padding: 7px 10px; border-radius: var(--radius-sm);
  cursor: pointer; font: inherit; font-size: 13px;
}
.user-menu button:hover { background: var(--hover-soft); }

.page { flex: 1 1 auto; padding: var(--gap-lg); max-width: 1440px; width: 100%; margin: 0 auto; }
.page-head {
  display: flex; align-items: flex-start; gap: var(--gap);
  margin-bottom: var(--gap-lg); flex-wrap: wrap;
}
.page-head .grow { flex: 1 1 auto; min-width: 200px; }
.page-sub { color: var(--app-muted); font-size: 13px; margin-top: 4px; }

/* ─── Card / pannelli (livello 1) ─── */
.card {
  background: var(--app-panel);
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  padding: var(--card-pad);
}
.card + .card { margin-top: var(--gap); }
/* In una griglia lo spazio lo da' il gap: il margine sopra farebbe
   scendere la seconda scheda rispetto alla prima. */
.grid > .card + .card, .grid > .card { margin-top: 0; }
.card-head {
  display: flex; align-items: center; gap: var(--gap-sm);
  margin-bottom: var(--gap); flex-wrap: wrap;
}
.card-head .grow { flex: 1 1 auto; }
.card-section + .card-section { margin-top: var(--gap-lg); }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.row { display: flex; gap: var(--gap-sm); align-items: center; flex-wrap: wrap; }
.row-tight { display: flex; gap: var(--gap-xs); align-items: center; }
.stack { display: flex; flex-direction: column; gap: var(--gap-sm); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); }

/* ─── Stat tile ─── */
.stat {
  background: var(--app-panel); border: 1px solid var(--app-border);
  border-radius: var(--radius-md); padding: var(--card-pad);
}
.stat-label {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.1px; color: var(--app-muted);
}
.stat-value { font-size: 26px; font-weight: 800; line-height: 1.15; margin-top: 6px; }
/* Statistiche testuali (alloggio, trasporto): il testo va a capo invece
   di sfondare la card, e non eredita la dimensione del numero. */
.stat-value { overflow-wrap: anywhere; }
.stat-hint { font-size: 12px; color: var(--app-muted); margin-top: 4px; }
.stat-value.brand { color: var(--brand-ink); }

/* ─── Bottoni ─── */
.btn {
  appearance: none; font-family: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent; display: inline-flex; align-items: center;
  gap: 7px; justify-content: center; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--brand); border-color: var(--brand); color: #141414; }
.btn-primary:hover:not(:disabled) { background: #ffd53a; border-color: #ffd53a; }
.btn-primary:active:not(:disabled) { background: #d4ae00; border-color: #d4ae00; }

.btn-save { background: var(--save-color); border-color: var(--save-color); color: #141414; }
.btn-save:hover:not(:disabled) { background: var(--save-hover); border-color: var(--save-hover); }

.btn-secondary {
  background: var(--btn-secondary-bg); border-color: var(--app-border-strong);
  color: var(--app-text);
}
.btn-secondary:hover:not(:disabled) { background: var(--btn-secondary-bg-hover); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--app-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--hover-soft); color: var(--app-text); }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #f25f5f; border-color: #f25f5f; }

.btn-outline-danger { background: transparent; border-color: var(--danger); color: var(--danger-ink); }
.btn-outline-danger:hover:not(:disabled) { background: var(--danger); border-color: var(--danger); color: #fff; }

.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-icon { padding: 7px; width: 32px; height: 32px; }
/* Solo icona, alto come gli altri .btn-sm della stessa riga. */
.btn-icon-sm { padding-left: 9px; padding-right: 9px; }
/* L'icona ha line-height 1, il testo 1.5 (body): senza testo il
   pulsante risulterebbe piu' basso. Altezza = riga di testo + padding
   verticale (2 x 5px) + bordo (2 x 1px). */
.btn-sm.btn-icon-sm { min-height: calc(1.5em + 12px); }

/* Barra del collegamento con ML-MAIN: il pallino dice se l'evento e'
   allineato alla visita (verde), da aggiornare (giallo) o non
   collegato (grigio). */
.cal-bar { margin-bottom: 16px; padding: 10px 14px; }
.cal-bar-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px;
  background: var(--app-muted); opacity: .5;
}
.cal-bar.is-synced .cal-bar-dot { background: var(--success); opacity: 1; box-shadow: 0 0 0 3px rgba(0, 230, 118, .15); }
.cal-bar.is-stale .cal-bar-dot { background: var(--warning); opacity: 1; box-shadow: 0 0 0 3px rgba(243, 180, 18, .18); }
.cal-bar.is-stale { border-color: rgba(243, 180, 18, .45); }
.cal-bar-title { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; min-width: 0; }
.cal-bar-event {
  font-weight: 500; color: var(--app-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-bar-event::before { content: '·'; margin-right: 6px; }
.cal-bar-status { color: var(--app-muted); margin-top: 2px; }
.cal-bar.is-stale .cal-bar-status { color: var(--warning-ink); }

/* Pulsante con menu a tendina (MenuButton). */
.menu-wrap { position: relative; display: inline-flex; }
.menu-wrap > .btn .fa-chevron-down { font-size: 9px; opacity: .7; }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); background: var(--app-panel);
  border: 1px solid var(--app-border-strong); border-radius: var(--radius-md);
  min-width: 260px; padding: 4px; box-shadow: var(--shadow-float); z-index: 50;
}
.menu-pop button {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left;
  background: none; border: 0; color: var(--app-text); padding: 8px 10px;
  border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
}
.menu-pop button > i { margin-top: 2px; color: var(--app-muted); }
.menu-pop button:hover:not(:disabled) { background: var(--hover-soft); }
.menu-pop button:disabled { opacity: .45; cursor: not-allowed; }
.menu-hint { display: block; font-size: 11.5px; font-weight: 400; color: var(--app-muted); margin-top: 2px; }
.btn-block { width: 100%; }

/* ─── Form ─── */
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label {
  font-size: 12px; font-weight: 600; color: var(--app-muted);
}
.field-label .req { color: var(--danger-ink); margin-left: 2px; }
.field-hint { font-size: 11.5px; color: var(--app-muted); }

.input, .select, .textarea {
  font-family: inherit; font-size: 13.5px; width: 100%;
  background: var(--input-bg); color: var(--app-text);
  border: 1px solid var(--app-border); border-radius: var(--radius-sm);
  padding: 8px 10px;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.textarea { min-height: 76px; resize: vertical; line-height: 1.5; }
.input:hover, .select:hover, .textarea:hover {
  background: var(--input-bg-hover); border-color: var(--app-border-strong);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; background: var(--input-bg-focus);
  border-color: var(--brand); box-shadow: var(--focus-ring);
}
.input::placeholder, .textarea::placeholder { color: var(--app-muted); }
.select { cursor: pointer; }
.select option { background: var(--app-panel); color: var(--app-text); }

/* Date/time: icona nativa del selettore.
   Con color-scheme: dark il browser disegna gia' l'icona chiara, quindi
   invert(1) la riportava a nera su fondo nero, cioe' invisibile.
   Qui si regola solo l'opacita', lasciando al browser il colore. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: .75;
  cursor: pointer;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="date"]:focus::-webkit-calendar-picker-indicator,
input[type="time"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}

.checkbox { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; }
.checkbox input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }

/* ─── Badge / chip ─── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .3px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--app-border-strong); color: var(--app-muted);
  text-transform: uppercase; white-space: nowrap;
}
.badge-brand { background: var(--brand-dim); color: var(--brand-ink); border-color: rgba(243,203,18,.3); }
.badge-success { background: rgba(0,230,118,.12); color: var(--success-ink); border-color: rgba(0,230,118,.3); }
.badge-danger { background: rgba(239,68,68,.12); color: var(--danger-ink); border-color: rgba(239,68,68,.3); }
.badge-warning { background: rgba(243,180,18,.14); color: var(--warning-ink); border-color: rgba(243,180,18,.32); }
.badge-info { background: rgba(90,150,240,.14); color: var(--blue-ink); border-color: rgba(90,150,240,.32); }
.badge-violet { background: rgba(155,109,255,.14); color: var(--violet-ink); border-color: rgba(155,109,255,.32); }
.badge-neutral { background: var(--hover-soft); }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: currentColor; }

/* ─── Tabelle ─── */
.table-wrap {
  border: 1px solid var(--app-border); border-radius: var(--radius-md);
  overflow: auto; background: var(--app-panel);
}
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th {
  text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase; color: var(--app-muted);
  padding: 10px 12px; background: var(--app-surface);
  border-bottom: 1px solid var(--app-border); position: sticky; top: 0; z-index: 1;
  white-space: nowrap;
}
table.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--app-border); vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl tbody tr:hover { background: var(--hover-soft); }
.tbl-actions { display: flex; gap: 4px; justify-content: flex-end; }

/* ─── Timeline logistica ─── */
.leg {
  display: flex; align-items: stretch; gap: var(--gap);
  padding: var(--card-pad-sm) 0;
}
.leg + .leg { border-top: 1px solid var(--app-border); }
.leg-time { flex: 0 0 96px; text-align: right; }
.leg-hour { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.leg-date { font-size: 11.5px; color: var(--app-muted); }
/* "decollo"/"atterraggio" sotto l'ora, quando la scheda ha solo l'altro capo. */
.leg-note { display: block; font-size: 10.5px; font-weight: 400; color: var(--app-muted); }
.leg-rail { flex: 0 0 14px; display: flex; flex-direction: column; align-items: center; padding-top: 5px; }
.leg-node { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); flex: 0 0 10px; }
.leg-line { width: 2px; flex: 1 1 auto; background: var(--app-border); margin-top: 4px; }
.leg-body { flex: 1 1 auto; min-width: 0; }
/* Azioni della voce di agenda: spinte a destra sulla riga del titolo,
   cosi' non allungano la riga occupando una fascia tutta loro. */
.leg-body .row > .tbl-actions { margin-left: auto; }
.leg-title { font-weight: 600; font-size: 14px; }
.leg-meta { font-size: 12.5px; color: var(--app-muted); margin-top: 2px; }
/* Agenda: il gancio per trascinare una voce e dove cadrebbe. */
.leg-grip { flex: 0 0 14px; color: var(--app-muted); font-size: 12px; padding-top: 3px; text-align: center; opacity: .55; }
.leg[draggable="true"] .leg-grip { cursor: grab; opacity: 1; }
.leg[draggable="true"]:hover .leg-grip { color: var(--app-text); }
.leg.is-dragging { opacity: .4; }
.leg-lock { font-size: 10px; color: var(--app-muted); margin-right: 5px; vertical-align: 2px; }
.leg.drop-before { box-shadow: inset 0 2px 0 var(--brand); }
.leg.drop-after { box-shadow: inset 0 -2px 0 var(--brand); }
.drop-empty { border: 1px dashed var(--app-border); border-radius: 8px; padding: 14px; text-align: center; }
.drop-empty.is-over { border-color: var(--brand); color: var(--app-text); }

/* ─── Sezioni della scheda gruppo ───
   Viaggio, transfer e alloggio sono tre prenotazioni diverse, fatte
   spesso da persone diverse: separarle evita di cercare il transfer
   in coda alla riga del volo. */
.grp-sec { padding: var(--card-pad-sm) 0; }
.grp-sec + .grp-sec { border-top: 1px solid var(--app-border); }
.grp-sec-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--app-muted);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 7px;
}
/* Le righe volo dentro la sezione non ripetono il bordo: lo porta
   gia la sezione. */
.grp-sec .leg:first-of-type { padding-top: 0; }
/* Arrivi e partenze affiancati: ogni colonna ha la sua prima riga. */
.flight-cols { gap: 8px 24px; }
.flight-cols > div > .leg:first-child { padding-top: 0; }
/* Disposizione "Arrivo e partenza": due colonne, ognuna con i voli,
   il transfer e (all'arrivo) l'hotel, nell'ordine in cui si vivono. */
.grp-legs { gap: 8px 24px; padding-top: var(--card-pad-sm); }
.grp-leg { min-width: 0; }
.grp-leg .grp-sec-title { color: var(--app-text); }
.grp-leg-date { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--app-muted); }
.grp-leg > .leg:first-of-type { padding-top: 0; }
.grp-item { border-top: 1px solid var(--app-border); padding: 10px 0 0; margin-top: 10px; }
.grp-item-label { font-size: 12px; color: var(--app-muted); margin-bottom: 2px; }
.grp-summary { font-size: 12px; color: var(--app-muted); margin-bottom: 4px; }
.grp-without { font-style: italic; }
.merge-carry { margin: 4px 0 0; padding-left: 18px; }
.bulk-notice { border-left: 3px solid var(--warning); }
/* Dashboard: le prossime visite in schede. */
.next-visits { gap: 12px; }
.next-visit { padding: var(--card-pad-sm); margin: 0; }
/* Dashboard: arrivi e partenze in colonne. */
.move-list { display: flex; flex-direction: column; }
.move-row { display: grid; grid-template-columns: 16px 50px 66px minmax(0, 1fr) auto; gap: 2px 10px; align-items: start; padding: 7px 0; }
.move-row + .move-row { border-top: 1px solid var(--app-border); }
.move-row > .fa-solid, .move-row > i { padding-top: 2px; }
.move-time { font-weight: 700; }
.move-note { display: block; font-size: 10.5px; font-weight: 400; }
.move-who { min-width: 0; }
.move-who > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.move-visit a { font-weight: 600; }

/* ─── Dialog (livello 2) ─── */
.modal-mask {
  position: fixed; inset: 0; background: var(--dialog-mask);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--gap-lg); z-index: 100; overflow-y: auto;
}
.modal {
  background: var(--app-panel); border: 1px solid var(--app-border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-float);
  width: 100%; max-width: 860px; margin: auto;
}
.modal-sm { max-width: 460px; }
.modal-lg { max-width: 1100px; }
.modal-head {
  display: flex; align-items: center; gap: var(--gap-sm);
  padding: var(--card-pad-lg); border-bottom: 1px solid var(--app-border);
}
.modal-body { padding: var(--card-pad-lg); }
.modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--gap-sm);
  padding: var(--card-pad-lg); border-top: 1px solid var(--app-border);
}

/* ─── Toast ─── */
.toast-wrap {
  position: fixed; bottom: var(--gap-lg); right: var(--gap-lg);
  z-index: 200; display: flex; flex-direction: column; gap: var(--gap-sm);
  max-width: 380px;
}
.toast {
  background: var(--app-panel); border: 1px solid var(--app-border-strong);
  border-left: 3px solid var(--brand); border-radius: var(--radius-md);
  box-shadow: var(--shadow-float); padding: 12px 14px; font-size: 13px;
  display: flex; align-items: flex-start; gap: 10px;
}
.toast-error { border-left-color: var(--danger); }
.toast-success { border-left-color: var(--success); }

/* ─── Stati vuoti / caricamento ─── */
.empty {
  text-align: center; padding: var(--gap-xl) var(--gap-lg); color: var(--app-muted);
}
.empty-icon { font-size: 30px; opacity: .45; margin-bottom: var(--gap-sm); }
.empty-title { font-weight: 600; color: var(--app-text); margin-bottom: 4px; }

.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--app-border-strong); border-top-color: var(--brand);
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ─── Login ─── */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center;
  justify-content: center; padding: var(--gap-lg);
}
.login-card {
  width: 100%; max-width: 380px; background: var(--app-panel);
  border: 1px solid var(--app-border); border-radius: var(--radius-lg);
  padding: var(--gap-xl);
}
.login-logo { display: flex; justify-content: center; margin-bottom: var(--gap-lg); }
.login-logo svg { height: 46px; width: auto; }

/* ─── Responsive ─── */
@media (max-width: 860px) {
  .page { padding: var(--gap); }
  .topbar { padding: 0 var(--gap); gap: var(--gap-sm); }
  .topbar-title { display: none; }
  .nav-tab span.label { display: none; }
  .nav-tab { padding: 7px 10px; }
  .user-chip .uname { display: none; }
  .user-chip { padding: 3px; }
  .leg-time { flex: 0 0 62px; }
}

@media print {
  .topbar, .nav-tabs, .btn, .toast-wrap, .leg-grip { display: none !important; }
  .page { padding: 0; max-width: none; }
  .card { border-color: #ccc; break-inside: avoid; }
  html { background: #fff; }
}

/* ─── Calendario ─── */
.cal {
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--app-panel);
}
.cal-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
}
.cal-wd {
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--app-muted);
  text-align: left;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-day {
  min-height: 108px;
  padding: 6px 7px 8px;
  border-right: 1px solid var(--app-border);
  border-bottom: 1px solid var(--app-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.cal-grid > .cal-day:nth-child(7n) { border-right: none; }
.cal-day.is-out { background: var(--app-surface); }
.cal-day.is-out .cal-daynum { opacity: .35; }
.cal-day.is-today { box-shadow: inset 0 0 0 2px var(--brand); }

.cal-daynum {
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--app-muted);
}
.cal-day.is-today .cal-daynum { color: var(--brand-ink); }

.cal-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Voce visita: barra piena, e' il contenitore della giornata. */
.cal-visit,
.cal-ev {
  appearance: none;
  font-family: inherit;
  text-align: left;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 11.5px;
  line-height: 1.35;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.cal-visit:focus-visible,
.cal-ev:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.cal-visit {
  background: var(--brand-dim);
  color: var(--brand-ink);
  border-color: rgba(243, 203, 18, .28);
  font-weight: 600;
}
.cal-visit:hover { background: var(--brand-bg-hover); }
.cal-visit-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); flex: 0 0 6px;
}

/* Eventi puntuali: piu' leggeri delle visite, distinti per direzione. */
.cal-ev { background: var(--hover-soft); color: var(--app-text); }
.cal-ev:hover { background: var(--hover-soft-2); border-color: var(--app-border-strong); }
/* Icone aereo per arrivo e partenza, al posto delle frecce. */
.cal-ev-icon { flex: 0 0 auto; display: inline-flex; align-items: center; }
.cal-ev-icon .fa-solid { font-size: 10px; }
.cal-ev.is-arr .cal-ev-icon,
.cal-ev-icon.is-arr { color: var(--success-ink); }
.cal-ev.is-dep .cal-ev-icon,
.cal-ev-icon.is-dep { color: var(--blue-ink); }

.cal-key { display: inline-flex; align-items: center; gap: 5px; }
.cal-key + .cal-key { margin-left: 10px; }

@media (max-width: 860px) {
  .cal-day { min-height: 76px; padding: 4px 4px 6px; }
  .cal-wd { padding: 6px 5px; font-size: 10.5px; }
  .cal-visit, .cal-ev { font-size: 10.5px; padding: 2px 4px; }
  .cal-key { display: none; }
}

@media print {
  .cal-day { min-height: 92px; }
  .cal-visit, .cal-ev { border: 1px solid #ccc; }
}

/* ─── Accesso con Google ─── */
.google-btn {
  gap: 10px;
  font-weight: 600;
  padding: 10px 14px;
}
.google-btn svg { flex: 0 0 auto; }

.login-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--gap) 0;
  color: var(--app-muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.login-sep::before,
.login-sep::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--app-border);
}

/* ─── Schede delle impostazioni ───
   Sono sette: a differenza della navigazione principale devono poter
   andare a capo invece di comprimersi o uscire dallo schermo. */
.settings-tabs {
  flex-wrap: wrap;
  border-bottom: 1px solid var(--app-border);
  padding-bottom: var(--gap-sm);
}
@media (max-width: 860px) {
  .settings-tabs .nav-tab { padding: 7px 12px; }
  /* Nelle impostazioni l'etichetta serve sempre: senza, le schede
     sarebbero indistinguibili (qui non ci sono icone). */
  .settings-tabs .nav-tab span.label { display: inline; }
}

/* ─── Pulsanti icona nelle righe ───
   Su liste lunghe le etichette "Modifica / Elimina" ripetute a ogni riga
   diventano rumore: l'icona basta, il testo resta nel title. */
.btn-icon svg { display: block; }
.tbl-actions .btn-icon { color: var(--app-muted); }
.tbl-actions .btn-icon:hover:not(:disabled) {
  color: var(--app-text);
  background: var(--hover-soft);
}
.tbl-actions .btn-icon-danger:hover:not(:disabled) {
  color: var(--danger-ink);
  background: rgba(239, 68, 68, .12);
}
.tbl-actions .btn-icon:disabled { opacity: .3; }

/* FontAwesome: le icone nei pulsanti seguono il testo senza
   sbilanciarne l'allineamento verticale. */
.btn .fa-solid { font-size: .95em; line-height: 1; }
.btn-icon .fa-solid { font-size: 14px; }

/* Collegamento WhatsApp accanto al numero di telefono. */
.wa-link {
  color: #25D366;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 15px;
}
.wa-link:hover { color: #1da851; text-decoration: none; }

/* ─── Selezione multipla nelle tabelle ─── */
.selection-bar {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  margin-bottom: var(--gap);
  border-left: 3px solid var(--brand);
}
table.tbl tr.is-picked { background: var(--brand-dim); }
table.tbl tr.is-picked:hover { background: var(--brand-bg-hover); }
table.tbl input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer;
}

/* Scelta della scheda da mantenere in una fusione. */
.merge-option { transition: border-color .15s ease, background-color .15s ease; }
.merge-option.is-keep {
  border-color: var(--brand);
  background: var(--brand-dim);
}
.merge-option input[type="radio"] { accent-color: var(--brand); cursor: pointer; }

/* Inter: le funzioni tipografiche che migliorano la resa nelle tabelle.
   cv05 rende la "l" distinguibile dalla "I" maiuscola, tnum allinea le
   cifre in colonna. */
html, body, #root {
  font-feature-settings: 'cv05' 1, 'ss01' 1;
  letter-spacing: -0.006em;
}
table.tbl td, .stat-value, .leg-hour {
  font-variant-numeric: tabular-nums;
}

/* ─── Intestazioni ordinabili e filtrabili ─── */
th.th-sortable { position: relative; padding: 0; }
.th-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease, color .15s ease;
}
.th-inner:hover { background: var(--hover-soft); color: var(--app-text); }
th.is-sorted .th-inner,
th.is-filtered .th-inner { color: var(--brand-ink); }
.th-inner .fa-solid { font-size: 10px; opacity: .85; }

/* Menu del filtro: livello 2, sopra la tabella. */
.th-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  min-width: 220px;
  max-width: 320px;
  background: var(--app-panel);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.th-menu-head {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 8px 10px;
  border-bottom: 1px solid var(--app-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--app-muted);
}
.th-menu-list { max-height: 260px; overflow-y: auto; padding: 4px; }
.th-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--app-text);
}
.th-menu-item:hover { background: var(--hover-soft); }
.th-menu-item input { accent-color: var(--brand); cursor: pointer; flex: 0 0 auto; }

/* L'ultima colonna del menu non deve uscire dallo schermo. */
th.th-sortable:last-child .th-menu,
th.th-sortable:nth-last-child(2) .th-menu { left: auto; right: 0; }

/* ─── Colore delle visite in calendario, per stato ───
   Richiesta azzurra, da confermare arancione Prolights, confermata
   verde, in corso giallo Prolights. Le concluse sbiadiscono: sono
   storia. */
.cal-visit.is-requested {
  background: rgba(90, 150, 240, .14);
  color: var(--blue-ink);
  border-color: rgba(90, 150, 240, .32);
}
.cal-visit.is-requested:hover { background: rgba(90, 150, 240, .22); }
.cal-visit.is-requested .cal-visit-dot { background: var(--prolights-blue); }

.cal-visit.is-tentative {
  background: rgba(250, 100, 10, .16);
  color: var(--orange-ink);
  border-color: rgba(250, 100, 10, .34);
}
.cal-visit.is-tentative:hover { background: rgba(250, 100, 10, .24); }
.cal-visit.is-tentative .cal-visit-dot { background: var(--prolights-orange); }

.cal-visit.is-confirmed {
  background: rgba(0, 230, 118, .14);
  color: var(--success-ink);
  border-color: rgba(0, 230, 118, .32);
}
.cal-visit.is-confirmed:hover { background: rgba(0, 230, 118, .22); }
.cal-visit.is-confirmed .cal-visit-dot { background: var(--success); }

/* In corso: il giallo brand, e' quella che conta oggi. */
.cal-visit.is-ongoing {
  background: var(--brand-dim);
  color: var(--brand-ink);
  border-color: rgba(243, 203, 18, .35);
  font-weight: 700;
}
.cal-visit.is-ongoing:hover { background: var(--brand-bg-hover); }
.cal-visit.is-ongoing .cal-visit-dot { background: var(--brand); }

/* Voli: la riga resta neutra, ma prende sul bordo sinistro il colore
   della visita a cui appartiene. Con piu' visite nello stesso giorno
   e' cio' che dice di chi e' il volo, senza ripetere una barra
   colorata piena che competerebbe con la visita. */
.cal-ev.is-requested { border-left: 3px solid var(--prolights-blue); }
.cal-ev.is-tentative { border-left: 3px solid var(--prolights-orange); }
.cal-ev.is-confirmed { border-left: 3px solid var(--success); }
.cal-ev.is-ongoing   { border-left: 3px solid var(--brand); }
.cal-ev.is-closed,
.cal-ev.is-cancelled { border-left: 3px solid var(--app-border-strong); opacity: .7; }

/* Azienda accanto al volo: piu' piccola e attenuata, il numero di volo
   resta l'informazione principale. */
.cal-ev-who { color: var(--app-muted); font-size: 10.5px; }

/* Conclusa e annullata: sbiadite, sono storia. */
.cal-visit.is-closed,
.cal-visit.is-cancelled {
  background: transparent;
  color: var(--app-muted);
  border-color: var(--app-border);
}
.cal-visit.is-closed:hover,
.cal-visit.is-cancelled:hover { background: var(--hover-soft); }
.cal-visit.is-closed .cal-visit-dot { background: var(--app-muted); opacity: .6; }
.cal-visit.is-cancelled { text-decoration: line-through; }
.cal-visit.is-cancelled .cal-visit-dot { background: var(--danger); opacity: .6; }

/* Pallini della legenda. */
.cal-visit-dot.is-requested { background: var(--prolights-blue); }
.cal-visit-dot.is-tentative { background: var(--prolights-orange); }
.cal-visit-dot.is-confirmed { background: var(--success); }
.cal-visit-dot.is-ongoing { background: var(--brand); }
.cal-visit-dot.is-closed { background: var(--app-muted); opacity: .5; }

.cal-legend { flex-wrap: wrap; gap: 4px 12px; }
.cal-legend .cal-key + .cal-key { margin-left: 0; }

/* Modifica in blocco: solo i campi spuntati vengono applicati. */
.bulk-row { border-left: 3px solid transparent; transition: border-color .15s ease; }
.bulk-row.is-on { border-left-color: var(--brand); }

/* Scelta della scheda da tenere fra due duplicati. */
.dup-option { transition: border-color .15s ease, background-color .15s ease; }
.dup-option:hover:not(:disabled) {
  border-color: var(--brand);
  background: var(--brand-dim);
}
.dup-option:disabled { opacity: .5; cursor: not-allowed; }

/* Volo, data e orario stanno su una riga sola: sono un dato unico, e
   spezzarli su piu' righe rende il modulo piu' lungo del necessario.
   Le proporzioni riflettono il contenuto: il numero di volo e' corto,
   la data ha bisogno di spazio per il selettore nativo. */
.grid-flight {
  grid-template-columns: minmax(110px, 1fr) minmax(150px, 1.2fr) minmax(90px, .8fr) minmax(100px, 1fr);
}
@media (max-width: 620px) {
  .grid-flight { grid-template-columns: 1fr 1fr; }
}

/* ─── PROLIGHTS Inside (assets/inside-staff.js) ───
   Barra della capienza di una data: confermati, in attesa di
   conferma, il resto libero. Un colore per stato, lo stesso nella
   legenda. */
.inside-bar { border-left: 3px solid var(--brand); }
.inside-cap-bar {
  display: flex; height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--hover-soft); border: 1px solid var(--app-border);
}
.inside-cap-seg { display: block; height: 100%; }
.inside-cap-seg.is-confirmed, .inside-dot.is-confirmed { background: var(--success); }
.inside-cap-seg.is-submitted, .inside-dot.is-submitted { background: var(--warning); }
.inside-cap-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.inside-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  vertical-align: middle; margin-right: 2px;
}

/* Date Inside in calendario: viola e una stella al posto del pallino,
   qualunque sia lo stato. Concluse e annullate restano sbiadite come
   le altre visite. */
.cal-inside-star { color: var(--violet-ink); font-size: 9px; }
.cal-visit.is-inside:not(.is-closed):not(.is-cancelled) {
  background: rgba(155, 109, 255, .16);
  color: var(--violet-ink);
  border-color: rgba(155, 109, 255, .38);
  font-weight: 600;
}
.cal-visit.is-inside:not(.is-closed):not(.is-cancelled):hover { background: rgba(155, 109, 255, .24); }
.cal-visit.is-inside.is-closed .cal-inside-star,
.cal-visit.is-inside.is-cancelled .cal-inside-star { color: var(--app-muted); }

/* Card "Prossima Inside" della dashboard. */
.inside-next { border-left: 3px solid var(--prolights-violet); }

/* Consensi al check-in: un riquadro per consenso; quelli senza testo
   definitivo restano visibili ma spenti. */
.inside-consent { padding: 10px 12px; }
.inside-consent.is-blocked { opacity: .65; }
.inside-consent-text {
  margin-top: 6px; padding: 8px 10px; max-height: 180px; overflow: auto;
  border-left: 2px solid var(--app-border-strong); background: var(--hover-soft);
}

/* Diritti degli interessati nella scheda della persona. */
.inside-gdpr { border-top: 1px solid var(--app-border); padding-top: 12px; margin-top: 4px; }