body {
    padding-top: 58px;
    color: #172033;
    background: #eef3f8;
    font-size: 14px;
    font-family: "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
}

a {
    color: #265a88;
}

.app-navbar {
    min-height: 58px;
    background: rgba(8, 17, 34, 0.94);
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 34px rgba(8, 17, 34, 0.18);
    backdrop-filter: blur(14px);
}

.app-navbar .navbar-brand {
    height: 58px;
    padding-top: 19px;
    color: #fff;
    font-weight: 700;
}

.app-navbar .navbar-nav > li > a {
    padding-top: 19px;
    padding-bottom: 19px;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 600;
}

.app-navbar .navbar-nav > li > a:hover,
.app-navbar .navbar-nav > li > a:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.app-navbar .navbar-form {
    margin-top: 11px;
    margin-bottom: 11px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.app-navbar .navbar-btn {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.app-navbar .navbar-btn:hover,
.app-navbar .navbar-btn:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.32);
}

.app-container {
    max-width: 1180px;
    position: relative;
    z-index: 1;
}

.page-shell {
    padding: 34px 0 48px;
}

.page-actions {
    display: flex;
    align-items: center;
    min-height: 32px;
    margin-bottom: 18px;
}

.employee-edit-back-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.page-heading {
    padding: 26px 30px;
    margin-bottom: 20px;
    color: #fff;
    background: linear-gradient(135deg, rgba(8, 17, 34, 0.92), rgba(47, 111, 166, 0.82));
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(8, 17, 34, 0.14);
}

.page-heading h1 {
    margin: 0;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
}

.page-heading .employer-id-number {
    color: #fff;
    font: inherit;
}

.page-subtitle {
    margin: 0 0 16px;
    color: #64748b;
}

.toolbar-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
    margin-bottom: 18px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(221, 227, 236, 0.9);
    border-radius: 8px;
    box-shadow: 0 5px 16px rgba(23, 32, 51, 0.06);
    backdrop-filter: blur(10px);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.metric-tile,
.dashboard-panel,
.attention-strip {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(221, 227, 236, 0.95);
    border-radius: 8px;
    box-shadow: 0 5px 16px rgba(23, 32, 51, 0.06);
    backdrop-filter: blur(8px);
}

.metric-tile {
    min-height: 128px;
    padding: 18px;
}

.metric-tile span,
.panel-kicker {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.metric-tile strong {
    display: block;
    margin: 10px 0 6px;
    color: #172033;
    font-size: 30px;
    line-height: 1.1;
}

.metric-tile small {
    color: #64748b;
}

.metric-primary {
    color: #fff;
    background: linear-gradient(135deg, #17314f, #2f6fa6);
    border-color: rgba(255, 255, 255, 0.18);
}

.metric-primary span,
.metric-primary strong,
.metric-primary small {
    color: #fff;
}

.dashboard-panels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}

.dashboard-panel {
    padding: 18px;
}

.dashboard-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.dashboard-panel-heading h2 {
    margin: 0;
}

.health-list {
    display: grid;
    gap: 10px;
}

.health-row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
}

.health-row:last-child {
    border-bottom: 0;
}

.health-row span {
    width: 10px;
    height: 10px;
    background: #94a3b8;
    border-radius: 50%;
}

.health-row strong {
    color: #172033;
}

.health-row em {
    color: #64748b;
    font-style: normal;
    font-weight: 600;
}

.health-row.is-ok span {
    background: #238358;
}

.health-row.is-warning span {
    background: #b42318;
}

.health-row.is-muted span {
    background: #cbd5e1;
}

.action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.action-button {
    display: block;
    min-height: 42px;
    padding: 12px 14px;
    color: #172033;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-weight: 700;
    text-align: center;
}

.action-button:hover,
.action-button:focus {
    color: #111827;
    background: #eef3f8;
    text-decoration: none;
}

.action-button.is-primary {
    color: #fff;
    background: #238358;
    border-color: #238358;
}

.action-button.is-primary:hover,
.action-button.is-primary:focus {
    color: #fff;
    background: #17623d;
}

.attention-strip {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    margin-bottom: 18px;
    border-left: 4px solid #b42318;
}

.attention-strip strong {
    color: #b42318;
}

.app-backdrop {
    position: fixed;
    inset: 58px 0 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(238, 243, 248, 0.72), #eef3f8 360px),
        linear-gradient(90deg, rgba(8, 17, 34, 0.2), rgba(47, 111, 166, 0.08)),
        url("../img/payroll-login-bg.png");
    background-position: center top;
    background-size: cover;
    opacity: 0.72;
}

h2 {
    margin-top: 26px;
    margin-bottom: 14px;
    color: #1f2937;
    font-size: 18px;
    font-weight: 700;
}

.btn {
    border-radius: 6px;
    border-width: 1px;
    box-shadow: none;
    font-weight: 600;
}

.btn-sm {
    padding: 6px 10px;
    line-height: 1.2;
}

.document-register-actions { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.document-register-actions form { margin:0!important; padding:0!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; }
.document-register-actions .btn-sm { min-height:auto; padding:4px 7px; font-size:12px; line-height:1.15; }

.btn-default {
    color: #1f2937;
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(203, 213, 225, 0.95);
}

.btn-default:hover,
.btn-default:focus {
    color: #111827;
    background: #f8fafc;
    border-color: #94a3b8;
}

.btn-success {
    background: #238358;
    border-color: #238358;
}

.btn-success:hover,
.btn-success:focus {
    background: #17623d;
    border-color: #17623d;
}

.btn-primary {
    background: #087f8c;
    border-color: #087f8c;
}

.btn-primary:hover,
.btn-primary:focus {
    background: #056b76;
    border-color: #056b76;
}

.table {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(221, 227, 236, 0.95);
    border-radius: 8px;
    box-shadow: 0 5px 16px rgba(23, 32, 51, 0.06);
    backdrop-filter: blur(8px);
}

.table > tbody > tr > th,
.table > thead > tr > th,
.table > tr > th {
    color: #334155;
    background: rgba(248, 250, 252, 0.96);
    border-bottom: 1px solid #dde3ec;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
    border-color: #dde3ec;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fbfdff;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th,
.table > tr > td,
.table > tr > th {
    padding: 11px 12px;
    vertical-align: middle;
}

.panel {
    border: 1px solid #dde3ec;
    border-radius: 8px;
    box-shadow: 0 5px 16px rgba(23, 32, 51, 0.06);
    overflow: hidden;
}

.panel-default > .panel-heading {
    color: #172033;
    background: #f8fafc;
    border-color: #dde3ec;
    font-weight: 700;
}

.well {
    background: rgba(255, 255, 255, 0.9);
    border-color: #dde3ec;
    border-radius: 8px;
    box-shadow: none;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
select,
textarea {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: none;
}

.form-horizontal,
form:not(.navbar-form):not(.login-form) {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(221, 227, 236, 0.95);
    border-radius: 8px;
    box-shadow: 0 5px 16px rgba(23, 32, 51, 0.06);
}

.form-horizontal {
    padding: 22px;
}

form:not(.navbar-form):not(.login-form):not(.form-horizontal) {
    padding: 18px;
}

.table form,
.toolbar-panel form,
form.settings-test-form {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.form-field-control input[type="text"],
.form-field-control input[type="email"],
.form-field-control input[type="password"],
.form-field-control input[type="number"],
.form-field-control input[type="url"],
.form-field-control select,
.form-field-control textarea {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
}

.form-field-control textarea {
    height: auto;
    min-height: 96px;
}

.form-field-control input[type="checkbox"] {
    margin-top: 9px;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    border-color: #5786b4;
    box-shadow: 0 0 0 3px rgba(38, 90, 136, 0.12);
    outline: 0;
}

.label {
    display: inline-block;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
}

a.label:hover,
a.label:focus,
button.label:hover,
button.label:focus {
    text-decoration: none;
    opacity: 0.88;
}

.label-default {
    color: #334155;
    background: #e2e8f0;
}

.label-primary {
    background: #265a88;
}

.label-success {
    background: #1f7a4d;
}

.label-danger {
    background: #b42318;
}

.alert {
    border-radius: 8px;
}

.settings-test-form {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #dde3ec;
}

.template-preview-panel {
    padding: 18px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(221, 227, 236, 0.95);
    border-radius: 8px;
    box-shadow: 0 16px 42px rgba(23, 32, 51, 0.08);
}

.template-preview-panel h2 {
    margin-top: 0;
}

.template-preview-frame {
    border-radius: 8px;
}

hr {
    border-top-color: #dde3ec;
}

@media (max-width: 767px) {
    body {
        padding-top: 64px;
    }

    .page-heading h1 {
        font-size: 24px;
    }

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

    .dashboard-grid,
    .dashboard-panels,
    .action-grid {
        grid-template-columns: 1fr;
    }

    .attention-strip {
        display: block;
    }
}

.login-page {
    min-height: 100vh;
    padding-top: 0;
    background: #081122;
}

.login-screen {
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: 48px;
    background-position: center;
    background-size: cover;
}

.login-home-link {
    position: absolute;
    top: 28px;
    left: 32px;
    padding: 10px 14px;
    color: #fff;
    background: rgba(8, 17, 34, 0.48);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 6px;
    font-weight: 700;
}

.login-home-link:hover,
.login-home-link:focus {
    color: #fff;
    background: rgba(8, 17, 34, 0.78);
}

.login-panel {
    width: 100%;
    max-width: 430px;
    padding: 34px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.26);
    backdrop-filter: blur(16px);
}

.login-brand {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 42px;
}

.login-brand strong,
.login-brand span {
    display: block;
}

.login-brand strong {
    font-size: 18px;
}

.login-brand span {
    color: rgba(255, 255, 255, 0.72);
}

.login-mark {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: #092033;
    background: #fff;
    border-radius: 6px;
    font-size: 20px;
    font-weight: 800;
}

.login-copy {
    margin-bottom: 26px;
}

.login-copy h1 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 34px;
    font-weight: 800;
}

.login-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.55;
}

.login-form .form-group {
    margin-right: 0;
    margin-left: 0;
}

.login-form .control-label {
    display: block;
    float: none;
    width: auto;
    padding: 0;
    margin-bottom: 7px;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
}

.login-form .col-sm-9 {
    float: none;
    width: auto;
    padding: 0;
}

.login-form input[type="text"],
.login-form input[type="password"] {
    height: 44px;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(255, 255, 255, 0.4);
}

.login-form .btn-primary {
    height: 44px;
    margin-top: 6px;
    background: #087f8c;
    border-color: #087f8c;
}

.login-form .help-block {
    color: #ffd7d7;
}

.login-form .alert,
.login-form .errorlist {
    color: #ffd7d7;
}

.login-register {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    text-align: center;
}

.login-register > span {
    display: block;
    margin-bottom: 9px;
    color: #cbd5e1;
}

.registration-screen {
    align-items: flex-start;
    overflow-y: auto;
    padding-top: 32px;
    padding-bottom: 32px;
}

.registration-panel {
    max-width: 620px;
}

.registration-form textarea,
.registration-form input[type="email"] {
    width: 100%;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(255, 255, 255, 0.4);
    border-radius: 8px;
}

.registration-form input[type="email"] {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    caret-color: #000000;
}

@media (max-width: 767px) {
    .login-screen {
        padding: 82px 24px 24px;
    }

    .login-home-link { top: 20px; left: 24px; }

    .login-panel {
        padding: 26px;
    }

    .login-copy h1 {
        font-size: 28px;
    }
}

/* Phase 3 application shell and accessible enterprise components. */
:root { --navy:#0b1f33; --slate:#475569; --teal:#087f8c; --surface:#fff; --line:#d8e1ea; }
* { box-sizing:border-box; }
body { padding-top:64px; padding-left:248px; background:#f3f6f9; }
body.login-page { padding-left:0; background:#081122; }
.skip-link { position:fixed; top:-60px; left:12px; z-index:10000; padding:10px 14px; color:#fff; background:#087f8c; }
.skip-link:focus { top:12px; }
.app-sidebar { position:fixed; inset:0 auto 0 0; z-index:1000; display:flex; flex-direction:column; width:248px; padding:22px 14px; color:#fff; background:var(--navy); overflow-y:auto; }
.app-brand { display:flex; align-items:center; gap:11px; margin:0 8px 32px; color:#fff; font-size:18px; font-weight:800; }
.app-brand:hover,.app-brand:focus { color:#fff; text-decoration:none; }
.app-brand small { display:block; color:#9fb4c8; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; color:var(--navy); background:#5eead4; border-radius:9px; }
.app-navigation { display:flex; flex:1; flex-direction:column; }
.nav-settings { margin-top:auto!important; }
.app-sidebar nav a { display:block; margin:3px 0; padding:10px 12px; color:#dce7f1; border-radius:7px; font-weight:600; }
.app-sidebar nav a:hover,.app-sidebar nav a:focus { color:#fff; background:#173957; text-decoration:none; }
.app-sidebar nav a.is-active { color:#fff; background:#087f8c; box-shadow:inset 3px 0 0 #8be9dc; }

.employee-status-toolbar { display:flex; justify-content:flex-end; padding:2px 0 0; }
.employee-status-filter { display:flex; align-items:center; gap:8px; margin:0; }
.employee-status-filter label { margin:0; color:#40566c; font-size:13px; font-weight:600; }
.employee-status-filter select { min-width:105px; height:31px; border:1px solid #c7d5e3; border-radius:5px; padding:4px 8px; color:#18344d; background:#fff; }
.end-service-options { max-width:760px; }
.end-service-status { margin:0 0 6px; font-size:17px; font-weight:700; color:#18344d; }
.end-service-option-list { display:grid; gap:12px; margin-top:16px; }
.end-service-option-list > div,.end-service-option-list form { margin:0; padding:18px; border:1px solid #d7e0e8; border-radius:8px; background:#fff; box-shadow:0 7px 18px rgba(25, 52, 76, .05); }
.end-service-option-list p { margin:9px 0 0; color:#5f6d7b; font-size:13px; line-height:1.45; max-width:650px; }
@media (max-width: 540px) { .dashboard-panel-heading { align-items:flex-start; } .employee-status-toolbar { justify-content:flex-start; } }
.nav-section { display:block; margin:22px 12px 7px; color:#91a9bf; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.app-topbar { position:fixed; top:0; right:0; left:248px; z-index:900; display:flex; align-items:center; justify-content:space-between; height:64px; padding:0 28px; background:#fff; border-bottom:1px solid var(--line); }
.secure-label { margin-left:12px; color:#34705e; font-size:12px; }
.topbar-user,.topbar-user form { display:flex; align-items:center; gap:12px; margin:0; padding:0!important; border:0!important; box-shadow:none!important; background:transparent!important; }
.app-main { min-height:calc(100vh - 64px); }
.content-width { width:min(1180px,calc(100% - 40px)); margin:0 auto; }
.mobile-menu-button,.nav-toggle { display:none; }
.page-heading { background:linear-gradient(135deg,#102a43,#175d75); }
.page-heading p { margin:8px 0 0; color:#d7e7ef; }
.page-eyebrow { margin:0 0 8px!important; color:#a7f3e4!important; font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.card { padding:20px; margin-bottom:20px; background:#fff; border:1px solid var(--line); border-radius:9px; box-shadow:0 8px 25px rgba(15,35,55,.06); }
.card h2 { margin-top:0; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.section-heading h2 { margin:0; }
.regular-input-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:8px 12px; margin:20px 0 0; color:#fff; background:#4a6377; }
.regular-input-heading h2 { margin:0; color:inherit; font-size:16px; }
.regular-input-edit { color:inherit; text-decoration:none; }
.regular-input-edit:hover,.regular-input-edit:focus { color:#087f8c; text-decoration:none; }
.regular-input-add { display:inline-flex; align-items:center; gap:5px; padding:6px 9px; color:#fff; border:1px solid #fff; border-radius:3px; font-weight:600; }
.regular-input-add:hover,.regular-input-add:focus { color:#fff; background:#385064; text-decoration:none; }
.regular-input-add span { display:inline-grid; place-items:center; width:15px; height:15px; color:#4a6377; background:#fff; border-radius:50%; font-size:13px; line-height:1; }
.payslip-input-heading h2 span { margin-left:6px; font-weight:400; }
.payslip-summary-card { max-width:760px; overflow:hidden; margin:24px 0; background:#f4f5f6; border:1px solid #c7cdd2; border-radius:5px; box-shadow:0 3px 10px rgba(15,35,55,.08); }
.payslip-summary-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 20px; color:#fff; background:#4a6377; }
.payslip-summary-header h2 { margin:0; color:inherit; font-size:16px; }
.payslip-summary-header form { display:flex; align-items:center; gap:8px; margin:0; }
.payslip-summary-header select,.payslip-summary-header button { min-height:34px; padding:6px 10px; color:#fff; background:#4a6377; border:1px solid #fff; border-radius:4px; }
.payslip-summary-header option { color:#1f2933; background:#fff; }
.payslip-summary-section { padding:14px 20px; border-bottom:1px solid #cfd4d8; }
.payslip-summary-total,.payslip-summary-line,.payslip-summary-net { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:baseline; }
.payslip-summary-total { margin-bottom:5px; font-size:16px; }
.payslip-summary-line { padding:2px 0; }
.payslip-summary-line span:last-child,.payslip-summary-total strong:last-child,.payslip-summary-net strong:last-child { text-align:right; white-space:nowrap; }
.payslip-summary-net { padding:15px 20px; font-size:17px; }
.payslip-summary-unavailable,.payslip-summary-empty { margin:8px 0 0; color:#64748b; }
.payslip-summary-empty { padding:18px 20px; }
.overnight-payroll-summary__pattern { padding-top:6px; padding-bottom:6px; }
.overnight-payroll-summary__once { margin:9px 0 6px; color:#64748b; font-size:12px; }
.overnight-shift-details { margin-top:10px; border-top:1px solid #d8e2e7; }
.overnight-shift-details__summary { padding:11px 0 2px; color:#087f8c; cursor:pointer; font-weight:700; }
.overnight-shift-details__summary:hover,.overnight-shift-details__summary:focus { color:#055f76; text-decoration:underline; }
.overnight-shift-details__content { padding-top:8px; }
.overnight-shift-detail { padding:10px 0; border-top:1px solid #e2e8ec; }
.overnight-shift-detail:first-child { border-top:0; }
.overnight-shift-detail__heading { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:baseline; }
.overnight-shift-detail__heading span { text-align:right; white-space:nowrap; }
.overnight-shift-detail__line { padding-left:10px; font-size:13px; }
@media (max-width:520px) {
 .payslip-summary-header { align-items:stretch; flex-direction:column; }
 .payslip-summary-header form { display:grid; grid-template-columns:minmax(0,1fr) auto; }
 .payslip-summary-header select { min-width:0; width:100%; }
 .payslip-summary-section,.payslip-summary-net { padding-left:14px; padding-right:14px; }
 .overnight-payroll-summary .payslip-summary-total,.overnight-payroll-summary .payslip-summary-line,.overnight-shift-detail__heading { grid-template-columns:1fr; gap:3px; }
 .overnight-payroll-summary .payslip-summary-line span:last-child,.overnight-shift-detail__heading span { text-align:left; white-space:normal; }
 .overnight-shift-detail__line { padding-left:0; }
}

/* Sidebar design system — reference-led visual refresh. */
:root { --navy:#062F48; --navy-deep:#041E35; --teal:#008D9B; --teal-soft:#BDEFF1; --ink:#102A43; --muted:#66788A; --surface:#fff; --page:#F5F8FB; --line:#E1E8ED; --radius:12px; --shadow:0 8px 22px rgba(10,42,67,.06); }
body { padding-top:0!important; padding-left:270px!important; color:var(--ink); background:var(--page); font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.app-sidebar { width:270px; padding:28px 18px 20px; background:linear-gradient(180deg,#062f58 0%,#041f3d 100%); box-shadow:none; }
.app-brand { flex-direction:column; align-items:flex-start; gap:0; margin:0 10px 32px; color:#fff; font-size:18px; line-height:1.15; letter-spacing:-.02em; }.app-brand small { margin-top:4px; color:#9ec1d0; font-size:11px; letter-spacing:.1em; }.brand-mark { display:none; }
.app-brand__welcome,.app-brand__employer { display:block; }.app-brand__welcome { margin-bottom:5px; color:#BDEFF1; font-size:19px; font-weight:650; letter-spacing:.02em; text-transform:none; }.app-brand__employer { color:#fff; font-size:15px; font-weight:700; }.app-brand small { color:#C9D8E0; font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; }
.app-navigation { gap:4px; }.nav-section { display:none; }.app-sidebar nav a { position:relative; display:flex; align-items:center; gap:13px; min-height:47px; margin:0; padding:11px 12px; color:#e7f0f7; border-radius:8px; font-size:15px; font-weight:500; }.app-sidebar nav a:hover,.app-sidebar nav a:focus { color:#fff; background:rgba(0,151,167,.16); }.app-sidebar nav a.is-active { color:#a9fbff; background:linear-gradient(90deg,rgba(0,154,166,.35),rgba(0,154,166,.14)); box-shadow:inset 3px 0 0 #22e0df; }.nav-icon { display:inline-flex; flex:0 0 22px; align-items:center; justify-content:center; width:22px; height:22px; color:inherit; line-height:1; }.nav-icon svg { display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.nav-settings { margin-top:auto!important; }
.nav-logout { margin:3px 0 0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; }
.nav-logout__button { display:flex; align-items:center; gap:13px; width:100%; min-height:47px; padding:11px 12px; color:#e7f0f7; background:transparent; border:0; border-radius:8px; font-size:15px; font-weight:500; text-align:left; }
.nav-logout__button:hover,.nav-logout__button:focus { color:#fff; background:rgba(163,177,138,.18); outline:0; }
.app-topbar { display:none!important; }.app-main { min-height:100vh; }.content-width { width:min(1320px,calc(100% - 64px)); margin:0 auto; }.page-shell { padding:46px 0 58px; }.page-heading { padding:0; margin:0 0 30px; color:var(--ink); background:none; border:0; box-shadow:none; }.page-heading h1 { color:var(--navy); font-size:34px; font-weight:750; letter-spacing:-.045em; }.page-heading p { color:var(--muted); font-size:16px; }.page-actions { margin-bottom:18px; }
.btn { min-height:40px; padding:9px 15px; border-radius:8px; font-weight:600; }.btn-primary,.btn-primary:active { border-color:#007d89; background:linear-gradient(135deg,#0095a3,#007886); }.btn-primary:hover,.btn-primary:focus { border-color:#006a75; background:#007886; }.btn-default { color:#1b4058; border-color:#cedce4; background:#fff; }.btn-default:hover,.btn-default:focus { color:#102a43; background:#f8fbfc; }
.card,.form-card,.dashboard-panel,.metric-tile,.toolbar-panel,.documentation-upload-card,.documentation-list-card { border-color:var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }.table { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }.table>thead>tr>th { color:#263e52; background:#fafcfd; border-bottom:1px solid var(--line); font-weight:650; }.table>tbody>tr>td { border-top-color:var(--line); }
input:not([type="radio"]):not([type="checkbox"]),select,textarea { border-color:#d2dee5!important; border-radius:8px!important; font:inherit!important; } input:focus,select:focus,textarea:focus { border-color:var(--teal)!important; box-shadow:0 0 0 3px rgba(0,141,155,.14)!important; }
.employee-onboarding-card { max-width:1280px; border-color:var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }.employee-edit-sections { border-color:var(--line); border-radius:var(--radius); background:#fff; box-shadow:none; }.employee-edit-sections__button.is-active { background:var(--teal); }
.leave-setup-redesign { font-family:inherit; }.leave-setup-redesign__heading { margin:0 0 22px; }.leave-setup-redesign__heading h3 { margin:0 0 5px; color:var(--navy); font-size:29px; font-weight:750; letter-spacing:-.035em; }.leave-setup-redesign__heading p { margin:0; color:var(--muted); font-size:15px; }.leave-setup-redesign__eligibility { padding:18px 20px; margin:0 0 18px; background:#fff; border-color:var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }.leave-setup-redesign__eligibility .employee-field__label-row label { color:var(--ink); font-size:16px; font-weight:650; }
.leave-rule-card { margin:0 0 16px; overflow:hidden; border-color:var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }.leave-rule-card__header { min-height:0; padding:17px 21px; color:var(--navy); background:#fff; border-bottom:1px solid var(--divider,#e8edf1); }.leave-rule-card__header h3 { color:var(--navy); font-size:19px!important; font-weight:700; }.leave-rule-card__header span { color:var(--muted); font-weight:500; }.leave-rule-card--informational .leave-rule-card__header { background:#fff; }.leave-rule-card__question { padding:15px 21px 7px; background:#fbfdfe; border-bottom-color:var(--line); }.leave-rule-card__table-wrap { overflow-x:auto; }.leave-rule-card__table { min-width:0; }.leave-rule-card__table th,.leave-rule-card__table td { padding:15px 20px; border-color:var(--line); color:#263e52; font-size:14px; }.leave-rule-card__table thead th { color:#53697a; background:#fbfcfd; border-bottom:1px solid var(--line); font-size:12px; }.leave-rule-card__table tbody th { color:var(--navy); background:#fff; font-size:15px; }.leave-rule-card__table td > span { color:var(--ink); font-weight:600; }.leave-rule-card__recorded,.leave-rule-card__guidance,.leave-rule-card__footnote { color:#315568; background:#f3fcfd; border-left-color:var(--teal); }.leave-rule-card__guidance strong { color:var(--navy); }.leave-rule-card__footnote { border-radius:8px; }.leave-rule-card__table input[name="opening_leave_balance"],.leave-rule-card__table input[name="sick_leave_opening_balance"] { height:37px; border-color:#d2dee5; border-radius:8px; }
@media (max-width:840px) { body { padding-left:0!important; }.app-sidebar { transform:translateX(-100%); width:270px; }.mobile-menu-button { display:flex!important; background:var(--navy); }.nav-toggle:checked ~ .app-sidebar { transform:translateX(0); }.content-width { width:min(100% - 30px,1320px); }.page-shell { padding:30px 0 46px; }.page-heading h1 { font-size:33px; } }

/* Keep button labels visually centred throughout the application. */
.btn,
button.btn,
input[type="submit"].btn,
input[type="button"].btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.btn > * { flex:0 0 auto; }

/* Keep every visible action control at the same compact size as the
   secondary "Open employee" button. */
.btn,
button,
input[type="submit"],
input[type="button"],
.dashboard-run-button,
.regular-input-add,
.action-button {
  font-size:14px!important;
}

.page-heading h1.dashboard-welcome { font-size:30px; letter-spacing:-.025em; }
.page-heading h1.dashboard-welcome .employer-id-number { color:var(--navy)!important; font-size:.78em; font-weight:500; }
.page-heading .dashboard-welcome-uif { margin:5px 0 0; color:var(--navy); font-size:13px; font-weight:500; }

/* Employer palette: navy, deep teal, sage and warm off-white. */
:root {
  --navy:#19324A;
  --navy-deep:#19324A;
  --teal:#006D6F;
  --teal-soft:#E1E8D7;
  --ink:#2F3437;
  --muted:#52605B;
  --surface:#FFFFFF;
  --page:#FAF9F6;
  --line:#D7DED0;
  --sage:#A3B18A;
}
body { color:var(--ink); background:var(--page); }
a { color:var(--teal); }
.app-sidebar { background:#23496E!important; }
.app-sidebar nav a.is-active { color:#fff; background:rgba(0,109,111,.72); box-shadow:inset 3px 0 0 var(--sage); }
.app-sidebar nav a:hover,.app-sidebar nav a:focus { background:rgba(163,177,138,.18); }
.page-heading h1,.leave-setup-redesign__heading h3,.leave-rule-card__header h3 { color:var(--navy); }
.page-heading p,.leave-setup-redesign__heading p { color:var(--muted); }
.btn-primary,.btn-primary:active { border-color:var(--teal); background:var(--teal); }
.btn-primary:hover,.btn-primary:focus { border-color:#005A5C; background:#005A5C; }
.btn-default { color:var(--navy); border-color:#CBD5C1; background:#fff; }
.btn-default:hover,.btn-default:focus { color:var(--navy); border-color:var(--sage); background:#F5F7F1; }
.card,.form-card,.dashboard-panel,.metric-tile,.toolbar-panel,.documentation-upload-card,.documentation-list-card,.employee-onboarding-card,.employee-edit-sections { border-color:var(--line); box-shadow:0 8px 22px rgba(25,50,74,.06); }
.table { border-color:var(--line); }.table>thead>tr>th { color:var(--navy); background:#F5F7F1; border-bottom-color:var(--line); }.table>tbody>tr>td { border-top-color:var(--line); }
input:not([type="radio"]):not([type="checkbox"]),select,textarea { border-color:#CAD5C1!important; } input:focus,select:focus,textarea:focus { border-color:var(--teal)!important; box-shadow:0 0 0 3px rgba(0,109,111,.14)!important; }
.employee-edit-sections__button.is-active { background:var(--teal); }.employee-edit-sections__button:hover { background:var(--teal-soft); color:var(--navy); }
.leave-setup-redesign__eligibility { border-color:var(--line); background:#fff; }.leave-rule-card { border-color:var(--line); }.leave-rule-card__header,.leave-rule-card--informational .leave-rule-card__header { background:#F5F7F1; border-bottom-color:var(--line); }.leave-rule-card__header span,.leave-rule-card__table thead th,.leave-rule-card__table small { color:var(--muted); }.leave-rule-card__table th,.leave-rule-card__table td { border-color:var(--line); color:var(--ink); }.leave-rule-card__table tbody th { color:var(--navy); }.leave-rule-card__recorded,.leave-rule-card__guidance,.leave-rule-card__footnote { background:var(--teal-soft); border-left-color:var(--sage); color:var(--ink); }.leave-rule-card__guidance strong { color:var(--navy); }
.badge-approved,.badge-success,.badge-sent { color:#355238; background:var(--teal-soft); }.badge-validated,.badge-primary { color:#19484A; background:#DDEEEB; }

.simple-payroll-dashboard { display:flex; flex-direction:column; gap:18px; }
.monthly-checklist,.monthly-employees { background:#fff; border:1px solid #d7e0e8; border-radius:8px; padding:0; overflow:hidden; }
.monthly-checklist { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.monthly-checklist .dashboard-panel-heading { grid-column:1/-1; margin:0; padding:16px 20px; background:#4e687d; color:#fff; }
.monthly-checklist .dashboard-panel-heading h2,.monthly-employees>.dashboard-panel-heading h2 { color:#fff; }
.monthly-checklist .dashboard-panel-heading .panel-kicker { color:#fff; opacity:.85; }
.monthly-checklist .dashboard-payroll-month { margin:3px 0 2px; color:#fff; font-size:30px; line-height:1.15; letter-spacing:-.02em; }
.monthly-checklist .dashboard-checklist-label { margin:0; color:#fff; font-size:14px; opacity:.88; }
.monthly-check-step { display:flex; gap:10px; align-items:flex-start; padding:17px 16px; border-right:1px solid #dbe3ea; background:#f8fafc; }
.monthly-check-step:last-child { border-right:0; }
.monthly-check-step>span { width:26px; height:26px; flex:0 0 26px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#e8edf2; color:#526277; font-weight:700; }
.monthly-check-step.is-complete>span { background:#e5f5ec; color:#167043; }
.monthly-check-step strong,.monthly-check-step small { display:block; }
.monthly-check-step small { color:#6d7989; margin-top:2px; }
.employee-setup-notifications { overflow:hidden; border:1px solid #8C4260; border-radius:8px; background:#fff; }
.employee-setup-notifications h2 { margin:0; padding:14px 20px 4px; color:#8C4260; font-size:18px; }
.employee-setup-notifications>p { margin:0; padding:0 20px 14px; color:#536273; }
.employee-setup-notifications ul { margin:0; padding:0; list-style:none; border-top:1px solid #ead7df; }
.employee-setup-notifications li { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 20px; border-top:1px solid #ead7df; }
.employee-setup-notifications li:first-child { border-top:0; }
.employee-setup-notifications li>div { min-width:0; }
.employee-setup-notifications strong,.employee-setup-notifications span { display:block; }
.employee-setup-notifications span { margin-top:3px; color:#6d5360; font-size:13px; }
.monthly-employees>.dashboard-panel-heading { margin:0; padding:16px 20px; background:#4e687d; color:#fff; }
.monthly-employees>.dashboard-panel-heading .btn { background:#fff; color:#26394c; border-color:#fff; }
.monthly-employee-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; padding:18px 20px; border-bottom:1px solid #dbe3ea; align-items:center; }
.monthly-employee-main h3 { margin:5px 0 7px; font-size:17px; }
.monthly-employee-main p { display:flex; flex-wrap:wrap; gap:18px; margin:0; color:#667386; }
.monthly-employee-main .employee-missing-details { display:block; margin:0 0 8px; color:#8a5a00; font-size:13px; }
.employee-ready-status { display:inline-block; padding:3px 9px; border-radius:999px; background:#e5f5ec; color:#167043; font-size:12px; font-weight:700; }
.employee-ready-status.needs-information { background:#fff2d7; color:#8a5a00; }
.monthly-employee-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.monthly-employee-actions form { margin:0; padding:0!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; }
.monthly-employee-actions .btn { margin:0; white-space:nowrap; }
.payslip-approval-row { padding:14px 16px; border-top:1px solid #d7e0e8; text-align:center; background:#f4f7f9; }
.payslip-approval-row form { margin:0; padding:0!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; }
.payslip-summary-actions-even { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; gap:8px; padding:16px; }
.payslip-action-left { text-align:left; }
.payslip-action-centre { text-align:center; }
.payslip-action-right { display:flex; justify-content:flex-end; text-align:right; }
.payslip-summary-actions-two { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.payslip-summary-actions-two .payslip-action-left,
.payslip-summary-actions-two .payslip-action-centre { display:flex; align-items:center; justify-content:center; text-align:center; }
.payslip-summary-actions-two a { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:8px 14px; text-align:center; white-space:nowrap; }
.employee-payslip-approved-guidance { padding:16px; color:#173F63; background:#EDF8F0; border-top:1px solid #B9DFC9; }
.employee-payslip-approved-guidance strong,.employee-payslip-approved-guidance p { display:block; margin:0; }
.employee-payslip-approved-guidance strong { color:#17603E; font-size:16px; }
.employee-payslip-approved-guidance p { margin-top:5px; color:#52697D; }
.employee-payslip-approved-guidance .employee-payslip-progress { margin-top:9px; color:#173F63; font-weight:700; }
.employee-payslip-approved-guidance .btn { margin-top:13px; }
.employee-payslip-approved-guidance form { display:inline; margin:0; padding:0; background:transparent; border:0; box-shadow:none; }
.payslip-input-heading h2 span { font-weight:400!important; }
.monthly-finalise-row { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:18px 20px; background:#f3f6f9; }
.monthly-finalise-row strong,.monthly-finalise-row small { display:block; }
.monthly-finalise-row small { color:#6d7989; margin-top:3px; }
.payroll-review-entry { margin-bottom:18px; }
.payroll-review-entry .monthly-finalise-row { background:#f8fafc; }
.payroll-review-entry form { display:flex; align-items:center; gap:10px; margin:0; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; }
.payroll-review-entry select { min-width:178px; height:38px; padding:0 34px 0 12px; border:1px solid #c9d6e1; border-radius:6px; color:#26394c; background:#fff; font:inherit; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width:900px) { .monthly-checklist { grid-template-columns:repeat(2,minmax(0,1fr)); } .monthly-check-step:nth-of-type(2) { border-right:0; } .monthly-check-step { border-bottom:1px solid #dbe3ea; } }
@media (max-width:600px) { .monthly-checklist { grid-template-columns:1fr; } .monthly-check-step { border-right:0; } .monthly-employee-row { grid-template-columns:1fr; } .monthly-employee-actions { justify-content:flex-start; } .employee-setup-notifications li { align-items:flex-start; flex-direction:column; } .payroll-review-entry form { width:100%; align-items:stretch; flex-direction:column; } .payroll-review-entry select,.payroll-review-entry .btn { width:100%; } }

/* Employee monthly payroll workspace */
.employee-profile-panel {
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
}

.employee-profile-panel summary {
    padding: 12px 16px;
    color: #fff;
    background: #4a6377;
    cursor: pointer;
    font-weight: 700;
}

.employee-profile-panel .table-responsive {
    padding: 0 16px 10px;
}

.employee-profile-panel .table {
    margin-bottom: 0;
}

.employee-payroll-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(300px, 1.15fr);
    gap: 16px;
    align-items: start;
}
.employee-live-preview { grid-column:3; grid-row:1 / span 2; }
.employer-contribution-note { padding:10px 14px; margin:0; color:#526f81; background:#f3f8fa; border-top:1px solid #dce7ed; font-size:12px; line-height:1.4; }
.employer-contribution-notice { border-left:3px solid #8c4260; background:#f8edf1; color:#4c2635; padding:12px 14px; margin:0 0 18px; line-height:1.5; }

.employee-page-tabs { display:flex; align-items:flex-end; gap:0; margin:0 0 22px; border-bottom:1px solid #aebdcc; }
.employee-page-tabs a,.employee-page-tabs span { display:inline-block; padding:11px 16px 10px; color:#64748b; border-bottom:3px solid transparent; font-weight:500; text-decoration:none; white-space:nowrap; }
.employee-page-tabs a:hover,.employee-page-tabs a:focus { color:#1f4f70; background:#f5f8fa; text-decoration:none; }
.employee-page-tabs a.is-active { color:#172c3f; border-bottom-color:#0a8792; font-weight:700; }
.employee-page-tabs span { color:#94a3b8; cursor:default; }

.leave-hours-eligibility { margin-bottom:18px; }
.leave-setup-eligibility { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:20px; }
.leave-setup-eligibility .employee-field { min-width:0; }
.leave-balance-setup { overflow:hidden; background:#fff; border:1px solid #d5e0e8; border-radius:6px; }
.annual-balance-question,.sick-balance-question { margin:0 0 20px; padding:0; background:transparent; border:0; }
.annual-balance-question .employee-field__label-row,.sick-balance-question .employee-field__label-row { display:block; margin:0; }
.annual-balance-question .employee-field__label-row > label,.sick-balance-question .employee-field__label-row > label { display:block; margin:0 0 8px; }
.annual-balance-question [id^="id_"],.sick-balance-question [id^="id_"] { display:block; }
.annual-balance-question [id^="id_"] > div,.sick-balance-question [id^="id_"] > div { margin:7px 0; }
.annual-balance-question [id^="id_"] > div > label,.sick-balance-question [id^="id_"] > div > label { display:inline-flex!important; align-items:center; gap:6px; margin:0; font-weight:500; }
.annual-balance-question input[type="radio"],.sick-balance-question input[type="radio"] { flex:0 0 auto; margin:0!important; accent-color:var(--teal); }
.annual-balance-question__options { display:block; }
.annual-balance-question__unknown,.sick-balance-question__unknown { max-width:650px; margin:7px 0 0; padding-left:11px; border-left:3px solid #0a8792; color:#35576e; font-size:13px; line-height:1.45; }
.annual-opening-balance-recorded { max-width:650px; margin:0 0 20px; padding:10px 12px; border-left:3px solid #0a8792; background:#eef8f9; color:#35576e; font-size:13px; line-height:1.45; }
.annual-opening-balance-recorded strong { display:block; margin-bottom:3px; color:#17334a; }
.family-leave-setup { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin:0 0 18px; padding:10px 12px; background:#f7fbfc; border-left:2px solid #0a8792; }
.family-leave-setup h3 { margin:0 0 3px; color:#35576e; font-size:12px!important; font-weight:700; text-transform:none; }
.family-leave-setup p { margin:0; color:#527086; font-size:12px; line-height:1.4; }
.family-leave-setup__status { max-width:360px; font-weight:600; text-align:right; }
.leave-balance-unknown-note { margin:12px 0 0; padding:10px 12px; border-left:3px solid #d28a15; background:#fff8e8; color:#73510e; font-size:13px; line-height:1.45; }
.leave-balance-setup__intro { padding:16px 18px 12px; }
.leave-balance-setup__intro h3 { margin:0 0 5px; color:#17364d; font-size:17px; }
.leave-balance-setup__intro p,.leave-balance-setup__note { margin:0; color:#60768a; font-size:13px; line-height:1.45; }
.leave-balance-setup__table { width:100%; min-width:0; margin:0; border-collapse:collapse; table-layout:fixed; }
.leave-balance-setup .table-responsive { overflow:hidden; }
.leave-balance-setup__table th,.leave-balance-setup__table td { padding:9px 8px; border-top:1px solid #dce5ec; vertical-align:middle; overflow-wrap:anywhere; }
.leave-balance-setup__table th:first-child { width:15%; }
.leave-balance-setup__table th:nth-child(2),.leave-balance-setup__table th:nth-child(3) { width:16%; }
.leave-balance-setup__table th:nth-child(4) { width:12%; }
.leave-balance-setup__table th:nth-child(5),.leave-balance-setup__table th:nth-child(6) { width:20.5%; }
.leave-balance-setup__table thead th { color:#4d6579; background:#f4f7f9; font-size:11px; font-weight:700; line-height:1.25; text-transform:uppercase; }
.leave-balance-setup__table tbody th { color:#17364d; background:#fbfcfd; font-size:13px; }
.leave-balance-setup__table input { width:100%; min-width:0; height:33px; padding:5px 6px; font-size:12px; }
.leave-balance-setup__table td > span { color:#35576e; font-size:12px; font-weight:600; white-space:normal; }
.leave-balance-setup__table .errorlist { margin:5px 0 0; padding-left:15px; color:#a52922; font-size:12px; }
.leave-balance-setup__note { padding:12px 18px 16px; background:#f8fbfc; border-top:1px solid #dce5ec; }
.leave-balance-help { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; margin-left:2px; border:1px solid #2f6fa6; border-radius:50%; color:#2f6fa6; font-size:10px; font-weight:700; line-height:1; cursor:help; text-transform:none; vertical-align:middle; }

/* Leave setup: compact leave-rule layout. */
.leave-setup-redesign { font-family:Arial, Helvetica, sans-serif; }
.leave-setup-redesign__eligibility { margin:0 0 16px; padding:14px 16px; background:#f7fafb; border:1px solid #d5e0e8; border-radius:4px; }
.leave-setup-redesign__eligibility .employee-field { margin:0; }
.leave-setup-redesign__eligibility .employee-field__label-row { margin-bottom:8px; }
.leave-setup-redesign__eligibility [id^="id_"] { display:flex; gap:18px; }
.leave-setup-redesign__eligibility [id^="id_"] > div { margin:0; }
.leave-setup-redesign__eligibility [id^="id_"] label { display:inline-flex!important; align-items:center; gap:6px; margin:0; font-weight:500; }
.leave-rule-card { margin:0 0 16px; overflow:hidden; background:#fff; border:1px solid #cfd9df; border-radius:3px; box-shadow:none; }
.leave-rule-card__header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 15px; color:#fff; background:#4a6377; }
.leave-rule-card__header h3 { margin:0; color:#fff; font-size:16px!important; font-weight:700; line-height:1.2; text-transform:none; }
.leave-rule-card__header span { color:#e6f0f4; font-size:12px; font-weight:600; }
.leave-rule-card__question { padding:13px 15px 5px; background:#fbfcfc; border-bottom:1px solid #dde5e9; }
.leave-rule-card__question > label { display:block; margin:0 0 7px; color:#21394d; font-size:13px; font-weight:700; }
.leave-rule-card__question [id^="id_"] { display:flex; gap:18px; }
.leave-rule-card__question [id^="id_"] > div { margin:0 0 7px; }
.leave-rule-card__question [id^="id_"] label { display:inline-flex!important; align-items:center; gap:6px; margin:0; font-size:13px; font-weight:500; }
.leave-rule-card__question input[type="radio"] { margin:0!important; accent-color:var(--teal); }
.leave-rule-card__question-help { margin:1px 0 6px; color:#647987; font-size:12px; line-height:1.35; }
.leave-rule-card__recorded { display:flex; flex-direction:column; gap:3px; margin:0; padding:12px 15px; color:#35576e; background:#eef8f9; border-bottom:1px solid #d9e9eb; font-size:13px; line-height:1.4; }
.leave-rule-card__recorded strong { color:#17364d; }
.leave-rule-card__table-wrap { overflow-x:auto; }
.leave-rule-card__table { width:100%; min-width:720px; margin:0; border-collapse:collapse; table-layout:fixed; }
.leave-rule-card__table th,.leave-rule-card__table td { padding:10px 11px; border-right:1px solid #dce3e7; border-bottom:1px solid #dce3e7; vertical-align:top; color:#3e5364; font-size:12px; line-height:1.35; overflow-wrap:anywhere; }
.leave-rule-card__table tr > *:last-child { border-right:0; }
.leave-rule-card__table tbody tr:last-child > * { border-bottom:0; }
.leave-rule-card__table thead th { color:#263b4c; background:#e8ebed; border-bottom:2px solid #78ab84; font-size:12px; font-weight:700; text-align:left; }
.leave-rule-card__table thead th:nth-child(1) { width:23%; }
.leave-rule-card__table thead th:nth-child(2) { width:19%; }
.leave-rule-card__table thead th:nth-child(3) { width:17%; }
.leave-rule-card__table thead th:nth-child(4) { width:20%; }
.leave-rule-card__table thead th:nth-child(5) { width:21%; }
.leave-rule-card__table tbody th { color:#263b4c; background:#f9fafb; font-size:12px; font-weight:600; text-align:left; }
.leave-rule-card__table td > span { display:block; color:#334f63; font-weight:500; }
.leave-rule-card__table [hidden] { display:none!important; }
.leave-rule-card__table small { display:block; margin-top:3px; color:#6b7f8d; font-size:11px; line-height:1.3; }
.leave-rule-card__table input[name="annual_leave_cycle_start"],.leave-rule-card__table input[name="annual_leave_days"],.leave-rule-card__table input[name="sick_leave_cycle_start"],.leave-rule-card__table input[name="sick_leave_entitlement"] { display:none; }
.leave-rule-card__table input[name="opening_leave_balance"],.leave-rule-card__table input[name="sick_leave_opening_balance"] { display:block; width:100%; max-width:125px; height:29px; margin-top:4px; padding:4px 6px; color:#263b4c; border:1px solid #aebbc3; border-radius:2px; background:#fff; font-size:12px; }
.leave-rule-card__table .errorlist { display:block; margin:4px 0 0; padding-left:15px; color:#a52922; font-size:11px; }
.leave-rule-card__footnote { margin:0; padding:10px 13px; color:#5d7282; background:#f5f8f9; border-left:3px solid #4a6377; font-size:12px; line-height:1.4; }
.leave-rule-card__guidance { margin:0; padding:11px 14px; color:#456171; background:#f5fafb; border-top:1px solid #d9e5e8; border-left:3px solid #0a8792; font-size:12px; line-height:1.45; }
.leave-rule-card__guidance strong { display:block; margin-bottom:3px; color:#21394d; font-size:13px; }
.leave-rule-card__guidance p { margin:0; }
.leave-rule-card .family-leave-setup__status { max-width:none; color:#334f63; font-size:12px; font-weight:500; text-align:left; }
.leave-rule-card--informational .leave-rule-card__header { background:#596f7f; }
@media (max-width:760px) { .leave-setup-redesign__eligibility [id^="id_"],.leave-rule-card__question [id^="id_"] { display:block; } .leave-setup-redesign__eligibility [id^="id_"] > div,.leave-rule-card__question [id^="id_"] > div { margin-bottom:7px; } .leave-rule-card__header { align-items:flex-start; flex-direction:column; gap:3px; } }

.documentation-page { max-width:900px; }
.documentation-heading { margin-bottom:18px; }
.documentation-heading h2 { margin:0 0 4px; color:#17364d; font-size:23px; }
.documentation-heading p { margin:0; color:#61758a; }
.documentation-upload-card,.documentation-list-card { padding:20px; margin-bottom:18px; background:#fff; border:1px solid #d5e0e8; border-radius:8px; box-shadow:0 6px 18px rgba(15,35,55,.05); }
.documentation-upload-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start; }
.documentation-upload-action { grid-column:1 / -1; justify-self:center; padding-top:2px; }
.documentation-list-card h3 { margin:0 0 12px; color:#17364d; font-size:17px; }
.documentation-list { margin:0; padding:0; list-style:none; border-top:1px solid #dce5ec; }
.documentation-list li { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid #dce5ec; }
.documentation-actions { display:flex; align-items:center; gap:8px; }
.documentation-actions form { margin:0; padding:0!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; }
.documentation-actions .btn-danger { border:0; }
.documentation-list strong,.documentation-list span { display:block; }
.documentation-list strong { color:#17364d; }
.documentation-list span,.documentation-empty { margin:3px 0 0; color:#61758a; font-size:13px; }
@media (max-width:700px) { .documentation-upload-fields { grid-template-columns:1fr; } .documentation-list li { align-items:flex-start; flex-direction:column; gap:8px; } .annual-leave-adjustment-grid { grid-template-columns:1fr; } .annual-leave-adjustment-reason { grid-column:auto; } .family-leave-setup { align-items:flex-start; flex-direction:column; gap:8px; } .family-leave-setup__status { text-align:left; } }

.leave-back-actions { flex-direction:column; align-items:flex-start; gap:8px; }
.leave-activity-page { max-width:1040px; }
.leave-activity-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.leave-activity-heading h2 { margin:0 0 4px; font-size:23px; }
.leave-activity-heading p { margin:0; color:#61758a; }
.leave-activity-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.reports-page { max-width:1080px; }
.reports-intro { margin-bottom:18px; }
.reports-intro h2,.report-result-heading h2 { margin:0 0 4px; font-size:23px; }
.reports-intro p,.report-result-heading p { margin:0; color:#61758a; }
.report-filters { display:flex; align-items:flex-end; gap:14px; margin:0 0 18px; padding:16px 18px; background:#fff; border:1px solid var(--line); border-radius:6px; }
.report-filters .employee-field { flex:1 1 240px; margin:0; }
.report-filters .btn { flex:0 0 auto; }
.report-result { padding:20px; background:#fff; border:1px solid var(--line); border-radius:6px; }
.report-result-heading { margin-bottom:16px; }
.report-export-actions { display:flex; justify-content:flex-end; gap:10px; margin:-4px 0 16px; }
.report-balance-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin:0 0 18px; border:1px solid #d8e2e9; background:#d8e2e9; }
.report-balance-grid > div { padding:12px; background:#f7fafc; }
.report-balance-grid span { display:block; margin-bottom:4px; color:#527086; font-size:12px; font-weight:700; text-transform:uppercase; }
.report-balance-grid strong { color:#17334a; font-size:17px; }
.report-history-table { margin:0; }
.reports-empty { margin:0; padding:22px; background:#fff; border:1px solid var(--line); border-radius:6px; color:#61758a; }
.leave-locked-note { color:#61758a; font-size:13px; font-weight:600; }
.leave-activity-filters { display:flex; align-items:flex-end; gap:18px; padding:16px 18px!important; margin:0 0 16px; background:#fff!important; border:1px solid var(--line)!important; border-radius:4px!important; box-shadow:none!important; }
.leave-activity-filters > div { min-width:220px; }
.leave-activity-filters label { display:block; margin:0 0 6px; color:#4d6276; font-size:12px; font-weight:700; text-transform:uppercase; }
.leave-activity-filters select { width:100%; height:36px; padding:6px 10px; }
.leave-workspace-employee-filter { display:flex; align-items:center; gap:10px; margin:0 0 18px; padding:14px 16px!important; background:#F5F7F1!important; border:1px solid var(--line)!important; border-radius:8px!important; box-shadow:none!important; }
.leave-workspace-employee-filter label { margin:0; color:var(--navy); font-size:14px; font-weight:700; }
.leave-workspace-employee-filter select { min-width:260px; height:40px; padding:7px 32px 7px 10px; color:var(--navy); background:#fff; font:inherit; }
.leave-workspace-empty { padding:34px 24px; color:var(--muted); background:#fff; border:1px dashed var(--sage); border-radius:8px; text-align:center; }
.leave-workspace-empty h2 { margin:0 0 7px; color:var(--navy); font-size:20px; }
.leave-workspace-empty p { max-width:520px; margin:0 auto; line-height:1.5; }
.leave-entitlement-cycle { display:flex; flex-direction:column; gap:3px; margin:0 0 2px; color:#61758a; font-size:13px; }
.leave-entitlement-cycle strong { color:#4d6276; font-size:12px; text-transform:uppercase; }
.leave-balances-panel { margin:0 0 16px; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:4px; }
.leave-balances-panel > h3 { margin:0; padding:11px 16px; color:#fff; background:#4a6377; font-size:15px; font-weight:700; }
.leave-balances-panel__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.leave-balances-panel__item { min-width:0; min-height:92px; padding:13px 16px; border-right:1px solid var(--line); }
.leave-balances-panel__item:last-child { border-right:0; }
.leave-balances-panel__item span { display:block; color:#61758a; font-size:12px; font-weight:700; text-transform:uppercase; }
.leave-balances-panel__item strong { display:block; margin:5px 0 3px; color:#172c3f; font-size:20px; font-weight:700; line-height:1.15; }
.leave-balances-panel__item small { display:block; color:#61758a; font-size:12px; line-height:1.35; }
.planned-leave-card { margin:0 0 16px; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:4px; }
.planned-leave-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 16px; color:#fff; background:#4a6377; }
.planned-leave-heading h3 { margin:0; color:inherit; font-size:16px; }
.planned-leave-heading p { margin:3px 0 0; color:rgba(255,255,255,.8); font-size:12px; }
.planned-leave-table { margin:0; }
.planned-leave-table th { color:#526a7f; font-size:12px; text-transform:uppercase; }
.planned-leave-table td:last-child { width:1%; white-space:nowrap; }
.planned-leave-actions { display:flex; align-items:center; gap:12px; }
.planned-leave-actions form { margin:0; }
.planned-leave-edit { color:#087f9c; font-weight:600; text-decoration:none; }
.planned-leave-edit:hover,.planned-leave-edit:focus { color:#055f75; text-decoration:underline; }
.planned-leave-remove { padding:0; color:#c74b4b; background:transparent; border:0; font:inherit; font-weight:600; cursor:pointer; }
.planned-leave-remove:hover,.planned-leave-remove:focus { color:#992f2f; text-decoration:underline; }
.planned-leave-note { margin:0; padding:11px 16px; color:#587087; background:#f8fbfc; border-top:1px solid var(--line); font-size:13px; }
.leave-balance-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-bottom:18px; overflow:hidden; background:var(--line); border:1px solid var(--line); border-radius:4px; }
.leave-balance-grid > div { min-height:82px; padding:14px 16px; background:#fff; }
.leave-balance-grid span { display:block; color:#61758a; font-size:12px; font-weight:700; text-transform:uppercase; }
.leave-balance-grid strong { display:block; margin-top:6px; color:#172c3f; font-size:20px; font-weight:700; }
.leave-available-balance .btn { margin-top:10px; }
.annual-leave-adjustment-card { width:100%; max-width:700px; }
.annual-leave-adjustment-current { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 18px; padding:14px 16px; color:#17364d; background:#edf6f6; border-left:3px solid #0a8792; }
.annual-leave-adjustment-current span,.annual-leave-adjustment-new span { color:#4d6579; font-size:12px; font-weight:700; text-transform:uppercase; }
.annual-leave-adjustment-current strong,.annual-leave-adjustment-new strong { color:#17364d; font-size:20px; }
.annual-leave-adjustment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.annual-leave-adjustment-grid label { display:block; margin-bottom:6px; font-weight:700; }
.annual-leave-adjustment-grid select,.annual-leave-adjustment-grid input,.annual-leave-adjustment-grid textarea { width:100%; }
.annual-leave-adjustment-new { align-self:end; padding:10px 0; }
.annual-leave-adjustment-reason { grid-column:1 / -1; }
.annual-leave-adjustment-note { margin:18px 0; padding:10px 12px; color:#35576e; background:#edf6f6; border-left:3px solid #0a8792; font-size:13px; line-height:1.45; }
.leave-calendar-card,.leave-records-card { margin-bottom:18px; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:4px; }
.leave-calendar-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 16px; color:#fff; background:#4a6377; }
.leave-calendar-heading h3,.leave-records-card h3 { margin:0; font-size:16px; font-weight:700; }
.leave-calendar-heading p { margin:3px 0 0; color:rgba(255,255,255,.78); font-size:13px; }
.leave-calendar-legend { display:inline-flex; align-items:center; gap:6px; color:#fff; font-size:12px; white-space:nowrap; }
.leave-calendar-legend i { width:10px; height:10px; background:#b8ebe4; border-radius:2px; }
.leave-calendar-weekdays,.leave-calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.leave-calendar-weekdays { padding:12px 14px 7px; color:#6e8191; font-size:11px; font-weight:700; text-align:center; text-transform:uppercase; }
.leave-calendar-grid { gap:1px; padding:0 14px 14px; background:#e2e9ee; }
.leave-calendar-grid span { min-height:46px; padding:7px 8px; color:#465d70; background:#fff; font-size:13px; }
.leave-calendar-grid span.has-leave { color:#075f69; background:#dff4f1; font-weight:700; }
.leave-records-card h3 { padding:13px 16px; color:#fff; background:#4a6377; }
.leave-records-card .table { margin:0; }
.leave-records-card .table th { color:#526a7f; font-size:12px; text-transform:uppercase; }
.leave-records-empty { padding:16px!important; color:#6c8092; }
.leave-tracking-note { margin:0; padding:12px 16px; color:#587087; background:#f8fbfc; border-top:1px solid var(--line); font-size:13px; }
.form-card.leave-form-card { width:100%; max-width:700px; padding:24px; }
.end-service-page { max-width:760px; }
.end-service-heading { margin:0 0 16px; }
.end-service-heading h2 { margin:0 0 4px; color:var(--navy); font-size:22px; }
.end-service-heading p { margin:0; color:#60768a; }
.form-card.end-service-card { width:100%; max-width:720px; padding:24px; }
.end-service-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 22px; }
.end-service-fields label { display:block; margin-bottom:7px; font-weight:700; }
.end-service-fields input,.end-service-fields select { width:100%; min-height:40px; box-sizing:border-box; }
.end-service-note { margin:20px 0; padding:11px 13px; color:#35576e; background:#edf6f6; border-left:3px solid var(--teal); font-size:13px; line-height:1.45; }
@media (max-width:600px) { .end-service-fields { grid-template-columns:1fr; } }
.leave-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.leave-form-wide { grid-column:1 / -1; }
.leave-form-help { margin:2px 0 18px; padding:10px 12px; color:#31566c; background:#e9f5f6; border-left:3px solid #0b8995; }

/* Plan future leave and edit planned leave. */
.planned-leave-form-route .page-heading h1 {
    font-size:32px;
}
.planned-leave-form-route .page-heading p {
    font-size:16px;
}
.planned-leave-form-route .form-card.leave-form-card {
    width:100%;
    max-width:none;
    padding:24px;
    border:1px solid rgba(23,63,99,.10);
    border-radius:14px;
    background:#fff;
    box-shadow:0 3px 12px rgba(23,63,99,.05);
}
.planned-leave-form-route .leave-form-grid {
    gap:18px 22px;
}
.planned-leave-form-route .payslip-input-amount-field {
    min-width:0;
    margin:0;
}
.planned-leave-form-route .payslip-input-amount-field label {
    display:block;
    margin:0 0 7px;
    color:#173F63;
    font-size:15px;
    font-weight:700;
}
.planned-leave-form-route .payslip-input-amount-field input,
.planned-leave-form-route .payslip-input-amount-field select,
.planned-leave-form-route .payslip-input-amount-field textarea {
    width:100%;
    min-height:42px;
    box-sizing:border-box;
    font-size:14px!important;
}
.planned-leave-form-route .payslip-input-amount-field textarea {
    min-height:112px;
    resize:vertical;
}
.planned-leave-form-route .leave-form-help {
    margin:20px 0;
    padding:13px 15px;
    color:#31566c;
    background:#F2F7FC;
    border:1px solid rgba(23,63,99,.10);
    border-left:4px solid #4E84B5;
    border-radius:10px;
    font-size:14px;
    line-height:1.5;
}
.planned-leave-form-actions {
    display:flex;
    align-items:center;
    gap:10px;
}
.planned-leave-form-route .planned-leave-form-actions .btn {
    min-height:42px;
}
@media (max-width:600px) {
    .planned-leave-form-route .form-card.leave-form-card {
        padding:18px;
    }
    .planned-leave-form-route .leave-form-grid {
        grid-template-columns:1fr;
    }
    .planned-leave-form-route .leave-form-wide {
        grid-column:auto;
    }
    .planned-leave-form-actions {
        align-items:stretch;
        flex-direction:column;
    }
    .planned-leave-form-actions .btn {
        width:100%;
        justify-content:center;
    }
}

.employee-input-panel,
.employee-live-preview {
    overflow: hidden;
    margin: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: none;
    font-family: inherit;
}

.employee-input-panel .regular-input-heading {
    min-height: 50px;
    padding: 10px 16px;
    margin: 0;
    color: #fff;
    background: #4a6377;
}

.employee-input-panel .regular-input-heading h2,
.employee-input-panel .regular-input-heading h2 span {
    margin: 0;
    color: inherit;
    font-size: 16px;
}

.employee-input-panel .regular-input-heading h2 .input-heading-period {
    font-weight: 400;
}

.employee-input-panel .regular-input-add,
.employee-input-panel .regular-input-locked {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.8);
}

.employee-input-list {
    padding: 0;
}

.employee-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: baseline;
    min-height: 47px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
}

.employee-input-row:last-child {
    border-bottom: 0;
}

.employee-input-row strong {
    white-space: nowrap;
    font-weight: 400;
}

.employee-input-row .regular-input-edit {
    color: #228b9b;
}

.employee-input-empty {
    padding: 13px 16px;
    margin: 0;
    color: #64748b;
}
.planned-leave-review { padding:11px 16px; color:#35576e; background:#edf6f6; border-bottom:1px solid #c8e1e4; font-size:13px; }
.planned-leave-review > strong { display:block; margin-bottom:6px; color:#17364d; }
.planned-leave-review > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px 0; }
.planned-leave-review a { color:#087f9c; font-weight:700; text-decoration:none; }
.planned-leave-review a:hover,.planned-leave-review a:focus { text-decoration:underline; }
.planned-leave-review small { color:#657b8d; }

.employee-live-preview {
    max-width: none;
    overflow: visible;
}

.employee-live-preview .payslip-summary-header {
    min-height: 50px;
    padding: 9px 16px;
    background: #4a6377;
    border-radius: 4px 4px 0 0;
}

.employee-live-preview .payslip-summary-header small {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.76);
}

.employee-live-preview .payslip-summary-section,
.employee-live-preview .payslip-summary-net {
    padding-left: 16px;
    padding-right: 16px;
}

.employee-live-preview .payslip-summary-line small {
    display: block;
    color: #7a8795;
    font-size: 11px;
}

.employee-live-preview .payslip-summary-net {
    color: #fff;
    background: #087f8c;
}

.employee-live-preview .payslip-summary-net strong {
    color: inherit;
}
.payslip-summary-actions { position:relative; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:64px; padding:12px 16px; border-top:1px solid var(--line); border-radius:0 0 4px 4px; background:#f7f8f9; }
.payslip-summary-actions-left,.payslip-summary-actions-right { display:flex; align-items:center; gap:16px; }
.payslip-summary-actions-right { flex:0 0 auto; margin-left:auto; gap:10px; white-space:nowrap; }
.payslip-summary-actions a { color:#087f9c; font-weight:500; text-decoration:none; }
.payslip-summary-actions a:hover,.payslip-summary-actions a:focus { color:#055f76; text-decoration:underline; }
.payslip-summary-actions .btn-primary { min-height:38px; padding:8px 14px; color:#fff; font-weight:600; }
.payslip-summary-actions .btn-primary:hover,.payslip-summary-actions .btn-primary:focus { color:#fff; text-decoration:none; }
.payslip-more-menu { position:relative; }
.payslip-more-trigger { display:inline-flex; align-items:center; gap:5px; min-height:34px; padding:5px 8px; color:#087f9c; background:transparent; border:1px solid transparent; border-radius:4px; font:inherit; font-weight:500; cursor:pointer; }
.payslip-more-trigger:hover,.payslip-more-trigger:focus,.payslip-more-trigger[aria-expanded="true"] { color:#055f76; background:#e8f1f3; border-color:#b7cbd0; outline:none; }
.payslip-more-trigger[aria-expanded="true"] span { transform:rotate(180deg); }
.payslip-more-dropdown { position:absolute; top:calc(100% + 7px); right:0; z-index:30; min-width:190px; padding:6px; background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 10px 24px rgba(15,35,50,.2); }
.payslip-more-dropdown[hidden] { display:none; }
.payslip-more-menu a,.payslip-more-menu button { display:block; width:100%; padding:9px 11px; color:#087f9c; background:transparent; border:0; border-radius:4px; font:inherit; text-align:left; cursor:pointer; }
.payslip-more-menu a:hover,.payslip-more-menu a:focus,.payslip-more-menu button:hover,.payslip-more-menu button:focus { color:#055f76; background:#eef6f7; text-decoration:none; }
.payslip-more-menu form { margin:0; }
.payslip-summary-actions .payslip-download-link { display:inline-flex; align-items:center; justify-content:center; padding:2px; }
.payslip-summary-actions .payslip-download-link:hover,.payslip-summary-actions .payslip-download-link:focus { text-decoration:none; }
.payslip-pdf-icon { position:relative; display:inline-flex; align-items:flex-end; justify-content:center; width:17px; height:20px; padding-bottom:2px; color:#111827; background:#fff; border:1px solid #475569; border-radius:1px; font-size:6px; font-weight:700; line-height:1; }
.payslip-pdf-icon::after { content:""; position:absolute; top:-1px; right:-1px; width:6px; height:6px; background:#dbe2e8; border-left:1px solid #475569; border-bottom:1px solid #475569; }
@media (max-width:600px) { .payslip-summary-actions { gap:10px; padding:10px; } .payslip-summary-actions-left { justify-content:flex-start; gap:8px; } .payslip-summary-actions-right { justify-content:flex-end; gap:7px; } }

@media (max-width: 1050px) {
    .employee-payroll-workspace {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .employee-live-preview {
        grid-column: 1 / -1;
        grid-row:auto;
    }
}

@media (max-width: 700px) {
    .report-card-grid { grid-template-columns:1fr; }.reports-open-heading { align-items:flex-start; flex-direction:column; gap:10px; }
    .employee-payroll-workspace {
        grid-template-columns: 1fr;
    }

    .employee-live-preview {
        grid-column: auto;
    }

    .leave-activity-heading,.leave-activity-filters { align-items:stretch; flex-direction:column; }
    .leave-activity-actions { justify-content:flex-start; }
    .report-filters { align-items:stretch; flex-direction:column; }
    .report-filters .employee-field { flex:auto; }
    .report-balance-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .report-export-actions { justify-content:flex-start; margin-top:0; }
    .leave-activity-filters > div { min-width:0; }
    .leave-balance-grid { grid-template-columns:1fr; }
    .leave-balances-panel__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .leave-balances-panel__item { border-bottom:1px solid var(--line); }
    .leave-balances-panel__item:nth-child(2n) { border-right:0; }
    .leave-balances-panel__item:nth-last-child(-n+2) { border-bottom:0; }
    .planned-leave-heading { align-items:flex-start; flex-direction:column; }
    .planned-leave-review > div { align-items:flex-start; flex-direction:column; gap:4px; }
    .leave-calendar-grid span { min-height:38px; padding:6px; }
    .leave-form-grid { grid-template-columns:1fr; }
    .leave-form-wide { grid-column:auto; }
}
.benefit-option-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.benefit-option-grid--regular-inputs { grid-template-columns:repeat(4,minmax(0,1fr)); }
.benefit-option-card { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:4px; }
.benefit-option-card h2 { padding:12px 16px; margin:0; color:#fff; background:#4a6377; font-size:16px; }
.benefit-option-card a { display:block; padding:13px 16px; color:#228b9b; border-top:1px solid var(--line); }
.benefit-option-card a:hover,.benefit-option-card a:focus { background:#f2f7f9; text-decoration:none; }
.payslip-input-amount-field { margin-bottom:12px; }
.payslip-input-amount-field label { display:block; margin-bottom:6px; font-weight:700; }
.form-card.regular-input-form-card,
.form-card.payslip-input-form-card { width:100%; max-width:none; padding:24px; box-sizing:border-box; }
.payslip-input-adjustment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 22px; }
.payslip-input-adjustment-grid .payslip-input-amount-field { margin:0; }
.payslip-input-adjustment-grid input,.payslip-input-adjustment-grid select { display:block; width:100%; min-height:40px; box-sizing:border-box; }
.payslip-input-field-wide { grid-column:1 / -1; }
.loan-interest-options #id_interest_type { display:flex; align-items:center; flex-wrap:wrap; gap:8px 20px; margin-top:7px; }
.loan-interest-options #id_interest_type > div { margin:0; }
.loan-interest-options #id_interest_type label { display:inline-flex; align-items:center; gap:7px; margin:0; font-weight:600; }
.payslip-input-adjustment-grid .loan-interest-options input[type="radio"] { display:inline-block; width:16px; height:16px; min-height:0; margin:0; flex:0 0 16px; }
.loan-agreement-authorisation { display:flex; align-items:flex-start; gap:8px; margin-top:12px; }
.loan-agreement-authorisation label { margin:0; font-weight:600; line-height:1.4; }
.payslip-input-adjustment-grid .loan-agreement-authorisation input[type="checkbox"] { display:inline-block; width:16px; height:16px; min-height:0; margin:2px 0 0; flex:0 0 16px; }
.loan-balance-summary { margin-top:26px; }
.payslip-input-help { margin-top:18px; color:#526273; }
@media (max-width:600px) {
 .payslip-input-form-card { padding:18px; }
 .payslip-input-adjustment-grid { grid-template-columns:1fr; gap:14px; }
 .payslip-input-field-wide { grid-column:auto; }
}
@media (max-width:1100px) { .benefit-option-grid--regular-inputs { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:840px) { .benefit-option-grid,.benefit-option-grid--regular-inputs { grid-template-columns:1fr; } }
.table-responsive { min-height:.01%; overflow-x:auto; }
.employee-salaries-table .table { min-width:560px; margin-bottom:0; }
.badge { display:inline-flex; padding:5px 9px; border-radius:999px; color:#334155; background:#e2e8f0; font-size:12px; font-weight:700; }
.badge-draft,.badge-warning { color:#754c00; background:#fff0c2; }
.badge-validated,.badge-primary { color:#174f78; background:#d9edff; }
.badge-approved,.badge-success,.badge-sent { color:#12583f; background:#d7f5e8; }
.badge-failed,.badge-danger { color:#8f2019; background:#fee4e2; }
.run-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 3px; border-top:1px solid #e7edf2; }
.run-row:hover,.run-row:focus { background:#f8fbfd; text-decoration:none; }
.attention-center { border-top:4px solid var(--teal); }
.attention-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:16px 0; }
.attention-metrics div { padding:15px; background:#f5f8fb; border-radius:7px; }
.attention-metrics strong,.attention-metrics span { display:block; }
.attention-metrics strong { font-size:25px; }
.attention-metrics span { color:var(--slate); font-size:12px; }
.empty-state { display:flex; flex-direction:column; align-items:center; padding:28px; color:#64748b; text-align:center; }
.workflow-steps { display:grid; grid-template-columns:repeat(4,1fr); padding:0; margin:0 0 20px; list-style:none; }
.workflow-steps li { padding:12px; color:#64748b; background:#e8edf2; border-right:2px solid #f3f6f9; text-align:center; font-weight:700; }
.workflow-steps li.is-complete { color:#fff; background:#087f8c; }
.payroll-review-tools { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.payroll-review-tools>div { display:flex; gap:10px; flex-wrap:wrap; }
.payroll-review-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-bottom:22px; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:8px; }
.payroll-review-totals>div { min-width:0; padding:18px 22px; border-right:1px solid var(--line); }
.payroll-review-totals>div:last-child { border-right:0; }
.payroll-review-totals span,.payroll-review-totals strong { display:block; }
.payroll-review-totals span { margin-bottom:5px; color:var(--slate); }
.payroll-review-totals strong { font-size:22px; }
.payroll-review-employees { overflow:hidden; margin-bottom:20px; background:#fff; border:1px solid var(--line); border-radius:8px; }
.payroll-review-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 22px; color:#fff; background:#4e687d; }
.payroll-review-heading h2 { margin:0 0 2px; color:#fff; }
.payroll-review-heading small { color:#fff; opacity:.85; }
.payroll-review-heading>span { padding:5px 10px; color:#334155; background:#fff; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
.payroll-review-employee { display:grid; grid-template-columns:minmax(220px,1.25fr) minmax(340px,1.45fr) minmax(220px,.9fr); gap:22px; align-items:center; padding:20px 22px; border-bottom:1px solid var(--line); }
.payroll-review-employee:last-child { border-bottom:0; }
.payroll-review-person h3 { margin:0 0 7px; }
.payroll-review-person p { max-width:390px; margin:9px 0 0; color:#8a5a00; font-size:13px; line-height:1.45; }
.payroll-review-employee dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; min-width:0; margin:0; overflow:hidden; background:#f4f7fa; border:1px solid #e0e7ed; border-radius:7px; }
.payroll-review-employee dl>div { min-width:0; padding:11px 13px; border-right:1px solid #e0e7ed; }
.payroll-review-employee dl>div:last-child { border-right:0; }
.payroll-review-employee dt { margin-bottom:4px; color:var(--slate); font-size:12px; }
.payroll-review-employee dd { margin:0; font-weight:700; white-space:nowrap; }
.payroll-review-actions { display:grid; grid-template-columns:1fr; gap:8px; }
.payroll-review-actions .btn { width:100%; margin:0; text-align:center; }
.payroll-review-finalise { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 22px; background:#fff; border:1px solid var(--line); border-left:5px solid var(--teal); border-radius:8px; }
.payroll-review-finalise strong,.payroll-review-finalise span { display:block; }
.payroll-review-finalise span { margin-top:4px; color:var(--slate); }
.payroll-review-final-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.payroll-review-final-actions form { margin:0; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; }
.payroll-review-final-actions button[disabled] { opacity:.48; cursor:not-allowed; }
.detail-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:0; }
.detail-grid dt { color:#64748b; font-size:12px; text-transform:uppercase; }
.detail-grid dd { margin:5px 0 0; font-size:16px; font-weight:700; }
.form-card { max-width:720px; }
.tax-directives-page__heading { margin-bottom:24px; }
.form-card.tax-directives-page__card { width:100%; max-width:none; box-sizing:border-box; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; }
.validation-errors { margin:0; padding-left:18px; color:#9f241b; }
:focus-visible { outline:3px solid #2dd4bf!important; outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
@media (max-width:840px) {
 .employee-page-tabs { overflow-x:auto; }
 .payroll-review-employee { grid-template-columns:1fr; }
 .payroll-review-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .payroll-review-totals { grid-template-columns:1fr; }
 .payroll-review-totals>div { border-right:0; border-bottom:1px solid var(--line); }
 .payroll-review-totals>div:last-child { border-bottom:0; }
 .payroll-review-finalise,.payroll-review-tools { align-items:flex-start; flex-direction:column; }
 .employee-detail-sections { margin-left:0; margin-right:0; }
 .employee-detail-sections > [class*="col-"] { padding-left:0; padding-right:0; }
 body { padding-left:0; }
 .app-sidebar { transform:translateX(-100%); width:260px; }
 .app-topbar { left:0; padding-left:112px; }
 .mobile-menu-button { position:fixed; top:14px; left:14px; z-index:1200; display:flex; gap:7px; align-items:center; padding:8px 10px; color:#fff; background:var(--navy); border-radius:6px; cursor:pointer; }
 .nav-toggle:checked ~ .app-sidebar { transform:translateX(0); }
 .nav-toggle:checked ~ .mobile-menu-button { left:270px; }
 .dashboard-grid,.dashboard-panels,.attention-metrics,.detail-grid { grid-template-columns:1fr; }
 .workflow-steps { grid-template-columns:1fr 1fr; }
 .topbar-user > span,.secure-label { display:none; }
 .content-width { width:min(100% - 24px,1180px); }
}
@media (max-width:520px) {
 .payroll-review-employee dl { grid-template-columns:1fr; }
 .payroll-review-employee dl>div { border-right:0; border-bottom:1px solid #e0e7ed; }
 .payroll-review-employee dl>div:last-child { border-bottom:0; }
 .payroll-review-actions { grid-template-columns:1fr; }
 .payroll-review-heading { align-items:flex-start; }
}

/* Guided employee onboarding */
.employee-onboarding-card { max-width:980px; padding:26px; margin:0 auto 32px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(15,35,55,.08); }
.employee-onboarding-card[data-employee-edit] { display:block; max-width:1200px; }
.employee-edit-sections { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:16px; margin:0 0 26px; background:#f7fafc; border:1px solid #dce6ed; border-radius:9px; }
.employee-edit-sections__title { grid-column:1 / -1; margin:0 2px 4px; color:#526477; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.employee-edit-sections__button { display:flex; gap:9px; align-items:center; width:auto; min-width:0; padding:10px; border:0; border-radius:7px; background:transparent; color:#34495e; font-weight:700; text-align:left; text-decoration:none; cursor:pointer; }
.employee-edit-sections__button span { display:inline-flex; flex:0 0 26px; align-items:center; justify-content:center; width:26px; height:26px; border:1px solid #b8cbd5; border-radius:50%; background:#fff; color:#526477; font-size:12px; }
.employee-edit-sections__button:hover { background:#e8f3f5; color:var(--navy); }
.employee-edit-sections__button:focus-visible { box-shadow:0 0 0 3px rgba(8,127,140,.2); outline:0; }
.employee-edit-sections__button.is-active { background:var(--teal); color:#fff; }
.employee-edit-sections__button.is-active span { border-color:#fff; color:var(--teal); }
.employee-onboarding-card[data-employee-edit] .employee-onboarding-form { min-width:0; }
.employee-progress { margin-bottom:24px; }
.employee-progress__track { height:8px; overflow:hidden; background:#e5edf2; border-radius:999px; }
.employee-progress__bar { display:block; width:10%; height:100%; background:linear-gradient(90deg,var(--teal),#2dd4bf); border-radius:inherit; transition:width .2s ease; }
.employee-progress__status { margin:8px 0 0; color:#526477; font-size:13px; font-weight:700; text-align:right; }
.employee-onboarding-form.js-enabled .employee-form-step { display:none; }
.employee-onboarding-form.js-enabled .employee-form-step.is-active { display:block; }
.employee-form-step { scroll-margin-top:84px; }
.employee-form-step__header { display:flex; gap:14px; align-items:flex-start; padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid #e5edf2; }
.employee-form-step__header h2 { margin:0 0 5px; color:var(--navy); font-size:24px; }
.employee-form-step__header p { margin:0; color:#64748b; }
.employee-form-step__number { display:inline-flex; flex:0 0 38px; align-items:center; justify-content:center; width:38px; height:38px; color:#fff; background:var(--teal); border-radius:50%; font-weight:800; }
.employee-unsaved-modal[hidden] { display:none; }
.employee-unsaved-modal { position:fixed; z-index:1000; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,35,53,.45); }
.employee-unsaved-modal__panel { width:min(460px,100%); padding:24px; border-radius:9px; background:#fff; box-shadow:0 18px 48px rgba(15,35,53,.28); }
.employee-unsaved-modal__panel h2 { margin:0 0 10px; color:var(--navy); font-size:21px; }
.employee-unsaved-modal__panel p { margin:0; color:#4d6478; line-height:1.5; }
.employee-unsaved-modal__actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.night-work-schedule-drawer[hidden] { display:none; }
.night-work-schedule-drawer { position:fixed; z-index:1200; inset:0; display:flex; justify-content:flex-end; }
.night-work-schedule-drawer__backdrop { position:absolute; inset:0; width:100%; border:0; background:rgba(15,35,53,.5); cursor:default; }
.night-work-schedule-drawer__panel { position:relative; display:flex; flex-direction:column; width:min(760px,96vw); height:100%; overflow:hidden; background:#fff; box-shadow:-18px 0 48px rgba(15,35,53,.25); }
.night-work-schedule-drawer__header { display:flex; justify-content:space-between; gap:18px; padding:24px 28px 18px; border-bottom:1px solid #dce7ee; background:#eff7fe; }
.night-work-schedule-drawer__header h2 { margin:2px 0 6px; color:var(--navy); font-size:24px; }
.night-work-schedule-drawer__header p { margin:0; color:#4d6478; }
.night-work-schedule-drawer__eyebrow { color:#1c6cac !important; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.night-work-schedule-drawer__close { flex:0 0 38px; width:38px; height:38px; border:1px solid #9cb5c8; border-radius:50%; color:#1c6cac; background:#fff; font-size:27px; line-height:1; cursor:pointer; }
.night-work-schedule-drawer__summary { padding:16px 28px; border-bottom:1px solid #dce7ee; background:#f8fbfd; }
.night-work-schedule-drawer__summary p { margin:3px 0; }
.night-work-schedule-drawer__summary .is-matched { color:#087a5c; font-weight:800; }
.night-work-schedule-drawer__summary .is-mismatched { color:#9a3412; font-weight:800; }
.night-work-schedule-drawer__fields { flex:1; overflow:auto; padding:24px 28px; }
.night-work-schedule-drawer__fields > .employee-field,
.night-work-schedule-drawer__fields > .weekend-work-schedule,
.night-work-schedule-drawer__fields > [data-work-schedule-field] { margin-bottom:18px; }
.night-work-schedule-drawer__actions { display:flex; justify-content:flex-end; gap:10px; padding:16px 28px; border-top:1px solid #dce7ee; background:#fff; }
.night-work-current-hours { margin:0; padding:12px 14px; border-left:4px solid #31d2f7; background:#eff7fe; color:#173a55; }
.night-work-schedule-status { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; margin:14px 0 0; }
.night-work-schedule-status div { padding:9px 11px; border:1px solid #dce7ee; border-radius:6px; background:#fff; }
.night-work-schedule-status dt { color:#64748b; font-size:12px; font-weight:700; }
.night-work-schedule-status dd { margin:2px 0 0; color:#173a55; font-weight:800; }
body.work-schedule-drawer-open { overflow:hidden; }
@media (max-width:700px) {
 .night-work-schedule-drawer__panel { width:100%; }
 .night-work-schedule-drawer__header,
 .night-work-schedule-drawer__fields,
 .night-work-schedule-drawer__actions { padding-left:18px; padding-right:18px; }
 .night-work-schedule-status { grid-template-columns:1fr; }
}
.employee-fields-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 24px; }
.employee-fields-grid .employee-field[hidden] { display:none!important; }
.employee-field > label { display:block; margin-bottom:7px; color:#26394c; font-weight:700; }
.employee-field input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.employee-field select,
.employee-field textarea { width:100%; min-height:42px; padding:9px 11px; border:1px solid #b8c5d1; border-radius:6px; background:#fff; }
.employee-field textarea { min-height:96px; resize:vertical; }
.employee-field input[type="file"] { width:100%; padding:11px; border:1px dashed #8aa1b4; border-radius:6px; background:#f8fbfd; }
.employee-field input:focus,.employee-field select:focus,.employee-field textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(8,127,140,.13); outline:0; }
.employee-field ul { padding:0; margin:0; list-style:none; }
.employee-field ul li,.employee-field [id^="id_"] > div { margin:7px 0; }
.employee-field ul label,.employee-field [id^="id_"] > div label { font-weight:500; }
.employee-field input[type="radio"],.employee-field input[type="checkbox"] { margin-right:7px; accent-color:var(--teal); }
.employee-field--address,.employee-field--residential_street_address,.employee-field--work_days,.employee-field--information_confirmed,.employee-field--overtime_arrangement_confirmed { grid-column:1 / -1; }
body.employee-onboarding-page .employee-form-step[data-step-key="pay_setup"] .pay-setup-accommodation,
.employee-field--night_work_or_standby_planned,
.employee-field--receives_overtime,
.employee-field--night_work_expected,
.employee-field--standby_expected,
.employee-field--employer_covers_employee_uif,
.employee-field--basic_pay_excludes_additions_confirmed { grid-column:1 / -1; padding:18px 20px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.weekend-work-schedule { margin-top:24px; overflow:hidden; border:1px solid #d5e1e8; border-radius:8px; background:#f8fbfc; }
.weekend-work-schedule[hidden] { display:none; }
.weekend-work-schedule__header { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:13px 16px; background:#4e687d; color:#fff; }
.weekend-work-schedule__header h3 { margin:0; font-size:16px; }
.weekend-work-schedule__header p { margin:0; color:#e7f0f4; font-size:13px; }
.weekend-work-schedule__fields { padding:18px; }
.overnight-schedule-summary { grid-column:1 / -1; min-width:0; margin-top:-4px; border:1px solid #b8dadd; border-left:4px solid #008b8b; border-radius:7px; background:#f2f9f9; color:#173f4b; overflow:hidden; }
.overnight-schedule-summary[hidden] { display:none!important; }
.overnight-schedule-summary__notice { padding:14px 16px 10px; }
.overnight-schedule-summary__notice strong { display:block; color:#0a5360; }
.overnight-schedule-summary__notice p { margin:5px 0 0; }
.overnight-schedule-summary__table-wrap { border-top:1px solid #cfe5e7; }
.overnight-schedule-summary__table { width:100%; table-layout:fixed; border-collapse:collapse; background:#fff; }
.overnight-schedule-summary__table th,
.overnight-schedule-summary__table td { padding:9px 12px; border-bottom:1px solid #deebed; text-align:left; vertical-align:top; }
.overnight-schedule-summary__table th:last-child,
.overnight-schedule-summary__table td:last-child { text-align:right; white-space:nowrap; }
.overnight-schedule-summary__table thead th { background:#e7f3f4; color:#174b55; font-size:13px; }
.overnight-schedule-summary__table tfoot th,
.overnight-schedule-summary__table tfoot td { background:#f7fbfb; font-weight:650; }
.overnight-schedule-summary__table tfoot tr:last-child th,
.overnight-schedule-summary__table tfoot tr:last-child td { border-bottom:0; }

@media (max-width: 560px) {
  .overnight-schedule-summary__notice { padding:12px; }
  .overnight-schedule-summary__table th,
  .overnight-schedule-summary__table td {
    padding:8px;
    overflow-wrap:anywhere;
  }
}
.employee-field--saturday_free_during_meal_break,.employee-field--sunday_free_during_meal_break { grid-column:1 / -1; }
.employee-checkbox-field { display:flex; align-items:flex-start; gap:7px; padding:13px; background:#f4f9fa; border:1px solid #c8e4e6; border-radius:7px; }
.employee-checkbox-field label { margin:0; }
.required-marker { color:#a52922; }
.employee-field__label-row { display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.employee-field__label-row > label { margin:0; }
.employee-start-date-correction-link { margin-left:auto; color:#087F7B; font-size:12px; font-weight:600; text-decoration:none; }.employee-start-date-correction-link:hover,.employee-start-date-correction-link:focus { color:#066C69; text-decoration:underline; }
.employee-info { position:relative; display:inline-flex; }
.employee-info__button { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0; border:1px solid #2f6fa6; border-radius:50%; background:#fff; color:#2f6fa6; font-size:13px; font-weight:700; line-height:1; cursor:help; }
.employee-info__button:hover,.employee-info__button:focus { background:#2f6fa6; color:#fff; outline:none; }
.employee-info__button:focus-visible { box-shadow:0 0 0 3px rgba(47,111,166,.25); }
.employee-info__tooltip { position:absolute; z-index:20; bottom:calc(100% + 8px); left:0; width:min(360px,calc(100vw - 48px)); padding:10px 12px; border-radius:6px; background:#1f2937; color:#fff; font-size:13px; font-weight:400; line-height:1.45; box-shadow:0 6px 18px rgba(15,23,42,.24); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(4px); transition:opacity .15s ease,transform .15s ease,visibility .15s ease; }
.employee-info__tooltip--basic-pay { top:calc(100% + 8px); right:auto; bottom:auto; left:0; width:min(440px,calc(100vw - 48px)); }
.employee-field--normal_pay_rate { position:relative; }
.employee-field--normal_pay_rate:hover,
.employee-field--normal_pay_rate:focus-within { z-index:200; }
.employee-info--basic-pay { z-index:1; }
.employee-info--basic-pay .employee-info__tooltip { z-index:2; }
.employee-info__tooltip--basic-pay > strong { display:block; margin-bottom:8px; }
.employee-info__tooltip--basic-pay > span { display:block; margin-top:8px; }
.employee-info__tooltip--basic-pay strong { font-weight:700; }
.employee-info:hover .employee-info__tooltip,.employee-info:focus-within .employee-info__tooltip { opacity:1; visibility:visible; transform:translateY(0); }
.help-block { margin:6px 0 0; color:#64748b; font-size:12px; }
.sunday-pay-setup-note { padding:14px 16px; margin:0 0 20px; border:1px solid #c99aae; border-left:5px solid #8C4260; border-radius:7px; background:#fbf4f7; color:#8C4260; font-size:14px; font-weight:650; line-height:1.5; }
.basic-pay-setup-note { padding:11px 14px; margin:0 0 18px; border:1px solid #d7e6e5; border-left:3px solid #8fbfbc; border-radius:6px; background:#f7fbfa; color:#46615f; font-size:12px; line-height:1.5; }
.basic-pay-setup-note h3 { margin:0 0 8px; color:#386a67; font-size:13px; font-weight:700; line-height:1.35; }
.basic-pay-setup-note p { margin:0 0 8px; }
.basic-pay-setup-note p:last-child { margin-bottom:0; }
.basic-pay-setup-note p strong { color:inherit; font-size:inherit; }
.basic-pay-setup-note__summary { margin-top:12px !important; }
.night-work-overlap-note { grid-column:1 / -1; padding:12px 15px; margin:4px 0 2px; border:1px solid #cfe1ef; border-left:4px solid #8fb8d5; border-radius:7px; background:#eaf3fb; color:#173f63; font-size:12px; line-height:1.5; }
.night-work-overlap-note p { margin:0 0 9px; }
.night-work-overlap-note ul { padding:0; margin:0 0 10px; list-style:none; }
.night-work-overlap-note li { margin:6px 0; }
.night-work-overlap-note__summary { margin:13px 0 0 !important; }
.regular-inputs-setup-heading { grid-column:1 / -1; box-sizing:border-box; width:100%; padding:12px 15px; margin:8px 0 0; border:1px solid #d8cae6; border-left:4px solid #a77abb; border-radius:7px; background:#f6f2fb; color:#55386f; font-size:12px; line-height:1.5; }
.regular-inputs-setup-heading strong { display:block; margin-bottom:3px; font-size:14px; }
.regular-inputs-setup-heading p { margin:0; }
.employee-field--regular_earnings_expected,.employee-field--regular_deductions_expected { grid-column:1 / -1; }
.employee-field--regular_earnings,.employee-field--regular_deductions { grid-column:1 / -1; padding:14px 16px; border:1px solid #dce6ed; border-radius:7px; background:#fff; }
.employee-field--regular_earnings ul,.employee-field--regular_deductions ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 18px; padding:0; margin:8px 0 0; list-style:none; }
.employee-field--regular_earnings li,.employee-field--regular_deductions li { margin:0; }
.employee-field[data-field-name^="regular_amount_"],.employee-field[data-field-name^="regular_effective_from_"] { padding:12px 14px; border:1px solid #e2e8ee; border-radius:7px; background:#fff; }
.employee-field--regular_deductions_authorised { grid-column:1 / -1; }
.regular-inputs-sync-note { grid-column:1 / -1; box-sizing:border-box; width:100%; padding:11px 14px; border:1px solid #d7e6e5; border-radius:6px; background:#f7fbfa; color:#46615f; font-size:12px; line-height:1.5; }
.regular-inputs-sync-note strong { margin-right:3px; }
.regular-deduction-card-heading { grid-column:1 / -1; box-sizing:border-box; width:100%; padding:10px 14px; margin:7px 0 -3px; border:1px solid #dce6ed; border-left:4px solid #8fbfbc; border-radius:7px; background:#f7fbfa; color:#386a67; font-size:13px; line-height:1.4; }
.pay-setup-category-workspace { grid-column:1 / -1; display:grid!important; grid-template-columns:repeat(3,minmax(230px,1fr))!important; align-items:start; gap:14px; width:100%; margin:8px 0 4px; padding-bottom:4px; overflow-x:auto; }
.pay-setup-category { grid-column:auto!important; display:grid; gap:10px; min-width:0; }
.pay-setup-category__header { display:flex; align-items:center; justify-content:center; gap:9px; min-height:54px; padding:10px 14px; border:2px solid #fff; border-radius:12px; box-shadow:0 3px 9px rgba(18,59,98,.15); }
.pay-setup-category__header svg { width:18px; height:18px; fill:none; stroke:#113f68; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pay-setup-category__header h3 { margin:0; color:#113f68; font-size:16px; font-weight:700; line-height:1.3; text-align:center; }
.pay-setup-category--income .pay-setup-category__header { background:#dff4ef; }
.pay-setup-category--deductions .pay-setup-category__header { background:#e6f1fb; }
.pay-setup-category--contributions .pay-setup-category__header { background:#fff2d7; }
.pay-setup-category__body { display:grid; grid-template-columns:1fr; gap:10px; padding:0; }
.pay-setup-category__list { display:grid; grid-template-columns:1fr; gap:10px; padding:0; margin:0; list-style:none; }
.pay-setup-category__list li { position:relative; display:flex; align-items:center; gap:9px; min-height:52px; padding:10px 12px 10px 30px; margin:0; border:1px solid #dbe5ec; border-radius:9px; background:#fff; color:#173f63; font-size:14px; line-height:1.35; }
.pay-setup-category__list li::before { content:""; position:absolute; left:12px; width:9px; height:9px; border-radius:50%; background:#16847c; }
.pay-setup-category__list li.is-configured { border-color:#e4a5a1; background:#fdeceb; }
.pay-setup-category__list li.is-configured::before { background:#b64b45; }
.pay-setup-category__list button { width:100%; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.pay-setup-category__list button:hover,.pay-setup-category__list button:focus { color:#087f7b; outline:0; text-decoration:underline; }
.pay-setup-category__list button[aria-pressed="true"] { color:#087f7b; font-weight:700; }
.pay-setup-popout[hidden] { display:none!important; }
.pay-setup-popout { position:fixed; z-index:1200; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; }
.pay-setup-popout__backdrop { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:rgba(15,35,53,.56); cursor:default; }
.pay-setup-popout__panel { position:relative; z-index:1; width:min(780px,100%); max-height:calc(100vh - 48px); overflow:auto; border:1px solid #cbd9e3; border-radius:16px; background:#fff; box-shadow:0 24px 70px rgba(15,35,53,.3); }
.pay-setup-popout__header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 20px; border-bottom:1px solid #d8e4ec; background:#f4f9fc; }
.pay-setup-popout__header h3 { margin:0; color:#173f63; font-size:20px; font-weight:700; }
.pay-setup-popout__close { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:1px solid #bfd0de; border-radius:50%; background:#fff; color:#173f63; font-size:25px; line-height:1; cursor:pointer; }
.pay-setup-popout__close:hover,.pay-setup-popout__close:focus { border-color:#16847c; color:#087f7b; outline:0; }
.pay-setup-category-editor { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; width:100%; padding:20px; background:#fff; }
.pay-setup-category-editor > [data-field-name="regular_earnings_expected"],
.pay-setup-category-editor > [data-field-name="regular_deductions_expected"],
.pay-setup-category-editor > [data-field-name="regular_earnings"],
.pay-setup-category-editor > [data-field-name="regular_deductions"] { display:none!important; }
.pay-setup-category-editor > .regular-inputs-setup-heading,
.pay-setup-category-editor > .regular-deduction-card-heading,
.pay-setup-category-editor > .regular-inputs-sync-note { grid-column:1 / -1; }
.pay-setup-category-editor > .employee-field--employer_covers_employee_uif { grid-column:1 / -1; padding:14px; box-shadow:none; }
.pay-setup-popout__footer { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px 18px; border-top:1px solid #e1e9ef; background:#f8fbfd; }
.pay-setup-popout__footer[hidden] { display:none!important; }
.pay-setup-accommodation { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:8px!important; }
.pay-setup-accommodation h3 { margin:0 0 4px; color:#123f66; font-size:20px; }
.pay-setup-accommodation p { margin:0; color:#587086; }
.pay-setup-accommodation__fields { padding:0!important; }
.pay-setup-accommodation__fields > .accommodation-setup-note,
.pay-setup-accommodation__fields > .regular-inputs-sync-note { grid-column:1 / -1; margin:0; }
.accommodation-popout[hidden] { display:none!important; }
.accommodation-popout { position:fixed; z-index:1250; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; }
.accommodation-popout__backdrop { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:rgba(15,35,53,.58); cursor:default; }
.accommodation-popout__panel { position:relative; z-index:1; width:min(920px,100%); max-height:calc(100vh - 48px); overflow:auto; border:1px solid #c4d5e2; border-radius:18px; background:#fff; box-shadow:0 26px 75px rgba(15,35,53,.34); }
.accommodation-popout__header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:20px 24px; border-bottom:1px solid #d8e4ec; background:#eef7fb; }
.accommodation-popout__header h2 { margin:0; color:#123f66; font-size:26px; line-height:1.2; }
.accommodation-popout__header p { margin:5px 0 0; color:#4c667c; }
.accommodation-popout__close { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border:1px solid #b8ccda; border-radius:50%; background:#fff; color:#123f66; font-size:26px; line-height:1; cursor:pointer; }
.accommodation-popout__close:hover,.accommodation-popout__close:focus { border-color:#087f7b; color:#087f7b; outline:0; box-shadow:0 0 0 3px rgba(8,127,123,.12); }
.accommodation-popout__body { padding:22px 24px 24px; }
.accommodation-popout__body [data-accommodation-note-host] { margin-bottom:18px; }
.accommodation-popout__body .accommodation-setup-note { margin:0; }
.accommodation-popout__body .accommodation-explainer { margin:0; }
.accommodation-provided-choice { margin:0 0 22px; padding:18px 20px; border:1px solid #cfe0ea; border-radius:12px; background:#f8fbfd; }
.accommodation-provided-choice legend { width:auto; max-width:100%; margin:0 0 13px; padding:0; color:#123f66; font-size:18px; font-weight:700; line-height:1.4; }
.accommodation-provided-choice__options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.accommodation-provided-choice__options button { min-height:50px; padding:11px 16px; border:2px solid #c6d6e0; border-radius:10px; background:#fff; color:#123f66; font:inherit; font-weight:700; cursor:pointer; }
.accommodation-provided-choice__options button:hover,.accommodation-provided-choice__options button:focus { border-color:#72aaa6; outline:0; }
.accommodation-provided-choice__options button[aria-pressed="true"] { border-color:#087f7b; background:#e3f3f1; box-shadow:0 0 0 3px rgba(8,127,123,.1); color:#075f5d; }
.accommodation-popout__section-title { margin:0 0 16px; color:#123f66; font-size:20px; }
.accommodation-popout [data-accommodation-methods][hidden] { display:none!important; }
.accommodation-popout .pay-setup-accommodation__fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 22px; }
.accommodation-popout .pay-setup-accommodation__fields > .employee-field--accommodation_support_type,
.accommodation-popout .pay-setup-accommodation__fields > .employee-field--accommodation_private_rooms,
.accommodation-popout .pay-setup-accommodation__fields > .regular-inputs-sync-note { grid-column:1 / -1; }
.accommodation-live-summary { margin-top:22px; padding:18px 20px; border:1px solid #c9dfd1; border-left:5px solid #3f8d58; border-radius:12px; background:#f2f8f1; }
.accommodation-live-summary h3 { margin:0 0 12px; color:#123f66; font-size:19px; }
.accommodation-live-summary dl { margin:0; }
.accommodation-live-summary dl > div { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:8px 0; border-bottom:1px solid #d9e8dc; }
.accommodation-live-summary dl > div:last-child { border-bottom:0; }
.accommodation-live-summary dt { color:#435d70; }
.accommodation-live-summary dd { margin:0; color:#123f66; font-weight:700; text-align:right; }
.accommodation-live-summary p { margin:12px 0 0; color:#587086; font-size:14px; line-height:1.5; }
.accommodation-popout__footer { position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:10px; padding:15px 24px 18px; border-top:1px solid #dbe6ed; background:#f8fbfd; }
.pay-setup-special-work-heading { grid-column:1 / -1; padding:18px 20px; margin:12px 0 0; border:1px solid #d8e4ec; border-left:5px solid #16847c; border-radius:10px; background:#f4f9fc; }
.pay-setup-special-work-heading h3 { margin:0 0 4px; color:#173f63; font-size:19px; font-weight:700; }
.pay-setup-special-work-heading p { margin:0; color:#52697d; font-size:14px; line-height:1.45; }
@media (max-width:720px) { .pay-setup-popout,.accommodation-popout { padding:12px; } .pay-setup-category-editor,.accommodation-popout .pay-setup-accommodation__fields { grid-template-columns:1fr; } .pay-setup-accommodation { align-items:flex-start; flex-direction:column; } .pay-setup-accommodation .btn { width:100%; } .accommodation-popout__header,.accommodation-popout__body { padding-left:18px; padding-right:18px; } .accommodation-provided-choice__options { grid-template-columns:1fr; } .accommodation-live-summary dl > div { display:block; } .accommodation-live-summary dd { margin-top:3px; text-align:left; } }
.employee-field[data-field-name^="regular_authority_confirmed_"],.employee-field[data-field-name^="regular_supporting_document_recorded_"] { grid-column:1 / -1; padding:11px 14px; border:1px solid #e2e8ee; border-radius:7px; background:#fff; }
.standby-explainer { grid-column:1 / -1; box-sizing:border-box; width:100%; overflow:hidden; margin:4px 0 0; border:1px solid #cdb8e2; border-left:3px solid #a77abb; border-radius:6px; background:#f6f2fb; box-shadow:none; }
.standby-explainer > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px; padding:15px 20px; cursor:pointer; list-style:none; border-left:0; background:#f6f2fb!important; color:#55386f; font-size:22px!important; font-weight:800; line-height:1.3; }
.standby-explainer > summary::-webkit-details-marker { display:none; }
.standby-explainer > summary::after { content:"+"; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:1px solid #cdb8e2; border-radius:50%; background:#fff; color:#55386f; font-size:18px; line-height:1; }
.standby-explainer[open] > summary::after { content:"\2212"; }
.standby-explainer__content { padding:14px 20px 18px; border-top:1px solid #cdb8e2; background:#f6f2fb; color:#55386f; font-size:12px; line-height:1.5; }
.standby-explainer__content h3 { margin:16px 0 8px; color:#55386f; font-size:13px; font-weight:700; line-height:1.35; }
.standby-explainer__content h3:first-child { margin-top:0; }
.standby-explainer__content p { margin:0 0 12px; }
.standby-explainer__content ul { padding:0; margin:0 0 18px; list-style:none; }
.standby-explainer__content li { margin:6px 0; }
.standby-explainer__calculation { padding:11px 13px; border-radius:6px; background:#eee6f5; color:#55386f; text-align:center; }
.standby-explainer__remember { padding:11px 13px; border-left:4px solid #a77abb; background:#eee6f5; }
.standby-explainer__summary { margin-bottom:0!important; color:#55386f; }
.night-work-explainer__content { padding:14px 20px 18px; }
.night-work-explainer .night-work-overlap-note { grid-column:auto; box-sizing:border-box; width:100%; padding:0; margin:0; border:0; border-radius:0; background:transparent; color:inherit; font-size:inherit; line-height:inherit; }
.night-work-explainer .night-work-overlap-note > p:first-child { margin:0 0 8px; color:#55386f; font-size:13px; font-weight:700; line-height:1.35; }
.night-work-explainer .night-work-overlap-note__summary { margin-bottom:0!important; color:#55386f; }
.field-errors ul { padding-left:18px; margin:7px 0 0; color:#a52922; }
.employee-field.has-error input,.employee-field.has-error select,.employee-field.has-error textarea { border-color:#c13b32; }
.employee-step-actions { display:flex; justify-content:space-between; gap:12px; padding-top:24px; margin-top:24px; border-top:1px solid #e5edf2; }
.employee-step-actions .btn-primary { margin-left:auto; }
.employee-review { max-height:430px; padding:18px; margin-bottom:22px; overflow:auto; background:#f7fafc; border:1px solid #dce6ed; border-radius:8px; }
.employee-review__list { display:grid; grid-template-columns:minmax(180px,1fr) minmax(220px,2fr); gap:0; margin:0; }
.employee-review__list dt,.employee-review__list dd { padding:9px 8px; margin:0; border-bottom:1px solid #e1e9ee; }
.employee-review__list dt { color:#526477; font-size:12px; text-transform:uppercase; }
.employee-review__list dd { overflow-wrap:anywhere; font-weight:600; }
.employee-review__empty { margin:0; color:#64748b; }

@media (max-width:900px) {
 .employee-edit-sections { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:520px) {
 .employee-edit-sections { grid-template-columns:1fr; }
}

@media (max-width:700px) {
 .employee-onboarding-card { padding:18px 14px; border-radius:8px; }
 .employee-fields-grid { grid-template-columns:1fr; }
 .employee-field--regular_earnings ul,.employee-field--regular_deductions ul { grid-template-columns:1fr; }
 .employee-field { grid-column:1!important; }
 .weekend-work-schedule__header { display:block; }
 .weekend-work-schedule__header p { margin-top:4px; }
 .employee-form-step__header h2 { font-size:21px; }
 .employee-review__list { grid-template-columns:1fr; }
 .employee-review__list dt { padding-bottom:2px; border-bottom:0; }
 .employee-review__list dd { padding-top:2px; }
 .employee-step-actions { flex-wrap:wrap; }
 .employee-step-actions .btn { flex:1 1 140px; }
 .leave-setup-eligibility { grid-template-columns:1fr; }
}

@media (max-width:520px) {
 .employee-salaries-table .table { display:table; width:560px; overflow:visible; table-layout:fixed; }
 .employee-salaries-table th,.employee-salaries-table td { overflow-wrap:anywhere; white-space:normal; }
 .employee-salaries-table th:last-child,.employee-salaries-table td:last-child { width:145px; }
}

/* One consistent navy treatment for every section and panel header. */
.regular-input-heading,
.payslip-summary-header,
.employee-profile-panel summary,
.monthly-checklist .dashboard-panel-heading,
.monthly-employees > .dashboard-panel-heading,
.leave-balances-panel > h3,
.planned-leave-heading,
.leave-calendar-heading,
.leave-records-card h3,
.benefit-option-card h2,
.payroll-review-heading,
.weekend-work-schedule__header,
.leave-rule-card__header,
.leave-rule-card--informational .leave-rule-card__header {
  background:#23496E!important;
  color:#fff!important;
}
.regular-input-heading h2,
.payslip-summary-header h2,
.monthly-checklist .dashboard-panel-heading h2,
.monthly-employees > .dashboard-panel-heading h2,
.planned-leave-heading h3,
.leave-calendar-heading h3,
.leave-records-card h3,
.benefit-option-card h2,
.payroll-review-heading h2,
.leave-rule-card__header h3,
.weekend-work-schedule__header h3 {
  color:#fff!important;
}
.payslip-summary-header select,
.payslip-summary-header button { background:#19324A!important; }

/* Sidebar company label. */
.app-brand__company { display:block; color:#fff; font-size:16px; font-weight:600; line-height:1.2; }

/* Dashboard and Employees are intentionally independent page components. */
.dashboard-overview { display:flex; flex-direction:column; gap:18px; }
.dashboard-summary-card { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:24px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 8px 22px rgba(25,50,74,.06); }
.dashboard-summary-card .panel-kicker { display:block; margin-bottom:5px; color:#52605B; font-size:12px; font-weight:700; text-transform:uppercase; }
.dashboard-summary-card h2 { margin:0; color:#23496E; font-size:24px; }
.dashboard-summary-card p { margin:6px 0 0; color:#52605B; }
.employees-page { display:flex; flex-direction:column; gap:18px; }
.employees-page .employee-status-toolbar { margin:0; }
@media (max-width:600px) { .dashboard-summary-card { align-items:flex-start; flex-direction:column; } }

/* Overview-only layout. These selectors intentionally do not target Employees. */
.dashboard-overview { gap:30px; color:#173F63; }
.dashboard-welcome-row { display:flex; align-items:flex-start; justify-content:space-between; gap:32px; padding:4px 2px 10px; }
.page-heading .dashboard-welcome-row h1.dashboard-welcome { margin:0; color:#173F63; font-size:32px; font-weight:700; letter-spacing:-.03em; line-height:1.2; }
.dashboard-welcome-row p { margin:8px 0 0; color:#52697D; font-size:16px; }
.dashboard-uif-reference { margin-top:8px; color:#52697D; font-size:15px; font-weight:600; white-space:nowrap; }
.dashboard-section-title { margin:0 0 16px; color:#173F63; font-size:22px; font-weight:700; letter-spacing:-.018em; }
.dashboard-glance-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.dashboard-glance-card { display:flex; min-height:188px; flex-direction:column; justify-content:space-between; gap:16px; padding:26px 24px 22px; border:1px solid rgba(23,63,99,.10); border-radius:16px; box-shadow:0 4px 14px rgba(23,63,99,.05); color:#173F63; text-decoration:none; }
.dashboard-glance-card--employees { background:#F0F8F7; }.dashboard-glance-card--payroll { background:#F2F7FC; }.dashboard-glance-card--uif { background:#F2F7EE; }.dashboard-glance-card--gross { background:#F6F2FB; }
.dashboard-card-intro { display:flex; align-items:center; gap:17px; }.dashboard-card-intro>div { display:flex; min-width:0; flex-direction:column; gap:6px; }
.dashboard-icon-tile { display:inline-flex; width:52px; height:52px; flex:0 0 52px; align-items:center; justify-content:center; border-radius:16px; }.dashboard-icon-tile svg,.dashboard-action-icon svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.dashboard-icon-tile--teal { background:#E5F3F1; color:#087F7B; }.dashboard-icon-tile--blue { background:#EAF3FB; color:#2676B8; }.dashboard-icon-tile--green { background:#EDF5E8; color:#3B824B; }.dashboard-icon-tile--purple { background:#F1ECF8; color:#6550A5; }.dashboard-icon-tile--gold { background:#FBF2DF; color:#986515; }.dashboard-icon-tile--tip { width:40px; height:40px; flex-basis:40px; border-radius:14px; background:#E5F3F1; color:#087F7B; }.dashboard-icon-tile--tip svg { width:22px; height:22px; }
.dashboard-card-label { color:#52697D; font-size:15px; font-weight:500; }.dashboard-glance-card strong { color:#173F63; font-size:22px; font-weight:700; line-height:1.2; }.dashboard-glance-card small { color:#52697D; font-size:14px; font-weight:500; }.dashboard-glance-card>a,.dashboard-glance-card>small { margin-top:auto; }.dashboard-glance-card>a { color:#087F7B; font-size:15px; font-weight:700; }.dashboard-glance-card>a span { margin-left:4px; font-size:21px; vertical-align:-1px; }.dashboard-glance-card--uif:hover,.dashboard-glance-card--uif:focus { border-color:rgba(8,127,123,.35); color:#173F63; text-decoration:none; }.dashboard-status-check { color:#26834A; }
.dashboard-actions-panel { padding:24px; border:1px solid rgba(23,63,99,.10); border-radius:16px; background:#fff; box-shadow:0 4px 14px rgba(23,63,99,.05); }.dashboard-action-list { display:flex; flex-direction:column; gap:12px; }.dashboard-action { display:flex; align-items:center; gap:20px; padding:22px 24px; border-left:4px solid #087F7B; border-radius:12px; background:#F1F8F7; }.dashboard-action--warning { border-left-color:#B77A13; background:#FFF8E8; }.dashboard-action--danger { border-left-color:#B64444; background:#FFF4F3; }.dashboard-action--info { border-left-color:#087F7B; }.dashboard-action-icon { display:inline-flex; width:48px; height:48px; flex:0 0 48px; align-items:center; justify-content:center; border-radius:50%; background:#E5F3F1; color:#087F7B; }.dashboard-action--warning .dashboard-action-icon { background:#FFF0C8; color:#9D690F; }.dashboard-action--danger .dashboard-action-icon { background:#FBE7E5; color:#B64444; }.dashboard-action-copy { min-width:0; }.dashboard-action h3 { margin:0; color:#087F7B; font-size:18px; font-weight:700; }.dashboard-action p { margin:5px 0 0; color:#52697D; font-size:15px; }.dashboard-run-button { margin-left:auto; padding:12px 23px; border-radius:10px; background:#087F7B; color:#fff!important; font-size:15px; font-weight:700; text-align:center; text-decoration:none!important; white-space:nowrap; }.dashboard-run-button:hover,.dashboard-run-button:focus { background:#066C69; color:#fff; }.dashboard-caught-up { display:flex; align-items:center; gap:15px; padding:20px 22px; border-left:4px solid #26834A; border-radius:12px; background:#F1F7F0; color:#355238; }.dashboard-caught-up div { display:flex; flex-direction:column; gap:3px; }.dashboard-caught-up strong { font-size:17px; }
.dashboard-quick-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.dashboard-quick-actions a { display:flex; min-height:114px; align-items:center; gap:16px; padding:20px 18px; border:1px solid rgba(23,63,99,.10); border-radius:14px; background:#fff; box-shadow:0 3px 12px rgba(23,63,99,.05); color:#173F63; text-decoration:none; transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; }.dashboard-quick-actions a:hover,.dashboard-quick-actions a:focus { border-color:rgba(8,127,123,.35); box-shadow:0 7px 17px rgba(23,63,99,.10); color:#173F63; text-decoration:none; transform:translateY(-1px); }.dashboard-quick-copy { display:flex; min-width:0; flex:1; flex-direction:column; gap:6px; }.dashboard-quick-actions strong { color:#173F63; font-size:17px; font-weight:700; }.dashboard-quick-actions .dashboard-quick-copy>span { color:#52697D; font-size:14px; }.dashboard-quick-actions b { color:#087F7B; font-size:25px; font-weight:400; }.dashboard-tip { display:flex; align-items:center; gap:14px; padding:12px 18px; border:1px solid #D7EBE8; border-radius:14px; background:#F0F8F8; color:#52697D; }.dashboard-tip p { margin:0; font-size:15px; }.dashboard-tip strong { color:#087F7B; }
@media (max-width:1050px) { .dashboard-glance-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .dashboard-welcome-row,.dashboard-action { align-items:flex-start; flex-direction:column; }.dashboard-uif-reference { white-space:normal; }.dashboard-action-copy { width:100%; }.dashboard-run-button { margin-left:0; }.dashboard-quick-actions { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:540px) { .page-heading .dashboard-welcome-row h1.dashboard-welcome { font-size:28px; }.dashboard-glance-grid,.dashboard-quick-actions { grid-template-columns:1fr; }.dashboard-glance-card { min-height:160px; }.dashboard-actions-panel { padding:18px; } }

/* Employees-only companion layout. It reuses Overview colours, icon tiles,
   buttons and card treatment without affecting the separate Dashboard route. */
.employees-redesign { gap:28px; }
.employees-heading-row { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; }.employees-heading-row h1 { margin:0; color:#173F63; font-size:32px; font-weight:700; letter-spacing:-.03em; line-height:1.2; }.employees-heading-row p { margin:8px 0 0; color:#52697D; font-size:16px; }.employees-uif-reference { margin-top:7px; color:#52697D; font-size:15px; font-weight:600; white-space:nowrap; }
.employees-payroll-month { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0; padding:24px; border:1px solid rgba(23,63,99,.10); border-radius:16px; background:#fff; box-shadow:0 4px 14px rgba(23,63,99,.05); }.employees-payroll-month__intro { display:flex; align-items:flex-start; gap:17px; }.employees-eyebrow,.employees-step-label { display:block; margin:0 0 5px; color:#52697D; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.employees-payroll-month h2 { margin:0 0 9px; color:#173F63; font-size:23px; font-weight:700; letter-spacing:-.02em; }.employees-payroll-month strong { color:#173F63; font-size:16px; }.employees-payroll-month p { margin:4px 0 0; color:#52697D; font-size:14px; }.employees-payroll-month form { display:flex; align-items:center; gap:10px; margin:0; padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; }.employees-payroll-month select { min-width:176px; height:42px; padding:0 32px 0 12px; border:1px solid rgba(23,63,99,.18)!important; border-radius:9px!important; background:#fff; color:#173F63; font:inherit!important; }
.employees-section-title { margin:0 0 16px; color:#173F63; font-size:22px; font-weight:700; letter-spacing:-.018em; }.employees-workflow-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }.employees-workflow-card { position:relative; display:flex; min-height:246px; flex-direction:column; align-items:flex-start; gap:11px; padding:19px; border:1px solid rgba(23,63,99,.10); border-radius:15px; background:#fff; box-shadow:0 3px 12px rgba(23,63,99,.05); color:#52697D; text-decoration:none; transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; }.employees-workflow-card:hover,.employees-workflow-card:focus { border-color:rgba(8,127,123,.38); box-shadow:0 7px 17px rgba(23,63,99,.10); color:#52697D; text-decoration:none; transform:translateY(-1px); }.employees-workflow-card.is-current { border-color:rgba(8,127,123,.36); background:#F7FCFB; }.employees-workflow-card.is-complete { border-color:rgba(38,131,74,.25); background:#FAFDF9; }.employees-workflow-card.is-locked { background:#FBFCFD; }.employees-workflow-card strong { color:#173F63; font-size:16px; font-weight:700; line-height:1.25; }.employees-workflow-card>span:not(.employees-step-label):not(.dashboard-icon-tile) { color:#52697D; font-size:13px; line-height:1.45; }.employees-workflow-card b,.employees-workflow-card em { margin-top:auto; color:#087F7B; font-size:21px; font-style:normal; font-weight:500; }.employees-workflow-card em { padding:4px 9px; border-radius:999px; background:#E5F4EA; color:#218246; font-size:12px; font-weight:700; }
.employees-redesign .employee-status-toolbar { align-items:center; gap:12px; padding:0; }.employees-redesign .employee-status-filter { gap:10px; }.employees-redesign .employee-status-filter label { color:#52697D; font-size:14px; font-weight:600; }.employees-redesign .employee-status-filter select { min-width:120px; height:40px; border:1px solid rgba(23,63,99,.18)!important; border-radius:9px!important; color:#173F63; background:#fff; }.dashboard-run-button--small { min-height:36px; padding:8px 13px; border-radius:8px; font-size:13px; }
.employees-list-card { overflow:hidden; margin:0; border:1px solid rgba(23,63,99,.10); border-radius:16px; background:#fff; box-shadow:0 4px 14px rgba(23,63,99,.05); }.employees-list-card>header { padding:21px 24px 10px; background:#fff; }.employees-list-card>header h2 { margin:0; color:#173F63; font-size:22px; font-weight:700; }.employees-list-card .monthly-employee-row { gap:24px; padding:20px 24px; border-bottom:1px solid rgba(23,63,99,.10); }.employees-list-card .monthly-employee-row:last-of-type { border-bottom:0; }.employees-list-card .monthly-employee-main h3 { margin:7px 0; font-size:18px; }.employees-list-card .monthly-employee-main h3 a { color:#173F63; text-decoration:none; }.employees-list-card .monthly-employee-main h3 a:hover,.employees-list-card .monthly-employee-main h3 a:focus { color:#087F7B; text-decoration:none; }.employees-list-card .monthly-employee-main p { gap:12px; color:#52697D; font-size:14px; }.employees-list-card .monthly-employee-main p i { width:1px; height:16px; margin:1px 3px; background:rgba(23,63,99,.18); }.employees-list-card .employee-ready-status { padding:4px 10px; background:#E5F4EA; color:#218246; font-size:12px; font-weight:700; }.employees-list-card .employee-ready-status.needs-information { background:#FFF2D7; color:#8A5A00; }.employees-list-card .monthly-employee-main .employee-missing-details { color:#8A5A00; }.employees-list-card .monthly-employee-actions { gap:9px; }.employees-list-card .empty-state { padding:36px 24px; }.employees-tip { margin-top:0; }
@media (max-width:1180px) { .employees-workflow-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:800px) { .employees-payroll-month { align-items:flex-start; flex-direction:column; }.employees-payroll-month form { width:100%; }.employees-workflow-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.employees-uif-reference { white-space:normal; }.employees-list-card .monthly-employee-row { grid-template-columns:1fr; }.employees-list-card .monthly-employee-actions { justify-content:flex-start; } }
@media (max-width:540px) { .employees-heading-row { flex-direction:column; }.employees-heading-row h1 { font-size:28px; }.employees-payroll-month { padding:19px; }.employees-payroll-month form { align-items:stretch; flex-direction:column; }.employees-payroll-month select,.employees-payroll-month .dashboard-run-button { width:100%; }.employees-workflow-grid { grid-template-columns:1fr; }.employees-workflow-card { min-height:210px; }.employees-list-card>header,.employees-list-card .monthly-employee-row { padding-left:18px; padding-right:18px; } }

/* Shared visual harmonisation for payroll, employee, leave, reports and forms.
   Overview and Employees remain the reference components. */
.page-actions { margin-bottom:22px; }
.page-heading:not(:has(.dashboard-welcome-row)):not(:has(.employees-heading-row)) h1 { color:#173F63; font-size:32px; font-weight:700; letter-spacing:-.03em; }
.page-heading:not(:has(.dashboard-welcome-row)):not(:has(.employees-heading-row)) p { color:#52697D; }
.card,.form-card,.report-result,.planned-leave-card,.leave-calendar-card,.leave-records-card,.leave-balances-panel,.employee-profile-panel,.documentation-upload-card,.documentation-list-card { border:1px solid rgba(23,63,99,.10); border-radius:14px; background:#fff; box-shadow:0 3px 12px rgba(23,63,99,.05); }
.form-card { padding:24px; }.form-card h2,.reports-intro h2,.report-result-heading h2,.leave-activity-heading h2 { color:#173F63; font-weight:700; }
.alert { border-radius:12px; border-width:1px; box-shadow:none; }.alert-info { color:#195a73; background:#F2F7FC; border-color:#D8E8F6; }.alert-warning { color:#8A5A00; background:#FFF8E8; border-color:#F1DEB2; }.alert-danger { color:#A73E36; background:#FFF3F2; border-color:#F0D0CD; }.alert-success { color:#218246; background:#EAF6ED; border-color:#CBE7D2; }
.employee-page-tabs { gap:3px; margin-bottom:24px; border-bottom:1px solid rgba(23,63,99,.12); }.employee-page-tabs a,.employee-page-tabs span { padding:10px 14px; color:#52697D; border-bottom-width:3px; font-size:14px; }.employee-page-tabs a:hover,.employee-page-tabs a:focus { color:#173F63; background:#F2F7FC; }.employee-page-tabs a.is-active { color:#087F7B; border-bottom-color:#087F7B; }
.employee-profile-panel { overflow:hidden; }.employee-profile-panel summary { padding:16px 19px; color:#173F63; background:#F2F7FC; font-weight:700; }.employee-profile-panel .table-responsive { padding:0 19px 15px; }
.employee-input-panel { overflow:hidden; border:1px solid rgba(23,63,99,.10); border-radius:14px; background:#fff; box-shadow:0 3px 12px rgba(23,63,99,.05); }.employee-input-panel .regular-input-heading,.regular-input-heading { min-height:56px; margin:0; padding:12px 16px; color:#173F63!important; background:#F0F8F7!important; border-bottom:1px solid rgba(23,63,99,.10); }.regular-input-heading h2,.employee-input-panel .regular-input-heading h2,.employee-input-panel .regular-input-heading h2 span { color:#173F63!important; font-size:16px; font-weight:700; }.regular-input-add { color:#fff!important; background:#087F7B; border-color:#087F7B; border-radius:9px; }.regular-input-add:hover,.regular-input-add:focus { background:#066C69; border-color:#066C69; }.regular-input-add span { color:#087F7B; }.employee-input-row { border-bottom-color:rgba(23,63,99,.10); }.regular-input-edit { color:#087F7B; }
.regular-input-actions { display:flex; align-items:center; gap:12px; }.regular-input-heading .regular-input-edit { color:#087F7B; font-size:14px; font-weight:600; }.regular-input-heading .regular-input-edit:hover,.regular-input-heading .regular-input-edit:focus { color:#066C69; text-decoration:underline; }
.end-service-severance { padding:18px; margin:18px 0; border:1px solid rgba(23,63,99,.10); border-radius:12px; background:#F8FBFC; }.end-service-severance h3 { margin:0 0 7px; color:#173F63; font-size:17px; font-weight:700; }.end-service-severance>p { margin:0 0 14px; color:#52697D; }
.end-service-severance-warning { padding:12px 14px; margin-top:14px; color:#9B2924; border:1px solid #E6B7B3; border-left:4px solid #C13B32; border-radius:8px; background:#FFF1F0; font-size:13px; line-height:1.45; }.end-service-severance-warning strong { display:block; margin-bottom:3px; color:#9B2924; }.end-service-severance-warning .errorlist { padding-left:18px; margin:0; color:inherit; }
.payslip-summary-card { max-width:100%; overflow:hidden; margin:0; border:1px solid rgba(23,63,99,.10); border-radius:14px; background:#fff; box-shadow:0 3px 12px rgba(23,63,99,.05); }.payslip-summary-header { padding:15px 18px; color:#173F63; background:#fff; border-bottom:1px solid rgba(23,63,99,.10); }.payslip-summary-header h2 { color:#173F63!important; font-size:18px; }.payslip-summary-header select,.payslip-summary-header button { color:#173F63!important; background:#fff!important; border-color:#CAD8DC!important; border-radius:9px; }.payslip-summary-section { border-bottom-color:rgba(23,63,99,.10); }.payslip-summary-net { color:#fff; background:#087F7B; }.payslip-summary-actions-even { background:#fff; border-top:1px solid rgba(23,63,99,.10); }
.leave-activity-page,.reports-page { max-width:1180px; }.leave-activity-heading,.reports-intro { margin-bottom:20px; }.leave-activity-heading h2,.reports-intro h2,.report-result-heading h2 { font-size:22px; }.leave-activity-heading p,.reports-intro p,.report-result-heading p { color:#52697D; }.leave-activity-filters { padding:18px!important; margin-bottom:18px; border:1px solid rgba(23,63,99,.10)!important; border-radius:14px!important; background:#fff!important; box-shadow:0 3px 12px rgba(23,63,99,.05)!important; }.leave-activity-filters label { color:#173F63; font-size:12px; }.planned-leave-card { border-radius:14px; }.planned-leave-heading,.leave-calendar-heading { padding:16px 18px; background:#F2F7FC; border-bottom:1px solid rgba(23,63,99,.10); }.leave-balances-panel>h3,.leave-records-card h3 { color:#173F63!important; background:#F2F7FC!important; }
.report-result { padding:22px; }.report-balance-grid>div { border:1px solid rgba(23,63,99,.10); border-radius:12px; background:#F8FBFC; }.report-history-table thead th,.planned-leave-table thead th { color:#173F63; background:#F2F7FC; }
.reports-hub { max-width:1180px; }
.report-group { margin:0 0 30px; }
.report-group h2,.reports-open-heading h2 { margin:0 0 14px; color:#19324A; font-size:22px; font-weight:700; }
.report-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.report-card { display:flex; min-height:128px; align-items:center; gap:15px; padding:18px; border:1px solid rgba(23,63,99,.12); border-radius:14px; background:#fff; box-shadow:0 3px 12px rgba(23,63,99,.05); color:#2F3437; text-decoration:none; transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.report-card:hover,.report-card:focus { border-color:rgba(0,109,111,.44); box-shadow:0 7px 18px rgba(23,63,99,.10); color:#2F3437; text-decoration:none; transform:translateY(-1px); }
.report-card__icon { display:inline-flex; width:48px; height:48px; flex:0 0 48px; align-items:center; justify-content:center; border-radius:14px; background:#E5F3F1; color:#006D6F; font-size:24px; font-weight:700; }
.report-card:nth-child(3n+2) .report-card__icon { background:#EAF3FB; color:#2676B8; }.report-card:nth-child(3n) .report-card__icon { background:#F1ECF8; color:#6550A5; }
.report-card__copy { display:grid; gap:5px; min-width:0; }.report-card__copy strong { color:#19324A; font-size:16px; font-weight:700; }.report-card__copy span { color:#52697D; font-size:13px; line-height:1.4; }.report-card>b { margin-left:auto; color:#006D6F; font-size:22px; font-weight:500; }
.reports-open-heading { display:flex; align-items:center; gap:14px; margin:0 0 18px; }.reports-open-heading h2 { margin:0; }
.report-data-note { margin:0 0 18px; padding:13px 15px; border:1px solid #CFE2E4; border-left:3px solid #006D6F; border-radius:8px; background:#F1F9F8; color:#365967; font-size:14px; line-height:1.5; }.reports-empty { color:#52697D; text-align:center; }.reports-empty .btn { margin-top:6px; }

/* Employee Payslip Preview: deliberately light, with the primary action teal for net pay. */
.employee-live-preview .payslip-summary-header { color:#173F63!important; background:#fff!important; border-radius:14px 14px 0 0; }
.employee-live-preview .payslip-summary-header h2 { color:#173F63!important; }
.employee-live-preview .payslip-summary-header small { color:#52697D!important; }
.employee-live-preview .payslip-summary-net { color:#fff!important; background:#087F7B!important; }
.workflow-steps { gap:4px; margin-bottom:22px; overflow:hidden; border-radius:12px; }.workflow-steps li { padding:13px; color:#52697D; background:#F2F7FC; border:0; font-size:13px; }.workflow-steps li.is-complete { color:#fff; background:#087F7B; }
.payroll-review-tools { padding:0; margin-bottom:20px; }.payroll-review-totals { gap:0; overflow:hidden; border:1px solid rgba(23,63,99,.10); border-radius:14px; box-shadow:0 3px 12px rgba(23,63,99,.05); }.payroll-review-totals>div { padding:19px 21px; border-right-color:rgba(23,63,99,.10); }.payroll-review-totals span { color:#52697D; }.payroll-review-totals strong { color:#173F63; }.payroll-review-employees { border:1px solid rgba(23,63,99,.10); border-radius:14px; box-shadow:0 3px 12px rgba(23,63,99,.05); }.payroll-review-heading { padding:18px 21px; color:#fff!important; background:#fff; border-bottom:1px solid rgba(23,63,99,.10); }.payroll-review-heading h2 { color:#fff!important; }.payroll-review-heading small { color:#fff!important; opacity:.9; }.payroll-review-heading>span { color:#218246; background:#E5F4EA; }.payroll-review-employee { border-bottom-color:rgba(23,63,99,.10); }.payroll-review-employee dl { background:#F8FBFC; border-color:rgba(23,63,99,.10); border-radius:10px; }.payroll-review-employee dl>div { border-right-color:rgba(23,63,99,.10); }.payroll-review-employee dt { color:#52697D; }.payroll-review-finalise { border:1px solid rgba(23,63,99,.10); border-left:4px solid #087F7B; border-radius:14px; box-shadow:0 3px 12px rgba(23,63,99,.05); }.payroll-review-finalise span { color:#52697D; }
.documentation-heading h2,.documentation-list-card h2 { color:#173F63; }.documentation-upload-card,.documentation-list-card { padding:22px; }.documentation-list li { border-bottom-color:rgba(23,63,99,.10); }
@media (max-width:700px) { .employee-input-panel .regular-input-heading,.regular-input-heading { min-height:50px; }.workflow-steps { grid-template-columns:1fr 1fr; }.payroll-review-heading { align-items:flex-start; }.report-balance-grid { grid-template-columns:1fr; } }

/* Employee Leave Setup follows the shared Overview and Employees card system. */
.payroll-delivery-panel,.payroll-password-panel { margin:22px 0; overflow:hidden; border:1px solid rgba(23,63,99,.12); border-radius:14px; background:#fff; box-shadow:0 3px 12px rgba(23,63,99,.05); }
.payroll-delivery-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px 21px; color:#fff; background:#23496E; }
.payroll-delivery-heading h2 { margin:0 0 4px; color:#fff!important; }.payroll-delivery-heading p { margin:0; color:#fff; opacity:.88; }.payroll-delivery-heading>span { padding:5px 10px; color:#17603e; background:#e3f5ea; border-radius:999px; font-weight:700; white-space:nowrap; }
.payroll-delivery-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:18px 21px; }.payroll-delivery-actions>.payroll-delivery-action-shell,.payroll-delivery-actions>form { flex:1 1 0; min-width:190px; }.payroll-delivery-actions form { margin:0; }.payroll-delivery-action-shell { box-sizing:border-box; margin:0; padding:18px; background:rgba(255,255,255,.9); border:1px solid rgba(221,227,236,.95); border-radius:8px; box-shadow:0 5px 16px rgba(23,32,51,.06); }.payroll-delivery-action-shell>a,.payroll-delivery-actions button { display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:100%; min-height:46px; padding:9px 14px; border-width:1px!important; border-radius:9px; box-shadow:none; text-align:center; }.payroll-delivery-download { color:#173F63!important; background:#EAF3FB!important; border-color:#CFE1EF!important; }.payroll-delivery-email { color:#173F63!important; background:#E5F3F1!important; border-color:#CAE3DF!important; }.payroll-delivery-report { color:#173F63!important; background:#EDF5E8!important; border-color:#D7E8D1!important; }.payroll-delivery-panel .alert { margin:0 21px 18px; }.payroll-delivery-panel .table-responsive { padding:0 21px 18px; }
.payroll-password-panel { padding:20px 21px; border-left:4px solid #B7791F; background:#FFF8E7; }.payroll-password-panel h2 { margin-top:0; color:#7A4B00; }.payroll-password-panel code { font-size:15px; font-weight:700; letter-spacing:.5px; }
.delivery-state--sent { color:#17603e; font-weight:700; }.delivery-state--failed { color:#b42318; font-weight:700; }.delivery-state--not_sent { color:#52697D; }
.leave-setup-redesign { font-family:inherit; }
.leave-setup-redesign__eligibility { display:flex; align-items:flex-start; gap:15px; padding:18px 20px; margin:0 0 22px; background:#fff; border:1px solid rgba(23,63,99,.10); border-radius:14px; box-shadow:0 3px 12px rgba(23,63,99,.05); }
.leave-setup-redesign__eligibility .employee-field { flex:1; min-width:0; }
.leave-setup-redesign__eligibility .employee-field__label-row label { color:#173F63; font-size:16px; font-weight:700; }
.leave-setup-redesign__eligibility [id^="id_"] { display:flex; flex-wrap:wrap; gap:16px; }
.leave-eligibility-icon,.leave-rule-card__icon { display:inline-flex; flex:0 0 44px; width:44px; height:44px; align-items:center; justify-content:center; border-radius:12px; }
.leave-eligibility-icon { margin-top:1px; background:#E5F3F1; color:#173F63; }
.leave-eligibility-icon svg,.leave-rule-card__icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.leave-rule-card__icon,.leave-rule-card__icon svg { color:#173F63!important; stroke:#173F63!important; }
.leave-rule-card { margin:0 0 22px; overflow:hidden; background:#fff; border:1px solid rgba(23,63,99,.10); border-radius:14px; box-shadow:0 3px 12px rgba(23,63,99,.05); }
.leave-rule-card__header,.leave-rule-card--informational .leave-rule-card__header { display:flex; min-height:0; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; color:#173F63!important; background:#fff!important; border-bottom:1px solid rgba(23,63,99,.10); }
.leave-rule-card__title { display:flex; min-width:0; align-items:center; gap:13px; }
.leave-rule-card__header h3 { margin:0; color:#173F63!important; font-size:18px!important; font-weight:700; }
.leave-rule-card__header > span { display:inline-flex; flex:0 0 auto; align-items:center; min-height:30px; padding:5px 11px; border-radius:999px; font-size:12px; font-weight:700; }
.leave-rule-card__icon--annual { background:#E5F3F1; color:#173F63; }
.leave-rule-card[aria-labelledby="annual-leave-heading"] .leave-rule-card__header > span { color:#087F7B; background:#E5F3F1; }
.leave-rule-card__icon--sick { background:#EAF3FB; color:#173F63; }
.leave-rule-card[aria-labelledby="sick-leave-heading"] .leave-rule-card__header > span { color:#2676B8; background:#EAF3FB; }
.leave-rule-card__icon--family { background:#F1ECF8; color:#173F63; }
.leave-rule-card[aria-labelledby="family-leave-setup-heading"] .leave-rule-card__header > span { color:#6550A5; background:#F1ECF8; }
.leave-rule-card__icon--maternity { background:#F5F1E8; color:#173F63; }
.leave-rule-card[aria-labelledby="maternity-leave-heading"] .leave-rule-card__header > span { color:#8A6B2B; background:#F5F1E8; }
.leave-rule-card__question { padding:16px 20px 11px; background:#fff; border-bottom:1px solid rgba(23,63,99,.10); }
.leave-rule-card__question > label { color:#173F63; font-size:14px; font-weight:700; }
.leave-rule-card__question [id^="id_"] { display:flex; flex-wrap:wrap; gap:16px; }
.leave-rule-card__question-help { color:#52697D; font-size:13px; }
.leave-rule-card__recorded { display:flex; flex-direction:row; gap:10px; align-items:flex-start; padding:15px 17px; margin:16px 20px; color:#315568; background:#F0F8F7; border:1px solid #D7EBE8; border-radius:10px; font-size:13px; line-height:1.45; }
.leave-rule-card__recorded strong { display:block; color:#173F63; }
.leave-rule-card__recorded strong + span { display:block; margin-top:3px; }
.leave-info-icon { display:inline-flex; flex:0 0 20px; width:20px; height:20px; align-items:center; justify-content:center; border-radius:50%; color:#173F63; background:#EAF3FB; font-size:13px; font-weight:800; font-style:normal; line-height:1; }
.sick-balance-question__unknown { display:flex; gap:9px; align-items:flex-start; max-width:none; padding:12px 14px; margin:10px 0 2px; color:#315568; background:#F2F7FC; border:1px solid #D8E6F2; border-radius:10px; font-size:13px; line-height:1.45; }
.leave-rule-card__table-wrap { overflow-x:auto; }
.leave-rule-card__table { min-width:720px; }
.leave-rule-card__table th,.leave-rule-card__table td { padding:13px 14px; border-color:rgba(23,63,99,.10); color:#2F3437; font-size:13px; }
.leave-rule-card__table thead th { color:#173F63; background:#F6F8FA; border-bottom:1px solid rgba(23,63,99,.14); font-weight:700; }
.leave-rule-card__table tbody th { color:#173F63; background:#fff; font-size:13px; font-weight:700; }
.leave-rule-card__table td > span { color:#173F63; font-weight:600; }
.leave-rule-card__table small { color:#52697D; }
.leave-rule-card__table input[name="opening_leave_balance"],.leave-rule-card__table input[name="sick_leave_opening_balance"] { height:37px; border-color:#CAD5C1!important; border-radius:8px!important; }
.leave-rule-card__guidance { display:flex; gap:10px; align-items:flex-start; padding:15px 17px; margin:16px 20px 20px; color:#315568; background:#F2F7FC; border:1px solid #D8E6F2; border-radius:10px; font-size:13px; line-height:1.5; }
.leave-rule-card__guidance strong { color:#173F63; font-size:14px; }
.leave-rule-card__footnote { padding:13px 15px; color:#52697D; background:#F6F8FA; border:1px solid rgba(23,63,99,.10); border-radius:10px; }
@media (max-width:760px) { .leave-rule-card__header { align-items:flex-start; flex-direction:column; }.leave-setup-redesign__eligibility { padding:16px; }.leave-rule-card__recorded,.leave-rule-card__guidance { margin-left:14px; margin-right:14px; }.leave-rule-card__table th,.leave-rule-card__table td { padding:12px; } }

/* Employee advances reuses the Documentation page structure and shared card treatment. */
.advances-page { max-width:900px; }
.advances-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.advances-heading__actions { display:flex; align-items:center; gap:16px; flex:0 0 auto; }
.advances-heading .regular-input-add { flex:0 0 auto; margin-top:1px; }
.advances-heading .advances-status-filter { display:flex; align-items:center; gap:7px; margin:0; padding:0!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; }
.advances-status-filter label { margin:0; color:#52697D; font-size:14px; font-weight:600; }
.advances-status-filter select { min-width:112px; height:38px; padding:6px 24px 6px 4px; color:#173F63; background:transparent!important; border:0!important; border-bottom:1px solid #A3B18A!important; border-radius:0!important; font-size:14px; font-weight:700; box-shadow:none!important; }
.advances-status-filter select:focus { outline:0; border-bottom-color:#006D6F; box-shadow:0 2px 0 rgba(0,109,111,.18); }
.advances-card { padding:22px; }
.advance-record + .advance-record { margin-top:12px; }
.advance-record { border:1px solid rgba(23,63,99,.12); border-radius:10px; background:#fff; overflow:hidden; }
.advance-record[open] { border-color:rgba(0,109,111,.32); box-shadow:0 5px 16px rgba(23,63,99,.08); }
.advance-record__header { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:0; padding:17px 18px; cursor:pointer; list-style:none; }
.advance-record__header::-webkit-details-marker { display:none; }
.advance-record__header:hover { background:#F6FAF8; }
.advance-record__header:focus { outline:3px solid rgba(0,109,111,.22); outline-offset:-3px; }
.advance-record__title { display:grid; gap:4px; min-width:0; }
.advance-record__title strong { color:#173F63; font-size:17px; font-weight:700; }
.advance-record__title small { color:#64788C; font-size:13px; }
.advance-record__summary-status { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.advance-record__toggle { width:10px; height:10px; border-right:2px solid #173F63; border-bottom:2px solid #173F63; transform:rotate(45deg) translateY(-3px); transition:transform .16s ease; }
.advance-record[open] .advance-record__toggle { transform:rotate(225deg) translate(-2px,-2px); }
.advance-record__content { padding:0 18px 20px; border-top:1px solid rgba(23,63,99,.10); }
.advance-record__header h3,.advance-record__history h3 { margin:0; color:#173F63; font-size:17px; font-weight:700; }
.advance-status { display:inline-flex; align-items:center; min-height:28px; padding:4px 10px; color:#52697D; background:#F2F7FC; border-radius:999px; font-size:12px; font-weight:700; }
.advance-status.is-active { color:#218246; background:#E5F4EA; }
.advance-record__details { margin:0; }
.advance-record__details > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:baseline; padding:8px 0; }
.advance-record__details dt { color:#173F63; font-size:14px; font-weight:600; }
.advance-record__details dd { margin:0; color:#2F3437; font-size:14px; text-align:right; }
.advance-record__outstanding { padding-top:11px!important; margin-top:3px; border-top:1px solid rgba(23,63,99,.10); }
.advance-record__outstanding dt,.advance-record__outstanding dd { color:#173F63; font-size:15px; font-weight:700; }
.advance-deferred-note { margin:18px 0 0; padding:16px 18px; color:#51340B; background:#FFF0D0; border:1px solid #E1A332; border-left:6px solid #C98200; border-radius:8px; box-shadow:0 3px 10px rgba(120,76,0,.10); font-size:14px; line-height:1.55; }
.advance-deferred-note strong { display:block; margin-bottom:3px; color:#754500; font-size:15px; }
.advance-agreement { margin:18px 0 0; }
.advance-agreement a { display:inline-flex; align-items:center; gap:7px; color:#087F7B; font-weight:600; text-decoration:none; }
.advance-agreement a:hover,.advance-agreement a:focus { color:#066C69; text-decoration:underline; }
.advance-agreement svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.advance-record__actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.advance-record__history { padding-top:21px; margin-top:22px; border-top:1px solid rgba(23,63,99,.10); }
.advance-record__history h3 { margin-bottom:13px; }
.advance-record__history .table { margin:0; border-color:rgba(23,63,99,.10); border-radius:10px; }
.advance-record__history .table>thead>tr>th { color:#173F63; background:#F6F8FA; border-bottom-color:rgba(23,63,99,.10); }
.advance-record__history .table>tbody>tr>td { border-top-color:rgba(23,63,99,.10); }
@media (max-width:620px) { .advances-heading { flex-direction:column; }.advances-heading__actions { width:100%; align-items:stretch; flex-direction:column; }.advances-status-filter select,.advances-heading .regular-input-add { width:100%; }.advances-heading .regular-input-add { justify-content:center; }.advance-record__details > div { gap:12px; }.advances-card { padding:18px; } }

/* Employee payslip: keep the payroll inputs together and the live preview visible beside them. */
.employee-payroll-workspace {
    grid-template-columns: minmax(0, 1.85fr) minmax(330px, 1fr);
    gap: 22px;
}

.payroll-input-workspace {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    min-width: 0;
}

.payroll-input-workspace__heading {
    grid-column: 1 / -1;
    margin: 0 0 2px;
}

.payroll-input-workspace__heading h2 {
    margin: 0 0 5px;
    color: #173F63;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.payroll-input-workspace__heading h2 span {
    font-weight: 500;
}

.payroll-input-workspace__heading p {
    margin: 0;
    color: #52697D;
    font-size: 13px;
    line-height: 1.45;
}

.payroll-input-workspace .employer-contribution-panel {
    grid-column: 1 / -1;
}

.employee-live-preview {
    grid-column: 2;
    grid-row: 1;
}

.employer-contribution-helper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    color: #52697D;
    background: #F0F8F7;
    border-top: 1px solid #D7EBE8;
    font-size: 12px;
    line-height: 1.45;
}

.employer-contribution-helper span {
    display: inline-flex;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #087F7B;
    border-radius: 50%;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
}

.employee-live-preview .payslip-live-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #087F7B !important;
}

.employee-live-preview .payslip-live-status span {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #087F7B;
    border-radius: 50%;
}

@media (max-width: 1050px) {
    .employee-payroll-workspace {
        grid-template-columns: 1fr;
    }

    .employee-live-preview {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 700px) {
    .payroll-input-workspace {
        grid-template-columns: 1fr;
    }

    .payroll-input-workspace .employer-contribution-panel {
        grid-column: auto;
    }
}

/* Payslip note references are conventional footnotes: the number is a visual
   pointer only, while the saved note remains linked to its payslip line. */
.payslip-note-reference {
    margin-left: 1px;
    color: #006D6F;
    font-size: .7em;
    font-weight: 700;
    line-height: 0;
    vertical-align: super;
}

.payslip-summary-notes {
    padding: 14px 16px;
    border-top: 1px solid var(--line);
    color: #2F3437;
    font-size: 13px;
    line-height: 1.45;
}

.payslip-summary-notes > strong {
    display: block;
    margin-bottom: 7px;
    color: #173F63;
    font-size: 13px;
    text-transform: uppercase;
}

.payslip-summary-notes p {
    margin: 5px 0 0;
}

.payslip-summary-notes b {
    color: #173F63;
}

.form-card form .payslip-note-field {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 7px;
    max-width: 640px;
    margin: 0 0 18px;
}

.form-card form .payslip-note-field > label {
    display: block;
    align-self: flex-start;
    width: auto;
    margin: 0;
    color: #173F63;
    font-size: 14px;
    font-weight: 700;
}

.form-card form .payslip-note-field > select,
.form-card form .payslip-note-field > textarea {
    display: block;
    align-self: stretch;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 !important;
}

.payslip-note-field textarea {
    min-height: 118px;
    resize: vertical;
}

.payslip-note-field small {
    display: block;
    color: #52697D;
    font-size: 12px;
    line-height: 1.4;
}
.uif-test-banner{display:flex;gap:12px;align-items:center;justify-content:space-between;background:#fff4cc;border:1px solid #e4bd3c;border-left:6px solid #d89d00;border-radius:8px;padding:14px 18px;margin-bottom:20px}.uif-test-banner strong{color:#6b4900}.uif-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px}.uif-period-panel,.uif-card,.uif-empty{background:#fff;border:1px solid #dfe5ea;border-radius:10px;padding:18px}.uif-period-panel h2{font-size:18px;margin:0 0 14px}.uif-period-panel h3{font-size:13px;text-transform:uppercase;color:#62717e;margin:24px 0 10px}.uif-period-panel form{margin-bottom:8px}.uif-period-link{display:flex;flex-direction:column;padding:11px 12px;margin:0 -8px 5px;border-radius:7px;color:#22313d}.uif-period-link:hover,.uif-period-link:focus{text-decoration:none;background:#f3f7f9}.uif-period-link.is-active{background:#e6f5f3;border-left:4px solid #138b80}.uif-period-link span{font-size:12px;color:#60727e}.uif-title-row,.uif-card-heading,.uif-attempt{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.uif-title-row h2{margin:2px 0 18px}.uif-kicker{font-size:12px;font-weight:700;letter-spacing:.08em;color:#137d73}.uif-status{display:inline-block;padding:6px 10px;border-radius:999px;background:#edf2f5;font-size:12px;font-weight:700}.uif-status--ready,.uif-status--accepted_simulated{background:#dff4e8;color:#18653b}.uif-status--validation_failed,.uif-status--rejected_simulated{background:#fde6e5;color:#9a2923}.uif-status--warning_simulated{background:#fff0d6;color:#8a5700}.uif-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.uif-summary-grid>div{background:#f7f9fa;border:1px solid #e1e7eb;border-radius:8px;padding:14px}.uif-summary-grid span{display:block;color:#657581;font-size:12px}.uif-summary-grid strong{display:block;font-size:19px;margin-top:3px}.uif-card{margin-bottom:18px}.uif-card h3{margin-top:0}.uif-card-heading p{margin-bottom:0}.uif-findings{border-radius:7px;padding:12px 14px;margin-top:14px}.uif-findings strong,.uif-findings span{display:block}.uif-findings ul{margin:8px 0 0;padding-left:20px}.uif-findings--pass{background:#e9f7ef;color:#1b663d}.uif-findings--error{background:#fff0ef;color:#842e29}.uif-findings--warning{background:#fff7e6;color:#77500b}.uif-table small{display:block;color:#778690}.uif-confirm{display:block;font-weight:400;margin:14px 0}.uif-attempt{border-top:1px solid #e6ebee;padding:14px 0}.uif-attempt:first-of-type{border-top:0}.uif-attempt>div:first-child span,.uif-attempt>div:first-child small{display:block;color:#677784}.uif-attempt-actions{display:flex;gap:7px;flex-wrap:wrap}.uif-attempt-actions form{display:flex;gap:5px;flex-wrap:wrap}.uif-audit-list{padding-left:20px}.uif-audit-list li{padding:5px 0}.uif-audit-list span{display:block;color:#6c7a84;font-size:12px}@media(max-width:900px){.uif-layout{grid-template-columns:1fr}.uif-summary-grid{grid-template-columns:repeat(2,1fr)}.uif-test-banner,.uif-title-row,.uif-card-heading,.uif-attempt{flex-direction:column}.uif-attempt-actions{width:100%}}@media(max-width:520px){.uif-summary-grid{grid-template-columns:1fr}}
.uif-attempt{display:block}.uif-attempt-file{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.uif-attempt-file>span{color:#677784}.uif-attempt-file .btn{margin-left:auto}.uif-response-card{border:1px solid #cbd7df;border-left:6px solid #5b7485;border-radius:9px;padding:16px 18px;margin:16px 0;background:#f7fafb}.uif-response-card--success{background:#eaf7ef;border-color:#9acbad;border-left-color:#21834a}.uif-response-card--warning{background:#fff7e5;border-color:#e5c878;border-left-color:#cf8c00}.uif-response-card--danger{background:#fff0ef;border-color:#e6aaa7;border-left-color:#c63e37}.uif-response-label{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;color:#526a79}.uif-response-card h4{font-size:20px;margin:5px 0 14px}.uif-response-explanation{display:grid;grid-template-columns:1fr 1fr;gap:18px}.uif-response-explanation strong{display:block;margin-bottom:4px}.uif-response-explanation p{margin:0}.uif-simulation-controls{background:#f7f8fa;border:1px dashed #cbd3d9;border-radius:8px;padding:13px 15px}.uif-simulation-controls>p{margin:3px 0 10px;color:#647480}.uif-simulation-controls form{display:flex;gap:6px;flex-wrap:wrap}@media(max-width:700px){.uif-response-explanation{grid-template-columns:1fr}.uif-attempt-file .btn{margin-left:0}}
.uif-existing-file-notice{background:#fff7e5;border:1px solid #e2c56e;border-left:5px solid #c88a00;border-radius:8px;padding:12px 15px;margin:14px 0}.uif-existing-file-notice p{margin:4px 0 0;color:#654d17}

/* Employee Pay & Income history. */
.pay-income-page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.pay-income-page-heading h1{margin-bottom:6px}.pay-income-actions{display:flex;gap:8px;flex-wrap:wrap}.pay-income-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0}.pay-income-summary-card{display:flex;flex-direction:column;gap:5px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}.pay-income-summary-card>span,.pay-income-summary-card>small{color:var(--muted)}.pay-income-summary-card>strong{font-size:21px;color:var(--navy)}.pay-income-summary-card .pay-income-status{font-size:17px;color:#26735b}.pay-income-history{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}.pay-income-history>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line)}.pay-income-history h2{margin:0 0 5px;color:var(--navy);font-size:22px}.pay-income-history header p{margin:0;color:var(--muted)}.pay-income-lock{color:#26735b;font-weight:700;white-space:nowrap}.pay-income-table{margin:0;border:0;border-radius:0}.pay-income-table td>small{display:block;color:var(--muted);margin-top:3px}.pay-income-source,.pay-income-locked-label{display:inline-block;color:#26735b;font-weight:700}.pay-income-source--manual,.pay-income-locked-label{color:#8a5a12}.pay-income-breakdown-row>td{padding:0 14px 12px!important;border-top:0!important}.pay-income-breakdown-row details{padding:7px 10px;background:#f7faf8;border-radius:7px}.pay-income-breakdown-row summary{color:var(--teal);font-weight:700;cursor:pointer}.pay-income-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:12px 3px 2px}.pay-income-breakdown h3{margin:0 0 8px;color:var(--navy);font-size:16px}.pay-income-breakdown p{display:flex;justify-content:space-between;gap:12px;margin:0;padding:5px 0;border-bottom:1px solid #e3e9e2}.pay-income-record-note{margin:10px 3px 2px!important;color:var(--muted)}.pay-income-empty{padding:32px 20px;text-align:center}.pay-income-empty h3{color:var(--navy)}.pay-income-storage-note,.historical-income-intro{padding:16px 18px;margin-top:18px;background:#edf7f5;border:1px solid #bcdad4;border-left:5px solid var(--teal);border-radius:9px}.pay-income-storage-note p,.historical-income-intro p{margin:5px 0 0;color:#385c62}.historical-income-form{padding:22px;margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}.historical-income-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}.historical-income-grid .form-group{margin:0}.historical-income-wide{grid-column:1/-1}.historical-income-confirm{display:flex;align-items:flex-start;gap:9px;padding:13px 14px;background:#fff7e5;border:1px solid #e2c56e;border-radius:8px;font-weight:600}.historical-income-confirm input{margin-top:3px}.historical-income-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
@media(max-width:850px){.pay-income-page-heading,.pay-income-history>header{flex-direction:column}.pay-income-summary-grid{grid-template-columns:1fr}.pay-income-breakdown,.historical-income-grid{grid-template-columns:1fr}.pay-income-lock{white-space:normal}}
/* Administrator user management. */
.user-management-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.user-management-heading h1 { margin:0; }
.user-management-heading p { margin:8px 0 0; }
.user-summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:20px; }
.user-summary-grid article { padding:18px 20px; background:#fff; border:1px solid rgba(23,63,99,.10); border-radius:14px; box-shadow:0 3px 12px rgba(23,63,99,.05); }
.user-summary-grid span { display:block; color:#64788c; font-size:13px; font-weight:600; }
.user-summary-grid strong { display:block; margin-top:5px; color:#173f63; font-size:28px; line-height:1; }
.user-management-card { padding:0; overflow:hidden; }
.user-management-card__heading { padding:20px 22px 8px; }
.user-management-card__heading h2 { margin:2px 0 0; }
.user-result-count { align-self:center; color:#64788c; font-size:13px; font-weight:650; }
.user-filter-bar { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; padding:12px 22px 20px; }
.user-filter-bar > div:first-child { flex:1 1 300px; }
.user-filter-bar > div:not(:first-child) { flex:0 1 190px; }
.user-filter-bar label { display:block; margin-bottom:5px; color:#173f63; font-size:12px; font-weight:700; }
.user-filter-bar input,.user-filter-bar select { width:100%; min-height:40px; padding:8px 10px; border:1px solid #cad5df; border-radius:8px; background:#fff; }
.user-management-table { margin:0; border-right:0; border-bottom:0; border-left:0; border-radius:0; }
.user-management-table th,.user-management-table td { padding:14px 18px!important; vertical-align:middle!important; }
.user-pagination { display:flex; align-items:center; justify-content:center; gap:14px; padding:18px 22px; border-top:1px solid #e4eaee; }
.user-pagination span { color:#52697d; font-size:13px; font-weight:650; }
.user-account-meta,.user-account-muted { display:block; margin-top:3px; color:#718292; font-size:12px; }
.user-role { display:inline-flex; padding:5px 9px; border-radius:999px; color:#315568; background:#edf3f7; font-size:12px; font-weight:700; }
.user-role--administrator,.user-role--superuser { color:#174f78; background:#d9edff; }
.user-role--manager { color:#12583f; background:#d7f5e8; }
.user-form-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:20px; align-items:start; }
.user-account-form h2,.user-security-guide h2 { color:#173f63; font-size:21px; }
.user-account-form .form-field-control input:not([type="checkbox"]) { width:100%; }
.user-account-section { padding-bottom:8px; }
.user-account-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; }
.user-account-fields .form-group { min-width:0; }
.user-account-fields input:not([type="checkbox"]) { width:100%; }
.user-account-switch { grid-column:1 / -1; margin-bottom:10px; }
.user-account-switch > label { display:flex; align-items:flex-start; gap:11px; padding:11px 13px; border:1px solid #dce5eb; border-radius:9px; cursor:pointer; }
.user-account-switch input { margin-top:4px; accent-color:#087f7b; }
.user-account-switch span { display:grid; gap:2px; }
.user-account-switch small { color:#64788c; font-weight:400; line-height:1.4; }
.user-privileges-section { padding-top:22px; margin-top:10px; border-top:1px solid #e4eaee; }
.user-privileges-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.user-privileges-heading h2 { margin:3px 0 4px; }
.user-privileges-heading p { margin:0; color:#64788c; }
.privilege-group { padding:0; margin:0 0 22px; border:0; }
.privilege-group legend { width:100%; padding:0 0 8px; margin:0 0 10px; color:#173f63; border-bottom:1px solid #e4eaee; font-size:14px; font-weight:750; text-transform:uppercase; letter-spacing:.045em; }
.privilege-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.privilege-switch { display:grid; grid-template-columns:auto 1fr; grid-template-areas:"toggle copy"; gap:3px 12px; min-height:82px; padding:14px; margin:0; border:1px solid #dce5eb; border-radius:10px; background:#fbfcfd; cursor:pointer; }
.privilege-switch:hover { border-color:#9fb8c7; background:#fff; }
.privilege-switch input { position:absolute; opacity:0; pointer-events:none; }
.privilege-switch__control { grid-area:toggle; position:relative; width:38px; height:22px; margin-top:1px; border-radius:999px; background:#b8c5ce; transition:.16s ease; }
.privilege-switch__control:after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.22); transition:.16s ease; }
.privilege-switch input:checked + .privilege-switch__control { background:#087f7b; }
.privilege-switch input:checked + .privilege-switch__control:after { transform:translateX(16px); }
.privilege-switch input:focus + .privilege-switch__control { outline:3px solid rgba(8,127,123,.22); outline-offset:2px; }
.privilege-switch__copy { grid-area:copy; display:grid; gap:4px; }
.privilege-switch__copy strong { color:#173f63; font-size:14px; }
.privilege-switch__copy small { color:#64788c; font-size:12px; font-weight:400; line-height:1.4; }
.privilege-switch__copy em { color:#a12c26; font-size:12px; font-style:normal; }
.user-account-form .form-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:18px; border-top:1px solid #e4eaee; }
.user-security-guide { color:#52697d; }
.user-security-guide ul { padding-left:20px; }
.user-security-guide li { margin:0 0 10px; line-height:1.5; }
.user-linked-profiles { display:grid; gap:6px; padding-top:16px; margin-top:16px; border-top:1px solid #e4eaee; }
.user-linked-profiles strong { color:#173f63; }
.user-linked-profiles small { margin-top:5px; line-height:1.45; }
@media(max-width:800px) { .user-management-heading,.user-privileges-heading { flex-direction:column; }.user-summary-grid,.user-form-layout,.user-account-fields,.privilege-grid { grid-template-columns:1fr; }.user-filter-bar > div,.user-filter-bar > div:first-child,.user-filter-bar > div:not(:first-child) { flex:1 1 100%; } }

/* Employer Overview action buttons: solid teal primary payroll action and plum secondary controls. */
.dashboard-action .dashboard-action-button--payroll {
    color: #FFFFFF !important;
    background: #006D6F;
    border: 1px solid #006D6F;
}

.dashboard-action .dashboard-action-button--payroll:hover {
    color: #FFFFFF !important;
    background: #006D6F;
    border-color: #006D6F;
}

.dashboard-action .dashboard-action-button--payroll:focus {
    color: #FFFFFF !important;
    background: #006D6F;
    border-color: #006D6F;
    outline: 3px solid #E1E8D7;
    outline-offset: 2px;
}

.dashboard-action .dashboard-action-button--secondary {
    color: #8C4260 !important;
    background: #FFFFFF;
    border: 1px solid #8C4260;
}

.dashboard-action .dashboard-action-button--secondary:hover {
    color: #74344E !important;
    background: #F9F4F6;
    border-color: #74344E;
}

.dashboard-action .dashboard-action-button--secondary:focus {
    color: #74344E !important;
    background: #FFFFFF;
    border-color: #74344E;
    outline: 3px solid #E8D7DB;
    outline-offset: 2px;
}

/* Unified ordinary action buttons. Destructive, warning, link, disabled and navigation controls retain their semantic treatments. */
.btn-primary,
.btn-default,
.btn-success,
.dashboard-run-button,
.regular-input-add,
.action-button,
.dashboard-action .dashboard-action-button--payroll,
    .dashboard-action .dashboard-action-button--secondary {
    color: #FFFFFF !important;
    background: #009B77 !important;
    border-color: #009B77 !important;
}

.btn-primary:not([disabled]):not(.disabled):hover,
.btn-default:not([disabled]):not(.disabled):hover,
.btn-success:not([disabled]):not(.disabled):hover,
.dashboard-run-button:not([disabled]):not(.disabled):hover,
.regular-input-add:not([disabled]):not(.disabled):hover,
.action-button:not([disabled]):not(.disabled):hover,
.dashboard-action .dashboard-action-button--payroll:hover,
.dashboard-action .dashboard-action-button--secondary:hover {
    color: #1C6CAC !important;
    background: #D9F2EC !important;
    border-color: #D9F2EC !important;
}

.btn-primary:focus,
.btn-default:focus,
.btn-success:focus,
.dashboard-run-button:focus,
.regular-input-add:focus,
.action-button:focus,
.dashboard-action .dashboard-action-button--payroll:focus,
.dashboard-action .dashboard-action-button--secondary:focus {
    color: #1C6CAC !important;
    background: #D9F2EC !important;
    border-color: #D9F2EC !important;
    outline: 3px solid #E1E8D7;
    outline-offset: 2px;
}

/* Round 1 UI accessibility corrections (2026-09-02).
   These are deliberately narrow overrides pending the design-token cleanup. */
.login-brand .login-mark {
    color: #19324A;
}

.login-form .alert,
.login-form .alert .errorlist,
.login-form .alert strong,
.login-form .alert li {
    color: #8B2F29;
}

.login-form .btn-primary,
.login-form .btn-primary:active {
    color: #FFFFFF !important;
    background: #006D6F !important;
    border-color: #006D6F !important;
}

.login-form .btn-primary:hover,
.login-form .btn-primary:focus {
    color: #FFFFFF !important;
    background: #005A5C !important;
    border-color: #005A5C !important;
}

/* The legacy all-input rule also matches submit inputs and has higher
   specificity, so keep the primary action border aligned explicitly. */
.login-form input.btn-primary,
.login-form input.btn-primary:active {
    border-color: #006D6F !important;
}

.login-form input.btn-primary:hover,
.login-form input.btn-primary:focus {
    border-color: #005A5C !important;
}

.login-register .btn {
    color: #19324A !important;
    background: #FFFFFF !important;
    border-color: #CAD5C1 !important;
}

.login-register .btn:hover,
.login-register .btn:focus {
    color: #19324A !important;
    background: #F5F7F1 !important;
    border-color: #A3B18A !important;
}

.payroll-review-heading {
    color: #FFFFFF !important;
    background: #23496E !important;
}

.payroll-review-heading h2,
.payroll-review-heading small {
    color: #FFFFFF !important;
}

.employee-ready-status,
.employees-list-card .employee-ready-status,
.employees-workflow-card em {
    color: #17603E;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid rgba(0, 109, 111, 0.42);
    outline-offset: 2px;
}

.app-sidebar a:focus-visible,
.nav-logout__button:focus-visible {
    outline-color: #BDEFF1;
}

/* Employer dashboard: Action Required section accent. */
.dashboard-actions-panel {
    border-top: 1px solid rgba(23, 63, 99, 0.10);
    border-left: 4px solid #68B8FB;
    background: #FFFFFF;
    padding-top: 24px;
    padding-left: 21px;
}

.dashboard-actions-panel > .dashboard-section-title {
    color: #1C6CAC;
}

.dashboard-actions-panel .dashboard-action--info {
    border-left-color: #B77A13;
    background: #FFF8E8;
}

.dashboard-actions-panel .dashboard-action--info .dashboard-action-icon {
    background: #FFF0C8;
    color: #9D690F;
}

.dashboard-actions-panel .dashboard-action--info h3 {
    color: #9D690F;
}

.dashboard-actions-panel .dashboard-action--warning h3 {
    color: #9D690F;
}

.dashboard-actions-panel .dashboard-action,
.dashboard-actions-panel .dashboard-action--info,
.dashboard-actions-panel .dashboard-action--warning,
.dashboard-actions-panel .dashboard-action--danger {
    border-left-color: #2F81C4;
    background: #EFF7FE;
}

.dashboard-actions-panel .dashboard-action .dashboard-action-icon {
    color: #2F81C4;
    background: #FFFFFF;
}

.dashboard-actions-panel .dashboard-action h3,
.dashboard-actions-panel .dashboard-action p {
    color: #2F81C4;
}

@media (max-width: 540px) {
    .dashboard-actions-panel {
        padding-top: 18px;
        padding-left: 15px;
    }
}

.uif-status--needs_attention {
    background: #fde6e5;
    color: #9a2923;
}

.tax-source-total {
    display: inline-block;
    margin: 4px 8px 4px 0;
    padding: 4px 7px;
    border: 1px solid #dfe5ea;
    border-radius: 6px;
    background: #f7f9fa;
    white-space: nowrap;
}
/* Compact desktop sidebar toggle. It is deliberately outside the sidebar's
   flex layout so employer-theme button rules cannot stretch it. */
.sidebar-collapse-button {
    position: fixed !important;
    top: 18px !important;
    right: auto !important;
    left: 258px !important;
    z-index: 1400 !important;
    display: inline-flex !important;
    flex: 0 0 24px !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: auto !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #23496e !important;
    background: #fff !important;
    border: 1px solid #cad8e3 !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 7px rgba(16,42,67,.2) !important;
    font: 700 20px/1 Arial,sans-serif !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: left .2s ease, color .15s ease, background-color .15s ease !important;
}
.sidebar-collapse-button > span {
    display: block !important;
    width: 100% !important;
    height: 22px !important;
    font: inherit !important;
    line-height: 20px !important;
    transform: none;
    transition: transform .2s ease;
}
.sidebar-collapse-button:hover,
.sidebar-collapse-button:focus {
    color: #fff !important;
    background: #008d9b !important;
    outline: 2px solid #fff !important;
    outline-offset: 1px;
}
@media (min-width:841px) {
    body.sidebar-collapsed { padding-left:76px !important; }
    body.sidebar-collapsed .app-sidebar { width:76px !important; }
    body.sidebar-collapsed .sidebar-collapse-button { left:64px !important; }
    body.sidebar-collapsed .sidebar-collapse-button > span { transform:rotate(180deg); }
}
@media (max-width:840px) {
    .sidebar-collapse-button { display:none !important; }
}

/* Responsive workspace density. Use the compact employer layout only when the
   browser viewport is laptop-sized. Wider desktop views remain at the browser's
   normal 100% scale, while existing tablet/mobile rules continue below 1024px. */
@media (min-width:1024px) and (max-width:1600px) {
    body.employer-site {
        zoom: .8;
    }
}

/* Add Leave: use the full available content width. */
body.leave-record-form-route .form-card.leave-form-card {
    width: 100%;
    max-width: none;
}

/* Add Leave: match the requested dimensions for the primary fields. */
body.leave-record-form-route .leave-form-field-750 {
    width: 100%;
    max-width: 750px;
}
body.leave-record-form-route .leave-form-field-750 select,
body.leave-record-form-route .leave-form-field-750 input {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
}