/* =============================================================================
   Royex Payroll - application styles
   Layout mirrors the reference product: dark top bar, light sidebar, white content.
   Logical properties (margin-inline, inset-inline...) keep English (LTR) and Arabic (RTL) correct.
   ============================================================================= */
:root {
    --rx-primary: #408dfb;
    --rx-primary-dark: #2f75d9;
    --rx-primary-soft: #eaf2ff;
    --rx-navy: #1f2336;
    --rx-navy-2: #2c3250;
    --rx-text: #21263c;
    --rx-muted: #6c718a;
    --rx-border: #e7e9ef;
    --rx-bg: #f7f8fb;
    --rx-sidebar: #f7f8fb;
    --rx-success: #1f9d55;
    --rx-success-soft: #e7f6ee;
    --rx-warning: #f5a623;
    --rx-warning-soft: #fff6e5;
    --rx-danger: #e5484d;
    --rx-topbar-h: 43px;
    --rx-sidebar-w: 198px;
    --bs-primary: var(--rx-primary);
    --bs-primary-rgb: 64, 141, 251;
    --bs-body-color: var(--rx-text);
    --bs-body-font-size: 0.875rem;
    --bs-border-color: var(--rx-border);
}

html[lang="en"] body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html[lang="ar"] body { font-family: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif; }

body { color: var(--rx-text); font-size: 0.875rem; }
a { color: var(--rx-primary); text-decoration: none; }
a:hover { color: var(--rx-primary-dark); }
.min-w-0 { min-width: 0; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); display: inline-block; }
.skip-link { position: absolute; inset-inline-start: 1rem; top: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: 6px; }

/* ---- Buttons & form controls ------------------------------------------- */
.btn { border-radius: 6px; font-weight: 500; font-size: .8125rem; }
.btn-primary { --bs-btn-bg: var(--rx-primary); --bs-btn-border-color: var(--rx-primary); --bs-btn-hover-bg: var(--rx-primary-dark); --bs-btn-hover-border-color: var(--rx-primary-dark); --bs-btn-active-bg: var(--rx-primary-dark); --bs-btn-disabled-bg: var(--rx-primary); --bs-btn-disabled-border-color: var(--rx-primary); }
.btn-outline-primary { --bs-btn-color: var(--rx-primary); --bs-btn-border-color: var(--rx-primary); --bs-btn-hover-bg: var(--rx-primary); --bs-btn-hover-border-color: var(--rx-primary); }
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: #d6d9e2; --bs-btn-hover-bg: #f3f4f7; --bs-btn-hover-border-color: #c5c9d6; }
.btn-icon { border: 1px solid transparent; padding: .15rem .45rem; color: var(--rx-muted); }
.btn-icon:hover { border-color: var(--rx-border); background: #fff; }
.form-control, .form-select { font-size: .875rem; border-color: #d6d9e2; border-radius: 6px; }
.form-control:focus, .form-select:focus { border-color: var(--rx-primary); box-shadow: 0 0 0 .2rem rgba(64, 141, 251, .15); }
.form-control[readonly] { background: #f3f4f7; }
.form-label { font-weight: 500; margin-bottom: .35rem; }
.form-label.required::after { content: " *"; color: var(--rx-danger); }
.form-text { color: var(--rx-muted); font-size: .75rem; }
.input-validation-error { border-color: var(--rx-danger) !important; }
.field-validation-error, .invalid-feedback { color: var(--rx-danger); font-size: .75rem; }
.validation-summary-valid { display: none; }
.form-narrow { max-width: 640px; }
.form-actions { display: flex; align-items: center; gap: .75rem; justify-content: space-between; padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--rx-border); }

/* ---- Badges, pills, alerts --------------------------------------------- */
.badge { font-weight: 500; border-radius: 4px; }
.badge-soft-primary { background: var(--rx-primary-soft); color: var(--rx-primary-dark); }
.badge-soft-success { background: var(--rx-success-soft); color: var(--rx-success); }
.badge-soft-secondary { background: #eef0f4; color: var(--rx-muted); }
.phase-badge { display: inline-block; font-size: .6875rem; padding: 0 .35rem; border-radius: 4px; background: #eef0f4; color: var(--rx-muted); margin-inline-start: .25rem; }
.status-pill { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 500; }
.status-active { background: var(--rx-success-soft); color: var(--rx-success); }
.status-invited { background: var(--rx-warning-soft); color: #b7791f; }
.status-inactive { background: #eef0f4; color: var(--rx-muted); }
.alert-soft-info { background: var(--rx-primary-soft); border: 1px solid #d3e4ff; color: #22406e; border-radius: 8px; }
.alert-soft-success { background: var(--rx-success-soft); border: 1px solid #c9ebd8; color: #1b5e3b; border-radius: 8px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: .4rem; }
.dot-primary { background: var(--rx-primary); } .dot-warning { background: var(--rx-warning); } .dot-success { background: var(--rx-success); }

/* ---- Top bar ------------------------------------------------------------ */
.app-topbar { position: fixed; inset-inline: 0; top: 0; height: var(--rx-topbar-h); background: var(--rx-navy); color: #fff; display: flex; align-items: center; z-index: 1030; padding-inline-end: .75rem; }
.topbar-brand { width: var(--rx-sidebar-w); display: flex; align-items: center; gap: .5rem; padding-inline: .9rem; flex-shrink: 0; height: 100%; border-inline-end: 1px solid rgba(255, 255, 255, .12); transition: width .15s ease; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: #fff; font-size: 1.1rem; font-weight: 500; letter-spacing: .01em; }
.app-topbar .brand img { width: 22px; height: 22px; }
.brand:hover { color: #fff; }
.brand-dark, .brand-dark:hover { color: var(--rx-text); }
.topbar-search { position: relative; align-items: center; width: 268px; margin-inline-start: 1.6rem; }
.topbar-search-scope { position: absolute; inset-inline-start: .6rem; display: inline-flex; align-items: center; gap: .1rem; color: #d7dbe8; padding-inline-end: .55rem; border-inline-end: 1px solid rgba(255, 255, 255, .3); height: 16px; pointer-events: none; }
.topbar-search-scope .bi-search { font-size: .85rem; }
.topbar-search-scope .bi-caret-down-fill { font-size: .5rem; }
.topbar-search .form-control { background: #2a2f45; border: 1px solid rgba(255, 255, 255, .28); color: #fff; padding-inline-start: 3.1rem; height: 32px; font-size: .8rem; border-radius: 4px; }
.topbar-search .form-control:focus { background: #2a2f45; border-color: rgba(255, 255, 255, .55); box-shadow: none; }
.topbar-search .form-control::placeholder { color: #aab0c6; }
.topbar-right { margin-inline-start: auto; display: flex; align-items: center; gap: .35rem; min-width: 0; }
.topbar-trial { font-size: .75rem; color: #fff; }
.topbar-link { color: #5c9dff; }
.topbar-divider { width: 1px; height: 20px; background: rgba(255, 255, 255, .2); margin-inline: .35rem; }
.topbar-org { background: transparent; border: 0; color: #fff; font-weight: 500; font-size: .9rem; max-width: 220px; display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .5rem; border-radius: 6px; }
.topbar-org:hover { background: var(--rx-navy-2); }
.topbar-icon-btn { background: transparent; border: 0; color: #e3e6f0; height: 32px; min-width: 32px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border-radius: 6px; font-size: 1rem; }
.topbar-icon-btn:hover { background: var(--rx-navy-2); color: #fff; }
.topbar-lang span { font-size: .75rem; }
.topbar-avatar { width: 28px; height: 28px; border-radius: 50%; border: 0; background: #fbe3cf; color: #b8541a; font-weight: 600; font-size: .8rem; margin-inline-start: .35rem; }
.org-menu { width: 320px; max-height: 70vh; overflow-y: auto; padding: .25rem; }
.org-menu-header { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--rx-muted); padding: .5rem .75rem; }
.org-menu-item { display: flex; align-items: center; gap: .6rem; border-radius: 6px; white-space: normal; }
.org-menu-item.active, .org-menu-item:disabled { background: var(--rx-primary-soft); color: var(--rx-text); opacity: 1; }
.org-menu-text { flex: 1; min-width: 0; text-align: start; }
.org-avatar { width: 32px; height: 32px; border-radius: 8px; background: var(--rx-primary-soft); color: var(--rx-primary-dark); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.org-avatar-lg { width: 44px; height: 44px; font-size: 1.1rem; }
/* Profile panel (avatar) */
.profile-panel { --bs-offcanvas-width: 380px; }
.profile-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1.25rem 1.25rem .5rem; }
.profile-panel-avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; background: #fde7d9; color: #c2410c; font-size: 1.35rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.profile-panel-ids { padding: 0 1.25rem; color: var(--bs-secondary-color); padding-inline-start: calc(1.25rem + 52px + 1rem); }
.profile-panel-actions { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.25rem; padding-inline-start: calc(1.25rem + 52px + 1rem); border-bottom: 1px solid var(--bs-border-color); }
.profile-panel-body { padding: 1.25rem; overflow-y: auto; background: #f8f9fb; flex: 1; }
.profile-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.profile-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 92px; padding: .75rem .35rem; background: #fff; border: 1px solid #e3e6ec; border-radius: 6px; color: var(--bs-body-color); text-decoration: none; font-size: .78rem; line-height: 1.25; text-align: center; transition: border-color .15s, box-shadow .15s; }
.profile-tile span { display: block; max-width: 100%; overflow-wrap: anywhere; }
.profile-tile:hover { box-shadow: 0 2px 8px rgba(30, 40, 70, .08); }
.profile-tile:hover { border-color: #408dfb; color: #408dfb; }
.profile-tile .bi { font-size: 1.2rem; color: #408dfb; }
.profile-section { margin-top: 1.5rem; }
.profile-panel-body > .profile-section:first-child { margin-top: 0; }
.profile-section-title { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); margin-bottom: .75rem; }
.profile-help { list-style: none; padding: 0; margin: 0; background: #fff; border: 1px solid var(--bs-border-color); border-radius: .5rem; }
.profile-help li { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 1rem; font-size: .875rem; }
.profile-help li + li { border-top: 1px solid var(--bs-border-color); }
.profile-help li > .bi { color: #408dfb; margin-top: .1rem; }
.profile-help a { color: var(--bs-body-color); text-decoration: none; flex: 1; display: flex; justify-content: space-between; align-items: center; }
.profile-help a:hover { color: #408dfb; }
.account-page { max-width: 820px; }

/* ---- Shell & sidebar ---------------------------------------------------- */
.app-body { background: #fff; }
.app-shell { padding-top: var(--rx-topbar-h); min-height: 100vh; }
.app-sidebar { position: fixed; top: var(--rx-topbar-h); bottom: 0; inset-inline-start: 0; width: var(--rx-sidebar-w); background: var(--rx-sidebar); border-inline-end: 1px solid #e6e8ee; z-index: 1020; transition: width .15s ease, transform .15s ease; display: flex; flex-direction: column; }
.side-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: .9rem .55rem 3rem; }
.side-nav { list-style: none; padding: 0; margin: 0 0 .75rem; }
.side-nav-secondary { padding-top: .75rem; border-top: 1px solid #e3e6ec; margin-inline: -.55rem; padding-inline: .55rem; }
.side-link { display: flex; align-items: center; gap: .65rem; padding: .38rem .8rem; border-radius: 4px; color: #21263c; margin-bottom: 3px; white-space: nowrap; font-size: .8125rem; }
.side-link .bi { font-size: .95rem; color: #3f4556; width: 1rem; text-align: center; }
.side-link:hover { background: #eceff5; color: #21263c; }
.side-link.active { background: var(--rx-primary); color: #fff; }
.side-link.active .bi { color: #fff; }
.side-support { display: flex; align-items: center; gap: .45rem; width: calc(100% + 1.1rem); margin-inline: -.55rem; padding: .85rem 1.5rem; border: 0; border-top: 1px solid #e3e6ec; background: none; color: #21263c; font-size: .8125rem; text-align: start; }
.side-support .bi-headset { display: none; }
.side-support-chevron { font-size: .65rem; }
.side-support:hover { color: var(--rx-primary); }
.side-collapse { position: absolute; bottom: 0; inset-inline-end: 0; border: 0; border-inline-start: 1px solid #e3e6ec; border-top: 1px solid #e3e6ec; background: #eceff6; width: 36px; height: 36px; color: #3f4556; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; }
.side-collapse:hover { background: #e2e6f0; }
.side-collapse-closed { display: none; }
.app-main { margin-inline-start: var(--rx-sidebar-w); min-height: calc(100vh - var(--rx-topbar-h)); transition: margin .15s ease; }

/* Collapsed sidebar: icon with a small label underneath, as in the reference product. */
body.sidebar-collapsed { --rx-sidebar-w: 64px; }
body.sidebar-collapsed .topbar-brand { width: auto; min-width: 64px; justify-content: center; }
body.sidebar-collapsed .topbar-brand .brand span { display: none; }
body.sidebar-collapsed .side-scroll { padding-inline: .35rem; }
body.sidebar-collapsed .side-link { flex-direction: column; gap: .2rem; padding: .5rem .1rem; justify-content: center; text-align: center; }
body.sidebar-collapsed .side-link span { font-size: .625rem; line-height: 1.15; white-space: normal; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body.sidebar-collapsed .side-link .bi { font-size: 1rem; }
body.sidebar-collapsed .side-nav-secondary { margin-inline: -.35rem; padding-inline: .35rem; }
body.sidebar-collapsed .side-support { flex-direction: column; gap: .2rem; padding: .7rem .1rem; margin-inline: -.35rem; width: calc(100% + .7rem); font-size: .625rem; text-align: center; }
body.sidebar-collapsed .side-support .bi-headset { display: inline-block; font-size: 1rem; }
body.sidebar-collapsed .side-support-chevron { display: none; }
body.sidebar-collapsed .side-collapse { width: 100%; border-inline-start: 0; }
body.sidebar-collapsed .side-collapse-open { display: none; }
body.sidebar-collapsed .side-collapse-closed { display: inline-block; }

@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); width: 240px; box-shadow: 0 0 24px rgba(0, 0, 0, .12); }
    [dir="rtl"] .app-sidebar { transform: translateX(100%); }
    body.sidebar-open .app-sidebar { transform: none; }
    .app-main { margin-inline-start: 0; }
    .topbar-brand { width: auto; }
}

/* ---- Pages -------------------------------------------------------------- */
.page-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--rx-border); }
.page-title { font-size: 1.35rem; font-weight: 500; margin: 0; }
.page-subtitle { color: var(--rx-muted); margin: .15rem 0 0; }
.page-body { padding: 1.25rem 1.5rem 2rem; background: var(--rx-bg); min-height: calc(100vh - 140px); }
.card-panel { background: #fff; border: 1px solid var(--rx-border); border-radius: 10px; padding: 1.1rem 1.25rem; }
.card-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.card-panel-header h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.stat-big { font-size: 2rem; font-weight: 600; line-height: 1.1; }
.stat-split { display: flex; flex-direction: column; gap: .5rem; }
.stat-split > div { display: flex; align-items: center; }
.stat-split strong { margin-inline-start: auto; }
.chart-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: .5rem; align-items: end; height: 170px; border-bottom: 1px solid var(--rx-border); padding-bottom: .25rem; }
.chart-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .25rem; }
.chart-bar-fill { width: 60%; background: var(--rx-primary-soft); border-radius: 4px 4px 0 0; }
.chart-bar small { color: var(--rx-muted); font-size: .6875rem; }
.empty-state { text-align: center; padding: 2.5rem 1rem; }
.empty-state-sm { padding: 1.25rem 1rem; }
.empty-state-icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: var(--rx-primary-soft); color: var(--rx-primary); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }

/* ---- Tables & lists ----------------------------------------------------- */
.data-table { font-size: .875rem; margin-bottom: 0; }
.data-table thead th { background: #f9fafc; color: var(--rx-muted); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--rx-border); padding: .7rem .9rem; white-space: nowrap; }
html[lang="ar"] .data-table thead th { text-transform: none; letter-spacing: 0; font-size: .75rem; }
.data-table tbody td { padding: .75rem .9rem; border-color: #f0f1f5; }
.data-table tbody tr:hover { background: #fafbfd; }
.cell-wide { max-width: 360px; }
.sort-link { color: inherit; display: inline-flex; align-items: center; gap: .25rem; }
.sort-link.active, .sort-link:hover { color: var(--rx-text); }
.row-link { font-weight: 500; }
.list-search { position: relative; }
.list-search .bi { position: absolute; inset-inline-start: .6rem; top: 50%; transform: translateY(-50%); color: var(--rx-muted); font-size: .8rem; }
.list-search .form-control { padding-inline-start: 1.8rem; width: 220px; }
.list-footer { display: flex; justify-content: space-between; align-items: center; padding: .75rem .25rem; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; background: #fde7d9; color: #c2410c; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.location-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.location-card { border: 1px solid var(--rx-border); border-radius: 10px; padding: 1rem; background: #fff; }
.location-card address { line-height: 1.5; }

/* ---- Toasts & modals ---------------------------------------------------- */
.toast-container { z-index: 2000; }
.app-toast { color: #fff; border-radius: 8px; min-width: 280px; }
.app-toast-success { background: #1f2937; }
.app-toast-success .bi { color: #4ade80; }
.app-toast-danger { background: #b42318; }
.app-toast .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.modal-content { border: 0; border-radius: 10px; }
.modal-header { border-bottom: 1px solid var(--rx-border); }
.modal-footer { justify-content: flex-start; border-top: 1px solid var(--rx-border); }
.modal-loading { padding: 3rem; text-align: center; color: var(--rx-muted); }

/* ---- Auth & onboarding -------------------------------------------------- */
.auth-body { background: var(--rx-bg); min-height: 100vh; display: flex; flex-direction: column; }
.auth-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background: #fff; border-bottom: 1px solid var(--rx-border); }
.auth-main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 3rem 1rem; }
.auth-footer { text-align: center; color: var(--rx-muted); font-size: .75rem; padding: 1rem; }
.auth-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--rx-border); border-radius: 12px; padding: 2rem; box-shadow: 0 8px 30px rgba(33, 38, 60, .06); }
.auth-title { font-size: 1.4rem; font-weight: 600; margin-bottom: .35rem; }
.auth-subtitle { color: var(--rx-muted); margin-bottom: 1.5rem; }
.auth-icon { font-size: 2rem; color: var(--rx-primary); margin-bottom: .5rem; }
.setup-wrap { width: 100%; max-width: 1040px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 2rem; }
.setup-aside { padding-top: 1rem; }
.setup-points { list-style: none; padding: 0; margin-top: 1.5rem; }
.setup-points li { display: flex; gap: .6rem; margin-bottom: .75rem; }
.setup-points .bi { color: var(--rx-success); }
.setup-card { background: #fff; border: 1px solid var(--rx-border); border-radius: 12px; padding: 2rem; box-shadow: 0 8px 30px rgba(33, 38, 60, .06); }
@media (max-width: 991.98px) { .setup-wrap { grid-template-columns: 1fr; } }
.org-select { width: 100%; max-width: 760px; }
.org-list-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }

/* ---- Settings ----------------------------------------------------------- */
.settings-body { background: var(--rx-bg); }
.settings-topbar { position: sticky; top: 0; z-index: 1030; height: 64px; background: #fff; border-bottom: 1px solid var(--rx-border); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: 1.25rem; gap: 1rem; }
.settings-topbar > :last-child { justify-self: end; }
.settings-brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.settings-back { width: 28px; height: 28px; border: 1px solid var(--rx-border); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--rx-text); }
.settings-title { font-size: 1.05rem; font-weight: 600; line-height: 1.2; }
.settings-org { font-size: .75rem; color: var(--rx-muted); }
.settings-search { position: relative; width: min(360px, 40vw); }
.settings-search > .bi { position: absolute; inset-inline-start: .75rem; top: 50%; transform: translateY(-50%); color: var(--rx-muted); }
.settings-search .form-control { background: #f3f4f8; border-color: transparent; padding-inline-start: 2.1rem; height: 36px; }
.settings-search-results { width: 100%; top: 40px; inset-inline-start: 0; max-height: 360px; overflow-y: auto; }
.settings-search-results.show { display: block; }
.btn-close-settings { background: #f3f4f8; border: 1px solid var(--rx-border); }
.settings-home { max-width: 1060px; margin: 2rem auto; padding-inline: 1rem; }
.settings-section { background: #fff; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 1px 2px rgba(33, 38, 60, .04); }
.settings-section-title { font-size: 1.05rem; font-weight: 500; margin-bottom: 1.25rem; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.settings-card { border: 1px solid var(--rx-border); border-radius: 10px; padding: .5rem; }
.settings-card-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: 8px; font-weight: 600; margin-bottom: .5rem; }
.tone-green { background: linear-gradient(90deg, #e8f7ef, #fff); } .tone-green .bi { color: #16a34a; }
.tone-blue { background: linear-gradient(90deg, #eaf2ff, #fff); } .tone-blue .bi { color: var(--rx-primary); }
.tone-orange { background: linear-gradient(90deg, #fff1e6, #fff); } .tone-orange .bi { color: #ea580c; }
.tone-teal { background: linear-gradient(90deg, #e6f7f5, #fff); } .tone-teal .bi { color: #0d9488; }
.tone-indigo { background: linear-gradient(90deg, #eef0ff, #fff); } .tone-indigo .bi { color: #4f46e5; }
[dir="rtl"] .settings-card-head { background-image: none; }
.settings-card-list { list-style: none; padding: 0 .6rem; margin: 0 0 .5rem; }
.settings-card-list li { padding: .45rem 0; }
.settings-card-list a { color: var(--rx-text); }
.settings-card-list a:hover { color: var(--rx-primary); }
.settings-shell { display: flex; min-height: calc(100vh - 64px); }
.settings-nav { width: 230px; flex-shrink: 0; background: #fff; border-inline-end: 1px solid var(--rx-border); padding: 1rem .5rem 2rem; position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; }
.settings-nav-section { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--rx-muted); padding: .75rem .6rem .35rem; }
.settings-nav-toggle { width: 100%; text-align: start; background: transparent; border: 0; padding: .45rem .6rem; border-radius: 6px; display: flex; align-items: center; gap: .4rem; color: var(--rx-text); }
.settings-nav-toggle:hover { background: #f3f4f8; }
.settings-nav-toggle .chevron { font-size: .7rem; transition: transform .15s; }
.settings-nav-toggle:not(.collapsed) .chevron { transform: rotate(90deg); }
[dir="rtl"] .settings-nav-toggle:not(.collapsed) .chevron { transform: scaleX(-1) rotate(90deg); }
.settings-nav ul { list-style: none; padding: 0; margin: 0 0 .25rem; }
.settings-nav-link { display: block; padding: .4rem .6rem .4rem 1.6rem; border-radius: 6px; color: var(--rx-text); font-size: .8125rem; }
[dir="rtl"] .settings-nav-link { padding: .4rem 1.6rem .4rem .6rem; }
.settings-nav-link:hover { background: #f3f4f8; color: var(--rx-text); }
.settings-nav-link.active { background: var(--rx-primary); color: #fff; }
.settings-nav-link.disabled { color: #a0a5b8; cursor: default; }
.settings-main { flex: 1; min-width: 0; background: #fff; }
.settings-page-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--rx-border); }
.settings-page-title { font-size: 1.2rem; font-weight: 500; margin: 0; }
.settings-content { padding: 1.25rem 1.5rem 2rem; }
.logo-uploader { display: flex; gap: 1rem; align-items: flex-start; }
.logo-box { width: 180px; height: 72px; border: 1px dashed #c5c9d6; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fafbfd; flex-shrink: 0; }
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.contact-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; border: 1px solid var(--rx-border); border-radius: 10px; padding: 1rem 1.25rem; box-shadow: 0 1px 3px rgba(33, 38, 60, .05); }
.contact-icon { width: 30px; height: 30px; border-radius: 50%; background: #fff4e5; color: #ea580c; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 767.98px) { .contact-panel { grid-template-columns: 1fr; } .settings-nav { display: none; } .settings-topbar { grid-template-columns: 1fr auto; } .settings-search { display: none; } }
.perm-group { border: 1px solid var(--rx-border); border-radius: 10px; padding: 0 1rem 1rem; margin-bottom: 1rem; }
.perm-group-head { float: none; width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: .9rem; font-weight: 600; padding: .75rem 0; margin-bottom: .5rem; border-bottom: 1px solid var(--rx-border); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .35rem 1rem; }

/* =============================================================================
   Sign in (two-step card with illustration) and Sign up (split screen)
   ============================================================================= */
.signin-body {
    min-height: 100vh; display: flex; flex-direction: column;
    background:
        linear-gradient(115deg, rgba(255,255,255,.55) 0 18%, transparent 18% 100%),
        linear-gradient(245deg, rgba(255,255,255,.5) 0 22%, transparent 22% 100%),
        linear-gradient(160deg, #f1f1f1 0 55%, #f6f6f6 55% 100%);
}
.signin-body > main { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 7rem 1rem 3rem; }
.signin-lang { position: absolute; top: 1rem; inset-inline-end: 1.25rem; z-index: 10; }
.signin-footer { text-align: center; color: #555; font-size: .8125rem; padding: 2.5rem 1rem; background: #fff; }
.signin-card { width: 100%; max-width: 890px; min-height: 540px; display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-radius: 2px; box-shadow: 0 2px 30px rgba(0, 0, 0, .06); }
.signin-form { padding: 3rem 3.1rem; }
.signin-side { border-inline-start: 1px solid #ececec; padding: 3.5rem 2.5rem 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.signin-logo, .signup-logo { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.6rem; }
.signin-logo-text { display: flex; flex-direction: column; line-height: 1.05; font-size: 1.35rem; font-weight: 600; color: #111; }
.signin-logo-text small { font-size: .8rem; font-weight: 600; color: #333; }
.signin-title { font-size: 1.5rem; font-weight: 500; color: #000; margin-bottom: .2rem; }
.signin-subtitle { font-size: 1rem; color: #000; margin-bottom: 1.75rem; }
.signin-input { width: 100%; height: 44px; padding: 0 .9rem; font-size: 1rem; background: #f3f3f3; border: 1px solid #e0e0e0; border-radius: 2px; color: #000; }
.signin-input:focus { outline: none; border-color: var(--rx-primary); background: #fff; }
.signin-input::placeholder { color: #888; }
.signin-btn { width: 100%; height: 44px; margin-top: 1.75rem; background: var(--rx-primary); color: #fff; font-size: 1rem; font-weight: 600; border-radius: 2px; border: 0; }
.signin-btn:hover, .signin-btn:focus { background: var(--rx-primary-dark); color: #fff; }
.signin-chip { display: inline-flex; align-items: center; gap: .75rem; max-width: 100%; padding: .7rem .8rem; border: 1px solid #e6e6e6; border-radius: 4px; font-size: 1rem; margin-bottom: 1.25rem; }
.signin-chip .btn-link { font-size: .9rem; text-decoration: none; }
.signin-password { position: relative; }
.signin-password .signin-input { padding-inline-end: 2.75rem; }
.signin-eye { position: absolute; inset-inline-end: .5rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #888; font-size: 1.15rem; padding: .25rem .4rem; }
.signin-links { display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem; font-size: .875rem; }
.signin-links a { color: var(--rx-primary); }
.signin-error { color: #d93025; font-size: .875rem; margin-bottom: .75rem; }
.signin-error ul { list-style: none; padding: 0; margin: 0; }
.signin-error.validation-summary-valid { display: none; }
.signin-field-error { display: block; color: #d93025; font-size: .8125rem; margin-top: .35rem; }
.signin-alt { margin-top: 2rem; font-size: .875rem; color: #555; }
/* Two-step flow: enabled by site.js; without JavaScript both steps stay visible. */
form.js-steps .signin-step[data-step="password"] { display: none; }
form.js-steps.at-password .signin-step[data-step="email"] { display: none; }
form.js-steps.at-password .signin-step[data-step="password"] { display: block; }
.signin-illustration { width: 100%; max-width: 280px; margin-bottom: 1.75rem; }
.signin-slides { position: relative; min-height: 120px; width: 100%; }
.signin-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.signin-slide.active { opacity: 1; position: relative; }
.signin-slide h2 { font-size: 1.05rem; font-weight: 600; color: #000; margin-bottom: .75rem; }
.signin-slide p { font-size: .9rem; color: #222; line-height: 1.5; max-width: 320px; margin: 0 auto; }
.signin-dots { display: flex; gap: .35rem; margin-top: auto; padding-top: 1.5rem; }
.signin-dots button { width: 6px; height: 4px; border: 0; border-radius: 2px; background: #cfd8ff; padding: 0; transition: width .3s; }
.signin-dots button.active { width: 22px; background: #3d5afe; }
@media (max-width: 767.98px) {
    .signin-card { grid-template-columns: 1fr; min-height: 0; }
    .signin-side { display: none; }
    .signin-form { padding: 2rem 1.5rem; }
    .signin-body > main { padding-top: 4rem; }
}

.signup-body { background: #fff; min-height: 100vh; }
.signup-wrap { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 500px); justify-content: center; align-items: center; gap: 7rem; max-width: 1440px; min-height: 100vh; margin: 0 auto; padding: 4rem 3rem; }
.signup-quote { background: #f9f1ec; border-radius: 22px; display: flex; align-items: center; justify-content: center; padding: 3rem 4.5rem; min-height: min(810px, calc(100vh - 8rem)); }
.signup-quote-inner { max-width: 520px; text-align: center; }
.signup-quote-mark { font-family: Georgia, "Times New Roman", serif; font-size: 10rem; font-weight: 700; line-height: .75; height: 5.5rem; margin-bottom: .6rem; }
.signup-quote-mark span:first-child { color: #e03a1e; }
.signup-quote-mark span:last-child { color: #ffc4b8; margin-inline-start: -.9rem; }
.signup-quote-text { font-size: 1.9rem; font-weight: 700; line-height: 1.35; color: #000; margin-bottom: .6rem; }
.signup-quote-by { color: #c0392b; font-weight: 700; }
.signup-quote-role { color: #111; }
.signup-form { max-width: 500px; width: 100%; padding: 2rem 0; align-self: center; }
.signup-logo { margin-bottom: .1rem; }
.signup-title { font-size: 2rem; font-weight: 400; color: #000; margin-bottom: .35rem; }
.signup-field { margin-bottom: .85rem; }
.icon-input { position: relative; display: flex; align-items: center; border: 1px solid #d9d9d9; border-radius: 6px; background: #fff; height: 46px; }
.icon-input:focus-within { border-color: var(--rx-primary); box-shadow: 0 0 0 .15rem rgba(64, 141, 251, .12); }
.icon-input > .bi { position: absolute; inset-inline-start: .95rem; color: #666; font-size: .85rem; pointer-events: none; }
.icon-input .form-control, .icon-input .form-select { border: 0; box-shadow: none; height: 100%; background-color: transparent; padding-inline-start: 2.25rem; font-size: .95rem; }
.icon-input .form-select:disabled { background-color: transparent; color: #222; }
.icon-input .signin-eye { inset-inline-end: .35rem; }
.phone-input .phone-code { border: 0; background: transparent; padding-left: 2.25rem; padding-right: .25rem; color: #555; font-size: .95rem; height: 100%; }
.phone-input .phone-code:focus { outline: none; }
.phone-input .form-control { padding-left: .5rem; }
.signup-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.signup-row .signup-field { margin-bottom: 0; }
.signup-note { font-size: .78rem; color: #000; margin: .45rem 0 1.1rem; }
.signup-terms { font-size: .8125rem; margin-bottom: 1rem; }
.signup-terms a { color: #1f2430; text-decoration: underline; text-underline-offset: 2px; }
.signup-terms a:hover { color: #e8453c; }
.signup-btn { width: 100%; height: 42px; background: #f33c3c; border-color: #f33c3c; color: #fff; font-weight: 600; border-radius: 6px; }
.signup-btn:hover, .signup-btn:focus { background: #dc2f2f; color: #fff; }
.signup-alt { margin-top: 1.75rem; color: #222; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.signup-alt a { color: #6b2fbf; }
@media (max-width: 1199.98px) { .signup-wrap { gap: 3rem; padding: 0 2rem; } .signup-quote-text { font-size: 1.5rem; } }
@media (max-width: 991.98px) {
    .signup-wrap { grid-template-columns: 1fr; padding: 0 1.25rem; }
    .signup-quote { display: none; }
    .signup-form { margin: 0 auto; padding-top: 3.5rem; }
}

/* =============================================================================
   Layout v1.3 - dark top bar with the Payroll logo, light sidebar (as in the reference product)
   ============================================================================= */
.topbar-brand .topbar-icon-btn { color: #fff; }
@media (max-width: 991.98px) { .topbar-brand { width: auto; padding-inline-end: 1rem; } .topbar-search { margin-inline-start: .75rem; } }

/* Getting Started card in the sidebar */
.gs-card { display: block; border: 1px solid #e3e6ec; border-radius: 6px; padding: .6rem .7rem .7rem; margin: 0 .05rem 1rem; color: var(--rx-text); background: #fff; }
.gs-card:hover { color: var(--rx-text); border-color: #cfd4de; }
.gs-card-row { display: flex; align-items: center; gap: .45rem; font-weight: 500; font-size: .8125rem; }
.gs-card-icon { color: #f5a524; }
.gs-card-chevron { margin-inline-start: auto; font-size: .7rem; color: #9aa1b2; }
.gs-card-bar { display: block; height: 3px; border-radius: 2px; background: #e6e9f0; margin-top: .55rem; overflow: hidden; }
.gs-card-bar > span { display: block; height: 100%; background: var(--rx-primary); }
body.sidebar-collapsed .gs-card { padding: .5rem; text-align: center; }
body.sidebar-collapsed .gs-card-text, body.sidebar-collapsed .gs-card-chevron { display: none; }
body.sidebar-collapsed .gs-card-row { justify-content: center; }

/* Getting Started dashboard */
.gs-page { position: relative; background: #fff; min-height: calc(100vh - var(--rx-topbar-h)); padding: 2rem 1.5rem 4rem; }
.gs-confetti { position: absolute; inset-inline: 0; top: 0; height: 160px; background: url("../img/confetti.svg") top center / cover no-repeat; pointer-events: none; }
.gs-welcome { position: relative; text-align: center; max-width: 692px; margin: 0 auto 1.5rem; }
.gs-welcome h1 { font-size: 1.35rem; font-weight: 500; margin: 1rem 0 .6rem; }
.gs-welcome p { color: #4b5068; margin-bottom: .75rem; }
.gs-welcome hr { width: 32px; margin: 1.1rem auto; opacity: .25; }
.gs-help { font-size: .8125rem; }
.gs-card-main { position: relative; max-width: 692px; margin: 0 auto; border: 1px solid var(--rx-border); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(33, 38, 60, .04); }
.gs-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--rx-primary); color: #fff; padding: 1rem 1.4rem; }
.gs-head h2 { font-size: 1rem; font-weight: 600; margin: 0 0 .2rem; }
.gs-head p { font-size: .78rem; margin: 0; opacity: .95; }
.gs-head-progress { display: flex; align-items: center; gap: .9rem; flex-shrink: 0; font-size: .8125rem; }
.gs-head-bar { width: 92px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.gs-head-bar > span { display: block; height: 100%; background: #fff; }
.gs-steps { list-style: none; margin: 0; padding: .25rem 1.6rem; }
.gs-step { display: flex; align-items: center; gap: .9rem; padding: 1.3rem 0; border-bottom: 1px solid #eef0f4; }
.gs-step:last-child { border-bottom: 0; }
.gs-check { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #e3e5ec; color: #b8bcca; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; }
.gs-step.done .gs-check { background: #22b573; border-color: #22b573; color: #fff; }
.gs-step-name { color: var(--rx-text); font-size: .95rem; display: inline-flex; align-items: center; gap: .15rem; }
.gs-step-name .bi { font-size: .7rem; }
a.gs-step-name:hover { color: var(--rx-primary); }
.gs-step-action { margin-inline-start: auto; }
.gs-completed { color: #22b573; font-size: .72rem; font-weight: 600; letter-spacing: .04em; }
.gs-complete-btn { background: #eaf2ff; color: var(--rx-primary); font-size: .8125rem; padding: .35rem .7rem; border-radius: 4px; }
.gs-complete-btn:hover { background: #d9e8ff; color: var(--rx-primary-dark); }
.gs-phase { background: #f1f3f7; color: #6c718a; font-size: .75rem; padding: .35rem .7rem; border-radius: 4px; }
.gs-features { background: #fafbfc; border-top: 1px solid #eef0f4; padding: 1.5rem 1.6rem 1.75rem; }
.gs-features h3 { font-size: .72rem; font-weight: 600; letter-spacing: .06em; margin-bottom: 1.25rem; }
html[lang="ar"] .gs-features h3, html[lang="ar"] .gs-completed { letter-spacing: 0; }
.gs-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; }
.gs-feature { display: flex; flex-direction: column; align-items: center; gap: .6rem; font-size: .8125rem; color: var(--rx-text); }
.gs-feature-icon { width: 52px; height: 52px; border-radius: 10px; background: #fff; box-shadow: 0 1px 6px rgba(33, 38, 60, .08); display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; color: var(--rx-primary); }
@media (max-width: 575.98px) { .gs-head { flex-direction: column; align-items: flex-start; } .gs-feature-grid { grid-template-columns: repeat(2, 1fr); } }

/* Organization setup (after sign up) */
.setup-body { background: #f5f5f5; min-height: 100vh; }
.setup-page { position: relative; display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: 3rem; max-width: 1680px; min-height: 100vh; margin: 0 auto; padding: 3.8rem 7.5rem 0; }
.setup-topright { position: absolute; top: .75rem; inset-inline-end: 1rem; display: flex; align-items: center; gap: .5rem; }
.setup-avatar { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #fde7d9; color: #c2410c; font-weight: 600; }
.setup-intro { display: flex; flex-direction: column; padding-top: 2.6rem; }
.setup-hi { font-size: .9rem; margin: 2.2rem 0 1.6rem; }
.setup-heading { font-size: 2.25rem; font-weight: 400; line-height: 1.35; max-width: 420px; }
.setup-illustration { width: 384px; max-width: 100%; margin-top: auto; }
.setup-panel { background: #fff; border-radius: 10px 10px 0 0; padding: 2.8rem 2.75rem 2.5rem; align-self: start; }
.line-field { margin-bottom: 1.45rem; }
.line-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.line-label { display: block; font-size: .72rem; color: #111; margin-bottom: .3rem; }
.line-label.required::after, .line-group-title.required::after { content: "*"; color: var(--rx-danger); margin-inline-start: 2px; }
.line-input { width: 100%; border: 0; border-bottom: 1px solid #e3e3e3; border-radius: 0; padding: .45rem 0; font-size: .82rem; background: transparent; color: #111; }
.line-input:focus { outline: none; border-bottom-color: var(--rx-primary); }
.line-input::placeholder { color: #b5b5b5; }
.line-input[readonly] { background: transparent; }
.line-select { appearance: none; padding-inline-end: 1.5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' fill='none' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right .3rem center; }
[dir="rtl"] .line-select { background-position: left .3rem center; }
.line-select:invalid, .line-select option[value=""] { color: #b5b5b5; }
.line-select option { color: #111; }
.line-group { margin: .4rem 0 .6rem; }
.line-group-title { float: none; font-size: .88rem; font-weight: 500; margin-bottom: .3rem; }
.line-hint { font-size: .7rem; color: #555; margin-bottom: .6rem; }
.line-radio-group { font-size: .72rem; margin-bottom: 1.6rem; }
.line-radio-group legend { float: none; font-size: .78rem; font-weight: 500; }
.line-radio-group .form-check { margin-bottom: .3rem; }
.line-radio-group .form-check-input { margin-top: .15rem; }
.setup-btn { width: 100%; height: 50px; background: #1f6ff2; color: #fff; font-weight: 600; font-size: .95rem; border-radius: 4px; border: 0; }
.setup-btn:hover, .setup-btn:focus { background: #1a5fd0; color: #fff; }
@media (max-width: 1199.98px) { .setup-page { padding: 3.5rem 2rem 0; gap: 2rem; } }
@media (max-width: 991.98px) {
    .setup-page { grid-template-columns: 1fr; padding: 3.5rem 1rem 2rem; }
    .setup-intro { padding-top: 0; }
    .setup-heading { font-size: 1.6rem; }
    .setup-illustration { display: none; }
    .setup-panel { border-radius: 10px; padding: 2rem 1.5rem; }
}

/* =============================================================================
   Searchable dropdown (<select data-searchable>) - used on organization setup
   ============================================================================= */
.ss { position: relative; }
.ss-native { position: absolute !important; inset-inline-start: 0; bottom: 0; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.ss-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: transparent; border: 0; border-bottom: 1px solid #e3e3e3; padding: .45rem 0; font-size: .82rem; color: #111; text-align: start; cursor: pointer; }
.ss-trigger:focus-visible, .ss.open .ss-trigger { outline: none; border-bottom-color: var(--rx-primary); }
.ss-native.input-validation-error + .ss-trigger { border-bottom-color: var(--rx-danger); }
.ss-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-placeholder { color: #b5b5b5; }
.ss-chevron { font-size: .7rem; color: #666; transition: transform .15s; }
.ss.open .ss-chevron { transform: rotate(180deg); }
.ss-panel { display: none; position: absolute; z-index: 60; top: calc(100% + 4px); inset-inline: 0; min-width: 220px; background: #fff; border: 1px solid #e3e5ec; border-radius: 6px; box-shadow: 0 8px 24px rgba(33, 38, 60, .14); padding: .5rem; }
.ss.open .ss-panel { display: block; }
.ss-search { position: relative; }
.ss-search .bi { position: absolute; inset-inline-start: .6rem; top: 50%; transform: translateY(-50%); font-size: .75rem; color: #8a8fa5; }
.ss-search input { width: 100%; height: 32px; border: 1px solid #d6d9e2; border-radius: 4px; padding-inline: 1.8rem .6rem; font-size: .82rem; }
.ss-search input:focus { outline: none; border-color: var(--rx-primary); }
.ss-list { list-style: none; margin: .4rem 0 0; padding: 0; max-height: 230px; overflow-y: auto; }
.ss-option { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .6rem; border-radius: 4px; font-size: .82rem; color: #111; cursor: pointer; }
.ss-option.active { background: #eef4ff; }
.ss-option.selected { background: var(--rx-primary); color: #fff; }
.ss-option.selected.active { background: var(--rx-primary-dark); }
.ss-empty { padding: .5rem .6rem; font-size: .82rem; color: #8a8fa5; }

/* =============================================================================
   Phase 2 - payroll settings
   ============================================================================= */
.alert-soft-warning { background: var(--rx-warning-soft); border: 1px solid #fde3b0; color: #7a4d07; border-radius: 8px; }
.badge-soft-warning { background: var(--rx-warning-soft); color: #b7791f; font-weight: 500; }
.dotted { border-bottom: 1px dotted currentColor; cursor: help; }
.settings-block { padding: 1rem 0; border-bottom: 1px solid var(--rx-border); }
.settings-block:first-of-type { padding-top: 0; }
.form-actions-sticky { position: sticky; bottom: 0; background: #fff; z-index: 5; padding-bottom: .75rem; }
.amount-group { max-width: 320px; }
.amount-group .form-control { text-align: end; }
.field-row { display: grid; grid-template-columns: 140px 1fr; gap: .75rem; align-items: start; }
.field-row-label { padding-top: .45rem; }
@media (max-width: 575.98px) { .field-row { grid-template-columns: 1fr; gap: .25rem; } .field-row-label { padding-top: 0; } }

/* Role editor grid */
.perm-table { font-size: .8125rem; }
.perm-table thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .02em; color: var(--rx-muted); font-weight: 600; border-bottom-width: 1px; white-space: nowrap; }
.perm-table td, .perm-table th { padding: .5rem .6rem; }
.perm-table tbody th { min-width: 200px; }
.perm-flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .35rem 1.25rem; }

/* Pay schedule */
.summary-list { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 2rem; margin: 0; }
.summary-list dt { font-weight: 500; color: var(--rx-muted); }
.summary-list dd { margin: 0; font-weight: 500; }
.upcoming-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.upcoming-list li { display: flex; flex-direction: column; padding-inline-start: .9rem; border-inline-start: 3px solid var(--rx-primary); }
.day-picker { display: flex; flex-wrap: wrap; gap: .35rem; }
.day-picker .btn { min-width: 3.2rem; }

/* Social security */
.scheme-card { border: 1px solid var(--rx-border); border-radius: 10px; background: #fff; overflow: hidden; max-width: 900px; }
.scheme-card-head { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.1rem; border-bottom: 1px solid var(--rx-border); }
.scheme-card-foot { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1.1rem; border-top: 1px solid var(--rx-border); background: var(--rx-bg); font-size: .8125rem; color: var(--rx-muted); }
.scheme-card .data-table { margin: 0; }
.scheme-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--rx-success-soft); color: var(--rx-success); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.applicable-list li { padding: .3rem 0; border-bottom: 1px dashed var(--rx-border); }

/* Salary components */
.calc-inputs > div { margin-bottom: .75rem; max-width: 360px; }

/* Salary templates */
.feature-strip { border-top: 1px solid var(--rx-border); margin-top: 1rem; padding-top: 1.5rem; }
.template-builder { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 991.98px) { .template-builder { grid-template-columns: 1fr; } }
.template-rail { border: 1px solid var(--rx-border); border-radius: 10px; padding: 1rem; background: var(--rx-bg); position: sticky; top: 1rem; }
.template-rail-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.template-rail-item { width: 100%; text-align: start; border: 1px dashed #c9cfdc; background: #fff; border-radius: 6px; padding: .45rem .6rem; font-size: .8125rem; color: var(--rx-text); }
.template-rail-item:hover, .template-rail-item:focus-visible { border-color: var(--rx-primary); color: var(--rx-primary); }
.template-table thead th { font-size: .7rem; text-transform: uppercase; color: var(--rx-muted); font-weight: 600; }
.template-table .group-row th { background: var(--rx-bg); font-weight: 600; font-size: .8125rem; }
.template-table .total-row th, .template-table .total-row td { background: var(--rx-primary-soft); border-bottom: 0; }
.template-table .amount-input { width: 130px; text-align: end; }
.template-table .pct-input { width: 80px; text-align: end; }

/* Email templates */
.rte { border: 1px solid #d6d9e2; border-radius: 8px; background: #fff; }
.rte-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; padding: .35rem .5rem; border-bottom: 1px solid var(--rx-border); background: var(--rx-bg); border-radius: 8px 8px 0 0; }
.rte-sep { width: 1px; height: 20px; background: var(--rx-border); margin-inline: .25rem; }
.rte-content { min-height: 320px; padding: 1rem; outline: none; overflow-x: auto; }
.rte-content:focus { box-shadow: inset 0 0 0 2px rgba(64, 141, 251, .2); }
.rte-source { min-height: 320px; border: 0; border-radius: 0 0 8px 8px; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
.email-preview-body { background: #f5f7fa; padding: 1rem; border-radius: 8px; overflow-x: auto; }

/* Bank accounts */
.bank-card { position: relative; }
.bank-card.is-primary { border-color: #b9e3c9; }
.bank-ribbon { position: absolute; top: -1px; inset-inline-end: 3.5rem; background: var(--rx-success); color: #fff; font-size: .65rem; font-weight: 600; padding: .1rem .5rem; border-radius: 0 0 6px 6px; letter-spacing: .03em; }
.bank-fields { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; font-size: .8125rem; }
.bank-fields dt { color: var(--rx-muted); font-weight: 400; }
.bank-fields dd { margin: 0; }

/* Employee portal */
.portal-banner-preview { display: flex; gap: .5rem; align-items: flex-start; background: #fff8e6; border: 1px solid #fde3b0; border-radius: 8px; padding: .6rem .8rem; font-size: .8125rem; }

/* PDF templates */
.pdf-shell { display: flex; gap: 1.5rem; align-items: flex-start; }
.pdf-nav { width: 220px; flex-shrink: 0; border: 1px solid var(--rx-border); border-radius: 10px; padding: .75rem; position: sticky; top: 1rem; }
@media (max-width: 991.98px) { .pdf-shell { flex-direction: column; } .pdf-nav { width: 100%; position: static; } }
.pdf-nav-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--rx-muted); font-weight: 600; margin-bottom: .35rem; }
.pdf-nav-link { display: block; padding: .35rem .6rem; border-radius: 6px; color: var(--rx-text); font-size: .8125rem; }
.pdf-nav-link:hover { background: var(--rx-bg); color: var(--rx-text); }
.pdf-nav-link.active { background: var(--rx-primary); color: #fff; }
.layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.layout-card { position: relative; border: 1px solid var(--rx-border); border-radius: 10px; background: #fff; overflow: hidden; }
.layout-card.is-default { border-color: var(--rx-primary); box-shadow: 0 0 0 2px var(--rx-primary-soft); }
.layout-ribbon { position: absolute; top: .5rem; inset-inline-start: .5rem; background: var(--rx-primary); color: #fff; font-size: .6rem; font-weight: 700; padding: .1rem .4rem; border-radius: 4px; letter-spacing: .05em; }
.layout-card-body { padding: .6rem .75rem .75rem; border-top: 1px solid var(--rx-border); }
.layout-thumb { height: 170px; padding: 1.4rem 1.1rem .8rem; background: var(--rx-bg); display: flex; flex-direction: column; gap: .35rem; }
.layout-thumb span { display: block; border-radius: 2px; background: #d9dde7; height: 6px; }
.layout-thumb .t-head { height: 12px; width: 55%; background: #9aa3b8; }
.layout-thumb .t-card { height: 26px; width: 45%; background: #bfe6cf; margin-block: .2rem; }
.layout-thumb .t-row.short { width: 60%; }
.layout-thumb .t-total { height: 12px; margin-top: auto; background: #cfe0fb; }
.thumb-Standard .t-card, .thumb-Simple .t-card, .thumb-Mini .t-card { background: #d9dde7; }
.thumb-Standard .t-row { outline: 1px solid #c3c9d6; background: #fff; height: 8px; }
.thumb-Professional .t-head { width: 100%; height: 18px; background: var(--rx-navy); }
.thumb-SimpleSpreadsheet .t-row { background: #fff; outline: 1px solid #b8c0d0; height: 9px; }
.thumb-Lite .t-card { background: #eef0f4; }
.thumb-Mini { padding-inline: 2.2rem; }

/* Sample documents (PDF template previews) */
.doc-preview { background: #eef0f4; }
.doc-preview-inline { border-radius: 10px; padding: 1rem; max-height: 75vh; overflow: auto; }
.doc-page { background: #fff; color: #1f2933; max-width: 794px; margin: 0 auto 1rem; padding: 2rem 2.2rem; box-shadow: 0 2px 10px rgba(33, 38, 60, .12); font-size: .8125rem; line-height: 1.5; }
.doc-page[lang="ar"] { font-family: "IBM Plex Sans Arabic", "Inter", sans-serif; }
.doc-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid #e3e8ef; margin-bottom: 1rem; }
.doc-logo { max-height: 48px; max-width: 120px; }
.doc-org { font-size: 1.1rem; font-weight: 700; }
.doc-muted { color: #6b7785; }
.doc-period { text-align: end; }
.doc-title { text-align: center; font-weight: 700; font-size: 1rem; letter-spacing: .03em; margin: .5rem 0 1rem; }
.doc-summary { display: grid; grid-template-columns: 1fr 230px; gap: 1rem; margin-bottom: 1rem; }
.doc-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1rem; }
.doc-summary-grid div { display: grid; grid-template-columns: 110px 1fr; gap: .5rem; }
.doc-summary-grid span { color: #6b7785; }
.doc-netcard { border: 1px solid #c9ebd8; background: #f0faf4; border-radius: 8px; padding: .8rem 1rem; }
.doc-net-amount { font-size: 1.35rem; font-weight: 700; color: #1b5e3b; }
.doc-days { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; border-top: 1px dashed #c9ebd8; margin-top: .5rem; padding-top: .4rem; font-size: .75rem; }
.doc-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.doc-table th, .doc-table td { padding: .4rem .5rem; border-bottom: 1px solid #eef0f4; text-align: start; vertical-align: top; }
.doc-table thead th { font-size: .7rem; text-transform: uppercase; color: #6b7785; border-bottom: 1px solid #d6dbe5; }
.doc-table tfoot th { border-top: 1px solid #d6dbe5; }
.doc-table .num { text-align: end; white-space: nowrap; }
.doc-table-narrow { max-width: 420px; }
.doc-total { display: flex; justify-content: space-between; align-items: center; background: #f0faf4; border-radius: 8px; padding: .75rem 1rem; margin-bottom: .5rem; }
.doc-total-amount { font-size: 1.1rem; font-weight: 700; }
.doc-words { margin-bottom: 1rem; }
.doc-signs { display: flex; justify-content: space-between; gap: 1rem; margin: 2rem 0 1rem; font-weight: 600; }
.doc-declaration { border: 1px solid #e3e8ef; border-radius: 6px; padding: .8rem 1rem; font-size: .75rem; }
.doc-letter-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; font-weight: 500; }
.doc-bonus { border-inline-start: 3px solid var(--rx-success); padding-inline-start: .8rem; margin-bottom: 1rem; }
.doc-signature { margin-top: 2.5rem; padding-top: .5rem; border-top: 1px solid #1f2933; width: 220px; }
.doc-footer { text-align: center; color: #8a94a6; font-size: .7rem; margin-top: 1.5rem; }
@media (max-width: 767.98px) { .doc-summary { grid-template-columns: 1fr; } .doc-summary-grid { grid-template-columns: 1fr; } .doc-page { padding: 1.2rem; } }
/* Layout variations */
.doc-layout-Standard .doc-table th, .doc-layout-Standard .doc-table td,
.doc-layout-SimpleSpreadsheet .doc-table th, .doc-layout-SimpleSpreadsheet .doc-table td { border: 1px solid #c3c9d6; }
.doc-layout-Standard .doc-netcard, .doc-layout-Simple .doc-netcard, .doc-layout-Lite .doc-netcard { background: #fff; border-color: #d6dbe5; }
.doc-layout-Standard .doc-net-amount, .doc-layout-Simple .doc-net-amount { color: #1f2933; }
.doc-layout-Professional .doc-header { background: var(--rx-navy); color: #fff; margin: -2rem -2.2rem 1rem; padding: 1.2rem 2.2rem; border: 0; }
.doc-layout-Professional .doc-header .doc-muted { color: #c3c8da; }
.doc-layout-SimpleSpreadsheet .doc-table thead th { background: #eef2f8; }
.doc-layout-Lite .doc-total { background: #fff; border: 1px solid #e3e8ef; }
.doc-layout-Mini { max-width: 560px; font-size: .75rem; }
.doc-layout-Simple .doc-total { background: #f7f8fb; }
.doc-days span { white-space: nowrap; }

/* Pay schedule editor (matches the reference layout) */
.pay-schedule-form { max-width: 780px; }
.ps-section { padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
.ps-section + .ps-section { border-top: 0; }
.ps-heading { font-size: .95rem; font-weight: 600; margin-bottom: .75rem; }
.ps-label { margin-bottom: .5rem; }
.ps-label.required::after { content: "*"; color: var(--rx-danger); margin-inline-start: 1px; }
.ps-help { color: var(--rx-text); margin-bottom: .75rem; }
.ps-indent { margin-top: .6rem; padding-inline-start: 1.4rem; }
.ps-select { width: 270px; max-width: 100%; }
.ps-select-wide { width: 390px; }
.ps-day { width: 95px; }
.ps-note { margin-top: 1rem; padding-inline-start: .5rem; border-inline-start: 2px solid #c9ced9; font-size: .8125rem; }
.ps-actions { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--rx-border); padding-top: 1rem; margin-top: .5rem; }
.week-bar { display: inline-flex; flex-wrap: wrap; border: 1px solid #d6d9e2; border-radius: 2px; overflow: hidden; }
.week-day { min-width: 90px; text-align: center; padding: .4rem .75rem; font-size: .8125rem; cursor: pointer; background: #fff; border-inline-end: 1px solid #d6d9e2; margin: 0; user-select: none; }
.week-bar .week-day:last-of-type { border-inline-end: 0; }
.btn-check:checked + .week-day { background: #eaf2ff; color: var(--rx-text); box-shadow: inset 0 0 0 1px #a9c9fb; }
.btn-check:focus-visible + .week-day { outline: 2px solid var(--rx-primary); outline-offset: -2px; }
@media (max-width: 767.98px) { .week-day { min-width: 44px; padding-inline: .4rem; } }

/* Pay schedule: first payroll pay date, error box, WPS notice */
.missed-box { position: relative; max-width: 440px; background: #fdecec; border-radius: 4px; padding: 1rem 2.5rem 1rem 1rem; margin-bottom: 1.5rem; color: #3b1f1f; }
[dir="rtl"] .missed-box { padding: 1rem 1rem 1rem 2.5rem; }
.missed-box ul { margin: .4rem 0 0; padding-inline-start: 1.1rem; font-size: .8125rem; }
.missed-title { font-size: .9375rem; }
.missed-close { position: absolute; top: .6rem; inset-inline-end: .6rem; border: 0; background: transparent; color: #9aa0ad; font-size: .8rem; }
.ps-section.ps-section-divided { border-top: 1px solid #dfe3ea; padding-top: 1.5rem; margin-top: -.25rem; }
.date-field { position: relative; display: inline-block; }
.date-field .form-select { min-height: 38px; }
.date-popup { position: absolute; z-index: 40; top: -120px; inset-inline-start: calc(100% + 160px); width: 190px; background: #fff; border: 1px solid #d6d9e2; border-radius: 6px; box-shadow: 0 6px 20px rgba(33, 38, 60, .15); padding: .4rem .4rem .5rem; }
@media (max-width: 991.98px) { .date-popup { top: calc(100% + 4px); inset-inline-start: 0; } }
.date-popup-head { display: flex; justify-content: space-between; align-items: center; background: #f1f3f7; margin: -.4rem -.4rem .3rem; padding: .3rem .4rem; border-radius: 6px 6px 0 0; }
.date-title { font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.date-nav { border: 0; background: transparent; color: var(--rx-primary); padding: 0 .3rem; }
.date-nav:disabled { visibility: hidden; }
.date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; text-align: center; font-size: .72rem; }
.date-head { font-weight: 600; padding: .2rem 0; }
.date-head.is-sunday { color: var(--rx-danger); }
.date-cell { border: 0; background: transparent; padding: .22rem 0; font-size: .72rem; font-weight: 600; color: var(--rx-text); border-radius: 3px; }
.date-cell.is-period { background: #e6effc; }
.date-cell.is-other { color: #b3b8c4; font-weight: 400; }
.date-cell:disabled { color: #c9ccd4; font-weight: 400; cursor: default; }
.date-cell:not(:disabled):hover { outline: 1px solid var(--rx-primary); }
.date-cell.is-selected { background: #1f7a4d; color: #fff; }
.wps-notice { display: flex; gap: .5rem; max-width: 390px; background: #fdf0e6; border-radius: 4px; padding: .7rem .8rem; font-size: .75rem; line-height: 1.55; }
.wps-notice .bi { color: #f08c1a; margin-top: .1rem; }

/* Getting started: "Mark as Completed" on optional steps */
.gs-mark { display: inline-flex; align-items: center; gap: .6rem; margin-inline-start: .9rem; }
.gs-mark .btn-link { font-size: .875rem; text-decoration: none; color: var(--rx-primary); }
.gs-mark .btn-link:hover { text-decoration: underline; }
.gs-mark-dot { width: 4px; height: 4px; border-radius: 50%; background: #c3c8d6; }
a.gs-feature { color: var(--rx-text); text-decoration: none; }
a.gs-feature:hover { color: var(--rx-primary); }

/* Confirmation dialog: warning style (orange "!" icon, message, primary action first) */
.confirm-icon { display: none; }
.confirm-warning .modal-dialog { max-width: 540px; margin-top: 1.5rem; }
.confirm-warning .confirm-body { display: flex; gap: .9rem; align-items: flex-start; padding: 1.5rem 1.75rem .5rem; }
.confirm-warning .confirm-icon { display: inline-flex; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #f5a623; color: #fff; font-weight: 700; font-size: 1.2rem; align-items: center; justify-content: center; }
.confirm-warning #confirmModalTitle { display: none; }
.confirm-warning [data-confirm-message] { color: var(--rx-text) !important; font-size: .875rem !important; padding-top: .35rem; }
.confirm-warning .confirm-footer { justify-content: flex-end; flex-direction: row-reverse; padding: .5rem 1.75rem 1.5rem calc(1.75rem + 32px + .9rem); gap: .5rem; }
.confirm-warning .confirm-footer > * { margin: 0; }
[dir="rtl"] .confirm-warning .confirm-footer { padding: .5rem calc(1.75rem + 32px + .9rem) 1.5rem 1.75rem; }

/* ---- Employees: list ------------------------------------------------------------ */
.view-selector { padding: 0; border: 0; display: inline-flex; align-items: center; gap: .35rem; }
.view-selector::after { color: var(--rx-primary); }
.page-body-flush { padding: 0; background: #fff; }
.filter-count { position: absolute; top: -6px; inset-inline-end: -6px; background: var(--rx-primary); color: #fff; border-radius: 999px; font-size: .625rem; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; }
.emp-avatar { width: 36px; height: 36px; border-radius: 50%; background: #f1ecfb; color: #6b46c1; display: inline-flex; align-items: center; justify-content: center; font-weight: 500; flex-shrink: 0; }
.emp-avatar-lg { width: 52px; height: 52px; font-size: 1.35rem; }
.todo-item { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem; border: 1px solid var(--rx-border); border-radius: 8px; }
.todo-item .bi { font-size: 1.25rem; }

/* ---- Employees: Add Employee wizard ---------------------------------------------- */
.wizard-header { text-align: center; padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--rx-border); background: #fff; }
.wizard-title { font-size: 1.35rem; font-weight: 500; margin: 0 0 .25rem; }
.wizard-subtitle { color: var(--rx-muted); margin: 0 0 .5rem; }
.wizard-steps { list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; padding: 0; }
.wizard-step { display: flex; align-items: center; gap: .4rem; color: var(--rx-muted); }
.wizard-step + .wizard-step::before { content: ""; width: 80px; height: 1px; background: #c5c9d6; margin-inline-end: .5rem; }
.wizard-num { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #b9bdcc; display: inline-flex; align-items: center; justify-content: center; font-size: .8125rem; background: #fff; }
.wizard-step.is-current { color: var(--rx-text); font-weight: 500; }
.wizard-step.is-current .wizard-num { background: var(--rx-primary); border-color: var(--rx-primary); color: #fff; box-shadow: 0 0 0 3px var(--rx-primary-soft); }
.wizard-step.is-done .wizard-num { background: var(--rx-success-soft); border-color: var(--rx-success); color: var(--rx-success); }
@media (max-width: 991.98px) { .wizard-step + .wizard-step::before { width: 20px; } .wizard-label { display: none; } .wizard-step.is-current .wizard-label { display: inline; } }
.wizard-body { max-width: 940px; margin: 0 auto; padding: 1.75rem 1.5rem 2.5rem; }
.wizard-body-wide { max-width: 1200px; }
.required-heading::after { content: " *"; color: var(--rx-danger); }
.radio-card { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid #d6d9e2; border-radius: 6px; padding: .55rem .9rem; cursor: pointer; min-width: 150px; background: #fff; }
.radio-card .form-check-input { margin: 0; }
.radio-card.is-checked { border-color: var(--rx-primary); box-shadow: 0 0 0 1px var(--rx-primary); }
.inline-select { border: 0; background-color: transparent; padding-block: 0; padding-inline-start: .25rem; font-weight: 500; }
[data-benefit].is-excluded td:not(:first-child) { opacity: .5; }

/* ---- Employees: profile ------------------------------------------------------------ */
.profile-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem .75rem; background: #fff; }
.profile-title { font-size: 1.2rem; font-weight: 400; margin: 0 0 .15rem; }
.profile-title strong { font-weight: 600; }
.profile-tabs { display: flex; gap: 1.75rem; padding: 0 1.5rem; background: #fff; border-bottom: 1px solid var(--rx-border); overflow-x: auto; }
.profile-tab { padding: .7rem 0; color: var(--rx-text); border-bottom: 2px solid transparent; white-space: nowrap; }
.profile-tab:hover { color: var(--rx-primary); }
.profile-tab.active { border-bottom-color: var(--rx-primary); font-weight: 500; }
.attention-box { background: #fdf0dc; padding: .85rem 1.5rem; font-size: .875rem; }
.attention-box ul { padding-inline-start: 1.5rem; }
.attention-box li { margin-top: .3rem; }
.attention-link { padding: 0 .35rem; font-size: inherit; vertical-align: baseline; text-decoration: none; }
.attention-sep { display: inline-block; width: 1px; height: 12px; background: #c9b58f; vertical-align: middle; }
.profile-card-head { display: flex; align-items: center; gap: .25rem; margin-bottom: 1rem; }
.profile-card-head h2 { font-size: 1rem; font-weight: 500; margin: 0; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
@media (max-width: 767.98px) { .profile-grid { grid-template-columns: 1fr; } }
.profile-list { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: .8rem 1rem; margin: 0 0 .8rem; }
.profile-list dt { font-weight: 400; color: var(--rx-muted); }
.profile-list dd { margin: 0; }
.pre-line { white-space: pre-line; }
.salary-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2.5rem; }
.salary-figure { font-size: 1.15rem; font-weight: 600; }
.data-table .group-row th { background: var(--rx-bg); font-weight: 600; font-size: .8125rem; }
.data-table .total-row th, .data-table .total-row td { background: var(--rx-primary-soft); }
legend.form-label { float: none; font-size: inherit; font-weight: 500; }
.wizard-form .ss-trigger { border: 1px solid #d6d9e2; border-radius: 6px; padding: .45rem .75rem; font-size: .875rem; background: #fff; min-height: 38px; }
.wizard-form .ss-trigger:focus-visible, .wizard-form .ss.open .ss-trigger { border-color: var(--rx-primary); box-shadow: 0 0 0 .2rem rgba(64, 141, 251, .2); }
.wizard-form .ss-native.input-validation-error + .ss-trigger { border-color: var(--rx-danger); }
.profile-list .btn-link, .attention-link { text-decoration: none; }

/* ---- Employees: list like the reference product (checkboxes, column settings, filter panel) ---- */
.list-header { padding-block: .9rem; }
.list-header .page-title { font-size: 1.2rem; }
.btn-square { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn-square.is-filtered { border-color: var(--rx-primary); color: var(--rx-primary); }
.menu-icons .dropdown-item { display: flex; align-items: center; gap: .6rem; padding-block: .45rem; }
.menu-icons .dropdown-item .bi { color: var(--rx-primary); }
.emp-table .check-col { width: 44px; padding-inline-end: 0; }
.emp-table .settings-col { width: 48px; }
.emp-table tbody td { padding-block: 1rem; }
.emp-table tr.is-selected td { background: #f3f8ff; }
.emp-avatar { width: 40px; height: 40px; background: #f3f0fa; color: #5b3fa6; }
.small-2 { font-size: .8125rem; }
.status-square { border-radius: 3px; padding: .15rem .45rem; font-size: .8125rem; }
.column-menu { min-width: 220px; }
.bulk-bar { display: flex; align-items: center; gap: .75rem; padding: .5rem 1.5rem; background: #f3f8ff; border-bottom: 1px solid var(--rx-border); font-size: .875rem; }
.search-chip-bar { padding: .5rem 1.5rem; font-size: .875rem; background: #fff; border-bottom: 1px solid var(--rx-border); }
.filter-panel { --bs-offcanvas-width: 280px; }
.filter-panel .offcanvas-header { padding: .9rem 1rem .6rem; }
.btn-close-red { filter: invert(36%) sepia(88%) saturate(2400%) hue-rotate(338deg) brightness(95%); opacity: .9; }
.filter-panel .list-search .form-control { width: 100%; }
.filter-field { padding: .55rem 0; }
.filter-field .form-check { margin: 0; display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.filter-field .form-check-input { margin: 0; }
.filter-value { border: 0; padding: .5rem 0 0 1.65rem; margin: 0; min-width: 0; }
.filter-footer { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1rem; border-top: 1px solid var(--rx-border); }
.clear-filter { color: var(--rx-danger); font-size: .8125rem; }
.clear-filter:hover { color: #b3262b; }
.min-h-0 { min-height: 0; }

/* ---- Date picker (dd MMM yyyy) ---------------------------------------------------- */
.dp { position: relative; }
.dp > input[type="text"] { padding-inline-end: 2rem; }
.dp-icon { position: absolute; inset-inline-end: .7rem; top: 50%; transform: translateY(-50%); color: var(--rx-muted); font-size: .85rem; cursor: pointer; }
.dp-popup { position: absolute; z-index: 1080; top: calc(100% + 4px); inset-inline-start: 0; width: 262px; background: #fff; border: 1px solid #d6d9e2; border-radius: 8px; box-shadow: 0 8px 24px rgba(33, 38, 60, .16); padding: .5rem; }
.dp-head { display: flex; align-items: center; gap: .25rem; margin-bottom: .35rem; }
.dp-nav { border: 0; background: transparent; color: var(--rx-primary); padding: .15rem .35rem; border-radius: 4px; }
.dp-nav:hover { background: var(--rx-primary-soft); }
.dp-select { flex: 1; border: 1px solid transparent; background: transparent; font-weight: 600; font-size: .8125rem; padding: .1rem .2rem; border-radius: 4px; }
.dp-select:hover, .dp-select:focus { border-color: #d6d9e2; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dp-dow { font-size: .72rem; font-weight: 600; color: var(--rx-muted); padding: .2rem 0; }
.dp-dow.is-sunday { color: var(--rx-danger); }
.dp-day { border: 0; background: transparent; font-size: .8rem; padding: .3rem 0; border-radius: 4px; color: var(--rx-text); }
.dp-day:not(:disabled):hover { background: var(--rx-primary-soft); }
.dp-day.is-other { color: #b3b8c4; }
.dp-day.is-today { box-shadow: inset 0 0 0 1px var(--rx-primary); }
.dp-day.is-selected { background: var(--rx-primary); color: #fff; }
.dp-day:disabled { color: #d0d3da; cursor: default; }

/* ---- Clearable searchable dropdown ---------------------------------------------------- */
.ss-clear { position: absolute; inset-inline-end: 2rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #9aa0b4; padding: 0 .2rem; line-height: 1; font-size: 1.05rem; }
.ss-clear:hover { color: var(--rx-danger); }

/* ---- Employee profile tabs as in the reference product ------------------------------ */
.section-heading { font-size: 1rem; font-weight: 400; margin: 0 0 .75rem; }
.salary-card { padding: 1.2rem 1.25rem; }
.salary-label { color: var(--rx-muted); font-size: .8125rem; margin-bottom: .25rem; }
.salary-figure { font-size: 1.05rem; font-weight: 500; }
.salary-table .plain-group th { background: transparent; font-weight: 500; color: var(--rx-text); border-bottom: 0; padding-top: 1rem; }
.salary-table tbody td { border-bottom: 0; }
.salary-table .gross-row th, .salary-table .gross-row td { background: transparent; font-size: 1rem; font-weight: 500; padding-block: 1rem; border-top: 1px solid var(--rx-border); }
.deduction-table .deduction-parent td { border-bottom: 0; padding-bottom: .25rem; }
.deduction-table .deduction-child td { border-bottom: 0; padding-block: .3rem; }
.deduction-table .child-line { display: inline-block; border-inline-start: 1px solid var(--rx-border); padding-inline-start: 1rem; margin-inline-start: .35rem; }
.pill-tab { display: inline-block; padding: .35rem 1rem; border: 1px solid #d6d9e2; border-radius: 999px; color: var(--rx-text); font-size: .875rem; background: #fff; }
.pill-tab.active { border-color: var(--rx-primary); color: var(--rx-primary); background: var(--rx-primary-soft); }
.badge-primary-doc { background: #f5761a; color: #fff; font-weight: 600; letter-spacing: .03em; border-radius: 2px; }
.tab-table { border: 1px solid var(--rx-border); border-radius: 6px; }
.portal-cell { display: flex; align-items: center; flex-wrap: wrap; }
.filter-value[hidden] { display: none !important; }
.filter-range { display: grid; gap: .5rem; }
.profile-body { background: #fff; }
.emp-table .form-check-input, .filter-panel .form-check-input { border-color: #8a8fa5; }

/* ---- Pay runs (reference: Run Payroll / Regular Payroll pages) ------------------------ */
.runs-header { display: flex; justify-content: space-between; align-items: center; padding: 0 1.5rem; background: #fff; border-bottom: 1px solid var(--rx-border); }
.runs-tabs { display: flex; gap: 1.75rem; }
.runs-tab { padding: 1rem 0 .8rem; color: var(--rx-muted); font-size: 1rem; border-bottom: 2px solid transparent; }
.runs-tab.active { color: var(--rx-text); font-weight: 600; border-bottom-color: var(--rx-primary); }
.wage-banner { display: flex; align-items: center; gap: .5rem; background: #fdeee1; padding: .7rem 1.5rem; font-size: .8125rem; }
.wage-banner .bi { color: #f5761a; }
.run-card { background: #fff; border: 1px solid var(--rx-border); border-radius: 8px; padding: 1.25rem 1.25rem .9rem; max-width: 900px; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(33, 38, 60, .04); }
.run-card-title { font-size: 1rem; font-weight: 400; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.run-badge { display: inline-block; background: #eef0f4; color: var(--rx-muted); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; padding: .1rem .4rem; border-radius: 2px; text-transform: uppercase; vertical-align: middle; }
.run-badge-approved { background: var(--rx-primary-soft); color: var(--rx-primary-dark); }
.run-badge-paid { background: var(--rx-success-soft); color: var(--rx-success); }
.run-card-body { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.run-card-figures { display: flex; gap: 3rem; margin: 0; flex-wrap: wrap; }
.run-card-figures dt { font-weight: 400; color: var(--rx-muted); font-size: .8125rem; margin-bottom: .25rem; }
.run-card-figures dd { margin: 0; }
.run-card-hint { color: var(--rx-muted); font-size: .8125rem; margin: 1rem 0 0; }
.run-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1.5rem; background: #fff; border-bottom: 1px solid var(--rx-border); }
.run-title { font-size: 1.3rem; font-weight: 400; margin: 0; }
.back-circle { width: 28px; height: 28px; border-radius: 50%; background: var(--rx-primary-soft); color: var(--rx-primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.run-info { background: #eaf4fd; padding: .7rem 1.5rem; display: flex; gap: .5rem; align-items: center; }
.run-info .bi { color: var(--rx-primary); }
.run-tasks { background: #fdf3dc; padding: .9rem 1.5rem; }
.run-tasks-title { font-size: .8125rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; margin: 0 0 .4rem; }
html[lang="ar"] .run-tasks-title { text-transform: none; letter-spacing: 0; }
.run-task { display: flex; justify-content: space-between; gap: 2rem; padding: .2rem 0; max-width: 1240px; }
.run-tasks-more { font-style: italic; text-decoration: underline; color: var(--rx-text); font-size: .875rem; margin-top: .3rem; }
.run-summary { display: grid; grid-template-columns: minmax(280px, 410px) 150px minmax(240px, 320px); gap: 1.25rem; align-items: stretch; margin-bottom: 1.5rem; }
@media (max-width: 991.98px) { .run-summary { grid-template-columns: 1fr; } }
.run-summary-period { background: #f1f2f5; border: 1px solid var(--rx-border); border-radius: 6px; padding: 1.2rem; }
.run-figure { font-size: 1.3rem; }
.run-caption { color: var(--rx-muted); font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; }
html[lang="ar"] .run-caption { text-transform: none; letter-spacing: 0; }
.run-payday { border: 1px solid var(--rx-border); border-radius: 6px; padding: 1rem .5rem; text-align: center; }
.run-payday-day { font-size: 1.8rem; line-height: 1.3; }
.run-payday-month { font-size: .8125rem; border-bottom: 1px solid var(--rx-border); padding-bottom: .5rem; margin-bottom: .5rem; }
.run-deductions dl { display: grid; grid-template-columns: 1fr auto; gap: .45rem 2rem; margin: 0; }
.run-deductions dt { font-weight: 400; color: #3f455d; }
.run-deductions dd { margin: 0; text-align: end; }
.dotted { border-bottom: 1px dashed currentColor; cursor: help; }
.run-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--rx-border); }
.run-tab { padding: .6rem 1rem; color: var(--rx-text); border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0; margin-bottom: -1px; }
.run-tab.active { border-color: var(--rx-border); border-top: 2px solid var(--rx-primary); background: #fff; font-weight: 500; }
.run-toolbar { display: flex; align-items: center; gap: 1.5rem; padding: 1rem 0 .75rem; }
.run-table tr.is-skipped td { color: #a2a7b8; }
.row-menu { border-radius: 50%; border: 1px solid #c9ccd6; width: 22px; height: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; }
.insight-row { margin-bottom: .8rem; }
.insight-bar { height: 8px; background: #eef0f4; border-radius: 4px; overflow: hidden; margin-top: .25rem; }
.insight-bar span { display: block; height: 100%; background: var(--rx-primary); }
/* Pay run: Deductions and Overall Insights tabs */
.run-section { margin-top: 1.75rem; }
.run-section-title { font-size: 1rem; font-weight: 500; margin-bottom: .75rem; }
.run-breakdown { margin-bottom: 0; }
.run-breakdown > thead th { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--rx-text); background: transparent; border-top: 1px solid var(--rx-border); padding: .75rem; }
.run-breakdown td, .run-breakdown tbody th, .run-breakdown tfoot th { padding: .8rem .75rem; }
.run-breakdown tfoot th, .run-breakdown tfoot td { font-weight: 600; border-bottom: 1px solid var(--rx-border); }
.run-breakdown-empty { text-align: center; color: #6c7285; padding: 1.5rem !important; }
.insights-heading { font-size: 1.05rem; font-weight: 400; padding-bottom: .9rem; border-bottom: 1px solid var(--rx-border); margin: 1.5rem 0 0; }
.insight-card { background: #fff; border: 1px solid var(--rx-border); border-radius: 8px; padding: 1.1rem 1.25rem; margin: 0; }
.insight-breakdown { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr 1.4fr; gap: 1.5rem; align-items: center; }
.insight-active { background: #f7f8fa; border-radius: 6px; padding: 1.1rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.insight-active-icon { width: 38px; height: 38px; border-radius: 8px; background: #fff; border: 1px solid var(--rx-border); color: #22a06b; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .3rem; }
.insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.5rem; margin: 0; }
.insight-grid dt, .insight-list dt, .insight-modes dt { font-weight: 400; font-size: .85rem; }
.insight-grid dd { font-weight: 600; margin: .15rem 0 0; }
.insight-list { margin: 0; border-inline-start: 1px solid var(--rx-border); padding-inline-start: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.insight-list > div, .insight-modes > div { display: flex; justify-content: space-between; gap: 1rem; }
.insight-list dd, .insight-modes dd { font-weight: 600; margin: 0; }
.insight-modes { display: flex; flex-direction: column; gap: 1.1rem; }
.insight-empty { display: flex; align-items: center; justify-content: center; min-height: 90px; color: #6c7285; }
.run-group th, .run-group td { font-weight: 400; font-size: .95rem; border-bottom: 0; }
.run-group-toggle { border: 0; background: none; padding: 0; color: inherit; font: inherit; }
.run-group-toggle .bi { font-size: .7rem; margin-inline-end: .35rem; display: inline-block; transition: transform .15s; }
.run-group-toggle[aria-expanded="false"] .bi { transform: rotate(180deg); }
.run-components tbody.collapse td { border-bottom: 0; }
.run-group-total th, .run-group-total td { font-weight: 500; border-top: 1px solid var(--rx-border); }
@media (max-width: 991.98px) {
    .insight-breakdown { grid-template-columns: 1fr; }
    .insight-list { border-inline-start: 0; padding-inline-start: 0; }
}
.insight-bar-employer span { background: var(--rx-warning); }
.pick-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--rx-border); border-radius: 6px; }
.pick-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; margin: 0; border-bottom: 1px solid #f0f1f5; cursor: pointer; }
.pick-item .form-check-input { margin: 0; }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list li { border-top: 1px solid var(--rx-border); padding: .6rem 0; }
.chart-stack { flex: 1; display: flex; flex-direction: column-reverse; align-items: center; width: 60%; min-height: 0; }
.chart-seg { display: block; width: 100%; }
.chart-seg-net { background: var(--rx-primary); border-radius: 3px 3px 0 0; }
.chart-seg-deductions { background: var(--rx-warning); }
.chart-seg-social { background: var(--rx-success); }
.payslip-body { background: #eef0f4; }
.payslip-sheet { max-width: 860px; margin: 0 auto 1.5rem; background: #fff; box-shadow: 0 2px 10px rgba(33, 38, 60, .08); }
.doc-employer { margin: .8rem 0; font-size: .8125rem; }
@media print {
    .app-topbar, .app-sidebar, .no-print, .toast-container { display: none !important; }
    .app-main, .page-body, .payslip-body { padding: 0 !important; margin: 0 !important; background: #fff !important; }
    .payslip-sheet { box-shadow: none; page-break-after: always; margin: 0; max-width: none; }
}


/* ==========================================================================
   Phase 5: salary revisions (split view), loans, giving
   ========================================================================== */
.split { display: flex; min-height: calc(100vh - 56px); background: #fff; }
.split-list { width: 320px; flex-shrink: 0; border-inline-end: 1px solid var(--bs-border-color); display: flex; flex-direction: column; }
.split-list-head { padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.revision-filter { width: 380px; max-width: calc(100vw - 2rem); padding: 1rem; }
.revision-filter input[type="month"] { min-width: 0; flex: 1; }
.revision-filter-title { font-size: .9rem; font-weight: 600; margin-bottom: .75rem; }
.split-items { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.split-items li a { display: block; padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color-translucent); color: inherit; text-decoration: none; }
.split-items li a:hover { background: #f7f9fc; }
.split-items li a.active { background: #eef4ff; border-inline-start: 3px solid var(--bs-primary); }
.split-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.split-body { padding: 1.25rem 1.5rem; flex: 1; }
.split-footer { padding: .75rem 1.5rem; border-top: 1px solid var(--bs-border-color); display: flex; gap: .5rem; align-items: center; }
.revision-strip { display: flex; flex-wrap: wrap; gap: 2rem; padding: 1rem 1.5rem; background: #f7f9fc; border-bottom: 1px solid var(--bs-border-color); }
.revision-strip > div, .revision-summary > div { display: flex; flex-direction: column; font-size: .8125rem; }
.revision-strip span, .revision-summary span { color: var(--bs-secondary-color); }
.revision-summary { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: .5rem; }
.revision-grid .amount-input { max-width: 160px; }
.revision-grid .amount-input[readonly] { background: #f5f6f8; }
.revision-note { font-size: .8125rem; background: #fff8e6; border: 1px solid #fde6a8; border-radius: .375rem; padding: .5rem .75rem; max-width: 720px; }
@media (max-width: 991.98px) {
    .split { flex-direction: column; }
    .split-list { width: 100%; max-height: 280px; border-inline-end: 0; border-bottom: 1px solid var(--bs-border-color); }
}

.loan-card { background: #fff; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.loan-card-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.loan-title { font-size: 1rem; font-weight: 600; margin: 0 0 .25rem; }
.loan-title a { color: inherit; text-decoration: none; }
.loan-title a:hover { color: var(--bs-primary); }
.loan-progress { display: flex; align-items: center; gap: .75rem; min-width: 220px; }
.loan-progress .progress { flex: 1; height: 6px; }
.loan-progress .progress-bar { background: #22a06b; }
.loan-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; border-top: 1px dashed var(--bs-border-color); padding-top: .75rem; }
.loan-figures div { display: flex; flex-direction: column; font-size: .8125rem; }
.loan-figures span { color: var(--bs-secondary-color); }
.loan-figures b { font-size: .9375rem; }
.loan-foot { font-size: .8125rem; color: var(--bs-secondary-color); margin: .75rem 0 0; }
.loan-badge { display: inline-block; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; padding: .15rem .45rem; border-radius: .25rem; vertical-align: middle; }

/* Loans: loan page (summary card, other details, repayment summary) */
.split-items .loan-badge { display: inline-block; }
.loan-summary { background: #f7f8fb; border-bottom: 1px solid var(--rx-border); padding: 1.25rem 1.5rem 0; }
.loan-summary-card { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem 3rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rx-border); max-width: 900px; }
.loan-summary-main { display: flex; gap: 1rem; align-items: center; }
.loan-summary-icon { width: 48px; height: 48px; border-radius: 8px; background: #fff; border: 1px solid var(--rx-border); display: inline-flex; align-items: center; justify-content: center; color: var(--rx-primary); font-size: 1.3rem; }
.loan-summary-amount { font-size: 1.15rem; font-weight: 500; }
.loan-summary-label { font-size: .8rem; color: #6c7285; margin-bottom: .3rem; }
.loan-employee-chip { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--rx-border); border-radius: 999px; padding: .15rem .65rem .15rem .2rem; background: #fff; font-size: .85rem; text-decoration: none; }
.loan-employee-chip > span { width: 22px; height: 22px; border-radius: 50%; background: #e3f5ea; color: #1e7a45; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .75rem; }
.loan-summary-percent { color: var(--rx-success); font-weight: 500; }
.loan-progress { width: 80px; height: 5px; background: #e6e8ee; border-radius: 3px; overflow: hidden; display: inline-block; }
.loan-progress > span { display: block; height: 100%; background: var(--rx-success); }
.loan-next { padding: .8rem 0; font-size: .875rem; color: #545a6b; }
.loan-next strong { color: var(--rx-text); font-weight: 500; }
.loan-section-title { font-size: 1rem; font-weight: 500; display: flex; align-items: center; gap: .45rem; margin-bottom: 1rem; }
.loan-section-title .bi { color: #6c7285; font-size: .95rem; }
.loan-details-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 2rem; margin: 0; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rx-border); }
.loan-details-grid > div { display: grid; grid-template-columns: 160px 1fr; gap: .5rem; }
.loan-details-grid dt { font-weight: 400; color: #6c7285; }
.loan-details-grid dd { margin: 0; }
.loan-repayment-card { border: 1px solid var(--rx-border); border-radius: 6px; overflow: hidden; }
.loan-repayment-totals { display: flex; flex-wrap: wrap; gap: 1rem 3rem; padding: 1rem 1.5rem; background: #fdf6f0; border-bottom: 1px solid var(--rx-border); }
.loan-repayment-table thead th { font-size: .72rem; font-weight: 600; text-transform: uppercase; background: #fff; padding: .75rem 1.5rem; }
.loan-repayment-table td { padding: .75rem 1.5rem; }
@media (max-width: 1199.98px) { .loan-details-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767.98px) { .loan-details-grid { grid-template-columns: 1fr; } .loan-details-grid > div { grid-template-columns: 140px 1fr; } }

/* Loans: Create Loan page, Loan Repayments filter chips */
.loan-form-header { background: #fff; }
.loan-form { background: #fff; min-height: calc(100vh - 110px); }
.loan-form-band { background: #f7f8fb; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--rx-border); }
.loan-form-body { padding: 1.5rem; }
.loan-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); gap: 1.25rem 1.75rem; }
.loan-form-wide { grid-column: 1 / -1; max-width: 828px; }
.loan-form-section { font-size: .95rem; font-weight: 600; margin: 2rem 0 1rem; }
.loan-form .form-actions { max-width: none; margin-top: 2rem; }
@media (max-width: 767.98px) { .loan-form-grid { grid-template-columns: 1fr; } .loan-form-band, .loan-form-body { padding: 1rem; } }
.filter-chips { display: flex; flex-wrap: wrap; gap: .6rem; padding: .6rem 1.5rem; background: #fff; border-bottom: 1px solid var(--rx-border); }
.filter-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--rx-border); border-radius: 4px; padding: .15rem .5rem; font-size: .8rem; background: #fff; margin: 0; }
.filter-chip > span { color: var(--rx-text); white-space: nowrap; }
.filter-chip input, .filter-chip select { border: 0; background: transparent; color: var(--rx-primary); font-size: .8rem; padding: .1rem 0; max-width: 220px; }
.filter-chip input:focus, .filter-chip select:focus { outline: none; }
.filter-chip:focus-within { border-color: var(--rx-primary); }
.empty-illustration { opacity: .9; }
.loan-open { background: #e3f6ec; color: #1a7f4e; }
.loan-pending { background: #fff4de; color: #9a6400; }
.loan-closed { background: #eceef2; color: #5b6272; }
.loan-rejected { background: #fde8e8; color: #b42318; }
@media (max-width: 575.98px) { .loan-figures { grid-template-columns: 1fr; } }

/* Giving (campaign cards, campaign page) */
.campaign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(760px, 100%), 760px)); gap: 1rem; }
.campaign-card { background: #fff; border: 1px solid #eceef3; border-radius: 6px; padding: 1.4rem 1.5rem; box-shadow: 0 2px 8px rgba(30, 40, 70, .06); }
.campaign-name { font-size: 1.05rem; font-weight: 400; margin: 0 0 1.4rem; display: flex; align-items: center; gap: .5rem; }
.campaign-badge { font-size: .7rem; font-weight: 500; text-transform: uppercase; padding: .1rem .35rem; border-radius: 3px; letter-spacing: .02em; }
.campaign-badge.is-active { background: #e2f6ea; color: #1c7c45; }
.campaign-badge.is-ended { background: #eef0f4; color: #5b6275; }
.campaign-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.campaign-stats { display: flex; flex-wrap: wrap; gap: .75rem 4rem; margin: 0; }
.campaign-stats dt { font-size: .72rem; font-weight: 400; text-transform: uppercase; color: #545a6b; letter-spacing: .02em; margin-bottom: .6rem; }
.campaign-stats dd { margin: 0; font-weight: 400; font-size: .95rem; }
.campaign-summary { display: flex; flex-wrap: wrap; align-items: stretch; background: #f7f8fb; padding: 1.35rem 1.5rem 1.6rem; gap: 0; }
.campaign-summary-item { padding: .5rem 1.25rem .5rem 0; margin-inline-end: 1.25rem; border-inline-end: 1px solid var(--rx-border); min-width: 180px; }
.campaign-summary-about { max-width: 260px; }
.campaign-summary-label { font-size: .85rem; color: #6c7285; margin-bottom: .6rem; }
.campaign-summary-text { font-size: .9rem; white-space: pre-line; }
.campaign-total { display: flex; align-items: center; gap: 1rem; background: #fff; border-inline-start: 2px solid #22b07d; padding: 1rem 2rem 1rem 1.5rem; box-shadow: 0 1px 4px rgba(30, 40, 70, .05); }
.campaign-total-icon { width: 44px; height: 44px; border-radius: 50%; background: #f2faf6; border: 1px solid #dff3e8; color: #22a06b; display: inline-flex; align-items: center; justify-content: center; }
.campaign-total-amount { font-size: 1.1rem; font-weight: 500; }
.campaign-tabs { background: #f7f8fb; padding: 0 1.5rem; }
.campaign-section-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem .8rem; }
.campaign-section-title { font-size: 1.05rem; font-weight: 500; margin: 0; }
.campaign-table thead th { font-size: .72rem; font-weight: 500; text-transform: uppercase; background: #fafbfc; border-top: 1px solid var(--rx-border); padding: .7rem 1.5rem; color: #3f4556; }
.campaign-table td { padding: .75rem 1.5rem; }
.campaign-empty td { text-align: center; background: #f7f8fb; color: #545a6b; padding: 1rem !important; }
.campaign-action-sep { width: 1px; height: 16px; background: var(--rx-border); display: inline-block; }


/* ==========================================================================
   Phase 6: Documents (folder pane, drop zone, storage limit, trash)
   ========================================================================== */
.docs-shell { display: flex; min-height: calc(100vh - 112px); background: #fff; border-top: 1px solid var(--bs-border-color); }
.docs-pane { width: 260px; flex-shrink: 0; border-inline-end: 1px solid var(--bs-border-color); display: flex; flex-direction: column; padding: .75rem .5rem 0; background: #fbfbfd; }
.docs-pane-item { display: flex; align-items: center; gap: .25rem; border-radius: .375rem; color: inherit; text-decoration: none; }
a.docs-pane-item, .docs-pane-item > a { display: flex; align-items: center; gap: .5rem; padding: .45rem .65rem; color: inherit; text-decoration: none; min-width: 0; }
.docs-pane-item > a { flex: 1; }
.docs-pane > a.docs-pane-item { flex: 0 0 auto; }
.docs-pane-item:hover { background: #eef2f8; }
.docs-pane-item.active { background: var(--rx-primary); color: #fff; }
.docs-pane-item.active > a, .docs-pane-item.active .btn-icon { color: #fff; }
.docs-pane-head { display: flex; align-items: center; justify-content: space-between; font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color); padding: 1rem .65rem .35rem; }
.docs-folders { flex: 1; overflow-y: auto; }
.docs-folders-empty { display: flex; flex-direction: column; align-items: center; gap: .65rem; border: 1px dashed #d5d9e2; border-radius: 6px; background: #fff; text-align: center; padding: 1.5rem 1rem 1.25rem; margin: .25rem; }
.docs-folders-empty-icon { width: 44px; height: 44px; border-radius: 50%; background: #eef3fd; color: var(--rx-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.docs-folders-empty-text { margin: 0; font-size: .85rem; color: #545a6b; }
.docs-folders-empty-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; font-size: .8125rem; }
.docs-count { margin-inline-start: auto; font-size: .75rem; opacity: .7; }
.docs-storage { display: flex; gap: .75rem; align-items: flex-start; background: #f1f3f8; border-radius: .5rem; padding: .75rem; margin: .75rem .25rem; font-size: .8125rem; }
.docs-storage > .bi { font-size: 1.25rem; color: var(--rx-primary); }
.docs-storage .progress { height: 4px; }
.docs-trash { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; margin: 0 -.5rem; border-top: 1px solid var(--bs-border-color); color: var(--rx-primary); text-decoration: none; }
.docs-trash.active, .docs-trash:hover { background: #eef2f8; }
.docs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.docs-main-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--bs-border-color); flex-wrap: wrap; }
.docs-title { font-size: 1.25rem; font-weight: 400; margin: 0; }
.btn-soft-primary { background: var(--rx-primary-soft); color: var(--rx-primary); border: 0; }
.btn-soft-primary:hover { background: var(--rx-primary); color: #fff; }
.empty-state-icon-lg { font-size: 4rem; }
.dropzone { max-width: 560px; margin: 2rem auto; border: 1px dashed #c9cfdb; border-radius: .5rem; background: #fafbfd; padding: 2rem 1.75rem 1.5rem; text-align: center; transition: background .15s, border-color .15s; }
.dropzone.is-over { background: var(--rx-primary-soft); border-color: var(--rx-primary); }
.dropzone.is-busy { opacity: .7; pointer-events: none; }
.dropzone-title { font-size: 1.25rem; margin-bottom: 1rem; }
.dropzone-icon { width: 84px; height: 84px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(20, 30, 60, .08); display: grid; place-items: center; margin: 0 auto; font-size: 2.25rem; color: #e8506f; }
.dropzone-hint { display: flex; gap: .75rem; text-align: start; font-size: .8125rem; color: var(--bs-secondary-color); margin-top: 1.5rem; }
.dropzone-hint .bi { color: #f5a524; font-size: 1.25rem; }
.dropzone-status { text-align: start; font-size: .8125rem; margin-top: 1rem; border-radius: .375rem; padding: .6rem .75rem; background: #fff; border: 1px solid var(--bs-border-color); }
.dropzone-status ul { margin: .35rem 0 0; padding-inline-start: 1.1rem; max-height: 180px; overflow-y: auto; }
@media (max-width: 767.98px) {
    .docs-shell { flex-direction: column; }
    .docs-pane { width: 100%; border-inline-end: 0; border-bottom: 1px solid var(--bs-border-color); }
    .docs-folders { max-height: 220px; }
}


/* ==========================================================================
   Phase 7: Reports (centre, viewer, sticky table, print)
   ========================================================================== */
/* Reports Centre: title + centred search over a light patterned band, navigation card and list card. */
.reports-centre-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1rem 1.75rem; background: #fff; border-bottom: 1px solid #eef0f4; }
.reports-search { position: relative; width: min(300px, 100%); }
.reports-search .bi { position: absolute; inset-inline-start: 50%; margin-inline-start: -3.9rem; top: 50%; transform: translateY(-50%); color: var(--rx-primary); font-size: .85rem; }
.reports-search input { background: #f1f3f7; border: 1px solid transparent; text-align: center; padding: .45rem .75rem .45rem 2rem; font-size: .9rem; }
.reports-search input:focus { background: #fff; text-align: start; }
.reports-search input:focus + .bi, .reports-search:focus-within .bi { inset-inline-start: .75rem; margin: 0; }
.reports-centre { display: flex; gap: 1.25rem; padding: 2.5rem 1.25rem 1.25rem; min-height: calc(100vh - 110px);
    background: #f5f6fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='50' viewBox='0 0 220 50'%3E%3Cg fill='none' stroke='%23dfe3ec' stroke-width='1.2'%3E%3Ccircle cx='30' cy='22' r='9'/%3E%3Cpath d='M70 30l10-14 10 14M130 18h24M130 26h18'/%3E%3Cpath d='M190 32l6-6 6 6 6-10'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 0 / 220px 50px; }
.reports-nav { width: 250px; flex-shrink: 0; background: #fff; border: 1px solid #e8ebf1; border-radius: 6px; padding: .9rem .75rem; align-self: flex-start; display: flex; flex-direction: column; gap: .15rem; }
.reports-nav-item { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-radius: 5px; color: var(--rx-text); text-decoration: none; font-size: .9rem; }
.reports-nav-item .bi { color: #6c7285; }
.reports-nav-item:hover { background: #f3f5f9; }
.reports-nav-item.active { background: #eef1f8; font-weight: 500; }
.reports-nav-head { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #6c7285; padding: 1.1rem .75rem .5rem; }
.reports-list { flex: 1; min-width: 0; background: #fff; border: 1px solid #e8ebf1; border-radius: 6px; align-self: flex-start; }
.reports-list-head { padding: 1rem 1rem .9rem; }
.reports-list-title { font-size: 1.05rem; font-weight: 500; margin: 0; display: flex; align-items: center; gap: .5rem; }
.report-count { display: inline-block; min-width: 1.6rem; padding: .1rem .45rem; border-radius: 999px; background: #e8f0fe; color: var(--rx-primary); font-size: .75rem; font-weight: 500; text-align: center; }
.reports-table thead th { font-size: .75rem; font-weight: 500; text-transform: uppercase; color: #3f4556; background: #f7f8fa; border-top: 1px solid #eceef3; padding: .75rem 1rem; }
.reports-table td { padding: .8rem 1rem; border-color: #eef0f4; }
.reports-table .row-link { color: var(--rx-primary); font-weight: 500; }
.reports-table tbody tr:nth-child(even) td { background: #fbfbfd; }
.report-star { color: #9aa1b2; }
.report-star.is-on { color: #f5a524; }

/* Report viewer */
.report-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; background: #fff; border-bottom: 1px solid #eef0f4; flex-wrap: wrap; }
.report-head-btn { border: 1px solid #dfe2ea; background: #f9fafc; color: var(--rx-text); height: 34px; min-width: 34px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; font-size: .9rem; }
.report-head-btn:hover { background: #eef1f6; border-color: #cfd4de; }
.report-close { color: #e5484d; font-size: 1.1rem; }
.report-crumb { font-size: .8rem; color: #3f4556; }
.report-title { font-size: 1.05rem; font-weight: 500; margin: 0; }
.report-title-period { font-size: .8rem; font-weight: 400; color: #3f4556; margin-inline-start: .15rem; }
.report-export-menu { min-width: 280px; }
.report-export-menu .dropdown-header { font-size: .82rem; color: #6c7285; padding-top: .6rem; }
.report-export-menu .dropdown-item { padding: .55rem 1rem; }
.report-filters { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .6rem 1rem; background: #fff; border-bottom: 1px solid #eef0f4; }
.report-filters-label { font-size: .9rem; margin-inline-end: .15rem; }
.report-chip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #dfe2ea; background: #f9fafc; border-radius: 4px; padding: .3rem .65rem; font-size: .9rem; margin: 0; color: var(--rx-text); cursor: pointer; }
.report-chip:hover { border-color: #cfd4de; }
.report-chip:focus-within { border-color: var(--rx-primary); }
.report-chip > span { white-space: nowrap; }
.report-chip select, .report-chip input:not([type=checkbox]) { border: 0; background: transparent; color: #3f4556; font-size: .9rem; padding: 0; max-width: 240px; }
.report-chip select:focus, .report-chip input:focus { outline: none; }
.report-chip-wide select { min-width: 180px; }
.report-more .bi { color: var(--rx-primary); }
.report-run { padding: .38rem .8rem; font-size: .9rem; }
.filter-dot { position: absolute; top: 3px; inset-inline-end: 3px; width: 7px; height: 7px; border-radius: 50%; background: #e5484d; }
.more-filters { width: 260px; }
.compare-menu { width: 270px; }
.compare-menu-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #6c7285; margin-bottom: .75rem; }
.report-body { padding: 1rem 1rem 1.5rem; background: #f5f6fa; min-height: calc(100vh - 170px); }
.report-card { background: #fff; border: 1px solid #e8ebf1; border-radius: 6px; }
.report-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 0; padding: .5rem 1rem; border-bottom: 1px solid #eef0f4; flex-wrap: wrap; }
.report-tool { display: inline-flex; align-items: center; gap: .35rem; padding: 0 .9rem; font-size: .9rem; color: #3f4556; margin: 0; }
.report-tool + .report-tool { border-inline-start: 1px solid #e3e6ec; }
.report-tool .bi { color: #6c7285; }
.report-tool-select { border: 0; background: transparent; color: #3f4556; font-size: .9rem; padding: 0; field-sizing: content; }
.report-chip select { field-sizing: content; }
.report-tool-btn { color: #3f4556; text-decoration: none; font-size: .9rem; padding: 0; }
.report-tool-btn:hover { color: var(--rx-primary); }
.report-tool-btn strong { font-weight: 500; }
.report-paper { padding: 0 0 1rem; }
.report-paper-head { text-align: center; padding: 2rem 1rem 1.4rem; }
.report-paper-org { color: #545a6b; font-size: .95rem; }
.report-paper-title { font-size: 1.2rem; font-weight: 500; margin: .45rem 0 .3rem; }
.report-paper-period { font-size: .9rem; color: #3f4556; }
.report-empty { text-align: center; color: #3f4556; padding: 5rem 1rem 3rem; margin: 0; }
.report-scroll { max-height: calc(100vh - 330px); overflow: auto; }
.report-table { font-size: .875rem; }
.report-table thead th { position: sticky; top: 0; z-index: 2; background: #fff; font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; color: #1f2430; white-space: nowrap; border-top: 1px solid #e3e6ec; border-bottom: 1px solid #e3e6ec; padding: .95rem 1.75rem; vertical-align: middle; }
.report-table td { padding: .9rem 1.75rem; border-color: #eef0f4; }
.report-table .report-group-row th { top: 0; background: #fff; border-inline-end: 1px solid #eef0f4; }
.report-table .report-group-row + tr th { top: 44px; }
.report-table td { white-space: nowrap; }
.report-table-sticky tbody td:nth-child(-n+2), .report-table-sticky thead tr:last-child th:nth-child(-n+2) { position: sticky; background: #fff; z-index: 1; }
.report-table-sticky thead tr:last-child th:nth-child(-n+2) { z-index: 3; background: #fff; }
.report-table-sticky tbody td:nth-child(2), .report-table-sticky thead tr:last-child th:nth-child(2) { box-shadow: inset -1px 0 0 #eef0f4; }
.report-table-sticky tbody td:nth-child(1), .report-table-sticky thead tr:last-child th:nth-child(1) { inset-inline-start: 0; }
.report-table-sticky tbody td:nth-child(2), .report-table-sticky thead tr:last-child th:nth-child(2) { inset-inline-start: 110px; }
.report-table-sticky tbody td:nth-child(1) { min-width: 110px; }
/* Statement reports (Payroll Summary, Payroll Journal): a narrower centred table. */
.report-table-statement { max-width: 1090px; margin: 0 auto; font-size: .95rem; }
.report-table-statement thead th { padding: .85rem 1.9rem; }
.report-table-statement td { padding: .75rem 1.9rem; border-bottom: 0; }
.report-table-statement td:first-child { white-space: normal; }
.report-sort { color: inherit; text-decoration: none; }
.report-sort:hover { color: var(--rx-primary); }
.report-row-section th { background: #fff !important; font-weight: 400; font-size: .9rem; text-transform: none; letter-spacing: 0; color: #4d6a8f; position: static !important; border: 0; padding-top: 1rem !important; }
.report-row-subtotal td { font-weight: 500; background: #fff !important; border-top: 1px solid #e3e6ec; border-bottom: 1px solid #e3e6ec; }
.report-row-subtotal td:first-child { text-align: center; }
.report-row-total td { font-weight: 500; font-size: 1.02em; background: #fff !important; border-top: 1px solid #e3e6ec; border-bottom: 1px solid #e3e6ec; }
.report-table-statement .report-row-total td { font-size: 1.1rem; padding-top: 1rem; padding-bottom: 1rem; }
.report-row-blank td { border: 0; height: .5rem; padding: 0; }

/* All reports drawer, report activity */
.report-drawer { --bs-offcanvas-width: 250px; }
.report-drawer .offcanvas-title { font-size: 1.25rem; font-weight: 600; }
.report-drawer-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; color: #3f4556; margin: .25rem .35rem .5rem; }
.report-drawer-folder { display: flex; align-items: center; gap: .55rem; width: 100%; border: 0; background: none; padding: .55rem .35rem; font-size: .95rem; font-weight: 500; color: var(--rx-text); text-align: start; }
.report-drawer-folder .bi-folder { color: #6c7285; }
.report-drawer-chevron { margin-inline-start: auto; font-size: .7rem; color: #9aa1b2; transition: transform .15s; }
.report-drawer-folder.collapsed .report-drawer-chevron { transform: rotate(-90deg); }
.report-drawer-item { display: block; padding: .45rem .75rem .45rem 1.2rem; border-radius: 5px; color: var(--rx-text); text-decoration: none; font-size: .9rem; }
.report-drawer-item:hover { background: #f3f5f9; }
.report-drawer-item.active { background: #eef1f8; }
.report-activity { --bs-offcanvas-width: 480px; }
.report-activity .offcanvas-header { border-bottom: 1px solid #eef0f4; }
.columns-list { max-height: 55vh; overflow-y: auto; }

/* Export / Print Preference dialog */
.export-dialog { padding: 1.5rem 2rem; }
.export-file { max-width: 320px; }
.export-customize-toggle { text-decoration: none; margin: .5rem 0 .75rem; }
.export-customize { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; }
.export-heading { font-size: .95rem; font-weight: 400; margin: 0 0 .75rem; }
.export-checks { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; margin-bottom: 1.25rem; }
.export-rule { border-top: 1px dashed #cfd4de; opacity: 1; margin: 1.25rem 0; }
.export-margins { display: flex; gap: .75rem; }
.export-margins label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; color: #545a6b; width: 70px; }
.export-preview { background: #f1f3f8; border-radius: 6px; padding: 1rem 1.25rem 1.5rem; align-self: flex-start; }
.export-preview-label { text-align: center; font-size: .75rem; text-transform: uppercase; color: #6c7285; margin-bottom: .75rem; }
.export-preview-page { background: #fff; margin: 0 auto; width: 210px; min-height: 280px; padding: 1.25rem .75rem .5rem; box-shadow: 0 1px 4px rgba(30, 40, 70, .12); display: flex; flex-direction: column; transition: width .15s, min-height .15s; }
.export-preview-page.is-landscape { width: 260px; min-height: 190px; }
.export-preview-org { text-align: center; color: #4d6a8f; font-size: .8rem; margin-bottom: .75rem; }
.export-preview-meta { text-align: center; color: #6c7285; font-size: .65rem; }
.export-preview-line { border-bottom: 1px solid #e3e6ec; height: 1.35rem; }
.export-preview-page.is-sheet .export-preview-line { border: 1px solid #e3e6ec; border-top: 0; background: linear-gradient(90deg, transparent 24%, #e3e6ec 24%, #e3e6ec 25%, transparent 25%, transparent 49%, #e3e6ec 49%, #e3e6ec 50%, transparent 50%, transparent 74%, #e3e6ec 74%, #e3e6ec 75%, transparent 75%); }
.export-preview-note { font-size: .6rem; color: #3f4556; margin-top: .5rem; word-break: break-word; }
.export-preview-page-no { margin-top: auto; text-align: center; font-size: .65rem; color: var(--rx-primary); padding-top: .5rem; }
@media (max-width: 991.98px) { .export-customize { grid-template-columns: 1fr; } .export-preview { display: none; } }

/* Schedule Report dialog */
.schedule-dialog { padding: 1.5rem 2rem; }
.schedule-row { display: grid; grid-template-columns: 36% minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 1.1rem; }
.schedule-row > .form-label { padding-top: .45rem; margin: 0; }
.schedule-narrow { max-width: 190px; }
.schedule-when { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, .9fr); gap: .75rem; }
.schedule-section { font-size: 1.05rem; font-weight: 400; margin-bottom: 1.1rem; }
.schedule-note { background: #eef3fd; border-radius: 6px; padding: 1rem 1.25rem; font-size: .9rem; }
.schedule-note .bi { color: var(--rx-primary); }
.token-field { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .3rem .4rem; min-height: 40px; }
.token-list { display: contents; }
.token { display: inline-flex; align-items: center; gap: .3rem; background: #eef0f4; border-radius: 3px; padding: .15rem .45rem; font-size: .88rem; }
.token-remove { border: 0; background: none; padding: 0 .1rem; line-height: 1; color: #545a6b; font-size: 1rem; }
.token-add { border: 0; flex: 1; min-width: 160px; background: transparent; color: #6c7285; font-size: .88rem; }
.token-add:focus { outline: none; }
@media (max-width: 767.98px) { .schedule-row { grid-template-columns: 1fr; gap: .35rem; } .schedule-when { grid-template-columns: 1fr 1fr 1fr; } }
.report-print { padding: 1.5rem; background: #fff; }
.report-print .report-scroll { max-height: none; overflow: visible; }
.report-print-actions { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.report-print-note { margin-top: 1.25rem; font-size: .85rem; color: #3f4556; white-space: pre-line; }
@media print {
    .no-print { display: none !important; }
    .report-print { padding: 0; }
    .report-table thead th { position: static; }
    .report-table { font-size: 9pt; }
}


/* ==========================================================================
   Employee import (Select File, Map Fields, Preview)
   ========================================================================== */
.import-layout { display: flex; min-height: calc(100vh - 112px); background: #fff; border-top: 1px solid var(--bs-border-color); }
.import-main { flex: 1; min-width: 0; padding: 1.25rem 1.75rem; max-width: 900px; }
.import-notes { width: 360px; flex-shrink: 0; border-inline-start: 1px solid var(--bs-border-color); padding: 1.25rem 1rem; font-size: .8125rem; }
.import-notes ul { padding-inline-start: 1.1rem; margin-top: 1rem; }
.import-notes li { margin-bottom: 1rem; line-height: 1.6; }
.sample-link { background: #eef4ff; padding: 0 .3rem; border-radius: .2rem; text-decoration: none; }
.import-drop { display: flex; flex-direction: column; align-items: center; gap: .35rem; border: 1px dashed #c9cfdb; border-radius: .375rem; padding: 1.5rem 1rem; cursor: pointer; text-align: center; margin: 1rem 0 0; }
.import-drop .bi { font-size: 2rem; color: #7b8499; }
.import-drop:hover, .import-drop.is-over { background: var(--rx-primary-soft); border-color: var(--rx-primary); }
.import-drop.has-file .import-drop-title { font-weight: 600; color: var(--rx-primary); }
.import-drop:focus-within { outline: 2px solid var(--rx-primary); outline-offset: 2px; }
.import-map td:first-child { width: 36%; }
.import-map td:nth-child(2) { width: 36%; }
.import-summary { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.import-summary > div { background: #fff; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .75rem 1.25rem; min-width: 170px; display: flex; flex-direction: column; }
.import-summary span { font-size: .8125rem; color: var(--bs-secondary-color); }
.import-summary b { font-size: 1.5rem; }
@media (max-width: 991.98px) {
    .import-layout { flex-direction: column; }
    .import-notes { width: 100%; border-inline-start: 0; border-top: 1px solid var(--bs-border-color); }
}
.import-map label.required::after { content: " *"; color: #e5484d; }

/* Employees: first-visit onboarding (add manually or import) */
.onboard-empty { text-align: center; padding: 14vh 1rem 3rem; }
.onboard-art { width: 190px; height: auto; margin-bottom: 1.25rem; }
.onboard-title { font-size: 1.35rem; font-weight: 400; margin-bottom: .5rem; }
.onboard-text { color: var(--bs-secondary-color); font-size: .875rem; max-width: 440px; margin: 0 auto 1.25rem; line-height: 1.6; }

/* Employees: incomplete profiles (added by import or wizard left early) */
.incomplete-note { font-size: .8125rem; color: #d9480f; white-space: nowrap; }
.incomplete-note .bi { color: #e8590c; }
.incomplete-banner { background: #fff8f1; border: 1px solid #fde2cc; border-radius: .375rem; padding: .65rem 1rem; text-align: center; font-size: .875rem; }
.incomplete-banner .bi { color: #e8590c; margin-inline-end: .25rem; }
.incomplete-banner a { margin-inline-start: .25rem; }

/* ==========================================================================
   Dashboard (reference layout: Upcoming Payrun, Employee / Social Security
   summaries, Payroll Cost Summary, To Do Tasks on the right, help strip)
   ========================================================================== */
.dash-header { align-items: center; }
.help-line { font-size: .75rem; line-height: 1.3; border-inline-start: 1px solid var(--rx-border); padding-inline-start: 1rem; text-align: end; }
.recent-updates { width: 340px; max-height: 360px; overflow-y: auto; padding: .25rem 0; }
.recent-update { padding: .5rem 1rem; border-bottom: 1px solid #f0f2f6; }
.small-2 { font-size: .6875rem; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); gap: 1.25rem; align-items: stretch; }
.dash-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.dash-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.dash-card { padding: 0; display: flex; flex-direction: column; }
.dash-card-header { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.25rem; border-bottom: 1px solid var(--rx-border); }
.dash-card-header h2 { font-size: .9375rem; font-weight: 500; margin: 0; }
.dash-card-body { padding: 1.25rem; flex: 1; }
.dash-card-footer { border-top: 1px solid var(--rx-border); margin: 0 1.25rem; padding: .85rem 0; text-align: center; font-size: .875rem; }
.dash-empty { color: var(--rx-muted); font-size: .875rem; text-align: center; margin: 3rem 0; }
.dash-notice { background: #fff4ec; color: #1f2430; font-size: .8125rem; padding: .4rem 1.25rem; }
.dash-notice .bi { color: #e8590c; margin-inline-end: .25rem; }
.upcoming-run { display: flex; align-items: center; gap: 1.5rem; }
.upcoming-art { width: 110px; height: 80px; flex-shrink: 0; }
.emp-summary { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 150px; }
.emp-summary-total { text-align: center; border-inline-end: 1px solid var(--rx-border); padding: 1rem 0; }
.emp-summary-number { font-size: 3rem; font-weight: 300; color: #2b8a3e; line-height: 1.2; }
.emp-summary-bars { display: flex; justify-content: center; align-items: flex-end; gap: 2.25rem; height: 150px; }
.emp-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; width: 46px; }
.emp-bar-fill { display: block; width: 32px; border-radius: 3px 3px 0 0; }
.emp-bar-gcc { background: #3ec48c; }
.emp-bar-expat { background: #4a86e8; }
.emp-bar-value { font-size: .75rem; color: var(--rx-muted); margin-bottom: .2rem; }
.emp-bar-label { font-size: .625rem; text-transform: uppercase; text-align: center; line-height: 1.1; margin-top: .35rem; min-height: 1.4rem; }
.social-summary { text-align: center; }
.social-total span { display: block; color: var(--rx-muted); font-size: .8125rem; }
.social-total b { font-size: 1.6rem; font-weight: 500; }
.social-split { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem 2rem; margin: 1.25rem 0 0; }
.social-split dt { font-weight: 400; font-size: .8125rem; color: var(--rx-muted); }
.social-split dd { margin: 0; font-weight: 600; }
.cost-chart { position: relative; height: 260px; max-width: 760px; margin: 0 auto; }
.cost-grid { position: absolute; inset: .5rem 0 38px 0; display: flex; flex-direction: column; justify-content: space-between; }
.cost-gridline { position: relative; height: 0; border-top: 1px dashed #d8dde7; margin-inline-start: 48px; }
.cost-gridline span { position: absolute; inset-inline-end: 100%; top: -.55rem; padding-inline-end: .5rem; font-size: .75rem; color: var(--rx-muted); white-space: nowrap; }
.cost-bars { position: absolute; inset: .5rem 0 0 48px; display: grid; grid-template-columns: repeat(12, 1fr); }
[dir="rtl"] .cost-bars { inset: .5rem 48px 0 0; }
.cost-bar { display: flex; flex-direction: column; align-items: center; height: 100%; }
.cost-bar .chart-stack { width: 46%; }
.cost-bar small { height: 38px; padding-top: .35rem; font-size: .6875rem; color: var(--rx-muted); text-align: center; line-height: 1.15; }
.cost-empty { position: absolute; inset: 40% 0 auto 48px; text-align: center; color: var(--rx-muted); font-size: .875rem; }
.dash-todo .todo-item { border: 0; padding: .25rem 0 1rem; font-size: .875rem; }
.dash-todo .todo-item a { display: inline-block; margin-top: .5rem; }
.todo-icon { width: 36px; height: 36px; border: 1px solid var(--rx-border); border-radius: 6px; display: grid; place-items: center; flex-shrink: 0; color: #5b6272; }
.todo-icon .bi { font-size: 1rem !important; }
.dash-help { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0 0; padding: 1.25rem 2rem; border-top: 1px solid var(--rx-border); background: #fff; }
.dash-help-item { display: flex; align-items: center; gap: 1rem; font-size: .8125rem; }
.dash-help-item + .dash-help-item { border-inline-start: 1px solid var(--rx-border); padding-inline-start: 2rem; }
.dash-help-icon { width: 40px; height: 40px; border-radius: 50%; background: #f1f3f8; display: grid; place-items: center; color: #5b6272; flex-shrink: 0; }
@media (max-width: 1199.98px) { .dash-grid { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) {
    .dash-pair, .dash-help { grid-template-columns: 1fr; }
    .dash-help-item + .dash-help-item { border-inline-start: 0; padding-inline-start: 0; }
    .upcoming-run { flex-direction: column; text-align: center; }
}

/* =============================================================================
   Terms of Service / Privacy Policy
   ============================================================================= */
.legal-body { background: #f7f8fb; }
.legal-page { max-width: 860px; margin: 3rem auto 4rem; background: #fff; border: 1px solid #e8ebf1; border-radius: 8px; padding: 2.5rem 3rem; line-height: 1.7; }
.legal-head { border-bottom: 1px solid #eef0f4; padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.legal-brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--rx-text); text-decoration: none; margin-bottom: 1.25rem; }
.legal-title { font-size: 1.75rem; font-weight: 500; margin: 0 0 .25rem; }
.legal-updated { color: #6c7285; font-size: .85rem; margin: 0; }
.legal-page section { margin-bottom: 1.4rem; }
.legal-page h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: .5rem; }
.legal-page p, .legal-page li { font-size: .92rem; color: #3f4556; }
.legal-page ul { padding-inline-start: 1.25rem; margin-bottom: 0; }
.legal-foot { border-top: 1px solid #eef0f4; padding-top: 1.25rem; margin-top: 2rem; display: flex; gap: .75rem; font-size: .9rem; }
@media (max-width: 767.98px) { .legal-page { margin: 0; border-radius: 0; border: 0; padding: 1.75rem 1.25rem; } }