/* =====================================================================
   IL GUSCIO DEI MODALI — 2026-09-04 (call coi clienti)
   Rifinito il 2026-09-05 con le quattro segnalazioni:
     · da ridotto il click non riapriva  -> era il velo, che restava a
       coprire tutto anche da invisibile
     · da ridotto la pagina non si usava -> stessa causa
     · i modali si devono poter spostare -> barra del titolo, che fa da
       presa esattamente come i pannelli della chat
     · i pannelli della chat si devono poter ridurre -> la fila delle
       linguette adesso accoglie anche loro

   "tutto quello che e' un pop in deve diventare un modale (scheda e
    qualsiasi altra cosa) con riduzione a tab"
   "tutti i modali devono seguire l'organizzazione e i colori di questo
    tab, inclusi effetti hover"
   "il modale di interazione non deve chiudersi cliccando fuori da esso"
   "far aprire i modali in base alla risoluzione dello schermo E
    permettere all'utente di modificare la dimensione dei modali"

   I colori sono quelli del mockup (ticketnavigazione): fondo #141312,
   bordo #2a2622, oro #c5a880.

   Il foglio lo carica header.inc.php su tutte le pagine, ma non dipinge
   niente finche' non si apre un modale: tutto sta sotto #mdl-strato,
   che nasce vuoto.
   ===================================================================== */

#mdl-strato {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9000;
    pointer-events: none;          /* lo strato non intercetta niente... */
}
#mdl-strato > *   { pointer-events: auto; }   /* ...i suoi figli si' */

/* ------------------------------------------------------- il velo
   C'e' per dare l'aria del modale, ma NON chiude: il click sopra
   fa solo lampeggiare il bordo del modale, cosi' si capisce dove
   bisogna guardare.
   ⚠️ Quando non e' visibile deve anche smettere di prendere i click,
   altrimenti da modale ridotto la pagina sotto resta bloccata: era la
   segnalazione numero 2. */
.mdl-velo {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none !important;
    transition: opacity 0.25s ease;
}
.mdl-velo.mdl-visibile { opacity: 1; pointer-events: auto !important; }

/* ------------------------------------------------------- la finestra */
.mdl {
    position: absolute;
    background-color: #141312;
    background-image: radial-gradient(circle at 50% 50%, #1a1816 0%, #11100f 100%);
    border: 1px solid #2a2622;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s ease;
}
/* mentre si trascina (l'angolo o la barra) la transizione va spenta,
   altrimenti la finestra "insegue" il mouse con quattro decimi di ritardo */
.mdl.mdl-in-movimento { transition: none; }
/* 2026-09-15 (Henrik, zoom del browser): quando cambia la misura dello
   schermo la finestra si ricentra di colpo invece di scivolare per quattro
   decimi. La classe la mette e la toglie modale.js, nel gestore del resize. */
.mdl.mdl-senza-animazione { transition: none; }

/* Durante il trascinamento l'iframe non deve mangiarsi il mouse: senza
   questo, appena il puntatore entra nella pagina di dentro il movimento
   si pianta. */
#mdl-strato.mdl-trascina .mdl-corpo { pointer-events: none; }

/* ------------------------------------------------------- la barra del
   titolo: e' la presa per spostare la finestra, e tiene il nome e le
   iconcine. Sottile, cosi' non ruba spazio alla pagina di dentro. */
.mdl-barra {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 26px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 6px 0 12px;
    background-color: #151413;
    border-bottom: 1px solid #2a2622;
    cursor: move;
    user-select: none;
}
.mdl-nome {
    font-family: 'Cabin', Tahoma, sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #c5a880;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.mdl-conta {
    display: inline-block;
    margin-left: 6px;
    min-width: 15px;
    padding: 0 4px;
    border-radius: 8px;
    background: #7b2d2d;
    color: #f0e2cd;
    font-size: 10px;
    line-height: 15px;
    text-align: center;
    letter-spacing: 0;
}

.mdl-corpo {
    position: absolute;
    top: 26px; left: 0;
    border: 0;
    display: block;
    background: transparent;
}

/* ------------------------------------------------------- le iconcine */
.mdl-icone {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
    cursor: default;
}
.mdl-icone button {
    width: 22px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    color: #7a7067;
    cursor: pointer;
    font-family: 'Cabin', Tahoma, sans-serif;
    transition: color 0.2s, border-color 0.2s;
}
.mdl-icone button:hover {
    color: #c5a880;
    border-color: #3a332a;
}
.mdl-icone svg { width: 13px; height: 13px; }

/* 2026-09-09 (collaudo, punto 16): "Va cancellato il ridimensionamento
   libero in basso a destra da ogni modale". L'angolo con i due trattini
   obliqui non c'e' piu' — ne' qui ne' in modale.js. */

/* ------------------------------------------------------- la linguetta
   "click e rimane linguetta": la finestra si accuccia in basso a
   sinistra, in fila con le altre gia' ridotte. */
.mdl.mdl-ridotto {
    height: 46px !important;
    min-height: 46px;
    width: 250px !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.8);
    cursor: pointer;
    background-image: none;
    background-color: #151413;
}
.mdl.mdl-ridotto .mdl-barra { height: 100%; cursor: pointer; }
/* da ridotto l'iframe resta grande com'era, solo nascosto e ritagliato dal box:
   cosi' la pagina dentro non si rifa' i conti e non perde quello che stavi
   scrivendo */
.mdl.mdl-ridotto .mdl-corpo { visibility: hidden; }

/* ------------------------------------------------------- le linguette
   dei pannelli che vivono gia' dentro la pagina (Pannello Giocatore e
   Pannello Narratore della chat): non sono iframe, ma da ridotti stanno
   nella stessa fila e si comportano allo stesso modo. */
.mdl-linguetta {
    position: absolute;
    width: 250px;
    height: 46px;
    background-color: #151413;
    border: 1px solid #2a2622;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 6px 0 12px;
    cursor: pointer;
    z-index: 9005;
}
.mdl-linguetta:hover { border-color: #c5a880; }
.mdl-linguetta .mdl-nome { pointer-events: none; }

/* ------------------------------------------------------- il bordo che
   lampeggia quando si clicca fuori (invece di chiudersi) */
@keyframes mdlBussa {
    0%, 100% { border-color: #2a2622; }
    50%      { border-color: #c5a880; }
}
.mdl.mdl-bussa { animation: mdlBussa 0.5s ease 2; }

/* ------------------------------------------------------- il riquadro
   della dimensione (si apre dall'iconcina ⤢) */
.mdl-dim {
    position: absolute;
    right: 8px;
    top: 30px;
    z-index: 4;
    background-color: #171717;
    border: 1px solid #2a2622;
    padding: 10px 12px;
    display: none;
    font-family: 'Cabin', Tahoma, sans-serif;
    color: #9a9690;
    font-size: 11px;
    min-width: 190px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
}
.mdl-dim.mdl-visibile { display: block; }
.mdl-dim b {
    display: block;
    color: #c5a880;
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.mdl-dim a {
    display: block;
    color: #9a9690;
    text-decoration: none;
    padding: 4px 6px;
    border: 1px solid transparent;
    cursor: pointer;
}
.mdl-dim a:hover { color: #c5a880; border-color: #3a332a; }
.mdl-dim a.sel   { color: #c5a880; border-color: #3a332a; }
.mdl-dim .mdl-dim-nota {
    display: block;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #2a2622;
    color: #6f6a64;
    font-size: 10px;
    line-height: 1.5;
}

/* ------------------------------------------------------- schermi bassi:
   sotto una certa altezza la finestra prende tutto lo spazio utile.

   2026-09-16 (Henrik, secondo video): NON le finestre a misura fissa (il
   Ticket). Quelle tengono 1030x720 e, se non ci stanno, modale.js le
   rimpicciolisce tutte insieme con scale(). Questa regola invece le
   ACCORCIAVA con !important sopra il rimpicciolimento: con Chrome al 125%
   (pagina alta 555) il Ticket si vedeva da 80 a 477 px, tagliato sotto e
   senza paginatore. Succedeva a chiunque avesse la pagina piu' bassa di
   620 px, anche al 100% (un portatile 1366x768). */
@media (max-height: 620px) {
    .mdl:not(.mdl-ridotto):not(.mdl-misura-fissa) { top: 10px !important; height: calc(100vh - 20px) !important; }
}

/* =====================================================================
   COLLAUDO 2026-09-09 — LA FINESTRA SENZA BARRA (punti 2 e 3)

     "2. La seguente barra e' da cancellare"
     "3. Il titolo (SEZIONE TICKET) compare solo con la pagina minimizzata
      in basso a sinistra, di norma no. I tasti sulla destra devono
      trovarsi sulla stessa riga della tab di navigazione"

   La pagina dentro (per ora il Help Desk) dichiara di avere una testata
   sua chiamando gdrcd_modale_senza_barra(): da li' in poi la barra del
   guscio non si vede piu'. Resta pero' al suo posto, trasparente e alta
   quanto la testata della pagina, per due motivi: ci vivono il "-" e la
   "x" (che cosi' finiscono sulla stessa riga delle voci di navigazione) e
   ci vive il titolo, che serve quando la finestra e' ridotta a linguetta.

   ⚠️ Il centro della striscia NON deve prendere i click, se no le voci di
   navigazione sotto non si potrebbero premere: la barra e' pointer-events
   none e li riaccende solo sulle iconcine. Lo spostamento della finestra
   lo fa partire la pagina dentro (gdrcd_modale_presa).
   ===================================================================== */
.mdl.mdl-senza-barra .mdl-barra {
    height: 60px;
    padding: 0 22px 0 12px;
    background: none;
    border-bottom: none;
    cursor: default;
    pointer-events: none;
    align-items: center;
    justify-content: flex-end;
}
.mdl.mdl-senza-barra .mdl-nome {
    display: none;
}
.mdl.mdl-senza-barra .mdl-icone {
    pointer-events: auto;
}
/* la pagina dentro parte da sopra: la sua testata e' la testata */
.mdl.mdl-senza-barra .mdl-corpo {
    top: 0;
}

/* Da ridotta invece la barra torna quella di sempre: e' l'unica cosa che
   si vede, e il titolo ci deve stare ("SEZIONE TICKET" + freccia + x). */
.mdl.mdl-senza-barra.mdl-ridotto .mdl-barra {
    height: 100%;
    padding: 0 6px 0 12px;
    background-color: #151413;
    cursor: pointer;
    pointer-events: auto;
    justify-content: space-between;
}
.mdl.mdl-senza-barra.mdl-ridotto .mdl-nome { display: block; }

/* 2026-10 — la scheda del personaggio rifatta sulla loro pagina ha i suoi
   «-» e «x» nella testata (gdrcd_modale_tasti_dentro): da aperta la barra
   del guscio non si vede; da ridotta resta la linguetta di sempre. */
.mdl.mdl-tasti-dentro:not(.mdl-ridotto) .mdl-barra {
    display: none;
}