/*
 * Gestionale Mass Group – stile del pannello (stile C "misto", scelto dal cliente il 6/11/2026).
 *
 * Menu laterale e barra in alto sempre scuri (grafite e inchiostro del logo), con il logo MC∞ in negativo;
 * contenuto chiaro (fondo carta, schede bianche, testi grafite, fili pietra); un solo accento: rosso Milano
 * #C1121F, sui pulsanti d'azione principali e sugli avvisi. Niente gradienti, niente ombre decorative.
 * In modo scuro tutto grafite e inchiostro, con lo stesso rosso.
 *
 * File statico: si modifica qui e basta (nessuna compilazione). Si appoggia sulle classi "fi-…" di Filament 5
 * e sulle variabili dei colori (--gray-*, --primary-*) definite da App\Pannello\Stile::colori().
 */

/* ---------- Caratteri (ospitati qui, alfabeto latino; licenze OFL accanto ai file) ---------- */

@font-face {
    font-family: 'Instrument Sans';
    src: url('../../fonts/gestionale/InstrumentSans-Regular.woff2') format('woff2');
    font-weight: 300 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Instrument Sans';
    src: url('../../fonts/gestionale/InstrumentSans-Bold.woff2') format('woff2');
    font-weight: 600 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Instrument Serif';
    src: url('../../fonts/gestionale/InstrumentSerif-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ---------- Colori del marchio ---------- */

:root {
    --mg-carta: #EEEDEA;
    --mg-pietra: #E2E1DD;
    --mg-grafite: #1E1E1D;
    --mg-inchiostro: #161616;
    --mg-marchio: #6E6E6E;
    --mg-rosso: #C1121F;
    --mg-rosso-scuro: #A80F1A;
    /* Sul fondo scuro del menu: testi e fili */
    --mg-menu-testo: #E2E1DD;
    --mg-menu-testo-tenue: #B5B3AE;
    --mg-menu-filo: rgb(255 255 255 / 0.1);
    --mg-menu-sopra: rgb(255 255 255 / 0.07);
    --mg-menu-attivo: rgb(255 255 255 / 0.11);
    --mg-fuoco: #C1121F;
}

html.fi.dark {
    --mg-fuoco: #F0646C;
}

/* ---------- Pagina ---------- */

.fi-body {
    background-color: var(--mg-carta);
    color: var(--mg-grafite);
    -webkit-font-smoothing: antialiased;
}

html.dark .fi-body {
    background-color: var(--mg-inchiostro);
    color: var(--mg-pietra);
}

/* Focus sempre visibile (tastiera): anello rosso pieno, distaccato dal bordo */
.fi :focus-visible {
    outline: 2px solid var(--mg-fuoco);
    outline-offset: 2px;
}

/* Titoli grandi delle pagine in Instrument Serif (ha un solo peso: niente grassetto finto) */
.fi-header-heading,
.fi-simple-header-heading {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.1;
    color: var(--mg-grafite);
}

.fi-header-heading {
    font-size: 2.5rem;
}

html.dark .fi-header-heading,
html.dark .fi-simple-header-heading {
    color: #FFFFFF;
}

.fi-header-subheading {
    color: var(--gray-600);
}

html.dark .fi-header-subheading {
    color: var(--gray-400);
}

/* ---------- Menu laterale scuro (anche nel modo chiaro) ---------- */

.fi-sidebar,
.fi-sidebar.fi-sidebar-open {
    background-color: var(--mg-grafite);
    color: var(--mg-menu-testo);
}

html.dark .fi-sidebar {
    background-color: var(--mg-inchiostro);
    border-inline-end: 1px solid var(--mg-menu-filo);
}

.fi-sidebar-header {
    background-color: transparent;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    border-bottom: 1px solid var(--mg-menu-filo);
}

.fi-sidebar-header-controls:after,
.fi-sidebar-footer {
    border-color: var(--mg-menu-filo) !important;
}

/* Nel menu e nella barra il logo è sempre quello in negativo */
.fi-sidebar .fi-logo.fi-logo-light,
.fi-topbar .fi-logo.fi-logo-light {
    display: none !important;
}

.fi-sidebar .fi-logo.fi-logo-dark,
.fi-topbar .fi-logo.fi-logo-dark {
    display: block !important;
}

.fi-sidebar-group-label {
    color: var(--mg-menu-testo-tenue) !important;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fi-sidebar-group-btn .fi-icon,
.fi-sidebar-group-collapse-btn,
.fi-sidebar-group-collapse-btn .fi-icon,
.fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    color: var(--mg-menu-testo-tenue) !important;
}

.fi-sidebar-item-label,
.fi-sidebar-database-notifications-btn-label {
    color: var(--mg-menu-testo) !important;
    font-size: 0.9375rem;
}

.fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-database-notifications-btn > .fi-icon {
    color: var(--mg-menu-testo-tenue) !important;
}

.fi-sidebar-item-btn,
.fi-sidebar-group-dropdown-trigger-btn,
.fi-sidebar-database-notifications-btn {
    position: relative;
    border-radius: 6px;
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible,
.fi-sidebar-group-dropdown-trigger-btn:hover,
.fi-sidebar-group-dropdown-trigger-btn:focus-visible,
.fi-sidebar-database-notifications-btn:hover,
.fi-sidebar-database-notifications-btn:focus-visible,
.fi-sidebar-group-collapse-btn:hover {
    background-color: var(--mg-menu-sopra) !important;
}

/* Voce attiva: fondo appena più chiaro, testo bianco e una lineetta rossa a sinistra */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--mg-menu-attivo) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 2px;
    background-color: var(--mg-rosso);
}

html.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    background-color: #F0646C;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: #FFFFFF !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    font-weight: 700;
}

.fi-sidebar-item-grouped-border-part-not-first,
.fi-sidebar-item-grouped-border-part-not-last {
    background-color: rgb(255 255 255 / 0.2) !important;
}

.fi-sidebar-item-grouped-border-part {
    background-color: var(--mg-menu-testo-tenue) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border-part {
    background-color: #FFFFFF !important;
}

.fi-sidebar :focus-visible {
    outline-color: #FFFFFF;
}

/* ---------- Barra in alto scura ---------- */

.fi-topbar {
    background-color: var(--mg-inchiostro) !important;
    color: var(--mg-menu-testo);
    box-shadow: none !important;
    border-bottom: 1px solid var(--mg-menu-filo);
}

.fi-topbar .fi-icon-btn,
.fi-topbar-item-btn > .fi-icon,
.fi-topbar .fi-icon-btn .fi-icon {
    color: var(--mg-menu-testo-tenue);
}

.fi-topbar .fi-icon-btn:hover,
.fi-topbar .fi-icon-btn:focus-visible,
.fi-topbar-item-btn:hover,
.fi-topbar-item-btn:focus-visible {
    background-color: var(--mg-menu-sopra) !important;
}

.fi-topbar .fi-icon-btn:hover .fi-icon {
    color: #FFFFFF;
}

.fi-topbar-item-label {
    color: var(--mg-menu-testo) !important;
}

.fi-topbar :focus-visible {
    outline-color: #FFFFFF;
}

/* Il logo resta nella barra anche su tablet e telefono (Filament lo toglie sotto i 1024 px) */
.fi-topbar-start {
    display: flex;
}

@media (max-width: 1023px) {
    .fi-topbar-start .fi-logo {
        margin-inline-start: 0.5rem;
        height: 1.875rem !important;
    }
}

/* Ricerca generale nella barra: campo scuro */
.fi-topbar .fi-global-search-field .fi-input-wrp {
    background-color: rgb(255 255 255 / 0.06);
    --tw-ring-color: rgb(255 255 255 / 0.16);
}

.fi-topbar .fi-global-search-field .fi-input {
    color: #FFFFFF;
}

.fi-topbar .fi-global-search-field .fi-input::placeholder {
    color: var(--mg-menu-testo-tenue);
}

.fi-topbar .fi-global-search-field .fi-input-wrp-prefix .fi-icon {
    color: var(--mg-menu-testo-tenue);
}

/* Avatar della persona: iniziali su grigio del marchio */
.fi-avatar.fi-user-avatar {
    outline: 1px solid rgb(255 255 255 / 0.25);
}

/* ---------- Contenuto: schede bianche con filo pietra, senza ombre ---------- */

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-repeater-item,
.fi-in-repeatable-item,
.fi-simple-main,
.fi-modal-window,
.fi-dropdown-panel {
    box-shadow: none !important;
}

.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-simple-main {
    background-color: #FFFFFF;
    --tw-ring-color: var(--mg-pietra) !important;
    border-radius: 10px;
}

html.dark .fi-section:not(.fi-section-not-contained),
html.dark .fi-ta-ctn,
html.dark .fi-wi-stats-overview-stat,
html.dark .fi-simple-main {
    background-color: var(--mg-grafite);
    --tw-ring-color: rgb(255 255 255 / 0.09) !important;
}

.fi-dropdown-panel,
.fi-modal-window {
    --tw-ring-color: var(--mg-pietra) !important;
    border: 1px solid var(--mg-pietra);
}

html.dark .fi-dropdown-panel,
html.dark .fi-modal-window {
    background-color: var(--mg-grafite);
    border-color: rgb(255 255 255 / 0.1);
}

.fi-section-header-heading {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--mg-grafite);
}

html.dark .fi-section-header-heading {
    color: #FFFFFF;
}

.fi-section-header-description {
    color: var(--gray-600);
}

html.dark .fi-section-header-description {
    color: var(--gray-400);
}

/* ---------- Tabelle compatte ma leggibili (testo da 14 px in su) ---------- */

.fi-ta-table > thead > tr {
    background-color: var(--gray-50);
}

html.dark .fi-ta-table > thead > tr {
    background-color: rgb(255 255 255 / 0.03);
}

.fi-ta-header-cell {
    padding-block: 0.625rem !important;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--gray-600);
}

html.dark .fi-ta-header-cell {
    color: var(--gray-400);
}

.fi-ta-header-cell .fi-ta-header-cell-sort-btn {
    color: inherit;
}

/* Righe più basse: Filament mette 16 px sopra e sotto ogni cella */
.fi-ta-text:not(.fi-inline),
.fi-ta-icon:not(.fi-inline),
.fi-ta-color:not(.fi-inline),
.fi-ta-text-input:not(.fi-inline),
.fi-ta-cell:has(.fi-ta-actions),
.fi-ta-cell.fi-ta-selection-cell,
.fi-ta-cell:has(.fi-ta-record-checkbox) {
    padding-block: 0.625rem;
}

/* Etichette colorate (stato, urgente) nelle tabelle: almeno 14 px */
.fi-ta-ctn .fi-badge {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* Numero dei filtri attivi sul pulsante del filtro: grigio, non è un avviso */
.fi-ta-header-toolbar .fi-icon-btn-badge-ctn .fi-badge {
    --bg: var(--gray-200) !important;
    --text: var(--gray-800) !important;
    --dark-bg: var(--gray-700) !important;
    --dark-text: #FFFFFF !important;
    background-color: var(--gray-200);
    color: var(--gray-800);
}

html.dark .fi-ta-header-toolbar .fi-icon-btn-badge-ctn .fi-badge {
    background-color: var(--gray-700);
    color: #FFFFFF;
}

/* Filtri attivi sopra la tabella ("Stato: …"): grigi come il numero dei filtri, non sono avvisi */
.fi-ta-filter-indicators-badges-ctn .fi-badge {
    --bg: var(--gray-100) !important;
    --text: var(--gray-800) !important;
    --dark-bg: var(--gray-800) !important;
    --dark-text: var(--gray-100) !important;
    background-color: var(--gray-100);
    color: var(--gray-800);
    --tw-ring-color: var(--mg-pietra);
}

.fi-ta-filter-indicators-badges-ctn .fi-badge .fi-icon,
.fi-ta-filter-indicators-badges-ctn .fi-badge button {
    color: var(--gray-600);
}

html.dark .fi-ta-filter-indicators-badges-ctn .fi-badge {
    background-color: var(--gray-800);
    color: var(--gray-100);
}

/* Celle disegnate da noi (colonna Brand) */
.mg-ta-cella {
    padding: 0.625rem 0.75rem;
}

/* Azioni delle righe ("Modifica"): grigio scuro, rosso solo al passaggio */
.fi-ta-actions .fi-link.fi-color-primary,
.fi-ta-actions .fi-link.fi-color-primary .fi-icon {
    color: var(--gray-700);
}

.fi-ta-actions .fi-link.fi-color-primary:hover,
.fi-ta-actions .fi-link.fi-color-primary:hover .fi-icon {
    color: var(--mg-rosso);
}

/* Su tablet le azioni delle righe restano solo con l'icona (il testo resta per i lettori di schermo): così la
   tabella sta nello schermo dell'iPad in verticale. Si può anche toccare la riga intera. */
@media (max-width: 1279px) {
    .fi-ta-actions .fi-link {
        font-size: 0;
        gap: 0;
        padding: 0.375rem;
    }

    .fi-ta-actions .fi-link .fi-icon {
        width: 1.25rem;
        height: 1.25rem;
    }
}

html.dark .mg-brand-pallino {
    box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.45);
}

html.dark .fi-ta-actions .fi-link.fi-color-primary,
html.dark .fi-ta-actions .fi-link.fi-color-primary .fi-icon {
    color: var(--gray-300);
}

html.dark .fi-ta-actions .fi-link.fi-color-primary:hover,
html.dark .fi-ta-actions .fi-link.fi-color-primary:hover .fi-icon {
    color: #F0646C;
}

.fi-ta-text-item,
.fi-ta-text-item-label,
.fi-ta-cell {
    font-size: 0.875rem;
}

.fi-ta-row {
    transition: background-color 0.1s;
}

.fi-ta-row:hover {
    background-color: var(--gray-50);
}

html.dark .fi-ta-row:hover {
    background-color: rgb(255 255 255 / 0.03);
}

.fi-ta-table > tbody,
.fi-ta-table > thead,
.fi-ta-table tr {
    border-color: var(--mg-pietra);
}

html.dark .fi-ta-table > tbody,
html.dark .fi-ta-table > thead,
html.dark .fi-ta-table tr {
    border-color: rgb(255 255 255 / 0.07);
}

/* Segnaposto e testi secondari dei campi: contrasto almeno 4,5:1 */
.fi-input::placeholder,
.fi-select-input-placeholder,
.fi-ta-placeholder {
    color: var(--gray-500) !important;
    opacity: 1;
}

html.dark .fi-input::placeholder,
html.dark .fi-select-input-placeholder,
html.dark .fi-ta-placeholder {
    color: var(--gray-400) !important;
}

.fi-fo-field-wrp-helper-text,
.fi-fo-field-wrp-hint {
    color: var(--gray-600);
}

html.dark .fi-fo-field-wrp-helper-text,
html.dark .fi-fo-field-wrp-hint {
    color: var(--gray-400);
}

/* ---------- Pulsanti: il rosso solo per l'azione principale ---------- */

.fi-btn {
    border-radius: 6px;
    /* Niente ombra sotto i pulsanti; il filo (ring) dei pulsanti chiari resta */
    --tw-shadow: 0 0 #0000 !important;
    font-weight: 700;
}

/* Pulsanti pieni rossi: sempre lo stesso rosso Milano, testo bianco (6,2:1). Non i pulsanti a scelta
   (ToggleButtons, che sono <label>): lì il colore pieno vale solo per la scelta fatta. */
:is(a, button):not([aria-pressed]).fi-btn.fi-color-primary:not(.fi-outlined),
:is(a, button):not([aria-pressed]).fi-btn.fi-color-danger:not(.fi-outlined) {
    background-color: var(--mg-rosso) !important;
    color: #FFFFFF !important;
}

:is(a, button):not([aria-pressed]).fi-btn.fi-color-primary:not(.fi-outlined) .fi-icon,
:is(a, button):not([aria-pressed]).fi-btn.fi-color-danger:not(.fi-outlined) .fi-icon {
    color: #FFFFFF !important;
}

:is(a, button):not([aria-pressed]).fi-btn.fi-color-primary:not(.fi-outlined):hover,
:is(a, button):not([aria-pressed]).fi-btn.fi-color-danger:not(.fi-outlined):hover {
    background-color: var(--mg-rosso-scuro) !important;
}

/* Pulsanti a scelta (per esempio i permessi della persona: "Come da ruolo", "Sì", "No"): un filo attorno a
   ogni scelta; la scelta neutra fatta è grafite con testo bianco (Filament usa un grigio chiaro: 2,4:1) */
.fi-fo-toggle-buttons label.fi-btn {
    --tw-ring-shadow: inset 0 0 0 1px var(--mg-pietra);
    box-shadow: var(--tw-ring-shadow);
}

html.dark .fi-fo-toggle-buttons label.fi-btn {
    --tw-ring-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
}

input:checked + label.fi-btn:not(.fi-outlined):not(.fi-color),
.fi-btn:not(.fi-outlined):not(.fi-color)[aria-pressed=true],
input:checked + label.fi-btn.fi-color-gray:not(.fi-outlined),
.fi-btn.fi-color-gray:not(.fi-outlined)[aria-pressed=true] {
    background-color: var(--mg-grafite) !important;
    color: #FFFFFF !important;
}

html.dark input:checked + label.fi-btn:not(.fi-outlined):not(.fi-color),
html.dark .fi-btn:not(.fi-outlined):not(.fi-color)[aria-pressed=true],
html.dark input:checked + label.fi-btn.fi-color-gray:not(.fi-outlined),
html.dark .fi-btn.fi-color-gray:not(.fi-outlined)[aria-pressed=true] {
    background-color: var(--mg-pietra) !important;
    color: var(--mg-inchiostro) !important;
}

/* Collegamenti rossi nel testo: abbastanza scuri sul chiaro, più chiari sullo scuro */
.fi-link.fi-color-primary,
.fi-ta-link {
    color: var(--mg-rosso);
}

html.dark .fi-link.fi-color-primary {
    color: #F0646C;
}

/* ---------- Pagine semplici (accesso, password, secondo fattore) ---------- */

.fi-simple-layout {
    background-color: var(--mg-carta);
}

html.dark .fi-simple-layout {
    background-color: var(--mg-inchiostro);
}

.fi-simple-main {
    border: 1px solid var(--mg-pietra);
    border-top: 4px solid var(--mg-grafite);
}

html.dark .fi-simple-main {
    border-color: rgb(255 255 255 / 0.1);
    border-top-color: var(--mg-rosso);
}

.fi-simple-header .fi-logo {
    height: 5.5rem !important;
    width: auto;
    margin-bottom: 1.5rem;
}

.fi-simple-header-heading {
    font-size: 2.25rem;
}

.fi-simple-header-subheading {
    color: var(--gray-600);
    font-size: 0.9375rem;
}

html.dark .fi-simple-header-subheading {
    color: var(--gray-400);
}

/* ---------- Brand: pallino, nome e marchio (viste resources/views/pannello/brand-*.blade.php) ---------- */

.mg-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
}

.mg-brand-pallino {
    flex: none;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background-color: var(--brand, var(--mg-marchio));
    /* Filo sottile: il pallino si vede anche se il colore del brand è vicino al fondo */
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12);
}

.mg-brand-elenco {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
}

.mg-brand-scheda {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-inline-start: 4px solid var(--brand, var(--mg-marchio));
    border-radius: 0 8px 8px 0;
    background-color: #FFFFFF;
    color: var(--mg-grafite);
}

html.dark .mg-brand-scheda {
    background-color: var(--mg-grafite);
    color: var(--mg-pietra);
}

.mg-brand-marchio {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background-color: var(--brand, var(--mg-marchio));
}

.mg-brand-marchio img {
    height: 2rem;
    width: auto;
    max-width: 10rem;
}

.mg-brand-scheda-testo {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.mg-brand-scheda-nome {
    font-weight: 700;
    font-size: 1rem;
}

.mg-brand-scheda-settore {
    font-size: 0.875rem;
    color: var(--gray-600);
}

html.dark .mg-brand-scheda-settore {
    color: var(--gray-400);
}

@media (prefers-reduced-motion: reduce) {
    .fi-ta-row {
        transition: none;
    }
}

/* ---------- Agenda: vista settimana (moduli/Agenda/viste/pannello/settimana.blade.php) ---------- */

.mg-sett-barra {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
    justify-content: space-between;
}

.mg-sett-navigazione,
.mg-sett-filtri {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.mg-sett-titolo {
    margin-inline-start: 0.5rem;
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--mg-grafite);
}

html.dark .mg-sett-titolo {
    color: #FFFFFF;
}

.mg-sett-contenitore {
    overflow-x: auto;
    background-color: #FFFFFF;
    border: 1px solid var(--mg-pietra);
    border-radius: 10px;
}

html.dark .mg-sett-contenitore {
    background-color: var(--mg-grafite);
    border-color: rgb(255 255 255 / 0.1);
}

.mg-sett {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.mg-sett th,
.mg-sett td {
    vertical-align: top;
    text-align: start;
    padding: 0.5rem;
    border-bottom: 1px solid var(--mg-pietra);
    border-inline-start: 1px solid var(--mg-pietra);
}

html.dark .mg-sett th,
html.dark .mg-sett td {
    border-color: rgb(255 255 255 / 0.07);
}

.mg-sett thead th {
    padding-block: 0.625rem;
    font-weight: 600;
    color: var(--gray-600);
    background-color: var(--gray-50);
}

html.dark .mg-sett thead th {
    color: var(--gray-400);
    background-color: rgb(255 255 255 / 0.03);
}

.mg-sett .mg-sett-persona-th,
.mg-sett .mg-sett-persona {
    width: 10rem;
    border-inline-start: 0;
}

.mg-sett-persona {
    font-weight: 700;
    color: var(--mg-grafite);
}

html.dark .mg-sett-persona {
    color: var(--mg-pietra);
}

.mg-sett-giorno {
    text-transform: none;
}

.mg-sett-data {
    margin-inline-start: 0.25rem;
    font-weight: 400;
}

.mg-sett-dettaglio {
    display: block;
    margin-top: 0.125rem;
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--gray-500);
}

html.dark .mg-sett-dettaglio {
    color: var(--gray-400);
}

/* Fine settimana un po' più spento; oggi con un filo grafite in alto (niente rosso: non è un avviso) */
.mg-sett .mg-sett-festa {
    background-color: var(--gray-50);
}

html.dark .mg-sett .mg-sett-festa {
    background-color: rgb(255 255 255 / 0.02);
}

.mg-sett thead th.mg-sett-oggi {
    color: var(--mg-grafite);
    background-color: #FFFFFF;
    box-shadow: inset 0 3px 0 var(--mg-grafite), inset 1px 0 0 var(--mg-grafite), inset -1px 0 0 var(--mg-grafite);
}

html.dark .mg-sett thead th.mg-sett-oggi {
    color: #FFFFFF;
    background-color: rgb(255 255 255 / 0.04);
    box-shadow: inset 0 3px 0 var(--mg-pietra), inset 1px 0 0 var(--gray-400), inset -1px 0 0 var(--gray-400);
}

.mg-sett td.mg-sett-oggi {
    background-color: #FFFFFF;
    box-shadow: inset 1px 0 0 var(--mg-grafite), inset -1px 0 0 var(--mg-grafite);
}

html.dark .mg-sett td.mg-sett-oggi {
    background-color: rgb(255 255 255 / 0.04);
    box-shadow: inset 1px 0 0 var(--gray-400), inset -1px 0 0 var(--gray-400);
}

.mg-sett-oggi-etichetta {
    display: inline-block;
    margin-inline-start: 0.375rem;
    padding: 0 0.375rem;
    border-radius: 9999px;
    background-color: var(--mg-grafite);
    color: #FFFFFF;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.125rem;
}

html.dark .mg-sett-oggi-etichetta {
    background-color: var(--mg-pietra);
    color: var(--mg-inchiostro);
}

/* Una voce: striscia del colore del brand a sinistra, ora in grassetto, testo su due righe al massimo */
.mg-sett-voce {
    display: block;
    margin-bottom: 0.375rem;
    padding: 0.3125rem 0.5rem;
    border-inline-start: 4px solid var(--brand, var(--mg-marchio));
    border-radius: 0 6px 6px 0;
    background-color: var(--gray-100);
    color: var(--mg-grafite);
    text-decoration: none;
    overflow-wrap: break-word;
}

a.mg-sett-voce:hover {
    background-color: var(--mg-pietra);
}

html.dark .mg-sett-voce {
    background-color: rgb(255 255 255 / 0.06);
    color: var(--mg-pietra);
}

html.dark a.mg-sett-voce:hover {
    background-color: rgb(255 255 255 / 0.1);
}

.mg-sett-ora {
    display: block;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mg-sett-etichetta {
    display: block;
    font-size: 0.75rem;
    color: var(--gray-600);
}

html.dark .mg-sett-etichetta {
    color: var(--gray-400);
}

.mg-sett-testo {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Assenze: righe oblique grigie; impegni non visibili ("Occupato"): grigio tenue */
.mg-sett-assenza {
    border-inline-start-color: var(--gray-500);
    background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgb(0 0 0 / 0.045) 6px 12px);
}

html.dark .mg-sett-assenza {
    border-inline-start-color: var(--gray-400);
    background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgb(255 255 255 / 0.05) 6px 12px);
}

.mg-sett-occupato {
    border-inline-start-color: var(--gray-300);
    color: var(--gray-600);
}

html.dark .mg-sett-occupato {
    color: var(--gray-400);
}

.mg-sett-vuota {
    padding: 1rem !important;
    color: var(--gray-600);
}

/* ---------- Schede (tab) delle schede di dettaglio, per esempio "Storia e provenienza" / "Allegati" del lead ----------
   Filament colora la scheda attiva con il colore primario (rosso): qui grafite su pietra, il rosso resta alle azioni. */

.fi-tabs {
    --tw-ring-color: var(--mg-pietra);
}

.fi-tabs-item.fi-active {
    background-color: var(--mg-pietra) !important;
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-icon {
    color: var(--mg-grafite) !important;
    font-weight: 700;
}

.fi-tabs-item:not(.fi-active) .fi-tabs-item-label {
    color: var(--gray-600);
}

html.dark .fi-tabs-item.fi-active {
    background-color: rgb(255 255 255 / 0.1) !important;
}

html.dark .fi-tabs-item.fi-active .fi-tabs-item-label,
html.dark .fi-tabs-item.fi-active .fi-icon {
    color: #FFFFFF !important;
}

html.dark .fi-tabs-item:not(.fi-active) .fi-tabs-item-label {
    color: var(--gray-400);
}

/* Interruttori accesi (per esempio "Manda al cliente conferma e promemoria"): grafite, non rosso */
.fi-toggle.fi-toggle-on {
    background-color: var(--mg-grafite) !important;
}

html.dark .fi-toggle.fi-toggle-on {
    background-color: var(--gray-400) !important;
}

/* Sotto i 1280 px (iPad, portatili piccoli) il nome del brand nelle tabelle può andare a capo: così le azioni delle
   righe restano nello schermo */
@media (max-width: 1279px) {
    .fi-ta-cell .mg-brand {
        white-space: normal;
        align-items: flex-start;
    }

    .fi-ta-cell .mg-brand .mg-brand-pallino {
        margin-top: 0.25rem;
    }
}