/* ============================================
   TEMA WHITE-LABEL: colore primario personalizzabile dal pannello Grafica.
   Il CSS di Bootstrap caricato da CDN ha i colori dei singoli componenti già
   "cotti" in esadecimale in fase di compilazione: cambiare --bs-primary da solo
   NON basterebbe. Ridefiniamo qui le classi effettivamente usate nell'app,
   agganciate a --app-primary (impostata via JS in app.js/login.html leggendo
   /api/grafica/tema). Regola d'oro: qualunque nuovo elemento "primary" venga
   aggiunto in futuro va aggiunto anche qui.
   ============================================ */
:root {
  --app-primary: #0d6efd;
  --app-primary-hover: #0b5ed7;
  --app-primary-rgb: 13, 110, 253;
}

/* ============================================
   LAYOUT A TUTTA ALTEZZA: navbar e barra strumenti restano alla loro altezza
   naturale, il calendario riempie tutto lo spazio restante e scorre AL SUO
   INTERNO (non più l'intera pagina) — è questo che permette a FullCalendar di
   tenere fissa l'intestazione con i giorni della settimana mentre si scorrono
   le ore, come fa Outlook. Senza un'altezza delimitata, FullCalendar disegna
   l'intera griglia 24 ore in una volta e non ha nulla da tenere "fisso".
   ============================================ */
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body > nav.navbar,
body > .toolbar-bar,
body > .footer-stato {
  flex-shrink: 0; /* restano alla loro altezza naturale, non si comprimono */
}
body > .calendario-contenitore {
  flex: 1 1 auto;
  min-height: 0; /* essenziale in un layout flex: senza questo il contenitore si espanderebbe
                    oltre lo spazio disponibile invece di far scorrere il contenuto al suo interno */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 0.75rem;
}
#calendar {
  flex: 1 1 auto;
  min-height: 0;
}

.navbar.bg-primary,
.modal-header.bg-primary {
  background-color: var(--app-primary) !important;
}

.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-hover);
  --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-active-bg: var(--app-primary-hover);
  --bs-btn-active-border-color: var(--app-primary-hover);
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
}

/* Pulsanti "outline" trasformati in pieni per maggiore risalto visivo (richiesta esplicita,
   valida sia in tema chiaro che scuro). Ridefiniamo le stesse variabili CSS che Bootstrap usa
   internamente per .btn, così qualunque .btn-outline-* esistente o futuro viene convertito
   automaticamente in "pieno", senza dover toccare l'HTML ogni volta. */
.btn-outline-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-primary-hover);
  --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-primary-hover);
  --bs-btn-active-border-color: var(--app-primary-hover);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
}

.btn-outline-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #51585e;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}

.btn-outline-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bb2d3b;
  --bs-btn-hover-border-color: #b02a37;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #a52834;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dc3545;
  --bs-btn-disabled-border-color: #dc3545;
}

.btn-outline-warning {
  --bs-btn-color: #000;
  --bs-btn-bg: #ffc107;
  --bs-btn-border-color: #ffc107;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffca2c;
  --bs-btn-hover-border-color: #ffc720;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ffcd39;
  --bs-btn-active-border-color: #ffc720;
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #ffc107;
  --bs-btn-disabled-border-color: #ffc107;
}

.btn-outline-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #157347;
  --bs-btn-hover-border-color: #146c43;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #146c43;
  --bs-btn-active-border-color: #13653f;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #198754;
  --bs-btn-disabled-border-color: #198754;
}

.text-primary {
  color: var(--app-primary) !important;
}

.bg-primary {
  background-color: var(--app-primary) !important;
}

.border-primary {
  border-color: var(--app-primary) !important;
}

/* Titoli delle tab: colore neutro invece del blu-link di default di Bootstrap, così si adatta
   a qualunque colore primario scelto (e non stona quando non è attiva). Solo la tab attiva
   usa il colore del brand. */
.nav-tabs .nav-link {
  color: #212529;
}

[data-bs-theme="dark"] .nav-tabs .nav-link {
  color: #fff;
}

.nav-tabs .nav-link.active {
  color: var(--app-primary) !important;
}

.form-check-input:checked {
  background-color: var(--app-primary) !important;
  border-color: var(--app-primary) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--app-primary-rgb), 0.25) !important;
}

.dropdown-item:active,
.dropdown-item.active,
.list-group-item.active {
  background-color: var(--app-primary) !important;
  border-color: var(--app-primary) !important;
}

a:not(.btn):not(.dropdown-item):not(.nav-link) {
  color: var(--app-primary);
}

/* FullCalendar: evidenziazione del giorno corrente coerente col colore del brand */
.fc .fc-daygrid-day.fc-day-today,
.fc .fc-timegrid-col.fc-day-today {
  background-color: rgba(var(--app-primary-rgb), 0.08) !important;
}

/* ============================================
   DARK MODE: preferenza personale (localStorage), non un'impostazione di piattaforma.
   Bootstrap 5.3 gestisce già la maggior parte dei componenti tramite [data-bs-theme="dark"];
   qui copriamo solo ciò che Bootstrap non conosce (FullCalendar) e i nostri elementi custom.
   ============================================ */
[data-bs-theme="dark"] body {
  background-color: #16181b;
}

[data-bs-theme="dark"] #calendar {
  background: #212529;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

[data-bs-theme="dark"] .fc {
  --fc-border-color: #3a3f44;
  --fc-page-bg-color: #212529;
  --fc-neutral-bg-color: #2b3035;
  --fc-list-event-hover-bg-color: #2b3035;
  --fc-today-bg-color: rgba(var(--app-primary-rgb), 0.15);
  color: #e9ecef;
}

[data-bs-theme="dark"] .logo-placeholder {
  border-color: rgba(255,255,255,0.3);
}

[data-bs-theme="dark"] .avatar-anteprima-box,
[data-bs-theme="dark"] .logo-anteprima-box {
  background: #2b3035;
  border-color: #495057;
}

[data-bs-theme="dark"] .table-secondary {
  --bs-table-bg: #343a40;
  --bs-table-color: #adb5bd;
}

body {
  background-color: #f4f6f9;
}

#calendar {
  background: #fff;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.fc-event {
  cursor: pointer;
  border: none !important;
  border-radius: 6px;
  padding: 2px 4px;
  font-size: 0.85rem;
}

#clienteSuggestions, #ricercaSuggestions {
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border-radius: 0 0 8px 8px;
}

#clienteSuggestions .list-group-item,
#ricercaSuggestions .list-group-item {
  cursor: pointer;
}

#clienteSuggestions .list-group-item:hover,
#ricercaSuggestions .list-group-item:hover {
  background-color: #f0f4ff;
}

#serviziCheckboxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem 1rem;
}

#serviziCheckboxes .form-check {
  margin-bottom: 0;
}

/* ---- Logo placeholder in navbar (spazio riservato per il logo del cliente) ---- */
.logo-placeholder {
  color: rgba(255,255,255,0.75);
  border: 1px dashed rgba(255,255,255,0.5);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 0.85rem;
  min-width: 90px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-placeholder img {
  max-height: 36px;
  max-width: 160px;
  object-fit: contain;
}

/* Quando è presente un logo reale non serve più il bordo tratteggiato "segnaposto" */
.logo-placeholder:has(img[style*="inline"]) {
  border: none;
  padding: 2px 4px;
}

/* ---- Anteprima logo nel pannello Impostazioni > Grafica ---- */
.logo-anteprima-box {
  width: 220px;
  height: 100px;
  border: 1px dashed #ced4da;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  padding: 8px;
}

.logo-anteprima-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Box di anteprima del logo dedicato al tema scuro: sfondo scuro fisso, SEMPRE (anche se il
   pannello Impostazioni è aperto in tema chiaro), così l'Admin vede davvero come apparirà */
.logo-anteprima-box-dark {
  background: #212529 !important;
  border-color: #495057 !important;
}

/* ---- Logo "Powered by" in fondo alla pagina di login: fisso, non caricabile dall'Admin,
   volutamente più piccolo del logo del cliente in alto (che invece è quello personalizzabile) ---- */
.logo-powered-by {
  max-height: 20px;
  max-width: 140px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.logo-powered-by:hover {
  opacity: 1;
}

/* Il logo ha una parte di testo blu scuro: su sfondo scuro (dark mode) rischierebbe di
   sparire per mancanza di contrasto. Un piccolo "chip" chiaro dietro lo mantiene leggibile
   in entrambi i temi, senza dover chiedere una variante separata del logo. */
[data-bs-theme="dark"] .logo-powered-by {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 4px;
  padding: 3px 8px;
}

/* ---- Avatar utente (navbar): sostituisce l'icona "persona" quando l'utente ha caricato una foto ---- */
.avatar-navbar-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}

#avatarTriggerBtn {
  line-height: 0; /* evita spazio extra sotto l'immagine/icona nel bottone */
}

/* ---- Anteprima foto profilo (modale "Foto profilo" e pannello Grafica) ---- */
.avatar-anteprima-box {
  width: 90px;
  height: 90px;
  border: 1px dashed #ced4da;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  overflow: hidden;
  font-size: 2.5rem;
  color: #adb5bd;
  flex-shrink: 0;
}

.avatar-anteprima-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-anteprima-box-sm {
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
}

/* Divisore verticale tra "Foto profilo" e "Cambia password" nella tab "Il mio profilo",
   solo su schermi medi e superiori (su mobile le due sezioni sono già impilate) */
@media (min-width: 768px) {
  .profilo-col-password {
    border-left: 1px solid #dee2e6;
  }
}

/* ---- Toolbar sotto la navbar ---- */
.toolbar-bar {
  position: sticky;
  top: 0;
  z-index: 1020;
}

/* La tendina del menu utente deve stare sopra la toolbar sticky qui sopra (z-index: 1020),
   altrimenti risulterebbe nascosta dietro di essa quando si apre */
#avatarTriggerBtn + .dropdown-menu {
  z-index: 1030;
}

/* ---- Filtri: elenco tecnici/stati nell'offcanvas ---- */
#filtroTecniciList .form-check,
#filtroStatoList .form-check {
  padding: 6px 0 6px 2.2rem;
}

.tecnico-color-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
}

/* ---- Tabelle di gestione (Impostazioni) ---- */
#listaTecniciImpostazioni td, #listaServiziImpostazioni td {
  vertical-align: middle;
}

/* height:100% è la parte cruciale: senza, il div cresce in base al contenuto invece di
   rispettare l'altezza (fissa, proporzionale alla durata) del box colorato assegnata da
   FullCalendar — ed è proprio questo che faceva "sbordare" il testo bianco sullo sfondo
   bianco della pagina negli appuntamenti brevi, rendendolo illeggibile. */
.fc-timegrid-event .fc-event-main,
.fc-daygrid-event .fc-event-main {
  height: 100%;
}

.fc-event-main-custom {
  padding: 1px 3px;
  overflow: hidden;
  line-height: 1.2;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fc-event-time-custom {
  font-weight: 600;
  font-size: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 20px; /* lascia spazio all'avatar del tecnico in alto a destra */
  flex-shrink: 0;
}

.fc-event-time-custom i {
  margin-right: 2px;
}

.fc-event-title-custom {
  font-size: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

/* Appuntamenti molto brevi in vista Giorno/Settimana: FullCalendar aggiunge questa classe
   quando il box è troppo basso per il layout normale. In quel caso mostriamo solo l'orario
   (che resta sempre leggibile) e nascondiamo la riga cliente/tecnico, invece di tagliarla
   a metà o farla sbordare fuori dal box. */
.fc-timegrid-event-short .fc-event-title-custom {
  display: none;
}

/* Con il titolo nascosto serve meno spazio per l'avatar: lo rimpicciolisco un filo
   per lasciare più respiro all'orario, che qui è l'unica informazione visibile */
.fc-timegrid-event-short .fc-event-time-custom {
  padding-right: 15px;
}

.fc-timegrid-event-short .fc-event-avatar {
  width: 15px;
  height: 15px;
  font-size: 0.65rem;
  top: 2px;
}

/* Avatar del tecnico in alto a destra sull'evento: foto se caricata, altrimenti icona di default */
.fc-event-avatar {
  position: absolute;
  top: 1px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
  color: #495057;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.fc-event-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Triangolo di avviso "fuori orario/indisponibilità" sull'evento del calendario: un piccolo alone
   scuro garantisce che resti visibile anche su sfondi chiari/arancioni (colore del tecnico) */
.fc-event-time-custom .bi-exclamation-triangle-fill {
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}

/* Appuntamenti Annullati: aspetto "disattivato" per riconoscerli a colpo d'occhio,
   indipendentemente dal colore del tecnico assegnato */
.evento-annullato {
  background-color: #adb5bd !important;
  border-color: #adb5bd !important;
  opacity: 0.6;
  cursor: not-allowed;
}

.evento-annullato .fc-event-title-custom {
  text-decoration: line-through;
}

.evento-annullato .fc-event-time-custom {
  color: #495057;
}

/* Appuntamenti in uno stato "congelato" (es. Completato, Sospeso): NON forziamo un colore fisso
   come per Annullato — restano riconoscibili come "di quel tecnico", solo più sbiaditi per
   distinguerli a colpo d'occhio da quelli ancora in corso. */
.evento-bloccato {
  opacity: 0.55;
}

.evento-evidenziato {
  outline: 3px solid #ffc107 !important;
  outline-offset: 1px;
}

@media (max-width: 768px) {
  #serviziCheckboxes {
    grid-template-columns: 1fr;
  }
  .toolbar-bar .flex-grow-1 {
    max-width: 100% !important;
    order: 3;
    flex-basis: 100%;
  }
  .navbar-brand {
    font-size: 1rem;
  }

  /* Calendario: la toolbar di FullCalendar (prev/next/oggi, titolo del periodo, Mese/Settimana/
     Giorno) di default sta tutta su una riga sola — su schermi stretti va in scroll orizzontale
     invece di andare a capo. Qui teniamo frecce+oggi+titolo insieme sulla prima riga, e mandiamo
     a capo solo il gruppo dei tre pulsanti di vista (Mese/Settimana/Giorno) sulla riga sotto. */
  .fc-header-toolbar {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    margin-bottom: 0.75rem !important;
  }
  .fc-toolbar-chunk:first-child {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .fc-toolbar-chunk:last-child {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
  }
  .fc-toolbar-title {
    font-size: 1.1rem !important;
  }
}

/* Fix: nei modali "scrollable" il modal-body/modal-footer sono avvolti in un <form>
   (necessario per il submit). Bootstrap si aspetta che siano figli diretti di .modal-content
   per far scorrere solo il body e tenere fisso il footer con i pulsanti: senza questa regola
   il form si dimensiona sul proprio contenuto e il footer (Salva/Annulla) viene tagliato
   quando il modale è più alto della finestra, invece di restare raggiungibile scorrendo. */
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}