/* ============================================================================
   par-ui.css  —  Sistema di design di PAR
   ----------------------------------------------------------------------------
   Direzione: strumento professionale, non pannello amministrativo. Densità alta
   ma gerarchia netta: un solo elemento per riga urla, tutto il resto sussurra.

   Palette
     ink      #101828   testo e intestazioni (blu-nero, non nero puro)
     slate    #475467   testo secondario
     mute     #98A2B3   testo terziario, unità di misura
     paper    #F5F6F8   fondo pagina
     surface  #FFFFFF   superfici
     rule     #E4E7EC   filetti
     marine   #134E8C   accento primario, azioni
     amber    #B4690E   attenzione
     crimson  #B42318   critico, scaduto
     forest   #0E7C5A   completato

   Tipografia
     Interfaccia: stack di sistema. Su Mac rende in San Francisco, che è la
     scelta giusta per un corso in collaborazione con Apple e non costa un
     download né una licenza.
     Dati: monospace di sistema. Codici, date, contatori e id sono incolonnati
     e riconoscibili a colpo d'occhio: è la personalità della pagina.
     Occhiello: monospace maiuscolo 11px, spaziatura ampia.

   Elemento distintivo: la traccia del ciclo di vita (.par-track). Sei segmenti
   che dicono DOVE si trova un ticket, invece di sei pillole colorate che
   costringono a leggere una parola per capirlo.
   ========================================================================== */

:root {
    --ink: #101828;
    --slate: #475467;
    --mute: #98A2B3;
    --paper: #F5F6F8;
    --surface: #FFFFFF;
    --rule: #E4E7EC;
    --rule-strong: #D0D5DD;
    --marine: #134E8C;
    --marine-soft: #EAF1F9;
    --amber: #B4690E;
    --amber-soft: #FDF4E7;
    --crimson: #B42318;
    --crimson-soft: #FEF3F2;
    --forest: #0E7C5A;
    --forest-soft: #ECFAF4;

    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;

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

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-md: 0 4px 16px -4px rgba(16, 24, 40, .10);

    --rail: 264px;
}

/* ---- reset misurato --------------------------------------------------- */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--marine); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--marine);
    outline-offset: 2px;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- occhiello e titoli ----------------------------------------------- */
.par-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--mute);
    margin: 0 0 2px;
}

.par-h1 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0;
    line-height: 1.15;
}

.par-h2 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0;
}

.par-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--slate);
    margin-bottom: 5px;
}

.par-hint { font-size: 12px; color: var(--mute); margin-top: 5px; }
.par-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.par-num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---- intestazione applicazione ---------------------------------------- */
.par-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--rule);
}

.par-topbar-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 22px;
    max-width: 1680px;
    margin: 0 auto;
}

.par-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.par-brand img { height: 30px; width: auto; display: block; }
.par-brand-text { line-height: 1.1; }
.par-brand-name {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--ink);
}
.par-brand-sub { font-size: 11px; color: var(--mute); letter-spacing: .01em; }

.par-tabs { display: flex; gap: 2px; margin-left: 8px; flex-wrap: wrap; }

.par-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: var(--r-sm);
    color: var(--slate);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}
.par-tab:hover { background: var(--paper); color: var(--ink); text-decoration: none; }
.par-tab.is-active { background: var(--ink); color: #fff; }
.par-tab.is-active:hover { background: var(--ink); color: #fff; }
.par-tab i { font-size: 13px; opacity: .85; }

.par-topbar-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;      /* si restringe internamente invece di spingere fuori */
}

/* selettore di lingua: due sigle, non una tendina

   flex: 0 0 auto e' la riga che conta. Senza, il selettore e' un normale
   elemento flex della barra e puo' restringersi sotto la larghezza del suo
   contenuto: con overflow:hidden la seconda sigla veniva tagliata, e a perdere
   era sempre lei perche' .par-who-name ha white-space:nowrap e non cede spazio.
   Con la barra dello studente, che ha dieci voci e va a capo, succedeva sempre.

   Le due sigle hanno la stessa larghezza minima cosi' il controllo non cambia
   dimensione al cambio di lingua: IT ed EN sono larghe uguale, ma la sigla
   attiva e' in grassetto, e senza min-width il riquadro si allargherebbe di
   qualche pixel passando dall'una all'altra. */
.par-lang {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: stretch;
    height: 26px;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--surface);
}
.par-lang a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 0 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    line-height: 1;
    white-space: nowrap;
    color: var(--slate);
    background: var(--surface);
}
.par-lang a + a { border-left: 1px solid var(--rule-strong); }
.par-lang a:hover { background: var(--paper); text-decoration: none; }
.par-lang a.is-active { background: var(--ink); color: #fff; font-weight: 600; }

/* ---- suggerimento nero, per qualunque controllo -----------------------
   Un solo aspetto per tutti i suggerimenti dell'interfaccia: barra in alto,
   schede interne, barre delle griglie, pulsanti del flusso ticket.

   PERCHE' NON L'ATTRIBUTO title
   Il suggerimento nativo compare dopo circa un secondo, non si puo' impaginare,
   cambia aspetto da un sistema operativo all'altro e su schermo tattile non
   compare affatto. Qui il ritardo e' di 0,25 s ed e' uguale ovunque.

   L'aria-label accanto a data-tip e' un'altra cosa e serve lo stesso: su un
   pulsante fatto di sola icona non c'e' testo da annunciare, e togliendo title
   un lettore di schermo direbbe soltanto «pulsante».

   La salita di 3 px usa margin-top e non transform: transform serve gia' a
   centrare il riquadro, e usarlo per due cose insieme obbliga a riscrivere la
   centratura in ogni stato — che e' dove si annidano gli errori. */
[data-tip] { position: relative; }

[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 3px;
    z-index: 200;

    padding: 5px 9px;
    border-radius: var(--r-sm);
    background: var(--ink);
    color: #fff;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    pointer-events: none;

    opacity: 0;
    visibility: hidden;
    transition: opacity .14s ease .25s, margin-top .14s ease .25s,
                visibility 0s linear .39s;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    margin-top: 6px;
    transition: opacity .14s ease .25s, margin-top .14s ease .25s, visibility 0s;
}

/* Vicino ai bordi il riquadro centrato uscirebbe dalla pagina: si aggancia al
   bordo del controllo. A destra serve sempre nella barra in alto, dove gli
   ultimi due pulsanti sono a filo. */
[data-tip].tip-start::after,
.par-tabs > [data-tip]:first-child::after,
.par-subtabs-in > [data-tip]:first-child::after {
    left: 0; right: auto; transform: none;
}
[data-tip].tip-end::after,
.par-topbar-end [data-tip]::after,
.par-tabs > [data-tip]:last-child::after {
    left: auto; right: 0; transform: none;
}

/* ECCEZIONE: le voci di navigazione mostrano il suggerimento SOLO quando la
   loro etichetta e' nascosta. Con l'etichetta visibile il riquadro ripeterebbe
   una parola che si sta gia' leggendo.
   E' scritto come soppressione e non come accensione: cosi' la regola generale
   vale davvero per tutti, e qui si elencano i pochi casi che fanno eccezione
   invece di ripetere tre volte l'accensione. */
@media (min-width: 1201px) {
    .par-tabs:not(.is-compact) > .par-tab[data-tip]:hover::after,
    .par-tabs:not(.is-compact) > .par-tab[data-tip]:focus-visible::after {
        opacity: 0; visibility: hidden;
    }
}
@media (min-width: 561px) {
    .par-subtab[data-tip]:hover::after,
    .par-subtab[data-tip]:focus-visible::after {
        opacity: 0; visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-tip]::after { transition: opacity .01s linear .25s; }
}

/* ---- striscia di schede: le quattro viste sul lavoro del team ----------
   E' una fascia a tutta larghezza appoggiata sotto la barra principale, non un
   elemento dentro la pagina. Stava dentro, e ereditava il padding del
   contenitore: .par-page ne ha 22 px sopra, il .container-fluid di Bootstrap
   usato da Backlog e Sprint non ne ha, quindi la striscia compariva a due
   altezze diverse e su Bacheca e Ticket lasciava una riga vuota.

   Il segno della scheda attiva e' una riga sotto, non uno sfondo pieno: le
   schede della barra in alto sono la navigazione principale e devono restare
   visivamente piu' forti di questa, che e' una scelta interna a una sezione. */
.par-subtabs {
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
}
.par-subtabs-in {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 22px;
}

/* Lo spazio sotto la fascia lo mette la fascia, non il contenitore: e' l'unico
   modo di averlo uguale su tutte e quattro le pagine, che di contenitore ne
   usano due tipi diversi. */
.par-subtabs + .par-page,
.par-subtabs + .container-fluid { padding-top: 18px; }

.par-subtab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--slate);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}
.par-subtab i { font-size: 13px; opacity: .75; }
.par-subtab:hover { color: var(--ink); text-decoration: none; }
.par-subtab.is-active {
    color: var(--ink);
    font-weight: 650;
    border-bottom-color: var(--ink);
}
.par-subtab.is-active i { opacity: 1; }

@media (max-width: 560px) {
    .par-subtab span { display: none; }
}

/* min-width:0 permette a questo blocco di restringersi. Senza, un nome utente
   lungo — «studente1 · I distratti» — pretende tutta la sua larghezza e la
   toglie ai vicini. Adesso e' il nome ad accorciarsi con i puntini, che e' la
   cosa giusta da sacrificare: si legge lo stesso, e i controlli restano interi. */
.par-who {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    color: var(--slate);
}
.par-who .par-avatar-xs { flex: 0 0 auto; }

/* ---- avatar testuali --------------------------------------------------- */
.par-avatar-xs, .par-avatar-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--marine-soft);
    color: var(--marine);
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: .02em;
    overflow: hidden;
}
.par-avatar-xs { width: 26px; height: 26px; font-size: 10px; }
.par-avatar-sm { width: 34px; height: 34px; font-size: 12px; }
.par-avatar-xs img, .par-avatar-sm img { width: 100%; height: 100%; object-fit: cover; }
.par-avatar-empty { background: var(--paper); color: var(--mute); }

/* ---- impaginazione ---------------------------------------------------- */
.par-page { max-width: 1680px; margin: 0 auto; padding: 22px; }

.par-pagehead {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.par-pagehead-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.par-layout { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 20px; align-items: start; }

@media (max-width: 1000px) {
    .par-layout { grid-template-columns: minmax(0, 1fr); }
    .par-rail { position: static !important; }
}

.par-rail { position: sticky; top: 74px; }

/* ---- superfici -------------------------------------------------------- */
.par-panel {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.par-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule);
    background: linear-gradient(180deg, #FCFCFD 0%, #FAFBFC 100%);
}
.par-panel-head .par-h2 { font-size: 14px; }
.par-panel-head-end { margin-left: auto; }
.par-panel-body { padding: 16px; }
.par-panel-body.is-flush { padding: 0; }

.par-group + .par-group { border-top: 1px solid var(--rule); }
.par-group { padding: 14px 16px; }
.par-group-title {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--mute);
    margin: 0 0 10px;
}

/* ---- controlli -------------------------------------------------------- */
.par-input, .par-select, .par-textarea {
    width: 100%;
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-sm);
    padding: 7px 10px;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.par-input::placeholder { color: var(--mute); }
.par-input:focus, .par-select:focus, .par-textarea:focus {
    outline: none;
    border-color: var(--marine);
    box-shadow: 0 0 0 3px var(--marine-soft);
}
.par-textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.par-input[type="date"] { font-family: var(--font-mono); font-size: 12px; }
.par-input:disabled, .par-select:disabled, .par-textarea:disabled {
    background: var(--paper); color: var(--slate); cursor: not-allowed;
}

.par-search { position: relative; }
.par-search i {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    color: var(--mute); font-size: 13px; pointer-events: none;
}
.par-search .par-input { padding-left: 32px; }

.par-check { display: flex; align-items: center; gap: 9px; padding: 4px 0; cursor: pointer; font-size: 13px; }
.par-check input { width: 15px; height: 15px; accent-color: var(--marine); margin: 0; flex: 0 0 auto; }
.par-check-count {
    margin-left: auto; font-family: var(--font-mono); font-size: 11px;
    color: var(--mute); font-variant-numeric: tabular-nums;
}
.par-check:hover .par-check-count { color: var(--slate); }

.par-field + .par-field { margin-top: 12px; }
.par-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .par-grid-2 { grid-template-columns: 1fr; } }

.par-req::after { content: "*"; color: var(--crimson); margin-left: 3px; }

/* ---- pulsanti --------------------------------------------------------- */
.par-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--rule-strong);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.par-btn:hover { background: var(--paper); text-decoration: none; }
.par-btn i { font-size: 12px; }

.par-btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.par-btn-primary:hover { background: #1D2939; border-color: #1D2939; color: #fff; }

.par-btn-accent { background: var(--marine); border-color: var(--marine); color: #fff; }
.par-btn-accent:hover { background: #0F406F; border-color: #0F406F; color: #fff; }

.par-btn-danger { color: var(--crimson); border-color: #F3C6C2; }
.par-btn-danger:hover { background: var(--crimson-soft); }

.par-btn-sm { font-size: 12px; padding: 6px 10px; }
.par-btn-block { width: 100%; }
.par-btn-quiet { border-color: transparent; background: transparent; color: var(--slate); }
.par-btn-quiet:hover { background: var(--paper); color: var(--ink); }

/* ---- chip dei filtri attivi ------------------------------------------- */
.par-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; align-items: center; }
.par-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; padding: 4px 8px;
    background: var(--surface); border: 1px solid var(--rule-strong);
    border-radius: 999px; color: var(--slate);
}
.par-chip b { font-weight: 600; color: var(--ink); }
.par-chip a { color: var(--mute); display: inline-flex; font-size: 11px; }
.par-chip a:hover { color: var(--crimson); text-decoration: none; }

/* ---- tabella dati ----------------------------------------------------- */
.par-table-wrap { overflow-x: auto; }

.par-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }

.par-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: #FCFCFD;
    border-bottom: 1px solid var(--rule);
    padding: 9px 12px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mute);
    white-space: nowrap;
}
.par-table thead th a { color: var(--mute); display: inline-flex; align-items: center; gap: 4px; }
.par-table thead th a:hover { color: var(--ink); text-decoration: none; }
.par-table thead th.is-sorted a { color: var(--ink); }

.par-table tbody td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
}
.par-table tbody tr { transition: background .1s ease; }
.par-table tbody tr:hover { background: #FBFCFE; }
.par-table tbody tr:last-child td { border-bottom: none; }

.par-cell-code { font-family: var(--font-mono); font-size: 11px; color: var(--mute); white-space: nowrap; }
.par-cell-date { font-family: var(--font-mono); font-size: 11px; color: var(--slate); white-space: nowrap; }
.par-cell-title { min-width: 260px; }
.par-cell-title a { color: var(--ink); font-weight: 500; }
.par-cell-title a:hover { color: var(--marine); text-decoration: none; }
.par-cell-actions { text-align: right; white-space: nowrap; }

.par-labels { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.par-labels span {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .02em;
    color: var(--slate); background: var(--paper);
    border: 1px solid var(--rule); border-radius: 3px; padding: 1px 5px;
}

.par-overdue { color: var(--crimson); font-weight: 600; }

/* ---- ELEMENTO DISTINTIVO: traccia del ciclo di vita -------------------- */
/* Sei segmenti: quelli percorsi sono pieni, i restanti sono filetti. Si legge
   la posizione senza leggere la parola. Il segmento corrente porta il colore
   semantico dello stato; "Blocked" interrompe la traccia invece di avanzarla. */
.par-lifecycle { display: flex; align-items: center; gap: 9px; min-width: 168px; }

.par-track { display: flex; gap: 3px; flex: 0 0 auto; }
.par-track i {
    display: block; width: 14px; height: 4px; border-radius: 2px;
    background: var(--rule); transition: background .12s ease;
}
.par-track i.is-done { background: var(--rule-strong); }
.par-track i.is-current { background: var(--marine); }

.par-track.is-blocked i.is-current { background: var(--crimson); }
.par-track.is-review  i.is-current { background: var(--amber); }
.par-track.is-complete i { background: var(--forest); }

.par-status-text { font-size: 12px; color: var(--slate); white-space: nowrap; }
.par-track.is-blocked ~ .par-status-text { color: var(--crimson); font-weight: 500; }
.par-track.is-complete ~ .par-status-text { color: var(--forest); }

/* ---- indicatore di priorità a tacche ---------------------------------- */
.par-prio { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.par-prio-ticks { display: flex; gap: 2px; align-items: flex-end; }
.par-prio-ticks i { display: block; width: 3px; border-radius: 1px; background: var(--rule-strong); }
.par-prio-ticks i:nth-child(1) { height: 6px; }
.par-prio-ticks i:nth-child(2) { height: 9px; }
.par-prio-ticks i:nth-child(3) { height: 12px; }
.par-prio-ticks i:nth-child(4) { height: 15px; }
.par-prio-ticks i.on { background: var(--slate); }
.par-prio.lv3 .par-prio-ticks i.on { background: var(--amber); }
.par-prio.lv4 .par-prio-ticks i.on { background: var(--crimson); }
.par-prio-text { font-size: 12px; color: var(--slate); }
.par-prio.lv4 .par-prio-text { color: var(--crimson); font-weight: 500; }

/* ---- tipo del ticket -------------------------------------------------- */
.par-type { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--slate); }
.par-type i { font-size: 11px; color: var(--mute); width: 12px; text-align: center; }

/* ---- avvisi ----------------------------------------------------------- */
.par-note {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 14px; border-radius: var(--r-md);
    border: 1px solid var(--rule); background: var(--surface);
    font-size: 13px; margin-bottom: 16px;
}
.par-note i { margin-top: 2px; font-size: 13px; }
.par-note-error { background: var(--crimson-soft); border-color: #F3C6C2; color: #7A1710; }
.par-note-error i { color: var(--crimson); }
.par-note-ok { background: var(--forest-soft); border-color: #B7E4D2; color: #08553D; }
.par-note-ok i { color: var(--forest); }
.par-note-info { background: var(--marine-soft); border-color: #C3D8EE; color: #0F406F; }

/* ---- stato vuoto ------------------------------------------------------ */
.par-empty { padding: 56px 28px; text-align: center; }
.par-empty-mark {
    width: 46px; height: 46px; margin: 0 auto 14px;
    border-radius: 12px; border: 1px solid var(--rule);
    display: flex; align-items: center; justify-content: center;
    color: var(--mute); font-size: 18px; background: var(--paper);
}
.par-empty h3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.par-empty p { color: var(--slate); font-size: 13px; max-width: 44ch; margin: 0 auto 16px; }

/* ---- contatore ------------------------------------------------------- */
.par-count {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
    color: var(--mute); font-variant-numeric: tabular-nums;
}

/* ---- schede di sintesi ----------------------------------------------- */
.par-stat { padding: 14px 16px; }
.par-stat-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .10em;
              text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.par-stat-v { font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.par-stat-sub { font-size: 12px; color: var(--slate); }

/* ---- utilità --------------------------------------------------------- */
.par-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.par-row-end { margin-left: auto; }
.par-stack > * + * { margin-top: 12px; }
.par-muted { color: var(--slate); }
.par-faint { color: var(--mute); }
.par-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.par-divider { height: 1px; background: var(--rule); margin: 16px 0; }

/* ============================================================================
   Pagine di accesso (login, registrazione, cambio password fuori sessione)
   ----------------------------------------------------------------------------
   Nessuna barra di navigazione: la pagina deve fare una cosa sola. Il marchio
   in alto, il modulo al centro, il selettore di lingua in alto a destra perché
   la scelta va offerta prima di chiedere di leggere qualcosa.
   ========================================================================== */

.par-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
}

.par-auth-top {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 26px;
}
.par-auth-top .par-lang { margin-left: auto; }

.par-auth-main {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12px 20px 60px;
}

.par-auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 32px;
}
.par-auth-card.is-wide { max-width: 640px; }

.par-auth-head { margin-bottom: 24px; }
.par-auth-head .par-h1 { font-size: 22px; margin-bottom: 6px; }
.par-auth-head p { color: var(--slate); font-size: 13px; margin: 0; max-width: 46ch; }

.par-auth-foot {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
    font-size: 13px;
    color: var(--slate);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* il campo password mostra il requisito sotto, non in un tooltip */
.par-auth .par-hint { line-height: 1.45; }

/* ============================================================================
   Compatibilità per le pagine non ancora riscritte
   ----------------------------------------------------------------------------
   myhome, myteam, myprofile e mydelivery usano ancora .par-card / .par-avatar /
   .par-teamimg / .par-badge, che stavano nel blocco <style> del vecchio
   includehead.inc. Riscrivendo quell'include le definizioni sono sparite e le
   pagine sono rimaste senza impaginazione.

   Sono mappate sui token del sistema nuovo, così durante la transizione le
   pagine hanno lo stesso aspetto delle altre. Quando saranno riscritte con
   .par-panel questo blocco si può eliminare.
   ========================================================================== */

.par-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.par-card-h {
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule);
    background: linear-gradient(180deg, #FCFCFD 0%, #FAFBFC 100%);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--mute);
}

.par-avatar {
    width: 92px; height: 92px; object-fit: cover;
    border-radius: var(--r-md);
    border: 1px solid var(--rule);
    background: var(--paper);
}

.par-teamimg {
    width: 100%; max-height: 176px; object-fit: cover;
    border-radius: var(--r-md);
    border: 1px solid var(--rule);
    background: var(--paper);
}

.par-badge {
    display: inline-flex; align-items: center;
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: .04em;
    padding: 2px 7px; border-radius: 999px;
    border: 1px solid var(--rule-strong);
    background: var(--surface); color: var(--slate);
}

.par-filters .form-control, .par-filters .form-select { font-size: 13px; }


/* ============================================================================
   Tabulator — allineamento al sistema di design
   ----------------------------------------------------------------------------
   Il tema "modern" di Tabulator porta font, colori e bordi propri, per questo le
   griglie sembravano un'altra applicazione. Qui vengono riportate ai token di
   par-ui: stessa famiglia tipografica, stesse intestazioni in monospace
   maiuscolo, stessi filetti, stessi stati di selezione.

   Le regole sono deliberatamente specifiche (.tabulator ...) per vincere sul
   foglio del tema senza usare !important dove non serve.
   ========================================================================== */

.tabulator {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* --- intestazioni: come le <th> della bacheca ticket --- */
.tabulator .tabulator-header {
    background: #FCFCFD;
    border-bottom: 1px solid var(--rule);
    color: var(--mute);
    font-weight: 500;
}

.tabulator .tabulator-header .tabulator-col {
    background: transparent;
    border-right: 1px solid var(--rule);
}

.tabulator .tabulator-header .tabulator-col-title {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mute);
    padding: 4px 0;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
    background: var(--paper);
}
.tabulator .tabulator-header .tabulator-col[aria-sort="asc"] .tabulator-col-title,
.tabulator .tabulator-header .tabulator-col[aria-sort="desc"] .tabulator-col-title {
    color: var(--ink);
}

/* filtri di colonna: stessi campi del resto dell'interfaccia */
.tabulator .tabulator-header .tabulator-header-filter input,
.tabulator .tabulator-header .tabulator-header-filter select {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-sm);
    padding: 4px 7px;
}
.tabulator .tabulator-header .tabulator-header-filter input:focus,
.tabulator .tabulator-header .tabulator-header-filter select:focus {
    outline: none;
    border-color: var(--marine);
    box-shadow: 0 0 0 3px var(--marine-soft);
}

/* --- righe --- */
.tabulator .tabulator-tableholder .tabulator-table { background: var(--surface); }

.tabulator-row {
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    min-height: 34px;
}
.tabulator-row.tabulator-row-even { background: var(--surface); }
.tabulator-row:hover { background: #FBFCFE !important; }

.tabulator-row .tabulator-cell {
    border-right: 1px solid transparent;
    padding: 7px 12px;
    font-size: 13px;
    line-height: 1.4;
}

/* numeri, date e codici incolonnati: la firma tipografica delle pagine nuove */
.tabulator-row .tabulator-cell[tabulator-field$="Data"],
.tabulator-row .tabulator-cell[tabulator-field^="Data"],
.tabulator-row .tabulator-cell[tabulator-field^="Codice"],
.tabulator-row .tabulator-cell[tabulator-field^="ID"],
.tabulator-row .tabulator-cell[tabulator-field^="Versione"],
.tabulator-row .tabulator-cell[tabulator-field="Matricola"],
.tabulator-row .tabulator-cell[tabulator-field="Telefono"] {
    font-family: var(--font-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--slate);
}

/* riga selezionata: due grigi invece del blu. Il colore in una griglia deve
   restare disponibile per il significato (scaduto, bloccato): usarlo anche per
   la selezione, che e' uno stato dell'interfaccia, crea rumore. */
.tabulator-row.tabulator-selected { background: #ECEEF2 !important; }
.tabulator-row.tabulator-selected:hover { background: #E2E5EA !important; }
.tabulator-row.tabulator-selected .tabulator-cell { color: var(--ink); }

/* cella in modifica */
.tabulator-row .tabulator-cell.tabulator-editing {
    border: 1px solid var(--marine);
    box-shadow: 0 0 0 3px var(--marine-soft);
    padding: 6px 11px;
}
.tabulator-row .tabulator-cell.tabulator-editing input,
.tabulator-row .tabulator-cell.tabulator-editing select {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--ink);
}

/* cella non valida */
.tabulator-row .tabulator-cell.tabulator-validation-fail {
    border: 1px solid var(--crimson);
    background: var(--crimson-soft);
}
.tabulator-row .tabulator-cell.tabulator-validation-fail input { color: var(--crimson); }

/* Colonne di servizio a sinistra (numero di riga e selettore).
   Erano azzurre per via del tema: due tonalita' di grigio le rendono
   riconoscibili come parte della cornice e non come dati. */
.tabulator-row .tabulator-cell:first-child,
.tabulator-row .tabulator-cell[tabulator-field="rownum"],
.tabulator .tabulator-header .tabulator-col:first-child,
.tabulator .tabulator-header .tabulator-col[tabulator-field="rownum"] {
    background: #F2F4F7;
    color: var(--mute);
    font-family: var(--font-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.tabulator-row .tabulator-cell:nth-child(2).tabulator-row-handle,
.tabulator-row .tabulator-cell[tabulator-field="sel"],
.tabulator .tabulator-header .tabulator-col[tabulator-field="sel"] {
    background: #E7EAEF;
}

/* celle di sola lettura: grigio neutro, non il colore del tema */
.tabulator-row .tabulator-cell.ign-ROcolor,
.tabulator-row .ign-ROcolor { background: #FAFBFC; color: var(--slate); }

/* riquadri di selezione e maniglie: nessun blu */
.tabulator-row.tabulator-selectable:hover { background: #FBFCFE !important; }
.tabulator .tabulator-col-resize-handle:hover { background: var(--rule-strong); }

/* --- piede e paginazione --- */
.tabulator .tabulator-footer {
    background: #FCFCFD;
    border-top: 1px solid var(--rule);
    color: var(--slate);
    font-size: 12px;
}
.tabulator .tabulator-footer .tabulator-page {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--slate);
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-sm);
    padding: 4px 9px;
    margin: 0 2px;
}
.tabulator .tabulator-footer .tabulator-page:hover { background: var(--paper); color: var(--ink); }
.tabulator .tabulator-footer .tabulator-page.active {
    background: var(--ink); border-color: var(--ink); color: #fff;
}

/* --- gruppi e caricamento --- */
.tabulator .tabulator-row.tabulator-group {
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--slate);
}
.tabulator .tabulator-loader { background: rgba(255,255,255,.7); }
.tabulator .tabulator-loader .tabulator-loader-msg {
    font-family: var(--font-ui); font-size: 13px;
    color: var(--slate); background: transparent; border: none;
}

/* --- contenitore della griglia nelle pagine docente --- */
#igntable { margin: 0; }

/* ============================================================================
   Barra di navigazione: due densità
   ----------------------------------------------------------------------------
   Studenti: cinque voci, con etichetta. Docenti: dieci voci, sole icone con
   tooltip — con le etichette la barra andava a capo su qualunque portatile.
   La sezione corrente e' scritta a destra, così l'orientamento non si perde.
   ========================================================================== */

.par-brand { text-decoration: none; }
.par-brand:hover { text-decoration: none; }
.par-brand .par-brand-name { font-size: 15px; letter-spacing: .16em; }

.par-tabs.is-compact .par-tab { padding: 8px 10px; }
.par-tabs.is-compact .par-tab span { display: none; }
.par-tabs.is-compact .par-tab i { font-size: 14px; }

.par-tab span { white-space: nowrap; }

.par-section {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--mute);
    padding-right: 4px;
}

.par-who-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

@media (max-width: 1200px) {
    .par-tabs .par-tab span { display: none; }        /* anche gli studenti passano a icone */
    .par-tabs .par-tab { padding: 8px 10px; }
}
@media (max-width: 860px) {
    .par-section, .par-who-name { display: none; }
    .par-brand-name { display: none; }
}

/* separatore verticale fra gruppi di pulsanti */
.par-divider-v { width: 1px; align-self: stretch; background: var(--rule); margin: 0 4px; }
.par-pagehead-end .par-btn i { font-size: 13px; }

/* ============================================================================
   Controlli raggruppati
   ----------------------------------------------------------------------------
   Un pulsante isolato per ogni azione fa leggere la barra come un elenco di
   possibilità slegate. Raggruppare le azioni affini in un unico blocco con
   divisori interni — il controllo segmentato dei sistemi Apple — rende evidente
   che appartengono alla stessa famiglia, e riduce il numero di oggetti che
   l'occhio deve contare.

   Regola applicata in tutta l'applicazione: al massimo tre elementi nella barra
   di una pagina — un gruppo di azioni sui dati, un gruppo di azioni sulla vista,
   e una sola azione primaria a destra.
   ========================================================================== */

.par-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.par-seg {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    overflow: hidden;
}

.par-seg > .par-btn,
.par-seg > button.par-btn,
.par-seg > a.par-btn {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 7px 12px;
    color: var(--slate);
}
.par-seg > .par-btn + .par-btn { border-left: 1px solid var(--rule); }
.par-seg > .par-btn:hover { background: var(--paper); color: var(--ink); }
.par-seg > .par-btn:active { background: #EFF1F4; }
.par-seg > .par-btn.is-on { background: var(--ink); color: #fff; }
.par-seg > .par-btn.is-on:hover { background: var(--ink); color: #fff; }
.par-seg > .par-btn-danger { color: var(--crimson); }
.par-seg > .par-btn-danger:hover { background: var(--crimson-soft); }
.par-seg > .par-btn:disabled { color: var(--mute); cursor: not-allowed; background: transparent; }

/* la barra di pagina non contiene mai un pulsante nudo: solo gruppi + primaria */
.par-pagehead-end { gap: 10px; }

/* campo di ricerca in barra: stessa altezza dei gruppi */
.par-toolbar .par-search .par-input { padding-top: 7px; padding-bottom: 7px; }


/* ============================================================================
   Caselle di selezione delle griglie
   ----------------------------------------------------------------------------
   I rettangolini azzurri a sinistra NON sono un fondo di cella: sono le caselle
   di spunta della colonna di selezione (formatter "rowSelection"), disegnate dal
   browser con il proprio colore d'accento — blu su quasi tutti i sistemi. Per
   questo le regole sui background non avevano effetto: bisogna ridisegnare il
   controllo, non la cella che lo contiene.

   Due tonalità di grigio: bordo chiaro su bianco quando non e' spuntata, grigio
   medio pieno quando lo e'.
   ========================================================================== */

.tabulator input[type="checkbox"],
.tabulator-row input[type="checkbox"],
.tabulator .tabulator-header input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    margin: 0;
    padding: 0;
    border: 1px solid #C3C9D4;          /* grigio chiaro: non spuntata */
    border-radius: 3px;
    background: #FFFFFF;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    transition: background .1s ease, border-color .1s ease;
}

.tabulator input[type="checkbox"]:hover,
.tabulator-row input[type="checkbox"]:hover { border-color: #98A2B3; }

.tabulator input[type="checkbox"]:checked,
.tabulator-row input[type="checkbox"]:checked,
.tabulator .tabulator-header input[type="checkbox"]:checked {
    background: #6B7280;                /* grigio medio: spuntata */
    border-color: #6B7280;
}

/* il segno di spunta, disegnato con due bordi ruotati: nessuna immagine */
.tabulator input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px; top: 1px;
    width: 4px; height: 8px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.tabulator input[type="checkbox"]:indeterminate {
    background: #AEB4BF;
    border-color: #AEB4BF;
}
.tabulator input[type="checkbox"]:indeterminate::after {
    content: "";
    position: absolute;
    left: 3px; top: 6px;
    width: 7px; height: 2px;
    background: #FFFFFF;
}

.tabulator input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--slate);
    outline-offset: 1px;
}

/* accent-color come rete di sicurezza per i browser che ignorano appearance */
.tabulator, .tabulator-row, .tabulator .tabulator-header { accent-color: #6B7280; }

/* ============================================================================
   Caricatore a blocchi
   ========================================================================== */

.par-upload .par-up-file { margin-bottom: 8px; }
.par-up-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.par-up-info { font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.par-up-ok { color: var(--forest); }
.par-up-err { color: var(--crimson); }

.par-up-track {
    height: 4px;
    background: var(--rule);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 10px;
}
.par-up-bar {
    height: 100%;
    width: 0;
    background: var(--ink);
    border-radius: 999px;
    transition: width .18s ease;
}


/* la colonna "#" apre la form di dettaglio: deve dirlo */
.tabulator-row .tabulator-cell[tabulator-field="rownum"] { cursor: pointer; }
.tabulator-row .tabulator-cell[tabulator-field="rownum"]:hover {
    background: #E7EAEF;
    color: var(--ink);
    text-decoration: underline;
}