html[data-theme="light"] {
--ds-color-bg: #f4f7fb;
--ds-color-surface: #ffffff;
--ds-color-surface-soft: #edf3f9;
--ds-color-border: #ccd8e5;
--ds-color-text: #172033;
--ds-color-muted: #5f6f83;
--ds-color-text-muted: #5f6f83;
--ds-color-text-secondary: #34445a;
--ds-color-border-strong: #b9c8d8;
color-scheme: light;
}
/* Azioni finali cedolino: regole uniche, anche dopo gli override del tema. */
html[data-theme] .timesheet-save-actions .timesheet-tool-action,
html[data-theme] .timesheet-save-actions .timesheet-tool-action.primary-action {
border: 2px solid #2563a6 !important;
background: #eaf3ff !important;
color: #174f87 !important;
box-shadow: none !important;
opacity: 1 !important;
}
html[data-theme] .timesheet-save-actions .timesheet-tool-action:hover:not(:disabled) {
background: #dbeafe !important;
}
html[data-theme] .timesheet-save-actions .quick-copy-submit.is-available:not(:disabled) {
border: 2px solid #ca8a04 !important;
background: #fef3a7 !important;
color: #713f12 !important;
opacity: 1 !important;
filter: none !important;
box-shadow: 0 9px 22px rgba(202, 138, 4, .18) !important;
}
html[data-theme] .timesheet-save-actions .quick-copy-submit.is-unavailable:disabled {
border: 2px dashed #94a3b8 !important;
background: #dfe4ea !important;
color: #718096 !important;
opacity: .72 !important;
filter: grayscale(1) !important;
box-shadow: none !important;
cursor: not-allowed !important;
}
html[data-theme="dark"] .timesheet-save-actions .timesheet-tool-action {
border-color: #60a5fa !important;
background: #172b46 !important;
color: #bfdbfe !important;
}
html[data-theme="dark"] .timesheet-save-actions .quick-copy-submit.is-available:not(:disabled) {
border-color: #facc15 !important;
background: #3d3512 !important;
color: #fde68a !important;
}
html[data-theme="dark"] .timesheet-save-actions .quick-copy-submit.is-unavailable:disabled {
border-color: #64748b !important;
background: #303742 !important;
color: #94a3b8 !important;
}
/* Un solo accento per tutti i contatori numerici dell'applicazione.
La variabile evita che dashboard e singole pagine tornino a usare
colori differenti tramite regole locali o selettori nth-child. */
html[data-theme] {
--ds-counter-accent: #2f80ed;
}
/* Correzioni finali condivise: queste regole restano in fondo al foglio per
prevalere sugli stili storici delle singole pagine. */
html[data-theme="colorful"] .employees-page .switches .switch {
background: #f7faff !important;
border: 1px solid #b9c9dc !important;
color: #17243a !important;
box-shadow: none !important;
}
html[data-theme="colorful"] .employees-page .switches .switch > span,
html[data-theme="colorful"] .employees-page .switches .switch strong {
color: #17243a !important;
}
html[data-theme="colorful"] .employees-page .switches .switch small,
html[data-theme="colorful"] .employees-page .switches .switch p {
color: #52647a !important;
}
html[data-theme] :is(
.employees-page .actions > button,
.oj-row-actions > button,
.oj-job-actions > button
) {
box-sizing: border-box !important;
min-width: 92px !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 14px !important;
border: 1px solid var(--ds-color-border-strong) !important;
border-radius: 11px !important;
background: var(--ds-color-surface-soft) !important;
color: var(--ds-color-text) !important;
font: 800 13px/1 var(--ds-font-family) !important;
box-shadow: none !important;
}
html[data-theme] :is(.employees-page .actions .cease-action,.oj-job-actions .oj-close-job) {
border-color: #d97706 !important; background: #fff7e6 !important; color: #92400e !important;
}
html[data-theme] :is(.employees-page .actions .danger-action,.oj-row-actions .oj-delete-btn,.oj-job-actions .oj-delete-btn,.oj-delete-confirm) {
border-color: #ef4444 !important; background: #fff5f5 !important; color: #b91c1c !important;
}
html[data-theme] :is(.employees-page .actions .reactivate,.oj-job-actions .oj-reopen-job) {
border-color: #16a34a !important; background: #f0fdf4 !important; color: #166534 !important;
}
html[data-theme="dark"] :is(.employees-page .actions .cease-action,.oj-job-actions .oj-close-job) {
background: rgba(217,119,6,.14) !important; color: #fbbf24 !important;
}
html[data-theme="dark"] :is(.employees-page .actions .danger-action,.oj-row-actions .oj-delete-btn,.oj-job-actions .oj-delete-btn,.oj-delete-confirm) {
background: rgba(239,68,68,.13) !important; color: #fca5a5 !important;
}
html[data-theme="dark"] :is(.employees-page .actions .reactivate,.oj-job-actions .oj-reopen-job) {
background: rgba(34,197,94,.13) !important; color: #86efac !important;
}
/* Nessuna fascia bianca fra i controlli compatti dello storico timbrature. */
html[data-theme] .quick-periods,
html[data-theme] .summary {
width: max-content !important;
max-width: 100% !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
html[data-theme] .quick-periods { gap: 12px !important; }
html[data-theme] .quick-periods .period-button,
html[data-theme] .summary > span {
margin: 0 !important;
box-shadow: none !important;
}
/* Controlli anagrafici condivisi: dipendenti, clienti e commesse usano la
stessa geometria e la stessa semantica cromatica in entrambi i temi. */
html[data-theme] :is(
.employees-page .actions > button,
.oj-row-actions > button,
.oj-job-actions > button
) {
box-sizing:border-box !important;
min-width:92px !important;
height:42px !important;
min-height:42px !important;
padding:0 14px !important;
border:1px solid var(--ds-color-border-strong) !important;
border-radius:11px !important;
background:var(--ds-color-surface-soft) !important;
color:var(--ds-color-text) !important;
font:800 13px/1 var(--ds-font-family) !important;
box-shadow:none !important;
}
html[data-theme] :is(
.employees-page .actions > button:hover,
.oj-row-actions > button:hover,
.oj-job-actions > button:hover
) { border-color:var(--ds-color-primary) !important; color:var(--ds-color-primary) !important; }
html[data-theme] :is(
.employees-page .actions .cease-action,
.oj-job-actions .oj-close-job
) { border-color:#d97706 !important; background:#fff7e6 !important; color:#9a4600 !important; }
html[data-theme] :is(
.employees-page .actions .danger-action,
.oj-row-actions .oj-delete-btn,
.oj-row-actions .oj-delete-confirm,
.oj-job-actions .oj-delete-btn,
.oj-job-actions .oj-delete-confirm
) { border-color:#dc2626 !important; background:#fff1f2 !important; color:#b91c1c !important; }
html[data-theme] :is(
.employees-page .actions .reactivate,
.oj-job-actions .oj-reopen-job
) { border-color:#15803d !important; background:#ecfdf3 !important; color:#166534 !important; }
html[data-theme="dark"] :is(
.employees-page .actions > button,
.oj-row-actions > button,
.oj-job-actions > button
) { border-color:#52627a !important; background:#17243a !important; color:#e8eef8 !important; }
html[data-theme="dark"] :is(.employees-page .actions .cease-action,.oj-job-actions .oj-close-job) {
border-color:#f59e0b !important; background:rgba(245,158,11,.14) !important; color:#fbbf24 !important;
}
html[data-theme="dark"] :is(.employees-page .actions .danger-action,.oj-row-actions .oj-delete-btn,.oj-row-actions .oj-delete-confirm,.oj-job-actions .oj-delete-btn,.oj-job-actions .oj-delete-confirm) {
border-color:#ef4444 !important; background:rgba(239,68,68,.13) !important; color:#fca5a5 !important;
}
html[data-theme="dark"] :is(.employees-page .actions .reactivate,.oj-job-actions .oj-reopen-job) {
border-color:#22c55e !important; background:rgba(34,197,94,.13) !important; color:#86efac !important;
}
/* Le schede con slide della scheda dipendente seguono il tema corrente. */
html[data-theme="colorful"] .employees-page .switches .switch {
border:1px solid #c8d6e7 !important;
background:#f7faff !important;
color:#17243a !important;
box-shadow:none !important;
}
html[data-theme="colorful"] .employees-page .switches .switch > span {
color:#17243a !important;
}
html[data-theme="colorful"] .employees-page .switches .switch small {
color:#53657d !important;
}
html[data-theme="dark"] .employees-page .switches .switch {
border:1px solid #263957 !important;
background:#0b1530 !important;
color:#eaf0fc !important;
}
html[data-theme="dark"] .employees-page .switches .switch > span { color:#eaf0fc !important; }
html[data-theme="dark"] .employees-page .switches .switch small { color:#9cabc3 !important; }
html[data-theme="colorful"] {
--ds-color-bg: #eef7ff;
--ds-color-bg-deep: #f2f8ff;
--ds-color-surface: #ffffff;
--ds-color-surface-soft: #f1f7fd;
--ds-color-border: #d6e2ee;
--ds-color-border-strong: #b9ccdf;
--ds-color-primary: #2563eb;
--ds-color-primary-hover: #1d4ed8;
--ds-color-accent: #0ea5e9;
--ds-color-text: #14213d;
--ds-color-text-secondary: #334155;
--ds-color-text-muted: #64748b;
--ds-color-muted: #66758a;
color-scheme: light;
--app-page-bg:var(--mh-page-background);
--app-surface:#ffffff;--app-surface-soft:#f5f9fe;--app-text:#172033;--app-muted:#66758a;--app-border:#cfdae8;--app-primary:#185abd;--app-primary-soft:#e8f1ff;
}
html[data-theme="light"] { --app-page-bg:var(--mh-page-background);--app-surface:#ffffff;--app-surface-soft:#f7f9fc;--app-text:#172033;--app-muted:#5f6f83;--app-border:#ccd8e5;--app-primary:#4384c5;--app-primary-soft:#edf3f9; }
html[data-theme="dark"] { --app-page-bg:#021024;--app-surface:#0d192c;--app-surface-soft:#111f35;--app-text:#f8fafc;--app-muted:#94a3b8;--app-border:#263851;--app-primary:#38bdf8;--app-primary-soft:#15345c; }
/* Lo sfondo appartiene esclusivamente al contenitore dell'applicazione.
Le singole pagine restano trasparenti e non possono piu divergere. */
html[data-theme="light"] body,
html[data-theme="light"] .ds-app__main {
background: transparent !important;
color: #172033 !important;
}
html[data-theme="light"] :is(.device-page,.worklog-page,.mobile-app) {
background:transparent !important;color:#172033 !important;
}
html[data-theme="light"] .ds-sidebar {
background: #ffffff;
border-right-color: #d8e1eb;
}
html[data-theme="light"] .ds-page-header {
background:transparent !important;
}
html[data-theme="light"] .ds-sidebar :is(a,.ds-sidebar__group-title,strong) { color:#34445a !important }
html[data-theme="light"] .ds-sidebar a span:first-child { color:#4384c5 !important }
html[data-theme="light"] .ds-sidebar a.active {
background:linear-gradient(135deg,#e4efff,#dff7fa) !important;
border-color:#bcd5ef !important;
color:#172033 !important;
}
html[data-theme="light"] :is(.ds-card,.ds-section,.panel,.section,.timesheet-card,.stat-card,.filters,.filters-card,.legend,.calendar-wrapper,.request-card,.month-bar,.people,.conversation,.request-form,.history,.credential-card,.edit-modal,.copy-modal,.modal,.request-modal,.reject-modal,.day-dialog,.oj-panel,.oj-stats article,.oj-modal,.toolbar,.employee-card,.empty-state) {
background: #ffffff !important;
color: #172033 !important;
border-color: #ccd8e5 !important;
}
html[data-theme="light"] :is(h1,h2,h3,h4,strong,label,.info h2,.topbar h1) { color: #172033 !important; }
html[data-theme="light"] :is(p,small,.setting-field__help,.topbar p) { color: #5f6f83 !important; }
html[data-theme="light"] :is(.setting-field__label,.switch-card__copy>span,.ds-section__description) { color:#34445a !important }
html[data-theme="light"] :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.input-with-unit) {
background: #ffffff !important;
color: #172033 !important;
border-color: #b9c8d8 !important;
box-shadow: none !important;
}
html[data-theme="light"] .input-with-unit > span { background:#edf3f9;color:#52657a;border-left-color:#b9c8d8 }
html[data-theme="light"] option { background:#ffffff !important;color:#172033 !important }
html[data-theme="light"] :is(.note-box,.initial-status,.oj-enabled-field,.oj-job-row,.punch-row,.detail-card,.empty-day-card) {
background:#f7f9fc !important;
color:#172033 !important;
border-color:#d5dfeb !important;
}
html[data-theme="light"] :is(.attendance-table thead th,.employee-column,.employee-name,.total-value) {
background:#e8eef6 !important;
color:#172033 !important;
}
html[data-theme="light"] .attendance-table td { background:#ffffff;color:#172033 }
html[data-theme="light"] .attendance-table td.present { background:#dff3e6 !important;color:#075b2a !important }
html[data-theme="light"] .attendance-table td.vacation { background:#dce9ff !important;color:#174f8b !important }
html[data-theme="light"] .attendance-table td.permit { background:#fff0c9 !important;color:#6b4700 !important }
html[data-theme="light"] .attendance-table td.sick { background:#fde0e0 !important;color:#842029 !important }
html[data-theme="light"] .attendance-table td.injury { background:#eee0fb !important;color:#63348f !important }
html[data-theme="light"] .attendance-table td.pending { background:repeating-linear-gradient(135deg,#e4e9f0,#e4e9f0 6px,#d3dae4 6px,#d3dae4 12px) !important;color:#334155 !important }
html[data-theme="light"] .attendance-table td.anomaly { background:#f8d9e1 !important;color:#842029 !important }
html[data-theme="light"] .attendance-table td.weekend { background:#e8edf3 !important;color:#526174 !important }
html[data-theme="light"] :is(.oj-customer-main strong,.oj-job-title,.oj-panel-toolbar h2,.oj-empty strong,.month-toolbar strong,.employee-name strong) { color:#172033 !important }
html[data-theme="light"] :is(.oj-customer-main span,.oj-job-description,.oj-job-created,.oj-panel-toolbar p,.legend,.employee-name span) { color:#5f6f83 !important }
html[data-theme="light"] :is(.oj-icon-btn,.oj-job-actions button) { color:#275f9a !important;background:#edf5ff !important }
html[data-theme="light"] .oj-add-btn { color:#7042a6 !important;background:#f4edff !important }
html[data-theme="light"] :is(.modal-backdrop,.oj-modal-backdrop,.day-dialog-backdrop) { background:rgba(23,32,51,.45) !important }
html[data-theme="light"] :is(.day-dialog-header,.day-dialog-actions) { background:#edf3f9 !important }
html[data-theme="light"] input[type="checkbox"] { color-scheme:light; }
html[data-theme="colorful"] body,
html[data-theme="colorful"] .ds-app__main {
background:transparent !important;
color:#14213d !important;
}
html[data-theme="colorful"] :is(.device-page,.worklog-page,.mobile-app) {
background:transparent !important;
color:#14213d !important;
}
html[data-theme="colorful"] .ds-sidebar {
background:linear-gradient(180deg,#ffffff,#f6f9fd);
border-right-color:#d5dfeb;
}
html[data-theme="colorful"] .ds-sidebar :is(a,.ds-sidebar__group-title,strong) { color:#35445a !important }
html[data-theme="colorful"] .ds-sidebar a span:first-child { color:#185abd !important }
html[data-theme="colorful"] .ds-sidebar a.active {
background:linear-gradient(135deg,#dceaff,#dcf6ff) !important;
border-color:#9fc4ec !important;
color:#123f75 !important;
}
html[data-theme="colorful"] .ds-page-header {
background:transparent !important;
}
html[data-theme="colorful"] :is(.ds-card,.ds-section,.panel,.section,.timesheet-card,.stat-card,.filters,.filters-card,.legend,.calendar-wrapper,.request-card,.month-bar,.people,.conversation,.request-form,.history,.credential-card,.edit-modal,.copy-modal,.modal,.request-modal,.reject-modal,.day-dialog,.oj-panel,.oj-stats article,.oj-modal,.toolbar,.employee-card,.empty-state) {
background:#ffffff !important;
color:#202124 !important;
border-color:#ced9e6 !important;
box-shadow:0 12px 30px rgba(36,58,86,.11) !important;
}
html[data-theme="colorful"] :is(h1,h2,h3,h4,strong,label,.info h2,.topbar h1) { color:#202124 !important }
html[data-theme="colorful"] :is(p,small,.setting-field__help,.topbar p,.ds-section__description) { color:#66758a !important }
html[data-theme="colorful"] :is(.setting-field__label,.switch-card__copy>span) { color:#3f4b5b !important }
html[data-theme="colorful"] :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea,.input-with-unit) {
background:#ffffff !important;
color:#202124 !important;
border-color:#afbdd0 !important;
box-shadow:none !important;
}
html[data-theme="colorful"] option { background:#ffffff !important;color:#202124 !important }
html[data-theme="colorful"] .input-with-unit>span { background:#e7f0fb;color:#31577e;border-left-color:#afbdd0 }
html[data-theme="colorful"] :is(.note-box,.initial-status,.oj-enabled-field,.oj-job-row,.punch-row,.detail-card,.empty-day-card) {
background:#f7f9fc !important;
color:#202124 !important;
border-color:#d5dfeb !important;
}
html[data-theme="colorful"] :is(.attendance-table thead th,.employee-column,.employee-name,.total-value) {
background:#e4edf8 !important;
color:#202124 !important;
}
html[data-theme="colorful"] .attendance-table td { background:#ffffff;color:#202124 }
html[data-theme="colorful"] .attendance-table td.present { background:#d8f1e1 !important;color:#075b2a !important }
html[data-theme="colorful"] .attendance-table td.vacation { background:#d9e8ff !important;color:#174f8b !important }
html[data-theme="colorful"] .attendance-table td.permit { background:#ffedbf !important;color:#6b4700 !important }
html[data-theme="colorful"] .attendance-table td.sick { background:#fbdada !important;color:#842029 !important }
html[data-theme="colorful"] .attendance-table td.injury { background:#ead9f8 !important;color:#63348f !important }
html[data-theme="colorful"] .attendance-table td.pending { background:repeating-linear-gradient(135deg,#dfe5ed,#dfe5ed 6px,#cbd4df 6px,#cbd4df 12px) !important;color:#334155 !important }
html[data-theme="colorful"] .attendance-table td.anomaly { background:#f5d3dc !important;color:#842029 !important }
html[data-theme="colorful"] .attendance-table td.weekend { background:#e4e9ef !important;color:#526174 !important }
html[data-theme="colorful"] :is(.oj-customer-main strong,.oj-job-title,.oj-panel-toolbar h2,.oj-empty strong,.month-toolbar strong,.employee-name strong) { color:#202124 !important }
html[data-theme="colorful"] :is(.oj-customer-main span,.oj-job-description,.oj-job-created,.oj-panel-toolbar p,.legend,.employee-name span) { color:#66758a !important }
html[data-theme="colorful"] :is(.modal-backdrop,.oj-modal-backdrop,.day-dialog-backdrop) { background:rgba(32,33,36,.42) !important }
html[data-theme="colorful"] :is(.day-dialog-header,.day-dialog-actions) { background:#edf4fc !important }
html[data-theme="colorful"] :is(.oj-icon-btn,.oj-job-actions button) { color:#185abd !important;background:#e8f1ff !important }
html[data-theme="colorful"] .oj-add-btn { color:#7b3fb1 !important;background:#f4eaff !important }
html[data-theme="colorful"] :is(.ds-btn--primary,.new-button,.today-button,.oj-btn-customer,.oj-btn-job) {
background:linear-gradient(135deg,#185abd,#00a4ef) !important;
color:#ffffff !important;
}
/* Contatori: stesso colore in Richieste, Cedolini, Clienti/commesse,
Esportazione paghe, Chiusura mensile e Notifiche. */
html[data-theme] :is(
.stat-card,
.oj-stats article,
.kpi-grid article,
.payroll-page .summary article,
.month-close-page .checks article,
.notification-grid a
) {
border-color:var(--mh-border) !important;
border-top: 4px solid var(--ds-counter-accent) !important;
background:var(--mh-surface) !important;
color:var(--mh-text) !important;
}
html[data-theme] .dashboard-stat {
--stat-accent: var(--ds-counter-accent) !important;
border-color:var(--mh-border) !important;
border-top:4px solid var(--ds-counter-accent) !important;
background:var(--mh-surface) !important;
color:var(--mh-text) !important;
}
html[data-theme="colorful"] .filter-toggle input:checked+span {
box-shadow:0 3px 10px rgba(36,58,86,.18) !important;
}
/* Copertura comune per finestre e controlli introdotti nelle singole pagine.
Mantiene i colori locali solo nel tema scuro. */
html:is([data-theme="light"],[data-theme="colorful"]) :is(
.job-picker-modal,.office-picker,.office-picker-fields,.job-picker-search,
.office-adjustment,.rejection-reason,.message-editor,.message-thread,
.employee-editor,.employee-form,.vacation-form,.request-detail,
.dialog-card,.modal-content,.drawer,.sheet,.popover-panel,
.small-row,.corrections-box,.warning-box,.credential-code,
.device-card,.conversation-header,.conversation-body
) {
background:#ffffff !important;
color:#202b3a !important;
border-color:#cbd8e7 !important;
box-shadow:0 16px 42px rgba(36,58,86,.13) !important;
}
/* Area dipendente e app: le stesse superfici seguono sempre il tema scelto. */
html :is(.mobile-app,.employee-request-page,.employee-messages,.worklog-page,.hours-app,.mobile-settings-page) {
background:transparent !important;color:var(--app-text) !important;
}
html :is(.mobile-app,.employee-request-page,.employee-messages,.worklog-page,.hours-app,.mobile-settings-page) :is(
.access-card,.request-form,.history,.panel,.thread,.composer,.month-picker,.hours-kpis>div,.hours-list,.empty,
.mobile-menu,.month-summary>div,.qr-panel,.mobile-login,.mobile-settings-card,.mobile-settings-note
) {
background:var(--app-surface) !important;color:var(--app-text) !important;border-color:var(--app-border) !important;
}
html :is(.mobile-app,.employee-request-page,.employee-messages,.worklog-page,.hours-app,.mobile-settings-page) :is(h1,h2,h3,h4,strong,label) { color:var(--app-text) !important; }
html :is(.mobile-app,.employee-request-page,.employee-messages,.worklog-page,.hours-app,.mobile-settings-page) :is(p,small,.muted) { color:var(--app-muted) !important; }
html :is(.mobile-app,.employee-request-page,.employee-messages,.worklog-page,.hours-app,.mobile-settings-page) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
background:var(--app-surface-soft) !important;color:var(--app-text) !important;border-color:var(--app-border) !important;
}
html[data-theme="colorful"] :is(.employee-request-page,.employee-messages,.worklog-page,.hours-app) :is(.topbar,.conversation-header,.section-heading,.month-picker) {
background:linear-gradient(135deg,#e8f1ff,#eefcf8) !important;border-color:#bed5e8 !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .settings-footer {
background:var(--ds-color-surface) !important;border-color:var(--ds-color-border) !important;
}
/* Cedolino dipendente: stati e confronto con l'ufficio restano leggibili
anche quando i componenti locali definiscono colori pensati per il tema scuro. */
html:is([data-theme="light"],[data-theme="colorful"]) .worklog-page :is(
.office-reason,.correction-comparison article,.validated-readonly-panel,
.balance.not-required,.balance.in-progress
) {
background:var(--app-surface-soft) !important;
color:var(--app-text) !important;
border-color:var(--app-border) !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .worklog-page .submitted-version {
background:#f3f6fa !important;border-color:#cbd8e7 !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .worklog-page .revised-version {
background:#e8f7ed !important;border-color:#86bf99 !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .worklog-page .correction-comparison pre {
color:var(--app-text) !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .worklog-page .office-reason p {
color:var(--app-muted) !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .worklog-page .day-strip button.missing {
/* Il rosso identifica esclusivamente un cedolino anomalo. Un cedolino
mancante resta neutro e viene riconosciuto dalla X sotto la data. */
background:#fff !important;border-color:#d7e0ea !important;color:#64748b !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .worklog-page .day-strip button.incomplete {
background:#fff1cc !important;border-color:#d69b24 !important;color:#6b4700 !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .worklog-page .day-strip button.complete,
html:is([data-theme="light"],[data-theme="colorful"]) .worklog-page .day-strip button.holiday-ready {
background:#e2f5e8 !important;border-color:#72b78a !important;color:#075b2a !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .worklog-page .day-strip button.awaiting-copy {
background:#e8f1ff !important;border-color:#72a7df !important;color:#174f8b !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .worklog-page .day-strip button.office-adjusted {
background:#f1eaff !important;border-color:#aa86d4 !important;color:#63348f !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .worklog-page .day-strip button :is(span,strong) {
color:inherit !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .worklog-page .balance.ok {
background:#e2f5e8 !important;color:#075b2a !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .worklog-page .balance.warning {
background:#fff1cc !important;color:#6b4700 !important;
}
/* Presenze, dispositivi e richieste: palette di stato ad alto contrasto. */
html[data-theme="colorful"] .attendance-table td.present span { color:#075b2a !important; }
html[data-theme="colorful"] .attendance-table td.vacation span { color:#174f8b !important; }
html[data-theme="colorful"] .attendance-table td.permit span { color:#6b4700 !important; }
html[data-theme="colorful"] .attendance-table td.sick span,
html[data-theme="colorful"] .attendance-table td.anomaly span { color:#842029 !important; }
html[data-theme="colorful"] .attendance-table td.injury span { color:#63348f !important; }
html[data-theme="colorful"] .device-title .disabled,
html[data-theme="colorful"] .history em.rejected {
background:#fde8e8 !important;color:#842029 !important;border-color:#dc6b6b !important;
}
/* Expanded master/detail areas must follow the selected office theme too. */
html:is([data-theme="light"],[data-theme="colorful"]) :is(
.employee-expanded,.employees-page .details,.employees-page .subsection,
.oj-customer-item.oj-expanded,.oj-jobs-area
) {
background:var(--ds-color-surface) !important;
color:var(--ds-color-text) !important;
border-color:var(--ds-color-border) !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) :is(
.employees-page .detail,.employees-page .rule-row,.employees-page .status-row,
.oj-jobs-area .oj-job-row,.oj-jobs-area .oj-no-jobs
) {
background:var(--ds-color-surface-soft) !important;
color:var(--ds-color-text) !important;
border-color:var(--ds-color-border) !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .punches-page .summary,
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main > .page .summary {
background:var(--ds-color-surface) !important;
color:var(--ds-color-text) !important;
border-color:var(--ds-color-border) !important;
box-shadow:0 12px 30px rgba(36,58,86,.10) !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .device-page :is(button,a) {
background:#edf4fc !important;
color:#203f63 !important;
border-color:#c2d2e3 !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .device-page > header button,
html:is([data-theme="light"],[data-theme="colorful"]) .device-page .modal-actions .primary {
background:linear-gradient(135deg,#185abd,#00a4ef) !important;
color:#fff !important;
border-color:transparent !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) :is(.kiosk-card,.test-access) {
background:var(--app-surface) !important;
color:var(--app-text) !important;
border-color:var(--app-border) !important;
box-shadow:0 16px 38px rgba(36,58,86,.12) !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .worklog-page .access-card > a {
background:var(--app-primary) !important;
color:#fff !important;
border-color:transparent !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main :is(
.quick-periods,.day-card,.punch-summary,.punch-list,.quality-card,.quality-row
) {
background:var(--ds-color-surface) !important;
color:var(--ds-color-text) !important;
border-color:var(--ds-color-border) !important;
box-shadow:0 12px 30px rgba(36,58,86,.10) !important;
}
html[data-theme="colorful"] .ds-app__main :is(.quick-periods,.punch-summary,.quality-card) {
background:#ffffff !important;
border-color:#ced9e6 !important;
}
html[data-theme="dark"] :is(.mobile-app,.employee-request-page,.employee-messages,.worklog-page,.hours-app,.mobile-settings-page) :is(.mobile-menu,.qr-panel,.month-summary>div,.mobile-login) {
background:var(--app-surface) !important;color:var(--app-text) !important;border-color:var(--app-border) !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) :is(
.device-page article,.device-page .windows>div,.worklog-page .panel,
.worklog-page .summary,.worklog-page .copy,.worklog-page .validated-toolbar button,
.mobile-app .qr-card,.mobile-app .mobile-menu,.employee-messages .thread,
.employee-messages .composer,.revision-requests,.revision-requests article
) {
background:#ffffff !important;color:#172033 !important;border-color:#cbd8e7 !important;
box-shadow:0 12px 30px rgba(36,58,86,.10) !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) :is(
.device-page,.worklog-page,.mobile-app,.employee-messages
) :is(h1,h2,h3,strong,label) { color:#172033 !important; }
html:is([data-theme="light"],[data-theme="colorful"]) :is(
.device-page,.worklog-page,.mobile-app,.employee-messages
) :is(p,small,span) { color:#5f6f83; }
html[data-theme="colorful"] :is(
.job-picker-modal,.office-picker,.employee-editor,.vacation-form,
.request-detail,.dialog-card,.modal-content,.drawer,.sheet
) {
background:#ffffff !important;
background-image:none !important;
border-color:#ced9e6 !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) :is(
.job-picker-modal,.office-picker,.edit-modal,.copy-modal,.request-modal,
.reject-modal,.employee-editor,.vacation-form,.request-detail,.dialog-card
) :is(h1,h2,h3,h4,strong,label,span) {
color:#202b3a !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) :is(
.job-picker-modal,.office-picker,.edit-modal,.copy-modal,.request-modal,
.reject-modal,.employee-editor,.vacation-form,.request-detail,.dialog-card
) :is(p,small) {
color:#64748b !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) :is(
.job-picker-modal,.office-picker,.edit-modal,.copy-modal,.request-modal,
.reject-modal,.employee-editor,.vacation-form,.request-detail,.dialog-card,
.filters,.toolbar
) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
background:#ffffff !important;
color:#172033 !important;
border-color:#b8c7d8 !important;
color-scheme:light;
}
html:is([data-theme="light"],[data-theme="colorful"]) :is(
.job-quick-grid button,.office-quick-jobs button,.office-job-picker-trigger,
.job-picker-trigger,.small-row,.edit-job-description,.conversation-row,
.message-bubble,.history-row,.credential-code
) {
background:#edf4fc !important;
color:#20344d !important;
border-color:#c2d2e3 !important;
}
html[data-theme="colorful"] :is(
.job-quick-grid button,.office-quick-jobs button,.office-job-picker-trigger,
.job-picker-trigger
) {
background:linear-gradient(135deg,#e8f1ff,#f1eaff) !important;
border-color:#b7c9e8 !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) :is(
.modal-backdrop,.oj-modal-backdrop,.day-dialog-backdrop,
.job-picker-backdrop,.office-picker-backdrop,.mobile-menu-backdrop
) {
background:rgba(38,53,73,.38) !important;
}
/* Contrasto WCAG-friendly per il tema Colorato. */
html[data-theme="colorful"] {
--ds-color-text-muted:#4b5d73;
--ds-color-muted:#4b5d73;
--app-muted:#4b5d73;
}
html[data-theme="colorful"] :is(p,small,.setting-field__help,.topbar p,.ds-section__description,
.oj-customer-main span,.oj-job-description,.oj-job-created,.employee-name span,
.comparison-legend,.bar-label span,td small) {
color:#4b5d73 !important;
}
html[data-theme="colorful"] :is(
.pill.ok,.pill.approved,.oj-status-active,.oj-job-status-open,
.status.ok,.direction.in,.punch-in,.history em.approved,
.delta.positive,.positive-text,.device-title .enabled
) {
color:#075b2a !important;
background:#d9f2e2 !important;
border-color:#79bd91 !important;
}
html[data-theme="colorful"] :is(.ds-alert--success,.message.success,.success-message) {
color:#075b2a !important;
background:#e7f7ec !important;
border-color:#79bd91 !important;
}
html[data-theme="colorful"] :is(button,a).primary,
html[data-theme="colorful"] :is(.ds-btn--primary,.new-button,.today-button,.apply-button,.add-job-button) {
color:#ffffff !important;
text-shadow:0 1px 1px rgba(0,0,0,.18);
}
/* La navigazione ufficio non espone le funzioni riservate a tablet/dipendente.
La regola mantiene coerente anche un'anteprima avviata prima dell'aggiornamento del componente. */
.ds-sidebar__nav a[href="/dashboard"],
.ds-sidebar__nav a[href="/timeclock"],
.ds-sidebar__nav a[href="/timesheet"],
.ds-sidebar__nav a[href="/messages"] {
display:none !important;
}
.ds-sidebar__nav .ds-sidebar__group:has(> a[href="/dashboard"]) > .ds-sidebar__group-title {
display:none !important;
}
/* Azioni irreversibili: stesso significato visivo in tutte le pagine e in tutti i temi. */
html :is(button,a).danger,
html :is(button,a).danger-action,
html :is(button,a).oj-delete-btn,
html :is(button,a).oj-delete-confirm {
background:#b4232f !important;
color:#ffffff !important;
border-color:#dc3545 !important;
}
html :is(button,a).cease-action {
background:#ca8a04 !important;
color:#ffffff !important;
border-color:#facc15 !important;
}
/* ================================================================
CONTRASTO E COMPONENTI CONDIVISI
Questa sezione è intenzionalmente finale: neutralizza i colori
storici delle singole pagine e rende prevedibili entrambi i temi.
================================================================ */
html[data-theme="colorful"] .ds-sidebar {
color:#1d2c42 !important;
}
html[data-theme="colorful"] .ds-sidebar :is(a,.ds-sidebar__group-title,.ds-sidebar__brand-copy,strong) {
color:#263a55 !important;
}
html[data-theme="colorful"] .ds-sidebar a.active,
html[data-theme="colorful"] .ds-sidebar a.active :is(span,strong) {
color:#0e3d72 !important;
}
html[data-theme="dark"] .ds-sidebar :is(a,.ds-sidebar__group-title,.ds-sidebar__brand-copy,strong) {
color:#dce7f6 !important;
}
html[data-theme="dark"] .ds-sidebar :is(p,small) { color:#aebed2 !important; }
html:is([data-theme="colorful"],[data-theme="light"]) .ds-app__main :is(
button:not(.primary):not(.danger):not(.danger-action):not(.cease-action),
a.dialog-action:not(.primary),.ds-btn--secondary,.cancel,.secondary
) {
color:#173d6b !important;
background:#f5f9fe !important;
border-color:#aebfd2 !important;
text-shadow:none !important;
}
html:is([data-theme="colorful"],[data-theme="light"]) .ds-app__main :is(
button:not(.primary):not(.danger):not(.danger-action):not(.cease-action),
a.dialog-action:not(.primary),.ds-btn--secondary,.cancel,.secondary
):hover:not(:disabled) {
color:#0e3d72 !important;
background:#e3effc !important;
border-color:#4f87c2 !important;
}
html[data-theme="dark"] .ds-app__main :is(
button:not(.primary):not(.danger):not(.danger-action):not(.cease-action),
a.dialog-action:not(.primary),.ds-btn--secondary,.cancel,.secondary
) {
color:#e5edf8 !important;
background:#17263c !important;
border-color:#50647f !important;
text-shadow:none !important;
}
html[data-theme="dark"] .ds-app__main :is(
button:not(.primary):not(.danger):not(.danger-action):not(.cease-action),
a.dialog-action:not(.primary),.ds-btn--secondary,.cancel,.secondary
):hover:not(:disabled) {
color:#ffffff !important;
background:#213a59 !important;
border-color:#75a7dc !important;
}
html .ds-app__main :is(button,a,[role="button"]):disabled,
html .ds-app__main :is(button,a,[role="button"])[aria-disabled="true"] {
opacity:1 !important;
cursor:not-allowed !important;
}
html:is([data-theme="colorful"],[data-theme="light"]) .ds-app__main :is(button,a,[role="button"]):disabled,
html:is([data-theme="colorful"],[data-theme="light"]) .ds-app__main :is(button,a,[role="button"])[aria-disabled="true"] {
color:#52657b !important;
background:#e6edf5 !important;
border-color:#b7c5d5 !important;
}
html[data-theme="dark"] .ds-app__main :is(button,a,[role="button"]):disabled,
html[data-theme="dark"] .ds-app__main :is(button,a,[role="button"])[aria-disabled="true"] {
color:#aebed2 !important;
background:#111d2e !important;
border-color:#3e5068 !important;
}
html:is([data-theme="colorful"],[data-theme="light"]) .ds-app__main :is(
input:not([type="checkbox"]):not([type="radio"]),select,textarea
)::placeholder { color:#66778c !important; opacity:1; }
html[data-theme="dark"] .ds-app__main :is(
input:not([type="checkbox"]):not([type="radio"]),select,textarea
)::placeholder { color:#9bacc1 !important; opacity:1; }
html:is([data-theme="colorful"],[data-theme="light"]) .ds-app__main :is(
.badge,.pill,.status,.state,.tag,.delta,.punch-direction,.recipient-count
) { font-weight:800; }
html[data-theme="dark"] .ds-app__main :is(.pill.ok,.status.ok,.delta.positive,.punch-in) {
color:#a7f3c5 !important;background:#123d2b !important;border-color:#31845b !important;
}
html[data-theme="dark"] .ds-app__main :is(.pill.warning,.status.warning,.delta.warning,.anomaly-count) {
color:#fde68a !important;background:#4a3510 !important;border-color:#a87918 !important;
}
html[data-theme="dark"] .ds-app__main :is(.pill.danger,.status.danger,.delta.negative,.punch-out) {
color:#fecaca !important;background:#4a1d25 !important;border-color:#a94450 !important;
}
html:is([data-theme="colorful"],[data-theme="light"]) .ds-app__main :is(
.modal,.day-dialog,.request-modal,.reject-modal,.edit-modal,.copy-modal,.oj-modal,
.popover-panel,.recipient-menu
) { color:#172033 !important;background:#ffffff !important;border-color:#c5d3e2 !important; }
html[data-theme="dark"] .ds-app__main :is(
.modal,.day-dialog,.request-modal,.reject-modal,.edit-modal,.copy-modal,.oj-modal,
.popover-panel,.recipient-menu
) { color:#eef4ff !important;background:#0f1b2e !important;border-color:#334760 !important; }
html:is([data-theme="colorful"],[data-theme="light"]) .ds-app__main :is(th,.table-label,.field>label,.filters label>span) {
color:#34475f !important;
}
html[data-theme="dark"] .ds-app__main :is(th,.table-label,.field>label,.filters label>span) {
color:#c7d5e7 !important;
}
/* Vocabolario unico delle azioni: le pagine devono scegliere soltanto il
significato del comando, mentre forma e contrasto restano centralizzati. */
html .ds-app__main :is(button,a).primary,
html .ds-app__main :is(.ds-btn--primary,.new-button,.today-button,.apply-button,.refresh-button,.stock-add) {
min-height:42px;
border:1px solid transparent !important;
border-radius:11px;
background:linear-gradient(135deg,#2563eb,#089fd1) !important;
color:#ffffff !important;
font-weight:850 !important;
text-shadow:0 1px 1px rgba(0,0,0,.16);
box-shadow:0 5px 14px rgba(37,99,235,.18);
}
html .ds-app__main :is(button,a).primary:hover:not(:disabled),
html .ds-app__main :is(.ds-btn--primary,.new-button,.today-button,.apply-button,.refresh-button,.stock-add):hover:not(:disabled) {
background:linear-gradient(135deg,#1d4ed8,#087fa8) !important;
color:#ffffff !important;
}
html .ds-app__main :is(button,a).success,
html .ds-app__main :is(.fulfill,.reactivate) {
border-color:#15803d !important;background:#15803d !important;color:#fff !important;
}
html .ds-app__main :is(button,a).warning,
html .ds-app__main :is(.cease-action,.oj-close-job) {
border-color:#ca8a04 !important;background:#ca8a04 !important;color:#fff !important;
}
html .ds-app__main :is(button,a).danger,
html .ds-app__main :is(.danger-action,.reject,.oj-delete-btn,.oj-delete-confirm) {
border-color:#b4232f !important;background:#b4232f !important;color:#fff !important;
}
/* Le barre di scelta rapida non sono schede: i pulsanti devono restare
elementi separati sullo sfondo della pagina. */
html .ds-app__main .quick-periods {
width:max-content !important;
max-width:100%;
padding:0 !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}
/* Dipendenti: i controlli devono seguire il tema globale, anche dentro il popup. */
html:is([data-theme="light"],[data-theme="colorful"]) .employees-page .toolbar,
html:is([data-theme="light"],[data-theme="colorful"]) .employees-page .toolbar label,
html:is([data-theme="light"],[data-theme="colorful"]) .employees-page .switch,
html:is([data-theme="light"],[data-theme="colorful"]) .employees-page .credential-card {
background: var(--ds-color-surface) !important;
border-color: var(--ds-color-border) !important;
color: var(--ds-color-text) !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .employees-page .switch small,
html:is([data-theme="light"],[data-theme="colorful"]) .employees-page .switch span,
html:is([data-theme="light"],[data-theme="colorful"]) .employees-page .switch strong,
html:is([data-theme="light"],[data-theme="colorful"]) .employees-page .credential-card p {
color: var(--ds-color-text-muted) !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .employees-page .switch > span,
html:is([data-theme="light"],[data-theme="colorful"]) .employees-page .switch strong {
color: var(--ds-color-text) !important;
}
html[data-theme="dark"] .employees-page .toolbar,
html[data-theme="dark"] .employees-page .toolbar label,
html[data-theme="dark"] .employees-page .switch,
html[data-theme="dark"] .employees-page .credential-card {
background: var(--ds-color-surface) !important;
border-color: var(--ds-color-border) !important;
color: var(--ds-color-text) !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .employees-page .credential-card .pill.warning {
border: 1px solid #d97706 !important;
background: #fef3c7 !important;
color: #78350f !important;
font-weight: 900 !important;
}
html[data-theme="dark"] .employees-page .credential-card .pill.warning {
border: 1px solid #f59e0b !important;
background: rgba(245, 158, 11, .18) !important;
color: #fde68a !important;
font-weight: 900 !important;
}
/* Azioni coerenti per dipendenti, clienti e commesse. */
html[data-theme] .employees-page .cease-action,
html[data-theme] .oj-job-actions .oj-close-job {
border: 1px solid #d97706 !important;
background: #fffbeb !important;
color: #9a3f00 !important;
font-weight: 850 !important;
}
html[data-theme] .employees-page .danger-action,
html[data-theme] .oj-delete-btn {
border: 1px solid #dc2626 !important;
background: #fff5f5 !important;
color: #b91c1c !important;
font-weight: 850 !important;
}
html[data-theme="dark"] .employees-page .cease-action,
html[data-theme="dark"] .oj-job-actions .oj-close-job {
border-color: #f59e0b !important;
background: rgba(245, 158, 11, .14) !important;
color: #fbbf24 !important;
}
html[data-theme="dark"] .employees-page .danger-action,
html[data-theme="dark"] .oj-delete-btn {
border-color: #ef4444 !important;
background: rgba(239, 68, 68, .13) !important;
color: #fca5a5 !important;
}
/* Unica grammatica delle azioni anagrafiche: dipendenti, clienti e commesse. */
html[data-theme] :is(
.employees-page .actions > button,
.oj-row-actions > button,
.oj-job-actions > button
) {
min-height: 42px !important;
height: 42px !important;
padding: 0 15px !important;
border-radius: 10px !important;
font-size: 14px !important;
line-height: 1 !important;
font-weight: 800 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) :is(
.employees-page .actions > button:not(.cease-action):not(.danger-action),
.oj-row-actions > button:not(.oj-delete-btn):not(.oj-delete-confirm),
.oj-job-actions > button:not(.oj-close-job):not(.oj-delete-btn):not(.oj-delete-confirm)
) {
border: 1px solid #b9cbe0 !important;
background: #f7faff !important;
color: #173e70 !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) :is(
.employees-page .cease-action,
.oj-job-actions .oj-close-job
) {
border: 1px solid #d97706 !important;
background: #fffbeb !important;
color: #9a3f00 !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) :is(
.employees-page .danger-action,
.oj-row-actions .oj-delete-btn,
.oj-job-actions .oj-delete-btn
) {
border: 1px solid #dc2626 !important;
background: #fff5f5 !important;
color: #b91c1c !important;
}
html[data-theme="dark"] :is(
.employees-page .actions > button:not(.cease-action):not(.danger-action):not(.reactivate),
.oj-row-actions > button:not(.oj-delete-btn):not(.oj-delete-confirm),
.oj-job-actions > button:not(.oj-close-job):not(.oj-delete-btn):not(.oj-delete-confirm):not(.oj-reopen-job)
) {
border: 1px solid #3b4d68 !important;
background: #16243a !important;
color: #e2e8f0 !important;
}
html[data-theme] :is(.employees-page .reactivate,.oj-job-actions .oj-reopen-job) {
border: 1px solid #16a34a !important;
background: rgba(22, 163, 74, .12) !important;
color: #15803d !important;
}
html[data-theme="dark"] :is(.employees-page .reactivate,.oj-job-actions .oj-reopen-job) {
border-color: #22c55e !important;
background: rgba(34, 197, 94, .14) !important;
color: #86efac !important;
}
/* Navigazione mensile identica in Cedolini e Presenze/assenze. */
html[data-theme] .ds-app__main :is(.month-bar,.month-toolbar) {
width: max-content !important;
max-width: 100% !important;
min-height: 52px !important;
margin: 0 auto 18px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 20px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
html[data-theme] .ds-app__main :is(.month-bar,.month-toolbar) > button {
flex: 0 0 52px !important;
width: 52px !important;
height: 52px !important;
min-height: 52px !important;
padding: 0 !important;
border: 1px solid var(--ds-color-border) !important;
border-radius: 16px !important;
background: var(--ds-color-surface) !important;
color: var(--ds-color-text) !important;
font-size: 22px !important;
line-height: 1 !important;
}
html[data-theme] .ds-app__main :is(.month-bar,.month-toolbar) > strong {
min-width: 270px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: var(--ds-color-text) !important;
text-align: center !important;
text-transform: capitalize !important;
font-size: 27px !important;
line-height: 1.2 !important;
}
/* La disposizione delle commesse e delle relative azioni viene gestita dalla
pagina in base alla larghezza effettiva del pannello. Non imporre qui una
griglia globale: la riga contiene sei celle e una griglia rigida basata sul
viewport non tiene conto del menu laterale. */
html[data-theme] .office-equipment .manual-delivery > label:first-child,
html[data-theme] .office-equipment .manual-delivery > .employee-selector {
grid-column: 1 / -1 !important;
width: 100% !important;
}
/* Ultimo livello di coerenza: prevale sui fogli isolati delle vecchie pagine. */
html[data-theme="colorful"] .employees-page .switches .switch,
html[data-theme="light"] .employees-page .switches .switch {
background: #f7faff !important;
border: 1px solid #b9c9dc !important;
color: #17243a !important;
box-shadow: none !important;
}
html:is([data-theme="colorful"],[data-theme="light"]) .employees-page .switches .switch > span,
html:is([data-theme="colorful"],[data-theme="light"]) .employees-page .switches .switch strong {
color: #17243a !important;
}
html:is([data-theme="colorful"],[data-theme="light"]) .employees-page .switches .switch small,
html:is([data-theme="colorful"],[data-theme="light"]) .employees-page .switches .switch p {
color: #52647a !important;
}
/* Il popup dipendente viene renderizzato fuori da .employees-page: applica
comunque il tema chiaro/colorato alle sue schede con interruttore. */
html:is([data-theme="colorful"],[data-theme="light"]) .modal .switches .switch {
background: #f7faff !important;
border: 1px solid #b9c9dc !important;
color: #17243a !important;
box-shadow: none !important;
}
html:is([data-theme="colorful"],[data-theme="light"]) .modal .switches .switch > span,
html:is([data-theme="colorful"],[data-theme="light"]) .modal .switches .switch strong {
color: #17243a !important;
}
html:is([data-theme="colorful"],[data-theme="light"]) .modal .switches .switch small,
html:is([data-theme="colorful"],[data-theme="light"]) .modal .switches .switch p {
color: #52647a !important;
}
html[data-theme] :is(.employees-page .actions > button,.oj-row-actions > button,.oj-job-actions > button) {
box-sizing: border-box !important;
min-width: 92px !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 14px !important;
border: 1px solid var(--ds-color-border-strong) !important;
border-radius: 11px !important;
background: var(--ds-color-surface-soft) !important;
color: var(--ds-color-text) !important;
font: 800 13px/1 var(--ds-font-family) !important;
box-shadow: none !important;
}
html[data-theme] :is(.employees-page .actions .cease-action,.oj-job-actions .oj-close-job) {
border-color: #d97706 !important; background: #fff7e6 !important; color: #92400e !important;
}
html[data-theme] :is(.employees-page .actions .danger-action,.oj-row-actions .oj-delete-btn,.oj-job-actions .oj-delete-btn,.oj-delete-confirm) {
border-color: #ef4444 !important; background: #fff5f5 !important; color: #b91c1c !important;
}
html[data-theme] :is(.employees-page .actions .reactivate,.oj-job-actions .oj-reopen-job) {
border-color: #16a34a !important; background: #f0fdf4 !important; color: #166534 !important;
}
html[data-theme="dark"] :is(.employees-page .actions .cease-action,.oj-job-actions .oj-close-job) {
background: rgba(217,119,6,.14) !important; color: #fbbf24 !important;
}
html[data-theme="dark"] :is(.employees-page .actions .danger-action,.oj-row-actions .oj-delete-btn,.oj-job-actions .oj-delete-btn,.oj-delete-confirm) {
background: rgba(239,68,68,.13) !important; color: #fca5a5 !important;
}
html[data-theme="dark"] :is(.employees-page .actions .reactivate,.oj-job-actions .oj-reopen-job) {
background: rgba(34,197,94,.13) !important; color: #86efac !important;
}
html[data-theme] .ds-app__main > .page .quick-periods,
html[data-theme] .ds-app__main > .page .summary {
width: max-content !important;
max-width: 100% !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
html[data-theme] .ds-app__main > .page .quick-periods { gap: 12px !important; }
html[data-theme] .ds-app__main > .page .quick-periods .period-button,
html[data-theme] .ds-app__main > .page .summary > span {
margin: 0 !important;
box-shadow: none !important;
}
/* Titoli principali uniformi in tutte le pagine dell'ufficio. */
html[data-theme] .ds-app__main :is(
.ds-page-header,
.topbar,
.header,
.analytics-header,
.oj-header,
.quality-header,
.messages-page > header
) h1 {
margin: 0 !important;
color: var(--ds-color-text) !important;
font-family: var(--ds-font-family) !important;
font-size: clamp(34px, 3vw, 44px) !important;
font-weight: 850 !important;
line-height: 1.05 !important;
letter-spacing: -.025em !important;
text-transform: uppercase !important;
}
/*
* Superfici chiare definitive.
* Alcune pagine storiche conservano colori scuri nei CSS locali: questi
* selettori fanno dipendere anche quei pannelli dai token del tema scelto.
*/
html[data-theme]:not([data-theme="dark"]) :is(
.analytics-filters,.analysis-card,.kpi-grid article,.method-note,.analytics-message,
.filters-card,.legend,.calendar-wrapper,.message,.loading,
.day-dialog,.empty-day-card,.detail-card,.punch-list,.punch-row,
.request-card,.request-detail,.initial-status,.audit-history,.audit-entry
) {
background:var(--ds-color-surface) !important;
border-color:var(--ds-color-border) !important;
color:var(--ds-color-text) !important;
box-shadow:var(--ds-shadow-sm) !important;
}
html[data-theme]:not([data-theme="dark"]) :is(
.analytics-header,.analytics-filters,.analysis-card,.kpi-grid,.method-note,
.vacations-page,.filters-card,.legend,.calendar-wrapper,.day-dialog,
.request-card,.request-detail,.initial-status
) :is(h1,h2,h3,h4,strong,label,th) {
color:var(--ds-color-text) !important;
}
html[data-theme]:not([data-theme="dark"]) :is(
.analytics-header,.analytics-filters,.analysis-card,.kpi-grid,.method-note,
.vacations-page,.filters-card,.legend,.calendar-wrapper,.day-dialog,
.request-card,.request-detail,.initial-status
) :is(p,small,.muted,span) {
color:var(--ds-color-text-muted);
}
html[data-theme]:not([data-theme="dark"]) :is(
.analytics-filters,.filters-card,.day-dialog,.request-detail,.initial-status
) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
background:var(--ds-color-input, var(--ds-color-surface)) !important;
border-color:var(--ds-color-border-strong) !important;
color:var(--ds-color-text) !important;
color-scheme:light !important;
}
html[data-theme]:not([data-theme="dark"]) :is(.day-dialog-header,.day-dialog-actions) {
background:var(--ds-color-surface-soft) !important;
border-color:var(--ds-color-border) !important;
}
html[data-theme]:not([data-theme="dark"]) :is(.attendance-table thead th,.employee-column,.employee-name,.total-value) {
background:var(--ds-color-surface-soft) !important;
color:var(--ds-color-text) !important;
border-color:var(--ds-color-border) !important;
}
html[data-theme]:not([data-theme="dark"]) .attendance-table td:not(.present):not(.vacation):not(.permit):not(.sick):not(.injury):not(.pending):not(.anomaly):not(.weekend) {
background:var(--ds-color-surface) !important;
color:var(--ds-color-text) !important;
}
html[data-theme]:not([data-theme="dark"]) .audit-history summary,
html[data-theme]:not([data-theme="dark"]) .audit-entry {
color:var(--ds-color-text) !important;
}
/* Canonical controls: keep entity actions identical in every theme and page. */
html[data-theme] :is(.employees-page .actions>button,.oj-row-actions>button,.oj-job-actions>button){box-sizing:border-box!important;min-width:92px!important;height:42px!important;padding:0 14px!important;border:1px solid var(--ds-color-border-strong)!important;border-radius:11px!important;background:var(--ds-color-surface-soft)!important;color:var(--ds-color-text)!important;font:inherit!important;font-weight:850!important;line-height:1!important;box-shadow:none!important}
html[data-theme] :is(.employees-page .actions>button,.oj-row-actions>button,.oj-job-actions>button):hover{border-color:var(--ds-color-primary)!important;color:var(--ds-color-primary)!important}
html[data-theme] :is(.employees-page .cease-action,.oj-job-actions .oj-close-job){border-color:var(--ds-color-warning)!important;background:var(--ds-color-warning-soft)!important;color:var(--ds-color-warning)!important}
html[data-theme] :is(.employees-page .danger-action,.oj-row-actions .oj-delete-btn,.oj-row-actions .oj-delete-confirm,.oj-job-actions .oj-delete-btn,.oj-job-actions .oj-delete-confirm){border-color:var(--ds-color-danger)!important;background:var(--ds-color-danger-soft)!important;color:var(--ds-color-danger)!important}
html[data-theme] :is(.employees-page .reactivate,.oj-job-actions .oj-reopen-job){border-color:var(--ds-color-success)!important;background:var(--ds-color-success-soft)!important;color:var(--ds-color-success)!important}
html[data-theme] .ds-toggle{border-color:var(--ds-color-border-strong)!important;background:#52637a!important}
html[data-theme] .ds-toggle:checked{border-color:var(--ds-color-primary)!important;background:var(--ds-color-primary)!important}
html[data-theme] *{scrollbar-width:thin;scrollbar-color:var(--ds-color-primary) var(--ds-color-surface-soft)}
html[data-theme] *::-webkit-scrollbar{width:10px;height:10px}html[data-theme] *::-webkit-scrollbar-track{background:var(--ds-color-surface-soft);border-radius:999px}html[data-theme] *::-webkit-scrollbar-thumb{background:var(--ds-color-primary);border:2px solid var(--ds-color-surface-soft);border-radius:999px}
/* Azioni anagrafiche condivise: una sola fonte per dipendenti, clienti e commesse. */
html[data-theme] .entity-action {
box-sizing:border-box !important;
min-width:92px !important;
height:42px !important;
padding:0 14px !important;
border:1px solid var(--ds-color-border-strong) !important;
border-radius:11px !important;
background:var(--ds-color-surface-soft) !important;
color:var(--ds-color-text) !important;
font:800 13px/1 var(--ds-font-family) !important;
box-shadow:none !important;
}
html[data-theme] .entity-action--edit:hover {
border-color:var(--ds-color-primary) !important;
color:var(--ds-color-primary) !important;
}
html[data-theme] .entity-action--warning {
border-color:var(--ds-color-warning) !important;
background:var(--ds-color-warning-soft) !important;
color:var(--ds-color-warning) !important;
}
html[data-theme] .entity-action--danger {
border-color:var(--ds-color-danger) !important;
background:var(--ds-color-danger-soft) !important;
color:var(--ds-color-danger) !important;
}
/* Tutte le azioni "Elimina" condividono lo stesso aspetto, indipendentemente
dalla pagina che le ospita. Le classi storiche restano supportate. */
html[data-theme] :is(
button.danger-action,
button.entity-action--danger,
button.oj-delete-btn,
button.delete,
button.delete-timesheet,
.message-actions button.delete
) {
min-height:42px !important;
padding:0 16px !important;
border:1px solid #ff3b45 !important;
border-radius:12px !important;
background:#fff7f7 !important;
color:#c91522 !important;
font-weight:850 !important;
box-shadow:none !important;
}
html[data-theme] :is(
button.danger-action,
button.entity-action--danger,
button.oj-delete-btn,
button.delete,
button.delete-timesheet,
.message-actions button.delete
):hover:not(:disabled) {
background:#ffe9eb !important;
border-color:#e51e2a !important;
color:#a90f19 !important;
}
/* Contrasto minimo comune per testi, stati e controlli nei due temi. */
html[data-theme="colorful"] :is(.ds-app__main,.worklog-page,.profile-page) :is(p,small,.muted) { color:#52637a; }
html[data-theme="colorful"] :is(.status-warning,.warning,.anomaly,.remaining-hours.over) { color:#6b3f00 !important; }
html[data-theme="dark"] :is(.ds-app__main,.worklog-page,.profile-page) :is(p,small,.muted) { color:#aebdd0; }
html[data-theme="dark"] :is(.status-warning,.warning,.anomaly,.remaining-hours.over) { color:#ffe29a !important; }
html[data-theme] button:disabled { opacity:.62 !important; }
html[data-theme="colorful"] button:disabled { color:#53657a !important; }
/* Pagine dipendente: applicazione coerente del tema scuro. */
html[data-theme="dark"] :is(.calendar-page,.equipment-page) {
--ds-canvas:var(--app-page-bg);
--ds-surface:var(--app-surface);
--ds-surface-muted:var(--app-surface-soft);
--ds-text:var(--app-text);
--ds-text-muted:var(--app-muted);
--ds-border:var(--app-border);
--ds-input-bg:var(--app-surface-soft);
background:var(--app-page-bg) !important;
color:var(--app-text) !important;
color-scheme:dark;
}
html[data-theme="dark"] .equipment-page :is(.equipment-card,.equipment-history,.equipment-row,.equipment-empty) {
background:var(--app-surface) !important;
border-color:var(--app-border) !important;
color:var(--app-text) !important;
}
html[data-theme="dark"] .equipment-page :is(input,select,textarea) {
background:var(--app-surface-soft) !important;
border-color:var(--app-border) !important;
color:var(--app-text) !important;
}
html[data-theme="dark"] .mobile-app .hub-brand img {
content:url('/images/matec-hub-brand-dark.png');
background:transparent !important;
}
html[data-theme="dark"] .mobile-app .timesheet-quick-action {
background:#172a44 !important;
border-color:#4b74a6 !important;
color:#fff !important;
}
html[data-theme="dark"] .mobile-app .timesheet-quick-action :is(strong,b) { color:#fff !important; }
html[data-theme="dark"] .mobile-app .timesheet-quick-action span {
background:#2b4b73 !important;
color:#fff !important;
}
html[data-theme="dark"] .employee-messages .round-action {
background:#20334d !important;
border-color:#5d7697 !important;
color:#f8fafc !important;
}
html[data-theme="dark"] .employee-messages .round-action:hover {
background:#2b4668 !important;
border-color:#7da4d3 !important;
color:#fff !important;
}
/* --------------------------------------------------------------------------
Controlli canonici MATEC HUB
Badge e pulsanti devono avere lo stesso contrasto in ufficio, app e tablet.
Gli sfondi restano tenui; testo e bordo usano la medesima tinta più scura.
-------------------------------------------------------------------------- */
html[data-theme] :is(
.badge,.pill,.status,.state,.tag,.delta,.origin,.direction,.punch-direction,
.recipient-count,.oj-status,.oj-status-active,.oj-job-status,.oj-job-status-open,
.anomaly-count,.request-status,.timesheet-status,.credential-status,.device-status,.reader-status
) {
border:1px solid currentColor !important;
box-shadow:none !important;
font-weight:800 !important;
opacity:1 !important;
}
/* Stato positivo: attivo, aperta, approvato, validato, IN, regolare. */
html[data-theme] :is(
.badge,.pill,.status,.state,.tag,.delta,.origin,.direction,.punch-direction,
.oj-status,.oj-status-active,.oj-job-status,.oj-job-status-open,.request-status,
.timesheet-status,.credential-status,.device-status,.reader-status
):is(.active,.attivo,.open,.aperta,.ok,.approved,.validated,.validato,.success,.positive,.in,.punch-in),
html[data-theme] :is(.oj-status-active,.oj-job-status-open,.direction.in,.punch-in) {
background:#dcfce7 !important;
border-color:#15803d !important;
color:#166534 !important;
}
/* Stato informativo: timbratura, badge, QR, automatico, attesa. */
html[data-theme] :is(
.badge,.pill,.status,.state,.tag,.delta,.origin,.direction,.punch-direction,
.request-status,.timesheet-status,.credential-status,.device-status,.reader-status
):is(.info,.primary,.blue,.automatic,.reading,.submitted,.waiting,.pending,.awaiting,.badge-enabled,.qr,.qr-static,.qr-dynamic),
html[data-theme] :is(.origin.automatic,.pill.pending,.status.pending,.pill.blue) {
background:#dbeafe !important;
border-color:#2563eb !important;
color:#1e40af !important;
}
/* Stato da verificare: bozza, manuale, attenzione, da controllare/validare. */
html[data-theme] :is(
.badge,.pill,.status,.state,.tag,.delta,.origin,.direction,.punch-direction,
.anomaly-count,.request-status,.timesheet-status,.credential-status,.device-status,.reader-status
):is(.warning,.manual,.requested,.draft,.bozza,.review,.check,.to-check,.to-validate,.attention),
html[data-theme] :is(.origin.manual,.pill.warning,.status.warning,.delta.warning,.anomaly-count) {
background:#fef3c7 !important;
border-color:#b45309 !important;
color:#92400e !important;
}
/* Stato negativo: OUT, errore, anomalia, cessato, sospeso. */
html[data-theme] :is(
.badge,.pill,.status,.state,.tag,.delta,.origin,.direction,.punch-direction,
.anomaly-count,.request-status,.timesheet-status,.credential-status,.device-status,.reader-status
):is(.danger,.error,.rejected,.negative,.anomaly,.inactive,.terminated,.suspended,.out,.punch-out),
html[data-theme] :is(.direction.out,.punch-out,.pill.danger,.status.danger,.delta.negative) {
background:#fee2e2 !important;
border-color:#dc2626 !important;
color:#991b1b !important;
}
/* Badge neutri: anche senza classe semantica devono restare leggibili. */
html[data-theme] :is(
.badge,.pill,.status,.state,.tag,.delta,.origin,.direction,.punch-direction,
.recipient-count,.oj-status,.oj-job-status,.request-status,.timesheet-status,
.credential-status,.device-status,.reader-status
):not(.active):not(.attivo):not(.open):not(.aperta):not(.ok):not(.approved):not(.validated):not(.validato):not(.success):not(.positive):not(.in):not(.punch-in):not(.info):not(.primary):not(.blue):not(.automatic):not(.reading):not(.submitted):not(.waiting):not(.pending):not(.awaiting):not(.badge-enabled):not(.qr):not(.qr-static):not(.qr-dynamic):not(.warning):not(.manual):not(.requested):not(.draft):not(.bozza):not(.review):not(.check):not(.to-check):not(.to-validate):not(.attention):not(.danger):not(.error):not(.rejected):not(.negative):not(.anomaly):not(.inactive):not(.terminated):not(.suspended):not(.out):not(.punch-out):not(.purple):not(.violet) {
background:#e8eef6 !important;
border-color:#52637a !important;
color:#334155 !important;
}
/* Credenziali e stati speciali mantengono una tinta distinta ma accessibile. */
html[data-theme] :is(.badge,.pill,.status,.state,.tag,.credential-status):is(.purple,.violet) {
background:#ede9fe !important;
border-color:#7c3aed !important;
color:#5b21b6 !important;
}
html[data-theme] :is(.badge,.pill,.status,.state,.tag):is(.fulfilled) {
background:#dcfce7 !important;
border-color:#15803d !important;
color:#166534 !important;
}
/* Ogni vero pulsante mantiene un contorno visibile, anche quando i CSS locali
impostavano border:0. Sono incluse le azioni rappresentate da link. */
html[data-theme] button:not(.ds-toggle),
html[data-theme] :is(a,.button-link)[class*="btn"],
html[data-theme] a.button,
html[data-theme] input:is([type="button"],[type="submit"],[type="reset"]) {
border-width:1px !important;
border-style:solid !important;
border-color:var(--ds-color-border-strong, #7f93aa) !important;
opacity:1;
}
html[data-theme] :is(button,a,input):is(.primary,.ds-btn--primary,.submit,.approve,.save,.send):not(:disabled) {
border-color:#1d4ed8 !important;
}
html[data-theme] :is(button,a,input):is(.success,.confirm):not(:disabled) {
border-color:#15803d !important;
}
html[data-theme] :is(button,a,input):is(.warning,.cease-action):not(:disabled) {
border-color:#b45309 !important;
}
html[data-theme] :is(button,a,input):is(.danger,.danger-action,.delete,.entity-action--danger):not(:disabled) {
border-color:#dc2626 !important;
}
/* Tutti i comandi rappresentati dalla X condividono lo stile distruttivo di Elimina. */
html[data-theme] :is(
button[aria-label="Chiudi"],
button[title="Chiudi"],
.modal-header > button:last-child,
button.job-picker-close,
button.dialog-close,
button.close-modal,
button.remove-attachment,
button.remove-saved-attachment,
.attachment-selected button
) {
border: 1px solid var(--ds-color-danger) !important;
background: var(--ds-color-danger-soft) !important;
color: var(--ds-color-danger) !important;
box-shadow: none !important;
}
/* Anche nel tema scuro i badge conservano superfici chiare e testo scuro:
il contrasto non dipende più dal colore del pannello che li contiene. */
html[data-theme="dark"] :is(
.badge,.pill,.status,.state,.tag,.delta,.origin,.direction,.punch-direction,
.recipient-count,.oj-status,.oj-status-active,.oj-job-status,.oj-job-status-open,
.anomaly-count,.request-status,.timesheet-status,.credential-status,.device-status,.reader-status
) { text-shadow:none !important; }
/* --------------------------------------------------------------------------
Elenchi canonici
Dipendenti, clienti/commesse, controllo dati e timbrature condividono la
stessa superficie, raggiatura, spaziatura, ombra e comportamento espandibile.
Le griglie interne mantengono soltanto le colonne specifiche della pagina.
-------------------------------------------------------------------------- */
html[data-theme] .ds-entity-list {
display:grid !important;
gap:14px !important;
margin:0 !important;
padding:0 !important;
background:transparent !important;
}
html[data-theme] .ds-entity-card {
overflow:hidden !important;
border:1px solid var(--ds-color-border) !important;
border-radius:18px !important;
background:var(--ds-color-surface) !important;
color:var(--ds-color-text) !important;
box-shadow:0 8px 22px rgba(15,23,42,.08) !important;
}
html[data-theme] .ds-entity-summary {
box-sizing:border-box !important;
width:100% !important;
min-height:70px !important;
padding:14px 20px !important;
border:0 !important;
border-radius:0 !important;
background:var(--ds-color-surface) !important;
color:var(--ds-color-text) !important;
box-shadow:none !important;
}
html[data-theme] .ds-entity-summary:hover {
background:var(--ds-color-surface-soft) !important;
}
html[data-theme] .ds-entity-page {
min-height:100vh !important;
background:var(--ds-color-page) !important;
color:var(--ds-color-text) !important;
font-family:Arial,Helvetica,sans-serif !important;
}
html[data-theme] .ds-entity-title {
margin:0 !important;
color:var(--ds-color-text) !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:17px !important;
line-height:1.25 !important;
font-weight:800 !important;
letter-spacing:0 !important;
}
html[data-theme] .ds-entity-chevron {
width:20px !important;
min-width:20px !important;
display:inline-grid !important;
place-items:center !important;
color:var(--ds-color-primary) !important;
font-family:Arial,Helvetica,sans-serif !important;
font-size:18px !important;
line-height:1 !important;
font-weight:900 !important;
}
html[data-theme] .ds-entity-details {
border-top:1px solid var(--ds-color-border) !important;
background:var(--ds-color-surface) !important;
color:var(--ds-color-text) !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) :is(.ds-entity-card,.ds-entity-summary,.ds-entity-details) {
background:#fff !important;
color:#202124 !important;
}
/* Gli stati con lo stesso significato hanno sempre la stessa palette. */
html[data-theme] :is(.pill,.badge,.status,.state,.tag,.oj-status,.oj-job-status).active,
html[data-theme] :is(.pill,.badge,.status,.state,.tag,.oj-status,.oj-job-status).open {
background:#dcfce7 !important;
border-color:#15803d !important;
color:#166534 !important;
}
html[data-theme] :is(.pill,.badge,.status,.state,.tag,.oj-status,.oj-job-status).suspended {
background:#fef3c7 !important;
border-color:#b45309 !important;
color:#92400e !important;
}
html[data-theme] :is(.pill,.badge,.status,.state,.tag,.oj-status,.oj-job-status).terminated,
html[data-theme] :is(.pill,.badge,.status,.state,.tag,.oj-status,.oj-job-status).inactive {
background:#fee2e2 !important;
border-color:#dc2626 !important;
color:#991b1b !important;
}
@media (max-width:720px) {
html[data-theme] .ds-entity-summary { padding:12px 14px !important; }
}
/* OfficeJobs: soluzione specifica verificata per impedire alle regole globali
di trasformare le righe principali dei clienti in bande azzurre. */
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main .oj-page
.oj-customer-list > article.oj-customer-item,
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main .oj-page
.oj-customer-list > article.oj-customer-item:hover,
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main .oj-page
.oj-customer-list > article.oj-customer-item:focus-within,
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main .oj-page
.oj-customer-list > article.oj-customer-item > .oj-customer-summary[role="button"],
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main .oj-page
.oj-customer-list > article.oj-customer-item > .oj-customer-summary[role="button"]:hover,
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main .oj-page
.oj-customer-list > article.oj-customer-item > .oj-customer-summary[role="button"]:focus,
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main .oj-page
.oj-customer-list > article.oj-customer-item > .oj-customer-summary[role="button"]:active {
border:0 !important;
outline:0 !important;
background:#fff !important;
background-color:#fff !important;
background-image:none !important;
box-shadow:none !important;
transform:none !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main .oj-page .oj-panel {
border:0 !important;
background:transparent !important;
box-shadow:none !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main .oj-page .oj-panel-toolbar {
border-radius:18px !important;
background:#fff !important;
}
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main .oj-page .oj-customer-list {
gap:16px !important;
padding:16px !important;
background:transparent !important;
}
/* Controllo dati: medesima protezione specifica applicata alle sue righe. */
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main .quality-page
.quality-list > article.employee-quality,
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main .quality-page
.quality-list > article.employee-quality:hover,
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main .quality-page
.quality-list > article.employee-quality:focus-within,
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main .quality-page
.quality-list > article.employee-quality > .employee-quality-summary[role="button"],
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main .quality-page
.quality-list > article.employee-quality > .employee-quality-summary[role="button"]:hover,
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main .quality-page
.quality-list > article.employee-quality > .employee-quality-summary[role="button"]:focus,
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main .quality-page
.quality-list > article.employee-quality > .employee-quality-summary[role="button"]:active {
border:0 !important;
outline:0 !important;
background:#fff !important;
background-color:#fff !important;
background-image:none !important;
box-shadow:none !important;
transform:none !important;
}
/* --------------------------------------------------------------------------
Standard definitivo dei contatori Office.
Una sola regola prevale sulle varianti storiche delle singole pagine.
-------------------------------------------------------------------------- */
html[data-theme] body .ds-app__main .ds-counter-card {
box-sizing:border-box !important;
min-width:0 !important;
min-height:148px !important;
display:flex !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;
outline:0 !important;
background:#fff !important;
background-color:#fff !important;
background-image:none !important;
color:#111e3c !important;
text-decoration:none !important;
box-shadow:0 12px 28px rgba(36,58,86,.10) !important;
}
html[data-theme] body .ds-app__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 .ds-app__main .ds-counter-card > strong {
margin:0 !important;
color:#111e3c !important;
font-size:clamp(2.35rem,3vw,3rem) !important;
font-weight:800 !important;
line-height:.95 !important;
}
html[data-theme] body .ds-app__main .ds-counter-card > small {
margin:0 !important;
color:#66758a !important;
font-size:.8rem !important;
line-height:1.25 !important;
}
html[data-theme="dark"] body .ds-app__main .ds-counter-card {
border-top-color:#67a4ff !important;
background:#202a38 !important;
background-color:#202a38 !important;
color:#fff !important;
box-shadow:0 12px 28px rgba(0,0,0,.24) !important;
}
html[data-theme="dark"] body .ds-app__main .ds-counter-card > strong { color:#fff !important; }
html[data-theme="dark"] body .ds-app__main .ds-counter-card > span { color:#aebbd0 !important; }
@media (max-width:700px) {
html[data-theme] body .ds-app__main .ds-counter-card {
min-height:116px !important;
padding:19px 20px 18px !important;
border-radius:18px !important;
}
}
html:is([data-theme="light"],[data-theme="colorful"]) .ds-app__main .quality-page .quality-list {
gap:16px !important;
padding:16px !important;
background:transparent !important;
}
/* Parità visiva smartphone/tablet per tutta l'area dipendente. Il tablet conserva
la maggiore larghezza, ma usa le stesse superfici, colori e controlli dell'app mobile. */
html[data-theme] :is(
.kiosk,.worklog-page,.employee-request-page,.employee-messages,
.equipment-page,.calendar-page,.mobile-settings-page
) {
background:var(--app-page-bg) !important;
color:var(--app-text) !important;
}
html[data-theme] :is(
.kiosk-card,.worklog-page .panel,.worklog-page .summary,
.employee-request-page .access-card,.employee-request-page .request-form,.employee-request-page .history,
.employee-messages .thread,.employee-messages .composer,
.equipment-page .equipment-card,.equipment-page .equipment-history,.equipment-page .equipment-empty,
.calendar-page .days,.calendar-page .legend,.mobile-settings-page .mobile-settings-card
) {
background:var(--app-surface) !important;
color:var(--app-text) !important;
border-color:var(--app-border) !important;
box-shadow:0 12px 30px rgba(48,76,110,.10) !important;
}
html[data-theme] :is(
.kiosk,.worklog-page,.employee-request-page,.employee-messages,
.equipment-page,.calendar-page,.mobile-settings-page
) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
background:var(--app-surface-soft) !important;
color:var(--app-text) !important;
border-color:var(--app-border) !important;
}
html[data-theme] .kiosk .timesheet-main-action {
background:linear-gradient(135deg,#185abd,#00a4ef) !important;
color:#fff !important;
border-color:transparent !important;
}
html[data-theme] .kiosk .more-actions-toggle {
background:var(--app-surface-soft) !important;
color:var(--app-text) !important;
border-color:var(--app-border) !important;
}
html[data-theme] .kiosk .logout-action {
background:#b91c1c !important;
color:#fff !important;
border:2px solid #ef4444 !important;
box-shadow:0 10px 24px rgba(185,28,28,.22) !important;
}
html[data-theme="dark"] :is(
.kiosk-card,.worklog-page .panel,.worklog-page .summary,
.employee-request-page .access-card,.employee-request-page .request-form,.employee-request-page .history,
.employee-messages .thread,.employee-messages .composer,
.equipment-page .equipment-card,.equipment-page .equipment-history,.equipment-page .equipment-empty,
.calendar-page .days,.calendar-page .legend,.mobile-settings-page .mobile-settings-card
) {
box-shadow:0 14px 34px rgba(0,0,0,.24) !important;
}
/* Coerenza finale area dipendente: stessi controlli e popup su smartphone/tablet. */
html[data-theme] body :is(
.mobile-app,.kiosk,.worklog-page,.employee-request-page,.employee-messages,
.equipment-page,.calendar-page,.mobile-settings-page
) :is(button,a,input,select,textarea) {
font-family:var(--ds-font-family,Inter,system-ui,sans-serif);
}
html[data-theme] body :is(
.job-picker-modal,.attachment-modal,.copy-modal,.revision-modal,
.request-dialog,.media-dialog,.mobile-menu
) {
border:1px solid var(--app-border) !important;
background:var(--app-surface) !important;
color:var(--app-text) !important;
box-shadow:0 24px 64px rgba(15,23,42,.28) !important;
}
html[data-theme] body :is(
.job-picker-modal,.attachment-modal,.copy-modal,.revision-modal,
.request-dialog,.media-dialog,.mobile-menu
) :is(h1,h2,h3,h4,strong,label) { color:var(--app-text) !important; }
html[data-theme] body :is(
.job-picker-modal,.attachment-modal,.copy-modal,.revision-modal,
.request-dialog,.media-dialog,.mobile-menu
) :is(p,small) { color:var(--app-muted) !important; }
html[data-theme] body :is(
.job-picker-modal,.attachment-modal,.copy-modal,.revision-modal,
.request-dialog,.media-dialog,.mobile-menu
) :is(input,select,textarea) {
border-color:var(--app-border) !important;
background:var(--app-surface-soft) !important;
color:var(--app-text) !important;
}
html[data-theme] body :is(
.mobile-app,.kiosk,.worklog-page,.employee-request-page,.employee-messages,
.equipment-page,.calendar-page,.mobile-settings-page
) :is(button,a):focus-visible {
outline:3px solid color-mix(in srgb,var(--app-primary) 55%,transparent) !important;
outline-offset:3px !important;
}
html[data-theme] body :is(
.mobile-app,.kiosk,.worklog-page,.employee-request-page,.employee-messages,
.equipment-page,.calendar-page,.mobile-settings-page
) :is(button,a,input,select,textarea):disabled {
cursor:not-allowed !important;
opacity:.68 !important;
}
html[data-theme] body .kiosk .logout-action {
border:2px solid #dc2626 !important;
background:#b91c1c !important;
color:#fff !important;
text-shadow:none !important;
}
html[data-theme="dark"] body .timesheet-save-actions .icon-action {
border-color:#60a5fa !important;
background:#172b46 !important;
color:#dbeafe !important;
}
html[data-theme="dark"] body .timesheet-save-actions .quick-copy-submit:not(:disabled) {
border-color:#eab308 !important;
background:#3d3512 !important;
color:#fef08a !important;
}
html[data-theme="dark"] body .timesheet-save-actions .quick-copy-submit:disabled {
border-color:#64748b !important;
background:#303742 !important;
color:#cbd5e1 !important;
opacity:1 !important;
}
html[data-theme="dark"] body .timesheet-save-actions .submit-prominent:not(:disabled) {
border-color:#38bdf8 !important;
background:#16364a !important;
color:#e0f2fe !important;
}
html[data-theme="dark"] body :is(.colleague-source-list,.copy-source-list) button {
background:var(--app-surface) !important;
color:var(--app-text) !important;
}
html[data-theme="dark"] body :is(.colleague-source-list,.copy-source-list) button:nth-child(even) {
background:var(--app-surface-soft) !important;
}