/* MATEC HUB Design System
   Ultimo livello grafico condiviso da Office, smartphone e tablet.
   I valori tecnici "colorful" e "light" rappresentano entrambi il tema Chiaro. */

:root {
    --mh-font: var(--ds-font-family, "Inter", "Segoe UI", Arial, sans-serif);
    --mh-text-xs: .75rem;
    --mh-text-sm: .875rem;
    --mh-text-md: 1rem;
    --mh-text-lg: 1.25rem;
    --mh-title: clamp(2rem, 3.2vw, 3.5rem);
    --mh-space-1: .375rem;
    --mh-space-2: .625rem;
    --mh-space-3: 1rem;
    --mh-space-4: 1.5rem;
    --mh-space-5: 2rem;
    --mh-radius-sm: .65rem;
    --mh-radius-md: 1rem;
    --mh-radius-lg: 1.45rem;
    --mh-control-h: 3.25rem;
    --mh-border-w: 1px;
    --mh-success: #137333;
    --mh-success-bg: #dff4e7;
    --mh-danger: #c5221f;
    --mh-danger-bg: #fff1f1;
    --mh-warning: #8a4b00;
    --mh-warning-bg: #fff2cc;
    --mh-export: #8a4b00;
    --mh-export-bg: #fff2cc;
    --mh-info: #185abd;
    --mh-info-bg: #e7f0ff;
    --mh-purple: #6d28d9;
    --mh-purple-bg: #f0e8ff;
}

/* Final responsive actions: employee timesheet on a phone. */
@media (max-width: 760px) {
    html[data-theme] body .timesheet-save-actions.timesheet-command-grid {
        display: grid !important;
        grid-template-columns: 3.25rem minmax(0, .9fr) minmax(0, 1.15fr) !important;
        grid-template-areas: "tools copy send" !important;
        align-items: stretch !important;
        gap: .5rem !important;
        width: 100% !important;
    }

    html[data-theme] body .timesheet-save-actions.timesheet-command-grid > .timesheet-secondary-actions {
        grid-area: tools !important;
        display: grid !important;
        grid-template-rows: 1fr 1fr !important;
        gap: .5rem !important;
        width: 3.25rem !important;
        min-width: 3.25rem !important;
        min-height: 7rem !important;
    }

    html[data-theme] body .timesheet-save-actions.timesheet-command-grid > .timesheet-secondary-actions > button {
        width: 3.25rem !important;
        min-width: 3.25rem !important;
        min-height: 0 !important;
        height: 100% !important;
        margin: 0 !important;
        padding: .35rem !important;
    }

    html[data-theme] body .timesheet-save-actions.timesheet-command-grid > .quick-copy-submit {
        grid-area: copy !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 7rem !important;
        height: 100% !important;
        margin: 0 !important;
        padding: .65rem !important;
        background: #fef3c7 !important;
        background-image: none !important;
        border: 2px solid #ca8a04 !important;
        color: #854d0e !important;
        -webkit-text-fill-color: #854d0e !important;
        opacity: 1 !important;
    }

    html[data-theme] body .timesheet-save-actions.timesheet-command-grid > .quick-copy-submit:disabled,
    html[data-theme] body .timesheet-save-actions.timesheet-command-grid > .quick-copy-submit.is-unavailable {
        background: #e5e7eb !important;
        border-color: #9ca3af !important;
        color: #6b7280 !important;
        -webkit-text-fill-color: #6b7280 !important;
        opacity: 1 !important;
    }

    html[data-theme] body .timesheet-save-actions.timesheet-command-grid > .submit-prominent {
        grid-area: send !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 7rem !important;
        height: 100% !important;
        margin: 0 !important;
        padding: .65rem !important;
        background: #2563eb !important;
        background-image: none !important;
        border: 2px solid #1d4ed8 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        opacity: 1 !important;
    }
}

/* Final high-contrast tablet controls. */
html[data-theme] body .mode-actions > button.login-main {
    min-height: clamp(5.5rem, 12vh, 7.5rem) !important;
    background: #15803d !important;
    background-image: none !important;
    border: 3px solid #166534 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}

html[data-theme] body .mode-actions > button.punch-small {
    min-height: clamp(5.5rem, 12vh, 7.5rem) !important;
    background: #0284c7 !important;
    background-image: none !important;
    border: 3px solid #0369a1 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}

html[data-theme] body button.punch-window-direction.in {
    background: #16a34a !important;
    background-image: none !important;
    border: 4px solid #15803d !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}

html[data-theme] body button.punch-window-direction.out {
    background: #dc2626 !important;
    background-image: none !important;
    border: 4px solid #b91c1c !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}

html[data-theme] body button.punch-window-direction :is(strong, small) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html[data-theme] body button.punch-window-direction.is-focused {
    outline: 7px solid #facc15 !important;
    outline-offset: 5px !important;
    box-shadow: 0 0 0 12px rgba(250, 204, 21, .28) !important;
}

html:is([data-theme="colorful"],[data-theme="light"]) {
    --mh-page: var(--ds-color-page, #edf5fb);
    --mh-page-accent: #dff4fa;
    --mh-surface: var(--ds-color-surface, #fff);
    --mh-surface-soft: var(--ds-color-surface-soft, #f4f8fc);
    --mh-text: var(--ds-color-text, #172033);
    --mh-muted: var(--ds-color-text-muted, #5e7088);
    --mh-border: var(--ds-color-border, #bfd0e2);
    --mh-border-strong: var(--ds-color-border-strong, #91aac5);
    --mh-primary: var(--ds-color-primary, #174a84);
    --mh-primary-hover: #123b6b;
    --mh-primary-text: #fff;
    --mh-shadow: 0 10px 28px rgba(38, 67, 99, .10);
    color-scheme: light;
}

html[data-theme="dark"] {
    --ds-color-page: #021024;
    --mh-page: #021024;
    --mh-page-accent: #0b1b2e;
    --mh-surface: var(--ds-color-surface, #0f2035);
    --mh-surface-soft: var(--ds-color-surface-soft, #132943);
    --mh-text: var(--ds-color-text, #f3f7fc);
    --mh-muted: var(--ds-color-text-muted, #b3c2d4);
    --mh-border: var(--ds-color-border, #3b5673);
    --mh-border-strong: var(--ds-color-border-strong, #67809b);
    --mh-primary: var(--ds-color-primary, #62b6ff);
    --mh-primary-hover: #8bc9ff;
    --mh-primary-text: #07111f;
    --mh-success: #71d595;
    --mh-success-bg: #123d2a;
    --mh-danger: #ff8b8b;
    --mh-danger-bg: #4c1d24;
    --mh-warning: #ffd166;
    --mh-warning-bg: #493617;
    --mh-export: #ffd166;
    --mh-export-bg: #493617;
    --mh-info: #88c5ff;
    --mh-info-bg: #153b63;
    --mh-purple: #c4a2ff;
    --mh-purple-bg: #38245f;
    --mh-shadow: 0 12px 34px rgba(0, 0, 0, .28);
    color-scheme: dark;
}

/*
   Contratto visivo delle pagine.
   Queste quattro classi vanno applicate direttamente agli elementi reali:
   nessuna pagina deve ridefinire sfondo, titolo o sottotitolo localmente.
*/
html[data-theme] .ds-page-shell {
    min-height: 100%;
    color: var(--mh-text) !important;
    /* Lo sfondo appartiene al contenitore Office, non alla singola pagina. */
    background: transparent !important;
    font-family: var(--mh-font) !important;
}

html[data-theme] .ds-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(1rem, 2.5vw, 2rem);
}

html[data-theme] .ds-page-title {
    margin: 0 !important;
    color: var(--mh-text) !important;
    font-family: var(--mh-font) !important;
    font-size: var(--mh-title) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em !important;
    text-transform: uppercase !important;
}

html[data-theme] .ds-page-subtitle {
    max-width: 44rem !important;
    margin: .45rem 0 0 !important;
    color: var(--mh-muted) !important;
    font-family: var(--mh-font) !important;
    font-size: clamp(.95rem, 1.3vw, 1.15rem) !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

@media (max-width: 720px) {
    html[data-theme] .ds-page-header {
        flex-direction: column;
        align-items: stretch;
    }
}

html[data-theme] body {
    margin: 0;
    font-family: var(--mh-font);
    font-size: var(--mh-text-md);
    line-height: 1.45;
    color: var(--mh-text);
    /* Unico proprietario dello sfondo per ufficio, smartphone e tablet. */
    background-color: var(--mh-page-background) !important;
    background-image: var(--mh-page-background-image, none) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

/*
   Standard pagina MATEC HUB
   Riferimento visivo: "Clienti e commesse".
   Sfondo, titolo e descrizione sono definiti esclusivamente qui: le pagine
   possono gestire disposizione e azioni, ma non ridefinire questi valori.
*/
html:is([data-theme="colorful"],[data-theme="light"]) {
    --mh-page-background: #eaf6ff;
    --mh-page-background-image: linear-gradient(135deg, #d9efff 0%, #eaf6ff 48%, #f8fcff 100%);
}

html[data-theme="dark"] {
    --mh-page-background: #021024;
    --mh-page-background-image: none;
}

html[data-theme] .ds-workspace {
    background: transparent !important;
}

html[data-theme] .ds-app__main {
    color: var(--mh-text) !important;
    background: transparent !important;
    font-family: var(--mh-font) !important;
}

html[data-theme] .ds-app__main :is(.ds-page,.ds-page__content) {
    background: transparent !important;
}

/* Ufficio e area dipendente usano lo stesso proprietario dello sfondo.
   Le pagine interne mantengono soltanto superfici e contenuti. */
html[data-theme] .kiosk-layout {
    background: transparent !important;
}

/* Il contenuto diretto di entrambi i layout non puo introdurre un secondo
   fondale: conserva solo le superfici dei pannelli interni. */
html[data-theme] .kiosk-layout > *,
html[data-theme] .ds-app__main > * {
    background: transparent !important;
    background-image: none !important;
}

/* La shell PWA non possiede un fondale autonomo: smartphone e tablet
   visualizzano il medesimo sfondo determinato dal tema alla radice. */
html[data-theme] .mobile-app {
    background: transparent !important;
    background-image: none !important;
}

/* La shell dell'ufficio non deve coprire lo sfondo globale del tema. */
html[data-theme] .ds-app {
    background: transparent !important;
    background-image: none !important;
}

html[data-theme] :is(
    .install-page,.dashboard-page,.equipment-page,.employee-messages,
    .profile-page,.employee-request-page,.calendar-page,.privacy-page,
    .mobile-settings-page,.analytics-page,.audit-page,.quality-page,
    .device-page,.devices-page,.employees-page,.office-equipment,.oj-page,
    .office-jobs-page,.messages-page,.month-close-page,.notifications-page,
    .payroll-page,.requests-page,.vacations-page,.archive-page,
    .office-timesheets-page,.users-page,.attendance-page,.punches-page,
    .worklog-page,.office-page,.page
) {
    color: var(--mh-text) !important;
    background: transparent !important;
    font-family: var(--mh-font) !important;
}

html[data-theme] .ds-app__main .ds-page-shell {
    background-color: transparent !important;
    background-image: none !important;
}

/* Le sezioni del design system non devono imporre il vecchio pannello scuro.
   La superficie segue il tema e rimane identica in tutte le pagine che usano
   DsSection, compresa la pagina Impostazioni. */
html[data-theme] :is(.ds-section,.settings-footer) {
    color: var(--mh-text) !important;
    background: var(--mh-surface) !important;
    border-color: var(--mh-border) !important;
    box-shadow: var(--mh-shadow) !important;
}

html[data-theme] .ds-section__header {
    border-color: var(--mh-border) !important;
}

html[data-theme] .ds-section :is(h2,strong,.setting-field__label) {
    color: var(--mh-text) !important;
}

html[data-theme] .ds-section :is(.ds-section__description,.setting-field__help,.switch-card__copy span) {
    color: var(--mh-muted) !important;
}

html[data-theme] :is(
    .ds-page-header,.oj-header,.dashboard-header,.equipment-header,
    .mobile-page-header,.analytics-header,.quality-header,.page-header,
    .topbar,.office-equipment > header,.audit-page > header,
    .calendar-page > header,.messages-page > header,.notifications-page > header,
    .requests-page > header,.archive-page > header,.users-page > header,
    .device-page > header,.office-timesheets-page > header,.worklog-page > header
) h1,
html[data-theme] :is(.page-title,.office-page-title,.employee-page-title) h1 {
    margin: 0 !important;
    color: var(--mh-text) !important;
    font-family: var(--mh-font) !important;
    font-size: var(--mh-title) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em !important;
    text-transform: uppercase !important;
}

html[data-theme] :is(
    .ds-page-header,.oj-header,.dashboard-header,.equipment-header,
    .mobile-page-header,.analytics-header,.quality-header,.page-header,
    .topbar,.office-equipment > header,.audit-page > header,
    .calendar-page > header,.messages-page > header,.notifications-page > header,
    .requests-page > header,.archive-page > header,.users-page > header,
    .device-page > header,.office-timesheets-page > header,.worklog-page > header
) p,
html[data-theme] :is(.page-title,.office-page-title,.employee-page-title) p {
    max-width: 44rem !important;
    margin: .45rem 0 0 !important;
    color: var(--mh-muted) !important;
    font-family: var(--mh-font) !important;
    font-size: clamp(.95rem,1.3vw,1.15rem) !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after { box-sizing: border-box; }
html[data-theme] img, html[data-theme] svg, html[data-theme] video { max-width: 100%; }

/* Tipografia condivisa */
html[data-theme] :is(.ds-page-title,h1.page-title,h1.office-page-title,h1.employee-page-title) {
    margin: 0;
    color: var(--mh-text);
    font-family: var(--mh-font);
    font-size: var(--mh-title);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.035em;
    text-transform: uppercase;
}
html[data-theme] :is(.ds-page-subtitle,.page-subtitle,.office-page-subtitle,.employee-page-subtitle) {
    margin: .45rem 0 0;
    color: var(--mh-muted);
    font-family: var(--mh-font);
    font-size: clamp(.95rem, 1.3vw, 1.15rem);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none !important;
}
html[data-theme] :is(h1,h2,h3,h4,strong,label) { color: var(--mh-text); }
html[data-theme] :is(p,small,.help,.hint,.muted) { color: var(--mh-muted); }

/* Superfici, pannelli, elenchi e popup */
html[data-theme] :is(.ds-card,.card,.panel,.surface,.modal-content,.dialog,.popup,.sheet,.employee-quality,.oj-customer-item) {
    border: var(--mh-border-w) solid var(--mh-border);
    border-radius: var(--mh-radius-lg);
    background: var(--mh-surface);
    color: var(--mh-text);
    box-shadow: var(--mh-shadow);
}
html[data-theme] :is(.modal-backdrop,.dialog-backdrop,.popup-backdrop) { backdrop-filter: blur(5px); }
html[data-theme] :is(.oj-modal-backdrop,.tablet-modal-backdrop,.attachment-backdrop,.modal-backdrop,.dialog-backdrop,.popup-backdrop) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
    display: grid !important;
    place-items: center !important;
    padding: clamp(.75rem,3vw,2rem) !important;
    overflow: auto !important;
    background: rgba(5,15,28,.62) !important;
}
html[data-theme] :is(.oj-modal,.tablet-modal,.attachment-modal,.modal-content,.modal,.dialog,.popup) {
    width: min(100%, 58rem) !important;
    max-height: calc(100dvh - 2rem) !important;
    margin: auto !important;
    overflow: auto !important;
    border: 1px solid var(--mh-border) !important;
    border-radius: var(--mh-radius-lg) !important;
    background: var(--mh-surface) !important;
    color: var(--mh-text) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.30) !important;
}
html[data-theme] :is(.modal-actions,.dialog-actions,.form-actions,.actions,.toolbar,.header-actions,.page-actions) {
    display: flex;
    align-items: center;
    gap: var(--mh-space-2);
    flex-wrap: wrap;
}

/* Interruttori: una sola geometria e contrasto in ogni pagina. */
html[data-theme] :is(.ds-toggle,input.switch,input.toggle,input[type="checkbox"].toggle-switch) {
    appearance: none !important;
    width: 3rem !important;
    min-width: 3rem !important;
    height: 1.7rem !important;
    min-height: 1.7rem !important;
    padding: 0 !important;
    border: 1px solid var(--mh-border-strong) !important;
    border-radius: 999px !important;
    background: #52637a !important;
    vertical-align: middle;
}
html[data-theme] :is(.ds-toggle,input.switch,input.toggle,input[type="checkbox"].toggle-switch):checked {
    border-color: var(--mh-primary) !important;
    background: var(--mh-primary) !important;
}

/* Campi: stessa altezza, bordo e focus ovunque */
html[data-theme] :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.ds-input,.ds-select) {
    min-width: 0;
    min-height: var(--mh-control-h);
    border: var(--mh-border-w) solid var(--mh-border);
    border-radius: var(--mh-radius-md);
    background: var(--mh-surface);
    color: var(--mh-text);
    font: inherit;
}
html[data-theme] textarea { min-height: 6rem; resize: vertical; }
html[data-theme] :is(input,select,textarea,button,a):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mh-info) 35%, transparent);
    outline-offset: 2px;
}
html[data-theme] ::placeholder { color: var(--mh-muted); opacity: .9; }

/* Pulsanti: il bordo è obbligatorio e i significati sono semantici. */
html[data-theme] :is(button,.ds-btn,.button):not(.switch):not(.toggle):not(.toggle-switch) {
    min-height: 2.75rem;
    max-width: 100%;
    border: var(--mh-border-w) solid var(--mh-border-strong);
    border-radius: var(--mh-radius-md);
    font-family: var(--mh-font);
    font-weight: 800;
    line-height: 1.15;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
html[data-theme] :is(button,.ds-btn,.button):not(.switch):not(.toggle):not(.toggle-switch):active { transform: translateY(1px); }
html[data-theme] :is(button,.ds-btn,.button):disabled { opacity: .58; cursor: not-allowed; }
html[data-theme] :is(.primary,.ds-btn--primary,.btn-primary,.action-primary,.submit-button,.save-button) {
    border-color: var(--mh-primary) !important;
    background: var(--mh-primary) !important;
    color: var(--mh-primary-text) !important;
}
html[data-theme] :is(.secondary,.ds-btn--secondary,.btn-secondary,.action-secondary) {
    border-color: var(--mh-border-strong) !important;
    background: var(--mh-surface-soft) !important;
    color: var(--mh-text) !important;
}
html[data-theme] :is(button,a)[class*="delete"],
html[data-theme] :is(button,a)[class*="danger"],
html[data-theme] :is(.ds-btn--danger,.btn-danger) {
    border-color: var(--mh-danger) !important;
    background: var(--mh-danger-bg) !important;
    color: var(--mh-danger) !important;
}
html[data-theme] :is(button,a)[class*="approve"],
html[data-theme] :is(button,a)[class*="success"],
html[data-theme] :is(.ds-btn--success,.btn-success) {
    border-color: var(--mh-success) !important;
    background: var(--mh-success-bg) !important;
    color: var(--mh-success) !important;
}

/* Badge e stati: testo e bordo condividono il colore, lo sfondo resta leggibile. */
html[data-theme] :is(.badge,.pill,.chip,.tag,.status,.status-badge,.status-chip,.ds-badge,.quality-count-badge,.anomaly-count) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-height: 1.75rem;
    padding: .25rem .7rem;
    border: 1px solid currentColor;
    border-radius: .65rem;
    font-size: var(--mh-text-xs);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}
html[data-theme] :is(.badge,.pill,.chip,.tag,.status,.status-badge,.status-chip,.ds-badge)[class*="active"],
html[data-theme] :is(.badge,.pill,.chip,.tag,.status,.status-badge,.status-chip,.ds-badge)[class*="approved"],
html[data-theme] :is(.badge,.pill,.chip,.tag,.status,.status-badge,.status-chip,.ds-badge)[class*="open"],
html[data-theme] :is(.badge,.pill,.chip,.tag,.status,.status-badge,.status-chip,.ds-badge)[class*="success"] { color: var(--mh-success); background: var(--mh-success-bg); }
html[data-theme] :is(.badge,.pill,.chip,.tag,.status,.status-badge,.status-chip,.ds-badge)[class*="danger"],
html[data-theme] :is(.badge,.pill,.chip,.tag,.status,.status-badge,.status-chip,.ds-badge)[class*="error"],
html[data-theme] :is(.badge,.pill,.chip,.tag,.status,.status-badge,.status-chip,.ds-badge)[class*="rejected"] { color: var(--mh-danger); background: var(--mh-danger-bg); }
html[data-theme] :is(.badge,.pill,.chip,.tag,.status,.status-badge,.status-chip,.ds-badge)[class*="warning"],
html[data-theme] :is(.badge,.pill,.chip,.tag,.status,.status-badge,.status-chip,.ds-badge)[class*="pending"],
html[data-theme] :is(.badge,.pill,.chip,.tag,.status,.status-badge,.status-chip,.ds-badge)[class*="draft"] { color: var(--mh-warning); background: var(--mh-warning-bg); }
html[data-theme] :is(.badge,.pill,.chip,.tag,.status,.status-badge,.status-chip,.ds-badge)[class*="info"] { color: var(--mh-info); background: var(--mh-info-bg); }

/*
   Contatori numerici.
   Non esprimono uno stato, quindi non devono cambiare colore da una pagina
   all'altra: ufficio, smartphone e tablet condividono questo unico stile.
*/
html[data-theme] :is(
    .message-count,
    .notification-count,
    .recipient-count,
    .quality-count-badge,
    .anomaly-count,
    .count-badge,
    .counter-badge,
    .badge-count
) {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .3rem !important;
    min-width: 1.6rem !important;
    min-height: 1.6rem !important;
    height: auto !important;
    padding: .25rem .55rem !important;
    border: 1px solid var(--mh-info) !important;
    border-radius: .65rem !important;
    background: var(--mh-info-bg) !important;
    color: var(--mh-info) !important;
    font-family: var(--mh-font) !important;
    font-size: var(--mh-text-xs) !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

/* Struttura comune degli elenchi espandibili. */
html[data-theme] :is(.ds-entity-list,.employee-list,.oj-customer-list,.quality-list,.punch-list) {
    display: grid !important;
    gap: .875rem !important;
    background: transparent !important;
}
html[data-theme] :is(.ds-entity-card,.employee-card,.oj-customer-item,.employee-quality,.punch-day) {
    overflow: hidden !important;
    border: 1px solid var(--mh-border) !important;
    border-radius: var(--mh-radius-lg) !important;
    background: var(--mh-surface) !important;
    box-shadow: var(--mh-shadow) !important;
}
html[data-theme] :is(.ds-entity-summary,.employee-main,.oj-customer-row,.quality-summary,.punch-summary) {
    min-width: 0 !important;
    min-height: 4.4rem !important;
    padding: .9rem 1.2rem !important;
    border: 0 !important;
    background: var(--mh-surface) !important;
    color: var(--mh-text) !important;
}
html[data-theme] :is(.ds-entity-details,.employee-expanded,.oj-jobs-area,.quality-details,.punch-details) {
    border-top: 1px solid var(--mh-border) !important;
    background: var(--mh-surface) !important;
}
html[data-theme] :is(.ds-entity-chevron,.expand-indicator,.oj-chevron) {
    color: var(--mh-primary) !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
}

/*
 * Elenco anagrafiche canonico.
 * Clienti, Controllo dati e Storico timbrature condividono volutamente
 * lo stesso contenitore, la stessa riga neutra e lo stesso indicatore.
 * Queste regole hanno priorita sulle vecchie personalizzazioni di pagina.
 */
html[data-theme] :is(.day-list,.oj-customer-list,.quality-list).ds-entity-list {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: .875rem !important;
    background: transparent !important;
}

html[data-theme] :is(.day-card,.oj-customer-item,.employee-quality).ds-entity-card {
    width: 100% !important;
    border: 1px solid var(--mh-border) !important;
    border-radius: var(--mh-radius-lg) !important;
    background: var(--mh-surface) !important;
    box-shadow: var(--mh-shadow) !important;
}

html[data-theme] :is(.day-summary,.oj-customer-row,.employee-quality-summary).ds-entity-summary {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 4.4rem !important;
    padding: .9rem 1.2rem !important;
    gap: .75rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--mh-surface) !important;
    color: var(--mh-text) !important;
    box-shadow: none !important;
}

html[data-theme] :is(.day-summary,.oj-customer-row,.employee-quality-summary).ds-entity-summary:hover,
html[data-theme] :is(.day-summary,.oj-customer-row,.employee-quality-summary).ds-entity-summary:focus-within {
    background: var(--mh-surface-soft) !important;
}

html[data-theme] :is(.day-summary,.oj-customer-row,.employee-quality-summary) .ds-entity-chevron {
    width: 1.25rem !important;
    flex: 0 0 1.25rem !important;
    color: var(--mh-primary) !important;
    text-align: center !important;
}

html[data-theme] :is(.day-summary,.oj-customer-row,.employee-quality-summary) .ds-entity-title {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--mh-text) !important;
    font-family: var(--mh-font) !important;
    font-size: var(--mh-text-md) !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    box-shadow: none !important;
}

/* Il nome nello Storico timbrature non deve sembrare un campo di testo. */
html[data-theme] .day-summary .employee-expand,
html[data-theme] .day-summary .employee-expand:hover,
html[data-theme] .day-summary .employee-expand:focus,
html[data-theme] .day-summary .employee-expand:focus-visible {
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--mh-text) !important;
    box-shadow: none !important;
}

html[data-theme] :is(.oj-jobs-area,.employee-quality-details,.day-details).ds-entity-details {
    border-top: 1px solid var(--mh-border) !important;
    background: var(--mh-surface) !important;
}

@media (max-width: 980px) {
    html[data-theme] :is(.day-summary,.oj-customer-row,.employee-quality-summary).ds-entity-summary {
        padding: .8rem .9rem !important;
    }
}

/* Tabelle e righe dati */
html[data-theme] .ds-app__main table { width: 100%; border-spacing: 0; color: var(--mh-text); }
html[data-theme] .ds-app__main :is(th,td) { padding: .8rem .9rem; border-bottom: 1px solid var(--mh-border); vertical-align: middle; }
html[data-theme] .ds-app__main th { background: var(--mh-surface-soft); color: var(--mh-muted); font-size: var(--mh-text-xs); font-weight: 900; text-transform: uppercase; letter-spacing: .025em; }
html[data-theme] .ds-app__main tbody tr { background: var(--mh-surface); }
html[data-theme] .ds-app__main tbody tr:hover { background: color-mix(in srgb, var(--mh-info-bg) 55%, var(--mh-surface)); }
html[data-theme] :is(.table-wrap,.table-wrapper,.table-container,.grid-scroll,.calendar-grid-wrap) { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }

/* Scrollbar comune */
html[data-theme] * { scrollbar-width: thin; scrollbar-color: var(--mh-border-strong) transparent; }
html[data-theme] *::-webkit-scrollbar { width: 9px; height: 9px; }
html[data-theme] *::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: var(--mh-border-strong); background-clip: padding-box; }

/* Responsività: nessun controllo può spingere il contenuto fuori pagina. */
html[data-theme] :is(.ds-app__main,.mobile-app,.timeclock-page,.employee-page,.worklog-page) { min-width: 0; max-width: 100%; overflow-x: clip; }
html[data-theme] :is(.ds-app__main,.mobile-app,.timeclock-page,.employee-page,.worklog-page) > * { min-width: 0; max-width: 100%; }
html[data-theme] :is(.row,.form-row,.filters,.filter-row,.controls,.action-row,.entity-actions) { min-width: 0; max-width: 100%; }

@media (max-width: 980px) {
    html[data-theme] :is(.ds-app__main,.office-page,.employee-page,.mobile-app,.timeclock-page,.worklog-page) { padding-inline: clamp(.75rem, 2.4vw, 1.25rem); }
    html[data-theme] :is(.filters,.filter-row,.form-row,.controls,.header-actions,.page-actions,.entity-actions) { flex-wrap: wrap !important; }
    html[data-theme] :is(.filters,.filter-row,.form-row) > * { min-width: min(15rem,100%); flex: 1 1 15rem; }
    html[data-theme] :is(.entity-actions,.action-row) > * { flex: 0 1 auto; }
    html[data-theme] :is(.oj-customer-row,.employee-main,.quality-summary,.punch-summary) {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: .75rem !important;
    }
    html[data-theme] :is(.oj-row-actions,.oj-job-actions,.actions,.entity-actions) {
        margin-left: auto !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        gap: .5rem !important;
    }
    html[data-theme] :is(.oj-job-row,.timesheet-row,.distribution-row) {
        min-width: 0 !important;
        grid-template-columns: minmax(7rem,1fr) minmax(10rem,2fr) minmax(9rem,1.2fr) !important;
    }
}

@media (max-width: 620px) {
    :root { --mh-control-h: 3rem; --mh-radius-lg: 1.15rem; }
    html[data-theme] :is(.ds-page-title,h1.page-title,h1.office-page-title,h1.employee-page-title) { font-size: clamp(1.8rem, 10vw, 2.55rem); }
    html[data-theme] :is(.modal-actions,.dialog-actions,.form-actions,.page-actions) > :is(button,a,.ds-btn) { flex: 1 1 9rem; }
    html[data-theme] .ds-app__main :is(th,td) { padding: .65rem .7rem; }
    html[data-theme] :is(.oj-row-actions,.oj-job-actions,.actions,.entity-actions) {
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: flex-start !important;
    }
    html[data-theme] :is(.oj-job-row,.timesheet-row,.distribution-row) {
        display: flex !important;
        flex-wrap: wrap !important;
    }
}

/* Authoritative final overrides: keep these rules at the end of the cascade. */
@media (max-width: 760px) {
    html[data-theme] body .timesheet-page .timesheet-save-actions.timesheet-command-grid,
    html[data-theme] body .timesheet-save-actions.timesheet-command-grid {
        display: grid !important;
        grid-template-columns: 3.25rem minmax(0, .9fr) minmax(0, 1.15fr) !important;
        grid-template-rows: 7rem !important;
        grid-template-areas: "tools copy send" !important;
        align-items: stretch !important;
        gap: .5rem !important;
        width: 100% !important;
    }

    html[data-theme] body .timesheet-save-actions.timesheet-command-grid > .timesheet-secondary-actions {
        grid-area: tools !important;
        display: grid !important;
        grid-template-rows: 1fr 1fr !important;
        gap: .5rem !important;
        width: 3.25rem !important;
        min-width: 3.25rem !important;
        height: 7rem !important;
    }

    html[data-theme] body .timesheet-save-actions.timesheet-command-grid > .timesheet-secondary-actions > button {
        width: 3.25rem !important;
        min-width: 3.25rem !important;
        min-height: 0 !important;
        height: 100% !important;
        margin: 0 !important;
        padding: .3rem !important;
    }

    html[data-theme] body .timesheet-save-actions.timesheet-command-grid > button.quick-copy-submit {
        grid-area: copy !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 7rem !important;
        height: 7rem !important;
        margin: 0 !important;
        padding: .55rem !important;
        background: #fef3c7 !important;
        background-image: none !important;
        border: 2px solid #ca8a04 !important;
        color: #854d0e !important;
        -webkit-text-fill-color: #854d0e !important;
        opacity: 1 !important;
    }

    html[data-theme] body .timesheet-save-actions.timesheet-command-grid > button.quick-copy-submit:disabled,
    html[data-theme] body .timesheet-save-actions.timesheet-command-grid > button.quick-copy-submit.is-unavailable {
        background: #e5e7eb !important;
        border-color: #9ca3af !important;
        color: #6b7280 !important;
        -webkit-text-fill-color: #6b7280 !important;
        opacity: 1 !important;
    }

    html[data-theme] body .timesheet-save-actions.timesheet-command-grid > button.submit-prominent {
        grid-area: send !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 7rem !important;
        height: 7rem !important;
        margin: 0 !important;
        padding: .55rem !important;
        background: #2563eb !important;
        background-image: none !important;
        border: 2px solid #1d4ed8 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        opacity: 1 !important;
    }
}

html[data-theme] body .timeclock-page .mode-actions > button.login-main,
html[data-theme] body .mode-actions > button.login-main {
    min-height: clamp(5.5rem, 12vh, 7.5rem) !important;
    background: #15803d !important;
    background-image: none !important;
    border: 3px solid #166534 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}

html[data-theme] body .timeclock-page .mode-actions > button.punch-small,
html[data-theme] body .mode-actions > button.punch-small {
    min-height: clamp(5.5rem, 12vh, 7.5rem) !important;
    background: #0284c7 !important;
    background-image: none !important;
    border: 3px solid #0369a1 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}

html[data-theme] body .timeclock-page button.punch-window-direction.in,
html[data-theme] body button.punch-window-direction.in {
    background: #16a34a !important;
    background-image: none !important;
    border: 4px solid #15803d !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}

html[data-theme] body .timeclock-page button.punch-window-direction.out,
html[data-theme] body button.punch-window-direction.out {
    background: #dc2626 !important;
    background-image: none !important;
    border: 4px solid #b91c1c !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}

html[data-theme] body .timeclock-page button.punch-window-direction :is(strong, small),
html[data-theme] body button.punch-window-direction :is(strong, small) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html[data-theme] body .timeclock-page button.punch-window-direction.is-focused,
html[data-theme] body button.punch-window-direction.is-focused {
    outline: 7px solid #facc15 !important;
    outline-offset: 5px !important;
    box-shadow: 0 0 0 12px rgba(250, 204, 21, .28) !important;
}

/* ========================================================================== 
   Contratto definitivo dei pulsanti MATEC HUB
   Un'unica regola governa ufficio, smartphone e tablet. Gli stili locali
   possono disporre i comandi, ma non cambiarne tipografia o semantica.
   ========================================================================== */
html[data-theme] :is(
    button,
    .ds-btn,
    .button,
    input[type="button"],
    input[type="submit"]
):not(.switch):not(.toggle):not(.toggle-switch):not(.ds-toggle) {
    --mh-button-ink: var(--mh-text);
    --mh-button-fill: var(--mh-surface-soft);
    box-sizing: border-box !important;
    max-width: 100%;
    border: 1px solid var(--mh-button-ink) !important;
    border-radius: var(--mh-radius-md) !important;
    background: var(--mh-button-fill) !important;
    color: var(--mh-button-ink) !important;
    font-family: var(--mh-font) !important;
    font-size: clamp(.9rem, .84rem + .16vw, 1rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

html[data-theme] :is(
    button,
    .ds-btn,
    .button,
    input[type="button"],
    input[type="submit"]
):not(.switch):not(.toggle):not(.toggle-switch):not(.ds-toggle):not(:disabled):hover {
    background: color-mix(in srgb, var(--mh-button-ink) 14%, var(--mh-surface)) !important;
    color: var(--mh-button-ink) !important;
}

/* Azione principale: salva, conferma, applica, invia e valida. */
html[data-theme] :is(
    .primary-action,
    .primary,
    .ds-btn--primary,
    .save,
    .save-button,
    .save-adjustment,
    .employee-save,
    .send-button,
    .submit-button,
    .confirm-button,
    .apply-button,
    .copy-confirm,
    .job-picker-confirm,
    .approve,
    .fulfill,
    .revision-request-button
) {
    --mh-button-ink: var(--mh-primary) !important;
    --mh-button-fill: var(--mh-info-bg) !important;
    border-color: var(--mh-primary) !important;
    background: var(--mh-info-bg) !important;
    color: var(--mh-primary) !important;
}

/* Modifica e gestione: viola, senza cambiare forma o tipografia. */
html[data-theme] :is(
    .edit,
    .edit-action,
    .entity-action--edit,
    .modify-button,
    .correct-button,
    .manage-button
) {
    --mh-button-ink: var(--mh-purple) !important;
    --mh-button-fill: var(--mh-purple-bg) !important;
    border-color: var(--mh-purple) !important;
    background: var(--mh-purple-bg) !important;
    color: var(--mh-purple) !important;
}

/* Creazione: nuovo/nuova, aggiunta di entità o righe, creazione diretta. */
html[data-theme] :is(
    .create-action,
    button.create-action,
    a.create-action
) {
    --mh-button-ink: var(--mh-success) !important;
    --mh-button-fill: var(--mh-success-bg) !important;
    border-color: var(--mh-success) !important;
    background: var(--mh-success-bg) !important;
    color: var(--mh-success) !important;
}

/* Stampa ed esportazione: giallo, identico in tutte le superfici. */
html[data-theme] :is(
    .print-action,
    .export-action,
    .print-button,
    .export-button,
    .table-print-button,
    .inventory-print-button
) {
    --mh-button-ink: var(--mh-export) !important;
    --mh-button-fill: var(--mh-export-bg) !important;
    border-color: var(--mh-export) !important;
    background: var(--mh-export-bg) !important;
    color: var(--mh-export) !important;
}

/* Attenzione: sospensione, rifiuto, riapertura e ritorno di stato. */
html[data-theme] :is(
    .warning-action,
    .entity-action--warning,
    .cease-action,
    .suspend-button,
    .reject,
    .reopen,
    .return-validation,
    .return-to-validation,
    .close-month
) {
    --mh-button-ink: var(--mh-warning) !important;
    --mh-button-fill: var(--mh-warning-bg) !important;
    border-color: var(--mh-warning) !important;
    background: var(--mh-warning-bg) !important;
    color: var(--mh-warning) !important;
}

/* Distruzione: eliminazione, cancellazione, rimozione e ogni pulsante X. */
html[data-theme] :is(
    .danger-action,
    .danger,
    .delete,
    .delete-button,
    .delete-action,
    .delete-timesheet,
    .delete-edit-row,
    .oj-delete-confirm,
    .remove,
    .remove-button,
    .remove-attachment,
    .remove-saved-attachment,
    .job-picker-close,
    .dialog-close,
    .close-modal,
    button[aria-label*="elimina" i],
    button[title*="elimina" i],
    button[aria-label*="cancella" i],
    button[title*="cancella" i],
    button[aria-label*="rimuovi" i],
    button[title*="rimuovi" i]
) {
    --mh-button-ink: var(--mh-danger) !important;
    --mh-button-fill: var(--mh-danger-bg) !important;
    border-color: var(--mh-danger) !important;
    background: var(--mh-danger-bg) !important;
    color: var(--mh-danger) !important;
}

html[data-theme] :is(.modal-header, .dialog-header, .picker-header) > button:last-child {
    --mh-button-ink: var(--mh-danger) !important;
    --mh-button-fill: var(--mh-danger-bg) !important;
    border-color: var(--mh-danger) !important;
    background: var(--mh-danger-bg) !important;
    color: var(--mh-danger) !important;
}

html[data-theme] :is(
    button,
    .ds-btn,
    .button,
    input[type="button"],
    input[type="submit"]
):not(.switch):not(.toggle):not(.toggle-switch):not(.ds-toggle):disabled {
    opacity: .52 !important;
    cursor: not-allowed !important;
}

/*
   Pagine di sistema: contratto di layout stabile.
   Queste pagine storiche conservano componenti interni differenti, ma la
   griglia esterna e la responsivita non devono dipendere dagli stili locali
   o dall'ordine con cui Blazor carica i fogli CSS.
*/
html[data-theme] .ds-app__main :is(
    .notifications-page,
    .month-close-page,
    .payroll-page,
    .calendar-page,
    .archive-page
) {
    box-sizing: border-box !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    padding: clamp(1rem, 2.25vw, 1.75rem) !important;
    gap: clamp(1rem, 1.8vw, 1.4rem) !important;
    align-content: start !important;
    grid-auto-rows: max-content !important;
}

html[data-theme] .ds-app__main :is(
    .notifications-page,
    .month-close-page,
    .payroll-page,
    .calendar-page
) {
    max-width: 1500px !important;
}

html[data-theme] .ds-app__main .archive-page {
    max-width: 1150px !important;
}

html[data-theme] .ds-app__main :is(
    .notifications-page,
    .month-close-page,
    .payroll-page,
    .calendar-page,
    .archive-page
) > :is(header,section,aside,div) {
    min-width: 0;
    max-width: 100%;
}

html[data-theme] .ds-app__main :is(
    .notifications-page,
    .month-close-page,
    .payroll-page,
    .calendar-page,
    .archive-page
) > header {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 1.25rem !important;
}

html[data-theme] .notifications-page .notification-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html[data-theme] .month-close-page .checks {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html[data-theme] .payroll-page .summary {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

html[data-theme] .calendar-page .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/*
   Superfici condivise delle pagine di sistema.
   I vecchi componenti usavano variabili locali diverse e potevano quindi
   apparire come testo libero sullo sfondo. Qui pannelli, metriche e tabelle
   ricevono lo stesso trattamento delle schede del resto dell'ufficio.
*/
html[data-theme] .ds-app__main :is(
    .notifications-page .summary,
    .notifications-page .notification-grid > a,
    .month-close-page .status-card,
    .month-close-page .checks > article,
    .month-close-page .explanation,
    .payroll-page .summary > article,
    .payroll-page .table-card,
    .calendar-page .new-holiday,
    .calendar-page .grid > article,
    .archive-page > section,
    .archive-page > aside,
    .archive-page .viewer
) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    background: var(--mh-surface) !important;
    color: var(--mh-text) !important;
    border: 1px solid var(--mh-border) !important;
    border-radius: var(--mh-radius-lg) !important;
    box-shadow: var(--mh-shadow) !important;
}

html[data-theme] .notifications-page .summary {
    width: fit-content !important;
    min-width: min(100%, 18rem) !important;
    padding: 1rem 1.25rem !important;
}

html[data-theme] .notifications-page .notification-grid > a,
html[data-theme] .month-close-page .checks > article,
html[data-theme] .payroll-page .summary > article {
    padding: 1.25rem !important;
}

html[data-theme] .payroll-page .table-card,
html[data-theme] .calendar-page :is(.new-holiday,.grid > article),
html[data-theme] .archive-page > :is(section,aside) {
    padding: clamp(1rem, 2vw, 1.4rem) !important;
}

html[data-theme] .payroll-page table {
    background: var(--mh-surface) !important;
    color: var(--mh-text) !important;
}

html[data-theme] .payroll-page thead {
    background: var(--mh-surface-soft) !important;
}

html[data-theme] .payroll-page :is(th,td),
html[data-theme] .calendar-page .row {
    border-color: var(--mh-border) !important;
}

@media (max-width: 900px) {
    html[data-theme] .notifications-page .notification-grid,
    html[data-theme] .month-close-page .checks,
    html[data-theme] .payroll-page .summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html[data-theme] .calendar-page :is(.new-holiday,.grid),
    html[data-theme] .archive-page :is(.fields,.open-row) {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 620px) {
    html[data-theme] .ds-app__main :is(
        .notifications-page,
        .month-close-page,
        .payroll-page,
        .calendar-page,
        .archive-page
    ) > header {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    html[data-theme] .notifications-page .notification-grid,
    html[data-theme] .month-close-page .checks,
    html[data-theme] .payroll-page .summary,
    html[data-theme] .calendar-page .grid {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] .month-close-page .status-card,
    html[data-theme] .archive-page .viewer-head {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* LAST CASCADE: tablet colors and compact smartphone command row. */
@media (max-width: 760px) {
    html[data-theme] body main .timesheet-save-actions.timesheet-command-grid {
        display: grid !important;
        grid-template: 7rem / 3.25rem minmax(0, .9fr) minmax(0, 1.15fr) !important;
        grid-template-areas: "tools copy send" !important;
        align-items: stretch !important;
        gap: .5rem !important;
        width: 100% !important;
    }
    html[data-theme] body main .timesheet-save-actions.timesheet-command-grid > .timesheet-secondary-actions {
        grid-area: tools !important; display: grid !important; grid-template-rows: 1fr 1fr !important;
        gap: .5rem !important; width: 3.25rem !important; min-width: 3.25rem !important; height: 7rem !important;
    }
    html[data-theme] body main .timesheet-save-actions.timesheet-command-grid > .timesheet-secondary-actions > button {
        width: 3.25rem !important; min-width: 3.25rem !important; min-height: 0 !important;
        height: 100% !important; margin: 0 !important; padding: .3rem !important;
    }
    html[data-theme] body main .timesheet-save-actions.timesheet-command-grid > button.quick-copy-submit {
        grid-area: copy !important; width: 100% !important; min-width: 0 !important; height: 7rem !important;
        margin: 0 !important; padding: .55rem !important; background: #fef3c7 !important;
        background-image: none !important; border: 2px solid #ca8a04 !important;
        color: #854d0e !important; -webkit-text-fill-color: #854d0e !important; opacity: 1 !important;
    }
    html[data-theme] body main .timesheet-save-actions.timesheet-command-grid > button.quick-copy-submit:is(:disabled,.is-unavailable) {
        background: #e5e7eb !important; border-color: #9ca3af !important;
        color: #6b7280 !important; -webkit-text-fill-color: #6b7280 !important; opacity: 1 !important;
    }
    html[data-theme] body main .timesheet-save-actions.timesheet-command-grid > button.submit-prominent {
        grid-area: send !important; width: 100% !important; min-width: 0 !important; height: 7rem !important;
        margin: 0 !important; padding: .55rem !important; background: #2563eb !important;
        background-image: none !important; border: 2px solid #1d4ed8 !important;
        color: #fff !important; -webkit-text-fill-color: #fff !important; opacity: 1 !important;
    }
}

html[data-theme] body main .mode-actions > button.login-main {
    min-height: clamp(5.5rem,12vh,7.5rem) !important; background: #15803d !important;
    background-image: none !important; border: 3px solid #166534 !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important; opacity: 1 !important;
}
html[data-theme] body main .mode-actions > button.punch-small {
    min-height: clamp(5.5rem,12vh,7.5rem) !important; background: #0284c7 !important;
    background-image: none !important; border: 3px solid #0369a1 !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important; opacity: 1 !important;
}
html[data-theme] body main button.punch-window-direction.in {
    background: #16a34a !important; background-image: none !important; border: 4px solid #15803d !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important; opacity: 1 !important;
}
html[data-theme] body main button.punch-window-direction.out {
    background: #dc2626 !important; background-image: none !important; border: 4px solid #b91c1c !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important; opacity: 1 !important;
}
html[data-theme] body main button.punch-window-direction :is(strong,small) {
    color: #fff !important; -webkit-text-fill-color: #fff !important;
}
html[data-theme] body main button.punch-window-direction.is-focused {
    outline: 7px solid #facc15 !important; outline-offset: 5px !important;
    box-shadow: 0 0 0 12px rgba(250,204,21,.28) !important;
}

/* Definitive mobile/tablet actions. Kept last so scoped component styles cannot
   restore the obsolete vertical mobile layout or washed-out tablet colors. */
@media (max-width: 760px) {
    html[data-theme] body .timesheet-save-actions.timesheet-command-grid {
        display: grid !important;
        grid-template-columns: 3.25rem minmax(0, .95fr) minmax(0, 1.15fr) !important;
        grid-template-rows: 7rem !important;
        grid-template-areas: "tools copy send" !important;
        align-items: stretch !important;
        gap: .5rem !important;
        width: 100% !important;
    }

    html[data-theme] body .timesheet-save-actions.timesheet-command-grid > .timesheet-secondary-actions {
        grid-area: tools !important;
        display: grid !important;
        grid-template-rows: 1fr 1fr !important;
        gap: .5rem !important;
        width: 3.25rem !important;
        height: 7rem !important;
    }

    html[data-theme] body .timesheet-save-actions.timesheet-command-grid > .timesheet-secondary-actions > button {
        width: 3.25rem !important;
        min-width: 3.25rem !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: .3rem !important;
        color: #17243c !important;
        border-color: #17243c !important;
        background: #f5f8fc !important;
    }

    html[data-theme] body .timesheet-save-actions.timesheet-command-grid > button.quick-copy-submit {
        grid-area: copy !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 7rem !important;
        margin: 0 !important;
        padding: .55rem !important;
        background: #fef3c7 !important;
        background-image: none !important;
        border: 2px solid #ca8a04 !important;
        color: #854d0e !important;
        -webkit-text-fill-color: #854d0e !important;
        opacity: 1 !important;
    }

    html[data-theme] body .timesheet-save-actions.timesheet-command-grid > button.quick-copy-submit:is(:disabled,.is-unavailable) {
        background: #e5e7eb !important;
        border-color: #9ca3af !important;
        color: #6b7280 !important;
        -webkit-text-fill-color: #6b7280 !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }

    html[data-theme] body .timesheet-save-actions.timesheet-command-grid > button.submit-prominent {
        grid-area: send !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 7rem !important;
        margin: 0 !important;
        padding: .55rem !important;
        background: #2563eb !important;
        background-image: none !important;
        border: 2px solid #1d4ed8 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        opacity: 1 !important;
    }
}

html[data-theme] body .menu-trigger strong {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
}

html[data-theme] body .mode-actions > button.login-main {
    min-height: clamp(7rem, 16vh, 9rem) !important;
    background: #15803d !important;
    background-image: none !important;
    border: 4px solid #166534 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}

html[data-theme] body .mode-actions > button.punch-small {
    min-height: clamp(7rem, 16vh, 9rem) !important;
    background: #0284c7 !important;
    background-image: none !important;
    border: 4px solid #0369a1 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}

html[data-theme] body button.punch-window-direction.in {
    background: #16a34a !important;
    background-image: none !important;
    border: 5px solid #15803d !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}

html[data-theme] body button.punch-window-direction.out {
    background: #dc2626 !important;
    background-image: none !important;
    border: 5px solid #b91c1c !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}

html[data-theme] body button.punch-window-direction :is(strong,small) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

html[data-theme] body button.punch-window-direction:is(.focused,.is-focused):not([data-offline-direction]) {
    outline: 8px solid #facc15 !important;
    outline-offset: 5px !important;
    box-shadow: 0 0 0 14px rgba(250,204,21,.38) !important;
}

/* Comandi tablet e invio cedolino: riferimento visivo unico 2026-08-28. */
html[data-theme] body .mode-actions > button.login-main {
    background: #dcfce7 !important;
    background-image: none !important;
    border: 4px solid #15803d !important;
    color: #137333 !important;
    -webkit-text-fill-color: #137333 !important;
    font-size: 32px !important;
}

html[data-theme] body .mode-actions > button.punch-small {
    background: #e8f0ff !important;
    background-image: none !important;
    border: 4px solid #2563eb !important;
    color: #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
    font-size: 28px !important;
}

html[data-theme] body button.punch-window-direction.in,
html[data-theme] body .punch-direction-actions button.punch-in {
    background: #dcfce7 !important;
    background-image: none !important;
    border-color: #15803d !important;
    color: #137333 !important;
    -webkit-text-fill-color: #137333 !important;
}

html[data-theme] body button.punch-window-direction.out,
html[data-theme] body .punch-direction-actions button.punch-out {
    background: #fff1f2 !important;
    background-image: none !important;
    border-color: #ef4444 !important;
    color: #c81e1e !important;
    -webkit-text-fill-color: #c81e1e !important;
}

html[data-theme] body button.punch-window-direction.in :is(strong,small),
html[data-theme] body .punch-direction-actions button.punch-in :is(strong,small) {
    color: #137333 !important;
    -webkit-text-fill-color: #137333 !important;
    text-shadow: none !important;
}

html[data-theme] body button.punch-window-direction.out :is(strong,small),
html[data-theme] body .punch-direction-actions button.punch-out :is(strong,small) {
    color: #c81e1e !important;
    -webkit-text-fill-color: #c81e1e !important;
    text-shadow: none !important;
}

html[data-theme] body .timesheet-save-actions.timesheet-command-grid > button.submit-prominent {
    background: #edf3ff !important;
    background-image: none !important;
    border: 2px solid #2563eb !important;
    color: #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
}

/* Presenze e assenze: la matrice mensile usa esclusivamente celle a spigolo vivo. */
.attendance-page .attendance-table,
.attendance-page .attendance-table thead,
.attendance-page .attendance-table tbody,
.attendance-page .attendance-table tr,
.attendance-page .attendance-table th,
.attendance-page .attendance-table td,
.attendance-page .attendance-table td.clickable-cell,
.attendance-page .attendance-table .calendar-cell-button,
.attendance-page .attendance-table .calendar-cell-button:hover,
.attendance-page .attendance-table .calendar-cell-button:focus,
.attendance-page .attendance-table .calendar-cell-button:active {
    border-radius: 0 !important;
}

/* Shared entity rows: clienti, controllo dati e storico timbrature. */
html[data-theme] body .ds-app__main .mh-record-list {
    display: grid !important;
    gap: .875rem !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

html[data-theme] body .ds-app__main .mh-record-card {
    overflow: hidden !important;
    border: 1px solid var(--mh-border) !important;
    border-radius: var(--mh-radius-lg) !important;
    background: var(--mh-surface) !important;
    box-shadow: var(--mh-shadow) !important;
}

html[data-theme] body .ds-app__main .mh-record-summary {
    width: 100% !important;
    min-height: 4.4rem !important;
    margin: 0 !important;
    padding: .9rem 1.2rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--mh-surface) !important;
    color: var(--mh-text) !important;
    box-shadow: none !important;
}

html[data-theme] body .ds-app__main .mh-record-card:hover > .mh-record-summary,
html[data-theme] body .ds-app__main .mh-record-summary:focus-visible {
    background: var(--mh-surface-soft) !important;
}

html[data-theme] body .ds-app__main .mh-record-chevron {
    color: var(--mh-primary) !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
}

html[data-theme] body .ds-app__main .mh-record-title {
    margin: 0 !important;
    color: var(--mh-text) !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
}

html[data-theme] body .ds-app__main .mh-record-details {
    border-top: 1px solid var(--mh-border) !important;
    background: var(--mh-surface) !important;
}

html[data-theme] body .ds-app__main .mh-record-trigger {
    display: inline-flex !important;
    align-items: center !important;
    gap: .6rem !important;
    width: max-content !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Shared semantic actions. Page-local rules cannot alter their visual role. */
html[data-theme] body .ds-app__main :is(button, a).mh-action {
    min-height: var(--mh-control-height) !important;
    padding: .62rem 1rem !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-radius: var(--mh-radius-control) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .45rem !important;
    font: inherit !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

html[data-theme] body .ds-app__main :is(button, a).mh-action--primary {
    color: #1d4ed8 !important;
    border-color: #3b82f6 !important;
    background: #eff6ff !important;
}

html[data-theme] body .ds-app__main :is(button, a).mh-action--create {
    color: #166534 !important;
    border-color: #22a447 !important;
    background: #e4f6e9 !important;
}

html[data-theme] body .ds-app__main :is(button, a).mh-action--edit {
    color: #6d28d9 !important;
    border-color: #8b5cf6 !important;
    background: #f3efff !important;
}

html[data-theme] body .ds-app__main :is(button, a).mh-action--danger {
    color: #b91c1c !important;
    border-color: #ef4444 !important;
    background: #fff1f2 !important;
}

html[data-theme="dark"] body .ds-app__main :is(button, a).mh-action--primary { background: #172554 !important; color: #bfdbfe !important; }
html[data-theme="dark"] body .ds-app__main :is(button, a).mh-action--create { background: #052e1a !important; color: #bbf7d0 !important; }

/* Analisi camion: azioni con la stessa gerarchia cromatica delle altre pagine. */
html[data-theme] body .ds-app__main .truck-header-actions .truck-targa-download {
  border-color: #b96d00 !important;
  background: #fff2c7 !important;
  color: #8a4b00 !important;
  font-weight: 900 !important;
}
html[data-theme] body .ds-app__main .truck-header-actions .truck-settings-button {
  border-color: #7c3aed !important;
  background: #f3e8ff !important;
  color: #6d28d9 !important;
  font-weight: 900 !important;
}
html[data-theme] body .ds-app__main .truck-count-toggle > .mh-action--create {
  border-color: #15803d !important;
  background: #dcfce7 !important;
  color: #087334 !important;
  font-weight: 900 !important;
}
html[data-theme="dark"] body .ds-app__main .truck-header-actions .truck-targa-download {
  border-color: #d99a25 !important;
  background: #4a3510 !important;
  color: #fde68a !important;
}
html[data-theme="dark"] body .ds-app__main .truck-header-actions .truck-settings-button {
  border-color: #a78bfa !important;
  background: #30204a !important;
  color: #c4b5fd !important;
}
html[data-theme="dark"] body .ds-app__main :is(button, a).mh-action--edit { background: #2e1065 !important; color: #ddd6fe !important; }
html[data-theme="dark"] body .ds-app__main :is(button, a).mh-action--danger { background: #450a0a !important; color: #fecaca !important; }

/* G1-G5 — rifiniture condivise. Usano esclusivamente i token già approvati,
   quindi non introducono nuovi colori o geometrie nelle singole pagine. */
html[data-theme] body :is(.ds-loading,.audit-state,.dashboard-loading,.loading,.qr-loading) {
    border: 1px solid var(--mh-border) !important;
    border-radius: var(--mh-radius-md) !important;
    background: var(--mh-surface) !important;
    color: var(--mh-muted) !important;
    box-shadow: none !important;
}

html[data-theme] body :is(.ds-loading__spinner,.mobile-starting-spinner,.personal-session-spinner) {
    border-color: color-mix(in srgb, var(--mh-primary) 22%, transparent) !important;
    border-top-color: var(--mh-primary) !important;
}

html[data-theme] body :is(.ds-search-field,.oj-search-wrap) {
    min-height: var(--mh-control-h) !important;
    border: 1px solid var(--mh-border) !important;
    border-radius: var(--mh-radius-md) !important;
    background: var(--mh-surface) !important;
    box-shadow: none !important;
}

html[data-theme] body :is(.ds-search-field,.oj-search-wrap):focus-within {
    border-color: var(--mh-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mh-primary) 18%, transparent) !important;
}

html[data-theme] body :is(.ds-search-field,.oj-search-wrap) :is(input,.ds-standard-search) {
    min-height: calc(var(--mh-control-h) - 2px) !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--mh-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body :is(input,select,textarea):disabled,
html[data-theme="dark"] body :is(input,select,textarea)[readonly] {
    border-color: var(--mh-border) !important;
    background: var(--mh-surface-soft) !important;
    color: var(--mh-muted) !important;
    opacity: 1 !important;
}

html[data-theme="dark"] body :is(dialog,.modal,.dialog-card,.modal-card,[class*="-modal"] > section,[class*="-dialog"] > section) {
    border-color: var(--mh-border) !important;
    background: var(--mh-surface) !important;
    color: var(--mh-text) !important;
}

html[data-theme] body .ds-app__main :is(table,.attendance-table) :is(th,td) {
    box-shadow: none !important;
}

html[data-theme] body .ds-app__main :is(.mh-record-card,.oj-customer-item,.employee-quality) {
    outline: 0 !important;
}

@media (min-width: 1280px) {
    html[data-theme] body .ds-app__main :is(.mh-record-summary,.oj-customer-summary,.employee-quality-summary) {
        min-height: 4rem !important;
        padding-block: .72rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme] body *,html[data-theme] body *::before,html[data-theme] body *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

html[data-theme] body .ds-app__main :is(button, a).mh-action:disabled {
    color: var(--mh-text-muted) !important;
    border-color: var(--mh-border) !important;
    background: var(--mh-disabled-bg, var(--mh-surface-soft)) !important;
    opacity: .72 !important;
    cursor: not-allowed !important;
}

@media (max-width: 700px) {
    html[data-theme] body .ds-app__main .mh-record-summary {
        min-height: 4rem !important;
        padding: .78rem .9rem !important;
    }

    html[data-theme] body .ds-app__main :is(button, a).mh-action {
        min-height: 2.75rem !important;
        padding: .55rem .78rem !important;
    }
}

/* Inserimento cedolino smartphone: colori definitivi dei comandi principali.
   Queste regole restano intenzionalmente in fondo al foglio per non essere
   sovrascritte dagli stili generali dei pulsanti. */
@media (max-width: 760px) {
    body .worklog-page .timesheet-command-grid > button.quick-copy-submit.is-available:not(:disabled) {
        background: #fff3cd !important;
        background-image: none !important;
        border-color: #a85d00 !important;
        color: #8a4b00 !important;
        -webkit-text-fill-color: #8a4b00 !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }

    body .worklog-page .timesheet-command-grid > button.quick-copy-submit.is-available:not(:disabled) :is(span, svg) {
        color: #8a4b00 !important;
        fill: currentColor !important;
        -webkit-text-fill-color: #8a4b00 !important;
    }

    body .worklog-page .timesheet-command-grid > button.quick-copy-submit:is(:disabled, .is-unavailable) {
        background: #eef1f4 !important;
        background-image: none !important;
        border-color: #aab2bc !important;
        color: #7b8490 !important;
        -webkit-text-fill-color: #7b8490 !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }

    body .worklog-page .timesheet-command-grid > button.quick-copy-submit:is(:disabled, .is-unavailable) :is(span, svg) {
        color: #7b8490 !important;
        fill: currentColor !important;
        -webkit-text-fill-color: #7b8490 !important;
    }

    body .worklog-page .timesheet-command-grid > button.primary.submit-prominent {
        background: #e8f0ff !important;
        background-image: none !important;
        border-color: #2563eb !important;
        color: #2563eb !important;
        -webkit-text-fill-color: #2563eb !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }

    body .worklog-page .timesheet-command-grid > button.primary.submit-prominent :is(span, svg) {
        color: #2563eb !important;
        fill: currentColor !important;
        -webkit-text-fill-color: #2563eb !important;
    }
}

/* Clienti e commesse: stessa superficie neutra delle righe dello storico
   timbrature. Ultima regola intenzionale: neutralizza le vecchie superfici
   locali senza modificare disposizione e comandi della riga. */
html:not([data-theme="dark"]) body .ds-app__main .oj-customer-list > .oj-customer-item,
html:not([data-theme="dark"]) body .ds-app__main .oj-customer-list > .oj-customer-item > .oj-customer-summary,
html:not([data-theme="dark"]) body .ds-app__main .oj-customer-list > .oj-customer-item.expanded,
html:not([data-theme="dark"]) body .ds-app__main .oj-customer-list > .oj-customer-item.expanded > .oj-customer-summary {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}

html[data-theme="dark"] body .ds-app__main .oj-customer-list > .oj-customer-item,
html[data-theme="dark"] body .ds-app__main .oj-customer-list > .oj-customer-item > .oj-customer-summary,
html[data-theme="dark"] body .ds-app__main .oj-customer-list > .oj-customer-item.expanded,
html[data-theme="dark"] body .ds-app__main .oj-customer-list > .oj-customer-item.expanded > .oj-customer-summary {
    background: #151e2c !important;
    background-color: #151e2c !important;
    background-image: none !important;
}

/* Clienti e commesse, tema chiaro: la riga e il relativo comando devono
   rimanere bianchi e senza profilo in ogni stato interattivo. I selettori
   includono le classi effettivamente renderizzate dalla pagina. */
html:not([data-theme="dark"]) body article.oj-customer-item.oj-punch-style-card,
html:not([data-theme="dark"]) body article.oj-customer-item.oj-punch-style-card:hover,
html:not([data-theme="dark"]) body article.oj-customer-item.oj-punch-style-card:focus,
html:not([data-theme="dark"]) body article.oj-customer-item.oj-punch-style-card:focus-within,
html:not([data-theme="dark"]) body article.oj-customer-item.oj-punch-style-card.oj-expanded {
    border: 0 !important;
    outline: 0 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
}

html:not([data-theme="dark"]) body article.oj-customer-item.oj-punch-style-card > .oj-customer-summary.oj-punch-style-summary,
html:not([data-theme="dark"]) body article.oj-customer-item.oj-punch-style-card > .oj-customer-summary.oj-punch-style-summary:hover,
html:not([data-theme="dark"]) body article.oj-customer-item.oj-punch-style-card > .oj-customer-summary.oj-punch-style-summary:focus,
html:not([data-theme="dark"]) body article.oj-customer-item.oj-punch-style-card > .oj-customer-summary.oj-punch-style-summary:focus-visible,
html:not([data-theme="dark"]) body article.oj-customer-item.oj-punch-style-card > .oj-customer-summary.oj-punch-style-summary:active {
    border: 0 !important;
    outline: 0 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
}

html:not([data-theme="dark"]) body article.oj-customer-item.oj-punch-style-card::before,
html:not([data-theme="dark"]) body article.oj-customer-item.oj-punch-style-card::after,
html:not([data-theme="dark"]) body article.oj-customer-item.oj-punch-style-card > .oj-customer-summary.oj-punch-style-summary::before,
html:not([data-theme="dark"]) body article.oj-customer-item.oj-punch-style-card > .oj-customer-summary.oj-punch-style-summary::after {
    display: none !important;
    content: none !important;
}