/**
 * yoCare — Layer di refresh
 * Va caricato PER ULTIMO in templates/backend/layout.php, dopo backend.css.
 *
 * Non introduce markup nuovo: agisce sulle classi che src/render/* già emette
 * (.table, .form-control, .modal, .btn, .yc-*), così il redesign arriva su tutte
 * le pagine admin senza modificare i moduli.
 */

/* ══ Base ═════════════════════════════════════════════════════════════════ */

body {
    font-family: var(--yc-font-sans);
    font-size: var(--yc-font-size-base);
    color: var(--yc-text);
    background: var(--yc-bg-light);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--yc-font-sans);
    font-weight: var(--yc-font-weight-semibold);
    letter-spacing: -.011em;
    color: var(--yc-text);
}

/* Cifre allineate in colonna in tutto ciò che è dato numerico */
.yc-num, .table td, .table th,
input[type="number"], input[type="date"], input[type="time"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

::selection {
    background: var(--yc-primary-100);
    color: var(--yc-primary-800);
}

/* ══ Correzioni viste in produzione ═══════════════════════════════════════ */

/* La topbar è sticky e il titolo della pagina le finiva sotto quando si scorre:
   nello screenshot "Appuntamenti" era tagliato a metà. */
.yc-content,
.yc-main > .container-fluid {
    scroll-padding-top: 72px;
}
.yc-page-header {
    padding-top: .5rem;
}

/* Il titolo compare due volte: nella topbar e in renderPageHeader.
   Su schermi alti è ridondanza, su schermi corti è spreco di prima schermata:
   in pagina resta l'H1, nella topbar resta il contesto di navigazione. */
/* Titolo pagina nella topbar — grande come il mockup (h4 20px, Archivo bold) */
.yc-topbar__title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--yc-text);
}
/* Meta accanto al titolo (es. la data), muted come il mockup */
.yc-topbar__meta {
    font-size: var(--yc-font-size-sm);
    color: var(--yc-text-muted);
    white-space: nowrap;
}

/* La tabella non deve avere uno scroll interno verticale: due barre di scorrimento
   affiancate (pagina + tabella) rendono impossibile capire dove si è. */
.yc-table-wrapper,
.yc-table-responsive,
.table-responsive {
    max-height: none !important;
    overflow-y: visible !important;
}

/* Righe compatte: la cella Stanza andava a tre righe ("Ambulatorio 1 – / Cardiologia /
   Poliambulatorio yoCare Milano") e alzava tutta la riga a 75px, dimezzando gli
   appuntamenti visibili senza scorrere. */
.table td {
    vertical-align: middle;
}
.yc-cell-place {
    display: block;
    max-width: 190px;
}
.yc-cell-place > span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* La colonna azioni resta a larghezza fissa anche quando i bottoni sono nascosti,
   così le righe non si spostano al passaggio del mouse. */
.table td.yc-actions-cell,
.table th.yc-actions-cell {
    width: 1%;
    white-space: nowrap;
}

/* ══ Focus da tastiera — tematizzato, mai il blu di default ═══════════════ */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.form-check-input:focus-visible {
    outline: var(--yc-focus-outline);
    outline-offset: 2px;
    box-shadow: none;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--yc-input-focus);
    box-shadow: var(--yc-focus-ring);
}

.form-check-input:checked {
    background-color: var(--yc-primary);
    border-color: var(--yc-primary);
}

/* ══ Contenuto ════════════════════════════════════════════════════════════ */

/* Full width (con limite): TUTTE le pagine usano la larghezza piena fino a ~1600px,
   poi il contenuto si centra. Prima erano 1280px (normali) / 1600px (liste dense):
   ora unificato, così nessuna pagina resta stretta con grandi gutter laterali.
   I singoli wrapper interni (form, dettagli, wizard, affitti) NON cappano più a
   1120px: riempiono il contenitore (il tetto è questo). */
.yc-content,
.yc-content--wide {
    max-width: var(--yc-content-max-width-wide);
}

.yc-topbar {
    box-shadow: none;
    /* 2px solid --color-divider come il mockup: stacca la topbar dal contenuto */
    border-bottom: 2px solid var(--yc-divider);
}

/* ══ Ricerca globale (command palette) ════════════════════════════════════ */

.yc-search {
    position: relative;
    flex: 0 1 420px;
    min-width: 0;
    max-width: 420px;
}
.yc-search__field {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--yc-bg-light);
    border: 1px solid var(--yc-border);
    border-radius: var(--yc-border-radius);
    padding: .3rem .6rem;
    transition: border-color var(--yc-transition), box-shadow var(--yc-transition);
}
.yc-search__field:focus-within {
    border-color: var(--yc-primary);
    box-shadow: var(--yc-focus-ring);
    background: var(--yc-bg-card);
}
.yc-search__icon { color: var(--yc-text-muted); font-size: .95rem; flex-shrink: 0; }
.yc-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-size: var(--yc-font-size-sm);
    color: var(--yc-text);
}
.yc-search__input::placeholder { color: var(--yc-text-muted); }
.yc-search__kbd {
    flex-shrink: 0;
    font-size: .65rem;
    font-weight: 600;
    color: var(--yc-text-muted);
    background: var(--yc-bg-card);
    border: 1px solid var(--yc-border);
    border-radius: 4px;
    padding: .05rem .35rem;
    letter-spacing: .03em;
}
/* Dropdown risultati */
.yc-search__results {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    max-height: min(70vh, 460px);
    overflow-y: auto;
    background: var(--yc-bg-card);
    border: 1px solid var(--yc-border);
    border-radius: var(--yc-border-radius-lg);
    box-shadow: var(--yc-shadow-lg);
    z-index: var(--yc-z-dropdown, 1050);
    padding: .35rem;
}
.yc-search__group {
    font-size: var(--yc-label-size, .7rem);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--yc-text-muted);
    font-weight: 600;
    padding: .5rem .6rem .25rem;
}
.yc-search__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .6rem;
    border-radius: var(--yc-border-radius);
    color: var(--yc-text);
    text-decoration: none;
    cursor: pointer;
}
.yc-search__item:hover,
.yc-search__item.is-active {
    background: var(--yc-primary-50);
    text-decoration: none;
}
.yc-search__item-icon { color: var(--yc-text-muted); font-size: .9rem; flex-shrink: 0; }
.yc-search__item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yc-search__item-sub {
    flex-shrink: 0;
    font-size: var(--yc-font-size-xs);
    color: var(--yc-text-muted);
    font-variant-numeric: tabular-nums;
}
.yc-search__empty {
    padding: 1rem .6rem;
    text-align: center;
    color: var(--yc-text-muted);
    font-size: var(--yc-font-size-sm);
}
/* Su schermi stretti la barra si restringe e il kbd sparisce */
@media (max-width: 767.98px) {
    .yc-search { flex-basis: 0; max-width: none; margin-right: .5rem; }
    .yc-search__kbd { display: none; }
}

/* ══ Bottoni ══════════════════════════════════════════════════════════════ */

.btn {
    --bs-btn-border-radius: var(--yc-border-radius);
    border-radius: var(--yc-border-radius);
    font-weight: var(--yc-font-weight-medium);
    font-size: var(--yc-font-size-sm);
    padding: .375rem .75rem;
    line-height: 1.4;
    transition: background var(--yc-transition), border-color var(--yc-transition),
                color var(--yc-transition);
}
.btn-sm {
    font-size: var(--yc-font-size-xs);
    padding: .25rem .5rem;
}
.btn-lg {
    font-size: var(--yc-font-size-base);
    padding: .5rem 1rem;
}

.btn-primary {
    --bs-btn-bg: var(--yc-primary);
    --bs-btn-border-color: var(--yc-primary);
    --bs-btn-hover-bg: var(--yc-primary-dark);
    --bs-btn-hover-border-color: var(--yc-primary-dark);
    --bs-btn-active-bg: var(--yc-primary-800);
    --bs-btn-active-border-color: var(--yc-primary-800);
    --bs-btn-disabled-bg: var(--yc-primary);
    --bs-btn-disabled-border-color: var(--yc-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--yc-primary-700);
    --bs-btn-border-color: var(--yc-border-strong);
    --bs-btn-hover-bg: var(--yc-primary-50);
    --bs-btn-hover-border-color: var(--yc-primary);
    --bs-btn-hover-color: var(--yc-primary-800);
    --bs-btn-active-bg: var(--yc-primary-100);
    --bs-btn-active-color: var(--yc-primary-800);
    --bs-btn-active-border-color: var(--yc-primary);
}

/* L'outline-secondary è il bottone più usato nel backend: va reso neutro e sobrio */
.btn-outline-secondary {
    --bs-btn-color: var(--yc-gray-700);
    --bs-btn-border-color: var(--yc-border-strong);
    --bs-btn-hover-bg: var(--yc-gray-100);
    --bs-btn-hover-border-color: var(--yc-gray-400);
    --bs-btn-hover-color: var(--yc-gray-900);
    --bs-btn-active-bg: var(--yc-gray-200);
    --bs-btn-active-color: var(--yc-gray-900);
    --bs-btn-active-border-color: var(--yc-gray-400);
}

.btn-outline-danger {
    --bs-btn-color: var(--yc-danger-dark);
    --bs-btn-border-color: var(--yc-border-strong);
    --bs-btn-hover-bg: var(--yc-danger-light);
    --bs-btn-hover-border-color: var(--yc-danger);
    --bs-btn-hover-color: var(--yc-danger-dark);
}

.btn-link {
    --bs-btn-color: var(--yc-primary-700);
    --bs-btn-hover-color: var(--yc-primary-800);
    text-decoration: none;
    font-weight: var(--yc-font-weight-medium);
}

/* Bottone icona quadrato */
.btn-icon {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

a { color: var(--yc-primary-700); text-decoration: none; }
a:hover { color: var(--yc-primary-800); text-decoration: underline; }

/* ══ Tabelle ══════════════════════════════════════════════════════════════ */

.yc-table-wrapper {
    background: var(--yc-bg-card);
    border: 1px solid var(--yc-border);
    border-radius: var(--yc-border-radius-lg);
    overflow: hidden;
}

/* Variante "flush" — tabella nuda come il mockup Modernist: nessuna card
   attorno (niente bordo/radius/fondo), header con regola 2px, righe 1px, font
   14px. Attivata da renderTable(['flush'=>true]). */
.yc-table-wrapper--flush {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}
.yc-table-wrapper--flush .table { font-size: 14px; }
/* Stile righe flush (l'override dell'HEADER sticky sta più in basso, DOPO la
   regola sticky originale, per vincere la cascata a pari specificità). */
.yc-table-wrapper--flush .table > tbody > tr > td {
    border-bottom: 1px solid var(--yc-divider);
    background: transparent;
}
.yc-table-wrapper--flush .table > tbody > tr:hover > td {
    background: color-mix(in srgb, var(--yc-text) 4%, transparent);
}
/* La toolbar-tabella (contenitore selezione multipla) non deve lasciare una
   fascia vuota quando nessuna riga è selezionata: nel mockup la barra appare
   SOLO alla selezione. Niente min-height/fondo/bordo qui; la barra bulk porta
   il proprio stile quando compare. */
.yc-table-wrapper--flush .yc-table-toolbar {
    min-height: 0;
    padding: 0;
    background: transparent;
    border-bottom: 0;
}
.yc-table-wrapper--flush .yc-table-toolbar:not(:has(.yc-bulk-actions:not(.d-none))) {
    display: none;
}
/* Quando la selezione è attiva, un filo d'aria sopra la tabella. */
.yc-table-wrapper--flush .yc-bulk-actions:not(.d-none) {
    margin-bottom: .5rem;
}

.yc-table-wrapper .table-responsive {
    /* Solo scroll orizzontale. Un max-height qui creava una SECONDA barra di
       scorrimento verticale accanto a quella della pagina: con due barre non si
       capisce più dove si è nella lista. L'header sticky si ancora alla topbar
       (vedi sotto) e funziona con lo scroll della pagina. */
    overflow-x: auto;
    overflow-y: visible;
}

.yc-table-wrapper .table {
    --bs-table-bg: transparent;
    margin: 0;
    font-size: var(--yc-font-size-sm);
}

/* Header: etichette in maiuscoletto, sticky, regola forte in basso */
.yc-table-wrapper .table > thead,
.yc-table-wrapper .table > thead.table-light {
    --bs-table-bg: var(--yc-bg-subtle);
}
.yc-table-wrapper .table > thead th {
    position: sticky;
    top: var(--yc-topbar-height, 56px);   /* si ferma sotto la topbar, non sotto il bordo viewport */
    z-index: 2;
    background: var(--yc-bg-subtle);
    padding: var(--yc-table-head-y) var(--yc-table-cell-x);
    font-size: var(--yc-label-size);
    font-weight: var(--yc-font-weight-semibold);
    letter-spacing: var(--yc-label-tracking);
    text-transform: uppercase;
    color: var(--yc-text-muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--yc-border-strong);
    vertical-align: middle;
}
/* FLUSH: header NON sticky (come il mockup). DEVE stare DOPO la regola sticky
   qui sopra per vincere a pari specificità. Lo sticky con offset fisso, sotto il
   banner non-sticky "impersonando", lasciava l'header staccato sopra la prima riga. */
.yc-table-wrapper--flush .table > thead th {
    position: static;
    top: auto;
    z-index: auto;
    background: transparent;
    border-bottom: 2px solid var(--yc-divider);
    color: color-mix(in srgb, var(--yc-text) 60%, transparent);
}

/* Colonne ordinabili: affordance e indicatore di direzione */
.yc-table-wrapper .table > thead th[data-sortable] {
    cursor: pointer;
    user-select: none;
    transition: color var(--yc-transition), background var(--yc-transition);
}
.yc-table-wrapper .table > thead th[data-sortable]:hover {
    color: var(--yc-primary-700);
    background: var(--yc-primary-50);
}
.yc-table-wrapper .table > thead th[data-sortable]::after {
    content: "";
    display: inline-block;
    width: 0; height: 0;
    margin-left: .35em;
    vertical-align: middle;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0;
    transition: opacity var(--yc-transition), transform var(--yc-transition);
}
.yc-table-wrapper .table > thead th[data-sortable]:hover::after { opacity: .35; }
.yc-table-wrapper .table > thead th[aria-sort]::after { opacity: 1; }
.yc-table-wrapper .table > thead th[aria-sort="ascending"]::after { transform: rotate(180deg); }
.yc-table-wrapper .table > thead th[aria-sort] { color: var(--yc-text); }

/* Righe: regola sottile, niente zebra, hover discreto */
.yc-table-wrapper .table > tbody td {
    padding: var(--yc-table-cell-y) var(--yc-table-cell-x);
    border-bottom: 1px solid var(--yc-table-row-border);
    border-top: 0;
    vertical-align: middle;
    color: var(--yc-text);
}
.yc-table-wrapper .table > tbody tr:last-child td { border-bottom: 0; }

.yc-table-wrapper .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: transparent;
    background: var(--yc-gray-50);
    box-shadow: none;
}
.yc-table-wrapper .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent;
    background: transparent;
}

/* Riga selezionata */
.yc-table-wrapper .table > tbody > tr:has(input[data-check-row]:checked) > * {
    background: var(--yc-primary-50);
}

/* Colonna checkbox */
.yc-checkbox-col,
.yc-table-wrapper .table > tbody td:has(input[data-check-row]) {
    width: 36px;
    padding-right: 0;
}
.yc-table-wrapper .form-check-input {
    margin: 0;
    border-color: var(--yc-border-strong);
    cursor: pointer;
}

/* Azioni riga: presenti nel DOM, rivelate su hover/focus della riga.
   Niente reflow — si muove solo l'opacità. */
.yc-table-actions {
    white-space: nowrap;
}
.yc-table-wrapper .table > tbody > tr .yc-table-actions > * {
    opacity: 0;
    transition: opacity var(--yc-transition);
}
.yc-table-wrapper .table > tbody > tr:hover .yc-table-actions > *,
.yc-table-wrapper .table > tbody > tr:focus-within .yc-table-actions > * {
    opacity: 1;
}
@media (hover: none) {
    /* Su touch non c'è hover: le azioni restano sempre visibili */
    .yc-table-wrapper .table > tbody > tr .yc-table-actions > * { opacity: 1; }
}

/* ══ Toolbar tabella e azioni bulk ════════════════════════════════════════ */

.yc-table-toolbar {
    padding: .5rem .625rem;
    border-bottom: 1px solid var(--yc-border);
    background: var(--yc-bg-card);
    margin: 0 !important;   /* neutralizza mb-3 emesso da renderTable() */
    min-height: 48px;
    gap: .5rem;
}

/* Barra azioni in blocco come il mockup: accento teal a sinistra, fondo grigio
   tenue, conteggio in grassetto, "Deseleziona" ghost, separatore, poi i bottoni. */
.yc-bulk-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 8px 10px;
    border-left: 3px solid var(--yc-primary);
    background: color-mix(in srgb, var(--yc-text) 4%, transparent);
    border-radius: var(--yc-border-radius-sm, 6px);
    animation: yc-bulk-in 160ms ease-out;
}
.yc-bulk-count {
    font-weight: var(--yc-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--yc-text);
}
.yc-bulk-clear {
    padding: 2px 7px;
    font-size: 12px;
    text-decoration: none;
    color: var(--yc-primary-700);
}
.yc-bulk-clear:hover { color: var(--yc-primary-800); text-decoration: underline; }
.yc-bulk-sep {
    width: 1px; height: 20px; align-self: center;
    background: var(--yc-border);
    margin: 0 2px;
}
.yc-bulk-actions .text-muted {
    color: var(--yc-primary-800) !important;
    font-weight: var(--yc-font-weight-medium);
    white-space: nowrap;
}
@keyframes yc-bulk-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
}

/* ══ Paginazione ══════════════════════════════════════════════════════════ */

.yc-table-wrapper .pagination {
    --bs-pagination-color: var(--yc-gray-700);
    --bs-pagination-border-color: var(--yc-border);
    --bs-pagination-border-radius: var(--yc-border-radius);
    --bs-pagination-font-size: var(--yc-font-size-sm);
    --bs-pagination-hover-bg: var(--yc-gray-100);
    --bs-pagination-hover-color: var(--yc-text);
    --bs-pagination-hover-border-color: var(--yc-border-strong);
    --bs-pagination-focus-bg: var(--yc-gray-100);
    --bs-pagination-focus-box-shadow: var(--yc-focus-ring);
    --bs-pagination-active-bg: var(--yc-primary);
    --bs-pagination-active-border-color: var(--yc-primary);
    margin: 0;
}
.yc-table-wrapper > .pagination,
.yc-table-wrapper > nav.yc-pagination {
    padding: .625rem .75rem;
    border-top: 1px solid var(--yc-border);
    margin-top: 0 !important;
    padding-top: .625rem !important;
    background: var(--yc-bg-card);
}
/* Tabella flush: la paginazione segue il fondo pagina (grigio caldo), non bianco. */
.yc-table-wrapper--flush > nav.yc-pagination { background: transparent; }
/* Layout: riepilogo (sx) · pagine (centro, via mx-auto) · per-pagina (dx). */
.yc-pagination__summary { flex: 0 0 auto; }
.yc-pagination__per-page { flex: 0 0 auto; }
.yc-pagination .pagination {
    flex: 0 0 auto;
    gap: 4px;                       /* bottoni staccati, non incollati */
}
/* Bottoni pagina come il mockup: piatti, bordo tenue, angoli leggeri; l'attivo
   è teal pieno. Niente riquadri Bootstrap incollati. */
.yc-pagination .page-item .page-link {
    min-width: 30px;
    padding: 4px 8px;
    text-align: center;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--yc-gray-700);
    background: var(--yc-bg-card);
    border: 1px solid var(--yc-border);
    border-radius: var(--yc-border-radius-sm, 6px);
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.yc-pagination .page-item .page-link:hover {
    border-color: var(--yc-primary-300, #7cc9c1);
    color: var(--yc-primary-700);
    background: var(--yc-bg-card);
}
.yc-pagination .page-item.active .page-link {
    background: var(--yc-primary);
    border-color: var(--yc-primary);
    color: #fff;
    font-weight: var(--yc-font-weight-semibold);
}
/* Ellissi e frecce disabilitate: nessun riquadro, solo testo tenue. */
.yc-pagination .page-item.disabled .page-link {
    border-color: transparent;
    background: transparent;
    color: color-mix(in srgb, var(--yc-text) 35%, transparent);
}
/* "Per pagina" select: bordo tenue, coerente coi bottoni. */
.yc-pagination__per-page .form-select {
    font-size: 12.5px;
    padding: 3px 26px 3px 8px;
    border-color: var(--yc-border);
    border-radius: var(--yc-border-radius-sm, 6px);
    color: var(--yc-text);
}

/* ══ Filtri ═══════════════════════════════════════════════════════════════ */

.yc-filters {
    background: var(--yc-bg-card) !important;
    border: 1px solid var(--yc-border) !important;
    border-radius: var(--yc-border-radius-lg);
}
/* renderField() avvolge ogni campo in .mb-3.yc-field: dentro una barra filtri
   quel margine sfalsa l'allineamento con i bottoni. */
.yc-filters .yc-field,
.yc-filters .mb-3 {
    margin-bottom: 0 !important;
}
.yc-filters .form-label {
    font-size: var(--yc-label-size);
    font-weight: var(--yc-font-weight-semibold);
    letter-spacing: var(--yc-label-tracking);
    text-transform: uppercase;
    color: var(--yc-text-muted);
}

/* ══ Form ═════════════════════════════════════════════════════════════════ */

.form-control,
.form-select {
    border-radius: var(--yc-border-radius);
    border-color: var(--yc-input-border);
    font-size: var(--yc-font-size-sm);
    padding: .375rem var(--yc-input-padding-x);
    color: var(--yc-text);
    transition: border-color var(--yc-transition), box-shadow var(--yc-transition);
}
.form-control-sm,
.form-select-sm {
    font-size: var(--yc-font-size-xs);
    padding: .25rem .5rem;
    border-radius: var(--yc-border-radius);
}
.form-control::placeholder { color: var(--yc-text-light); }
.form-control:disabled,
.form-select:disabled {
    background: var(--yc-gray-100);
    color: var(--yc-text-muted);
}

.form-label {
    font-size: var(--yc-font-size-sm);
    font-weight: var(--yc-label-weight);
    color: var(--yc-gray-700);
    margin-bottom: .25rem;
}
.form-text {
    font-size: var(--yc-font-size-xs);
    color: var(--yc-text-muted);
}
.yc-field { margin-bottom: 1rem !important; }

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--yc-input-error);
}
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .18);
}
.invalid-feedback { font-size: var(--yc-font-size-xs); }

.input-group-text {
    background: var(--yc-bg-subtle);
    border-color: var(--yc-input-border);
    border-radius: var(--yc-border-radius);
    font-size: var(--yc-font-size-sm);
    color: var(--yc-text-muted);
}

.form-switch .form-check-input {
    width: 2rem;
    height: 1.1rem;
}

.yc-form__actions {
    padding-top: 1rem;
    border-top: 1px solid var(--yc-border);
}

/* ══ Card ═════════════════════════════════════════════════════════════════ */

.card {
    --bs-card-border-color: var(--yc-border);
    --bs-card-border-radius: var(--yc-border-radius-lg);
    --bs-card-inner-border-radius: var(--yc-border-radius-lg);
    --bs-card-bg: var(--yc-bg-card);
}
.card-header {
    background: var(--yc-bg-card);
    border-bottom: 1px solid var(--yc-border);
    font-weight: var(--yc-font-weight-semibold);
    font-size: var(--yc-font-size-sm);
    padding: .75rem 1rem;
}

/* ══ Modali e offcanvas ═══════════════════════════════════════════════════ */

.modal-content {
    border-radius: var(--yc-border-radius-xl);
    box-shadow: var(--yc-shadow-lg) !important;
}
.modal-header {
    padding: 1rem 1.25rem .875rem;
    border-bottom: 1px solid var(--yc-border) !important;
}
.modal-title {
    font-size: var(--yc-font-size-lg);
    font-weight: var(--yc-font-weight-semibold);
    letter-spacing: -.011em;
}
.modal-body { padding: 1.25rem; }
.modal-footer {
    padding: .875rem 1.25rem 1.25rem;
    gap: .5rem;
}
.modal-footer > * { margin: 0; }
.modal-backdrop.show { opacity: .35; }

.offcanvas-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--yc-border) !important;
}
.offcanvas-title {
    font-size: var(--yc-font-size-lg);
    font-weight: var(--yc-font-weight-semibold);
}
.offcanvas-body { padding: 1.25rem; }

/* ══ Badge di stato ═══════════════════════════════════════════════════════ */

/* Pill tinte anziché fill saturi: in una lista densa venti fill pieni gridano. */
.badge {
    border-radius: 999px;
    font-size: var(--yc-label-size);
    font-weight: var(--yc-font-weight-semibold);
    letter-spacing: .02em;
    padding: .25em .6em;
}

.yc-status,
[data-status-badge] {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    border-radius: 999px;
    padding: .2em .6em;
    font-size: var(--yc-label-size);
    font-weight: var(--yc-font-weight-semibold);
    white-space: nowrap;
}
.yc-status::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.yc-status--pending     { background: var(--yc-status-pending-light);     color: var(--yc-warning-dark); }
.yc-status--confirmed   { background: var(--yc-status-confirmed-light);   color: #1d4ed8; }
.yc-status--completed   { background: var(--yc-status-completed-light);   color: var(--yc-success-dark); }
.yc-status--cancelled   { background: var(--yc-status-cancelled-light);   color: var(--yc-gray-600); }
.yc-status--no_show,
.yc-status--noshow      { background: var(--yc-status-noshow-light);      color: var(--yc-danger-dark); }
.yc-status--rescheduled { background: var(--yc-status-rescheduled-light); color: #6d28d9; }

/* ══ Tag (badge del flusso, stile Modernist: outline / accent / neutral) ══ */

.yc-tag {
    display: inline-flex;
    align-items: center;
    font-size: .6875rem;              /* ~11px come il mockup */
    letter-spacing: .01em;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* neutral: grigio tenue (uscito, attesa arrivo) */
.yc-tag--neutral {
    background: var(--yc-gray-100);
    color: var(--yc-gray-600);
}
/* accent: tinta teal chiara (in attesa, in ritardo) */
.yc-tag--accent {
    background: var(--yc-primary-50);
    color: var(--yc-primary-800);
}
/* outline: bordo teal, fondo trasparente (in visita) */
.yc-tag--outline {
    background: transparent;
    color: var(--yc-primary-700);
    box-shadow: inset 0 0 0 1px var(--yc-primary);
}
/* noshow: allerta rossa (in ritardo) */
.yc-tag--noshow {
    background: var(--yc-status-noshow-light, #fee2e2);
    color: var(--yc-danger-dark, #b91c1c);
}

/* ══ Segmentato viste (.yc-seg) — come .seg/.seg-opt del mockup ═══════════════
   Valori 1:1 dal mockup (padding 7px 12px, font 13px, divisori interni),
   con accent teal yoCare al posto del rosso Modernist. Usa <a class="is-active">
   invece dei radio del mockup, i selettori sono adattati di conseguenza. */
/* Segmentato viste "flat" come il mockup: nessun bordo esterno né divisori tra
   i tab; il tab attivo è una pillola verde piena, gli altri testo semplice. */
.yc-seg {
    display: inline-flex;
    gap: 2px;
    background: transparent;
    border: 0;
}
.yc-seg__opt {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    font-size: 13.5px;
    font-weight: var(--yc-font-weight-medium);
    line-height: 1;
    color: var(--yc-gray-700);
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--yc-border-radius-sm, 6px);
    transition: background .12s ease, color .12s ease;
}
.yc-seg__opt:hover:not(.is-active) {
    background: color-mix(in srgb, var(--yc-text) 6%, transparent);
    color: var(--yc-text);
}
.yc-seg__opt.is-active {
    background: var(--yc-primary);
    color: #fff;
}
/* Contatore: pill grigio tondo dentro il tab (come il mockup: "Da confermare 131"). */
.yc-seg__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 19px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: var(--yc-font-weight-semibold);
    font-variant-numeric: tabular-nums;
    background: var(--yc-gray-200);
    color: var(--yc-gray-700);
}
.yc-seg__opt.is-active .yc-seg__count {
    background: rgba(255, 255, 255, .28);
    color: #fff;
}

/* ══ Toolbar filtri Appuntamenti — come il mockup live ═══════════════════════ */
.yc-apt-toolbar { margin-bottom: 1rem; }

/* Riga 1: segmentato · ricerca · Filtri · Importa · Esporta */
.yc-apt-bar {
    display: flex;
    align-items: center;
    gap: var(--yc-space-3, 12px);
    flex-wrap: wrap;
    padding-bottom: .5rem;
}
.yc-apt-search {
    margin-left: auto;
    width: 260px;
    max-width: 100%;
    background: transparent;
    border-color: color-mix(in srgb, var(--yc-text) 14%, transparent);  /* bordo tenue come il mockup */
    font-size: 12.5px;
}
/* Azioni testuali (Filtri / Importa / Esporta): teal come il mockup, con un
   filo di peso; hover più scuro. "Filtri · N" va in bold quando è attivo. */
.yc-apt-filtbtn,
.yc-apt-act {
    font-size: 12.5px;
    padding: 3px 8px;
    text-decoration: none;
    color: var(--yc-primary-700);
    font-weight: var(--yc-font-weight-medium);
    white-space: nowrap;
    transition: color .12s ease;
}
.yc-apt-filtbtn:hover,
.yc-apt-act:hover { color: var(--yc-primary-800); }
.yc-apt-filtbtn.is-on { font-weight: var(--yc-font-weight-semibold); }
.yc-apt-divider {
    width: 1px; height: 18px; align-self: center;
    background: var(--yc-border);
    margin: 0 2px;
}

/* ── Toolbar Pazienti (mockup): ricerca a sinistra, azioni a destra ─────────────
   La lista pazienti riusa .yc-apt-bar ma dispone ricerca · Filtri · conteggio a
   sinistra e Importa · Esporta · Nuovo paziente a destra (spinti dallo spacer). */
.yc-apt-search--left { margin-left: 0; }          /* annulla il margin-left:auto di .yc-apt-search */
.yc-apt-spacer { flex: 1 1 auto; }                /* spinge il gruppo azioni a destra */
.yc-pat-count {
    font-size: 12.5px;
    color: var(--yc-gray-500);
    white-space: nowrap;
}
.yc-pat-new { white-space: nowrap; }              /* "Nuovo paziente" non va a capo */

/* Pannello filtri pazienti più compatto del mockup: righe ravvicinate (meno
   line-height verticale tra Sesso/Provenienza/Agenda). Scoped: non tocca il
   pannello di Appuntamenti, che ha più righe e campi.
   NB: annulla esplicitamente border-bottom/padding ereditati dalla seconda
   .yc-apt-frow (righe chiave/valore del dettaglio, definita più in basso e con
   pari specificità → altrimenti vincerebbe lei). */
[data-pat-panel].yc-apt-panel { gap: 4px; padding-top: 10px; }
[data-pat-panel] .yc-apt-frow {
    padding: 2px;
    border-bottom: 0;
    align-items: center;
}

/* ══ Scheda paziente (.yc-pv-*) — come isPatView del mockup ═══════════════════
   Fascia identità in cima, poi due colonne: Storico | Note·Contatti·Consensi. */
.yc-pv-back {
    display: inline-block;
    font-size: 13px;
    color: var(--yc-primary);
    text-decoration: none;
    margin-bottom: var(--yc-space-3, 12px);
}
.yc-pv-back:hover { color: var(--yc-primary-800); text-decoration: underline; }
.yc-pv-head {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    padding: 1rem 0 1.25rem;
    border-bottom: 2px solid var(--yc-divider);
}
.yc-pv-ident { flex: 1 1 auto; min-width: 0; }
.yc-pv-name { margin: 0 0 4px; font-size: 28px; line-height: 1.1; }
.yc-pv-sub {
    font-size: 13px;
    color: color-mix(in srgb, var(--yc-text) 55%, transparent);
}
.yc-pv-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 1rem;
}
.yc-pv-flabel {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--yc-text) 55%, transparent);
    margin-bottom: 2px;
}
.yc-pv-fval { font-size: 14px; }
.yc-pv-actions { display: flex; gap: 8px; flex: none; }

/* Due colonne: storico ampio a sinistra, laterale a destra. */
.yc-pv-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 2.5rem;
    margin-top: 1.5rem;
}
@media (max-width: 992px) { .yc-pv-cols { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Intestazione di sezione (Storico / Note / Contatti / Consensi) */
.yc-pv-sec {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--yc-divider);
}
.yc-pv-sec--mt { margin-top: 1.5rem; }
.yc-pv-sec h5 { margin: 0; font-size: 16px; }
.yc-pv-secmeta, .yc-pv-secnote {
    font-size: 12px;
    color: color-mix(in srgb, var(--yc-text) 55%, transparent);
}
.yc-pv-secmeta { margin-left: auto; }

/* Righe storico: data · (prestazione + dottore) · stato · prezzo */
.yc-pv-hrow {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px var(--yc-space-2, 8px);
    border-bottom: 1px solid var(--yc-divider);
    text-decoration: none;
    color: inherit;
}
.yc-pv-hrow:hover { background: color-mix(in srgb, var(--yc-text) 3%, transparent); }
.yc-pv-hdate { width: 84px; flex: none; font-size: 13px; }
.yc-pv-hrow.is-future .yc-pv-hdate { color: var(--yc-primary-700); font-weight: var(--yc-font-weight-semibold); }
.yc-pv-hmain { flex: 1 1 auto; min-width: 0; }
.yc-pv-hsvc { display: block; font-size: 14px; }
.yc-pv-hdoc { display: block; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-pv-hstatus { flex: none; }
.yc-pv-hprice { width: 70px; flex: none; text-align: right; font-size: 13px; }
.yc-pv-empty {
    padding: 1rem var(--yc-space-2, 8px);
    font-size: 13px;
    color: color-mix(in srgb, var(--yc-text) 50%, transparent);
}

/* Note */
.yc-pv-note { margin: 12px 0 0; font-size: 14px; text-wrap: pretty; }

/* Contatti associati */
.yc-pv-crow {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: var(--yc-space-2, 8px);
    border-bottom: 1px solid var(--yc-divider);
}
.yc-pv-cmain { flex: 1 1 auto; min-width: 0; }
.yc-pv-cname { font-size: 14px; }
.yc-pv-crel { font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-pv-cright { flex: none; text-align: right; }
.yc-pv-consent {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    padding: 1px 6px 1px 5px;
    font-size: 11.5px;
    border: 1px solid;
    border-radius: var(--yc-border-radius-sm, 6px);
}
.yc-pv-consent .yc-pv-dot { width: 6px; height: 6px; border-radius: 50%; }
.yc-pv-consent.is-ok {
    border-color: var(--yc-primary-300, #a9e5de);
    background: var(--yc-primary-50);
    color: var(--yc-primary-800);
}
.yc-pv-consent.is-ok .yc-pv-dot { background: var(--yc-primary); }
.yc-pv-consent.is-no {
    border-color: var(--yc-border);
    color: color-mix(in srgb, var(--yc-text) 55%, transparent);
}
.yc-pv-consent.is-no .yc-pv-dot { background: var(--yc-gray-400); }
.yc-pv-chelp {
    font-size: 12px;
    margin-top: var(--yc-space-2, 8px);
    color: color-mix(in srgb, var(--yc-text) 55%, transparent);
    text-wrap: pretty;
}

/* Consensi */
.yc-pv-consents { display: flex; flex-direction: column; }
.yc-pv-consrow {
    display: flex;
    align-items: baseline;
    padding: var(--yc-space-2, 8px);
    border-bottom: 1px solid var(--yc-divider);
    font-size: 13px;
}
.yc-pv-consval { margin-left: auto; color: color-mix(in srgb, var(--yc-text) 55%, transparent); font-variant-numeric: tabular-nums; }
.yc-pv-consval.is-on  { color: var(--yc-primary); }
.yc-pv-consval.is-off { color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

/* ══ Form paziente (.yc-pf-*) — come isPatNew del mockup ══════════════════════
   Sezioni con divisori, chip per sesso/provenienza, indirizzo a scomparsa,
   contatti inline, consensi. */
.yc-pf { max-width: 100%; }
.yc-pf-intro {
    font-size: 13px;
    color: color-mix(in srgb, var(--yc-text) 55%, transparent);
    padding: 12px 0;
    border-bottom: 2px solid var(--yc-divider);
    margin-bottom: 4px;
}
.yc-pf-sec {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 1.25rem;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--yc-divider);
}
.yc-pf-sec h6 {
    margin: 0;
    font-family: var(--yc-font-heading, inherit);
    font-weight: var(--yc-font-weight-bold, 700);
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.yc-pf-secnote { font-size: 12px; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }
.yc-pf-secbtn {
    margin-left: auto;
    padding: 2px 7px;
    font-size: 12px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--yc-primary-700);
}
.yc-pf-secbtn:hover { color: var(--yc-primary-800); text-decoration: underline; }

/* Griglia campi a due colonne */
.yc-pf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    padding: 14px 0;
}
.yc-pf-full { grid-column: 1 / -1; }
.yc-pf-inline2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.yc-pf-block { padding: 14px 0; }
.yc-pf-addr.d-none { display: none; }
@media (max-width: 640px) { .yc-pf-grid { grid-template-columns: 1fr; } }

.yc-pf-label {
    display: block;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: var(--yc-font-weight-semibold);
    color: color-mix(in srgb, var(--yc-text) 55%, transparent);
    margin-bottom: 5px;
}
.yc-pf-req { color: var(--yc-primary); }
.yc-pf-err { font-size: 12px; color: var(--yc-danger, #b42318); margin-top: 4px; }

/* Chip sesso/provenienza (radio nascosti) */
.yc-pf-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.yc-pf-chip {
    padding: 6px 10px;
    font-size: 12.5px;
    cursor: pointer;
    border: 1px solid var(--yc-border);
    border-radius: var(--yc-border-radius-sm, 6px);
    background: var(--yc-bg-card);
    color: var(--yc-gray-700);
    user-select: none;
    transition: border-color .12s ease, background .12s ease;
}
.yc-pf-chip:hover { border-color: var(--yc-primary-300, #a9e5de); }
.yc-pf-chip.is-on {
    border-color: var(--yc-primary);
    background: color-mix(in srgb, var(--yc-primary) 12%, #fff);
    color: var(--yc-primary-700);
    font-weight: var(--yc-font-weight-medium);
}

/* Contatti inline */
.yc-pf-crow {
    display: grid;
    grid-template-columns: 2fr 1.4fr 1.6fr auto auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}
@media (max-width: 640px) { .yc-pf-crow { grid-template-columns: 1fr 1fr; } }
.yc-pf-cauth {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}
.yc-pf-crm {
    min-height: 34px;
    padding: 2px 9px;
    font-size: 15px;
    line-height: 1;
    background: none;
    border: 0;
    cursor: pointer;
    color: color-mix(in srgb, var(--yc-text) 55%, transparent);
}
.yc-pf-crm:hover { color: var(--yc-danger, #b42318); }
.yc-pf-cadd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

/* Consensi */
.yc-pf-consents { display: flex; flex-direction: column; gap: 10px; }
.yc-pf-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    cursor: pointer;
}
.yc-pf-consent input[type="checkbox"] {
    margin-top: 3px;
    flex: none;
    width: 15px;
    height: 15px;
    accent-color: var(--yc-primary);   /* teal come il mockup, non il blu di sistema */
    cursor: pointer;
}
.yc-pf-conshelp {
    display: block;
    font-size: 12px;
    color: color-mix(in srgb, var(--yc-text) 55%, transparent);
}

/* Barra azioni */
.yc-pf-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    padding: 14px 0;
    border-top: 2px solid var(--yc-divider);
}
.yc-pf-foothint { flex: 1 1 auto; min-width: 0; font-size: 13px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

/* ══ Form dottore (.yc-df-*) — come isDocNew del mockup ═══════════════════════
   Riusa il linguaggio di .yc-pf ma aggiunge: chip multi-selezione (specialità,
   sedi, prestazioni, giorni, titolo), campioni colore, segmentato Rapporto,
   editor orari a fasce e finestre stanza in sola lettura. */
.yc-df-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.yc-df-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 6px 11px;
    font: inherit;
    font-size: 12.5px;
    line-height: 1.2;
    cursor: pointer;
    border: 1px solid var(--yc-border);
    border-radius: var(--yc-border-radius-sm, 4px);
    background: var(--yc-bg-card);
    color: var(--yc-gray-700);
    user-select: none;
    transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.yc-df-chip:hover { border-color: var(--yc-primary-300, #a9e5de); }
.yc-df-chip.is-on {
    border-color: var(--yc-primary);
    background: color-mix(in srgb, var(--yc-primary) 12%, var(--yc-bg-card));
    color: var(--yc-primary-700);
    font-weight: var(--yc-font-weight-medium);
}

/* Campioni colore agenda */
.yc-df-swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.yc-df-swatch {
    width: 26px; height: 26px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--yc-border);
    transition: transform .1s ease, box-shadow .1s ease;
}
.yc-df-swatch:hover { transform: scale(1.08); }
.yc-df-swatch.is-on { box-shadow: 0 0 0 2px var(--yc-bg-card), 0 0 0 4px var(--yc-primary); }

/* Segmentato Rapporto */
.yc-df-seg {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--yc-border);
    border-radius: 8px;
    background: var(--yc-bg-light, #f8fafc);
}
.yc-df-segopt {
    margin: 0;
    padding: 5px 14px;
    font-size: 12.5px;
    cursor: pointer;
    border-radius: 6px;
    color: var(--yc-gray-700);
    user-select: none;
    transition: background .12s ease, color .12s ease;
}
/* Selezionato: verde pieno + testo bianco (come il mockup, non il riquadro chiaro). */
.yc-df-segopt.is-on {
    background: var(--yc-primary);
    color: #fff;
    font-weight: var(--yc-font-weight-medium);
}

/* Riga Professione: Rapporto (largh. naturale) · Ordine di · N. iscrizione albo. */
.yc-df-row3 {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 12px 16px;
    align-items: end;
    padding: 14px 0;
}
@media (max-width: 720px) { .yc-df-row3 { grid-template-columns: 1fr; align-items: stretch; } }

/* Editor orari: righe per giorno */
.yc-df-dayrow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 7px 0;
    border-bottom: 1px solid var(--yc-divider);
}
.yc-df-dayrow[hidden] { display: none; }
.yc-df-dayname {
    width: 74px;
    flex: none;
    font-size: 12.5px;
    color: var(--yc-gray-700);
    text-transform: capitalize;
}
.yc-df-time { width: 104px; flex: none; }
.yc-df-dash { color: color-mix(in srgb, var(--yc-text) 45%, transparent); font-size: 13px; }
.yc-df-mid { display: inline-flex; align-items: center; gap: 8px; }
.yc-df-mid.d-none { display: none; }
.yc-df-split { margin-left: auto; white-space: nowrap; padding-left: 0; padding-right: 0; }

/* Prestazioni: chip + durata */
/* Prestazioni: chip + durata IN FLUSSO ORIZZONTALE (come il mockup), non in lista. */
.yc-df-svcs { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.yc-df-svc { display: inline-flex; align-items: center; gap: 5px; }
.yc-df-svc .yc-df-chip { min-width: 0; }
.yc-df-svcdur { display: inline-flex; align-items: center; gap: 4px; }
.yc-df-svcdur.d-none { display: none; }
.yc-df-durin { width: 46px; text-align: right; }
.yc-df-min { font-size: 12px; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }

/* Finestre stanza in sola lettura (ROOM_DRIVEN) */
/* Nota "coworking" come il mockup: sfondo NEUTRO (color-neutral-100), barra verde
   a sinistra, testo teal, piatta (niente bordo pieno né angoli tondi). */
.yc-df-roomnote {
    font-size: 13px;
    color: var(--yc-primary-700);
    background: var(--yc-gray-100, #f1f5f9);
    border: 0;
    border-left: 2px solid var(--yc-primary);
    border-radius: 0;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.yc-df-winrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--yc-divider);
    font-size: 13px;
}
/* Giorno / stanza / conteggio prendono la tipografia dalle righe settimana
   (.yc-dv-wday, .yc-dv-wroom, .yc-dv-wslots più in basso): è lo stesso dato
   della scheda dottore e lo stile sta scritto una volta sola. Qui resta solo
   ciò che è specifico di questo contenitore. */
.yc-df-winrow .yc-num { flex: none; }
.yc-df-winslots { margin-left: auto; }
.yc-df-empty {
    font-size: 13px;
    color: color-mix(in srgb, var(--yc-text) 55%, transparent);
    padding: 10px 0;
}

/* Foto profilo in cima all'Anagrafica: avatar colore (iniziali o foto) + azioni */
.yc-df-photo { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 10px 0 4px; }
.yc-df-photo-av {
    width: 76px; height: 76px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--yc-font-heading, inherit); font-weight: 800; font-size: 24px;
    color: #fff; border-radius: 50%; overflow: hidden;
}
.yc-df-photo-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yc-df-photo-side { flex: 1 1 auto; min-width: 200px; }
.yc-df-photo-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.yc-df-cropwrap { margin-top: 10px; max-width: 320px; }
.yc-df-cropwrap img { max-width: 100%; max-height: 260px; display: block; }
.yc-df-photo-status { margin-top: 6px; font-size: 12px; }

/* ══ Scheda dottore (.yc-dv-*) — come isDocDet del mockup ═════════════════════
   Fascia identità (avatar colore) · 4 KPI · due colonne (settimana + prossimi
   appuntamenti | anagrafica + contratti + prestazioni). */
.yc-dv { max-width: 100%; }
.yc-dv-head {
    display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
    margin-top: .75rem; padding-bottom: .75rem;
    border-bottom: 2px solid var(--yc-divider);
}
.yc-dv-ident { display: flex; align-items: center; gap: 12px; flex: 1 1 320px; min-width: 260px; }
.yc-dv-avatar {
    width: 52px; height: 52px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--yc-font-heading, inherit); font-weight: 800; font-size: 18px;
    color: #fff; border-radius: var(--yc-border-radius-sm, 6px);
}
.yc-dv-idtext { flex: 1 1 auto; min-width: 0; }
.yc-dv-nameline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.yc-dv-name { margin: 0; font-size: 23px; }
.yc-dv-sub { margin-top: 3px; font-size: 13.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-dv-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.yc-dv-kpis {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-bottom: 2px solid var(--yc-divider);
}
@media (max-width: 720px) { .yc-dv-kpis { grid-template-columns: repeat(2, 1fr); } }
.yc-dv-kpi { padding: .75rem 1rem .75rem 0; }
.yc-dv-kpival {
    font-family: var(--yc-font-heading, inherit); font-weight: 800; font-size: 26px;
    line-height: 1.05; letter-spacing: -.02em; color: var(--yc-primary-700);
}
.yc-dv-kpilabel { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; margin-top: 6px; }
.yc-dv-kpihint { font-size: 12px; margin-top: 2px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

.yc-dv-cols { display: flex; gap: 2.5rem; flex-wrap: wrap; align-items: flex-start; }
.yc-dv-main { flex: 1 1 520px; min-width: 440px; }
.yc-dv-side { flex: 1 1 300px; min-width: 280px; }
@media (max-width: 640px) { .yc-dv-main, .yc-dv-side { min-width: 100%; } }

.yc-dv-sec {
    display: flex; align-items: baseline; gap: 8px;
    margin-top: 1.5rem; padding-bottom: 6px; border-bottom: 2px solid var(--yc-divider);
}
.yc-dv-sec--mt { margin-top: 1.5rem; }
.yc-dv-sec h6 {
    margin: 0; font-family: var(--yc-font-heading, inherit);
    font-weight: var(--yc-font-weight-bold, 700); font-size: 13.5px;
}
.yc-dv-secnote { font-size: 12px; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }

/* Righe settimana — SORGENTE UNICA della tipografia "finestra settimanale".
   La stessa riga compare nella scheda dottore (.yc-dv-w*) e nel form in sola
   lettura ROOM_DRIVEN (.yc-df-winrow, vedi sopra): come nel mockup il giorno è
   in grassetto e la stanza è secondaria. Le due pagine mostrano lo stesso dato,
   quindi la tipografia sta qui una volta sola; là restano solo le differenze
   di layout del contenitore. */
.yc-dv-wrow {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 4px; border-bottom: 1px solid var(--yc-divider);
}
.yc-dv-wday,
.yc-df-winrow .yc-df-dayname { width: 88px; flex: none; font-size: 13px; font-weight: 600; color: inherit; }
.yc-dv-wtime  { width: 168px; flex: none; font-size: 13px; }
.yc-dv-wroom,
.yc-df-winroom { flex: 1 1 auto; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-dv-wslots,
.yc-df-winslots { flex: none; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-dv-wtot { padding: 9px 4px; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

/* Righe prossimi appuntamenti */
.yc-dv-arow {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 4px; border-bottom: 1px solid var(--yc-divider);
    cursor: pointer; text-decoration: none; color: inherit;
}
.yc-dv-arow:hover { background: var(--yc-primary-50, #f1f5f9); text-decoration: none; color: inherit; }
.yc-dv-awhen  { width: 96px; flex: none; font-size: 13px; }
.yc-dv-apat   { flex: 1 1 auto; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yc-dv-asvc   { width: 150px; flex: none; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-dv-astate { flex: none; white-space: nowrap; }

/* Anagrafica (k/v) */
.yc-dv-fact {
    display: flex; align-items: baseline; gap: 12px;
    padding: 8px 4px; border-bottom: 1px solid var(--yc-divider);
}
.yc-dv-fk { width: 118px; flex: none; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-dv-fv { flex: 1 1 auto; min-width: 0; font-size: 13.5px; }

/* Contratti stanza */
.yc-dv-crow { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--yc-divider); }
.yc-dv-cmain { flex: 1 1 auto; min-width: 0; }
.yc-dv-croom { display: block; font-size: 13.5px; }
.yc-dv-cwhen { display: block; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-dv-svcs { padding-top: .75rem; }

/* ══ Hub Comunicazioni (.yc-cm-*) — come isComm del mockup ════════════════════
   Pagina a due pannelli: tab in alto, lista conversazioni a sinistra, thread +
   composer a destra; tab "Inviati" = KPI + storico. */
.yc-cm { display: flex; flex-direction: column; min-height: 0; }
.yc-cm-top {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding-bottom: .75rem; border-bottom: 2px solid var(--yc-divider);
}
.yc-cm-tabs { display: inline-flex; gap: 2px; }
.yc-cm-tab {
    padding: 6px 12px; font-size: 13px; text-decoration: none; border-radius: 6px;
    color: var(--yc-gray-700); white-space: nowrap;
}
.yc-cm-tab:hover { background: var(--yc-bg-light); text-decoration: none; color: var(--yc-gray-900); }
.yc-cm-tab.is-on { background: var(--yc-primary); color: #fff; font-weight: var(--yc-font-weight-medium); }
.yc-cm-topright { margin-left: auto; display: inline-flex; align-items: center; gap: 14px; }
.yc-cm-prov { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-cm-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* Due pannelli */
.yc-cm-inbox { display: flex; align-items: stretch; gap: 0; height: calc(100vh - 210px); min-height: 460px; }
.yc-cm-left { width: 376px; flex: none; display: flex; flex-direction: column; min-height: 0; border-right: 2px solid var(--yc-divider); }
.yc-cm-right { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; padding-left: 1rem; }
@media (max-width: 820px) {
    .yc-cm-inbox { flex-direction: column; height: auto; }
    .yc-cm-left { width: 100%; border-right: 0; border-bottom: 2px solid var(--yc-divider); max-height: 300px; }
    .yc-cm-right { padding-left: 0; }
}

/* Ricerca + chip canale */
.yc-cm-search { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 0; }
.yc-cm-chan {
    flex: none; padding: 5px 9px; font-size: 12px; cursor: pointer;
    border: 1px solid var(--yc-border); background: var(--yc-bg-card); color: var(--yc-gray-700);
    border-radius: var(--yc-border-radius-sm, 4px);
}
.yc-cm-chan.is-on { border-color: var(--yc-primary); background: color-mix(in srgb, var(--yc-primary) 12%, var(--yc-bg-card)); color: var(--yc-primary-700); }

/* Lista conversazioni */
.yc-cm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; border-top: 1px solid var(--yc-divider); }
.yc-cm-grouphead {
    padding: 9px 12px 4px 0; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
    font-weight: 700; color: color-mix(in srgb, var(--yc-text) 55%, transparent);
    background: var(--yc-gray-100); border-bottom: 1px solid var(--yc-divider);
}
.yc-cm-item {
    display: flex; gap: 8px; padding: 11px 12px 11px 0; cursor: pointer;
    border-bottom: 1px solid var(--yc-divider); border-left: 3px solid transparent;
}
.yc-cm-item:hover { background: color-mix(in srgb, var(--yc-text) 3%, transparent); }
.yc-cm-item.is-on { background: color-mix(in srgb, var(--yc-primary) 8%, transparent); border-left-color: var(--yc-primary); }
.yc-cm-item.is-unread .yc-cm-item-name { font-weight: 700; }
.yc-cm-item-main { flex: 1 1 auto; min-width: 0; }
.yc-cm-item-top { display: flex; align-items: baseline; gap: 6px; }
.yc-cm-item-name { flex: 1 1 auto; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yc-cm-item-when { flex: none; font-size: 11px; color: color-mix(in srgb, var(--yc-text) 45%, transparent); }
.yc-cm-item-sub { display: flex; align-items: baseline; gap: 5px; margin-top: 2px; }
.yc-cm-item-chan { flex: none; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }
.yc-cm-item-prev { flex: 1 1 auto; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-cm-item-meta { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.yc-cm-intent { padding: 1px 6px; font-size: 11px; border: 1px solid var(--yc-primary-300, #a9e5de); color: var(--yc-primary-700); border-radius: var(--yc-border-radius-sm, 4px); }
.yc-cm-owner { font-size: 11px; color: color-mix(in srgb, var(--yc-text) 45%, transparent); }
.yc-cm-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--yc-primary); display: inline-block; }
.yc-cm-wait { margin-left: auto; font-size: 11px; color: #b45309; }

/* Thread */
.yc-cm-nothread, .yc-cm-empty { padding: 2rem 0; }
.yc-cm-empty-t { font-family: var(--yc-font-heading, inherit); font-weight: 800; font-size: 15px; }
.yc-cm-empty-s { margin-top: 5px; font-size: 13px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-cm-thread { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.yc-cm-thhead { flex: none; display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 2px solid var(--yc-divider); }
.yc-cm-thident { flex: 1 1 260px; min-width: 200px; }
.yc-cm-thnameline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.yc-cm-thname { margin: 0; font-size: 17px; }
.yc-cm-thmeta { margin-top: 3px; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-cm-thactions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Banner appuntamento */
.yc-cm-apt { flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; margin-top: 12px; background: var(--yc-gray-100); border-left: 2px solid var(--yc-primary); }
.yc-cm-apt-main { flex: 1 1 220px; min-width: 200px; }
.yc-cm-apt-k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-cm-apt-line { margin-top: 2px; font-size: 13.5px; }
/* Ipotesi, non collegamento: barra tratteggiata invece che piena, così si
   distingue dal riquadro certo senza leggere l'etichetta. */
.yc-cm-apt.is-guessed { border-left-style: dashed; border-left-color: color-mix(in srgb, var(--yc-text) 35%, transparent); }

/* Messaggi (bolle) */
.yc-cm-msgs { flex: 1 1 auto; min-height: 96px; overflow-y: auto; display: flex; flex-direction: column; padding: 1rem 0; }
.yc-cm-msg { display: flex; flex-direction: column; max-width: 74%; margin-bottom: 12px; }
.yc-cm-msg.in { align-items: flex-start; align-self: flex-start; }
.yc-cm-msg.out { align-items: flex-end; align-self: flex-end; }
.yc-cm-bubble { padding: 9px 12px; font-size: 13.5px; line-height: 1.5; border: 1px solid var(--yc-border); border-radius: 10px; }
.yc-cm-msg.in .yc-cm-bubble { background: var(--yc-bg-card); }
.yc-cm-msg.out .yc-cm-bubble { background: var(--yc-primary); color: #fff; border-color: var(--yc-primary); }
.yc-cm-msgmeta { margin-top: 3px; font-size: 11px; color: color-mix(in srgb, var(--yc-text) 45%, transparent); }

/* Composer */
.yc-cm-composer { flex: none; padding: 12px 0 0; border-top: 2px solid var(--yc-divider); }
.yc-cm-quick, .yc-cm-tpls { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.yc-cm-quickbtn, .yc-cm-tpl {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12.5px;
    cursor: pointer; background: transparent; color: var(--yc-text); border-radius: var(--yc-border-radius-sm, 4px);
    border: 1px dashed var(--yc-border-strong, #cbd5e1);
}
.yc-cm-tpl { border-style: solid; }
.yc-cm-quickbtn:hover, .yc-cm-tpl:hover { border-color: var(--yc-primary); }
.yc-cm-quickkey { font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--yc-text) 45%, transparent); }
.yc-cm-composer textarea { width: 100%; resize: vertical; font-size: 13.5px; }
.yc-cm-composerbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.yc-cm-composerhint { flex: 1 1 auto; min-width: 0; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }
.yc-cm-note { padding: 10px 12px; background: var(--yc-gray-100); border-left: 2px solid var(--yc-primary); font-size: 13px; }
.yc-cm-note--warn { border-left-color: #b45309; }

/* Inviati */
.yc-cm-sent { padding-top: .5rem; }
.yc-cm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 2px solid var(--yc-divider); }
@media (max-width: 720px) { .yc-cm-kpis { grid-template-columns: repeat(2, 1fr); } }
.yc-cm-kpi { padding: .75rem 1rem .75rem 0; }
.yc-cm-kpival { font-family: var(--yc-font-heading, inherit); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: -.02em; color: var(--yc-primary-700); }
.yc-cm-kpilabel { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; margin-top: 6px; }
.yc-cm-kpihint { font-size: 12px; margin-top: 2px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-cm-secbar { display: flex; align-items: baseline; gap: 12px; margin-top: 1.5rem; padding-bottom: 6px; border-bottom: 2px solid var(--yc-divider); }
.yc-cm-secbar h5 { margin: 0; font-size: 16px; }
.yc-cm-secnote { font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-cm-sentrow { display: flex; align-items: flex-start; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--yc-divider); }
.yc-cm-sc { width: 74px; flex: none; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-cm-sn { width: 150px; flex: none; min-width: 0; }
.yc-cm-sn1 { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yc-cm-sn2 { font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-cm-sb { flex: 1 1 auto; min-width: 0; }
.yc-cm-sb1 { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yc-cm-sb2 { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-cm-sw { width: 104px; flex: none; text-align: right; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-cm-ss { width: 112px; flex: none; text-align: right; }

/* Modali hub (collega paziente · nuovo messaggio) */
.yc-cm-modal { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 1rem 1rem; background: rgba(15,23,42,.45); }
.yc-cm-modal[hidden] { display: none; }
.yc-cm-modal-box { width: min(460px, 100%); background: var(--yc-bg-card); border-radius: var(--yc-border-radius, 8px); box-shadow: var(--yc-shadow-lg, 0 12px 32px rgba(0,0,0,.2)); padding: 1rem; display: flex; flex-direction: column; gap: 8px; }
.yc-cm-modal-head { display: flex; align-items: center; justify-content: space-between; }
.yc-cm-modal-head h5 { margin: 0; font-size: 16px; }
.yc-cm-modal-x { background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-cm-presults { max-height: 240px; overflow-y: auto; }
.yc-cm-pres { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 6px; border-bottom: 1px solid var(--yc-divider); cursor: pointer; }
.yc-cm-pres:hover { background: var(--yc-primary-50, #f1f5f9); }
.yc-cm-pres-n { font-size: 14px; }
.yc-cm-pres-p { font-size: 12px; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-cm-pnone { padding: 12px 6px; font-size: 13px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-cm-modal-sel { font-size: 13px; padding: 6px 8px; background: var(--yc-primary-50, #eefaf8); border-left: 2px solid var(--yc-primary); }
.yc-cm-modal-or { font-size: 12px; color: color-mix(in srgb, var(--yc-text) 50%, transparent); text-align: center; margin: 2px 0; }
.yc-cm-modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* ══ Utenti e permessi (.yc-uh-*) — come isUsers/isUserDet del mockup ═════════ */
.yc-uh-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: .75rem; border-bottom: 2px solid var(--yc-divider); }
.yc-uh-tabs { display: inline-flex; gap: 2px; }
.yc-uh-tab { padding: 6px 12px; font-size: 13px; text-decoration: none; border-radius: 6px; color: var(--yc-gray-700); }
.yc-uh-tab:hover { background: var(--yc-bg-light); text-decoration: none; color: var(--yc-gray-900); }
.yc-uh-tab.is-on { background: var(--yc-primary); color: #fff; font-weight: var(--yc-font-weight-medium); }
.yc-uh-topright { margin-left: auto; }
.yc-uh-count { font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); padding: .75rem 0 .25rem; }
.yc-uh-avatar { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-family: var(--yc-font-heading, inherit); font-weight: 800; font-size: 11px; color: #fff; background: var(--yc-primary); border-radius: 50%; }

/* Inviti in sospeso */
.yc-uh-pending { border: 2px solid var(--yc-divider); margin: .5rem 0 1.25rem; }
.yc-uh-pending-head { display: flex; align-items: baseline; gap: 8px; padding: .75rem 1rem; border-bottom: 1px solid var(--yc-divider); }
.yc-uh-pending-head h6 { margin: 0; font-family: var(--yc-font-heading, inherit); font-weight: 800; font-size: 13.5px; }
.yc-uh-prow { display: flex; align-items: center; gap: 12px; padding: 9px 1rem; border-bottom: 1px solid var(--yc-divider); flex-wrap: wrap; }
.yc-uh-prow:last-child { border-bottom: 0; }
.yc-uh-pemail { flex: 1 1 200px; min-width: 180px; font-size: 13.5px; }
.yc-uh-prole { width: 132px; flex: none; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-uh-pwhen { width: 150px; flex: none; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-uh-table { overflow-x: auto; margin-top: 1rem; }
.yc-uh-table table { min-width: 820px; }

/* Scheda: "Cosa può fare" (gruppi permessi con override) */
.yc-uh-perms { display: flex; flex-direction: column; }
.yc-uh-permgroup { padding: .75rem 0; border-bottom: 1px solid var(--yc-divider); }
.yc-uh-permgname { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-uh-permitems { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 16px; margin-top: 9px; }
.yc-uh-perm { display: flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.yc-uh-perm input { accent-color: var(--yc-primary); width: 15px; height: 15px; cursor: pointer; flex: none; }
.yc-uh-perm span:first-of-type { flex: 1 1 auto; min-width: 0; }
.yc-uh-permnote { flex: none; font-size: 11.5px; color: color-mix(in srgb, var(--yc-text) 45%, transparent); }

/* Modale invito */
.yc-uh-invbox { max-width: 560px; }
.yc-uh-invgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.yc-uh-ihint { margin-top: 4px; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }
.yc-uh-ihint.is-bad { color: var(--yc-danger, #b42318); }
.yc-uh-invsec { margin-top: 1rem; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 2px solid var(--yc-divider); color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-uh-irole { display: flex; align-items: flex-start; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--yc-divider); cursor: pointer; }
.yc-uh-irole input { margin-top: 3px; accent-color: var(--yc-primary); cursor: pointer; flex: none; }
.yc-uh-irole-t { flex: 1 1 auto; min-width: 0; }
.yc-uh-irole-l { display: block; font-size: 13.5px; }
.yc-uh-irole.is-on .yc-uh-irole-l { font-weight: var(--yc-font-weight-semibold, 600); }
.yc-uh-irole-h { display: block; margin-top: 2px; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-uh-iexpiry { flex: 1 1 auto; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 45%, transparent); }
/* Riassunto invito: callout neutro (--color-neutral-100 del mockup) + bordo teal a sinistra, NON sfondo teal */
.yc-uh-isummary { margin-top: 1rem; padding: 10px 12px; background: var(--yc-gray-100); border-left: 2px solid var(--yc-primary); font-size: 12.5px; line-height: 1.5; }

/* ══ Struttura e catalogo (.yc-sh-*) — come isStruct del mockup ═══════════════ */
.yc-sh { display: block; }

/* Barra in testa: segmentato .yc-seg (come Appuntamenti) + ricerca + Aggiungi */
.yc-sh-top { display: flex; align-items: center; gap: var(--space-3, 12px); flex-wrap: wrap; padding-bottom: .5rem; margin-bottom: 1.5rem; border-bottom: 2px solid var(--yc-divider); }
.yc-sh-spacer { flex: 1 1 auto; }
.yc-sh-searchform { flex: none; margin: 0; }
.yc-sh-searchnote { padding: 8px 2px; margin-bottom: .5rem; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-sh-addoff { flex: none; max-width: 220px; font-size: 12px; line-height: 1.35; color: color-mix(in srgb, var(--yc-text) 45%, transparent); }
.yc-sh-list { display: block; }
@media (max-width: 760px) { .yc-sh-top .yc-seg { flex-wrap: wrap; } .yc-sh-spacer { display: none; } .yc-sh-searchform, .yc-sh-searchform input { width: 100% !important; } }

/* Diagnostica */
.yc-sh-issues { border: 2px solid var(--yc-divider); margin-bottom: 1.5rem; }
.yc-sh-issues-head { display: flex; align-items: baseline; gap: 8px; padding: .75rem 1rem; border-bottom: 1px solid var(--yc-divider); }
.yc-sh-issues-head h6 { margin: 0; font-family: var(--yc-font-heading, inherit); font-weight: 800; font-size: 14.5px; }
.yc-sh-issue { display: flex; align-items: center; gap: 12px; padding: 9px 1rem; border-bottom: 1px solid var(--yc-divider); flex-wrap: wrap; }
.yc-sh-issue:last-child { border-bottom: 0; }
.yc-sh-issue-kind { width: 110px; flex: none; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #b45309; }
.yc-sh-issue-text { flex: 1 1 240px; min-width: 200px; font-size: 13.5px; }
.yc-sh-issue-eff { flex: none; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

/* Righe */
.yc-sh-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--yc-divider); }
.yc-sh-rname { flex: 1 1 190px; min-width: 150px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--yc-text); }
.yc-sh-rname:hover { color: var(--yc-primary-700); text-decoration: underline; }
.yc-sh-rmid { flex: 1 1 170px; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-sh-rsmall { width: 104px; flex: none; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-sh-empty { padding: 1rem 4px; font-size: 13px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

/* Pannello filtri a scomparsa */
.yc-apt-panel { display: none; flex-direction: column; gap: 8px; padding: 8px 0 .75rem; }
.yc-apt-panel.is-open { display: flex; }
.yc-apt-frow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.yc-apt-flabel {
    width: 52px;
    flex: none;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--yc-text) 50%, transparent);
}
.yc-apt-dash { font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-apt-date { width: 148px; }

/* Chip filtro (stato, periodo, medico selezionato) */
.yc-apt-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: 12.5px;
    line-height: 1.3;
    cursor: pointer;
    border: 1px solid var(--yc-border);
    border-radius: var(--yc-border-radius-sm, 6px);
    background: var(--yc-bg-card);
    color: var(--yc-gray-700);
    user-select: none;
    transition: background .12s ease, border-color .12s ease;
}
.yc-apt-chip:hover { border-color: var(--yc-primary-300, #7cc9c1); }
.yc-apt-chip--on {
    border-color: var(--yc-primary);
    background: color-mix(in srgb, var(--yc-primary) 12%, #fff);
    color: var(--yc-primary-700);
    font-weight: var(--yc-font-weight-medium);
}
.yc-apt-chip input { margin: 0; }
.yc-apt-chips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Dropdown medici (ricercabile) */
.yc-apt-docwrap { position: relative; }
.yc-apt-docbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    font-size: 12.5px;
    cursor: pointer;
    border: 1px solid var(--yc-border);
    border-radius: var(--yc-border-radius-sm, 6px);
    background: var(--yc-bg-card);
    color: var(--yc-gray-700);
}
.yc-apt-docbtn:hover { border-color: var(--yc-primary-300, #7cc9c1); }
.yc-apt-docmenu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    width: 272px;
    background: #fff;
    border: 1px solid var(--yc-text);
    border-radius: var(--yc-border-radius-sm, 6px);
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    overflow: hidden;
}
.yc-apt-docsearch { padding: 7px; border-bottom: 1px solid var(--yc-border); }
.yc-apt-doclist { max-height: 216px; overflow: auto; }
.yc-apt-docitem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 9px;
    font-size: 12.5px;
    cursor: pointer;
}
.yc-apt-docitem:hover { background: var(--yc-bg-subtle, #eae9e9); }
.yc-apt-docname { flex: 1; }
.yc-apt-docspec {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--yc-text) 45%, transparent);
}
.yc-apt-docempty { padding: 12px 9px; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }
.yc-apt-docfoot { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-top: 1px solid var(--yc-border); }

/* Riga cliccabile (data-row-href) */
.yc-row-clickable { cursor: pointer; }

/* Tabella in aggiornamento AJAX (filtri): leggera dissolvenza, non-interattiva. */
#apt-table-region.is-loading { opacity: .55; pointer-events: none; transition: opacity .12s ease; }

/* ══ Dettaglio appuntamento — come il mockup ════════════════════════════════ */
.yc-apt-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; text-decoration: none;
    color: color-mix(in srgb, var(--yc-text) 55%, transparent);
}
.yc-apt-back:hover { color: var(--yc-primary-700); }
.yc-apt-detail { max-width: 100%; }

/* Header: nome paziente + badge + codice, azioni a destra */
.yc-apt-dhead {
    display: flex; align-items: flex-end; gap: var(--yc-space-6, 24px);
    flex-wrap: wrap; padding: .5rem 0 1rem;
}
.yc-apt-dhead__t { flex: 1 1 320px; min-width: 0; }
.yc-apt-dtitle { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.yc-apt-dtitle h1 { margin: 0; font-size: 34px; line-height: 1.05; font-weight: 800; }
.yc-apt-dcode {
    font-size: 12.5px; margin-top: 6px; font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--yc-text) 50%, transparent);
}
.yc-apt-dactions { display: flex; gap: .5rem; flex: none; flex-wrap: wrap; }

/* Fascia riepilogo: Quando · Prestazione · Dove · Importo, bordi 2px */
.yc-apt-strip {
    display: flex; align-items: baseline; gap: 24px 32px; flex-wrap: wrap;
    padding: 1rem 0;
    border-top: 2px solid var(--yc-border-strong);
    border-bottom: 2px solid var(--yc-border-strong);
}
.yc-apt-strip__col { flex: 0 0 auto; }
.yc-apt-strip__col--grow { flex: 1 1 200px; min-width: 0; }
.yc-apt-strip__col--amount { text-align: right; }
.yc-apt-strip__lbl {
    font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
    font-weight: 600; color: color-mix(in srgb, var(--yc-text) 45%, transparent);
}
.yc-apt-strip__lbl--accent { color: var(--yc-primary-700); }
.yc-apt-strip__when { display: flex; align-items: baseline; gap: 10px; margin-top: 3px; }
.yc-apt-strip__time { font-family: var(--yc-font-sans); font-weight: 800; font-size: 26px; line-height: 1; }
.yc-apt-strip__dur { font-size: 14px; color: color-mix(in srgb, var(--yc-text) 62%, transparent); }
.yc-apt-strip__date { font-size: 13.5px; margin-top: 4px; }
.yc-apt-strip__svc { font-size: 17px; font-weight: 600; margin-top: 5px; }
.yc-apt-strip__where { font-size: 15px; font-weight: 600; margin-top: 5px; }
.yc-apt-strip__amount { font-family: var(--yc-font-sans); font-weight: 800; font-size: 22px; margin-top: 4px; }
.yc-apt-strip__sub { font-size: 13px; margin-top: 3px; color: color-mix(in srgb, var(--yc-text) 60%, transparent); }

/* Due colonne */
.yc-apt-cols {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
    margin-top: 1.5rem;
}
@media (max-width: 900px) { .yc-apt-cols { grid-template-columns: 1fr; gap: 24px; } }
.yc-apt-col { min-width: 0; }

/* Intestazione di sezione: titolo + regola 2px */
.yc-apt-sec {
    display: flex; align-items: baseline; gap: .75rem;
    padding-bottom: .5rem; border-bottom: 2px solid var(--yc-border-strong);
}
.yc-apt-sec--mt { margin-top: 1.5rem; }
.yc-apt-sec h5 { margin: 0; font-size: 16px; flex: 1 1 auto; }
.yc-apt-sec__hint { font-size: 11.5px; color: color-mix(in srgb, var(--yc-text) 45%, transparent); }
.yc-apt-sec--lock i { font-size: 13px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-apt-sec--lock h5 { flex: 1 1 auto; }
.yc-apt-sec__note { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--yc-text) 45%, transparent); }

/* Righe prestazione */
.yc-apt-srow {
    display: flex; align-items: baseline; gap: .75rem;
    padding: 9px 2px; border-bottom: 1px solid var(--yc-border);
}
.yc-apt-srow__name { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.yc-apt-srow__dur { flex: none; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 45%, transparent); }
.yc-apt-srow__price { width: 70px; flex: none; text-align: right; font-size: 14px; }
.yc-apt-srow--total { border-bottom: 0; padding-top: 10px; }
.yc-apt-srow--total .yc-apt-srow__name {
    font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase;
    font-weight: 600; color: color-mix(in srgb, var(--yc-text) 50%, transparent);
}
.yc-apt-srow--total .yc-apt-srow__price { font-family: var(--yc-font-sans); font-weight: 800; font-size: 17px; }
.yc-apt-generic {
    font-size: 12px; margin-top: 8px; padding: 8px 10px;
    background: var(--yc-bg-subtle); border-left: 2px solid var(--yc-border);
    color: color-mix(in srgb, var(--yc-text) 62%, transparent);
}

/* Righe chiave/valore (dettaglio appuntamento — box Paziente).
   Classe DEDICATA (.yc-apt-kv): prima riusava .yc-apt-frow, ma quel nome è già
   il pannello filtri (Medici/Stato/Periodo) → il border-bottom/padding qui
   sotto "sporcava" anche la toolbar filtri (righe alte, linee divisorie). */
.yc-apt-kv {
    display: flex; align-items: baseline; gap: .75rem;
    padding: 9px 2px; border-bottom: 1px solid var(--yc-border);
}
.yc-apt-kv__k { width: 120px; flex: none; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }
.yc-apt-kv__v { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--yc-text); text-decoration: none; }
.yc-apt-kv__v--link { font-weight: 600; color: var(--yc-primary-700); }
.yc-apt-kv__v:hover { text-decoration: underline; }

/* Nota + note interne */
.yc-apt-note { margin: .75rem 2px 0; font-size: 14px; line-height: 1.6; }
.yc-apt-internal {
    margin: .75rem 0 0; padding: 10px 12px; font-size: 14px; line-height: 1.6;
    background: var(--yc-bg-subtle); border-left: 2px solid var(--yc-text);
}

/* Cronologia (timeline) */
.yc-apt-log {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: 9px 2px; border-bottom: 1px solid var(--yc-border);
}
.yc-apt-log__when {
    width: 96px; flex: none; font-size: 11.5px; padding-top: 2px;
    color: color-mix(in srgb, var(--yc-text) 45%, transparent);
}
.yc-apt-log__body { flex: 1 1 auto; min-width: 0; }
.yc-apt-log__what { font-size: 13.5px; line-height: 1.4; }
.yc-apt-log__who { font-size: 11.5px; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }
.yc-apt-log__empty { padding: 12px 2px; font-size: 13px; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }

/* Esito */
.yc-apt-outcome { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.yc-apt-outcome__none {
    margin-top: .75rem; font-size: 13px; line-height: 1.5;
    color: color-mix(in srgb, var(--yc-text) 55%, transparent);
}

/* ══ Modale Import appuntamenti (3 passi) — come il mockup ═══════════════════ */
.yc-imp-overlay {
    position: fixed; inset: 0; z-index: 1060;
    background: rgba(30,41,59,.55);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 2rem 1rem; overflow-y: auto;
}
.yc-imp-overlay[hidden] { display: none; }
.yc-imp-modal {
    width: 100%; max-width: 660px;
    background: var(--yc-bg-card);
    border-radius: var(--yc-border-radius-lg);
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
    overflow: hidden;
}
.yc-imp-head {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: 1rem 1rem .75rem; border-bottom: 1px solid var(--yc-border);
}
.yc-imp-head__t { flex: 1 1 auto; }
.yc-imp-head h5 { margin: 0; font-size: 17px; }
/* Chiusura: grande e visibile (prima si perdeva come btn-link piccolo). */
.yc-imp-close {
    flex: none;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; margin: -4px -4px 0 0;
    font-size: 26px; line-height: 1;
    border: 0; border-radius: var(--yc-border-radius-sm, 6px);
    background: transparent;
    color: color-mix(in srgb, var(--yc-text) 55%, transparent);
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.yc-imp-close:hover {
    background: color-mix(in srgb, var(--yc-text) 8%, transparent);
    color: var(--yc-text);
}
.yc-imp-head__sub { font-size: 12.5px; margin-top: 3px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

.yc-imp-steps { display: flex; gap: 4px; padding: .75rem 1rem 0; }
.yc-imp-step { flex: 1; padding-top: 6px; border-top: 3px solid var(--yc-border); }
.yc-imp-step.is-active { border-top-color: var(--yc-primary); }
.yc-imp-step.is-done   { border-top-color: var(--yc-primary-300, #7cc9c1); }
.yc-imp-step__num {
    font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: color-mix(in srgb, var(--yc-text) 45%, transparent);
}
.yc-imp-step.is-active .yc-imp-step__num { color: var(--yc-primary-700); }
.yc-imp-step__label { font-size: 13px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-imp-step.is-active .yc-imp-step__label { font-weight: var(--yc-font-weight-semibold); color: var(--yc-text); }

.yc-imp-body { padding: 1rem; }
.yc-imp-p { margin: 0 0 .75rem; font-size: 13.5px; line-height: 1.6; color: color-mix(in srgb, var(--yc-text) 70%, transparent); }
.yc-imp-tpl {
    display: flex; align-items: center; gap: .75rem;
    padding: 12px; border-left: 2px solid var(--yc-primary);
    background: var(--yc-primary-50);
}
.yc-imp-tpl__name { font-size: 13.5px; font-weight: var(--yc-font-weight-semibold); }
.yc-imp-tpl__meta { font-size: 12px; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }
.yc-imp-tpl > div:first-child { flex: 1 1 auto; }

.yc-imp-cols { margin-top: 1rem; }
.yc-imp-cols__t {
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
    color: color-mix(in srgb, var(--yc-text) 55%, transparent); margin-bottom: 4px;
}
.yc-imp-col {
    display: flex; align-items: baseline; gap: .75rem;
    padding: 5px 2px; border-bottom: 1px solid var(--yc-border);
}
.yc-imp-col__name { width: 150px; flex: none; font-size: 12.5px; font-weight: var(--yc-font-weight-medium); }
.yc-imp-col__hint { flex: 1 1 auto; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-imp-col__req  { flex: none; font-size: 11px; color: color-mix(in srgb, var(--yc-text) 45%, transparent); }
.yc-imp-col__req.is-req { color: var(--yc-primary-700); }

.yc-imp-drop {
    display: block; text-align: center; cursor: pointer;
    padding: 1.5rem; border: 2px dashed color-mix(in srgb, var(--yc-text) 18%, transparent);
    border-radius: var(--yc-border-radius);
}
.yc-imp-drop.is-over { border-color: var(--yc-primary); background: var(--yc-primary-50); }
.yc-imp-drop__t { font-size: 14px; font-weight: var(--yc-font-weight-semibold); }
.yc-imp-drop__or { font-size: 12.5px; margin: 3px 0 8px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

.yc-imp-file {
    display: flex; align-items: center; gap: .75rem;
    padding: 10px 2px; margin-top: .75rem; border-bottom: 1px solid var(--yc-border);
}
.yc-imp-file > div:first-child { flex: 1 1 auto; }
.yc-imp-file__name { font-size: 13.5px; font-weight: var(--yc-font-weight-semibold); }
.yc-imp-file__meta { font-size: 12px; color: color-mix(in srgb, var(--yc-text) 50%, transparent); font-variant-numeric: tabular-nums; }

.yc-imp-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border: 2px solid var(--yc-border); border-radius: var(--yc-border-radius); overflow: hidden;
}
.yc-imp-stat { padding: 12px 14px; }
.yc-imp-stat + .yc-imp-stat { border-left: 2px solid var(--yc-border); }
.yc-imp-stat__n { font-family: var(--yc-font-sans); font-weight: 800; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.yc-imp-stat__l { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

.yc-imp-errlist { margin-top: 1rem; max-height: 240px; overflow: auto; }
.yc-imp-err { display: flex; gap: .5rem; padding: 5px 2px; font-size: 12.5px; border-bottom: 1px solid var(--yc-border); }
.yc-imp-err__n { flex: none; font-weight: var(--yc-font-weight-semibold); width: 64px; }
.yc-imp-err__p { flex: 1 1 auto; color: color-mix(in srgb, var(--yc-text) 60%, transparent); }
.yc-imp-err__e { flex: none; color: var(--yc-danger, #b42318); }
.yc-imp-ok { padding: 12px 2px; font-size: 13px; color: var(--yc-primary-700); }

.yc-imp-check { display: flex; align-items: center; gap: .45rem; font-size: 13px; margin-top: 1rem; cursor: pointer; }
.yc-imp-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

/* ══ Pannello Sposta appuntamento — come il mockup ══════════════════════════ */
.yc-mv-overlay {
    position: fixed; inset: 0; z-index: 1065;
    background: rgba(32,30,29,.55);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 2rem 1rem; overflow-y: auto;
}
.yc-mv-overlay[hidden] { display: none; }
.yc-mv-modal {
    width: 100%; max-width: 620px;
    background: var(--yc-bg-card);
    border-radius: var(--yc-border-radius-lg);
    box-shadow: var(--yc-shadow-lg);
    overflow: hidden;
}
.yc-mv-head {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: 1rem; border-bottom: 2px solid var(--yc-border-strong);
}
.yc-mv-head__t { flex: 1 1 auto; min-width: 0; }
.yc-mv-head h5 { margin: 0; font-size: 17px; }
.yc-mv-head__sub { font-size: 12.5px; margin-top: 3px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-mv-current {
    display: flex; align-items: baseline; gap: .75rem;
    padding: .75rem 1rem; border-bottom: 1px solid var(--yc-border); font-size: 13.5px;
}
.yc-mv-current__lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }
.yc-mv-body { padding: 1rem; }
.yc-mv-lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }

.yc-mv-days { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.yc-mv-day {
    width: 46px; padding: 5px 0; text-align: center; cursor: pointer;
    border: 1px solid var(--yc-border); border-radius: var(--yc-border-radius-sm, 6px);
    background: var(--yc-bg-card); color: var(--yc-text);
}
.yc-mv-day:hover:not(.is-off) { border-color: var(--yc-primary-300, #7cc9c1); }
.yc-mv-day.is-active { background: var(--yc-primary); border-color: var(--yc-primary); color: #fff; }
.yc-mv-day.is-off { opacity: .4; cursor: not-allowed; }
.yc-mv-day__n { display: block; font-size: 13px; font-weight: 600; }
.yc-mv-day__c { display: block; font-size: 10px; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }
.yc-mv-day.is-active .yc-mv-day__c { color: rgba(255,255,255,.8); }

.yc-mv-slotshead { display: flex; align-items: baseline; gap: .5rem; margin-top: 1rem; }
.yc-mv-slothint { font-size: 12px; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }
.yc-mv-slots { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.yc-mv-slot {
    padding: 5px 10px; font-size: 13px; cursor: pointer;
    border: 1px solid var(--yc-border); border-radius: var(--yc-border-radius-sm, 6px);
    background: var(--yc-bg-card); color: var(--yc-text);
}
.yc-mv-slot:hover { border-color: var(--yc-primary-300, #7cc9c1); }
.yc-mv-slot.is-active { background: var(--yc-primary); border-color: var(--yc-primary); color: #fff; }
.yc-mv-slots__hint, .yc-mv-loading { font-size: 13px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); padding: 4px 0; }

.yc-mv-notify {
    display: flex; align-items: flex-start; gap: 8px;
    margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--yc-border);
    font-size: 13.5px; cursor: pointer;
}
.yc-mv-notify input { margin-top: 3px; }
.yc-mv-notify__hint { display: block; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

.yc-mv-foot {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding: .75rem 1rem; border-top: 2px solid var(--yc-border-strong);
}
.yc-mv-summary { flex: 1 1 auto; min-width: 0; font-size: 13px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-mv-summary.is-ready { color: var(--yc-primary-700); font-weight: var(--yc-font-weight-medium); }

/* ══ Wizard prenotazione (Nuovo/Modifica) — come il mockup ══════════════════ */
/* Full width: riempie il contenitore (il tetto ~1600px è su .yc-content). */
.yc-wz { max-width: 100%; }
.yc-wz-back { display: inline-block; font-size: 13px; color: var(--yc-primary-700); text-decoration: none; }
.yc-wz-back:hover { text-decoration: underline; }
.yc-wz-editband {
    display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
    margin-top: .75rem; padding: 10px 12px;
    /* Grigio caldo coerente col fondo pagina (il gray-100 era freddo e stonava). */
    background: var(--yc-bg-subtle); border-left: 2px solid var(--yc-text);
}
.yc-wz-editband__t { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.yc-wz-editband__h { font-size: 13px; color: color-mix(in srgb, var(--yc-text) 70%, transparent); font-variant-numeric: tabular-nums; }
.yc-wz-editband__hint { margin-left: auto; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

/* Barra passi */
.yc-wz-steps { display: flex; gap: 4px; margin: .75rem 0 1.5rem; }
.yc-wz-step { flex: 1; padding-top: .5rem; border-top: 3px solid var(--yc-border); }
.yc-wz-step.is-active { border-top-color: var(--yc-primary); }
.yc-wz-step.is-done { border-top-color: var(--yc-primary-300, #7cc9c1); }
.yc-wz-step__num { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--yc-text) 45%, transparent); }
.yc-wz-step.is-active .yc-wz-step__num { color: var(--yc-primary-700); }
.yc-wz-step__label { font-size: 14px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); margin-top: 2px; }
.yc-wz-step.is-active .yc-wz-step__label { font-weight: var(--yc-font-weight-semibold); color: var(--yc-text); }

/* Sezioni passo */
/* Divisore sezione = --yc-divider (grigio caldo Modernist), come il mockup. */
.yc-wz-sec { border-bottom: 1px solid var(--yc-divider); padding: 1rem 0; }
.yc-wz-sec h5 { margin: 0 0 .75rem; font-size: 16px; }
.yc-wz-locked { padding: .5rem; font-size: 14px; color: color-mix(in srgb, var(--yc-text) 40%, transparent); }
.yc-wz-chosenrow { display: flex; align-items: center; gap: .75rem; padding: .5rem; }
.yc-wz-chosenrow__k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; width: 88px; flex: none; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-wz-chosenrow__v { flex: 1 1 auto; font-size: 14px; }
.yc-wz-muted { color: color-mix(in srgb, var(--yc-text) 55%, transparent); font-size: 12px; }

/* Passo 1 */
.yc-wz-psearch { max-width: 420px; }
.yc-wz-pmatches { margin-top: .75rem; }
.yc-wz-pmatch { display: flex; align-items: center; gap: .75rem; padding: .5rem; border-bottom: 1px solid var(--yc-border); cursor: pointer; }
.yc-wz-pmatch:hover { background: color-mix(in srgb, var(--yc-text) 3%, transparent); }
.yc-wz-pmatch__t { flex: 1 1 auto; min-width: 0; }
.yc-wz-pmatch__m { font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-wz-newpat { margin-top: .5rem; }
.yc-wz-newpatform { margin-top: .75rem; padding: .75rem; background: var(--yc-bg-subtle); border-radius: var(--yc-border-radius-sm, 6px); }
.yc-wz-npgrid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; align-items: end; }
.yc-wz-npdob { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.yc-wz-npdob > span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-wz-npactions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }

/* Passo 2 — righe/etichette */
.yc-wz-row { display: flex; align-items: center; gap: .5rem; }
.yc-wz-row--mt { margin-top: 1.5rem; }
/* Intestazione di sotto-sezione con regola sotto (come il mockup). */
.yc-wz-row--head { padding-bottom: .5rem; border-bottom: 1px solid var(--yc-divider); }
.yc-wz-lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-wz-picked { margin-left: auto; font-size: 12.5px; color: var(--yc-primary-700); font-variant-numeric: tabular-nums; }

/* Chip prestazioni */
.yc-wz-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.yc-wz-chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: 6px 10px; cursor: pointer;
    border: 1.5px solid var(--yc-primary); border-radius: var(--yc-border-radius-sm, 6px);
    background: var(--yc-primary-50); color: var(--yc-primary-800); font-size: 13px; font-weight: 600;
}
.yc-wz-chip__m { font-size: 11.5px; color: var(--yc-primary-700); font-variant-numeric: tabular-nums; }

/* Catalogo */
.yc-wz-svcsearch { max-width: 720px; margin-top: .75rem; }
.yc-wz-svcmode { margin-top: .5rem; }
.yc-wz-catalog { margin-top: .75rem; max-width: 900px; border-top: 1px solid var(--yc-border); }
/* Prestazione generica (fuori catalogo) */
.yc-wz-generic { margin-top: .75rem; max-width: 720px; padding: 12px 14px; background: var(--yc-bg-subtle); border-radius: var(--yc-border-radius-sm, 6px); }
.yc-wz-generic__note { font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 62%, transparent); }
.yc-wz-generic__grid { display: grid; grid-template-columns: 1fr auto; gap: 1rem; margin-top: .75rem; align-items: start; }
.yc-wz-generic__min { margin-top: .75rem; }
.yc-wz-durchips { display: flex; gap: 4px; margin-top: 4px; }
.yc-wz-durchips .yc-wz-chip { padding: 5px 11px; }
.yc-wz-durchips .yc-wz-chip.is-on { border-color: var(--yc-primary); background: var(--yc-primary); color: #fff; }
.yc-wz-cat { border-bottom: 1px solid var(--yc-border); }
/* Header specialità: button accordion (chiuso di default), come il mockup. */
.yc-wz-cat__h {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: 8px .5rem; border: 0; background: transparent; cursor: pointer; text-align: left;
}
.yc-wz-cat__h:hover { background: color-mix(in srgb, var(--yc-text) 3%, transparent); }
.yc-wz-cat__h i { font-size: .68rem; width: 12px; flex: none; color: color-mix(in srgb, var(--yc-text) 45%, transparent); }
.yc-wz-cat__n { font-size: 13.5px; font-weight: 600; }
.yc-wz-cat__c { font-size: 12px; color: color-mix(in srgb, var(--yc-text) 45%, transparent); font-variant-numeric: tabular-nums; }
.yc-wz-cat__sel { margin-left: auto; font-size: 11.5px; color: var(--yc-primary-700); }
.yc-wz-svc { display: flex; align-items: center; gap: .75rem; padding: 6px .5rem 6px 26px; border-top: 1px solid var(--yc-border); cursor: pointer; }
.yc-wz-svc:hover { background: color-mix(in srgb, var(--yc-text) 3%, transparent); }
.yc-wz-svc.is-on { background: var(--yc-primary-50); }
.yc-wz-svc__m { width: 13px; flex: none; font-size: 11px; color: var(--yc-primary); }
.yc-wz-svc__n { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yc-wz-svc.is-on .yc-wz-svc__n { font-weight: 600; }
.yc-wz-svc__sp { flex: none; font-size: 11.5px; color: color-mix(in srgb, var(--yc-text) 45%, transparent); }
.yc-wz-svc__d { width: 56px; flex: none; text-align: right; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); font-variant-numeric: tabular-nums; }
.yc-wz-svc__p { width: 64px; flex: none; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }

/* Medico */
.yc-wz-docmode { margin-top: .5rem; }
.yc-wz-docpick { max-width: 900px; margin-top: .75rem; }
.yc-wz-doclist { margin-top: .75rem; max-height: 246px; overflow-y: auto; border-top: 1px solid var(--yc-border); }
.yc-wz-doc { display: flex; align-items: center; gap: .6rem; padding: 7px .5rem; border-bottom: 1px solid var(--yc-border); cursor: pointer; }
.yc-wz-doc:hover { background: color-mix(in srgb, var(--yc-text) 3%, transparent); }
.yc-wz-doc.is-on { background: var(--yc-primary-50); }
.yc-wz-doc.is-on .yc-wz-svc__n { font-weight: 600; }
/* Pallino colore del medico (nel chip e nella riga). */
.yc-wz-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.yc-wz-doc__room { flex: none; font-size: 11.5px; color: color-mix(in srgb, var(--yc-text) 45%, transparent); }
/* Chip medico: eredita .yc-wz-chip; il pallino sta a sinistra del nome. */
.yc-wz-chip .yc-wz-dot { margin-right: 1px; }

/* Warning combinazione */
.yc-wz-warn { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .85rem; margin-top: .75rem; max-width: 560px; background: #fdf6e7; border: 1px solid #f3ddaf; border-radius: var(--yc-border-radius-sm, 6px); font-size: 12.5px; }
.yc-wz-warn i { color: #b45309; margin-top: 1px; }

/* Calendario giorni */
.yc-wz-firstfree { font-size: 12.5px; color: var(--yc-primary-700); }
.yc-wz-monthnav { margin-left: auto; display: flex; align-items: center; gap: .5rem; font-size: 13px; font-weight: 600; }
.yc-wz-monthnav span { min-width: 104px; text-align: center; }
/* Calendario giorni: vera griglia settimanale (Lun→Dom), come il mockup. */
.yc-wz-days {
    display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 6px;
    margin-top: .75rem; max-width: 900px;
}
/* Ricalcolo (giorni/catalogo/medici): dissolvenza invece di svuotare (niente salto). */
.yc-wz-days.is-loading, .yc-wz-catalog.is-loading, .yc-wz-doclist.is-loading {
    opacity: .5; pointer-events: none; transition: opacity .1s ease;
}
.yc-wz-wd {
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: color-mix(in srgb, var(--yc-text) 45%, transparent); padding-bottom: 2px;
}
.yc-wz-day {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 8px 9px; min-height: 52px; cursor: pointer; text-align: left;
    border: 1.5px solid var(--yc-border); border-radius: var(--yc-border-radius-sm, 6px);
    background: #fff; color: var(--yc-text);
}
.yc-wz-day--pad { border: 0; background: transparent; min-height: 0; pointer-events: none; }
.yc-wz-day:hover:not(.is-off):not(.yc-wz-day--pad) { border-color: var(--yc-primary-300, #7cc9c1); }
.yc-wz-day.is-active { background: var(--yc-primary); border-color: var(--yc-primary); color: #fff; }
.yc-wz-day.is-off { background: var(--yc-bg-subtle); color: color-mix(in srgb, var(--yc-text) 40%, transparent); cursor: not-allowed; }
.yc-wz-day__n { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
/* Conteggio orari liberi in teal (come il mockup); gli off restano grigi. */
.yc-wz-day__c { font-size: 11px; color: var(--yc-primary-700); }
.yc-wz-day.is-off .yc-wz-day__c { color: color-mix(in srgb, var(--yc-text) 40%, transparent); }
.yc-wz-day.is-active .yc-wz-day__c { color: rgba(255,255,255,.85); }

/* Orari */
.yc-wz-slothint { font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-wz-slots { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.yc-wz-slot {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 11px; cursor: pointer;
    border: 1.5px solid var(--yc-border); border-radius: var(--yc-border-radius-sm, 6px);
    background: var(--yc-bg-card); color: var(--yc-text); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.yc-wz-slot:hover { border-color: var(--yc-primary-300, #7cc9c1); }
.yc-wz-slot.is-active { background: var(--yc-primary); border-color: var(--yc-primary); color: #fff; }
.yc-wz-slot__d { font-size: 11px; font-weight: 400; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-wz-slot.is-active .yc-wz-slot__d { color: rgba(255,255,255,.85); }
.yc-wz-continue { margin-top: 1.5rem; padding: 8px 18px; font-size: 14px; }

/* Passo 3 — recap + opzioni */
.yc-wz-recap { border: 2px solid var(--yc-divider); border-radius: var(--yc-border-radius); padding: 1rem; max-width: 520px; }
.yc-wz-recap__r { display: flex; align-items: baseline; gap: .75rem; padding: 5px 0; }
.yc-wz-recap__k { width: 104px; flex: none; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-wz-recap__v { flex: 1 1 auto; font-size: 14px; font-variant-numeric: tabular-nums; }
.yc-wz-opts { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; font-size: 13.5px; }
.yc-wz-opts label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
/* Checkbox del wizard: accent teal, un filo più grandi (come il mockup). */
.yc-wz-opts input[type="checkbox"],
.yc-wz-generic input[type="checkbox"],
.yc-wz-newpatform input[type="checkbox"] {
    width: 15px; height: 15px; accent-color: var(--yc-primary); cursor: pointer;
}
.yc-wz-notes { max-width: 520px; margin-top: 1rem; min-height: 64px; }
.yc-wz-save { display: flex; gap: .5rem; margin-top: 1rem; }
.yc-wz-loading, .yc-wz-empty { padding: .5rem; font-size: 13px; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }

/* ══ Dropdown notifiche — stesso stile del dropdown profilo (Bootstrap) ═════ */
/* Come .dropdown-menu del profilo: stesso fondo (grigio caldo, ereditato da
   --bs-body-bg = --yc-bg-light), niente bordo, ombra, radius Bootstrap. */
.yc-notif-dropdown {
    right: 0;
    width: 400px;
    max-width: calc(100vw - 32px);
    background: var(--yc-bg-light);
    border: 0;
    border-radius: var(--bs-border-radius, .5rem);
    box-shadow: var(--yc-shadow-lg);
}
/* niente freccetta */
.yc-notif-dropdown__arrow { display: none; }
/* Header: separatore inferiore leggero, titolo 15px */
.yc-notif-dropdown__header {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--yc-border);
    align-items: baseline;
}
.yc-notif-dropdown__header h3 { font-size: 15px; }
.yc-notif-dropdown__list { background: var(--yc-bg-light); }
/* Footer: regola superiore leggera, allineato a sinistra */
.yc-notif-dropdown__footer {
    border-top: 1px solid var(--yc-border);
    background: var(--yc-bg-light);
    text-align: left;
    padding: .5rem 1rem;
}

/* ══ Dropdown notifiche — sezioni + azione per riga (come il mockup) ══════ */

/* Intestazione di sezione: "Da gestire 4" / "Per conoscenza 2" */
.yc-notif-section {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .875rem .25rem;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--yc-text-muted);
    background: var(--yc-bg-light);
}
.yc-notif-section span {
    font-variant-numeric: tabular-nums;
    color: var(--yc-primary-700, #096a60);
}
/* Riga notifica: separatore in alto (non in basso), sfondo bianco, hover tenue */
.yc-notif-item {
    padding: 10px 1rem;
    border-bottom: 0;
    border-top: 1px solid var(--yc-border);
}
.yc-notif-item:hover { background: color-mix(in srgb, var(--yc-text) 3%, transparent); }
.yc-notif-item--unread { background: var(--yc-primary-50, #f0fdfa); }
.yc-notif-item--unread:hover { background: var(--yc-primary-100, #ccfbf1); }
/* pallino 7px come il mockup */
.yc-notif-item__dot { width: 7px; height: 7px; margin-top: 6px; }
/* Riga: meta = azione + tempo sulla stessa riga */
.yc-notif-item__meta {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-top: 3px;
}
.yc-notif-item__link {
    font-size: .78rem;
    font-weight: 600;
    color: var(--yc-primary-700, #096a60);
    text-decoration: none;
    flex: 1 1 auto;
}
.yc-notif-item__link:hover { text-decoration: underline; }
/* "Segna tutte lette" testuale nell'header — mai a capo, larghezza automatica */
.yc-notif-readall {
    border: 0;
    background: none;
    color: var(--yc-primary);
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    width: auto;
    height: auto;
    white-space: nowrap;
    flex: none;
}
.yc-notif-readall:hover { text-decoration: underline; }
/* Footer "Scegli quali avvisi ricevere" */
.yc-notif-prefs {
    color: var(--yc-text-muted);
    font-size: .8rem;
    text-decoration: none;
}
.yc-notif-prefs:hover { color: var(--yc-primary); }

/* ══ Righe interattive (.row-h) + azioni a comparsa (.act) come il mockup ══ */
/* La riga si evidenzia all'hover; le azioni partono tenui (.4) e diventano piene
   quando il mouse è sulla riga — meno rumore visivo quando non servono. */
.row-h:hover {
    background: color-mix(in srgb, var(--yc-text) 4%, transparent);
}
.act {
    opacity: .45;
    transition: opacity .12s ease;
}
.row-h:hover .act,
.act:focus-within {
    opacity: 1;
}

/* ══ Layout a due colonne (come .two-col del mockup) ══════════════════════ */
/* Flusso 1.5fr / Da gestire 1fr, gap 24px, allineati in alto. Collassa a 1100px. */
.yc-two-col {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-6, 24px);
    align-items: start;
}
@media (max-width: 1100px) {
    .yc-two-col { grid-template-columns: minmax(0, 1fr); }
}

/* ══ KPI cards (renderKpiCards) ═══════════════════════════════════════════ */

.yc-kpi {
    display: grid;
    gap: 0;
    background: transparent;          /* come il mockup: sfondo grigio pagina, non bianco */
    /* 2px, colore --color-divider ESATTO del mockup: #201e1d al 40% (grigio caldo
       medio, non il blu-nero di --yc-text che risultava troppo scuro). */
    border: 2px solid var(--yc-divider);
    border-radius: var(--yc-border-radius-lg);
    overflow: hidden;
    margin-bottom: 1.5rem;            /* 24px come il mockup (--space-6) */
}
.yc-kpi__cell {
    padding: .75rem 1rem;             /* 12px 16px come il mockup */
}
/* La separazione tra celle è la barra colorata border-left applicata per-cella
   nel PHP (edge di stato); nessun divisore grigio aggiuntivo qui. */
.yc-kpi__value {
    font-family: var(--yc-font-sans);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--yc-text);
}
.yc-kpi__value--accent { color: var(--yc-primary); }
.yc-kpi__label {
    font-size: var(--yc-label-size, .7rem);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--yc-text-muted);
    margin-top: .4rem;
}
.yc-kpi__bar {
    height: 6px;
    background: color-mix(in srgb, var(--yc-text) 8%, transparent);
    border-radius: 999px;
    margin-top: .5rem;
    overflow: hidden;
}
.yc-kpi__bar > span {
    display: block;
    height: 100%;
    background: var(--yc-primary);
    border-radius: 999px;
}
.yc-kpi__note {
    font-size: var(--yc-font-size-xs);
    color: var(--yc-warning-dark);
    margin-top: .35rem;
}
/* Su schermi stretti le card vanno a colonna singola */
@media (max-width: 767.98px) {
    .yc-kpi { grid-template-columns: 1fr !important; }
    .yc-kpi__cell + .yc-kpi__cell {
        border-left: 0;
        border-top: 1px solid var(--yc-border);
    }
}

/* ══ Stato vuoto ══════════════════════════════════════════════════════════ */

.yc-empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--yc-text-muted);
    background: var(--yc-bg-card);
    border: 1px solid var(--yc-border);
    border-radius: var(--yc-border-radius-lg);
}
.yc-empty-state i {
    display: block;
    font-size: 1.75rem;
    margin-bottom: .5rem;
    color: var(--yc-text-light);
}

/* ══ Calendario ═══════════════════════════════════════════════════════════ */

#yc-calendar { border-radius: var(--yc-border-radius-lg); }

.fc-event {
    border-radius: var(--yc-border-radius-sm) !important;
    font-size: var(--yc-font-size-xs) !important;
    padding: 2px 6px !important;
}
.fc .fc-col-header-cell-cushion,
.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion {
    font-size: var(--yc-font-size-xs);
    font-weight: var(--yc-font-weight-medium);
    color: var(--yc-text-muted);
    text-decoration: none;
}
.fc .fc-button-primary {
    background: var(--yc-bg-card);
    border-color: var(--yc-border-strong);
    color: var(--yc-gray-700);
    font-size: var(--yc-font-size-sm);
    font-weight: var(--yc-font-weight-medium);
    border-radius: var(--yc-border-radius);
}
.fc .fc-button-primary:not(:disabled):hover {
    background: var(--yc-gray-100);
    border-color: var(--yc-gray-400);
    color: var(--yc-text);
}
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--yc-primary);
    border-color: var(--yc-primary);
    color: #fff;
}

/* ══ Sidebar — solo ritocchi, la struttura resta quella di backend.css ════ */

.yc-sidebar .nav-link.active {
    background: rgba(var(--yc-primary-rgb), .22);
}
.yc-sidebar__nav { overflow-y: auto; }

/* ══ Sidebar — allineata al mockup del redesign (shell) ═══════════════════
   Struttura da backend.css; qui il look: nav item con barra accent a sinistra
   sull'attivo, hover sottile, badge accent, brand/utente più puliti. Colori dai
   token yoCare (teal), non dal rosso Modernist. */

.yc-sidebar__nav { overflow-y: auto; }

/* Voci di navigazione: più aria, indicatore a barra sinistra */
.yc-sidebar .nav-link {
    position: relative;
    border-left: 3px solid transparent;
    padding-top: .55rem;
    padding-bottom: .55rem;
    font-size: .875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .72);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.yc-sidebar .nav-link:hover {
    background: color-mix(in srgb, #ffffff 6%, transparent);
    color: #fff;
}
.yc-sidebar .nav-link i.bi {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    opacity: .9;
}
/* Attivo: barra accent a sinistra + fondo tinto (più netto del vecchio) */
.yc-sidebar .nav-link.active {
    background: color-mix(in srgb, var(--yc-primary) 26%, transparent);
    border-left-color: var(--yc-primary);
    color: #fff;
    font-weight: 600;
}
/* Badge conteggio (es. "6 da confermare") come pill accent tabulare */
.yc-sidebar .nav-link .badge,
.yc-sidebar .nav-link .yc-nav-badge {
    font-size: .7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--yc-primary);
    color: #fff;
    border-radius: 999px;
    padding: .05rem .4rem;
}

/* Brand: separatore sottile in fondo, allineamento pulito */
.yc-sidebar__brand {
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}
/* Blocco utente in fondo: avatar quadrato tinto, ruolo in maiuscoletto */
.yc-sidebar__user .yc-sidebar__text {
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .7rem;
    color: rgba(255, 255, 255, .5);
}

/* Badge "da gestire" sulla voce Appuntamenti in sidebar (da confermare + richieste web). */
.yc-sidebar__badge {
    margin-left: auto;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 19px; padding: 0 6px;
    border-radius: 999px;
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--yc-primary); color: #fff;
    line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Modale prenotazione calendario (.yc-bk-*) — redesign "Modale prenotazione".
 * Additivo. Riusa i token brand (--yc-primary, --yc-border, --yc-divider,
 * --yc-bg-card, radius). La modale e compatta (circa 460px) come nel mockup.
 * ════════════════════════════════════════════════════════════════════════ */
.yc-bk-modal .modal-dialog { max-width: 460px; }
.yc-bk-modal .modal-content { background: var(--yc-bg-card); }
.yc-bk-modal .modal-body { padding: 0 1rem 0; }
.yc-bk-modal .modal-header { padding: 1rem 1rem .5rem; }

/* Segmented control (Appuntamento / Blocco) */
.yc-bk-seg { display: inline-flex; width: 100%; overflow: hidden;
    border: 1px solid var(--yc-border); border-radius: var(--yc-border-radius-lg); margin-bottom: .75rem; }
.yc-bk-seg--sm { width: auto; }
.yc-bk-seg__opt { flex: 1 1 0; padding: .5rem .75rem; font-size: .8125rem; font-weight: 600;
    background: transparent; border: 0; color: var(--yc-text); cursor: pointer; line-height: 1.2; }
.yc-bk-seg__opt + .yc-bk-seg__opt { border-left: 1px solid var(--yc-border); }
.yc-bk-seg__opt.is-active { background: var(--yc-primary); color: #fff; }

/* Area scrollabile interna (contesto + campi) */
.yc-bk-scroll { max-height: 62vh; overflow-y: auto; padding-bottom: .25rem; }

/* Contesto (sola lettura) */
.yc-bk-ctx { border-radius: var(--yc-border-radius);
    background: color-mix(in srgb, var(--yc-text) 4%, transparent);
    padding: .625rem .75rem; margin-bottom: .75rem; }
.yc-bk-ctx__head { display: flex; justify-content: space-between; align-items: center;
    font-size: .6875rem; font-weight: 700; letter-spacing: .08em; color: var(--yc-text-muted); }
.yc-bk-ctx__rows { margin-top: .375rem; display: flex; flex-direction: column; gap: .25rem; }
.yc-bk-ctx__r { display: flex; align-items: baseline; gap: .5rem; font-size: .8125rem; }
.yc-bk-ctx__k { width: 74px; flex-shrink: 0; color: var(--yc-text-muted); }
.yc-bk-ctx__v { flex: 1 1 auto; font-weight: 600; color: var(--yc-text); }
.yc-bk-ctx__t { font-size: .6875rem; color: var(--yc-text-muted); font-style: italic; }
.yc-bk-ctx__edit { margin-top: .625rem; }

/* Banner fuori-turno (busy1) */
.yc-bk-banner { display: flex; gap: .5rem; padding: .625rem .75rem; margin-bottom: .75rem;
    border-radius: var(--yc-border-radius); background: #fdf6e7; border: 1px solid #f3ddaf;
    color: #78350f; font-size: .8125rem; }
.yc-bk-banner .bi { color: var(--yc-warning); flex-shrink: 0; margin-top: .125rem; }

/* Campo sede (busyN) */
.yc-bk-sede { border-left: 2px solid var(--yc-primary); padding-left: .625rem; margin-bottom: .75rem; }
.yc-bk-sublabel { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; color: var(--yc-text-muted);
    text-transform: uppercase; margin-bottom: .375rem; }
.yc-bk-sublabel span { text-transform: none; font-weight: 400; font-style: italic; margin-left: .25rem; }

/* Blocchi campi */
.yc-bk-block { padding: .5rem 0 .25rem; }
.yc-bk-field { display: block; margin-bottom: .75rem; }
.yc-bk-field > span, .yc-bk-lbl { display: block; font-size: .75rem; margin-bottom: .3125rem;
    color: var(--yc-text-muted); font-weight: 600; }
.yc-bk-field > span em, .yc-bk-lbl em { font-weight: 400; font-style: normal; color: var(--yc-text-muted); }
.yc-bk-input { width: 100%; min-height: 38px; padding: .4375rem .625rem; font-size: .875rem;
    color: var(--yc-text); background: #fff; border: 1px solid var(--yc-border);
    border-radius: var(--yc-border-radius); }
.yc-bk-input:focus-visible { outline: none; border-color: var(--yc-primary); box-shadow: var(--yc-focus-ring); }
.yc-bk-input.is-invalid { border-color: var(--yc-danger); }
.yc-bk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
.yc-bk-grid2 .yc-bk-field { margin-bottom: 0; }

.yc-bk-link { background: none; border: 0; color: var(--yc-primary); font-weight: 600;
    font-size: .8125rem; padding: 0; cursor: pointer; }
.yc-bk-link:hover { text-decoration: underline; }
.yc-bk-muted { color: var(--yc-text-muted); font-size: .8125rem; }

.yc-bk-pat-actions { display: flex; align-items: center; gap: .5rem; margin-top: .375rem; flex-wrap: wrap; }

/* Risultati ricerca (paziente) */
.yc-bk-results { position: absolute; z-index: 1065; left: 0; right: 0; margin-top: 2px;
    background: #fff; border: 1px solid var(--yc-border); border-radius: var(--yc-border-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 210px; overflow-y: auto; }
.yc-bk-result { display: block; width: 100%; text-align: left; padding: .5rem .625rem;
    background: none; border: 0; border-bottom: 1px solid var(--yc-divider); font-size: .8125rem;
    color: var(--yc-text); cursor: pointer; }
.yc-bk-result:last-child { border-bottom: 0; }
.yc-bk-result:hover { background: color-mix(in srgb, var(--yc-text) 4%, transparent); }

/* Nuovo paziente inline */
.yc-bk-newpat { border-left: 3px solid color-mix(in srgb, var(--yc-text) 25%, transparent);
    padding: .625rem .75rem; margin-bottom: .75rem;
    background: color-mix(in srgb, var(--yc-text) 3%, transparent); border-radius: var(--yc-border-radius); }
.yc-bk-newpat__head { display: flex; justify-content: space-between; align-items: center;
    font-size: .6875rem; font-weight: 700; letter-spacing: .06em; color: var(--yc-text-muted); margin-bottom: .5rem; }
.yc-bk-newpat .yc-bk-field { margin-top: .625rem; margin-bottom: 0; }
.yc-bk-newpat__actions { margin-top: .625rem; text-align: right; }

/* Checkbox */
.yc-bk-check { display: flex; align-items: center; gap: .4375rem; font-size: .8125rem;
    color: var(--yc-text); cursor: pointer; margin: .375rem 0; }
.yc-bk-check--sm { font-size: .75rem; margin-top: .375rem; }

/* Liste selezionabili (prestazioni, sedi) */
.yc-bk-svc-list { border: 1px solid var(--yc-border); border-radius: var(--yc-border-radius);
    margin-top: .375rem; max-height: 220px; overflow-y: auto; }
.yc-bk-pick { display: flex; align-items: center; gap: .5rem; padding: .4375rem .625rem;
    font-size: .8125rem; cursor: pointer; border-bottom: 1px solid var(--yc-divider); }
.yc-bk-pick:last-child { border-bottom: 0; }
.yc-bk-pick:hover { background: color-mix(in srgb, var(--yc-text) 4%, transparent); }
.yc-bk-pick.is-on { background: var(--yc-primary-50); }
.yc-bk-pick__m { width: 16px; flex-shrink: 0; color: var(--yc-primary); font-weight: 700; }
.yc-bk-pick__n { flex: 1 1 auto; color: var(--yc-text); }
.yc-bk-pick__d { color: var(--yc-text-muted); font-variant-numeric: tabular-nums; }
.yc-bk-pick__p { width: 54px; text-align: right; color: var(--yc-text-muted); font-variant-numeric: tabular-nums; }
.yc-bk-svc-div { height: 2px; background: var(--yc-border-strong); margin: 0; }
.yc-bk-svc-sum { font-weight: 400; color: var(--yc-primary-700); }

/* Intervallo calcolato (teal) */
.yc-bk-span { margin-top: .5rem; font-size: .8125rem; font-weight: 600; color: var(--yc-primary-700);
    font-variant-numeric: tabular-nums; min-height: 1em; }
.yc-bk-span.yc-bk-muted { font-weight: 400; color: var(--yc-text-muted); }
.yc-bk-overrun { margin-top: .375rem; font-size: .8125rem; color: #b45309; }

/* Durata pausa */
.yc-bk-durrow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.yc-bk-durinput { width: 90px; }

/* Footer */
.yc-bk-foot { padding: .75rem 0 .25rem; margin-top: .5rem; border-top: 1px solid var(--yc-divider); }
.yc-bk-foot__btns { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
.yc-bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem;
    font-weight: 700; font-size: .875rem; line-height: 1.2; padding: .5rem .875rem; cursor: pointer;
    border: 1px solid var(--yc-border); border-radius: var(--yc-border-radius);
    background: transparent; color: var(--yc-text); }
.yc-bk-btn--sm { padding: .375rem .625rem; font-size: .8125rem; }
.yc-bk-btn--primary { background: var(--yc-primary); border-color: var(--yc-primary); color: #fff; }
.yc-bk-btn--muted { background: transparent; color: var(--yc-text-muted); }
.yc-bk-btn:disabled { opacity: .6; cursor: not-allowed; }
/* yoCare è light-only: nessun blocco @media (prefers-color-scheme: dark) qui.
   Un blocco dark ereditato rendeva gli input con fondo #0f172a (nero) quando il
   sistema è in tema scuro — incoerente col resto dell'app. Rimosso. */

/* ══════════════════════════════════════════════════════════════════════════
 * Affitti stanze — dashboard settimana-tipo (.yc-rt-*)
 * Header mese/sedi/azioni · 4 KPI · Occasioni · griglia stanze con barre di
 * occupazione · pannello espanso (Da gestire / Contratti / Finestre libere).
 * Token brand, nessun dark-mode.
 * ════════════════════════════════════════════════════════════════════════ */
.yc-rt { max-width: 100%; }

/* ── Header: mese · sedi · azioni ─────────────────────────────────────────── */
.yc-rt-head {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 12px; padding-bottom: 12px;
    border-bottom: 2px solid var(--yc-divider);
}
.yc-rt-month { display: flex; align-items: center; gap: 8px; }
.yc-rt-navbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; font-size: 15px; text-decoration: none;
    color: var(--yc-primary-700); border-radius: var(--yc-border-radius-sm, 6px);
}
.yc-rt-navbtn:hover { background: color-mix(in srgb, var(--yc-primary) 10%, transparent); color: var(--yc-primary-800); }
.yc-rt-monthlbl { font-size: 14px; font-weight: 600; min-width: 124px; text-align: center; text-transform: capitalize; }
.yc-rt-divider { width: 1px; height: 20px; background: var(--yc-border); }
.yc-rt-spacer { flex: 1 1 auto; }
.yc-rt-chip {
    padding: 3px 9px; font-size: 12.5px; text-decoration: none;
    border: 1px solid var(--yc-border); border-radius: var(--yc-border-radius-sm, 6px);
    background: var(--yc-bg-card); color: var(--yc-text);
}
.yc-rt-chip:hover { border-color: var(--yc-primary-300, #a9e5de); }
.yc-rt-chip.is-on {
    border-color: var(--yc-primary);
    background: color-mix(in srgb, var(--yc-primary) 12%, #fff);
    color: var(--yc-primary-700); font-weight: var(--yc-font-weight-medium);
}
.yc-rt-act {
    padding: 3px 8px; font-size: 12.5px; background: none; border: 0;
    cursor: pointer; color: var(--yc-primary-700); font-weight: var(--yc-font-weight-medium);
}
.yc-rt-act:hover { color: var(--yc-primary-800); }
.yc-rt-exportwrap { position: relative; }
.yc-rt-exportmenu {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 40; width: 250px;
    background: #fff; border: 1px solid var(--yc-border-strong, var(--yc-border));
    border-radius: var(--yc-border-radius); box-shadow: var(--yc-shadow-md, 0 6px 18px rgba(0,0,0,.12));
    overflow: hidden;
}
.yc-rt-exportmenu a {
    display: block; padding: 8px 10px; text-decoration: none; color: var(--yc-text);
    border-bottom: 1px solid var(--yc-divider);
}
.yc-rt-exportmenu a:last-child { border-bottom: 0; }
.yc-rt-exportmenu a:hover { background: color-mix(in srgb, var(--yc-text) 4%, transparent); }
.yc-rt-exportmenu a span:first-child { display: block; font-size: 13px; }
.yc-rt-exportmenu a span:last-child { display: block; font-size: 11.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

/* ── 4 KPI ────────────────────────────────────────────────────────────────── */
.yc-rt-kpis {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-bottom: 2px solid var(--yc-divider);
}
@media (max-width: 768px) { .yc-rt-kpis { grid-template-columns: repeat(2, 1fr); } }
.yc-rt-kpi { padding: 12px 16px 12px 0; }
.yc-rt-kpi__v {
    font-family: var(--yc-font-heading, inherit); font-weight: 800;
    font-size: 30px; line-height: 1; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums; color: var(--yc-text);
}
.yc-rt-kpi__v.is-warn   { color: #b45309; }
.yc-rt-kpi__v.is-accent { color: var(--yc-primary-700); }
.yc-rt-kpi__l { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; margin-top: 6px; }
.yc-rt-kpi__h { font-size: 12px; margin-top: 2px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

/* ── Intestazione di sezione (Occasioni / Stanze) ─────────────────────────── */
.yc-rt-sec {
    display: flex; align-items: baseline; gap: 8px;
    margin-top: 1.5rem; padding-bottom: 8px;
    border-bottom: 2px solid var(--yc-divider);
}
.yc-rt-sec h5 { margin: 0; font-size: 16px; }
.yc-rt-secnote { font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

/* ── Occasioni ────────────────────────────────────────────────────────────── */
.yc-rt-opp {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    padding: 10px 8px; border-bottom: 1px solid var(--yc-divider);
}
.yc-rt-opp:hover { background: color-mix(in srgb, var(--yc-text) 3%, transparent); }
.yc-rt-opp__room { width: 150px; flex: none; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yc-rt-opp__when { width: 200px; flex: none; font-size: 13px; }
.yc-rt-opp__worth { width: 96px; flex: none; font-size: 13px; color: var(--yc-primary-700); }
.yc-rt-opp__who { flex: 1 1 220px; min-width: 200px; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

/* ── Griglia stanze (settimana tipo) ──────────────────────────────────────── */
.yc-rt-room { border-bottom: 1px solid var(--yc-divider); }
.yc-rt-room__head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
    padding: 10px 8px; cursor: pointer;
}
.yc-rt-room__head:hover { background: color-mix(in srgb, var(--yc-text) 3%, transparent); }
.yc-rt-room__chev { width: 20px; flex: none; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-rt-room__id { width: 150px; flex: none; min-width: 0; }
.yc-rt-room__name { font-family: var(--yc-font-heading, inherit); font-weight: 800; font-size: 15px; }
.yc-rt-room__clinic { font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yc-rt-bars { flex: 1 1 300px; min-width: 260px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.yc-rt-barcell { min-width: 0; }
.yc-rt-bar { height: 16px; border: 1px solid var(--yc-border); }
.yc-rt-barlbl { margin-top: 3px; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-rt-barlbl.is-free { color: var(--yc-primary-700); }
.yc-rt-room__ten { width: 140px; flex: none; }
.yc-rt-room__ten > div:first-child { font-size: 13px; }
.yc-rt-room__free { font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-rt-room__free.is-accent { color: var(--yc-primary-700); }
.yc-rt-room__badge { width: 96px; flex: none; }
.yc-rt-tag {
    display: inline-block; padding: 2px 7px; font-size: 11.5px;
    border: 1px solid var(--yc-primary); background: color-mix(in srgb, var(--yc-primary) 10%, #fff);
    color: var(--yc-primary-700); border-radius: var(--yc-border-radius-sm, 6px);
}
.yc-rt-room__rev { width: 92px; flex: none; text-align: right; }
.yc-rt-room__rev > div:first-child { font-size: 14px; }
.yc-rt-room__revh { font-size: 11.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

/* ── Pannello espanso ─────────────────────────────────────────────────────── */
.yc-rt-room__body { padding: 12px 8px 16px 44px; background: var(--yc-bg-subtle, #eae9e9); }
.yc-rt-sub {
    display: flex; align-items: baseline; gap: 8px;
    padding-bottom: 6px; border-bottom: 1px solid var(--yc-divider);
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: color-mix(in srgb, var(--yc-text) 55%, transparent);
    margin-top: 1rem;
}
.yc-rt-sub:first-child { margin-top: 0; }
.yc-rt-subnote { text-transform: none; letter-spacing: 0; font-size: 12px; }
.yc-rt-empty { padding: 10px 0; font-size: 13px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

/* Da gestire */
.yc-rt-todo {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--yc-divider);
}
.yc-rt-todo__kind { width: 96px; flex: none; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--yc-primary-700); }
.yc-rt-todo__text { flex: 1 1 240px; min-width: 200px; font-size: 13.5px; }
.yc-rt-todo__when { font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

/* Contratti */
.yc-rt-contract {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--yc-divider);
}
.yc-rt-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.yc-rt-contract__main { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.yc-rt-contract__doc { flex: 0 1 auto; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yc-rt-contract__when { flex: 0 1 auto; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-rt-contract__exp { flex: none; font-size: 12.5px; white-space: nowrap; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-rt-contract__exp.is-soon { color: #b45309; }
.yc-rt-quota { width: 148px; flex: none; }
.yc-rt-quota__bar { display: block; height: 6px; background: color-mix(in srgb, var(--yc-text) 10%, transparent); }
.yc-rt-quota__bar > span { display: block; height: 6px; background: var(--yc-primary); }
.yc-rt-quota__lbl { display: block; margin-top: 3px; font-size: 11.5px; white-space: nowrap; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

/* Finestre libere */
.yc-rt-gaps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.yc-rt-gap {
    padding: 4px 10px; font-size: 12.5px; font-variant-numeric: tabular-nums;
    cursor: pointer; border: 1px dashed var(--yc-primary); background: transparent;
    color: var(--yc-primary-700); border-radius: var(--yc-border-radius-sm, 6px);
}
.yc-rt-gap:hover { background: color-mix(in srgb, var(--yc-primary) 8%, transparent); }

/* ── Modali redisegnate (Nuova assegnazione / Prenota stanza) ─────────────── */
.yc-rt-modal-overlay {
    position: fixed; inset: 0; z-index: 1060;
    background: color-mix(in srgb, #201e1d 55%, transparent);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px; overflow-y: auto;
}
.yc-rt-modal {
    width: 100%; max-width: 680px; background: var(--yc-bg-card);
    border-radius: var(--yc-border-radius); box-shadow: var(--yc-shadow-lg, 0 20px 40px rgba(0,0,0,.3));
}
.yc-rt-modal--sm { max-width: 560px; }
.yc-rt-modal__head {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px; border-bottom: 2px solid var(--yc-divider);
}
.yc-rt-modal__head h5 { margin: 0; font-size: 17px; }
.yc-rt-modal__sub { font-size: 12.5px; margin-top: 3px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-rt-modal__x { margin-left: auto; flex: none; background: none; border: 0; font-size: 18px; line-height: 1; cursor: pointer; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-rt-modal__x:hover { color: var(--yc-text); }
.yc-rt-modal__body { padding: 16px; }
.yc-rt-modal__sec {
    display: flex; align-items: baseline; gap: 8px;
    margin-top: 1rem; padding-bottom: 6px; border-bottom: 1px solid var(--yc-divider);
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
    color: color-mix(in srgb, var(--yc-text) 55%, transparent);
}
.yc-rt-modal__sec span { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; }
.yc-rt-modal__foot {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 12px 16px; border-top: 2px solid var(--yc-divider);
}
.yc-rt-modal__hint { flex: 1 1 auto; min-width: 0; font-size: 13px; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

.yc-rt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .yc-rt-grid2 { grid-template-columns: 1fr; } }
.yc-rt-field { display: block; }
.yc-rt-field > span, .yc-rt-fieldlbl {
    display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    font-weight: 600; color: color-mix(in srgb, var(--yc-text) 55%, transparent); margin-bottom: 5px;
}
.yc-rt-fieldhint { display: block; font-size: 11.5px; margin-top: 4px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

/* Fasce (gruppi giorni + orari) */
.yc-rt-fascia { padding: 12px 0; border-bottom: 1px solid var(--yc-divider); }
.yc-rt-daychips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.yc-rt-daychip {
    width: 46px; padding: 5px 0; font-size: 12.5px; cursor: pointer;
    border: 1px solid var(--yc-border); background: var(--yc-bg-card);
    color: var(--yc-text); border-radius: var(--yc-border-radius-sm, 6px);
}
.yc-rt-daychip.is-on { border-color: var(--yc-primary); background: color-mix(in srgb, var(--yc-primary) 12%, #fff); color: var(--yc-primary-700); font-weight: 600; }
.yc-rt-fascia-rm, .yc-rt-time-rm {
    margin-left: auto; background: none; border: 0; cursor: pointer; font-size: 15px; line-height: 1;
    color: color-mix(in srgb, var(--yc-text) 55%, transparent); padding: 2px 8px;
}
.yc-rt-fascia-rm:hover, .yc-rt-time-rm:hover { color: var(--yc-danger, #b42318); }
.yc-rt-times { margin-top: 8px; padding-left: 2px; }
.yc-rt-timerow { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.yc-rt-timein { width: 118px; min-height: 30px; }
.yc-rt-timechk { font-size: 12px; }
.yc-rt-addtime { padding: 1px 8px; font-size: 12px; }

.yc-rt-rulebox {
    margin-top: 12px; padding: 10px 12px; font-size: 13px;
    background: var(--yc-bg-subtle, #eae9e9); border-left: 2px solid var(--yc-text);
}
.yc-rt-rrule {
    margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-all;
    color: color-mix(in srgb, var(--yc-text) 55%, transparent);
}

/* Lista stanze (prenota) */
.yc-rt-roomlist { border-top: 1px solid var(--yc-divider); max-height: 212px; overflow-y: auto; }
.yc-rt-roomopt {
    display: flex; align-items: center; gap: 12px;
    padding: 8px; border-bottom: 1px solid var(--yc-divider); cursor: pointer;
}
.yc-rt-roomopt:hover { background: color-mix(in srgb, var(--yc-text) 4%, transparent); }
.yc-rt-roomopt.is-on { background: color-mix(in srgb, var(--yc-primary) 8%, transparent); }
.yc-rt-roomopt__mark { width: 13px; flex: none; font-size: 11px; color: var(--yc-primary); }
.yc-rt-roomopt__name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; }
.yc-rt-roomopt.is-on .yc-rt-roomopt__name { font-weight: 600; }
.yc-rt-roomopt__clinic { flex: none; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

/* Chip durata (prenota) */
.yc-rt-durchips { display: flex; gap: 4px; }
.yc-rt-durchip {
    padding: 6px 10px; font-size: 12.5px; cursor: pointer;
    border: 1px solid var(--yc-border); background: var(--yc-bg-card);
    color: var(--yc-text); border-radius: var(--yc-border-radius-sm, 6px);
}
.yc-rt-durchip.is-on { border-color: var(--yc-primary); background: color-mix(in srgb, var(--yc-primary) 12%, #fff); color: var(--yc-primary-700); font-weight: 600; }

/* ── Accesso (login, recupero, reset, uscita) ─────────────────────────────────
   Due colonne: la fascia scura porta il marchio e il contesto, la schermata sta
   a destra su fondo pagina. Niente card: come nel resto del redesign lo stacco
   lo fanno i divisori, non i riquadri. */
.yc-auth-body { margin: 0; background: var(--yc-bg-light); color: var(--yc-text); }
.yc-auth { display: flex; min-height: 100vh; }
.yc-auth-aside {
    flex: 1 1 50%; min-width: 0;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 32px 24px;
    background: #1e293b; color: rgba(255, 255, 255, .72);
}
.yc-auth-logo { max-height: 34px; width: auto; object-fit: contain; align-self: flex-start; }
.yc-auth-wordmark { font-family: var(--yc-font-heading, inherit); font-weight: 800; font-size: 22px; color: #fff; }
.yc-auth-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: rgba(255, 255, 255, .45); }
.yc-auth-claim { margin: 12px 0 0; font-family: var(--yc-font-heading, inherit); font-weight: 800; font-size: 34px; line-height: 1.15; color: #fff; text-wrap: pretty; }
.yc-auth-note { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; line-height: 1.6; }
.yc-auth-copy { font-size: 11.5px; color: rgba(255, 255, 255, .4); }

.yc-auth-main { flex: 1 1 50%; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 32px 24px; }
.yc-auth-panel { width: 100%; max-width: 380px; }
.yc-auth-panel h1 { margin: 0; font-size: 32px; line-height: 1.1; }
.yc-auth-lead { margin: 8px 0 24px; font-size: 13.5px; line-height: 1.6; color: color-mix(in srgb, var(--yc-text) 58%, transparent); }
.yc-auth-back { font-size: 12.5px; text-decoration: none; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-auth-kicker { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }
.yc-auth-kicker--accent { color: var(--yc-primary-700); }

/* Una fascia sola per i tre messaggi (uscita, password aggiornata, sessione
   scaduta) e per gli errori: prima erano tre alert Bootstrap diverse. */
.yc-auth-notice { border-left: 3px solid var(--yc-primary); background: var(--yc-primary-50, #eefaf8); padding: 10px 14px; margin-bottom: 24px; font-size: 13px; line-height: 1.5; color: var(--yc-primary-800, #0a4f48); }
.yc-auth-notice--error { border-left-color: #b42318; background: #fdf1f0; color: #b42318; }
.yc-auth-notice--warn { border-left-color: #b45309; background: #fdf6e7; color: #b45309; }

.yc-auth-label { display: block; margin-top: 16px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }
.yc-auth-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 16px; }
.yc-auth-labelrow .yc-auth-label { margin-top: 0; }
.yc-auth-link { font-size: 12.5px; color: var(--yc-primary-700); text-decoration: none; }
.yc-auth-panel .form-control { margin-top: 6px; min-height: 42px; }
.yc-auth-pw { display: flex; margin-top: 6px; }
.yc-auth-pw .form-control { flex: 1 1 auto; min-width: 0; margin-top: 0; border-right: 0; }
.yc-auth-pw .btn { flex: none; min-height: 42px; padding: 0 12px; }
.yc-auth-check { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; cursor: pointer; }
.yc-auth-submit { width: 100%; justify-content: center; min-height: 44px; margin-top: 24px; }
.yc-auth-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.yc-auth-foot { margin-top: 24px; padding-top: 16px; border-top: 2px solid var(--yc-divider); font-size: 12.5px; line-height: 1.6; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-auth-small { margin: 16px 0 0; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }

/* Riepilogo a righe (mittente/oggetto, sessione aperta, code in sospeso). */
.yc-auth-facts { margin-top: 24px; border-top: 2px solid var(--yc-divider); }
.yc-auth-fact { display: flex; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--yc-divider); font-size: 13px; }
.yc-auth-fact > span:first-child { width: 150px; flex: none; color: color-mix(in srgb, var(--yc-text) 50%, transparent); }

/* Robustezza password: quattro barre a passi discreti, non una percentuale. */
.yc-auth-bars { display: flex; gap: 4px; margin-top: 10px; }
.yc-auth-bars span { flex: 1 1 0; height: 3px; background: var(--yc-divider); }
.yc-auth-bars span.is-on { background: var(--yc-pw-tint, var(--yc-primary)); }
.yc-auth-pwmeta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 12px; }
.yc-auth-pwmeta > span:first-child { color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-auth-pwmeta > span:last-child { font-weight: 600; }

@media (max-width: 820px) {
    .yc-auth { flex-direction: column; }
    .yc-auth-aside { flex: none; max-width: none; padding: 20px; gap: 20px; }
    .yc-auth-claim { font-size: 22px; }
    .yc-auth-note, .yc-auth-copy { display: none; }
}

/* ── Sito pubblico: schede, difetti SEO, righe pagina ─────────────────────── */
/* Le schede sono .yc-seg, lo stesso segmentato della lista appuntamenti: qui
   c'è solo la barra che lo contiene. */
.yc-site-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--yc-divider); }
.yc-site-spacer { flex: 1 1 auto; }
.yc-site-visit { font-size: 12.5px; color: var(--yc-primary-700); text-decoration: none; }

/* Il pannello dei difetti ha bordo pieno: è la sola cosa della pagina che
   chiede un'azione, e deve staccarsi dall'elenco. */
.yc-site-gaps { margin-top: 16px; border: 2px solid var(--yc-text); }
.yc-site-gaps-head { display: flex; align-items: baseline; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--yc-divider); }
.yc-site-gaps-head h6 { margin: 0; font-weight: 800; font-size: 13.5px; }
.yc-site-gaps-head span { font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-site-gap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 16px; border-bottom: 1px solid var(--yc-divider); }
.yc-site-gap:last-child { border-bottom: 0; }
.yc-site-gap-kind { width: 132px; flex: none; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-site-gap-kind.is-urgent { color: #b45309; }
.yc-site-gap-text { flex: 1 1 240px; min-width: 200px; font-size: 13.5px; }
.yc-site-gap-effect { flex: none; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

.yc-site-row { border-bottom: 1px solid var(--yc-divider); }
.yc-site-row > summary { display: flex; align-items: center; gap: 12px; padding: 11px 8px; cursor: pointer; list-style: none; }
.yc-site-row > summary::-webkit-details-marker { display: none; }
.yc-site-row > summary::before { content: '▸'; flex: none; width: 14px; font-size: 11px; color: color-mix(in srgb, var(--yc-text) 45%, transparent); }
.yc-site-row[open] > summary::before { content: '▾'; }
.yc-site-row-name { flex: 1 1 220px; min-width: 180px; }
.yc-site-row-title { display: block; font-size: 14px; font-weight: 600; }
.yc-site-row-url { display: block; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-site-row-meta { flex: 1 1 300px; min-width: 240px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-site-row-meta.is-missing { color: #b45309; }
.yc-site-row-when { width: 110px; flex: none; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

/* Velo neutro, non un fondo colorato: --yc-gray-100 è slate (#f1f5f9) e sopra
   il grigio caldo della pagina virava all'azzurro. Derivandolo dal testo resta
   nella stessa famiglia calda e quasi non si vede — come nel mockup, dove a
   separare il pannello sono i divisori, non il riempimento. */
.yc-site-panel { display: flex; gap: 24px; flex-wrap: wrap; padding: 16px 8px 24px; background: color-mix(in srgb, var(--yc-text) 3%, transparent); }
.yc-site-content { flex: 1 1 420px; min-width: 320px; }
.yc-site-seo { flex: 1 1 380px; min-width: 320px; }
.yc-site-subhead { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 2px solid var(--yc-divider); color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-site-subhead--section { margin-top: 24px; }
.yc-site-subhead--section span { margin-left: 8px; letter-spacing: 0; text-transform: none; font-size: 12px; }
.yc-site-note { margin: 10px 0; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-site-field { padding: 10px 0; border-bottom: 1px solid var(--yc-divider); }
.yc-site-field .yc-site-label { margin-top: 0; }
.yc-site-color { display: inline-flex; align-items: center; gap: 8px; }
.yc-site-swatch { width: 34px; height: 30px; flex: none; border: 1px solid var(--yc-divider); }
.yc-site-color .form-control { width: 120px; }
.yc-site-actions { margin-top: 16px; }

/* Sezioni a righe (json_array): la riga di testata dice quante righe ha, se è
   online, e apre la tabella. L'ordine qui è l'ordine sulla pagina pubblica. */
.yc-sec { border-bottom: 1px solid var(--yc-divider); }
.yc-sec-head { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.yc-sec-move { display: flex; flex-direction: column; flex: none; width: 16px; }
.yc-sec-move button { border: 0; background: transparent; cursor: pointer; font-size: 10px; line-height: 1; padding: 1px 0; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-sec-move button:disabled { opacity: .25; cursor: default; }
.yc-sec-label { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yc-sec-note { flex: none; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-sec-body { padding: 0 0 12px 24px; }
.yc-sec-cols, .yc-sec-row { display: flex; align-items: center; gap: 8px; }
.yc-sec-cols { padding-bottom: 5px; border-bottom: 1px solid var(--yc-divider); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-sec-cols > span:not(.yc-sec-n):not(.yc-sec-del) { flex: 1 1 0; min-width: 0; }
.yc-sec-row { padding: 5px 0; }
.yc-sec-n { width: 16px; flex: none; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 45%, transparent); }
.yc-sec-cell { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; }
.yc-sec-cell .form-control { min-height: 30px; font-size: 12.5px; }
.yc-sec-del { width: 26px; flex: none; border: 0; background: transparent; cursor: pointer; font-size: 13px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-sec-empty { padding: 8px 0; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
/* Variante compatta del caricatore, per le immagini dentro una riga. */
.yc-upload-zone--sm { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; font-size: 12px; }
.yc-upload-zone--sm .yc-upload-preview img { width: 38px; height: 30px; object-fit: cover; display: block; }
.yc-site-label { display: block; margin: 14px 0 4px; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-site-hint { margin-top: 4px; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-site-hint.is-warn { color: #b45309; }
.yc-site-robots { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0; font-size: 12.5px; }
.yc-site-robots span { color: color-mix(in srgb, var(--yc-text) 45%, transparent); }

/* Anteprima del risultato: colori di Google, non del gestionale — deve
   leggersi come lo vedrà chi cerca, non come il resto del pannello. */
.yc-site-serp { margin-top: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--yc-divider); }
.yc-site-serp-url { font-size: 12px; color: #3c4043; }
.yc-site-serp-title { margin-top: 3px; font-size: 17px; line-height: 1.3; color: #1a0dab; }
.yc-site-serp-desc { margin-top: 3px; font-size: 13px; line-height: 1.45; color: #4d5156; }

/* Righe a due indirizzi (redirect) e stato del codice di terze parti. */
.yc-redir { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-bottom: 1px solid var(--yc-divider); font-size: 12.5px; }
.yc-redir-from, .yc-redir-to { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yc-redir-arrow { flex: none; color: color-mix(in srgb, var(--yc-text) 45%, transparent); }
.yc-redir-hits { width: 74px; flex: none; text-align: right; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

/* ── Domande frequenti ─────────────────────────────────────────────────────── */
.yc-faq-bar { display: flex; justify-content: flex-end; padding: 12px 8px 0; }
.yc-faq { border-bottom: 1px solid var(--yc-divider); }
.yc-faq > summary { display: flex; align-items: flex-start; gap: 12px; padding: 11px 8px; cursor: pointer; list-style: none; }
.yc-faq > summary::-webkit-details-marker { display: none; }
.yc-faq-n { width: 16px; flex: none; margin-top: 2px; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 45%, transparent); }
.yc-faq-text { flex: 1 1 auto; min-width: 0; }
.yc-faq-q { display: block; font-size: 14px; }
.yc-faq-a { display: block; margin-top: 3px; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
/* Domanda o risposta mancante: è lavoro non finito, si vede senza aprire. */
.yc-faq-q.is-missing, .yc-faq-a.is-missing { color: #b45309; }
.yc-faq-cat { width: 120px; flex: none; font-size: 12px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-faq-edit { padding: 0 8px 16px 36px; background: color-mix(in srgb, var(--yc-text) 3%, transparent); }
.yc-faq-meta { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.yc-faq-meta .yc-site-label { margin-top: 0; }
.yc-faq-meta .form-control { min-height: 32px; }
.yc-faq-del { color: #b42318; }
.yc-faq-note { margin-top: 16px; padding: 10px 12px; background: color-mix(in srgb, var(--yc-text) 3%, transparent); border-left: 2px solid var(--yc-primary); font-size: 12.5px; }

.yc-site-auto { padding: 11px 8px; border-bottom: 1px solid var(--yc-divider); }
.yc-site-auto-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; cursor: pointer; list-style: none; }
.yc-site-auto-head::-webkit-details-marker { display: none; }
.yc-site-auto-edit { flex: none; font-size: 12.5px; color: var(--yc-primary-700); }
.yc-site-auto[open] .yc-site-auto-edit::after { content: ' · chiudi'; }
.yc-site-auto-editor { display: none; gap: 24px; flex-wrap: wrap; margin-top: 12px; padding: 16px 12px; background: color-mix(in srgb, var(--yc-text) 3%, transparent); }
.yc-site-auto[open] .yc-site-auto-editor { display: flex; }
.yc-site-auto-form { flex: 1 1 400px; min-width: 320px; }
.yc-site-auto-preview { flex: 1 1 320px; min-width: 290px; }
/* Segnaposto: bordo tratteggiato perché non sono valori, sono buchi da riempire. */
.yc-site-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.yc-site-tags button { padding: 3px 8px; font-size: 12px; cursor: pointer; border: 1px dashed color-mix(in srgb, var(--yc-text) 30%, transparent); background: transparent; color: var(--yc-text); }
.yc-site-tags button:hover { border-style: solid; border-color: var(--yc-primary); color: var(--yc-primary-700); }
.yc-site-auto-ex.is-warn { color: #b45309; }
.yc-site-auto-count { flex: none; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-site-auto-tpl { margin-top: 6px; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }
.yc-site-auto-ex { margin-top: 4px; font-size: 12.5px; color: color-mix(in srgb, var(--yc-text) 55%, transparent); }

/* ── Avatar (condiviso) ───────────────────────────────────────────────────────
   Foto se c'è, altrimenti iniziali sul colore della persona. Una sola classe
   per tutte le misure: la riga elenco la usa a 28px, ma --yc-av-size la porta
   dove serve senza duplicare le dichiarazioni. Reso da renderInitialsAvatar().
   NB: .yc-dv-avatar (testata scheda) e .yc-df-photo-av (form) fanno ancora la
   stessa cosa per conto loro — vanno assorbite qui, vedi nota al team. */
.yc-av {
    width: var(--yc-av-size, 28px);
    height: var(--yc-av-size, 28px);
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--yc-font-heading, inherit);
    font-weight: 800;
    font-size: var(--yc-av-font, 11px);
    line-height: 1;
    color: #fff;
    overflow: hidden;
    border-radius: var(--yc-border-radius-sm, 6px);
}
.yc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Roster Dottori: identità di riga (avatar + nome + specialità) ─────────── */
.yc-dr-ident { display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 100%; }
.yc-dr-idtext { flex: 1 1 auto; min-width: 0; }
.yc-dr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.yc-dr-spec {
    font-size: 12px;
    color: color-mix(in srgb, var(--yc-text) 55%, transparent);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Roster Dottori: badge giorni presidiati (settimana) ──────────────────── */
.yc-dr-week { display: flex; gap: 2px; margin-top: 4px; }
.yc-dr-day {
    width: 16px; text-align: center; font-size: 10px; line-height: 15px;
    background: var(--yc-gray-100); color: color-mix(in srgb, var(--yc-text) 45%, transparent);
    border-radius: 3px;
}
.yc-dr-day.is-on { background: var(--yc-primary); color: #fff; }