/* =====================================================================
   AUDIT SCHEDULER - design system
   Ispirazione: sala controllo / pannello di certificazione tecnica.
   Palette calma, tipografia Inter (testo) + JetBrains Mono (dati/codici),
   colori di urgenza come unico accento cromatico coerente in tutta l'app.
   ===================================================================== */

:root {
  --ink:        #1c2530;   /* testo principale */
  --ink-soft:   #56626f;   /* testo secondario */
  --paper:      #f5f7f9;   /* sfondo pagina */
  --surface:    #ffffff;   /* sfondo card/tabelle */
  --line:       #e2e6ea;   /* bordi sottili */
  --brand:      #2f6f4f;   /* verde certificazione - azioni primarie */
  --brand-dark: #24573e;
  --brand-soft: #e7f1ec;

  --overdue:    #c94c4c;
  --overdue-bg: #fbe9e9;
  --soon:       #d9822b;
  --soon-bg:    #fbeee0;
  --warn:       #c9a227;
  --warn-bg:    #faf3dd;
  --ok:         #3f8f5f;
  --ok-bg:      #e7f3ea;
  --unknown:    #9aa5b1;
  --unknown-bg: #eef0f2;
  --done:       #4d7ea8;
  --done-bg:    #e9f1f7;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(28,37,48,.06), 0 1px 12px rgba(28,37,48,.04);
}

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, .navbar-brand { letter-spacing: -0.01em; font-weight: 600; }

/* dati tabellari, date, codici: monospace per leggibilita' e precisione */
td, .mono, input[type="date"], .badge, .company-card .fw-semibold {
  font-variant-numeric: tabular-nums;
}
.data-mono { font-family: "JetBrains Mono", "SFMono-Regular", monospace; font-size: .84em; }

a { color: var(--brand-dark); }
a:hover { color: var(--brand); }

/* ===================== Navbar ===================== */
/* Zona fissa in cima: navbar + tutto cio' che una pagina aggiunge nel
   blocco "sticky_extra" di base.html (es. card statistiche, filtri e
   intestazione "finta" della tabella in dashboard.html). Un SOLO
   elemento sticky per l'intero blocco, non piu' pezzi separati da
   allineare a mano: molto piu' robusto, ed evita del tutto lo sticky
   dentro elementi tabellari (vedi nota su .table thead th), che in
   questo ambiente ha causato bug di rendering ripetuti. */
.app-sticky-zone {
  position: sticky;
  top: 0;
  z-index: 1020;
  /* Sfondo OPACO su tutto il blocco (non solo sui singoli pezzi navbar/
     filtri): senza questo, gli spazi vuoti fra un pezzo e l'altro
     restano trasparenti e le righe scorrono "a vista" dietro - visibili
     a sprazzi proprio in quegli spazi. Stesso colore dello sfondo
     pagina, cosi' il blocco fisso si confonde con essa invece di
     staccarsi visivamente. */
  background: var(--paper);
}
.app-navbar {
  background: var(--ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.brand-mark {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  background: var(--brand); margin-right: .5rem; vertical-align: 1px;
}
.app-navbar .nav-link { color: rgba(255,255,255,.72); font-weight: 500; }
.app-navbar .nav-link:hover { color: #fff; }

/* ===================== Bottoni ===================== */
.btn-primary {
  background: var(--brand); border-color: var(--brand);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--brand-dark); border-color: var(--brand-dark);
}
.btn-outline-primary {
  color: var(--brand-dark); border-color: var(--brand);
}
.btn-outline-primary:hover {
  background: var(--brand); border-color: var(--brand);
}

/* ===================== Metriche (dashboard) ===================== */
.metric-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.metric-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .65rem 1.1rem;
  min-width: 130px;
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .1s ease;
}
.metric-card:hover {
  box-shadow: 0 2px 4px rgba(28,37,48,.1), 0 2px 16px rgba(28,37,48,.08);
  color: inherit;
}
.metric-card:active { transform: translateY(1px); }
.metric-card .metric-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
}
.metric-card .metric-label {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.metric-card.m-total  { border-left-color: var(--ink-soft); }
.metric-card.m-overdue{ border-left-color: var(--overdue); }
.metric-card.m-overdue .metric-value { color: var(--overdue); }
.metric-card.m-soon   { border-left-color: var(--soon); }
.metric-card.m-soon .metric-value { color: var(--soon); }
.metric-card.m-done   { border-left-color: var(--done); }
.metric-card.m-done .metric-value { color: var(--done); }
.metric-card.m-giallo    { border-left-color: var(--warn); }
.metric-card.m-giallo .metric-value { color: var(--warn); }
.metric-card.m-arancione { border-left-color: var(--soon); }
.metric-card.m-arancione .metric-value { color: var(--soon); }
.metric-card.m-days      { border-left-color: var(--brand); }
.metric-card.m-days .metric-value { color: var(--brand); }

/* Card conformita' giorni audit IATF, nella stessa riga delle altre
   statistiche: verde se in regola (>=10gg/anno e almeno 1gg per ogni
   trimestre, contando svolto+pianificato), rosso se no. Il dettaglio
   completo e' nel title (tooltip nativo al passaggio del mouse), non
   testo sempre visibile - qui deve restare compatta come le altre card
   della riga. */
.iatf-metric-card, .metric-card.m-days { cursor: default; padding: .5rem .9rem; }
.iatf-metric-card .iatf-of, .metric-card.m-days .iatf-of {
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.iatf-metric-card.iatf-ok { border-left-color: var(--brand); }
.iatf-metric-card.iatf-ok .metric-value { color: var(--brand); }
.iatf-metric-card.iatf-warn { border-left-color: var(--overdue); }
.iatf-metric-card.iatf-warn .metric-value { color: var(--overdue); }
/* Badge trimestre e "etichetta anno" piccoli e compatti: con due anni da
   mostrare (vedi richiesta di avere sia l'anno corrente che il
   prossimo) serve tenere ogni riga il piu' bassa possibile, per
   restare vicini all'altezza delle altre card della riga. */
.iatf-metric-card .badge {
  font-size: .6rem;
  padding: .2rem .4rem;
}
.iatf-metric-card .iatf-year-chip {
  font-size: .62rem;
  font-weight: 600;
  color: var(--ink-soft);
  min-width: 1.6rem;
}

/* ===================== Pannello filtri ===================== */
.filters-panel {
  background: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .65rem .85rem;
  color: rgba(255,255,255,.9);
}
.filters-panel-title {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  margin-bottom: .75rem;
}
.filters-panel-label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255,255,255,.6);
  margin-bottom: .1rem;
}
.filters-panel .form-control,
.filters-panel .form-select {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.15);
  padding-top: .25rem;
  padding-bottom: .25rem;
}
.filters-panel .form-check-label { color: rgba(255,255,255,.75); }
.filters-panel .btn-outline-light:hover { color: var(--ink); }
.filters-panel-results {
  font-family: "JetBrains Mono", monospace;
  font-size: .85rem;
  color: rgba(255,255,255,.7);
}
.filters-panel-results span {
  color: #ffd166;
  font-weight: 600;
  font-size: 1rem;
}

/* Tom Select (menu a tendina multi-selezione con ricerca): riadattato al
   tema scuro del pannello filtri */
.filters-panel .ts-wrapper .ts-control {
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.15);
  min-height: calc(1.4em + .4rem + 2px);
  padding: .15rem .35rem;
  font-size: .8rem;
}
.filters-panel .ts-wrapper.single .ts-control { background: var(--surface); }
.ts-dropdown {
  font-size: .85rem;
  z-index: 1060;
}
.ts-dropdown .option.selected { background: var(--brand-soft); }
.ts-control > input::placeholder { color: #9aa5b1; }
.plugin-checkbox_options .option .ts-checkbox {
  margin-right: .5rem;
}

.form-control, .form-select {
  border-color: #c3ccd4;
  background-color: var(--paper);
}
.form-control:focus, .form-select:focus {
  background-color: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 .2rem rgba(47,111,79,.15);
}

/* ===================== Colori riga per urgenza ===================== */
.urgency-overdue  { background-color: var(--overdue-bg); }
.urgency-soon     { background-color: var(--soon-bg); }
.urgency-warning  { background-color: var(--warn-bg); }
.urgency-ok       { background-color: var(--ok-bg); }
.urgency-unknown  { background-color: var(--unknown-bg); }
.urgency-done     { background-color: var(--done-bg); }

/* ===================== Colori area tecnica ===================== */
.area-green  { color: var(--brand-dark); font-weight: 600; }
.area-yellow { color: #8a6d00; font-weight: 600; }
.area-none   { color: var(--ink-soft); }

.area-row-green  { background-color: var(--brand-soft); }
.area-row-yellow { background-color: var(--warn-bg); }

/* ===================== Evidenziazione nota =====================
   Sostituisce l'evidenziazione a colori usata nel campo Note di Excel:
   giallo = "da verificare", arancione = "urgente/importante". Riusa la
   stessa palette di --warn/--soon gia' usata per l'urgenza degli audit,
   cosi' il significato del colore resta coerente in tutta l'app. */
.note-badge-giallo, .note-badge-arancione {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: .1rem .4rem;
  border-radius: 4px;
  margin-bottom: .2rem;
  white-space: nowrap;
}
.note-badge-giallo    { background: var(--warn-bg); color: #8a6d00; }
.note-badge-arancione { background: var(--soon-bg); color: var(--soon); }

.table td.wrap-note.note-cell-giallo    { background-color: var(--warn-bg); }
.table td.wrap-note.note-cell-arancione { background-color: var(--soon-bg); }

.company-card .note-cell-giallo,
.company-card .note-cell-arancione {
  padding: .2rem .4rem;
  border-radius: 4px;
}
.company-card .note-cell-giallo    { background-color: var(--warn-bg); }
.company-card .note-cell-arancione { background-color: var(--soon-bg); }

/* ===================== Tabella desktop ===================== */
.table-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* SOLO overflow-y: mai la scorciatoia "overflow: hidden" qui, altrimenti
     a seconda dell'ordine con cui il browser applica le regole puo'
     tagliare anche in orizzontale (colonna STATO scomparsa su schermi piu'
     stretti della tabella) invece di limitarsi ad arrotondare gli angoli
     verticalmente. Lo scroll orizzontale resta SEMPRE possibile: vedi
     .table-responsive subito sotto. */
  overflow-y: hidden;
}
/* Scroll interno del contenitore tabella: tutte le righe sono sempre nel DOM
   (nessuna paginazione), ma un'altezza massima con scroll evita di dover
   scorrere pagine intere di layout (filtri, navbar) per raggiungere le righe
   in fondo. L'intestazione resta visibile "agganciata" in cima a QUESTO
   contenitore mentre si scorre al suo interno. */
/* Un SOLO scroll (quello della pagina): niente altezza massima/scroll
   interno qui, altrimenti si crea un secondo scroll indipendente dentro
   la tabella, oltre a quello della pagina - bisognerebbe muovere
   entrambi per arrivare in fondo, poco intuitivo. L'intestazione resta
   comunque "agganciata" durante lo scroll della pagina (vedi
   .table thead th piu' sotto), overflow-x resta per lo scroll
   orizzontale su schermi stretti. */
/* Scroll unico della pagina (nessuna altezza massima/scroll interno qui):
   vedi commento su .table thead th per la storia dello sticky header. */
.table-responsive {
  overflow-x: auto;
}
/* La barra di scorrimento nativa del sistema (specie su Windows) puo'
   restare invisibile finche' non ci si passa sopra col mouse esattamente,
   rendendo poco scopribile che c'e' altro da vedere scorrendo verso
   destra (es. la colonna Stato in fondo). La si forza sempre visibile e
   ben marcata, invece di lasciarla al comportamento di default del
   sistema operativo. */
.table-responsive {
  scrollbar-width: auto;              /* Firefox: non "thin"/nascosta */
  scrollbar-color: var(--ink-soft) var(--paper); /* Firefox: colore sempre visibile */
}
.table-responsive::-webkit-scrollbar {
  height: 12px;                       /* Chrome/Edge: barra orizzontale ben visibile */
}
.table-responsive::-webkit-scrollbar-track {
  background: var(--paper);
}
.table-responsive::-webkit-scrollbar-thumb {
  background-color: var(--ink-soft);
  border-radius: 6px;
  border: 2px solid var(--paper);
}

.table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.table thead th {
  background: var(--ink);
  color: rgba(255,255,255,.88);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 600;
  border: none;
  padding: .6rem .55rem;
  white-space: nowrap;
  line-height: 1.2;
  /* NOTA: niente position:sticky qui. Provato due volte (con offset 0 e
     poi con offset = altezza navbar via variabile CSS): in entrambi i
     casi causava un bug di rendering Chromium - l'intestazione spariva o
     si sfalsava durante lo scroll, lasciando intravedere righe sotto.
     Confermato un problema reale e ripetibile in questo ambiente, non un
     caso isolato: meglio un'intestazione semplice e sempre affidabile
     che si perde di vista scorrendo, piuttosto che una che si comporta
     in modo incoerente. Se si vuole riprovare in futuro, conviene una
     barra "finta" separata dalla tabella (un div sticky con le sole
     etichette delle colonne, fuori da <table>/<thead>) invece di
     sticky diretto su <th> - i problemi di sticky dentro elementi
     tabellari sono un problema noto e diffuso, non specifico di questo
     codice. */
}
.table thead th a { color: inherit; text-decoration: none; }
.table thead th a:hover { color: #fff; }

/* Intestazione "finta" della tabella dashboard (vedi commento HTML nel
   template): stesso aspetto di .table thead th ma su un div normale, mai
   dentro <table> - JS ne sincronizza larghezze/scroll con l'intestazione
   vera. display:flex e non display:table cosi' width in px su ogni
   cella figlia funziona in modo prevedibile. */
.sticky-fake-header {
  display: flex;
  background: var(--ink);
  color: rgba(255,255,255,.88);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
}
.sticky-fake-header > div {
  padding: .6rem .55rem;
  box-sizing: border-box;
  flex: 0 0 auto;
  overflow: hidden;
}

.table td {
  padding: .5rem .55rem;
  border-top: 1px solid var(--line);
  vertical-align: middle;
  font-size: .82rem;
  white-space: nowrap;
}
/* La colonna Azienda e' l'unica che deve restare compatta: larghezza
   massima fissa e testo che va a capo (sulle spaziature, non a meta'
   parola) invece di allargare tutta la tabella. Le altre colonne restano
   a larghezza naturale (auto), calcolata dal browser sul loro contenuto:
   niente troncamenti "..." su date o codici. */
.table td:first-child {
  white-space: normal;
  max-width: 190px;
  overflow-wrap: break-word;
}
.table td.wrap-note { white-space: normal; }
/* Accento colore urgenza: bordo sinistro diretto sulla prima cella della
   riga, invece di un elemento decorativo posizionato "absolute" dentro il
   <tr>. La posizione assoluta dentro le righe di tabella (<tr>) ha un
   supporto storicamente incoerente tra i motori di rendering dei browser
   (il <tr> non e' sempre un "containing block" affidabile), e in alcuni
   ambienti puo' alterare il calcolo automatico della larghezza delle
   colonne, causando un disallineamento fra intestazione e dati. Un bordo
   sulla cella e' invece un normalissimo box model da tabella, supportato
   in modo identico ovunque. */
.table tbody tr td:first-child { border-left: 4px solid transparent; }
.table tbody tr.urgency-overdue td:first-child { border-left-color: var(--overdue); }
.table tbody tr.urgency-soon td:first-child    { border-left-color: var(--soon); }
.table tbody tr.urgency-warning td:first-child { border-left-color: var(--warn); }
.table tbody tr.urgency-ok td:first-child      { border-left-color: var(--ok); }
.table tbody tr.urgency-unknown td:first-child { border-left-color: var(--unknown); }
.table tbody tr.urgency-done td:first-child    { border-left-color: var(--done); }
.table tbody tr:hover { filter: brightness(0.97); }
.table td:first-child, .table th:first-child { padding-left: 1rem; }

.table td a { font-weight: 500; }

/* Pulsanti dentro celle strette: piu' compatti del default */
.table .btn-sm {
  padding: .2rem .5rem;
  font-size: .74rem;
  white-space: nowrap;
}

.badge.bg-secondary {
  background: var(--ink-soft) !important;
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  font-size: .72rem;
}

/* Flag INV/CDS/AP: quando i tre sono tutti presenti insieme (pratica
   completa), i riquadri diventano verdi invece del grigio neutro di
   default, per far risaltare a colpo d'occhio le pratiche gia' pronte. */
.badge.badge-flag-complete {
  background: var(--brand-soft);
  color: var(--brand-dark);
  border: 1px solid var(--brand);
  font-weight: 600;
}

/* Data "prossimo audit" evidenziata con una pillola colorata per
   urgenza: stessa palette gia' usata per il bordo colorato della riga e
   per gli eventi del calendario, cosi' la colonna piu' importante da
   guardare in dashboard risalta a colpo d'occhio invece di un semplice
   grassetto neutro. */
.due-pill {
  display: inline-block;
  font-family: "JetBrains Mono", "SFMono-Regular", monospace;
  font-weight: 700;
  font-size: .82em;
  padding: 2px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.due-pill-overdue  { background: var(--overdue-bg); color: var(--overdue); }
.due-pill-soon     { background: var(--soon-bg);    color: var(--soon); }
.due-pill-warning  { background: var(--warn-bg);    color: var(--warn); }
.due-pill-ok       { background: var(--ok-bg);      color: var(--ok); }
.due-pill-unknown  { background: var(--unknown-bg); color: var(--unknown); }
.due-pill-done     { background: var(--done-bg);    color: var(--done); }

table thead th a { color: inherit; text-decoration: none; }
table thead th a:hover { text-decoration: underline; }

/* ===================== Card mobile ===================== */
.company-card {
  border-left: 5px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow .15s ease;
}
.company-card:active { box-shadow: 0 0 0 2px rgba(47,111,79,.25) inset; }
.company-card.urgency-overdue  { border-left-color: var(--overdue); }
.company-card.urgency-soon     { border-left-color: var(--soon); }
.company-card.urgency-warning  { border-left-color: var(--warn); }
.company-card.urgency-ok       { border-left-color: var(--ok); }
.company-card.urgency-unknown  { border-left-color: var(--unknown); }
.company-card.urgency-done     { border-left-color: var(--done); }

/* ===================== Pulsante / badge stato "Svolto" ===================== */
.btn-done-active {
  background: var(--done);
  border-color: var(--done);
  color: #fff;
}
.btn-done-active:hover { background: #3d6789; border-color: #3d6789; color: #fff; }
.badge-done {
  background: var(--done);
  color: #fff;
  font-weight: 500;
}

/* ===================== Calendario ===================== */
.calendar-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .65rem;
}
/* FullCalendar espone variabili CSS proprie (prefisso --fc-): qui le
   ricolleghiamo alla palette dell'app, cosi' bottoni/bordi/oggi
   restano visivamente coerenti col resto dell'interfaccia invece di
   usare i colori di default della libreria. */
.calendar-card .fc {
  --fc-border-color: var(--line);
  --fc-neutral-bg-color: var(--paper);
  --fc-button-bg-color: var(--brand);
  --fc-button-border-color: var(--brand);
  --fc-button-hover-bg-color: var(--brand-dark);
  --fc-button-hover-border-color: var(--brand-dark);
  --fc-button-active-bg-color: var(--brand-dark);
  --fc-button-active-border-color: var(--brand-dark);
  --fc-today-bg-color: var(--brand-soft);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Spaziature compresse: l'obiettivo e' far stare l'intero mese a schermo
   senza dover scorrere, cosa che con le dimensioni di default della
   libreria non sempre riesce su schermi da laptop. Si riduce ovunque un
   po' di "aria" (barra pulsanti, intestazione giorni, celle) mantenendo
   comunque leggibilita' e tocco comodo su mobile (vedi anche il blocco
   @media piu' sotto per lo stesso principio su schermi stretti). */
.calendar-card .fc .fc-toolbar {
  margin-bottom: .5rem !important;
}
.calendar-card .fc .fc-toolbar-title {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.calendar-card .fc .fc-button {
  padding: .3rem .65rem;
}
.calendar-card .fc .fc-col-header-cell {
  padding: .25rem 0;
}
.calendar-card .fc .fc-col-header-cell-cushion {
  font-size: .74rem;
}
.calendar-card .fc .fc-daygrid-day-frame {
  min-height: 68px;
}
.calendar-card .fc .fc-daygrid-day-top {
  padding-top: 1px;
}
.calendar-card .fc .fc-daygrid-day-number {
  padding: 2px 5px;
  font-size: .76rem;
}
.calendar-card .fc .fc-daygrid-event {
  margin-top: 1px;
  padding: 1px 4px;
}
.calendar-card .fc .fc-event {
  cursor: pointer;
  font-size: .74rem;
  border-radius: 4px;
  line-height: 1.3;
}
.calendar-legend .legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: .35rem;
  vertical-align: middle;
}

/* Evidenziazione nota (giallo/arancione) sugli eventi del calendario: la
   classe "note-giallo"/"note-arancione" viene applicata all'elemento
   evento direttamente da FullCalendar (proprieta' "classNames" nei dati
   JSON), in modo uniforme su tutte e tre le viste (mese/settimana/
   agenda), invece di manipolare il DOM dopo il render - che avrebbe
   strutture diverse e piu' fragili da vista a vista.
   FORMA diversa oltre che colore diverso (pallino pieno vs triangolo),
   non solo un pallino a tinta unita: giallo e arancione sono colori
   troppo simili tra loro (e simili agli sfondi arancio/giallo gia' usati
   per l'urgenza degli audit) per distinguerli in modo affidabile solo
   dalla sfumatura, specialmente in piccolo. Una forma diversa si
   riconosce a colpo d'occhio indipendentemente dal colore di sfondo
   sottostante. Il contorno scuro (text-shadow, funziona da "outline" per
   i caratteri) mantiene entrambi i simboli leggibili su qualsiasi sfondo
   evento (rosso/arancio/giallo/verde/blu). */
.calendar-card .fc-event.note-giallo::before,
.calendar-card .fc-list-event.note-giallo .fc-list-event-title::before {
  content: "●";
  display: inline-block;
  color: #ffd700;
  text-shadow: -1px -1px 0 #1c2530, 1px -1px 0 #1c2530,
               -1px  1px 0 #1c2530, 1px  1px 0 #1c2530;
  font-size: .85em;
  margin-right: 4px;
  vertical-align: middle;
  line-height: 1;
}
.calendar-card .fc-event.note-arancione::before,
.calendar-card .fc-list-event.note-arancione .fc-list-event-title::before {
  content: "▲";
  display: inline-block;
  color: #ff7a1a;
  text-shadow: -1px -1px 0 #1c2530, 1px -1px 0 #1c2530,
               -1px  1px 0 #1c2530, 1px  1px 0 #1c2530;
  font-size: .75em;
  margin-right: 4px;
  vertical-align: middle;
  line-height: 1;
}

/* ===================== Form azienda ===================== */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
}
.form-section-title {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brand-dark);
  font-weight: 700;
  margin: 1.25rem 0 .6rem;
  padding-bottom: .35rem;
  padding-left: .55rem;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--brand);
}
.form-section-title:first-child { margin-top: 0; }

.area-chip-box {
  max-height: 300px; overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .6rem;
}

/* ===================== Pulsante flottante (mobile) ===================== */
.fab-new {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 2rem;
  line-height: 56px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(28,37,48,.35);
  text-decoration: none;
  z-index: 1030;
  padding-bottom: env(safe-area-inset-bottom);
}
.fab-new:hover, .fab-new:active { color: #fff; background: var(--brand-dark); }

/* ===================== Barra "Salva" fissa (mobile) ===================== */
.save-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  display: flex;
  gap: .5rem;
  z-index: 1030;
}

/* ===================== Login ===================== */
.login-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ===================== Mobile ===================== */
@media (max-width: 767.98px) {
  input.form-control, select.form-select, textarea.form-control { font-size: 16px; }

  /* Calendario: la libreria mostra fino a 6+ pulsanti nella barra in alto
     (prev/next/oggi + 3 viste); su schermo stretto la riga in alto tiene
     solo prev/next/oggi/titolo (vedi footerToolbar in calendar.html per i
     pulsanti di cambio vista, spostati sotto), qui si riducono solo le
     dimensioni cosi' anche quella riga resta comoda. */
  .calendar-card { padding: .6rem; }
  .calendar-card .fc .fc-toolbar { gap: .4rem; }
  .calendar-card .fc .fc-toolbar-title { font-size: .95rem; }
  .calendar-card .fc .fc-button { padding: .3rem .55rem; font-size: .78rem; }
  .calendar-card .fc-col-header-cell-cushion,
  .calendar-card .fc-daygrid-day-number { font-size: .72rem; }
  .calendar-card .fc-event { font-size: .68rem; }
  .calendar-card .fc-list-day-cushion { font-size: .8rem; }

  /* Link abbonamento calendario: input e pulsante "Copia" impilati
     invece che affiancati, altrimenti il pulsante si schiaccia troppo
     accanto a un URL lungo su schermo stretto. */
  .ical-input-group { flex-direction: column; }
  .ical-input-group > .form-control,
  .ical-input-group > .btn {
    width: 100%;
    border-radius: 8px !important;
  }
  .ical-input-group > .form-control { margin-bottom: .4rem; }
}

.btn, .form-check-input, .page-link { min-height: 34px; }
.nav-link { padding-top: .6rem; padding-bottom: .6rem; }

/* Popover "nota completa" al passaggio del mouse sulla dashboard: tema
   scuro coerente col resto dell'app, e a-capo del testo preservati (di
   default il browser li appiattirebbe in un unico rigo). */
.popover {
  max-width: 320px;
  background: var(--ink);
  border: 1px solid var(--line);
}
.popover-body {
  color: #e7f1ec;
  white-space: pre-line;
  font-size: .85rem;
}
.popover .popover-arrow::before { border-top-color: var(--line); }
.popover .popover-arrow::after  { border-top-color: var(--ink); }
.bs-popover-bottom .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="bottom"] .popover-arrow::before {
  border-bottom-color: var(--line);
}
.bs-popover-bottom .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="bottom"] .popover-arrow::after {
  border-bottom-color: var(--ink);
}

/* ===================== Mappa aziende ===================== */
/* Marcatore "a goccia" colorato via CSS puro (niente immagini extra da
   scaricare oltre a quelle di base di Leaflet): un quadrato ruotato a
   45 gradi con un angolo arrotondato, il classico trucco per ottenere
   una forma a goccia/pin senza SVG dedicati. Il colore lo imposta lo
   style inline in map.html (arancione/blu a seconda dello stato). */
.map-pin-wrap { background: transparent; border: none; }
.map-pin {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.map-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
}