/**
 * REPO: dashboard-consulenti
 * MODULE: css/centro-rinnovi-calendario.css
 * PURPOSE: Aspetto del calendario visivo dei richiami (js/centro-rinnovi-
 *     calendario.js, window.CRCalendario): overlay a tutta pagina con
 *     finestra centrata (~920px) su desktop, a tutto schermo sotto 760px.
 *     Griglia lun->dom con il numero di richiami per giorno, ritardi in
 *     rosso, oggi in giallo marchio, elenco del giorno scelto accanto
 *     (desktop) o sotto (mobile).
 * DEPENDENCIES: css/centro-rinnovi.css (gettoni --cr-* definiti su
 *     body.cr-app: questo foglio li CONSUMA con un fallback, non li
 *     ridefinisce — l'overlay viene appeso a document.body, che e' lo
 *     stesso elemento con class="cr-app"), public/centro-rinnovi.html
 *     (sprite SVG #cr-ic-chevron/#cr-ic-close, riusate via <use> da js/
 *     centro-rinnovi-calendario.js, nessuna icona nuova in questo file).
 * EXPOSES: tutte le classi .crc-*.
 * LAST REVIEWED: 2026-10-04
 * WARNINGS: il nodo radice (.crc-root.crc-overlay) riceve l'attributo
 *     `hidden` nativo per intero (apertura/chiusura del calendario), non
 *     solo i suoi discendenti — per questo la regola "niente [hidden]"
 *     qui sotto copre ENTRAMBI i casi (.crc-root[hidden] oltre a .crc-root
 *     [hidden]), a differenza del solo discendente usato in centro-
 *     rinnovi.css (body.cr-app non riceve mai `hidden` su se stesso).
 *
 * CHANGE LOG
 * ----------
 * 2026-10-04 [AI] Added: prima stesura (operaio W5, CONTRATTO-4 punto 6).
 */

/* ============================================= 1 · BASE / RESET ===== */
.crc-root[hidden],
.crc-root [hidden] { display: none !important; }

.crc-i { width: 18px; height: 18px; display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* ============================================= 2 · OVERLAY/VELO ===== */
.crc-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  font-family: var(--cr-font, 'Sofia Pro', system-ui, -apple-system, 'Segoe UI', sans-serif);
}
.crc-velo {
  position: absolute; inset: 0;
  background: rgba(18, 18, 18, .44);
  animation: crc-velo-entra .18s ease both;
}
@keyframes crc-velo-entra { from { opacity: 0; } to { opacity: 1; } }

/* ============================================= 3 · FINESTRA / HEADER = */
.crc-finestra {
  position: relative; z-index: 1;
  width: 100%; max-width: 920px;
  max-height: min(720px, calc(100vh - 48px));
  background: var(--cr-bg, #FFFFFF);
  color: var(--cr-ink, #121212);
  border-radius: var(--cr-radius, 14px);
  box-shadow: var(--cr-shadow, 0 20px 60px rgba(18, 18, 18, .28));
  display: flex; flex-direction: column; overflow: hidden;
  animation: crc-finestra-entra .2s cubic-bezier(.2, .8, .3, 1) both;
}
.crc-finestra:focus { outline: none; } /* focus "contenitore": niente anello, il Tab-trap gestisce il resto */
@keyframes crc-finestra-entra {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .crc-velo, .crc-finestra { animation: none; }
}

.crc-testa {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--cr-line, #ECEAE4);
}
.crc-testa-titoli { min-width: 0; }
.crc-titolo { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.crc-mese {
  margin: 3px 0 0; font-size: 13px; color: var(--cr-ink-2, #4F4D47);
  font-variant-numeric: tabular-nums;
}
.crc-testa-azioni { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.crc-nav {
  appearance: none; border: 1px solid var(--cr-line-2, #DEDBD2); background: #fff;
  width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer; color: var(--cr-ink, #121212);
  transition: background .14s, transform .12s;
}
.crc-nav .crc-i { width: 15px; height: 15px; transform: scaleX(-1); } /* la chevron dello sprite punta a destra */
.crc-nav--avanti .crc-i { transform: none; }
.crc-nav:hover { background: var(--cr-paper, #FAFAF7); }
.crc-nav:active { transform: scale(.94); }
.crc-oggi-btn {
  appearance: none; border: 1px solid var(--cr-line-2, #DEDBD2); background: #fff;
  color: var(--cr-ink, #121212); border-radius: 999px; padding: 7px 14px;
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background .14s;
}
.crc-oggi-btn:hover { background: var(--cr-paper, #FAFAF7); }
.crc-chiudi {
  appearance: none; border: none; background: transparent; color: var(--cr-ink-2, #4F4D47);
  width: 32px; height: 32px; border-radius: 999px; margin-left: 4px;
  display: grid; place-items: center; cursor: pointer; transition: background .14s, color .14s;
}
.crc-chiudi:hover { background: var(--cr-paper, #FAFAF7); color: var(--cr-ink, #121212); }
.crc-chiudi .crc-i { width: 15px; height: 15px; }

/* ============================================= 4 · INTERRUTTORE ===== */
.crc-interruttore {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-bottom: 1px solid var(--cr-line, #ECEAE4);
  cursor: pointer; user-select: none;
}
.crc-interruttore-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.crc-interruttore-cursore {
  flex: 0 0 auto; position: relative; width: 34px; height: 20px; border-radius: 999px;
  background: var(--cr-line-2, #DEDBD2); transition: background .16s;
}
.crc-interruttore-cursore::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(18, 18, 18, .25);
  transition: transform .16s;
}
.crc-interruttore-input:checked + .crc-interruttore-cursore { background: var(--cr-blue, #2B59C3); }
.crc-interruttore-input:checked + .crc-interruttore-cursore::after { transform: translateX(14px); }
.crc-interruttore-input:focus-visible + .crc-interruttore-cursore {
  outline: 2px solid var(--cr-ink, #121212); outline-offset: 2px;
}
.crc-interruttore-testo { font-size: 13.5px; color: var(--cr-ink-2, #4F4D47); }

/* ============================================= 5 · GRIGLIA ===== */
.crc-corpo { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; }
.crc-griglia-area {
  flex: 1 1 60%; min-width: 0; display: flex; flex-direction: column;
  padding: 16px 20px 18px; border-right: 1px solid var(--cr-line, #ECEAE4);
  overflow-y: auto;
}
.crc-giorni-sett {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin-bottom: 6px;
}
.crc-giorni-sett span {
  text-align: center; font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .05em; color: var(--cr-ink-3, #8C897F);
}
.crc-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }

.crc-giorno {
  appearance: none; border: 1px solid transparent; background: var(--cr-paper, #FAFAF7);
  border-radius: var(--cr-radius-sm, 10px); min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  cursor: pointer; padding: 4px 2px; color: var(--cr-ink, #121212);
  transition: background .14s, border-color .14s, transform .12s;
}
.crc-giorno:hover { background: var(--cr-line, #ECEAE4); transform: translateY(-1px); }
.crc-giorno-numero { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.crc-giorno-badge {
  font-size: 10.5px; font-weight: 700; line-height: 1; padding: 1px 6px; border-radius: 999px;
  background: #fff; color: var(--cr-ink-2, #4F4D47);
}
.crc-giorno-puntino {
  position: absolute; width: 6px; height: 6px; border-radius: 999px; background: var(--cr-blue, #2B59C3);
  margin-top: 1px;
}
.crc-giorno { position: relative; }

/* Oggi: giallo marchio, testo SEMPRE nero (mai testo giallo su giallo). */
.crc-giorno--oggi { background: var(--cr-accent, #FFD60A); }
.crc-giorno--oggi .crc-giorno-numero { font-weight: 700; color: var(--cr-accent-ink, #1F1A00); }
.crc-giorno--oggi .crc-giorno-badge { background: rgba(18, 18, 18, .14); color: var(--cr-accent-ink, #1F1A00); }
.crc-giorno--oggi:hover { background: #FFD60A; filter: brightness(.97); }

/* Giorni passati con richiami ancora aperti: rosso. */
.crc-giorno--ritardo { background: var(--cr-red-soft, #FDECEC); }
.crc-giorno--ritardo .crc-giorno-numero { color: var(--cr-red, #D93636); font-weight: 500; }
.crc-giorno--ritardo .crc-giorno-badge { background: var(--cr-red, #D93636); color: #fff; }
.crc-giorno--ritardo:hover { background: #FBDCDC; }

.crc-giorno--selezionato {
  border-color: var(--cr-ink, #121212);
  box-shadow: inset 0 0 0 1px var(--cr-ink, #121212);
}

.crc-giorno--vuoto {
  min-height: 52px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--cr-ink-3, #8C897F); opacity: .45;
}

.crc-legenda {
  display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--cr-line, #ECEAE4);
}
.crc-legenda-voce {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cr-ink-2, #4F4D47);
}
.crc-legenda-pallino { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; }
.crc-legenda-pallino--richiamo { background: var(--cr-ink-2, #4F4D47); }
.crc-legenda-pallino--ritardo { background: var(--cr-red, #D93636); }
.crc-legenda-pallino--scadenza { background: var(--cr-blue, #2B59C3); }

/* ============================================= 6 · ELENCO ===== */
.crc-elenco {
  flex: 1 1 40%; min-width: 0; min-height: 0; overflow-y: auto;
  padding: 16px 20px 18px;
}
.crc-elenco-titolo {
  margin: 0 0 10px; font-size: 13.5px; font-weight: 700; text-transform: capitalize;
  color: var(--cr-ink, #121212);
}
.crc-elenco-vuoto { margin: 0; font-size: 13px; color: var(--cr-ink-3, #8C897F); line-height: 1.5; }
.crc-elenco-lista { display: flex; flex-direction: column; gap: 6px; }
.crc-elenco-voce {
  appearance: none; border: 1px solid var(--cr-line, #ECEAE4); background: #fff;
  border-radius: var(--cr-radius-sm, 10px); padding: 10px 12px;
  display: flex; align-items: flex-start; gap: 10px; text-align: left; cursor: pointer;
  width: 100%; transition: background .14s, border-color .14s;
}
.crc-elenco-voce:hover { background: var(--cr-paper, #FAFAF7); border-color: var(--cr-line-2, #DEDBD2); }
.crc-elenco-tag {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 3px 8px; border-radius: 999px; background: var(--cr-paper, #FAFAF7); color: var(--cr-ink-2, #4F4D47);
  margin-top: 1px;
}
.crc-elenco-tag--scadenza { background: #E8EEFB; color: var(--cr-blue, #2B59C3); }
.crc-elenco-testi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crc-elenco-cliente {
  font-size: 13.5px; font-weight: 700; color: var(--cr-ink, #121212);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crc-elenco-auto {
  font-size: 12px; color: var(--cr-ink-2, #4F4D47);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crc-elenco-esito { font-size: 11.5px; color: var(--cr-ink-3, #8C897F); }

/* ============================================= 7 · RESPONSIVE ===== */
@media (max-width: 759px) {
  .crc-overlay { padding: 0; }
  .crc-finestra {
    max-width: none; width: 100%; height: 100%; max-height: none;
    border-radius: 0;
  }
  .crc-corpo { flex-direction: column; }
  .crc-griglia-area {
    border-right: none; border-bottom: 1px solid var(--cr-line, #ECEAE4);
    flex: 0 0 auto; max-height: 56vh; padding: 14px 16px 16px;
  }
  .crc-elenco { flex: 1 1 auto; padding: 14px 16px 16px; }
  .crc-testa { padding: 16px 16px 12px; gap: 10px; }
  .crc-titolo { font-size: 16px; }
  .crc-interruttore { padding: 10px 16px; }
  .crc-giorno, .crc-giorno--vuoto { min-height: 44px; }
}

@media (max-width: 420px) {
  .crc-testa-azioni { gap: 4px; }
  .crc-oggi-btn { padding: 6px 10px; font-size: 12.5px; }
  .crc-nav, .crc-chiudi { width: 29px; height: 29px; }
  .crc-giorno-numero { font-size: 12px; }
  .crc-giorno-badge { font-size: 10px; padding: 1px 5px; }
  .crc-legenda { gap: 8px 12px; }
}