/* servizio-chiesa-style.css */

/* Variabili base */
:root{
  --sc-max:1400px;
  --sc-x:24px;
  --sc-gap:16px;
  --sc-card-radius:12px;
  --sc-shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 22px -14px rgba(16,24,40,.16);
  --sc-border:1px solid #eef1f4;
  --sc-text:#1b2230;
  --sc-muted:#5b6574;
  /* tema */
  --sc-primary:#2271b1;
  --sc-primary-600:#175887;
  --sc-surface:#f8fafc;
  --sc-ring:0 0 0 3px rgba(34,113,177,.15);
}

/* Barra info/azione (facoltativa) */
.sc-order-bar{
  max-width:var(--sc-max);
  margin:4px auto 10px;
  padding:0 var(--sc-x);
  display:flex;
  align-items:center;
  gap:12px;
}
.sc-order-hint{color:#6b7280;font-size:12.5px;}

/* ========== CALENDARIO (generale) ========== */
.sc-calendar{
  width:100%;
  border-collapse:separate;
  border-spacing:4px;
  background:none;
  table-layout:fixed;
}
.sc-calendar th{
  min-height:28px;
  height:28px;
  background:transparent;
  font-weight:700;
  text-align:center;
  font-size:12px;
  color:#475569;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:6px 4px 10px;
}
.sc-calendar td{
  width:14.28%;
  min-height:110px;
  height:110px;
  vertical-align:top;
  background:#fff;
  border-radius:8px;
  padding:8px;
  position:relative;
  cursor:pointer;
  box-shadow:none;
  transition:background .12s;
  border:1px solid #edf1f6;
}
.sc-calendar td:hover{
  background:#f6f9fc;
}
/* Weekend (sab/dom): whisper appena percettibile, per orientarsi senza appesantire */
.sc-calendar:not(.sc-calendar--weeknums) td:nth-child(6),
.sc-calendar:not(.sc-calendar--weeknums) td:nth-child(7){
  background:#fcfdff;
}
.sc-calendar:not(.sc-calendar--weeknums) td:nth-child(6):hover,
.sc-calendar:not(.sc-calendar--weeknums) td:nth-child(7):hover{
  background:#f6f9fc;
}
.sc-calendar .sc-event{
  margin:5px 0;
  padding:4px 8px;
  border-radius:7px;
  font-size:12px;
  /* Tinta tenue: sfondo chiaro derivato dal colore-servizio + barretta colore a
     sinistra (fallback grigio chiaro per browser senza color-mix). Niente tinta
     piena satura né ombra: griglia molto più leggera. */
  background:#e9eef4;
  background:color-mix(in srgb, var(--ev-bg,#94a3b8) 26%, #fff);
  border-left:3px solid var(--ev-bg,#94a3b8);
  color:#1e293b!important;
  position:relative;
  font-weight:600;
  line-height:1.4;
  box-shadow:none;
  word-break:break-word;
  overflow-wrap:anywhere;
  cursor:pointer;
  transition:background .12s ease, box-shadow .12s ease;
}
.sc-calendar .sc-event:hover{
  background:#dbe4ee;
  background:color-mix(in srgb, var(--ev-bg,#94a3b8) 38%, #fff);
  box-shadow:0 1px 4px rgba(15,23,42,.1);
}
.sc-calendar .sc-event .sc-ev-time{
  font-size:11px;
  font-weight:500;
  opacity:.8;
}
.sc-calendar .sc-event .sc-ev-note{
  font-size:11px;
  font-weight:500;
  color:#475569;
  margin-top:2px;
}
/* Toast notifiche (in alto a destra, sopra tutto, auto-dismiss) */
.sc-toast{
  position:fixed;
  top:42px;
  right:24px;
  z-index:100000;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:260px;
  max-width:380px;
  padding:13px 16px;
  border-radius:12px;
  background:#fff;
  border:1px solid #eef0f3;
  box-shadow:0 12px 32px rgba(15,23,42,.16);
  font-size:14px;
  font-weight:500;
  color:#1f2937;
  animation:sc-toast-in .26s cubic-bezier(.21,1.02,.73,1);
}
.sc-toast.sc-toast-out{animation:sc-toast-out .22s ease-in forwards;}
.sc-toast-icon{
  flex-shrink:0;
  width:30px;
  height:30px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}
.sc-toast-success .sc-toast-icon{background:#16a34a;}
.sc-toast-danger  .sc-toast-icon{background:#dc2626;}
.sc-toast-success{box-shadow:0 12px 32px rgba(22,163,74,.20);}
.sc-toast-danger{box-shadow:0 12px 32px rgba(220,38,38,.20);}
.sc-toast-msg{flex:1 1 auto;line-height:1.35;}
.sc-toast-close{
  flex-shrink:0;
  width:24px;
  height:24px;
  border:none;
  background:none;
  color:#6b7280;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  border-radius:7px;
  transition:color .12s,background .12s;
}
.sc-toast-close:hover{color:#374151;background:#f3f4f6;}
@keyframes sc-toast-in{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
@keyframes sc-toast-out{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-10px);}}

/* Riga azioni del modale calendario */
/* Footer del modale calendario: full-width, separato, Salva in evidenza.
   I margini negativi annullano il padding del modale (.sc-calendar-modal:
   24px 30px 20px) per estendere il footer fino ai bordi. */
.sc-modal-actions{
  margin:22px -30px -20px;
  padding:15px 30px;
  display:flex;
  align-items:center;
  gap:10px;
  border-top:1px solid #eef1f4;
  background:#f8fafc;
  border-radius:0 0 10px 10px;
}
.sc-modal-actions .sc-btn-primary{
  font-size:15px;
  font-weight:700;
  padding:11px 28px;
}
@media (max-width:600px){
  .sc-modal-actions{ margin:20px -30px -20px; }
  .sc-modal-actions .sc-btn-primary{ flex:1; }
}
.sc-modal-actions-icons{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}
.sc-modal-icon-btn{
  width:36px;
  height:36px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  flex-shrink:0;
  transition:background .15s;
}
.sc-modal-icon-btn[hidden]{display:none;}
.sc-modal-print-btn{background:#2563eb;}
.sc-modal-print-btn:hover{background:#1d4ed8;}
.sc-modal-del-btn{background:#dc2626;}
.sc-modal-del-btn:hover{background:#b91c1c;}

/* Numero giorno */
.sc-calendar td > div:first-child {
  font-size:13px;
  font-weight:600;
  color:#64748b;
  margin-bottom:3px;
}
/* Numero giorno: pill che diventa cerchio pieno per "oggi" */
.sc-cal-daynum{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 5px;
  border-radius:12px;
  box-sizing:border-box;
}
/* Evidenzia oggi: numero in cerchio blu, niente più sfondo pieno sulla cella */
.sc-calendar td.sc-is-today{
  border-color:#bfdbfe;
}
.sc-calendar td.sc-is-today .sc-cal-daynum{
  background:#2563eb;
  color:#fff;
}

/* Hint "clicca per aggiungere" sulle celle-giorno (solo admin/editor) */
.sc-calendar--editable td:has(.sc-cal-daynum){
  position:relative;
  cursor:pointer;
}
.sc-calendar--editable td:has(.sc-cal-daynum)::after{
  content:"+";
  position:absolute;
  top:3px;
  right:7px;
  font-size:16px;
  font-weight:600;
  line-height:1;
  color:#64748b;
  opacity:0;
  transition:opacity .15s;
  pointer-events:none;
}
.sc-calendar--editable td:has(.sc-cal-daynum):hover::after{
  opacity:1;
}

/* Variante compatta */
.sc-calendar--compact td{
  min-height:84px;
  height:84px;
  padding:6px;
}
@media (max-width:600px){
  .sc-calendar--compact td{
    min-height:56px;
    height:56px;
    padding:4px;
  }
}

/* Colonna numeri settimana */
.sc-calendar--weeknums th:first-child,
.sc-calendar--weeknums td:first-child{
  width:56px;
  min-width:52px;
  max-width:72px;
  text-align:center;
  font-weight:700;
  background:#eef6ff;
  color:#1a2733;
  border-radius:6px;
}
.sc-calendar--weeknums th:not(:first-child),
.sc-calendar--weeknums td:not(:first-child){
  width:calc((100% - 56px) / 7);
}
.sc-calendar td.sc-weeknum{
  vertical-align:middle;
  cursor:default;
}
.sc-calendar td.sc-weeknum:hover{
  background:#eef6ff;
  box-shadow:none;
}

/* Mobile: nascondi colonna # */
@media (max-width:640px){
  .sc-calendar--weeknums th:first-child,
  .sc-calendar--weeknums td:first-child{display:none;}
  .sc-calendar--weeknums th:not(:first-child),
  .sc-calendar--weeknums td:not(:first-child){width:14.2857%;}
}

/* ========== MODAL (calendario, team, servizi, ruoli) ========== */
.sc-modal-bg{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.3);
  z-index:10;
}
.sc-modal-bg.active{display:block;}

.sc-modal{
  display:none;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  border-radius:10px;
  padding:26px 32px 18px;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  z-index:20;
  min-width:340px;
  max-width:95vw;
  max-height:96vh;
}
.sc-modal.active{display:block;}

.sc-modal form label:not(.sc-chip-check){
  display:block;
  font-size:14px;
  color:#555;
  margin-bottom:7px;
  font-weight:600;
  letter-spacing:.01em;
}
.sc-modal form input:not([type="radio"]):not([type="checkbox"]),
.sc-modal form select,
.sc-modal form textarea{
  width:100%;
  padding:9px 10px;
  border:1.5px solid #ccd6dd;
  border-radius:7px;
  margin-bottom:16px;
  font-size:15px;
  background:#fafcff;
  transition:border .18s,box-shadow .18s;
  box-sizing:border-box;
}
/* scopo ristretto: evita di toccare altri input colore dell’admin */
.sc-calendar-modal input#colore{height:3.5em;}

.sc-modal form input:not([type="radio"]):not([type="checkbox"]):focus,
.sc-modal form select:focus,
.sc-modal form textarea:focus{
  border-color:var(--sc-primary);
  box-shadow:var(--sc-ring);
}
.sc-modal-close{
  position:absolute;
  top:8px;
  right:14px;
  font-size:26px;
  color:#6b7280;
  cursor:pointer;
  background:none;
  border:none;
  z-index:25;
}
.sc-modal-close:hover{color:#d32f2f;}
/* Header del modale calendario: titolo + chiusura, separato dal corpo */
.sc-cal-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:20px;
  padding-bottom:14px;
  border-bottom:1px solid #eef1f4;
}
.sc-cal-modal-head .sc-modal-close{
  position:static;
  top:auto;
  right:auto;
  font-size:26px;
  line-height:1;
}
.sc-cal-modal-title{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:16px;
  font-weight:800;
  color:#1e293b;
}
.sc-cal-modal-title svg{ color:#2563eb; flex-shrink:0; }
/* Modale più ampio, con colonne più larghe per dare respiro */
.sc-calendar-modal{ width:min(820px, 95vw); padding:24px 30px 20px; }
.sc-calendar-modal .sc-modal-col{ max-width:420px; }
.sc-modal-col{
  flex:1 1 0;
  min-width:210px;
  max-width:350px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ── Header e footer generici per i modali-form (servizi, ruoli, team) ──
   Presuppongono il padding base di .sc-modal (26px 32px 18px): i margini
   negativi del footer lo annullano per estenderlo ai bordi. */
.sc-fmodal-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 20px; padding-bottom:14px; border-bottom:1px solid #eef1f4;
}
.sc-fmodal-head .sc-modal-close{ position:static; top:auto; right:auto; font-size:26px; line-height:1; }
.sc-fmodal-title{ display:inline-flex; align-items:center; gap:9px; font-size:16px; font-weight:800; color:#1e293b; margin:0; }
.sc-fmodal-title svg{ color:#2563eb; flex-shrink:0; }
.sc-fmodal-foot{
  margin:22px -32px -18px; padding:15px 32px;
  display:flex; align-items:center; gap:10px;
  border-top:1px solid #eef1f4; background:#f8fafc; border-radius:0 0 10px 10px;
}
.sc-fmodal-foot .sc-btn-primary{ font-size:15px; font-weight:700; padding:11px 28px; }
.sc-fmodal-foot .button{ height:auto; }
@media (max-width:600px){
  .sc-fmodal-foot{ margin:20px -32px -18px; flex-wrap:wrap; }
  .sc-fmodal-foot .sc-btn-primary{ flex:1; }
}
.sc-calendar-modal table{
  background:none;
  border:none;
  box-shadow:none;
  width:100%;
}
.sc-calendar-modal tr td{
  border:none;
  background:none;
  padding:6px 5px 6px 0;
  font-size:15px;
}

/* ========== BADGE & TABELLE ========== */
/* .sc-role-badge — sostituito da .sc-pill.sc-pill-blue */
#sc-team-table th,
#sc-team-table td{
  text-align:center;
  vertical-align:middle;
}
#sc-team-table td { padding: 13px 16px; }
#sc-team-table td.sc-col-azione { text-align:left; padding-right:20px; }
/* #sc-team-table .sc-role-badge — rimosso */

/* ========== FORM nei widget e nelle modali Team/Servizi/Ruoli ========== */
.sc-dashboard-widget form label,
.sc-team-form label{
  display:block;
  font-size:15px;
  font-weight:600;
  margin-bottom:7px;
  color:#223;
}

/* Input testuali / numerici / email ecc. (NO checkbox/radio/submit/file/hidden/color) */
.sc-dashboard-widget form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="hidden"]):not([type="color"]),
.sc-dashboard-widget form select,
.sc-dashboard-widget form textarea,
.sc-team-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="hidden"]):not([type="color"]),
.sc-team-form select,
.sc-team-form textarea{
  display:block;
  width:100%;
  padding:8px 11px;
  border:1px solid #b8c2cc;
  border-radius:6px;
  margin-bottom:14px;
  font-size:15px;
  background:#fafcff;
  transition:border .15s,box-shadow .15s;
  box-sizing:border-box;
}

.sc-dashboard-widget form input[type="file"]{
  padding:0;
  border:none;
  background:none;
  margin-bottom:6px;
}
.sc-dashboard-widget form textarea,
.sc-team-form textarea{
  min-height:46px;
  resize:vertical;
}
.sc-dashboard-widget form select[multiple]{
  height:80px;
}
.sc-dashboard-widget form{margin-bottom:0;}

/* Checkbox / radio: lascia stile standard WordPress */
.sc-dashboard-widget input[type="checkbox"],
.sc-dashboard-widget input[type="radio"],
.sc-team-form input[type="checkbox"],
.sc-team-form input[type="radio"]{
  width:auto;
  height:auto;
  margin-right:6px;
  margin-bottom:0;
  padding:0;
  box-shadow:none;
}

/* Search team */
/* #sc-search-team — stile gestito inline nella toolbar */

/* Modale "Crea Profilo": stile moderno allineato alla toolbar team
   (bordi chiari 8px, sfondo bianco, altezze uniformi). Scoped sull'ID
   #sc-team-form così la specificità batte le regole .sc-modal form (che
   altrimenti lasciavano "Note" e gli altri campi col vecchio stile); i form
   dei widget dashboard non sono toccati. */
#sc-team-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="color"]),
#sc-team-form select,
#sc-team-form textarea{
  border:1px solid #d1d5db;
  border-radius:8px;
  background:#fff;
  font-size:14px;
  color:#111827;
  box-sizing:border-box;
}
/* Campi a riga singola (testo/email/tel/data + select non multipli): altezza 38px come la toolbar */
#sc-team-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="hidden"]):not([type="color"]),
#sc-team-form select:not([multiple]){
  height:38px;
  padding:0 12px;
  line-height:normal;
}
#sc-team-form textarea{
  padding:9px 12px;
}
/* Select singolo: chevron custom come la toolbar (escluso il multiplo "Ruoli") */
#sc-team-form select:not([multiple]){
  -webkit-appearance:none;
  appearance:none;
  padding-right:32px;
  cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
}
/* Avatar: selettore dalla libreria media WP (anteprima + azioni) */
.sc-avatar-picker{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:14px;
  padding:14px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  background:#fafcff;
}
.sc-avatar-preview{
  flex:0 0 auto;
  width:64px;
  height:64px;
  border-radius:10px;
  overflow:hidden;
  border:1px solid #d1d5db;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sc-avatar-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.sc-avatar-preview.is-empty{ background:#fff; border-style:dashed; color:#64748b; }
.sc-avatar-preview.is-empty .dashicons{ font-size:26px; width:26px; height:26px; line-height:26px; }
.sc-avatar-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px; }
.sc-avatar-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.sc-avatar-actions .sc-btn[hidden]{ display:none; }
.sc-avatar-hint{ margin:0; font-size:12px; color:#64748b; line-height:1.4; }
#sc-team-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="color"]):focus,
#sc-team-form select:focus,
#sc-team-form textarea:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 3px rgba(96,165,250,.15);
  outline:none;
}
/* Selettore Ruoli a chip (.sc-chip-check) dentro il modale: le regole
   .sc-team-form label lo renderebbero come blocco a tutta larghezza, qui
   ripristino lo stile chip inline e lo stacco dal campo successivo */
.sc-team-form .sc-chips{ margin-bottom:14px; }
.sc-team-form .sc-chip-check{
  display:inline-flex;
  margin:0;
  font-size:13px;
  font-weight:500;
  color:#334155;
}
.sc-team-form .sc-chip-check:has(input:checked){ color:#fff; }

/* Layout form ruoli / servizi (inline) */
.sc-roles-form,
.sc-service-form{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
}
.sc-roles-form>div,
.sc-service-form>div{
  flex:1 1 0;
  min-width:140px;
}
.sc-roles-form button,
.sc-service-form button{
  flex:0 0 auto;
  min-width:120px;
  margin-bottom:0!important;
  height:41px;
}

/* Tabelle servizi/ruoli */
#sc-servizi-table{table-layout:auto!important;width:100%;}
#sc-servizi-table th,
#sc-servizi-table td{vertical-align:middle;}
#sc-servizi-table th.sc-col-narrow,
#sc-servizi-table td.sc-col-narrow{
  width:1%;
  white-space:nowrap;
  text-align:center;
  min-width:60px;
  max-width:70px;
  padding-left:14px;
  padding-right:8px;
}
#sc-servizi-table th.sc-col-servizio,
#sc-servizi-table td.sc-col-servizio{
  width:1%;
  white-space:nowrap;
  text-align:left;
  min-width:120px;
  max-width:180px;
}
#sc-servizi-table th.sc-col-azione,
#sc-servizi-table td.sc-col-azione{
  width:1%;
  white-space:nowrap;
  text-align:left;
  min-width:180px;
  padding-left:10px;
  padding-right:10px;
}
#sc-servizi-table th:nth-child(3),
#sc-servizi-table td:nth-child(3){
  width:auto;
  max-width:none;
  white-space:normal;
}

#sc-ruoli-table{table-layout:auto!important;width:100%;}
#sc-ruoli-table th,
#sc-ruoli-table td{vertical-align:middle;}
#sc-ruoli-table th.sc-col-azione,
#sc-ruoli-table td.sc-col-azione{
  width:1%;
  min-width:180px;
  white-space:nowrap;
  text-align:left;
  padding-left:10px;
  padding-right:10px;
}
#sc-ruoli-table th:first-child,
#sc-ruoli-table td:first-child{
  width:auto;
  max-width:none;
  white-space:normal;
}

.sc-service-color{
  display:inline-block;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(15,23,42,.12);
  vertical-align:middle;
  background:var(--c, #cccccc);
}

/* Modal team dimensioni */
.sc-team-modal{
  max-width:680px;
  min-width:340px;
  width:94vw;
  padding:34px 32px 18px;
}

/* Colonna azione generica */
.sc-col-azione{
  min-width:180px;
  text-align:left;
  white-space:nowrap;
  vertical-align:middle;
  padding-left:8px;
  padding-right:8px;
}

/* Placeholder colore */
::-webkit-input-placeholder{color:#bbb;}
::-moz-placeholder{color:#bbb;}
:-ms-input-placeholder{color:#bbb;}
::placeholder{color:#bbb;}

/* ======= NAVBAR MESE + BRIDGE CALBAR ======= */
.sc-monthbar,
.sc-calbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 14px;
  padding:0;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
}

/* sinistra/destra (monthbar left/right; calbar: left = freccia+Matrix, right = resto) */
.sc-monthbar-left,
.sc-monthbar-right,
.sc-calbar-left,
.sc-calbar-right{
  display:flex;
  align-items:center;
  gap:8px;
}
/* Frecce ‹ › raggruppate in un pill connesso */
.sc-calbar-nav{ display:inline-flex; }
.sc-calbar-nav .sc-calbar-prev{ border-radius:9px 0 0 9px; }
.sc-calbar-nav .sc-calbar-next{ border-radius:0 9px 9px 0; margin-left:-1px; }

/* titolo centrale */
.sc-monthbar-center,
.sc-calbar-title{
  font-size:1.2rem;
  font-weight:800;
  letter-spacing:.1px;
  text-transform:capitalize;
  color:#1e293b;
}

/* Bottoni base (monthbar & calbar) */
.sc-nav-btn,
.sc-calbar-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 12px;
  border-radius:9px;
  border:1px solid #e6eaf1;
  background:#f8fafc;
  color:#334155;
  text-decoration:none;
  font-weight:600;
  line-height:1;
  box-shadow:none;
  transition:transform .08s ease,
             background .15s ease,
             box-shadow .15s ease,
             border-color .15s ease,
             color .15s ease;
}
.sc-nav-btn:hover,
.sc-calbar-btn:hover{background:#eff4ff; border-color:#c7d7fe; color:#2563eb;}
.sc-nav-btn:active,
.sc-calbar-btn:active{transform:translateY(1px);}
.sc-nav-btn:focus-visible,
.sc-calbar-btn:focus-visible{
  outline:none;
  box-shadow:var(--sc-ring);
}

/* Frecce evidenti (monthbar & calbar) */
.sc-nav-prev,
.sc-nav-next,
.sc-calbar-prev,
.sc-calbar-next{
  width:38px;
  height:38px;
  padding:0;
  border:1px solid #bcd3ff!important;
  background:#dbe7ff;
  color:#1d4ed8;
  font-size:18px;
  box-shadow:none;
}
.sc-nav-prev:hover,
.sc-nav-next:hover,
.sc-calbar-prev:hover,
.sc-calbar-next:hover{
  background:#c4d7ff;
  color:#1e3a8a;
}
.sc-nav-prev:focus-visible,
.sc-nav-next:focus-visible,
.sc-calbar-prev:focus-visible,
.sc-calbar-next:focus-visible{
  box-shadow:0 0 0 3px rgba(34,113,177,.25);
}

/* Pulsante “mese corrente” */
.sc-nav-current,
.sc-calbar-today{
  background:#fff;
  border-color:#e6eaf1;
  color:var(--sc-primary);
}
.sc-nav-current:hover,
.sc-calbar-today:hover{
  background:#eef6ff;
  border-color:#c7d7fe;
}

/* Form rapido mese/anno */
.sc-monthbar-form,
.sc-calbar-form{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.sc-monthbar-form select,
.sc-monthbar-form input[type="number"],
.sc-calbar-form select,
.sc-calbar-form input[type="number"]{
  height:36px;
  border:1px solid #e6eaf1;
  border-radius:9px;
  padding:0 12px;
  background:#fff;
  font-size:14px;
  transition:border-color .15s, box-shadow .15s;
}
.sc-monthbar-form select:focus-visible,
.sc-monthbar-form input[type="number"]:focus-visible,
.sc-calbar-form select:focus-visible,
.sc-calbar-form input[type="number"]:focus-visible{
  outline:none;
  box-shadow:var(--sc-ring);
  border-color:var(--sc-primary);
}
.sc-monthbar-form button.sc-nav-btn,
.sc-calbar-form button.sc-calbar-btn{
  height:36px;
  padding:0 16px;
}

/* Uniforma l'altezza dei controlli della calbar (Matrix, Oggi, Vai, select, anno)
   a quella delle frecce (38px) così i bordi superiori risultano allineati. */
.sc-calbar-matrix,
.sc-calbar-today,
.sc-calbar-form select,
.sc-calbar-form input[type="number"],
.sc-calbar-form button.sc-calbar-btn{
  height:38px;
}
.sc-calbar-today,
.sc-calbar-matrix{padding:0 14px;}

/* Visually hidden */
.sc-sr{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Responsive navbar mese/calbar */
@media (max-width:720px){
  .sc-monthbar,
  .sc-calbar{
    flex-wrap:wrap;
    gap:10px;
  }
  .sc-monthbar-center,
  .sc-calbar-title{
    order:3;
    width:100%;
    text-align:center;
    margin-top:2px;
  }
}

/* Stato “oggi” attivo per calbar */
.sc-calbar-today--active{
  background:#eef6ff;
  border-color:var(--sc-primary);
  color:var(--sc-primary);
}

/* ======= Responsive generali ulteriori ======= */
@media (max-width:700px){
  #sc-servizi-table th,
  #sc-servizi-table td,
  #sc-ruoli-table th,
  #sc-ruoli-table td{font-size:13px;}
  /* .sc-role-badge rimosso */
}
@media (max-width:600px){
  .sc-calendar th,
  .sc-calendar td{
    font-size:13px;
    min-height:60px;
    height:60px;
    padding:4px;
  }
}

/* ====== SERVIZI ASSEGNATI - MOBILE FRIENDLY ====== */

.sc-myservices-wrap .sc-myservices-empty {
    margin: 30px 0;
    font-size: 1.2em;
    color: #666;
    text-align: center;
}

.sc-myservices-table-container {
    margin-top: 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.12);
    overflow: hidden;
}

.sc-myservices-table {
    width: 100%;
    border-collapse: collapse;
}

.sc-myservices-table thead th {
    background: #f3f4f6;
    padding: 10px 12px;
    font-weight: 600;
}

.sc-myservices-table tbody td {
    padding: 8px 12px;
    vertical-align: middle;
}

/* Calendario “i miei servizi” */
.sc-myservices-calendar {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
    box-shadow: 0 1px 3px rgba(15,23,42,0.12);
    border-radius: 10px;
    overflow: hidden;
}

.sc-myservices-calendar thead th {
    background: #f3f4f6;
    padding: 8px;
    text-align: center;
}

.sc-myservices-calendar tbody td {
    padding: 5px 6px;
    vertical-align: top;
}

/* Giorno del calendario personale */
.sc-myservices-calendar .sc-calendar-day {
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 2px;
}

/* ====== RESPONSIVE: Tabella → Card su smartphone ====== */
@media (max-width: 782px) {
    .sc-myservices-table thead {
        display: none;
    }

    .sc-myservices-table tbody tr {
        display: block;
        margin: 10px 10px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(15,23,42,0.08);
        background: #fff;
    }

    .sc-myservices-table tbody td {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 6px 10px;
        border-bottom: 1px solid #f3f4f6;
        font-size: 13px;
    }

    .sc-myservices-table tbody td:last-child {
        border-bottom: none;
    }

    .sc-myservices-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #4b5563;
        font-size: 12px;
        margin-right: 8px;
    }

    .sc-myservices-table-container {
        box-shadow: none;
        background: transparent;
    }

    .sc-presenza-form {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .sc-presenza-form .button-small {
        width: auto;
    }

    .sc-myservices-calendar tbody td {
        min-height: 60px;
    }

    .sc-myservices-cal-nav {
        text-align: center;
    }
}
/* ========== MODAL CALENDARIO — Redesign v2.9.3 ========== */

/* Modal layout */
.sc-calendar-modal {
  max-width:860px;
  min-width:340px;
  width:96vw;
  padding:28px 32px 24px;
  max-height:93vh;
  border-radius:16px;
  box-shadow:0 20px 48px rgba(0,0,0,.15);
}

/* Form: no overflow so nothing clips */
.sc-calendar-form {
  max-height: none;
  overflow: visible;
}

/* Two-column layout */
.sc-modal-flex-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
@media(max-width: 600px) {
  .sc-modal-flex-row { grid-template-columns: 1fr; }
}

/* Left column: form fields
   Selettori prefissati con .sc-calendar-modal per prevalere sulle regole
   generiche .sc-modal form label/input (specificità più alta). */
.sc-calendar-modal .sc-modal-col label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.sc-calendar-modal .sc-modal-col label input,
.sc-calendar-modal .sc-modal-col label select,
.sc-calendar-modal .sc-modal-col label textarea {
  font-size: 14px;
  font-weight: 400;
  color: #111827;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  padding: 9px 12px;
  min-height: 42px;
  margin-bottom: 0;
  transition: border-color .15s, box-shadow .15s;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}
.sc-calendar-modal .sc-modal-col label input:focus,
.sc-calendar-modal .sc-modal-col label select:focus,
.sc-calendar-modal .sc-modal-col label textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  outline: none;
}
.sc-calendar-modal .sc-modal-col label textarea { min-height: 72px; resize: vertical; }

/* Right column: ruoli */
.sc-ruoli-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 68vh;
  overflow-y: auto;
  padding-right: 4px;
}
.sc-ruoli-col::-webkit-scrollbar { width: 4px; }
.sc-ruoli-col::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.sc-ruoli-col::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.sc-ruoli-label {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

#sc-ruoli-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Accordion ruolo ── */
.sc-ruolo-block {
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.sc-ruolo-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  min-height: 46px;
  transition: background .1s;
  -webkit-tap-highlight-color: transparent;
}
.sc-ruolo-header:hover { background: #f8fafc; }
.sc-ruolo-header.open  { background: #eff6ff; }

.sc-ruolo-header-nome {
  font-size: 13px;
  font-weight: 700;
  color: #1e40af;
  min-width: 80px;
  flex-shrink: 0;
}
.sc-ruolo-summary {
  flex: 1;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sc-sel-names  { color: #16a34a; font-weight: 600; }
.sc-tap-hint   { color: #6b7280; }
.sc-no-assign  { color: #6b7280; }

.sc-ruolo-chevron {
  font-size: 18px;
  color: #6b7280;
  transition: transform .15s;
  flex-shrink: 0;
  line-height: 1;
}
.sc-ruolo-header.open .sc-ruolo-chevron { color: #2563eb; }

/* Body espanso */
.sc-ruolo-body {
  padding: 10px 14px 12px;
  border-top: 1px solid #e5e7eb;
  background: #fafafa;
}

/* Chips dei membri */
.sc-membri-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sc-membro-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  border-radius: 8px;
  border: 1.5px solid #d1d5db;
  background: #fff;
  cursor: pointer;
  user-select: none;
  transition: all .12s;
  min-height: 34px;
  -webkit-tap-highlight-color: transparent;
}
.sc-membro-chip input[type="checkbox"] { display: none; }
.sc-membro-chip:hover { border-color: #93c5fd; background: #eff6ff; }
.sc-membro-chip.selected { background: #2563eb; border-color: #2563eb; color: #fff; }
.sc-membro-chip.selected .sc-chip-avatar { background: rgba(255,255,255,.2); color: #fff; }

/* Avatar iniziali */
.sc-chip-avatar {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: #dbeafe; color: #1e40af;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; line-height: 1;
  overflow: hidden;
}
/* Avatar reale: qualunque contenitore usi .sc-membro-chip con foto ottiene il
   dimensionamento corretto senza ricopiarlo (bug storico: img a dimensione
   naturale che sfasciava calendario e popover Matrix). */
.sc-chip-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-chip-nome { font-size: 12px; font-weight: 500; white-space: nowrap; }

/* Modale calendario: chip dei membri a larghezza piena (avatar + nome in riga),
   impilate verticalmente con contenitore a scorrimento quando i nominativi sono tanti.
   Tutto è scoped su #sc-calendar-modal (specificità da ID) per battere le regole
   generiche .sc-modal label:not(.sc-chip-check), che altrimenti imporrebbero
   display:block e color:#374151 (testo grigio illeggibile sulla chip blu selezionata). */
#sc-calendar-modal .sc-ruolo-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px;
}
/* La regola display:flex qui sopra vince sull'attributo [hidden] (UA): serve questa
   guardia esplicita perché il JS che chiude l'accordion (body.hidden=true) nasconda davvero. */
#sc-calendar-modal .sc-ruolo-body[hidden] { display: none; }
#sc-calendar-modal .sc-membro-chip {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  box-sizing: border-box;
  font-size: 13px;
  color: #1f2937;
}
#sc-calendar-modal .sc-membro-chip.selected,
#sc-calendar-modal .sc-membro-chip.selected .sc-chip-nome {
  color: #fff !important;
}
#sc-calendar-modal .sc-chip-avatar {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 50%;
  /* overflow:hidden e il dimensionamento dell'<img> vengono dalla regola base */
}
#sc-calendar-modal .sc-chip-nome {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  font-weight: 500;
  line-height: 1.2;
}
/* Assenze programmate: il membro ha segnalato di non essere disponibile in quella
   data. Solo evidenza — la chip resta selezionabile. Le regole vanno scoped sul
   modale come le altre, altrimenti .sc-modal label:not(.sc-chip-check) le batte.
   Il pallino ambra segnala anche quando la chip è già selezionata (fondo blu). */
#sc-calendar-modal .sc-membro-chip.is-unavail {
  border-color: #fdb022;
  background: #fffaeb;
}
#sc-calendar-modal .sc-membro-chip.is-unavail .sc-chip-nome {
  text-decoration: line-through;
  text-decoration-color: #b54708;
}
#sc-calendar-modal .sc-membro-chip.is-unavail::after {
  content: '';
  flex: 0 0 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 2px #fff;
}
/* Selezionata E non disponibile: la selezione deve vincere sul fondo. Il fondo
   ambra qui sopra ha specificità da ID e batterebbe .sc-membro-chip.selected,
   lasciando il testo bianco (!important) su ambra chiaro — nome illeggibile.
   L'ambra resta quindi solo su bordo, pallino e barrato. */
#sc-calendar-modal .sc-membro-chip.is-unavail.selected {
  background: #2563eb;
  border-color: #f59e0b;
}
#sc-calendar-modal .sc-membro-chip.is-unavail.selected .sc-chip-nome {
  text-decoration-color: #fde68a;
}
#sc-calendar-modal .sc-membro-chip.is-unavail.selected::after {
  box-shadow: 0 0 0 2px #2563eb;
}

.sc-no-members { font-size: 12px; color: #6b7280; font-style: italic; margin: 0; }

.sc-ruoli-empty-msg {
  font-size: 13px; color: #6b7280;
  text-align: center; padding: 24px 0; font-style: italic;
}

/* Save button */
.sc-calendar-form .button-primary {
  min-height: 44px;
  padding: 0 28px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 4px;
}

/* Modal close button */
.sc-calendar-modal .sc-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  color: #6b7280;
  line-height: 1;
  background: none;
  border: none;
  padding: 4px;
  border-radius: 6px;
  transition: color .12s, background .12s;
}
.sc-calendar-modal .sc-modal-close:hover {
  color: #374151;
  background: #f3f4f6;
}