/* ==========================================================================
   ROC UI — foglio di stile del portale (base, componenti, compatibilità)
   --------------------------------------------------------------------------
   Consuma SOLO i token di roc-tokens.css. Sezioni:
     1. Base e tipografia
     2. Componenti Bootstrap ritematizzati (bottoni, card, badge, form, tab…)
     3. Chrome del portale (navbar, footer)
     4. Componenti nostri (.roc-*)
     5. Regole ereditate dai vecchi style.css/dark-theme.css, portate ai token
     6. Ponti temporanei per partial non ancora ridisegnati (da togliere per fase)
     7. Mobile, touch, safe-area, stampa
   Regola: niente esadecimali qui dentro se non in un token; niente !important
   se non per battere un !important di Bootstrap o un attributo style inline.
   ========================================================================== */

/* ==========================================================================
   1. BASE E TIPOGRAFIA
   ========================================================================== */
html {
    -webkit-text-size-adjust: 100%;
    scrollbar-color: var(--roc-border-strong) var(--roc-surface);
}
body {
    background-color: var(--roc-bg);
    /* Un alone rosso in alto, appena percettibile: dà profondità senza pesare. */
    background-image: radial-gradient(1100px 420px at 50% -8%, var(--roc-glow), transparent 62%);
    background-repeat: no-repeat;
    color: var(--roc-text);
    font-family: var(--roc-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
body > .container,
body > .container-fluid,
body > main {
    flex: 1 0 auto;
}
::selection { background: rgba(130, 0, 0, .65); color: #fff; }
:focus-visible { outline: 2px solid var(--roc-gold-500); outline-offset: 2px; }
img { max-width: 100%; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--roc-text-strong);
    overflow-wrap: break-word;
}
/* I titoli di primo, secondo e terzo livello portano il carattere del logo. */
h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--roc-font-display);
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.2;
}
h1, .h1 { font-size: var(--roc-h1); }
h2, .h2 { font-size: var(--roc-h2); }
h3, .h3 { font-size: var(--roc-h3); }
h4, .h4 { font-size: var(--roc-h4); font-weight: 600; }
h5, .h5 { font-size: var(--roc-h5); font-weight: 600; }
h6, .h6 { font-size: var(--roc-h6); font-weight: 600; }
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--roc-font-display);
    font-weight: 600;
    letter-spacing: .02em;
}
.lead { color: var(--roc-text-2); font-weight: 400; }
small, .small { color: inherit; }
a { color: var(--roc-link); text-decoration: none; }
a:hover { color: var(--roc-link-hover); text-decoration: underline; text-underline-offset: .15em; }
a.btn:hover, a.nav-link:hover, a.dropdown-item:hover, a.card:hover, a.badge:hover, a.page-link:hover,
a.list-group-item:hover, a.text-decoration-none:hover { text-decoration: none; }
hr { border-color: var(--roc-border); opacity: 1; }
code { color: var(--roc-gold-300); font-size: .9em; }
pre {
    background: var(--roc-bg-deep);
    border: 1px solid var(--roc-border);
    border-radius: var(--roc-r);
    padding: .75rem 1rem;
    color: var(--roc-text-2);
}
kbd { background: var(--roc-surface-3); color: var(--roc-text-strong); border-radius: 4px; border: 1px solid var(--roc-border-strong); }
mark { padding: 0 .15em; border-radius: 2px; }
blockquote {
    border-left: 3px solid var(--roc-gold-600);
    padding-left: 1rem;
    color: var(--roc-text-2);
}
table, .badge, .roc-num, td, th {
    font-variant-numeric: tabular-nums;
}
/* I «.text-*» usano lo stesso valore dei riempimenti: per testo su scuro serve la
   versione chiara. Bootstrap ha lo stesso problema e la risolve con -emphasis. */
.text-primary { color: var(--roc-primary-fg) !important; }
.text-secondary { color: var(--roc-text-muted) !important; }
.text-success { color: var(--roc-success-fg) !important; }
.text-info { color: var(--roc-info-fg) !important; }
.text-warning { color: var(--roc-warning-fg) !important; }
.text-danger { color: var(--roc-danger-fg) !important; }
.link-primary { color: var(--roc-primary-fg) !important; }
.bg-warning { color: var(--roc-n-50); }
.bg-warning.text-white { color: #fff; }
.bg-light { color: var(--roc-n-50); }
.bg-card { background-color: var(--roc-surface); }


/* Nel tema chiaro «text-white/text-light» — usati ovunque come ENFASI su fondo scuro —
   diventano il testo forte; tornano bianchi solo dentro i contesti che restano scuri
   (riempimenti colorati, overlay con gradiente, pulsanti, badge, navbar, footer). */
[data-bs-theme="light"] :is(.text-white, .text-light, .text-white-50) { color: var(--roc-text-strong) !important; }
[data-bs-theme="light"] :is(.bg-dark, .bg-black, .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-info, .bg-warning,
    .text-bg-dark, .text-bg-primary, .btn, .badge, .roc-navbar, .roc-footer, .table-dark, .progress-bar,
    [style*="gradient"], [style*="rgba(0, 0, 0"], [style*="rgba(0,0,0"], [style*="background:#1"], [style*="background-color:#1"], [style*="background:#2"], [style*="background-color:#2"])
    :is(.text-white, .text-light) { color: #fff !important; }
[data-bs-theme="light"] :is(.bg-dark, .bg-black, .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-info, .btn, .roc-navbar, .roc-footer, .table-dark, [style*="gradient"]) .text-white-50 { color: rgba(255, 255, 255, .6) !important; }
/* «bg-dark» usato come SUPERFICIE (card, modali, campi, riquadri del builder e della scheda): nel tema chiaro
   deve diventare una superficie chiara, non restare un blocco nero con testo che il resto delle regole schiarisce.
   Restano scuri badge, pulsanti, navbar, footer, tabelle scure, barre di avanzamento e le intestazioni di card
   (fasce volute). Un riquadro scuro nuovo che debba restarlo va in uno di questi contesti. */
[data-bs-theme="light"] :is(.card, .modal-content, .form-control, .form-select, .list-group-item, .accordion-item, .dropdown-menu, .alert, div, section, li, td, tr, fieldset):is(.bg-dark, .bg-black):not(.badge, .btn, .card-header, .card-footer, .table-dark, .progress-bar, .roc-navbar, .roc-footer, .toast-header) {
    background-color: var(--roc-surface) !important;
    color: var(--roc-text) !important;
    border-color: var(--roc-border) !important;
}
[data-bs-theme="light"] :is(.card, .modal-content, .list-group-item, .accordion-item, div, section, li, fieldset):is(.bg-dark, .bg-black):not(.badge, .btn, .card-header, .card-footer, .table-dark, .progress-bar, .roc-navbar, .roc-footer) :is(.text-white, .text-light, .text-white-50):not(.btn, .badge, .bg-primary, .bg-success, .bg-danger, .bg-info, .bg-secondary, .bg-dark) { color: var(--roc-text-strong) !important; }
[data-bs-theme="light"] :is(.card, .modal-content, div, section, li):is(.bg-dark, .bg-black):not(.badge, .btn, .card-header, .table-dark, .roc-navbar, .roc-footer) :is(small, .small, .text-muted, .form-text) { color: var(--roc-text-muted) !important; }
[data-bs-theme="light"] :is(.form-control, .form-select).bg-dark::placeholder { color: var(--roc-text-faint) !important; }
[data-bs-theme="light"] .modal-content.bg-dark .btn-close { filter: none; }
/* Titoli dentro una fascia colorata (card-header bg-*): nel tema chiaro i titoli prendono il colore forte
   (scuro) e su rosso/nero/blu non si leggono — ereditano il bianco della fascia. */
[data-bs-theme="light"] .card-header:is(.bg-dark, .bg-black, .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-info, .bg-warning) :is(h1, h2, h3, h4, h5, h6, .card-title, i) { color: inherit !important; }
/* …e quando le due classi stanno sullo STESSO elemento (es. card-header bg-dark text-white). */
[data-bs-theme="light"] :is(.bg-dark, .bg-black, .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-info, .bg-warning, .btn, .badge, .table-dark, .progress-bar):is(.text-white, .text-light) { color: #fff !important; }
[data-bs-theme="light"] :is(.bg-dark, .bg-black, .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-info):is(.text-white, .text-light) :is(small, .small, .text-muted, .form-text) { color: rgba(255, 255, 255, .75) !important; }

/* ==========================================================================
   2. COMPONENTI BOOTSTRAP RITEMATIZZATI
   ========================================================================== */

/* ---- Bottoni: un peso solo, forme morbide, outline neutri --------------- */
.btn {
    --bs-btn-border-radius: var(--roc-r);
    --bs-btn-font-weight: 500;
    --bs-btn-font-size: .925rem;
    --bs-btn-padding-x: .9rem;
    --bs-btn-padding-y: .45rem;
    --bs-btn-focus-box-shadow: 0 0 0 .2rem var(--roc-focus);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-sm, .btn-group-sm > .btn {
    --bs-btn-border-radius: var(--roc-r-sm);
    --bs-btn-font-size: .8rem;
    --bs-btn-padding-x: .65rem;
    --bs-btn-padding-y: .32rem;
}
.btn-lg, .btn-group-lg > .btn {
    --bs-btn-border-radius: var(--roc-r-lg);
    --bs-btn-font-size: 1.05rem;
    --bs-btn-padding-x: 1.2rem;
    --bs-btn-padding-y: .6rem;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--roc-primary);
    --bs-btn-border-color: var(--roc-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--roc-primary-hover);
    --bs-btn-hover-border-color: var(--roc-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--roc-primary-active);
    --bs-btn-active-border-color: var(--roc-primary-active);
    --bs-btn-disabled-color: rgba(255, 255, 255, .75);
    --bs-btn-disabled-bg: var(--roc-primary);
    --bs-btn-disabled-border-color: var(--roc-primary);
    --bs-btn-focus-shadow-rgb: var(--roc-primary-rgb);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.btn-secondary {
    --bs-btn-color: var(--roc-text-strong);
    --bs-btn-bg: var(--roc-secondary-bg);
    --bs-btn-border-color: var(--roc-secondary-bg);
    --bs-btn-hover-color: var(--roc-text-strong);
    --bs-btn-hover-bg: var(--roc-n-500);
    --bs-btn-hover-border-color: var(--roc-n-500);
    --bs-btn-active-color: var(--roc-text-strong);
    --bs-btn-active-bg: var(--roc-n-300);
    --bs-btn-active-border-color: var(--roc-n-300);
    --bs-btn-disabled-color: var(--roc-text-muted);
    --bs-btn-disabled-bg: var(--roc-n-300);
    --bs-btn-disabled-border-color: var(--roc-n-300);
    --bs-btn-focus-shadow-rgb: var(--roc-secondary-rgb);
}
.btn-success {
    --bs-btn-color: #fff; --bs-btn-bg: var(--roc-success-bg); --bs-btn-border-color: var(--roc-success-bg);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--roc-success-bg) 85%, white); --bs-btn-hover-border-color: color-mix(in srgb, var(--roc-success-bg) 85%, white);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--roc-success-bg) 85%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--roc-success-bg) 85%, black);
    --bs-btn-disabled-color: rgba(255,255,255,.75); --bs-btn-disabled-bg: var(--roc-success-bg); --bs-btn-disabled-border-color: var(--roc-success-bg);
    --bs-btn-focus-shadow-rgb: var(--roc-success-rgb);
}
.btn-danger {
    --bs-btn-color: #fff; --bs-btn-bg: var(--roc-danger-bg); --bs-btn-border-color: var(--roc-danger-bg);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--roc-danger-bg) 85%, white); --bs-btn-hover-border-color: color-mix(in srgb, var(--roc-danger-bg) 85%, white);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--roc-danger-bg) 85%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--roc-danger-bg) 85%, black);
    --bs-btn-disabled-color: rgba(255,255,255,.75); --bs-btn-disabled-bg: var(--roc-danger-bg); --bs-btn-disabled-border-color: var(--roc-danger-bg);
    --bs-btn-focus-shadow-rgb: var(--roc-danger-rgb);
}
.btn-warning {
    --bs-btn-color: var(--roc-n-50); --bs-btn-bg: var(--roc-warning-bg); --bs-btn-border-color: var(--roc-warning-bg);
    --bs-btn-hover-color: var(--roc-n-50); --bs-btn-hover-bg: color-mix(in srgb, var(--roc-warning-bg) 85%, white); --bs-btn-hover-border-color: color-mix(in srgb, var(--roc-warning-bg) 85%, white);
    --bs-btn-active-color: var(--roc-n-50); --bs-btn-active-bg: color-mix(in srgb, var(--roc-warning-bg) 85%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--roc-warning-bg) 85%, black);
    --bs-btn-disabled-color: rgba(0,0,0,.6); --bs-btn-disabled-bg: var(--roc-warning-bg); --bs-btn-disabled-border-color: var(--roc-warning-bg);
    --bs-btn-focus-shadow-rgb: var(--roc-warning-rgb);
}
.btn-info {
    --bs-btn-color: #fff; --bs-btn-bg: var(--roc-info-bg); --bs-btn-border-color: var(--roc-info-bg);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--roc-info-bg) 85%, white); --bs-btn-hover-border-color: color-mix(in srgb, var(--roc-info-bg) 85%, white);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: color-mix(in srgb, var(--roc-info-bg) 85%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--roc-info-bg) 85%, black);
    --bs-btn-disabled-color: rgba(255,255,255,.75); --bs-btn-disabled-bg: var(--roc-info-bg); --bs-btn-disabled-border-color: var(--roc-info-bg);
    --bs-btn-focus-shadow-rgb: var(--roc-info-rgb);
}
.btn-light {
    --bs-btn-color: var(--roc-n-50); --bs-btn-bg: var(--roc-n-900); --bs-btn-border-color: var(--roc-n-900);
    --bs-btn-hover-color: var(--roc-n-0); --bs-btn-hover-bg: var(--roc-n-950); --bs-btn-hover-border-color: var(--roc-n-950);
    --bs-btn-active-color: var(--roc-n-0); --bs-btn-active-bg: var(--roc-n-800); --bs-btn-active-border-color: var(--roc-n-800);
    --bs-btn-disabled-color: var(--roc-n-500); --bs-btn-disabled-bg: var(--roc-n-800); --bs-btn-disabled-border-color: var(--roc-n-800);
    --bs-btn-focus-shadow-rgb: 233, 230, 223;
}
.btn-dark {
    --bs-btn-color: var(--roc-n-900); --bs-btn-bg: var(--roc-n-250); --bs-btn-border-color: var(--roc-n-300);
    --bs-btn-hover-color: var(--roc-n-950); --bs-btn-hover-bg: var(--roc-n-300); --bs-btn-hover-border-color: var(--roc-n-400);
    --bs-btn-active-color: var(--roc-n-950); --bs-btn-active-bg: var(--roc-n-200); --bs-btn-active-border-color: var(--roc-n-300);
    --bs-btn-disabled-color: var(--roc-n-600); --bs-btn-disabled-bg: var(--roc-n-200); --bs-btn-disabled-border-color: var(--roc-n-300);
    --bs-btn-focus-shadow-rgb: 69, 74, 85;
}
/* Outline: bordo NEUTRO per tutte le varianti, solo il testo porta il colore.
   È ciò che spegne l'arcobaleno delle barre di pulsanti. Al passaggio si tinge;
   primario e pericolo si riempiono, perché lì l'azione è netta. */
[class*="btn-outline-"] {
    --bs-btn-border-color: var(--roc-border-strong);
    --bs-btn-bg: transparent;
    --bs-btn-disabled-color: var(--roc-text-faint);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--roc-border);
}
.btn-outline-primary {
    --bs-btn-color: var(--roc-primary-fg);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--roc-primary); --bs-btn-hover-border-color: var(--roc-primary);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--roc-primary-active); --bs-btn-active-border-color: var(--roc-primary-active);
    --bs-btn-focus-shadow-rgb: var(--roc-primary-rgb);
}
.btn-outline-danger {
    --bs-btn-color: var(--roc-danger-fg);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--roc-danger-bg); --bs-btn-hover-border-color: var(--roc-danger-bg);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--roc-danger-bg); --bs-btn-active-border-color: var(--roc-danger-bg);
    --bs-btn-focus-shadow-rgb: var(--roc-danger-rgb);
}
.btn-outline-secondary {
    --bs-btn-color: var(--roc-text-2);
    --bs-btn-hover-color: var(--roc-text-strong); --bs-btn-hover-bg: var(--roc-surface-3); --bs-btn-hover-border-color: var(--roc-n-500);
    --bs-btn-active-color: var(--roc-text-strong); --bs-btn-active-bg: var(--roc-n-300); --bs-btn-active-border-color: var(--roc-n-500);
    --bs-btn-focus-shadow-rgb: var(--roc-secondary-rgb);
}
.btn-outline-success {
    --bs-btn-color: var(--roc-success-fg);
    --bs-btn-hover-color: var(--roc-success-fg); --bs-btn-hover-bg: color-mix(in srgb, var(--roc-success-bg) 18%, transparent); --bs-btn-hover-border-color: var(--roc-success-bg);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--roc-success-bg); --bs-btn-active-border-color: var(--roc-success-bg);
    --bs-btn-focus-shadow-rgb: var(--roc-success-rgb);
}
.btn-outline-info {
    --bs-btn-color: var(--roc-info-fg);
    --bs-btn-hover-color: var(--roc-info-fg); --bs-btn-hover-bg: color-mix(in srgb, var(--roc-info-bg) 18%, transparent); --bs-btn-hover-border-color: var(--roc-info-bg);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--roc-info-bg); --bs-btn-active-border-color: var(--roc-info-bg);
    --bs-btn-focus-shadow-rgb: var(--roc-info-rgb);
}
.btn-outline-warning {
    --bs-btn-color: var(--roc-warning-fg);
    --bs-btn-hover-color: var(--roc-warning-fg); --bs-btn-hover-bg: color-mix(in srgb, var(--roc-warning-bg) 18%, transparent); --bs-btn-hover-border-color: var(--roc-warning-bg);
    --bs-btn-active-color: var(--roc-n-50); --bs-btn-active-bg: var(--roc-warning-bg); --bs-btn-active-border-color: var(--roc-warning-bg);
    --bs-btn-focus-shadow-rgb: var(--roc-warning-rgb);
}
.btn-outline-light {
    --bs-btn-color: var(--roc-n-900);
    --bs-btn-hover-color: var(--roc-n-950); --bs-btn-hover-bg: rgba(255, 255, 255, .1); --bs-btn-hover-border-color: var(--roc-n-600);
    --bs-btn-active-color: var(--roc-n-50); --bs-btn-active-bg: var(--roc-n-900); --bs-btn-active-border-color: var(--roc-n-900);
    --bs-btn-focus-shadow-rgb: 233, 230, 223;
}
.btn-outline-dark {
    --bs-btn-color: var(--roc-text-2);
    --bs-btn-hover-color: var(--roc-text-strong); --bs-btn-hover-bg: var(--roc-surface-3); --bs-btn-hover-border-color: var(--roc-n-500);
    --bs-btn-active-color: var(--roc-text-strong); --bs-btn-active-bg: var(--roc-n-300); --bs-btn-active-border-color: var(--roc-n-500);
    --bs-btn-focus-shadow-rgb: 69, 74, 85;
}
.btn-link { --bs-btn-color: var(--roc-link); --bs-btn-hover-color: var(--roc-link-hover); --bs-btn-font-weight: 500; }
.btn .fa, .btn .fas, .btn .far, .btn .fab { line-height: 1; }

/* ---- Card ----------------------------------------------------------------- */
.card {
    --bs-card-bg: var(--roc-surface);
    --bs-card-color: var(--roc-text);
    --bs-card-border-color: var(--roc-border);
    --bs-card-border-radius: var(--roc-r-lg);
    --bs-card-inner-border-radius: calc(var(--roc-r-lg) - 1px);
    --bs-card-cap-bg: var(--roc-surface-2);
    --bs-card-cap-color: var(--roc-text-strong);
    --bs-card-cap-padding-y: .7rem;
    --bs-card-cap-padding-x: 1.1rem;
    --bs-card-spacer-y: 1.1rem;
    --bs-card-spacer-x: 1.1rem;
    --bs-card-title-color: var(--roc-text-strong);
    --bs-card-subtitle-color: var(--roc-text-muted);
    box-shadow: var(--roc-shadow);
    margin-bottom: 1rem; /* come il vecchio tema: molti template contano su questo spazio */
}
.card-header {
    font-weight: 600;
    border-bottom-color: var(--roc-border);
}
.card-header > h1, .card-header > h2, .card-header > h3,
.card-header > h4, .card-header > h5, .card-header > h6 { margin: 0; }
.card-header.bg-dark, .card-header.bg-secondary, .card-header.bg-primary,
.card-header.bg-success, .card-header.bg-danger, .card-header.bg-warning, .card-header.bg-info {
    border-bottom-color: transparent;
}
.card-footer { border-top-color: var(--roc-border); background: var(--roc-surface-2); }
.card.border-primary { border-color: var(--roc-primary-icon) !important; }
.card.border-success { border-color: var(--roc-success-bg) !important; }
.card.border-danger { border-color: var(--roc-danger-bg) !important; }
.card.border-warning { border-color: var(--roc-warning-bg) !important; }
.card.border-info { border-color: var(--roc-info-bg) !important; }

/* ---- Badge ---------------------------------------------------------------- */
.badge {
    --bs-badge-padding-x: .5em;
    --bs-badge-padding-y: .32em;
    --bs-badge-font-size: .72em;
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: var(--roc-r-sm);
    letter-spacing: .01em;
    vertical-align: middle;
    line-height: 1.15;
}
.badge.rounded-pill { --bs-badge-border-radius: var(--roc-r-pill); }
/* Un badge senza colore era rosso nel vecchio tema: resta così. */
.badge:not([class*=" bg-"]):not([class^="bg-"]):not([class*="text-bg-"]) {
    background-color: var(--roc-primary);
    color: #fff;
}
.badge.bg-warning, .badge.text-bg-warning { color: var(--roc-n-50); }
.badge.bg-light, .badge.text-bg-light { color: var(--roc-n-50); }

/* ---- Alert ---------------------------------------------------------------- */
.alert {
    --bs-alert-border-radius: var(--roc-r-lg);
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: .8rem;
}
.alert .alert-link { font-weight: 600; }
.alert-dark, .alert-secondary { --bs-alert-color: var(--roc-text-2); }

/* ---- Form ----------------------------------------------------------------- */
.form-control, .form-select {
    background-color: var(--roc-input-bg);
    border: 1px solid var(--roc-border-strong);
    border-radius: var(--roc-r);
    color: var(--roc-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
    background-color: var(--roc-input-bg);
    border-color: var(--roc-primary-icon);
    color: var(--roc-text-strong);
    box-shadow: 0 0 0 .2rem rgba(130, 0, 0, .3);
}
.form-control::placeholder, ::placeholder { color: var(--roc-text-faint); opacity: 1; }
.form-control:disabled, .form-select:disabled { background-color: var(--roc-surface-2); color: var(--roc-text-muted); }
.form-control-plaintext { color: var(--roc-text); }
.form-control-sm, .form-select-sm { border-radius: var(--roc-r-sm); }
.form-label { font-weight: 500; color: var(--roc-text-2); font-size: .9rem; margin-bottom: .35rem; }
.form-text { color: var(--roc-text-muted); }
.form-check-input {
    background-color: var(--roc-input-bg);
    border-color: var(--roc-border-strong);
}
.form-check-input:checked { background-color: var(--roc-primary); border-color: var(--roc-primary); }
.form-check-input:focus { border-color: var(--roc-primary-icon); box-shadow: 0 0 0 .2rem rgba(130, 0, 0, .3); }
.form-check-input:indeterminate { background-color: var(--roc-primary); border-color: var(--roc-primary); }
.input-group-text {
    background-color: var(--roc-surface-2);
    border-color: var(--roc-border-strong);
    color: var(--roc-text-2);
    border-radius: var(--roc-r);
}
.form-range::-webkit-slider-thumb { background: var(--roc-primary); }
.form-range::-moz-range-thumb { background: var(--roc-primary); }
.form-floating > label { color: var(--roc-text-muted); }

/* ---- Tab e pillole ------------------------------------------------------- */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--roc-border);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-color: var(--roc-text-strong);
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--roc-primary-icon);
    --bs-nav-tabs-link-hover-border-color: transparent transparent var(--roc-border-strong);
    --bs-nav-link-color: var(--roc-text-muted);
    --bs-nav-link-hover-color: var(--roc-text);
    --bs-nav-link-font-weight: 500;
    gap: .15rem;
}
.nav-tabs .nav-link {
    border-width: 0 0 2px;
    border-radius: 0;
    padding: .55rem .85rem;
    margin-bottom: -1px;
}
.nav-pills {
    --bs-nav-pills-border-radius: var(--roc-r);
    --bs-nav-pills-link-active-bg: var(--roc-primary);
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-link-color: var(--roc-text-2);
    --bs-nav-link-hover-color: var(--roc-text-strong);
    gap: .25rem;
}
.nav-pills .nav-link:not(.active):hover { background: var(--roc-surface-3); }
.nav-underline { --bs-nav-underline-link-active-color: var(--roc-text-strong); --bs-nav-link-color: var(--roc-text-muted); }

/* ---- Tabelle -------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--roc-text);
    --bs-table-border-color: var(--roc-border);
    --bs-table-striped-bg: rgba(255, 255, 255, .025);
    --bs-table-striped-color: var(--roc-text);
    --bs-table-hover-bg: rgba(255, 255, 255, .045);
    --bs-table-hover-color: var(--roc-text-strong);
    --bs-table-active-bg: rgba(130, 0, 0, .18);
    vertical-align: middle;
}
.table > thead th, .table > thead td {
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--roc-text-muted);
    border-bottom: 1px solid var(--roc-border-strong);
    white-space: nowrap;
}
.table-dark {
    --bs-table-bg: var(--roc-surface-2);
    --bs-table-color: var(--roc-text);
    --bs-table-border-color: var(--roc-border-strong);
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-hover-bg: rgba(255, 255, 255, .06);
}
.table-light { --bs-table-bg: var(--roc-n-800); --bs-table-color: var(--roc-n-50); }

/* ---- Tendine, modali, pannelli, elenchi ---------------------------------- */
.dropdown-menu {
    --bs-dropdown-bg: var(--roc-surface-2);
    --bs-dropdown-color: var(--roc-text);
    --bs-dropdown-border-color: var(--roc-border-strong);
    --bs-dropdown-border-radius: var(--roc-r-lg);
    --bs-dropdown-link-color: var(--roc-text);
    --bs-dropdown-link-hover-color: var(--roc-text-strong);
    --bs-dropdown-link-hover-bg: var(--roc-surface-3);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: color-mix(in srgb, var(--roc-primary) 45%, var(--roc-surface-3));
    --bs-dropdown-link-disabled-color: var(--roc-text-faint);
    --bs-dropdown-divider-bg: var(--roc-border);
    --bs-dropdown-header-color: var(--roc-text-muted);
    --bs-dropdown-padding-y: .4rem;
    --bs-dropdown-item-padding-y: .45rem;
    --bs-dropdown-item-padding-x: .85rem;
    --bs-dropdown-font-size: .925rem;
    box-shadow: var(--roc-shadow-lg);
}
.dropdown-item { border-radius: var(--roc-r-sm); width: calc(100% - .6rem); margin-inline: .3rem; }
.dropdown-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.modal {
    --bs-modal-bg: var(--roc-surface);
    --bs-modal-color: var(--roc-text);
    --bs-modal-border-color: var(--roc-border-strong);
    --bs-modal-border-radius: var(--roc-r-xl);
    --bs-modal-header-border-color: var(--roc-border);
    --bs-modal-footer-border-color: var(--roc-border);
    --bs-modal-box-shadow: var(--roc-shadow-lg);
}
.modal-backdrop { --bs-backdrop-opacity: .7; }
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
    --bs-offcanvas-bg: var(--roc-surface);
    --bs-offcanvas-color: var(--roc-text);
    --bs-offcanvas-border-color: var(--roc-border-strong);
}
.list-group {
    --bs-list-group-bg: var(--roc-surface);
    --bs-list-group-color: var(--roc-text);
    --bs-list-group-border-color: var(--roc-border);
    --bs-list-group-border-radius: var(--roc-r);
    --bs-list-group-action-color: var(--roc-text);
    --bs-list-group-action-hover-color: var(--roc-text-strong);
    --bs-list-group-action-hover-bg: var(--roc-surface-2);
    --bs-list-group-action-active-bg: var(--roc-surface-3);
    --bs-list-group-active-bg: var(--roc-primary);
    --bs-list-group-active-border-color: var(--roc-primary);
    --bs-list-group-disabled-color: var(--roc-text-faint);
    --bs-list-group-disabled-bg: var(--roc-surface);
}
.list-group-item.bg-transparent { color: var(--roc-text); border-color: var(--roc-border); }
.accordion {
    --bs-accordion-bg: var(--roc-surface);
    --bs-accordion-color: var(--roc-text);
    --bs-accordion-border-color: var(--roc-border);
    --bs-accordion-border-radius: var(--roc-r-lg);
    --bs-accordion-inner-border-radius: calc(var(--roc-r-lg) - 1px);
    --bs-accordion-btn-bg: var(--roc-surface-2);
    --bs-accordion-btn-color: var(--roc-text);
    --bs-accordion-active-bg: color-mix(in srgb, var(--roc-primary) 20%, var(--roc-surface-2));
    --bs-accordion-active-color: var(--roc-text-strong);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem var(--roc-focus);
}
.progress {
    --bs-progress-bg: var(--roc-surface-3);
    --bs-progress-bar-bg: var(--roc-primary);
    --bs-progress-border-radius: var(--roc-r-pill);
}
.pagination {
    --bs-pagination-bg: var(--roc-surface);
    --bs-pagination-color: var(--roc-text-2);
    --bs-pagination-border-color: var(--roc-border);
    --bs-pagination-border-radius: var(--roc-r);
    --bs-pagination-hover-bg: var(--roc-surface-2);
    --bs-pagination-hover-color: var(--roc-text-strong);
    --bs-pagination-hover-border-color: var(--roc-border-strong);
    --bs-pagination-focus-bg: var(--roc-surface-2);
    --bs-pagination-focus-color: var(--roc-text-strong);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--roc-focus);
    --bs-pagination-active-bg: var(--roc-primary);
    --bs-pagination-active-border-color: var(--roc-primary);
    --bs-pagination-disabled-bg: var(--roc-surface);
    --bs-pagination-disabled-color: var(--roc-text-faint);
    --bs-pagination-disabled-border-color: var(--roc-border);
}
.breadcrumb {
    --bs-breadcrumb-divider-color: var(--roc-text-faint);
    --bs-breadcrumb-item-active-color: var(--roc-text-2);
    font-size: .85rem;
}
.breadcrumb a { color: var(--roc-text-muted); }
.breadcrumb a:hover { color: var(--roc-text); }
.tooltip { --bs-tooltip-bg: var(--roc-tooltip-bg); --bs-tooltip-color: var(--roc-tooltip-fg); --bs-tooltip-border-radius: var(--roc-r-sm); }
.popover {
    --bs-popover-bg: var(--roc-surface-2);
    --bs-popover-border-color: var(--roc-border-strong);
    --bs-popover-body-color: var(--roc-text);
    --bs-popover-header-bg: var(--roc-surface-3);
    --bs-popover-header-color: var(--roc-text-strong);
    --bs-popover-border-radius: var(--roc-r-lg);
}
.toast {
    --bs-toast-bg: var(--roc-surface-2);
    --bs-toast-color: var(--roc-text);
    --bs-toast-border-color: var(--roc-border-strong);
    --bs-toast-header-bg: var(--roc-surface-3);
    --bs-toast-header-color: var(--roc-text-strong);
    --bs-toast-border-radius: var(--roc-r-lg);
}
.spinner-border, .spinner-grow { color: var(--roc-primary-fg); }

/* ==========================================================================
   3. CHROME DEL PORTALE: navbar e footer
   ========================================================================== */
.roc-navbar {
    --bs-navbar-padding-y: .5rem;
    --bs-navbar-color: var(--roc-n-800);
    --bs-navbar-hover-color: var(--roc-n-950);
    --bs-navbar-active-color: var(--roc-n-950);
    --bs-navbar-brand-color: var(--roc-n-950);
    --bs-navbar-brand-hover-color: var(--roc-n-950);
    --bs-navbar-disabled-color: var(--roc-n-600);
    --bs-navbar-brand-padding-y: .1rem;
    --bs-navbar-toggler-border-color: var(--roc-n-400);
    --bs-navbar-toggler-focus-width: .2rem;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28203, 204, 210, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --bs-navbar-nav-link-padding-x: .7rem;
    color-scheme: dark; /* chrome scuro in entrambi i temi */
    background: var(--roc-n-100);
    border-bottom: 1px solid var(--roc-n-300);
    padding-top: calc(var(--bs-navbar-padding-y) + env(safe-area-inset-top, 0px));
    min-height: var(--roc-nav-h);
}
.roc-navbar .navbar-toggler { border-radius: var(--roc-r-sm); padding: .3rem .5rem; }
.roc-navbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem var(--roc-focus); }
.roc-navbar .nav-link {
    font-weight: 500;
    font-size: .92rem;
    border-radius: var(--roc-r-sm);
    padding-top: .42rem;
    padding-bottom: .42rem;
    transition: background-color .15s ease, color .15s ease;
}
.roc-navbar .nav-link:hover, .roc-navbar .nav-link:focus-visible { background: var(--roc-n-250); text-decoration: none; }
.roc-navbar .nav-link.active, .roc-navbar .nav-link.show { background: var(--roc-n-250); color: var(--roc-n-950); }
.roc-navbar .nav-link.active { box-shadow: inset 0 -2px 0 var(--roc-red-400); }
.roc-navbar .nav-link .fa-solid, .roc-navbar .nav-link .fas, .roc-navbar .nav-link .far { opacity: .85; }
.roc-navbar .nav-link.text-warning { color: var(--roc-gold-400) !important; }
.roc-navbar .nav-link.text-info { color: #6aa9e8 !important; }
/* Le tendine della navbar restano scure come lei, in entrambi i temi. */
.roc-navbar .dropdown-menu {
    margin-top: .35rem; min-width: 14rem;
    --bs-dropdown-bg: var(--roc-n-200); --bs-dropdown-color: var(--roc-n-900); --bs-dropdown-border-color: var(--roc-n-400);
    --bs-dropdown-link-color: var(--roc-n-900); --bs-dropdown-link-hover-color: var(--roc-n-950); --bs-dropdown-link-hover-bg: var(--roc-n-250);
    --bs-dropdown-divider-bg: var(--roc-n-300); --bs-dropdown-header-color: var(--roc-n-700);
    --bs-dropdown-link-active-bg: color-mix(in srgb, var(--roc-red-700) 45%, var(--roc-n-250));
}
.roc-navbar .dropdown-item.text-warning { color: var(--roc-gold-400) !important; }
.roc-navbar .dropdown-item.text-info { color: #6aa9e8 !important; }
.roc-navbar .dropdown-item.text-danger { color: #f0716c !important; }
.roc-navbar .dropdown-item.text-success { color: #5fc47f !important; }
.roc-navbar .dropdown-item.text-primary { color: var(--roc-red-300) !important; }
.roc-navbar .dropdown-item.text-muted { color: var(--roc-n-700) !important; }
.roc-navbar .badge { font-size: .62rem; }
/* Interruttore del tema: sole nel tema scuro (porta al chiaro), luna nel chiaro. */
.roc-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--roc-r-sm);
    border: 1px solid transparent; background: transparent; color: var(--roc-n-800);
    cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.roc-theme-toggle:hover { background: var(--roc-n-250); color: var(--roc-n-950); }
.roc-theme-toggle:focus-visible { outline: 2px solid var(--roc-gold-500); outline-offset: 2px; }
.roc-theme-toggle .roc-theme-moon { display: none; }
[data-bs-theme="light"] .roc-theme-toggle .roc-theme-moon { display: inline; }
[data-bs-theme="light"] .roc-theme-toggle .roc-theme-sun { display: none; }
.roc-navbar .btn-primary.btn-sm { --bs-btn-padding-y: .4rem; }
/* Il marchio: d20 del logo + nome nel carattere dei titoli. Nitido a ogni densità. */
.roc-brand {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--roc-font-brand);
    font-weight: 400;
    font-size: 1.35rem;
    letter-spacing: .01em;
    color: var(--roc-n-950);
    white-space: nowrap;
}
.roc-brand:hover { color: var(--roc-n-950); text-decoration: none; }
.roc-brand-mark { height: 34px; width: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
/* Il wordmark com'è nella grafica originale: RULE of COOL, maiuscolo e compatto, con
   «of» piccolo e minuscolo dello stesso colore. */
.roc-brand-name { line-height: 1; padding-top: .1em; text-transform: uppercase; }
.roc-brand-of { text-transform: lowercase; font-size: .62em; margin: 0 .1em; letter-spacing: 0; }
.roc-beta {
    display: inline-block;
    font-family: var(--roc-font-sans);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1;
    color: var(--roc-gold-400);
    border: 1px solid color-mix(in srgb, var(--roc-gold-500) 60%, transparent);
    border-radius: 4px;
    padding: .3em .45em .25em;
    margin-left: .15rem;
    vertical-align: middle;
}
.roc-beta--danger { color: var(--roc-danger-fg); border-color: color-mix(in srgb, var(--roc-danger-bg) 70%, transparent); }
@media (max-width: 991.98px) {
    .roc-navbar .navbar-collapse { border-top: 1px solid var(--roc-n-300); margin-top: .6rem; padding: .5rem 0 .6rem; }
    .roc-navbar .nav-link { padding: .6rem .6rem; }
    .roc-navbar .dropdown-menu { background: transparent; border: 0; box-shadow: none; margin: 0 0 .25rem .75rem; padding: 0; }
    .roc-navbar .dropdown-item { padding-top: .5rem; padding-bottom: .5rem; }
    .roc-navbar .navbar-nav.align-items-center { align-items: stretch !important; }
}
/* Menù su iPad e touch.
   · le tendine non escono mai dallo schermo: scorrono dentro se sono più alte (il menù Admin
     ha una ventina di voci e in orizzontale su iPad finiva tagliato);
   · bersagli di almeno 44px dove si tocca invece di puntare;
   · da 992 a 1199px (iPad in orizzontale) i nomi lunghi diventano solo icona e il padding si
     stringe, così la barra non va a capo;
   · sotto i 992px il pannello scorre da solo e le tendine a due colonne usano la larghezza;
   · il menù Admin si dispone su due colonne con le intestazioni a tutta riga. */
.roc-navbar .dropdown-menu {
    max-height: calc(100vh - 5.5rem - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.roc-navbar .dropdown-header {
    font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: .55rem 1rem .2rem;
}
@media (pointer: coarse) {
    .roc-navbar .nav-link { min-height: 44px; display: flex; align-items: center; }
    .roc-navbar .dropdown-item { min-height: 44px; display: flex; align-items: center; }
    .roc-navbar .dropdown-item .fas, .roc-navbar .dropdown-item .far { width: 1.25em; text-align: center; }
    .roc-theme-toggle { width: 44px; height: 44px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .roc-navbar { --bs-navbar-nav-link-padding-x: .5rem; }
    .roc-navbar .nav-link { font-size: .88rem; }
    .roc-navbar .roc-brand { font-size: 1.2rem; }
    .roc-navbar .roc-brand-mark { height: 30px; }
}
@media (min-width: 992px) {
    .roc-navbar .dropdown-menu.roc-menu-admin.show {
        display: grid; grid-template-columns: 1fr 1fr; column-gap: .25rem; min-width: 30rem; padding-bottom: .4rem;
    }
    .roc-navbar .roc-menu-admin > li:has(> .dropdown-header) { grid-column: 1 / -1; }
    .roc-navbar .roc-menu-admin > li:has(> .dropdown-header):not(:first-child) { border-top: 1px solid var(--roc-n-300); margin-top: .25rem; }
}
@media (max-width: 991.98px) {
    .roc-navbar .navbar-collapse { max-height: calc(100vh - 4.5rem - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .roc-navbar .dropdown-menu { max-height: none; overflow: visible; }
    .roc-navbar .navbar-nav { gap: .1rem; }
    .roc-navbar .nav-link.dropdown-toggle { justify-content: space-between; }
    .roc-navbar .nav-link.dropdown-toggle::after { margin-left: auto; }
    .roc-navbar .navbar-nav + .navbar-nav { border-top: 1px solid var(--roc-n-300); margin-top: .4rem; padding-top: .4rem; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    .roc-navbar .dropdown-menu.show { display: grid; grid-template-columns: 1fr 1fr; column-gap: .5rem; }
    .roc-navbar .dropdown-menu.show > li:has(> .dropdown-header),
    .roc-navbar .dropdown-menu.show > li:has(> .dropdown-divider) { grid-column: 1 / -1; }
}
/* Corsie a scorrimento orizzontale (home dopo il login): poche card per tipo, il resto si
   scorre col dito. Su iPad ne restano visibili tre-quattro, su telefono una e un pezzo. */
.roc-rail {
    display: flex; gap: 1rem; overflow-x: auto; padding: .15rem .25rem .75rem; margin: 0 -.25rem;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.roc-rail > * { flex: 0 0 min(78%, 300px) !important; width: auto !important; max-width: none !important; padding: 0 !important; scroll-snap-align: start; }
.roc-rail > * > .card { height: 100%; }
@media (min-width: 992px) { .roc-rail > * { flex-basis: 290px !important; } }
@media (max-width: 359.98px) { .roc-brand-name { display: none; } }

.roc-footer {
    color-scheme: dark; /* chrome scuro in entrambi i temi */
    background: var(--roc-n-0);
    border-top: 1px solid var(--roc-n-300);
    color: var(--roc-n-700);
    font-size: .8rem;
    text-align: center;
    margin-top: 4rem;
    padding: 2.5rem 0 calc(2rem + env(safe-area-inset-bottom, 0px));
}
.roc-footer a { color: var(--roc-n-700); }
.roc-footer a:hover { color: var(--roc-n-900); text-decoration: none; }
.roc-footer-brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--roc-n-800); font-family: var(--roc-font-brand); font-weight: 400; font-size: 1.45rem; letter-spacing: .01em; text-transform: uppercase; }
.roc-footer-brand img { height: 40px; width: auto; opacity: .9; }
.roc-footer-tagline { font-family: var(--roc-font-display); letter-spacing: .08em; font-size: .78rem; color: var(--roc-n-700); margin: .5rem 0 0; }
.roc-footer-meta { color: var(--roc-n-600); font-size: .72rem; margin: .35rem 0 0; }
.roc-footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem .9rem; margin-top: 1rem; font-size: .75rem; }
.roc-footer-links .roc-footer-label { color: var(--roc-n-600); }
.roc-footer-links .roc-footer-sep { width: 1px; height: .9rem; background: var(--roc-n-400); }
.roc-footer-legal { max-width: 920px; margin: 1.25rem auto 0; padding-top: 1rem; border-top: 1px solid var(--roc-n-300); font-size: .68rem; line-height: 1.55; color: var(--roc-n-600); }
.roc-footer-legal p { margin-bottom: .4rem; }
.roc-footer-legal strong { color: var(--roc-n-700); font-weight: 600; }
.roc-footer-legal a { color: var(--roc-n-700); text-decoration: underline; text-underline-offset: .15em; }

/* ==========================================================================
   4. COMPONENTI NOSTRI (.roc-*) — crescono nelle fasi successive
   ========================================================================== */
.font-display { font-family: var(--roc-font-display); letter-spacing: .02em; }
.text-gold { color: var(--roc-accent-fg) !important; }
.text-brand { color: var(--roc-primary-fg) !important; }
.roc-kicker {
    font-family: var(--roc-font-display);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--roc-text-muted);
}
.roc-surface { background: var(--roc-surface); border: 1px solid var(--roc-border); border-radius: var(--roc-r-lg); }
.roc-surface-2 { background: var(--roc-surface-2); border: 1px solid var(--roc-border); border-radius: var(--roc-r-lg); }
.roc-divider { border: 0; border-top: 1px solid var(--roc-border); margin: 1rem 0; }

/* ==========================================================================
   5. EREDITÀ dai vecchi style.css / dark-theme.css, portata ai token
   ========================================================================== */
.jumbotron { background: var(--roc-surface); border: 1px solid var(--roc-border); border-radius: var(--roc-r-lg); padding: 2rem 1rem; margin: 1em 0 .5em; }
.card-hover { transition: box-shadow .2s ease, transform .2s ease; }
.card-hover:hover { box-shadow: var(--roc-shadow-lg); transform: translateY(-2px); }
.hidden { display: none; }
.fade-in { animation: rocFadeIn .4s ease-in; }
@keyframes rocFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Token dei personaggi */
.character-token {
    position: relative; width: 64px; height: 64px; border-radius: 50%;
    border: 2px solid var(--roc-gold-500); overflow: hidden; display: inline-block; vertical-align: middle;
    background: var(--roc-surface-3) center / cover no-repeat; box-shadow: var(--roc-shadow-sm);
}
.character-token img { width: 100%; height: 100%; object-fit: cover; }
.character-token-sm { width: 32px; height: 32px; border-width: 1px; }
.character-token-lg { width: 120px; height: 120px; border-width: 3px; }

/* Card cliccabili del builder e schede metodo */
.cb-selectable-card { transition: border-color .15s, box-shadow .15s; cursor: pointer; }
.cb-selectable-card:hover { border-color: var(--roc-primary-icon) !important; box-shadow: 0 0 0 2px rgba(130, 0, 0, .3); }
.cb-selectable-card.border-primary { box-shadow: 0 0 0 3px rgba(130, 0, 0, .4); }
.method-card { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.method-card:hover { transform: translateY(-2px); box-shadow: var(--roc-shadow-lg); }
.method-card.border-primary { border-color: var(--roc-primary-icon) !important; background-color: color-mix(in srgb, var(--roc-primary) 18%, var(--roc-surface)) !important; }
.method-card.disabled-card { opacity: .5; cursor: not-allowed; pointer-events: none; background-color: var(--roc-surface-2) !important; }
.method-card.disabled-card:hover { transform: none; box-shadow: none; }
.cb-check-row { border: 1px solid transparent; border-radius: var(--roc-r-sm); transition: background-color .1s, border-color .1s; }
.cb-check-row:hover { background-color: var(--roc-surface-3); border-color: var(--roc-border-strong); }
.cb-check-row:has(input:checked) { background-color: color-mix(in srgb, var(--roc-primary) 22%, var(--roc-surface)); border-color: var(--roc-primary-icon); }
.cb-sticky-nav { margin-top: 2rem; }

/* Card degli elenchi (campagne, journal, eventi, leghe) e copertine */
.entity-card { transition: transform .15s ease, box-shadow .15s ease; }
.entity-card:hover { transform: translateY(-3px); box-shadow: var(--roc-shadow-lg) !important; }
.journal-cover-hero { aspect-ratio: 21 / 7; min-height: 220px; width: 100%; }
@media (max-width: 575.98px) { .journal-cover-hero { aspect-ratio: 4 / 3; min-height: 0; } }

/* Richiami «azione richiesta» */
.cta-glow-success { animation: rocGlowSuccess 2s ease-in-out infinite; }
.cta-glow-warning { animation: rocGlowWarning 2s ease-in-out infinite; }
@keyframes rocGlowSuccess { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 158, 90, .65); } 50% { box-shadow: 0 0 0 .5rem rgba(47, 158, 90, 0); } }
@keyframes rocGlowWarning { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 144, 42, .6); } 50% { box-shadow: 0 0 0 .5rem rgba(217, 144, 42, 0); } }

/* Statsroller storico (tiro dei dadi) */
.step-indicator { display: flex; justify-content: space-between; margin-bottom: 20px; padding: 0 20px; }
.step { display: flex; align-items: center; gap: 10px; padding: 10px 15px; background: var(--roc-surface-3); border-radius: var(--roc-r-pill); color: var(--roc-text); font-weight: 600; border: 1px solid var(--roc-border); }
.step.active { background: var(--roc-primary); color: #fff; border-color: var(--roc-primary); }
.step.completed { background: var(--roc-success-bg); color: #fff; border-color: var(--roc-success-bg); }
.step-number { width: 25px; height: 25px; background: rgba(255, 255, 255, .25); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.section { margin-bottom: 30px; padding: 20px; border: 2px solid var(--roc-border); border-radius: var(--roc-r-lg); background: var(--roc-surface); }
.dice-matrix { display: grid; gap: 15px; margin: 20px 0; }
.dice-row { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--roc-surface-2); border-radius: var(--roc-r); border: 1px solid var(--roc-border); }
.row-label { font-weight: 600; min-width: 60px; color: var(--roc-text); }
.dice-container { display: flex; gap: 5px; flex: 1; }
.die { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; border-radius: var(--roc-r-sm); border: 2px solid var(--roc-border-strong); background: var(--roc-surface-3); color: var(--roc-text); transition: all .3s ease; font-variant-numeric: tabular-nums; }
.die.ones { background: var(--roc-danger-bg); color: #fff; border-color: var(--roc-danger-bg); animation: rocPulse 2s infinite; }
.die.top { background: var(--roc-success-bg); color: #fff; border-color: var(--roc-success-bg); }
@keyframes rocPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.row-sum { min-width: 80px; text-align: right; font-weight: 700; font-size: 18px; color: var(--roc-text); }
.stats-assignment { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0; }
.stat-assign { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--roc-surface-2); border-radius: var(--roc-r); border: 1px solid var(--roc-border); }
.stat-value { font-weight: 700; font-size: 20px; color: var(--roc-text); min-width: 40px; }
.stat-select { flex: 1; padding: 8px; border: 1px solid var(--roc-border-strong); border-radius: var(--roc-r-sm); font-size: 16px; background: var(--roc-input-bg); color: var(--roc-text); }
.final-table { background: var(--roc-bg-deep); color: var(--roc-text); padding: 20px; border-radius: var(--roc-r-lg); font-family: var(--roc-font-mono); font-size: 15px; line-height: 1.4; margin: 20px 0; white-space: pre-wrap; border: 1px solid var(--roc-border); overflow-x: auto; }
.total-score { font-size: 1.2em; font-weight: 700; color: var(--roc-text); text-align: center; margin: 15px 0; padding: 10px; background: var(--roc-surface-2); border-radius: var(--roc-r); border: 2px solid var(--roc-border); }
.completion-message { text-align: center; padding: 40px; background: var(--roc-surface); border: 2px solid var(--roc-success-bg); border-radius: var(--roc-r-lg); margin: 20px 0; }
@media (max-width: 768px) { .step-indicator { flex-direction: column; gap: 10px; } .stats-assignment { grid-template-columns: 1fr; } }

/* ==========================================================================
   6. PONTI TEMPORANEI per partial con colori del tema chiaro cablati.
      Da togliere quando il partial viene ridisegnato (Fase 4: builder).
   ========================================================================== */
body .cb-recap-bar { background: var(--roc-surface-2); border-color: var(--roc-border-strong); box-shadow: var(--roc-shadow-sm); top: 0; }
.cb-nav .cb-phase-head { background: var(--roc-surface-2); border-color: var(--roc-border-strong); color: var(--roc-text-2); }
.cb-nav .cb-phase-head:hover { border-color: var(--roc-n-500); }
.cb-nav .cb-phase.is-done .cb-phase-head { background: color-mix(in srgb, var(--roc-success-bg) 28%, var(--roc-surface-2)); border-color: var(--roc-success-bg); color: var(--roc-success-fg); }
.cb-nav .cb-phase.is-active .cb-phase-head { background: var(--roc-primary); border-color: var(--roc-primary); color: #fff; }
.cb-nav .cb-phase.needs-review .cb-phase-head { background: var(--roc-warning-bg); border-color: var(--roc-warning-bg); color: var(--roc-n-0); }
.cb-nav .cb-substeps { border-left-color: var(--roc-border-strong); }
.cb-nav .cb-substep a, .cb-nav .cb-substep span { color: var(--roc-text-2); }
.cb-nav .cb-substep a:hover { background: var(--roc-surface-3); color: var(--roc-text-strong); }
.cb-nav .cb-substep.is-active a, .cb-nav .cb-substep.is-active span { background: color-mix(in srgb, var(--roc-primary) 32%, var(--roc-surface-2)); color: var(--roc-text-strong); }
.cb-nav .cb-substep.needs-review a { background: color-mix(in srgb, var(--roc-warning-bg) 25%, var(--roc-surface-2)); color: var(--roc-warning-fg); }
.cb-sticky-nav.bg-white {
    background: color-mix(in srgb, var(--roc-surface) 94%, transparent) !important;
    border-top-color: var(--roc-border) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* ==========================================================================
   7. MOBILE, TOUCH, SAFE-AREA, STAMPA
   ========================================================================== */
/* Il container di pagina: 12px di gutter (come Bootstrap) o la safe-area se è più larga. */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --roc-page-gutter: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-left: max(var(--roc-page-gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--roc-page-gutter), env(safe-area-inset-right, 0px));
}
/* 130 template aprono un proprio .container DENTRO quello del layout: il padding
   laterale era doppio (24px su telefono, cioè un ottavo dello schermo buttato).
   Il container annidato non ne aggiunge. */
.container .container, .container .container-fluid, .container-fluid .container, .container-fluid .container-fluid {
    padding-left: 0;
    padding-right: 0;
}
@media (max-width: 575.98px) {
    body > .container.mt-4, body > .container-fluid.mt-4 { margin-top: 1rem !important; }
    /* Le copertine su telefono valgono lo schermo: a tutta larghezza e più alte. */
    .roc-cover, .journal-cover-hero {
        margin-left: calc(-1 * var(--roc-page-gutter)) !important;
        margin-right: calc(-1 * var(--roc-page-gutter)) !important;
        width: auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .roc-cover { padding-bottom: 62% !important; }
    .roc-cover .h3, .roc-cover h1 { font-size: 1.35rem; }
}
/* ── Alpine: gli elementi con x-cloak restano nascosti finché lo script non li prende in carico ── */
[x-cloak] { display: none !important; }

/* ── Manuali homebrew: assistente dei riferimenti ({@spell …}, {@dice …}) ── */
.roc-ref-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-bottom: .35rem; }
.roc-ref-toolbar .btn-link { padding-inline: .4rem; text-decoration: none; color: var(--roc-text-muted); }
.roc-ref-toolbar .btn-link:hover, .roc-ref-toolbar .btn-link:focus-visible { color: var(--roc-link-hover); }
/* ⚠️ Inter trasforma la «x» fra due cifre in «×» (alternative contestuali): nei campi dove si scrivono
   i riferimenti «2x6» sembrerebbe giusto proprio quando è l'errore da correggere. */
.roc-ref-field, #rocRefModal { font-feature-settings: "calt" 0; }
.roc-ref-preview { margin-top: .5rem; padding: .6rem .75rem; border: 1px dashed var(--roc-border-strong); border-radius: var(--roc-r-sm); background: var(--roc-surface-2); font-size: var(--roc-fs-sm); }
.roc-ref-preview > div > p:last-child { margin-bottom: 0; }
.roc-ref-problems { list-style: none; padding: 0; margin: .5rem 0 0; font-size: var(--roc-fs-sm); }
.roc-ref-problems li { padding: .15rem 0; }
.roc-ref-problems li.error { color: var(--roc-danger-fg); }
.roc-ref-problems li.warning { color: var(--roc-warning-fg); }
.roc-ref-problems code { color: inherit; opacity: .85; }
.roc-ref-kinds { display: flex; flex-direction: column; gap: .15rem; }
.roc-ref-kinds .roc-ref-group { font-size: var(--roc-fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--roc-text-muted); margin: .5rem 0 .15rem; }
.roc-ref-kinds .roc-ref-group:first-child { margin-top: 0; }
.roc-ref-kinds .btn { text-align: start; border-color: transparent; }
.roc-ref-kinds .btn.active { background: var(--roc-surface-3); border-color: var(--roc-border-strong); color: var(--roc-text-strong); }
.roc-ref-results { max-height: 42vh; overflow-y: auto; }
.roc-ref-results .list-group-item { background: var(--roc-surface); color: var(--roc-text); border-color: var(--roc-border); }
.roc-ref-results .list-group-item.active { background: var(--roc-surface-3); color: var(--roc-text-strong); border-color: var(--roc-border-strong); }
.roc-ref-out { font-family: var(--roc-font-mono); font-size: var(--roc-fs-xs); color: var(--roc-text-muted); word-break: break-all; }
@media (max-width: 767.98px) {
    .roc-ref-kinds { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .roc-ref-kinds .roc-ref-group { display: none; }
    .roc-ref-kinds .btn { white-space: nowrap; }
}

@media (max-width: 767.98px) {
    /* Le tabelle larghe scorrono da sole invece di allargare la pagina. */
    .table:not(.table-responsive > .table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    /* Tab e pillole diventano una striscia scorrevole. */
    .nav-tabs, .nav-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; }
    .modal { --bs-modal-margin: .5rem; }
}
@media (pointer: coarse) {
    .btn:not(.btn-sm):not(.btn-lg) { min-height: 42px; }
    .btn-sm { min-height: 34px; }
    /* Sotto i 16px iOS ingrandisce la pagina al focus di un campo. */
    .form-control, .form-select { font-size: max(1rem, 16px); min-height: 42px; }
    .form-control-sm, .form-select-sm { min-height: 36px; }
    .form-check-input { width: 1.2em; height: 1.2em; }
}
/* Nella PWA installata i gesti di zoom disturbano: era il motivo di user-scalable=no,
   che però toglieva lo zoom anche a chi legge la scheda dal browser. */
@media (display-mode: standalone) { body { touch-action: pan-x pan-y; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
    body { background: #fff; color: #000; }
    .roc-navbar, .roc-footer, #roc-gdpr-banner { display: none !important; }
}

/* Manuali homebrew nella pagina di modifica della campagna */
.roc-hb-campaign { background: var(--roc-surface-2, var(--roc-surface)); border: 1px solid var(--roc-border); }

/* Step 3.5 del builder: il numero dei livelli stava in una colonna stretta fra due pulsanti e le
   frecce del campo numerico, che si mangiavano la cifra. Il campo è a sola lettura (si cambia coi
   pulsanti −/+), quindi le frecce non servono. */
.level-input { min-width: 3rem; padding-inline: .25rem; -moz-appearance: textfield; appearance: textfield; font-weight: 600; }
.level-input::-webkit-inner-spin-button, .level-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Valori nascosti o falsi (pannello della scheda di gestione) ─────────────────────────── */
.roc-mask-row { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(8rem, auto) minmax(0, 2fr); gap: .5rem 1rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--roc-border); }
.roc-mask-row:first-of-type { border-top: 0; }
.roc-mask-controls { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.roc-mask-controls .form-control, .roc-mask-controls .form-select { max-width: 16rem; }
/* Riga «Immagine»: le miniature (quella vera e la copertina) e la nota che va a capo da sola. */
.roc-mask-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: var(--roc-r-sm); border: 1px solid var(--roc-border); vertical-align: middle; }
.roc-mask-hint { flex-basis: 100%; }
/* Anteprima TONDA del viso (col ritaglio scelto): è la forma del token e dell'avatar. L'immagine si sposta e si ingrandisce
   con lo stile inline (object-position + scale), come nell'anteprima del token della galleria. */
.roc-mask-token { display: inline-block; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--roc-border); background: var(--roc-surface); }
.roc-mask-token img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Elenco pubblico dei personaggi: ogni card ha una faccia pubblica e, per chi è nel segreto, una faccia vera che si
   apre col tasto «Spoiler». Le due facce occupano lo stesso riquadro; quella aperta per scelta ha il bordo giallo. */
.roc-roster-face { position: absolute; inset: 0; }
.roc-spoiler-btn { position: absolute; top: .5rem; left: .5rem; z-index: 3; }
/* Il bordo di avviso è uno pseudo-elemento sopra le facce: un outline sarebbe coperto dai figli posizionati. */
[data-spoiler-card].roc-spoiler-on .roc-roster-card::after { content: ""; position: absolute; inset: 0; border: 3px solid rgb(var(--bs-warning-rgb)); border-radius: inherit; pointer-events: none; z-index: 2; }
/* Nelle tabelle (pagina campagna del Master) la riga con l'identità vera aperta si riconosce dal fondo giallo. */
tr[data-spoiler-card].roc-spoiler-on > td { background-color: rgba(var(--bs-warning-rgb), .14); }
/* Scheda pubblica: la copertina che vedono gli altri, in piccolo sull'angolo dell'avatar (solo per chi è nel segreto). */
.sheet-avatar-wrap { position: relative; flex-shrink: 0; }
.sheet-avatar-cover { position: absolute; right: -8px; bottom: -8px; width: 30px; height: 30px; object-fit: cover; border-radius: 50%; border: 2px solid rgb(var(--bs-warning-rgb)); background: var(--roc-surface); }
@media (max-width: 767.98px) { .roc-mask-row { grid-template-columns: 1fr; } }
/* Domanda «lo segno fra gli eventi?» dello svelamento (partials/_reveal_prompt): un po' più larga dei 500px di Bootstrap
   perché le tre risposte stiano su una riga; sotto i 576px la finestra è comunque a tutta larghezza. */
.roc-reveal-dialog { --bs-modal-width: 620px; }

/* ── Riepilogo di gioco della scheda di gestione ───────────────────────────────────────── */
.roc-summary-block { margin-top: 1.5rem; }
.roc-summary-title { font-size: 1.05rem; margin-bottom: .75rem; color: var(--roc-text-strong); }
.roc-feature-text { background: var(--roc-surface-2); border: 1px solid var(--roc-border); border-radius: var(--bs-border-radius, .5rem); padding: .6rem .8rem; margin: .4rem 0; line-height: 1.5; }
.roc-feature-sub { color: var(--roc-text-muted); border-top: 1px solid var(--roc-border); padding-top: .5rem; }
details > summary { cursor: pointer; }

/* ── Scheda del mostro, impaginata come nel manuale (campaign_monster/_statblock) ─────────── */
.roc-statblock { background: var(--roc-surface); border: 1px solid var(--roc-border-strong); border-top: 4px solid var(--roc-primary-icon, #820000); border-bottom: 4px solid var(--roc-primary-icon, #820000); border-radius: .25rem; padding: 1rem 1.25rem; box-shadow: var(--roc-shadow-sm, 0 1px 3px rgba(0,0,0,.2)); font-size: .95rem; }
.roc-sb-name { font-family: var(--roc-font-display, inherit); color: var(--roc-primary-icon, #820000); margin: 0; font-size: 1.6rem; }
.roc-sb-sub { font-style: italic; color: var(--roc-text-muted); }
.roc-sb-rule { height: 3px; margin: .6rem 0; background: linear-gradient(90deg, var(--roc-primary-icon, #820000), transparent); }
.roc-sb-line { margin: .1rem 0; }
.roc-sb-line strong, .roc-sb-text strong { color: var(--roc-primary-icon, #820000); }
.roc-sb-gap { margin-left: 1.25rem; }
.roc-sb-abil { width: 100%; text-align: center; border-collapse: collapse; }
.roc-sb-abil th { color: var(--roc-primary-icon, #820000); font-size: .8rem; }
.roc-sb-abil td { padding: .2rem .1rem; }
.roc-sb-score { font-weight: 700; }
.roc-sb-save { font-size: .75rem; color: var(--roc-text-muted); }
.roc-sb-h { font-family: var(--roc-font-display, inherit); font-size: 1.15rem; color: var(--roc-primary-icon, #820000); border-bottom: 1px solid var(--roc-primary-icon, #820000); margin: 1rem 0 .4rem; }
.roc-sb-text p { margin: 0 0 .4rem; }

/* ── Cronologia di campagna ───────────────────────────────────────────────────────────────── */
.roc-tl-session { border-left: 3px solid var(--roc-primary-icon); padding: .25rem 0 .25rem 1rem; margin-bottom: 1.25rem; }
.roc-tl-unplaced { border-left-style: dashed; border-left-color: var(--roc-border-strong); }
.roc-tl-session-title { font-size: 1.05rem; margin: 0 0 .5rem; }
.roc-tl-event { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--roc-border); }
.roc-tl-kind { min-width: 6.5rem; text-align: left; }
.roc-tl-body { flex: 1 1 14rem; }
.roc-tl-assign select { min-width: 12rem; }

/* Superficie secondaria generica (barre di strumenti, riquadri di anteprima) */
.roc-surface-2 { background: var(--roc-surface-2); border-color: var(--roc-border) !important; }

/* ── Navigazione della pagina campagna: gruppi con etichetta, un solo stile di link ───────── */
.roc-camp-nav { display: flex; flex-wrap: wrap; gap: .9rem 1.75rem; padding: .85rem 1rem; background: var(--roc-surface); border: 1px solid var(--roc-border); border-radius: var(--bs-border-radius, .5rem); }
.roc-camp-nav-label { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--roc-text-faint); margin-bottom: .3rem; }
.roc-camp-nav-links { display: flex; flex-wrap: wrap; gap: .35rem; }
.roc-camp-nav-links a { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem; border: 1px solid var(--roc-border); border-radius: .4rem; color: var(--roc-text); text-decoration: none; font-size: .875rem; background: var(--roc-surface-2); }
.roc-camp-nav-links a:hover { border-color: var(--roc-primary-icon); color: var(--roc-text-strong); }
.roc-camp-nav-links a i { color: var(--roc-text-muted); width: 1em; text-align: center; }
.roc-camp-nav-master .roc-camp-nav-label { color: var(--roc-primary-icon); }

/* ── Tabelle a schede su telefono (.roc-stack + data-label su ogni <td>; js/roc-stack.js) ──── */
.roc-stack-open { display: none; }
@media (max-width: 767.98px) {
    .roc-stack, .roc-stack > tbody, .roc-stack > tbody > tr, .roc-stack > tbody > tr > td { display: block; width: 100%; }
    .roc-stack > thead { display: none; }
    .roc-stack > tbody > tr { border: 1px solid var(--roc-border); border-radius: var(--bs-border-radius, .5rem); margin-bottom: .6rem; padding: .15rem .65rem; background: var(--roc-surface); }
    .roc-stack > tbody > tr > td { border: 0 !important; padding: .4rem 0; background: transparent !important; box-shadow: none !important; }
    .roc-stack > tbody > tr > td:not(:first-child) { display: none; border-top: 1px solid var(--roc-border) !important; }
    .roc-stack > tbody > tr.is-open > td:not(:first-child) { display: block; }
    .roc-stack > tbody > tr > td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--roc-text-faint); margin-bottom: .2rem; }
    .roc-stack > tbody > tr > td:first-child { cursor: pointer; position: relative; padding-right: 1.75rem; min-height: 2.75rem; }
    .roc-stack > tbody > tr > td:first-child::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .75rem; color: var(--roc-text-muted); position: absolute; right: .1rem; top: 50%; transform: translateY(-50%); transition: transform .15s; }
    .roc-stack > tbody > tr.is-open > td:first-child::after { transform: translateY(-50%) rotate(180deg); }
    .roc-stack > tbody > tr.is-open .roc-stack-open { display: inline-flex; margin-top: .4rem; }
    /* i comandi dentro le celle vanno a capo invece di allargare la scheda */
    .roc-stack td .btn, .roc-stack td form { margin-top: .2rem; }
    .roc-stack td .input-group { min-width: 0 !important; }
}

/* ── Telefono: schede a linguetta che vanno a capo invece di uscire dalla pagina ─────────── */
@media (max-width: 575.98px) {
    .nav-pills, .nav-tabs { flex-wrap: wrap; gap: .25rem; }
    .nav-pills .nav-link, .nav-tabs .nav-link { padding-left: .75rem !important; padding-right: .75rem !important; }
}

@media (max-width: 767.98px) {
    /* colonne che restano in vista anche a scheda chiusa (data-keep): in riga, accanto al nome */
    .roc-stack > tbody > tr > td[data-keep]:not(:first-child) { display: inline-block; width: auto; border-top: 0 !important; margin-right: .9rem; vertical-align: middle; }
    .roc-stack > tbody > tr > td[data-keep]:not(:first-child)::before { display: inline; margin: 0 .35rem 0 0; }
    /* intestazioni di gruppo (inventari per location): una riga di titolo, non una scheda */
    .roc-stack > tbody > tr.inv-group-header { border: 0; background: transparent; padding: 0; margin: .5rem 0 .25rem; }
    .roc-stack > tbody > tr.inv-group-header > td:first-child { cursor: default; padding-right: 0; min-height: 0; }
    .roc-stack > tbody > tr.inv-group-header > td:first-child::after { display: none; }
    /* la riga d'intestazione di scheda su telefono: pulsanti che si allargano */
    .roc-header-actions { width: 100%; }
    .roc-header-actions .btn { flex: 1 1 auto; }
}

@media (max-width: 575.98px) {
    .roc-score-pill { font-size: .8rem !important; padding-left: .55rem !important; padding-right: .55rem !important; }
}

/* ── Sezioni richiudibili (js/roc-folds.js): Journal pubblico e privato ────────────────────────
   Lo stato lo scrive il server in data-fold-state (la pagina non lampeggia); la testata (.roc-fold-head) resta
   sempre visibile, il resto (.roc-fold-body) sparisce da chiuso. I selettori usano il figlio diretto (>) perché i
   blocchi si annidano: un genitore aperto non deve girare il segno dei figli né nascondere il loro corpo. */
.roc-fold-toggle { display: inline-flex; align-items: baseline; gap: .55rem; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.roc-fold-toggle:focus-visible { outline: 2px solid var(--roc-focus); outline-offset: 3px; border-radius: var(--roc-r-sm); }
.roc-fold-chev { flex: none; width: 1em; font-size: .75em; color: var(--roc-text-muted); transition: transform .15s; }
.roc-fold[data-fold-state="open"] > .roc-fold-head .roc-fold-chev { transform: rotate(90deg); }
.roc-fold[data-fold-state="closed"] > .roc-fold-body { display: none; }
.roc-fold-count { display: inline-block; min-width: 1.4em; margin-left: .45rem; padding: 0 .4rem; border-radius: var(--roc-r-pill); background: var(--roc-surface-3); color: var(--roc-text-muted); font-family: var(--roc-font-sans); font-size: .72rem; font-weight: 600; line-height: 1.5; text-align: center; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .roc-fold-chev { transition: none; } }

/* vetrina pubblica: testata con filetto; una sezione chiusa occupa una riga sola */
.pj-sec.roc-fold > .roc-fold-head { padding-bottom: .5rem; border-bottom: 1px solid var(--roc-border); margin-bottom: 1rem; }
.pj-sec.roc-fold[data-fold-state="closed"] { margin-bottom: .35rem; }
.pj-sec.roc-fold[data-fold-state="closed"] > .roc-fold-head { margin-bottom: 0; }

/* Journal privato: la testata è quella della card; da chiusa la card è la sola testata */
.card.roc-fold[data-fold-state="closed"] > .card-header { border-bottom: 0; border-radius: inherit; }

/* ── «Sei dei nostri»: barra delle pagine PUBBLICHE per chi fa parte della campagna / Saga ─────
   (partials/_participant_bar): i collegamenti alla gestione. Compare solo ai partecipanti. */
.roc-participant-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; padding: .55rem .85rem; background: var(--roc-surface-2); border: 1px solid var(--roc-border); border-left: 3px solid var(--roc-primary-icon); border-radius: var(--roc-r); }
.roc-participant-who { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: .875rem; color: var(--roc-text-muted); }
.roc-participant-who > i { flex: none; color: var(--roc-primary-icon); }
.roc-participant-who strong { color: var(--roc-text-strong); font-weight: 600; }
.roc-participant-links { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (max-width: 575.98px) { .roc-participant-links { width: 100%; } .roc-participant-links .btn { flex: 1 1 auto; } }

/* ── Indice del Journal pubblico: in pagina da lg in su, sotto è una blade laterale (pulsante fisso .roc-fab) ───
   È un offcanvas responsivo di Bootstrap (offcanvas-lg): da lg in su Bootstrap lo lascia in pagina, quindi a restare
   appiccicosa deve essere la cornice (la colonna è alta quanto la riga), non il menu dentro di lei. */
.pj-index-canvas { --bs-offcanvas-width: min(88vw, 360px); }
.pj-index-canvas .pj-nav { width: 100%; }
@media (min-width: 992px) { .pj-index-canvas { position: sticky; top: 1rem; } }
@media (max-width: 991.98px) {
    /* dentro la blade il menu non è una card: il titolo sta già nell'intestazione e lo scorrimento è quello della blade */
    .pj-index-canvas .pj-nav { position: static; max-height: none; border: 0; padding: 0; }
    .pj-index-canvas .pj-nav-head { display: none; }
}
/* Pulsante tondo fisso (angolo in basso a destra, sopra l'area sicura dei telefoni con la barra gestuale). */
.roc-fab { position: fixed; right: .9rem; bottom: calc(.9rem + env(safe-area-inset-bottom, 0px)); z-index: var(--roc-z-sticky); display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0; border-radius: 50%; box-shadow: var(--roc-shadow); }

/* ── Navigatore di immagini (public/css/roc-immagini.css, public/js/roc-immagini.js) ──
   Lo stile del componente è in roc-immagini.css e usa solo variabili --ih-*: qui si mappano sui token del sito.
   Usato dalla pagina «Handout su Foundry». Lo stesso componente gira sul banco di lavoro con i colori del banco. */
.ih-root {
    --ih-surface: var(--roc-surface);
    --ih-surface-2: var(--roc-surface-3);
    --ih-line: var(--roc-border);
    --ih-ink: var(--roc-text);
    --ih-dim: var(--roc-text-muted);
    --ih-acc: var(--roc-accent);
    --ih-acc-ink: var(--roc-n-0);
    --ih-media: var(--roc-bg-deep);
    --ih-focus: var(--roc-focus);
    --ih-radius: var(--roc-r);
}
/* Azioni sulle card del navigatore: pulsanti piccoli che restano sulla stessa riga e vanno a capo solo se serve. */
.ih-az .btn { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .8rem; }
.ih-badge-stato .badge { font-weight: 500; }
.ih-sel { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--ih-dim); cursor: pointer; }
.ih-selbar { position: sticky; bottom: .75rem; z-index: var(--roc-z-sticky); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .9rem; padding: .5rem .75rem; background: var(--roc-surface-2); border: 1px solid var(--roc-border-strong); border-radius: var(--roc-r); box-shadow: var(--roc-shadow); }
.ih-selbar[hidden] { display: none; }

/* ── Presentazione al tavolo di un PNG (pagina /campaigns/{id}/png): miniatura quadrata dell'immagine della voce del Codex ── */
.npc-thumb { flex: 0 0 auto; width: 72px; height: 72px; object-fit: cover; }
.npc-thumb-empty { display: flex; align-items: center; justify-content: center; background: var(--roc-surface-3); color: var(--roc-text-muted); border: 1px dashed var(--roc-border); }

/* ── Codex: voci di PERSONAGGIO (PG/PNG) — immagine intera come copertina della card e token (cerchio) accanto al nome ── */
.codex-cover-full { display: flex; justify-content: center; padding: .5rem; background: var(--roc-bg-deep); border-radius: var(--roc-r) var(--roc-r) 0 0; }
.codex-cover-full img { display: block; max-width: 100%; max-height: min(78vh, 900px); width: auto; height: auto; object-fit: contain; border-radius: var(--roc-r-sm); }
.codex-card-cover { display: flex; align-items: center; justify-content: center; height: 220px; background: var(--roc-bg-deep); }
.codex-card-cover img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.codex-token { display: inline-block; flex: 0 0 auto; overflow: hidden; border-radius: 50%; border: 2px solid var(--roc-accent); background: var(--roc-bg-deep); }
.codex-token img { display: block; width: 100%; height: 100%; object-fit: cover; }
.codex-token-sm { width: 36px; height: 36px; border-width: 1px; }
.codex-token-md { width: 72px; height: 72px; }
.codex-token-lg { width: 112px; height: 112px; border-width: 3px; }
/* editor: la cornice della posizione è una striscia per le voci normali e un cerchio (il token) per quelle di personaggio */
.codex-pos-frame { height: 180px; max-width: 560px; overflow: hidden; border-radius: .4rem; border: 1px solid var(--roc-border); background: var(--roc-bg-deep); cursor: grab; }
.codex-pos-frame.is-token { width: 180px; border-radius: 50%; border: 3px solid var(--roc-accent); }