/* ============================================================================
   FONT — Inter + JetBrains Mono sono serviti da YOOtheme (template), NON da qui
   ----------------------------------------------------------------------------
   Le famiglie 'Inter' e 'JetBrains Mono' sono dichiarate via @font-face dal
   template YOOtheme (templates/yootheme_calpro/css/theme.css), caricato su tutte
   le pagine. style.css NON le ridichiara più: usa solo `font-family: 'Inter'` /
   'JetBrains Mono' e si appoggia alle face di YOOtheme. Unica fonte font del
   frontend = YOOtheme (niente doppia dichiarazione, niente doppio download).
   ATTENZIONE pesi: YOOtheme serve istanze STATICHE (i pesi spuntati nel builder).
   I pesi intermedi (450/550/650/750/850) vanno rettificati a multipli di 100,
   altrimenti il browser arrotonda al peso statico più vicino.
   ECCEZIONE export: il render PDF/JPG (Puppeteer/setContent) NON carica YOOtheme,
   quindi gli @font-face Inter/JBM per l'export vivono in calpro/css/exportFonts.css
   (inlinato + base64 da generateCalendarExport.php). Lì restano i woff2 in
   calpro/fonts/, indispensabili all'export.
============================================================================ */
/* ============================================================================
   @font-face: Material Symbols Rounded (variable, self-hosted, subset)
   ----------------------------------------------------------------------------
   Subset di ~29 KB generato da calpro/tools/build-material-symbols-subset.php
   con pyftsubset. Contiene SOLO i glifi effettivamente usati nel frontend
   (cfr. array $ICONS nello script). Aggiornare il subset = ricompilarlo
   prima di committare. La skill `nuova-icona` documenta il workflow completo.
   font-display: block (NON swap) per evitare il FOIT-flash del testo nudo
   "calendar_today" come fallback prima del caricamento del font icone.
============================================================================ */
@font-face {
    font-family: 'Material Symbols Rounded';
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
    src: url('../fonts/material-symbols-rounded-v338/MaterialSymbolsRounded-subset.woff2') format('woff2');
}
/* Classe base per <span class="material-symbols-rounded">nome_icona</span>.
   Replica le regole che Google forniva nel CSS quando il font era caricato
   da fonts.googleapis.com. font-feature-settings: 'liga' è obbligatorio:
   attiva la sostituzione ligature OpenType che trasforma il testo
   "calendar_today" nel glifo singolo dell'icona. */
.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* ── Subset animate.css per SweetAlert2 ────────────────────────────────
   Sostituisce il caricamento di animate.min.css (72KB, render-blocking):
   SweetAlert2 usa SOLO queste 4 classi (calproBase.js:436, 2645-2646).
   Se cambi showClass/hideClass di Swal, aggiorna qui. Verificato: nessuna
   collisione con keyframe/variabili esistenti in questo file. */
:root { --animate-duration: 1s; }
.animate__animated { animation-duration: var(--animate-duration); animation-fill-mode: both; }
.animate__faster   { animation-duration: calc(var(--animate-duration) / 2); }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
.animate__fadeIn   { animation-name: fadeIn; }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
.animate__fadeOut  { animation-name: fadeOut; }

/*
NON ELIMINARE QUESTO COMMENTO
salvataggio colore
blu: #008ACF
arancione: #F0A500
ambra secca: #f59e0b
*/


/*##############################*/
/*GLOBAL RESET & ICONS*/
/*##############################*/
*, *::before, *::after {
    box-sizing: border-box;
}

pre {
    font-size: 0.8rem;
    position: relative;
}

[class*="material-symbols"] {
    font-size: 32px;
    font-variation-settings:'FILL' 0, 'wght' 240, 'GRAD' 60, 'opsz' 32;
}

HEADER * {
    letter-spacing: var(--tight);
}


/*##############################*/
/*DEBUG PANEL*/
/*##############################*/
.cpdbg-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    font-family: 'Menlo', 'Consolas', 'Monaco', 'Liberation Mono', monospace;
    font-size: 12px;
    line-height: 1.5;
    color: #D4D4D4;
    background: #1E1E1E;
    border-top: 4px solid #007ACC;
    cursor: ns-resize;
    display: flex;
    flex-direction: column;
    max-height: 50vh;

    &::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 0;
        right: 0;
        height: 12px;
        cursor: ns-resize;
        z-index: 1;
    }

    & > *:not(.cpdbg-toolbar) {
        cursor: default;
    }

    &.cpdbg-collapsed {
        max-height: 32px;
        overflow: hidden;
        border-top-color: #444;

        & .cpdbg-columns {
            display: none;
        }
    }
}

/* Toolbar */
.cpdbg-toolbar {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 32px;
    background: #252526;
    cursor: default;
}

.cpdbg-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border: none;
    background: transparent;
    color: #CCC;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;

    &:hover {
        color: #FFF;
    }
}

.cpdbg-toggle-icon {
    font-size: 14px;
}

/* Column visibility buttons */
.cpdbg-col-btns {
    display: flex;
    gap: 2px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid #444;
}

.cpdbg-col-btn {
    padding: 4px 12px;
    border: 1px solid #444;
    border-radius: 3px;
    background: transparent;
    color: #666;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;

    &:hover {
        color: #AAA;
        border-color: #666;
    }

    &.cpdbg-col-btn-active {
        color: #E0E0E0;
        background: #007acc33;
        border-color: #007ACC;
    }
}

/* Columns layout */
.cpdbg-columns {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Single column */
.cpdbg-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid #333;

    &:last-child {
        border-right: none;
    }

    &.cpdbg-col-hidden {
        display: none;
    }
}

.cpdbg-col-header {
    flex-shrink: 0;
    padding: 5px 12px;
    background: #2D2D30;
    color: #007ACC;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #333;
}

.cpdbg-col-body {
    flex: 1;
    overflow: auto;
    padding: 8px 12px;
    user-select: text;
    -webkit-user-select: text;
}

/* JSON syntax highlighting */
.cpdbg-json {
    margin: 0;
    padding: 0;
    background: transparent;
    color: #D4D4D4;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
    position: static;
    z-index: auto;
    border: none;
}

.cpdbg-raw {
    margin: 0;
    padding: 0;
    background: transparent;
    color: #D4D4D4;
    font-size: 12px;
    white-space: pre-wrap;
    position: static;
    z-index: auto;
    border: none;
}

.cpdbg-key {
    color: #9CDCFE;
}

.cpdbg-str {
    color: #CE9178;
}

.cpdbg-num {
    color: #B5CEA8;
}

.cpdbg-bool {
    color: #569CD6;
}

/*##############################*/
/*:ROOT*/
:root {
    --today-color: #007BFF;
    --global-link-color-font: Inter;
    --event-color: #515151;
    --hover: #007BFF;
    --title: #1B1B1B;
    --text: #454545;
    --success: #81b451;
    --error: #e6043c;
    --default-font: "Inter";
    -webkit-font-smoothing: antialiased;
    /* Ombra morbida standard dei datari (YEAR, picker countdown, card tool).
       Un solo punto di definizione: chi la vuole usa var(--card-shadow). */
/*    --card-shadow:
        0 0    0    1px    rgba(0, 0, 0, 0.01),
        0 1px  1px  -0.5px rgba(0, 0, 0, 0.06),
        0 3px  3px  -1.5px rgba(0, 0, 0, 0.06),
        0 6px  6px  -3px   rgba(0, 0, 0, 0.06),
        0 12px 12px -6px   rgba(0, 0, 0, 0.06),
        0 24px 24px -12px  rgba(0, 0, 0, 0.03);
*/
        --not-selected:var(--gray);
    --short-transition: 150ms;
    --ghostDayOpacity: 0.35;
    /* Scala di grigi ereditata da --section-default-background (definito dal theme YooTheme):
       OKLCH relative color syntax — mantiene chroma (c) e hue (h) del colore sorgente
       e impone la lightness percepita corrispondente al suffisso nel nome (gray-N → L=N/100).
       Modificare hue/saturation di --section-default-background ritinta l'intera scala
       preservando i passi percettivi uniformi.
       Fallback #FFFFFF: il rendering Puppeteer non include il theme.css, quindi la variabile
       non sarebbe definita e ogni `oklch(from undefined …)` cadrebbe su invalid → grigi vuoti
       e celle senza fondo nell'export. Il fallback produce una scala neutra coerente. */
    --disabledIcons: var(--gray-70);
    --gray: var(--global-muted-color, var(--gray-60));
    --main-holiday-bg: #fb5e6c;
    --veryLightGray: var(--gray-85);
    --lightGray: var(--gray-65);
    --lightGray10: var(--gray-90);
    --lightLightGray: var(--gray-80);
    --lightLightLightGray: var(--gray-92-5);
    --light-gray: var(--gray-80);
    --month-day-bg: var(--gray-97);
    --sunday-bg: var(--gray-90);
    --month-sunday-bg: var(--gray-95);
    --month-event-bg: var(--gray-100);
    --month-ghost-bg: var(--gray-92-5);
    --month-today-ring: rgba(255, 255, 255, 0.35);
    --tight: -0.03em;

    /* ════════════════════════════════════════════════════════════════════
       DATARIO — TOKEN DI DESIGN (2 preset)
       La griglia di celle-giorno (.month.container-cp .day) ha UN SOLO DOM,
       condiviso da YEAR, dai mini-mesi laterali della WEEK e dal picker
       (countdown/timecalculator) — e dal calendario MONTH. I COLORI e i raggi
       sono i token qui sopra; QUI vivono PESI, DIMENSIONI dei font e SPAZIATURE,
       in DUE preset speculari:
         • GENERALE → cella compatta: YEAR + mini-mesi WEEK + picker.
         • MONTH    → cella espansa desktop (≥1024px): numero in box + eventi inline.
       Edita il preset GENERALE per ritoccare tutti i datari compatti INSIEME;
       il preset MONTH per il solo calendario-mese. I nomi sono speculari, così
       il confronto fra i due preset è immediato. */
    /* — preset GENERALE (YEAR · mini-mesi WEEK · picker) — */
    --datario-title-size: 1.5em;
    --datario-dayname-size: var(--testo-piccolo2);
    --datario-dayname-weight: 600;       /* nomi giorni (Lun…Dom) — condiviso con MONTH */
    --datario-num-size: 1em;
    --datario-num-weight: 400;
    --datario-weeknum-size: var(--testo-piccolo4);       /* numeri settimana (colonna laterale) */
    --datario-weeknum-weight: 600;       /* condiviso con MONTH (stesso valore) */
    --datario-sunday-weight: 600;        /* condiviso con MONTH (stesso valore) */
    /* stati del giorno — GLOBALI: stesso peso in TUTTI i layout (#cpCalendar) + picker */
    --datario-event-weight: 700;         /* giorno con sfondo-evento (festività) */
    --datario-today-weight: 600;         /* giorno odierno */
    /* — preset MONTH (calendario-mese, cella espansa ≥1024px) — */
    --datario-month-title-size: clamp(1.5em, 6vw, 3.3em);
    --datario-month-dayname-size: var(--testo-piccolo2);
    --datario-month-num-size: 1.1em;
    --datario-month-num-weight: 600;
    --datario-month-num-box: 25px;       /* unica misura fissa-px del datario: portabile a em in futuro */
    --datario-month-day-padding: 0.625em;
    --datario-month-weeknum-size: clamp(0.6em, 2.3vw, var(--testo-piccolo4));

    --extra-small: 576px;
    --medium: 768px;
    --large: 992px;
    --extra-large:1200px;
    --extra-extra-large: 1400px;
    --main-events-color: white;
    --event-dot-size: 5px;
    --daylist-bottom-border: 1px;
    color: #D9C959;
}

/*GENERAL =========================================*/
/*
nav:has(> .uk-breadcrumb) {
    margin-bottom: 0px !important;
}


nav .uk-breadcrumb {
    margin-bottom: 10px;
}
*/
.missingLabel {
    background-color: yellow;
    color: red;
    font-weight: 600;
}

body {
    font-family: 'Inter', sans-serif;
/*    background-color:var(--gray-90);*/
    color:var(--text);
    width: 100%;
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

.title {
    color:var(--base-heading-color);
    letter-spacing: var(--tight);
}

.flexContainer {
    display: flex;

    & > .element {
        align-items: center;
        min-height: 2.5rem;
    }
}

#cpPreviewPanel {
    display: none;
}

/* Chrome, Safari, Edge, Opera */
input.clean {
    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    &[type=number] {
        -moz-appearance: textfield;
    }
}

/*#calpro page =======================================*/
#calpro.page.container-cp {
    /*max-width: 1400px;*/
    margin: auto;
}

a, .link, .icon {
    color: inherit;
    transition:color var(--short-transition) ease-in-out 0s;
    text-decoration: none;
}

a:hover, .link:hover, .icon:hover {
    color:var(--global-link-color);
}

.weekNumber, .yearDay {
    color: var(--gray);
}

#calpro:not(.publicHolidaysLayout) #cpCalendar.showEventsGeneral .day.bgEvent {
    /* Regola generale: tutto ciò che sta dentro un giorno "bgEvent" (festività
       di fondo) prende il colore bianco — icone moon incluse. Qualunque regola
       più specifica (es. ".monthLayout .day .yearDay", "...:not(.sunday) .X")
       la sovrascrive automaticamente senza bisogno di !important.
       Esclusa la view publicholidays (in cui TUTTI i giorni sono bgEvent e i
       caratteri devono restare nei colori normali — vedi blocco dedicato sotto). */
    & * {
        color: white;
    }
}

/*=============================*/
/*=== CONTROL PANEL*/
/*=============================*/
.cpCpanelContainer * {
    letter-spacing: var(--tight);
}

.cpCpanelPopupContainer {
    max-width: 1500px;
    padding: 1.55rem 1.25rem 1.25rem;
    width: min(1500px, 94vw);
    box-shadow: none;
}

.cpCpanelHtmlContainer {
    padding: 0;
    width: 100%;
    overflow: visible;
    pointer-events: none;
}

/* SweetAlert2 default html-container is 1.125em; neutralize it for cPanel only. */
.cpCpanelContainer .cpCpanelHtmlContainer, .cpCpanelInlineFallbackOverlay .cpCpanelHtmlContainer {
    z-index: auto;
    justify-content: normal;
    margin: 0;
    padding: 0;
    overflow: visible;
    color: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    overflow-wrap: normal;
    word-break: normal;
    cursor: initial;
}

.cpCpanelCloseButton {
    position: absolute;
}

.cpCpanelInlineFallbackOverlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
}

.cpCpanelInlineFallbackPopup {
    position: relative;
    margin: 0 auto;
}

.cpCpanelInlineFallbackClose {
    right: 0.45rem;
    top: 0.3rem;
    border: 0;
    background: transparent;
    color: var(--gray-25);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

#cpCpanel {
    background: #FFF;
    border-radius: 8px;
    margin: 0 auto;
    max-width: 1500px;
    display: block;
    padding: 0.9rem;
    position: relative;
    /*font-size: calc( var(--global-font-size) * 0.9);*/
    --cpanel-col-gap: 1.5rem;
    pointer-events: none;
    letter-spacing: 0;

    /* Mobile: pannello di controllo a tutta larghezza, padding rimosso. */
    @media (max-width: 767.98px) {
        & { padding: 0; }
    }

    & .cpGroup {
        margin-top: 1.4em;
        margin-bottom: 1.4em;
    }

    /* GRUPPO DI CHECKBOX O RADIO */
    & .cpGroup:has(> label):not(:has(> :not(label))) {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    /* GRUPPO SINGOLO: una sola label come UNICO figlio (niente div accanto) */
    & .cpGroup:has(> label:only-child) {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
    }

    & .cpGroup LABEL+LABEL {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
    }

    & .cpGroup .uk-form-controls+LABEL {
        margin-top: 0.5em;
    }


    & .cpGroup LABEL {
        display: inline-block;
    }

    /* OPZIONE DISATTIVATA per la view corrente: resta sempre visibile ma non
       modificabile (standard UIkit: gli input :disabled sono già sbiaditi).
       Qui attenuiamo l'intero gruppo, label incluse, per rendere leggibile lo
       stato "disattivato" anche dove l'opzione non si applica alla view. */
    & .cpGroup.cpOptionDisabled {
        opacity: 0.5;
    }

    & .cpGroup.cpOptionDisabled,
    & .cpGroup.cpOptionDisabled label,
    & .cpGroup.cpOptionDisabled input {
        cursor: default;
    }


    & .header {
        text-align: center;
        pointer-events: none;
        user-select: none;
        margin: 0 0 0.65rem;
        padding: 0.3rem 2.5rem 1.5rem;
        min-height: 3.2rem;

        & * {
            pointer-events: none;
            user-select: none;
        }

        & .title {
            margin: 0;
            line-height: 1.2;
        }
    }

    & .cpCpanelColumns {
        margin: 0 !important;
        display: flex;
        flex-wrap: wrap;
        gap: var(--cpanel-col-gap);
        align-items: flex-start;
        pointer-events: auto;

        & *:not(.title) {
            pointer-events: auto;
            font-size: 15px;
            line-height: 1.25;
        }
    }

    & .cpCpanelCol {
        flex: 1 1 100%;
        max-width: 100%;
        text-align: left;
        padding: 0.55rem 0.95rem 0.85rem;
        box-shadow: none;
        border: none;
        border-radius: 0;
        min-height: 0;
    }

    & .column .title {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    & .column .title .sectionTitleIcon {
        font-size: 1.15em;
        font-variation-settings: 'FILL' 0, 'wght' 450, 'GRAD' 0, 'opsz' 20;
        line-height: 1;
    }

    & fieldset {
        margin: 0 0 0.95rem;
        text-align: left;
        display: block;
        user-select: none;
        border: 0;
        padding: 0;
        min-width: 0;
        max-width: 100%;
    }

    & .cpFieldset {
        border-radius: 3px;
        /* background: #ffffff; */
        border: 2px solid #F2F2F2;
        padding: 0.55rem 0.75rem;

        & > .uk-legend {
            width: auto;
            float: none;
            /*margin: 0 0 0.5rem;*/
            padding: 0 0.35rem;
            font-size: 0.72rem;
            line-height: 1.1;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--gray-35);
        }
    }

    /*
    & .cpOptionsList {
        margin-top: 0.3em;
        margin-bottom: 0.3em;
    }
        */

    & .cpRangeRow {
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    & .cpRangeInput {
        flex: 1 1 auto;
        margin: 0;

        &:disabled + .cpRangeValue {
            opacity: 0.5;
        }
    }


    & .cpRangeValue {
        min-width: 2.2ch;
        text-align: right;
        font-weight: 600;
        color: var(--gray-25);
    }

    & .yearViewOnly, & .monthListOnly, & .weekOnly, & .longWeekendsOnly {
        display: none;
    }

    &[data-layout="year"] .yearViewOnly {
        display: block;
    }

    &[data-layout="monthlist"] .monthListOnly {
        display: block;
    }

    &[data-layout="week"] .weekOnly {
        display: block;
    }

    &[data-layout="longweekends"] .longWeekendsOnly {
        display: block;
    }

    & #firstDayOfWeek {
        text-transform: capitalize;
    }
}

label {
    cursor: pointer;
}

select {
    cursor: pointer;
}

@media screen and (min-width: 640px), print and (min-width: 640px) {
    #cpCpanel .cpCpanelCol {
        flex: 1 1 calc((100% - var(--cpanel-col-gap)) / 2);
        max-width: calc((100% - var(--cpanel-col-gap)) / 2);
    }
}

@media screen and (min-width: 1024px), print and (min-width: 1024px) {
    #cpCpanel .cpCpanelCol {
        flex: 1 1 calc((100% - (var(--cpanel-col-gap) * 2)) / 3);
        max-width: calc((100% - (var(--cpanel-col-gap) * 2)) / 3);
    }
}

@media screen and (min-width: 1280px), print and (min-width: 1280px) {
    #cpCpanel .cpCpanelCol {
        flex: 1 1 calc((100% - (var(--cpanel-col-gap) * 3)) / 4);
        max-width: calc((100% - (var(--cpanel-col-gap) * 3)) / 4);
    }
}

@media screen and (min-width: 1280px), print and (min-width: 1280px) {
    .cpCpanelPopupContainer {
        padding: 2rem 1.8rem 1.8rem;
    }
}

/*=============================*/
/*=== HEADER + CONTROL BAR*/
/*=============================*/
#cpHeader {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0px;
    margin-bottom: 25px;

    & .heading {
        width: 100%;
        flex-wrap: wrap;
    }

    & .title, & .subtitle {
        margin: 0px;
        letter-spacing: -0.055em;
        text-wrap: balance;
    }

    & .title {
        max-width: 14ch;
        line-height: 1.1;
        margin-bottom: 0.25em;
        text-wrap: balance;
        font-weight: 800;
    }

    & .subtitle {
        line-height: 1.25;
        max-width: 35ch;
        color: var(--gray);
        font-weight: 600;
        letter-spacing: -0.055em;
        margin-bottom: 0.75em;
    }
    & .cpLead {
        letter-spacing: -0.035em;
        max-width: 70ch;
        font-size: var(--testo-piccolo);
/*
        font-family: 'Times Newer Roman', serif;
        font-style: italic;
        font-weight: 400;
        font-size: 1.5em;
        letter-spacing: -0.06em;
        line-height: 1.6;
        font-variant-ligatures: normal;*/
    }
}

/* Accento heading — UNICA regola condivisa da frontend (#cpHeader .heading .cpAccent)
   ed export/anteprima (#cpHeadingLabel .cpAccent). In export #cpHeader è display:none,
   quindi il titolo è #cpHeadingLabel: i due selettori puntano a contenitori diversi ma
   condividono lo stesso stile (DRY, niente duplicazione). style.css è SEMPRE inlinato
   nell'export; font Times Newer Roman embeddato in base64 via exportFonts.css.
   text-transform:lowercase → accento minuscolo coerente in entrambi i contesti. */
#cpHeader .heading .cpAccent,
#cpHeadingLabel .cpAccent {
    font-family: 'Times Newer Roman', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--global-link-color);
    font-size: 1.22em;
    letter-spacing: -0.06em;
    line-height: 0;
    font-variant-ligatures: normal;
}

#cpControlBar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0;
    margin-bottom: 2em;
    font-size:var(--global-font-size);
    min-height: 40px;
    color: var(--title);

    & .optionsBar {
        background-color: var(--gray-91);
        border-radius: var(--default-radius);
        padding-left: 1em;
        padding-right: 1em;
    }

    & .heading {
        width: 100%;
        flex-wrap: wrap;
        text-align: center;
    }

    & .region {
        flex: 1 0 100%;
        margin: 0;
        text-align: center;
    }

    & .time {
        margin-top: 5px;
        justify-content: center;
        text-align: center;
    }

    & .yearMonthNavigation {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 100%;
        /*
        gap: 0px 10px;
        */

        & .yearNavigation {
            display: flex;
            align-items: center;
        }

        & .monthNavigation {
            display: flex;
            align-items: center;
            position: relative;

            & .monthLabel {
                text-align: center;
                text-transform: capitalize;
                font-size: 1.5em;
                font-weight: 700;
            }

            & .monthDropdownToggle {
                cursor: pointer;
            }

            & .monthDropdownMenu {
                position: absolute;
                top: calc(100% + 6px);
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                flex-direction: column;
                gap: 2px;
                min-width: 170px;
                max-height: none;
                overflow: hidden;
                padding: 4px;
                border: 1px solid var(--gray-90);
                border-radius: var(--default-radius);
                background: #FFF;
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
                z-index: 40;

                &[hidden] {
                    display: none !important;
                }
            }

            & .monthDropdownItem {
                display: block;
                padding: 6px 10px;
                border-radius: var(--default-radius);
                color: var(--text);
                text-decoration: none;
                text-align: center;
                line-height: 1.2;
                font-weight: 400;

                &:hover, &:focus {
                    background: var(--gray-95);
                    outline: none;
                }

                &.current {
                    background: var(--gray-90);
                    font-weight: 600;
                }
            }
        }
    }

    & .yearMonthNavigation .yearNavigation, & .yearMonthNavigation .MonthNavigation {
        justify-content: center;
    }

    & #liveClock {
        font-weight:600;
        margin-left: 4px;
        /* Cifre a larghezza fissa: Inter ha cifre proporzionali, quindi senza
           questo l'ora cambia larghezza di ~5px a ogni secondo e la riga della
           control bar viene ri-impaginata di continuo. */
        font-variant-numeric: tabular-nums;
    }

    & .iconsSet {
        & .icon.selector:not(:hover) {
            gap: 0px 5px;
            color:var(--not-selected);
        }

        & .element {
            display: inline-block;
        }
    }

    & #cpYearInput {
        border: none;
        font-size: 1.5em;
        font-family: inherit;
        font-weight: 700;
        width: 70px;
        text-align: center;
        background-color: transparent;
        color: inherit;
        border-radius: 4px;
        transition: border-color var(--short-transition) ease-in-out, color var(--short-transition) ease-in-out;
        border: 2px solid transparent;

        &:hover, &:focus {
            border-color:var(--global-link-color);
            color:var(--global-link-color);
            outline: none;
        }
    }

    & .weekNavigation {
        display: flex;
        align-items: center;
        /*gap: 8px;*/

        & .weekLabel {
            font-weight: 600;
        }

        & .weekArrow {
            display: inline-flex;
            align-items: center;

            &.disabled {
                pointer-events: none;
                opacity: 0.4;

                & .arrow {
                    color: var(--disabledIcons);
                }
            }
        }
    }

    & #cpWeekInput {
        border: none;
        font-size: 24px;
        font-family: inherit;
        font-weight: 700;
        width: 50px;
        text-align: center;
        background-color: transparent;
        color: inherit;
        border-radius: 4px;
        transition:border-color var(--short-transition) ease-in-out, color var(--short-transition) ease-in-out;
        border: 2px solid transparent;

        &:hover, &:focus {
            border-color:var(--global-link-color);
            color:var(--global-link-color);
            outline: none;
        }
    }

    & .dayNavigation {
        display: flex;
        align-items: center;

        & .dayArrow {
            display: inline-flex;
            align-items: center;
        }
    }

    & #cpDayInput {
        border: none;
        font-size: 1.5em;
        font-family: inherit;
        font-weight: 700;
        width: 45px;
        text-align: center;
        background-color: transparent;
        color: inherit;
        border-radius: 4px;
        transition:border-color var(--short-transition) ease-in-out, color var(--short-transition) ease-in-out;
        border: 2px solid transparent;

        &:hover, &:focus {
            border-color:var(--global-link-color);
            color:var(--global-link-color);
            outline: none;
        }
    }

    & #paperFormat {
        font-weight:600;
        letter-spacing: -0.03em;
        padding-left: 2px;
        padding-right: 2px;
    }

    & #paperOrientation .material-symbols-rounded {
        transition: transform 0.2s ease;
    }

    & .parametersBar,
    & .optionsBar {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1 0 100%;
        gap: 6px 12px;
        flex-wrap: wrap;
        height: 100%;
        margin-top: 0.5em;
        margin-bottom: 0.5em;

        & .parametersBarItem {
            display: flex;
            align-items: center;
            gap: 4px;
            white-space: nowrap;

            & label {
                cursor: pointer;
                user-select: none;
            }
        }

        & .parametersBarSelect {
            border: none;
            border-radius: 4px;
            padding: 2px 6px;
            font-size: inherit;
            font-family: inherit;
            background: transparent;
            color: inherit;
            cursor: pointer;
            background-color: color-mix(in srgb, var(--global-background) 60%, white);
            font-weight: 600;
        }

        & .parametersBarRadio {
            gap: 8px;

            & label {
                display: flex;
                align-items: center;
                gap: 3px;
            }
        }

        & .parametersBarRange {
            gap: 6px;

            & input[type="range"] {
                width: 60px;
            }

            & output {
                min-width: 1.2em;
                text-align: center;
                font-weight: 600;
                display: inline-block;
            }
        }
    }

    & .optionsBar {
        width: 100%;
        flex: 0 0 100%;
        justify-content: flex-start;
        gap: 0 12px;
        padding-top: 0.75em;
        padding-bottom: 0.75em;
        line-height: 1.75;

        & .optionsBarLabel {
            flex: 0 0 auto;
            font-weight: 700;
            letter-spacing: -0.01em;
            padding-right: 12px;
            border-right: 1px solid var(--gray-90);
        }

        & .optionsBarItems {
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            gap: 6px 12px;
            flex-wrap: wrap;
        }
    }
}

/* Forza --title su statusbar e TUTTI i suoi contenuti (icone incluse).
 * !important necessario: gli stati icona vista (.icon.selector / attiva)
 * usano selettori a 2 ID + classi (specificità più alta dell'ereditarietà).
 * Conseguenza voluta: gli stati selezionato/non-selezionato non si
 * distinguono più per colore. */
#cpControlBar,
#cpControlBar * {
/*    color: var(--title) !important; */
        letter-spacing: var(--tight);
}

@media screen and (max-width: 1023.98px) {
    #cpControlBar .optionsBar {
        justify-content: center;

        & .optionsBarLabel {
            padding-right: 0;
            border-right: none;
        }

        & .optionsBarItems {
            justify-content: center;
        }
    }
}

/* --- Layout view icon active states --- */
.yearLayout #cpControlBar .iconsSet #yearView .icon {
    color:var(--text);
}

.monthLayout #cpControlBar .iconsSet #monthView .icon {
    color:var(--text);
}

/* Solo la view monthlist "vera" attiva l'icona monthlist nella controlbar.
 * publicholidays e leapyear ereditano la classe .monthListLayout per
 * piggyback di stile (vedi pageBegin.php) ma NON sono monthlist a livello
 * di navigazione: escluse esplicitamente.
 */
.monthListLayout:not(.publicHolidaysLayout):not(.leapYearLayout) #cpControlBar .iconsSet #monthListView .icon {
    color:var(--text);
}

.weekLayout #cpControlBar .iconsSet #weekView .icon {
    color:var(--text);
}

.dayLayout #cpControlBar .iconsSet #dayView .icon {
    color:var(--text);
}

/*#yearInput*/

#calpro.orientation-landscape #cpControlBar #paperOrientation .material-symbols-rounded {
    transform: rotate(-90deg);
}

#calpro.orientation-portrait #cpControlBar #paperOrientation .material-symbols-rounded {
    transform: rotate(0deg);
}

#calpro #cpControlBar {
    & .yearMonthNavigation a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        vertical-align: middle;

        & .arrow {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
    }

    & .iconsSet {
        align-items: center;
    }

    & .region {
        margin: 0;
        line-height: 1.1;
        font-size: 1.5em;
        font-weight: 700;
    }

    & .iconsSet .cpControlBtn, & .iconsSet .custom-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        vertical-align: middle;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        text-decoration: none;
        font-weight: 800;
        font-family: 'JetBrains Mono', monospace;
        min-width: 28px;
    }

    & .iconsSet .cpControlBtn .icon, & .iconsSet .custom-btn .icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        font-size: 2em;
    }

    & .element.separator {
        margin-inline-end: 15px !important;
        margin-right: 15px !important;
    }
}

@media screen and (min-width: 1280px), print {
    #cpControlBar {
        gap: 0px 20px;

        & .calendar.heading {
            flex: 1 1 0;
            display: flex;
            align-items: baseline;
            text-align: left;
            flex-wrap: wrap;
            align-content: center;
        }

        & .yearMonthNavigation {
            flex: none;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        & .region {
            flex: none;
            text-align: left;
        }

        & .time {
            justify-content: left;
            margin-left: 30px;
        }

        & .parametersBar,
        & .optionsBar {
            flex: none;
            margin-top: 0;
            margin-bottom: 0;
        }
    }
}

/*=============================*/
/*=== EVENTS*/
/*=============================*/
#cpCalendar.showEventsGeneral {
    & .day.bgEvent .standardContent, & .day.bgEvent .dayName {
        font-weight: var(--datario-event-weight);   /* stato giorno (globale, tutti i layout) */
    }

    /*#cpCalendar.showEventsGeneral .day .standardContent
    {
    	aspect-ratio:1 /1;
    }*/
    & .day .secondaryEvents, & .day .mainEvents {
        position: absolute;
        left: 0;
        lli right: 0;
        top: 0;
        bottom: 0;
        z-index: 20;
    }

    & .day .secondaryEvents, & .day .mainEvents > span {
        display: none;
    }

    & .day .secondaryEventsBadge {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 21;
        display: none;
        /* cos\EC non blocca il click */
    }

    & .day:not(.bgEvent):not(.today) .secondaryEventsBadge.active {
        background-color:var(--text);
        /*background-color: #6565DD;*/
    }

    & .day .mainEvents {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 0;
        order: 2;
    }

    & .day .mainEventsBadge {
        position: absolute;
        left: auto;
        top: auto;
        right: 0.2em;
        bottom: 0.65em;
        z-index: 1;
        width: 5px;
        height: 5px;
        /* background: white; */
        border-radius: 100%;
        font-size: 8px;
        font-weight:600;
        visibility: hidden;
        color: rgba(255, 255, 255, 0.75);

        &.active {
            visibility: visible;
        }
    }

    & .day .secondaryEvents {
        order: 3;
    }
}

.day .mainEventsBadge {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
}

.monthLayout #cpCalendar.showEventsGeneral .day .secondaryEventsBadge, .monthLayout #cpCalendar.showEventsGeneral .day .mainEventsBadge {
    right: 12px;
    bottom: 10px;
}

#cpCalendar:not(.showEventsGeneral) {
    & .secondaryEvents, & .secondaryEventsBadge, & .mainEvents, & .mainEventsBadge {
        display: none !important;
    }
}

/*=============================*/
/*=== CALENDAR*/
/*=============================*/
/*GENERALI*/
/*.nodisplay
{
	visibility: hidden;
}*/
.copyMonthIcon {
    font-size: 22px !important;
    font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 22;
    opacity: 0;
    transition:opacity var(--short-transition) ease-in-out 0s, color;
}

.showToday .day.today, .showToday .dayHeader.today {
    outline: 3px solid black;
    outline-offset: 0px;
    color: black;
    border-radius: 1px;
    z-index: 100;
}

.day .standardContent {
    z-index: 10;
    position: relative;
    display: block;
    margin: 0 auto;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.showToday .container-cp .day.today .standardContent {
    font-weight: var(--datario-today-weight);   /* stato giorno (globale, tutti i layout) */
}

.secondaryEvents > span, .mainEvents > span {
    display: inline-block;
    text-align: left;
    padding: 0.19em 0.31em;
    height: fit-content;
    font-weight:500;
    font-size: var(--testo-piccolo3);
    border-radius: var(--default-radius-small);
    color:var(--text);
    margin-bottom: 1px;
    line-height: 1.2;
}

.secondaryEvents > span:last-child, .mainEvents > span:last-child {
    margin-bottom: 0;
}

.secondaryEvents > span.allDay {
    background:var(--event-color);
    color: white;

    & .eventTitleLabel {
        display: inline-block;
    }
}

.secondaryEvents > span.hasTime {
    display: inline-block;
    position: relative;
    padding-left: 13px;
    margin-left: 0;
    padding-top: 2px;
    padding-bottom: 2px;

    &::before {
        content: '\2022';
        position: absolute;
        left: 0;
        top: 0;
        font-size: 1.3em;
        line-height: 1;
        color: currentColor;
    }

    & .eventTimeLabel {
        display: inline;
    }
}

.day.bgEvent:not(.sunday) .secondaryEvents span {
    color: white;
}

.mainEvents > span {
    color: white;
}

.allDay {
}

.secondaryEvents, .mainEvents {
    width: 100%;
}

.mainEvents + .secondaryEvents {
    margin-top: 2px;
}

#cpCalendar > .month.container-cp, #cpCalendar .weekendCard,
:is(.countdownLayout, .timecalculatorLayout) .cd-picker .month.container-cp,
.countdownLayout #cpCountdownContainer .cd-ev-card,
.countdownLayout #cpCountdownContainer .cd-empty,
.countdownLayout #cpCountdownContainer #cdUserUnits .cd-unit {
    box-shadow: var(--card-shadow);
}

#cpCalendar > .month.container-cp,
:is(.countdownLayout, .timecalculatorLayout) .cd-picker .month.container-cp,
.countdownLayout #cpCountdownContainer .cd-ev-card,
.countdownLayout #cpCountdownContainer .cd-empty {
    border-radius:var(--default-radius);
    position: relative;
}

.showEventsGeneral .month.container-cp .day.bgEvent {
    background-color:var(--main-holiday-bg);
}

/**/
/**/
/**/
/*inline or multiple line events*/
/* Calendar main  container*/
#cpCalendar {
    /* Base font del calendario = global font del tema (15px). Il fallback 15px
       serve all'export, che NON carica yootheme: cosi' anteprima ed export
       restano allineati e coerenti col resto del sito. html resta 16px → i rem
       non cambiano. */
    font-size: var(--global-font-size, 15px);
    margin: 0 auto;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    gap: 1em;

    & .month.container-cp .layoutTitle {
        & .monthHeaderYear {
            color: var(--lightGray);
            /*font-size: 0.8em;*/
            font-weight: 600;
            letter-spacing: -0.03em;
            transition: inherit;
        }

        &:hover .monthHeaderYear {
            color:var(--global-link-color);
        }
    }

    &:not(.showHeaderYear) .month.container-cp .layoutTitle .monthHeaderYear {
        display: none;
    }
}

/*=============================*/
/*=== yearLayout                */
/*=============================*/
.yearLayout {
    /* --- month container --- */
    & .month.container-cp {
        background: white;
        padding: 1em 0.5em 2em 0.5em;
        flex: 1 1 285px;
        max-width: 355px;
        text-align: center;
        overflow: hidden;

        & .layoutTitle {
            display: inline-block;
            text-transform: capitalize;
            margin-top: 0;
            margin-bottom: 0.5em;
            font-size: var(--datario-title-size);   /* preset GENERALE */
            line-height: 1.3;
        }

        & .column {
            flex: 1 1 0;
            text-align: center;
            padding: 0 1px;
            /*overflow: hidden;*/
            white-space: nowrap;
            text-overflow: ellipsis;
            min-width: 0;

            &.weekNumber {
                max-width: 1.9rem;
                font-weight: var(--datario-weeknum-weight);   /* preset GENERALE */
                font-size: var(--datario-weeknum-size);       /* preset GENERALE */
                position: relative;
                visibility: hidden;
            }
        }

        & .header, & + .week.container-cp {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        & .header {
            margin-bottom: 5px;
            display: none;

            & .dayName {
                color:var(--gray);
                font-weight: var(--datario-dayname-weight);   /* preset GENERALE (condiviso) */
                font-size: var(--datario-dayname-size);   /* preset GENERALE */
                text-transform: capitalize;
            }
        }

        & .day {
            flex: 1 1;
            text-align: center;
            /*margin: 0 1px;*/
            margin: 1px;
            border-radius: var(--default-radius-small);
            font-weight: var(--datario-num-weight);   /* preset GENERALE */
            aspect-ratio:1/1;
            align-content: center;
            position: relative;
            /*background: var(--month-day-bg);*/

            & .yearDay {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                display: none;
                align-items: center;
                justify-content: center;
                font-size: 0.7em;
                letter-spacing: 0.03em;
                z-index: 10;
                font-weight:600;
            }

            & .standardContent {
                font-size: var(--datario-num-size);   /* preset GENERALE */
            }
        }
        & .day.today {
            border-radius: 1px;
            z-index: 100;
        }


        & .sunday {
            background-color:var(--sunday-bg);
            font-weight: var(--datario-sunday-weight);   /* preset GENERALE (condiviso con MONTH) */
            color: #000000;
        }

        & .ghost {
            visibility: hidden;
            color:var(--lightGray);
            opacity:var(--ghostDayOpacity);
        }

        & .btnCopy {
            height: 30px;
            width: 30px;
            border: none;
            border-radius: var(--default-radius);
            background: transparent;
            cursor: pointer;
            color: var(--gray);
            font-size: 1.3em;
            position: absolute;
            right: 10px;
            top: 10px;

            &:hover {
                color:var(--global-link-color);
            }
        }
    }

    & .month.container-cp:hover .copyMonthIcon {
        opacity: 1;
    }

    /* --- week number visibility --- */
    & .showWeekLeft .month.container-cp .column.weekNumber.left {
        visibility: visible;
    }

    & .showWeekRight .month.container-cp .column.weekNumber.right {
        visibility: visible;
    }

    & .week.container-cp {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* --- ghost days & header visibility --- */
    & .showGhostDays .month.container-cp .ghost {
        visibility: visible;
    }

    & .showHeader .month.container-cp .header {
        display: flex;
    }

    /* --- day number display modes --- */
    & #cpCalendar.showMonthDayNumber .yearDay {
        display: none;
    }

    & #cpCalendar.showYearDayNumber .standardContent {
        display: none;
    }

    & #cpCalendar.showYearDayNumber .yearDay {
        display: flex;
    }

    /* --- year events --- */
    & #cpCalendar .month.container-cp .day .mainEventsBadge,
    & #cpCalendar .month.container-cp .day .mainEvents,
    & #cpCalendar .month.container-cp .day .secondaryEvents {
        display: none;
    }

    & #cpCalendar.showYearEvents .day .secondaryEventsBadge.active {
        position: absolute;
        display: inline-block;
        color: transparent;
        background: var(--text);
        width: 4px;
        height: 4px;
        border-radius: 100%;
        top: auto;
        bottom: 3px;
        margin: 0 auto;
    }

    & #cpCalendar.showYearEvents .day.bgEvent .secondaryEventsBadge.active,
    & #cpCalendar.showYearEvents.showToday .day.today .secondaryEventsBadge.active {
        background: #FFF;
    }
}

@media screen and (min-width: 1024px), print and (min-width: 1024px) {
    /* dayName YEAR su desktop: stesso token del preset GENERALE (nesting). */
    .yearLayout .month.container-cp {
        & .header .dayName {
            font-size: var(--datario-dayname-size);   /* preset GENERALE */
        }
    }
}

/*=============================*/
/*=== monthLayout               */
/*=============================*/
.monthLayout {
    /* --- month container --- */
    & .month.container-cp {
        background: white;
        padding: 1em 0.5em 1em 0.5em;
        flex: 1 1 285px;
        max-width: 100%;
        text-align: center;
        overflow: hidden;

        & .layoutTitle {
            display: inline-block;
            text-transform: capitalize;
            margin-bottom: 0.5em;
            font-size: var(--datario-month-title-size);   /* preset MONTH (rimosso text-transform duplicato) */
        }

        & .column {
            flex: 1 1 0;
            text-align: center;
            padding: 0 1px;
            /*overflow: hidden;*/
            white-space: nowrap;
            text-overflow: ellipsis;
            min-width: 0;

            &.weekNumber {
                max-width: 1.9rem;
                letter-spacing: 0em;
                font-weight: var(--datario-weeknum-weight);       /* preset GENERALE (condiviso) */
                font-size: var(--datario-month-weeknum-size);     /* preset MONTH */
                position: relative;
                visibility: hidden;
            }
        }

        & .header {
            margin-bottom: 0.3125em;
            display: none;

            & .dayName {
                color:var(--gray);
                font-weight: var(--datario-dayname-weight);   /* preset GENERALE (condiviso) */
                font-size:clamp(0.8em, 2.7vw, 1.2em);
                text-transform: capitalize;
            }
        }

        & .day {
            flex: 1 1;
            text-align: center;
            /*margin: 0 1px;*/
            margin: 1px;
            border-radius: 4px;
            font-weight: 400;
            aspect-ratio:1/1;
            align-content: center;
            position: relative;
            background: var(--month-day-bg);

            & .utility {
                /* Ancoraggio top-right anche in mobile (offset ridotti vs
                   desktop). Prima era un overlay a cella intera (eredità
                   del comportamento originale della .yearDay, pensata come
                   full-cell overlay ma qui sempre display:none) e l'icona
                   moon finiva al top-center sovrapposta alla .standardContent. */
                position: absolute;
                top: 2px;
                right: 4px;
                bottom: auto;
                left: auto;
                display: flex;
                align-items: center;
                gap: 0.3em;
                z-index: 11;
            }

            & .yearDay {
                display: none;
                font-size: var(--testo-piccolo4);
                letter-spacing: 0em;
                font-weight: 600;
                line-height: 1;
            }

            & .standardContent {
                font-size:clamp(1em, 4.2vw, 12em);
            }
        }

        & .sunday {
            background-color:var(--sunday-bg);
            font-weight: var(--datario-sunday-weight);   /* preset GENERALE (condiviso con MONTH) */
            color: #000000;
        }

        & .ghost {
            visibility: hidden;
            color:var(--lightGray);
            opacity:var(--ghostDayOpacity);
        }

        &:hover .copyMonthIcon {
            opacity: 1;
        }

        & .btnCopy {
            height: 30px;
            width: 30px;
            border: none;
            border-radius: var(--default-radius);
            background: transparent;
            cursor: pointer;
            color: var(--gray);
            font-size: 1.3em;
            position: absolute;
            top: 20px;
            right: 20px;

            &:hover {
                color:var(--global-link-color);
            }
        }
    }

    /* --- week container --- */
    & .week.container-cp {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* --- week number visibility --- */
    & .showWeekLeft .month.container-cp .column.weekNumber.left {
        visibility: visible;
    }

    & .showWeekRight .month.container-cp .column.weekNumber.right {
        visibility: visible;
    }

    /* --- ghost days & header visibility --- */
    & .showGhostDays .month.container-cp .ghost {
        visibility: visible;
    }

    /*
    .monthLayout .showToday .container-cp .day.today .standardContent {
        height: clamp(26px, 7vw, 65px);
        width: clamp(26px, 7vw, 65px);
    }
    */
    & .showHeader .month.container-cp .header {
        display: flex;
    }

    /* --- event badges --- */
    & #cpCalendar .month.container-cp .day .mainEventsBadge,
    & #cpCalendar .month.container-cp .day .secondaryEventsBadge {
        display: none;
    }

    /* --- events display --- */
    & #cpCalendar.showEventsGeneral {
        & .month.container-cp .day .mainEvents {
            display: none;
        }

        & .day .secondaryEvents {
            display: block;
            position: relative;
            white-space: normal;
            margin-top: 0px;

            & > span {
                background: var(--event-color);
                display: inline-block;
                color: transparent;
                padding: 0;
                width: clamp(var(--event-dot-size), 1.2vw, 8px);
                height: clamp(var(--event-dot-size), 1.2vw, 8px);
                margin-left: clamp(1px, 0.4vw, 3px);
                margin-right: clamp(1px, 0.4vw, 3px);
                margin-bottom:clamp(2px, 0.4vw, 5px);
                aspect-ratio: 1 / 1;

                & > span {
                    display: none;
                }
            }
        }
    }

    & #cpCalendar.hideYearDayNumber .day .yearDay {
        /* display:none (non visibility:hidden): così lo yearDay esce dal
           flex flow della .utility e l'icona moonphase "scivola" a destra
           prendendo il suo posto. Con visibility:hidden lo yearDay resta
           uno spazio invisibile e l'icona non si sposta. */
        display: none;
    }
}

/* Shared rule: monthLayout header + yearLayout week container (spans two layout contexts) */
.monthLayout .showHeader .month.container-cp .header, .yearLayout .week.container-cp {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

@media screen and (min-width: 640px), print and (min-width: 640px) {
    .monthLayout .week.container-cp, .monthLayout .header {
        column-gap: clamp(1px, 0.75em, 0.75em);
    }

    .monthLayout .week.container-cp:not(:last-child), .monthLayout #cpCalendar .header {
        margin-bottom: clamp(1px, 0.75em, 0.75em);
    }
}

@media screen and (max-width: 1023.98px) {
    /* Icona fase lunare: visibile solo da 1024px in su (celle troppo piccole
       in mobile per accompagnarla al numero del giorno). */
    .monthLayout .month.container-cp .day .utility .moon-icon {
        display: none;
    }

    .monthLayout #cpCalendar.showEventsGeneral .day .secondaryEvents {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-wrap: nowrap;
        overflow: hidden;
        margin: 0;
        padding-bottom: clamp(1px, 0.8vw, 11px);
    }

    .monthLayout #cpCalendar.showEventsGeneral .day .secondaryEvents > span {
        width: clamp(3px, 1.2vw, 6px);
        /*height: clamp(3px, 1.2vw, 6px);*/
        /*min-width: clamp(3px, 1.2vw, 6px);*/
        /*min-height: clamp(3px, 1.2vw, 6px);*/
        margin: 0 1px;
        margin-bottom: 0;
        padding: 0;
        aspect-ratio:1 / 1;
    }
}

@media screen and (min-width: 1024px), print and (min-width: 1024px) {
    /* Cella MONTH "espansa" (desktop ≥1024px): numero del giorno in box fisso
       + eventi inline sotto. Pesi/dimensioni/spaziature dal preset MONTH
       (:root, --datario-month-*). Riscritto in nesting su .month.container-cp. */
    .monthLayout .month.container-cp {
        & .day {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            padding: var(--datario-month-day-padding);   /* preset MONTH */
            border-radius: var(--default-radius);
            position: relative;
            transition: box-shadow var(--short-transition) ease-in-out, transform var(--short-transition) ease-in-out;

            & .standardContent {
                font-size: var(--datario-month-num-size);      /* preset MONTH */
                font-weight: var(--datario-month-num-weight);  /* preset MONTH */
                width: var(--datario-month-num-box);           /* preset MONTH */
                height: var(--datario-month-num-box);          /* preset MONTH */
                order: 1;
                margin: 0px 0px 5px 0px;
            }

            /* (storico, disattivato) ingrandimento del giorno "oggi":
               & .today .standardContent { height: 30px; width: 30px; padding: 3px; margin: 0 -3px 0 -1px; } */

            & .utility {
                position: absolute;
                top: 15px;
                right: 12px;
                bottom: auto;
                left: auto;
                display: flex;
                align-items: center;
                gap: 0.3em;
                /* Altezza minima = altezza naturale dell'icona moonphase
                   (font-size: 1em, line-height: 1 → box 1em × 1em).
                   Senza questa, quando manca l'icona la .utility si riduce
                   all'altezza del solo .yearDay (~0.7em) e align-items:center
                   "schiaccia" lo yearDay al centro di uno spazio più basso,
                   spostandolo visivamente in alto. */
                min-height: 1em;
            }

            & .yearDay {
                display: block;
                color: var(--gray);
            }
        }

        & .header .dayName {
            font-size: var(--datario-month-dayname-size);   /* preset MONTH */
        }
    }

    .monthLayout #cpCalendar.showEventsGeneral .day.container-cp .secondaryEvents, .monthLayout #cpCalendar.showEventsGeneral .month.container-cp .day .mainEvents {
        position: relative;
        z-index: 20;
        display: flex;
        box-sizing: border-box;
        flex-direction: column;
        color: var(--title);
    }

    .monthLayout #cpCalendar.showEventsGeneral .day .mainEvents > span {
        display: inline-block;
        background: transparent;
        border: 1px solid;
        white-space: normal;
    }

    .monthLayout #cpCalendar.showEventsGeneral .day .secondaryEvents {
        margin-top: 0.125em;
    }

    .monthLayout #cpCalendar.showEventsGeneral .day .secondaryEvents > span {
        background: var(--event-color);
        display: block;
        color: transparent;
        width: auto;
        height: auto;
        aspect-ratio:auto;
        margin: 0 0 0.125em 0;
        padding: 0.19em 0.31em;
    }

    .monthLayout #cpCalendar.showEventsGeneral .day .secondaryEvents > span > span {
        display: inline-block;
        color: white;
        text-align: left;
    }

    .monthLayout #cpCalendar.showEventsGeneral:not(.multipleLineEvents) .day .mainEvents > span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .monthLayout #cpCalendar.showEventsGeneral:not(.multipleLineEvents) .day .secondaryEvents > span {
        display: flex !important;
        column-gap: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .monthLayout #cpCalendar.showEventsGeneral:not(.multipleLineEvents) .day .secondaryEvents > span > span.eventTitleLabel {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .monthLayout #cpCalendar .day .secondaryEvents {
        margin-top: 2px;
    }

    .monthLayout #cpCalendar.showEventsGeneral .day .secondaryEvents > span.hasTime {
        display: inline-block;
        position: relative;
        padding-left: 13px;
        margin-left: 0;
        padding-top: 2px;
        padding-bottom: 2px;
        background: transparent;
        color:var(--text);
    }

    .monthLayout #cpCalendar.showEventsGeneral .day.bgEvent .secondaryEvents > span.hasTime {
        color: white;
    }

    .monthLayout #cpCalendar.showEventsGeneral .day .secondaryEvents > span.hasTime > span {
        color: inherit;
    }

    .monthLayout #cpCalendar.showEventsGeneral .day .secondaryEvents > span.hasTime .eventTimeLabel, .monthLayout #cpCalendar.showEventsGeneral .day .secondaryEvents > span.hasTime > span {
        display: inline;
    }

    .monthLayout .month.container-cp .column.weekNumber {
        max-width: 3rem;
    }

    .monthLayout .month.container-cp {
        padding: 2.5em 1em 5em 1em;
    }
}

/*buttonCopy*/

/*============================================*/
/*=== monthListLayout (layout key: monthlist)*/
/*============================================*/
/* DEBUG BADGE START: calendar render info (rimuovere dopo il debug) */
#calpro {
    --debug-render-mode: "screen";
    --debug-breakpoint: "@base<640";
    --debug-orientation: "unknown";
    --debug-format: "unknown";
    --debug-badge-bg: #000000;
    --debug-badge-color: #ffffff;

    &.orientation-landscape {
        --debug-orientation: "landscape";
    }

    &.orientation-portrait {
        --debug-orientation: "portrait";
    }

    &.format-a4 {
        --debug-format: "a4";
    }

    &.format-a3 {
        --debug-format: "a3";
    }

    & .renderDebugBadge {
        --debug-badge-alpha: 0.75;
        position: absolute;
        top: 6px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        z-index: 50;
        max-width: 360px;
        padding: 6px 8px;
        border-radius: var(--default-radius);
        background-color: rgb( var(--debug-badge-bg-rgb) / var(--debug-badge-alpha) );
        color: var(--debug-badge-color);
        font-family: "Courier New", Courier, monospace;
        font-size: 12px;
        line-height: 1.3;
        letter-spacing: 0.02em;
        pointer-events: none;
        opacity: 0.98;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
        text-transform: uppercase;
        text-align: center;

        &::before {
            content: "DBG " attr(data-mode) " " var(--debug-breakpoint) " " var(--debug-orientation) " " var(--debug-format) "\A" "W=" attr(data-width) " H=" attr(data-height);
            display: block;
            font-weight: 700;
            white-space: pre;
        }
    }
}

/* Badge di debug allineato ai 4 breakpoint reali del tema yootheme_calpro
   (@s 640 / @m 768 / @l 1024 / @xl 1280), non più alla scala Bootstrap. */
@media screen and (min-width: 640px), print and (min-width: 640px) {
    #calpro {
        --debug-breakpoint: "@s>=640";
        --debug-badge-bg-rgb: 11 82 91;
        /* #0b525b */
        --debug-badge-alpha: 1;
    }
}

@media screen and (min-width: 768px), print and (min-width: 768px) {
    #calpro {
        --debug-breakpoint: "@m>=768";
        --debug-badge-bg-rgb: 0 95 115;
        /* #005f73 */
        --debug-badge-alpha: 1;
    }
}

@media screen and (min-width: 1024px), print and (min-width: 1024px) {
    #calpro {
        --debug-breakpoint: "@l>=1024";
        --debug-badge-bg-rgb: 20 69 82;
        /* #144552 */
        --debug-badge-alpha: 1;
    }
}

@media screen and (min-width: 1280px), print and (min-width: 1280px) {
    #calpro {
        --debug-breakpoint: "@xl>=1280";
        --debug-badge-bg-rgb: 42 111 151;
        /* #2a6f97 */
        --debug-badge-alpha: 1;
    }
}

@media print {
    #calpro {
        --debug-render-mode: "print";
        --debug-badge-bg: #ff0066;
        --debug-badge-color: #ffffff;
    }
}

/* DEBUG BADGE END */

/* "Evidenzia oggi" SPENTO: nel datario MONTHLIST today torna un giorno normale,
   quindi il suo bordo inferiore (escluso da `.day:not(:last-child):not(.today)`
   più sotto, valido quando l'opzione è attiva) va ripristinato.
   Gate su #cpCalendar:not(.showToday) — la classe showToday sta su #cpCalendar. */
.monthListLayout #cpCalendar:not(.showToday) .month.container-cp .innerContainer .day.today:not(:last-child) {
    border-bottom: var(--daylist-bottom-border) solid #EEE;
}

/* --- monthListLayout: month container --- */
.monthListLayout {
    & .month.container-cp {
        background: white;
        padding: 0.5em;
        flex: 1 1 285px;
        max-width: 100%;
        text-align: center;
        overflow: hidden;

        & .header {
            display: none;
        }

        & .layoutTitle {
            display: inline-block;
            margin-bottom: 0.5em;
            font-size:clamp(1.7em, 6vw, 3.3em);
            text-transform: capitalize;
        }

        & .day {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 0.3125em 0.446em;
            font-weight: 400;
            flex-direction: row;
            flex-wrap: wrap;

            &.event .events.column {
                font-size: var(--testo-piccolo3);
                /*    margin-top: 0.625em;*/
                margin-bottom: 0.188em;
            }

            &.ghost {
                color:var(--lightGray);
                opacity:var(--ghostDayOpacity);
            }

            &.today .standardContent {
                /*    margin: -0.223em 0 -0.223em 0.268em;*/
                width: 85%;
                height: 85%;
                max-width: 30px;
                aspect-ratio: 1 / 1;
            }

            &.sunday {
                background-color:var(--sunday-bg);
                color:var(--title);
                font-weight: 700;
                border-radius:var(--default-radius);
            }
        }

        & .innerContainer {
            & .weekNumber {
                text-align: center;
                letter-spacing: 0em;
                font-weight: 600;
                font-size: var(--testo-piccolo4);
                flex: 0 0 3%;
                visibility: hidden;
                opacity: 0;
            }

            & .day:not(:last-child):not(.today) {
                border-bottom:var(--daylist-bottom-border) solid #EEE;
            }

            & .day.bgEvent:has(+ .day.sunday), & .day.bgEvent:has(+ .day.bgEvent), & .day.sunday:has(+ .day.bgEvent) {
                margin-bottom: var(--daylist-bottom-border);
            }
        }

        & .weekNumber.left {
            order: 1;
        }

        & .weekNumber.right {
            order: 20;
        }

        & .dayNumber {
            text-align: center;
            flex: 0 0 13%;
            align-items: center;
            order: 2;
        }

        & .dayName {
            flex: 1;
            text-align: left;
            padding-left: 1%;
            padding-right: 1%;
            text-transform: capitalize;
            order: 3;
            letter-spacing: var(--tight);
        }

        & .events .secondaryEvents {
            justify-content: flex-end;
        }

        & .yearDay {
            order: 4;
            flex: 0 0 3%;
            font-size: 0.464em;
            font-weight: 600;
            letter-spacing: 0em;
            text-align: center;
        }

        & .day.event .events.column .mainEvents + .secondaryEvents {
            margin-top: 0.3125em;
        }

        & .innerContainer .weekNumber.right {
            display: none;
        }

        &:hover .copyMonthIcon {
            opacity: 1;
        }

        & .btnCopy {
            height: 1.875em;
            width: 1.875em;
            border: none;
            border-radius: 4px;
            background: transparent;
            cursor: pointer;
            color: var(--gray);
            font-size: 1.3em;
            position: absolute;
            top: 0.9375em;
            right: 0.9375em;

            &:hover {
                color:var(--global-link-color);
            }
        }
    }

    /* --- ghost day visibility --- */
    & :not(.showGhostDays) .month.container-cp .day.ghost {
        display: none;
    }

    & .secondaryEvents > span.allDay + span.hasTime {
        margin-top: 0.234em;
    }

    /* --- border visibility rules --- */
    & .showEventsGeneral .month.container-cp .innerContainer .day:has(+ .day.bgEvent),
    & .month.container-cp .innerContainer .day:has(+ .day.sunday),
    & .month.container-cp .innerContainer .day.sunday,
    & .showEventsGeneral .month.container-cp .innerContainer .day.bgEvent,
    & :not(.showGhostDays) .month.container-cp .innerContainer .lastDayOfMonth {
        border-color: transparent;
    }

    /* --- events display --- */
    & #cpCalendar.showEventsGeneral .day .secondaryEventsBadge {
        display: none;
    }

    & #cpCalendar.showEventsGeneral .day .events {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        width: 100%;
        flex: 0 0 100%;
        order: 5;
        justify-content: flex-end;
        padding-left: 17%;
    }

    & #cpCalendar.showEventsGeneral .day .mainEvents,
    & #cpCalendar.showEventsGeneral .day .secondaryEvents {
        position: relative;
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 0px;
        flex-basis: 100%;
    }

    & #cpCalendar.showEventsGeneral .day .mainEvents > span,
    & #cpCalendar.showEventsGeneral .day .secondaryEvents > span {
        display: inline-block;
        width: 100%;
    }

    & #cpCalendar.showEventsGeneral .day .mainEvents > span {
        border: 1px solid white;
    }

    & #cpCalendar.showEventsGeneral .day .secondaryEvents > span.allDay {
        border:1px solid var(--event-color);
    }

    & #cpCalendar.showEventsGeneral .day.bgEvent {
        background-color:var(--main-holiday-bg);
        border-radius:var(--default-radius);
    }

    & #cpCalendar.hideYearDayNumber .day .yearDay {
        visibility: hidden;
    }

    /* --- week number visibility --- */
    & .showWeekRight .month.container-cp .innerContainer .monday .weekNumber.right {
        display: none;
    }

    /**/
    & .showWeekLeft .month.container-cp .innerContainer .weekNumber.left {
        visibility: visible;
    }

    & .showWeekRight .month.container-cp .innerContainer .weekNumber.right {
        visibility: visible;
    }

    /* --- firstdayofweek: left week number --- */
    & #cpCalendar[firstdayofweek="monday"].showWeekLeft .monday .weekNumber.left {
        opacity: 1;
    }

    & #cpCalendar[firstdayofweek="tuesday"].showWeekLeft .tuesday .weekNumber.left {
        opacity: 1;
    }

    & #cpCalendar[firstdayofweek="wednesday"].showWeekLeft .wednesday .weekNumber.left {
        opacity: 1;
    }

    & #cpCalendar[firstdayofweek="thursday"].showWeekLeft .thursday .weekNumber.left {
        opacity: 1;
    }

    & #cpCalendar[firstdayofweek="friday"].showWeekLeft .friday .weekNumber.left {
        opacity: 1;
    }

    & #cpCalendar[firstdayofweek="saturday"].showWeekLeft .saturday .weekNumber.left {
        opacity: 1;
    }

    & #cpCalendar[firstdayofweek="sunday"].showWeekLeft .sunday .weekNumber.left {
        opacity: 1;
    }

    /* --- firstdayofweek: right week number --- */
    & #cpCalendar[firstdayofweek="monday"].showWeekRight .monday .weekNumber.right {
        opacity: 1;
    }

    & #cpCalendar[firstdayofweek="tuesday"].showWeekRight .tuesday .weekNumber.right {
        opacity: 1;
    }

    & #cpCalendar[firstdayofweek="wednesday"].showWeekRight .wednesday .weekNumber.right {
        opacity: 1;
    }

    & #cpCalendar[firstdayofweek="thursday"].showWeekRight .thursday .weekNumber.right {
        opacity: 1;
    }

    & #cpCalendar[firstdayofweek="friday"].showWeekRight .friday .weekNumber.right {
        opacity: 1;
    }

    & #cpCalendar[firstdayofweek="saturday"].showWeekRight .saturday .weekNumber.right {
        opacity: 1;
    }

    & #cpCalendar[firstdayofweek="sunday"].showWeekRight .sunday .weekNumber.right {
        opacity: 1;
    }

    /* --- first day of month: always show week number --- */
    & .showWeekLeft .month.container-cp .innerContainer .firstDayOfMonth .weekNumber.left {
        opacity: 1;
    }

    & .showWeekRight .month.container-cp .innerContainer .firstDayOfMonth .weekNumber.right {
        opacity: 1;
    }

    /* --- inline/truncated events --- */
    & #cpCalendar.showEventsGeneral:not(.multipleLineEvents) .day .mainEvents > span {
        display: block;
        white-space: normal;
        overflow-wrap: break-word;
    }

    & #cpCalendar.showEventsGeneral:not(.multipleLineEvents) .day .secondaryEvents > span {
        display: flex !important;
        column-gap: 0.234em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    & #cpCalendar.showEventsGeneral:not(.multipleLineEvents) .day .secondaryEvents > span > span.eventTitleLabel {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/**/
@media only screen and (min-width: 1024px), print and (min-width: 1024px) {
    .monthListLayout .month.container-cp .dayNumber {
        flex: 0 0 4%;
    }

    .monthListLayout .month.container-cp {
        padding: 2.5em 2.5em 2.5em 2.5em;
    }

    .monthListLayout .month.container-cp .dayName {
        flex:0 0 clamp(0.893em, 16%, 16%);
    }

    .monthListLayout .month.container-cp .innerContainer .yearDay {
        order: 5;
        display: block;
    }

    .monthListLayout .month.container-cp .innerContainer .weekNumber.right {
        margin-right: 0;
    }

    .monthListLayout .month.container-cp .day {
        justify-content: space-between;
        font-size: 1.4em;
    }

    .monthListLayout #cpCalendar .day .events.column {
        flex: 0 0 74%;
        order: 5;
        margin-top: 0.125em;
        margin-bottom: 0.125em;
        padding-left: 22%;
        padding-right:clamp(0px, 1%, 1%);
        justify-content: space-between;
        min-width: 0;
        overflow: hidden;
    }

    .monthListLayout #cpCalendar:not(.unifiedEventList) .day .events.column {
        padding-left: 0px;
    }

    .monthListLayout #cpCalendar:not(.unifiedEventList) .day .events.column .mainEvents {
        flex: 1 0 30%;
    }

    .monthListLayout #cpCalendar:not(.unifiedEventList) .day .events.column .mainEvents span {
        font-weight: 600;
        letter-spacing: var(--tight);
    }

    .monthListLayout #cpCalendar:not(.unifiedEventList) .day .events.column .secondaryEvents {
        flex: 0 0 69.9%;
        margin-left: auto;
    }

    .monthListLayout #cpCalendar:not(.unifiedEventList) .day .events.column .mainEvents {
        padding-right: 3.5%;
    }

    .monthListLayout #cpCalendar:not(.unifiedEventList) .day .events.column .mainEvents > span {
        border: none;
        padding: 0px;
        font-size: 1em;
    }
}

/* =====================================================================
   monthListLayout — icona fase lunare come ::after di .dayName.column
   ---------------------------------------------------------------------
   Visibile su TUTTI i breakpoint (fuori da @media min-width:1024px).
   - position:relative su .dayName per ancorare l'icona
   - ::after absolute a destra, centrato verticalmente
   - Glifo + FILL + riflesso dipendono da data-moon-phase (PHP)
   - color:inherit → nei .day.bgEvent segue la regola generale bianca
   ===================================================================== */
.monthListLayout .month.container-cp .dayName {
    position: relative;
}

.monthListLayout .month.container-cp .dayName.column[data-moon-phase]::after {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    color: inherit;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* Mappa fasi → glifo + FILL (coerente con MoonPhasesService::PHASE_ICON_MAP):
   - new             → brightness_1, FILL 0 (contorno)
   - first_quarter   → brightness_2, FILL 1
   - full            → brightness_1, FILL 1
   - last_quarter    → brightness_2, FILL 1, riflesso orizzontale */
.monthListLayout .month.container-cp .dayName.column[data-moon-phase="new"]::after {
    content: 'brightness_1';
}
.monthListLayout .month.container-cp .dayName.column[data-moon-phase="first_quarter"]::after {
    content: 'brightness_2';
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
.monthListLayout .month.container-cp .dayName.column[data-moon-phase="full"]::after {
    content: 'brightness_1';
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
.monthListLayout .month.container-cp .dayName.column[data-moon-phase="last_quarter"]::after {
    content: 'brightness_2';
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
    transform: translateY(-50%) scaleX(-1);
}

/* Rispetta il flag showMoonPhases: quando è OFF, niente icona.
   NB: .monthListLayout è sullo STESSO elemento di #calpro (entrambe classi del
   wrapper), quindi va combinato con &, non usato come discendente. */
#calpro.monthListLayout:not(.showMoonPhases) .dayName.column::after {
    display: none;
}

/* =====================================================================
   WEEK view — Fase lunare come ::after di .dayNumber
   Pattern gemello di .monthListLayout: data-moon-phase viene da PHP
   (eventlayer-1), il glifo/FILL/riflesso dipende dal valore.
   .dayHeader ha position:relative → il ::after si posiziona a destra
   della cella header, verticalmente centrato.
   color:inherit → nei .dayHeader.bgEvent segue la regola generale bianca.
   ===================================================================== */
.weekLayout .weekHeader .dayHeader {
    position: relative;
}

.weekLayout .weekHeader .dayHeader .dayNumber[data-moon-phase]::after {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    position: absolute;
    right: 15%;
    top: calc(50% - 1px);
    transform: translateY(-50%);
    color: inherit;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.weekLayout .weekHeader .dayHeader .dayNumber[data-moon-phase="new"]::after {
    content: 'brightness_1';
}
.weekLayout .weekHeader .dayHeader .dayNumber[data-moon-phase="first_quarter"]::after {
    content: 'brightness_2';
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
.weekLayout .weekHeader .dayHeader .dayNumber[data-moon-phase="full"]::after {
    content: 'brightness_1';
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}
.weekLayout .weekHeader .dayHeader .dayNumber[data-moon-phase="last_quarter"]::after {
    content: 'brightness_2';
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
    transform: translateY(-50%) scaleX(-1);
}

/* Gating flag admin: classi combinate sullo stesso #calpro. */
#calpro.weekLayout:not(.showMoonPhases) .dayNumber::after {
    display: none;
}

/* TODAY (senza bgEvent): .dayNumber è un cerchio colorato con testo bianco,
   ma il ::after è posizionato sulla .dayHeader (fuori dal cerchio) → ereditare
   il bianco lo rende invisibile sul background neutro. Se è anche .bgEvent,
   tutta la header ha bg colorato e il bianco va bene → lasciamo l'eredità. */
.weekLayout .weekHeader .dayHeader.today:not(.bgEvent) .dayNumber[data-moon-phase]::after {
    color: var(--text);
}

/* =====================================================================
   WEEK / DAY timeGrid — Icona fase lunare come ::before di .eventTitleLabel.
   data-moon-phase propagato da PHP (dataAttributes dell'evento eventlayer-1).

   NB: il comportamento inline/wrap dei badge eventi è ora gestito da regole
   generali per-view (sezione WEEK inline + DAY inline più avanti nel file),
   non più da override moonphase-specifici. Qui restano solo le regole del
   glifo Material (::before) — centraggio baseline, FILL/reflection per fase.
   ===================================================================== */
.eventBlock[data-moon-phase] .eventTitleLabel::before {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    color: inherit;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;
    margin-right: 0.35em;
    font-size: 1em;
    vertical-align: -0.15em;
    display: inline-block;
}

.eventBlock[data-moon-phase="new"] .eventTitleLabel::before {
    content: 'brightness_1';
}
.eventBlock[data-moon-phase="first_quarter"] .eventTitleLabel::before {
    content: 'brightness_2';
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 16;
}
.eventBlock[data-moon-phase="full"] .eventTitleLabel::before {
    content: 'brightness_1';
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 16;
}
.eventBlock[data-moon-phase="last_quarter"] .eventTitleLabel::before {
    content: 'brightness_2';
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 16;
    transform: scaleX(-1);
}

/* =====================================================================
   WEEK view — Badge eventi sempre inline (tempo + titolo sulla stessa
   riga), compatibilmente con l'opzione "testo eventi a capo"
   (classe .multipleLineEvents su #cpCalendar).

   Default (single-line, senza .multipleLineEvents):
     - tempo + titolo inline
     - se il testo supera la larghezza del blocco → ellipsis
     - nowrap + text-overflow:ellipsis spostati sul .eventBlock (non più
       sul titolo, perché inline non rispetta overflow/text-overflow)

   Con .multipleLineEvents:
     - tempo + titolo inline
     - testo va a capo DENTRO l'altezza fissa del blocco
     - eccesso verticale clippato da overflow:hidden nativo del block
       (il blocco NON si allarga — a differenza di DAY)

   Specificità (1,4,0) via .dayColumn: vince sui `display:block` nested
   delle label (1,3,0) e matcha la regola `:not(.multipleLineEvents)
   .eventBlock .eventTitleLabel` (1,4,0) spostando il suo effetto.
   ===================================================================== */
.weekLayout #cpCalendar .dayColumn .eventBlock .eventTimeLabel,
.weekLayout #cpCalendar .dayColumn .eventBlock .eventTitleLabel {
    display: inline;
    vertical-align: baseline;
}
.weekLayout #cpCalendar .dayColumn .eventBlock .eventTimeLabel {
    margin-right: 0.35em;
}

/* Single-line mode: nowrap + ellipsis a livello block.
   Il block ha già overflow:hidden (vedi riga ~4093), quindi ellipsis si
   applica correttamente con nowrap + text-overflow:ellipsis. */
.weekLayout #cpCalendar:not(.multipleLineEvents) .dayColumn .eventBlock {
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*btnCopy*/

/*=====================================================*/
/*=== publicHolidaysLayout (layout key: publicholidays)
 *
 * Eredita tutte le regole di .monthListLayout (la classe \E8
 * presente contemporaneamente sul wrapper #calpro).
 * Le regole qui sotto sono solo le varianti specifiche:
 *   - colonna .monthName aggiuntiva dopo .dayName
 *   - .events.column ridotta per fare spazio al mese
 *   - nasconde il selettore mese nella control bar
 *=====================================================*/
.publicHolidaysLayout {
    /* --- mainEvents span styling --- */
    &.monthListLayout #cpCalendar .day .events.column .mainEvents > span {
        font-weight: 700;
        padding-left: 0px;
        letter-spacing: var(--tight);
    }

    &.monthListLayout #cpCalendar .day.sunday .events.column .mainEvents > span {
        color:var(--title);
        border: none;
    }

    /* --- publicHolidays: neutralizza l'effetto del check "eventi datario" ---
     * 1) Il background rosso dei giorni bgEvent non deve apparire
     * 2) I colori dei caratteri restano quelli normali (non bianchi)
     * 3) Gli eventi restano sempre visibili, indipendentemente dal check
     */
    /* 1a - background trasparente (override regola generica + monthListLayout)
     *      esclusa la domenica che mantiene lo stile originale di monthList */
    &.monthListLayout #cpCalendar .day.bgEvent:not(.sunday),
    & .showEventsGeneral .month.container-cp .day.bgEvent:not(.sunday),
    &.monthListLayout #cpCalendar.showEventsGeneral .day.bgEvent:not(.sunday) {
        background-color: transparent;
        border-radius: 0;
        border-bottom: var(--daylist-bottom-border) solid #EEE;
    }

    /* 1a-dom - domenica: mantiene stile monthList (background, radius, colore) */
    &.monthListLayout #cpCalendar .day.sunday.bgEvent,
    &.monthListLayout #cpCalendar.showEventsGeneral .day.sunday.bgEvent {
        background-color: var(--sunday-bg);
        color: var(--title);
        font-weight: 700;
        border-radius: var(--default-radius);
    }

    /* 1a-dom - testo domenica: forza var(--title) sugli elementi figli
     * (override della regola base che li mette bianchi su bgEvent) */
    & #cpCalendar .day.sunday.bgEvent .standardContent,
    & #cpCalendar .day.sunday.bgEvent .dayName,
    & #cpCalendar .day.sunday.bgEvent .monthName {
        color: var(--title);
    }

    /* 1b - bordi: in publicHolidays TUTTI i giorni sono bgEvent, quindi la regola
     *      monthList (riga 2139) rende tutti i border transparent. Qui ripristiniamo
     *      il border visibile su tutte le righe e poi gestiamo la domenica come monthList.
     */
    /* Tutti i giorni: bordo visibile (override del transparent ereditato) */
    &.monthListLayout #cpCalendar .month.container-cp .innerContainer .day {
        border-bottom: var(--daylist-bottom-border) solid #EEE;
    }

    /* Domenica e giorno prima di domenica: bordo transparent */
    &.monthListLayout #cpCalendar .month.container-cp .innerContainer .day.sunday,
    &.monthListLayout #cpCalendar .month.container-cp .innerContainer .day:has(+ .day.sunday) {
        border-color: transparent;
    }

    /* Giorno non-domenica prima di domenica: niente margin */
    &.monthListLayout #cpCalendar .month.container-cp .innerContainer .day.bgEvent:not(.sunday):has(+ .day.sunday) {
        margin-bottom: 0;
    }

    /* Domenica seguita da non-domenica: niente margin */
    &.monthListLayout #cpCalendar .month.container-cp .innerContainer .day.sunday:has(+ .day.bgEvent:not(.sunday)) {
        margin-bottom: 0;
    }

    /* Due domeniche consecutive: mantiene il margin (ereditato da monthList riga 2135) */
    /* Tra due bgEvent non-domenica: niente margin extra (sembrano righe normali) */
    &.monthListLayout .month.container-cp .innerContainer .day.bgEvent:not(.sunday):has(+ .day.bgEvent:not(.sunday)) {
        margin-bottom: 0;
    }

    /* 2 - colori testo: non bianchi sui giorni bgEvent (esclusa domenica) */
    & #cpCalendar.showEventsGeneral .day.bgEvent:not(.sunday) .standardContent,
    & #cpCalendar.showEventsGeneral .day.bgEvent:not(.sunday) .yearDay,
    & #cpCalendar.showEventsGeneral .day.bgEvent:not(.sunday) .dayName {
        color: var(--text);
        font-weight: 400;
    }

    & #cpCalendar.showToday .day.bgEvent:not(.sunday).today .dayNumber .standardContent {
        color: white;
    }

    &.monthListLayout #cpCalendar.showEventsGeneral .day.bgEvent .yearDay {
        color: var(--gray);
        font-weight: 600;
    }

    &.monthListLayout .month.container-cp .day.bgEvent:not(.sunday) .weekNumber {
        color: var(--gray);
    }

    & .day.bgEvent:not(.sunday) .secondaryEvents span.hasTime,
    & .day.bgEvent:not(.sunday) .secondaryEvents span.hasTime span {
        color: var(--text);
    }

    & .day.bgEvent:not(.sunday) .mainEvents span {
        color: var(--text);
    }

    & #cpCalendar.showEventsGeneral .day.bgEvent:not(.sunday) .dayNumber .standardContent {
        color: var(--text);
    }

    /* 3 - eventi sempre visibili, indipendentemente da showEventsGeneral.
     *     I selettori non condizionano su showEventsGeneral: il layout \E8
     *     identico sia con la classe presente che assente.
     */
    /* mainEvents: sempre visibili */
    & #cpCalendar .mainEvents {
        display: revert !important;
        position: relative;
    }

    /* secondaryEvents: segue il check "eventi datario" (showEventsGeneral) */
    & #cpCalendar.showEventsGeneral .secondaryEvents {
        position: relative;
    }

    & #cpCalendar .secondaryEventsBadge,
    & #cpCalendar .mainEventsBadge {
        display: none !important;
    }

    /* 3b - layout eventi: indipendente da showEventsGeneral e unifiedEventList */
    & #cpCalendar .day .events {
        position: relative;
        display: flex;
        flex-direction: row;
    }

    & #cpCalendar .day .mainEvents,
    & #cpCalendar .day .secondaryEvents {
        position: relative;
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 0px;
        flex-basis: auto;
    }

    & #cpCalendar .day .mainEvents > span,
    & #cpCalendar .day .secondaryEvents > span {
        display: inline-block;
        width: 100%;
    }

    & #cpCalendar .day .mainEvents > span {
        border: none;
    }

    & #cpCalendar .day .secondaryEvents > span.allDay {
        border: 1px solid var(--event-color);
    }

    /* --- publicHolidays: layout ---
     * Mobile (base): come monthListLayout - eventi sulla seconda riga (flex-wrap)
     * Desktop (>=1024px): riga singola - tutto inline
     */
    /* monthName column: stessa estetica di dayName */
    &.monthListLayout .month.container-cp .day .monthName.column {
        flex: 1;
        text-align: left;
        padding-left: 1%;
        padding-right: 1%;
        text-transform: capitalize;
        color: var(--text);
        order: 2;
        letter-spacing: var(--tight);
    }

    /* dayName: compatta per fare spazio a monthName */
    &.monthListLayout .month.container-cp .dayName {
        font-size: var(--testo-piccolo);
    }

    /* yearDay (delta) */
    &.monthListLayout .month.container-cp .yearDay {
        min-width: 2.5em;
        text-align: right;
    }

    /* mainEvents span: stessa font-size di .dayName
     * .dayName = 0.8em di .day, .events.column = 0.714em di .day -> 0.8/0.714 ~ 1.12em */
    &.monthListLayout #cpCalendar .day .mainEvents > span {
        font-size: var(--testo-piccolo);
    }

    /* eventi inline: mainEvents a capo, secondaryEvents troncati */
    &.monthListLayout #cpCalendar .day .mainEvents > span {
        display: block;
        white-space: normal;
        overflow-wrap: break-word;
    }

    &.monthListLayout #cpCalendar .day .secondaryEvents > span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    &.monthListLayout #cpCalendar .day .secondaryEvents > span {
        display: flex !important;
        column-gap: 0.234em;
    }

    &.monthListLayout #cpCalendar .day .mainEvents > span > span,
    &.monthListLayout #cpCalendar .day .secondaryEvents > span > span.eventTitleLabel {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* mainEvents e secondaryEvents: span impilati verticalmente, centrati */
    &.monthListLayout #cpCalendar .day .mainEvents,
    &.monthListLayout #cpCalendar .day .secondaryEvents {
        flex-direction: column;
        justify-content: center;
    }

    &.monthListLayout #cpCalendar .month.container-cp .innerContainer .day:last-child {
        border-bottom: none;
    }

    &.monthListLayout #cpCalendar.showEventsGeneral .day.bgEvent .dayName {
        text-align: right;
    }
}

/* === Desktop (>=1024px): riga singola ================================== */
@media only screen and (min-width: 1024px), print and (min-width: 1024px) {
    #calpro.monthListLayout.publicHolidaysLayout #cpCalendar .day .events.column {
        flex: 0 0 63%;
    }

    .publicHolidaysLayout.monthListLayout #cpCalendar.showEventsGeneral .day.bgEvent .dayName {
        text-align: left;
    }

    /* Riga giorno: niente wrap */
    .publicHolidaysLayout.monthListLayout .month.container-cp .day {
        flex-wrap: nowrap;
    }

    .publicHolidaysLayout.monthListLayout .month.container-cp .dayName {
        flex: 0 0 clamp(0.893em, 13%, 13%);
    }

    .publicHolidaysLayout.monthListLayout .month.container-cp .day .monthName.column {
        flex: 0 0 clamp(3em, 14%, 14%);
    }

    /* events: riempie lo spazio restante sulla stessa riga */
    .publicHolidaysLayout.monthListLayout #cpCalendar .day .events.column {
        flex: 1 1 0%;
        min-width: 0;
        padding-left: 0;
        padding-right: clamp(0px, 1%, 1%);
        margin-top: 0;
        margin-bottom: 0;
        justify-content: space-between;
    }

    /* events container: affiancati in riga */
    .publicHolidaysLayout.monthListLayout #cpCalendar .day .events {
        flex-wrap: nowrap;
        align-items: center;
    }

    .publicHolidaysLayout.monthListLayout #cpCalendar .day .mainEvents, .publicHolidaysLayout.monthListLayout #cpCalendar .day .secondaryEvents {
        flex-basis: auto;
    }

    /* yearDay (delta): dopo events */
    .publicHolidaysLayout.monthListLayout .month.container-cp .yearDay {
        flex: 0 0 auto;
        order: 6;
    }

    /* Sempre come "unifica eventi" spento: mainEvents/secondaryEvents affiancati */
    .publicHolidaysLayout.monthListLayout #cpCalendar .day .events.column .mainEvents {
        flex: 1 0 45%;
        padding-right: 3.5%;
    }

    .publicHolidaysLayout.monthListLayout #cpCalendar .day .events.column .mainEvents > span {
        border: none;
        padding: 0px;
        font-size: 1rem;
    }

    .publicHolidaysLayout.monthListLayout #cpCalendar .day .events.column .secondaryEvents {
        flex: 0 0 55%;
        margin-left: auto;
        margin-top: 0px;
    }
}

/*=====================================================*/
/*=== longWeekendsLayout (layout key: longweekends)
 *
 * Layout indipendente a card. NON eredita monthListLayout
 * né publicHolidaysLayout.
 *
 * Struttura: stats row → bridge-level headers → card grid
 * Ogni card: miniCal (stile yearLayout) | body | dayCount
 *=====================================================*/
.longWeekendsLayout {

    /* --- Container principale (autonomo, non .month.container-cp) --- */
    & .longWeekends.container-cp {
        width: 100%;
        position: relative;
        border-radius: var(--default-radius);
        background: transparent;
        box-shadow: none;
        text-align: left;
        padding: 0;
    }

    /* ======================================================
     * BRIDGE LEVEL HEADER
     * ====================================================== */
    & .lwBridgeLevelHeader {
        display: flex;
        align-items: center;
        gap: 0.5em;
        padding: 1em 0.3em 0.4em;
        margin-top: 1.5em;
        font-size: 0.9em;
        font-weight: 600;
        color: var(--gray-25);
        border-bottom: 1.5px dashed var(--lightGray);
    }

    & .lwBridgeLevelBadge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.8em;
        height: 1.8em;
        border-radius: 50%;
        background: var(--global-link-color);
        color: white;
        font-weight: 700;
        font-size: 0.85em;
    }

    /* ======================================================
     * CARDS GRID
     * ====================================================== */
    & .lwCardsGrid {
        display: grid;
        gap: 1.3em;

        & > .lwMonthSeparator:not(:first-child) {
            margin-top: 1em;
        }
    }

    & .lwMonthSeparator {
        display: flex;
        align-items: center;
        gap: 12px;
        text-transform: capitalize;

        & span {
            font-size: 1.2em;
            font-weight: 600;
            white-space: nowrap;
            letter-spacing: var(--tight);
        }

        &::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--gray-85);
        }
    }

    /* ======================================================
     * WEEKEND CARD
     * ====================================================== */
    & .weekendCard {
        background: var(--gray-97-5);
        border-radius: var(--default-radius);
        padding: 1em 1em 1.5em 1em;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75em;
        transition: border-color var(--short-transition), box-shadow var(--short-transition);
        position: relative;
        overflow: hidden;
    }

    & .weekendCard.is-next {
        outline: 2px solid var(--global-link-color);
        outline-offset: -2px;
        border-color: transparent;
    }

    /* ======================================================
     * NEXT BADGE — ribbon angolare
     * ====================================================== */
    & .lwNextBadge {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        pointer-events: none;

        &::after {
            content: attr(data-label);
            position: absolute;
            top: 18px;
            left: -40px;
            width: 150px;
            transform: rotate(-45deg);
            background: var(--global-link-color);
            color: white;
            font-size: 0.55em;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            text-align: center;
            padding: 4px 0.9em 4px 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
            white-space: nowrap;
        }
    }

    /* ======================================================
     * MINI CALENDAR (stile yearLayout)
     *
     * Riuso della struttura HTML di yearLayout
     * (.week.container-cp > .day.column) con stili dedicati.
     * ====================================================== */
    & .miniCal {
        width: 100%;
        max-width: 250px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 3px;

        & h3.layoutTitle {
            display: inline-block;
            text-transform: capitalize;
            margin: 0.5em 0 0.5em 0;
            font-size: 1em;
            line-height: 1;
            width: 100%;
            text-align: center;
            letter-spacing: var(--tight);
        }

        & .header {
            display: flex;
            margin-bottom: 2px;
        }

        & .header .dayName.column {
            flex: 1 1 0;
            text-align: center;
            font-weight: 600;
            font-size: var(--testo-piccolo3);
            color: var(--gray);
            text-transform: capitalize;
        }

        & .innerContainer {
            display: flex;
            flex-direction: column;
        }

        & .week.container-cp {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        & .day.column {
            flex: 1 1 0;
            text-align: center;
            margin: 1px;
            border-radius: var(--default-radius-small);
            aspect-ratio: 1 / 1;
            align-content: center;
            font-weight: 400;
            font-size: 0.85em;
            letter-spacing: 0.03em;
            position: relative;

            & .standardContent {
                font-size: 1em;
            }
        }

        /* Ghost: giorni fuori range, mostrati dimessi come contesto */
        & .day.ghost {
            color: var(--gray);
        }

        & .day.sunday:not(.ghost) {
            font-weight: 700;
        }

        /* Giorni festivi — evidenziati con sfondo holiday */
        & .day.bgEvent {
            background-color: var(--main-holiday-bg);
            color: white;
            font-weight: 600;
        }

        /* Giorni ponte — sfondo grigio chiaro */
        & .day.bridgeDay {
            background-color: var(--gray-90);
            background-color: color-mix(in srgb, var(--main-holiday-bg) 30%, transparent);

            & .standardContent {
                font-weight: 600;
                color: var(--main-holiday-bg);
            }
        }

        /* Weekend (sab/dom) — stesso stile dei festivi */
        & .day.lwWeekendDay {
            background-color: var(--main-holiday-bg);
            color: white;
            font-weight: 600;
        }

    }

    /* ======================================================
     * CARD BODY
     * ====================================================== */
    & .lwCardBody {
        width: 100%;
        min-width: 0;
        text-align: center;
        background: var(--gray-92-5);
        border-radius: var(--default-radius-small);
        padding: 1em;
    }

    & .lwCardMonth {
        font-size: 0.8em;
        letter-spacing: 0.03em;
        color: var(--gray-50);
        text-transform: uppercase;
        margin-bottom: 0.15em;
        font-weight: 700;
    }

    & .lwCardTitle {
        font-size: 1.4em;
        font-weight: 700;
        color: var(--title);
        line-height: 1.25;
        letter-spacing: var(--tight);
    }

    & .lwCardDates {
        color: var(--gray);
        letter-spacing: var(--tight);
        margin-top: 0.25em;
        font-size: var(--testo-piccolo);
        font-weight: 600;
    }

    & .lwCardHolidays {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    & .lwHolidayTag {
        font-size: 0.72em;
        padding: 2px 10px;
        border-radius: 20px;
        background: rgba(0, 123, 255, 0.08);
        color: var(--global-link-color);
        border: 1px solid rgba(0, 123, 255, 0.2);
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    & .lwHolidayTag.ponte {
        background: rgba(129, 180, 81, 0.1);
        color: var(--success);
        border-color: rgba(129, 180, 81, 0.3);
    }

    /* ======================================================
     * CARD RIGHT (day count + delta)
     * ====================================================== */
    /* Mobile: grid 50/50 se è presente una gauge reale; singola colonna
       centrata (bars collassata) se solo placeholder. Desktop override sotto. */
    & .lwStats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        width: 100%;
        gap: 0;
    }

    & .lwStats:not(:has(.lwGauge:not(.lwGauge--placeholder))) {
        grid-template-columns: 1fr;
    }

    & .lwStats:not(:has(.lwGauge:not(.lwGauge--placeholder))) .lwBars {
        display: none;
    }

    & .lwBars {
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: center;
    }

    & .lwStatsGroup {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25em;
    }

    /* Circular gauge (270° arc, open at bottom). Circumference 2π·32 ≈ 201.06;
       visible arc = 0.75·C ≈ 150.8. Rotazione -135° porta l'inizio dell'arco
       al vertice in basso a sinistra, sweep orario fino in basso a destra. */
    & .lwGauge {
        position: relative;
        width: 80px;
        height: 80px;
        flex: 0 0 auto;
        --lwGaugeColor: var(--today-color);
    }

    /* Placeholder invisibile che riserva lo slot gauge quando bridgeCount==0,
       così .lwStat resta allineata card-to-card. */
    & .lwGauge--placeholder {
        visibility: hidden;
    }

    /* Stop della linearGradient SVG — stesse proporzioni del bar originale:
       bottom (0%) = color 40% opacity → middle (50%) = color full →
       top (100%) = color mix 70% con black 30%. */
    & .lwStop--low  { stop-color: var(--lwGaugeColor); stop-opacity: 0.4; }
    & .lwStop--mid  { stop-color: var(--lwGaugeColor); stop-opacity: 1; }
    & .lwStop--high { stop-color: color-mix(in srgb, var(--lwGaugeColor) 70%, black); stop-opacity: 1; }

    /* Ring come <path> filled chiuso (no stroke, no conic, no cap separati):
       un'unica forma geometrica con outer arc + semicircle cap + inner arc +
       semicircle cap. Il motore SVG rasterizza fill con AA pulito, e i
       rounded end sono parte del path stesso → niente seam né bump. */
    & .lwGaugeSvg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        shape-rendering: geometricPrecision;
    }

    & .lwGaugeTrack {
        fill: var(--gray-90);
        stroke: none;
    }

    & .lwGaugeFill {
        /* fill viene settato via attributo SVG `fill="url(#gradId)"` —
           non ridichiararlo in CSS, altrimenti sovrascrive il gradient. */
        stroke: none;
    }

    & .lwGaugeText {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1;
        text-align: center;
        pointer-events: none;
    }

    & .lwGaugeValue {
        font-size: 1.35em;
        font-weight: 800;
        color: var(--today-color);
    }

    & .lwGaugeLabel {
        font-size: var(--testo-piccolo2);
        font-weight: 700;
        text-transform: uppercase;
        color: var(--gray);
        margin-top: 3px;
        white-space: nowrap;
        font-family: "jetbrains-mono", monospace;
    }


    & .lwStat {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 80px;
        line-height: 1;
    }

    & .lwStatCount {
        font-size: 2.5em;
        font-weight: 700;
        color: var(--title);
        line-height: 1;
        display: block;
    }

    & .lwStatWord {
        font-weight: 600;
        color: var(--gray);
        letter-spacing: var(--tight);
        font-size: vaR(--testo-piccolo);
    }

    & .lwStat--leave {
        flex-direction: row;
        gap: 2px;
        justify-content: flex-start;
    }

    & .lwLeavePlus {
        font-size: 1.5em;
        font-weight: 600;
        color: var(--main-holiday-bg);
        line-height: 1;
    }

    & .lwLeaveDetail {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    & .lwStat--leave .lwStatCount {
        font-weight: 700;
        color: var(--main-holiday-bg);
    }

    & .lwStat--leave .lwStatWord {
        color: var(--main-holiday-bg);
        font-weight: 600;
        letter-spacing: var(--tight);
    }

    /* ======================================================
     * EMPTY STATE
     * ====================================================== */
    & .lwEmpty {
        padding: 3em;
        text-align: center;
        color: var(--lightGray);
        font-style: italic;
    }
}

/* ======================================================
 * longWeekendsLayout — DESKTOP (mobile-first)
 * ====================================================== */
@media screen and (min-width: 768px) {
    .longWeekendsLayout {

        & .weekendCard {
            flex-direction: row;
            align-items: center;
            padding-left: 5em;
            padding-right: 5em;
            gap: 4em;
        }

        & .lwStats {
            display: flex;
            flex: 0 0 380px;
            width: 380px;
            min-width: 0;
            max-width: 380px;
            grid-template-columns: none;
            justify-content: flex-start;
            font-size: 1em;
            overflow: hidden;
        }

        /* Desktop: lwBars sempre mostrato (placeholder incluso) per mantenere
           l'allineamento di lwCardBody; override del mobile collapse. */
        & .lwStats:not(:has(.lwGauge:not(.lwGauge--placeholder))) .lwBars {
            display: flex;
        }

        & .lwBars {
            margin-right: 2.5em;
        }

        & .lwStatsGroup {
            gap: 0.25em;
        }


        & .lwCardBody {
            flex: 1 1 0;
            width: auto;
            text-align: left;
            font-size: 1em;
            background: none;
            border-radius: 0;
            padding: 0;
        }

        & .miniCal {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
            min-width: 190px;
        }

        & .lwBars {
            justify-content: flex-start;
        }
    }
}

/* ======================================================
 * longWeekendsLayout — MOBILE: riordino dentro .weekendCard
 * DOM = lwStats, lwCardBody, miniCal → mobile = lwCardBody,
 * lwStats, miniCal. Solo qui: il desktop (≥768px, flex-row)
 * mantiene l'ordine sorgente. .lwNextBadge è absolute → escluso.
 * ====================================================== */
@media screen and (max-width: 767.98px) {
    .longWeekendsLayout {

        & .weekendCard > .lwCardBody {
            order: 1;
        }

        & .weekendCard > .lwStats {
            order: 2;
        }

        & .weekendCard > .miniCal {
            order: 3;
        }
    }
}

/*=============================*/
/*=== weekLayout (layout key: week)
 *
 * Note: weekLayout and dayLayout share very similar
 * timeGrid / eventBlock structures.
 *=============================*/
.weekLayout {
    & #cpCalendar {
        display: block;
        --week-today-overlay: rgba(0, 0, 0, 0.06);
        --week-sunday-overlay: rgba(0, 0, 0, 0.035);
        --week-bgEvent-overlay: rgba(251, 94, 108, 0.10);

        &.showMonths .monthsColumn {
            display: flex;
            align-content: space-between;
            flex-wrap: wrap;
            flex-direction: row;
        }

        &.showMonths.weeklyPlannerFullDay .monthsColumn {
            align-content: flex-start;
        }

        &.weeklyPlannerFullDay .monthsColumn .month.container-cp {
            margin-bottom: 0.5em;
        }

        &:not(.showMonths) .weekLayoutMain.container-cp {
            grid-template-columns: minmax(0, 1fr);
        }

        & .monthsColumn {
            display: none;
            min-width: 0;
        }

        &.showWeekLeft .monthsColumn .month.container-cp .column.weekNumber.left {
            visibility: visible;
        }

        &.showWeekRight .monthsColumn .month.container-cp .column.weekNumber.right {
            visibility: visible;
        }

        &.showGhostDays .monthsColumn .month.container-cp .ghost {
            visibility: visible;
        }

        &.showEventsGeneral.showYearEvents .monthsColumn .day .secondaryEventsBadge.active {
            position: absolute;
            display: inline-block;
            color: transparent;
            background: var(--text);
            width: 3px;
            height: 3px;
            border-radius: 100%;
            top: auto;
            left: 50%;
            bottom: 1px;
            right: auto;
            margin: 0;
            transform: translateX(-50%);
        }

        &.showEventsGeneral.showYearEvents .monthsColumn .day.bgEvent .secondaryEventsBadge.active,
        &.showEventsGeneral.showYearEvents.showToday .monthsColumn .day.today .secondaryEventsBadge.active {
            background: #FFF;
        }

        &.showEventsGeneral .monthsColumn .month.container-cp .day.bgEvent {
            background-color: var(--main-holiday-bg);
        }

        &.hideWeeklyPlannerSunday .weeklyMain {
            & .weekHeader {
                grid-template-columns: var(--time-col-width) repeat(6, minmax(0, 1fr));
            }

            & .allDayRow {
                grid-template-columns: var(--time-col-width) repeat(6, minmax(0, 1fr));
            }

            & .daysGrid {
                grid-template-columns: repeat(6, minmax(0, 1fr));
            }

            & .dayHeader[calproweekday="7"], & .allDayCell[calproweekday="7"], & .dayColumn[calproweekday="7"] {
                display: none;
            }
        }

        &.showToday {

        /* bgEvent days: same visual treatment as today but with event color */
        &.showEventsGeneral {
            & .dayHeader.bgEvent {
                background-color: var(--main-holiday-bg) !important;
                color: white;
                border-radius: var(--default-radius) var(--default-radius) 0 0;

                & .monthName {
                    color: white;
                }
            }

            & .allDayCell.bgEvent {
                background: transparent;
                box-shadow: inset 0 0 0 9999px var(--week-bgEvent-overlay);

                &.sunday {
                    background: transparent;
                    box-shadow: inset 0 0 0 9999px var(--week-sunday-overlay), inset 0 0 0 9999px var(--week-bgEvent-overlay);
                }
            }

            & .dayColumn.bgEvent .hourSlot {
                box-shadow: inset 0 0 0 9999px var(--week-bgEvent-overlay);
            }

            & .dayColumn.sunday.bgEvent .hourSlot {
                box-shadow: inset 0 0 0 9999px var(--week-sunday-overlay), inset 0 0 0 9999px var(--week-bgEvent-overlay);
            }

            & .dayColumn.bgEvent .hourSlot::after, & .dayColumn.sunday.bgEvent .hourSlot::after {
                border-top-color: var(--gray-70);
            }

            & .allDayCell.today.bgEvent {
                box-shadow: inset 0 0 0 9999px var(--week-today-overlay), inset 0 0 0 9999px var(--week-bgEvent-overlay);
            }

            & .dayColumn.today.bgEvent .hourSlot {
                box-shadow: inset 0 0 0 9999px var(--week-today-overlay), inset 0 0 0 9999px var(--week-bgEvent-overlay);
            }
        }

        &:not(.showEventsGeneral) {
            & .weekHeader .dayHeader .dayNumber, & .weekHeader .dayHeader .monthName {
                display: none;
            }

            & .allDayRow, & .dayEvents {
                display: none;
            }

            & .timeGrid {
                --hour-slot-height: 52px;
            }
        }

        &:not(.multipleLineEvents) .eventBlock .eventTitleLabel {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    /* --- main grid container --- */
    & .weekLayoutMain.container-cp {
        display: grid;
        grid-template-columns: clamp(96px, 14vw, 166px) minmax(0, 1fr) clamp(96px, 14vw, 166px);
        gap: clamp(8px, 1.2vw, 14px);
        align-items: stretch;
    }

    /* --- mini calendar months sidebar --- */
    & .monthsColumn.yearLayout {
        flex-direction: row;
        gap: 5px;

        & .month.container-cp {
            margin: 0;
            flex: none;
            max-width: none;
            width: 100%;
            border-radius: var(--default-radius-small);
            box-shadow: var(--card-shadow);
            padding: 0.3em 0.25em 0.5em 0.25em;
            line-height: 1;

            & .layoutTitle {
                font-size: 0.75rem;
                margin-bottom: 0.25em;
                letter-spacing: var(--tight);
            }

            & .column.weekNumber {
                max-width: 0.9rem;
                font-size: 0.35rem;
            }

            & .header .dayName {
                font-size: 0.45rem;
            }

            & .day {
                margin: 0.5px;
                border-radius: 1px;

                &.sunday:not(.bgEvent) {
                    background-color: var(--sunday-bg);
                    color: #000000;
                }

                & .standardContent {
                    font-size: 0.55rem;
                }

                & .yearDay {
                    font-size: 0.45rem;
                }
            }
            & .day.today {
                outline-offset: 0px;
                outline-width: 1px;
            }
        }
    }

    &.showToday .monthsColumn.yearLayout .month.container-cp .day.today .standardContent {
        /*border: 2px solid var(--today-color);*/
        /*margin-left: -1px;*/
        /*margin-top: -2px;*/
        /*margin-bottom: -2px;*/
        width: 100%;
        font-weight: 700;
    }

    /* --- weekly planner main area --- */
    & .weeklyMain {
        background: #FFF;
        border-radius: var(--default-radius);
        box-shadow: var(--card-shadow);
        padding: clamp(14px, 2vw, 35px);
        overflow-x: auto;
        --time-col-width: 70px;

        & .weekHeader, & .allDayRow, & .timeGrid {
            min-width: 0;
            width: 100%;
        }
    }

    /* --- week header row --- */
    & .weekHeader {
        display: grid;
        grid-template-columns: var(--time-col-width) repeat(7, minmax(0, 1fr));
        align-items: stretch;

        & .dayHeader:first-of-type {
            border-left: none;
        }
    }

    /* --- time header label --- */
    & .timeHeader {
        padding-right: 8px;
        color: var(--gray-55);
        font-weight: 600;
        font-size: 0.78rem;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* --- day header cell --- */
    & .dayHeader {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 6px 4px;
        text-transform: capitalize;
        padding-bottom: 10px;
        min-height: 70px;
        line-height: 1.3;
        letter-spacing: var(--tight);
        min-height: 80px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;

        & .dayName {
            font-weight: 700;
        }

        & .link {
            transition: none;
        }

        & .dayNumber {
            font-weight: 700;
            font-size: 1.2rem;
            margin-top: 2px;
            margin-bottom: 2px;
        }

        & .monthName {
            font-size: 0.8rem;
            font-weight:600;
        }

        & .monthName {
            color: var(--gray);
        }
        
        &.ghost {
            opacity: 0.4;
        }

        &.sunday {
            background-color: var(--sunday-bg);
            border-radius: var(--default-radius) var(--default-radius) 0 0;
        }
    }

    /* --- all-day row --- */
    & .allDayRow {
        display: grid;
        grid-template-columns: var(--time-col-width) repeat(7, minmax(0, 1fr));
        /*border-bottom: 1px solid var(--gray-90);*/
        align-items: stretch;
        min-height: 56px;

        & .allDayCell:first-of-type {
            border-left: none;
        }
    }

    & .allDayLabel {
        font-weight: 700;
        color: var(--text);
        padding-right: 8px;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        text-align: center;
        line-height: 1.15;
    }

    & .allDayCell {
        min-height: 80px;
        padding: 2px;
        display: flex;
        align-items: center;
        /*border-left: 1px solid var(--gray-90);*/

        &.ghost {
            opacity: 0.4;
        }

        &.sunday {
            background: transparent;
            box-shadow: inset 0 0 0 9999px var(--week-sunday-overlay);
        }
    }

    & .allDayEvents {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;

        & > span {
            background: var(--event-color);
            color: #FFF;
            padding: 3px 5px;
            border-radius: var(--default-radius-small);
            font-size: var(--testo-piccolo3);
            line-height: 1.2;
            font-weight: 600;

            &.eventLayer-0 {
                background: var(--main-holiday-bg);
            }
        }
    }

    /* --- time grid --- */
    & .timeGrid {
        --hour-slot-height: 46px;
        display: grid;
        grid-template-columns: var(--time-col-width) 1fr;
        position: relative;
    }

    & .timeColumn {
        display: flex;
        flex-direction: column;

        & .timeSlot {
            height: var(--hour-slot-height, 48px);
            padding-right: 8px;
            font-size: var(--testo-piccolo3);
            color: var(--gray);
            position: relative;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            font-weight: 600;
            padding-top: 5px;
            font-family: "jetbrains mono", monospace;

            &:nth-child(even) {
                background-color: var(--gray-97-5);
            }

            &::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 50%;
                border-top: 1px dotted var(--gray-90);
                pointer-events: none;
            }
        }
    }

    /* --- days grid --- */
    & .daysGrid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        position: relative;
    }

    & .dayColumn {
        position: relative;
        border-left:1px solid var(--gray-85);

        &:first-child {
            border-left: none;
        }

        &.ghost {
            opacity: 0.4;
        }

        &.sunday .hourSlot {
            box-shadow: inset 0 0 0 9999px var(--week-sunday-overlay);
        }

        & .hourSlot:nth-child(even) {
            background-color: var(--gray-97-5);
        }
    }

    & .dayBackground {
        display: flex;
        flex-direction: column;
    }

    & .hourSlot {
        height: var(--hour-slot-height, 48px);
        position: relative;

        &::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            border-top: 1px dotted var(--gray-90);
            pointer-events: none;
        }
    }

    & .dayEvents {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* --- event block --- */
    & .eventBlock {
        position: absolute;
        background: var(--event-color);
        color: #FFF;
        border-radius: var(--default-radius-small);
        padding: 5px 5px;
        font-size: 0.72rem;
        font-size: var(--testo-piccolo2);
        letter-spacing: 0.02em;
        line-height: 1.2;
        box-sizing: border-box;
        overflow: hidden;

        &.eventLayer-0 {
            background: var(--main-holiday-bg);
        }

        & .eventTimeLabel {
            font-weight: 600;
            display: block;
        }

        & .eventTitleLabel {
            display: block;
        }

        &.continuesBefore {
            border-top: 2px dashed rgba(255, 255, 255, 0.7);
        }

        &.continuesAfter {
            border-bottom: 2px dashed rgba(255, 255, 255, 0.7);
        }

        &.clippedStart {
            box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3);
        }

        &.clippedEnd {
            box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.3);
        }

        &.clippedStart.clippedEnd {
            box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3), inset 0 -3px 0 rgba(255, 255, 255, 0.3);
        }
    }

    /* --- control bar overrides --- */
    & #cpControlBar .weekNavigation.hiddenByNoEvents {
        display: none;
    }
}
} /* chiude .weekLayout */

/* --- weekLayout + dayLayout: shared allDayLabel sub-elements --- */
.weekLayout .allDayLabel .allDayLabelIcon, .dayLayout .allDayLabel .allDayLabelIcon {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text);
}

.weekLayout .allDayLabel .allDayLabelText, .dayLayout .allDayLabel .allDayLabelText {
    font-weight: 700;
    color: var(--text);
    font-size: var(--testo-piccolo2);
    font-family: "jetbrains mono", monospace;
}

@media only screen, print {
    .weekLayout .monthsColumn.yearLayout .month.container-cp .day .standardContent {
        font-weight:600;
    }

    .weekLayout .monthsColumn.yearLayout .month.container-cp .day.sunday .standardContent {
        font-weight:700;
    }
}

@media only screen and (max-width: 767.98px), print and (max-width: 767.98px) {
    /* Mobile: la WEEK è una tabella unica (mesi 1-6 · planner · mesi 7-12) che si
     * scorre col dito. Le MISURE sono quelle desktop (mesi 170px) — erano giuste.
     * L'UNICO bug era l'accavallamento: nasceva da misure INDEFINITE
     * (width:max-content sul contenitore + flex:auto/min-width:max-content sul
     * planner) che, coi mesi a width:100% interni, facevano collassare le colonne
     * e finire il planner sopra la prima colonna. Fix = TUTTE larghezze FISSE e
     * definite, così il flex dispone 170 · planner · 170 senza sovrapporsi.
     * Lo scroll è su #cpCalendar (la control bar è fuori → resta ferma). */
    .weekLayout #cpCalendar {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        padding: 10px;
        box-sizing: border-box;
    }

    /* CON mesi: si TIENE la grid del desktop ma con tracce FISSE esplicite.
     * Selettore #cpCalendar.showMonths → specificità alta, vince di sicuro sul
     * grid-template clamp(...vw...) del desktop. In grid ogni blocco sta nella
     * sua traccia: impossibile accavallarsi, e tracce esatte → nessun gap.
     * 170 (mesi) · 780 (planner) · 170 (mesi) + 2×14 gap = 1148. */
    .weekLayout #cpCalendar.showMonths .weekLayoutMain.container-cp {
        display: grid;
        grid-template-columns: 170px 780px 170px;
        gap: 14px;
        width: 1148px;
    }

    /* SENZA mesi: solo il planner; traccia ≥720 così non si comprime, scrolla */
    .weekLayout #cpCalendar:not(.showMonths) .weekLayoutMain.container-cp {
        display: grid;
        grid-template-columns: minmax(720px, 1fr);
        width: 100%;
        min-width: 0;
    }

    /* Il planner riempie la sua traccia (780 = 720 utili + 60 padding); le sue
     * griglie interne tornano a width:100% (riempiono i 720 utili), nessuno
     * scroll proprio → un unico scroll esterno su #cpCalendar. */
    .weekLayout .weeklyMain {
        width: auto;
        padding: 30px;
        overflow-x: visible;
    }

    .weekLayout .weeklyMain .weekHeader,
    .weekLayout .weeklyMain .allDayRow,
    .weekLayout .weeklyMain .timeGrid {
        min-width: 0;
        width: 100%;
    }
}

/*=============================*/
/*=== dayLayout (layout key: day)
 *
 * Note: dayLayout shares very similar timeGrid / eventBlock
 * structures with weekLayout above.
 *=============================*/
.dayLayout {
    & #cpCalendar {
        display: block;
        --daylayout-today-overlay: rgba(0, 0, 0, 0.06);
        --daylayout-sunday-overlay: rgba(0, 0, 0, 0.035);

        &:not(.showEventsGeneral) {
            & .allDayRow, & .dayEvents {
                display: none;
            }
        }

        &:not(.multipleLineEvents) .eventBlock .eventTitleLabel {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* =====================================================================
           DAY view — badge eventi inline + altezza adattiva.
           - Tempo + titolo sulla stessa riga (display:inline, baseline).
           - Wrap libero: se il titolo è lungo va a capo, il blocco cresce
             oltre il min-height duration-based (vedi dayLayout.php dove
             inline style usa min-height anziché height).
           - Override intenzionale della regola :not(.multipleLineEvents)
             soprastante: in DAY c'è spazio orizzontale e l'altezza cresce
             col contenuto, quindi ellipsis non serve.
           Specificità: (1,4,0) — stessa della regola sovrastante ma più
           tardi in source order → vince.
           ===================================================================== */
        & .dayColumn .eventBlock .eventTimeLabel,
        & .dayColumn .eventBlock .eventTitleLabel {
            display: inline;
            vertical-align: baseline;
        }
        & .dayColumn .eventBlock .eventTimeLabel {
            margin-right: 0.35em;
        }
        & .dayColumn .eventBlock .eventTitleLabel {
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
        }

        &.showToday {
            & .allDayCell.sunday.today {
                background: transparent;
                box-shadow: inset 0 0 0 9999px var(--daylayout-sunday-overlay), inset 0 0 0 9999px var(--daylayout-today-overlay);
            }

            & .dayColumn.sunday.today .hourSlot {
                box-shadow: inset 0 0 0 9999px var(--daylayout-sunday-overlay), inset 0 0 0 9999px var(--daylayout-today-overlay);
            }
        }
    }

    /* --- main container --- */
    & .dayLayoutMain.container-cp {
        background: #FFF;
        border-radius: var(--default-radius);
        box-shadow: var(--card-shadow);
        padding: 2.5em 2.5em 2.5em 2.5em;
        overflow-x: auto;
        --time-col-width: 72px;

        & .layoutTitle {
            display: inline-block;
            width: 100%;
            margin-bottom: 0.5em;
            font-size: clamp(1.5rem, 6vw, 3.3rem);
            text-align: center;
            display:none;
        }
    }

    /* --- all-day row --- */
    & .allDayRow {
        display: grid;
        grid-template-columns: var(--time-col-width) minmax(0, 1fr);
        align-items: stretch;
        min-height: 56px;
    }

    & .timeHeader {
        padding-right: 8px;
        color: var(--gray-55);
        font-weight: 600;
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1.15;
    }

    & .allDayLabel {
        font-weight: 700;
        color: var(--text);
        padding-right: 8px;
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-align: center;
        line-height: 1.15;
    }

    & .allDayCell {
        min-height: 56px;
        padding: 2px;
        display: flex;
        align-items: center;
        /*border-left:1px solid var(--gray-85);*/

        &.sunday {
            background: transparent;
        }
    }

    & .allDayEvents {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        width: 100%;
        gap: 2px;

        & > span {
            display: block;
            width: 100%;
            box-sizing: border-box;
            background: var(--event-color);
            color: #FFF;
            padding: 3px 5px;
            border-radius: var(--default-radius-small);
            font-size: var(--testo-piccolo3);
            line-height: 1.2;
            font-weight: 600;
            text-align: left;
            max-width: 100%;

            &.eventLayer-0 {
                background: var(--main-holiday-bg);
            }
        }
    }

    /* --- time grid --- */
    & .timeGrid {
        --hour-slot-height: 52px;
        display: grid;
        grid-template-columns: var(--time-col-width) minmax(0, 1fr);
        position: relative;
    }

    & .timeColumn {
        display: flex;
        flex-direction: column;

        & .timeSlot {
            height: var(--hour-slot-height, 52px);
            padding-right: 8px;
            font-size: var(--testo-piccolo3);
            color: var(--gray);
            position: relative;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            font-weight: 600;
            padding-top: 5px;
            font-family: "jetbrains mono", monospace;

            &:nth-child(even) {
                background-color: var(--gray-97-5);
            }

            &::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 50%;
                border-top: 1px dotted var(--gray-90);
                pointer-events: none;
            }
        }
    }

    /* --- day column --- */
    & .dayColumn {
        position: relative;
        border-left:1px solid var(--gray-85);

        & .hourSlot:nth-child(even) {
            background-color: var(--gray-97-5);
        }
    }

    & .dayBackground {
        display: flex;
        flex-direction: column;
    }

    & .hourSlot {
        height: var(--hour-slot-height, 52px);
        position: relative;

        &::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            border-top: 1px dotted var(--gray-90);
            pointer-events: none;
        }
    }

    & .dayEvents {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* --- event block --- */
    & .eventBlock {
        position: absolute;
        background: var(--event-color);
        color: #FFF;
        border-radius: var(--default-radius-small);
        padding: 5px;
        font-size: var(--testo-piccolo2);
        line-height: 1.15;
        box-sizing: border-box;
        overflow: hidden;

        &.eventLayer-0 {
            background: var(--main-holiday-bg);
        }

        & .eventTimeLabel {
            font-weight: 600;
            display: block;
        }

        & .eventTitleLabel {
            display: block;
        }

        &.continuesBefore {
            border-top: 2px dashed rgba(255, 255, 255, 0.7);
        }

        &.continuesAfter {
            border-bottom: 2px dashed rgba(255, 255, 255, 0.7);
        }

        &.clippedStart {
            box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3);
        }

        &.clippedEnd {
            box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.3);
        }

        &.clippedStart.clippedEnd {
            box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3), inset 0 -3px 0 rgba(255, 255, 255, 0.3);
        }
    }
}

@media only screen and (max-width: 767.98px), print and (max-width: 767.98px) {
    .dayLayout .dayLayoutMain.container-cp {
        padding: 8px;
        /* Colonna ore più stretta su mobile per liberare larghezza al giorno. */
        --time-col-width: 48px;
    }

    /* Mobile: il giorno deve entrare nella viewport senza scroll orizzontale.
       La griglia è già `var(--time-col-width) minmax(0,1fr)`, quindi con
       min-width:0 si adatta al contenitore. Gli eventi sono posizionati in %
       (left/width) e in altezza via --hour-slot-height: restano corretti.
       NON reintrodurre un min-width qui (era la causa dello scroll). */
    .dayLayout .timeGrid {
        min-width: 0;
    }

    /* Caratteri delle ore un filo più piccoli + padding ridotto su mobile. */
    .dayLayout .timeColumn .timeSlot {
        font-size: var(--testo-piccolo4);
        padding-right: 5px;
    }

    /* Header "24H": icona e gap ridotti per stare nella colonna stretta (solo
       dayLayout mobile; weekLayout non toccato). */
    .dayLayout .allDayLabel {
        gap: 2px;
        padding-right: 4px;
    }

    .dayLayout .allDayLabel .allDayLabelIcon {
        font-size: 1.1rem;
    }
}


/*=============================*/
/*=== publicHolidays 
 *
 *=============================*/
.publicHolidaysLayout {
    & #cpCalendar {
        & .layoutTitle {
            font-size: 1.5em;
            margin-bottom: 1em;
            display: none;
        }
    }


    & #cpCalendar.showToday .day.sunday.bgEvent.today .standardContent,
    & #cpCalendar.showToday .day.bgEvent:not(.sunday).today .standardContent {
        width: 85%;
        height: 85%;
        max-width: 30px;
        aspect-ratio: 1 / 1;
        color:white;
        font-weight: 700;
    }
}



/*Month container header*/
/*COMPACT Month container*/
/*Styling for days grid */
/*=============================*/
/*=== EVENTS LIST*/
/*=============================*/
#cpInfoArea {
    display: contents;
}

#cpEventsList {
    display: none;
    margin-top: 3em;
    margin-bottom: 1.5em;

    & .eventlist.container-cp {
        /* CSS multi-column (non Grid): le colonne hanno altezza naturale,
           niente celle vuote visibili quando gli item non riempiono
           un'ipotetica griglia NxM. Il browser bilancia gli item fra le
           colonne da solo. Per 5 item in 3 colonne: 2+2+1 ma la 3a col è
           solo più corta, non "mostra" una cella orfana. */
        width: 100%;
        column-count: 1;
        column-gap: 10px;
    }

    & .event-item {
        padding: 0.1em 0.3em;
        display: flex;
        width: 100%;
        white-space: nowrap;
        line-height: 1.2;
        /* Impedisce a un item di essere spezzato fra due colonne. */
        break-inside: avoid;

        & .event-date {
            font-weight:600;
            color:var(--title);
            flex: 0 0 38%;

            & .event-day-number {
                width: 20%;
                display: inline-block;
                text-align: center;
                padding: 0;
                margin: 0;
            }

            & .event-month-name {
                display: inline;
                margin: 0;
                padding: 0;
                text-transform: capitalize;
            }
        }

        & .event-name {
            width: auto;
            display: inline;
            white-space: normal;
        }
    }

    & .heading.container-cp {
        /*background: blue;*/
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        & .btnCopyEventList {
            border: none;
            background: transparent;
            cursor: pointer;
            color: var(--gray);
            padding: 0;
            margin-left: 0.4em;
            display: inline-flex;
            align-items: center;
            vertical-align: middle;

            &:hover {
                color: var(--global-link-color);
            }
        }
    }



    & .heading .title {
        font-size: 1.5em;
        margin-bottom: 0.25em !important;
        /*background: yellow;*/
    }

    & .heading .eventsLanguages.element {
        /*background: yellow;*/
        display: flex;
        align-items: center;
        margin-top: 1.25em;
        margin-bottom: 1.25em;
    }

    & .heading .eventsLanguages .badge {
        background-color: var(--lightLightGray);
        margin-left: 0.1rem;
        margin-right: 0.1rem;
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
        font-weight: 600;
        font-family: inherit;
        border-radius: var(--default-radius-small);
        min-width: 26px;
        text-align: center;
        border: none;
        cursor: pointer;
        text-transform: capitalize;
        color: var(--gray-50);

        &.active {
            background-color:var(--text);
            color: #FFFFFF;
            cursor: auto;
        }
    }

    & .events-section + .events-section {
        padding-top: 1em;
    }

    & .copyEventListIcon {
        font-size: 22px !important;
        font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 22;
        opacity: 0;
        transition: opacity var(--short-transition) ease-in-out 0s;
    }

    & .events-section:hover .copyEventListIcon {
        opacity: 1;
    }
}

#calpro.showEventsList #cpEventsList {
    display: block;
    letter-spacing: var(--tight);
}

/* ====================================================================
   FASI LUNARI — filtro e posizionamento icone
   --------------------------------------------------------------------
   Tutte le regole moon-phase-related sono qui sotto e in .moon-icon più
   in basso. !important nei display: none per prevalere sulle regole di
   layout .showEventsGeneral (specificità maggiore che forzerebbe display:
   inline-block sui figli di .secondaryEvents). */

/* Nasconde tutti gli elementi moon quando il flag showMoonPhases è OFF.
   Include: mini-sezione eventlist e eventi layer-1 nelle celle.
   Inoltre nasconde il badge (dot/conteggio) se l'unico contenuto del giorno
   sarebbero state moon phases (ora filtrate). */
#calpro:not(.showMoonPhases) {
    & .eventLayer-1 {
        display: none !important;
    }

    & .day:not(:has(.secondaryEvents > *:not(.eventLayer-1))) .secondaryEventsBadge {
        display: none !important;
    }
}

/* Fasi lunari nella LISTA eventi: sezione gateata da un flag separato
   (showMoonPhasesList) per attivare datario e lista in modo indipendente.
   Default OFF → la sezione lune nella lista resta nascosta finché non la si attiva. */
#calpro:not(.showMoonPhasesList) .moonPhasesEventsSection {
    display: none !important;
}

/* Conteggio dinamico via CSS counter.
   I template emettono badge vuoti (senza testo). Il counter incrementa solo sugli eventi
   VISIBILI (elementi con display:none sono skippati dal counter-increment). Il valore
   viene reso via ::after. */
.day {
    counter-reset: fgCount 0 bgCount 0;
}

.day .secondaryEvents > * {
    counter-increment: fgCount;
}

.day .mainEvents > * {
    counter-increment: bgCount;
}

.day .secondaryEventsBadge::after {
    content: counter(fgCount);
}

.day .mainEventsBadge::after {
    content: counter(bgCount);
}

/* Icona fase lunare — renderizzata nella mini-sezione "Fasi lunari"
   dell'eventlist.
   Variable font Material Symbols: FILL 0 = outline, FILL 1 = pieno.
   Reflection orizzontale per distinguere primo/ultimo quarto.

   Spessore del tratto controllato da variabili CSS (range 100-700):
     --moon-icon-outline-weight : contorno luna nuova (default 400)
     --moon-icon-filled-weight  : peso icone piene (default 400)
   Modificabili a livello globale o per singolo contesto (es. .yearLayout). */
.moon-icon {
    --moon-icon-outline-weight: 500;
    --moon-icon-filled-weight: 500;

    font-variation-settings: 'FILL' 0, 'wght' var(--moon-icon-outline-weight), 'GRAD' 0, 'opsz' 20;
    font-size: 1em !important;
    line-height: 1;
    display: inline-block;
    vertical-align: -0.15em;
    color: var(--gray-35, #555);

    &.is-filled {
        font-variation-settings: 'FILL' 1, 'wght' var(--moon-icon-filled-weight), 'GRAD' 0, 'opsz' 20;
    }

    &.is-reflected {
        transform: scaleX(-1);
    }
}

/* Override specifici per le icone moon visualizzate nell'eventlist (#cpEventsList).
   Modifica i valori qui senza toccare il default globale di .moon-icon. */
#cpEventsList .moon-icon {
    --moon-icon-outline-weight: 500;
    --moon-icon-filled-weight: 500;
    margin-right: 0.5em;
}

@media screen and (min-width: 768px), print and (min-width: 768px) {
    #cpEventsList .eventlist.container-cp {
        column-count: 2;
    }
}

@media screen and (min-width: 1024px), print and (min-width: 1024px) {
    #cpEventsList .eventlist.container-cp {
        column-count: 3;
    }
}

@media screen and (min-width: 1280px), print and (min-width: 1280px) {
    #cpEventsList .eventlist.container-cp {
        column-count: 4;
    }
}

/*=============================*/
/*=== CREDITS*/
/*=============================*/
#calpro #cpCredits {
    padding-left: 10px;
    padding-right: 10px;
    text-align: right;

    & img {
        width: 200px;
    }
}

#onlineCalendarLogo path {
    fill:red;
    /* colore del logo (riempimento vettoriale) */
    border-left: 1px solid black;
}

/*=============================*/
/*=== EXPORT BUTTONS*/
/*=============================*/
#cpExportButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 3rem;
    margin-bottom: 1.5rem;

    & .exportAction {
        margin: 0;

        & .material-symbols-rounded {
            vertical-align: middle;
        }
    }
}

/* Mobile: i bottoni export vanno in colonna a tutta larghezza, con spazio
   verticale netto (gap), così non si attaccano tra loro quando vanno a capo. */
@media (max-width: 640px) {
    #cpExportButtons {
        flex-direction: column;
        align-items: stretch;
    }
}

/*Copy button*/
/*Event Layer 1: Sundays styling */
/*TOAST*/
.calpro-toast-container .swal2-toast.swal2-icon-success {
    background:var(--success);
    color: white;
}

.calpro-toast-container .swal2-popup.swal2-toast .swal2-title, .calpro-toast-container .swal2-popup.swal2-toast .swal2-html-container {
    font-size: 1.125rem;
    line-height: 1.25;
}

/* ── Range slider override (batte UIkit .uk-range) ── */
input.cpRangeInput::-webkit-slider-runnable-track {
    background: var(--gray-70) !important;
}
input.cpRangeInput:focus::-webkit-slider-runnable-track,
input.cpRangeInput:active::-webkit-slider-runnable-track {
    background: var(--gray-70) !important;
}
input.cpRangeInput::-webkit-slider-thumb {
    background: #fff !important;
    border-color: var(--text) !important;
}
input.cpRangeInput::-moz-range-track {
    background: var(--gray-70) !important;
}
input.cpRangeInput:focus::-moz-range-track {
    background: var(--gray-70) !important;
}
input.cpRangeInput::-moz-range-thumb {
    background: #fff !important;
    border-color: var(--text) !important;
}

/* --- leapYearLayout: column spacing ---
 * leapYearLayout eredita tutte le regole di .monthListLayout (piggyback CSS).
 * .yearNumber sostituisce .dayNumber della monthlist: replichiamo flex/order/
 * allineamento in modo che numero settimana e colonna anno siano dimensionati
 * identici a monthlist.
 *
 * Inoltre: monthlist nasconde .weekNumber per tutte le righe tranne quella
 * che coincide col firstdayofweek (o firstDayOfMonth). Nell'elenco anni
 * bisestili OGNI riga è un anno diverso: il numero settimana va sempre
 * mostrato. Forziamo opacity:1 solo sotto .leapYearLayout.
 */
/* Larghezze FISSE in % su tutte le colonne di leapYearLayout: il bold
 * ereditato dalle regole monthlist (es. domenica) non deve allargare la
 * cella testo e sballare l'allineamento delle righe sottostanti.
 */
.leapYearLayout .month.container-cp .yearNumber {
    flex: 0 0 17%;
    order: 2;
    text-align: left;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: var(--tight);
}

/* .dayName ospita sia il nome del giorno che la data estesa (inline).
 * Tutto allineato a sinistra.
 */
.leapYearLayout .month.container-cp .innerContainer .dayName,
.leapYearLayout .month.container-cp .header .dayName {
    flex: 0 0 83%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Data estesa (29 + mese + anno) inline dopo il nome del giorno:
 * testo piccolo e tono secondario.
 */
.leapYearLayout .month.container-cp .innerContainer .dayName .leapYearDate {
    margin-left: 0.4em;
    font-size: var(--testo-piccolo2);
    font-weight: normal;
    color: var(--gray);
    letter-spacing: var(--tight);
}

.leapYearLayout.monthListLayout .month.container-cp .day {
    align-items: baseline;
}

@media only screen and (min-width: 1024px), print and (min-width: 1024px) {
    .leapYearLayout .month.container-cp .yearNumber {
        flex: 0 0 8%;
    }

    .leapYearLayout .month.container-cp .innerContainer .dayName,
    .leapYearLayout .month.container-cp .header .dayName {
        flex: 0 0 92%;
    }

    .leapYearLayout .month.container-cp .day {
        padding-left: 1em;
        padding-right: 1em;
    }
}

/* Mobile (< 1024px): testo a 1rem SOLO in leapYearLayout.
 * monthlist su mobile usa un clamp enorme (~6vw) sul .month.container-cp
 * che fa ingrandire tutto via em; qui lo riportiamo a 1rem e forziamo 1rem
 * sui testi principali delle righe perché gli em figli lavorino su base 1rem.
 */
@media only screen and (max-width: 1023.98px) {
    .leapYearLayout .month.container-cp {
        font-size: 1rem;
    }

    .leapYearLayout .month.container-cp .day,
    .leapYearLayout .month.container-cp .header,
    .leapYearLayout .month.container-cp .yearNumber,
    .leapYearLayout .month.container-cp .yearNumber .standardContent,
    .leapYearLayout .month.container-cp .dayName,
    .leapYearLayout .month.container-cp .dayName .leapYearDate {
        font-size: 1rem;
    }
}


/*=== timezoneLayout (layout key: timezone)
  ============================================================== */

/* Box-sizing reset scoped to the timezone wrapper only */
.timezoneLayout#cpWorldTimezoneContainer *,
.timezoneLayout#cpWorldTimezoneContainer *::before,
.timezoneLayout#cpWorldTimezoneContainer *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Unified container: widget body + #cpInfoArea + #cpExportButtons (single element) */
.timezoneLayout#cpWorldTimezoneContainer {
    --bg:         transparent;
    --surface:    #ffffff;
    --surface2:   #e8eaed;
    --border:     #d4d8de;
    --border2:    #b8bec8;
    --text:       #1c2030;
    --muted:      #888888;
    --accent:     #f59e0b;
    --accent-dim: rgba(245,158,11,0.15);
    --ocean:      transparent;
    --land:       #949494;
    --land-hover: oklch(100% 0.00011 271.152 / 0.3);
    --land-active:#f59e0b;
    --land-border: rgba(255,255,255,0.2);
    --land-border-day: rgba(255,255,255,0.2);
    --land-border-night: rgba(255, 255, 255, 1);
    --land-border-w: 1.6;
    --land-border-night-w: 1;
    --land-border-over: rgba(255,255,255,0.2);
    --land-border-over-w: 1.6;
    --glow:       rgba(0,123,255,0.25);
    --graticule:  rgba(0,0,0,0.07);

    --equator-color:   rgb(0 0 0 / 25%);
    --equator-width:   1px;
    --meridian-color:  rgb(0 0 0 / 25%);
    --meridian-width:  1px;

    --night-color:      4,12,45;
    --night-core:       0.90;
    --night-mid:        0.60;
    --night-edge:       0.40;
    --night-blur:       3px;
    --night-hl-opacity: 0.4;
    --night-hl-stroke:  rgba(255,255,180,0.15);

    --city-dot-day:     #2a2a2a;
    --city-dot-night:   #e8e8e8;
    --city-dot-active:  #1c2030;
    --city-dot-glow:       drop-shadow(0 0 3px rgba(241, 248, 37, 0.9)) drop-shadow(0 0 6px rgba(245,158,11,0.9)) drop-shadow(0 0 12px rgba(245,158,11,0.5));
    --city-dot-glow-night: drop-shadow(0 0 3px rgba(241, 248, 37, 0.9)) drop-shadow(0 0 6px rgba(245,158,11,0.9)) drop-shadow(0 0 12px rgba(245,158,11,0.5));
    /* Glow per i city-marker attivi del badge B (destinazione): derivati
       da --tz-b via color-mix, nessun hex hardcoded. Centro chiaro → bordo
       sfumato col tono base. Giorno e notte volutamente uguali per ora
       (come la coppia A); si possono differenziare qui se serve. */
    --city-dot-glow-b:       drop-shadow(0 0 3px color-mix(in srgb, var(--tz-b) 50%, white))
                             drop-shadow(0 0 6px var(--tz-b))
                             drop-shadow(0 0 12px color-mix(in srgb, var(--tz-b) 50%, transparent));
    --city-dot-glow-b-night: drop-shadow(0 0 3px color-mix(in srgb, var(--tz-b) 50%, white))
                             drop-shadow(0 0 6px var(--tz-b))
                             drop-shadow(0 0 12px color-mix(in srgb, var(--tz-b) 50%, transparent));
    --shadow-sm:  0 1px 2px rgba(0,0,0,0.07);
    --shadow:     0 2px 8px rgba(0,0,0,0.09), 0 1px 2px rgba(0,0,0,0.06);

    /* TIMING UNIFICATI — una sola sorgente per tutte le transizioni della
       mappa timezone (accensione/spegnimento tz, fade bordi paesi nelle zone
       attive, fade dei fusi frazionari via opacity). Il JS legge questi
       valori a runtime via getComputedStyle, così modificare un numero qui
       aggiorna SIA il CSS SIA il JS. */
    --tz-fade-in:  0.40s;  /* accensione: più morbida, non sbalza */
    --tz-fade-out: 0.55s;  /* spegnimento: rilascio lungo, chiusura molto dolce */
    /* Curva ultra-soft (easeOutExpo-like): decelera fortemente verso il
       fondo, così la parte finale del fade è un lungo respiro invece di
       un arresto netto. Ottima per transizioni prolungate, mantiene una
       partenza reattiva grazie al primo control point vicino allo zero. */
    --tz-ease:     cubic-bezier(0.16, 1, 0.3, 1);

    display: block;
    width: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: visible;
}

/* #cpInfoArea and #cpExportButtons: siblings of #cpWorldTimezoneContainer inside #calpro —
   styled by the shared rules in the EVENTS LIST / EXPORT BUTTONS sections sopra. */

/* Isolate stacking context so mix-blend-mode on .notte works regardless of Joomla parent context */
.timezoneLayout #cpWorldTimezoneContainer #map-wrap { isolation: isolate; }

/* -- CENTRAL BANNER (UTC badge + local time + country count) -- */
.timezoneLayout #cpWorldTimezoneContainer #tz-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 0.6rem 1rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    flex-direction: column;
}
.timezoneLayout #cpWorldTimezoneContainer .tz-badge {
    padding: 0.3rem 0.75rem;
    background: var(--accent);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    border: 0;
    border-radius: 5px;
    letter-spacing: 0.02em;
    min-width: 76px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}
.timezoneLayout #cpWorldTimezoneContainer .tz-time {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    line-height: 1;
}
.timezoneLayout #cpWorldTimezoneContainer .tz-count {
    font-size: 0.75rem;
    color: var(--muted);
    white-space: nowrap;
}
.timezoneLayout #cpWorldTimezoneContainer .tz-count strong { color: var(--text); font-weight: 600; }

/* -- MAP --
   Natural Earth 1 default sphere bounds are 960×500 at scale 158.837
   (aspect 1.92:1). JS uses scale W/6.4, so the projected map keeps
   that same aspect. 1.9:1 on the wrap fits the whole globe vertically
   with a little margin for night-blur spill. */
.timezoneLayout #cpWorldTimezoneContainer #map-wrap {
    flex: 0 0 auto;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 1.9 / 1;
    position: relative;
    background: var(--ocean);
}
@media screen and (min-width: 768px) {
  .timezoneLayout #cpWorldTimezoneContainer #map-wrap { width: 90%; }
}
.timezoneLayout #cpWorldTimezoneContainer #map-wrap svg { display: block; width: 100%; height: 100%; shape-rendering: geometricPrecision; overflow: visible; }

.timezoneLayout #cpWorldTimezoneContainer .sphere    { fill: var(--ocean); }
.timezoneLayout #cpWorldTimezoneContainer .graticule { fill: none; stroke: var(--graticule); stroke-width: 1px; }
.timezoneLayout #cpWorldTimezoneContainer .equator   { fill: none; stroke: var(--equator-color); stroke-width: var(--equator-width); pointer-events: none; }
.timezoneLayout #cpWorldTimezoneContainer .meridian  { fill: none; stroke: var(--meridian-color); stroke-width: var(--meridian-width); pointer-events: none; }

/* ---------- Separatore cambio giorno (meridiano mezzanotte) ----------
   Linea mobile al longitudine dove local time = 00:00. Aggiornata in
   updateDayChange() a ogni tick di updateTerminator (60s + slider). Due
   label date: ovest = oggi (grigio muted), est = domani (tinta tz-b).
   Halo bianco via paint-order per leggibilità su qualsiasi sfondo. */
.timezoneLayout #cpWorldTimezoneContainer .day-change-line {
    fill: none;
    stroke: color-mix(in srgb, var(--tz-b) 65%, white);
    stroke-width: var(--day-change-line-width);
    stroke-dasharray: var(--day-change-line-dash);
    opacity: var(--day-change-line-opacity);
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--tz-b) 50%, white));
    pointer-events: none;
    animation: day-change-flow 4s linear infinite;
}
/* Badge date sui due lati del meridiano: tutti i valori regolabili dalle
   variabili --day-change-badge-* sul container (sezione "Separatore cambio
   giorno"). Effetto "leggero moltiplica" sul rect: mix-blend-mode: multiply
   scurisce delicatamente l'area sottostante invece di schiararla. Nessun
   bordo, nessun alone sul testo. */
.timezoneLayout #cpWorldTimezoneContainer .day-change-badge {
    opacity: var(--day-change-badge-opacity);
    pointer-events: none;
}
.timezoneLayout #cpWorldTimezoneContainer .day-change-badge-bg {
    fill: var(--day-change-badge-bg-color);
    fill-opacity: var(--day-change-badge-bg-opacity);
    stroke: none;
    mix-blend-mode: multiply;
}
.timezoneLayout #cpWorldTimezoneContainer .day-change-badge-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--day-change-badge-font-size);
    font-weight: var(--day-change-badge-font-weight);
    text-anchor: middle;
    dominant-baseline: middle;
    letter-spacing: var(--day-change-badge-letter-spacing);
    /* Prima lettera maiuscola per locali dove IntlDateFormatter restituisce
       abbreviazioni in lowercase (es. it: "gen", "feb"). */
    text-transform: capitalize;
    pointer-events: none;
    fill: var(--day-change-badge-text-color);
}

/* Etichetta meridiano Greenwich: block HTML fra strip e mappa (respira).
   Centrato orizzontalmente sull'asse verticale del meridiano 0. */
.timezoneLayout #cpWorldTimezoneContainer .oc-meridian-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0;
    line-height: 1;
    user-select: none;
}
.timezoneLayout #cpWorldTimezoneContainer .oc-meridian-label .oml-utc {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text);
}
.timezoneLayout #cpWorldTimezoneContainer .oc-meridian-label .oml-sub {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
}
.timezoneLayout #cpWorldTimezoneContainer .borders       { fill: none; stroke-width: var(--land-border-w); stroke-linejoin: round; stroke-linecap: round; }
.timezoneLayout #cpWorldTimezoneContainer .borders-day   { stroke: var(--land-border-day); }
.timezoneLayout #cpWorldTimezoneContainer .borders-night { stroke: var(--land-border-night); stroke-width: var(--land-border-night-w); }
.timezoneLayout #cpWorldTimezoneContainer .borders-over { fill: none; stroke: var(--land-border-over); stroke-width: var(--land-border-over-w); stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }

.timezoneLayout #cpWorldTimezoneContainer .country {
    fill: var(--land);
    stroke: none;
    cursor: pointer;
    /* Usa i tempi/easing centralizzati dei fade mappa */
    transition: fill var(--tz-fade-in) var(--tz-ease);
}
/* Nessun :hover fill sui paesi: il feedback hover vive su .tz-region
   (layer unico sopra i paesi, clippato alla sagoma del paese corrente),
   così paesi single-tz e multi-tz si comportano identicamente. */

/* Linee UTC nascoste completamente: apparivano come "meridiani sparsi
   evidenziati" in arancio allo spostamento dello slider. La griglia
   sottostante (.graticule / .meridian / .equator) resta come riferimento. */
.timezoneLayout #cpWorldTimezoneContainer .utc-line,
.timezoneLayout #cpWorldTimezoneContainer .utc-line.hi { display: none; }

/* -- TOOLTIP -- dimensioni fisse: nomi lunghi non espandono il tooltip. */
.timezoneLayout #cpWorldTimezoneContainer {
    #tooltip {
        position: absolute;
        pointer-events: none;
        width: 240px;
        min-height: 74px;
        background: var(--surface);
        /* Bordo superiore grigio neutro (omologato allo stile "sobrio" del
           badge: il colore del target viene trasmesso dal UTC attivo, non
           più dal bordo). */
        border-top: 5px solid var(--gray-30);
        border-radius: 12px;
        padding: 0.7rem 0.85rem 0.8rem;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08),
                    0 1px 3px  rgba(0, 0, 0, 0.05);
        font-family: 'Inter', sans-serif;
        font-size: 0.73rem;
        opacity: 0;
        transform: translateY(4px);
        /* Transizione su left/top: quando il dead-zone JS riposiziona il
           tooltip (cursore uscito dal raggio di stabilità) lo spostamento
           è uno "scivolamento" invece di un salto secco. */
        transition: opacity 0.12s, transform 0.12s, left 0.18s ease-out, top 0.18s ease-out;
        z-index: 20;
        overflow: hidden;

        &.on { opacity: 1; transform: translateY(0); }

        /* Mini-mappa dello stato in alto a destra, grigio chiarissimo, non interattiva.
           Distanziata dai bordi del tooltip; padding interno gestito da fitExtent in JS. */
        .tt-map {
            position: absolute;
            top: 6px;
            right: 8px;
            width: 90px;
            height: 58px;
            pointer-events: none;
            z-index: 0;
            opacity: 0.85;
        }
        .tt-map-path {
            fill: var(--tz-map-bg);
            stroke: none;
        }

        /* Testo sopra la mini-mappa */
        .tt-name,
        .tt-date,
        .tt-utc,
        .tt-time-row,
        .tt-time,
        .tt-dst {
            position: relative;
            z-index: 1;
        }

        /* Nome (città · paese OR paese): riga dedicata. Niente ellipsis: il
           tooltip è largo 240px, la riga può andare a capo se lunga. */
        .tt-name {
            font-size: 0.78rem;
            font-weight: 700;
            color: var(--text);
            letter-spacing: 0;
            line-height: 1.3;
            margin-bottom: 0.25rem;
        }
        /* Inline country name dopo il nome città: stesso look di
           .oc-location-ctry nel badge principale (muted, peso regular). */
        .tt-name-ctry {
            color: var(--gray);
            font-weight: 400;
        }

        /* UTC sotto l'ora: riga propria. Multi-tz (tooltip paese) renderizza
           tutti gli offset separati da virgole; l'attivo (tz sotto cursore)
           prende il colore del target. */
        .tt-utc {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.65rem;
            font-weight: 700;
            line-height: 1.3;
            letter-spacing: 0;
            margin-top: 0.1rem;
        }
        /* Multi-TZ: orange l'attivo (sotto cursore), grigio gli altri.
           Transizione morbida per non "flashare" quando il cursore attraversa
           i confini tz interni di un paese multi-fuso. */
        .tt-utc-tag {
            transition: color 0.18s ease-out;
        }
        /* UTC tag attivo (tz sotto cursore): colore dipende dal badge
           principale attivo al momento (A → accent, B → tz-b). Classe
           is-target-* applicata al #tooltip dal JS in renderBadges. */
        .tt-utc-tag.is-active { color: var(--accent); }
        .tt-utc-tag:not(.is-active) { color: var(--gray-70); }
        &.is-target-b .tt-utc-tag.is-active { color: var(--tz-b); }
        .tt-utc-sep { color: var(--muted); opacity: 0.55; }
        /* Riga orario + pill DST: stessa struttura di .oc-time-row. */
        .tt-time-row {
            display: flex;
            align-items: baseline;
            gap: 0.4rem;
        }
        /* Orario: grande come nel badge. L'SVG orologio legacy è nascosto. */
        .tt-time {
            font-size: 1.5rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.1;
            color: var(--text);
            font-family: 'JetBrains Mono', monospace;
            font-variant-numeric: tabular-nums;
        }
        .tt-time svg { display: none; }

        /* Data sotto il nome stato/città: sottotitolo grigio scuro che
           contestualizza la location con il giorno corrente nel suo tz. */
        .tt-date {
            font-size: 0.64rem;
            color: var(--gray-70);
            font-weight: 700;
            font-family: 'JetBrains Mono', monospace;
            letter-spacing: 0;
            line-height: 1.2;
            margin-bottom: 0.05rem;
        }
        .tt-date:empty { display: none; }

        /* Pill "Ora legale": stesso look del .oc-dst badge. Tinta default
           accent, override tz-b via is-target-b (regola sotto). */
        .tt-dst {
            display: inline-flex;
            align-items: center;
            padding: 2px 5px;
            border-radius: var(--default-radius-small);
            font-size: 0.54rem;
            font-weight: 500;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            line-height: 1.3;
            color: white;
            white-space: nowrap;
            background: var(--accent);
            margin-left: auto;
        }
        .tt-dst:empty { display: none; }

        /* Variante città: stesso layout, fondo un po' più scuro, border-top = colore testo nome.
           La sagoma del paese viene moltiplicata sul background del tooltip
           per ottenere un'ombra coerente col colore di sfondo.
           NOTA: mix-blend-mode va sull'SVG CONTENITORE (.tt-map), non sul
           path figlio. Il path figlio blenderebbe solo contro il canvas
           dell'SVG (trasparente) → multiply silenziosamente no-op. L'SVG
           intero invece blenda contro il background del tooltip. */
        /* Tooltip città e paese hanno lo stesso look: nessuna variante
           .is-city che tingeva il fondo di arancione. */
        &.is-target-b .tt-dst {
            background: var(--tz-b);
        }
    }
}

/* Icona my_location inline prima del nome città (badge + tooltip) */
.timezoneLayout #cpWorldTimezoneContainer .oc-city-icon {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 1.1em;
    line-height: 1;
    /* Allineamento ottico: inline-block + translateY spostando il glifo in
       su di 1px per compensare la metrica interna di Material Symbols
       (ha più spazio bianco sotto che sopra). Più preciso di
       vertical-align: -0.18em che lo buttava visibilmente basso. */
    display: inline-block;
    vertical-align: middle;
    transform: translateY(-1px);
    margin-right: 0.2em;
    /* Segue il colore del testo che la contiene (nome città bianco su
       tooltip .is-city, --text nei badge e nei tooltip paese, ecc.) */
    color: inherit;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* -- CONTROLS -- */
.timezoneLayout #cpWorldTimezoneContainer #controls {
    flex-shrink: 0;
    padding: 0;
    position: relative;
}
/* Controlli sempre visibili: rimosso il pulsante di toggle + le media query
   che ne gestivano lo stato collapsed su schermi bassi. */
.timezoneLayout #cpWorldTimezoneContainer #ctrl-body {
    padding: 0.55rem 1rem 0.6rem;
}
.timezoneLayout #cpWorldTimezoneContainer .s-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.18rem;
}
.timezoneLayout #cpWorldTimezoneContainer .s-labels span {
    font-size: 0.52rem;
    color: var(--muted);
    font-weight: 400;
    letter-spacing: 0.03em;
}
.timezoneLayout #cpWorldTimezoneContainer .s-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.timezoneLayout #cpWorldTimezoneContainer .s-row label {
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
/* Slider styling (track + thumb) ora interamente gestito nello scope
   annidato `.timezoneLayout#cpWorldTimezoneContainer .oc-slider-row ...`:
   le regole legacy flat qui presenti in passato (con override su
   #time-label, .s-row-sim, input[type=range]) sono state rimosse perché
   avevano specificità maggiore dei nuovi selettori e forzavano colori
   arancio e font JetBrains. */

/* -- STRIP (capitali + UTC) -- */
.timezoneLayout #cpWorldTimezoneContainer .strip-wrap {
    position: relative;
    flex-shrink: 0;
    margin-bottom: 1em;
}
.timezoneLayout #cpWorldTimezoneContainer .strip-wrap::before,
.timezoneLayout #cpWorldTimezoneContainer .strip-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 32px;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.2s;
}
.timezoneLayout #cpWorldTimezoneContainer .strip-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--ocean), transparent);
    opacity: var(--fade-left, 0);
}
.timezoneLayout #cpWorldTimezoneContainer .strip-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--ocean), transparent);
    opacity: var(--fade-right, 1);
}
.timezoneLayout #cpWorldTimezoneContainer .map-strip {
    position: relative;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    overflow-x: auto;
    justify-content: safe center;
    scrollbar-width: none;
    -ms-overflow-style: none;
    white-space: nowrap;
    background-color: var(--gray-91);
    border-radius: var(--default-radius);
}
.timezoneLayout #cpWorldTimezoneContainer .map-strip::-webkit-scrollbar { display: none; }

.timezoneLayout #cpWorldTimezoneContainer .strip-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 0.22rem 0.65rem;
    font-family: 'Inter', sans-serif;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    /* Toggle on/off allineato ai fade mappa */
    transition: background var(--tz-fade-in) var(--tz-ease), color var(--tz-fade-in) var(--tz-ease);
    flex-shrink: 0;
    gap: 1px;
    -webkit-appearance: none;
    appearance: none;
}
.timezoneLayout #cpWorldTimezoneContainer .strip-btn:hover { background: rgba(0,0,0,0.07); }
.timezoneLayout #cpWorldTimezoneContainer .strip-btn.on    { background: var(--accent); }
.timezoneLayout #cpWorldTimezoneContainer .strip-btn.on .sb-main,
.timezoneLayout #cpWorldTimezoneContainer .strip-btn.on .sb-sub { color: #1a1208; }

.timezoneLayout #cpWorldTimezoneContainer .sb-main {
    font-size: var(--testo-piccolo2);
    font-weight: 700;
    line-height: 1.15;
    transition: color var(--tz-fade-in) var(--tz-ease);
    margin-bottom: 0.15em;
}
.timezoneLayout #cpWorldTimezoneContainer .utc-btn .sb-main {
    font-weight: 300;
    font-size: 0.64rem;
    letter-spacing: 0.03em;
}
.timezoneLayout #cpWorldTimezoneContainer .sb-sub {
    font-size: var(--testo-piccolo3);
    font-weight: 500;
    color: var(--gray);
    line-height: 1;
    transition: color var(--tz-fade-in) var(--tz-ease);
    font-family: 'JetBrains Mono', monospace;
}

.timezoneLayout #cpWorldTimezoneContainer .quick-jumps { display: none; }

/* -- COMPACT STRIP --
   Shrink dello strip città quando lo spazio è poco, su due assi:
     • larghezza: sotto la breakpoint @xl di Yootheme (1280px → usa
       max-width: 1279.98px per coprire fino a 1279px esclusivo). Se il
       tema cambia il valore di @xl, aggiornare qui l'unica soglia. La
       visibilità sotto @s è invece delegata a uk-visible@s nell'HTML
       (Yootheme).
     • altezza: soglia 680px, non esiste equivalente Yootheme per l'altezza. */
@media (max-width: 1279.98px), (max-height: 680px) {
    .timezoneLayout #cpWorldTimezoneContainer #tz-banner { gap: 0.5rem; padding: 0.4rem 0.6rem; }
    .timezoneLayout #cpWorldTimezoneContainer .tz-badge { font-size: 0.72rem; min-width: 60px; padding: 0.2rem 0.5rem; }
    .timezoneLayout #cpWorldTimezoneContainer .tz-time { font-size: 0.88rem; }
    .timezoneLayout #cpWorldTimezoneContainer .tz-count { font-size: 0.6rem; }

    .timezoneLayout #cpWorldTimezoneContainer .map-strip { padding: 0.2rem 0.2rem; gap: 0.2rem; }
    .timezoneLayout #cpWorldTimezoneContainer .strip-btn { padding: 0.15rem 0.38rem; }
    .timezoneLayout #cpWorldTimezoneContainer .sb-main { font-size: 0.6rem; }
    .timezoneLayout #cpWorldTimezoneContainer .sb-sub  { font-size: 0.48rem; }
}

/* -- TERMINATORE GIORNO/NOTTE -- */
.timezoneLayout #cpWorldTimezoneContainer .notte { fill: url(#night-grad); stroke:none; pointer-events:none; mix-blend-mode: multiply; filter: blur(var(--night-blur)); }
.timezoneLayout #cpWorldTimezoneContainer .notte-soft { fill: url(#night-grad); stroke:none; pointer-events:none; mix-blend-mode: multiply; opacity: 0.35; filter: blur(var(--night-blur)); }
@keyframes hl-fade { from { opacity: 0; } }

/* ---------- Timezone: due layer a semantica fissa ----------
   .tz-region     (layer active, nessun clip paese): fascia IANA intera quando
                   una tz è selezionata come A o B.
   .tz-hover-path (layer hover, clip fisso al paese sotto cursore): feedback
                   grigio chiaro sulla singola fascia sotto il cursore.
   Entrambi con transition uniforme fill 0.22s. Le classi di stato active sono
   replicate sul layer hover: così al click la copia hover passa direttamente
   da --land-hover a --land-active (niente "marroncino" intermedio che
   apparirebbe se si dissolvesse verso transparent sopra l'oro in crescita).
   Ordine regole: .is-hover prima, .is-active-* dopo → active vince. */
.timezoneLayout #cpWorldTimezoneContainer .tz-region,
.timezoneLayout #cpWorldTimezoneContainer .tz-hover-path {
    fill: transparent;
    stroke: none;
    pointer-events: none;
    /* Fade-OUT: stato di arrivo = senza classi → durata --tz-fade-out.
       Fade-IN: stato di arrivo con classe → override --tz-fade-in (sotto). */
    transition: fill var(--tz-fade-out) var(--tz-ease);
}
.timezoneLayout #cpWorldTimezoneContainer .tz-hover-path.is-hover,
.timezoneLayout #cpWorldTimezoneContainer .tz-region.is-active-a,
.timezoneLayout #cpWorldTimezoneContainer .tz-hover-path.is-active-a,
.timezoneLayout #cpWorldTimezoneContainer .tz-region.is-active-b,
.timezoneLayout #cpWorldTimezoneContainer .tz-hover-path.is-active-b {
    transition: fill var(--tz-fade-in) var(--tz-ease);
}
.timezoneLayout #cpWorldTimezoneContainer .tz-hover-path.is-hover { fill: var(--land-hover); }
.timezoneLayout #cpWorldTimezoneContainer .tz-region.is-active-a,
.timezoneLayout #cpWorldTimezoneContainer .tz-hover-path.is-active-a { fill: var(--land-active); }
.timezoneLayout #cpWorldTimezoneContainer .tz-region.is-active-b,
.timezoneLayout #cpWorldTimezoneContainer .tz-hover-path.is-active-b { fill: var(--tz-b); }
/* Ordine: .is-hover PRIMA di .is-active-* così, con stessa specificità,
   vincono le regole active quando un path è contemporaneamente hover e
   attivo (es. cursore sopra la tz selezionata). Senza questo ordine una
   tz partial selezionata diventava grigia durante l'hover. */
.timezoneLayout #cpWorldTimezoneContainer .tz-hover-path.is-partial.is-hover { fill: url(#partial-tz-pattern-hover); }
.timezoneLayout #cpWorldTimezoneContainer .tz-region.is-partial.is-active-a,
.timezoneLayout #cpWorldTimezoneContainer .tz-hover-path.is-partial.is-active-a { fill: url(#partial-tz-pattern); }
.timezoneLayout #cpWorldTimezoneContainer .tz-region.is-partial.is-active-b,
.timezoneLayout #cpWorldTimezoneContainer .tz-hover-path.is-partial.is-active-b { fill: url(#partial-tz-pattern-b); }

/* Fade per i fusi frazionari (.is-partial, es. India +5:30, Iran +3:30,
   Nepal +5:45, Terranova −3:30, ...): CSS transition di fill non interpola
   fra due url(#pattern) diversi, snappa istantaneamente. Per evitare flash
   di colore nelle transizioni usiamo opacity e teniamo il FILL BASE fisso
   sul pattern-hover (grigio):
     • Uscita hover (non-active): fill già grigio → non cambia. Opacity
       scende 1→0 → grigio che sbiadisce, niente flash arancio.
     • Deselezione active-a: fill snappa orange→grigio, opacity 1→0. Si
       vede un grigio sbiadire — molto meno invasivo del flash arancio pieno.
     • Attivazione (click): opacity 0→1 ed il fill snappa, ma a opacity 0
       il passaggio non è visibile.
   In ogni caso la fascia resta visibile per tutta la durata del fade
   (ne aveva bisogno per non sparire istantaneamente in deselezione). */
.timezoneLayout #cpWorldTimezoneContainer .tz-region.is-partial,
.timezoneLayout #cpWorldTimezoneContainer .tz-hover-path.is-partial {
    fill: url(#partial-tz-pattern-hover);
    opacity: 0;
    transition: opacity var(--tz-fade-out) var(--tz-ease);
}
.timezoneLayout #cpWorldTimezoneContainer .tz-hover-path.is-partial.is-hover,
.timezoneLayout #cpWorldTimezoneContainer .tz-region.is-partial.is-active-a,
.timezoneLayout #cpWorldTimezoneContainer .tz-hover-path.is-partial.is-active-a,
.timezoneLayout #cpWorldTimezoneContainer .tz-region.is-partial.is-active-b,
.timezoneLayout #cpWorldTimezoneContainer .tz-hover-path.is-partial.is-active-b {
    opacity: 1;
    transition: opacity var(--tz-fade-in) var(--tz-ease);
}

/* -- CITY MARKERS -- */
.timezoneLayout #cpWorldTimezoneContainer .city-marker {
    cursor: pointer;
    pointer-events: all;
}
.timezoneLayout #cpWorldTimezoneContainer .city-dot {
    fill: var(--city-dot-day);
    stroke: none;
    /* r gestito da JS via attributo SVG per compatibilità Firefox: la
       proprietà CSS "r" ha bug storici di rendering al cambio stato nei
       browser Gecko. La transizione su r funziona comunque quando il
       valore cambia via attributo. */
    transition: r 0.3s, fill var(--tz-fade-in) var(--tz-ease);
}
.timezoneLayout #cpWorldTimezoneContainer .city-marker.night .city-dot { fill: var(--city-dot-night); }
.timezoneLayout #cpWorldTimezoneContainer .city-marker.night:not(.active) { filter: drop-shadow(0 0 2px rgba(180,210,255,1)) drop-shadow(0 0 4px rgba(140,180,255,0.95)) drop-shadow(0 0 9px rgba(100,150,255,0.6)); }
.timezoneLayout #cpWorldTimezoneContainer .city-marker.active .city-dot { fill: var(--city-dot-active); }
.timezoneLayout #cpWorldTimezoneContainer .city-marker.active { filter: var(--city-dot-glow); }
.timezoneLayout #cpWorldTimezoneContainer .city-marker.active.night { filter: var(--city-dot-glow-night); }
.timezoneLayout #cpWorldTimezoneContainer .city-marker.active-b.night { filter: var(--city-dot-glow-b-night); }
.timezoneLayout #cpWorldTimezoneContainer .city-marker.active.night .city-dot { fill: var(--city-dot-night); }
.timezoneLayout #cpWorldTimezoneContainer .city-pulse,
.timezoneLayout #cpWorldTimezoneContainer .city-pulse-2,
.timezoneLayout #cpWorldTimezoneContainer .city-pulse-3 {
    fill: none;
    stroke-width: 3px;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    pointer-events: none;
}
.timezoneLayout #cpWorldTimezoneContainer .city-pulse   { stroke: #fde047; filter: blur(0.2px); }
.timezoneLayout #cpWorldTimezoneContainer .city-pulse-2 { stroke: #f97316; filter: blur(0.2px); }
.timezoneLayout #cpWorldTimezoneContainer .city-pulse-3 { stroke: #450a0a; filter: blur(0.2px); }
.timezoneLayout #cpWorldTimezoneContainer .city-marker.active .city-pulse   { animation: pulse-ring 2.4s ease-out 0s   infinite; }
.timezoneLayout #cpWorldTimezoneContainer .city-marker.active .city-pulse-2 { animation: pulse-ring 2.4s ease-out 0.6s infinite; }
.timezoneLayout #cpWorldTimezoneContainer .city-marker.active .city-pulse-3 { animation: pulse-ring 2.4s ease-out 1.2s infinite; }
@keyframes pulse-ring {
    0%   { transform: scale(1);   opacity: 0.9; }
    100% { transform: scale(5);   opacity: 0;   }
}

/* ==================================================================
   COMPARE UI — badge overlap, A/B palette, sliders 3-col, arc.
   A = oro (var(--accent), scope-local), B = blu (var(--tz-b), scope-local).
   Layout mobile-first: sotto 560px badge in colonna, swap ruotato 90°.
   Palette B = destinazione/seconda location. Il tono base è --tz-b
   (default: var(--global-link-color)); cambialo per riconfigurare tutta
   la palette B senza toccare il link color globale. Le --tz-b-* sono
   derivati con alpha/ombre: ritoccale solo per aggiustare le sfumature.
   ================================================================== */
.timezoneLayout#cpWorldTimezoneContainer {

    /* Palette B (paesi destinazione / seconda city, compare mode). */
    --tz-b:            #1e68bc;                                /* tono base B (cambia QUI per tingere tutta la palette B) */

    /* Colore thumb degli slider (cursori range). Derivato da --text così
       segue il tema; cambia la % col bianco per renderlo più chiaro/scuro. */
    --tz-slider-thumb: color-mix(in srgb, var(--text) 75%, white);

    /* Colore della mini-mappa del paese usata sia nei tooltip (.tt-map-path)
       sia come sfondo dei badge principali (.oc-map-bg-path). Un solo punto
       di ritocco per tenere coerenti gli elementi geometrici sulla palette. */
    --tz-map-bg: var(--gray-90);

    /* ── Separatore cambio giorno (meridiano mezzanotte) ────────────────
       Variabili per regolare l'aspetto dei due "badge date" ai lati della
       linea. Un solo punto di ritocco per tenerli coerenti e delicati.
       Testo bianco con glow azzurrino; sfondo rect molto traslucido (non
       grigio ma tinta tz-b molto diluita per armonia con la linea). */
    --day-change-badge-opacity:        0.85;   /* opacità globale del gruppo */
    --day-change-badge-bg-color:       color-mix(in srgb, var(--tz-b) 30%, white);
    --day-change-badge-bg-opacity:     0.55;   /* fill-opacity del rect (multiply richiede valori più alti per percepirsi) */
    --day-change-badge-radius:         5px;    /* border-radius SVG (rx/ry) */
    --day-change-badge-text-color:     var(--title);
    --day-change-badge-font-size:      12px;
    --day-change-badge-font-weight:    700;
    --day-change-badge-letter-spacing: 0.03em;
    --day-change-badge-pad-x:          7;      /* padding orizzontale in unità SVG */
    --day-change-badge-pad-y:          3;      /* padding verticale in unità SVG */
    --day-change-line-opacity:         0.85;
    --day-change-line-dash:            5 4;
    --day-change-line-width:           1.3;

    /* Hitbox invisibile sui city-marker: nessun ingrandimento dei pallini,
       solo area di hover/click pi\u00f9 generosa. */
    .city-hitbox {
        fill: transparent;
        pointer-events: all;
        cursor: pointer;
    }

    /* ---------- Badge area: sovrapposta al bordo inferiore della mappa ----------
       Due badge (A + B) sempre presenti; area centrale (swap + diff) vuota
       finché B non viene popolato. Il click su un badge lo rende attivo
       (riceve il prossimo click mappa/città); l'inattivo è "spento" con
       bordo/fondo smorzati e fade --short-transition. */
    /* Overlap verticale del badge sul bordo inferiore della mappa:
       in PX, non rem. Motivo: la mappa è dimensionata via JS in base al
       viewport (clientWidth/Height del wrap), non al font-size. Usando
       rem, un cambio di font (zoom browser, preferenze utente, override
       accessibilità) sfasa il badge rispetto al bordo mappa. Con px
       l'overlap resta fisso. */
    .oc-badge-area {
        position: relative;
        margin: -80px auto 0;
        max-width: 960px;
        align-items: center;
        z-index: 5;
    }

    .oc-badge-area.is-compare {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
        align-items: stretch;
        flex-wrap: wrap;
    }

    .oc-badge {
        background: var(--surface);
        border-radius: 10px;
        border-bottom-left-radius: var(--default-radius-small);
        border-bottom-right-radius: var(--default-radius-small);
        padding: 0.85rem 1.25rem 0.95rem;
        text-align: left;
        min-width: 250px;
        /* Altezza minima uguale per A e B (empty o pieno): evita che il
           contenitore badge-area cambi altezza quando B passa empty→pieno,
           che faceva "alzare" gli slider sotto. */
        min-height: 100px;
        position: relative;
        box-shadow: var(--card-shadow);
        border-top: 5px solid var(--accent);
        cursor: pointer;
        /* Fade su cambio attivo/inattivo: background, bordo, testo, opacity.
           Il testo non cambia colore in questo stato ma la transition è
           innocua e mantiene tutto allineato sullo stesso timing. */
        transition: background-color var(--short-transition) ease-in-out,
                    border-top-color  var(--short-transition) ease-in-out,
                    color             var(--short-transition) ease-in-out,
                    opacity           var(--short-transition) ease-in-out;

        &.is-b {
            border-color: var(--tz-b);
        }

        & .oc-meta:empty {
                display: none;
            }

        /* Stato "inattivo": bordo smorzato (mix 50% col bianco), fondo
           lievemente più scuro, opacity 0.55 → badge nettamente "spento"
           ma leggibile. Ordine delle regole: .is-inactive viene DOPO
           is-a/is-b così border-top-color qui ha la precedenza. */
        &.is-inactive {
            background-color: color-mix(in srgb, var(--surface) 96%, black);
            border-top-color: color-mix(in srgb, var(--accent) 50%, white);
            opacity: 0.75;
        }
        &.is-b.is-inactive {
            border-top-color: color-mix(in srgb, var(--tz-b) 50%, white);
        }

        /* Badge vuoto (B non ancora popolato): grande + centrato, niente
           testo. Mantiene bordo e radius coerenti col badge B pieno per
           non alterare la struttura visiva. */
        &.is-empty {
            display: grid;
            place-items: center;
        }

        /* Mappa del paese come sfondo del badge (stessa geometria azimutale
           equal-area del tooltip .tt-map). Ancorata al bordo destro, dietro
           al contenuto grazie a z-index:0 + posizione absolute. overflow:hidden
           sul badge la clippa se eccede. */
        overflow: hidden;

        & > .oc-map-bg {
            position: absolute;
            top: 8px;
            right: 10px;
            width: 80px;
            height: 50px;
            pointer-events: none;
            z-index: 0;
        }
        & > .oc-top,
        & > .oc-time-row,
        & > .oc-time,
        & > .oc-meta {
            position: relative;
            z-index: 1;
        }
    }

    .oc-map-bg-path {
        fill: var(--tz-map-bg);
        stroke: none;
        opacity: 0.6;
    }

    /* Grande "+" dentro il badge vuoto. Colore --tz-b, smorzato quando il
       badge è inattivo (ereditando l'attenuazione del contesto). */
    .oc-empty-plus {
        font-size: 3.5rem;
        color: var(--tz-b);
        line-height: 1;
        user-select: none;
        transition: color var(--short-transition) ease-in-out, opacity var(--short-transition) ease-in-out;
    }
    .oc-badge.is-inactive .oc-empty-plus {
        opacity: 0.5;
    }

    /* Top-row del badge: nome location a sinistra, UTC a destra.
       align-items: center (non baseline): con baseline, quando la location
       è vuota non c'è testo da cui calcolare la baseline e il flex layout
       "salta" verticalmente. Center è stabile indipendentemente dal
       contenuto; il min-height sulla location tiene la riga sempre alta
       come una riga piena. */
    .oc-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.1rem;
    }

    .oc-location {
        font-size: var(--testo-piccolo2);
        color: var(--text);
        font-weight: 600;
        line-height: 1.3;
        /* Altezza minima pari a una riga di testo anche quando il div è
           vuoto (caso: niente città/paese/tz): così l'orario e il meta
           sottostanti non si alzano. 1.3em = line-height × 1 riga. */
        min-height: 1.3em;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Fallback senza città/paese (solo tz o offset nudo): nome zona
       localizzato in grigetto --gray-70 per differenziarlo visivamente
       da una selezione esplicita (città o stato). */
    .oc-location.is-tz-only {
        color: var(--gray-70);
        font-weight: 500;
    }
    /* Nome paese inline dopo il nome città ("Milano · Italia"). Peso
       normale e colore muted: gerarchia città > paese. */
    .oc-location-ctry {
        color: var(--gray);
        font-weight: 500;
    }

    /* "UTC+1" in stile testo piccolo (non più pill colorato): più coerente
       col look del mockup compatto. Colore tinto del badge di appartenenza
       (A = --accent, B = --tz-b) per rinforzare visivamente l'accoppiata
       badge ↔ pill UTC. */
    .oc-utc-pill {
        font-size: var(--testo-piccolo2);
        color: var(--muted);
        font-weight: 700;
        letter-spacing: 0;
        font-family: 'JetBrains Mono', monospace;
        line-height: 1.3;
        flex-shrink: 0;
    }
    .oc-badge.is-a .oc-utc-pill { color: var(--accent); }
    .oc-badge.is-b .oc-utc-pill { color: var(--tz-b); }


    /* Riga orario: orologio a sinistra + eventual pill "Ora legale" a
       destra (allineato alla baseline dell'orologio per coerenza ottica). */
    .oc-time-row {
        display: flex;
        align-items: flex-end;
        gap: 0.5rem;
    }

    .oc-time {
        font-size: 1.95rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.1;
        color: var(--text);
        font-family: 'JetBrains Mono', monospace;
        font-variant-numeric: tabular-nums;
    }

    /* Pill "Ora legale" accanto all'orario (DST attivo). Colore segue il
       target del badge (A → accent, B → tz-b) via classi ereditate .is-a/.is-b. */
    .oc-dst {
        display: inline-flex;
        align-items: center;
        padding: 3px 6px;
        border-radius: var(--default-radius-small);
        font-size: var(--testo-piccolo3);
        font-weight: 500;
        font-family: JetBrains Mono, monospace;
        letter-spacing: 0;
        text-transform: uppercase;
        line-height: 1;
        color: white;
        white-space: nowrap;
        background: var(--accent);
        /* Spinge il pill all'estremità destra della .oc-time-row,
           l'orario resta ancorato a sinistra. */
        margin-left: auto;
        margin-bottom: 0.5em;
    }
    .oc-badge.is-b .oc-dst { background: var(--tz-b); }
    /* Secondi (e il ":" che li precede) nel badge: più piccoli e grigio
       scuro per concentrare l'attenzione su ore + minuti. */
    .oc-time-sec {
        font-size: 0.62em;
        color: var(--gray);
        font-weight: 500;
    }

    /* Data "12 Gen" nella riga meta, a destra del count paesi. Eredita
       font-size e color dal .oc-meta (muted/piccolo). */
    .oc-date {
        flex-shrink: 0;
        white-space: nowrap;
        font-weight: 500;
    }

    .oc-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.3rem;
        font-size: var(--testo-piccolo3);
        color: var(--gray);
        font-weight: 500;
        font-family: 'JetBrains Mono', monospace;
    }

    /* ---------- Compare UI: middle area (diff + swap) ----------
       Contenitore sempre presente fra i due badge (riserva lo spazio
       orizzontale anche quando B è vuoto, così il passaggio empty→full
       non fa "saltare" il layout). Diff e swap in colonna: swap sotto
       diff per risparmiare spazio orizzontale. Fade opacity attivato
       dalla classe .has-b sull'area quando stateB è popolato. */
    .oc-middle {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 0;
        /* Larghezza fissa: il contenuto non deve "gonfiare" la colonna
           centrale (es. "stessa ora" / "gleiche Zeit" più larghi di "avanti").
           Se il testo label è troppo lungo per la width, va a capo. */
        flex: 0 0 78px;
        width: 78px;
    }
    .oc-middle .oc-diff,
    .oc-middle .oc-swap {
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--short-transition) ease-in-out;
    }
    .oc-badge-area.has-b .oc-middle .oc-diff,
    .oc-badge-area.has-b .oc-middle .oc-swap {
        opacity: 1;
        pointer-events: auto;
    }

    /* Diff + swap sono visivamente un SINGOLO blocco verticale: stessa
       larghezza, niente gap, angoli arrotondati solo agli estremi
       (top sul diff, bottom sullo swap). Il pulsante swap è in "negativo"
       scuro con icona chiara per stacco visivo deciso. */
    .oc-diff {
        background: var(--surface2);
        border-radius: var(--default-radius-small) var(--default-radius-small) 0 0;
        padding: 0.65rem 0.8rem 0.5rem;
        text-align: center;

        .oc-diff-value {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text);
            font-family: 'JetBrains Mono', monospace;
            font-variant-numeric: tabular-nums;
            line-height: 1;
        }
    }

    .oc-swap {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 26px;
        border: none;
        border-radius: 0 0 var(--default-radius-small) var(--default-radius-small);
        background: var(--text);
        color: var(--surface);
        cursor: pointer;
        padding: 0;
        line-height: 1;
        font-family: inherit;
        transition: background var(--short-transition) ease-in-out;

        .material-symbols-rounded {
            font-size: 18px;
            line-height: 1;
            font-variation-settings: 'wght' 600;
        }

        &:hover {
            background: color-mix(in srgb, var(--text) 85%, black);
        }
    }

    /* ---------- Close del badge destinazione (riporta a modalità single) ----
       Pulsante X circolare in alto a destra del badge B. Il .oc-badge ha
       position:relative, l'X si ancora al suo angolo via absolute. Tempo
       transizione centralizzato (--tz-fade-in). */
    .oc-remove {
        position: absolute;
        /* X proprio nell'angolo, quasi a filo del border-top + bordo destro */
        top: 2px;
        right: 2px;
        /* Bottone VISUALE piccolo (18×18) → X lontano dal testo del badge.
           L'hitbox è estesa via ::before (~32×32) per mantenere grande
           l'area cliccabile senza che il cerchio di hover sporchi il testo. */
        width: 18px;
        height: 18px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--gray-55);
        cursor: pointer;
        font-size: 12px;
        line-height: 1;
        font-family: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background var(--tz-fade-in) var(--tz-ease),
                    color      var(--tz-fade-in) var(--tz-ease);

        /* Hitbox "fantasma" attorno al bottone: trasparente, intercetta
           i click sull'area più ampia (~32×32) pur lasciando il cerchio
           visuale 18×18 dentro l'angolo. */
        &::before {
            content: '';
            position: absolute;
            inset: -7px;
        }

        &:hover {
            background: var(--surface2);
            color: var(--text);
        }
    }

    /* ---------- Sliders: container + 3-col grid + track/thumb ---------- */
    #ctrl-body {
        max-width: 560px;
        margin: 1.2rem auto 0;
        padding: 1.1rem 1rem 0;
        border-top: 1px solid var(--border);
        display: grid;
        gap: 0.9rem;
    }

    .oc-slider-row {
        /* Le due colonne laterali hanno la stessa larghezza (1fr ciascuna):
           la colonna slider centrale (auto) risulta così perfettamente
           centrata sull'asse orizzontale del ctrl-body, indipendentemente
           dalla lunghezza dei testi. */
        display: grid;
        grid-template-columns: 1fr minmax(0, 320px) 1fr;
        gap: 0.9rem;
        align-items: center;
        margin: 0;
        font-family: 'Inter', sans-serif;

        .oc-slider-label {
            color: var(--text);
            text-transform: uppercase;
            font-weight: 700;
            font-size: var(--testo-piccolo2);
            white-space: nowrap;
            text-align: right;
            font-family: jetbrains mono, monospace;
        }
        .oc-slider-value {
            text-align: left;
            color: var(--text);
            font-variant-numeric: tabular-nums;
            /* Stile tipografico allineato alla label di sinistra (uppercase,
               letter-spacing, size): così nel default i due lati si leggono
               come coppia. Quando spostato cambia solo peso/colore. */
            font-size: var(--testo-piccolo2);
            text-transform: uppercase;
            font-weight: 700;
            font-family: jetbrains mono, monospace;
            white-space: nowrap;
            transition: color var(--short-transition) ease-in-out;
        }
        /* "Default" = slider non spostato: cambia solo il colore (muted);
           il peso resta 700 per coerenza con lo stato spostato. */
        .oc-slider-value.is-default {
            color: var(--text);
        }

        /* Wrapper value + reset: align-items baseline per ancorare sia il
           testo del value sia l'icona reset alla stessa linea di base. */
        .oc-slider-side {
            display: inline-flex;
            align-items: baseline;
            gap: 0.35rem;
            min-width: 0;
        }

        /* Icona reset (refresh) accanto al value: visibile SOLO quando lo
           slider è spostato dal default (il value non ha la classe is-default).
           Sibling selector sul value assume che il button sia fratello diretto
           dopo il value nel markup. */
        .oc-slider-reset {
            display: inline-block;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            color: var(--muted);
            opacity: 0;
            pointer-events: none;
            line-height: 1;
            transition: opacity var(--short-transition) ease-in-out,
                        color   var(--short-transition) ease-in-out;
        }
        .oc-slider-reset .material-symbols-rounded {
            font-size: 15px;
            line-height: 1;
            font-variation-settings: 'wght' 500;
            display: inline-block;
            /* Allineamento ottico alla baseline del testo del value:
               i glifi Material Symbols hanno spazio bianco non simmetrico
               sopra/sotto. translateY positivo spinge verso il basso per
               far cadere la X visiva sulla linea di base. Fine-tune qui. */
            vertical-align: baseline;
            transform: translateY(3px);
        }
        .oc-slider-reset:hover {
            color: var(--text);
        }
        .oc-slider-value:not(.is-default) + .oc-slider-reset {
            opacity: 1;
            pointer-events: auto;
        }

        /* Track nero trasparente leggero, thumb round col border dello sfondo */
        input[type=range] {
            -webkit-appearance: none;
            appearance: none;
            flex: none;
            width: 100%;
            height: 4px;
            background: rgba(0, 0, 0, 0.15);
            border-radius: 2px;
            outline: none;
            cursor: pointer;
            box-shadow: none;

            &::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background: var(--tz-slider-thumb);
                border: 2px solid var(--section-default-background, #FFFFFF);
                box-shadow: none;
                cursor: pointer;
                transition: transform 120ms ease;
            }
            &::-webkit-slider-thumb:hover {
                transform: scale(1.15);
            }
            &::-moz-range-thumb {
                width: 14px;
                height: 14px;
                border-radius: 50%;
                background: var(--tz-slider-thumb);
                border: 2px solid var(--section-default-background, #FFFFFF);
                cursor: pointer;
            }
        }
    }

    /* ---------- Strip-btn stato A/B (override del legacy .on) ---------- */
    .strip-btn {
        &.on-a {
            background: var(--accent);

            .sb-main,
            .sb-sub {
                color: var(--title);
            }
        }
        &.on-b {
            background: var(--tz-b);

            .sb-main,
            .sb-sub {
                color: var(--main-events-color);
            }
        }
    }

    /* (Highlight zone B: ora gestito dalle regole unificate .tz-region.is-active-b
       più sopra — niente regole dedicate qui.) */

    /* ---------- City marker stato B (glow blu) ----------
       Il dot deve contrastare col fill blu della .tz-region.is-active-b sottostante,
       quindi usa lo stesso colore scuro di active-a (non il blu del glow). */
    .city-marker.active-b {
        filter: var(--city-dot-glow-b);

        .city-dot {
            fill: white;
        }
        /* 3-step heat blu saturo (analogo a giallo→arancio→rosso di A):
           azzurro acceso → blu medio → blu profondo. Saturi per massima
           visibilità anche sopra la zona B illuminata. Blur 0.2px identico
           ai pulses A. */
        .city-pulse {
            stroke: #e0f2fe;
            filter: blur(0.2px);
            animation: pulse-ring 2.4s ease-out 0s infinite;
        }
        .city-pulse-2 {
            stroke: #1d4ed8;
            filter: blur(0.2px);
            animation: pulse-ring 2.4s ease-out 0.6s infinite;
        }
        .city-pulse-3 {
            stroke: #020617;
            filter: blur(0.2px);
            animation: pulse-ring 2.4s ease-out 1.2s infinite;
        }
    }

    /* ---------- Arco A ↔ B (pallinato mobile) ----------
       Pattern "dots mobili": stroke-dasharray "0 N" con stroke-linecap round
       rende ogni dash di lunghezza 0 come un cerchio del diametro dello
       stroke-width. L'animazione sposta stroke-dashoffset creando il flusso.
       Distinguibile a colpo d'occhio dalla linea del cambio giorno
       (tratteggiata classica).
       Due path sovrapposti in cityG:
         • .oc-arc-halo: pallini leggermente più grandi colore SFONDO (no
                         blur) → stacco netto quando passano sopra le città
                         non-attive (pallini scuri) o aree notte.
         • .oc-arc:      pallini principali in --title sopra. */
    .oc-arc-halo {
        fill: none;
        stroke: var(--section-default-background, #FFFFFF);
        stroke-width: 6;
        stroke-dasharray: 0 var(--oc-arc-dot-spacing, 12);
        stroke-linecap: round;
        opacity: 0.4;
        pointer-events: none;
        animation: oc-arc-flow 1.4s linear infinite;
    }
    .oc-arc {
        fill: none;
        stroke: var(--title);
        stroke-width: 3;
        stroke-dasharray: 0 var(--oc-arc-dot-spacing, 12);
        stroke-linecap: round;
        opacity: 0.95;
        pointer-events: none;
        animation: oc-arc-flow 1.4s linear infinite;
    }
}

/* Keyframes dell'arco a LIVELLO TOP (non dentro il selettore nested):
   alcuni motori CSS non innescavano l'animazione quando la keyframe era
   dichiarata dentro il blocco nidificato. */
/* Keyframe: shift di una spaziatura completa per ciclo (dash-period = 12px).
   Il loop è continuo perché la fine coincide con la posizione iniziale dei
   pallini adiacenti. Se cambi --oc-arc-dot-spacing, aggiorna anche qui
   per mantenere lo scorrimento perfettamente ciclico. */
@keyframes oc-arc-flow {
    to { stroke-dashoffset: -12; }
}

/* Marching-ants per il meridiano mezzanotte: movimento sottile da sud a nord
   (stroke-dashoffset negativo). Periodo più lento dell'arco A↔B per non
   competere visivamente. */
@keyframes day-change-flow {
    to { stroke-dashoffset: -18; }
}

/* ---------- Mobile (<560px): badge in colonna, swap ruotato, sliders compatti.
   Entrambi i layout (single/compare) collassano a colonna. ---------- */
@media (max-width: 560px) {
    .timezoneLayout#cpWorldTimezoneContainer {

        /* Mobile: disattiva il tooltip (è costruito per hover desktop; il
           tap mobile lo rende appiccicoso e di fatto inutilizzabile). */
        #tooltip {
            display: none !important;
        }

        /* NOTA: la visibilità di .strip-wrap è delegata a Yootheme tramite
           la classe uk-visible@s applicata nell'HTML — sotto la breakpoint
           @s del tema lo strip è già nascosto e non serve una regola qui. */

        /* Mobile: ingrandisce il planisfero oltre il viewport (sbordando
           a sinistra e destra) per rendere i continenti leggibili. L'SVG
           si auto-adatta tramite drawMap/fitSize sulla nuova width. */
        #map-wrap {
            width: 115%;
            margin-left: -7.5%;
            margin-right: 7.5%;
        }
        /* overflow-x: hidden sul container impedisce la scrollbar
           orizzontale indotta dall'overflow del map-wrap. */
        overflow: visible;

        /* Mobile: due badge affiancati come desktop, più compatti. Nowrap
           sull'area per evitare che vadano a capo sui viewport stretti. */
        .oc-badge-area.is-compare {
            margin-top: -29px;
            gap: 0.35rem;
            flex-wrap: nowrap;
        }

        .oc-badge {
            min-width: 0;
            flex: 1 1 0;
            padding: 0.55rem 0.7rem 0.6rem;
            border-radius: 10px;
            min-height: 76px;
        }
        .oc-top {
            gap: 0.3rem;
        }
        .oc-location {
            font-size: 0.68rem;
        }
        .oc-utc-pill {
            font-size: var(--testo-piccolo2);
        }
        /* Mobile: nascondi il paese inline ("· Italia") per recuperare
           spazio orizzontale nella riga location/UTC. */
        .oc-location-ctry {
            display: none;
        }
        .oc-time {
            font-size: 1.35rem;
        }
        /* Mobile: pill "Ora legale" va a nuova riga sotto l'orario.
           flex-direction column: pill ancorato a sinistra con width
           naturale (fit-content), gap ridotto, nessun margin extra. */
        .oc-time-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.25rem;
        }
        .oc-dst {
            margin-left: 0;
            margin-bottom: 0;
            width: fit-content;
        }
        .oc-meta {
            font-size: 0.6rem;
            margin-top: 0.2rem;
            gap: 0.3rem;
        }
        .oc-middle {
            flex: 0 0 58px;
            width: 58px;
        }
        .oc-diff {
            padding: 0.4rem 0.45rem 0.35rem;
            .oc-diff-value { font-size: 0.78rem; }
        }
        .oc-swap {
            height: 22px;
            .material-symbols-rounded { font-size: 15px; }
        }

        #ctrl-body {
            padding: 0.9rem 0.75rem 0;
            margin-top: 0.9rem;
            gap: 0.7rem;
        }
        .oc-slider-row {
            grid-template-columns: 1fr minmax(0, 180px) 1fr;
            gap: 0.6rem;

            .oc-slider-label,
            .oc-slider-value {
                font-size: 0.64rem;
            }
        }
    }
}

/* =========================================================================
 * Countdown layout (view "countdown")
 * Omologato alle altre view: card = uk-card uk-card-default (sfondo/ombra/raggio
 * nativi del tema), tipografia NATIVA (nessun override di font-size/peso/colore,
 * anche per i titoli/h2). Qui SOLO la struttura: layout a riga (unità prima, dati
 * dopo) con stacking mobile e i box delle unità. Raggio dai token (--default-radius).
 * ========================================================================= */
.countdownLayout #cpCountdownContainer {
    display: block;
    margin: 0 auto;
    width: 100%;
}

.countdownLayout #cpCountdownContainer .cd-card { margin-bottom: 0.85rem; }

/* H2 "Prossime festività • {Paese}" — stesso schema dell'heading eventsList/YEAR
   (#cpEventsList .heading.container-cp + .heading .title), riprodotto qui perché
   quelle regole sono scopate a #cpEventsList. */
.countdownLayout #cpCountdownContainer .cd-upcoming-heading {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 1.6rem;
}
.countdownLayout #cpCountdownContainer .cd-upcoming-heading .title {
    font-size: 1.5em;
    margin-bottom: 0.5rem;
}

/* Card "La tua data": trasparente (la card bianca è il datario interno) */
.countdownLayout #cpCountdownContainer .cd-input-card {
    background: transparent;
    box-shadow: none;
    border: 0;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 3rem;}

/* ════════════════════════════════════════════════════════════════════════════
   DATARIO INLINE — CSS UNIFICATO countdown + timecalculator (UN UNICO BLOCCO)
   Riusa lo stile del datario YEAR via wrapper .yearLayout (sfondo/padding del
   mese, header giorni, celle). Qui SOLO: centratura del mese, navigazione
   mese/anno, stato giorno selezionato e interazione (hover/cursore).

   Lo scope è avvolto in :is(...) così la specificità per il COUNTDOWN resta
   IDENTICA a prima (#cpCountdownContainer) e si AGGIUNGE il TIMECALCULATOR
   (#cpTimeCalcContainer): un solo corpo di regole governa il datario di ENTRAMBE
   le view (richiesta esplicita: "da un unico css gestisco countdown e
   timecalculator"). MODIFICARE QUI = modificare il datario ovunque.
   ════════════════════════════════════════════════════════════════════════════ */
:is(.countdownLayout #cpCountdownContainer, .timecalculatorLayout #cpTimeCalcContainer) {
    & .cd-picker-cal {
        display: flex;
        justify-content: center;
    }
    & .cd-picker .month.container-cp {
        flex: 0 1 360px;
        max-width: 360px;
        width: 100%;
        margin: 0;
    }

    /* Datario compatto (mobile): sopra il breakpoint (≥732px) il datario resta
       inline ed il campo è nascosto (display:none qui). Sotto, vedi @media. */
    & .cd-picker-toggle { display: none; }

    /* Navigazione: ‹ [Mese] [Anno] › con overlay di scelta mese/anno.
       sfondo pill/celle = grigi UI; testo Inter 650 var(--title);
       selezionato/attivo = nero; hover = muted. */
    & .cd-cal-nav {
        display: flex;
        justify-content: space-between;   /* frecce ai bordi → posizione fissa */
        align-items: center;
        gap: 0.2rem;
        margin-bottom: 0.5em;
        margin-top: 0.5em;
        padding: 0 2em;
    }
    & .cd-nav-pills {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
    }
    & .cd-nav-pill {
        border: 0;
        cursor: pointer;
        padding: 0.32rem 0.7rem;
        border-radius: var(--default-radius-little, 3px);
        font-family: 'Inter', sans-serif;
        font-size: 1.2em;
        font-weight: 600;
        line-height: 1;
        color: var(--title, #1B1B1B);
        background: var(--gray-95, #f2f2f2);
        transition: background 0.15s, color 0.15s;
    }
    /* Titolo unico del navigatore (drill-down): larghezza fissa = --cd-title-w
       (calcolata in JS) così le frecce restano ferme tra i livelli. */
    & .cd-nav-title {
        text-transform: capitalize;
        min-width: var(--cd-title-w, 9em);
        text-align: center;
        background: transparent;
        letter-spacing: var(--tight);
        font-weight: 700;
    }
    & .cd-nav-title[disabled] { cursor: default; }
    & .cd-nav-pill:hover {
        background: var(--global-muted-color, #585E69);
        color: #fff;
    }
    & .cd-nav-pill-on {
        background: var(--global-primary-background, #000);
        color: #fff;
    }
    /* Titolo: trasparente a riposo; hover grigio chiaro, niente stato nero. */
    & .cd-nav-title.cd-nav-pill-on {
        background: transparent;
        color: var(--title, #1B1B1B);
    }
    & .cd-nav-title:hover {
        background: var(--gray-95, #f2f2f2);
        color: var(--title, #1B1B1B);
    }
    & .cd-nav-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--title, #1B1B1B);
        cursor: pointer;
        border-radius: var(--default-radius-little, 3px);
        line-height: 1;
    }
    & .cd-nav-btn:hover { color: var(--global-muted-color, #585E69); }
    & .cd-nav-btn .material-symbols-rounded { font-size: 2em; }

    /* Overlay scelta mese/anno/decennio: copre la sola griglia (non le pill).
       z-index alto: i numeri giorno hanno .standardContent{z-index:10}. */
    & .cd-grid-wrap { position: relative; margin-top: 1em; }
    & .cd-grid-wrap.cd-ov-active > .header,
    & .cd-grid-wrap.cd-ov-active > .innerContainer {
        visibility: hidden;
    }
    & .cd-cal-overlay {
        position: absolute;
        inset: 0;
        background: #fff;
        border-radius: var(--default-radius, 6px);
        display: flex;
        flex-direction: column;
        z-index: 20;
    }
    & .cd-ov-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);   /* 12 celle = 4 righe */
        gap: 0.4rem;
        flex: 1;
    }
    & .cd-ov-cell {
        border: 0;
        cursor: pointer;
        padding: 0.7rem 0.3rem;
        border-radius: var(--default-radius-little, 3px);
        background: var(--gray-96, #f5f5f5);
        color: var(--title, #1B1B1B);
        font-family: 'Inter', sans-serif;
        font-size: 0.95rem;
        font-weight: 600;
        text-transform: capitalize;
        transition: background 0.15s, color 0.15s;
    }
    & .cd-ov-cell:hover {
        background: var(--global-muted-color, #585E69);
        color: #fff;
    }
    & .cd-ov-cell.cd-ov-cur {
        background: var(--global-primary-background, #000);
        color: #fff;
        font-weight: 700;
    }
    /* Celle adiacenti (periodo confinante): attenuate come i ghost days. */
    & .cd-ov-cell.cd-ov-adj { opacity: 0.4; }

    /* Celle giorno: cliccabili + giorno selezionato evidenziato (nero/bianco). */
    & .cd-picker .month.container-cp .day {
        cursor: pointer;
        border-radius: var(--default-radius-little, 3px);
    }
    & .cd-picker .month.container-cp .day:hover .standardContent {
        color: var(--global-muted-color, #585E69);
    }
    & .cd-picker .month.container-cp .day.cd-sel {
        background: var(--global-primary-background, #000);
    }
    & .cd-picker .month.container-cp .day.cd-sel .standardContent {
        color: #fff;
        font-weight: 700;
    }
    /* Festività (eventlayer-0): numero bianco e grassetto sullo sfondo rosso,
       anche in hover (le regole YEAR sono scopate a #cpCalendar, qui assente). */
    & .cd-picker .month.container-cp .day.bgEvent .standardContent {
        color: #fff;
        font-weight: var(--datario-event-weight);   /* stato giorno (stesso token del calendario) */
    }
    & .cd-picker .month.container-cp .day.bgEvent:hover .standardContent {
        color: #fff;
    }
    /* "Oggi" SEMPRE marcato (outline), a prescindere da .showToday globale. */
    & .cd-picker .month.container-cp .day.today {
        outline: 2px solid black;
        outline-offset: 1px;
        border-radius: 1px;
    }
    & .cd-picker .month.container-cp .day.today:not(.cd-sel):not(.bgEvent) .standardContent {
        font-weight: var(--datario-today-weight);   /* stato giorno (stesso token del calendario) */
        color: black;
    }
}

/* Datario compatto (mobile, < breakpoint): il campo appare e il datario si chiude;
   stesso scope unificato countdown + timecalculator. */
@media (max-width: 731.98px) {
    :is(.countdownLayout #cpCountdownContainer, .timecalculatorLayout #cpTimeCalcContainer) .cd-picker-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        width: 100%;
        padding: 0.7rem 0.9rem;
        background: #fff;
        border: none;
        border-radius: var(--default-radius, 6px);
        cursor: pointer;
        font-family: 'jetbrains mono', monospace;
        font-size: 1em;
        font-weight: 600;
        line-height: 1.4em;
        color: var(--title, #1B1B1B);
        text-align: left;
    }
    :is(.countdownLayout #cpCountdownContainer, .timecalculatorLayout #cpTimeCalcContainer) .cd-picker-toggle-text.cd-ph {
        color: var(--muted, #888888);
        font-weight: 400;   /* aspetto "placeholder" finché non si sceglie una data */
    }
    :is(.countdownLayout #cpCountdownContainer, .timecalculatorLayout #cpTimeCalcContainer) .cd-picker-toggle-icon {
        color: var(--title, #1B1B1B);
        font-size: 1.5em;
        flex: 0 0 auto;
    }
    :is(.countdownLayout #cpCountdownContainer, .timecalculatorLayout #cpTimeCalcContainer) .cd-picker .cd-picker-cal { display: none; }
    :is(.countdownLayout #cpCountdownContainer, .timecalculatorLayout #cpTimeCalcContainer) .cd-picker.cd-picker-open .cd-picker-cal {
        display: flex;
        margin-top: 0.6rem;
    }
    /* countdown: la colonna datario va a tutta larghezza (layout specifico). */
    .countdownLayout #cpCountdownContainer .cd-yourdate-cal { flex: 1 1 100%; }
}

/* Quadranti countdown con zeri iniziali consecutivi: testo attenuato (countdown). */
.countdownLayout #cpCountdownContainer .cd-unit.cd-unit-zero .cd-num,
.countdownLayout #cpCountdownContainer .cd-unit.cd-unit-zero .cd-lbl { opacity: 0.2; }

/* "La tua data": datario + hero affiancati. Senza data scelta l'hero è nascosto
   e il datario resta centrato; alla selezione l'hero (flex:1) compare a destra. */
.countdownLayout #cpCountdownContainer .cd-yourdate {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem 2rem;
}
.countdownLayout #cpCountdownContainer .cd-yourdate-cal { flex: 0 1 360px; }

/* Hero = SOLO la data aggiunta dall'utente; su desktop è la colonna destra */
.countdownLayout #cpCountdownContainer .cd-hero {
    flex: 1 1 280px;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    align-items: center;
    /* Datario (colonna sx) resta in alto via align-items:flex-start del contenitore;
       l'hero (colonna dx) si centra verticalmente rispetto all'altezza del datario. */
    align-self: center;
    text-align: center;
}
.countdownLayout #cpCountdownContainer .cd-hero .cd-meta { flex: 0 0 auto; }
.countdownLayout #cpCountdownContainer .cd-hero .cd-actions { justify-content: center; }
/* Etichetta sopra i quadranti: "Mancano" (futuro) / "Sono trascorsi" (passato). */
.countdownLayout #cpCountdownContainer .cd-hero-label {
    flex: 0 0 auto;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1rem;
    color: var(--gray);
}
/* Quadranti sempre visibili (azzerati di default); etichetta + data + Condividi
   compaiono solo quando l'utente ha scelto una data (classe cd-has-date via JS). */
.countdownLayout #cpCountdownContainer .cd-hero:not(.cd-has-date) .cd-meta,
.countdownLayout #cpCountdownContainer .cd-hero:not(.cd-has-date) .cd-hero-label { display: none; }

/* Quadranti grandi (hero "La tua data"). --cd-num-size: dimensione del numero,
   ridotta su mobile (vedi media query) così i 4 quadranti entrano in una riga. */
.countdownLayout #cpCountdownContainer .cd-units-lg {
    gap: 0.6rem;
    justify-content: center;
    position: relative;          /* ancora per il segno "-" assoluto (date passate) */
    --cd-num-size: clamp(1.5rem, 4.5vw, 2.35rem);
}
.countdownLayout #cpCountdownContainer .cd-units-lg .cd-unit {
    min-width: 70px;
    padding: 0.42rem;           /* leggermente ridotto */
    aspect-ratio: 1 / 1;        /* quadranti quadrati */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    /* Default = quadranti EVENTI (lista festività): bordo muted.
       L'hero "La tua data" lo sovrascrive col link-color (vedi #cdUserUnits). */
    border-top: 5px solid var(--gray);
    border-radius: 12px 12px var(--default-radius) var(--default-radius);
}
.countdownLayout #cpCountdownContainer .cd-units-lg .cd-num {
    font-size: var(--cd-num-size);
    font-weight: 700;
    line-height: 1.05;
}
/* Secondi: stessa dimensione e colore (--text) degli altri quadranti, solo
   peso più leggero per distinguerli senza enfatizzare il tick veloce. */
.countdownLayout #cpCountdownContainer .cd-unit-sec .cd-num {
    font-weight: 200;
    color: var(--gray);
}
.countdownLayout #cpCountdownContainer .cd-units-lg .cd-lbl {
    color: var(--gray);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: var(--testo-piccolo3);
    white-space: nowrap;
    font-weight: 700;
}

/* Segno "-" per date passate: posizionato in assoluto a sinistra del gruppo
   quadranti (fuori dal flusso) → i quadranti restano fermi e centrati. */
.countdownLayout #cpCountdownContainer .cd-sign {
    position: absolute;
    right: 100%;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding-right: 0.3rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: calc(var(--cd-num-size) * 1.6);   /* "-" più grande e ben visibile */
    font-weight: 800;
    line-height: 1;
    color: var(--text);
}

/* Hero "data scelta" (#cdUserUnits) = quadranti PRINCIPALI.
   Colori invertiti: box scuro, numeri/segno chiari, label chiare attenuate. */
.countdownLayout #cpCountdownContainer #cdUserUnits .cd-unit {
    background: var(--title);
    border-top-color: var(--global-link-color, #F59E0B);   /* hero: bordo link-color (fallback corretto) */
}
.countdownLayout #cpCountdownContainer #cdUserUnits .cd-num { color: #fff; }
.countdownLayout #cpCountdownContainer #cdUserUnits .cd-unit-sec .cd-num { color: var(--gray); }
.countdownLayout #cpCountdownContainer #cdUserUnits .cd-lbl { color: var(--gray); }
.countdownLayout #cpCountdownContainer #cdUserUnits .cd-sign { color: var(--title); }

/* Bagliore giallo sui numeri PRINCIPALI (esclusi i secondi): testo bianco
   invariato; alone multi-strato che si accende/spegne. Con animation-direction
   alternate il ciclo va 0→100 e poi TORNA indietro 100→0 (avanti e indietro
   fluido), senza il salto brusco da 100% a 0%. */
@keyframes cdGoldGlow {
    from {  /* alone tenue */
        text-shadow:
            0 0 6px  rgba(255, 214, 92, 0.85),
            0 0 16px rgba(255, 190, 40, 0.65),
            0 0 34px rgba(255, 160, 0, 0.45),
            0 0 60px rgba(255, 140, 0, 0.24);
    }
    to {    /* alone intenso */
        text-shadow:
            0 0 10px rgba(255, 228, 130, 1),
            0 0 24px rgba(255, 200, 70, 0.90),
            0 0 50px rgba(255, 170, 0, 0.70),
            0 0 90px rgba(255, 150, 0, 0.45);
    }
}
.countdownLayout #cpCountdownContainer #cdUserUnits .cd-unit:not(.cd-unit-sec) .cd-num {
    /* testo bianco invariato: alone giallo che pulsa avanti/indietro (alternate) */
    animation: cdGoldGlow 1.8s ease-in-out infinite alternate;
    will-change: text-shadow;
}
@media (prefers-reduced-motion: reduce) {
    .countdownLayout #cpCountdownContainer #cdUserUnits .cd-unit:not(.cd-unit-sec) .cd-num {
        animation: none;
        text-shadow:
            0 0 8px  rgba(255, 214, 92, 0.95),
            0 0 20px rgba(255, 190, 40, 0.80),
            0 0 42px rgba(255, 160, 0, 0.60);
    }
}

/* Stato "Sono trascorsi" (data passata, data-cd-state="past"): look invertito →
   quadranti BIANCHI con testo dei primi 3 in --title; secondi e label attenuati
   (per restare leggibili su bianco); niente bagliore (è pensato per fondo scuro). */
.countdownLayout #cpCountdownContainer #cdUserUnits[data-cd-state="past"] .cd-unit {
    background: transparent;
    /* outline: 3px solid var(--global-muted-color); */
    /* outline-offset: -1px; */
    border: 2px solid var(--global-muted-color);
    border-top: 6px solid var(--global-muted-color);
}
.countdownLayout #cpCountdownContainer #cdUserUnits[data-cd-state="past"] .cd-num { color: var(--title, #1B1B1B); }
.countdownLayout #cpCountdownContainer #cdUserUnits[data-cd-state="past"] .cd-unit-sec .cd-num { color: var(--global-muted-color, #888); }
.countdownLayout #cpCountdownContainer #cdUserUnits[data-cd-state="past"] .cd-lbl { color: var(--global-muted-color, #888); }
.countdownLayout #cpCountdownContainer #cdUserUnits[data-cd-state="past"] .cd-unit:not(.cd-unit-sec) .cd-num {
    animation: none;
    text-shadow: none;
}

/* Solo desktop: quadranti principali (= larghezza dell'hero #cdUserResult),
   divisi in 4 parti uguali; numero/label in proporzione al box via container
   query (cqw). Larghezza: 90% fino a 1000px, 65% da 1000px in su. */
@media (min-width: 641px) {
    .countdownLayout #cpCountdownContainer #cdUserUnits { width: 90%; }
    .countdownLayout #cpCountdownContainer #cdUserUnits .cd-unit {
        flex: 1 1 0;
        min-width: 0;
        container-type: inline-size;   /* per i cqw del numero/label, senza fissare la riga */
    }
    .countdownLayout #cpCountdownContainer #cdUserUnits .cd-num { font-size: 46cqw; }
    .countdownLayout #cpCountdownContainer #cdUserUnits .cd-lbl { font-size: clamp(0.72rem, 13cqw, 0.85rem); }
    .countdownLayout #cpCountdownContainer #cdUserResult #cdUserDateStr { font-size: 1.7rem; }
}
@media (min-width: 1024px) {
    .countdownLayout #cpCountdownContainer #cdUserUnits { width: 60%; }
    .countdownLayout #cpCountdownContainer #cdUserResult #cdUserDateStr { font-size: 2.1rem; }
}

/* Card evento = due container: sx quadranti, dx festività+giorno.
   Desktop = riga, mobile = colonna. */
.countdownLayout #cpCountdownContainer .cd-ev-grid {
    display: flex;
    align-items: center;
    gap: 2rem;
}
/* Sinistra: i quadranti, allineati a destra del proprio container */
.countdownLayout #cpCountdownContainer .cd-ev-units { flex: 0 0 auto; }
.countdownLayout #cpCountdownContainer .cd-ev-units .cd-units { justify-content: flex-end; flex-wrap: nowrap; }
/* Quadranti EVENTI: raggio piccolo. Selettore con 4 classi (.cd-ev-units .cd-units-lg
   .cd-unit) per superare la specificità di .cd-units-lg .cd-unit (12px, hero). */
.countdownLayout #cpCountdownContainer .cd-ev-units .cd-units-lg .cd-unit { border-radius: var(--default-radius, 3px) var(--default-radius, 3px) var(--default-radius-little, 3px) var(--default-radius, 3px); border-top-width: 4px;}
/* Destra: festività + giorno, occupa lo spazio restante */
.countdownLayout #cpCountdownContainer .cd-ev-info { flex: 1 1 auto; min-width: 0; }
.countdownLayout #cpCountdownContainer .cd-meta { flex: 1 1 auto; min-width: 0; }

/* Fase lunare: colonna tra quadranti e info, sempre presente (anche vuota) per
   non disallineare .cd-ev-info tra le card. Icona via .moon-icon (stile MONTHLIST). */
.countdownLayout #cpCountdownContainer .cd-ev-moon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* icona verso il lato del nome */
    width: 1.5em;
    font-size: 1.75rem;
}
/* Icona luna nelle card: colore del titolo (più presente del grigio di default). */
.countdownLayout #cpCountdownContainer .cd-ev-moon .moon-icon { color: var(--title); }

/* Omologazione contenuti: stile allineato a .lwCardBody di longWeekends
   (nome festività = .lwCardTitle, giorno = .lwCardDates). */
.countdownLayout #cpCountdownContainer .cd-ev-name { color: var(--title); font-weight: 700; font-size: 1.4em; line-height: 1.25; letter-spacing: var(--tight); }
.countdownLayout #cpCountdownContainer .cd-ev-date { color: var(--gray); letter-spacing: var(--tight); text-transform: capitalize; margin-top: 0.25em; font-size: var(--testo-piccolo); font-weight: 600; }
/* Data scelta dall'utente (hero "La tua data"): più grande e in colore testo */
.countdownLayout #cpCountdownContainer #cdUserDateStr { font-size: 1.3rem; color: var(--title); font-weight: 700; line-height: 1.2;}
/* Sotto-data (mostrata solo se la data scelta è una festività): nome del giorno
   sotto il nome evento, più grande e attenuato. */
.countdownLayout #cpCountdownContainer #cdUserSubDate { font-size: 1.3em; color: var(--global-muted-color); font-weight: 400; }
.countdownLayout #cpCountdownContainer #cdUserSubDate:empty { display: none; }
/* Preposizione "a"/"da" e nome evento: il container #cdUserDateStr è capitalize
   (per la DATA), ma prep e nome evento NON devono essere alterati (la prep resta
   minuscola; "Festa della Repubblica" non diventa "Festa Della Repubblica"). */
.countdownLayout #cpCountdownContainer #cdUserDateStr .cd-prep,
.countdownLayout #cpCountdownContainer #cdUserDateStr .cd-evname { text-transform: none; }

/* Unità countdown: solo box + allineamento, testo nativo */
.countdownLayout #cpCountdownContainer .cd-units {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    align-items: center;
    flex: 0 0 auto;
}
.countdownLayout #cpCountdownContainer .cd-unit {
    background: var(--gray-97, #f3f3f1);
    border-radius: var(--default-radius, 6px);
    padding: 0.45rem 0.7rem;
    text-align: center;
    min-width: 54px;
}
/* Numeri: font monospace del progetto (tabular per cifre a larghezza fissa) */
.countdownLayout #cpCountdownContainer .cd-num {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-variant-numeric: tabular-nums;
    color: var(--title);
    letter-spacing: -0.05em;
}
/* Separatore migliaia (punto/virgola): in monospace occupa una cella larga come
   una cifra (~0.6em) → spazio enorme ai lati. Font proporzionale SOLO per il
   separatore: il glifo ha avanzamento naturale stretto (~0.25em) e resta
   pienamente visibile; piccolo margine negativo per stringere ancora. */
.countdownLayout #cpCountdownContainer .cd-num .cd-sep {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 0.03em;
}
/* Etichette unità (GIORNI/ORE/MINUTI/SECONDI): stesso font monospace dei numeri */
.countdownLayout #cpCountdownContainer .cd-lbl {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
}
/* Larghezza minima 3 cifre (monospace): "25" e "180" occupano lo stesso box →
   i quadranti restano allineati tra card diverse. */
.countdownLayout #cpCountdownContainer .cd-units-lg .cd-num { min-width: 3ch; }

.countdownLayout #cpCountdownContainer .cd-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.7rem;
    align-items: center;
    flex-wrap: wrap;
}
/* Pulsante Condividi: stesse classi di "Genera PDF" (uk-button uk-button-primary).
   Icona centrata verticalmente (uk-button è inline-block → l'icona cadrebbe sulla
   baseline: inline-flex + align-items:center la centra) e più grande. */
.countdownLayout #cpCountdownContainer .cd-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
}
.countdownLayout #cpCountdownContainer .cd-share-btn .cd-share-icon {
    font-size: 1.4em;
    line-height: 1;
    /* Allineamento OTTICO (non matematico): il glifo ha side-bearing interno e
       sembra troppo staccato dal bordo sinistro. Lo avviciniamo leggermente con
       un margine negativo, bilanciando visivamente lo spazio attorno al testo. */
    margin-left: -0.18em;
}

/* Pulsante "condividi" sulle card evento: stile IDENTICO all'hero (.cd-share-btn +
   uk-button-primary), taglia data da uk-button-small. flex:0 0 auto così non si
   allarga; lo spazio flessibile di .cd-ev-info lo spinge a destra della card. */
.countdownLayout #cpCountdownContainer .cd-ev-share { flex: 0 0 auto; }

.countdownLayout #cpCountdownContainer .cd-events-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 1em;
}
/* Desktop: più respiro orizzontale DENTRO la card evento (sfondo bianco); su
   mobile resta il padding di default di uk-card-small. */
@media (min-width: 641px) {
    .countdownLayout #cpCountdownContainer .cd-ev-card {
        padding-left: 2em;
        padding-right: 2em;
    }
}
.countdownLayout #cpCountdownContainer .cd-empty { text-align: center; }

/* Mobile: quadranti sopra (su una sola riga), dati sotto. I 4 quadranti si
   restringono per entrare: numero più piccolo, padding/gap ridotti, box che
   si dividono lo spazio in parti uguali (flex:1) → niente a-capo dei secondi. */
@media (max-width: 640px) {
    /* Card su 3 righe: (1) quadranti, (2) nome+giorno, (3) luna a sx + "condividi"
       a dx. Riordino via order su flex-wrap (nessun wrapper HTML: la luna nel DOM
       sta tra units e info, qui la spostiamo dopo). Spaziatura verticale tra le
       righe ridotta (row-gap 0.5rem) + padding verticale card compatto. */
    .countdownLayout #cpCountdownContainer .cd-ev-card { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    .countdownLayout #cpCountdownContainer .cd-ev-grid { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
    .countdownLayout #cpCountdownContainer .cd-ev-units { width: 100%; order: 0; }
    .countdownLayout #cpCountdownContainer .cd-ev-info  { width: 100%; order: 1; }
    /* Ultima riga: icona luna a sinistra, pulsante a destra (margin-left:auto),
       centrati verticalmente tra loro (align-items:center del grid). */
    .countdownLayout #cpCountdownContainer .cd-ev-moon  { order: 2; width: auto; justify-content: flex-start; }
    .countdownLayout #cpCountdownContainer .cd-ev-share { order: 3; margin-left: auto; align-self: center; }
    .countdownLayout #cpCountdownContainer .cd-units-lg { --cd-num-size: clamp(1.2rem, 7vw, 1.9rem); gap: 0.4rem; letter-spacing: -0.1em;}
    .countdownLayout #cpCountdownContainer .cd-units-lg .cd-unit { min-width: 0; padding: 0.4rem;}
    .countdownLayout #cpCountdownContainer .cd-ev-units { width: 100%; }
    .countdownLayout #cpCountdownContainer .cd-ev-units .cd-units { flex-wrap: nowrap; justify-content: space-between; width: 100%; }
    .countdownLayout #cpCountdownContainer .cd-ev-units .cd-unit { flex: 1 1 0; }
    /* Quadranti principali (hero): a tutta larghezza, 4 parti uguali, numero in
       proporzione al box (cqw) come su desktop. */
    .countdownLayout #cpCountdownContainer #cdUserUnits { width: 100%; }
    .countdownLayout #cpCountdownContainer #cdUserUnits .cd-unit {
        flex: 1 1 0;
        min-width: 0;
        container-type: inline-size;
    }
    .countdownLayout #cpCountdownContainer #cdUserUnits .cd-num { font-size: 46cqw; }
    .countdownLayout #cpCountdownContainer #cdUserUnits .cd-lbl { font-size: clamp(0.72rem, 13cqw, 14px); }
}

/* ============================================================================
   timecalculatorLayout — pannello "strumento", coerente con la view timezone:
   valori in monospace + tabular-nums, accent scoped, etichette uppercase,
   divisori netti. Gli input usano i form standard del cpanel
   (uk-form-label / uk-input / uk-select / uk-checkbox); le card usano uk-card.
   Il custom è ridotto al minimo strutturale (griglie, divisori, barre, numeri).
   ============================================================================ */
.timecalculatorLayout #cpTimeCalcContainer {
    --tc-accent: var(--today-color);                 /* numeri principali / data A */
    --tc-accent-b: var(--success);                   /* data B */
    --tc-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
    --tc-line: var(--gray-88);
    display: flex;
    flex-direction: column;
    gap: 28px;                /* distanza omologata/aumentata fra le sezioni (selettori → preset → risultato …) */
}
.timecalculatorLayout #cpTimeCalcContainer .tc-card { box-shadow: var(--card-shadow); }

/* Etichetta tecnica condivisa (titoli sezione, preset, readout): mono + accent */
.timecalculatorLayout #cpTimeCalcContainer .tc-eyebrow {
    font-family: var(--tc-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tc-accent);
}

/* ---------- Input: data A · swap · data B ---------- */
.timecalculatorLayout #cpTimeCalcContainer .tc-io-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 14px;
    align-items: start;
}
/* Card data INIZIO/FINE: nessun chrome (sfondo/ombra/bordo/padding) → si fondono
   con la pagina; gli unici elementi bianchi restano il datario e l'orologio. */
.timecalculatorLayout #cpTimeCalcContainer .tc-date-card {
    background: transparent;
    box-shadow: none;
    border: 0;
    padding: 0;
}
.timecalculatorLayout #cpTimeCalcContainer .tc-card-ttl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 1.25rem;     /* più spazio verso i selettori (omologato/aumentato) */
    font-size: 1.5em;           /* come i titoli delle altre view (.heading .title) */
    font-weight: 600;
    line-height: 1.2;
    color: var(--title);
}
.timecalculatorLayout #cpTimeCalcContainer .tc-tag {
    font-family: var(--tc-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: var(--tc-accent);
    border-radius: var(--default-radius-small);
    padding: 1px 7px;
    line-height: 1.45;
}
.timecalculatorLayout #cpTimeCalcContainer .tc-date-card[data-slot="b"] .tc-tag { background: var(--tc-accent-b); }

/* Pickers nella card: datario (componente condiviso) + orologio analogico.
   Affiancati quando c'è spazio, altrimenti impilati (datario sopra, orologio
   sotto). Su mobile entrambi si "collassano" in un campo compatto (vedi @media
   del datario e dell'orologio). */
.timecalculatorLayout #cpTimeCalcContainer .tc-pickers {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;                /* più aria fra datario e orologio */
    align-items: flex-start;
    justify-content: center;
    margin-top: 4px;
}
.timecalculatorLayout #cpTimeCalcContainer .tc-picker-date { flex: 0 1 360px; min-width: 0; }
.timecalculatorLayout #cpTimeCalcContainer .tc-picker-time { flex: 0 1 232px; min-width: 0; }

/* Desktop (≥992px, due colonne): elementi di INIZIO (A) allineati a sinistra,
   elementi di FINE (B) allineati a destra. Il DATARIO resta il PRIMO elemento in
   entrambe le card (ordine datario → orologio): cambia solo l'allineamento del
   gruppo e del titolo, NON l'ordine. Nelle due colonne i pickers vanno a capo
   (datario sopra, orologio sotto) → il datario resta in cima, allineato al titolo. */
@media (min-width: 1024px) {
    .timecalculatorLayout #cpTimeCalcContainer .tc-date-card[data-slot="a"] .tc-card-ttl,
    .timecalculatorLayout #cpTimeCalcContainer .tc-date-card[data-slot="a"] .tc-pickers { justify-content: flex-start; }
    .timecalculatorLayout #cpTimeCalcContainer .tc-date-card[data-slot="b"] .tc-card-ttl,
    .timecalculatorLayout #cpTimeCalcContainer .tc-date-card[data-slot="b"] .tc-pickers { justify-content: flex-end; }
    /* La griglia interna del datario è centrata di default (condivisa col countdown):
       qui la faccio aderire al lato della card (A→sinistra, B→destra). */
    .timecalculatorLayout #cpTimeCalcContainer .tc-date-card[data-slot="a"] .cd-picker-cal { justify-content: flex-start; }
    .timecalculatorLayout #cpTimeCalcContainer .tc-date-card[data-slot="b"] .cd-picker-cal { justify-content: flex-end; }
}

/* ---------- Orologio analogico 24h (window.CalproTimePicker) ----------
   Ispirato a timepicker-ui, adattato allo stile CalPro (mono + accent per slot)
   e con TERZA schermata per i secondi. Accent A turchese / B verde, come i bordi. */
/* Orologio MONOCROMATICO: nessun accent per slot, tutto in --text (come il datario).
   La schermata/valore attivo usa lo stesso schema del giorno selezionato del datario
   (fondo scuro = --text, testo bianco). */
.timecalculatorLayout #cpTimeCalcContainer .tc-date-card .ck-picker { --ck-accent: var(--text); }

.timecalculatorLayout #cpTimeCalcContainer .ck-picker {
    width: 100%;
    max-width: 232px;
    margin: 0 auto;
}
.timecalculatorLayout #cpTimeCalcContainer .ck-toggle { display: none; }   /* desktop: faccia inline */
.timecalculatorLayout #cpTimeCalcContainer .ck-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

/* Readout digitale HH : MM : SS — segmenti cliccabili (cambio schermata).
   Monocromatico (--text), font di DEFAULT (Inter), peso come i numeri del datario.
   Il readout si allarga fino ai bordi del quadrante analogico sottostante. */
.timecalculatorLayout #cpTimeCalcContainer .ck-readout {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;        /* fino ai bordi del quadrante sotto */
    width: 100%;
    max-width: 232px;
    margin: 0 auto;
    gap: 0.2rem;
}
.timecalculatorLayout #cpTimeCalcContainer .ck-seg-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;                              /* etichetta più staccata dalla cifra sopra */
}
.timecalculatorLayout #cpTimeCalcContainer .ck-seg {
    border: 0;
    background: #fff;                      /* widget bianco sul fondo grigio pagina */
    box-shadow: var(--card-shadow);
    color: var(--text);
    font-variant-numeric: tabular-nums;    /* cifre a larghezza fissa: niente jitter */
    font-size: 1.5rem;
    font-weight: normal;                   /* come i numeri del datario */
    line-height: 1.1;
    padding: 6px 16px;
    border-radius: var(--default-radius-little, 3px);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.timecalculatorLayout #cpTimeCalcContainer .ck-seg.is-active {
    background: var(--ck-accent);          /* = --text: schermata attiva scura, come il giorno selezionato del datario */
    color: #fff;
}
.timecalculatorLayout #cpTimeCalcContainer .ck-seg-lbl {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
}
.timecalculatorLayout #cpTimeCalcContainer .ck-colon {
    font-size: 1.5rem;
    font-weight: normal;
    line-height: 1.1;
    color: var(--text);
    padding-top: 6px;
}

/* Quadrante analogico: cerchio con numeri posizionati in % (scalano col box). */
.timecalculatorLayout #cpTimeCalcContainer .ck-dial {
    position: relative;
    width: 100%;
    max-width: 232px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 50%;
    background: #fff;                      /* quadrante bianco (come il datario) */
    box-shadow: var(--card-shadow);
    touch-action: none;     /* il trascinamento non scrolla la pagina */
    user-select: none;
    -webkit-user-select: none;
}
.timecalculatorLayout #cpTimeCalcContainer .ck-dial-face { position: absolute; inset: 0; }
.timecalculatorLayout #cpTimeCalcContainer .ck-center {
    position: absolute;
    left: 50%; top: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ck-accent);
    transform: translate(-50%, -50%);
    z-index: 3;
}
.timecalculatorLayout #cpTimeCalcContainer .ck-hand {
    position: absolute;
    left: 50%; bottom: 50%;
    width: 2px;
    height: 41%;
    background: var(--ck-accent);
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(0deg);
    z-index: 2;
    pointer-events: none;
}
.timecalculatorLayout #cpTimeCalcContainer .ck-hand-knob {
    position: absolute;
    top: -16px; left: 50%;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--ck-accent);
    transform: translateX(-50%);
}
/* Valore "fuori griglia" (minuti/secondi non multipli di 5): knob piccolo. */
.timecalculatorLayout #cpTimeCalcContainer .ck-hand.ck-hand-bare .ck-hand-knob {
    width: 10px; height: 10px; top: -5px;
}
.timecalculatorLayout #cpTimeCalcContainer .ck-num {
    position: absolute;
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transform: translate(-50%, -50%);   /* centra sul punto (left/top in %) */
    font-size: 0.95rem;
    color: var(--text);
    cursor: pointer;
    z-index: 2;
}
.timecalculatorLayout #cpTimeCalcContainer .ck-num-inner {
    font-size: 0.8rem;
    color: var(--text);
}
.timecalculatorLayout #cpTimeCalcContainer .ck-num.is-on {
    color: #fff;
    font-weight: 700;
    z-index: 5;            /* sopra il knob della lancetta */
}

/* Mobile (< breakpoint): orologio collassato in un campo compatto, come il datario. */
@media (max-width: 731.98px) {
    .timecalculatorLayout #cpTimeCalcContainer .tc-picker-time { flex: 1 1 100%; }
    .timecalculatorLayout #cpTimeCalcContainer .ck-picker { max-width: none; }
    .timecalculatorLayout #cpTimeCalcContainer .ck-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        width: 100%;
        padding: 0.7rem 0.9rem;
        background: #fff;
        border: none;
        border-radius: var(--default-radius, 6px);
        cursor: pointer;
        font-family: 'jetbrains mono', monospace;
        font-size: 1.2em;
        font-weight: 600;
        line-height: 1.4em;
        color: var(--title, #1B1B1B);
        text-align: left;
    }
    .timecalculatorLayout #cpTimeCalcContainer .ck-toggle-icon {
        color: var(--title, #1B1B1B);
        font-size: 1.5em;
        flex: 0 0 auto;
    }
    .timecalculatorLayout #cpTimeCalcContainer .ck-picker .ck-face { display: none; }
    .timecalculatorLayout #cpTimeCalcContainer .ck-picker.ck-open .ck-face { display: flex; margin-top: 0.6rem; }
}

/* swap: SOLO l'icona, nessun chrome (sfondo/bordo/cerchio), più grande, --text. */
.timecalculatorLayout #cpTimeCalcContainer .tc-swap-col {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}
.timecalculatorLayout #cpTimeCalcContainer .tc-swap-btn {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    cursor: pointer;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.15s;
}
.timecalculatorLayout #cpTimeCalcContainer .tc-swap-btn .material-symbols-rounded { font-size: 2.4rem; }
.timecalculatorLayout #cpTimeCalcContainer .tc-swap-btn:hover { color: var(--tc-accent); }

/* ---------- Preset (uk-button uk-button-small) ---------- */
.timecalculatorLayout #cpTimeCalcContainer .tc-presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ---------- Readout (pannello strumento) ---------- */
.timecalculatorLayout #cpTimeCalcContainer .tc-readout-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.timecalculatorLayout #cpTimeCalcContainer .tc-direction {
    font-family: var(--tc-mono);
    font-size: 0.8rem;
    color: var(--gray-45);
    font-variant-numeric: tabular-nums;
}
.timecalculatorLayout #cpTimeCalcContainer .tc-dir-sep { color: var(--tc-accent); margin: 0 0.4em; }

.timecalculatorLayout #cpTimeCalcContainer .tc-primary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px dashed var(--tc-line);
}
.timecalculatorLayout #cpTimeCalcContainer .tc-unit { text-align: center; position: relative; }
.timecalculatorLayout #cpTimeCalcContainer .tc-unit + .tc-unit::before {
    content: '';
    position: absolute;
    left: 0; top: 12%;
    height: 70%;
    width: 1px;
    background: var(--tc-line);
}
.timecalculatorLayout #cpTimeCalcContainer .tc-num {
    display: block;
    font-family: var(--tc-mono);
    font-size: clamp(2rem, 7vw, 3rem);
    font-weight: 600;
    line-height: 1;
    color: var(--tc-accent);
    font-variant-numeric: tabular-nums;
}
.timecalculatorLayout #cpTimeCalcContainer .tc-unit-lbl {
    display: block;
    margin-top: 8px;
    font-family: var(--tc-mono);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-50);
}

.timecalculatorLayout #cpTimeCalcContainer .tc-totals {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.timecalculatorLayout #cpTimeCalcContainer .tc-tot { text-align: center; position: relative; padding: 0 6px; }
.timecalculatorLayout #cpTimeCalcContainer .tc-tot + .tc-tot::before {
    content: '';
    position: absolute;
    left: 0; top: 10%;
    height: 80%;
    width: 1px;
    background: var(--gray-90);
}
.timecalculatorLayout #cpTimeCalcContainer .tc-tot-num {
    display: block;
    font-family: var(--tc-mono);
    font-size: 1rem;
    font-weight: 600;
    color: var(--title);
    font-variant-numeric: tabular-nums;
}
.timecalculatorLayout #cpTimeCalcContainer .tc-tot-lbl {
    display: block;
    margin-top: 3px;
    font-family: var(--tc-mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-55);
}
/* nascondi ore/min/sec quando nessuna data ha l'ora attiva */
.timecalculatorLayout #cpTimeCalcContainer.tc-notime .tc-tot-time { display: none; }
.timecalculatorLayout #cpTimeCalcContainer.tc-notime .tc-totals { grid-template-columns: repeat(2, 1fr); }

.timecalculatorLayout #cpTimeCalcContainer .tc-actions { margin-top: 16px; }
.timecalculatorLayout #cpTimeCalcContainer .tc-share-btn .material-symbols-rounded {
    font-size: 1rem;
    vertical-align: middle;
    margin-right: 4px;
}

/* ---------- Breakdown ---------- */
.timecalculatorLayout #cpTimeCalcContainer .tc-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.timecalculatorLayout #cpTimeCalcContainer .tc-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}
.timecalculatorLayout #cpTimeCalcContainer .tc-bar-row {
    display: grid;
    grid-template-columns: 6.5rem 1fr 3rem;
    gap: 10px;
    align-items: center;
}
.timecalculatorLayout #cpTimeCalcContainer .tc-bar-lbl { font-size: 0.82rem; color: var(--text); }
.timecalculatorLayout #cpTimeCalcContainer .tc-bar-track {
    position: relative;
    height: 8px;
    background: var(--gray-92);
    border-radius: 999px;
    overflow: hidden;
}
.timecalculatorLayout #cpTimeCalcContainer .tc-bar-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    border-radius: 999px;
    transition: width var(--short-transition);
}
.timecalculatorLayout #cpTimeCalcContainer .tc-bar-work    { background: var(--tc-accent); }
.timecalculatorLayout #cpTimeCalcContainer .tc-bar-weekend { background: var(--gray-60); }
.timecalculatorLayout #cpTimeCalcContainer .tc-bar-holiday { background: var(--main-holiday-bg); }
.timecalculatorLayout #cpTimeCalcContainer .tc-bar-num {
    font-family: var(--tc-mono);
    font-size: 0.85rem;
    text-align: right;
    color: var(--title);
    font-variant-numeric: tabular-nums;
}
.timecalculatorLayout #cpTimeCalcContainer .tc-bar-net {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed var(--tc-line);
}
.timecalculatorLayout #cpTimeCalcContainer .tc-bar-net .tc-bar-lbl,
.timecalculatorLayout #cpTimeCalcContainer .tc-bar-net .tc-bar-num { font-weight: 700; }
.timecalculatorLayout #cpTimeCalcContainer .tc-bd-note {
    margin-top: 12px;
    font-size: 0.72rem;
    color: var(--gray-50);
}

.timecalculatorLayout #cpTimeCalcContainer .tc-notes {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
}
.timecalculatorLayout #cpTimeCalcContainer .tc-note-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--gray-90);
}
.timecalculatorLayout #cpTimeCalcContainer .tc-note-row:last-child { border-bottom: none; }
.timecalculatorLayout #cpTimeCalcContainer .tc-note-lbl { font-size: 0.82rem; color: var(--text); }
.timecalculatorLayout #cpTimeCalcContainer .tc-note-val {
    font-family: var(--tc-mono);
    font-size: 0.82rem;
    color: var(--title);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023.98px) {
    .timecalculatorLayout #cpTimeCalcContainer .tc-io-grid { grid-template-columns: 1fr; }
    .timecalculatorLayout #cpTimeCalcContainer .tc-swap-btn { transform: rotate(90deg); }
    .timecalculatorLayout #cpTimeCalcContainer .tc-breakdown { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .timecalculatorLayout #cpTimeCalcContainer .tc-totals { grid-template-columns: repeat(2, 1fr); }
}