/* NEXORA WEB THEME V1 — visual colours only */
:root {
    --nx-navy: #101650;
    --nx-blue: #164cdb;
    --nx-purple: #6931d6;
    --nx-cyan: #00d5e6;
    --nx-text: #172449;
    --nx-muted: #52617b;
    --nx-page: #f3f6fd;
    --nx-border: #cbd5e8;
    --nx-soft: #eaf0ff;
}

/* Shared page surfaces */
html body {
    background: var(--nx-page);
}
html body .layout .main,
html body .layout .main .content {
    background: var(--nx-page) !important;
}

/* Sidebar: preserve all existing geometry and interaction */
html body .layout .sidebar {
    background: linear-gradient(165deg, #29136a 0%, #101650 45%, #073778 100%) !important;
    color: #edf3ff !important;
}
html body .layout .sidebar .brand {
    background: transparent !important;
}
html body .layout .sidebar .brand-main {
    color: #ffffff !important;
}
html body .layout .sidebar .brand-sub {
    color: #c3d4f5 !important;
}
html body .layout .sidebar .nav-section-title {
    color: #dce7ff !important;
}
html body .layout .sidebar .nav-section-title:hover {
    background: rgba(95, 159, 255, .14) !important;
    color: #ffffff !important;
}
html body .layout .sidebar .nav-item {
    color: #cbd8f5 !important;
    background: transparent !important;
}
html body .layout .sidebar .nav-item:hover {
    color: #ffffff !important;
    background: rgba(95, 159, 255, .14) !important;
}
html body .layout .sidebar .nav-item.active,
html body .layout .sidebar .nav-item.active:hover {
    color: #ffffff !important;
    background: linear-gradient(100deg, #6230c0, #174aa8) !important;
    box-shadow: inset 3px 0 0 var(--nx-cyan) !important;
}
html body .layout .sidebar :is(.nav-icon, .nav-parent-icon, .nav-section-toggle) {
    color: #b9cbed !important;
}
html body .layout .sidebar .nav-item.active .nav-icon,
html body .layout .sidebar .nav-section.has-active .nav-parent-icon {
    color: #7eeeff !important;
}

/* Header */
html body .layout .topbar {
    background: #ffffff !important;
    border-bottom-color: var(--nx-border) !important;
    box-shadow: 0 2px 8px rgba(16, 22, 80, .05) !important;
}
html body .layout .topbar-left,
html body .layout .topbar .user {
    color: var(--nx-navy) !important;
}
html body .layout .topbar .sidebar-toggle-button,
html body .layout .topbar .logout-button {
    color: var(--nx-blue) !important;
}
html body .layout .topbar .sidebar-toggle-button:hover {
    background: var(--nx-soft) !important;
}

/* Shared cards and panels */
html body .layout .main .content.content :is(
    .card, .panel, .form-panel, .detail-card, .staff-control-card,
    .expense-card, .expense-section, .report-card, .audit-card, .module
) {
    background: #ffffff !important;
    border-color: var(--nx-border) !important;
    box-shadow: 0 2px 8px rgba(16, 22, 80, .05) !important;
}
html body .layout .main .content.content :is(
    .page-title, .expense-title, .panel-title,
    .expense-card h2, .report-card h2, .audit-card h2
) {
    color: var(--nx-navy) !important;
}
html body .layout .main .content.content :is(
    .page-subtitle, .expense-subtitle, .card-detail,
    .field-help, .table-muted, .detail-label,
    .expense-label, .audit-label
) {
    color: var(--nx-muted) !important;
}
html body .layout .main .content.content :is(
    .summary-number, .detail-value, .expense-value, .audit-value,
    .expense-stat-value, .report-stat-value
) {
    color: var(--nx-navy) !important;
}
html body .layout .main .content.content :is(
    .expense-stat, .report-stat, .edit-box, .record-edit, .audit-json
) {
    background: #f0f4ff !important;
    border-color: var(--nx-border) !important;
}

/* Existing primary action classes */
html body .layout .main .content.content :is(
    .primary-action-button, .button-link, .primary-button
):not(.danger-button):not(.reset-test-button):not(.staff-reset-link) {
    background: linear-gradient(110deg, #6931d6, #164cdb) !important;
    color: #ffffff !important;
    border-color: #164cdb !important;
}
html body .layout .main .content.content :is(
    .primary-action-button, .button-link, .primary-button
):not(.danger-button):not(.reset-test-button):not(.staff-reset-link):hover:not(:disabled):not([aria-disabled="true"]) {
    background: linear-gradient(110deg, #5725bb, #123fba) !important;
}
html body .layout .main .content.content .secondary-button-link:not(.staff-reset-link),
html body .layout .main .content.content .setup-nav a {
    background: #ffffff !important;
    color: #2344a0 !important;
    border-color: #aebfe7 !important;
}
html body .layout .main .content.content .secondary-button-link:not(.staff-reset-link):hover,
html body .layout .main .content.content .setup-nav a:hover {
    background: var(--nx-soft) !important;
    border-color: #7d9ad6 !important;
}

/* Table headers: preserve row and status styling */
html body .layout .main .content.content table th {
    background: #eaf0ff !important;
    color: #263c70 !important;
    border-color: var(--nx-border) !important;
}
html body .layout .main .content.content .table-action a:not(.danger-button):not(.staff-reset-link) {
    color: #164cba !important;
}

/* Form focus colours; no field dimensions or behaviour changes */
html body .layout .main .content.content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="submit"]):not([type="button"]):focus,
html body .layout .main .content.content select:focus,
html body .layout .main .content.content textarea:focus {
    border-color: var(--nx-blue) !important;
    box-shadow: 0 0 0 3px rgba(22, 76, 219, .16) !important;
}
html body .layout .main .content.content input[type="checkbox"],
html body .layout .main .content.content input[type="radio"] {
    accent-color: var(--nx-blue) !important;
}

/* Standalone login */
html body.login-body {
    background: linear-gradient(135deg, #301070 0%, #101650 50%, #07549c 100%);
}
html body.login-body .login-card {
    background: #ffffff;
    border-color: #cbd5e8;
    box-shadow: 0 18px 50px rgba(4, 10, 45, .28);
}
html body.login-body .login-logo {
    color: var(--nx-navy);
}
html body.login-body .login-subtitle {
    color: var(--nx-muted);
}
html body.login-body label {
    color: var(--nx-text);
}
html body.login-body .primary-button {
    background: linear-gradient(110deg, #6931d6, #164cdb);
    color: #ffffff;
}
html body.login-body .primary-button:hover:not(:disabled) {
    background: linear-gradient(110deg, #5725bb, #123fba);
}
html body.login-body input:focus {
    border-color: var(--nx-blue);
    outline: 2px solid var(--nx-blue);
    outline-offset: 2px;
}

/* Existing success, warning, danger and map status colours are retained. */


/* NEXORA-STAFF-SPACING-01 — Staff Controls layout only */
.staff-controls-content .staff-control-card {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
    gap: 24px 20px;
}
.staff-controls-content .staff-control-card > div {
    min-width: 0;
}
.staff-controls-content .staff-control-label {
    margin: 0 0 12px;
    line-height: 1.4;
}
.staff-controls-content .staff-control-checkbox {
    margin: 0;
    gap: 8px;
    align-items: center;
}
.staff-controls-content .staff-control-status {
    margin-top: 10px;
}
.staff-controls-content .staff-control-employee,
.staff-controls-content .staff-control-position {
    overflow-wrap: anywhere;
}
.staff-controls-content .staff-control-action {
    grid-column: 1 / -1;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #cbd5e8;
}
.staff-controls-content .staff-control-action > * {
    margin: 0;
}
@media (max-width: 1400px) {
    .staff-controls-content .staff-control-card {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 1000px) {
    .staff-controls-content .staff-control-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 700px) {
    .staff-controls-content .staff-control-card {
        grid-template-columns: minmax(0, 1fr);
    }
    .staff-controls-content .staff-control-action {
        justify-content: flex-start;
    }
}


/* NEXORA-PAYROLL-ACTIONS-01 — Payroll heading layout only */
.payroll-content > .page-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 12px;
}
.payroll-content > .page-actions > div:first-child {
    flex: 1 1 300px;
    min-width: 0;
    margin-right: auto;
}
.payroll-content > .page-actions > a.secondary-button-link {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
}
@media (max-width: 900px) {
    .payroll-content > .page-actions {
        justify-content: flex-start;
    }
    .payroll-content > .page-actions > div:first-child {
        flex-basis: 100%;
    }
}


/* NEXORA-BATCHES-UI-01 — Payment Batches presentation only */
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > h2 {
    margin: 28px 0 0;
    padding: 20px 22px 14px;
    background: #fff;
    border: 1px solid #cbd5e8;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    color: #101650 !important;
    font-size: 18px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 12px 20px;
    margin: 0;
    padding: 4px 22px 22px;
    background: #fff;
    border: 1px solid #cbd5e8;
    border-top: 0;
    border-radius: 0 0 10px 10px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > form > label {
    margin: 0;
    align-self: end;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > form > label:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > form > label:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > form > select:first-of-type {
    grid-column: 1;
    grid-row: 2;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > form > select[name="batch_status"],
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > form > input[name="currency_code"] {
    grid-column: 2;
    grid-row: 2;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > form > label:nth-of-type(3) {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 8px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > form > textarea {
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
    min-height: 96px;
    resize: vertical;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > form > select,
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > form > input:not([type="hidden"]),
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > form > textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 7px;
    font: inherit;
    font-size: 14px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > form > input[name="currency_code"] {
    max-width: 160px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > form > button[type="submit"] {
    grid-column: 1 / -1;
    justify-self: end;
    margin: 4px 0 0;
    padding: 10px 16px;
    border: 1px solid #164cdb !important;
    border-radius: 7px;
    background: linear-gradient(110deg, #6931d6, #164cdb) !important;
    color: #fff !important;
    font-size: 14px;
    line-height: 1.4;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > form > button[type="submit"]:hover:not(:disabled) {
    background: linear-gradient(110deg, #5725bb, #123fba) !important;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > p:has(> a[href^="/payroll?"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    line-height: 2;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > p > a[href^="/payroll?"],
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > p > a[href^="/payroll/payments?"] {
    display: inline-block;
    padding: 7px 12px;
    border: 1px solid #aebfe7;
    border-radius: 7px;
    background: #fff;
    color: #2344a0 !important;
    text-decoration: none;
    font-size: 14px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > h2 + p,
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > h2 + div[style="overflow-x:auto;"] {
    margin: 0;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #cbd5e8;
    border-top: 0;
    border-radius: 0 0 10px 10px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > h2 + p {
    color: #52617b !important;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > div[style="overflow-x:auto;"] table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > div[style="overflow-x:auto;"] :is(th, td) {
    padding: 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #d5dbe8;
}
@media (max-width: 700px) {
    html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > form {
        grid-template-columns: minmax(0, 1fr);
    }
    html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > form > :is(label, select, input:not([type="hidden"]), textarea, button) {
        grid-column: 1;
        grid-row: auto;
    }
    html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/batches']) > form > button[type="submit"] {
        justify-self: start;
    }
}


/* NEXORA-PROVIDERS-UI-01 — presentation only */
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > h2 {
    margin: 28px 0 0;
    padding: 20px 22px 14px;
    background: #fff;
    border: 1px solid #cbd5e8;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    color: #101650 !important;
    font-size: 18px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
    margin: 0;
    padding: 4px 22px 22px;
    background: #fff;
    border: 1px solid #cbd5e8;
    border-top: 0;
    border-radius: 0 0 10px 10px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers"] {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 140px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form > label {
    margin: 0;
    align-self: end;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form > select,
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form > input:not([type="hidden"]) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 7px;
    font: inherit;
    font-size: 14px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form > input[name="currency_code"] {
    max-width: 160px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form > small {
    color: #52617b;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form > br {
    display: none;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form > button[type="submit"] {
    grid-column: 1 / -1;
    justify-self: end;
    margin: 8px 0 0;
    padding: 10px 16px;
    border: 1px solid #164cdb !important;
    border-radius: 7px;
    background: linear-gradient(110deg, #6931d6, #164cdb) !important;
    color: #fff !important;
    font-size: 14px;
    line-height: 1.4;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form > button[type="submit"]:hover:not(:disabled) {
    background: linear-gradient(110deg, #5725bb, #123fba) !important;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > p:has(> a[href^="/payroll/batches?"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > p > a {
    display: inline-block;
    padding: 9px 12px;
    border: 1px solid #aebfe7;
    border-radius: 7px;
    background: #fff;
    color: #2344a0 !important;
    text-decoration: none;
    font-size: 14px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > h2 + p,
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > h2 + div[style="overflow-x:auto;"] {
    margin: 0;
    padding: 16px 22px 22px;
    background: #fff;
    border: 1px solid #cbd5e8;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    color: #52617b !important;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > h2 + p:has(+ form) {
    padding: 0 22px 18px;
    border-bottom: 0;
    border-radius: 0;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > div[style="overflow-x:auto;"] table {
    width: 100%;
    min-width: 950px;
    border-collapse: collapse;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > div[style="overflow-x:auto;"] :is(th, td) {
    padding: 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #d5dbe8;
}

html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > label:nth-of-type(1) { grid-column: 1; grid-row: 1; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > [name="provider_code"] { grid-column: 1; grid-row: 2; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > label:nth-of-type(2) { grid-column: 2; grid-row: 1; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > [name="provider_name"] { grid-column: 2; grid-row: 2; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > label:nth-of-type(3) { grid-column: 1; grid-row: 4; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > [name="provider_type"] { grid-column: 1; grid-row: 5; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > label:nth-of-type(4) { grid-column: 2; grid-row: 4; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > [name="payment_method"] { grid-column: 2; grid-row: 5; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > label:nth-of-type(5) { grid-column: 1; grid-row: 7; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > [name="integration_mode"] { grid-column: 1; grid-row: 8; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > label:nth-of-type(6) { grid-column: 2; grid-row: 7; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > [name="currency_code"] { grid-column: 2; grid-row: 8; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > label:nth-of-type(7) { grid-column: 1; grid-row: 10; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > [name="endpoint_base_url"] { grid-column: 1; grid-row: 11; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > label:nth-of-type(8) { grid-column: 2; grid-row: 10; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > [name="auth_mode"] { grid-column: 2; grid-row: 11; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > label:nth-of-type(9) { grid-column: 1; grid-row: 13; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > [name="credential_reference"] { grid-column: 1; grid-row: 14; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > label:nth-of-type(10) { grid-column: 2; grid-row: 13; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > [name="webhook_enabled"] { grid-column: 2; grid-row: 14; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > label:nth-of-type(11) { grid-column: 1; grid-row: 16; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > [name="webhook_secret_reference"] { grid-column: 1; grid-row: 17; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > small:nth-of-type(1) { grid-column: 1; grid-row: 12; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > small:nth-of-type(2) { grid-column: 1; grid-row: 15; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > small:nth-of-type(3) { grid-column: 1; grid-row: 18; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers/create"] > button { grid-row: 19; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers"] > label:nth-of-type(1) { grid-column: 1; grid-row: 1; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers"] > select:nth-of-type(1) { grid-column: 1; grid-row: 2; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers"] > label:nth-of-type(2) { grid-column: 2; grid-row: 1; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers"] > select:nth-of-type(2) { grid-column: 2; grid-row: 2; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers"] > label:nth-of-type(3) { grid-column: 3; grid-row: 1; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers"] > select:nth-of-type(3) { grid-column: 3; grid-row: 2; }
@media (max-width: 1100px) {
    html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form,
    html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form[action="/payroll/providers"] {
        grid-template-columns: minmax(0, 1fr);
    }
    html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form > :is(label, select, input:not([type="hidden"]), small, button) {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form > label:not(:first-of-type) {
        margin-top: 10px;
    }
    html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/providers']) > form > button[type="submit"] {
        justify-self: start;
    }
}


/* NEXORA-REPORTS-UI-01 — Payroll Reports presentation only */
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > h2 {
    margin: 28px 0 0;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #cbd5e8;
    border-radius: 10px;
    color: #101650 !important;
    font-size: 18px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > h2:has(+ form),
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > h2:has(+ p),
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > h2:has(+ div) {
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
    margin: 0;
    padding: 0 22px 22px;
    background: #fff;
    border: 1px solid #cbd5e8;
    border-top: 0;
    border-radius: 0 0 10px 10px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > label {
    margin: 0;
    align-self: end;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > input,
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 7px;
    font: inherit;
    font-size: 14px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > input[name="run_id"] {
    max-width: 180px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > input[type="date"] {
    max-width: 280px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > button[type="submit"] {
    grid-column: 2;
    grid-row: 6;
    justify-self: end;
    align-self: end;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid #164cdb !important;
    border-radius: 7px;
    background: linear-gradient(110deg, #6931d6, #164cdb) !important;
    color: #fff !important;
    font-size: 14px;
    line-height: 1.4;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > button[type="submit"]:hover:not(:disabled) {
    background: linear-gradient(110deg, #5725bb, #123fba) !important;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > p:has(> a[href^="/payroll?"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > p > a {
    display: inline-block;
    padding: 9px 12px;
    border: 1px solid #aebfe7;
    border-radius: 7px;
    background: #fff;
    color: #2344a0 !important;
    text-decoration: none;
    font-size: 14px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > h2 ~ p,
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > div[style="overflow-x:auto;"] {
    margin: 0;
    padding: 16px 22px 22px;
    background: #fff;
    border: 1px solid #cbd5e8;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    color: #52617b !important;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > h2 ~ p:has(+ div[style="overflow-x:auto;"]),
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > h2 ~ p:has(+ p) {
    border-bottom: 0;
    border-radius: 0;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > .error-message {
    margin: 0;
    padding: 16px 22px;
    border-radius: 0 0 10px 10px;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > div[style="overflow-x:auto;"] table {
    width: 100%;
    min-width: 1150px;
    border-collapse: collapse;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > div[style="overflow-x:auto;"] :is(th, td) {
    padding: 12px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #d5dbe8;
    overflow-wrap: anywhere;
}
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > div[style="overflow-x:auto;"] td {
    font-variant-numeric: tabular-nums;
}

html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > label:nth-of-type(1) { grid-column: 1; grid-row: 1; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > [name="organization_id"] { grid-column: 1; grid-row: 2; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > label:nth-of-type(2) { grid-column: 2; grid-row: 1; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > [name="run_id"] { grid-column: 2; grid-row: 2; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > label:nth-of-type(3) { grid-column: 1; grid-row: 3; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > [name="period_start"] { grid-column: 1; grid-row: 4; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > label:nth-of-type(4) { grid-column: 2; grid-row: 3; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > [name="period_end"] { grid-column: 2; grid-row: 4; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > label:nth-of-type(5) { grid-column: 1; grid-row: 5; }
html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > [name="employee_id"] { grid-column: 1; grid-row: 6; }
@media (max-width: 900px) {
    html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form {
        grid-template-columns: minmax(0, 1fr);
    }
    html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > :is(label, input, select, button) {
        grid-column: 1 !important;
        grid-row: auto !important;
    }
    html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > label:not(:first-of-type) {
        margin-top: 8px;
    }
    html body .layout .main .content.payroll-family-content:has(> form[action='/payroll/reports']) > form > button[type="submit"] {
        justify-self: start;
        margin-top: 8px;
    }
}


/* NEXORA-FIELD-FORM-SPACING-01 — creation form spacing only */
.content #new-task > form[action="/field/tasks/create"] > .form-field,
.content #new-visit > form[action="/field/visits/create"] > .form-field {
    min-width: 0;
}

.content #new-task textarea[name="instructions"],
.content #new-visit textarea[name="instructions"] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 112px;
    padding: 10px 12px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
}

.content #new-task label:has(> input[name="completion_required"]) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    max-width: 100%;
    line-height: 1.5;
}

.content #new-task input[type="checkbox"][name="completion_required"] {
    box-sizing: border-box;
    width: 18px !important;
    height: 18px;
    min-width: 18px;
    flex: 0 0 18px;
    margin: 0;
    padding: 0;
}


/* NEXORA-VISIT-HELP-CONTRAST-01 */
.content #new-visit .form-field > small,
.content #new-visit #visit-map-info {
    color: #52617b !important;
    opacity: 1 !important;
    line-height: 1.5;
}


/* NEXORA-PLACE-FORM-01 — Place Directory presentation only */
.content #place-form > .form-field {
    min-width: 0;
}
.content #place-form textarea[name="address_text"],
.content #place-form textarea[name="notes"] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 10px 12px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
}
.content #place-form textarea[name="address_text"] {
    min-height: 88px;
}
.content #place-form textarea[name="notes"] {
    min-height: 112px;
}
.content #place-form .form-field > small {
    display: block;
    margin-top: 8px;
    color: #52617b !important;
    opacity: 1 !important;
    line-height: 1.5;
}


/* NEXORA-NOTICE-FORM-01 */
.content form[action="/field/notices/create"] > .form-field { min-width: 0; }
.content form[action="/field/notices/create"] textarea[name="notice_body"] {
    display: block; box-sizing: border-box;
    width: 100%; max-width: 100%; min-height: 180px;
    padding: 10px 12px; border-radius: 7px;
    font-family: inherit; font-size: 14px;
    line-height: 1.5; resize: vertical;
}
.content form[action="/field/notices/create"] label:has(> input[name="acknowledgement_required"]) {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0; max-width: 100%; line-height: 1.5;
}
.content form[action="/field/notices/create"] input[type="checkbox"][name="acknowledgement_required"] {
    box-sizing: border-box; width: 18px !important;
    height: 18px; min-width: 18px; flex: 0 0 18px;
    margin: 0; padding: 0;
}
.content form[action="/field/notices/create"] #audience-selected > small {
    display: block; margin-top: 8px;
    color: #52617b !important; opacity: 1 !important;
    line-height: 1.5;
}


/* NEXORA-EXPENSE-FILTER-01 */
.content .expense-header:has(> form[action="/expense"]) {
    align-items: center;
}
.layout .main .content .expense-header > form.expense-filter[action="/expense"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    box-sizing: border-box;
    width: min(100%, 460px);
    max-width: 100%;
    padding: 16px;
    margin: 0;
    background: #fff !important;
    border: 1px solid #cbd5e8 !important;
    border-radius: 10px;
}
.layout .main .content .expense-header > form.expense-filter[action="/expense"] > div { min-width: 0; }
.layout .main .content .expense-header > form.expense-filter[action="/expense"] > div > label { margin: 0 0 8px; }
.layout .main .content .expense-header > form.expense-filter[action="/expense"] > div > br { display: none; }
.layout .main .content .expense-header > form.expense-filter[action="/expense"] select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 14px;
}
.layout .main .content .expense-header > form.expense-filter[action="/expense"] > button[type="submit"] {
    min-height: 40px;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid #164cdb !important;
    border-radius: 7px;
    background: linear-gradient(110deg, #6931d6, #164cdb) !important;
    color: #fff !important;
    font-size: 14px;
    line-height: 1.4;
}
.layout .main .content .expense-header > form.expense-filter[action="/expense"] > button[type="submit"]:hover:not(:disabled) {
    background: linear-gradient(110deg, #5725bb, #123fba) !important;
}
@media (max-width: 600px) {
    .layout .main .content .expense-header > form.expense-filter[action="/expense"] { grid-template-columns: minmax(0, 1fr); }
    .layout .main .content .expense-header > form.expense-filter[action="/expense"] > button[type="submit"] { justify-self: start; }
}


/* NEXORA-EXPENSE-REPORTS-01 — buttons and heading contrast only */
.layout .main .content:has(.report-card > form[action="/expense/reports"]) > .report-card > h3 {
    color: #101650 !important;
    opacity: 1 !important;
}
.layout .main .content:has(.report-card > form[action="/expense/reports"]) .report-card > form[action="/expense/reports"] > p > button[type="submit"] {
    padding: 10px 16px;
    border: 1px solid #164cdb !important;
    border-radius: 7px;
    background: linear-gradient(110deg, #6931d6, #164cdb) !important;
    color: #fff !important;
    font-size: 14px;
    line-height: 1.4;
}
.layout .main .content:has(.report-card > form[action="/expense/reports"]) .report-card > form[action="/expense/reports"] > p > button[type="submit"]:hover:not(:disabled) {
    background: linear-gradient(110deg, #5725bb, #123fba) !important;
}


/* NEXORA-ATTENDANCE-EMPTY-01 */
.content > .panel:has(form[action="/attendance/finalize"]) > .empty-state {
    color: #52617b !important;
    opacity: 1 !important;
}


/* NEXORA-POLICY-CHECKBOX-01 */
.content form[action^="/attendance/policies/"] .form-field > label:has(> input[type="checkbox"]) {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0 !important;
    max-width: 100%;
    line-height: 1.5;
}
.content form[action^="/attendance/policies/"] .form-field > label > input[type="checkbox"] {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px;
    margin: 0 !important;
    padding: 0 !important;
}


/* NEXORA-PLAYBACK-UI-01 */
.content #playback-panel > div:first-child {
    color: #101650 !important;
}
.content #playback-panel label {
    color: #52617b !important;
    opacity: 1 !important;
}
.content #playback-panel button {
    border: 1px solid #164cdb !important;
    border-radius: 7px;
    font-family: inherit;
    font-weight: 600;
}
.content #playback-panel button:not(:disabled) {
    background: linear-gradient(110deg, #6931d6, #164cdb) !important;
    color: #ffffff !important;
}
.content #playback-panel button:disabled {
    background: #eaf0ff !important;
    color: #52617b !important;
    border-color: #cbd5e8 !important;
    opacity: 1 !important;
    cursor: not-allowed;
}