/* MATEC-FINAL-OVERRIDES
   Regole correttive caricate per ultime: non duplicare questi componenti nei fogli pagina. */

/* Inserimento cedolino: due strumenti impilati e due azioni affiancate a doppia altezza. */
html[data-theme] body main .timesheet-save-actions.timesheet-command-grid {
    display: grid !important;
    grid-template-columns: 58px minmax(0, .95fr) minmax(0, 1.15fr) !important;
    grid-template-rows: 58px 58px !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: stretch !important;
}

/* Tablet, pagina Benvenuto: contratto finale per barra sessione e pulsante Esci. */
html[data-theme] body .kiosk .session-footer-actions button.logout-action {
    border: 1px solid #dc2626 !important;
    background: #fff1f1 !important;
    background-image: none !important;
    color: #c81e1e !important;
    -webkit-text-fill-color: #c81e1e !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body .kiosk .session-footer-actions button.logout-action {
    border-color: #ff5b5b !important;
    background: #43171b !important;
    color: #ff9a9a !important;
    -webkit-text-fill-color: #ff9a9a !important;
}

html[data-theme] body .session-countdown span.danger {
    background: #ff1010 !important;
    color: #ff1010 !important;
    box-shadow: 0 0 10px #ff1010, 0 0 4px #ff1010 !important;
}

/* Standard unico bordi di pulsanti e badge.
   1 px: badge, filtri e azioni secondarie.
   2 px: azioni principali, positive e negative.
   4 px: esclusivamente i grandi comandi operativi IN/OUT del tablet. */
html[data-theme] body :is(
    .badge,
    [class$="-badge"],
    [class*=" badge"],
    .pill,
    [class$="-pill"],
    .status,
    .status-chip,
    .filter-toggle > span,
    .reader-status,
    .remaining-hours,
    .punch-direction
) {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: currentColor !important;
}

html[data-theme] body :is(
    button.secondary,
    button.cancel,
    button.edit,
    button.quick-button,
    button.back-button,
    .dialog-action:not(.primary),
    .secondary-link,
    .back-link
) {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: currentColor !important;
}

html[data-theme] body :is(
    button.primary,
    .primary-link,
    .create-action,
    .submit-prominent,
    .copy-confirm
) {
    border-width: 2px !important;
    border-style: solid !important;
    border-color: var(--ds-color-primary, #2563eb) !important;
}

html[data-theme] body :is(
    button.success,
    button.approve,
    button.fulfill,
    .action-success
) {
    border-width: 2px !important;
    border-style: solid !important;
    border-color: var(--ds-color-success, #15803d) !important;
}

html[data-theme] body :is(
    button.danger,
    button.reject,
    button.remove,
    .logout-action,
    .action-danger
) {
    border-width: 2px !important;
    border-style: solid !important;
    border-color: var(--ds-color-danger, #dc2626) !important;
}

html[data-theme] body :is(
    .mode-actions .login-main,
    .mode-actions .punch-small,
    .punch-direction-actions button,
    .kiosk-symbol.action
) {
    border-width: 4px !important;
}

/* Contratto definitivo di larghezza per tutte le pagine dell'area ufficio. */
html[data-theme] body .ds-app__main,
html[data-theme] body .ds-app__main > *,
html[data-theme] body .ds-app__main :is(
    .ds-page,.ds-page__content,.ds-page-shell,.settings-wide-page,
    .language-admin,.page
) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

html[data-theme] body .ds-app__main :is(.ds-page,.ds-page__content,.ds-page-shell) > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

html[data-theme] body .ds-app__main :is(
    .table-wrap,.table-wrapper,.table-container,.calendar-wrapper,
    .users-card,.grid-scroll
) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
}

/* La tabella paghe usa tutta la finestra e riduce gradualmente spazi e testi. */
html[data-theme] body .ds-app__main .payroll-page .table-card {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

html[data-theme] body .ds-app__main .payroll-page table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
}

html[data-theme] body .ds-app__main .payroll-page :is(th,td) {
    padding: clamp(.45rem,.75vw,.75rem) clamp(.35rem,.65vw,.75rem) !important;
    font-size: clamp(.72rem,.78vw,.92rem) !important;
}

html[data-theme] body .ds-app__main .payroll-page th {
    white-space: normal !important;
    line-height: 1.15 !important;
}

html[data-theme] body .ds-app__main .payroll-page td:first-child {
    min-width: clamp(8rem,14vw,14rem) !important;
    white-space: normal !important;
}

@media (max-width: 900px) {
    html[data-theme] body .ds-app__main .payroll-page .table-card {
        padding: 12px !important;
    }

    html[data-theme] body .ds-app__main .payroll-page table {
        min-width: 880px !important;
    }
}

html[data-theme] body main .timesheet-command-grid > .timesheet-secondary-actions {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    display: grid !important;
    grid-template-columns: 58px !important;
    grid-template-rows: 58px 58px !important;
    gap: 10px !important;
    margin: 0 !important;
}

html[data-theme] body main .timesheet-command-grid .timesheet-tool-action {
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    color: #17365f !important;
    background: #f3f7fc !important;
    border: 2px solid #17365f !important;
}

html[data-theme] body main .timesheet-command-grid > .quick-copy-submit {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    background: #fff3cd !important;
    border: 2px solid #b7791f !important;
    color: #7c4700 !important;
    opacity: 1 !important;
}

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

html[data-theme] body main .timesheet-command-grid > .submit-prominent {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #fff !important;
    background: #2563eb !important;
    border: 2px solid #1d4ed8 !important;
}

/* Tablet: azioni principali e selezione IN/OUT leggibili anche su pannelli luminosi. */
html[data-theme] body .kiosk .mode-actions .login-main {
    color: #146c38 !important;
    background: #dcfce7 !important;
    border: 4px solid #15803d !important;
    font-size: calc(1rem + 4px) !important;
    font-weight: 800 !important;
}

/* Tablet, schermata Benvenuto: uscita distruttiva nello stile rosso leggero. */
html[data-theme] body .kiosk .session-footer-actions .logout-action {
    border: 1px solid #dc2626 !important;
    background: #fff1f1 !important;
    background-image: none !important;
    color: #c81e1e !important;
    -webkit-text-fill-color: #c81e1e !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
html[data-theme="dark"] body .kiosk .session-footer-actions .logout-action {
    border-color: #f87171 !important;
    background: #3b171b !important;
    color: #fca5a5 !important;
    -webkit-text-fill-color: #fca5a5 !important;
}

html[data-theme] body .kiosk .mode-actions .punch-small,
html[data-theme] body .kiosk .login-corner {
    color: #2563eb !important;
    background: #e8f0ff !important;
    border: 4px solid #2563eb !important;
    font-size: calc(1rem + 4px) !important;
    font-weight: 800 !important;
}

html[data-theme] body .kiosk .punch-window-direction.in {
    color: #146c38 !important;
    background: #dcfce7 !important;
    border: 4px solid #15803d !important;
}

html[data-theme] body .kiosk .punch-window-direction.out {
    color: #b91c1c !important;
    background: #fff1f2 !important;
    border: 4px solid #dc2626 !important;
}

html[data-theme] body .kiosk .punch-window-direction.scheduled:not(.focused) {
    box-shadow: none !important;
    transform: none !important;
}

html[data-theme] body .kiosk .punch-window-direction.focused.in {
    position: relative !important;
    z-index: 2 !important;
    border-color: #fde047 !important;
    filter: brightness(1.12) !important;
    opacity: 1 !important;
    animation: matec-active-punch 1.15s ease-in-out infinite !important;
}

html[data-theme] body .kiosk .punch-window-direction.focused.out {
    position: relative !important;
    z-index: 2 !important;
    border-color: #fde047 !important;
    filter: brightness(1.12) !important;
    opacity: 1 !important;
    animation: matec-active-punch 1.15s ease-in-out infinite !important;
}

@keyframes matec-active-punch {
    0%, 100% {
        transform: translateY(-4px) scale(1.05);
        box-shadow: 0 0 0 5px #facc15, 0 0 0 9px rgba(250, 204, 21, .18), 0 0 18px 7px rgba(250, 204, 21, .32);
    }
    50% {
        transform: translateY(-7px) scale(1.13);
        box-shadow: 0 0 0 12px #fff176, 0 0 0 22px rgba(250, 204, 21, .5), 0 0 66px 28px rgba(250, 204, 21, .9);
    }
}

/* Popup fascia: un solo verso appare selezionato. */
html[data-theme] body .direction-choice button:not(.selected) {
    color: var(--text-primary, #13213c) !important;
    background: var(--surface-primary, #fff) !important;
    border: 2px solid var(--border-strong, #8fa6c0) !important;
    box-shadow: none !important;
}

html[data-theme] body .direction-choice button.selected.in {
    color: #146c38 !important;
    background: #dcfce7 !important;
    border: 3px solid #15803d !important;
    box-shadow: 0 0 0 3px rgba(21, 128, 61, .18) !important;
}

html[data-theme] body .direction-choice button.selected.out {
    color: #b91c1c !important;
    background: #fff1f2 !important;
    border: 3px solid #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .16) !important;
}

/* Griglia presenze: celle contigue, a spigolo vivo. */
html[data-theme] body :is(.attendance-table, .vacation-calendar, .presence-grid) :is(td, th, .calendar-cell, .day-cell, button) {
    border-radius: 0 !important;
}

/* Contatori: un unico trattamento neutro con accento blu. */
html[data-theme] body main :is(.stat-card, .summary-card, .metric-card, .counter-card, .kpi-card) {
    color: var(--text-primary, #16213a) !important;
    background: var(--surface-primary, #fff) !important;
    border: 1px solid var(--border-default, #b8cbe1) !important;
    border-top: 5px solid #3b82f6 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
}

@media (max-width: 520px) {
    html[data-theme] body main .timesheet-save-actions.timesheet-command-grid {
        grid-template-columns: 50px minmax(104px, .92fr) minmax(128px, 1.08fr) !important;
        grid-template-rows: 50px 50px !important;
        gap: 8px !important;
    }

    html[data-theme] body main .timesheet-command-grid > .timesheet-secondary-actions {
        grid-template-columns: 50px !important;
        grid-template-rows: 50px 50px !important;
        gap: 8px !important;
    }

    html[data-theme] body main .timesheet-command-grid .timesheet-tool-action {
        width: 50px !important;
        min-width: 50px !important;
        height: 50px !important;
        min-height: 50px !important;
    }

    html[data-theme] body main .timesheet-command-grid > :is(.quick-copy-submit, .submit-prominent) {
        padding: 8px !important;
        font-size: .9rem !important;
        line-height: 1.15 !important;
    }
}

/*
 * Azioni cedolino smartphone/tablet.
 * Selettori per ID intenzionalmente definitivi: impediscono alle vecchie
 * varianti responsive di impilare o ricolorare questi quattro comandi.
 */
html[data-theme] body main #timesheet-mobile-actions {
    display: grid !important;
    grid-template-columns: 52px minmax(0, .95fr) minmax(0, 1.15fr) !important;
    grid-template-rows: repeat(2, 50px) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
}

html[data-theme] body main #timesheet-mobile-tools {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    grid-template-columns: 52px !important;
    grid-template-rows: repeat(2, 50px) !important;
    gap: 8px !important;
    width: 52px !important;
    height: 108px !important;
}

html[data-theme] body main #timesheet-mobile-tools .timesheet-tool-action {
    width: 52px !important;
    min-width: 52px !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    color: #174f87 !important;
    background: #eaf3ff !important;
    border: 2px solid #2563a6 !important;
}

html[data-theme] body main #timesheet-quick-copy,
html[data-theme] body main #timesheet-submit-office {
    grid-row: 1 / 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 108px !important;
    min-height: 108px !important;
    margin: 0 !important;
    padding: 10px !important;
    line-height: 1.15 !important;
}

html[data-theme] body main #timesheet-quick-copy {
    grid-column: 2 !important;
    color: #7a4b00 !important;
    background: #fff3b0 !important;
    border: 2px solid #b77900 !important;
}

html[data-theme] body main #timesheet-quick-copy:disabled,
html[data-theme] body main #timesheet-quick-copy.is-unavailable {
    color: #6b7280 !important;
    background: #e5e7eb !important;
    border-color: #9ca3af !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

html[data-theme] body main #timesheet-submit-office {
    grid-column: 3 !important;
    color: #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
    background: #edf3ff !important;
    border: 2px solid #2563eb !important;
}

html[data-theme] body main #timesheet-submit-office * {
    color: #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
}

@media (max-width: 520px) {
    html[data-theme] body main #timesheet-mobile-actions {
        grid-template-columns: 50px minmax(104px, .92fr) minmax(128px, 1.08fr) !important;
        grid-template-rows: repeat(2, 48px) !important;
        gap: 7px !important;
    }

    html[data-theme] body main #timesheet-mobile-tools {
        grid-template-columns: 50px !important;
        grid-template-rows: repeat(2, 48px) !important;
        gap: 7px !important;
        width: 50px !important;
        height: 103px !important;
    }

    html[data-theme] body main #timesheet-mobile-tools .timesheet-tool-action {
        width: 50px !important;
        min-width: 50px !important;
        height: 48px !important;
        min-height: 48px !important;
    }

    html[data-theme] body main #timesheet-quick-copy,
    html[data-theme] body main #timesheet-submit-office {
        height: 103px !important;
        min-height: 103px !important;
        padding: 7px !important;
        font-size: .86rem !important;
    }
}

@media (max-width: 370px) {
    html[data-theme] body main #timesheet-mobile-actions {
        grid-template-columns: 46px minmax(94px, .94fr) minmax(112px, 1.06fr) !important;
        gap: 5px !important;
    }

    html[data-theme] body main #timesheet-mobile-tools {
        grid-template-columns: 46px !important;
        width: 46px !important;
    }

    html[data-theme] body main #timesheet-mobile-tools .timesheet-tool-action {
        width: 46px !important;
        min-width: 46px !important;
    }

    html[data-theme] body main #timesheet-quick-copy,
    html[data-theme] body main #timesheet-submit-office {
        font-size: .78rem !important;
    }
}

/* App dipendente: "Le mie funzioni" è trasparente e segue il contrasto del tema. */
html[data-theme] body .mobile-app .menu-trigger {
    background: transparent !important;
    border-color: currentColor !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    box-shadow: none !important;
}

html[data-theme] body .mobile-app .menu-trigger :is(span, strong, b) {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    text-shadow: none !important;
}

html[data-theme="dark"] body .mobile-app .menu-trigger,
html[data-theme="dark"] body .mobile-app .menu-trigger :is(span, strong, b) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Standard definitivo dei contatori Office. */
html[data-theme] body main .ds-counter-card {
    display: flex !important;
    min-width: 0 !important;
    min-height: 148px !important;
    padding: 25px 28px 23px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 13px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 6px solid #2f80ed !important;
    border-radius: 22px !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    box-shadow: 0 12px 28px rgba(36, 58, 86, .10) !important;
}

html[data-theme] body main .ds-counter-card > span {
    margin: 0 !important;
    color: #8d9bb2 !important;
    font-size: .86rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: .015em !important;
    text-transform: uppercase !important;
}

html[data-theme] body main .ds-counter-card > strong {
    margin: 0 !important;
    color: var(--mh-text) !important;
    font-size: clamp(2.35rem, 3vw, 3rem) !important;
    font-weight: 800 !important;
    line-height: .95 !important;
}

html[data-theme="dark"] body main .ds-counter-card {
    background: #202a38 !important;
    border-top-color: #67a4ff !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .24) !important;
}

html[data-theme="dark"] body main .ds-counter-card > span {
    color: #aebbd0 !important;
}

@media (max-width: 700px) {
    html[data-theme] body main .ds-counter-card {
        min-height: 116px !important;
        padding: 19px 20px 18px !important;
        border-radius: 18px !important;
    }
}

/* Applicazione finale dello standard dopo tutte le correzioni storiche. */
html[data-theme] body :is(.badge,[class$="-badge"],[class*=" badge"],.pill,[class$="-pill"],.status,.status-chip,.filter-toggle>span,.reader-status,.remaining-hours,.punch-direction){border-width:1px!important;border-style:solid!important;border-color:currentColor!important}

/* Cedolini: "In attesa" deve restare arancione anche dopo gli override generali dei badge. */
html[data-theme] body .ds-app__main .office-timesheets-page .pill.waiting {
    background: #ffedd5 !important;
    color: #9a3412 !important;
    border-color: #f97316 !important;
}
html[data-theme="dark"] body .ds-app__main .office-timesheets-page .pill.waiting {
    background: #4a2917 !important;
    color: #fdba74 !important;
    border-color: #f97316 !important;
}

/* Analisi camion: colori delle azioni, applicati dopo tutti gli stili generali. */
html[data-theme] body .ds-app__main .truck-page .truck-header-actions .truck-targa-download {
    background: #fff2c7 !important;
    color: #8a4b00 !important;
    border-color: #b96d00 !important;
}
html[data-theme] body .ds-app__main .truck-page .truck-header-actions .truck-settings-button {
    background: #f3e8ff !important;
    color: #6d28d9 !important;
    border-color: #7c3aed !important;
}
html[data-theme] body .ds-app__main .truck-page .truck-count-toggle > button.mh-action--create {
    background: #dcfce7 !important;
    color: #087334 !important;
    border-color: #15803d !important;
}
html[data-theme="dark"] body .ds-app__main .truck-page .truck-header-actions .truck-targa-download {
    background: #4a3510 !important;
    color: #fde68a !important;
    border-color: #d99a25 !important;
}
html[data-theme="dark"] body .ds-app__main .truck-page .truck-header-actions .truck-settings-button {
    background: #30204a !important;
    color: #c4b5fd !important;
    border-color: #a78bfa !important;
}
html[data-theme="dark"] body .ds-app__main .truck-page .truck-count-toggle > button.mh-action--create {
    background: #052e1a !important;
    color: #bbf7d0 !important;
    border-color: #22c55e !important;
}

html[data-theme] body .ds-app__main .truck-page > .timesheet-calendar-panel {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html[data-theme] body .ds-app__main .truck-page .truck-count-toggle .truck-row-status {
    align-self: center;
    min-width: 128px;
    padding: 7px 12px;
    border: 1px solid currentColor !important;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
}
html[data-theme] body .ds-app__main .truck-page .truck-count-toggle .truck-row-amounts {
    margin-right: 2px;
    color: var(--mh-text) !important;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}
html[data-theme] body .ds-app__main .truck-page .truck-row-status.pending {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}
html[data-theme] body .ds-app__main .truck-page .truck-row-status.approved {
    background: #dcfce7 !important;
    color: #166534 !important;
}
html[data-theme] body .ds-app__main .truck-page .truck-row-status.anomaly {
    background: #fee2e2 !important;
    color: #991b1b !important;
}
html[data-theme] body .ds-app__main .truck-page .truck-row-status.ignored {
    background: var(--mh-surface-soft) !important;
    color: var(--mh-muted) !important;
}
html[data-theme] body :is(button.secondary,button.cancel,button.edit,button.quick-button,button.back-button,.dialog-action:not(.primary),.secondary-link,.back-link){border-width:1px!important;border-style:solid!important;border-color:currentColor!important}
html[data-theme] body :is(button.primary,.primary-link,.create-action,.submit-prominent,.copy-confirm){border-width:2px!important;border-style:solid!important;border-color:var(--ds-color-primary,#2563eb)!important}
html[data-theme] body :is(button.success,button.approve,button.fulfill,.action-success){border-width:2px!important;border-style:solid!important;border-color:var(--ds-color-success,#15803d)!important}
html[data-theme] body :is(button.danger,button.reject,button.remove,.logout-action,.action-danger){border-width:2px!important;border-style:solid!important;border-color:var(--ds-color-danger,#dc2626)!important}
html[data-theme] body :is(.mode-actions .login-main,.mode-actions .punch-small,.punch-direction-actions button,.kiosk-symbol.action){border-width:4px!important}

/* Barre di ricerca: un solo linguaggio visivo in tutte le pagine ufficio. */
html[data-theme] body main input.ds-standard-search {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 16px 0 46px !important;
    border: 1px solid var(--mh-border) !important;
    border-radius: 14px !important;
    outline: 0 !important;
    background-color: var(--mh-surface) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 4 4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 15px center !important;
    background-size: 21px 21px !important;
    color: var(--mh-text) !important;
    -webkit-text-fill-color: var(--mh-text) !important;
    font: inherit !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    appearance: none !important;
}

html[data-theme] body main input.ds-standard-search::placeholder {
    color: var(--mh-muted) !important;
    -webkit-text-fill-color: var(--mh-muted) !important;
    opacity: 1 !important;
}

html[data-theme] body main input.ds-standard-search:is(:hover,:focus,:focus-visible) {
    border-color: var(--mh-primary) !important;
    outline: 3px solid color-mix(in srgb, var(--mh-primary) 18%, transparent) !important;
    outline-offset: 1px !important;
    background-color: var(--mh-surface) !important;
    box-shadow: none !important;
}

/* La ricerca della pagina Richieste deve restare separata dal primo risultato. */
html[data-theme] body main .requests-page > .requests-search-field {
    margin-bottom: 18px !important;
}

/* La lente resta sempre visibile e monocromatica in entrambe le varianti. */
html[data-theme] body main input:is(.ds-standard-search,.search,.employee-filter,.oj-search) {
    background-image: none !important;
    padding-left: 46px !important;
}

html[data-theme] body main .ds-search-field {
    position: relative !important;
    display: block;
    min-width: 0;
}

html[data-theme] body main .ds-search-field::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 17px;
    top: 50%;
    width: 12px;
    height: 12px;
    border: 2px solid var(--mh-muted);
    border-radius: 50%;
    transform: translateY(-62%);
    pointer-events: none;
}

html[data-theme] body main .ds-search-field::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 29px;
    top: calc(50% + 6px);
    width: 7px;
    height: 2px;
    border-radius: 2px;
    background: var(--mh-muted);
    transform: rotate(45deg);
    transform-origin: left center;
    pointer-events: none;
}

/* Regole personali: la scheda 104 deve seguire il tema dell'intero pannello. */
html[data-theme="dark"] body main .employees-page .employee-benefit-card.rule-law104,
html[data-theme="dark"] body main .employees-page .employee-benefit-card.rule-law104 .benefit-toggle-row {
    border-color: var(--mh-border) !important;
    background: var(--mh-surface-soft) !important;
    color: var(--mh-text) !important;
}

html[data-theme="dark"] body main .employees-page .employee-benefit-card.rule-law104 .benefit-toggle-row {
    background: transparent !important;
}

html[data-theme="dark"] body main .employees-page .employee-benefit-card.rule-law104 :is(strong,label) {
    color: var(--mh-text) !important;
}

html[data-theme="dark"] body main .employees-page .employee-benefit-card.rule-law104 small {
    color: var(--mh-muted) !important;
}

/* Editor delle regole del dipendente: tutte le superfici seguono il tema scuro. */
html[data-theme="dark"] body main .employees-page .rules-manager .rule-manager-row,
html[data-theme="dark"] body main .employees-page .rules-manager .rule-editor {
    border-color: var(--mh-border) !important;
    background: var(--mh-surface) !important;
    color: var(--mh-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body main .employees-page .rules-manager .rule-manager-summary strong,
html[data-theme="dark"] body main .employees-page .rules-manager .rule-editor :is(h4,strong,label) {
    color: var(--mh-text) !important;
}

html[data-theme="dark"] body main .employees-page .rules-manager .rule-manager-summary span,
html[data-theme="dark"] body main .employees-page .rules-manager .rule-editor .section-note {
    color: var(--mh-muted) !important;
}

html[data-theme="dark"] body main .employees-page .rules-manager .rule-editor input:not(.ds-toggle),
html[data-theme="dark"] body main .employees-page .rules-manager .rule-editor :is(select,textarea),
html[data-theme="dark"] body main .employees-page .rules-manager .rule-editor .input-with-unit,
html[data-theme="dark"] body main .employees-page .rules-manager .rule-editor .input-with-unit > span {
    border-color: var(--mh-border) !important;
    background: var(--mh-surface-soft) !important;
    color: var(--mh-text) !important;
    -webkit-text-fill-color: var(--mh-text) !important;
}

html[data-theme="dark"] body main .employees-page .rules-manager .rule-editor input:disabled {
    color: var(--mh-muted) !important;
    -webkit-text-fill-color: var(--mh-muted) !important;
    opacity: .72;
}

html[data-theme="dark"] body main .employees-page .rules-manager .rule-editor-actions .primary-action {
    border-color: var(--mh-primary) !important;
    background: var(--mh-primary) !important;
    color: var(--mh-primary-text) !important;
    -webkit-text-fill-color: var(--mh-primary-text) !important;
}

html[data-theme="dark"] body main .employees-page .rules-manager .rule-editor-actions .entity-action:not(.primary-action) {
    border-color: var(--mh-border-strong) !important;
    background: var(--mh-surface-soft) !important;
    color: var(--mh-text) !important;
}

/* Popup dipendenti: elimina ogni superficie chiara residua nel tema scuro. */
html[data-theme="dark"] body .employees-page .modal,
html[data-theme="dark"] body .employees-page .modal .section,
html[data-theme="dark"] body .employees-page .modal .credential-card,
html[data-theme="dark"] body .employees-page .modal .opening-balance-summary,
html[data-theme="dark"] body .employees-page .modal .employee-benefit-card,
html[data-theme="dark"] body .employees-page .modal .rule-manager-row,
html[data-theme="dark"] body .employees-page .modal .rule-editor {
    border-color: var(--mh-border) !important;
    background: var(--mh-surface) !important;
    color: var(--mh-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body .employees-page .modal :is(.switch,.detail,.subsection,.credential-code,.credential-empty,.feature-status-note) {
    border-color: var(--mh-border) !important;
    background: var(--mh-surface-soft) !important;
    color: var(--mh-text) !important;
}

html[data-theme="dark"] body .employees-page .modal :is(h2,h3,h4,strong,label,.rule-manager-summary strong) {
    color: var(--mh-text) !important;
}

html[data-theme="dark"] body .employees-page .modal :is(p,small,.section-note,.credential-status,.opening-balance-summary small,.rule-manager-summary span) {
    color: var(--mh-muted) !important;
}

html[data-theme="dark"] body .employees-page .modal :is(input:not(.ds-toggle),select,textarea),
html[data-theme="dark"] body .employees-page .modal .input-with-unit,
html[data-theme="dark"] body .employees-page .modal .input-with-unit > span {
    border-color: var(--mh-border) !important;
    background: #050b19 !important;
    color: var(--mh-text) !important;
    -webkit-text-fill-color: var(--mh-text) !important;
}

html[data-theme="dark"] body .employees-page .modal input:disabled:not(.ds-toggle) {
    color: var(--mh-muted) !important;
    -webkit-text-fill-color: var(--mh-muted) !important;
    opacity: .7;
}

/* Il popup vive fuori da .employees-page nel DOM: lo agganciamo direttamente. */
html[data-theme="dark"] body .employee-editor-modal,
html[data-theme="dark"] body .employee-editor-modal :is(.section,.credential-card,.opening-balance-summary,.employee-benefit-card,.rule-manager-row,.rule-editor) {
    border-color: var(--mh-border) !important;
    background: var(--mh-surface) !important;
    color: var(--mh-text) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body .employee-editor-modal :is(.switch,.detail,.subsection,.credential-code,.credential-empty,.feature-status-note) {
    border-color: var(--mh-border) !important;
    background: var(--mh-surface-soft) !important;
    color: var(--mh-text) !important;
}

html[data-theme="dark"] body .employee-editor-modal :is(h2,h3,h4,strong,label,.rule-manager-summary strong) {
    color: var(--mh-text) !important;
}

html[data-theme="dark"] body .employee-editor-modal :is(p,small,.section-note,.credential-status,.opening-balance-summary small,.rule-manager-summary span) {
    color: var(--mh-muted) !important;
}

html[data-theme="dark"] body .employee-editor-modal :is(input:not(.ds-toggle),select,textarea),
html[data-theme="dark"] body .employee-editor-modal .input-with-unit,
html[data-theme="dark"] body .employee-editor-modal .input-with-unit > span {
    border-color: var(--mh-border) !important;
    background: #050b19 !important;
    color: var(--mh-text) !important;
    -webkit-text-fill-color: var(--mh-text) !important;
}

html[data-theme="dark"] body .employee-editor-modal input:disabled:not(.ds-toggle) {
    color: var(--mh-muted) !important;
    -webkit-text-fill-color: var(--mh-muted) !important;
    opacity: .7;
}

html[data-theme="dark"] body .employees-page .modal .modal-actions .save,
html[data-theme="dark"] body .employees-page .modal .modal-actions .primary-action {
    border-color: var(--mh-primary) !important;
    background: var(--mh-primary) !important;
    color: var(--mh-primary-text) !important;
    -webkit-text-fill-color: var(--mh-primary-text) !important;
}

html[data-theme] body main :is(.oj-search-wrap,.employee-search,.employee-filter-wrap) > span[aria-hidden="true"] {
    display: none !important;
}

/* Tema scuro: replica esatta della correzione già usata nel tema chiaro per
   Clienti e Controllo dati. Nessun profilo interno o pseudo-bordo. */
html[data-theme="dark"] body article.oj-customer-item.oj-punch-style-card,
html[data-theme="dark"] body article.oj-customer-item.oj-punch-style-card:hover,
html[data-theme="dark"] body article.oj-customer-item.oj-punch-style-card:focus,
html[data-theme="dark"] body article.oj-customer-item.oj-punch-style-card:focus-within,
html[data-theme="dark"] body article.oj-customer-item.oj-punch-style-card.oj-expanded,
html[data-theme="dark"] body article.employee-quality.ds-entity-card.mh-record-card,
html[data-theme="dark"] body article.employee-quality.ds-entity-card.mh-record-card:hover,
html[data-theme="dark"] body article.employee-quality.ds-entity-card.mh-record-card:focus-within,
html[data-theme="dark"] body article.employee-quality.ds-entity-card.mh-record-card.expanded {
    border: 0 !important;
    outline: 0 !important;
    border-radius: 20px !important;
    background: #151e2c !important;
    background-color: #151e2c !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
}

html[data-theme="dark"] body article.oj-customer-item.oj-punch-style-card > .oj-customer-summary.oj-punch-style-summary,
html[data-theme="dark"] body article.oj-customer-item.oj-punch-style-card > .oj-customer-summary.oj-punch-style-summary:hover,
html[data-theme="dark"] body article.oj-customer-item.oj-punch-style-card > .oj-customer-summary.oj-punch-style-summary:focus,
html[data-theme="dark"] body article.oj-customer-item.oj-punch-style-card > .oj-customer-summary.oj-punch-style-summary:focus-visible,
html[data-theme="dark"] body article.oj-customer-item.oj-punch-style-card > .oj-customer-summary.oj-punch-style-summary:active,
html[data-theme="dark"] body article.employee-quality.ds-entity-card.mh-record-card > .employee-quality-summary,
html[data-theme="dark"] body article.employee-quality.ds-entity-card.mh-record-card > .employee-quality-summary:hover,
html[data-theme="dark"] body article.employee-quality.ds-entity-card.mh-record-card > .employee-quality-summary:focus,
html[data-theme="dark"] body article.employee-quality.ds-entity-card.mh-record-card > .employee-quality-summary:focus-visible,
html[data-theme="dark"] body article.employee-quality.ds-entity-card.mh-record-card > .employee-quality-summary:active {
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: #151e2c !important;
    background-color: #151e2c !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
}

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

/* Coerenza definitiva del tema scuro: Clienti e Controllo dati usano lo
   stesso modello di riga dello Storico timbrature. */
html[data-theme="dark"] body main :is(
    .oj-customer-list > .oj-customer-item,
    .quality-list > .employee-quality
) {
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 20px !important;
    background: var(--mh-surface) !important;
    background-image: none !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.24) !important;
    transform: none !important;
}

html[data-theme="dark"] body main :is(
    .oj-customer-list > .oj-customer-item:hover,
    .oj-customer-list > .oj-customer-item:focus-within,
    .oj-customer-list > .oj-customer-item.oj-expanded,
    .quality-list > .employee-quality:hover,
    .quality-list > .employee-quality:focus-within,
    .quality-list > .employee-quality.expanded
) {
    border: 0 !important;
    outline: 0 !important;
    background: var(--mh-surface) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] body main :is(.oj-customer-summary,.employee-quality-summary),
html[data-theme="dark"] body main :is(.oj-customer-summary,.employee-quality-summary):is(:hover,:focus,:focus-visible,:active) {
    min-height: 76px !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: var(--mh-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
}

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

/* Presenze e assenze: le celle con role=button non devono ereditare il bordo
   e il raggio dei pulsanti generici. Rimane una sola linea della tabella. */
html[data-theme] body .attendance-page .calendar-wrapper {
    border-radius: 0 !important;
}
html[data-theme] body .attendance-page .attendance-table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border-radius: 0 !important;
}
html[data-theme] body .attendance-page .attendance-table :is(th,td,td[role="button"],td.clickable-cell,td>span) {
    min-height: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}
html[data-theme] body .attendance-page .attendance-table td[role="button"] {
    border: 0 !important;
    border-right: 1px solid var(--ds-color-border,rgba(148,163,184,.22)) !important;
    border-bottom: 1px solid var(--ds-color-border,rgba(148,163,184,.22)) !important;
}
html[data-theme] body .attendance-page .attendance-table td[role="button"]:is(:hover,:focus,:focus-visible,:active) {
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: inset 0 0 0 1px var(--ds-color-primary,#2563eb) !important;
}

/* Abbigliamento e DPI: i quattro settori restano schede distinguibili anche
   sullo sfondo scuro. */
html[data-theme="dark"] body .office-equipment :is(.tool-card,.requests-section,.delivery-history) {
    border: 1px solid var(--mh-border) !important;
    border-radius: 22px !important;
    background: var(--mh-surface) !important;
    color: var(--mh-text) !important;
    box-shadow: var(--mh-shadow) !important;
}
html[data-theme] body .office-equipment :is(.tool-card,.requests-section,.delivery-history) {
    border-top-width: 1px !important;
    border-top-color: var(--mh-border) !important;
}
html[data-theme="dark"] body .office-equipment :is(.tool-title,.section-heading,.history-heading) {
    border-bottom-color: var(--mh-border) !important;
}
html[data-theme="dark"] body .office-equipment :is(.request-card,.closed-request-list article,.delivery-table>div,.history-empty) {
    border-color: var(--mh-border) !important;
    background: var(--mh-surface-soft) !important;
    color: var(--mh-text) !important;
}

/* Timeclock: Inserimento dati segue il pulsante verde standard. */
html[data-theme] body .kiosk :is(.mode-actions .login-main,.login-corner) {
    border: 1px solid #137333 !important;
    border-radius: 24px !important;
    background: #e0f5e8 !important;
    background-image: none !important;
    color: #137333 !important;
    -webkit-text-fill-color: #137333 !important;
    box-shadow: none !important;
}

/* Notifiche: otto contatori sempre in due righe (4 + 4) nell'interfaccia ufficio. */
html[data-theme] body .ds-app__main .notifications-page .notification-grid {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

html[data-theme] body .ds-app__main .notifications-page .notification-grid > * {
    grid-column: span 3 !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

html[data-theme] body .ds-app__main .notifications-page .notification-grid > .summary {
    padding: 1.25rem !important;
}

html[data-theme] body .ds-app__main .notifications-page .notification-grid > :nth-child(n + 5) {
    grid-column: span 3 !important;
}

@media (max-width: 620px) {
    html[data-theme] body .ds-app__main .notifications-page .notification-grid {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body .ds-app__main .notifications-page .notification-grid > * {
        grid-column: auto !important;
    }
}

/* Contratto unico per i comandi allegato in chat, richieste e cedolino. */
html[data-theme] body :is(.chat-attachment-action,.request-attachment-action,.timesheet-attachment-action,.attachment-buttons .round-action,.attachment-choices > button) {
    box-sizing:border-box!important;appearance:none!important;display:grid!important;place-items:center!important;
    flex:0 0 44px!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
    margin:0!important;padding:0!important;border:1px solid var(--mh-border-strong)!important;border-radius:14px!important;
    background:var(--mh-surface-soft)!important;color:var(--mh-text)!important;box-shadow:none!important;line-height:1!important;
}

/* Fotocamera e allegato devono conservare un bordo sottile ma ben visibile. */
html[data-theme] body :is(.employee-messages,.employee-request-page) :is(.camera-action,.paperclip-action) {
    border:1px solid var(--mh-border-strong)!important;
    outline:0!important;
}

/* Un solo componente visivo per foto, allegato e vocale, in ogni pagina. */
html[data-theme] body .media-attachment-control {
    box-sizing:border-box!important;
    appearance:none!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border:1px solid var(--mh-border-strong,#91aac5)!important;
    border-radius:14px!important;
    outline:0!important;
    background:var(--mh-surface-soft,#f4f8fc)!important;
    color:var(--mh-text,#172033)!important;
    box-shadow:none!important;
}
html[data-theme] body .media-attachment-control:hover {
    border-color:var(--mh-primary,#174a84)!important;
    background:var(--mh-surface-soft,#f4f8fc)!important;
    color:var(--mh-primary,#174a84)!important;
}
html[data-theme] body :is(.chat-attachment-action,.request-attachment-action,.timesheet-attachment-action,.attachment-buttons .round-action,.attachment-choices > button):hover {
    border-color:var(--mh-primary)!important;background:var(--mh-surface-soft)!important;color:var(--mh-primary)!important;transform:none!important;
}
html[data-theme] body :is(.chat-attachment-action,.request-attachment-action,.timesheet-attachment-action) input {display:none!important}
html[data-theme] body :is(.chat-attachment-action,.request-attachment-action,.timesheet-attachment-action,.attachment-buttons .round-action,.attachment-choices > button) .media-icon {
    display:block!important;width:21px!important;height:21px!important;margin:0!important;
}
html[data-theme] body :is(.chat-attachment-action,.request-attachment-action,.timesheet-attachment-action,.attachment-buttons .round-action,.attachment-choices > button).recording {
    border-color:var(--mh-danger)!important;background:var(--mh-danger-bg)!important;color:var(--mh-danger)!important;
}

/* Correzioni puntuali tema scuro: nessun bianco estraneo nel logo o nella
   legenda dei cedolini. Il tema chiaro resta invariato. */
html[data-theme="dark"] body :is(.hub-brand,.brand,.tablet-verification-brand) img {
    background:#021024!important;
}

html[data-theme="dark"] body .day-status-legend {
    border-color:var(--mh-border)!important;
    background:var(--mh-surface)!important;
    box-shadow:none!important;
}

html[data-theme="dark"] body .day-status-legend > span,
html[data-theme="dark"] body .day-status-legend > span:is(.missing,.draft,.waiting,.anomaly,.submitted,.approved) {
    border:0!important;
    background:transparent!important;
    color:var(--mh-text)!important;
}

/* Presenze e assenze: sabati, domeniche e festivita leggibili nei due temi. */
html[data-theme]:not([data-theme="dark"]) body .attendance-page .attendance-table td:is(.weekend,.no-data,.ignored) {
    background: #e2e8f0 !important;
    color: #526174 !important;
}

html[data-theme="dark"] body .attendance-page .attendance-table td:is(.weekend,.no-data,.ignored) {
    background: #465568 !important;
    color: #f1f5f9 !important;
}

/* Fascia superiore identica per Notifiche, Chiusura mensile ed Esportazione paghe. */
html[data-theme] body .ds-app__main .notifications-page > .summary.ds-counter-card,
html[data-theme] body .ds-app__main .notifications-page .notification-grid > .ds-counter-card,
html[data-theme] body .ds-app__main main.month-close-page section.checks > article.ds-counter-card,
html[data-theme] body .ds-app__main main.payroll-page section.summary > article.ds-counter-card {
    border: 0 !important;
    border-top-width: 6px !important;
    border-top-style: solid !important;
    border-top-color: #2f80ed !important;
    background-color: #fff !important;
    background-image: none !important;
}

html[data-theme="dark"] body .ds-app__main .notifications-page > .summary.ds-counter-card,
html[data-theme="dark"] body .ds-app__main .notifications-page .notification-grid > .ds-counter-card,
html[data-theme="dark"] body .ds-app__main main.month-close-page section.checks > article.ds-counter-card,
html[data-theme="dark"] body .ds-app__main main.payroll-page section.summary > article.ds-counter-card {
    border-top-color: #67a4ff !important;
    background-color: #202a38 !important;
    background-image: none !important;
}

/* Queste pagine devono occupare tutta l'area disponibile dell'ufficio. */
html[data-theme] body .ds-app__main :is(
    .notifications-page,
    .month-close-page,
    .payroll-page,
    .calendar-page,
    .archive-page
) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* Esportazione paghe: i contatori occupano sempre l'intera riga disponibile. */
html[data-theme] body .ds-app__main main.payroll-page > section.summary {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 16px !important;
}
html[data-theme] body .ds-app__main main.payroll-page > section.summary > article.ds-counter-card {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 220px !important;
}

/* Clienti e Controllo dati: righe bianche, ampie e sospese come nello
   Storico timbrature usato come riferimento visivo. */
html[data-theme] body main :is(.oj-customer-list, .quality-list) {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: column !important;
    gap: 14px !important;
    background: transparent !important;
}

html:not([data-theme="dark"]) body main :is(
    .oj-customer-list > .oj-customer-item,
    .quality-list > .employee-quality
) {
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 10px 26px rgba(43, 79, 113, .10) !important;
    transform: none !important;
}

html:not([data-theme="dark"]) body main :is(
    .oj-customer-list > .oj-customer-item:hover,
    .oj-customer-list > .oj-customer-item:focus-within,
    .oj-customer-list > .oj-customer-item.oj-expanded,
    .quality-list > .employee-quality:hover,
    .quality-list > .employee-quality:focus-within,
    .quality-list > .employee-quality.expanded
) {
    border: 0 !important;
    outline: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 10px 26px rgba(43, 79, 113, .10) !important;
}

html:not([data-theme="dark"]) body main :is(
    .oj-customer-summary,
    .employee-quality-summary
),
html:not([data-theme="dark"]) body main :is(
    .oj-customer-summary,
    .employee-quality-summary
):is(:hover, :focus, :focus-visible, :active) {
    min-height: 76px !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
}

html:not([data-theme="dark"]) body main :is(
    .oj-jobs-area,
    .employee-quality-details
) {
    border-top: 1px solid #edf2f7 !important;
    background: #ffffff !important;
}

@media (max-width: 700px) {
    html[data-theme] body main :is(.oj-customer-list, .quality-list) {
        gap: 11px !important;
    }

    html:not([data-theme="dark"]) body main :is(
        .oj-customer-list > .oj-customer-item,
        .quality-list > .employee-quality
    ) {
        border-radius: 17px !important;
        box-shadow: 0 7px 20px rgba(43, 79, 113, .10) !important;
    }

    html:not([data-theme="dark"]) body main :is(
        .oj-customer-summary,
        .employee-quality-summary
    ) {
        min-height: 68px !important;
    }
}

/* Ultima precedenza: spessori coerenti anche contro le vecchie regole pagina. */
html[data-theme] body :is(.badge,[class$="-badge"],[class*=" badge"],.pill,[class$="-pill"],.status,.status-chip,.filter-toggle>span,.reader-status,.remaining-hours,.punch-direction){border-width:1px!important;border-style:solid!important;border-color:currentColor!important}
html[data-theme] body :is(button.secondary,button.cancel,button.edit,button.quick-button,button.back-button,.dialog-action:not(.primary),.secondary-link,.back-link){border-width:1px!important;border-style:solid!important;border-color:currentColor!important}
html[data-theme] body :is(button.primary,.primary-link,.create-action,.submit-prominent,.copy-confirm){border-width:2px!important;border-style:solid!important;border-color:var(--ds-color-primary,#2563eb)!important}
html[data-theme] body :is(button.success,button.approve,button.fulfill,.action-success){border-width:2px!important;border-style:solid!important;border-color:var(--ds-color-success,#15803d)!important}
html[data-theme] body :is(button.danger,button.reject,button.remove,.logout-action,.action-danger){border-width:2px!important;border-style:solid!important;border-color:var(--ds-color-danger,#dc2626)!important}
html[data-theme] body :is(.mode-actions .login-main,.mode-actions .punch-small,.punch-direction-actions button,.kiosk-symbol.action){border-width:4px!important}

/* Eccezione finale: Inserimento dati principale usa il verde del riferimento. */
html[data-theme] body .kiosk .mode-actions .login-main {
    border: 1px solid #137333 !important;
    border-radius: 24px !important;
    background: #e0f5e8 !important;
    background-image: none !important;
    color: #137333 !important;
    -webkit-text-fill-color: #137333 !important;
    box-shadow: none !important;
    font-size: 23pt !important;
}

/* Timbratura e Inserimento dati piccolo: stile azzurro/blu del riferimento. */
html[data-theme] body .kiosk :is(.mode-actions .punch-small,.login-corner) {
    border: 1px solid #2563eb !important;
    border-radius: 24px !important;
    background: #e8f0ff !important;
    background-image: none !important;
    color: #2563eb !important;
    -webkit-text-fill-color: #2563eb !important;
    box-shadow: none !important;
}

/* Timeclock: dimensioni richieste per i due comandi principali.
   Inserimento dati parte da 17 pt, Timbratura da 20 pt: entrambi +6 pt. */
html[data-theme] body .kiosk .mode-actions .punch-small {
    font-size: 26pt !important;
}

/* Chiusura mensile: sette contatori in due sole righe, 4 + 3. */
html[data-theme] body .ds-app__main .month-close-page .checks {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

html[data-theme] body .ds-app__main .month-close-page .checks > .ds-counter-card {
    grid-column: span 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

html[data-theme] body .ds-app__main .month-close-page .checks > .ds-counter-card:nth-child(n + 5) {
    grid-column: span 4 !important;
}

@media (max-width: 620px) {
    html[data-theme] body .ds-app__main .month-close-page .checks {
        grid-template-columns: 1fr !important;
    }

    html[data-theme] body .ds-app__main .month-close-page .checks > .ds-counter-card {
        grid-column: auto !important;
    }
}
/* Icona DPI condivisa tra menu smartphone e tablet. */
.glove-icon svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.attendance-icon svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gear-icon svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}
.message-icon svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Calendario personale: legenda e lista non sono schede autonome. */
html[data-theme] body .calendar-page>section.legend,
html[data-theme] body .calendar-page>section.days{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
.timesheet-page-icon svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.umbrella-icon svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Formazione e attestati: ogni funzione resta una scheda autonoma. */
html[data-theme] body .ds-app__main main.training-page > .matrix-card,
html[data-theme] body .ds-app__main main.training-page .training-admin > section.training-card {
    box-sizing: border-box !important;
    padding: 24px !important;
    overflow: hidden !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 22px !important;
    background: var(--ds-surface) !important;
    box-shadow: var(--ds-shadow-sm, 0 10px 26px rgba(15,23,42,.08)) !important;
}
html[data-theme] body .ds-app__main main.training-page .training-admin {
    gap: 20px !important;
}
html[data-theme="dark"] body .ds-app__main main.training-page > .matrix-card,
html[data-theme="dark"] body .ds-app__main main.training-page .training-admin > section.training-card {
    border-color: #2b3a50 !important;
    background: #111d30 !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.22) !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) body .ds-app__main main.training-page > .matrix-card,
html:is([data-theme="light"],[data-theme="colorful"]) body .ds-app__main main.training-page > .matrix-legend,
html:is([data-theme="light"],[data-theme="colorful"]) body .ds-app__main main.training-page .training-admin > section.training-card {
    border-color: #cbd5e1 !important;
    background: #fff !important;
}

@media print {
    @page { size: A4 landscape; margin: 8mm; }
    html, body { background: #fff !important; color: #111 !important; print-color-adjust: economy !important; -webkit-print-color-adjust: economy !important; }
    body .ds-sidebar, body .ds-shell__header, body .training-page .no-print { display: none !important; }
    body .ds-app, body .ds-app__main { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
    html[data-theme] body .ds-app__main main.training-page { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
    html[data-theme] body .ds-app__main main.training-page > .matrix-card {
        display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
        overflow: visible !important; border: 0 !important; border-radius: 0 !important;
        background: #fff !important; box-shadow: none !important;
    }
    body .training-page .print-heading { display: flex !important; align-items: center !important; gap: 6mm !important; margin: 0 0 4mm !important; padding: 2mm 3mm !important; border: 1px solid #8795a5 !important; border-radius: 1.5mm !important; background: #fff !important; }
    body .training-page .print-heading img { width: 36mm !important; height: auto !important; max-height: 15mm !important; object-fit: contain !important; }
    body .training-page .print-heading > div { display: flex !important; flex: 1 !important; align-items: center !important; justify-content: space-between !important; gap: 5mm !important; }
    body .training-page .print-heading h1 { margin: 0 !important; color: #111 !important; font-size: 13pt !important; }
    body .training-page .print-heading span { color: #334155 !important; font-size: 7pt !important; white-space: nowrap !important; }
    body .training-page .matrix-scroll { width: 100% !important; overflow: visible !important; }
    body .training-page table.training-matrix { width: 100% !important; table-layout: fixed !important; border-collapse: collapse !important; color: #111 !important; font-family: Arial,sans-serif !important; font-size: 6.2pt !important; line-height: 1.05 !important; }
    body .training-page table.training-matrix thead { display: table-header-group !important; }
    body .training-page table.training-matrix tr { break-inside: avoid !important; page-break-inside: avoid !important; }
    body .training-page table.training-matrix th, body .training-page table.training-matrix td { min-width: 0 !important; height: 6mm !important; padding: .7mm !important; border: 1px solid #8795a5 !important; text-align: center !important; vertical-align: middle !important; white-space: normal !important; overflow-wrap: anywhere !important; }
    body .training-page table.training-matrix th:first-child { position: static !important; width: 34mm !important; min-width: 34mm !important; background: #fff !important; color: #111 !important; text-align: left !important; }
    body .training-page table.training-matrix thead th { background: #dfe7f0 !important; color: #111 !important; font-weight: 700 !important; }
    body .training-page .matrix-legend { margin: 0 0 3mm !important; padding: 2mm 3mm !important; border: 1px solid #8795a5 !important; border-radius: 1.5mm !important; background: #fff !important; box-shadow: none !important; break-inside: avoid !important; }
    body .training-page .matrix-legend span { color: #111 !important; font-size: 6.5pt !important; }
}

/*
   Contratto finale dei contenitori di area, condiviso tra ufficio, smartphone
   e tablet. Sono esclusi volutamente badge, righe, celle e schede di stato.
*/
html:is([data-theme="light"],[data-theme="colorful"]) body :is(
    .ds-section,.ds-card,.card,.panel,.surface,
    .analysis-card,.audit-card,.oj-panel,.users-card,.broadcast-card,
    .office-equipment .tool-card,.office-equipment .requests-section,.office-equipment .delivery-history,
    .attendance-page .filters-card,.attendance-page .legend,.attendance-page .calendar-wrapper,
    .training-page .matrix-card,.training-page .matrix-legend,.training-page .training-card,
    .payroll-page .table-card,.archive-page > section,.archive-page > aside,.archive-page .viewer,
    .employee-request-page .access-card,.employee-request-page .request-form,.employee-request-page .history,
    .employee-messages .panel,.equipment-page .equipment-card,.equipment-page .equipment-history,
    .mobile-settings-page .mobile-settings-card,.profile-card,.qr-panel,.kiosk-card
) {
    border: 1px solid #d4dee9 !important;
    background: #fff !important;
    background-image: none !important;
    color: #172033 !important;
    box-shadow: 0 8px 22px rgba(36,58,86,.07) !important;
}

html[data-theme="dark"] body :is(
    .ds-section,.ds-card,.card,.panel,.surface,
    .analysis-card,.audit-card,.oj-panel,.users-card,.broadcast-card,
    .office-equipment .tool-card,.office-equipment .requests-section,.office-equipment .delivery-history,
    .attendance-page .filters-card,.attendance-page .legend,.attendance-page .calendar-wrapper,
    .training-page .matrix-card,.training-page .matrix-legend,.training-page .training-card,
    .payroll-page .table-card,.archive-page > section,.archive-page > aside,.archive-page .viewer,
    .employee-request-page .access-card,.employee-request-page .request-form,.employee-request-page .history,
    .employee-messages .panel,.equipment-page .equipment-card,.equipment-page .equipment-history,
    .mobile-settings-page .mobile-settings-card,.profile-card,.qr-panel,.kiosk-card
) {
    border: 1px solid #2f4863 !important;
    background: #0f2035 !important;
    background-image: none !important;
    color: #f3f7fc !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.20) !important;
}

/* La legenda della formazione è una scheda autonoma, non parte della griglia. */
html[data-theme] body .ds-app__main main.training-page > .matrix-legend {
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 0 16px !important;
    padding: 18px 22px !important;
    border-radius: 20px !important;
}

/* Inserimento cedolino: stati definitivi, dopo ogni regola storica. */
html[data-theme] body .worklog-page .rows .work-row > .row-site-work {
    box-sizing: border-box !important;
    border: 1px solid #2563a6 !important;
    background: #edf3f9 !important;
    color: #174f87 !important;
    box-shadow: none !important;
}

html[data-theme] body main #timesheet-mobile-tools > button.meal-allowance-button.selected,
html[data-theme] body main #timesheet-mobile-tools > button.meal-allowance-button[aria-pressed="true" i] {
    border: 1px solid #7c3aed !important;
    background: #f3e8ff !important;
    color: #6d28d9 !important;
    box-shadow: none !important;
}

html[data-theme] body main #timesheet-mobile-tools > button.timesheet-tool-action {
    border-width: 1px !important;
}

html[data-theme] body main #timesheet-mobile-tools > button.meal-allowance-button.selected svg,
html[data-theme] body main #timesheet-mobile-tools > button.meal-allowance-button[aria-pressed="true" i] svg {
    color: #6d28d9 !important;
    stroke: currentColor !important;
}

html[data-theme] body main #timesheet-quick-copy:is(:disabled,.is-unavailable),
html[data-theme] body main #timesheet-submit-office:disabled {
    border: 2px solid #94a3b8 !important;
    background: #e2e8f0 !important;
    background-image: none !important;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html[data-theme] body main #timesheet-quick-copy:is(:disabled,.is-unavailable) :is(span,svg) {
    color: #64748b !important;
    fill: currentColor !important;
    -webkit-text-fill-color: #64748b !important;
}

html[data-theme="dark"] body main #timesheet-mobile-tools > button.meal-allowance-button.selected,
html[data-theme="dark"] body main #timesheet-mobile-tools > button.meal-allowance-button[aria-pressed="true" i] {
    border-color: #8b5cf6 !important;
    background: #352052 !important;
    color: #c4a4ff !important;
}

html[data-theme="dark"] body main #timesheet-mobile-tools > button.meal-allowance-button.selected svg,
html[data-theme="dark"] body main #timesheet-mobile-tools > button.meal-allowance-button[aria-pressed="true" i] svg {
    color: #c4a4ff !important;
}

html[data-theme="dark"] body main #timesheet-quick-copy:is(:disabled,.is-unavailable),
html[data-theme="dark"] body main #timesheet-submit-office:disabled {
    border-color: #64748b !important;
    background: #303742 !important;
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}

html[data-theme="dark"] body main #timesheet-quick-copy:is(:disabled,.is-unavailable) :is(span,svg) {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}

/* Popup allegati del cedolino: due sole azioni, con significato cromatico netto. */
html[data-theme] body .worklog-page .attachment-modal > footer > button.attachment-cancel {
    border: 1px solid #dc2626 !important;
    background: #fee2e2 !important;
    color: #991b1b !important;
    box-shadow: none !important;
}

html[data-theme] body .worklog-page .attachment-modal > footer > button.attachment-confirm:not(:disabled) {
    border: 1px solid #16a34a !important;
    background: #dcfce7 !important;
    color: #166534 !important;
    -webkit-text-fill-color: #166534 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] body .worklog-page .attachment-modal > footer > button.attachment-cancel {
    border-color: #dc2626 !important;
    background: #fee2e2 !important;
    color: #991b1b !important;
}

html[data-theme="dark"] body .worklog-page .attachment-modal > footer > button.attachment-confirm:not(:disabled) {
    border-color: #16a34a !important;
    background: #dcfce7 !important;
    color: #166534 !important;
    -webkit-text-fill-color: #166534 !important;
}

/* La stampa è un documento aziendale: non eredita mai il tema dello schermo. */
@media print {
    html,
    html[data-theme],
    html[data-theme="dark"],
    html[data-theme="colorful"] {
        color-scheme: light !important;
        --ds-color-bg: #f4f7fb;
        --ds-color-page: #edf5fb;
        --ds-color-surface: #ffffff;
        --ds-color-surface-soft: #edf3f9;
        --ds-color-border: #ccd8e5;
        --ds-color-border-strong: #b9c8d8;
        --ds-color-text: #172033;
        --ds-color-muted: #5f6f83;
        --ds-color-text-muted: #5f6f83;
        --ds-color-text-secondary: #34445a;
        --ds-color-primary: #174a84;
        --app-page-bg: #ffffff;
        --app-surface: #ffffff;
        --app-surface-soft: #f5f9fe;
        --app-text: #172033;
        --app-muted: #66758a;
        --app-border: #cfdae8;
        --app-primary: #185abd;
        --app-primary-soft: #e8f1ff;
        --ds-canvas: #ffffff;
        --ds-surface: #ffffff;
        --ds-surface-muted: #edf3f9;
        --ds-text: #172033;
        --ds-text-muted: #5f6f83;
        --ds-border: #ccd8e5;
        --ds-accent: #185abd;
        --ds-input-bg: #ffffff;
        --mh-page: #edf5fb;
        --mh-page-accent: #dff4fa;
        --mh-page-background: #ffffff;
        --mh-page-background-image: none;
        --mh-surface: #ffffff;
        --mh-surface-soft: #f4f8fc;
        --mh-text: #172033;
        --mh-muted: #5e7088;
        --mh-border: #bfd0e2;
        --mh-border-strong: #91aac5;
        --mh-primary: #174a84;
        --mh-primary-hover: #123b6b;
        --mh-primary-text: #ffffff;
        --mh-success: #15803d;
        --mh-success-bg: #dcfce7;
        --mh-danger: #b91c1c;
        --mh-danger-bg: #fee2e2;
        --mh-warning: #92400e;
        --mh-warning-bg: #fef3c7;
        --mh-export: #8a4b00;
        --mh-export-bg: #fff2cc;
        --mh-shadow: none;
    }

    html[data-theme] body,
    html[data-theme] body .ds-app,
    html[data-theme] body .ds-app__main,
    html[data-theme] body .ds-workspace {
        background-color: #ffffff !important;
        background-image: none !important;
        color: #172033 !important;
        box-shadow: none !important;
    }

    html[data-theme] body :is(
        .employee-print-report,
        .inventory-print,
        .training-page,
        .attendance-page
    ) {
        background-color: #ffffff !important;
        background-image: none !important;
        color: #111111 !important;
    }

    /*
       Il documento resta identico al tema chiaro, ma il browser non deve
       rasterizzare ombre, filtri e animazioni per ogni elemento. I colori
       informativi di tabelle, intestazioni e stati restano invece esatti.
    */
    html[data-theme] body *,
    html[data-theme] body *::before,
    html[data-theme] body *::after {
        animation: none !important;
        transition: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        filter: none !important;
        backdrop-filter: none !important;
    }

    html[data-theme] body :is(
        thead,
        tfoot,
        th,
        td,
        .report-header,
        .report-filter-strip,
        .print-heading,
        .matrix-legend,
        .scheduled,
        .valid,
        .warning,
        .expired,
        .disabled,
        .weekend,
        .row-total,
        .search-print-totals
    ) {
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    /*
       Contratto cromatico comune a tutte le stampe. Le regole usano gli
       stessi valori espliciti in modalità chiara, colorata e scura, così
       il tema dell'interfaccia non può più modificare il documento.
    */
    html[data-theme] body :is(
        .employee-print-report,
        .jobs-print-report,
        .search-print-report,
        .meal-print-report,
        .inventory-print,
        .training-page,
        .attendance-page
    ) {
        background: #ffffff !important;
        background-image: none !important;
        color: #111111 !important;
        -webkit-text-fill-color: currentColor;
    }

    html[data-theme] body :is(
        .employee-print-report,
        .jobs-print-report,
        .search-print-report,
        .meal-print-report,
        .inventory-print,
        .training-page,
        .attendance-page
    ) :is(.report-header,.print-heading,.attendance-title-row) {
        background: #ffffff !important;
        background-image: none !important;
        color: #111111 !important;
    }

    html[data-theme] body :is(
        .employee-print-report,
        .jobs-print-report,
        .search-print-report,
        .meal-print-report,
        .inventory-print,
        .training-page,
        .attendance-page
    ) table thead th {
        border-color: #8795a5 !important;
        border-bottom-color: #334155 !important;
        background: #dfe7f0 !important;
        background-image: none !important;
        color: #111111 !important;
        -webkit-text-fill-color: #111111 !important;
    }

    html[data-theme] body :is(
        .employee-print-report,
        .jobs-print-report,
        .search-print-report,
        .meal-print-report,
        .inventory-print,
        .training-page,
        .attendance-page
    ) table tbody th {
        background: #ffffff !important;
        background-image: none !important;
        color: #111111 !important;
        -webkit-text-fill-color: #111111 !important;
    }

    html[data-theme] body :is(
        .employee-print-report,
        .jobs-print-report,
        .search-print-report,
        .meal-print-report,
        .inventory-print,
        .training-page,
        .attendance-page
    ) table tfoot th {
        background: #dfe7f0 !important;
        background-image: none !important;
        color: #111111 !important;
        -webkit-text-fill-color: #111111 !important;
    }
}
/* Google Maps contiene controlli e marker implementati come button. Gli stili
   generali dell'app non devono trasformarli nei pulsanti arrotondati MATEC. */
html[data-theme] body .gm-style :is(button, [role="button"]) {
    box-sizing: content-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-family: Roboto, Arial, sans-serif !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    line-height: normal !important;
    text-decoration: none !important;
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}

html[data-theme] body .gm-style :is(button, [role="button"]):is(:hover, :active, :focus) {
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    transform: none !important;
    box-shadow: none !important;
}
/* Chiusure popup: azione neutra, distinta dalle vere azioni distruttive. */
html[data-theme] body :is(
    button.modal-close,
    button.close-modal,
    button.dialog-close,
    button.legend-close,
    button.job-picker-close
) {
    border-color: var(--mh-border-strong, #91aac5) !important;
    background: var(--mh-surface-soft, #f4f8fc) !important;
    background-image: none !important;
    color: var(--mh-text, #172033) !important;
    -webkit-text-fill-color: var(--mh-text, #172033) !important;
    box-shadow: none !important;
}

/* I badge compatti delle timbrature mantengono il testo nero anche nel tema
   scuro. I grandi comandi operativi IN/OUT del tablet sono esclusi. */
html[data-theme="dark"] body :is(
    .punch-pair > span.punch-in,
    .punch-pair > span.punch-out,
    span.punch-direction.punch-in,
    span.punch-direction.punch-out,
    span.direction.in,
    span.direction.out,
    b.direction.in,
    b.direction.out
),
html[data-theme="dark"] body :is(
    .punch-pair > span.punch-in,
    .punch-pair > span.punch-out,
    span.punch-direction.punch-in,
    span.punch-direction.punch-out,
    span.direction.in,
    span.direction.out,
    b.direction.in,
    b.direction.out
) :is(b, strong, span) {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    text-shadow: none !important;
}