:root {
    --sd-bg: #f7fafc;
    --sd-card: #ffffff;
    --sd-green: #8dd8c0;
    --sd-green-dark: #4fb89c;
    --sd-blue: #dff3ff;
    --sd-mint: #e8f8ee;
    --sd-yellow: #fff4d8;
    --sd-pink: #ffe8ef;
    --sd-text: #263445;
    --sd-muted: #728195;
    --sd-border: #e9eef4;
    --sd-shadow: 0 10px 28px rgba(31, 45, 61, .07);
}

/* SkyHr visual layer */
:root {
    --skyhr-lilac: #eeeaff;
    --skyhr-purple: #7768d7;
    --skyhr-blue: #e5f4ff;
    --skyhr-peach: #fff0e7;
    --skyhr-mint: #e7f8f2;
}

.skyhr-icon {
    align-items: center; border-radius: 16px; display: inline-flex; flex: 0 0 48px;
    font-size: 24px; height: 48px; justify-content: center; width: 48px;
}
.skyhr-icon-mint { background: var(--skyhr-mint); color: #3fa78e; }
.skyhr-icon-blue { background: var(--skyhr-blue); color: #4c93bd; }
.skyhr-icon-peach { background: var(--skyhr-peach); color: #cf7d55; }
.skyhr-icon-lilac { background: var(--skyhr-lilac); color: var(--skyhr-purple); }

.skyhr-hero {
    align-items: center; background: linear-gradient(120deg, #ffffff 0%, #f2efff 50%, #eaf9f5 100%);
    border: 1px solid #e5e0fb; border-radius: 24px; box-shadow: var(--sd-shadow);
    display: flex; gap: 18px; overflow: hidden; padding: 28px; position: relative;
}
.skyhr-hero::after { background: rgba(255,255,255,.55); border-radius: 50%; content: ''; height: 180px; position: absolute; right: -45px; top: -90px; width: 180px; }
.skyhr-hero h3 { color: var(--sd-text); font-weight: 800; margin: 0 0 5px; }
.skyhr-hero p { color: var(--sd-muted); margin: 0; }

.workspace-card {
    background: #fff; border: 1px solid var(--sd-border); border-radius: 22px; box-shadow: var(--sd-shadow-soft);
    color: var(--sd-text); display: block; height: 100%; padding: 22px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease;
}
.workspace-card:hover { box-shadow: var(--sd-shadow); color: var(--sd-text); transform: translateY(-4px); }
.workspace-card h5 { font-weight: 750; margin: 20px 0 7px; }
.workspace-card p { color: var(--sd-muted); min-height: 40px; }
.workspace-open { color: var(--skyhr-purple); font-weight: 700; }

#attendance-location-map { border-radius: 20px; min-height: 560px; width: 100%; }
.attendance-location-editor .card { overflow: hidden; }
.map-hint {
    backdrop-filter: blur(10px); background: rgba(255,255,255,.92); border: 1px solid rgba(119,104,215,.18);
    border-radius: 12px; box-shadow: 0 8px 22px rgba(43,38,89,.12); color: var(--skyhr-purple);
    font-weight: 700; left: 50%; padding: 9px 14px; position: absolute; top: 14px; transform: translateX(-50%); z-index: 500;
}

@media (max-width: 1199.98px) { #attendance-location-map { min-height: 430px; } }

body {
    background: var(--sd-bg) !important;
    color: var(--sd-text) !important;
    font-size: 13px;
}

.dash-container,
.dash-content {
    background: var(--sd-bg) !important;
}

.card,
.modal-content,
.dropdown-menu {
    border: 1px solid var(--sd-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--sd-shadow) !important;
}

.card-header,
.modal-header {
    background: #fff !important;
    border-bottom: 1px solid var(--sd-border) !important;
    border-radius: 18px 18px 0 0 !important;
}

.page-header-title h4 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--sd-text) !important;
}

.breadcrumb {
    font-size: 12px;
}

.breadcrumb a {
    color: var(--sd-green-dark) !important;
}

.btn {
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.btn-primary,
.bg-primary {
    background: var(--sd-green-dark) !important;
    border-color: var(--sd-green-dark) !important;
}

.btn-light-primary {
    background: var(--sd-mint) !important;
    color: var(--sd-green-dark) !important;
    border-color: var(--sd-mint) !important;
}

.table {
    font-size: 13px !important;
}

.table thead th {
    background: #f4f7fb !important;
    color: var(--sd-muted) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: 0 !important;
    padding: 12px !important;
}

.table tbody td {
    padding: 12px !important;
    vertical-align: middle !important;
    border-color: var(--sd-border) !important;
}

.form-control,
.form-select,
.select2-container .select2-selection {
    border-radius: 12px !important;
    border-color: var(--sd-border) !important;
    font-size: 13px !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--sd-green-dark) !important;
    box-shadow: 0 0 0 .15rem rgba(79, 184, 156, .15) !important;
}

.pc-sidebar,
.dash-sidebar {
    background: #ffffff !important;
    border-right: 1px solid var(--sd-border) !important;
    box-shadow: 8px 0 24px rgba(31, 45, 61, .04) !important;
}

.pc-navbar .pc-link,
.dash-navbar .dash-link {
    border-radius: 14px !important;
    margin: 4px 10px !important;
    color: var(--sd-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.pc-navbar .pc-link:hover,
.pc-navbar .pc-item.active > .pc-link,
.dash-navbar .dash-link:hover,
.dash-navbar .dash-item.active > .dash-link {
    background: var(--sd-mint) !important;
    color: var(--sd-green-dark) !important;
}

.dash-header,
.pc-header {
    background: rgba(255,255,255,.92) !important;
    border-bottom: 1px solid var(--sd-border) !important;
    backdrop-filter: blur(12px);
}

.list-group-item {
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    margin-bottom: 4px !important;
}

.list-group-item.active {
    background: var(--sd-green-dark) !important;
    border-color: var(--sd-green-dark) !important;
}

.action-btn {
    border-radius: 10px !important;
}

.badge {
    border-radius: 999px !important;
    font-weight: 600 !important;
}

.dataTable-wrapper .dataTable-search input,
.dataTable-wrapper .dataTable-selector {
    border-radius: 12px !important;
    border: 1px solid var(--sd-border) !important;
}

.setup-panel {
    background: #fff;
    border-radius: 20px;
    padding: 14px;
    border: 1px solid var(--sd-border);
    box-shadow: var(--sd-shadow);
}

.setup-section-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--sd-muted);
    text-transform: uppercase;
    margin: 10px 4px;
}

.setup-link,
.setup-tile {
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--sd-border);
    color: var(--sd-text);
    text-decoration: none;
}

.setup-link:hover,
.setup-link.active,
.setup-tile:hover,
.setup-tile.active {
    background: var(--sd-mint);
    color: var(--sd-green-dark);
    border-color: #ccebdd;
}


/* =========================================================
   SMS DEEN High-End Pastel UI Fix
   Put this at the VERY END of public/css/custom.css
   ========================================================= */

:root {
    --sd-bg: #f6f8fb;
    --sd-surface: #ffffff;
    --sd-primary: #77cdb6;
    --sd-primary-dark: #3fa78e;
    --sd-primary-soft: #e7f8f2;
    --sd-blue-soft: #e5f4ff;
    --sd-text: #253244;
    --sd-muted: #728195;
    --sd-border: #e8eef5;
    --sd-shadow: 0 14px 38px rgba(32, 48, 70, .08);
    --sd-shadow-soft: 0 6px 18px rgba(32, 48, 70, .05);
}

body,
.dash-container,
.dash-content {
    background: var(--sd-bg) !important;
    color: var(--sd-text) !important;
    font-size: 13px !important;
}

.dash-content {
    padding: 24px !important;
}

.card,
.modal-content,
.dropdown-menu {
    background: #fff !important;
    border: 1px solid var(--sd-border) !important;
    border-radius: 20px !important;
    box-shadow: var(--sd-shadow) !important;
}

.card-body {
    padding: 18px !important;
}

.dash-header,
.pc-header {
    background: rgba(255,255,255,.94) !important;
    border-bottom: 1px solid var(--sd-border) !important;
    box-shadow: 0 8px 24px rgba(32, 48, 70, .04) !important;
    backdrop-filter: blur(14px);
}

.dash-sidebar,
.pc-sidebar {
    background: #fff !important;
    border-right: 1px solid var(--sd-border) !important;
    box-shadow: 8px 0 28px rgba(32, 48, 70, .05) !important;
}

.dash-navbar .dash-link,
.pc-navbar .pc-link {
    border-radius: 15px !important;
    margin: 4px 10px !important;
    color: var(--sd-text) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.dash-navbar .dash-link:hover,
.dash-navbar .dash-item.active > .dash-link,
.pc-navbar .pc-link:hover,
.pc-navbar .pc-item.active > .pc-link {
    background: linear-gradient(135deg, var(--sd-primary-soft), var(--sd-blue-soft)) !important;
    color: var(--sd-primary-dark) !important;
}

.page-header-title h4 {
    font-size: 23px !important;
    font-weight: 850 !important;
    letter-spacing: -.02em;
    color: var(--sd-text) !important;
}

.breadcrumb {
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 650;
}

.breadcrumb a {
    color: var(--sd-primary-dark) !important;
}

.btn {
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    box-shadow: none !important;
}

.btn-primary,
.bg-primary,
.btn-success,
.bg-success {
    background: var(--sd-primary-dark) !important;
    border-color: var(--sd-primary-dark) !important;
}

.btn-info,
.bg-info {
    background: #41c5cf !important;
    border-color: #41c5cf !important;
}

.btn-danger,
.bg-danger {
    background: #f65f8f !important;
    border-color: #f65f8f !important;
}

.table {
    font-size: 13px !important;
}

.table thead th {
    background: #f3f7fb !important;
    color: var(--sd-muted) !important;
    border: 0 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 13px 14px !important;
}

.table tbody td {
    border-color: var(--sd-border) !important;
    padding: 12px 14px !important;
    vertical-align: middle !important;
}

.form-control,
.form-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"] {
    border: 1px solid var(--sd-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--sd-text) !important;
    font-size: 13px !important;
    min-height: 40px;
}

.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus,
input:focus {
    border-color: var(--sd-primary-dark) !important;
    box-shadow: 0 0 0 .18rem rgba(63, 167, 142, .16) !important;
}

label,
.form-label {
    color: var(--sd-text) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

/* HRM setup panel - forced styling */
.setup-panel,
.card.sticky-top,
#useradd-sidenav {
    background: #fff !important;
    border: 1px solid var(--sd-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--sd-shadow) !important;
    padding: 14px !important;
    overflow: hidden;
}

.setup-header {
    display: block !important;
    padding: 14px !important;
    border-radius: 17px !important;
    background: linear-gradient(135deg, var(--sd-primary-soft), var(--sd-blue-soft)) !important;
    margin-bottom: 14px !important;
}

.setup-header span {
    display: block !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    color: var(--sd-text) !important;
}

.setup-header small {
    color: var(--sd-muted) !important;
    font-size: 12px !important;
}

.setup-section-title {
    font-size: 11px !important;
    font-weight: 850 !important;
    color: var(--sd-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    margin: 12px 5px 8px !important;
}

.setup-category-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.setup-card-link,
.setup-accordion-button {
    width: 100% !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid var(--sd-border) !important;
    background: #fff !important;
    color: var(--sd-text) !important;
    border-radius: 16px !important;
    padding: 10px 11px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-align: left !important;
    box-shadow: none !important;
    transition: all .18s ease !important;
}

.setup-card-link:hover,
.setup-card-link.active,
.setup-accordion-button:hover,
.setup-accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, var(--sd-primary-soft), var(--sd-blue-soft)) !important;
    border-color: #cfece4 !important;
    color: var(--sd-primary-dark) !important;
}

.setup-card-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 12px !important;
    background: var(--sd-primary-soft) !important;
    color: var(--sd-primary-dark) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 32px !important;
}

.setup-card-title {
    flex: 1 !important;
    line-height: 1.25 !important;
}

.setup-card-arrow,
.setup-accordion-chevron {
    margin-left: auto !important;
    color: var(--sd-muted) !important;
    font-size: 14px !important;
}

.setup-accordion {
    display: grid !important;
    gap: 8px !important;
}

.setup-accordion-item {
    border: 0 !important;
    background: transparent !important;
}

.setup-accordion-button::after {
    display: none !important;
}

.setup-accordion-button:not(.collapsed) .setup-accordion-chevron {
    transform: rotate(180deg) !important;
}

.setup-submenu {
    margin: 7px 0 4px 42px !important;
    padding-left: 10px !important;
    border-left: 2px solid var(--sd-border) !important;
    display: grid !important;
    gap: 5px !important;
}

.setup-submenu-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    border-radius: 12px !important;
    padding: 9px 10px !important;
    color: var(--sd-text) !important;
    text-decoration: none !important;
    font-size: 12.5px !important;
    font-weight: 750 !important;
}

.setup-submenu-link:hover,
.setup-submenu-link.active {
    background: var(--sd-primary-soft) !important;
    color: var(--sd-primary-dark) !important;
}

/* If old/default list-group still appears */
.list-group {
    padding: 10px !important;
}

.list-group-item {
    border: 0 !important;
    border-radius: 14px !important;
    margin-bottom: 5px !important;
    color: var(--sd-text) !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    padding: 11px 12px !important;
    background: transparent !important;
}

.list-group-item:hover,
.list-group-item.active {
    background: linear-gradient(135deg, var(--sd-primary-soft), var(--sd-blue-soft)) !important;
    color: var(--sd-primary-dark) !important;
}

/* Company option form */
.company-option-profile {
    border-radius: 22px !important;
}

.company-logo-placeholder {
    width: 92px;
    height: 92px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f0f3f7, #d9dee6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46px;
    box-shadow: inset 0 0 0 5px #fff, var(--sd-shadow-soft);
}

.company-logo-small {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #d7dce3;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.company-option-tabs {
    border-bottom: 1px solid var(--sd-border) !important;
}

.company-option-tabs .nav-link {
    border: 0 !important;
    color: var(--sd-text) !important;
    font-weight: 750 !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
}

.company-option-tabs .nav-link.active {
    color: #1d63c8 !important;
    border-bottom: 2px solid #1d63c8 !important;
    background: transparent !important;
}

.setup-form-section {
    background: #fff;
    border: 1px solid var(--sd-border);
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 14px;
}

.setup-form-title {
    background: #e8f8f6;
    border-radius: 10px;
    padding: 10px 12px;
    margin: -6px -6px 15px;
    font-weight: 850;
    color: var(--sd-text);
    font-size: 13px;
}

@media (max-width: 1200px) {
    .setup-category-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Employee profile upgraded UI */
.employee-dashboard-cards {
    display: grid;
    grid-template-columns: 1.2fr repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.employee-stat-card {
    background: #fff;
    border: 1px solid var(--sd-border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--sd-shadow-soft);
}

.employee-stat-card.active {
    background: #072b8f;
    color: #fff;
}

.employee-stat-card span {
    display: block;
    font-size: 15px;
    font-weight: 850;
    color: inherit;
}

.employee-stat-card strong {
    float: right;
    font-size: 20px;
}

.employee-stat-card small {
    display: block;
    clear: both;
    color: inherit;
    opacity: .78;
    margin-top: 12px;
}

.employee-stat-card.probation span { color: #ff9b29; }
.employee-stat-card.confirmed span { color: #33bdbd; }
.employee-stat-card.resigned span { color: #7b7f8a; }

.employee-list-search,
.employee-profile-search {
    position: relative;
    margin-bottom: 14px;
}

.employee-list-search i,
.employee-profile-search i {
    position: absolute;
    top: 10px;
    left: 12px;
    color: var(--sd-muted);
}

.employee-list-search input,
.employee-profile-search input {
    width: 100%;
    padding-left: 34px !important;
}

.employee-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.employee-cell img,
.employee-mini-card img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.employee-cell strong {
    display: block;
    font-size: 12.5px;
    color: #1d63c8;
}

.employee-cell span {
    display: block;
    font-size: 11px;
    color: var(--sd-muted);
    text-transform: uppercase;
    font-weight: 700;
}

.employee-profile-shell {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 18px;
}

/* The create workflow has no employee directory sidebar, so it uses the full canvas. */
.employee-profile-shell-create {
    display: block;
    width: 100%;
}

.employee-profile-shell-create .employee-profile-main {
    width: 100%;
    padding: 24px;
}

.employee-profile-shell-create .employee-profile-content {
    width: 100%;
}

.employee-profile-shell-create .profile-section {
    position: relative;
    overflow: visible;
    padding: 20px;
    margin-bottom: 20px;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    animation: employeeSectionRise .36s ease both;
}

.employee-profile-shell-create .profile-section:focus-within {
    z-index: 60;
    transform: none;
}

.employee-profile-main .form-group:focus-within {
    position: relative;
    z-index: 61;
}

.employee-profile-main .choices.is-open { z-index: 70; }
.employee-profile-main .choices__list--dropdown { z-index: 80; }
.employee-profile-main .tab-pane { overflow: visible; }

.employee-city-field .choices {
    width: 100%;
    margin-bottom: 0;
}

.employee-city-field .choices__inner {
    min-height: 46px;
    padding: 7px 38px 7px 12px;
    border: 1px solid #dce4ec;
    border-radius: 12px;
    background: #fbfdff;
}

.employee-city-field .choices__list--single { padding: 3px 0; }
.employee-city-field .choices__input { min-width: 100%; border-radius: 8px; }
.employee-city-field .choices__list--dropdown {
    overflow: hidden;
    margin-top: 6px;
    border: 1px solid #cfdee8;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 32px rgba(29, 65, 91, .16);
}
.employee-city-field .choices__list--dropdown .choices__list { max-height: 260px; }
.employee-city-field .choices__list--dropdown .choices__item { padding: 10px 12px; }
.employee-city-field .choices__list--dropdown .choices__item--selectable.is-highlighted { background: #eaf8f5; color: #176f68; }

.employee-photo-card {
    background: linear-gradient(135deg, #f8fcff, #effaf7);
}

.employee-photo-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 0;
    cursor: pointer;
    text-align: left;
}

.employee-photo-frame {
    position: relative;
    display: inline-flex;
    flex: 0 0 110px;
}

.employee-photo-preview {
    border: 4px solid #fff;
    border-radius: 26px;
    box-shadow: 0 14px 30px rgba(21, 78, 106, .2);
}

.employee-photo-camera {
    position: absolute;
    right: -5px;
    bottom: -5px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 3px solid #f5fbfb;
    border-radius: 11px;
    background: #188db0;
    color: #fff;
    box-shadow: 0 7px 16px rgba(25, 111, 143, .25);
}

.employee-photo-copy { max-width: 430px; }
.employee-photo-copy strong { display: block; color: #294e64; font-size: 15px; }
.employee-photo-copy small { display: block; margin: 5px 0 11px; color: #748c9b; font-size: 11px; line-height: 1.55; }

@media (max-width: 576px) {
    .employee-photo-picker { flex-direction: column; text-align: center; }
}

.employee-profile-shell-create .profile-section:hover {
    transform: translateY(-2px);
    border-color: #b9dce5;
    box-shadow: 0 15px 34px rgba(29, 91, 126, .09);
}

.ep-reporting-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 43px;
    padding: 10px 12px;
    border: 1px solid #cfe5e7;
    border-radius: 11px;
    background: linear-gradient(135deg, #f4fbff, #eefbf8);
    color: #40677b;
    font-size: 12px;
    font-weight: 700;
}

.ep-reporting-preview i { color: #19958c; font-size: 18px; }

@keyframes employeeSectionRise {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .employee-profile-shell-create .profile-section { animation: none; transition: none; }
}

.employee-profile-shell-create .employee-profile-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 4px;
}

.employee-profile-shell-create .employee-profile-tabs .nav-link {
    padding: 12px 16px;
}

.employee-multi-select + .select2-container,
.employee-multi-select + .choices {
    width: 100% !important;
}

.employee-bank-field .choices {
    width: 100%;
    margin-bottom: 0;
}

.employee-bank-field .choices__list--single .choices__item {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-bank-field .choices__list--dropdown {
    z-index: 45;
}

.employee-bank-field .choices__list--dropdown .choices__list {
    max-height: 320px;
}

.employee-profile-main .select2-container--default .select2-selection--multiple {
    min-height: 48px;
    padding: 7px 10px;
    border: 1px solid #dce4ec;
    border-radius: 12px;
    background: #fbfdff;
}

.employee-profile-main .select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: 0;
    border-radius: 999px;
    background: #e8f8f6;
    color: #176f68;
    padding: 5px 10px;
    font-weight: 700;
}

.employee-check-dropdown > .btn {
    width: 100%; min-height: 48px; display: flex; align-items: center;
    justify-content: space-between; text-align: left; border: 1px solid #dce4ec;
    border-radius: 12px; background: #fbfdff; color: #344767; padding: 10px 14px;
}
.employee-check-dropdown .dropdown-menu { width: 100%; max-height: 260px; overflow-y: auto; border: 0; border-radius: 14px; box-shadow: 0 14px 35px rgba(31,54,79,.16); }
.employee-check-option { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin: 0; border-radius: 9px; cursor: pointer; }
.employee-check-option:hover { background: #eef8f7; }
.employee-check-option input { width: 18px; height: 18px; accent-color: #2ca99a; }
.branch-selection-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.attendance-location-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 12px; margin: 8px 0 12px; }
.attendance-location-option { position: relative; display: flex; align-items: center; gap: 11px; min-height: 66px; margin: 0; padding: 12px 38px 12px 12px; border: 1px solid #dce4ec; border-radius: 14px; background: #fbfdff; cursor: pointer; transition: .18s ease; }
.attendance-location-option:hover { border-color: #54bdb0; transform: translateY(-1px); box-shadow: 0 7px 18px rgba(44,169,154,.1); }
.attendance-location-option input { position: absolute; opacity: 0; }
.attendance-location-option .location-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; background: #e8f8f6; color: #218d81; font-size: 19px; }
.attendance-location-option .location-check { position: absolute; right: 12px; top: 20px; display: grid; place-items: center; width: 23px; height: 23px; border: 2px solid #cbd7e2; border-radius: 7px; color: transparent; }
.attendance-location-option:has(input:checked) { border-color: #2ca99a; background: #f0fbf9; box-shadow: 0 0 0 2px rgba(44,169,154,.1); }
.attendance-location-option input:checked ~ .location-check { background: #2ca99a; border-color: #2ca99a; color: #fff; }

@media (max-width: 768px) {
    .employee-profile-shell-create .employee-profile-main,
    .employee-profile-shell-create .profile-section {
        padding: 14px;
    }
}

.employee-profile-sidebar,
.employee-profile-main {
    background: #fff;
    border: 1px solid var(--sd-border);
    border-radius: 20px;
    box-shadow: var(--sd-shadow);
}

.employee-profile-sidebar {
    padding: 14px;
    max-height: calc(100vh - 130px);
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
}

.employee-profile-side-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--sd-border);
    margin-bottom: 10px;
}

.employee-profile-side-tabs button {
    border: 0;
    background: transparent;
    padding: 10px;
    font-weight: 800;
    color: var(--sd-muted);
}

.employee-profile-side-tabs button.active {
    color: #1d63c8;
    border-bottom: 2px solid #1d63c8;
}

.employee-profile-list {
    overflow-y: auto;
    display: grid;
    gap: 8px;
}

.employee-mini-card {
    display: flex;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--sd-border);
    border-radius: 12px;
    padding: 10px;
}

.employee-mini-card.active {
    background: #fbfdff;
    border-color: #d6e6ff;
}

.employee-mini-card strong {
    display: block;
    color: #1d63c8;
    font-size: 12px;
}

.employee-mini-card span,
.employee-mini-card small {
    display: block;
    font-size: 11px;
    color: var(--sd-text);
    font-weight: 700;
}

.employee-profile-filter {
    margin-top: auto;
    border-top: 1px solid var(--sd-border);
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.employee-profile-main {
    padding: 16px;
}

.employee-profile-tabs {
    border-bottom: 1px solid var(--sd-border) !important;
    margin-bottom: 14px;
}

.employee-profile-tabs .nav-link {
    border: 0 !important;
    color: var(--sd-text) !important;
    font-size: 12.5px;
    font-weight: 750;
    padding: 10px 12px;
}

.employee-profile-tabs .nav-link.active {
    color: #1d63c8 !important;
    border-bottom: 2px solid #1d63c8 !important;
    background: transparent !important;
}

.profile-section {
    background: #fff;
    border: 1px solid var(--sd-border);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 14px;
}

.profile-section-title {
    background: #e8f8f6;
    border-radius: 10px;
    padding: 10px 12px;
    margin: -4px -4px 14px;
    font-size: 13px;
    font-weight: 850;
    color: var(--sd-text);
}

.profile-section-title i {
    float: right;
    color: #1d63c8;
}

.profile-segment {
    display: inline-flex;
    border: 1px solid #1d63c8;
    border-radius: 8px;
    overflow: hidden;
}

.profile-segment label {
    padding: 8px 16px;
    margin: 0;
    border-right: 1px solid #1d63c8;
    cursor: pointer;
}

.profile-segment label:last-child {
    border-right: 0;
}

.profile-empty {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sd-muted);
}

.profile-timeline {
    border-left: 2px solid var(--sd-border);
    margin-left: 12px;
    padding-left: 20px;
}

.profile-timeline-item {
    position: relative;
    margin-bottom: 16px;
}

.profile-timeline-item .dot {
    position: absolute;
    left: -28px;
    top: 4px;
    width: 14px;
    height: 14px;
    background: var(--sd-primary-dark);
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--sd-primary-soft);
}

.profile-timeline-item strong {
    display: block;
}

.profile-timeline-item small {
    display: block;
    color: var(--sd-muted);
    margin: 3px 0;
}

@media (max-width: 1200px) {
    .employee-dashboard-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .employee-profile-shell {
        grid-template-columns: 1fr;
    }
    .employee-profile-sidebar {
        position: static;
        max-height: none;
    }
}

/* Malaysia statutory employee profile additions */
.profile-tax-child-grid {
    display: grid;
    grid-template-columns: 1.4fr .7fr .7fr;
    gap: 14px;
    align-items: start;
}
.profile-tax-child-grid strong {
    display: block;
    margin-bottom: 10px;
    color: var(--sd-text);
}
.profile-tax-child-grid small {
    display: block;
    min-height: 38px;
    color: var(--sd-muted);
    font-weight: 600;
}
.employee-profile-main .form-check,
.employee-profile-main .form-check-input,
.employee-profile-main input[type="checkbox"],
.employee-profile-main input[type="radio"] {
    pointer-events: auto !important;
    cursor: pointer;
}
#employee-profile-form .form-check {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    min-height: 32px;
    padding-left: 0 !important;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
}
#employee-profile-form .form-check .form-check-input {
    position: static !important;
    inset: auto !important;
    float: none !important;
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px;
    margin: 0 9px 0 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 2;
}
#employee-profile-form .form-check .form-check-input:checked {
    border-color: #219d90 !important;
    background-color: #219d90 !important;
}
#employee-profile-form .profile-segment label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    user-select: none;
    touch-action: manipulation;
}
#employee-profile-form .profile-segment input[type="radio"] {
    position: static !important;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0;
    opacity: 1 !important;
    accent-color: #219d90;
}
#employee-profile-form .attendance-location-option > input[type="checkbox"] {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    pointer-events: auto !important;
    z-index: 3;
}
#employee-profile-form .attendance-location-option .location-check,
#employee-profile-form .attendance-location-option .location-icon,
#employee-profile-form .attendance-location-option strong {
    pointer-events: none;
}
#employee-profile-form .family-working-toggle input[type="checkbox"] {
    position: static !important;
    flex: 0 0 18px;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.family-member-row { background: linear-gradient(145deg,#fff,#f8fbfd); border-color: #dce7ed !important; }
.family-member-row [hidden] { display: none !important; }
.family-working-toggle { display: flex; align-items: flex-start; gap: 10px; min-height: 66px; margin: 0; padding: 11px; border: 1px solid #dce6ed; border-radius: 11px; background: #fff; cursor: pointer; }
.family-working-toggle input { width: 18px; height: 18px; margin-top: 2px; accent-color: #219d90; cursor: pointer; }
.family-working-toggle span,.family-working-toggle strong,.family-working-toggle small { display: block; }
.family-working-toggle strong { color: #36596d; font-size: 11px; }
.family-working-toggle small { margin-top: 3px; color: #7d909d; font-size: 9px; line-height: 1.4; }
.pcb-child-guide { overflow: hidden; border: 1px solid #d8e8e8; border-radius: 14px; background: linear-gradient(145deg,#fbffff,#f5fafc); }
.pcb-child-guide-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #dceaea; background: linear-gradient(120deg,#eaf8f6,#eef7fd); }
.pcb-child-guide-head strong,.pcb-child-guide-head small { display: block; }
.pcb-child-guide-head strong { color: #24566b; font-size: 12px; }
.pcb-child-guide-head small { margin-top: 2px; color: #728d99; font-size: 9px; }
.pcb-child-guide-head>span { padding: 5px 8px; border-radius: 999px; background: #fff; color: #1d8e84; font-size: 8px; font-weight: 900; white-space: nowrap; }
.pcb-child-guide .table { font-size: 10px; }
.pcb-child-guide .table th { color: #537080; font-size: 9px; }
.pcb-child-guide .table td { color: #607b89; padding: 8px 10px; }
.pcb-child-guide .table td:nth-child(2) { color: #176e68; font-weight: 900; white-space: nowrap; }
.pcb-child-guide .alert { margin: 0 10px 10px; font-size: 10px; line-height: 1.5; }
.form-check-inline {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    margin-right: 18px;
}
@media (max-width: 992px) {
    .profile-tax-child-grid {
        grid-template-columns: 1fr;
    }
}

/* HRM enterprise sidebar nested menu polish */
.dash-sidebar .dash-submenu .dash-submenu {
    padding-left: 12px !important;
    margin-left: 10px !important;
    border-left: 1px solid var(--sd-border, #e8eef5);
}

.dash-sidebar .dash-submenu .dash-link i {
    margin-right: 7px;
    font-size: 15px;
}

.dash-sidebar .dash-submenu .dash-link {
    white-space: normal !important;
    line-height: 1.25;
}

.dash-sidebar .dash-hasmenu > .dash-link .dash-mtext {
    max-width: 185px;
}



/* =========================================================
   SMS DEEN Premium Glass Sidebar Upgrade
   Keep this block at the VERY END of public/css/custom.css
   ========================================================= */

:root {
    --sd-sidebar-width: 315px;
    --sd-glass-bg: rgba(255, 255, 255, .74);
    --sd-glass-strong: rgba(255, 255, 255, .88);
    --sd-glass-border: rgba(255, 255, 255, .55);
    --sd-deep: #102033;
    --sd-teal: #38b89d;
    --sd-teal-soft: rgba(56, 184, 157, .13);
    --sd-sky: #4db7f2;
    --sd-sky-soft: rgba(77, 183, 242, .14);
    --sd-violet: #7c6df2;
    --sd-violet-soft: rgba(124, 109, 242, .12);
    --sd-amber: #f5a524;
    --sd-amber-soft: rgba(245, 165, 36, .14);
    --sd-rose: #f06292;
    --sd-rose-soft: rgba(240, 98, 146, .12);
}

/* Wider floating glass sidebar */
.dash-sidebar {
    width: var(--sd-sidebar-width) !important;
    min-width: var(--sd-sidebar-width) !important;
    margin: 12px 0 12px 12px !important;
    height: calc(100vh - 24px) !important;
    border-radius: 26px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.86), rgba(245,251,255,.66)) !important;
    border: 1px solid var(--sd-glass-border) !important;
    box-shadow:
        0 24px 70px rgba(15, 23, 42, .12),
        inset 0 1px 0 rgba(255,255,255,.9) !important;
    backdrop-filter: blur(22px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(135%) !important;
    overflow: hidden !important;
}

.dash-sidebar.light-sidebar.transprent-bg,
.dash-sidebar.light-sidebar {
    background:
        linear-gradient(145deg, rgba(255,255,255,.86), rgba(245,251,255,.66)) !important;
}

/* Push page/header content to match new width */
.dash-container,
.dash-header {
    margin-left: calc(var(--sd-sidebar-width) + 14px) !important;
}

.dash-header {
    width: calc(100% - var(--sd-sidebar-width) - 14px) !important;
}

/* Logo/header area */
.dash-sidebar .m-header {
    min-height: 74px !important;
    padding: 16px 18px !important;
    border-bottom: 1px solid rgba(226, 232, 240, .68) !important;
    background: rgba(255, 255, 255, .42) !important;
}

.dash-sidebar .main-logo .b-brand {
    justify-content: flex-start !important;
}

.dash-sidebar .logo-lg {
    max-height: 44px !important;
    object-fit: contain !important;
}

/* Scroll container */
.dash-sidebar .navbar-content {
    height: calc(100vh - 98px) !important;
    padding: 12px 10px 22px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.dash-sidebar .navbar-content::-webkit-scrollbar {
    width: 6px;
}

.dash-sidebar .navbar-content::-webkit-scrollbar-thumb {
    background: rgba(56, 184, 157, .28);
    border-radius: 999px;
}

.dash-sidebar .dash-navbar {
    padding: 0 !important;
}

/* Main menu item */
.dash-sidebar .dash-navbar > .dash-item {
    margin: 5px 0 !important;
}

.dash-sidebar .dash-link {
    min-height: 46px !important;
    border-radius: 18px !important;
    margin: 3px 6px !important;
    padding: 11px 14px !important;
    color: var(--sd-deep) !important;
    font-size: 13px !important;
    font-weight: 780 !important;
    letter-spacing: -.01em !important;
    transition: all .18s ease !important;
    border: 1px solid transparent !important;
    background: transparent !important;
}

.dash-sidebar .dash-link:hover {
    background: rgba(255, 255, 255, .74) !important;
    border-color: rgba(226, 232, 240, .82) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06) !important;
    transform: translateX(2px);
}

/* Icon bubble */
.dash-sidebar .dash-micon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 11px !important;
    background: rgba(255,255,255,.78) !important;
    color: var(--sd-teal) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06) !important;
}

.dash-sidebar .dash-micon i {
    font-size: 18px !important;
}
.dash-sidebar .sky-module-mark{padding:0!important;background:transparent!important;box-shadow:none!important}.dash-sidebar .sky-module-mark img{width:34px;height:34px;display:block;transition:transform .25s cubic-bezier(.22,1,.36,1)}.dash-sidebar .dash-link:hover .sky-module-mark img{transform:scale(1.08) rotate(-3deg)}

/* Active top-level menu */
.dash-sidebar .dash-navbar > .dash-item.active > .dash-link,
.dash-sidebar .dash-navbar > .dash-item.dash-trigger > .dash-link {
    background:
        linear-gradient(135deg, rgba(56,184,157,.18), rgba(77,183,242,.16)) !important;
    border-color: rgba(56,184,157,.18) !important;
    color: var(--sd-teal) !important;
    box-shadow:
        0 14px 32px rgba(56, 184, 157, .18),
        inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.dash-sidebar .dash-navbar > .dash-item.active > .dash-link .dash-micon,
.dash-sidebar .dash-navbar > .dash-item.dash-trigger > .dash-link .dash-micon {
    background: linear-gradient(135deg, #e9fff8, #e7f4ff) !important;
    color: var(--sd-teal) !important;
}

/* Text wrapping for long names */
.dash-sidebar .dash-mtext {
    white-space: normal !important;
    line-height: 1.25 !important;
}

.dash-sidebar .dash-navbar > .dash-item > .dash-link .dash-mtext {
    max-width: 205px !important;
}

/* Submenu panel */
.dash-sidebar .dash-submenu {
    margin: 6px 8px 10px 24px !important;
    padding: 8px 0 8px 12px !important;
    border-left: 1px solid rgba(56,184,157,.22) !important;
    background: transparent !important;
}

.dash-sidebar .dash-submenu .dash-item {
    margin: 2px 0 !important;
}

/* Submenu links compact */
.dash-sidebar .dash-submenu .dash-link {
    min-height: 38px !important;
    padding: 9px 11px !important;
    margin: 3px 0 !important;
    border-radius: 13px !important;
    font-size: 12.5px !important;
    font-weight: 740 !important;
    color: #26364a !important;
}

/* Deeper submenu: less indentation and more card-like */
.dash-sidebar .dash-submenu .dash-submenu {
    margin: 4px 0 8px 12px !important;
    padding: 5px 0 5px 10px !important;
    border-left: 1px dashed rgba(148, 163, 184, .45) !important;
}

.dash-sidebar .dash-submenu .dash-submenu .dash-link {
    min-height: 34px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    color: #506174 !important;
}

/* Active/hover submenu */
.dash-sidebar .dash-submenu .dash-link:hover,
.dash-sidebar .dash-submenu .dash-item.active > .dash-link,
.dash-sidebar .dash-submenu .dash-item.dash-trigger > .dash-link {
    background: rgba(255,255,255,.82) !important;
    color: var(--sd-teal) !important;
    border-color: rgba(56,184,157,.18) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05) !important;
}

/* HRM module group cards */
.dash-sidebar .dash-submenu > .dash-hasmenu > .dash-link {
    background: rgba(255,255,255,.54) !important;
    border: 1px solid rgba(226,232,240,.72) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04) !important;
}

.dash-sidebar .dash-submenu > .dash-hasmenu > .dash-link:hover,
.dash-sidebar .dash-submenu > .dash-hasmenu.dash-trigger > .dash-link {
    background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(232,248,246,.8)) !important;
}

/* Submenu icon colors by module order */
.dash-sidebar .dash-submenu > .dash-hasmenu:nth-of-type(3) > .dash-link i {
    color: var(--sd-sky) !important;
}

.dash-sidebar .dash-submenu > .dash-hasmenu:nth-of-type(5) > .dash-link i {
    color: var(--sd-teal) !important;
}

.dash-sidebar .dash-submenu > .dash-hasmenu:nth-of-type(6) > .dash-link i {
    color: var(--sd-violet) !important;
}

.dash-sidebar .dash-submenu > .dash-hasmenu:nth-of-type(7) > .dash-link i {
    color: var(--sd-amber) !important;
}

.dash-sidebar .dash-submenu > .dash-hasmenu:nth-of-type(8) > .dash-link i {
    color: var(--sd-rose) !important;
}

/* Arrow alignment and animation */
.dash-sidebar .dash-arrow {
    margin-left: auto !important;
    opacity: .68 !important;
    transition: all .18s ease !important;
}

.dash-sidebar .dash-trigger > .dash-link > .dash-arrow {
    transform: rotate(90deg);
}

/* Directory selected style should be cleaner */
.dash-sidebar .dash-submenu > .dash-item.active > .dash-link,
.dash-sidebar .dash-submenu > .dash-item > .dash-link[href*="employee"] {
    border-radius: 16px !important;
}

/* Menu separation: create subtle breathing room around HRM */
.dash-sidebar .dash-navbar > .dash-item.dash-hasmenu.active {
    position: relative;
}

.dash-sidebar .dash-navbar > .dash-item.dash-hasmenu.active::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--sd-teal), var(--sd-sky));
}

/* Compact but readable on smaller screens */
@media (max-width: 1199px) {
    :root {
        --sd-sidebar-width: 290px;
    }

    .dash-sidebar {
        margin: 0 !important;
        height: 100vh !important;
        border-radius: 0 24px 24px 0 !important;
    }
}

/* The template turns the sidebar into an overlay at tablet width. */
@media (max-width: 1024px) {
    .dash-container,
    .dash-header {
        margin-left: 0 !important;
    }

    .dash-header {
        width: 100% !important;
    }
}

/* When sidebar is collapsed by template */
body:not(.minimenu) .dash-sidebar {
    transition: width .2s ease, background .2s ease, box-shadow .2s ease !important;
}

/* Remove weird menu bullets */
.dash-sidebar .dash-item::before,
.dash-sidebar .dash-link::before,
.dash-sidebar .dash-submenu .dash-item::before,
.dash-sidebar .dash-submenu .dash-link::before {
    display: none !important;
    content: none !important;
}

/* Remove connector dots */
.dash-sidebar .dash-submenu {
    border-left: none !important;
}

/* Cleaner submenu spacing */
.dash-sidebar .dash-submenu > .dash-item {
    margin-bottom: 8px !important;
}

/* Make cards cleaner */
.dash-sidebar .dash-submenu > .dash-item > .dash-link {
    background: rgba(255,255,255,.85) !important;
    border: 1px solid rgba(226,232,240,.8) !important;
    border-radius: 16px !important;
    min-height: 44px !important;
}

/* Slim module rail: expand on hover or pin by clicking the brand. */
:root { --sd-sidebar-slim: 84px; }
.dash-sidebar {
    width: var(--sd-sidebar-slim) !important;
    min-width: var(--sd-sidebar-slim) !important;
    transition: width .24s ease, min-width .24s ease, box-shadow .24s ease !important;
    z-index: 1040 !important;
}
.dash-sidebar:hover,
.dash-sidebar:focus-within {
    width: var(--sd-sidebar-width) !important;
    min-width: var(--sd-sidebar-width) !important;
    background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(239,249,250,.76))!important;
    box-shadow:0 28px 80px rgba(15,23,42,.18),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
.dash-container,
.dash-header {
    margin-left: calc(var(--sd-sidebar-slim) + 14px) !important;
    transition: margin-left .24s ease, width .24s ease !important;
}
.dash-header { width: calc(100% - var(--sd-sidebar-slim) - 14px) !important; }
body.sky-sidebar-pinned .dash-container,
body.sky-sidebar-pinned .dash-header { margin-left: calc(var(--sd-sidebar-slim) + 14px) !important; }
body.sky-sidebar-pinned .dash-header { width: calc(100% - var(--sd-sidebar-slim) - 14px) !important; }
.dash-sidebar .m-header { padding: 14px !important; }
.dash-sidebar .main-logo .b-brand { justify-content:center !important;width:100%;overflow:hidden;cursor:pointer }
.dash-sidebar .logo-lg { width:46px !important;max-width:46px !important;height:44px !important;object-fit:contain !important;transition:width .2s ease,max-width .2s ease !important }
.dash-sidebar:hover .logo-lg,
.dash-sidebar:focus-within .logo-lg { width:150px !important;max-width:150px !important; }
.dash-sidebar .navbar-content { height:calc(100vh - 164px) !important;padding:10px 8px !important; }
.dash-sidebar .dash-link { padding:8px 10px !important;white-space:nowrap !important;overflow:hidden !important; }
.dash-sidebar .dash-micon { margin-right:0 !important; }
.dash-sidebar .dash-mtext,
.dash-sidebar .dash-arrow,
.dash-sidebar .dash-submenu { opacity:0;visibility:hidden;pointer-events:none; }
.dash-sidebar:hover .dash-mtext,
.dash-sidebar:hover .dash-arrow,
.dash-sidebar:hover .dash-submenu,
.dash-sidebar:focus-within .dash-mtext,
.dash-sidebar:focus-within .dash-arrow,
.dash-sidebar:focus-within .dash-submenu { opacity:1;visibility:visible;pointer-events:auto; }
.dash-sidebar:not(:hover):not(:focus-within) .dash-submenu { display:none !important; }
.dash-sidebar:hover .dash-micon,
.dash-sidebar:focus-within .dash-micon { margin-right:11px !important; }
.sky-sidebar-footer{position:absolute;left:9px;right:9px;bottom:12px;padding-top:10px;border-top:1px solid rgba(148,163,184,.2)}
.sky-sidebar-footer form{margin:0}.sky-sidebar-logout{display:flex;align-items:center;width:100%;height:48px;padding:6px 10px;border:0;border-radius:16px;background:rgba(255,235,238,.75);color:#be4050;font-weight:850;overflow:hidden;transition:.18s}.sky-sidebar-logout:hover{background:#ffe7ea;box-shadow:0 9px 22px rgba(190,64,80,.12)}.sky-sidebar-logout .dash-micon{color:#d54a5b!important}.sky-sidebar-logout .dash-mtext{white-space:nowrap;margin-left:0}.dash-sidebar:hover .sky-sidebar-logout .dash-mtext,.dash-sidebar:focus-within .sky-sidebar-logout .dash-mtext{margin-left:0}
.sky-user-greeting{display:flex!important;align-items:center;gap:10px;padding:5px 10px!important}.sky-user-greeting>span{display:flex;flex-direction:column}.sky-user-greeting small{color:#8193a0;font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.06em}.sky-user-greeting strong{color:#263f52;font-size:13px}.sky-greeting-icon{display:grid!important;place-items:center;width:38px;height:38px;border-radius:13px;background:linear-gradient(135deg,#fff4cf,#eaf9f5);color:#e6a11b;font-size:18px}.sky-live-clock{margin-left:10px;padding-left:14px;border-left:1px solid #e3eaee}.sky-live-clock strong{font-size:15px;font-variant-numeric:tabular-nums}.sky-live-clock small{letter-spacing:0;text-transform:none}.dash-header{right:0!important;max-width:none!important}.dash-sidebar{transition-timing-function:cubic-bezier(.22,1,.36,1)!important}.dash-sidebar .dash-mtext,.dash-sidebar .dash-arrow,.dash-sidebar .dash-submenu{transition:opacity .16s ease .05s,visibility .16s ease!important}
.sky-header-avatar{flex:0 0 auto;border:2px solid rgba(255,255,255,.92);border-radius:13px;box-shadow:0 5px 14px rgba(28,74,98,.17)}
.egf-avatar{object-fit:cover}.egf-person-chip img{width:18px;height:18px;flex:0 0 18px;border-radius:50%;object-fit:cover}
@media(max-width:1024px){.dash-container,.dash-header,body.sky-sidebar-pinned .dash-container,body.sky-sidebar-pinned .dash-header{margin-left:0!important}.dash-header,body.sky-sidebar-pinned .dash-header{width:100%!important}.dash-sidebar:hover{width:290px!important;min-width:290px!important}}

/* Distinct coloured module marks for fast visual navigation. */
.dash-sidebar .dash-navbar>.dash-item:nth-child(8n+1)>.dash-link>.dash-micon{background:linear-gradient(135deg,#38b89d,#65d5b8)!important;color:#fff!important}
.dash-sidebar .dash-navbar>.dash-item:nth-child(8n+2)>.dash-link>.dash-micon{background:linear-gradient(135deg,#4b9fea,#62c8f4)!important;color:#fff!important}
.dash-sidebar .dash-navbar>.dash-item:nth-child(8n+3)>.dash-link>.dash-micon{background:linear-gradient(135deg,#7b6df2,#a58cf6)!important;color:#fff!important}
.dash-sidebar .dash-navbar>.dash-item:nth-child(8n+4)>.dash-link>.dash-micon{background:linear-gradient(135deg,#f09a3e,#f7bd58)!important;color:#fff!important}
.dash-sidebar .dash-navbar>.dash-item:nth-child(8n+5)>.dash-link>.dash-micon{background:linear-gradient(135deg,#ec668d,#f48ca7)!important;color:#fff!important}
.dash-sidebar .dash-navbar>.dash-item:nth-child(8n+6)>.dash-link>.dash-micon{background:linear-gradient(135deg,#22a5b8,#55cad4)!important;color:#fff!important}
.dash-sidebar .dash-navbar>.dash-item:nth-child(8n+7)>.dash-link>.dash-micon{background:linear-gradient(135deg,#536fe4,#7794f4)!important;color:#fff!important}
.dash-sidebar .dash-navbar>.dash-item:nth-child(8n)>.dash-link>.dash-micon{background:linear-gradient(135deg,#d45e52,#ec8976)!important;color:#fff!important}
.dash-sidebar .dash-navbar>.dash-item>.dash-link>.dash-micon{box-shadow:0 8px 18px rgba(28,65,90,.16)!important}.dash-sidebar .dash-navbar>.dash-item>.dash-link>.dash-micon i{color:inherit!important}.dash-sidebar .dash-navbar>.dash-item>.dash-link:hover>.dash-micon{transform:scale(1.06);box-shadow:0 11px 24px rgba(28,65,90,.22)!important}.dash-sidebar .dash-navbar>.dash-item>.dash-link>.sky-module-mark{background:transparent!important;box-shadow:none!important}

/* Stable application shell: apply the slim rail offset exactly once. */
@media(min-width:1025px){
    .dash-header,body.sky-sidebar-pinned .dash-header{left:calc(var(--sd-sidebar-slim) + 14px)!important;right:20px!important;width:auto!important;margin-left:0!important}
    .dash-container,body.sky-sidebar-pinned .dash-container{width:auto!important;margin-left:calc(var(--sd-sidebar-slim) + 14px)!important;padding-right:0!important}
    .dash-container .dash-content{width:100%!important;max-width:none!important;padding-left:22px!important;padding-right:20px!important}
}
@media(max-width:1024px){.dash-header{left:0!important;right:0!important;width:100%!important;margin-left:0!important}.dash-container{width:100%!important;margin-left:0!important}}

/* Clean greeting and notification top bar. */
.sky-topbar{min-height:70px!important;border:1px solid rgba(226,234,239,.9)!important;border-radius:20px!important;background:rgba(255,255,255,.88)!important;box-shadow:0 12px 35px rgba(27,58,78,.08)!important;backdrop-filter:blur(18px) saturate(140%)!important}

/* Refined sidebar motion. */
.dash-sidebar{will-change:width,min-width;transition:width .42s cubic-bezier(.16,1,.3,1),min-width .42s cubic-bezier(.16,1,.3,1),background .3s ease,box-shadow .35s ease!important}.dash-sidebar .m-header,.dash-sidebar .navbar-content{transition:padding .34s cubic-bezier(.16,1,.3,1)!important}.dash-sidebar .logo-lg{transition:width .36s cubic-bezier(.16,1,.3,1),max-width .36s cubic-bezier(.16,1,.3,1),transform .3s ease!important}.dash-sidebar .dash-link{transition:background .24s ease,border-color .24s ease,box-shadow .28s ease,transform .28s cubic-bezier(.16,1,.3,1),padding .34s cubic-bezier(.16,1,.3,1)!important}.dash-sidebar .dash-micon{transition:margin .34s cubic-bezier(.16,1,.3,1),transform .25s ease,background .25s ease,box-shadow .25s ease!important}.dash-sidebar .dash-mtext{opacity:0;transform:translateX(-8px);transition:opacity .2s ease,transform .32s cubic-bezier(.16,1,.3,1),visibility .2s!important}.dash-sidebar .dash-arrow{opacity:0!important;transform:translateX(-6px);transition:opacity .18s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility .2s!important}.dash-sidebar .dash-submenu{opacity:0;transform:translateX(-7px);transform-origin:left top;transition:opacity .22s ease .06s,transform .34s cubic-bezier(.16,1,.3,1),visibility .22s!important}.dash-sidebar:hover .dash-mtext,.dash-sidebar:focus-within .dash-mtext{opacity:1;transform:translateX(0);transition-delay:.07s}.dash-sidebar:hover .dash-arrow,.dash-sidebar:focus-within .dash-arrow{opacity:.68!important;transform:translateX(0);transition-delay:.1s}.dash-sidebar:hover .dash-submenu,.dash-sidebar:focus-within .dash-submenu{opacity:1;transform:translateX(0);transition-delay:.09s}.dash-sidebar .dash-link:hover{transform:translateX(1px)!important}
.sky-topbar-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;padding:8px 14px 8px 17px}.sky-topbar-left{display:flex;align-items:center;gap:11px;min-width:0}.sky-topbar-right{display:flex;align-items:center}.sky-mobile-menu{display:none;width:40px;height:40px;border:0;border-radius:12px;background:#eef7f7;color:#218f87;font-size:20px}.sky-time-mark{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;background:linear-gradient(135deg,#fff1c8,#eaf9f5);color:#dd9816;font-size:20px}.sky-welcome{display:flex;flex-direction:column;min-width:120px}.sky-welcome small{color:#8295a1;font-size:10px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.sky-welcome strong{color:#26495e;font-size:14px}.sky-clock-block{display:flex;flex-direction:column;margin-left:9px;padding-left:17px;border-left:1px solid #e2eaee}.sky-clock-block strong{color:#173f5b;font-size:17px;font-weight:900;font-variant-numeric:tabular-nums}.sky-clock-block small{color:#8597a2;font-size:10px}.sky-notification-button{position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid #e2ebef;border-radius:14px;background:linear-gradient(145deg,#fff,#f1f8fa);color:#317994;font-size:20px;box-shadow:0 7px 18px rgba(27,77,99,.08)}.sky-notification-button:after{display:none}.sky-notification-count{position:absolute;right:-5px;top:-5px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:2px solid #fff;border-radius:20px;background:#ed5f72;color:#fff;font-size:9px;font-weight:900}.sky-notification-menu{width:min(390px,92vw)!important;padding:0!important;border-radius:20px!important;overflow:hidden}.sky-notification-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:linear-gradient(125deg,#143b60,#1b9996);color:#fff}.sky-notification-head small{opacity:.7;font-size:10px;text-transform:uppercase;font-weight:800}.sky-notification-head h5{color:#fff;margin:2px 0 0;font-weight:850}.sky-notification-head>span{display:grid;place-items:center;min-width:31px;height:31px;border-radius:10px;background:rgba(255,255,255,.16);font-weight:900}.sky-notification-list{max-height:430px;overflow:auto;padding:9px}.sky-notification-entry{padding:5px;border-bottom:1px solid #edf2f4}.sky-notification-entry:last-child{border-bottom:0}.sky-notification-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:42px 20px;color:#8295a1}.sky-notification-empty i{font-size:38px;color:#9fc0c3;margin-bottom:9px}.sky-notification-empty strong{color:#35586b}.sky-notification-empty small{margin-top:4px}.sky-notice-kind{display:grid;place-items:center;width:34px;height:34px;min-width:34px;border-radius:11px;background:#e9f7f5;color:#198f83}.sky-notification-entry>div{padding:8px}.sky-notification-entry strong{color:#315266;font-size:12px}.sky-notification-entry small{font-size:10px;line-height:1.4}@media(max-width:1024px){.sky-mobile-menu{display:grid;place-items:center}}@media(max-width:620px){.sky-clock-block{display:none}.sky-welcome{min-width:0}.sky-topbar{border-radius:0!important}.sky-topbar-inner{padding-left:10px}}

/* Fixed sidebar rhythm: icon positions never shift when the rail expands. */
.dash-sidebar .dash-navbar{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;width:100%!important;margin:0!important;padding:0!important}
.dash-sidebar .dash-navbar>.dash-item{display:block!important;width:100%!important;min-width:0!important;margin:0!important;padding:0!important}
.dash-sidebar .dash-navbar>.dash-item>.dash-link{display:grid!important;grid-template-columns:44px minmax(0,1fr) 18px!important;align-items:center!important;column-gap:11px!important;width:100%!important;height:52px!important;min-height:52px!important;margin:0!important;padding:4px 10px!important;border-radius:15px!important;overflow:hidden!important}
.dash-sidebar .dash-navbar>.dash-item>.dash-link>.dash-micon{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;min-width:44px!important;margin:0!important;border-radius:14px!important;justify-self:start!important}
.dash-sidebar .dash-navbar>.dash-item>.dash-link>.dash-mtext{min-width:0!important;margin:0!important;overflow:hidden!important;text-overflow:ellipsis!important}
.dash-sidebar .dash-navbar>.dash-item>.dash-link>.dash-arrow{width:18px!important;margin:0!important;justify-self:end!important}
.dash-sidebar:hover .dash-micon,.dash-sidebar:focus-within .dash-micon{margin-right:0!important}
.dash-sidebar:not(:hover):not(:focus-within) .dash-navbar>.dash-item>.dash-link{grid-template-columns:44px 0 0!important;column-gap:0!important}
.dash-sidebar .navbar-content{overflow-x:hidden!important}

/* Full-width page canvas across every module. */
.dash-container,.dash-container .dash-content{max-width:none!important;width:auto!important}.dash-content>.row{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}.dash-content>.row>[class*="col-"]{max-width:100%}.dash-content [class$="-wrap"],.dash-content [class$="-workspace"],.dash-content [class$="-page"],.dash-content [class$="-shell"]{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}.dash-content .container,.dash-content .container-sm,.dash-content .container-md,.dash-content .container-lg,.dash-content .container-xl,.dash-content .container-xxl{max-width:none!important;width:100%!important}@media(min-width:1025px){.dash-container .dash-content{padding-left:18px!important;padding-right:18px!important}}@media(max-width:575px){.dash-container .dash-content{padding-left:12px!important;padding-right:12px!important}}

/* =========================================================
   High-end navigation rail and payroll operations workspace
   ========================================================= */
:root{
    --nav-rail:#102c72;
    --nav-rail-deep:#081d52;
    --nav-cyan:#51d7d0;
    --payroll-blue:#316fd0;
    --payroll-navy:#102d5c;
    --payroll-ink:#172b45;
    --payroll-muted:#718096;
    --payroll-line:#e6edf5;
    --payroll-canvas:#f4f7fc;
    --payroll-shadow:0 18px 50px rgba(23,43,69,.09);
}

/* The compact state behaves as a true module rail. */
.dash-sidebar,
.dash-sidebar.light-sidebar,
.dash-sidebar.light-sidebar.transprent-bg{
    background:linear-gradient(180deg,var(--nav-rail-deep) 0%,var(--nav-rail) 58%,#186c9c 100%)!important;
    border:1px solid rgba(255,255,255,.11)!important;
    box-shadow:0 24px 70px rgba(9,29,75,.28)!important;
    transition:width .46s cubic-bezier(.16,1,.3,1),min-width .46s cubic-bezier(.16,1,.3,1),background .3s ease,box-shadow .35s ease!important;
}
.dash-sidebar:hover,
.dash-sidebar:focus-within{
    background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(244,249,255,.94))!important;
    border-color:rgba(211,224,239,.9)!important;
    box-shadow:0 30px 90px rgba(9,29,75,.22)!important;
}
.dash-sidebar .m-header{
    min-height:76px!important;
    background:transparent!important;
    border-bottom:1px solid rgba(255,255,255,.1)!important;
}
.dash-sidebar:hover .m-header,
.dash-sidebar:focus-within .m-header{border-bottom-color:#e5edf4!important}
.dash-sidebar .main-logo .b-brand{position:relative!important;min-height:46px}
.sky-brand-mark{
    position:absolute;
    inset:0 auto 0 50%;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    transform:translateX(-50%);
    border:1px solid rgba(255,255,255,.28);
    border-radius:15px;
    background:linear-gradient(135deg,#46d8ce,#6de1c3);
    color:#0b2a64;
    font-size:25px;
    box-shadow:0 12px 30px rgba(3,15,50,.28),inset 0 1px 0 rgba(255,255,255,.55);
    opacity:1;
    transition:opacity .2s ease,transform .38s cubic-bezier(.16,1,.3,1);
}
.dash-sidebar .logo-lg{
    opacity:0;
    transform:translateX(-10px) scale(.94);
    transition:opacity .2s ease,transform .4s cubic-bezier(.16,1,.3,1)!important;
}
.dash-sidebar:hover .sky-brand-mark,
.dash-sidebar:focus-within .sky-brand-mark{opacity:0;transform:translateX(-72px) scale(.85)}
.dash-sidebar:hover .logo-lg,
.dash-sidebar:focus-within .logo-lg{opacity:1;transform:translateX(0) scale(1)}
.dash-sidebar:not(:hover):not(:focus-within) .dash-navbar>.dash-item>.dash-link>.dash-micon{
    background:rgba(255,255,255,.1)!important;
    color:#dceaff!important;
    border:1px solid rgba(255,255,255,.09)!important;
    box-shadow:none!important;
}
.dash-sidebar:not(:hover):not(:focus-within) .dash-navbar>.dash-item.active>.dash-link>.dash-micon,
.dash-sidebar:not(:hover):not(:focus-within) .dash-navbar>.dash-item.dash-trigger>.dash-link>.dash-micon{
    background:linear-gradient(135deg,var(--nav-cyan),#62d9ef)!important;
    color:#08245b!important;
    border-color:rgba(255,255,255,.5)!important;
    box-shadow:0 11px 24px rgba(0,0,0,.22)!important;
}
.dash-sidebar:not(:hover):not(:focus-within) .dash-navbar>.dash-item>.dash-link:hover>.dash-micon{
    background:rgba(255,255,255,.2)!important;
    transform:translateY(-2px)!important;
}
.dash-sidebar:not(:hover):not(:focus-within) .sky-module-mark img{filter:brightness(0) invert(1);opacity:.9}
.dash-sidebar .navbar-content{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.dash-sidebar:not(:hover):not(:focus-within) .navbar-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
.dash-sidebar:not(:hover):not(:focus-within) .sky-sidebar-footer{border-top-color:rgba(255,255,255,.12)}
.dash-sidebar:not(:hover):not(:focus-within) .sky-sidebar-logout{background:rgba(255,255,255,.09);color:#fff}
.dash-sidebar:not(:hover):not(:focus-within) .sky-sidebar-logout .dash-micon{background:transparent!important;color:#fff!important;border:0!important}
@media(prefers-reduced-motion:reduce){
    .dash-sidebar,.dash-sidebar *,.payroll-studio *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Payroll canvas */
.payroll-studio{
    --payroll-card-radius:24px;
    font-family:Inter,"Segoe UI",sans-serif;
}
.payroll-studio,.payroll-studio *{box-sizing:border-box}
.payroll-shell{
    display:grid;
    grid-template-columns:236px minmax(0,1fr);
    min-height:900px;
    overflow:hidden;
    border:1px solid rgba(224,233,243,.95);
    border-radius:28px;
    background:var(--payroll-canvas);
    box-shadow:0 24px 70px rgba(23,43,69,.08);
}
.payroll-shell.payroll-process-shell{grid-template-columns:minmax(0,1fr)}
.payroll-context-panel{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:22px 14px;
    border-right:1px solid #e2eaf3;
    background:linear-gradient(180deg,#fff 0%,#f8fbff 62%,#f0f6ff 100%);
}
.payroll-context-head{display:flex;align-items:center;gap:11px;padding:0 8px 20px;border-bottom:1px solid #e9eff5}
.payroll-context-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#143777,#2c79d2);color:#fff;font-size:21px;box-shadow:0 10px 24px rgba(35,96,179,.22)}
.payroll-context-head div{display:flex;flex-direction:column}
.payroll-context-head small{color:#8a99ab;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.payroll-context-head strong{color:var(--payroll-navy);font-size:17px;font-weight:850}
.payroll-context-nav{display:flex;flex-direction:column;gap:6px;padding-top:18px}
.payroll-nav-label{padding:0 11px 5px;color:#9aa8b8;font-size:9px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.payroll-context-nav a{
    position:relative;
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    align-items:center;
    gap:10px;
    min-height:58px;
    padding:8px 10px;
    overflow:hidden;
    border:1px solid transparent;
    border-radius:16px;
    color:#4f6073;
    text-decoration:none;
    transition:transform .3s cubic-bezier(.16,1,.3,1),background .2s ease,border-color .2s ease,box-shadow .25s ease;
}
.payroll-context-nav a>i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#edf3f9;color:#5e7694;font-size:18px;transition:transform .28s ease,background .2s ease,color .2s ease}
.payroll-context-nav a span{display:flex;min-width:0;flex-direction:column}
.payroll-context-nav a strong{overflow:hidden;color:inherit;font-size:12.5px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.payroll-context-nav a small{overflow:hidden;margin-top:2px;color:#96a3b2;font-size:9.5px;text-overflow:ellipsis;white-space:nowrap}
.payroll-context-nav a:hover{transform:translateX(3px);border-color:#dce8f4;background:#fff;box-shadow:0 10px 25px rgba(33,63,99,.07)}
.payroll-context-nav a:hover>i{transform:scale(1.06)}
.payroll-context-nav a.active{border-color:#d8e7fb;background:linear-gradient(135deg,#edf5ff,#f4f9ff);color:#1f60b7;box-shadow:0 12px 28px rgba(49,111,208,.11)}
.payroll-context-nav a.active::before{position:absolute;inset:10px auto 10px 0;width:3px;border-radius:0 4px 4px 0;background:#3376d2;content:""}
.payroll-context-nav a.active>i{background:linear-gradient(135deg,#2e6fc7,#4690e3);color:#fff;box-shadow:0 8px 18px rgba(49,111,208,.22)}
.payroll-readiness-card{display:flex;align-items:center;gap:11px;margin-top:auto;padding:13px;border:1px solid #dfeaf5;border-radius:18px;background:rgba(255,255,255,.88);box-shadow:0 12px 28px rgba(23,43,69,.07)}
.payroll-readiness-ring,.payroll-completion-ring{position:relative;display:grid;flex:0 0 auto;place-items:center;width:52px;height:52px;border-radius:50%;background:conic-gradient(#42c6ae var(--readiness),#e8eff5 0)}
.payroll-readiness-ring::after,.payroll-completion-ring::after{position:absolute;inset:6px;border-radius:50%;background:#fff;content:""}
.payroll-readiness-ring span,.payroll-completion-ring span{position:relative;z-index:1;color:#27435f;font-size:10px;font-weight:900}
.payroll-readiness-card>div:last-child{display:flex;min-width:0;flex-direction:column}
.payroll-readiness-card strong{color:#29465f;font-size:11px}
.payroll-readiness-card small{margin-top:2px;color:#8797a8;font-size:9px;line-height:1.35}
.payroll-workspace{min-width:0;padding:22px}

/* Hero */
.payroll-hero{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
    min-height:258px;
    overflow:hidden;
    border-radius:28px;
    background:
        radial-gradient(circle at 74% 20%,rgba(98,217,239,.2),transparent 25%),
        radial-gradient(circle at 96% 90%,rgba(73,195,173,.2),transparent 32%),
        linear-gradient(125deg,#0d2a62 0%,#174e9b 58%,#217da4 100%);
    box-shadow:0 24px 55px rgba(16,45,92,.22);
    color:#fff;
}
.payroll-hero::before{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:28px 28px;content:"";mask-image:linear-gradient(90deg,#000,transparent)}
.payroll-hero-copy{position:relative;z-index:2;padding:34px 38px}
.payroll-eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:16px;padding:7px 11px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.1);color:#d9f7f5;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.payroll-hero h2{max-width:660px;margin:0;color:#fff;font-size:clamp(25px,2.4vw,38px);font-weight:850;letter-spacing:-.035em;line-height:1.08}
.payroll-hero-copy p{max-width:690px;margin:13px 0 0;color:rgba(232,243,255,.76);font-size:12.5px;line-height:1.65}
.payroll-hero-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.payroll-primary-action,.payroll-secondary-action{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:43px;padding:0 17px;border-radius:13px;font-size:11px;font-weight:850;transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
.payroll-primary-action{border:0;background:linear-gradient(135deg,#55d8c7,#73e1c6);color:#0a2c5b;box-shadow:0 12px 25px rgba(5,23,56,.25)}
.payroll-secondary-action{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.09);color:#fff;backdrop-filter:blur(9px)}
.payroll-primary-action:hover,.payroll-secondary-action:hover{transform:translateY(-2px)}
.payroll-primary-action:hover{box-shadow:0 16px 32px rgba(5,23,56,.32)}
.payroll-secondary-action:hover{background:rgba(255,255,255,.15)}
.payroll-hero-visual{position:relative;min-height:258px}
.payroll-visual-orbit{position:absolute;border:1px solid rgba(255,255,255,.11);border-radius:50%}
.payroll-visual-orbit.orbit-one{right:-40px;top:-55px;width:290px;height:290px;animation:payrollOrbit 18s linear infinite}
.payroll-visual-orbit.orbit-two{right:55px;bottom:-95px;width:245px;height:245px;animation:payrollOrbit 13s linear infinite reverse}
.payroll-visual-orbit::after{position:absolute;top:18%;left:2%;width:10px;height:10px;border-radius:50%;background:#5ddbd0;box-shadow:0 0 20px #5ddbd0;content:""}
.payroll-visual-card{position:absolute;z-index:2;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.11);box-shadow:0 24px 55px rgba(4,18,48,.22);backdrop-filter:blur(14px);color:#fff}
.payroll-visual-main{right:58px;top:53px;display:flex;width:205px;flex-direction:column;padding:21px;border-radius:23px;transform:rotate(2deg);animation:payrollFloat 6s ease-in-out infinite}
.payroll-visual-main>span{display:grid;place-items:center;width:46px;height:46px;margin-bottom:24px;border-radius:15px;background:linear-gradient(135deg,#5adbd0,#85e7c7);color:#123a68;font-size:23px}
.payroll-visual-main small{color:rgba(255,255,255,.68);font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.payroll-visual-main strong{margin-top:4px;font-size:19px}
.payroll-visual-float{right:15px;bottom:28px;display:flex;align-items:center;gap:10px;min-width:205px;padding:11px 13px;border-radius:16px;animation:payrollFloat 5s ease-in-out -2s infinite}
.payroll-visual-float>span{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.14);color:#81e3d5;font-size:18px}
.payroll-visual-float>div{display:flex;flex-direction:column}
.payroll-visual-float strong{font-size:10px}.payroll-visual-float small{color:rgba(255,255,255,.62);font-size:8.5px}
@keyframes payrollFloat{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-9px) rotate(0)}}
@keyframes payrollOrbit{to{transform:rotate(360deg)}}

/* Metrics and operational cards */
.payroll-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:16px 0}
.payroll-metric{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:12px;min-height:102px;overflow:hidden;padding:17px;border:1px solid #e4ebf3;border-radius:20px;background:#fff;box-shadow:0 12px 30px rgba(23,43,69,.055);transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .25s ease}
.payroll-metric::after{position:absolute;right:-24px;bottom:-30px;width:85px;height:85px;border-radius:50%;background:currentColor;content:"";opacity:.045}
.payroll-metric:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(23,43,69,.1)}
.payroll-metric-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;font-size:23px}
.payroll-metric>div{display:flex;min-width:0;flex-direction:column}
.payroll-metric small{color:#8695a7;font-size:9.5px;font-weight:750;text-transform:uppercase;letter-spacing:.05em}
.payroll-metric strong{overflow:hidden;margin-top:2px;color:var(--payroll-ink);font-size:20px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}
.payroll-metric em{overflow:hidden;margin-top:2px;color:#98a4b2;font-size:9px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}
.metric-blue{color:#3e7ed4}.metric-blue .payroll-metric-icon{background:#eaf3ff;color:#3472c6}
.metric-green{color:#2fb596}.metric-green .payroll-metric-icon{background:#e6f8f2;color:#269b80}
.metric-amber{color:#e8a52e}.metric-amber .payroll-metric-icon{background:#fff5dd;color:#d9941a}
.metric-violet{color:#806fe0}.metric-violet .payroll-metric-icon{background:#f0edff;color:#7562d3}
.payroll-run-card,.payroll-register-card{border:1px solid #e2eaf3;border-radius:var(--payroll-card-radius);background:#fff;box-shadow:var(--payroll-shadow)}
.payroll-run-card{padding:24px;margin-bottom:16px}
.payroll-section-heading,.payroll-register-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.payroll-section-kicker{color:#3673c6;font-size:9px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.payroll-section-heading h3,.payroll-register-head h3{margin:3px 0 0;color:var(--payroll-ink);font-size:20px;font-weight:850;letter-spacing:-.02em}
.payroll-section-heading p,.payroll-register-head p{max-width:720px;margin:6px 0 0;color:#8594a5;font-size:10.5px;line-height:1.55}
.payroll-live-pill{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:#e9f8f3;color:#278d76;font-size:9px;font-weight:850;white-space:nowrap}
.payroll-live-pill>span{width:7px;height:7px;border-radius:50%;background:#35b896;box-shadow:0 0 0 4px rgba(53,184,150,.11);animation:payrollPulse 2s ease infinite}
@keyframes payrollPulse{50%{box-shadow:0 0 0 7px rgba(53,184,150,0)}}
.payroll-stepper{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:24px 0 20px;padding:0;list-style:none}
.payroll-stepper li{position:relative;display:flex;align-items:center;gap:9px;min-width:0}
.payroll-stepper li:not(:last-child)::after{position:absolute;z-index:0;top:15px;left:34px;right:8px;height:2px;background:#e4ebf3;content:""}
.payroll-stepper li:first-child::after{background:linear-gradient(90deg,#3e7ed3,#dce7f3)}
.payroll-stepper li>span{position:relative;z-index:1;display:grid;flex:0 0 auto;place-items:center;width:31px;height:31px;border:1px solid #dbe5ef;border-radius:50%;background:#f4f7fa;color:#91a0af;font-size:10px;font-weight:900}
.payroll-stepper li.active>span{border-color:#3e7ed3;background:linear-gradient(135deg,#2f6dc2,#4b8dde);color:#fff;box-shadow:0 8px 18px rgba(49,111,208,.24)}
.payroll-stepper li>div{position:relative;z-index:1;display:flex;min-width:0;flex-direction:column;padding-right:8px;background:#fff}
.payroll-stepper strong{color:#4b5d71;font-size:10px}.payroll-stepper small{overflow:hidden;color:#99a6b4;font-size:8.5px;text-overflow:ellipsis;white-space:nowrap}
.payroll-stepper li.active strong{color:#245fae}
.payroll-period-form{overflow:hidden;border:1px solid #e2eaf3;border-radius:20px;background:linear-gradient(180deg,#f9fbfe,#f5f9fd)}
.payroll-period-fields{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(130px,.65fr) minmax(180px,.85fr) minmax(230px,1fr);align-items:end;gap:12px;padding:18px}
.payroll-period-fields>label{display:flex;flex-direction:column;gap:6px;margin:0;color:#64768b;font-size:9.5px;font-weight:800}
.payroll-select-wrap{position:relative;display:block}
.payroll-select-wrap>i{position:absolute;z-index:2;top:50%;left:12px;transform:translateY(-50%);color:#5881b6;font-size:16px;pointer-events:none}
.payroll-period-fields .form-select,.payroll-period-fields .form-control{height:45px!important;padding-left:37px!important;border:1px solid #dfe8f1!important;border-radius:13px!important;background-color:#fff!important;color:#31455b;font-weight:750}
.payroll-field-help{margin-top:-2px;color:#95a2af;font-size:8px;font-weight:600;line-height:1.35}
.payroll-period-summary{display:flex;align-items:center;gap:10px;min-height:45px;padding:6px 10px;border:1px solid #dfebf3;border-radius:13px;background:#fff}
.payroll-period-icon{display:grid;place-items:center;width:33px;height:33px;border-radius:10px;background:#e9f7f4;color:#259c84;font-size:17px}
.payroll-period-summary>div{display:flex;flex-direction:column}
.payroll-period-summary small{color:#8b9aaa;font-size:8px;text-transform:uppercase}.payroll-period-summary strong{color:#2c465f;font-size:10.5px}
.payroll-process-button{display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;gap:9px;min-height:52px;padding:6px 12px;border:0;border-radius:15px;background:linear-gradient(135deg,#245fb3,#377fd2);color:#fff;box-shadow:0 12px 26px rgba(36,95,179,.24);text-align:left;transition:transform .22s ease,box-shadow .22s ease,opacity .2s ease}
.payroll-process-button:hover{transform:translateY(-2px);box-shadow:0 17px 34px rgba(36,95,179,.3)}
.payroll-process-button:disabled{cursor:wait;opacity:.72}
.payroll-process-button>span{display:grid;place-items:center;width:37px;height:37px;border-radius:11px;background:rgba(255,255,255,.14);font-size:18px}
.payroll-process-button>div{display:flex;min-width:0;flex-direction:column}.payroll-process-button small{color:rgba(255,255,255,.66);font-size:8px}.payroll-process-button strong{font-size:11px}
.payroll-process-button.is-processing>span i{animation:payrollSpin 1s linear infinite}
@keyframes payrollSpin{to{transform:rotate(360deg)}}
.payroll-calculation-strip{display:flex;flex-wrap:wrap;gap:8px 18px;padding:11px 18px;border-top:1px solid #e2eaf3;background:#fff}
.payroll-calculation-strip span{display:inline-flex;align-items:center;gap:5px;color:#708196;font-size:9px}.payroll-calculation-strip i{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#e6f7f1;color:#279a80;font-size:10px}
.payroll-selection-builder{border-top:1px solid #e2eaf3;background:#fff}
.payroll-selection-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 18px 13px}
.payroll-selection-head h4{margin:3px 0 0;color:#263e57;font-size:16px;font-weight:850}.payroll-selection-head p{margin:5px 0 0;color:#8796a6;font-size:9.5px}
.payroll-selection-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.payroll-selection-actions button{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 10px;border:1px solid #dce6f0;border-radius:9px;background:#fff;color:#52708d;font-size:8.5px;font-weight:800;transition:.2s ease}.payroll-selection-actions button:hover{border-color:#9fbde0;background:#f1f7ff;color:#2e6ebd;transform:translateY(-1px)}
.payroll-filter-grid{display:grid;grid-template-columns:minmax(210px,1.35fr) repeat(4,minmax(135px,1fr));gap:8px;padding:13px 18px;border-top:1px solid #edf1f5;border-bottom:1px solid #e5ebf2;background:#f6f9fc}
.payroll-filter-grid>label{display:flex;min-width:0;flex-direction:column;gap:5px;margin:0;color:#6d7e91;font-size:8px;font-weight:850;text-transform:uppercase}.payroll-filter-grid select,.payroll-filter-grid input{width:100%;height:37px;border:1px solid #dce5ee;border-radius:10px;background:#fff;color:#3f566d;font-size:9.5px;outline:0}.payroll-filter-grid select{padding:0 28px 0 10px}.payroll-filter-grid input{padding:0 10px 0 33px}.payroll-filter-grid select:focus,.payroll-filter-grid input:focus{border-color:#79a6db;box-shadow:0 0 0 3px rgba(61,126,211,.09)}
.payroll-employee-search>span:last-child{position:relative;display:block}.payroll-employee-search i{position:absolute;z-index:1;top:50%;left:11px;transform:translateY(-50%);color:#8296aa;font-size:14px}
.payroll-employee-list{position:relative;max-height:390px;overflow:auto;padding:8px 10px;background:#f9fbfd;scrollbar-width:thin;scrollbar-color:#b8c7d7 transparent}
.payroll-employee-option{position:relative;display:grid;grid-template-columns:24px 38px minmax(180px,1.25fr) minmax(160px,1fr) auto;align-items:center;gap:10px;min-height:59px;margin-bottom:6px;padding:8px 11px;border:1px solid #e1e8ef;border-radius:12px;background:#fff;cursor:pointer;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease}.payroll-employee-option:hover{transform:translateY(-1px);border-color:#bfd2e7;box-shadow:0 7px 18px rgba(32,65,101,.06)}.payroll-employee-option:has(input:checked){border-color:#8db3de;background:linear-gradient(90deg,#f0f7ff,#fff);box-shadow:inset 3px 0 #3879ca}.payroll-employee-option[hidden]{display:none!important}.payroll-employee-option.is-unavailable{cursor:not-allowed;opacity:.68;background:#f7f8fa}.payroll-employee-option>input{position:absolute;opacity:0;pointer-events:none}
.payroll-option-check{display:grid;place-items:center;width:19px;height:19px;border:1px solid #c8d5e1;border-radius:6px;background:#fff;color:transparent;font-size:12px}.payroll-employee-option input:checked+.payroll-option-check{border-color:#3979c8;background:#3979c8;color:#fff}.payroll-employee-option input:disabled+.payroll-option-check{border-color:#d8dee5;background:#e9edf1}
.payroll-option-person,.payroll-option-org{display:flex;min-width:0;flex-direction:column}.payroll-option-person strong,.payroll-option-org strong{overflow:hidden;color:#2b435a;font-size:10px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}.payroll-option-person small,.payroll-option-org small{overflow:hidden;margin-top:2px;color:#8a98a7;font-size:8.5px;text-overflow:ellipsis;white-space:nowrap}.payroll-option-org strong{font-size:9.5px}.payroll-option-org small{font-size:8px}
.payroll-eligibility-tag{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:72px;padding:6px 8px;border-radius:999px;font-size:8px;font-weight:850;white-space:nowrap}.payroll-eligibility-tag.ready{background:#e7f8f2;color:#248b73}.payroll-eligibility-tag.warning{background:#fff1dd;color:#b87918}
.payroll-selection-empty{display:flex;min-height:150px;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#8193a5}.payroll-selection-empty i{font-size:28px}.payroll-selection-empty strong{font-size:10px}.payroll-selection-empty.is-filter-empty{display:none}.payroll-selection-empty.is-filter-empty.is-visible{display:flex}
.payroll-selection-foot{display:flex;align-items:center;gap:14px;padding:13px 18px;border-top:1px solid #e3eaf1;background:#fff}.payroll-selection-summary{display:flex;align-items:center;gap:9px;margin-right:auto}.payroll-selection-summary>span{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#e8f6f3;color:#25947b;font-size:17px}.payroll-selection-summary>div{display:flex;flex-direction:column}.payroll-selection-summary small{color:#8a98a8;font-size:8px;text-transform:uppercase}.payroll-selection-summary strong{color:#304a63;font-size:10px}.payroll-selection-foot>p{display:none;margin:0;color:#be4d61;font-size:8.5px;font-weight:750}.payroll-selection-foot>p.is-visible{display:block}.payroll-selection-foot .payroll-process-button{min-width:235px}

/* Register */
.payroll-register-card{overflow:hidden}
.payroll-register-head{padding:22px 24px 18px}
.payroll-register-period{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-end;gap:8px}
.payroll-register-period label{display:flex;flex-direction:column;gap:4px;margin:0;color:#8695a5;font-size:8px;font-weight:800;text-transform:uppercase}
.payroll-register-period .form-select{width:104px;height:38px!important;border-color:#e0e8f1!important;border-radius:11px!important;background-color:#f9fbfd!important;color:#344b63;font-size:10px!important;font-weight:800}
.payroll-payment-date{display:inline-flex;align-items:center;gap:5px;margin-top:9px;padding:6px 9px;border-radius:9px;background:#edf5ff;color:#53708f;font-size:8.5px}.payroll-payment-date i{color:#3575c5;font-size:13px}.payroll-payment-date strong{color:#275f9f}
.payroll-bulk-button{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 13px;border:0;border-radius:11px;background:#2e73c8;color:#fff;font-size:9px;font-weight:850;box-shadow:0 9px 20px rgba(46,115,200,.19);transition:transform .2s ease,opacity .2s ease}
.payroll-bulk-button:hover:not(:disabled){transform:translateY(-2px)}
.payroll-bulk-button:disabled{cursor:not-allowed;opacity:.42;box-shadow:none}
.payroll-register-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) 180px auto;align-items:center;gap:10px;padding:12px 24px;border-top:1px solid #edf1f5;border-bottom:1px solid #e7edf3;background:#f8fafd}
.payroll-search,.payroll-status-filter{position:relative;display:flex;align-items:center;margin:0}
.payroll-search>i,.payroll-status-filter>i{position:absolute;left:12px;color:#8294a8;font-size:15px}
.payroll-search input,.payroll-status-filter select{width:100%;height:39px;padding:0 12px 0 37px;border:1px solid #dfe7ef;border-radius:12px;background:#fff;color:#40566f;font-size:10.5px;outline:0;transition:border-color .2s ease,box-shadow .2s ease}
.payroll-search input:focus,.payroll-status-filter select:focus{border-color:#7ba9e1;box-shadow:0 0 0 3px rgba(61,126,211,.1)}
.payroll-completion{display:flex;align-items:center;justify-content:flex-end;gap:9px;min-width:190px}
.payroll-completion-ring{width:44px;height:44px;background:conic-gradient(#3b7dd1 var(--completion),#e4ebf2 0);transition:background .3s ease}
.payroll-completion-ring::after{inset:5px;background:#f8fafd}
.payroll-completion-ring span{font-size:8px}
.payroll-completion>div:last-child{display:flex;flex-direction:column}.payroll-completion small{color:#91a0af;font-size:8px;text-transform:uppercase}.payroll-completion strong{color:#37516d;font-size:9.5px}
.payroll-table-wrap{width:100%;overflow:auto}
.payroll-table{width:100%;min-width:900px;border-collapse:collapse}
.payroll-table thead th{padding:13px 16px;border-bottom:1px solid #e8edf3;background:#fff!important;color:#8b99a9!important;font-size:8.5px!important;font-weight:850!important;letter-spacing:.08em!important;text-transform:uppercase}
.payroll-table tbody td{padding:12px 16px!important;border-bottom:1px solid #edf1f5!important;background:#fff;color:#4c5f73;font-size:10.5px;vertical-align:middle}
.payroll-table tbody tr{animation:payrollRowIn .42s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--row-delay)}
.payroll-table tbody tr:hover td{background:#f9fbfe}
@keyframes payrollRowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.payroll-employee{display:flex;align-items:center;gap:10px}
.payroll-avatar{display:grid;flex:0 0 auto;place-items:center;width:36px;height:36px;border:2px solid #fff;border-radius:50%;background:linear-gradient(135deg,#d9eaff,#e5f8f2);color:#3269ad;font-size:10px;font-weight:900;box-shadow:0 4px 12px rgba(33,72,115,.12)}
.payroll-employee>div{display:flex;min-width:0;flex-direction:column}.payroll-employee strong{overflow:hidden;max-width:230px;color:#253c55;font-size:10.5px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}.payroll-employee small{margin-top:2px;color:#94a1af;font-size:8.5px}
.payroll-type{display:inline-block;max-width:180px;overflow:hidden;padding:5px 8px;border-radius:8px;background:#f0f4f8;color:#597086;font-size:8.5px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}
.payroll-money{color:#4e6378!important;font-weight:750;font-variant-numeric:tabular-nums}.payroll-net{color:#215eaa!important;font-weight:900}
.payroll-date-value{display:inline-flex;align-items:center;gap:5px;color:#4f6d89;font-size:9px;font-weight:800;white-space:nowrap}.payroll-date-value i{color:#3979c8;font-size:13px}
.payroll-status{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;font-size:8.5px;font-weight:850}
.payroll-status.paid{background:#e6f7f1;color:#228b73}.payroll-status.pending{background:#fff3dc;color:#bd7a10}
.payroll-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px}
.payroll-row-action{display:grid!important;place-items:center!important;width:30px!important;height:30px!important;padding:0!important;border:1px solid #dfe7ef!important;border-radius:9px!important;background:#fff!important;color:#607890!important;font-size:14px!important;text-decoration:none!important;box-shadow:none!important;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease!important}
.payroll-row-action:hover{transform:translateY(-2px);border-color:#bcd2e9!important;background:#f1f7fd!important;color:#2d69b6!important}
.payroll-row-action.accent{border-color:#d4e3f7!important;background:#edf5ff!important;color:#2f70c4!important}
.payroll-row-action.success{border-color:#ceebe2!important;background:#e9f8f3!important;color:#238e75!important}
.payroll-row-action.danger{border-color:#f2d9dd!important;background:#fff3f4!important;color:#c65061!important}
.payroll-loading-row td,.payroll-empty-row td{height:190px!important;text-align:center}
.payroll-loading-row td{color:#8293a5!important;font-size:10px!important}
.payroll-loader{display:inline-block;width:18px;height:18px;margin-right:8px;border:2px solid #dbe6f1;border-top-color:#3b7dd1;border-radius:50%;vertical-align:middle;animation:payrollSpin .8s linear infinite}
.payroll-empty-row td>span{display:grid;width:46px;height:46px;margin:0 auto 9px;place-items:center;border-radius:15px;background:#eff4f9;color:#8296aa;font-size:22px}
.payroll-empty-row td>strong,.payroll-empty-row td>small{display:block}.payroll-empty-row td>strong{color:#536a80;font-size:11px}.payroll-empty-row td>small{margin-top:4px;color:#9aa6b3;font-size:9px}
.payroll-register-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-top:1px solid #e7edf3;background:#fafcfe;color:#8998a8;font-size:9px;font-weight:750}

@media(max-width:1380px){
    .payroll-shell{grid-template-columns:210px minmax(0,1fr)}
    .payroll-context-panel{padding-inline:10px}
    .payroll-period-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
    .payroll-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .payroll-hero{grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr)}
}
@media(max-width:1180px){
    .payroll-shell{grid-template-columns:1fr}
    .payroll-context-panel{border-right:0;border-bottom:1px solid #e2eaf3}
    .payroll-context-head{padding-bottom:12px}
    .payroll-context-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-top:12px}
    .payroll-nav-label{display:none}
    .payroll-readiness-card{display:none}
    .payroll-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:780px){
    .payroll-workspace{padding:12px}
    .payroll-shell{border-radius:20px}
    .payroll-context-panel{padding:12px}
    .payroll-context-nav{display:flex;flex-direction:row;overflow:auto;padding-bottom:3px}
    .payroll-context-nav a{flex:0 0 180px}
    .payroll-hero{grid-template-columns:1fr;min-height:auto}
    .payroll-hero-copy{padding:28px 23px}
    .payroll-hero-visual{display:none}
    .payroll-metric-grid{grid-template-columns:1fr 1fr}
    .payroll-section-heading,.payroll-register-head{flex-direction:column}
    .payroll-stepper{grid-template-columns:1fr 1fr;gap:15px 8px}
    .payroll-stepper li::after{display:none}
    .payroll-period-fields{grid-template-columns:1fr}
    .payroll-selection-head,.payroll-selection-foot{align-items:stretch;flex-direction:column}.payroll-selection-actions{justify-content:flex-start}.payroll-selection-summary{margin-right:0}.payroll-selection-foot .payroll-process-button{width:100%;min-width:0}
    .payroll-filter-grid{grid-template-columns:1fr 1fr}.payroll-employee-option{grid-template-columns:24px 36px minmax(0,1fr) auto}.payroll-option-org{display:none}
    .payroll-register-period{justify-content:flex-start}
    .payroll-register-toolbar{grid-template-columns:1fr}
    .payroll-completion{justify-content:flex-start}
}

/* Unified three-stage payroll processing experience. */
.payroll-process-stepper{grid-template-columns:repeat(3,minmax(0,1fr))}
.payroll-process-stepper li::after{transition:background .35s ease}.payroll-process-stepper li.done::after{background:linear-gradient(90deg,#34b39c,#83d7c8)!important}.payroll-process-stepper li.done>span{border-color:#a9dfd3;background:#e8f9f4;color:#10876f}.payroll-process-stepper li.done>span{font-size:0}.payroll-process-stepper li.done>span:before{content:"✓";font-size:12px}.payroll-process-stepper li.active>span{border-color:transparent;border-radius:10px;background:linear-gradient(135deg,#1684ba,#18a990);box-shadow:0 9px 20px rgba(20,139,157,.24);transform:scale(1.06) rotate(-2deg)}.payroll-process-stepper li.active strong{color:#167b96}
.payroll-wizard-stage{display:none;animation:payrollWizardStage .42s cubic-bezier(.16,1,.3,1) both}.payroll-wizard-stage.active{display:block}.payroll-wizard-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-top:1px solid #e2eaf3;background:rgba(248,251,253,.96)}.payroll-wizard-footer>span{display:flex;align-items:center;gap:7px;color:#7d8f9f;font-size:9px;font-weight:750}.payroll-wizard-footer>span i{color:#248eaa;font-size:16px}.payroll-wizard-footer>div{display:flex;align-items:center;gap:8px}.payroll-wizard-next,.payroll-wizard-back{display:inline-flex;min-height:39px;align-items:center;justify-content:center;gap:7px;padding:0 14px;border-radius:11px;font-size:9px;font-weight:900;transition:.22s ease}.payroll-wizard-next{border:0;background:linear-gradient(135deg,#1682b9,#18a88f);box-shadow:0 9px 20px rgba(20,135,156,.2);color:#fff}.payroll-wizard-back{border:1px solid #d4e0e9;background:#fff;color:#5b7285}.payroll-wizard-next:hover,.payroll-wizard-back:hover{transform:translateY(-2px)}
.payroll-final-review{padding:19px;background:linear-gradient(145deg,#f8fbfd,#f5f8fe)}.payroll-review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:15px}.payroll-review-head h4{margin:3px 0 0;color:#233f58;font-size:16px;font-weight:900}.payroll-review-head p{margin:5px 0 0;color:#8394a3;font-size:9px}.payroll-review-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(310px,.65fr);gap:13px}.payroll-review-people,.payroll-review-aside{overflow:hidden;border:1px solid #dce6ee;border-radius:18px;background:#fff;box-shadow:0 10px 25px rgba(29,62,88,.05)}.payroll-review-title{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid #e4ebf1;background:#f8fafc}.payroll-review-title strong{color:#304d65;font-size:10px}.payroll-review-title span{padding:4px 8px;border-radius:999px;background:#e6f7f2;color:#11866f;font-size:7px;font-weight:900}.payroll-review-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:390px;padding:10px;overflow:auto}.payroll-review-person{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px;border:1px solid #e3eaf0;border-radius:12px;background:#fff;animation:payrollReviewPerson .34s ease both}.payroll-review-person .payroll-avatar{width:36px;height:36px}.payroll-review-person strong,.payroll-review-person small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.payroll-review-person strong{color:#2b465e;font-size:9px}.payroll-review-person small{margin-top:2px;color:#8a98a6;font-size:7px}.payroll-review-person button{display:grid;width:27px;height:27px;place-items:center;border:1px solid #efccd4;border-radius:9px;background:#fff5f7;color:#c2415f}.payroll-review-aside{padding:13px}.payroll-review-value{position:relative;overflow:hidden;padding:16px;border-radius:15px;background:linear-gradient(145deg,#173d5c,#123048);color:#fff}.payroll-review-value:after{position:absolute;right:-28px;bottom:-38px;width:110px;height:110px;border:22px solid rgba(255,255,255,.05);border-radius:50%;content:""}.payroll-review-value>span{display:grid;width:39px;height:39px;margin-bottom:11px;place-items:center;border-radius:12px;background:linear-gradient(135deg,#1687bb,#19ac91);font-size:20px}.payroll-review-value small,.payroll-review-value strong{position:relative;z-index:1;display:block}.payroll-review-value small{color:rgba(255,255,255,.62);font-size:7px;text-transform:uppercase;letter-spacing:.08em}.payroll-review-value strong{margin-top:4px;font-size:18px}.payroll-review-context{display:grid;gap:6px;margin:10px 0}.payroll-review-context div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 9px;border-radius:9px;background:#f2f6f9;font-size:8px}.payroll-review-context span{color:#768a9a}.payroll-review-context b{color:#2f5068;text-align:right}.payroll-review-sources{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}.payroll-review-source{display:inline-flex;align-items:center;gap:4px;padding:5px 7px;border-radius:999px;background:#eaf6fb;color:#27799d;font-size:7px;font-weight:850}.payroll-review-source i{color:#17a28a}.payroll-review-confirm{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:flex-start;padding:11px;border:1px solid #f0c7d0;border-radius:12px;background:#fff7f8;cursor:pointer}.payroll-review-confirm input{width:17px;height:17px;accent-color:#d94363}.payroll-review-confirm strong,.payroll-review-confirm small{display:block}.payroll-review-confirm strong{color:#8f3047;font-size:8px}.payroll-review-confirm small{margin-top:3px;color:#976875;font-size:7px;line-height:1.45}.payroll-final-footer .payroll-process-button{min-width:235px;background:linear-gradient(135deg,#d84162,#ee6780);box-shadow:0 12px 26px rgba(216,65,98,.23)}.payroll-final-footer .payroll-process-button:disabled{cursor:not-allowed;filter:grayscale(.4);opacity:.46}.payroll-wizard-stage[data-run-stage="1"] .payroll-pull-panel,.payroll-wizard-stage[data-run-stage="2"] .payroll-selection-builder{border-top:1px solid #e2eaf3}
@keyframes payrollWizardStage{from{opacity:0;transform:translateX(15px)}to{opacity:1;transform:none}}@keyframes payrollReviewPerson{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:1050px){.payroll-review-layout{grid-template-columns:1fr}.payroll-review-list{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:780px){.payroll-process-stepper{grid-template-columns:repeat(3,1fr)}.payroll-process-stepper li>div{display:none}.payroll-process-stepper li{justify-content:center}.payroll-process-stepper li:not(:last-child)::after{display:block;left:58%;right:-42%}.payroll-review-list{grid-template-columns:1fr}.payroll-wizard-footer{align-items:stretch;flex-direction:column}.payroll-wizard-footer>div{display:grid;grid-template-columns:1fr 1fr}.payroll-final-footer .payroll-process-button{min-width:0}.payroll-wizard-next,.payroll-wizard-back{width:100%}}
@media(max-width:520px){
    .payroll-metric-grid{grid-template-columns:1fr}
    .payroll-stepper{grid-template-columns:1fr}
    .payroll-register-head,.payroll-run-card{padding:18px}
    .payroll-register-toolbar{padding:12px 18px}
    .payroll-filter-grid{grid-template-columns:1fr}.payroll-employee-option{grid-template-columns:23px 34px minmax(0,1fr)}.payroll-eligibility-tag{grid-column:3;justify-self:start}
    .payroll-hero h2{font-size:26px}
}

/* The template opens the navigation with this class on touch devices. */
@media(max-width:1024px){
    .dash-sidebar.mob-sidebar-active{
        width:290px!important;
        min-width:290px!important;
        background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(244,249,255,.96))!important;
        border-color:rgba(211,224,239,.9)!important;
        box-shadow:0 30px 90px rgba(9,29,75,.25)!important;
    }
    .dash-sidebar.mob-sidebar-active .m-header{border-bottom-color:#e5edf4!important}
    .dash-sidebar.mob-sidebar-active .sky-brand-mark{opacity:0;transform:translateX(-72px) scale(.85)}
    .dash-sidebar.mob-sidebar-active .logo-lg{width:150px!important;max-width:150px!important;opacity:1;transform:translateX(0) scale(1)}
    .dash-sidebar.mob-sidebar-active .dash-mtext,
    .dash-sidebar.mob-sidebar-active .dash-arrow,
    .dash-sidebar.mob-sidebar-active .dash-submenu{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateX(0)!important}
    .dash-sidebar.mob-sidebar-active .dash-item.dash-trigger>.dash-submenu{display:block!important}
    .dash-sidebar.mob-sidebar-active .dash-navbar>.dash-item>.dash-link{grid-template-columns:44px minmax(0,1fr) 18px!important;column-gap:11px!important}
    .dash-sidebar.mob-sidebar-active .dash-navbar>.dash-item>.dash-link>.dash-micon{
        background:linear-gradient(135deg,#eaf3ff,#e8faf5)!important;
        color:#2f70c4!important;
        border-color:#dce8f4!important;
        box-shadow:0 8px 18px rgba(28,65,90,.1)!important;
    }
    .dash-sidebar.mob-sidebar-active .sky-module-mark img{filter:none;opacity:1}
    .dash-sidebar.mob-sidebar-active .sky-sidebar-footer{border-top-color:rgba(148,163,184,.2)}
    .dash-sidebar.mob-sidebar-active .sky-sidebar-logout{background:#fff0f2;color:#be4050}
}

/* Keep navigation copy readable whenever the sidebar is in its dark state. */
.dash-sidebar:not(:hover):not(:focus-within):not(.mob-sidebar-active) .dash-link,
.dash-sidebar:not(:hover):not(:focus-within):not(.mob-sidebar-active) .dash-mtext{
    color:#f5f9ff!important;
}
.dash-sidebar:not(:hover):not(:focus-within):not(.mob-sidebar-active) .dash-arrow,
.dash-sidebar:not(:hover):not(:focus-within):not(.mob-sidebar-active) .dash-arrow svg{
    color:#c9dcff!important;
    stroke:#c9dcff!important;
}
.dash-sidebar:not(:hover):not(:focus-within):not(.mob-sidebar-active) .dash-navbar>.dash-item.active>.dash-link,
.dash-sidebar:not(:hover):not(:focus-within):not(.mob-sidebar-active) .dash-navbar>.dash-item.dash-trigger>.dash-link{
    color:#fff!important;
}

/* The expanded light panel intentionally returns to dark, high-contrast copy. */
.dash-sidebar:hover .dash-link,
.dash-sidebar:hover .dash-mtext,
.dash-sidebar:focus-within .dash-link,
.dash-sidebar:focus-within .dash-mtext,
.dash-sidebar.mob-sidebar-active .dash-link,
.dash-sidebar.mob-sidebar-active .dash-mtext{
    color:#203850!important;
}
.dash-sidebar:hover .dash-submenu .dash-link:hover,
.dash-sidebar:focus-within .dash-submenu .dash-link:hover,
.dash-sidebar.mob-sidebar-active .dash-submenu .dash-link:hover{
    color:#1f68bb!important;
}

/* Final sidebar contrast guard: the navigation surface is dark in every
   interaction state, so all copy remains bright without relying on hover. */
.dash-sidebar:hover,
.dash-sidebar:focus-within,
.dash-sidebar.mob-sidebar-active,
.dash-sidebar.light-sidebar:hover,
.dash-sidebar.light-sidebar:focus-within{
    background:linear-gradient(180deg,var(--nav-rail-deep) 0%,var(--nav-rail) 58%,#186c9c 100%)!important;
    border-color:rgba(255,255,255,.12)!important;
}
.dash-sidebar .dash-link,
.dash-sidebar .dash-mtext,
.dash-sidebar .dash-submenu .dash-link,
.dash-sidebar .dash-submenu .dash-submenu .dash-link,
.dash-sidebar:hover .dash-link,
.dash-sidebar:hover .dash-mtext,
.dash-sidebar:focus-within .dash-link,
.dash-sidebar:focus-within .dash-mtext,
.dash-sidebar.mob-sidebar-active .dash-link,
.dash-sidebar.mob-sidebar-active .dash-mtext{
    color:#fff!important;
}
.dash-sidebar .dash-arrow,
.dash-sidebar .dash-arrow svg,
.dash-sidebar:hover .dash-arrow,
.dash-sidebar:hover .dash-arrow svg,
.dash-sidebar:focus-within .dash-arrow,
.dash-sidebar:focus-within .dash-arrow svg,
.dash-sidebar.mob-sidebar-active .dash-arrow,
.dash-sidebar.mob-sidebar-active .dash-arrow svg{
    color:#dbe9ff!important;
    stroke:#dbe9ff!important;
}
.dash-sidebar .dash-submenu>.dash-hasmenu>.dash-link,
.dash-sidebar .dash-submenu>.dash-hasmenu>.dash-link:hover,
.dash-sidebar .dash-submenu>.dash-hasmenu.dash-trigger>.dash-link,
.dash-sidebar .dash-submenu .dash-link:hover,
.dash-sidebar .dash-submenu .dash-item.active>.dash-link,
.dash-sidebar .dash-submenu .dash-item.dash-trigger>.dash-link{
    background:rgba(255,255,255,.09)!important;
    border-color:rgba(255,255,255,.12)!important;
    color:#fff!important;
    box-shadow:none!important;
}
.dash-sidebar:hover .m-header,
.dash-sidebar:focus-within .m-header,
.dash-sidebar.mob-sidebar-active .m-header{
    border-bottom-color:rgba(255,255,255,.12)!important;
}

/* Keep the footer action in the same icon-card family as the main modules. */
.dash-sidebar .sky-sidebar-footer .sky-sidebar-logout{
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:11px!important;
    width:100%!important;
    height:52px!important;
    padding:4px 10px!important;
    border:1px solid transparent!important;
    border-radius:15px!important;
    background:transparent!important;
    color:#fff!important;
    box-shadow:none!important;
    text-align:left!important;
}
.dash-sidebar .sky-sidebar-footer .sky-sidebar-logout:hover{
    border-color:rgba(255,255,255,.12)!important;
    background:rgba(255,255,255,.09)!important;
    box-shadow:none!important;
}
.dash-sidebar .sky-sidebar-footer .sky-sidebar-logout>.dash-micon,
.dash-sidebar:not(:hover):not(:focus-within) .sky-sidebar-footer .sky-sidebar-logout>.dash-micon{
    display:grid!important;
    place-items:center!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    margin:0!important;
    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:14px!important;
    background:linear-gradient(135deg,#22a5b8,#55cad4)!important;
    color:#fff!important;
    box-shadow:0 8px 18px rgba(4,24,56,.2)!important;
}
.dash-sidebar .sky-sidebar-footer .sky-sidebar-logout>.dash-mtext{
    margin:0!important;
    color:#fff!important;
}

/* Unified HRM submenu states. Older theme rules painted direct links white,
   which made Role, Directory, Notice Board and nested module entries unreadable. */
.dash-sidebar .dash-submenu>.dash-item>.dash-link,
.dash-sidebar .dash-submenu .dash-submenu>.dash-item>.dash-link,
.dash-sidebar:hover .dash-submenu>.dash-item>.dash-link,
.dash-sidebar:focus-within .dash-submenu>.dash-item>.dash-link,
.dash-sidebar.mob-sidebar-active .dash-submenu>.dash-item>.dash-link{
    min-height:42px!important;
    margin:3px 0!important;
    padding:9px 11px!important;
    border:1px solid rgba(255,255,255,.09)!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.055)!important;
    color:#f6f9ff!important;
    box-shadow:none!important;
    opacity:1!important;
    transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease!important;
}
.dash-sidebar .dash-submenu .dash-submenu>.dash-item>.dash-link{
    min-height:37px!important;
    background:rgba(255,255,255,.035)!important;
    color:#e6efff!important;
    font-size:12px!important;
}
.dash-sidebar .dash-submenu>.dash-item>.dash-link:hover,
.dash-sidebar .dash-submenu .dash-submenu>.dash-item>.dash-link:hover,
.dash-sidebar:hover .dash-submenu>.dash-item>.dash-link:hover,
.dash-sidebar:focus-within .dash-submenu>.dash-item>.dash-link:hover,
.dash-sidebar.mob-sidebar-active .dash-submenu>.dash-item>.dash-link:hover{
    transform:translateX(3px)!important;
    border-color:rgba(94,218,211,.32)!important;
    background:rgba(81,215,208,.15)!important;
    color:#fff!important;
    box-shadow:0 8px 18px rgba(3,20,54,.13)!important;
}
.dash-sidebar .dash-submenu>.dash-item.active>.dash-link,
.dash-sidebar .dash-submenu>.dash-item.dash-trigger>.dash-link,
.dash-sidebar .dash-submenu .dash-submenu>.dash-item.active>.dash-link,
.dash-sidebar .dash-submenu .dash-submenu>.dash-item.dash-trigger>.dash-link{
    border-color:rgba(94,218,211,.38)!important;
    background:linear-gradient(135deg,rgba(71,200,190,.23),rgba(74,151,224,.2))!important;
    color:#fff!important;
    box-shadow:inset 3px 0 0 #59d8d0,0 8px 18px rgba(3,20,54,.12)!important;
}
.dash-sidebar .dash-submenu>.dash-item>.dash-link i,
.dash-sidebar .dash-submenu .dash-submenu>.dash-item>.dash-link i{
    color:#cfe3ff!important;
}
.dash-sidebar .dash-submenu>.dash-item.active>.dash-link i,
.dash-sidebar .dash-submenu>.dash-item.dash-trigger>.dash-link i,
.dash-sidebar .dash-submenu>.dash-item>.dash-link:hover i{
    color:#7fe6dc!important;
}

/* Module pages use their own visual identity header. Keep legacy page actions
   available without bringing back the duplicated title and breadcrumb band. */
.sky-module-action-dock{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    min-height:42px;
    margin:0 0 14px;
    padding:6px;
    border:1px solid rgba(218,229,239,.92);
    border-radius:15px;
    background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(244,249,253,.92));
    box-shadow:0 10px 25px rgba(31,57,82,.06);
}
.sky-module-action-dock:empty{display:none}
.sky-module-action-dock .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:34px;
    border-radius:10px!important;
    font-weight:750;
    transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease!important;
}
.sky-module-action-dock .btn:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(35,73,113,.13);
}
.sky-module-page .dash-container{
    top:0!important;
    min-height:100vh!important;
}
.sky-module-mobile-menu{
    position:fixed;
    z-index:1050;
    top:12px;
    left:12px;
    display:none;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid rgba(207,224,235,.9);
    border-radius:14px;
    background:linear-gradient(145deg,#fff,#eaf7f6);
    color:#217f93;
    font-size:21px;
    box-shadow:0 10px 28px rgba(24,68,96,.17);
    transition:transform .3s cubic-bezier(.16,1,.3,1),background .25s ease,color .25s ease,box-shadow .25s ease;
}
.sky-module-mobile-menu.is-active{
    color:#fff;
    background:linear-gradient(135deg,rgba(36,112,193,.94),rgba(17,172,150,.92));
    box-shadow:0 14px 34px rgba(20,100,131,.3),inset 0 1px 0 rgba(255,255,255,.35);
    transform:rotate(3deg) scale(1.04);
}
@media(max-width:1024px){
    .sky-module-page .dash-content{padding-top:68px!important}
    .sky-module-mobile-menu{display:grid}
    body.sky-mobile-navigation-open{overflow:hidden}
    .dash-sidebar{will-change:left,transform}
    .dash-sidebar.mob-sidebar-active{left:0!important;transform:translateX(0)!important}
    .dash-sidebar>.sky-mobile-menu-overlay{
        left:290px;
        z-index:1;
        width:calc(100vw - 290px);
        border:0;
        padding:0;
        background:rgba(8,24,46,.38);
        -webkit-backdrop-filter:blur(3px);
        backdrop-filter:blur(3px);
        animation:skyMobileOverlayIn .24s ease both;
    }
}

/* Unified live-site typography and blue product theme. */
:root{
    --sd-green:#dbeafe;
    --sd-green-dark:#2563b8;
    --sd-mint:#eff6ff;
    --skyhr-purple:#2563b8;
    --skyhr-mint:#eff6ff;
    --nav-cyan:#60a5fa;
}
body,button,input,select,textarea,.btn,.form-control,.form-select,.dropdown-menu,.modal-content{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}
.sky-module-page .dash-content{font-size:14px}
.sky-module-page .dash-content small{font-size:10.5px!important;line-height:1.45}
.sky-module-page .dash-content table th{font-size:10px!important;line-height:1.35}
.sky-module-page .dash-content table td{font-size:12px!important;line-height:1.45}
.sky-module-page .dash-content input,
.sky-module-page .dash-content select,
.sky-module-page .dash-content textarea,
.sky-module-page .dash-content button{font-size:12px}
.sky-module-page .btn-primary,
.sky-module-page .bg-primary,
.sky-module-page .btn-success{
    border-color:#2563b8!important;
    background:#2563b8!important;
}
.sky-module-page .btn-light-primary{
    border-color:#cfe0f4!important;
    background:#edf4fc!important;
    color:#245d9d!important;
}
.sky-module-page .breadcrumb a,
.sky-module-page a.text-primary{color:#2563b8!important}
.dash-sidebar,
.dash-sidebar.light-sidebar,
.dash-sidebar.light-sidebar.transprent-bg{
    background:linear-gradient(180deg,#081d52 0%,#102c72 58%,#174d91 100%)!important;
}
.dash-sidebar .dash-navbar>.dash-item:nth-child(n)>.dash-link>.dash-micon{
    background:linear-gradient(135deg,#2459a6,#4b8bd2)!important;
    color:#fff!important;
}
.dash-sidebar:not(:hover):not(:focus-within) .dash-navbar>.dash-item.active>.dash-link>.dash-micon,
.dash-sidebar:not(:hover):not(:focus-within) .dash-navbar>.dash-item.dash-trigger>.dash-link>.dash-micon{
    background:linear-gradient(135deg,#60a5fa,#93c5fd)!important;
    color:#08245b!important;
}
.sky-module-icon{
    background:linear-gradient(135deg,#1c4d91,#397fca)!important;
}
.sky-module-page [class$="-hero"],
.sky-module-page [class*="-hero "],
.sky-module-page .uihero,
.sky-module-page .ihhero{
    border-color:rgba(255,255,255,.12)!important;
    border-radius:20px!important;
    background:linear-gradient(125deg,#12345f 0%,#245b96 58%,#3b82c4 100%)!important;
    color:#fff!important;
    box-shadow:0 16px 38px rgba(19,57,101,.16)!important;
}
.sky-module-page [class$="-hero"] :is(h1,h2,h3,h4,p,small),
.sky-module-page [class*="-hero "] :is(h1,h2,h3,h4,p,small),
.sky-module-page .uihero :is(h1,h2,h3,h4,p,small),
.sky-module-page .ihhero :is(h1,h2,h3,h4,p,small){
    color:#fff!important;
}
.sky-module-page [class$="-hero"] p,
.sky-module-page [class*="-hero "] p,
.sky-module-page .uihero p,
.sky-module-page .ihhero p{opacity:.82}
@keyframes skyMobileOverlayIn{from{opacity:0}to{opacity:1}}

/* Shared premium treatment for graphical module-header icons. */
.sky-module-icon{
    position:relative!important;
    isolation:isolate;
    overflow:hidden!important;
    border-color:rgba(255,255,255,.34)!important;
    box-shadow:0 12px 28px rgba(26,72,126,.23),inset 0 1px 0 rgba(255,255,255,.34)!important;
    transition:transform .28s cubic-bezier(.2,.75,.25,1),box-shadow .28s ease!important;
}
.sky-module-icon::before{
    position:absolute;
    z-index:0;
    top:-50%;
    left:-80%;
    width:55%;
    height:200%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
    transform:rotate(24deg);
    content:"";
    transition:left .55s ease;
}
.sky-module-icon::after{
    position:absolute;
    z-index:0;
    right:8px;
    bottom:8px;
    width:6px;
    height:6px;
    border:1px solid rgba(255,255,255,.72);
    border-radius:50%;
    background:rgba(255,255,255,.34);
    box-shadow:0 0 0 4px rgba(255,255,255,.08);
    content:"";
}
.sky-module-icon>i,
.sky-module-icon>svg{
    position:relative;
    z-index:1;
    filter:drop-shadow(0 3px 5px rgba(13,43,79,.2));
    transition:transform .28s cubic-bezier(.2,.75,.25,1);
}
.sky-module-icon:hover{
    transform:translateY(-2px) rotate(-2deg);
    box-shadow:0 16px 32px rgba(26,72,126,.28),inset 0 1px 0 rgba(255,255,255,.42)!important;
}
.sky-module-icon:hover::before{left:135%}
.sky-module-icon:hover>i,
.sky-module-icon:hover>svg{transform:scale(1.08)}

/* Consistent icon tiles for existing graphical headers throughout HRM. */
[class*="-hero"] h2>i:first-child,
[class*="-hero"] h3>i:first-child,
[class*="-hero"] h4>i:first-child{
    display:inline-grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    margin-right:10px!important;
    border:1px solid rgba(255,255,255,.24)!important;
    border-radius:13px!important;
    background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.08))!important;
    color:inherit!important;
    box-shadow:0 9px 22px rgba(22,54,88,.14),inset 0 1px 0 rgba(255,255,255,.24)!important;
    vertical-align:middle!important;
    backdrop-filter:blur(9px);
    transition:transform .25s cubic-bezier(.2,.75,.25,1),box-shadow .25s ease!important;
}
[class*="-hero"]:hover h2>i:first-child,
[class*="-hero"]:hover h3>i:first-child,
[class*="-hero"]:hover h4>i:first-child{
    transform:translateY(-2px) rotate(-2deg);
    box-shadow:0 13px 27px rgba(22,54,88,.2),inset 0 1px 0 rgba(255,255,255,.34)!important;
}
@media(prefers-reduced-motion:reduce){
    .sky-module-icon,
    .sky-module-icon::before,
    .sky-module-icon>i,
    .sky-module-icon>svg,
    .sky-module-action-dock .btn,
    [class*="-hero"] h2>i:first-child,
    [class*="-hero"] h3>i:first-child,
    [class*="-hero"] h4>i:first-child{transition:none!important}
}

/* =========================================================
   Brand visibility, authentication polish and mobile baseline
   ========================================================= */
.dash-sidebar .sky-brand-wordmark{
    position:absolute;
    inset:0 2px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:5px 11px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:15px;
    background:rgba(255,255,255,.96);
    box-shadow:0 12px 28px rgba(3,18,52,.24),inset 0 1px 0 #fff;
    opacity:0;
    transform:translateX(-9px) scale(.94);
    transition:opacity .22s ease,transform .4s cubic-bezier(.16,1,.3,1);
}
.dash-sidebar .sky-brand-wordmark .logo-lg{
    display:block!important;
    width:154px!important;
    max-width:154px!important;
    height:auto!important;
    max-height:42px!important;
    opacity:1!important;
    transform:none!important;
    object-fit:contain!important;
}
.dash-sidebar:hover .sky-brand-wordmark,
.dash-sidebar:focus-within .sky-brand-wordmark,
.dash-sidebar.mob-sidebar-active .sky-brand-wordmark{
    opacity:1;
    transform:translateX(0) scale(1);
}
.dash-sidebar:not(:hover):not(:focus-within):not(.mob-sidebar-active) .sky-brand-wordmark{
    pointer-events:none;
}

.dash-sidebar:hover .sky-brand-mark,
.dash-sidebar:focus-within .sky-brand-mark,
.dash-sidebar.mob-sidebar-active .sky-brand-mark{
    opacity:0!important;
    transform:translateX(-72px) scale(.85)!important;
}

/* Shared SkyHR vector identity in the application sidebar. */
.dash-sidebar .sky-sidebar-brand-logo{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    overflow:hidden;
    white-space:nowrap;
}
.dash-sidebar .sky-sidebar-brand-logo .sky-auth-brand-mark{
    position:relative;
    display:grid;
    width:48px;
    height:48px;
    flex:0 0 48px;
    place-items:center;
    filter:drop-shadow(0 9px 17px rgba(0,16,45,.3));
    transition:width .38s cubic-bezier(.16,1,.3,1),height .38s cubic-bezier(.16,1,.3,1),flex-basis .38s cubic-bezier(.16,1,.3,1),transform .38s cubic-bezier(.16,1,.3,1);
}
.dash-sidebar .sky-sidebar-brand-logo .sky-auth-brand-mark::after{
    position:absolute;
    left:50%;
    bottom:2px;
    width:27px;
    height:6px;
    border-radius:50%;
    background:rgba(74,222,215,.25);
    content:"";
    transform:translateX(-50%);
    filter:blur(6px);
    animation:skySidebarBrandGlow 4.8s ease-in-out infinite;
}
.dash-sidebar .sky-sidebar-brand-logo svg{
    position:relative;
    z-index:1;
    width:48px;
    height:48px;
    overflow:visible;
    transition:width .38s cubic-bezier(.16,1,.3,1),height .38s cubic-bezier(.16,1,.3,1);
}
.dash-sidebar .sky-sidebar-brand-logo .sky-logo-ring{
    fill:none;
    stroke:rgba(190,240,250,.32);
    stroke-width:1.35;
    stroke-dasharray:32 14;
    transform-origin:32px 32px;
    animation:skySidebarBrandOrbit 16s linear infinite;
}
.dash-sidebar .sky-sidebar-brand-logo .sky-logo-symbol{
    fill:url(#skyAuthMarkGradient);
    transform-origin:center;
    animation:skySidebarBrandPulse 5s ease-in-out infinite;
}
.dash-sidebar .sky-sidebar-brand-logo .sky-logo-person{
    fill:#e9fffc;
    stroke:#117dbb;
    stroke-width:1.4;
}
.dash-sidebar .sky-sidebar-brand-logo .sky-logo-rise,
.dash-sidebar .sky-sidebar-brand-logo .sky-logo-arrow{
    fill:none;
    stroke:#e8fffc;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:70;
    stroke-dashoffset:70;
    animation:skySidebarBrandDraw 1.15s .22s ease-out forwards;
}
.dash-sidebar .sky-sidebar-brand-logo .sky-logo-arrow{stroke-width:2.7}
.dash-sidebar .sky-sidebar-brand-logo .sky-auth-wordmark{
    position:relative;
    display:flex;
    max-width:0;
    align-items:baseline;
    overflow:hidden;
    margin-left:0;
    opacity:0;
    line-height:1;
    letter-spacing:-1.7px;
    transform:translateX(-8px);
    transition:max-width .42s cubic-bezier(.16,1,.3,1),margin-left .38s cubic-bezier(.16,1,.3,1),opacity .2s ease,transform .38s cubic-bezier(.16,1,.3,1);
}
.dash-sidebar .sky-sidebar-brand-logo .sky-auth-wordmark::after{
    position:absolute;
    left:1px;
    right:0;
    bottom:-7px;
    height:1.5px;
    border-radius:2px;
    background:linear-gradient(90deg,rgba(22,139,208,.06),#27afa6,rgba(22,139,208,.06));
    content:"";
    transform-origin:center;
    animation:skySidebarBrandUnderline 5.4s ease-in-out infinite;
}
.dash-sidebar .sky-sidebar-brand-logo .sky-auth-wordmark strong,
.dash-sidebar .sky-sidebar-brand-logo .sky-auth-wordmark b{
    font-size:26px;
    font-weight:880;
}
.dash-sidebar .sky-sidebar-brand-logo .sky-auth-wordmark strong{color:#153b6f}
.dash-sidebar .sky-sidebar-brand-logo .sky-auth-wordmark b{margin-left:2px;color:#159e99}
.dash-sidebar:hover .sky-sidebar-brand-logo,
.dash-sidebar:focus-within .sky-sidebar-brand-logo,
.dash-sidebar.mob-sidebar-active .sky-sidebar-brand-logo{gap:9px}
.dash-sidebar:hover .sky-sidebar-brand-logo .sky-auth-brand-mark,
.dash-sidebar:focus-within .sky-sidebar-brand-logo .sky-auth-brand-mark,
.dash-sidebar.mob-sidebar-active .sky-sidebar-brand-logo .sky-auth-brand-mark{
    width:49px;
    height:49px;
    flex-basis:49px;
}
.dash-sidebar:hover .sky-sidebar-brand-logo svg,
.dash-sidebar:focus-within .sky-sidebar-brand-logo svg,
.dash-sidebar.mob-sidebar-active .sky-sidebar-brand-logo svg{width:49px;height:49px}
.dash-sidebar:hover .sky-sidebar-brand-logo .sky-auth-wordmark,
.dash-sidebar:focus-within .sky-sidebar-brand-logo .sky-auth-wordmark,
.dash-sidebar.mob-sidebar-active .sky-sidebar-brand-logo .sky-auth-wordmark{
    max-width:104px;
    margin-left:1px;
    overflow:visible;
    opacity:1;
    transform:translateX(0);
}
@keyframes skySidebarBrandDraw{to{stroke-dashoffset:0}}
@keyframes skySidebarBrandOrbit{to{transform:rotate(360deg)}}
@keyframes skySidebarBrandPulse{0%,100%{opacity:.9;transform:scale(.98)}50%{opacity:1;transform:scale(1.025)}}
@keyframes skySidebarBrandGlow{0%,100%{opacity:.36;transform:translateX(-50%) scaleX(.8)}50%{opacity:.8;transform:translateX(-50%) scaleX(1.12)}}
@keyframes skySidebarBrandUnderline{0%,100%{opacity:.3;transform:scaleX(.35)}50%{opacity:1;transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){
    .dash-sidebar .sky-sidebar-brand-logo *,
    .dash-sidebar .sky-sidebar-brand-logo .sky-auth-brand-mark::after{animation:none!important}
    .dash-sidebar .sky-sidebar-brand-logo .sky-logo-rise,
    .dash-sidebar .sky-sidebar-brand-logo .sky-logo-arrow{stroke-dashoffset:0}
}

.sky-auth-topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-height:82px;
    padding:12px 5px;
}
.sky-auth-brand{display:inline-flex;align-items:center;padding:7px 11px;border:1px solid rgba(255,255,255,.54);border-radius:14px;background:rgba(255,255,255,.94);box-shadow:0 12px 30px rgba(2,18,45,.22);text-decoration:none;backdrop-filter:blur(14px)}
.sky-auth-brand img{display:block;width:155px;height:auto}
.sky-auth-tools{display:flex;align-items:center;justify-content:flex-end}
.sky-auth-language{
    min-width:68px;
    height:38px;
    padding:0 28px 0 11px;
    border:1px solid #d9e6ee;
    border-radius:11px;
    background:#fff;
    color:#34536b;
    font-size:10px;
    font-weight:850;
    outline:0;
    box-shadow:0 7px 18px rgba(28,66,91,.07);
}
.auth-footer{padding:15px 5px!important;color:#8393a0;text-align:center!important}
.auth-footer small{font-size:9px;font-weight:750}

/* Shared small-screen contract for every authenticated module. */
html,body{max-width:100%}
.dash-container,.dash-content,.dash-content>.row,.dash-content>.row>[class*="col-"]{min-width:0}
.dash-content img,.dash-content svg{max-width:100%}
.dash-content .table-responsive,
.dash-content .dataTables_wrapper,
.dash-content [class*="-table-wrap"]{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
}
@media(max-width:767px){
    body{overflow-x:hidden}
    .dash-container{width:100%!important;margin-left:0!important}
    .dash-container .dash-content{width:100%!important;padding-left:10px!important;padding-right:10px!important;padding-bottom:24px!important}
    .dash-content>.row{display:block!important;width:100%!important;margin-left:0!important;margin-right:0!important}
    .dash-content>.row>[class*="col-"]{width:100%!important;max-width:100%!important;padding-left:0!important;padding-right:0!important}
    .dash-content .card,.dash-content [class*="-card"],.dash-content [class*="-panel"]{max-width:100%}
    .dash-content [class$="-hero"],.dash-content [class*="-hero "]{max-width:100%;padding:18px!important;border-radius:18px!important;flex-direction:column!important;align-items:flex-start!important;gap:12px}
    .dash-content [class$="-hero"] h2,.dash-content [class*="-hero "] h2,.dash-content [class$="-hero"] h3,.dash-content [class*="-hero "] h3{font-size:clamp(20px,6vw,27px)!important;line-height:1.25}
    .sky-module-action-dock{flex-wrap:wrap;justify-content:stretch;padding:5px;background:transparent;border:0;box-shadow:none}
    .sky-module-action-dock .btn{flex:1 1 auto;min-height:42px}
    .dash-content .nav-tabs{display:flex;flex-wrap:nowrap;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
    .dash-content .nav-tabs .nav-item{flex:0 0 auto}
    .dash-content .form-control,.dash-content .form-select,.dash-content select{max-width:100%;font-size:16px!important}
    .dash-content textarea.form-control{min-height:96px}
    .dash-content .btn{white-space:normal}
    .modal-dialog{width:calc(100% - 16px)!important;max-width:none!important;margin:8px!important}
    .modal-content{max-height:calc(100vh - 16px);overflow:auto;border-radius:18px!important}
    .dropdown-menu{max-width:calc(100vw - 20px)!important}
    .select2-container,.choices,.choices__inner{max-width:100%!important;width:100%!important}
    .dataTables_wrapper .row{gap:8px;margin-left:0!important;margin-right:0!important}
    .dataTables_wrapper .row>[class*="col-"]{width:100%;padding:0}
    .dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_length{text-align:left!important}
    .dash-content table{font-size:11px}
    .dash-content table.table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
}
@media(max-width:480px){
    .sky-auth-topbar{min-height:70px;padding:9px 3px}
    .sky-auth-brand img{width:126px}
    .dash-content [class$="-hero"],.dash-content [class*="-hero "]{padding:16px!important}
    .dash-content [class$="-hero"] h2>i:first-child,
    .dash-content [class*="-hero "] h2>i:first-child,
    .dash-content [class$="-hero"] h3>i:first-child,
    .dash-content [class*="-hero "] h3>i:first-child{width:37px!important;height:37px!important;border-radius:11px!important}
}
.payroll-pull-panel{margin:18px 0;padding:20px;border:1px solid #dce6ef;border-radius:16px;background:#fbfdff}.payroll-pull-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.payroll-pull-option{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:center;margin:0;padding:12px;border:1px solid #e1e8ee;border-radius:10px;background:#fff;cursor:pointer}.payroll-pull-option>input{position:absolute;opacity:0}.payroll-pull-option>span{display:grid;place-items:center;width:24px;height:24px;border:1px solid #b9c8d4;border-radius:6px;color:transparent}.payroll-pull-option>input:checked+span{border-color:#2376cf;background:#2376cf;color:#fff}.payroll-pull-option strong,.payroll-pull-option small{display:block}.payroll-pull-option strong{font-size:12px;color:#284057}.payroll-pull-option small{margin-top:2px;font-size:10px;color:#718395}.payroll-policy-box{display:grid;grid-template-columns:220px 1fr;gap:18px;margin-top:14px;padding:14px;border:1px solid #e2e8ee;border-radius:10px;background:#fff}.payroll-policy-box strong,.payroll-policy-box small{display:block}.payroll-policy-box small{font-size:10px;color:#76889a}.payroll-policy-list{display:flex;flex-wrap:wrap;gap:8px}.payroll-policy-list label{display:flex;align-items:center;gap:7px;margin:0;padding:8px 10px;border:1px solid #dce5ed;border-radius:8px}.payroll-policy-list label span{font-size:11px;font-weight:800}.payroll-remarks{display:block;margin:14px 0 0}.payroll-remarks>span{display:block;margin-bottom:6px;font-size:11px;font-weight:800;color:#496078}.payroll-remarks textarea{width:100%;padding:10px 12px;border:1px solid #d7e1e9;border-radius:9px;resize:vertical}@media(max-width:950px){.payroll-pull-grid{grid-template-columns:1fr 1fr}.payroll-policy-box{grid-template-columns:1fr}}@media(max-width:600px){.payroll-pull-grid{grid-template-columns:1fr}}

/* Payroll processing inputs: explicit opt-in cards with visible state. */
.payroll-pull-panel{position:relative;overflow:hidden;padding:24px;border-radius:22px;background:linear-gradient(145deg,#f8fbff 0%,#fff 62%);box-shadow:inset 0 1px 0 #fff}
.payroll-pull-panel:before{content:"";position:absolute;right:-70px;top:-85px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.10),transparent 68%);pointer-events:none}
.payroll-input-meter{position:relative;display:flex;align-items:center;gap:10px;min-width:140px;padding:9px 12px;border:1px solid #d9e4ee;border-radius:14px;background:#fff;color:#64788d;transition:.25s ease}
.payroll-input-meter>span{display:grid;place-items:center;width:33px;height:33px;border-radius:10px;background:#eef3f8;color:#77899b;font-size:17px;transition:.25s ease}.payroll-input-meter small,.payroll-input-meter strong{display:block}.payroll-input-meter small{font-size:9px;text-transform:uppercase;letter-spacing:.55px}.payroll-input-meter strong{margin-top:1px;color:#2b4258;font-size:15px}.payroll-input-meter.has-inputs{border-color:#93ddd1;background:#f0fdfa;box-shadow:0 8px 22px rgba(16,185,129,.10)}.payroll-input-meter.has-inputs>span{background:#d1fae5;color:#07865f;transform:rotate(-5deg) scale(1.04)}.payroll-input-meter.has-inputs strong{color:#08785a}
.payroll-pull-grid{position:relative;gap:12px}.payroll-pull-option{position:relative;grid-template-columns:46px minmax(0,1fr) 27px;gap:12px;min-height:104px;padding:15px;border-color:#dce6ef;border-radius:16px;overflow:hidden;transition:transform .24s cubic-bezier(.2,.8,.2,1),border-color .24s ease,box-shadow .24s ease,background .24s ease}.payroll-pull-option:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(37,99,235,.055),transparent 58%);opacity:0;transition:.24s}.payroll-pull-option:hover{transform:translateY(-3px);border-color:#9ebee2;box-shadow:0 13px 27px rgba(34,72,112,.10)}.payroll-pull-option.is-selected{border-color:#6ea2dc;background:#f4f8ff;box-shadow:0 0 0 3px rgba(37,118,207,.09),0 13px 25px rgba(37,99,235,.09)}.payroll-pull-option.is-selected:before{opacity:1}.payroll-pull-option>span.payroll-pull-art{position:relative;display:grid;width:44px;height:44px;border:0;border-radius:14px;background:#eef3f8;color:#5d748b;font-size:21px;transition:.28s cubic-bezier(.2,.8,.2,1)}.payroll-pull-option.is-selected>span.payroll-pull-art{background:linear-gradient(135deg,#2563eb,#0891b2);color:#fff;transform:scale(1.06) rotate(-4deg);box-shadow:0 9px 18px rgba(37,99,235,.20)}.payroll-pull-option>div{position:relative}.payroll-pull-option strong{font-size:12px;line-height:1.35}.payroll-pull-option small{line-height:1.4}.payroll-option-state{display:inline-flex;margin-top:9px;border-radius:999px;background:#eef2f6;color:#8291a0;font-size:8px;font-style:normal;font-weight:900;letter-spacing:.5px;text-transform:uppercase;overflow:hidden}.payroll-option-state span{padding:3px 7px}.payroll-option-state span:last-child{display:none;background:#d9f8ef;color:#08785a}.payroll-pull-option.is-selected .payroll-option-state span:first-child{display:none}.payroll-pull-option.is-selected .payroll-option-state span:last-child{display:block;animation:payrollStateIn .22s ease both}.payroll-pull-option>span.payroll-pull-check{position:relative;display:grid;width:25px;height:25px;border:1px solid #bdcad6;border-radius:8px;background:#fff;color:transparent;font-size:14px;transition:.23s ease}.payroll-pull-option.is-selected>span.payroll-pull-check{border-color:#159b7b;background:#10b981;color:#fff;transform:scale(1.08);box-shadow:0 6px 13px rgba(16,185,129,.20)}
.payroll-policy-box{position:relative;grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);align-items:center;padding:17px;border-radius:16px;border-color:#d9e5ef;background:linear-gradient(120deg,#f8fbff,#fff)}.payroll-policy-copy{display:flex;align-items:center;gap:11px}.payroll-policy-copy>span{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:13px;background:#e0edff;color:#2563eb;font-size:20px}.payroll-policy-copy small{line-height:1.45}.payroll-policy-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.payroll-policy-list label.payroll-policy-option{position:relative;display:grid;grid-template-columns:23px minmax(0,1fr);align-items:center;min-height:58px;padding:9px 11px;border-radius:12px;background:#fff;cursor:pointer;transition:.2s ease}.payroll-policy-option>input{position:absolute;opacity:0}.payroll-policy-option:hover{border-color:#93b6df;transform:translateY(-2px)}.payroll-policy-option:has(input:checked){border-color:#6a9dd7;background:#f2f7ff;box-shadow:0 0 0 3px rgba(37,99,235,.07)}.payroll-policy-mark{display:grid!important;place-items:center;width:21px;height:21px;border:1px solid #becbd7;border-radius:7px;color:transparent!important;font-size:12px!important;transition:.22s ease}.payroll-policy-option input:checked~.payroll-policy-mark{border-color:#2563eb;background:#2563eb;color:#fff!important;transform:scale(1.05)}.payroll-policy-name strong{font-size:11px;color:#263f58}.payroll-policy-name small{margin-top:2px}.payroll-policy-empty{display:flex;align-items:center;gap:11px;margin-top:14px;padding:13px 15px;border:1px solid #f3d28d;border-radius:14px;background:#fffbeb;color:#885d0b}.payroll-policy-empty>i{font-size:22px}.payroll-policy-empty strong,.payroll-policy-empty small{display:block}.payroll-policy-empty strong{font-size:12px}.payroll-policy-empty small{font-size:10px;color:#9b7a38}.payroll-policy-empty a{margin-left:auto;color:#a46405;font-size:11px;font-weight:850;text-decoration:none}
@keyframes payrollStateIn{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:950px){.payroll-policy-list{grid-template-columns:1fr}.payroll-policy-box{grid-template-columns:1fr}.payroll-input-meter{min-width:0}}
@media(max-width:600px){.payroll-pull-panel{padding:16px}.payroll-pull-option{min-height:92px}.payroll-policy-empty{align-items:flex-start;flex-wrap:wrap}.payroll-policy-empty a{margin-left:33px}}
@media(prefers-reduced-motion:reduce){.payroll-pull-option,.payroll-pull-option>span,.payroll-input-meter,.payroll-policy-option{transition:none!important;animation:none!important;transform:none!important}}

/* More breathing room between navigation choices. */
.dash-sidebar .navbar-content{padding-top:14px!important;padding-bottom:22px!important}
.dash-sidebar .dash-navbar{gap:13px!important}
.dash-sidebar .dash-navbar>.dash-item>.dash-link{height:58px!important;min-height:58px!important;padding-top:7px!important;padding-bottom:7px!important}
.dash-sidebar .dash-submenu{padding-top:8px!important;padding-bottom:5px!important}
.dash-sidebar .dash-submenu>.dash-item{margin-bottom:11px!important}

/* Cursor-directed focus for the complete navigation option. */
@media (hover:hover) and (pointer:fine) and (min-width:1025px){
    .dash-sidebar .dash-navbar>.dash-item{position:relative;z-index:var(--sky-dock-z,1)}
    .dash-sidebar.sky-dock-active .dash-navbar>.dash-item>.dash-link{overflow:visible!important}
    .dash-sidebar .dash-navbar>.dash-item>.dash-link{
        transform:translate3d(var(--sky-dock-x,0px),var(--sky-dock-y,0px),0) scale(var(--sky-dock-scale,1))!important;
        transform-origin:left center!important;
        will-change:transform,filter,box-shadow;
        filter:saturate(var(--sky-dock-saturation,1)) brightness(var(--sky-dock-brightness,1));
        box-shadow:0 var(--sky-dock-shadow-y,0px) var(--sky-dock-shadow-blur,0px) rgba(26,56,99,var(--sky-dock-shadow-alpha,0))!important;
        transition:transform .14s cubic-bezier(.18,.82,.2,1),filter .14s ease,box-shadow .14s ease,background .18s ease!important;
    }
    .dash-sidebar.sky-dock-active .dash-navbar>.dash-item>.dash-link>.dash-micon,
    .dash-sidebar.sky-dock-active .dash-navbar>.dash-item>.dash-link>.dash-mtext,
    .dash-sidebar.sky-dock-active .dash-navbar>.dash-item>.dash-link>.dash-arrow{transform:none!important}
    .dash-sidebar.sky-dock-active .dash-navbar>.dash-item>.dash-link>.dash-mtext{transition:opacity .2s ease,visibility .2s!important}
    .dash-sidebar .dash-navbar>.dash-item>.dash-link:focus-visible{transform:translate3d(9px,0,0) scale(1.13)!important;box-shadow:0 13px 28px rgba(26,56,99,.2)!important}
}
@media(prefers-reduced-motion:reduce){
    .dash-sidebar .dash-navbar>.dash-item>.dash-link{transform:none!important;filter:none!important}
}

/* Open the mobile navigation completely on the first tap.  Several legacy
   sidebar rules animate the rail independently; this explicit state keeps the
   label track, nested menus and colours in sync with the drawer itself. */
@media(max-width:1024px){
    .dash-sidebar.mob-sidebar-active,
    .dash-sidebar.sky-sidebar-expanded{
        width:290px!important;
        min-width:290px!important;
    }
    .dash-sidebar.mob-sidebar-active .dash-mtext,
    .dash-sidebar.mob-sidebar-active .dash-arrow,
    .dash-sidebar.sky-sidebar-expanded .dash-mtext,
    .dash-sidebar.sky-sidebar-expanded .dash-arrow{
        display:block!important;
        opacity:1!important;
        visibility:visible!important;
        pointer-events:auto!important;
        transform:none!important;
        transition:none!important;
    }
    .dash-sidebar.mob-sidebar-active .dash-navbar>.dash-item>.dash-link,
    .dash-sidebar.sky-sidebar-expanded .dash-navbar>.dash-item>.dash-link{
        grid-template-columns:44px minmax(0,1fr) 18px!important;
        column-gap:11px!important;
    }
    .dash-sidebar.mob-sidebar-active .dash-item.dash-trigger>.dash-submenu,
    .dash-sidebar.sky-sidebar-expanded .dash-item.dash-trigger>.dash-submenu{
        display:block!important;
        opacity:1!important;
        visibility:visible!important;
        pointer-events:auto!important;
        transform:none!important;
    }
}

/* SkyHR navigation refresh: a lighter aqua rail that fades upward and keeps
   the blue/teal identity distinct from the logo artwork. Kept last so it
   consistently wins over the legacy theme layers above. */
.dash-sidebar,
.dash-sidebar.light-sidebar,
.dash-sidebar.light-sidebar.transprent-bg,
.dash-sidebar:hover,
.dash-sidebar:focus-within,
.dash-sidebar.mob-sidebar-active,
.dash-sidebar.light-sidebar:hover,
.dash-sidebar.light-sidebar:focus-within{
    background:linear-gradient(180deg,#eaf7f9 0%,#cbe8ed 34%,#8ccbd7 68%,#4da7bb 100%)!important;
    border-color:rgba(72,151,172,.3)!important;
    box-shadow:0 24px 70px rgba(32,101,123,.19),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.dash-sidebar .m-header,
.dash-sidebar:hover .m-header,
.dash-sidebar:focus-within .m-header,
.dash-sidebar.mob-sidebar-active .m-header{
    border-bottom-color:rgba(49,112,139,.16)!important;
    background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.12))!important;
}
.dash-sidebar .dash-link,
.dash-sidebar .dash-mtext,
.dash-sidebar .dash-submenu .dash-link,
.dash-sidebar .dash-submenu .dash-submenu .dash-link,
.dash-sidebar:hover .dash-link,
.dash-sidebar:hover .dash-mtext,
.dash-sidebar:focus-within .dash-link,
.dash-sidebar:focus-within .dash-mtext,
.dash-sidebar.mob-sidebar-active .dash-link,
.dash-sidebar.mob-sidebar-active .dash-mtext{
    color:#173b57!important;
}
.dash-sidebar .dash-arrow,
.dash-sidebar .dash-arrow svg,
.dash-sidebar:hover .dash-arrow,
.dash-sidebar:hover .dash-arrow svg,
.dash-sidebar:focus-within .dash-arrow,
.dash-sidebar:focus-within .dash-arrow svg,
.dash-sidebar.mob-sidebar-active .dash-arrow,
.dash-sidebar.mob-sidebar-active .dash-arrow svg{
    color:#315f78!important;
    stroke:#315f78!important;
}
.dash-sidebar .dash-submenu>.dash-hasmenu>.dash-link,
.dash-sidebar .dash-submenu>.dash-hasmenu>.dash-link:hover,
.dash-sidebar .dash-submenu>.dash-hasmenu.dash-trigger>.dash-link,
.dash-sidebar .dash-submenu .dash-link:hover,
.dash-sidebar .dash-submenu .dash-item.active>.dash-link,
.dash-sidebar .dash-submenu .dash-item.dash-trigger>.dash-link{
    border-color:rgba(63,132,156,.17)!important;
    background:rgba(255,255,255,.36)!important;
    color:#123d5c!important;
    box-shadow:none!important;
}
.dash-sidebar:not(:hover):not(:focus-within) .dash-navbar>.dash-item>.dash-link>.dash-micon{
    border-color:rgba(255,255,255,.48)!important;
    background:rgba(255,255,255,.42)!important;
    color:#175985!important;
    box-shadow:0 7px 17px rgba(30,97,121,.11)!important;
}
.dash-sidebar:not(:hover):not(:focus-within) .dash-navbar>.dash-item.active>.dash-link>.dash-micon,
.dash-sidebar:not(:hover):not(:focus-within) .dash-navbar>.dash-item.dash-trigger>.dash-link>.dash-micon{
    border-color:rgba(255,255,255,.72)!important;
    background:linear-gradient(135deg,#176fa7,#16a89c)!important;
    color:#fff!important;
    box-shadow:0 10px 22px rgba(23,105,137,.22)!important;
}
.dash-sidebar .sky-sidebar-brand-logo .sky-auth-brand-mark{
    border:1px solid rgba(255,255,255,.78);
    border-radius:16px;
    background:rgba(255,255,255,.64);
    box-shadow:0 9px 22px rgba(25,93,119,.16),inset 0 1px 0 rgba(255,255,255,.9);
    filter:none;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
}
.dash-sidebar .sky-sidebar-brand-logo .sky-logo-ring{stroke:rgba(39,124,166,.38)}
.dash-sidebar .sky-sidebar-brand-logo .sky-logo-person{fill:#f5fffd;stroke:#106f9f}
.dash-sidebar .sky-sidebar-footer{border-top-color:rgba(40,111,137,.18)!important}
.dash-sidebar .sky-sidebar-footer .sky-sidebar-logout,
.dash-sidebar:not(:hover):not(:focus-within) .sky-sidebar-footer .sky-sidebar-logout{
    color:#18445f!important;
}
.dash-sidebar .sky-sidebar-footer .sky-sidebar-logout:hover{
    border-color:rgba(46,125,151,.18)!important;
    background:rgba(255,255,255,.34)!important;
}
.dash-sidebar .sky-sidebar-footer .sky-sidebar-logout>.dash-mtext{color:#18445f!important}
.dash-sidebar .navbar-content{scrollbar-color:rgba(35,108,134,.28) transparent}
.dash-sidebar .navbar-content::-webkit-scrollbar-thumb,
.dash-sidebar:not(:hover):not(:focus-within) .navbar-content::-webkit-scrollbar-thumb{background:rgba(35,108,134,.25)}

/* Keep every sidebar label readable on the light aqua rail. The added body
   scope deliberately outranks older HRM submenu rules that set white text. */
html body .dash-sidebar .dash-navbar>.dash-item>.dash-link>.dash-mtext,
html body .dash-sidebar .dash-navbar>.dash-item.active>.dash-link>.dash-mtext,
html body .dash-sidebar .dash-navbar>.dash-item.dash-trigger>.dash-link>.dash-mtext,
html body .dash-sidebar .dash-navbar>.dash-item:hover>.dash-link>.dash-mtext,
html body .dash-sidebar .dash-navbar>.dash-item:focus>.dash-link>.dash-mtext,
html body .dash-sidebar .dash-submenu>.dash-item>.dash-link,
html body .dash-sidebar .dash-submenu>.dash-item>.dash-link>.dash-mtext,
html body .dash-sidebar .dash-submenu .dash-submenu>.dash-item>.dash-link,
html body .dash-sidebar .dash-submenu .dash-submenu>.dash-item>.dash-link>.dash-mtext,
html body .dash-sidebar .dash-submenu .dash-submenu .dash-submenu>.dash-item>.dash-link,
html body .dash-sidebar .dash-submenu .dash-submenu .dash-submenu>.dash-item>.dash-link>.dash-mtext{
    color:#173b57!important;
    opacity:1!important;
}
html body .dash-sidebar .dash-submenu>.dash-item>.dash-link{
    border-color:rgba(58,127,151,.13)!important;
    background:rgba(255,255,255,.28)!important;
}
html body .dash-sidebar .dash-submenu .dash-submenu>.dash-item>.dash-link,
html body .dash-sidebar .dash-submenu .dash-submenu .dash-submenu>.dash-item>.dash-link{
    border-color:rgba(58,127,151,.1)!important;
    background:rgba(255,255,255,.2)!important;
}
html body .dash-sidebar .dash-submenu>.dash-item:hover>.dash-link,
html body .dash-sidebar .dash-submenu>.dash-item:focus>.dash-link,
html body .dash-sidebar .dash-submenu>.dash-item.active>.dash-link,
html body .dash-sidebar .dash-submenu>.dash-item.dash-trigger>.dash-link,
html body .dash-sidebar .dash-submenu .dash-submenu>.dash-item:hover>.dash-link,
html body .dash-sidebar .dash-submenu .dash-submenu>.dash-item:focus>.dash-link,
html body .dash-sidebar .dash-submenu .dash-submenu>.dash-item.active>.dash-link,
html body .dash-sidebar .dash-submenu .dash-submenu>.dash-item.dash-trigger>.dash-link{
    border-color:rgba(32,120,151,.24)!important;
    background:rgba(255,255,255,.52)!important;
    color:#0d3855!important;
    box-shadow:inset 3px 0 0 #218ba5!important;
}
html body .dash-sidebar .dash-submenu>.dash-item:hover>.dash-link>.dash-mtext,
html body .dash-sidebar .dash-submenu>.dash-item:focus>.dash-link>.dash-mtext,
html body .dash-sidebar .dash-submenu>.dash-item.active>.dash-link>.dash-mtext,
html body .dash-sidebar .dash-submenu>.dash-item.dash-trigger>.dash-link>.dash-mtext,
html body .dash-sidebar .dash-submenu .dash-submenu>.dash-item:hover>.dash-link>.dash-mtext,
html body .dash-sidebar .dash-submenu .dash-submenu>.dash-item:focus>.dash-link>.dash-mtext,
html body .dash-sidebar .dash-submenu .dash-submenu>.dash-item.active>.dash-link>.dash-mtext,
html body .dash-sidebar .dash-submenu .dash-submenu>.dash-item.dash-trigger>.dash-link>.dash-mtext{
    color:#0d3855!important;
}
html body .dash-sidebar .dash-submenu>.dash-item>.dash-link>.dash-arrow,
html body .dash-sidebar .dash-submenu>.dash-item>.dash-link>.dash-arrow svg,
html body .dash-sidebar .dash-submenu .dash-submenu>.dash-item>.dash-link>.dash-arrow,
html body .dash-sidebar .dash-submenu .dash-submenu>.dash-item>.dash-link>.dash-arrow svg{
    color:#315f78!important;
    stroke:#315f78!important;
}

/* This project ships an older Tabler icon font. Map the newer menu icon names
   to equivalent glyphs that exist in that font so no sidebar option is blank. */
.dash-sidebar .ti-address-book:before{content:"\ea39"}
.dash-sidebar .ti-arrows-exchange:before{content:"\edb0"}
.dash-sidebar .ti-calendar-check:before,
.dash-sidebar .ti-calendar-month:before,
.dash-sidebar .ti-calendar-user:before,
.dash-sidebar .ti-calendar-week:before{content:"\ea53"}
.dash-sidebar .ti-checklist:before,
.dash-sidebar .ti-list-details:before{content:"\eb6a"}
.dash-sidebar .ti-clock-edit:before,
.dash-sidebar .ti-clock-minus:before,
.dash-sidebar .ti-clock-plus:before,
.dash-sidebar .ti-user-clock:before{content:"\ea70"}
.dash-sidebar .ti-door-exit:before{content:"\eba8"}
.dash-sidebar .ti-layout-dashboard:before{content:"\ea87"}
.dash-sidebar .ti-message-question:before{content:"\eaed"}
.dash-sidebar .ti-point-filled:before{content:"\ea6b"}
.dash-sidebar .ti-target-arrow:before{content:"\eb35"}
.dash-sidebar .ti-user-dollar:before{content:"\ea55"}
.dash-sidebar .ti-user-screen:before{content:"\ea89"}
.dash-sidebar .ti-user-search:before{content:"\eb1c"}
.dash-sidebar .ti-users-group:before{content:"\ebf2"}
.dash-sidebar .ti-users-plus:before{content:"\eb4b"}

html body .dash-sidebar .dash-submenu .dash-link>i.ti,
html body .dash-sidebar .dash-submenu .dash-link>.dash-mtext>i.ti{
    display:inline-grid!important;
    place-items:center!important;
    width:22px!important;
    height:22px!important;
    margin-right:7px!important;
    border-radius:7px!important;
    background:rgba(17,91,119,.11)!important;
    color:#164f6c!important;
    font-size:14px!important;
    vertical-align:middle!important;
}
html body .dash-sidebar .dash-submenu>.dash-item:hover>.dash-link>i.ti,
html body .dash-sidebar .dash-submenu>.dash-item.active>.dash-link>i.ti,
html body .dash-sidebar .dash-submenu>.dash-item.dash-trigger>.dash-link>i.ti,
html body .dash-sidebar .dash-submenu>.dash-item:hover>.dash-link>.dash-mtext>i.ti,
html body .dash-sidebar .dash-submenu>.dash-item.active>.dash-link>.dash-mtext>i.ti,
html body .dash-sidebar .dash-submenu>.dash-item.dash-trigger>.dash-link>.dash-mtext>i.ti{
    background:rgba(13,105,136,.18)!important;
    color:#0d4966!important;
}
html body .dash-sidebar .dash-submenu .dash-link:not(:has(>i.ti)):not(:has(>.dash-mtext>i.ti))::before{
    content:"\ea1f"!important;
    display:inline-grid!important;
    place-items:center;
    width:22px;
    height:22px;
    margin-right:7px;
    border-radius:7px;
    background:rgba(17,91,119,.11);
    color:#164f6c;
    font-family:tabler-icons!important;
    font-size:13px;
    line-height:1;
    vertical-align:middle;
}

/* Calm linework gives the aqua rail depth without competing with navigation.
   Motion travels sideways only; there is no vertical colour sweep. */
.dash-sidebar{
    isolation:isolate;
    overflow:hidden!important;
}
.dash-sidebar>.navbar-wrapper{
    position:relative;
    z-index:2;
}
.dash-sidebar::before,
.dash-sidebar::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
}
.dash-sidebar::before{
    z-index:0;
    opacity:.54;
    background-image:
        repeating-linear-gradient(122deg,transparent 0 36px,rgba(12,79,104,.085) 37px,rgba(255,255,255,.14) 38px,transparent 40px,transparent 76px),
        repeating-radial-gradient(ellipse at 12% 82%,transparent 0 42px,rgba(10,84,109,.095) 43px,rgba(255,255,255,.13) 44px,transparent 46px,transparent 78px);
    background-size:180px 180px,390px 330px;
    background-position:0 0,-135px 150px;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.28),#000 24%,#000 82%,rgba(0,0,0,.48));
    mask-image:linear-gradient(180deg,rgba(0,0,0,.28),#000 24%,#000 82%,rgba(0,0,0,.48));
    animation:skySidebarContours 22s ease-in-out infinite alternate;
    transition:opacity .45s ease;
}
.dash-sidebar::after{
    z-index:1;
    opacity:.42;
    background:
        radial-gradient(circle at 108% 16%,rgba(222,255,255,.32),transparent 32%),
        radial-gradient(circle at -12% 82%,rgba(18,109,136,.14),transparent 34%),
        linear-gradient(90deg,transparent 0,transparent calc(100% - 2px),rgba(226,255,255,.7) calc(100% - 1px),rgba(22,105,130,.25) 100%);
    animation:skySidebarGlow 7.5s ease-in-out infinite alternate;
}
.dash-sidebar:hover::before,
.dash-sidebar:focus-within::before{
    opacity:.72;
}
@keyframes skySidebarContours{
    0%{background-position:0 0,-135px 150px}
    50%{background-position:42px 0,-92px 150px}
    100%{background-position:88px 0,-45px 150px}
}
@keyframes skySidebarGlow{
    0%{opacity:.32;filter:saturate(.94) brightness(.98)}
    100%{opacity:.52;filter:saturate(1.08) brightness(1.04)}
}
@media(prefers-reduced-motion:reduce){
    .dash-sidebar::before,
    .dash-sidebar::after{
        animation:none!important;
        transform:none!important;
    }
    .dash-sidebar::after{opacity:.42}
}

/* Keep logout in a dedicated footer row. Expanded menu trees scroll inside
   the middle row and can never pass beneath or in front of the button. */
html body .dash-sidebar>.navbar-wrapper{
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
}
html body .dash-sidebar>.navbar-wrapper>.m-header{
    grid-row:1;
}
html body .dash-sidebar>.navbar-wrapper>.navbar-content,
html body.minimenu .dash-sidebar>.navbar-wrapper>.navbar-content.ps{
    grid-row:2;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding-bottom:24px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    scroll-padding-bottom:24px;
}
html body .dash-sidebar>.navbar-wrapper>.navbar-content>.ps__rail-x,
html body .dash-sidebar>.navbar-wrapper>.navbar-content>.ps__rail-y{
    display:none!important;
}
html body .dash-sidebar>.navbar-wrapper>.sky-sidebar-footer{
    position:relative!important;
    z-index:4;
    grid-row:3;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:auto!important;
    margin:0 9px 10px!important;
    padding:10px 0 0!important;
    border-top:1px solid rgba(30,105,131,.2)!important;
    background:linear-gradient(180deg,rgba(112,188,203,0),rgba(112,188,203,.22))!important;
    box-shadow:0 -12px 24px rgba(24,91,114,.055)!important;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
}

/* One visual language for every dropdown, including HRM, Asset Management,
   Workspace and Utility. Opaque aqua tint prevents lower items appearing
   white merely because they sit over the darker end of the sidebar gradient. */
html body .dash-sidebar.light-sidebar .dash-navbar>.dash-item.dash-hasmenu>.dash-link,
html body .dash-sidebar.light-sidebar .dash-navbar>.dash-item.dash-hasmenu:hover>.dash-link,
html body .dash-sidebar.light-sidebar .dash-navbar>.dash-item.dash-hasmenu:focus>.dash-link{
    border:1px solid rgba(25,101,126,.11)!important;
    background:rgba(194,228,234,.18)!important;
    color:#173b57!important;
}
html body .dash-sidebar.light-sidebar .dash-navbar>.dash-item.dash-hasmenu>.dash-link>.dash-mtext,
html body .dash-sidebar.light-sidebar .dash-navbar>.dash-item.dash-hasmenu:hover>.dash-link>.dash-mtext,
html body .dash-sidebar.light-sidebar .dash-navbar>.dash-item.dash-hasmenu:focus>.dash-link>.dash-mtext{
    color:#173b57!important;
}
html body .dash-sidebar.light-sidebar .dash-navbar>.dash-item.dash-hasmenu.active>.dash-link,
html body .dash-sidebar.light-sidebar .dash-navbar>.dash-item.dash-hasmenu.dash-trigger>.dash-link{
    border-color:rgba(19,103,131,.22)!important;
    background:linear-gradient(135deg,rgba(193,229,234,.62),rgba(147,207,218,.45))!important;
    box-shadow:inset 3px 0 0 #167e9a,0 7px 18px rgba(27,96,119,.08)!important;
}
html body .dash-sidebar.light-sidebar .dash-navbar>.dash-item.dash-hasmenu.active>.dash-link>.dash-mtext,
html body .dash-sidebar.light-sidebar .dash-navbar>.dash-item.dash-hasmenu.dash-trigger>.dash-link>.dash-mtext{
    color:#103a54!important;
}
html body .dash-sidebar.light-sidebar .dash-navbar>.dash-item.dash-hasmenu>.dash-submenu>.dash-item>.dash-link,
html body .dash-sidebar.light-sidebar .dash-navbar>.dash-item.dash-hasmenu>.dash-submenu .dash-submenu>.dash-item>.dash-link{
    border-color:rgba(24,104,130,.16)!important;
    background:linear-gradient(135deg,rgba(207,234,238,.94),rgba(178,217,224,.9))!important;
    color:#173b57!important;
    box-shadow:0 5px 13px rgba(29,91,111,.045)!important;
}
html body .dash-sidebar.light-sidebar .dash-navbar>.dash-item.dash-hasmenu>.dash-submenu>.dash-item>.dash-link>.dash-mtext,
html body .dash-sidebar.light-sidebar .dash-navbar>.dash-item.dash-hasmenu>.dash-submenu .dash-submenu>.dash-item>.dash-link>.dash-mtext{
    color:#173b57!important;
}
html body .dash-sidebar.light-sidebar .dash-navbar>.dash-item.dash-hasmenu>.dash-submenu>.dash-item:hover>.dash-link,
html body .dash-sidebar.light-sidebar .dash-navbar>.dash-item.dash-hasmenu>.dash-submenu>.dash-item.active>.dash-link,
html body .dash-sidebar.light-sidebar .dash-navbar>.dash-item.dash-hasmenu>.dash-submenu>.dash-item.dash-trigger>.dash-link,
html body .dash-sidebar.light-sidebar .dash-navbar>.dash-item.dash-hasmenu>.dash-submenu .dash-submenu>.dash-item:hover>.dash-link,
html body .dash-sidebar.light-sidebar .dash-navbar>.dash-item.dash-hasmenu>.dash-submenu .dash-submenu>.dash-item.active>.dash-link{
    border-color:rgba(20,105,132,.27)!important;
    background:linear-gradient(135deg,rgba(186,226,232,.98),rgba(143,203,214,.94))!important;
    color:#0e3b56!important;
    box-shadow:inset 3px 0 0 #167f9b,0 7px 16px rgba(24,94,116,.075)!important;
}

/* Categorized workforce explorer shared by monthly and bonus payroll. */
.pwf-panel,.pwf-panel *{box-sizing:border-box}
.pwf-panel{overflow:hidden;margin:0 18px 15px;border:1px solid #d9e5ef;border-radius:20px;background:linear-gradient(145deg,#f7fbfe,#f2f8fb);box-shadow:0 13px 30px rgba(30,67,96,.065)}
.pwf-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 18px;background:linear-gradient(125deg,#173f5f,#176d83 58%,#23989d);color:#fff}
.pwf-title{display:flex;min-width:0;align-items:center;gap:12px}.pwf-title-icon{display:grid;width:43px;height:43px;flex:0 0 43px;place-items:center;border:1px solid rgba(255,255,255,.19);border-radius:13px;background:rgba(255,255,255,.12);font-size:21px;box-shadow:inset 0 1px rgba(255,255,255,.12)}
.pwf-title>div{display:flex;min-width:0;flex-direction:column}.pwf-title small{color:#99e2e2;font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.pwf-title strong{margin-top:2px;color:#fff;font-size:13px;font-weight:900}.pwf-title p{max-width:620px;margin:3px 0 0;color:rgba(239,253,255,.68);font-size:8.5px;line-height:1.45}
.pwf-overview{display:grid;flex:0 0 auto;grid-template-columns:repeat(3,minmax(68px,1fr));overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:13px;background:rgba(4,43,61,.2)}.pwf-overview>span{display:flex;min-height:47px;flex-direction:column;align-items:center;justify-content:center;padding:5px 9px;border-left:1px solid rgba(255,255,255,.1)}.pwf-overview>span:first-child{border-left:0}.pwf-overview small{color:rgba(231,250,252,.64);font-size:6.5px;font-weight:800;text-transform:uppercase}.pwf-overview strong{margin-top:1px;color:#fff;font-size:15px;font-weight:900}
.pwf-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:12px 14px 10px;background:#fff}.pwf-search{display:grid;grid-template-columns:25px minmax(0,1fr) auto;align-items:center;gap:5px;min-height:49px;margin:0;padding:5px 10px;border:1px solid #d8e4ed;border-radius:13px;background:#f9fbfd;transition:border-color .2s,box-shadow .2s}.pwf-search:focus-within{border-color:#67aabd;box-shadow:0 0 0 4px rgba(27,132,157,.09)}.pwf-search>i{color:#26859e;font-size:18px}.pwf-search>span{display:flex;min-width:0;flex-direction:column}.pwf-search small{color:#7890a1;font-size:7px;font-weight:850;text-transform:uppercase}.pwf-search input{width:100%;height:22px;padding:0;border:0!important;background:transparent!important;color:#263f55;font-size:10.5px;outline:0!important;box-shadow:none!important}.pwf-search kbd{padding:3px 6px;border:1px solid #d6e1e9;border-bottom-width:2px;border-radius:6px;background:#fff;color:#8295a5;font-family:inherit;font-size:7px}.pwf-reset{display:flex;align-items:center;justify-content:center;gap:6px;min-width:96px;border:1px solid #d7e2eb;border-radius:13px;background:#fff;color:#557187;font-size:8px;font-weight:850;transition:.2s}.pwf-reset:hover{border-color:#91bdca;background:#edf8f8;color:#176e85;transform:translateY(-1px)}
.pwf-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:12px 14px;border-top:1px solid #e3ebf1}.pwf-group{min-width:0;margin:0;padding:0 10px 11px;border:1px solid #dae5ed;border-radius:15px;background:rgba(255,255,255,.86)}.pwf-group legend{display:flex;width:auto;align-items:center;gap:8px;margin:0 0 2px;padding:10px 3px 7px;float:none}.pwf-group legend>span{display:grid;width:30px;height:30px;flex:0 0 30px;place-items:center;border-radius:9px;font-size:15px}.pwf-group legend>div{display:flex;min-width:0;flex-direction:column}.pwf-group legend strong{color:#304b61;font-size:9px;font-weight:900}.pwf-group legend small{margin-top:1px;color:#91a0ad;font-size:6.5px}.pwf-organization legend>span{background:#e5f2ff;color:#3576bc}.pwf-employment legend>span{background:#e5f7f2;color:#208b73}.pwf-payroll legend>span{background:#fff1dd;color:#bb7b1b}
.pwf-fields{display:grid;grid-template-columns:1fr;gap:7px}.pwf-fields label{display:flex;min-width:0;flex-direction:column;gap:4px;margin:0}.pwf-fields label>span{color:#708397;font-size:7px;font-weight:850;text-transform:uppercase}.pwf-fields select,.pwf-fields input{width:100%;height:35px;padding:0 9px;border:1px solid #dce5ec;border-radius:9px;background:#fff;color:#40586d;font-size:8.5px;outline:0}.pwf-fields select{padding-right:25px}.pwf-fields select:focus,.pwf-fields input:focus{border-color:#6aabba;box-shadow:0 0 0 3px rgba(22,126,151,.08)}
.pwf-active-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid #dfe8ef;background:#fff}.pwf-active-row>span{display:flex;align-items:center;gap:5px;color:#708599;font-size:7.5px;font-weight:850;text-transform:uppercase}.pwf-active-row>span i{color:#23889b;font-size:14px}.pwf-active-row>div{display:flex;min-width:0;flex-wrap:wrap;gap:4px}.pwf-active-row>div>span{padding:4px 7px;border-radius:999px;background:#e9f5f6;color:#397287;font-size:7px}.pwf-active-row>div>span strong{color:#1d6075}.pwf-active-row em{color:#97a4b0;font-size:7.5px}.pwf-active-row>b{padding:4px 7px;border-radius:999px;background:#edf2f6;color:#6c8092;font-size:7px;white-space:nowrap}

/* Rich employee result rows. */
.payroll-employee-option{grid-template-columns:24px 38px minmax(170px,1.15fr) minmax(145px,.9fr) minmax(165px,1fr) auto!important;min-height:72px!important}
.payroll-option-profile{display:flex;min-width:0;flex-direction:column}.payroll-option-profile strong{overflow:hidden;color:#36526a;font-size:9px;font-weight:850;text-overflow:ellipsis;white-space:nowrap}.payroll-option-profile small{overflow:hidden;margin-top:3px;color:#899aa9;font-size:7.5px;text-overflow:ellipsis;white-space:nowrap}
.payroll-option-person{position:relative;padding-right:54px}.payroll-employment-state{position:absolute;right:0;top:0;padding:3px 6px;border-radius:999px;background:#edf2f6;color:#64798c;font-size:6.5px;font-style:normal;font-weight:900;text-transform:uppercase}.payroll-employment-state.probation{background:#fff1d9;color:#a56b10}.payroll-employment-state.confirmed{background:#dcf5eb;color:#168066}.payroll-employment-state.resigned{background:#f3e8eb;color:#9c5363}
.payroll-eligibility-tag.stopped{background:#f4e9ec;color:#985568}.payroll-eligibility-tag.attention{background:#eaf3fb;color:#447499}

/* Bonus payroll uses the same explorer in a narrower selection card. */
.fb-card .pwf-panel{margin:12px}.fb-card .pwf-head{align-items:flex-start;flex-direction:column}.fb-card .pwf-overview{width:100%}.fb-card .pwf-groups{grid-template-columns:1fr}.fb-card .pwf-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.fb-employee{grid-template-columns:22px 38px minmax(150px,1.1fr) minmax(120px,.8fr) auto auto!important;min-height:66px}.fb-employee[hidden]{display:none!important}.fb-employee.is-unavailable{cursor:not-allowed;opacity:.62;background:#f7f8fa}.fb-employee>span:nth-child(3) em{overflow:hidden;margin-top:3px;color:#8495a4;font-size:7px;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.fb-payroll-meta{display:flex;min-width:0;flex-direction:column}.fb-payroll-meta strong{overflow:hidden;color:#3b576e;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.fb-payroll-meta small{overflow:hidden;margin-top:3px;color:#8c9aa8;font-size:7px;text-overflow:ellipsis;white-space:nowrap}.fb-status{padding:5px 7px;border-radius:999px;background:#edf2f6;color:#657a8c;font-size:7px;font-weight:900;text-transform:uppercase}.fb-status.probation{background:#fff1d9;color:#a56b10}.fb-status.confirmed{background:#dcf5eb;color:#168066}.fb-status.resigned{background:#f3e8eb;color:#9c5363}
@media(max-width:1200px){.pwf-groups{grid-template-columns:1fr}.pwf-fields{grid-template-columns:repeat(3,minmax(0,1fr))}.payroll-employee-option{grid-template-columns:24px 38px minmax(170px,1.1fr) minmax(140px,.8fr) auto!important}.payroll-option-profile{display:none}}
@media(max-width:780px){.pwf-head{align-items:flex-start;flex-direction:column}.pwf-overview{width:100%}.pwf-fields,.fb-card .pwf-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.pwf-search-row{grid-template-columns:1fr}.pwf-reset{min-height:38px}.pwf-active-row{grid-template-columns:1fr}.payroll-employee-option{grid-template-columns:23px 36px minmax(0,1fr) auto!important}.payroll-option-org,.payroll-option-profile{display:none}.fb-employee{grid-template-columns:22px 38px minmax(0,1fr) auto!important}.fb-payroll-meta,.fb-status{display:none}}
@media(max-width:520px){.pwf-panel{margin:0 10px 12px}.pwf-fields,.fb-card .pwf-fields{grid-template-columns:1fr}.pwf-search kbd{display:none}.pwf-title p{display:none}.pwf-overview small{font-size:6px}.fb-employee .fb-salary{display:none}}

/* Payroll multi-select filter builder. */
.pwf-panel{border-color:#d8e3eb;background:#f7f9fc;box-shadow:0 14px 34px rgba(26,55,81,.08)}
.pwf-head{padding:18px 20px;background:linear-gradient(128deg,#173d5b 0%,#17677b 58%,#218e91 100%)}
.pwf-title-icon{width:45px;height:45px;flex-basis:45px;border-radius:14px;background:rgba(255,255,255,.13)}
.pwf-title small{color:#9ddfdd}.pwf-title strong{font-size:14px}.pwf-title p{font-size:9px}
.pwf-toolbar{display:grid;grid-template-columns:minmax(260px,1.25fr) minmax(220px,.85fr) auto;gap:9px;padding:13px 14px;background:#fff}
.pwf-toolbar label{margin:0}
.pwf-search,.pwf-filter-picker{display:grid;grid-template-columns:27px minmax(0,1fr) auto;align-items:center;gap:7px;min-height:51px;padding:5px 11px;border:1px solid #d8e3eb;border-radius:13px;background:#f9fbfd;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.pwf-filter-picker{grid-template-columns:27px minmax(0,1fr);background:#f5fafb}
.pwf-search:focus-within,.pwf-filter-picker:focus-within{border-color:#65aab7;box-shadow:0 0 0 4px rgba(31,139,154,.09);transform:translateY(-1px)}
.pwf-search>i,.pwf-filter-picker>i{color:#24879b;font-size:18px}.pwf-search>span,.pwf-filter-picker>span{display:flex;min-width:0;flex-direction:column}.pwf-search small,.pwf-filter-picker small{color:#71879a;font-size:7px;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.pwf-search input,.pwf-filter-picker select{width:100%;height:23px;padding:0;border:0!important;background:transparent!important;color:#273f54;font-size:10px;font-weight:700;outline:0!important;box-shadow:none!important}.pwf-filter-picker select{cursor:pointer}.pwf-search kbd{padding:3px 6px;border:1px solid #d5e0e8;border-bottom-width:2px;border-radius:6px;background:#fff;color:#8294a4;font-family:inherit;font-size:7px}
.pwf-toolbar .pwf-reset{min-width:108px;min-height:51px;background:#fff}
.pwf-rule-workspace{padding:0 14px 12px;border-top:1px solid #e6edf2;background:#f7f9fc}
.pwf-rule-empty{display:flex;align-items:center;justify-content:center;gap:10px;min-height:85px;padding:15px;color:#8293a3;text-align:left}.pwf-rule-empty[hidden]{display:none}.pwf-rule-empty>span{display:grid;width:39px;height:39px;place-items:center;border:1px dashed #bed0dd;border-radius:12px;background:#fff;color:#5b879d;font-size:18px}.pwf-rule-empty div{display:flex;flex-direction:column}.pwf-rule-empty strong{color:#526a7d;font-size:9px}.pwf-rule-empty small{margin-top:3px;font-size:7.5px}
.pwf-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding-top:12px}
.pwf-rule{min-width:0;overflow:hidden;border:1px solid #d9e4ec;border-radius:15px;background:#fff;box-shadow:0 8px 21px rgba(32,63,87,.055);animation:pwfRuleIn .38s cubic-bezier(.16,1,.3,1) both;transform-origin:top center}.pwf-rule.is-removing{animation:pwfRuleOut .18s ease both}.pwf-rule.has-selection{border-color:#83b9c2;box-shadow:0 10px 25px rgba(28,121,139,.1)}
.pwf-rule-head{display:grid;grid-template-columns:34px minmax(0,1fr) auto 28px;align-items:center;gap:8px;padding:10px 11px;border-bottom:1px solid #e6edf2;background:linear-gradient(135deg,#f9fbfd,#f2f7f9)}.pwf-rule-icon{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;background:#e4f4f3;color:#198a83;font-size:17px}.pwf-rule-head>div{display:flex;min-width:0;flex-direction:column}.pwf-rule-head small{color:#8a9ba9;font-size:6.5px;font-weight:850;text-transform:uppercase}.pwf-rule-head strong{margin-top:1px;color:#324d64;font-size:9.5px}.pwf-rule-head>b{display:grid;min-width:24px;height:24px;place-items:center;border-radius:999px;background:#e8eef3;color:#64798b;font-size:7.5px}.pwf-rule.has-selection .pwf-rule-head>b{background:#16899a;color:#fff}.pwf-rule-head button{display:grid;width:27px;height:27px;place-items:center;border:1px solid #dbe4eb;border-radius:8px;background:#fff;color:#788b9b;transition:.2s}.pwf-rule-head button:hover{border-color:#e3b6c1;background:#fff3f5;color:#bd4560;transform:rotate(5deg)}
.pwf-value-search{position:relative;display:block;margin:9px 10px 7px}.pwf-value-search i{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:#8b9ba9;font-size:13px}.pwf-value-search input{width:100%;height:32px;padding:0 9px 0 29px;border:1px solid #e0e8ee;border-radius:9px;background:#fafcfd;color:#40586d;font-size:8px;outline:0}.pwf-value-search input:focus{border-color:#7eb3bf;box-shadow:0 0 0 3px rgba(31,137,153,.07)}
.pwf-rule-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:190px;padding:0 10px 10px;overflow:auto}.pwf-rule-option{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:6px;min-height:38px;margin:0;padding:5px 7px;border:1px solid #e0e8ee;border-radius:10px;background:#fff;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease}.pwf-rule-option[hidden]{display:none}.pwf-rule-option:hover{border-color:#a9cbd2;background:#f7fbfb;transform:translateY(-1px)}.pwf-rule-option input{position:absolute;opacity:0;pointer-events:none}.pwf-option-check{display:grid;width:21px;height:21px;place-items:center;border:1px solid #cddbe4;border-radius:7px;background:#f6f8fa;color:transparent;font-size:11px;transition:.2s}.pwf-option-name{overflow:hidden;color:#50677b;font-size:8px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.pwf-option-count{display:grid;min-width:21px;height:21px;place-items:center;border-radius:999px;background:#eef2f5;color:#748696;font-size:6.5px;font-weight:900}.pwf-rule-option:has(input:checked){border-color:#65abb5;background:linear-gradient(135deg,#ebf8f6,#eef7fb);box-shadow:0 5px 13px rgba(28,125,140,.08)}.pwf-rule-option input:checked+.pwf-option-check{border-color:#168c91;background:linear-gradient(135deg,#159c8c,#18869d);color:#fff;transform:scale(1.04)}.pwf-rule-option:has(input:checked) .pwf-option-name{color:#1e6575}.pwf-rule-option:has(input:checked) .pwf-option-count{background:#d9efee;color:#187f83}
.pwf-active-row{grid-template-columns:auto minmax(0,1fr) auto;padding:10px 14px}.pwf-active-row>div{gap:5px}.pwf-active-row>div>span{display:inline-flex;align-items:center;gap:5px;padding:4px 4px 4px 8px;background:#e8f5f5;color:#2f6d79;animation:pwfChipIn .25s ease both}.pwf-active-row>div>span>span{font-size:7px;font-weight:800}.pwf-active-row>div>span button{display:grid;width:18px;height:18px;place-items:center;border:0;border-radius:50%;background:rgba(25,118,131,.1);color:#347681;font-size:10px}.pwf-active-row>div>span button:hover{background:#cf5b70;color:#fff}
.pwf-selected-panel{margin:0 14px 14px;overflow:hidden;border:1px solid #d8e4ec;border-radius:15px;background:#fff}.pwf-selected-panel>header{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid #e6edf2;background:linear-gradient(135deg,#f8fbfd,#f2f8f7)}.pwf-selected-panel>header>span{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;background:#dff4ed;color:#15856f;font-size:17px}.pwf-selected-panel>header>div{display:flex;min-width:0;flex-direction:column}.pwf-selected-panel>header strong{color:#304d62;font-size:9.5px}.pwf-selected-panel>header small{margin-top:2px;color:#8899a7;font-size:7px}.pwf-selected-panel>header>b{display:grid;min-width:28px;height:28px;place-items:center;border-radius:999px;background:#177d91;color:#fff;font-size:8px}.pwf-selected-employees{display:flex;flex-wrap:wrap;gap:6px;max-height:150px;padding:9px 10px;overflow:auto}.pwf-selected-employees>em{padding:7px 2px;color:#92a0ac;font-size:8px}.pwf-employee-chip{display:grid;grid-template-columns:26px minmax(0,1fr) 20px;align-items:center;gap:6px;max-width:230px;padding:4px 5px;border:1px solid #dce6ed;border-radius:10px;background:#fff;box-shadow:0 4px 12px rgba(38,66,88,.045);animation:pwfChipIn .3s cubic-bezier(.16,1,.3,1) both}.pwf-employee-chip>b{display:grid;width:26px;height:26px;place-items:center;border-radius:8px;background:linear-gradient(135deg,#dff0fa,#dff5ed);color:#28768c;font-size:7px}.pwf-employee-chip>span{display:flex;min-width:0;flex-direction:column}.pwf-employee-chip strong,.pwf-employee-chip small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pwf-employee-chip strong{color:#334f65;font-size:7.5px}.pwf-employee-chip small{margin-top:1px;color:#8b99a6;font-size:6.5px}.pwf-employee-chip button{display:grid;width:20px;height:20px;place-items:center;border:0;border-radius:6px;background:#f2f5f7;color:#758896;font-size:10px;transition:.18s}.pwf-employee-chip button:hover{background:#fce8ec;color:#bb405b;transform:scale(1.08)}
@keyframes pwfRuleIn{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}@keyframes pwfRuleOut{to{opacity:0;transform:translateY(-7px) scale(.97)}}@keyframes pwfChipIn{from{opacity:0;transform:translateY(5px) scale(.96)}to{opacity:1;transform:none}}

/* Consistent payroll period control alignment. */
.payroll-period-fields{grid-template-columns:repeat(4,minmax(135px,1fr)) minmax(180px,1.05fr);align-items:end}.payroll-period-fields>label{align-self:end}.payroll-period-fields .payroll-select-wrap,.payroll-period-fields .form-select,.payroll-period-fields .form-control{width:100%}

/* Completed payroll confirmation shown after a successful run. */
.payroll-run-complete{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:12px;margin-bottom:14px;padding:14px 16px;border:1px solid #a8d9ca;border-radius:16px;background:linear-gradient(135deg,#effaf6,#f4fbfd);box-shadow:0 10px 25px rgba(25,128,105,.08);animation:pwfRuleIn .42s ease both}.payroll-run-complete>span{display:grid;width:46px;height:46px;place-items:center;border-radius:14px;background:linear-gradient(135deg,#15977f,#238cad);color:#fff;font-size:24px;box-shadow:0 8px 18px rgba(25,139,139,.2)}.payroll-run-complete strong{display:block;color:#215b55;font-size:11px}.payroll-run-complete p{margin:3px 0 0;color:#64847f;font-size:8.5px}
.payroll-run-warning{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:start;gap:12px;margin-bottom:14px;padding:14px 16px;border:1px solid #e5c27f;border-radius:16px;background:linear-gradient(135deg,#fff9ec,#fffdf7);box-shadow:0 10px 25px rgba(151,102,19,.08);animation:pwfRuleIn .42s ease both}.payroll-run-warning>span{display:grid;width:46px;height:46px;place-items:center;border-radius:14px;background:linear-gradient(135deg,#c88822,#dda33d);color:#fff;font-size:23px;box-shadow:0 8px 18px rgba(181,125,31,.2)}.payroll-run-warning-copy>strong{display:block;color:#79531c;font-size:11px}.payroll-run-warning-copy>p{margin:3px 0 9px;color:#8b7048;font-size:8.5px}.payroll-run-warning-people{display:flex;flex-wrap:wrap;gap:6px}.payroll-run-warning-people>a,.payroll-run-warning-people>span{display:grid;grid-template-columns:18px auto auto;align-items:center;gap:5px;padding:5px 7px;border:1px solid #ecd7ae;border-radius:9px;background:#fff;color:#704f21;font-size:7.5px;font-weight:800;text-decoration:none;transition:.2s}.payroll-run-warning-people>a:hover{border-color:#d19a40;box-shadow:0 5px 12px rgba(151,102,19,.1);transform:translateY(-1px)}.payroll-run-warning-people i{color:#bd7e1d;font-size:13px}.payroll-run-warning-people small{color:#9b896c;font-size:6.5px;font-weight:700}
.payroll-run-outcome{display:grid;grid-template-columns:48px minmax(230px,1fr) auto auto;align-items:center;gap:13px;margin-bottom:14px;padding:14px 16px;border:1px solid #b6d9d0;border-radius:18px;background:linear-gradient(135deg,#f0faf6,#f7fbfd);box-shadow:0 12px 28px rgba(25,106,98,.08);animation:pwfRuleIn .42s ease both}.payroll-run-outcome.has-errors{border-color:#e5c27f;background:linear-gradient(135deg,#fff9ec,#fffdf7)}.payroll-run-outcome-icon{display:grid;width:48px;height:48px;place-items:center;border-radius:14px;background:linear-gradient(135deg,#15977f,#238cad);color:#fff;font-size:24px;box-shadow:0 8px 18px rgba(25,139,139,.2)}.payroll-run-outcome.has-errors .payroll-run-outcome-icon{background:linear-gradient(135deg,#c88822,#dda33d);box-shadow:0 8px 18px rgba(181,125,31,.2)}.payroll-run-outcome-copy{display:flex;min-width:0;flex-direction:column}.payroll-run-outcome-copy>small{color:#74918b;font-size:7px;font-weight:850;text-transform:uppercase}.payroll-run-outcome-copy>strong{margin-top:2px;color:#245850;font-size:11px}.payroll-run-outcome-copy>p{margin:3px 0 0;color:#68827e;font-size:8px}.payroll-run-outcome-counts{display:flex;overflow:hidden;border:1px solid #d6e5e1;border-radius:12px;background:#fff}.payroll-run-outcome-counts>span{display:flex;min-width:62px;min-height:47px;flex-direction:column;align-items:center;justify-content:center;padding:5px 9px;border-left:1px solid #e1e9e7}.payroll-run-outcome-counts>span:first-child{border-left:0}.payroll-run-outcome-counts b{color:#1a826d;font-size:14px}.payroll-run-outcome-counts .issues b{color:#b4781d}.payroll-run-outcome-counts small{color:#82928f;font-size:6.5px;font-weight:850;text-transform:uppercase}.payroll-run-outcome-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.payroll-run-outcome-actions button{display:inline-flex;min-height:37px;align-items:center;justify-content:center;gap:6px;padding:0 11px;border:1px solid #9dcac1;border-radius:10px;background:#fff;color:#1c7466;font-size:8px;font-weight:900;transition:.2s}.payroll-run-outcome-actions button:hover{transform:translateY(-1px);box-shadow:0 7px 15px rgba(32,102,91,.1)}.payroll-run-outcome-actions button.warning{border-color:#dfbd7d;color:#93601a}.payroll-run-outcome-actions button b{display:grid;min-width:18px;height:18px;place-items:center;border-radius:999px;background:#f4e6cb;color:#8a5814;font-size:6.5px}
.payroll-run-results{overflow:hidden;margin-bottom:16px;border:1px solid #d9e4ec;border-radius:19px;background:#fff;box-shadow:0 16px 35px rgba(28,56,80,.09);animation:pwfRuleIn .38s cubic-bezier(.16,1,.3,1) both}.payroll-run-results[hidden],.payroll-run-result-panel[hidden]{display:none}.payroll-run-results>header{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid #e2eaf0;background:linear-gradient(135deg,#173d5b,#176d80);color:#fff}.payroll-run-results>header>div{display:flex;flex-direction:column}.payroll-run-results>header small{color:#9bd7dc;font-size:6.5px;font-weight:850;text-transform:uppercase}.payroll-run-results>header strong{margin-top:2px;color:#fff;font-size:11px}.payroll-run-results>header button{display:grid;width:30px;height:30px;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:9px;background:rgba(255,255,255,.1);color:#fff}.payroll-run-result-panel{padding:12px}.payroll-run-result-summary{display:grid;grid-template-columns:37px minmax(0,1fr) auto;align-items:center;gap:9px;margin-bottom:9px;padding:9px 11px;border:1px solid #cae4dc;border-radius:12px;background:#f2faf7}.payroll-run-result-summary.warning{border-color:#ead2a5;background:#fff9ed}.payroll-run-result-summary>span{display:grid;width:37px;height:37px;place-items:center;border-radius:10px;background:#daf3e9;color:#16856e;font-size:18px}.payroll-run-result-summary.warning>span{background:#f8e9ca;color:#a46b16}.payroll-run-result-summary>div{display:flex;min-width:0;flex-direction:column}.payroll-run-result-summary strong{color:#315b53;font-size:9px}.payroll-run-result-summary small{margin-top:2px;color:#78918b;font-size:7px}.payroll-run-result-summary>b{display:grid;min-width:28px;height:28px;place-items:center;border-radius:999px;background:#178674;color:#fff;font-size:8px}.payroll-run-result-summary.warning>b{background:#b5791f}.payroll-run-result-list{display:grid;gap:7px;max-height:470px;overflow:auto}.payroll-result-person{display:grid;grid-template-columns:38px minmax(190px,1fr) minmax(95px,auto) auto;align-items:center;gap:9px;padding:9px 10px;border:1px solid #e0e8ee;border-radius:12px;background:#fff;animation:payrollReviewPerson .32s ease both}.payroll-result-avatar{display:grid;width:38px;height:38px;place-items:center;border-radius:11px;background:linear-gradient(135deg,#dceffa,#dcf5ed);color:#26768b;font-size:8px;font-weight:900}.payroll-result-person>div{display:flex;min-width:0;flex-direction:column}.payroll-result-person>div>strong{overflow:hidden;color:#324e63;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.payroll-result-person>div>small{margin-top:2px;color:#8797a5;font-size:7px}.payroll-result-person>div>p{margin:4px 0 0;color:#8a6130;font-size:7.5px;line-height:1.45}.payroll-result-person>b{color:#1b806d;font-size:9px;text-align:right}.payroll-result-person>em{padding:4px 7px;border-radius:999px;background:#fff0d8;color:#9a6418;font-size:6.5px;font-style:normal;font-weight:900;text-align:center;text-transform:uppercase}.payroll-result-person>a{display:inline-flex;min-height:29px;align-items:center;justify-content:center;gap:4px;padding:0 9px;border:1px solid #cbdde5;border-radius:8px;background:#f8fbfc;color:#367287;font-size:7px;font-weight:900;text-decoration:none;transition:.2s}.payroll-result-person>a:hover{border-color:#7eb6c2;background:#eef8f8;transform:translateY(-1px)}.payroll-result-person.issue{grid-template-columns:38px minmax(220px,1fr) auto auto;border-color:#ead9bb;background:#fffdf9}.payroll-result-person.issue .payroll-result-avatar{background:#faecd2;color:#a56d18;font-size:17px}

.fb-card .pwf-panel{margin:12px}.fb-card .pwf-toolbar{grid-template-columns:1fr}.fb-card .pwf-rules{grid-template-columns:1fr}.fb-card .pwf-rule-options{grid-template-columns:repeat(2,minmax(0,1fr))}.fb-card .pwf-active-row{grid-template-columns:1fr}.fb-card .pwf-selected-employees{max-height:125px}
@media(max-width:1380px){.payroll-period-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.pwf-rules{grid-template-columns:1fr}}
@media(max-width:900px){.pwf-toolbar{grid-template-columns:1fr 1fr}.pwf-toolbar .pwf-reset{grid-column:1/-1;min-height:40px}.pwf-head{align-items:flex-start;flex-direction:column}.pwf-overview{width:100%}}
@media(max-width:780px){.payroll-period-fields{grid-template-columns:1fr}.pwf-toolbar{grid-template-columns:1fr}.pwf-toolbar .pwf-reset{grid-column:auto}.pwf-rule-options{grid-template-columns:1fr}.pwf-active-row{grid-template-columns:1fr}.pwf-search kbd{display:none}.payroll-run-outcome{grid-template-columns:45px minmax(0,1fr)}.payroll-run-outcome-counts,.payroll-run-outcome-actions{grid-column:1/-1}.payroll-run-outcome-actions{justify-content:flex-start}.payroll-result-person,.payroll-result-person.issue{grid-template-columns:38px minmax(0,1fr) auto}.payroll-result-person>b,.payroll-result-person>em{grid-column:2}.payroll-result-person>a{grid-column:3;grid-row:1/3}}
@media(max-width:520px){.pwf-panel{margin:0 10px 12px}.pwf-title p{display:block}.pwf-overview small{font-size:6px}.pwf-employee-chip{max-width:100%;width:100%}.fb-card .pwf-rule-options{grid-template-columns:1fr}}

/* Login persistence control. The password itself stays with the browser's
   password manager; the checked value is sent to Laravel's remember flow. */
.auth-wrapper .sky-login-options{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.auth-wrapper .sky-remember-login{position:relative;display:inline-flex!important;align-items:center;gap:9px;margin:0!important;color:#40566a!important;font-size:12px!important;font-weight:750!important;cursor:pointer;user-select:none}
.auth-wrapper .sky-remember-login>input{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;opacity:0;pointer-events:none}
.auth-wrapper .sky-remember-check{display:inline-grid;width:22px;height:22px;place-items:center;flex:0 0 22px;border:1px solid #bfd0dc;border-radius:7px;background:#fff;color:transparent;font-size:14px;transition:border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.auth-wrapper .sky-remember-login>input:focus-visible+.sky-remember-check{border-color:#218ba5;box-shadow:0 0 0 3px rgba(33,139,165,.18)}
.auth-wrapper .sky-remember-login>input:checked+.sky-remember-check{border-color:#168c91;background:linear-gradient(135deg,#159c8c,#187fa1);color:#fff;box-shadow:0 6px 14px rgba(24,130,151,.2);transform:scale(1.03)}
.auth-wrapper .sky-forgot-password{color:#287a94!important;font-size:12px;font-weight:750;text-decoration:none}
.auth-wrapper .sky-forgot-password:hover{color:#145e78!important;text-decoration:underline}
body.sky-auth-dark .auth-wrapper .sky-remember-login{color:#dce8f2!important}
body.sky-auth-dark .auth-wrapper .sky-remember-check{border-color:#49637b;background:#15283b}
body.sky-auth-dark .auth-wrapper .sky-forgot-password{color:#8bc8f3!important}
body.sky-auth-dark .auth-wrapper .sky-forgot-password:hover{color:#b8ddf7!important}

/* Sidebar viewport contract: the brand, independently scrollable navigation
   and logout footer always occupy separate rows. Long Settings trees cannot
   overlap the logout action, and touch/trackpad scrolling remains native. */
html body #sky-main-sidebar.dash-sidebar{
    height:100vh!important;
    height:100dvh!important;
    max-height:100dvh!important;
    overscroll-behavior:none;
}
html body #sky-main-sidebar>.navbar-wrapper{
    height:100%!important;
    max-height:100%!important;
    min-height:0!important;
}
html body #sky-main-sidebar>.navbar-wrapper>.navbar-content{
    position:relative!important;
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:scroll!important;
    overflow-x:hidden!important;
    scrollbar-gutter:stable;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    contain:layout paint;
}
html body #sky-main-sidebar .dash-navbar{
    min-height:max-content;
    padding-bottom:18px!important;
}
html body #sky-main-sidebar>.navbar-wrapper>.sky-sidebar-footer{
    position:relative!important;
    z-index:20!important;
    flex:0 0 auto!important;
    isolation:isolate;
    pointer-events:auto!important;
}
html body #sky-main-sidebar .sky-sidebar-footer form,
html body #sky-main-sidebar .sky-sidebar-footer .sky-sidebar-logout{
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    margin:0!important;
}
@supports not (height:100dvh){html body #sky-main-sidebar.dash-sidebar{height:100vh!important;max-height:100vh!important}}
@media(max-width:1024px){html body #sky-main-sidebar.dash-sidebar{height:100dvh!important;max-height:100dvh!important}}