:root {
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f3f6f8;
    color: #16232d;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.75rem 1.5rem;
    background: #123b52;
}

.brand {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 1rem;
    color: #dcecf3;
    font-size: 0.9rem;
}

.account-actions a {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.account-actions form {
    margin: 0;
}

.company-switcher {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.company-switcher label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.company-switcher select {
    width: auto;
    max-width: 220px;
    padding: 0.45rem 0.6rem;
    border-color: #7896a7;
    background: #fff;
    color: #123b52;
}

.company-switcher.is-auto .switch-button {
    display: none;
}

.switch-button {
    padding: 0.48rem 0.65rem;
    border: 1px solid #a9c1ce;
    border-radius: 7px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 750;
}

.link-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

/* Layout da applicazione: il contenuto usa tutta la larghezza disponibile. */
.page-shell {
    padding: 1.25rem 1.5rem 2rem;
}

.welcome-card,
.auth-card {
    margin: 8vh auto 0;
}

.welcome-card {
    width: min(680px, 100%);
    padding: clamp(2rem, 6vw, 4rem);
    border: 1px solid #dce5ea;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 70px rgb(30 66 87 / 12%);
}

.auth-card {
    width: min(440px, 100%);
    padding: 2rem;
    border: 1px solid #dce5ea;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 24px 70px rgb(30 66 87 / 12%);
}

.form-field {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.form-field label {
    font-size: 0.88rem;
    font-weight: 700;
}

.auth-card .form-field input {
    min-height: 2.8rem;
}

.auth-card h1 {
    margin: 0 0 1.5rem;
    font-size: clamp(2rem, 5vw, 2.6rem);
    line-height: 1.1;
}

.checkbox-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.primary-button {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 0;
    border-radius: 9px;
    background: #176b67;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
}

.field-error {
    margin: 0;
    color: #a52323;
    font-size: 0.82rem;
}

.field-hint {
    color: #6b7c86;
    font-size: 0.8rem;
}

.flash-stack {
    display: grid;
    gap: 0.5rem;
    margin: 1rem 1.5rem 0;
}

.flash {
    padding: 0.8rem 1rem;
    border-radius: 8px;
    background: #e7eef2;
}

.flash-success {
    background: #dff3e8;
    color: #145b39;
}

.flash-danger,
.flash-warning {
    background: #fde7e7;
    color: #8a1f1f;
}

.admin-shell {
    width: 100%;
}

.section-title {
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
}

.section-description {
    margin: 0.4rem 0 1.25rem;
    color: #5a6b75;
}

.admin-nav {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.admin-nav a {
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    background: #e5edf1;
    color: #123b52;
    font-weight: 750;
    text-decoration: none;
}

.admin-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.7fr);
    gap: 1.5rem;
    align-items: start;
}

.panel {
    padding: 1.35rem;
    border: 1px solid #dce5ea;
    border-radius: 14px;
    background: #fff;
    /* Le tabelle più larghe del riquadro scorrono invece di uscirne. */
    overflow-x: auto;
}

.panel h1,
.panel h2 {
    margin-top: 0;
    color: #123b52;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 0.75rem 0.55rem;
    border-bottom: 1px solid #e2e9ed;
    text-align: left;
    vertical-align: middle;
}

.data-table th {
    color: #536772;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.data-table tr.row-invalid td {
    background: #fdecec;
    color: #a52323;
}

/* Telefono ed email sotto il nominativo negli elenchi dei dipendenti */
.cell-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    margin-top: 0.15rem;
    font-size: 0.76rem;
}

.data-table .cell-contacts a {
    color: #5b6b75;
    font-weight: 400;
    text-decoration: none;
}

.data-table .cell-contacts a:hover {
    text-decoration: underline;
}

.row-invalid-note {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
}

.data-table a {
    color: #176b67;
    font-weight: 700;
}

.badge {
    display: inline-flex;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: #dff3e8;
    color: #145b39;
    font-size: 0.78rem;
    font-weight: 800;
}

.badge-inactive {
    background: #edf0f2;
    color: #6b747a;
}

/* Stato del rapporto: stessi colori di App_HR. */
.badge-in-scadenza {
    background: #ffc107;
    color: #000;
}

.badge-scadenza-imminente {
    background: #fd7e14;
    color: #fff;
}

.badge-distaccato {
    background: #dbeafe;
    color: #1e3a8a;
}

.badge-cessato {
    background: #dc3545;
    color: #fff;
}

.secondary-button {
    display: inline-flex;
    justify-content: center;
    padding: 0.7rem 1rem;
    border: 1px solid #9db0ba;
    border-radius: 9px;
    background: #fff;
    color: #123b52;
    cursor: pointer;
    font: inherit;
    font-weight: 750;
    text-decoration: none;
}

.danger-button {
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 9px;
    background: #a52323;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 750;
}

.inline-edit-form {
    display: flex;
    gap: 0.6rem;
    min-width: 320px;
}

.counter-form {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(90px, 1fr) auto;
    gap: 0.5rem;
    min-width: 330px;
}

.counter-form input[type="number"] {
    width: 100%;
    padding: 0.7rem;
    border: 1px solid #b8c8d1;
    border-radius: 9px;
    font: inherit;
}

.muted-text {
    color: #6b747a;
    font-size: 0.82rem;
}

.page-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.primary-link {
    display: inline-flex;
    padding: 0.8rem 1rem;
    border-radius: 9px;
    background: #176b67;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.table-actions form {
    margin: 0;
}

/* Una cella in flex smette di essere una cella di tabella e disallinea le righe. */
td.table-actions {
    display: table-cell;
    white-space: nowrap;
}

td.table-actions > * {
    display: inline-block;
    margin-right: 0.75rem;
    vertical-align: middle;
}

td.table-actions > :last-child {
    margin-right: 0;
}

.danger-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: #a52323;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
}

.config-panel { margin-top: 1rem; }
.config-row, .config-form, .config-category, .config-option { display: flex; align-items: center; gap: 0.65rem; margin: 0.5rem 0; }
.config-row { justify-content: space-between; }
.config-form > input, .config-form > select { min-width: 110px; }
.config-category, .config-option { justify-content: space-between; }
.config-category > .config-form, .config-option > .config-form { flex: 1; }
.field-config-table-wrap { overflow-x: auto; }
.field-config-table { min-width: 1050px; }
.employee-config-table th:first-child { width: 13%; }
.employee-config-table th:nth-child(2) { width: 60%; }
.employee-config-table tr.is-muted { opacity: 0.62; }
.field-kind, .field-note { display: block; margin-top: 0.35rem; color: #6b7c86; font-size: 0.78rem; }
.employee-field-config-form { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(150px, 1.2fr) 80px minmax(145px, 1fr); gap: 0.6rem; align-items: end; }
.employee-field-config-form label, .format-config-form label { display: grid; gap: 0.25rem; color: #536670; font-size: 0.78rem; font-weight: 700; }
.employee-field-config-form .visibility-toggle { display: flex; align-items: center; align-self: center; gap: 0.4rem; color: #123b52; }
.employee-field-config-form .visibility-toggle input { width: auto; }
.employee-field-config-form .primary-button { align-self: center; justify-self: start; }
.field-config-actions { min-width: 245px; }
.field-config-actions details { margin-bottom: 0.55rem; }
.field-config-actions summary { display: inline-flex; cursor: pointer; list-style: none; }
.field-config-actions summary::-webkit-details-marker { display: none; }
.field-config-actions .option-list, .format-config-form { margin-top: 0.65rem; padding: 0.75rem; border: 1px solid #d7e2e5; border-radius: 8px; background: #f8fbfb; }
.format-config-form { display: grid; gap: 0.55rem; }
.format-result { min-height: 1.1rem; font-size: 0.82rem; font-weight: 700; }
.format-result.is-valid { color: #176b67; }
.format-result.is-invalid { color: #a52323; }

/* Schede di dettaglio: sezioni a tutta larghezza, campi in colonne automatiche. */
.record-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.record-header .eyebrow {
    margin-bottom: 0.35rem;
}

.record-meta {
    margin: 0.35rem 0 0;
    color: #5a6b75;
}

.employee-form-grid {
    display: grid;
    gap: 1rem;
}

.employee-fieldset {
    min-width: 0;
    margin: 0;
    padding: 1rem 1.25rem 0.25rem;
}

/* Il legend fluttuante resta dentro il riquadro invece di tagliarne il bordo. */
.employee-fieldset legend {
    float: left;
    width: 100%;
    margin: 0 0 0.85rem;
    padding: 0;
    color: #123b52;
    font-size: 0.95rem;
    font-weight: 800;
}

.employee-fieldset legend + * {
    clear: both;
}

.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0 1rem;
}

.field-grid .form-field {
    gap: 0.3rem;
    margin-bottom: 0.85rem;
}

.field-grid .form-field label {
    color: #3d505b;
    font-size: 0.8rem;
}

@media (min-width: 761px) {
    .field-grid .field-wide {
        grid-column: span 2;
    }
}

.sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 1rem -1.5rem -2rem;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid #dce5ea;
    background: rgb(243 246 248 / 95%);
}

.deadline-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.deadline-stats .panel { display: grid; gap: 0.25rem; }
.deadline-stats strong { font-size: 1.8rem; }
.state-expired, .status-scaduto { color: #a52323; }
.state-warning, .status-in_scadenza { color: #9a6500; }
.state-valid, .status-valido { color: #1f6b4f; }
.status-ok, .status-inviato { color: #1f6b4f; }
.status-email_mancante, .status-non_trovato, .status-errore, .status-duplicato { color: #a52323; }
.status-escluso { color: #6b7c86; }
.smtp-state { display: grid; gap: 0.25rem; }

.payslip-combined-upload { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr); align-items: end; gap: 1.5rem; border-color: #b7d7d3; background: linear-gradient(135deg, #fff 0%, #f1f9f7 100%); }
.payslip-combined-upload .section-description { margin-bottom: 0; }
.payslip-combined-upload .form-field { margin-top: 0; }
.payslip-legacy-upload > summary { color: #123b52; font-weight: 800; cursor: pointer; }
.payslip-legacy-upload[open] > summary { margin-bottom: 0.75rem; }
.payslip-detail-page { display: grid; gap: 1rem; }
.payslip-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.payslip-summary-grid .panel { display: grid; gap: 0.2rem; margin: 0; }
.payslip-summary-grid span { color: #6b7c86; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; }
.payslip-summary-grid strong { color: #123b52; font-size: 1.5rem; }
.privacy-notice { border-left: 4px solid #176b67; background: #eef8f6; color: #24564f; }
.payslip-issues { border-left: 4px solid #b03a2e; background: #fff7f5; }
.payslip-issues h2 { margin-top: 0; color: #8f2f26; font-size: 1rem; }
.payslip-issues ul { margin-bottom: 0; }
.payslip-send-actions { align-items: center; justify-content: space-between; }
.payslip-confirm { display: flex; align-items: flex-start; gap: 0.5rem; max-width: 720px; color: #6b4a19; font-weight: 700; }
.payslip-confirm input { width: auto; margin-top: 0.2rem; }

.deadline-form {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: 1rem;
}

.deadline-form .primary-button { margin-bottom: 1rem; }
.filter-form, .deadline-template { display: flex; align-items: center; gap: 0.65rem; }
.deadline-template { justify-content: space-between; padding: 0.65rem 0; border-bottom: 1px solid #dfe7eb; }
.deadline-template .config-form { flex: 1; }
.deadline-template.is-inactive { opacity: 0.55; }
.status-badge { display: inline-block; font-weight: 700; white-space: nowrap; }
.nav-count { display: inline-block; min-width: 1.4rem; padding: 0.1rem 0.35rem; border-radius: 999px; background: #a52323; color: #fff; text-align: center; }
.home-deadlines { margin-top: 1rem; }

.document-page { display: grid; gap: 1rem; }
.document-page-header, .document-library-header, .document-template-card, .document-template-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.document-page-header .section-description { max-width: 760px; margin-bottom: 0; }
.document-page-header > .secondary-button { flex: 0 0 auto; }
.document-workflow { border-color: #b7d7d3; background: linear-gradient(135deg, #fff 0%, #f1f9f7 100%); }
.document-panel-heading { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 1.25rem; }
.document-panel-heading h2 { margin-bottom: 0.2rem; }
.document-panel-heading p { margin: 0; color: #5a6b75; }
.document-step {
    display: grid;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    background: #176b67;
    color: #fff;
    font-weight: 800;
}
.document-selection { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 1rem; }
.document-selection .form-field, .new-template-form .form-field { margin: 0; }
.document-prepare-button, .new-template-form > .primary-button { width: auto; white-space: nowrap; }
.document-empty-state { display: grid; gap: 0.25rem; padding: 1rem; border-radius: 10px; background: #fff; color: #5a6b75; }
.document-empty-state strong { color: #123b52; }
.document-library { overflow: visible; }
.document-library-header { align-items: flex-start; padding-bottom: 1rem; border-bottom: 1px solid #dce5ea; }
.document-library-header h2 { margin-bottom: 0; }
.document-library-header .section-description { margin-bottom: 0; }
.document-count { flex: 0 0 auto; padding: 0.35rem 0.7rem; border-radius: 999px; background: #e5edf1; color: #123b52; font-size: 0.85rem; font-weight: 800; }
.new-template-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.2fr) auto;
    align-items: end;
    gap: 1rem;
    margin: 1rem 0 0.5rem;
    padding: 1rem;
    border: 1px dashed #9db0ba;
    border-radius: 12px;
    background: #f7fafb;
}
.new-template-form small { color: #687b85; }
.optional-label { color: #71828b; font-size: 0.75rem; font-weight: 500; }
.document-template-list { display: grid; }
.document-template-card { min-width: 0; padding: 1rem 0; border-bottom: 1px solid #dfe7eb; }
.document-template-card:last-child { border-bottom: 0; padding-bottom: 0; }
.document-template-identity { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.85rem; min-width: 0; }
.document-template-identity h3 { margin: 0 0 0.2rem; color: #123b52; font-size: 1rem; }
.document-template-identity p { overflow: hidden; margin: 0; color: #667983; font-size: 0.85rem; text-overflow: ellipsis; white-space: nowrap; }
.document-file-icon { padding: 0.5rem 0.4rem; border-radius: 6px; background: #e7f3f1; color: #176b67; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.03em; }
.document-template-actions { justify-content: flex-end; }
.document-template-actions > form { margin: 0; }
.document-template-editor { position: relative; }
.document-template-editor summary { list-style: none; }
.document-template-editor summary::-webkit-details-marker { display: none; }
.document-template-editor[open] summary { border-color: #176b67; color: #176b67; }
.document-template-editor form {
    position: absolute;
    z-index: 10;
    top: calc(100% + 0.5rem);
    right: 0;
    display: grid;
    width: min(520px, 85vw);
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid #b8c8d0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 35px rgb(29 55 68 / 18%);
}
.document-template-editor form .form-field { margin: 0; }
.placeholder-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.placeholder-list code { padding: 0.35rem 0.55rem; border: 1px solid #cbd8de; border-radius: 6px; background: #f5f8f9; }
.document-prepare-page { display: grid; gap: 1rem; }
.document-prepare-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.document-prepare-header .section-description { max-width: 800px; margin-bottom: 0; }
.document-prepare-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.document-prepare-summary div { display: grid; gap: 0.2rem; }
.document-prepare-summary span { color: #6b7c86; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; }
.document-prepare-summary strong { color: #123b52; }
.document-prepare-summary .text-warning { color: #a54d12; }
.document-field-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.document-field-toolbar .form-field { flex: 1; max-width: 520px; margin: 0; }
.document-empty-toggle { display: flex; align-items: center; gap: 0.45rem; color: #123b52; font-weight: 700; }
.document-empty-toggle input { width: auto; }
.document-field-groups { display: grid; gap: 1rem; }
.document-field-group { min-width: 0; margin: 0; padding: 1rem 1.25rem 1.2rem; }
.document-field-group legend { float: left; width: 100%; margin-bottom: 0.2rem; color: #123b52; font-size: 1.05rem; font-weight: 800; }
.document-field-group > p { clear: both; margin: 0 0 1rem; color: #667983; }
.document-context-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1rem; }
.document-context-field { min-width: 0; margin: 0; padding: 0.75rem; border: 1px solid #dce5e8; border-radius: 9px; background: #fff; }
.document-context-field.is-empty { border-color: #e6c6a7; background: #fffaf5; }
.document-context-field label { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.document-context-field small { display: block; margin-top: 0.3rem; color: #71828b; }
.document-context-field small code { font-size: 0.75rem; }
.document-used-badge { padding: 0.15rem 0.4rem; border-radius: 999px; background: #e7f3f1; color: #176b67; font-size: 0.66rem; white-space: nowrap; }
.document-additional-fields { padding: 0; overflow: hidden; }
.document-additional-fields > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; color: #123b52; font-weight: 800; cursor: pointer; list-style: none; }
.document-additional-fields > summary::-webkit-details-marker { display: none; }
.document-additional-fields > summary::after { content: "+"; font-size: 1.35rem; }
.document-additional-fields[open] > summary::after { content: "−"; }
.document-additional-fields > summary span { margin-left: auto; padding: 0.15rem 0.5rem; border-radius: 999px; background: #edf2f4; color: #536873; font-size: 0.75rem; }
.document-field-notice { margin: 0 1.25rem 1rem; padding: 0.85rem 1rem; border-left: 4px solid #d08b32; border-radius: 6px; background: #fff7e8; color: #6b4a19; }
.document-additional-fields .document-field-groups { padding: 0 1.25rem 1.25rem; }
.document-additional-group { border: 1px solid #dce5e8; border-radius: 9px; background: #f8fafb; }
.document-field-empty { color: #667983; text-align: center; }

.employee-toolbar { display: grid; gap: 1rem; margin-bottom: 1rem; }
.employee-filters, .employee-report-actions { display: flex; align-items: end; gap: 1rem; }
.employee-filters .form-field { flex: 1; margin: 0; }
.employee-filters .primary-button { width: auto; }
.employee-report-actions { flex-wrap: wrap; }
.employee-report-actions a { font-weight: 700; }
.employee-toolbar a { color: #176b67; font-weight: 700; }
.employee-filters .form-field + .form-field { flex: 0 1 260px; }
.copy-options { margin: 1rem 0; border: 1px solid #dfe7eb; border-radius: 9px; padding: 1rem; }
.copy-options legend { color: #123b52; font-weight: 800; }
.copy-preview { margin-top: 1rem; }
.company-setting-form { display: grid; grid-template-columns: 0.7fr 1fr 1.5fr auto; align-items: end; gap: 1rem; }
.company-setting-form .form-field { margin: 0; }
.company-setting-form .primary-button { width: auto; margin-bottom: 0; }
.company-setting-row { display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2fr) auto; align-items: center; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid #dfe7eb; }
.company-setting-edit { display: grid; grid-template-columns: minmax(140px, 0.7fr) minmax(220px, 2fr) auto; align-items: center; gap: 0.75rem; }
.company-setting-edit textarea { width: 100%; resize: vertical; }

@media (max-width: 760px) {
    .employee-form-grid,
    .field-grid,
    .deadline-stats,
    .deadline-form {
        grid-template-columns: 1fr;
    }

    .filter-form, .deadline-template { align-items: stretch; flex-direction: column; }
    .document-page-header, .document-library-header, .document-template-card, .document-prepare-header { align-items: stretch; flex-direction: column; }
    .document-selection, .new-template-form { grid-template-columns: 1fr; }
    .document-template-actions { justify-content: flex-start; flex-wrap: wrap; }
    .document-template-editor form { position: fixed; inset: auto 1rem 1rem; width: auto; max-height: calc(100vh - 2rem); overflow-y: auto; }
    .document-prepare-button, .new-template-form > .primary-button { width: 100%; }
    .document-prepare-summary, .document-context-grid { grid-template-columns: 1fr; }
    .document-field-toolbar { align-items: stretch; flex-direction: column; }
    .employee-filters, .employee-report-actions { align-items: stretch; flex-direction: column; }
    .company-setting-form, .company-setting-row, .company-setting-edit { grid-template-columns: 1fr; }
}

.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.form-actions .primary-button {
    width: auto;
}

/* Stile unico per tutti i campi; :where() non aggiunge specificità, così le
   regole dei singoli componenti continuano a prevalere. */
:where(
    input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"]),
    select,
    textarea
) {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid #b8c8d1;
    border-radius: 8px;
    background: #fff;
    color: #16232d;
    font: inherit;
    font-size: 0.95rem;
}

:where(textarea) {
    min-height: 5rem;
    resize: vertical;
}

:where(input, select, textarea):focus {
    border-color: #176b67;
    outline: 2px solid rgb(23 107 103 / 25%);
    outline-offset: 0;
}

@media (max-width: 760px) {
    .admin-grid {
        grid-template-columns: 1fr;
    }

    .data-table {
        display: block;
        overflow-x: auto;
    }

    .account-actions span {
        display: none;
    }

    .company-switcher label {
        display: none;
    }
}

.eyebrow {
    margin: 0 0 0.75rem;
    color: #247a74;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    color: #123b52;
    font-size: clamp(2.4rem, 8vw, 4.6rem);
    line-height: 1;
}

.status {
    margin-top: 2rem;
    color: #5a6b75;
}

/* Tesserino di riconoscimento */
.badge-layout {
    display: grid;
    grid-template-columns: minmax(260px, 360px) 1fr;
    gap: 1.25rem;
    align-items: start;
}

.badge-sidebar {
    display: grid;
    gap: 0.75rem;
}

.badge-sidebar h2 {
    margin: 0;
}

.upload-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.badge-warning {
    padding: 0.7rem 0.85rem;
    border: 1px solid #e3b341;
    border-radius: 8px;
    background: #fff8e1;
    color: #6b4e00;
    font-size: 0.9rem;
}

.badge-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    border: 1px dashed #b8c7d0;
    border-radius: 10px;
    background: #eef2f4;
    overflow-x: auto;
}

.id-badge {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: none;
    box-sizing: border-box;
    width: 120mm;
    height: 70mm;
    padding: 4mm;
    overflow: hidden;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
}

.id-badge-main {
    display: flex;
    flex: 1;
    gap: 5mm;
    min-height: 0;
}

.id-badge-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5mm;
    width: 28mm;
}

.id-badge-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 13mm;
    font-size: 7pt;
    font-weight: 700;
    text-align: center;
}

.id-badge-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.id-badge-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26mm;
    height: 31mm;
    overflow: hidden;
    border: 1px solid #666;
    background: #f8f9fa;
    color: #999;
    font-size: 7pt;
}

.id-badge-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.id-badge-right {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding-top: 1mm;
}

.id-badge-name {
    margin-bottom: 1.5mm;
    font-size: 14.5pt;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
}

.id-badge-role {
    margin-bottom: 1mm;
    color: #333;
    font-size: 10pt;
}

.id-badge-number {
    margin-bottom: 2mm;
    font-size: 10.5pt;
    font-weight: 700;
}

.id-badge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6mm 4mm;
}

.id-badge-grid div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.id-badge-grid .full {
    grid-column: span 2;
}

.id-badge-grid span {
    color: #555;
    font-size: 6.5pt;
    font-weight: 700;
    text-transform: uppercase;
}

.id-badge-grid strong {
    overflow: hidden;
    font-size: 9.5pt;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.id-badge-footer {
    margin-top: 1.5mm;
    padding-top: 1.5mm;
    border-top: 1px solid #ccc;
    color: #333;
    font-size: 7pt;
    line-height: 1.4;
    text-align: center;
}

.logo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.logo-preview {
    max-width: 160px;
    max-height: 64px;
    object-fit: contain;
}

.logo-placeholder {
    color: #6b7c86;
    font-style: italic;
}

@media (max-width: 900px) {
    .badge-layout {
        grid-template-columns: 1fr;
    }
    .payslip-combined-upload, .payslip-summary-grid { grid-template-columns: 1fr; }
    .payslip-send-actions { align-items: stretch; }
}

@media print {
    @page {
        size: auto;
        margin: 10mm;
    }

    body:has(.id-badge) {
        background: #fff;
    }

    body:has(.id-badge) .site-header,
    body:has(.id-badge) .flash-stack,
    .badge-toolbar,
    .badge-sidebar,
    .badge-preview > .section-description {
        display: none !important;
    }

    body:has(.id-badge) .page-shell,
    .badge-layout,
    .badge-preview {
        display: block;
        padding: 0;
        border: 0;
        background: none;
    }

    .id-badge {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* Proroghe */
.data-table .link-button {
    color: #176b67;
    text-decoration: underline;
}

.extension-warnings {
    margin-bottom: 1rem;
}

.extension-warnings ul {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
}

.extension-count-limit {
    color: #a52323;
    font-weight: 700;
}

/* Azioni a icona nelle tabelle */
td.table-actions > .icon-action,
td.table-actions > form:has(.icon-action) {
    display: inline-flex;
    margin-right: 0.15rem;
    vertical-align: middle;
}

.icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #176b67;
    cursor: pointer;
}

.icon-action:hover,
.icon-action:focus-visible {
    border-color: #b9d6d3;
    background: #e8f3f2;
}

.icon-action.icon-danger {
    color: #a52323;
}

.icon-action.icon-danger:hover,
.icon-action.icon-danger:focus-visible {
    border-color: #efc4c4;
    background: #fbeaea;
}

.icon {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Tag documenti */
.tag-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 360px);
    gap: 0.75rem 1rem;
    align-items: end;
}

.tag-toolbar form {
    margin: 0;
}

.tag-index {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    gap: 0.5rem;
}

.tag-index a {
    padding: 0.3rem 0.65rem;
    border: 1px solid #c9dbe0;
    border-radius: 999px;
    background: #f4f8f9;
    color: #176b67;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.tag-index a span {
    margin-left: 0.2rem;
    color: #6b7c86;
    font-weight: 600;
}

.tag-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 780px), 1fr));
    gap: 1rem;
    align-items: start;
}

.tag-group {
    margin: 0;
    scroll-margin-top: 5rem;
}

.tag-group[hidden] {
    display: none;
}

.tag-table td {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.tag-group-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: baseline;
    justify-content: space-between;
}

.tag-group-heading h2 {
    margin: 0;
}

.tag-source {
    color: #6b7c86;
    font-size: 0.85rem;
}


.tag-table code {
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    background: #eef4f5;
    color: #123b52;
    font-size: 0.9rem;
    white-space: nowrap;
    user-select: all;
}

.tag-example {
    max-width: 22rem;
    overflow: hidden;
    color: #4b5d67;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-copy {
    width: 1%;
    text-align: right;
}

.tag-copy .secondary-button {
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 760px) {
    .tag-toolbar {
        grid-template-columns: 1fr;
    }
}

/* Mostra/nascondi password */
.password-field {
    position: relative;
}

.password-field input {
    width: 100%;
    padding-right: 3rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #4b5d67;
    cursor: pointer;
    transform: translateY(-50%);
}

.password-toggle:hover,
.password-toggle:focus-visible {
    background: #e8f3f2;
    color: #176b67;
}

/* Home: cruscotto */
.dashboard-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.dashboard-tile {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    border-left: 4px solid #b9d6d3;
    color: #123b52;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.dashboard-tile:hover,
.dashboard-tile:focus-visible {
    box-shadow: 0 10px 24px rgb(30 66 87 / 12%);
    transform: translateY(-1px);
}

.dashboard-tile strong {
    font-size: 2rem;
    line-height: 1;
}

.dashboard-tile span {
    color: #4b5d67;
    font-size: 0.92rem;
    font-weight: 600;
}

.dashboard-tile.tile-warning {
    border-left-color: #e3b341;
}

.dashboard-tile.tile-warning strong {
    color: #9a6500;
}

.dashboard-tile.tile-danger {
    border-left-color: #d46a6a;
}

.dashboard-tile.tile-danger strong {
    color: #a52323;
}

.dashboard-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
}

.dashboard-columns.single {
    grid-template-columns: 1fr;
}

.dashboard-columns > .panel,
.dashboard > .panel {
    margin: 0 0 1rem;
}

.dashboard h2 {
    margin: 0;
}

.cell-note {
    display: block;
    color: #6b7c86;
    font-size: 0.8rem;
    font-weight: 600;
}

.empty-state {
    color: #6b7c86;
    font-style: italic;
}

.cell-note.status-scaduto {
    color: #a52323;
}

.cell-note.status-in_scadenza {
    color: #9a6500;
}

.dashboard .page-heading > a {
    color: #176b67;
    font-weight: 700;
    white-space: nowrap;
}

.deadline-groups,
.deadline-items,
.movement-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.deadline-groups > li {
    padding: 0.7rem 0;
    border-bottom: 1px solid #e3eaee;
}

.deadline-groups > li:last-child {
    border-bottom: 0;
}

.deadline-person small {
    margin-left: 0.35rem;
    color: #6b7c86;
}

.deadline-items li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.35rem;
    color: #4b5d67;
    font-size: 0.92rem;
}

.movement-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem 2rem;
}

.movement-columns h3 {
    margin: 0.5rem 0;
    font-size: 1rem;
}

.movement-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    justify-content: space-between;
    padding: 0.45rem 0;
    border-bottom: 1px solid #e3eaee;
}

.movement-list a {
    color: #123b52;
    text-decoration: none;
}

.movement-list span {
    color: #6b7c86;
    font-size: 0.9rem;
}

@media (max-width: 1100px) {
    .dashboard-columns {
        grid-template-columns: 1fr;
    }
}

/* Copertina A4 del fascicolo personale */
.cover-preview {
    display: flex;
    justify-content: center;
    padding: 1.5rem;
    overflow-x: auto;
    border: 1px dashed #b8c7d0;
    border-radius: 10px;
    background: #e6ecef;
}

.cover-sheet {
    page: cover;
    position: relative;
    display: flex;
    flex: none;
    flex-direction: column;
    box-sizing: border-box;
    width: 210mm;
    height: 297mm;
    padding: 0 26mm 12mm 16mm;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgb(18 59 82 / 18%);
    color: #1f2d36;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 10.5pt;
    line-height: 1.35;
}

.cover-spine {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 14mm;
    padding: 14mm 0 12mm;
    background: #123b52;
    color: #fff;
}

.cover-spine span {
    font-size: 11pt;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: rotate(180deg);
    writing-mode: vertical-rl;
}

.cover-spine strong {
    padding: 2mm 1mm;
    border-radius: 2mm;
    background: #2a9d8f;
    font-size: 12pt;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.cover-head {
    display: flex;
    gap: 6mm;
    align-items: center;
    padding: 10mm 0 5mm;
    border-bottom: 0.6mm solid #123b52;
}

.cover-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38mm;
    height: 16mm;
    font-weight: 800;
    text-align: center;
}

.cover-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cover-company {
    display: grid;
    gap: 1mm;
    font-size: 9pt;
    color: #4b5d67;
}

.cover-company strong {
    color: #123b52;
    font-size: 12pt;
    text-transform: uppercase;
}

.cover-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 6mm 0 4.5mm;
}

.cover-title p {
    margin: 0;
    color: #176b67;
    font-size: 13pt;
    font-weight: 800;
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.cover-title span {
    padding: 1mm 3mm;
    border: 0.3mm solid #a52323;
    border-radius: 1.5mm;
    color: #a52323;
    font-size: 8pt;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cover-identity {
    display: flex;
    gap: 8mm;
    align-items: stretch;
    justify-content: space-between;
    padding: 5mm 7mm;
    border-radius: 3mm;
    background: linear-gradient(135deg, #eef6f5 0%, #f6f9fa 100%);
}

.cover-label {
    color: #6b7c86;
    font-size: 8pt;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cover-name h2 {
    margin: 1.5mm 0 4mm;
    color: #123b52;
    font-size: 27pt;
    font-weight: 900;
    line-height: 1.02;
    text-transform: uppercase;
}

.cover-name h2 small {
    display: block;
    margin-top: 1.5mm;
    color: #176b67;
    font-size: 19pt;
    font-weight: 700;
}

.cover-number {
    display: inline-flex;
    gap: 3mm;
    align-items: baseline;
    padding: 2mm 4mm;
    border-radius: 2mm;
    background: #123b52;
    color: #fff;
}

.cover-number span {
    font-size: 8pt;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cover-number strong {
    font-size: 16pt;
}

.cover-photo {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 27mm;
    height: 34mm;
    overflow: hidden;
    border: 0.3mm solid #b8c7d0;
    border-radius: 2mm;
    background: #fff;
    color: #9aa9b2;
    font-size: 8pt;
    text-transform: uppercase;
}

.cover-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-data {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.6mm 6mm;
    margin: 5.5mm 0 0;
}

.cover-data div {
    padding-bottom: 1.5mm;
    border-bottom: 0.2mm solid #dbe4e8;
}

.cover-data .wide {
    grid-column: span 3;
}

.cover-data .span-2 {
    grid-column: span 2;
}

.cover-data dt {
    color: #6b7c86;
    font-size: 7.5pt;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cover-data dd {
    margin: 0.8mm 0 0;
    color: #1f2d36;
    font-size: 10.5pt;
    font-weight: 600;
}

.cover-checklist {
    flex: 1;
    margin-top: 6mm;
}

.cover-checklist h3 {
    margin: 0 0 3mm;
    color: #123b52;
    font-size: 10pt;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cover-checklist ol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6mm 8mm;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cover-checklist li {
    display: grid;
    grid-template-columns: 4.5mm 1fr;
    gap: 0 2.5mm;
    align-items: start;
}

.cover-box {
    width: 4mm;
    height: 4mm;
    margin-top: 0.4mm;
    border: 0.35mm solid #123b52;
    border-radius: 0.8mm;
}

.cover-item {
    font-size: 9pt;
    font-weight: 600;
}

.cover-item small {
    display: block;
    color: #6b7c86;
    font-size: 7.5pt;
    font-weight: 400;
}

.cover-line {
    grid-column: 2;
    height: 2.2mm;
    border-bottom: 0.2mm dotted #9aa9b2;
}

.cover-foot {
    padding-top: 3mm;
    border-top: 0.6mm solid #123b52;
    color: #6b7c86;
    font-size: 7.5pt;
}

.cover-foot p {
    margin: 0.5mm 0;
}

@page cover {
    size: A4 portrait;
    margin: 0;
}

@media print {
    body:has(.cover-sheet) {
        background: #fff;
    }

    body:has(.cover-sheet) .site-header,
    body:has(.cover-sheet) .flash-stack,
    .cover-toolbar {
        display: none !important;
    }

    body:has(.cover-sheet) .page-shell,
    .cover-preview {
        display: block;
        padding: 0;
        border: 0;
        background: none;
    }

    .cover-sheet {
        box-shadow: none;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* Stampa nota spese: foglio A4 che può proseguire su più pagine. */
.expense-preview {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    padding: 18px 0;
}

.expense-sheet {
    page: expense;
    box-sizing: border-box;
    width: 210mm;
    min-height: 297mm;
    padding: 12mm 14mm;
    background: #fff;
    box-shadow: 0 10px 30px rgb(18 59 82 / 18%);
    color: #1f2d36;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 9.5pt;
    line-height: 1.35;
}

.expense-head {
    display: flex;
    gap: 6mm;
    align-items: center;
    padding-bottom: 4mm;
    border-bottom: 0.6mm solid #123b52;
}

.expense-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38mm;
    height: 15mm;
    font-weight: 800;
    text-align: center;
}

.expense-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.expense-company {
    display: grid;
    gap: 1mm;
    color: #4b5d67;
    font-size: 9pt;
}

.expense-company strong {
    color: #123b52;
    font-size: 12pt;
}

.expense-title {
    margin: 6mm 0 2mm;
    color: #176b67;
    font-size: 15pt;
    letter-spacing: 0.3em;
    text-align: center;
    text-transform: uppercase;
}

.expense-title span {
    display: block;
    margin-top: 1mm;
    color: #4b5d67;
    font-size: 9.5pt;
    letter-spacing: 0.05em;
    text-transform: none;
}

.expense-section {
    margin: 5mm 0 2mm;
    padding-bottom: 1mm;
    border-bottom: 0.2mm solid #c9d3d8;
    color: #123b52;
    font-size: 9pt;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.expense-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
    border-top: 0.2mm solid #c9d3d8;
    border-left: 0.2mm solid #c9d3d8;
}

.expense-info > div {
    display: grid;
    grid-template-columns: 34mm 1fr;
    border-right: 0.2mm solid #c9d3d8;
    border-bottom: 0.2mm solid #c9d3d8;
}

.expense-info .wide {
    grid-column: 1 / -1;
}

.expense-info dt {
    padding: 1.6mm 2.5mm;
    background: #eef3f5;
    color: #4b5d67;
    font-weight: 700;
}

.expense-info dd {
    margin: 0;
    padding: 1.6mm 2.5mm;
}

.expense-items {
    width: 100%;
    border-collapse: collapse;
}

.expense-items th,
.expense-items td {
    padding: 1.6mm 2mm;
    border: 0.2mm solid #b8c4ca;
    text-align: left;
    vertical-align: top;
}

.expense-items th {
    background: #123b52;
    color: #fff;
    font-size: 8.5pt;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.expense-items tbody tr:nth-child(even) {
    background: #f6f8f9;
}

.expense-items tr {
    break-inside: avoid;
}

.expense-items .col-date { width: 19mm; }
.expense-items .col-supplier { width: 32mm; }
.expense-items .col-notes { width: 36mm; }
.expense-items .col-amount { width: 24mm; }

.expense-items .amount,
.expense-items .col-amount {
    text-align: right;
    white-space: nowrap;
}

.expense-flag {
    color: #a52323;
    font-size: 8pt;
}

.expense-empty {
    padding: 4mm;
    color: #4b5d67;
    font-style: italic;
    text-align: center;
}

.expense-bottom {
    break-inside: avoid;
}

.expense-totals {
    width: 85mm;
    margin: 4mm 0 0 auto;
    border-collapse: collapse;
}

.expense-totals th,
.expense-totals td {
    padding: 1.6mm 2.5mm;
    border: 0.2mm solid #c9d3d8;
}

.expense-totals th {
    background: #eef3f5;
    color: #4b5d67;
    text-align: left;
}

.expense-totals td {
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}

.expense-totals .non-reimbursable td {
    color: #a52323;
}

.expense-totals .reimbursable th,
.expense-totals .reimbursable td {
    background: #e3f1ef;
    color: #176b67;
    font-size: 11pt;
}

.expense-signatures {
    display: flex;
    justify-content: space-between;
    gap: 20mm;
    margin-top: 16mm;
}

.expense-signatures div {
    display: grid;
    flex: 1;
    gap: 0.5mm;
    padding-top: 1.5mm;
    border-top: 0.3mm solid #1f2d36;
    text-align: center;
}

.expense-signatures span {
    font-weight: 700;
}

.expense-signatures small {
    color: #4b5d67;
}

.expense-foot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4mm;
    margin-top: 12mm;
    padding-top: 3mm;
    border-top: 0.2mm solid #c9d3d8;
    color: #4b5d67;
    font-size: 8pt;
    break-inside: avoid;
}

.expense-foot b {
    display: block;
    margin-bottom: 0.8mm;
    color: #123b52;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.expense-foot p {
    grid-column: 1 / -1;
    margin: 0;
    text-align: right;
}

@page expense {
    size: A4 portrait;
    margin: 12mm 14mm;
}

@media print {
    :root:has(.expense-sheet),
    body:has(.expense-sheet) {
        background: #fff;
    }

    body:has(.expense-sheet) .site-header,
    body:has(.expense-sheet) .flash-stack,
    .expense-print-toolbar {
        display: none !important;
    }

    body:has(.expense-sheet) .page-shell,
    .expense-preview {
        display: block;
        padding: 0;
        border: 0;
        background: none;
    }

    .expense-sheet {
        width: auto;
        min-height: 0;
        padding: 0;
        box-shadow: none;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* Report stampabili (templates/_report_sheet.html): foglio A4 orizzontale su più pagine. */
.report-options {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.report-options .form-field { flex: 1 1 200px; margin: 0; }
.report-options .checkbox-field { margin: 0 0 0.6rem; }
.report-options .secondary-button { width: auto; }

/* Barra compatta sopra l'anteprima: filtri a sinistra, azioni a destra. */
.report-toolbar-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
}

.report-toolbar-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    gap: 0.75rem;
    margin: 0;
}

.report-toolbar-group .form-field { margin: 0; }
.report-toolbar-group .primary-button,
.report-toolbar-group .secondary-button { width: auto; white-space: nowrap; }
.report-toolbar-group select { min-width: 0; }
.report-field-narrow { width: 8rem; }
.report-toolbar-doma .form-field { width: 18rem; }

.report-toolbar-doma {
    padding-left: 2rem;
    border-left: 1px solid #dfe7eb;
}

.report-toolbar-hint {
    max-width: 30rem;
    margin: 0;
    color: #4b5d67;
}

@media (max-width: 760px) {
    .report-toolbar-group { flex-wrap: wrap; }
    .report-toolbar-doma {
        padding-left: 0;
        border-left: 0;
    }
    .report-toolbar-doma .form-field { width: 100%; }
}

.report-preview {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    padding: 18px 0;
}

.report-sheet {
    page: report;
    box-sizing: border-box;
    width: 297mm;
    min-height: 210mm;
    padding: 10mm 12mm;
    background: #fff;
    box-shadow: 0 10px 30px rgb(18 59 82 / 18%);
    color: #1f2d36;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 8.5pt;
    line-height: 1.3;
}

.report-head {
    display: flex;
    gap: 6mm;
    align-items: center;
    padding-bottom: 3mm;
    border-bottom: 0.6mm solid #123b52;
}

.report-logo {
    display: flex;
    flex: 0 0 34mm;
    align-items: center;
    justify-content: center;
    height: 13mm;
    font-weight: 800;
    text-align: center;
}

.report-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.report-company {
    display: grid;
    gap: 0.8mm;
    color: #4b5d67;
}

.report-company strong {
    color: #123b52;
    font-size: 11pt;
}

.report-heading {
    margin-left: auto;
    text-align: right;
}

.report-heading h2 {
    margin: 0;
    color: #176b67;
    font-size: 14pt;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.report-heading p {
    margin: 1mm 0 0;
    color: #4b5d67;
}

.report-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 2mm;
    margin: 4mm 0;
}

.report-summary > div {
    min-width: 24mm;
    padding: 1.5mm 3mm;
    border: 0.2mm solid #c9d3d8;
    border-radius: 1.5mm;
    background: #f6f8f9;
}

.report-summary dt {
    color: #4b5d67;
    font-size: 7.5pt;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.report-summary dd {
    margin: 0;
    color: #123b52;
    font-size: 12pt;
    font-weight: 800;
}

.report-summary .report-kpi {
    background: #123b52;
    border-color: #123b52;
}

.report-summary .report-kpi dt,
.report-summary .report-kpi dd {
    color: #fff;
}

.report-group {
    margin-top: 4mm;
}

.report-group h3 {
    display: flex;
    justify-content: space-between;
    margin: 0 0 1.5mm;
    padding: 1.2mm 2mm;
    background: #e3f1ef;
    color: #123b52;
    font-size: 9.5pt;
    break-after: avoid;
}

.report-group h3 span {
    color: #176b67;
    font-weight: 600;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
}

.report-table:has(colgroup) {
    table-layout: fixed;
}

.report-ok { color: #176b67; font-weight: 700; }
.report-ko { color: #a52323; font-weight: 700; }

.report-table th,
.report-table td {
    padding: 1.2mm 1.6mm;
    border-bottom: 0.2mm solid #d5dde1;
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.report-table th {
    background: #123b52;
    color: #fff;
    font-size: 7pt;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow-wrap: normal;
}

.report-table tbody tr:nth-child(even) {
    background: #f6f8f9;
}

.report-table tr {
    break-inside: avoid;
}

.report-table small {
    color: #4b5d67;
    font-size: 7pt;
}

.report-table .num,
.report-table .date {
    white-space: nowrap;
}

.report-table .c-num { width: 11mm; }
.report-table .c-name { width: 40mm; }
.report-table .c-job { width: 32mm; }
.report-table .c-site { width: 50mm; }
.report-table .c-contract { width: 25mm; }
.report-table .c-date { width: 19mm; }
.report-table .c-small { width: 15mm; }
.report-table .c-status { width: 30mm; }

.report-status {
    display: inline-block;
    padding: 0.4mm 2mm;
    border-radius: 3mm;
    background: #dff3e8;
    color: #145b39;
    font-size: 7.5pt;
    font-weight: 700;
    white-space: nowrap;
}

.report-dot {
    display: inline-block;
    width: 2.2mm;
    height: 2.2mm;
    margin-right: 1mm;
    padding: 0;
    border-radius: 50%;
}

.report-status-in-scadenza { background: #ffc107; color: #000; }
.report-status-scadenza-imminente { background: #fd7e14; color: #fff; }
.report-status-distaccato { background: #dbeafe; color: #1e3a8a; }
.report-status-cessato { background: #dc3545; color: #fff; }
.report-dot.report-status-attivo { background: #2f9e6b; }

.report-empty {
    padding: 6mm;
    color: #4b5d67;
    font-style: italic;
    text-align: center;
}

.report-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 6mm;
    padding-top: 2mm;
    border-top: 0.2mm solid #c9d3d8;
    color: #4b5d67;
    font-size: 7.5pt;
}

@page report {
    size: A4 landscape;
    margin: 9mm 10mm 12mm;

    @bottom-right {
        content: "Pagina " counter(page) " di " counter(pages);
        color: #4b5d67;
        font-family: "Segoe UI", Arial, Helvetica, sans-serif;
        font-size: 7.5pt;
    }
}

@media print {
    :root:has(.report-sheet),
    body:has(.report-sheet) {
        background: #fff;
    }

    body:has(.report-sheet) .site-header,
    body:has(.report-sheet) .flash-stack,
    .report-toolbar,
    .report-toolbar-panel,
    .report-options {
        display: none !important;
    }

    body:has(.report-sheet) .page-shell,
    .report-preview {
        display: block;
        padding: 0;
        border: 0;
        background: none;
    }

    .report-sheet {
        width: auto;
        min-height: 0;
        padding: 0;
        box-shadow: none;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .report-table thead {
        display: table-header-group;
    }
}

/* Report in A4 verticale (scheda dipendente). */
.report-sheet.report-portrait {
    page: report-portrait;
    width: 210mm;
    min-height: 297mm;
    padding: 12mm 14mm;
    font-size: 9pt;
}

@page report-portrait {
    size: A4 portrait;
    margin: 12mm 14mm 14mm;

    @bottom-right {
        content: "Pagina " counter(page) " di " counter(pages);
        color: #4b5d67;
        font-family: "Segoe UI", Arial, Helvetica, sans-serif;
        font-size: 7.5pt;
    }
}

.report-portrait .report-summary .report-kpi {
    flex: 1 1 60mm;
}

.sheet-section {
    break-inside: avoid;
}

.sheet-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 6mm;
    margin: 0;
}

.sheet-fields > div {
    display: grid;
    grid-template-columns: 38mm minmax(0, 1fr);
    gap: 2mm;
    padding: 1.2mm 1mm;
    border-bottom: 0.2mm solid #dfe6e9;
}

.sheet-fields > div.wide {
    grid-column: 1 / -1;
}

.sheet-fields dt {
    color: #4b5d67;
}

.sheet-fields dd {
    margin: 0;
    color: #1f2d36;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.sheet-lines span {
    display: block;
    height: 7mm;
    border-bottom: 0.2mm solid #b8c7d0;
}

.sheet-empty,
.sheet-privacy {
    color: #4b5d67;
}

.sheet-privacy {
    margin: 5mm 0 0;
    font-size: 7.5pt;
}

@media print {
    .report-sheet.report-portrait {
        width: auto;
        min-height: 0;
        padding: 0;
    }
}

/* Tabelle di cifre nei report (organico medio). */
.report-figures th,
.report-figures td {
    text-align: right;
    white-space: nowrap;
}

.report-figures .label {
    text-align: left;
}

.report-figures .total {
    background: #e3f1ef;
    font-weight: 700;
}

.report-figures thead .total {
    background: #176b67;
}

.report-figures tfoot th {
    background: #eef3f5;
    color: #123b52;
    font-size: 8.5pt;
    letter-spacing: 0;
    text-transform: none;
    border-top: 0.4mm solid #123b52;
}

.report-figures .report-muted td {
    color: #8a99a1;
    font-style: italic;
}

.report-figures .report-muted td:last-child {
    text-align: left;
}

.report-figures .report-current td {
    background: #fff6db;
}

.report-summary dd small {
    color: #4b5d67;
    font-size: 8pt;
    font-weight: 600;
}

.report-note {
    margin: 5mm 0 0;
    padding: 2.5mm 3mm;
    border-left: 0.8mm solid #176b67;
    background: #f6f8f9;
    color: #4b5d67;
    font-size: 7.5pt;
    break-inside: avoid;
}

/* Storico di qualifica, livello e cantiere (ADR-033). */
.history-grid {
    display: grid;
    gap: 1rem;
}

.history-section h2 {
    margin: 0 0 0.75rem;
    color: #123b52;
    font-size: 1.1rem;
}

.history-section .history-current td {
    background: #e3f1ef;
    font-weight: 700;
}

.history-section small {
    color: #6b7c86;
}

.history-add {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #dfe7eb;
}

.history-add .form-field {
    flex: 1 1 200px;
    margin: 0;
}

.history-add .primary-button {
    width: auto;
}

.history-change .checkbox-field {
    align-self: end;
}

/* Cedolini: seleziona tutti e testi dell'invio */
.select-all {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    cursor: pointer;
}

.payslip-email-texts {
    margin-top: 1rem;
}

.payslip-email-texts h2 {
    margin-top: 0;
}

/* Pagina pubblica di verifica del tesserino (QR code), pensata per il telefono */
.verify-body {
    margin: 0;
    padding: 1rem;
    background: #eef2f4;
    color: #1f2d36;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

.verify-card {
    max-width: 30rem;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgb(18 59 82 / 14%);
}

.verify-company {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid #e1e8ec;
}

.verify-company img {
    max-width: 5.5rem;
    max-height: 3rem;
    object-fit: contain;
}

.verify-company span,
.verify-data dt {
    display: block;
    color: #5b6b75;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.verify-company strong {
    color: #123b52;
    font-size: 1.05rem;
}

.verify-status {
    padding: 0.8rem 1.2rem;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    text-align: center;
}

.verify-status-ok { background: #176b67; }
.verify-status-ko { background: #a52323; }

.verify-person {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1.2rem;
}

.verify-photo {
    width: 6rem;
    height: 7.4rem;
    border: 1px solid #c9d3d8;
    border-radius: 8px;
    object-fit: cover;
}

.verify-person h1 {
    margin: 0 0 0.25rem;
    color: #123b52;
    font-size: 1.45rem;
    line-height: 1.2;
    text-transform: uppercase;
}

.verify-person p { margin: 0; color: #5b6b75; }

.verify-data {
    display: grid;
    gap: 0.8rem;
    margin: 0;
    padding: 0 1.2rem 1.2rem;
}

.verify-data dd {
    margin: 0.1rem 0 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.verify-checks {
    padding: 1rem 1.2rem;
    border-top: 1px solid #e1e8ec;
}

.verify-checks h2 {
    margin: 0 0 0.6rem;
    color: #123b52;
    font-size: 1rem;
}

.verify-check {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
    padding: 0.65rem 0.8rem;
    border-left: 6px solid;
    border-radius: 6px;
}

.verify-check-in_regola { border-color: #176b67; background: #e3f1ef; }
.verify-check-in_regola strong { color: #176b67; }
.verify-check-scaduta { border-color: #a52323; background: #fbe9e9; }
.verify-check-scaduta strong { color: #a52323; }
.verify-check-non_registrata { border-color: #8a97a0; background: #f1f4f5; }
.verify-check-non_registrata strong { color: #5b6b75; }

.verify-note {
    margin: 0;
    padding: 0 1.2rem 1.2rem;
    color: #a52323;
    font-weight: 600;
}

.verify-foot {
    padding: 0.9rem 1.2rem;
    background: #f6f8f9;
    color: #5b6b75;
    font-size: 0.74rem;
    line-height: 1.4;
}

/* QR code sul tesserino */
.id-badge-head {
    display: flex;
    gap: 2mm;
    justify-content: space-between;
}

.id-badge-head > div:first-child { min-width: 0; }

.id-badge-qr {
    flex: none;
    width: 19mm;
    height: 19mm;
}

.id-badge-qr .badge-qr {
    display: block;
    width: 100%;
    height: 100%;
}

/* Modulo RSPP: menu interno, gruppi di tabella, stati */
.module-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 1.2rem;
    border-bottom: 2px solid #dfe6e9;
}

.module-nav a {
    margin-bottom: -2px;
    padding: 0.55rem 0.95rem;
    border-bottom: 2px solid transparent;
    color: #4b5d67;
    font-weight: 700;
    text-decoration: none;
}

.module-nav a:hover { color: #123b52; }

.module-nav a.active {
    border-bottom-color: #176b67;
    color: #176b67;
}

.status-senza_scadenza { color: #5b6b75; }

a.panel { text-decoration: none; }

.data-table .table-group th {
    padding-top: 1.1rem;
    background: none;
    color: #176b67;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.row-muted td { color: #8a97a0; }

/* Pianificazione RSPP: stati delle sessioni */
.session-status {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.session-status-da_definire { background: #eef1f3; color: #4b5d67; }
.session-status-da_richiedere { background: #fdecc8; color: #7a4d00; }
.session-status-richiesto { background: #e4ecfb; color: #1e3a8a; }
.session-status-programmato { background: #e3f1ef; color: #145a56; }
.session-status-svolto { background: #176b67; color: #fff; }
.session-status-annullato { background: #f3e1e1; color: #8a2020; text-decoration: line-through; }

.session-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 1rem;
    align-items: start;
}

.session-facts {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 1rem;
}

.session-facts div { display: flex; gap: 0.5rem; }
.session-facts dt { min-width: 7.5rem; color: #5b6b75; }
.session-facts dd { margin: 0; font-weight: 600; }

.session-dates {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.session-dates li {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.45rem 0.6rem;
    border-left: 4px solid #176b67;
    border-radius: 6px;
    background: #f4f8f8;
}

.session-dates li form { margin-left: auto; }

.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: flex-end;
}

.inline-form .form-field { margin: 0; }
.inline-form .secondary-button { width: auto; }

.session-close {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-top: 1rem;
}

.session-close .form-field { margin: 0; }
.session-close .section-description { flex: 1 1 18rem; margin: 0; }
.session-close .primary-button { width: auto; }

.conflict-note { color: #a52323; font-weight: 600; }

/* Calendario mensile */
.calendar-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.calendar-head h2 { min-width: 11rem; margin: 0; text-align: center; }
.calendar-head .secondary-button { width: auto; padding-inline: 0.9rem; }
.calendar-today { font-weight: 700; }

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-left: auto;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid #dfe6e9;
    border-left: 1px solid #dfe6e9;
}

.calendar-weekday {
    padding: 0.45rem;
    border-right: 1px solid #dfe6e9;
    border-bottom: 1px solid #dfe6e9;
    background: #f6f8f9;
    color: #4b5d67;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.calendar-day {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 7rem;
    padding: 0.35rem;
    border-right: 1px solid #dfe6e9;
    border-bottom: 1px solid #dfe6e9;
    background: #fff;
}

.calendar-weekend { background: #fafbfc; }
.calendar-out { background: #f3f5f6; }
.calendar-out .calendar-number { color: #a3afb6; }

.calendar-number {
    align-self: flex-start;
    padding: 0 0.3rem;
    border-radius: 6px;
    color: #4b5d67;
    font-weight: 700;
    text-decoration: none;
}

.calendar-number:hover { background: #e3f1ef; }
.calendar-today-cell .calendar-number { background: #176b67; color: #fff; }

.calendar-event {
    display: block;
    overflow: hidden;
    padding: 0.2rem 0.35rem;
    border-radius: 5px;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
}

.calendar-event span { font-weight: 800; }
.calendar-event small { display: block; font-weight: 400; opacity: 0.85; }

@media (max-width: 900px) {
    .session-grid { grid-template-columns: 1fr; }
    .calendar-day { min-height: 5rem; }
    .calendar-event small { display: none; }
}

.field-grid-top { align-items: start; }