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

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

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

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

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

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

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

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

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

html[data-theme] body {
    margin: 0;
    font-family: var(--mh-font);
    font-size: var(--mh-text-md);
    line-height: 1.45;
    color: var(--mh-text);
    background: radial-gradient(circle at 100% 0, var(--mh-page-accent), transparent 38%), var(--mh-page);
}

/*
   Standard pagina MATEC HUB
   Riferimento visivo: "Clienti e commesse".
   Sfondo, titolo e descrizione sono definiti esclusivamente qui: le pagine
   possono gestire disposizione e azioni, ma non ridefinire questi valori.
*/
html:is([data-theme="colorful"],[data-theme="light"]) {
    --mh-page-background:
        radial-gradient(circle at 95% 0, rgba(14,165,233,.14), transparent 34%),
        radial-gradient(circle at 0 100%, rgba(52,211,153,.10), transparent 32%),
        linear-gradient(145deg,#eef7ff,#f8fbff 48%,#eefcf8);
}

html[data-theme="dark"] {
    --mh-page-background:
        radial-gradient(circle at 92% 0, rgba(37,99,235,.22), transparent 38%),
        linear-gradient(145deg,#020817,#071426 58%,#111d3d);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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