/* ===========================================================================
   modal.css — aspetto unico per tutte le finestre del gestionale.

   Fino ad ora ogni pagina aveva le sue regole (emergenze ed eventi una,
   volontari un'altra, turni una terza, admin nessuna): stesse finestre con
   cinque aspetti diversi. Qui c'e' un unico modello, quello della finestra
   Gestione Ruoli: barra rossa in alto con il titolo, corpo bianco che scorre,
   pulsante di chiusura tondo.

   Le classi m-* le assegna modal-ui.js: cosi' non si tocca l'HTML delle
   pagine e le regole vecchie restano come riserva.
   Il file va caricato dopo il CSS della pagina e prima di mobile.css, che
   sul telefono continua a comandare (finestra a schermo intero).
   ========================================================================= */

:root{
  --m-rosso: #b71c1c;
  --m-rosso-scuro: #8e1515;
  --m-bordo: #e3e3e3;
}

/* ----- Riquadro ----- */
.m-box{
  background: #fff !important;
  border-radius: 14px !important;
  padding: 0 !important;            /* lo spazio lo mette .m-corpo */
  overflow: hidden !important;      /* per non far uscire la barra rossa */
  box-shadow: 0 18px 50px rgba(0,0,0,.35) !important;
  max-height: 88vh !important;
  /* niente !important su display: le pagine nascondono certe finestre
     proprio con display, e forzarlo qui le farebbe comparire sempre */
  display: flex;
  flex-direction: column !important;
  box-sizing: border-box;
  width: 100%;
}
.m-box *{ box-sizing: border-box; }

/* ----- Barra rossa del titolo: resta ferma mentre il corpo scorre ----- */
.m-head{
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: var(--m-rosso);
  color: #fff;
  padding: 16px 20px;
}
.m-head-testo{ min-width: 0; }
.m-head h1, .m-head h2, .m-head h3, .m-head h4{
  margin: 0 !important;
  color: #fff !important;
  font-size: 1.25rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.m-head .m-sottotitolo{
  margin-top: 6px;
  font-weight: 800;
  font-size: .9rem;
  color: rgba(255,255,255,.92);
}

/* Il pulsante di chiusura, qualunque fosse prima.
   Una sola X in tutto il gestionale: tonda, 40px, bianca su fondo rosso
   (rossa piena se sta su fondo chiaro), ruota al passaggio del mouse.
   .x-tonda la mette modal-ui.js su tutte le X fuori dalle finestre
   (notifiche, meteo, mappe, avvisi...). min/max fissati perche' su
   telefono i pulsanti hanno un'altezza minima che le rendeva ovali. */
:root{ --x-dim: 40px; }
.m-close, .x-tonda{
  flex: 0 0 var(--x-dim) !important;
  width: var(--x-dim) !important;  height: var(--x-dim) !important;
  min-width: var(--x-dim) !important; min-height: var(--x-dim) !important;
  max-width: var(--x-dim) !important; max-height: var(--x-dim) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.2) !important;
  color: #fff !important;
  font: 400 26px/1 Arial, Helvetica, sans-serif !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: transform .3s, background .3s;
}
.m-close{
  display: inline-flex;
  /* alcune pagine lo mettevano in un angolo in assoluto: qui torna in riga */
  position: static !important;
  top: auto !important;
  right: auto !important;
}
.x-tonda:not([hidden]){ display: inline-flex; }
.m-close:hover, .x-tonda:hover{ background: rgba(255,255,255,.34) !important; transform: rotate(90deg); }
.x-tonda.x-chiara{ background: #b71c1c !important; color: #fff !important; }
.x-tonda.x-chiara:hover{ background: #8e1515 !important; }
.m-close:focus-visible, .x-tonda:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; }
.x-tonda.x-chiara:focus-visible{ outline-color: #b71c1c; }

/* X piccola per togliere una voce da un elenco (qualifiche, requisiti...) */
.x-mini{
  width: 22px !important; height: 22px !important;
  min-width: 22px !important; min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  font: 700 15px/1 Arial, Helvetica, sans-serif !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle;
  cursor: pointer;
  flex: 0 0 22px;
}
.x-mini:not([hidden]){ display: inline-flex; }

/* ----- Corpo che scorre ----- */
.m-corpo{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;              /* niente piu' barra orizzontale */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 18px 20px 20px;
}
.m-corpo > *:first-child{ margin-top: 0; }

/* ----- Campi: etichetta sopra, come nella finestra dei turni ----- */
.m-campo{
  display: block;
  flex: 1 1 220px;
  min-width: 0;
  margin-bottom: 2px;
}
.m-label{
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #555;
  margin: 0 0 4px 2px;
  overflow-wrap: anywhere;
}
.m-label .m-obbligatorio{ color: var(--m-rosso); margin-left: 2px; }
.m-campo > input,
.m-campo > select,
.m-campo > textarea{ width: 100%; }

/* ----- Elenchi a selezione multipla trasformati in pulsanti ----- */
.m-multi{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fafafa;
  max-height: 210px;
  overflow-y: auto;
}
.m-multi-vuoto{ font-size: 13px; color: #888; font-style: italic; margin: 0; }
.m-opz{
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1.5px solid #ccc;
  border-radius: 999px;
  background: #fff;
  color: #444;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: background .12s, border-color .12s, color .12s;
}
.m-opz:has(input:checked),
.m-opz[aria-pressed="true"]{
  background: var(--m-rosso);
  border-color: var(--m-rosso);
  color: #fff;
}
.m-opz:focus-visible{ outline: 2px solid var(--m-rosso); outline-offset: 2px; }

/* ----- Tabelle dentro le finestre ----- */
.m-corpo table{ width: 100%; border-collapse: collapse; }
.m-corpo th, .m-corpo td{
  padding: 9px 7px;
  border-bottom: 1px solid var(--m-bordo);
  text-align: left;
  vertical-align: top;
}
.m-corpo th{ color: var(--m-rosso); font-size: 14px; }

/* ----- Telefono: barra piu' compatta, campi comodi da toccare ----- */
@media (max-width: 640px){
  .m-box{ max-height: 100% !important; border-radius: 0 !important; }
  .m-head{ padding: 10px 12px 10px 14px; min-height: 60px; align-items: center; }
  .m-head h1, .m-head h2, .m-head h3, .m-head h4{ font-size: 1.1rem; }
  .m-corpo{ padding: 14px 12px 18px; }
  .m-campo{ flex: 1 1 100%; }
  .m-corpo input, .m-corpo select, .m-corpo textarea{ font-size: 16px; }
  .m-corpo table{ display: block; overflow-x: auto; }
}

/* Finestre con layout proprio (Verbali, Bacheca, Prestiti...): fondo bianco
   garantito anche se lo stile della singola finestra lo dimentica. */
.m-box-auto.m-no-auto { background:#fff; border-radius:12px; overflow:hidden; }