#hrm-payroll-r9-root {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: #172033;
    background: #f6f8fb;

    min-height:
        calc(100vh - 72px);

    position: absolute;
    inset: 0;
    z-index: 60;
    overflow: auto;
}

.r9-host {
    position: relative !important;

    min-height:
        calc(100vh - 72px) !important;
}

.r9-body {
    position: fixed !important;
    top: 64px;
    right: 0;
    bottom: 0;
    left: 240px;
    min-height: 0 !important;
}

.r9-shell {
    max-width: 1680px;
    margin: 0 auto;
    padding: 24px;
}

.r9-top {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.r9-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #667085;
}

.r9-title {
    font-size: 25px;
    line-height: 1.2;
    margin: 4px 0 5px;
    font-weight: 760;
}

.r9-sub {
    font-size: 13px;
    color: #667085;
}

.r9-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.r9-btn {
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #344054;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

.r9-btn:hover {
    background: #f9fafb;
}

.r9-btn.primary {
    background: #155eef;
    border-color: #155eef;
    color: #fff;
}

.r9-btn.danger {
    color: #b42318;
    border-color: #fda29b;
    background: #fff;
}

.r9-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.r9-nav {
    display: flex;
    gap: 6px;
    overflow: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    margin-bottom: 16px;
}

.r9-nav button {
    white-space: nowrap;
    border: 0;
    background: transparent;
    padding: 9px 11px;
    border-radius: 7px;
    color: #475467;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

.r9-nav button.active {
    background: #eef4ff;
    color: #1849a9;
}

.r9-panel {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}

.r9-grid {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap: 12px;
}

.r9-card {
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    padding: 14px;
}

.r9-card .label {
    font-size: 12px;
    color: #667085;
}

.r9-card .value {
    font-size: 20px;
    font-weight: 760;
    margin-top: 5px;
}

.r9-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.r9-toolbar h2 {
    font-size: 16px;
    margin: 0;
}

.r9-select,
.r9-input,
.r9-textarea {
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    padding: 8px 10px;
    font-size: 13px;
    color: #101828;
}

.r9-textarea {
    min-height: 90px;
    resize: vertical;
}

.r9-table-wrap {
    overflow: auto;
    border: 1px solid #eaecf0;
    border-radius: 9px;
}

.r9-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.r9-table th {
    background: #f9fafb;
    color: #475467;
    text-align: left;
    font-weight: 700;
    padding: 9px 10px;
    border-bottom: 1px solid #eaecf0;
    white-space: nowrap;
}

.r9-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #f2f4f7;
    vertical-align: top;
}

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

.r9-num {
    text-align: right !important;
    font-variant-numeric:
        tabular-nums;
}

.r9-badge {
    display: inline-flex;
    border-radius: 999px;
    padding: 3px 8px;
    background: #f2f4f7;
    color: #344054;
    font-size: 11px;
    font-weight: 700;
}

.r9-badge.ok {
    background: #ecfdf3;
    color: #027a48;
}

.r9-badge.warn {
    background: #fffaeb;
    color: #b54708;
}

.r9-badge.bad {
    background: #fef3f2;
    color: #b42318;
}

.r9-alert {
    border-radius: 9px;
    padding: 11px 12px;
    font-size: 13px;
    margin-bottom: 12px;
}

.r9-alert.info {
    background: #eff8ff;
    color: #175cd3;
}

.r9-alert.error {
    background: #fef3f2;
    color: #b42318;
}

.r9-alert.warn {
    background: #fffaeb;
    color: #b54708;
}

.r9-empty {
    padding: 28px;
    text-align: center;
    color: #667085;
}

.r9-kv {
    display: grid;
    grid-template-columns:
        minmax(
            180px,
            260px
        )
        1fr;

    border-top:
        1px solid #f2f4f7;
}

.r9-kv div {
    padding: 8px 10px;
    border-bottom:
        1px solid #f2f4f7;
}

.r9-kv .k {
    color: #667085;
}

.r9-modal-backdrop {
    position: fixed;
    inset: 0;
    background:
        rgba(
            16,
            24,
            40,
            .48
        );

    z-index: 9998;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.r9-modal {
    width:
        min(
            680px,
            100%
        );

    max-height: 88vh;
    overflow: auto;
    background: #fff;
    border-radius: 14px;

    box-shadow:
        0 18px 60px
        rgba(
            16,
            24,
            40,
            .24
        );

    padding: 18px;
}

.r9-modal h3 {
    margin: 0 0 4px;
    font-size: 18px;
}

.r9-modal p {
    margin: 0 0 15px;
    color: #667085;
    font-size: 13px;
}

.r9-form {
    display: grid;
    grid-template-columns:
        1fr 1fr;

    gap: 12px;
}

.r9-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.r9-field.full {
    grid-column: 1 / -1;
}

.r9-field label {
    font-size: 12px;
    font-weight: 700;
    color: #344054;
}

.r9-required {
    color: #d92d20;
}

.r9-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.r9-link {
    border: 0;
    background: none;
    color: #155eef;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-weight: 650;
}

.r9-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;

    border:
        2px solid #d0d5dd;

    border-top-color:
        #155eef;

    border-radius: 50%;

    animation:
        r9spin .7s linear infinite;
}

@keyframes r9spin {
    to {
        transform:
            rotate(
                360deg
            );
    }
}

@media (
    max-width: 1100px
) {
    .r9-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }
}

@media (
    max-width: 768px
) {
    .r9-shell {
        padding: 16px;
    }

    .r9-top {
        flex-direction: column;
    }

    .r9-body {
        left: 0;
        top: 56px;
    }

    .r9-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .r9-form {
        grid-template-columns:
            1fr;
    }

    .r9-field.full {
        grid-column: auto;
    }
}

@media (
    max-width: 430px
) {
    .r9-shell {
        padding: 12px;
    }

    .r9-title {
        font-size: 21px;
    }

    .r9-grid {
        grid-template-columns:
            1fr;
    }

    .r9-panel {
        padding: 12px;
    }

    .r9-btn {
        padding: 8px 10px;
    }
}


/* ========================================================================
   PAYROLL CONTROL CENTER COMPLETE R1
   ======================================================================== */

#hrm-payroll-r9-root,
[data-r9-root],
.hrm-payroll-r9-root {
    scroll-margin-top: 76px;
}

.r1-nav-button.r1-is-active {
    font-weight: 750;
}

.r1-panel {
    min-width: 0;
    padding: 8px 0 44px;
}

.r1-page-head {
    margin: 4px 0 18px;
    padding-top: 6px;
}

.r1-page-head h2 {
    margin: 4px 0 6px;
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.16;
    letter-spacing: -.022em;
}

.r1-page-head p {
    margin: 0;
    max-width: 880px;
    color: #687386;
    line-height: 1.55;
}

.r1-kicker {
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .075em;
    text-transform: uppercase;
    color: #687386;
}

.r1-context {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    margin: 0 0 14px;
    font-size: 13px;
    color: #5e697c;
}

.r1-section {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #e0e5ec;
    border-radius: 9px;
    background: #fff;
}

.r1-section h3,
.r1-section h4 {
    margin: 0 0 7px;
}

.r1-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e2e6ed;
    border-radius: 8px;
    background: #fff;
}

.r1-table {
    width: 100%;
    min-width: 820px;
    border-collapse: collapse;
    font-size: 13px;
}

.r1-table th,
.r1-table td {
    padding: 10px 11px;
    border-bottom: 1px solid #edf0f4;
    vertical-align: top;
    text-align: left;
}

.r1-table th {
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .025em;
    text-transform: uppercase;
    color: #687386;
    background: #f7f8fa;
}

.r1-table tbody tr:last-child td {
    border-bottom: 0;
}

.r1-alert {
    margin: 12px 0;
    padding: 11px 13px;
    border: 1px solid #dce2ea;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.48;
}

.r1-alert strong {
    display: block;
    margin-bottom: 3px;
}

.r1-alert--info {
    background: #f4f7fa;
    color: #334861;
}

.r1-alert--warning {
    border-color: #e4d39a;
    background: #fff9e9;
    color: #665017;
}

.r1-alert--danger {
    border-color: #e6bfc3;
    background: #fff3f3;
    color: #852f36;
}

.r1-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef1f5;
    color: #475369;
    font-size: 11px;
    font-weight: 750;
}

.r1-badge--approved,
.r1-badge--posted,
.r1-badge--ready,
.r1-badge--configured,
.r1-badge--paid,
.r1-badge--closed {
    background: #e9f4ed;
    color: #25603b;
}

.r1-badge--blocked,
.r1-badge--missing,
.r1-badge--rejected {
    background: #fbecec;
    color: #932f38;
}

.r1-badge--prepared,
.r1-badge--draft,
.r1-badge--submitted,
.r1-badge--under-review {
    background: #f7f1df;
    color: #725a1a;
}

.r1-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.r1-btn {
    appearance: none;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid #263a59;
    border-radius: 7px;
    background: #263a59;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.r1-btn--quiet {
    border-color: #cfd5df;
    background: #fff;
    color: #263a59;
}

.r1-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.r1-form {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e7eaf0;
}

.r1-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.r1-form label {
    display: grid;
    gap: 5px;
    color: #505c70;
    font-size: 12px;
    font-weight: 650;
}

.r1-form input,
.r1-form select,
.r1-form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #ccd3dd;
    border-radius: 7px;
    background: #fff;
    color: #172033;
    font: inherit;
    font-size: 13px;
}

.r1-span-2 {
    grid-column: 1 / -1;
}

.r1-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.r1-metrics > div {
    padding: 12px;
    border: 1px solid #e1e5ec;
    border-radius: 8px;
    background: #fff;
}

.r1-metrics span {
    display: block;
    margin-bottom: 5px;
    color: #6d788a;
    font-size: 11px;
}

.r1-metrics strong {
    color: #1b273b;
    font-size: 15px;
}

.r1-danger {
    color: #982f38;
}

.r1-muted {
    color: #778194;
    font-size: 12px;
    line-height: 1.5;
}

.r1-empty,
.r1-loading {
    padding: 24px;
    border: 1px dashed #d3dae4;
    border-radius: 8px;
    color: #687386;
    text-align: center;
}

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

@media (max-width: 768px) {
    .r1-form-grid {
        grid-template-columns: 1fr;
    }

    .r1-span-2 {
        grid-column: auto;
    }
}

@media (max-width: 430px) {
    .r1-section {
        padding: 12px;
    }

    .r1-metrics {
        grid-template-columns: 1fr;
    }

    .r1-page-head {
        padding-top: 10px;
    }
}