@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

* {
      box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f3f5f7;
    color: #20252b;
}

a {
      color: #174a8b;
}

.topbar {
    background: #111827;
    color: white;
    padding: 15px 25px;

      display: flex;
      justify-content: space-between;
      align-items: center;
}

.topbar a {
    color: white;
}

.container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.login-box {
    width: 100%;
    max-width: 430px;

      margin: 80px auto;
      padding: 35px;

      background: white;
    border-radius: 10px;

    box-shadow: 0 5px 30px rgba(0,0,0,.10);
}

label {
    display: block;
    margin-bottom: 18px;
    font-weight: bold;
}

input,
select {
    width: 100%;
    margin-top: 7px;

    padding: 12px;

    border: 1px solid #ccd2d8;
    border-radius: 6px;

    font-size: 16px;
}

button,
.button {
    display: inline-block;

    padding: 11px 18px;

    background: #174a8b;
    color: white;

    border: 0;
    border-radius: 6px;

    text-decoration: none;

    cursor: pointer;
}

button:hover,
.button:hover {
    background: #123b70;
}

.button.secondary {
    background: #555;
}

table {
    width: 100%;
    border-collapse: collapse;

    background: white;
}

th,
td {
    padding: 13px;
    border-bottom: 1px solid #ddd;

    text-align: left;
}

th {
    background: #e9edf1;
}

.card {
    background: white;
    padding: 25px;
    margin-bottom: 20px;

    border-radius: 8px;
}

.stats {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(200px, 1fr));

    gap: 20px;
}

.stats .card {
    text-align: center;
}

.stats strong {
    display: block;

    font-size: 35px;
    margin-bottom: 10px;
}

.error {
    padding: 15px;
    margin-bottom: 20px;

    color: #721c24;
    background: #f8d7da;

    border-radius: 6px;
}

.success {
    padding: 15px;
    margin-bottom: 20px;

    color: #155724;
    background: #d4edda;

    border-radius: 6px;
}

.warning {
    color: #856404;
}

.badge {
    display: inline-block;

    padding: 5px 8px;
    border-radius: 5px;

    font-size: 13px;
}

.badge.success {
    color: #155724;
    background: #d4edda;
}

.badge.warning {
    color: #856404;
    background: #fff3cd;
}

.pdf-container {
    width: 100%;
    height: 800px;

    background: #444;

    margin-bottom: 25px;
}

.pdf-container iframe {
    width: 100%;
    height: 100%;

    border: 0;
}

.acknowledgement {
    background: white;

    padding: 25px;

    border-radius: 8px;

    margin-bottom: 30px;
}

.checkbox {
    font-weight: normal;
}

.checkbox input {
    width: auto;
    margin-right: 8px;
}

.password-field {
    position: relative;
    display: block;
    margin-top: 7px;
}

.password-field input {
    margin-top: 0;
    padding-right: 50px;
}

.password-field .password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 7px;
    place-items: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #174a8b;
}

.area-login-card .password-field .password-toggle {
    margin: 0;
    padding: 0;
}

.button.danger {
    background: #b42318;
}

.button.danger:hover,
.button.danger:focus-visible {
    background: #8f1c13;
}

.password-field .password-toggle:hover,
.password-field .password-toggle:focus-visible {
    background: #e9edf1;
    outline: none;
}

.password-field .password-toggle:focus-visible {
    outline: 2px solid #174a8b;
    outline-offset: 1px;
}

.password-field .password-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.password-field .password-eye-slash {
    display: none;
}

.password-field .password-toggle.is-visible .password-eye-slash {
    display: block;
}

.area-login-card .password-field input {
    margin-top: 0;
}

.success-card {
    border-left: 5px solid #28a745;
}

@media (max-width: 700px) {

    .topbar {
        gap: 10px 16px;
        flex-wrap: wrap;
        padding: 12px 16px;
    }

    .container {
        margin: 24px auto;
        padding: 0 16px;
    }

    h1 {
        font-size: 26px;
        line-height: 1.2;
    }

    table {
        font-size: 14px;
    }

    th,
    td {
        padding: 8px;
     }

    .payslip-table,
    .payslip-table tbody,
    .payslip-table tr,
    .payslip-table th,
    .payslip-table td {
        display: block;
    }

    .payslip-table {
        background: transparent;
    }

    .payslip-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .payslip-table tr {
        margin-bottom: 14px;
        padding: 8px 14px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    }

    .payslip-table th,
    .payslip-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 44px;
        padding: 8px 0;
        border-bottom: 1px solid #e5e7eb;
        text-align: right;
    }

    .payslip-table td:last-child {
        border-bottom: 0;
    }

    .payslip-table th::before,
    .payslip-table td::before {
        content: attr(data-label);
        color: #4b5563;
        font-weight: 700;
        text-align: left;
    }

    .payslip-table td[data-label="Azioni"] {
        justify-content: flex-start;
        flex-wrap: wrap;
        text-align: left;
    }

    .payslip-table td[data-label="Azioni"]::before {
        width: 100%;
    }

    .payslip-layout {
        margin-top: 20px;
    }

    .pdf-container {
        display: none;
    }

    .pdf-mobile-viewer {
        display: block;
        margin-bottom: 20px;
        padding: 20px;
        background: #fff;
        border: 1px solid #d7dee7;
        border-radius: 8px;
    }

    .pdf-mobile-viewer p {
        margin-top: 0;
    }

    .acknowledgement,
    .success-card {
        padding: 20px;
    }
}

@media (min-width: 701px) {
    .pdf-mobile-viewer {
        display: none;
    }
}

.registration-box { max-width: 540px; line-height: 1.6; border-top: 4px solid #c5a466; }
.registration-confirmation { display: grid; min-height: 100vh; padding: 24px; place-items: center; }
.registration-confirmation .success { max-width: 560px; margin: 0; text-align: center; }
.eyebrow { color: #846936; font-size: 12px; font-weight: bold; letter-spacing: 1.5px; }
.muted { color: #64748b; font-size: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 24px; }
fieldset { border: 1px solid #ccd2d8; border-radius: 8px; margin: 20px 0; padding: 20px; }
legend { padding: 0 8px; font-weight: bold; }
.notice { padding: 16px; background: #edf3fa; border-left: 3px solid #174a8b; margin-bottom: 20px; }
.table-scroll { overflow-x: auto; }
@media (max-width: 600px) { .login-box { margin: 24px auto; padding: 24px; } }

/* Pagina di accesso coerente con il sito pubblico. */
.area-login { min-height: 100vh; background: #f7f4ed; color: #183534; font-family: "DM Sans", Arial, sans-serif; }
.area-login-header { min-height: 80px; padding: 0 max(24px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: #fff; border-bottom: 1px solid rgba(24,53,52,.08); }
.area-login-brand { display: flex; align-items: center; gap: 11px; color: #075c5a; text-decoration: none; text-transform: uppercase; font-weight: 700; font-size: 15px; letter-spacing: .09em; }
.area-login-mark { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border: 2px solid #075c5a; border-radius: 50%; background: #fff; }
.area-login-mark img { width: auto; max-width: none; height: 20px; }
.area-login-back { color: #075c5a; font-size: 14px; font-weight: 700; text-underline-offset: 4px; }
.area-login-main { min-height: calc(100vh - 80px); display: grid; place-items: center; padding: 64px 24px; }
.area-login-card { width: min(100%, 470px); margin: 0; padding: 40px; border-radius: 0; border-top: 4px solid #cda869; box-shadow: 0 18px 42px rgba(24,53,52,.12); }
.area-login-eyebrow { margin: 0 0 10px; color: #075c5a; font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.area-login-card h1 { margin: 0 0 12px; color: #183534; font-family: "Playfair Display", Georgia, serif; font-size: 42px; line-height: 1.1; }
.area-login-intro { margin: 0 0 28px; color: #657472; line-height: 1.6; }
.area-login-card label { margin-bottom: 18px; color: #183534; font-size: 14px; }
.area-login-card input { margin-top: 7px; padding: 12px; border: 1px solid #b9c5c2; border-radius: 0; color: #183534; font-family: inherit; }
.area-login-card input:focus { outline: 2px solid #075c5a; outline-offset: 1px; }
.area-login-card button { width: 100%; margin-top: 4px; padding: 13px 18px; border-radius: 2px; background: #075c5a; font: 700 15px "DM Sans", Arial, sans-serif; }
.area-login-card button:hover { background: #043e3d; }
.area-login-card button span { margin-left: 12px; font-size: 18px; }
.area-login-register { margin: 24px 0 0; color: #657472; font-size: 14px; text-align: center; }
.area-login-register a { color: #075c5a; font-weight: 700; text-underline-offset: 4px; }
.area-login-card .error { border-radius: 0; border-left: 3px solid #9d2d35; }
@media (max-width: 600px) { .area-login-header { min-height: 68px; padding: 0 16px; }.area-login-main { min-height: calc(100vh - 68px); padding: 32px 16px; }.area-login-card { padding: 30px 24px; }.area-login-card h1 { font-size: 36px; }.area-login-back { font-size: 13px; } }

/* Caricamento multiplo: avanzamento e resoconto */
progress {
    width: 100%;
    height: 14px;
    margin: 10px 0;
    accent-color: #1b3a6b;
}

.report-table {
    width: 100%;
    margin: 15px 0;
}

.report-table th[scope="row"] {
    text-align: left;
    font-weight: 600;
}

.report-table td,
.report-table th {
    vertical-align: top;
}

.report-table tr.ok th[scope="row"] {
    border-left: 4px solid #155724;
}

.report-table tr.warning th[scope="row"] {
    border-left: 4px solid #856404;
}

.report-table tr.error th[scope="row"] {
    border-left: 4px solid #721c24;
}

.report-table tr.error td,
.report-table tr.error th {
    background: #fdf3f4;
}

.report-table tr.warning td,
.report-table tr.warning th {
    background: #fffbf0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 640px) {
    .report-table,
    .report-table tbody,
    .report-table tr,
    .report-table td,
    .report-table th {
        display: block;
        width: auto;
    }

    .report-table thead {
        display: none;
    }

    .report-table tr {
        margin-bottom: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 8px;
    }
}

/* Filtri e paginazione dell'elenco cedolini */
.filtri .form-grid {
    margin-bottom: 10px;
}

.filtri button,
.filtri .button {
    margin-right: 8px;
}

.paginazione {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.paginazione span {
    color: #64748b;
    font-size: 14px;
}

/* Menu del pannello: il pulsante .menu-end si allinea al bordo destro del contenuto */
.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.menu .menu-end {
    margin-left: auto;
}

/* Flussi CBI */
.badge.neutral { color: #475569; background: #e9edf1; }
.badge.danger { color: #721c24; background: #f8d7da; }

.flow-months {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.flow-month { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }
.flow-month p { margin: 0; }
.flow-month .button { margin-top: auto; align-self: flex-start; }
.flow-month.has-flow { border-top: 4px solid #174a8b; }
.flow-month.is-empty { background: #f8fafc; color: #64748b; }
.flow-month-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.flow-month-head h2 { margin: 0; font-size: 20px; }
.flow-month-total { font-size: 26px; font-weight: bold; color: #20252b; font-variant-numeric: tabular-nums; }

.flow-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.flow-stats { margin: 10px 0 20px; }
.flow-stats strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.flow-stat-alert strong { color: #b42318; }

.flow-toolbar { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.flow-toolbar form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.flow-toolbar .checkbox { margin: 0; }
.flow-toolbar progress { width: 160px; margin: 0; }

.flow-filters { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: flex-end; margin: 18px 0 12px; }
.flow-filters label { margin: 0; }
.flow-filters input[type=search] { min-width: 260px; }

.flow-table td, .flow-table th { vertical-align: middle; }
.flow-table input { margin: 0; padding: 8px; font-size: 15px; }
.flow-table input[type=checkbox] { width: 18px; height: 18px; }
.flow-table .iban-input { min-width: 270px; font-family: monospace; }
.flow-table .amount-input { width: 110px; text-align: right; }
.flow-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.flow-table tr.has-problem td { background: #fdf3f4; }
.flow-table tr.is-excluded td { color: #94a3b8; }
.flow-table tr.is-changed td { background: #fffbeb; }
.flow-table tfoot th, .flow-table tfoot td { background: #e9edf1; }
.flow-notes .badge { margin: 2px 0; }
.button.small { padding: 7px 11px; font-size: 14px; }

.flow-save-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #111827;
    color: white;
    border-radius: 0 0 8px 8px;
}

.flow-save-bar[hidden] { display: none; }
.flow-locked { border-left: 5px solid #28a745; }
.flow-locked code, .flow-table code { font-size: 13px; }
.flow-unlock { margin-top: 24px; padding-top: 16px; border-top: 1px solid #ddd; }
.flow-unlock summary, .flow-delete summary { cursor: pointer; font-weight: bold; color: #b42318; }
.warning-box { margin: 14px 0; padding: 14px 16px; background: #fff3cd; border-left: 4px solid #b45309; color: #5b3a00; }
.warning-box p { margin: 6px 0; }
.flow-generate { border-top: 4px solid #174a8b; }
.flow-checklist li { margin-bottom: 4px; color: #721c24; }
details.card > summary { cursor: pointer; }
button:disabled, .button:disabled { background: #94a3b8; cursor: not-allowed; }

@media (max-width: 700px) {
    .menu .menu-end { margin-left: 0; }
    .flow-filters input[type=search] { min-width: 0; }
}

/* Profilo a schede */
.profile-box { max-width: 620px; }
.profile-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-tabs { display: flex; gap: 4px; margin: 20px 0 0; border-bottom: 2px solid #e2e8f0; overflow-x: auto; }
.profile-tabs[hidden] { display: none; }
.profile-tabs [role=tab] { margin: 0 0 -2px; padding: 10px 14px; background: transparent; color: #475569; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; white-space: nowrap; font-weight: bold; }
.profile-tabs [role=tab]:hover { background: #f1f5f9; color: #174a8b; }
.profile-tabs [role=tab][aria-selected=true] { color: #174a8b; border-bottom-color: #174a8b; }
.profile-tabs [role=tab]:focus-visible { outline: 2px solid #174a8b; outline-offset: -2px; }
.profile-dot { display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: #b45309; vertical-align: middle; }
.profile-panel { padding-top: 18px; }
.profile-panel h2 { margin-top: 0; font-size: 20px; }
.profile-tabs:not([hidden]) ~ .profile-panel h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.profile-summary { margin: 0; }
.profile-summary div { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid #e2e8f0; }
.profile-summary dt { grid-column: 1 / -1; color: #64748b; font-size: 13px; }
.profile-summary dd { margin: 0; overflow-wrap: anywhere; }
.profile-summary dd:last-child { text-align: right; font-weight: bold; }