/*
 * custom.css - Stile personalizzato della dashboard (branding Quin / Docebo).
 *
 * COME FUNZIONA
 *   - Sviluppo (`npm run dev`): salva il file → la pagina si aggiorna da sola. Nessuna compilazione.
 *   - Produzione: è un file a sé (dist/custom.css) → modificabile e ricaricabile via FTP
 *     SENZA rebuildare la SPA.
 *
 * NOTE
 *   - Caricato DOPO Vuetify: per sovrascrivere uno stile del framework usa selettori specifici
 *     (es. `.v-application .v-btn { ... }`) oppure, se serve, `!important`.
 *   - Il colore "primary" del tema si può cambiare qui sotto, senza toccare main.js.
 */

/* === Colori brand Quin (ritoccabili qui, senza rebuild) === */
.v-theme--light {
  --v-theme-primary: 0, 207, 180;       /* #00cfb4 - Verde (button e azioni) */
  --v-theme-on-primary: 255, 255, 255;  /* testo bianco sui button verdi */
  --v-theme-success: 0, 207, 180;       /* #00cfb4 - Verde (toast di conferma, badge "Pronto") */
  --v-theme-error: 255, 42, 93;         /* #ff2a5d - Fragola (errori) */
}

/* Sidebar gialla Quin */
.v-navigation-drawer {
  background-color: #f3ff67 !important;
  color: #1a1a1a !important;
}

/* Testata mobile gialla come la sidebar (stesso brand Quin) */
.app-bar-quin {
  background-color: #f3ff67 !important;
  color: #1a1a1a !important;
}
/* Il logo nella testata: altezza contenuta così resta centrato con aria sopra/sotto (il PNG è
   più alto della barra e senza questo vincolo si "attacca" in alto). */
.app-bar-quin .v-img {
  max-height: 44px;
}

/* Link */
a {
  color: #00cfb4;
}

/* In Vuetify 4 le voci di menu (v-list-item con :to) sono tag <a>: senza il reset
   di v3 prendevano il verde della regola sopra. Nella sidebar il testo resta nero. */
.v-navigation-drawer a {
  color: inherit;
}

/* === Tipografia === */
/* .v-application { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } */

/* Dimensione del testo in TUTTA l'app. Vuetify esprime ogni misura in rem (classi text-*,
   componenti, tabelle): alzando il root cresce tutto in proporzione, senza dover ritoccare
   una per una le classi tipografiche. 106.25% ≈ 17px con browser sui canonici 16px, cioè
   ~1px in più sul testo corrente. Resta in %, non in px, così se l'utente ha ingrandito il
   font di sistema la scala lo rispetta (requisito di accessibilità). Alza/abbassa qui. */
html {
  font-size: 106.25%;
}

/* === Esempi di personalizzazione ===
.v-navigation-drawer .v-list-item--active {
  font-weight: 700;
}
*/

/* ↓↓↓  Scrivi qui sotto tutto il resto dello stile  ↓↓↓ */

/* Niente slide del contenuto principale (es. quando compare la login) */
.v-main {
  transition: none !important;
}

/* Intestazioni tabella in grassetto */
.v-data-table th {
  font-weight: 700 !important;
}

/* Celle tabella: MAI a capo. Il testo si accorcia e, quando non entra, viene troncato con "…"
   (il tooltip col valore intero lo aggiunge la direttiva v-cell-title).
   table-layout: fixed fa sì che le colonne rispettino la `width` degli header (quelle senza si
   spartiscono lo spazio residuo) e rende il troncamento controllabile. Le celle con controlli
   (azioni, chip di stato, checkbox di selezione) non troncano il loro contenuto.
   ⚠️ Va sul <table> VERO (dentro .v-table__wrapper), NON sul div .v-table: lì non ha effetto e le
   colonne tornerebbero a dimensionarsi sul contenuto (larghezza ballerina al riordino). */
.v-table__wrapper > table {
  table-layout: fixed;
  width: 100%;
}
.v-table td,
.v-table th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v-table td:has(.v-btn),
.v-table td:has(.v-chip),
.v-table td:has(.v-selection-control) {
  overflow: visible;
}

/* Su telefono le tabelle diventano a card (righe impilate, .v-data-table__tr--mobile, con le celle
   in grid "etichetta | valore"). Il table-layout fixed e le larghezze di colonna qui comprimono la
   scheda a metà schermo → li disattivo e forzo ogni cella a tutta larghezza, con un po' di respiro
   verticale (i contenuti erano appiccicati in alto). */
@media (max-width: 599.98px) {
  .v-main {
    overflow-x: hidden;
  }
  /* Niente bordi/righe divisorie della tabella (l'HR in cima/fondo). */
  .v-table__wrapper {
    border: none !important;
  }
  .v-table,
  .v-table__wrapper > table,
  .v-table__wrapper > table > tbody {
    background: transparent !important;
    border: none !important;
  }
  .v-table__wrapper > table {
    table-layout: auto;
  }
  /* Ogni riga = card bianca come le v-card del dettaglio (stessi angoli e ombra). */
  .v-data-table__tr--mobile {
    display: block;
    background-color: #fff;
    border-radius: 4px;
    margin: 0 10px 16px;   /* stacco laterale dai bordi + distanza tra una card e l'altra */
    padding: 14px 18px;    /* respiro interno */
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 1px 5px rgba(0, 0, 0, 0.12);
  }
  .v-data-table__tr--mobile > td {
    white-space: normal;
    word-break: break-word;        /* email/testi lunghi vanno a capo, niente scroll orizzontale */
    border-bottom: none !important;
  }
  /* Nessun bordo/HR sull'header mobile (select di sort) in cima né attorno al footer di paginazione. */
  .v-table__wrapper > table > thead th,
  .v-data-table-footer {
    border: none !important;
  }
  /* Prima riga = titolo a tutta la larghezza della card, a SINISTRA: tolgo il grid della cella
     (che spingeva il valore nella colonna di destra) e lo rendo un blocco normale. */
  .card-title-cell {
    display: block !important;
    font-weight: 600;
    font-size: 1.05rem;
    padding-top: 4px;
  }
  .card-title-cell,
  .card-title-cell * {
    text-align: left !important;
    justify-self: start !important;
    justify-items: start !important;
  }
  .card-title-cell .v-data-table__td-title {
    display: none;
  }
  /* Ricerca a tutta larghezza (una riga sua): i bottoni export vanno sotto. Il margine la stacca
     leggermente dal gruppo di bottoni (formazione esterna), che altrimenti gli resta appiccicato. */
  .search-field {
    max-width: 100%;
    flex: 1 1 100%;
    margin-bottom: 8px;
  }
}

/* Font del sito: Inter. Vuetify usa le variabili --v-font-body/--v-font-heading (default Roboto)
   su testi e classi tipografiche (H1, titoli…) → le ridefiniamo, così vale ovunque (icone escluse). */
.v-application {
  --v-font-body: "Inter", sans-serif;
  --v-font-heading: "Inter", sans-serif;
  font-family: "Inter", sans-serif;
}

/* Padding del contenuto principale */
.v-main .v-container {
  padding: 20px !important;
}

/* Font delle voci della sidebar (regola pure qui il valore) */
.v-navigation-drawer .v-list-item-title {
  font-size: 0.9rem !important;
}

/* Sezione utente loggato (in fondo alla sidebar) */
.drawer-user-info {
  min-width: 0;   /* serve perché text-truncate funzioni dentro il flex */
}
.drawer-user-name {
  font-size: 0.9rem;
}

/* Campo di ricerca sopra le tabelle */
.search-field {
  max-width: 560px;
}

/* Icona download: parte disabilitata, poi si abilita con una leggera dissolvenza (niente lampeggio). */
.download-flag-btn {
  transition: opacity 0.3s ease;
}

/* Colonna "Completati": il conteggio compare con la STESSA dissolvenza dell'icona download -
   parte smorzato (come "disabilitato") finché il dato non arriva, poi si accende col numero,
   invece di comparire di colpo. */
.completions-cell {
  display: inline-block;
  transition: opacity 0.3s ease;
}
.completions-cell.completions-empty {
  opacity: 0.38;
}

/* Toast (snackbar): testo sempre bianco, link (azione) bianco e sottolineato */
.v-snackbar__content {
  color: #fff !important;
}
.v-snackbar__actions .v-btn {
  color: #fff !important;
  text-decoration: underline;
}

/* Login centrata (in Vuetify 4 .fill-height non centra più il contenuto) */
.login-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  width: 100%;
  max-width: 420px;
}