:root {
    --hrms-sidebar-width: 292px;
    --hrms-sidebar-collapsed-width: 88px;
    --hrms-sidebar-bg: #0b1220;
    --hrms-sidebar-bg-2: #101828;
    --hrms-sidebar-border: rgba(255, 255, 255, .08);
    --hrms-sidebar-muted: #98a2b3;
    --hrms-sidebar-text: #d0d5dd;
    --hrms-sidebar-active: #2563eb;
    --hrms-sidebar-active-soft: rgba(37, 99, 235, .16);
    --hrms-bg: #f4f7fb;
    --hrms-surface: #ffffff;
    --hrms-text: #101828;
    --hrms-muted: #667085;
    --hrms-border: #e4e7ec;
    --hrms-shadow: 0 18px 55px rgba(16, 24, 40, .08);
    --hrms-shadow-sm: 0 8px 24px rgba(16, 24, 40, .06);
    --hrms-radius: 18px;
    --hrms-transition: 180ms ease;
}

html,
body {
    min-height: 100%;
}

body {
    background: var(--hrms-bg);
    color: var(--hrms-text);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
}

body.hrms-guest {
    overflow: auto;
}

.hrms-guest-main {
    min-height: 100vh;
}

.hrms-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    width: var(--hrms-sidebar-width);
    height: 100vh;
    min-height: 100vh;
    color: var(--hrms-sidebar-text);
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .28), transparent 28%),
        linear-gradient(180deg, var(--hrms-sidebar-bg), var(--hrms-sidebar-bg-2));
    border-right: 1px solid var(--hrms-sidebar-border);
    box-shadow: 18px 0 55px rgba(2, 6, 23, .18);
    transition: width var(--hrms-transition), transform var(--hrms-transition);
}

.hrms-main {
    height: 100vh;
    margin-left: var(--hrms-sidebar-width);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    transition: margin-left var(--hrms-transition);
}

.hrms-content {
    padding: 1.35rem;
}

.hrms-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 84px;
    padding: 1rem;
    border-bottom: 1px solid var(--hrms-sidebar-border);
}

.hrms-brand-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    color: #fff;
    text-decoration: none;
}

.hrms-brand-logo {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

.hrms-brand-copy,
.hrms-user-mini-copy,
.hrms-sidebar-group-copy,
.hrms-nav-text {
    min-width: 0;
}

.hrms-brand-title,
.hrms-brand-subtitle,
.hrms-user-mini-copy span,
.hrms-user-mini-copy small,
.hrms-sidebar-group-title,
.hrms-sidebar-group-desc,
.hrms-nav-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hrms-brand-title {
    color: #fff;
    font-size: .98rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.hrms-brand-subtitle {
    color: var(--hrms-sidebar-muted);
    font-size: .75rem;
    margin-top: .05rem;
}

.hrms-service-strip {
    display: flex;
    gap: .4rem;
    padding: .75rem 1rem 0;
}

.hrms-service-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 28px;
    padding: 0 .55rem;
    border-radius: 999px;
    color: #c7d7fe;
    background: rgba(59, 130, 246, .12);
    border: 1px solid rgba(147, 197, 253, .22);
    font-size: .72rem;
    font-weight: 800;
}

.hrms-sidebar-search-wrap {
    padding: 1rem 1rem .75rem;
}

.hrms-sidebar-search {
    width: 100%;
    height: 42px;
    padding: .55rem .85rem;
    color: #fff;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--hrms-sidebar-border);
    border-radius: 14px;
    outline: none;
    transition: border-color var(--hrms-transition), box-shadow var(--hrms-transition), background var(--hrms-transition);
}

.hrms-sidebar-search::placeholder {
    color: #98a2b3;
}

.hrms-sidebar-search:focus {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(147, 197, 253, .55);
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .22);
}

.hrms-sidebar-scroll {
    flex: 1;
    padding: 0 .75rem 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .26) transparent;
}

.hrms-sidebar-scroll::-webkit-scrollbar {
    width: 8px;
}

.hrms-sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .2);
    border-radius: 999px;
}

.hrms-nav-section-label,
.hrms-sidebar .section-title {
    margin: 1rem .4rem .45rem;
    color: var(--hrms-sidebar-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hrms-nav-link,
.hrms-sidebar a:not(.hrms-brand-link) {
    display: flex;
    align-items: center;
    gap: .66rem;
    width: 100%;
    min-height: 40px;
    margin: .14rem 0;
    padding: .54rem .62rem;
    color: var(--hrms-sidebar-text);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 13px;
    transition: background var(--hrms-transition), color var(--hrms-transition), border-color var(--hrms-transition), transform var(--hrms-transition);
}

.hrms-sidebar a:not(.hrms-brand-link):hover,
.hrms-nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .075);
    border-color: rgba(255, 255, 255, .08);
    transform: translateX(2px);
}

.hrms-sidebar a.active,
.hrms-nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(37, 99, 235, .95), rgba(14, 165, 233, .82));
    border-color: rgba(191, 219, 254, .38);
    box-shadow: 0 10px 28px rgba(37, 99, 235, .26);
}

.hrms-nav-icon,
.hrms-dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 11px;
    color: #bfdbfe;
    background: rgba(255, 255, 255, .075);
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .02em;
}

.hrms-nav-link.active .hrms-nav-icon,
.hrms-sidebar a.active .hrms-nav-icon {
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .2);
}

.hrms-sidebar-group {
    margin-top: .3rem;
}

.hrms-sidebar-group-toggle {
    display: flex;
    align-items: center;
    gap: .66rem;
    width: 100%;
    min-height: 52px;
    padding: .58rem .62rem;
    color: #eef4ff;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 15px;
    transition: background var(--hrms-transition), border-color var(--hrms-transition);
}

.hrms-sidebar-group-toggle:hover,
.hrms-sidebar-group.is-open > .hrms-sidebar-group-toggle {
    background: rgba(255, 255, 255, .075);
    border-color: rgba(255, 255, 255, .08);
}

.hrms-sidebar-group-title {
    font-size: .88rem;
    font-weight: 800;
}

.hrms-sidebar-group-desc {
    max-width: 170px;
    color: var(--hrms-sidebar-muted);
    font-size: .68rem;
    line-height: 1.25;
}

.hrms-sidebar-chevron {
    margin-left: auto;
    color: var(--hrms-sidebar-muted);
    font-size: 1.2rem;
    transition: transform var(--hrms-transition);
}

.hrms-sidebar-group.is-open > .hrms-sidebar-group-toggle .hrms-sidebar-chevron {
    transform: rotate(90deg);
}

.hrms-sidebar-group-panel {
    padding: .25rem 0 .55rem .35rem;
    border-left: 1px solid rgba(255, 255, 255, .08);
    margin-left: 1.05rem;
}

.hrms-sidebar-group-panel .hrms-nav-link,
.hrms-sidebar-group-panel > a {
    min-height: 38px;
    padding-left: .55rem;
    font-size: .86rem;
}

.hrms-sidebar-footer {
    padding: .9rem 1rem 1rem;
    border-top: 1px solid var(--hrms-sidebar-border);
}

.hrms-user-mini {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    margin-bottom: .75rem;
}

.hrms-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    border-radius: 13px;
    font-size: .85rem;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(37, 99, 235, .24);
}

.hrms-user-mini-copy span {
    color: #fff;
    font-weight: 800;
    font-size: .88rem;
}

.hrms-user-mini-copy small {
    color: var(--hrms-sidebar-muted);
    font-size: .74rem;
}

.hrms-sidebar-logout {
    width: 100%;
    min-height: 40px;
    color: #e0e7ff;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 13px;
    font-weight: 800;
    transition: background var(--hrms-transition), color var(--hrms-transition);
}

.hrms-sidebar-logout:hover {
    color: #fff;
    background: rgba(239, 68, 68, .18);
}

.hrms-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 82px;
    padding: .9rem 1.35rem;
    background: rgba(244, 247, 251, .9);
    border-bottom: 1px solid rgba(228, 231, 236, .85);
    backdrop-filter: blur(16px);
}

.hrms-topbar-left,
.hrms-topbar-right {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.hrms-topbar-right {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.hrms-icon-button,
.hrms-profile-button,
.hrms-notification-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-width: 42px;
    min-height: 42px;
    padding: .45rem .72rem;
    color: #344054;
    background: #fff;
    border: 1px solid var(--hrms-border);
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .04);
    transition: transform var(--hrms-transition), border-color var(--hrms-transition), box-shadow var(--hrms-transition);
}



.hrms-icon-button:hover,
.hrms-profile-button:hover,
.hrms-notification-button:hover {
    transform: translateY(-1px);
    border-color: #bfdbfe;
    box-shadow: 0 10px 24px rgba(16, 24, 40, .08);
}

.hrms-profile-button {
    padding: .24rem .55rem .24rem .25rem;
    font-weight: 800;
}

.hrms-notification-button {
    position: relative;
    font-weight: 800;
}

.hrms-notification-button strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 .35rem;
    color: #fff;
    background: #dc2626;
    border-radius: 999px;
    font-size: .72rem;
}

.hrms-breadcrumbs {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .15rem;
    color: var(--hrms-muted);
    font-size: .77rem;
    font-weight: 700;
}

.hrms-breadcrumbs a {
    color: #2563eb;
    text-decoration: none;
}

.hrms-page-title {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.25rem, 1vw + 1rem, 1.85rem);
    font-weight: 900;
    letter-spacing: -.03em;
}

.hrms-page-subtitle {
    color: var(--hrms-muted);
    font-size: .85rem;
}

.hrms-global-search {
    align-items: center;
    gap: .5rem;
    min-width: min(25vw, 360px);
    height: 43px;
    padding: .35rem .45rem .35rem .85rem;
    color: #667085;
    background: #fff;
    border: 1px solid var(--hrms-border);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .04);
}

.hrms-global-search span {
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.hrms-global-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #344054;
    background: transparent;
}

.hrms-quick-action-button,
.btn.hrms-quick-action-button {
    border: 0;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    box-shadow: 0 12px 28px rgba(37, 99, 235, .24);
    font-weight: 800;
}

.hrms-dropdown-menu {
    border: 1px solid var(--hrms-border);
    border-radius: 16px;
    box-shadow: var(--hrms-shadow);
    padding: .45rem;
}

.hrms-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 40px;
    border-radius: 12px;
    font-weight: 700;
}

.hrms-dropdown-icon {
    width: 28px;
    height: 28px;
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #dbeafe;
}

.hrms-alert {
    border: 0;
    border-radius: 16px;
    box-shadow: var(--hrms-shadow-sm);
}

.card {
    border: 0;
    border-radius: var(--hrms-radius);
    box-shadow: var(--hrms-shadow-sm);
}

.btn,
.form-control,
.form-select {
    border-radius: 12px;
}

.btn {
    font-weight: 700;
}

.btn:hover {
    transform: translateY(-1px);
}

.table-responsive {
    border-radius: var(--hrms-radius);
}

.table > :not(caption) > * > * {
    padding: .9rem .9rem;
}

.mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .25rem;
    padding: .45rem .65rem calc(.45rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -8px 24px rgba(16, 24, 40, .08);
    backdrop-filter: blur(14px);
}

.mobile-bottom-nav a {
    color: #475467;
    text-decoration: none;
    text-align: center;
    font-size: .72rem;
    line-height: 1.1;
    padding: .45rem .2rem;
    border-radius: .75rem;
}

.mobile-bottom-nav a.active {
    color: #0d6efd;
    background: #eff6ff;
    font-weight: 800;
}

.mobile-bottom-nav .nav-icon {
    display: block;
    font-size: .78rem;
    font-weight: 900;
    margin-bottom: .18rem;
}

.pwa-connection-banner {
    position: fixed;
    top: .75rem;
    left: 50%;
    z-index: 1080;
    max-width: min(92vw, 520px);
    padding: .6rem .9rem;
    color: #fff;
    background: #344054;
    border-radius: 999px;
    box-shadow: 0 10px 26px rgba(16, 24, 40, .18);
    transform: translateX(-50%);
    font-size: .875rem;
}

.pwa-connection-banner.is-offline {
    background: #b42318;
}

.pwa-connection-banner.is-online {
    background: #027a48;
}

.pwa-install-mini {
    display: none;
}

body.hrms-sidebar-collapsed .hrms-sidebar {
    width: var(--hrms-sidebar-collapsed-width);
}

body.hrms-sidebar-collapsed .hrms-main {
    margin-left: var(--hrms-sidebar-collapsed-width);
}

body.hrms-sidebar-collapsed .hrms-brand-copy,
body.hrms-sidebar-collapsed .hrms-service-strip,
body.hrms-sidebar-collapsed .hrms-sidebar-search-wrap,
body.hrms-sidebar-collapsed .hrms-sidebar-group-copy,
body.hrms-sidebar-collapsed .hrms-sidebar-chevron,
body.hrms-sidebar-collapsed .hrms-nav-text,
body.hrms-sidebar-collapsed .hrms-nav-section-label,
body.hrms-sidebar-collapsed .hrms-sidebar .section-title,
body.hrms-sidebar-collapsed .hrms-user-mini-copy,
body.hrms-sidebar-collapsed .hrms-sidebar-logout {
    display: none !important;
}

body.hrms-sidebar-collapsed .hrms-sidebar-brand,
body.hrms-sidebar-collapsed .hrms-sidebar-footer {
    justify-content: center;
    padding-inline: .65rem;
}

body.hrms-sidebar-collapsed .hrms-sidebar-scroll {
    padding-inline: .55rem;
}

body.hrms-sidebar-collapsed .hrms-sidebar-group-panel {
    display: none !important;
}

body.hrms-sidebar-collapsed .hrms-nav-link,
body.hrms-sidebar-collapsed .hrms-sidebar-group-toggle,
body.hrms-sidebar-collapsed .hrms-sidebar a:not(.hrms-brand-link) {
    justify-content: center;
    padding-inline: .35rem;
}

.hrms-mobile-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    display: none;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
}

@media (max-width: 1199.98px) {
    .hrms-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .hrms-topbar-right {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    body {
        overflow: auto;
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }

    .hrms-sidebar {
        width: min(88vw, 330px);
        transform: translateX(-105%);
    }

    body.hrms-mobile-sidebar-open {
        overflow: hidden;
    }

    body.hrms-mobile-sidebar-open .hrms-sidebar {
        transform: translateX(0);
    }

    body.hrms-mobile-sidebar-open .hrms-mobile-sidebar-backdrop {
        display: block;
    }

    .hrms-main {
        height: auto;
        min-height: 100vh;
        margin-left: 0;
        overflow: visible;
    }

    body.hrms-sidebar-collapsed .hrms-main {
        margin-left: 0;
    }

    body.hrms-sidebar-collapsed .hrms-sidebar {
        width: min(88vw, 330px);
    }

    body.hrms-sidebar-collapsed .hrms-brand-copy,
    body.hrms-sidebar-collapsed .hrms-service-strip,
    body.hrms-sidebar-collapsed .hrms-sidebar-search-wrap,
    body.hrms-sidebar-collapsed .hrms-sidebar-group-copy,
    body.hrms-sidebar-collapsed .hrms-sidebar-chevron,
    body.hrms-sidebar-collapsed .hrms-nav-text,
    body.hrms-sidebar-collapsed .hrms-nav-section-label,
    body.hrms-sidebar-collapsed .hrms-sidebar .section-title,
    body.hrms-sidebar-collapsed .hrms-user-mini-copy,
    body.hrms-sidebar-collapsed .hrms-sidebar-logout {
        display: initial !important;
    }

    body.hrms-sidebar-collapsed .hrms-sidebar-group-panel {
        display: block !important;
    }

    .hrms-content {
        padding: 1rem;
    }

    .hrms-topbar {
        position: sticky;
        min-height: auto;
        padding: .85rem 1rem;
    }

    .hrms-topbar-left,
    .hrms-topbar-right {
        width: 100%;
    }

    .hrms-topbar-left {
        align-items: flex-start;
    }

    .hrms-topbar-right {
        gap: .5rem;
    }

    .hrms-page-title {
        font-size: 1.22rem;
    }

    .card {
        border-radius: 16px;
    }

    .table-responsive table {
        min-width: 720px;
    }

    .btn,
    .form-control,
    .form-select {
        min-height: 44px;
    }

    .dropdown-menu {
        max-width: calc(100vw - 1.5rem);
    }

    .pwa-install-mini {
        display: inline-flex;
    }
}

@media print {
    body {
        overflow: visible;
        background: #fff !important;
    }

    .hrms-sidebar,
    .hrms-topbar,
    .mobile-bottom-nav,
    .pwa-connection-banner,
    .pwa-install-mini,
    .hrms-mobile-sidebar-backdrop {
        display: none !important;
    }

    .hrms-main {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .hrms-content {
        padding: 0 !important;
    }
}

/* Phase UI-2: Professional HRMS Dashboard */
.dashboard-shell {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dashboard-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 1.25rem;
    overflow: hidden;
    padding: clamp(1.25rem, 2vw, 2rem);
    color: #fff;
    background:
        radial-gradient(circle at 10% 0%, rgba(59, 130, 246, .75), transparent 26%),
        radial-gradient(circle at 90% 12%, rgba(16, 185, 129, .45), transparent 24%),
        linear-gradient(135deg, #0b1220 0%, #172554 55%, #0f172a 100%);
}

.dashboard-hero::after {
    position: absolute;
    inset: auto -8rem -10rem auto;
    width: 24rem;
    height: 24rem;
    content: "";
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.dashboard-hero-content,
.dashboard-hero-panel {
    position: relative;
    z-index: 1;
}

.dashboard-eyebrow,
.dashboard-widget-kicker,
.dashboard-section-heading span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: #2563eb;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dashboard-hero .dashboard-eyebrow {
    color: #bfdbfe;
}

.dashboard-hero h1 {
    max-width: 760px;
    margin: .5rem 0 .7rem;
    font-size: clamp(1.65rem, 3vw, 3.1rem);
    font-weight: 950;
    letter-spacing: -.045em;
    line-height: 1.04;
}

.dashboard-hero p {
    max-width: 720px;
    margin: 0;
    color: #dbeafe;
    font-size: .98rem;
    line-height: 1.7;
}

.dashboard-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1.35rem;
}

.dashboard-hero-meta span,
.dashboard-action-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: .42rem .72rem;
    color: #e0f2fe;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    backdrop-filter: blur(10px);
}

.dashboard-hero-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 24px;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    backdrop-filter: blur(14px);
}

.dashboard-health-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 156px;
    height: 156px;
    flex: 0 0 auto;
    border: 13px solid rgba(191, 219, 254, .28);
    border-top-color: #38bdf8;
    border-right-color: #34d399;
    border-radius: 999px;
    background: rgba(15, 23, 42, .35);
}

.dashboard-health-ring span {
    color: #fff;
    font-size: 2.1rem;
    font-weight: 950;
    line-height: 1;
}

.dashboard-health-ring small {
    margin-top: .3rem;
    color: #bfdbfe;
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.dashboard-hero-actions {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 0;
}

.dashboard-action-pill {
    justify-content: flex-start;
    color: #fff;
    text-decoration: none;
    transition: transform var(--hrms-transition), background var(--hrms-transition);
}

.dashboard-action-pill:hover {
    color: #fff;
    background: rgba(255, 255, 255, .16);
    transform: translateY(-1px);
}

.dashboard-action-pill span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: .5rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .15);
    font-size: .66rem;
    font-weight: 950;
}

.dashboard-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .25rem;
}

.dashboard-section-heading h2 {
    margin: .22rem 0 0;
    color: #0f172a;
    font-size: clamp(1.15rem, 1vw + .8rem, 1.6rem);
    font-weight: 950;
    letter-spacing: -.035em;
}

.dashboard-section-heading p {
    max-width: 620px;
    margin: 0;
    color: #667085;
    font-size: .88rem;
}

.dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-kpi-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-kpi-grid-super {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dashboard-stat-card,
.dashboard-widget,
.dashboard-shortcut-card,
.dashboard-approval-card {
    border: 1px solid rgba(228, 231, 236, .88);
    background: #fff;
}

.dashboard-stat-card {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    min-height: 132px;
    padding: 1rem;
    border-radius: 20px;
    box-shadow: var(--hrms-shadow-sm);
    transition: transform var(--hrms-transition), box-shadow var(--hrms-transition), border-color var(--hrms-transition);
}

.dashboard-stat-card:hover,
.dashboard-shortcut-card:hover,
.dashboard-approval-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(16, 24, 40, .09);
}

.dashboard-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 16px;
    color: #1d4ed8;
    background: #eff6ff;
    font-size: .74rem;
    font-weight: 950;
}

.dashboard-stat-card p {
    margin: 0;
    color: #667085;
    font-size: .78rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dashboard-stat-card h3 {
    margin: .25rem 0 .18rem;
    color: #101828;
    font-size: clamp(1.55rem, 2vw, 2.1rem);
    font-weight: 950;
    letter-spacing: -.04em;
}

.dashboard-stat-card small {
    color: #667085;
    font-size: .78rem;
    font-weight: 650;
}

.dashboard-tone-success .dashboard-stat-icon,
.dashboard-tone-success.dashboard-approval-card strong {
    color: #047857;
    background: #ecfdf3;
}

.dashboard-tone-warning .dashboard-stat-icon,
.dashboard-tone-warning.dashboard-approval-card strong {
    color: #b45309;
    background: #fffbeb;
}

.dashboard-tone-danger .dashboard-stat-icon,
.dashboard-tone-danger.dashboard-approval-card strong {
    color: #b42318;
    background: #fef3f2;
}

.dashboard-tone-info .dashboard-stat-icon,
.dashboard-tone-info.dashboard-approval-card strong {
    color: #0369a1;
    background: #f0f9ff;
}

.dashboard-tone-muted .dashboard-stat-icon,
.dashboard-tone-muted.dashboard-approval-card strong {
    color: #475467;
    background: #f2f4f7;
}

.dashboard-grid {
    display: grid;
    gap: 1rem;
}

.dashboard-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.dashboard-widget {
    padding: 1rem;
    border-radius: 20px;
    box-shadow: var(--hrms-shadow-sm);
}

.dashboard-widget-large {
    grid-column: span 1;
}

.dashboard-widget-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dashboard-widget-header.compact {
    margin-bottom: .8rem;
}

.dashboard-widget-header h3 {
    margin: .15rem 0 0;
    color: #101828;
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: -.025em;
}

.dashboard-status-badge,
.dashboard-mini-link {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: .28rem .62rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 850;
    white-space: nowrap;
}

.dashboard-status-success {
    color: #067647;
    background: #ecfdf3;
}

.dashboard-status-warning {
    color: #b45309;
    background: #fffbeb;
}

.dashboard-status-info {
    color: #175cd3;
    background: #eff6ff;
}

.dashboard-status-dark {
    color: #344054;
    background: #f2f4f7;
}

.dashboard-mini-link {
    color: #1d4ed8;
    background: #eff6ff;
    text-decoration: none;
}

.dashboard-mini-link:hover {
    color: #1e40af;
}

.dashboard-widget canvas {
    width: 100%;
    max-width: 100%;
}

.dashboard-approval-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.dashboard-approval-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 68px;
    padding: .85rem;
    color: #344054;
    text-decoration: none;
    border-radius: 17px;
    transition: transform var(--hrms-transition), box-shadow var(--hrms-transition);
}

.dashboard-approval-card span {
    font-size: .82rem;
    font-weight: 850;
}

.dashboard-approval-card strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 38px;
    padding: 0 .55rem;
    border-radius: 14px;
    font-size: 1.05rem;
    font-weight: 950;
}

.dashboard-payroll-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.dashboard-payroll-summary div,
.dashboard-health-list div,
.dashboard-alert-line {
    padding: .8rem;
    border: 1px solid #e4e7ec;
    border-radius: 16px;
    background: #f8fafc;
}

.dashboard-payroll-summary small,
.dashboard-health-list span {
    display: block;
    color: #667085;
    font-size: .74rem;
    font-weight: 800;
}

.dashboard-payroll-summary strong,
.dashboard-health-list strong {
    display: block;
    margin-top: .25rem;
    color: #101828;
    font-size: .98rem;
    font-weight: 950;
}

.dashboard-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.dashboard-list-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 54px;
    padding: .72rem;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    background: #fcfcfd;
}

.dashboard-list-item strong,
.dashboard-list-item small {
    display: block;
}

.dashboard-list-item strong {
    color: #101828;
    font-size: .88rem;
    font-weight: 900;
}

.dashboard-list-item small {
    color: #667085;
    font-size: .75rem;
    margin-top: .08rem;
}

.dashboard-list-dot {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #2563eb;
    box-shadow: 0 0 0 5px #eff6ff;
}

.dashboard-list-avatar,
.dashboard-list-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 15px;
    color: #1d4ed8;
    background: #eff6ff;
    font-size: .82rem;
    font-weight: 950;
}

.dashboard-list-date {
    color: #047857;
    background: #ecfdf3;
    font-size: .72rem;
}

.dashboard-empty-state {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 116px;
    padding: 1rem;
    color: #667085;
    text-align: center;
    border: 1px dashed #d0d5dd;
    border-radius: 18px;
    background: #f8fafc;
}

.dashboard-empty-state strong {
    color: #344054;
    font-size: .92rem;
    font-weight: 950;
}

.dashboard-empty-state span {
    margin-top: .3rem;
    font-size: .78rem;
}

.dashboard-alert-stack {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.dashboard-alert-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.dashboard-alert-line span {
    color: #475467;
    font-size: .82rem;
    font-weight: 850;
}

.dashboard-alert-line strong {
    color: #b42318;
    font-size: 1rem;
    font-weight: 950;
}

.dashboard-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
}

.dashboard-shortcut-card {
    display: flex;
    flex-direction: column;
    min-height: 128px;
    padding: .95rem;
    color: #344054;
    text-decoration: none;
    border-radius: 18px;
    transition: transform var(--hrms-transition), box-shadow var(--hrms-transition);
}

.dashboard-shortcut-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: .75rem;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    border-radius: 15px;
    font-size: .75rem;
    font-weight: 950;
}

.dashboard-shortcut-card strong {
    color: #101828;
    font-size: .9rem;
    font-weight: 950;
}

.dashboard-shortcut-card small {
    margin-top: auto;
    color: #667085;
    font-size: .74rem;
    font-weight: 750;
}

.dashboard-health-list {
    display: grid;
    gap: .75rem;
}

@media (max-width: 1399.98px) {
    .dashboard-kpi-grid-super,
    .dashboard-kpi-grid-4,
    .dashboard-shortcut-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1199.98px) {
    .dashboard-hero,
    .dashboard-grid-3,
    .dashboard-grid-2 {
        grid-template-columns: 1fr;
    }

    .dashboard-hero-panel {
        align-items: stretch;
    }
}

@media (max-width: 991.98px) {
    .dashboard-kpi-grid,
    .dashboard-kpi-grid-super,
    .dashboard-kpi-grid-4,
    .dashboard-grid-4,
    .dashboard-shortcut-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-payroll-summary {
        grid-template-columns: 1fr;
    }

    .dashboard-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 767.98px) {
    .dashboard-hero {
        padding: 1.15rem;
        border-radius: 18px;
    }

    .dashboard-hero-panel {
        flex-direction: column;
    }

    .dashboard-health-ring {
        width: 132px;
        height: 132px;
    }

    .dashboard-kpi-grid,
    .dashboard-kpi-grid-super,
    .dashboard-kpi-grid-4,
    .dashboard-grid-4,
    .dashboard-shortcut-grid,
    .dashboard-approval-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-stat-card {
        min-height: auto;
    }

    .dashboard-widget {
        padding: .9rem;
    }
}

/* Phase UI-3: Employee module */
.employee-page-shell {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.employee-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.45rem;
    color: #fff;
    border-radius: 26px;
    background:
        radial-gradient(circle at 18% 10%, rgba(14, 165, 233, .42), transparent 28%),
        linear-gradient(135deg, #101828, #1d4ed8 58%, #0f766e);
    box-shadow: var(--hrms-shadow);
    overflow: hidden;
}

.employee-hero h1 {
    margin: .25rem 0 .35rem;
    font-size: clamp(1.45rem, 3vw, 2.3rem);
    font-weight: 950;
    letter-spacing: -.04em;
}

.employee-hero p {
    max-width: 820px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: .95rem;
    line-height: 1.6;
}

.employee-hero-actions,
.employee-row-actions,
.employee-filter-actions,
.employee-table-tools,
.employee-badge-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}

.employee-hero-btn {
    border-radius: 999px;
    font-weight: 850;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
}

.employee-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #2563eb;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.employee-hero .employee-eyebrow {
    color: #bfdbfe;
}

.employee-metric-grid,
.employee-profile-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
}

.employee-mini-stat {
    position: relative;
    min-height: 124px;
    padding: 1rem;
    border: 1px solid var(--hrms-border);
    border-radius: 22px;
    background: var(--hrms-surface);
    box-shadow: var(--hrms-shadow-sm);
    overflow: hidden;
}

.employee-mini-stat::after {
    content: "";
    position: absolute;
    inset: auto 1rem 1rem auto;
    width: 48px;
    height: 48px;
    border-radius: 18px;
    background: #eff6ff;
}

.employee-mini-stat span,
.employee-mini-stat small {
    display: block;
    color: var(--hrms-muted);
    font-size: .78rem;
    font-weight: 800;
}

.employee-mini-stat strong {
    display: block;
    margin: .45rem 0 .15rem;
    color: var(--hrms-text);
    font-size: 1.45rem;
    font-weight: 950;
    letter-spacing: -.035em;
}

.employee-mini-stat--success::after { background: #ecfdf3; }
.employee-mini-stat--muted::after { background: #f2f4f7; }
.employee-mini-stat--info::after { background: #e0f2fe; }

.employee-filter-card,
.employee-table-card,
.employee-section-card,
.employee-form-card,
.employee-profile-side-card,
.employee-form-progress-card,
.employee-lock-alert {
    border: 1px solid var(--hrms-border);
    border-radius: 24px;
    background: var(--hrms-surface);
    box-shadow: var(--hrms-shadow-sm);
}

.employee-filter-card {
    padding: 1.15rem;
}

.employee-filter-header,
.employee-table-toolbar,
.employee-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.employee-filter-header h2,
.employee-table-toolbar h2,
.employee-section-heading h2,
.employee-form-progress-card h2,
.employee-profile-side-card h2 {
    margin: 0;
    color: var(--hrms-text);
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: -.025em;
}

.employee-filter-header p,
.employee-table-toolbar p,
.employee-section-heading p,
.employee-form-progress-card p,
.employee-profile-side-card p {
    margin: .25rem 0 0;
    color: var(--hrms-muted);
    font-size: .84rem;
    line-height: 1.55;
}

.employee-search-field {
    position: relative;
}

.employee-search-field span {
    position: absolute;
    inset: 50% auto auto .9rem;
    transform: translateY(-50%);
    color: var(--hrms-muted);
    font-weight: 950;
}

.employee-search-field .form-control {
    padding-left: 2.25rem;
}

.employee-filter-chip-box {
    min-height: 58px;
    padding: .65rem .8rem;
    border: 1px dashed #bfdbfe;
    border-radius: 16px;
    background: #eff6ff;
}

.employee-filter-chip-box span,
.employee-filter-chip-box small {
    display: block;
}

.employee-filter-chip-box span {
    color: #1d4ed8;
    font-weight: 950;
}

.employee-filter-chip-box small {
    color: #475467;
    font-size: .74rem;
    font-weight: 750;
}

.employee-table-card {
    overflow: hidden;
}

.employee-table-toolbar {
    margin-bottom: 0;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--hrms-border);
    background: #fcfcfd;
}

.employee-table-wrap {
    max-height: 68vh;
    overscroll-behavior: contain;
}

.employee-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: .85rem 1rem;
    color: #475467;
    background: #f8fafc;
    border-bottom: 1px solid var(--hrms-border);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.employee-table tbody td {
    padding: .95rem 1rem;
    border-bottom: 1px solid #eef2f7;
    color: #344054;
    vertical-align: middle;
}

.employee-table tbody tr:hover {
    background: #f8fbff;
}

.employee-identity-cell,
.employee-profile-main {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.employee-identity-cell strong {
    display: block;
    color: var(--hrms-text);
    font-weight: 950;
}

.employee-identity-cell span {
    display: block;
    margin-top: .2rem;
    color: var(--hrms-muted);
    font-size: .8rem;
    font-weight: 750;
}

.employee-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #fff;
    border: 3px solid rgba(255, 255, 255, .68);
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    box-shadow: 0 12px 28px rgba(37, 99, 235, .24);
    font-weight: 950;
    letter-spacing: .02em;
}

.employee-avatar--sm {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    font-size: .82rem;
}

.employee-avatar--lg {
    width: 88px;
    height: 88px;
    border-radius: 26px;
    font-size: 1.35rem;
}

.employee-avatar--xl {
    width: 104px;
    height: 104px;
    border-radius: 30px;
    font-size: 1.55rem;
}

.employee-status-badge,
.employee-soft-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: .34rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
}

.employee-status-badge {
    color: #344054;
    background: #f2f4f7;
    border: 1px solid #e4e7ec;
}

.employee-status-badge--active,
.employee-status-badge--confirmed,
.employee-status-badge--regular {
    color: #027a48;
    background: #ecfdf3;
    border-color: #abefc6;
}

.employee-status-badge--inactive,
.employee-status-badge--suspended,
.employee-status-badge--terminated,
.employee-status-badge--resigned,
.employee-status-badge--separated {
    color: #b42318;
    background: #fef3f2;
    border-color: #fecdca;
}

.employee-status-badge--probation,
.employee-status-badge--pending {
    color: #b54708;
    background: #fffaeb;
    border-color: #fedf89;
}

.employee-soft-badge {
    color: #475467;
    background: #f8fafc;
    border: 1px solid #e4e7ec;
}

.employee-soft-badge--success {
    color: #027a48;
    background: #ecfdf3;
    border-color: #abefc6;
}

.employee-soft-badge--warning {
    color: #b54708;
    background: #fffaeb;
    border-color: #fedf89;
}

.employee-soft-badge--danger {
    color: #b42318;
    background: #fef3f2;
    border-color: #fecdca;
}

.employee-pagination-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-top: 1px solid var(--hrms-border);
    background: #fcfcfd;
}

.employee-pagination-summary {
    color: var(--hrms-muted);
    font-size: .82rem;
    font-weight: 800;
}

.employee-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 1.25rem;
    text-align: center;
    border: 1px dashed #d0d5dd;
    border-radius: 18px;
    background: #f8fafc;
}

.employee-empty-state--compact {
    min-height: 124px;
}

.employee-empty-state strong {
    color: #344054;
    font-weight: 950;
}

.employee-empty-state span {
    margin-top: .25rem;
    color: var(--hrms-muted);
    font-size: .82rem;
}

.employee-profile-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.35rem;
    color: #fff;
    border-radius: 28px;
    background:
        radial-gradient(circle at 15% 20%, rgba(14, 165, 233, .38), transparent 28%),
        linear-gradient(135deg, #0b1220, #1d4ed8 62%, #0f766e);
    box-shadow: var(--hrms-shadow);
}

.employee-profile-hero h1 {
    margin: .15rem 0 .3rem;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    font-weight: 950;
    letter-spacing: -.04em;
}

.employee-profile-subtitle {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, .78);
    font-weight: 800;
}

.employee-profile-subtitle code {
    color: #dbeafe;
    background: rgba(255, 255, 255, .12);
    border-radius: 999px;
    padding: .2rem .55rem;
}

.employee-profile-actions {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.employee-profile-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.employee-profile-side-card {
    position: sticky;
    top: 1rem;
    padding: 1.15rem;
}

.employee-profile-side-card h2 {
    margin-top: .85rem;
}

.employee-side-info-list {
    display: grid;
    gap: .65rem;
    margin-top: 1rem;
}

.employee-side-info-list div,
.employee-detail-grid div {
    padding: .85rem;
    border: 1px solid #eef2f7;
    border-radius: 16px;
    background: #fcfcfd;
}

.employee-side-info-list span,
.employee-detail-grid span {
    display: block;
    margin-bottom: .25rem;
    color: var(--hrms-muted);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.employee-side-info-list strong,
.employee-detail-grid strong {
    display: block;
    color: var(--hrms-text);
    font-size: .9rem;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.employee-profile-tabs {
    gap: .35rem;
    padding: .45rem;
    border: 1px solid var(--hrms-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--hrms-shadow-sm);
}

.employee-profile-tabs .nav-link {
    color: #475467;
    border: 0;
    border-radius: 14px;
    font-size: .82rem;
    font-weight: 900;
}

.employee-profile-tabs .nav-link.active {
    color: #fff;
    background: #2563eb;
}

.employee-tab-content {
    margin-top: 1rem;
}

.employee-section-card {
    padding: 1.1rem;
}

.employee-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}

.employee-detail-wide {
    grid-column: span 2;
}

.employee-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}

.employee-document-upload {
    display: grid;
    grid-template-columns: 1fr 1fr 160px 180px 1fr auto;
    gap: .75rem;
    align-items: end;
    padding: .9rem;
    border: 1px solid #e0f2fe;
    border-radius: 18px;
    background: #f0f9ff;
}

.employee-document-upload-action {
    display: flex;
    align-items: end;
}

.employee-lock-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 1.1rem;
    border-color: #fedf89;
    background: #fffaeb;
}

.employee-lock-alert strong,
.employee-lock-alert span {
    display: block;
}

.employee-lock-alert strong {
    color: #93370d;
    font-weight: 950;
}

.employee-lock-alert span {
    margin-top: .15rem;
    color: #b54708;
    font-size: .84rem;
    font-weight: 750;
}

.employee-form-shell {
    display: block;
}

.employee-form-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.employee-form-progress {
    position: sticky;
    top: 1rem;
}

.employee-form-progress-card {
    padding: 1rem;
}

.employee-form-progress-card nav {
    display: grid;
    gap: .45rem;
    margin-top: 1rem;
}

.employee-form-progress-card nav a {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: .55rem .75rem;
    color: #475467;
    text-decoration: none;
    border: 1px solid #eef2f7;
    border-radius: 13px;
    background: #fcfcfd;
    font-size: .82rem;
    font-weight: 850;
    transition: all var(--hrms-transition);
}

.employee-form-progress-card nav a:hover {
    color: #1d4ed8;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.employee-form-sections {
    display: grid;
    gap: 1rem;
}

.employee-form-card {
    scroll-margin-top: 1.25rem;
    padding: 1.1rem;
}

.employee-form-card .form-label {
    color: #344054;
    font-size: .78rem;
    font-weight: 900;
}

.employee-form-card .form-control,
.employee-form-card .form-select,
.employee-document-upload .form-control,
.employee-document-upload .form-select,
.employee-filter-card .form-control,
.employee-filter-card .form-select {
    min-height: 44px;
    border-color: #d0d5dd;
    border-radius: 13px;
    box-shadow: none;
}

.employee-form-card .form-control:focus,
.employee-form-card .form-select:focus,
.employee-document-upload .form-control:focus,
.employee-document-upload .form-select:focus,
.employee-filter-card .form-control:focus,
.employee-filter-card .form-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .12);
}

.employee-subpanel {
    padding: 1rem;
    border: 1px solid #e0f2fe;
    border-radius: 18px;
    background: #f0f9ff;
}

.employee-documents-on-create {
    overflow: hidden;
    border-color: rgba(37, 99, 235, .16);
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .1), transparent 28%),
        #fff;
}

.employee-document-create-note {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    background: #eff6ff;
}

.employee-document-create-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 15px;
    color: #1d4ed8;
    background: #dbeafe;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .04em;
}

.employee-document-create-note strong,
.employee-document-create-note span {
    display: block;
}

.employee-document-create-note strong {
    color: #1e293b;
    font-weight: 950;
}

.employee-document-create-note span {
    color: #475467;
    font-size: .84rem;
}

.employee-document-create-list {
    display: grid;
    gap: 1rem;
}

.employee-document-create-row {
    padding: 1rem;
    border: 1px solid #e4e7ec;
    border-radius: 20px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 14px 36px rgba(15, 23, 42, .06);
}

.employee-document-create-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
    padding-bottom: .75rem;
    border-bottom: 1px dashed #d0d5dd;
}

.employee-document-create-row-header strong,
.employee-document-create-row-header span {
    display: block;
}

.employee-document-create-row-header strong {
    color: #111827;
    font-weight: 950;
}

.employee-document-create-row-header span {
    color: #667085;
    font-size: .78rem;
    font-weight: 800;
}

.employee-document-alert-toggle {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 44px;
    padding: 0 .85rem;
    border: 1px solid #d0d5dd;
    border-radius: 13px;
    background: #fcfcfd;
    color: #344054;
    font-size: .82rem;
    font-weight: 900;
}

.employee-document-expiry-required .form-label::after {
    content: ' *';
    color: #dc2626;
}

.employee-add-document-btn {
    margin-top: 1rem;
    border-radius: 14px;
    font-weight: 900;
}

.employee-sticky-actions {
    position: sticky;
    bottom: 1rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 20px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 18px 50px rgba(16, 24, 40, .14);
    backdrop-filter: blur(16px);
}

.employee-sticky-actions strong,
.employee-sticky-actions span {
    display: block;
}

.employee-sticky-actions strong {
    color: var(--hrms-text);
    font-weight: 950;
}

.employee-sticky-actions span {
    color: var(--hrms-muted);
    font-size: .8rem;
    font-weight: 750;
}

.hrms-searchable-select {
    position: relative;
    width: 100%;
}

.hrms-searchable-select .hrms-select-native {
    position: absolute !important;
    inset: auto auto 0 0 !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.hrms-select-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .55rem;
    width: 100%;
    min-height: 42px;
    padding: .58rem .72rem;
    color: #1f2937;
    text-align: left;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: border-color var(--hrms-transition), box-shadow var(--hrms-transition), background var(--hrms-transition), transform var(--hrms-transition);
}

.hrms-select-toggle:hover {
    border-color: #9db7f5;
    background: #fcfdff;
}

.hrms-searchable-select.is-open .hrms-select-toggle,
.hrms-select-toggle:focus-visible {
    border-color: #2563eb;
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .14);
    outline: 0;
}

.hrms-searchable-select.is-invalid .hrms-select-toggle {
    border-color: #dc3545;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .12);
}

.hrms-searchable-select.is-disabled .hrms-select-toggle,
.hrms-select-toggle:disabled {
    color: #667085;
    background: #f2f4f7;
    cursor: not-allowed;
    opacity: 1;
}

.hrms-searchable-select.is-placeholder .hrms-select-toggle-label {
    color: #667085;
    font-weight: 650;
}

.hrms-select-toggle-label {
    min-width: 0;
    overflow: hidden;
    color: #101828;
    font-size: .92rem;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hrms-select-toggle-meta {
    min-width: 0;
    color: #667085;
    font-size: .72rem;
    font-weight: 850;
}

.hrms-select-toggle-meta:not(:empty)::after {
    content: ' items';
}

.hrms-select-toggle-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #475467;
    border-radius: 999px;
    background: #f2f4f7;
    font-size: .9rem;
    line-height: 1;
    transition: transform var(--hrms-transition), background var(--hrms-transition), color var(--hrms-transition);
}

.hrms-searchable-select.is-open .hrms-select-toggle-caret {
    color: #1d4ed8;
    background: #eff6ff;
    transform: rotate(180deg);
}

.hrms-select-panel {
    position: absolute;
    inset: calc(100% + .35rem) 0 auto 0;
    z-index: 1080;
    overflow: hidden;
    padding: .55rem;
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(208, 213, 221, .95);
    border-radius: 16px;
    box-shadow: 0 22px 60px rgba(16, 24, 40, .18);
    backdrop-filter: blur(14px);
}

.hrms-select-search-wrap {
    margin-bottom: .48rem;
}

.hrms-select-search {
    width: 100%;
    min-height: 38px;
    padding: .48rem .68rem;
    color: #101828;
    background: #f8fafc;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    font-size: .84rem;
    font-weight: 650;
    outline: 0;
    transition: border-color var(--hrms-transition), box-shadow var(--hrms-transition), background var(--hrms-transition);
}

.hrms-select-search::placeholder {
    color: #98a2b3;
}

.hrms-select-search:focus {
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 .18rem rgba(37, 99, 235, .12);
}

.hrms-select-options {
    max-height: 268px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .18rem;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.hrms-select-options::-webkit-scrollbar {
    width: 7px;
}

.hrms-select-options::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.hrms-select-option {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .12rem;
    width: 100%;
    min-height: 38px;
    padding: .52rem .6rem;
    color: #344054;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 12px;
    transition: background var(--hrms-transition), color var(--hrms-transition), transform var(--hrms-transition);
}

.hrms-select-option:hover,
.hrms-select-option.is-active {
    color: #1849a9;
    background: #eff6ff;
}

.hrms-select-option.is-selected {
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    box-shadow: 0 10px 24px rgba(37, 99, 235, .18);
}

.hrms-select-option.is-disabled,
.hrms-select-option:disabled {
    color: #98a2b3;
    background: transparent;
    cursor: not-allowed;
    opacity: .72;
}

.hrms-select-option-text {
    min-width: 0;
    overflow: hidden;
    font-size: .86rem;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hrms-select-option-group {
    color: inherit;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .04em;
    opacity: .68;
    text-transform: uppercase;
}

.hrms-select-empty {
    padding: .85rem .7rem;
    color: #667085;
    text-align: center;
    background: #f8fafc;
    border-radius: 12px;
    font-size: .84rem;
    font-weight: 750;
}

.input-group > .hrms-searchable-select {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group > .hrms-searchable-select .hrms-select-toggle {
    border-radius: inherit;
}

@media (max-width: 767.98px) {
    .hrms-select-panel {
        position: fixed;
        inset: auto .85rem calc(.85rem + env(safe-area-inset-bottom)) .85rem;
        max-height: min(72vh, 520px);
        border-radius: 22px;
    }

    .hrms-select-options {
        max-height: min(55vh, 420px);
    }
}

@media (max-width: 1199.98px) {
    .employee-metric-grid,
    .employee-profile-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .employee-profile-layout,
    .employee-form-grid {
        grid-template-columns: 1fr;
    }

    .employee-profile-side-card,
    .employee-form-progress {
        position: static;
    }

    .employee-form-progress-card nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .employee-document-upload {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .employee-hero,
    .employee-profile-hero,
    .employee-filter-header,
    .employee-table-toolbar,
    .employee-section-heading,
    .employee-pagination-row,
    .employee-sticky-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .employee-detail-grid,
    .employee-placeholder-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .employee-detail-wide {
        grid-column: span 1;
    }
}

@media (max-width: 767.98px) {
    .employee-hero,
    .employee-profile-hero {
        padding: 1rem;
        border-radius: 20px;
    }

    .employee-profile-main {
        align-items: flex-start;
        flex-direction: column;
    }

    .employee-avatar--xl {
        width: 82px;
        height: 82px;
        border-radius: 24px;
    }

    .employee-metric-grid,
    .employee-profile-kpis,
    .employee-detail-grid,
    .employee-placeholder-grid,
    .employee-document-upload,
    .employee-form-progress-card nav {
        grid-template-columns: 1fr;
    }

    .employee-table-wrap {
        max-height: none;
    }

    .employee-row-actions,
    .employee-filter-actions,
    .employee-profile-actions,
    .employee-sticky-actions > div:last-child {
        width: 100%;
    }

    .employee-row-actions .btn,
    .employee-filter-actions .btn,
    .employee-profile-actions .btn,
    .employee-sticky-actions .btn {
        flex: 1 1 auto;
    }
}

/* Phase UI-4: Attendance + Leave module */
.attendance-page-shell,
.leave-page-shell {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.attendance-hero,
.leave-hero,
.attendance-detail-hero,
.leave-detail-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.45rem;
    color: #fff;
    border-radius: 26px;
    background:
        radial-gradient(circle at 16% 12%, rgba(14, 165, 233, .42), transparent 30%),
        linear-gradient(135deg, #101828, #1d4ed8 58%, #0f766e);
    box-shadow: var(--hrms-shadow);
    overflow: hidden;
}

.leave-hero,
.leave-detail-hero {
    background:
        radial-gradient(circle at 16% 12%, rgba(52, 211, 153, .38), transparent 30%),
        linear-gradient(135deg, #101828, #047857 54%, #2563eb);
}

.attendance-hero-compact,
.leave-hero-compact {
    align-items: flex-start;
}

.attendance-hero h1,
.leave-hero h1,
.attendance-detail-hero h1,
.leave-detail-hero h1 {
    margin: .25rem 0 .35rem;
    font-size: clamp(1.45rem, 3vw, 2.3rem);
    font-weight: 950;
    letter-spacing: -.04em;
}

.attendance-hero p,
.leave-hero p,
.attendance-detail-hero p,
.leave-detail-hero p {
    max-width: 820px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: .95rem;
    line-height: 1.6;
}

.attendance-eyebrow,
.leave-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #2563eb;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.attendance-hero .attendance-eyebrow,
.attendance-detail-hero .attendance-eyebrow,
.leave-hero .leave-eyebrow,
.leave-detail-hero .leave-eyebrow {
    color: #bfdbfe;
}

.attendance-hero-actions,
.leave-hero-actions,
.attendance-filter-actions,
.leave-filter-actions,
.attendance-table-tools,
.attendance-chip-row,
.leave-chip-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}

.attendance-hero-btn,
.leave-hero-btn {
    border-radius: 999px;
    font-weight: 850;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
}

.attendance-stat-grid,
.leave-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
}

.attendance-stat-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.attendance-stat-grid-4,
.leave-stat-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.attendance-mini-stat,
.leave-mini-stat {
    position: relative;
    min-height: 124px;
    padding: 1rem;
    border: 1px solid var(--hrms-border);
    border-radius: 22px;
    background: var(--hrms-surface);
    box-shadow: var(--hrms-shadow-sm);
    overflow: hidden;
}

.attendance-mini-stat::after,
.leave-mini-stat::after {
    content: "";
    position: absolute;
    inset: auto 1rem 1rem auto;
    width: 48px;
    height: 48px;
    border-radius: 18px;
    background: #eff6ff;
}

.attendance-mini-stat span,
.attendance-mini-stat small,
.leave-mini-stat span,
.leave-mini-stat small {
    display: block;
    color: var(--hrms-muted);
    font-size: .78rem;
    font-weight: 800;
}

.attendance-mini-stat strong,
.leave-mini-stat strong {
    display: block;
    margin: .45rem 0 .15rem;
    color: var(--hrms-text);
    font-size: 1.45rem;
    font-weight: 950;
    letter-spacing: -.035em;
}

.attendance-mini-stat--success::after,
.leave-mini-stat--success::after { background: #ecfdf3; }
.attendance-mini-stat--warning::after,
.leave-mini-stat--warning::after { background: #fffaeb; }
.attendance-mini-stat--danger::after,
.leave-mini-stat--danger::after { background: #fef3f2; }
.attendance-mini-stat--info::after,
.leave-mini-stat--info::after { background: #e0f2fe; }

.attendance-filter-card,
.attendance-table-card,
.attendance-panel-card,
.leave-filter-card,
.leave-table-card,
.leave-panel-card {
    border: 1px solid var(--hrms-border);
    border-radius: 24px;
    background: var(--hrms-surface);
    box-shadow: var(--hrms-shadow-sm);
}

.attendance-filter-card,
.attendance-panel-card,
.leave-filter-card,
.leave-panel-card {
    padding: 1.15rem;
}

.attendance-table-card,
.leave-table-card {
    overflow: hidden;
}

.attendance-card-heading,
.leave-card-heading,
.attendance-table-toolbar,
.leave-table-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.attendance-card-heading.compact,
.leave-card-heading.compact {
    margin-bottom: .85rem;
}

.attendance-table-toolbar,
.leave-table-toolbar {
    margin-bottom: 0;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--hrms-border);
}

.attendance-card-heading h2,
.attendance-table-toolbar h2,
.leave-card-heading h2,
.leave-table-toolbar h2,
.attendance-profile-head h2 {
    margin: 0;
    color: var(--hrms-text);
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: -.025em;
}

.attendance-card-heading p,
.attendance-table-toolbar p,
.leave-card-heading p,
.leave-table-toolbar p,
.attendance-profile-head p {
    margin: .25rem 0 0;
    color: var(--hrms-muted);
    font-size: .84rem;
    line-height: 1.55;
}

.attendance-table thead th,
.leave-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: #475467;
    background: #f8fafc;
    border-bottom: 1px solid var(--hrms-border);
    font-size: .74rem;
    font-weight: 950;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.attendance-table tbody tr,
.leave-table tbody tr {
    vertical-align: middle;
}

.attendance-table tbody tr:hover,
.leave-table tbody tr:hover {
    background: #f8fafc;
}

.attendance-person,
.leave-person,
.attendance-profile-head {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.attendance-avatar,
.leave-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    font-weight: 950;
}

.leave-avatar {
    color: #047857;
    background: #ecfdf3;
    border-color: #d1fae5;
}

.attendance-avatar-lg,
.attendance-avatar-xl {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .24);
}

.attendance-avatar-lg { width: 58px; height: 58px; border-radius: 20px; font-size: 1.25rem; }
.attendance-avatar-xl { width: 70px; height: 70px; border-radius: 24px; font-size: 1.45rem; }

.attendance-date-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 58px;
    padding: .45rem;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    background: #eff6ff;
}

.attendance-date-pill strong {
    color: #1d4ed8;
    font-size: 1.15rem;
    font-weight: 950;
    line-height: 1;
}

.attendance-date-pill span {
    margin-top: .2rem;
    color: #475467;
    font-size: .7rem;
    font-weight: 800;
}

.attendance-badge,
.leave-badge,
.attendance-soft-chip,
.leave-soft-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: .28rem .62rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .74rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.attendance-badge-success,
.leave-badge-success {
    color: #027a48;
    background: #ecfdf3;
    border-color: #abefc6;
}

.attendance-badge-warning,
.leave-badge-warning {
    color: #b54708;
    background: #fffaeb;
    border-color: #fedf89;
}

.attendance-badge-danger,
.leave-badge-danger {
    color: #b42318;
    background: #fef3f2;
    border-color: #fecdca;
}

.attendance-badge-muted,
.leave-badge-muted,
.attendance-soft-chip,
.leave-soft-chip {
    color: #475467;
    background: #f8fafc;
    border-color: #e5e7eb;
}

.attendance-soft-chip strong,
.leave-soft-chip strong {
    margin-right: .25rem;
    color: var(--hrms-text);
}

.attendance-empty-state,
.leave-empty-state {
    display: grid;
    place-items: center;
    min-height: 150px;
    padding: 1.5rem;
    text-align: center;
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    background: #f8fafc;
}

.attendance-empty-state strong,
.leave-empty-state strong {
    display: block;
    color: var(--hrms-text);
    font-size: 1rem;
    font-weight: 950;
}

.attendance-empty-state span,
.leave-empty-state span {
    display: block;
    margin-top: .35rem;
    color: var(--hrms-muted);
    font-size: .86rem;
}

.attendance-empty-state-success {
    border-color: #abefc6;
    background: #ecfdf3;
}

.attendance-pagination,
.leave-pagination {
    display: flex;
    justify-content: flex-end;
}

.attendance-clock-card {
    min-width: 190px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 22px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(12px);
}

.attendance-clock-card span,
.attendance-clock-card small {
    display: block;
    color: rgba(255, 255, 255, .72);
    font-size: .78rem;
    font-weight: 800;
}

.attendance-clock-card strong {
    display: block;
    margin: .25rem 0;
    color: #fff;
    font-size: 1.65rem;
    font-weight: 950;
    letter-spacing: -.03em;
}

.attendance-status-grid,
.attendance-info-grid,
.leave-info-grid,
.attendance-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.attendance-info-grid,
.leave-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.attendance-status-grid > div,
.attendance-info-grid > div,
.leave-info-grid > div,
.attendance-compare-grid > div,
.leave-preview-card > div,
.attendance-verification-list > div,
.leave-verification-list > div {
    min-height: 76px;
    padding: .85rem;
    border: 1px solid var(--hrms-border);
    border-radius: 18px;
    background: #f8fafc;
}

.attendance-status-grid span,
.attendance-info-grid span,
.leave-info-grid span,
.attendance-compare-grid span,
.leave-preview-card span,
.attendance-verification-list span,
.leave-verification-list span,
.attendance-note-grid span,
.leave-note-grid span {
    display: block;
    color: var(--hrms-muted);
    font-size: .75rem;
    font-weight: 850;
}

.attendance-status-grid strong,
.attendance-info-grid strong,
.leave-info-grid strong,
.attendance-compare-grid strong,
.leave-preview-card strong,
.attendance-verification-list strong,
.leave-verification-list strong {
    display: block;
    margin-top: .35rem;
    color: var(--hrms-text);
    font-weight: 950;
}

.attendance-info-note,
.leave-info-note {
    padding: .85rem;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    font-size: .85rem;
    font-weight: 750;
}

.attendance-readiness-stack,
.attendance-alert-stack,
.attendance-verification-list,
.leave-verification-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.attendance-readiness-item {
    padding: .75rem .85rem;
    color: #475467;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    font-size: .88rem;
    font-weight: 750;
}

.attendance-readiness-item.is-success,
.verification-status.is-success { color: #027a48; background: #ecfdf3; border-color: #abefc6; }
.attendance-readiness-item.is-warning,
.verification-status.is-warning { color: #b54708; background: #fffaeb; border-color: #fedf89; }
.attendance-readiness-item.is-danger,
.verification-status.is-danger { color: #b42318; background: #fef3f2; border-color: #fecdca; }

.attendance-card-help,
.leave-card-help {
    color: var(--hrms-muted);
    font-size: .82rem;
    line-height: 1.55;
}

.attendance-verification-box {
    padding: 1rem;
    border: 1px solid var(--hrms-border);
    border-radius: 20px;
    background: #f8fafc;
}

.selfie-preview-box {
    min-height: 210px;
    border: 1px dashed #cbd5e1;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    background: #fff;
    overflow: hidden;
}

.selfie-preview-box img {
    width: 100%;
    height: 100%;
    max-height: 320px;
    object-fit: cover;
    display: none;
}

.qr-video-wrap {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    background: #101828;
    min-height: 240px;
    display: grid;
    place-items: center;
}

.qr-video-wrap video {
    width: 100%;
    max-height: 360px;
    display: none;
}

.qr-scan-frame {
    position: absolute;
    width: 64%;
    max-width: 260px;
    aspect-ratio: 1 / 1;
    border: 3px solid rgba(255,255,255,.9);
    border-radius: 1rem;
    box-shadow: 0 0 0 999px rgba(0,0,0,.25);
    display: none;
}

.qr-placeholder {
    color: #fff;
    text-align: center;
    padding: 1rem;
}

.attendance-primary-action {
    min-width: 150px;
}

.attendance-action-bar,
.attendance-sticky-actions,
.leave-sticky-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--hrms-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--hrms-shadow-sm);
}

.attendance-sticky-side,
.leave-sticky-side {
    position: sticky;
    top: calc(var(--hrms-topbar-height) + 1rem);
}

.attendance-timeline,
.leave-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.attendance-timeline-item,
.leave-timeline-item {
    position: relative;
    padding: .75rem .85rem .75rem 2.35rem;
    border: 1px solid var(--hrms-border);
    border-radius: 16px;
    background: #f8fafc;
}

.attendance-timeline-item::before,
.leave-timeline-item::before {
    content: "";
    position: absolute;
    left: .85rem;
    top: 1rem;
    width: 11px;
    height: 11px;
    border: 2px solid #98a2b3;
    border-radius: 999px;
    background: #fff;
}

.attendance-timeline-item.is-active,
.leave-timeline-item.is-active {
    border-color: #fedf89;
    background: #fffaeb;
}

.attendance-timeline-item.is-active::before,
.leave-timeline-item.is-active::before {
    border-color: #f79009;
    background: #f79009;
}

.attendance-timeline-item.is-done,
.leave-timeline-item.is-done {
    border-color: #abefc6;
    background: #ecfdf3;
}

.attendance-timeline-item.is-done::before,
.leave-timeline-item.is-done::before {
    border-color: #12b76a;
    background: #12b76a;
}

.attendance-timeline-item strong,
.leave-timeline-item strong {
    display: block;
    color: var(--hrms-text);
    font-size: .9rem;
    font-weight: 950;
}

.attendance-timeline-item span,
.leave-timeline-item span {
    display: block;
    margin-top: .2rem;
    color: var(--hrms-muted);
    font-size: .78rem;
    font-weight: 750;
}

.attendance-note-grid,
.leave-note-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.attendance-note-grid > div,
.leave-note-grid > div {
    padding: .9rem;
    border: 1px solid var(--hrms-border);
    border-radius: 18px;
    background: #fff;
}

.attendance-note-grid p,
.leave-note-grid p {
    margin: .35rem 0 0;
    color: #344054;
    line-height: 1.55;
}

.attendance-alert-card {
    padding: .9rem;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #f8fafc;
}

.attendance-alert-card.is-danger {
    border-color: #fecdca;
    background: #fef3f2;
}

.attendance-alert-card.is-success {
    border-color: #abefc6;
    background: #ecfdf3;
}

.attendance-alert-card small {
    display: block;
    margin-top: .25rem;
    color: var(--hrms-muted);
    font-weight: 750;
}

.attendance-alert-card p {
    margin: .5rem 0 0;
    color: #344054;
    font-size: .86rem;
    line-height: 1.5;
}

.attendance-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

.attendance-review-box,
.leave-review-box {
    padding: 1rem;
    border: 1px solid var(--hrms-border);
    border-radius: 20px;
    background: #f8fafc;
}

.attendance-review-box h3,
.leave-review-box h3 {
    margin: 0 0 .35rem;
    color: var(--hrms-text);
    font-size: .98rem;
    font-weight: 950;
}

.attendance-review-box p,
.leave-review-box p {
    margin: 0 0 .85rem;
    color: var(--hrms-muted);
    font-size: .82rem;
    line-height: 1.5;
}

.attendance-review-box.is-success,
.leave-review-box.is-success { border-color: #abefc6; background: #ecfdf3; }
.attendance-review-box.is-danger,
.leave-review-box.is-danger { border-color: #fecdca; background: #fef3f2; }
.leave-review-box.is-warning { border-color: #fedf89; background: #fffaeb; }

.leave-review-stack {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.leave-preview-card {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.leave-info-note {
    color: #047857;
    background: #ecfdf3;
    border-color: #d1fae5;
}

.leave-detail-hero {
    align-items: flex-start;
}

.leave-form-grid .form-label,
.attendance-form-grid .form-label {
    font-weight: 850;
    color: #344054;
}

@media (max-width: 1199.98px) {
    .attendance-stat-grid-5,
    .attendance-info-grid,
    .leave-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .attendance-hero,
    .leave-hero,
    .attendance-detail-hero,
    .leave-detail-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 1.15rem;
        border-radius: 18px;
    }

    .attendance-stat-grid,
    .leave-stat-grid,
    .attendance-stat-grid-5,
    .attendance-stat-grid-4,
    .leave-stat-grid-4,
    .attendance-status-grid,
    .attendance-info-grid,
    .leave-info-grid,
    .attendance-compare-grid,
    .attendance-note-grid,
    .leave-note-grid,
    .attendance-review-grid {
        grid-template-columns: 1fr;
    }

    .attendance-card-heading,
    .leave-card-heading,
    .attendance-table-toolbar,
    .leave-table-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .attendance-action-bar {
        position: sticky;
        bottom: calc(74px + env(safe-area-inset-bottom));
        z-index: 1020;
        backdrop-filter: blur(12px);
    }

    .attendance-sticky-actions,
    .leave-sticky-actions {
        position: sticky;
        bottom: calc(74px + env(safe-area-inset-bottom));
        z-index: 1020;
        flex-direction: column-reverse;
        align-items: stretch;
        backdrop-filter: blur(12px);
    }

    .attendance-sticky-side,
    .leave-sticky-side {
        position: static;
    }

    .attendance-hero-actions,
    .leave-hero-actions,
    .attendance-filter-actions,
    .leave-filter-actions {
        width: 100%;
    }

    .attendance-hero-actions .btn,
    .leave-hero-actions .btn,
    .attendance-filter-actions .btn,
    .leave-filter-actions .btn {
        flex: 1 1 auto;
    }
}


/* Phase UI-9: Mobile / PWA polish */
.mobile-pwa-panel,
.payslip-hero-card,
.payslip-filter-card,
.payslip-mobile-card,
.payslip-mini-stat {
    border: 1px solid var(--hrms-border);
    background: var(--hrms-surface);
    box-shadow: var(--hrms-shadow-sm);
}

.mobile-pwa-panel {
    display: grid;
    gap: .9rem;
    padding: 1rem;
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .12), transparent 34%),
        #fff;
}

.mobile-pwa-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.mobile-pwa-panel-head strong,
.payslip-mobile-card-head strong {
    display: block;
    color: var(--hrms-ink);
    font-size: 1.02rem;
    font-weight: 950;
}

.mobile-pwa-panel-head small,
.mobile-pwa-help,
.payslip-mobile-card-head small,
.payslip-person-row small {
    display: block;
    color: var(--hrms-muted);
    font-size: .78rem;
    font-weight: 700;
}

.mobile-pwa-kicker,
.payslip-kicker {
    display: inline-flex;
    color: #2563eb;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.mobile-pwa-status {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .3rem .65rem;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
}

.mobile-pwa-status.is-installed {
    color: #047857;
    background: #ecfdf3;
    border-color: #bbf7d0;
}

.mobile-pwa-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.mobile-pwa-actions .btn {
    min-height: 44px;
    border-radius: 16px;
}

.mobile-pwa-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: .7rem .8rem;
    border-radius: 18px;
    background: #f8fafc;
}

.js-pwa-network-state.is-offline {
    color: #b42318;
}

.hrms-is-offline .mobile-bottom-nav {
    border-top-color: #fecaca;
}

.hrms-is-standalone .mobile-bottom-nav {
    box-shadow: 0 -10px 30px rgba(37, 99, 235, .16);
}

.mobile-bottom-nav a.is-touching,
.payslip-mobile-card.is-touching,
.approval-card.is-touching,
.mobile-pwa-panel.is-touching {
    transform: scale(.985);
}

.mobile-approval-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mobile-approval-pwa-panel {
    margin-top: -.25rem;
}

.payslip-mobile-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.payslip-hero-card {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem;
    color: #fff;
    border: 0;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, .35), transparent 32%),
        linear-gradient(135deg, #101828, #1d4ed8 60%, #047857);
    box-shadow: var(--hrms-shadow);
}

.payslip-hero-card h1 {
    margin: .25rem 0 .35rem;
    font-size: clamp(1.6rem, 4vw, 2.35rem);
    font-weight: 950;
    letter-spacing: -.05em;
}

.payslip-hero-card p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
}

.payslip-hero-card .payslip-kicker {
    color: #bfdbfe;
}

.payslip-hero-stat {
    min-width: 220px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 22px;
    background: rgba(255, 255, 255, .13);
    backdrop-filter: blur(14px);
}

.payslip-hero-stat span,
.payslip-hero-stat small {
    display: block;
    color: rgba(255, 255, 255, .78);
    font-size: .78rem;
    font-weight: 800;
}

.payslip-hero-stat strong {
    display: block;
    margin: .3rem 0;
    font-size: 1.5rem;
    font-weight: 950;
}

.payslip-filter-card {
    padding: 1.15rem;
    border-radius: 24px;
}

.payslip-filter-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.payslip-filter-head h2 {
    margin: .1rem 0 .2rem;
    font-size: 1.08rem;
    font-weight: 950;
}

.payslip-filter-head p {
    margin: 0;
    color: var(--hrms-muted);
    font-size: .86rem;
}

.payslip-soft-chip,
.payslip-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .3rem .7rem;
    border-radius: 999px;
    color: #344054;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    font-size: .76rem;
    font-weight: 900;
}

.payslip-status-pill {
    color: #047857;
    background: #ecfdf3;
    border-color: #bbf7d0;
}

.payslip-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}

.payslip-mini-stat {
    padding: 1rem;
    border-radius: 22px;
}

.payslip-mini-stat span,
.payslip-mini-stat small {
    display: block;
    color: var(--hrms-muted);
    font-size: .78rem;
    font-weight: 800;
}

.payslip-mini-stat strong {
    display: block;
    margin: .3rem 0;
    color: var(--hrms-ink);
    font-size: 1.35rem;
    font-weight: 950;
}

.payslip-mini-stat-success {
    background: linear-gradient(135deg, #ecfdf3, #fff);
}

.payslip-card-list {
    display: grid;
    gap: .85rem;
}

.payslip-mobile-card {
    padding: 1rem;
    border-radius: 24px;
}

.payslip-mobile-card-head,
.payslip-person-row,
.payslip-mobile-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .85rem;
}

.payslip-person-row {
    justify-content: flex-start;
    margin: .9rem 0;
    padding: .85rem;
    border-radius: 18px;
    background: #f8fafc;
}

.payslip-avatar {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    font-weight: 950;
}

.payslip-mobile-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
    margin-bottom: .9rem;
}

.payslip-mobile-values div {
    padding: .75rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #eef2f7;
}

.payslip-mobile-values span,
.payslip-mobile-values strong {
    display: block;
}

.payslip-mobile-values span {
    color: var(--hrms-muted);
    font-size: .72rem;
    font-weight: 800;
}

.payslip-mobile-values strong {
    color: var(--hrms-ink);
    font-size: .86rem;
    font-weight: 950;
}

.payslip-mobile-actions .btn {
    flex: 1;
    min-height: 44px;
}

.payslip-empty-state {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 1.25rem;
    color: var(--hrms-muted);
    text-align: center;
    border: 1px dashed #cbd5e1;
    border-radius: 24px;
    background: #fff;
}

.payslip-empty-state strong,
.payslip-empty-state span {
    display: block;
}

.payslip-empty-state strong {
    color: var(--hrms-ink);
    font-size: 1.05rem;
}

@media (max-width: 767.98px) {
    body {
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
    }

    .mobile-bottom-nav {
        grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
        padding: .5rem .55rem calc(.5rem + env(safe-area-inset-bottom));
    }

    .mobile-bottom-nav a {
        min-height: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: .66rem;
    }

    .mobile-bottom-nav .nav-icon {
        width: 26px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: .12rem;
        border-radius: 999px;
        background: #f2f4f7;
    }

    .mobile-bottom-nav a.active .nav-icon {
        color: #fff;
        background: #2563eb;
    }

    .hrms-content {
        padding-bottom: 1.4rem;
    }

    .attendance-hero,
    .leave-hero,
    .attendance-detail-hero,
    .leave-detail-hero,
    .payslip-hero-card {
        border-radius: 24px;
        padding: 1.15rem;
    }

    .attendance-hero,
    .leave-hero,
    .payslip-hero-card {
        flex-direction: column;
    }

    .attendance-clock-card,
    .payslip-hero-stat {
        width: 100%;
        min-width: 0;
    }

    .attendance-panel-card,
    .leave-panel-card,
    .leave-filter-card,
    .leave-table-card,
    .approval-card,
    .payslip-filter-card,
    .payslip-mobile-card {
        border-radius: 22px;
    }

    .attendance-action-bar,
    .leave-sticky-actions,
    .payslip-mobile-actions {
        position: sticky;
        bottom: calc(72px + env(safe-area-inset-bottom));
        z-index: 1015;
        padding: .7rem;
        margin-inline: -.7rem;
        border: 1px solid #e5e7eb;
        border-radius: 20px;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 14px 34px rgba(16, 24, 40, .14);
        backdrop-filter: blur(14px);
    }

    .attendance-action-bar .btn,
    .leave-sticky-actions .btn {
        flex: 1 1 140px;
    }

    .leave-filter-card form > [class*="col-"],
    .payslip-filter-card form > [class*="col-"] {
        width: 100%;
    }

    .payslip-stat-grid,
    .payslip-mobile-values {
        grid-template-columns: 1fr;
    }

    .payslip-filter-head,
    .payslip-mobile-card-head {
        flex-direction: column;
    }

    .approval-sticky-filter {
        top: 64px;
        margin-inline: -1rem;
        padding: .55rem 1rem .15rem;
        border-bottom: 1px solid #e5e7eb;
        background: rgba(246, 248, 251, .96);
        backdrop-filter: blur(14px);
    }

    .approval-pill {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    .approval-action-box {
        border-radius: 18px;
        background: #f8fafc;
    }

    .approval-action-box .btn {
        min-height: 44px;
    }

    .pwa-connection-banner {
        top: .55rem;
        max-width: calc(100vw - 1.5rem);
        border-radius: 18px;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .mobile-pwa-actions {
        grid-template-columns: 1fr;
    }

    .mobile-pwa-help {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Phase UI-8 Correction: simple login + clean app launcher */
.simple-login-page {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: #eef4ff;
}

.simple-login-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(37, 99, 235, .16), transparent 34%),
        radial-gradient(circle at 88% 12%, rgba(16, 185, 129, .14), transparent 28%),
        linear-gradient(135deg, #f8fbff 0%, #eef4ff 52%, #f8fafc 100%);
}

.simple-login-card {
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(16, 24, 40, .14);
}

.simple-login-brand {
    min-height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 3.25rem;
    color: #fff;
    background:
        linear-gradient(150deg, rgba(15, 23, 42, .96), rgba(30, 64, 175, .92)),
        url('../brand/login-bg.svg') center/cover no-repeat;
}

.simple-login-chip {
    display: inline-flex;
    align-items: center;
    padding: .45rem .75rem;
    margin-bottom: 1.25rem;
    color: #bfdbfe;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.simple-login-brand h1 {
    max-width: 520px;
    margin: 0 0 1rem;
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1.05;
    font-weight: 900;
}

.simple-login-brand p {
    max-width: 480px;
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 1.02rem;
    line-height: 1.7;
}

.simple-login-feature-list {
    display: grid;
    gap: .8rem;
}

.simple-login-feature-list div {
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
}

.simple-login-feature-list strong,
.simple-login-feature-list span {
    display: block;
}

.simple-login-feature-list strong {
    margin-bottom: .2rem;
    color: #fff;
}

.simple-login-feature-list span {
    color: rgba(255, 255, 255, .72);
    font-size: .88rem;
}

.simple-login-form-wrap {
    min-height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3.25rem);
    background: #fff;
}

.simple-login-logo {
    width: 76px;
    height: 76px;
    object-fit: contain;
    padding: .65rem;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 24, 40, .08);
}

.simple-login-title {
    margin: 1rem 0 .25rem;
    color: #101828;
    font-size: 1.45rem;
    font-weight: 900;
}

.simple-login-subtitle {
    color: #667085;
}

.simple-login-form-wrap .form-control-lg {
    min-height: 52px;
    border-radius: 14px;
}

.clean-launcher-page {
    max-width: 1180px;
    margin: 0 auto;
}

.clean-launcher-hero {
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border-radius: 26px;
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, .13), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 44px rgba(16, 24, 40, .08);
}

.clean-launcher-badge,
.clean-service-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: .4rem .7rem;
    border-radius: 999px;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.clean-launcher-hero h1 {
    margin: .85rem 0 .45rem;
    color: #101828;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    font-weight: 950;
}

.clean-launcher-hero p {
    max-width: 760px;
    color: #667085;
}

.clean-launcher-company {
    min-width: min(100%, 240px);
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
}

.clean-launcher-company span,
.clean-launcher-company strong,
.clean-launcher-stat span,
.clean-launcher-stat strong,
.clean-launcher-stat small {
    display: block;
}

.clean-launcher-company span,
.clean-launcher-stat span,
.clean-launcher-stat small {
    color: #667085;
}

.clean-launcher-company span,
.clean-launcher-stat span {
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.clean-launcher-company strong {
    color: #101828;
    font-size: 1rem;
}

.clean-launcher-stat {
    padding: 1.15rem;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(16, 24, 40, .07);
}

.clean-launcher-stat strong {
    margin: .25rem 0;
    color: #101828;
    font-size: 1.65rem;
    font-weight: 950;
}

.clean-service-card {
    padding: 1.35rem;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .08);
    transition: transform .18s ease, box-shadow .18s ease;
}

.clean-service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 56px rgba(16, 24, 40, .12);
}

.clean-service-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.clean-service-card h2 {
    margin: .85rem 0 .45rem;
    color: #101828;
    font-size: 1.25rem;
    font-weight: 950;
}

.clean-service-card p {
    min-height: 48px;
    margin: 0 0 1rem;
    color: #667085;
    line-height: 1.6;
}

.clean-service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: 1.15rem;
}

.clean-service-tags span {
    padding: .4rem .65rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    color: #344054;
    background: #f8fafc;
    font-size: .78rem;
    font-weight: 700;
}

.clean-service-actions {
    display: flex;
    gap: .55rem;
    margin-top: auto;
}

.clean-launcher-empty {
    padding: 2rem;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .08);
}

.clean-empty-icon {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: #1d4ed8;
    background: #eff6ff;
    border-radius: 20px;
    font-size: 1.6rem;
}

@media (max-width: 767.98px) {
    .simple-login-card,
    .clean-launcher-hero,
    .clean-service-card,
    .clean-launcher-stat,
    .clean-launcher-empty {
        border-radius: 22px;
    }

    .simple-login-form-wrap {
        min-height: auto;
        padding: 1.35rem;
    }

    .clean-service-actions {
        flex-direction: column;
    }
}

/* Phase UI-10: HRMS approval + payroll/finance frontend polish
   Frontend-only styling for Outdoor Duty, Offers, Exit, Payroll and Finance pages. */
:root {
    --hrms-ink: #0f172a;
    --hrms-panel: #ffffff;
    --hrms-soft: #f8fafc;
    --hrms-line: #e2e8f0;
    --hrms-blue: #2563eb;
    --hrms-sky: #0ea5e9;
    --hrms-green: #059669;
    --hrms-amber: #d97706;
    --hrms-red: #dc2626;
    --hrms-violet: #7c3aed;
}

.approval-workspace,
.payroll-workspace {
    display: grid;
    gap: 1rem;
}

.approval-hero,
.payroll-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.25rem;
    padding: clamp(1.2rem, 2vw, 2rem);
    color: #fff;
    border: 0;
    border-radius: 28px;
    background:
        radial-gradient(circle at 86% 12%, rgba(255,255,255,.22), transparent 26%),
        radial-gradient(circle at 12% 12%, rgba(14,165,233,.24), transparent 26%),
        linear-gradient(135deg, #0f172a 0%, #1e3a8a 48%, #0f766e 100%);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .16);
}

.approval-hero::after,
.payroll-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -95px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    pointer-events: none;
}

.approval-hero-content,
.payroll-hero > div:first-child {
    position: relative;
    z-index: 1;
    max-width: 820px;
}

.approval-eyebrow,
.payroll-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .32rem .72rem;
    margin-bottom: .75rem;
    color: #bfdbfe;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.approval-hero h1,
.payroll-hero h1 {
    margin: 0 0 .55rem;
    font-size: clamp(1.55rem, 3.2vw, 2.75rem);
    font-weight: 950;
    letter-spacing: -.055em;
    line-height: 1.02;
}

.approval-hero p,
.payroll-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255,255,255,.8);
    font-size: .98rem;
    line-height: 1.65;
}

.approval-hero-meta,
.payroll-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: 1rem;
}

.approval-hero-meta span,
.payroll-hero-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .3rem .7rem;
    color: rgba(255,255,255,.86);
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
}

.approval-actions,
.payroll-hero-actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: .55rem;
    flex-wrap: wrap;
    min-width: fit-content;
}

.approval-actions .btn,
.payroll-hero-actions .btn,
.approval-filter-actions .btn {
    min-height: 42px;
    border-radius: 14px;
    font-weight: 900;
}

.approval-soft-btn,
.btn.approval-soft-btn {
    color: #fff;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(10px);
}

.approval-soft-btn:hover,
.btn.approval-soft-btn:hover {
    color: #fff;
    background: rgba(255,255,255,.18);
}

.approval-kpi-grid,
.payroll-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
}

.approval-kpi,
.payroll-kpi-card {
    position: relative;
    overflow: hidden;
    padding: 1.05rem;
    min-height: 138px;
    background:
        radial-gradient(circle at top right, rgba(37,99,235,.11), transparent 34%),
        var(--hrms-panel);
    border: 1px solid var(--hrms-line);
    border-radius: 24px;
    box-shadow: var(--hrms-shadow-sm);
}

.approval-kpi::before,
.payroll-kpi-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--hrms-blue);
}

.approval-kpi span,
.approval-kpi small,
.payroll-kpi-card .kpi-label,
.payroll-kpi-card .kpi-help {
    display: block;
    color: var(--hrms-muted);
    font-size: .76rem;
    font-weight: 850;
}

.approval-kpi span,
.payroll-kpi-card .kpi-label {
    text-transform: uppercase;
    letter-spacing: .075em;
}

.approval-kpi strong,
.payroll-kpi-card .kpi-value {
    display: block;
    margin: .38rem 0 .25rem;
    color: var(--hrms-ink);
    font-size: clamp(1.42rem, 2vw, 2rem);
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: -.045em;
}

.approval-kpi.is-success::before,
.payroll-kpi-card.is-success::before { background: var(--hrms-green); }
.approval-kpi.is-warning::before,
.payroll-kpi-card.is-warning::before { background: var(--hrms-amber); }
.approval-kpi.is-danger::before,
.payroll-kpi-card.is-danger::before { background: var(--hrms-red); }
.approval-kpi.is-info::before,
.payroll-kpi-card.is-info::before { background: var(--hrms-sky); }
.approval-kpi.is-dark::before,
.payroll-kpi-card.is-dark::before { background: #0f172a; }

.approval-filter-card,
.approval-table-card,
.approval-card,
.payroll-filter-card,
.payroll-table-card {
    background: var(--hrms-panel);
    border: 1px solid var(--hrms-line);
    border-radius: 24px;
    box-shadow: var(--hrms-shadow-sm);
}

.approval-filter-card,
.payroll-filter-card {
    padding: 1rem;
}

.approval-filter-card .form-label,
.payroll-filter-card .form-label,
.approval-card .form-label,
.payroll-table-card .form-label {
    color: #475467;
    font-size: .78rem;
    font-weight: 900;
}

.approval-filter-card .form-control,
.approval-filter-card .form-select,
.payroll-filter-card .form-control,
.payroll-filter-card .form-select,
.approval-card .form-control,
.approval-card .form-select {
    min-height: 44px;
    border-color: #dbe3ef;
    border-radius: 14px;
    box-shadow: none;
}

.approval-filter-card .form-control:focus,
.approval-filter-card .form-select:focus,
.payroll-filter-card .form-control:focus,
.payroll-filter-card .form-select:focus,
.approval-card .form-control:focus,
.approval-card .form-select:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 .22rem rgba(37, 99, 235, .12);
}

.approval-filter-actions {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    width: 100%;
}

.approval-filter-actions .btn {
    flex: 1 1 auto;
}

.approval-card-header,
.payroll-table-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.1rem;
    border-bottom: 1px solid #edf2f7;
}

.approval-card-header.compact {
    padding: 0 0 .85rem;
    border-bottom: 0;
}

.approval-card-header h2,
.approval-card-header h3,
.payroll-panel-title,
.approval-table-header h2 {
    margin: 0;
    color: var(--hrms-ink);
    font-size: 1.08rem;
    font-weight: 950;
    letter-spacing: -.025em;
}

.approval-card-header p,
.payroll-panel-subtitle,
.approval-table-header p {
    display: block;
    margin: .18rem 0 0;
    color: var(--hrms-muted);
    font-size: .84rem;
    font-weight: 700;
}

.approval-card-body {
    padding: 1.1rem;
}

.approval-form-card .approval-card-body {
    padding-top: 1rem;
}

.approval-table-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.1rem .9rem;
}

.approval-soft-badge,
.payroll-soft-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .3rem .7rem;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 950;
    white-space: nowrap;
}

.approval-table-card .table,
.payroll-table-card .table {
    margin-bottom: 0;
}

.approval-table-card thead th,
.payroll-table-card thead th {
    color: #475467;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .065em;
    text-transform: uppercase;
    white-space: nowrap;
}

.approval-table-card tbody td,
.payroll-table-card tbody td {
    color: #344054;
    border-color: #edf2f7;
    vertical-align: middle;
}

.approval-table-card tbody tr,
.payroll-table-card tbody tr {
    transition: background .16s ease, transform .16s ease;
}

.approval-table-card tbody tr:hover,
.payroll-table-card tbody tr:hover {
    background: #f8fbff;
}

.approval-title-cell {
    display: flex;
    align-items: center;
    gap: .72rem;
    min-width: 0;
}

.approval-avatar,
.payroll-avatar,
.payslip-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .04em;
}

.approval-pill,
.payroll-status-pill,
.payslip-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-height: 30px;
    padding: .28rem .68rem;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
}

.approval-pill.pending,
.approval-pill.pending-approval,
.approval-pill.clearance-in-progress,
.approval-pill.draft,
.approval-pill.sent,
.approval-pill.is-warning,
.payroll-status-pill.is-warning {
    color: #92400e;
    background: #fffbeb;
    border-color: #fde68a;
}

.approval-pill.approved,
.approval-pill.accepted,
.approval-pill.clearance-completed,
.approval-pill.finalized,
.approval-pill.paid,
.approval-pill.created,
.approval-pill.is-success,
.payroll-status-pill.is-success,
.payslip-status-pill {
    color: #047857;
    background: #ecfdf3;
    border-color: #bbf7d0;
}

.approval-pill.rejected,
.approval-pill.declined,
.approval-pill.cancelled,
.approval-pill.overdue,
.approval-pill.emergency,
.approval-pill.is-danger,
.payroll-status-pill.is-danger {
    color: #b42318;
    background: #fff1f2;
    border-color: #fecdd3;
}

.approval-pill.submitted,
.approval-pill.hr-reviewed,
.approval-pill.finance-approved,
.approval-pill.gm-approved,
.approval-pill.recalculated,
.approval-pill.is-info,
.payroll-status-pill.is-info {
    color: #075985;
    background: #f0f9ff;
    border-color: #bae6fd;
}

.approval-pill.inactive,
.approval-pill.closed,
.approval-pill.is-neutral,
.payroll-status-pill.is-neutral {
    color: #475467;
    background: #f8fafc;
    border-color: #e2e8f0;
}

.approval-empty-state,
.payroll-empty-state {
    display: grid;
    place-items: center;
    min-height: 190px;
    padding: 1.6rem;
    color: var(--hrms-muted);
    text-align: center;
    border: 1px dashed #cbd5e1;
    border-radius: 22px;
    background:
        radial-gradient(circle at center top, rgba(37,99,235,.08), transparent 38%),
        #fff;
}

.approval-empty-state h6,
.payroll-empty-state .fw-semibold {
    margin: .65rem 0 .2rem;
    color: var(--hrms-ink);
    font-size: 1.02rem;
    font-weight: 950;
}

.approval-empty-icon,
.payroll-empty-state .empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: 20px;
    font-weight: 950;
}

.approval-progress-track {
    overflow: hidden;
    width: 100%;
    height: 10px;
    margin-bottom: .35rem;
    background: #e5e7eb;
    border-radius: 999px;
}

.approval-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #0ea5e9, #10b981);
    border-radius: inherit;
}

.approval-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 1rem;
    align-items: start;
}

.approval-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

.approval-info-item,
.approval-note,
.approval-review-box,
.approval-action-box {
    padding: .95rem;
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 18px;
}

.approval-info-item span {
    display: block;
    color: var(--hrms-muted);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.approval-info-item strong {
    display: block;
    margin-top: .25rem;
    color: var(--hrms-ink);
    font-weight: 950;
}

.approval-sticky-side {
    position: sticky;
    top: 98px;
}

.approval-timeline {
    display: grid;
    gap: .85rem;
}

.approval-timeline-item {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
}

.approval-timeline-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    color: #475467;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 950;
}

.approval-timeline-item.is-active .approval-timeline-dot {
    color: #1d4ed8;
    background: #eff6ff;
    border-color: #dbeafe;
}

.approval-timeline-item.is-done .approval-timeline-dot {
    color: #047857;
    background: #ecfdf3;
    border-color: #bbf7d0;
}

.approval-timeline-content strong,
.approval-timeline-content span {
    display: block;
}

.approval-timeline-content strong {
    color: var(--hrms-ink);
    font-size: .9rem;
    font-weight: 950;
}

.approval-timeline-content span {
    color: var(--hrms-muted);
    font-size: .8rem;
    font-weight: 700;
}

.approval-review-box h4 {
    margin: 0 0 .65rem;
    color: var(--hrms-ink);
    font-size: .95rem;
    font-weight: 950;
}

.approval-review-box.is-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.approval-review-box.is-danger {
    background: #fff1f2;
    border-color: #fecdd3;
}

.payroll-hero {
    background:
        radial-gradient(circle at 86% 12%, rgba(255,255,255,.22), transparent 26%),
        radial-gradient(circle at 10% 10%, rgba(124,58,237,.22), transparent 26%),
        linear-gradient(135deg, #111827 0%, #3730a3 52%, #0369a1 100%);
}

.payroll-hero-actions .btn-outline-secondary,
.payroll-hero-actions .btn-outline-success {
    color: #fff;
    border-color: rgba(255,255,255,.24);
    background: rgba(255,255,255,.1);
}

.payroll-hero-actions .btn-outline-secondary:hover,
.payroll-hero-actions .btn-outline-success:hover {
    color: #fff;
    background: rgba(255,255,255,.18);
}

.payroll-mini-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding: .45rem;
    background: #fff;
    border: 1px solid var(--hrms-line);
    border-radius: 18px;
    box-shadow: var(--hrms-shadow-sm);
}

.payroll-mini-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: .45rem .78rem;
    color: #475467;
    background: transparent;
    border-radius: 13px;
    font-size: .82rem;
    font-weight: 900;
    text-decoration: none;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.payroll-mini-nav a:hover {
    color: #1d4ed8;
    background: #eff6ff;
    transform: translateY(-1px);
}

.payroll-mini-nav a.active {
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    box-shadow: 0 10px 24px rgba(37,99,235,.22);
}


.hrms-module-mini-nav {
    margin: .15rem 0 1.25rem;
}

.payroll-workspace > .hrms-module-mini-nav {
    margin: 0;
}

.hrms-module-mini-nav a[aria-current="page"] {
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    box-shadow: 0 10px 24px rgba(37,99,235,.22);
}

@media (max-width: 767.98px) {
    .hrms-module-mini-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .hrms-module-mini-nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

.payroll-table-card {
    overflow: hidden;
}

.payroll-table-header {
    border-bottom: 1px solid #edf2f7;
}

.payroll-money-strong,
.payroll-money-positive {
    color: #047857;
    font-weight: 950;
}

.payroll-money-negative {
    color: #b42318;
    font-weight: 950;
}

/* Normalize old Bootstrap-only HR finance pages that are still card/table based. */
.hrms-main .card .table-light th,
.hrms-main .table-light th {
    color: #475467;
    background: #f8fafc;
    border-color: #e2e8f0;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.hrms-main .card > .card-body form.row {
    align-items: end;
}

.hrms-main .card-footer {
    border-top-color: #edf2f7;
}

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

    .approval-detail-grid {
        grid-template-columns: 1fr;
    }

    .approval-sticky-side {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .approval-hero,
    .payroll-hero {
        flex-direction: column;
        border-radius: 24px;
        padding: 1.15rem;
    }

    .approval-actions,
    .payroll-hero-actions,
    .approval-filter-actions {
        width: 100%;
    }

    .approval-actions .btn,
    .payroll-hero-actions .btn,
    .approval-filter-actions .btn {
        flex: 1 1 140px;
    }

    .approval-kpi-grid,
    .payroll-kpi-grid,
    .approval-info-grid {
        grid-template-columns: 1fr;
    }

    .approval-card-header,
    .approval-table-header,
    .payroll-table-header {
        flex-direction: column;
    }

    .approval-filter-card,
    .approval-table-card,
    .approval-card,
    .payroll-filter-card,
    .payroll-table-card {
        border-radius: 20px;
    }
}

/* Phase UI-7: HRMS Reports Center redesign */
.reports-page {
    --report-navy: #0f172a;
    --report-blue: #2563eb;
    --report-cyan: #06b6d4;
    --report-green: #059669;
    --report-amber: #d97706;
    --report-red: #dc2626;
    --report-purple: #7c3aed;
    --report-soft-blue: #eff6ff;
    --report-soft-green: #ecfdf3;
    --report-soft-amber: #fffbeb;
    --report-soft-red: #fef2f2;
    --report-soft-purple: #f5f3ff;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.reports-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 1.25rem;
    align-items: stretch;
    padding: 1.35rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 28px;
    background:
        radial-gradient(circle at 8% 4%, rgba(14, 165, 233, .42), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(124, 58, 237, .34), transparent 32%),
        linear-gradient(135deg, #101828 0%, #172554 48%, #0f766e 100%);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .16);
    overflow: hidden;
}

.reports-hero::after {
    content: "";
    position: absolute;
    inset: auto -70px -90px auto;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    pointer-events: none;
}

.reports-hero > * {
    position: relative;
    z-index: 1;
}

.reports-hero h1 {
    max-width: 980px;
    margin: .35rem 0 .45rem;
    font-size: clamp(1.35rem, 2.5vw, 2.2rem);
    font-weight: 950;
    line-height: 1.08;
    letter-spacing: -.045em;
}

.reports-hero p {
    max-width: 860px;
    margin: 0;
    color: rgba(255, 255, 255, .76);
    font-size: .96rem;
    line-height: 1.65;
}

.reports-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #bfdbfe;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.reports-hero-kicker::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #38bdf8;
    box-shadow: 0 0 0 6px rgba(56, 189, 248, .16);
}

.reports-hero-actions,
.report-filter-actions,
.report-table-actions,
.report-card-badges,
.report-card-top,
.report-card-footer,
.report-pagination {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}

.reports-hero-actions .btn {
    border-radius: 999px;
    font-weight: 850;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}

.reports-hero-actions .btn-outline-light {
    color: #fff;
    border-color: rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .1);
}

.reports-hero-actions .btn-outline-light:hover {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .18);
}

.reports-hero-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.reports-hero-metric {
    min-height: 104px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 22px;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    backdrop-filter: blur(12px);
}

.reports-hero-metric small,
.report-stat-card small,
.report-template-card p,
.report-card p,
.report-filter-header p,
.report-table-header p,
.report-builder-header p,
.report-section-heading p {
    color: var(--hrms-muted);
    font-size: .78rem;
    line-height: 1.45;
}

.reports-hero-metric small {
    display: block;
    color: rgba(255, 255, 255, .68);
    font-weight: 850;
}

.reports-hero-metric strong {
    display: block;
    margin-top: .35rem;
    color: #fff;
    font-size: clamp(1.15rem, 2.1vw, 1.65rem);
    font-weight: 950;
    letter-spacing: -.035em;
}

.report-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
}

.report-stat-grid.is-five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.report-stat-grid.is-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.report-stat-card {
    position: relative;
    min-height: 126px;
    padding: 1rem;
    border: 1px solid var(--hrms-border);
    border-radius: 22px;
    background: var(--hrms-surface);
    box-shadow: var(--hrms-shadow-sm);
    overflow: hidden;
}

.report-stat-card::after {
    content: "";
    position: absolute;
    inset: auto 1rem 1rem auto;
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: var(--report-soft-blue);
}

.report-stat-card small,
.report-stat-card span {
    position: relative;
    z-index: 1;
    display: block;
    font-weight: 800;
}

.report-stat-card strong {
    position: relative;
    z-index: 1;
    display: block;
    margin: .45rem 0 .15rem;
    color: var(--hrms-text);
    font-size: clamp(1.35rem, 2.5vw, 1.9rem);
    font-weight: 950;
    letter-spacing: -.04em;
}

.report-stat-card span {
    color: var(--hrms-muted);
    font-size: .75rem;
}

.report-stat-card.is-blue::after { background: var(--report-soft-blue); }
.report-stat-card.is-green::after { background: var(--report-soft-green); }
.report-stat-card.is-amber::after { background: var(--report-soft-amber); }
.report-stat-card.is-red::after { background: var(--report-soft-red); }
.report-stat-card.is-purple::after { background: var(--report-soft-purple); }
.report-stat-card.is-green strong { color: #047857; }
.report-stat-card.is-amber strong { color: #b45309; }
.report-stat-card.is-red strong { color: #b42318; }
.report-stat-card.is-purple strong { color: #6d28d9; }

.report-insight-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
    gap: 1rem;
}

.report-insight-card,
.report-filter-panel,
.report-table-card,
.report-builder-panel {
    border: 1px solid var(--hrms-border);
    border-radius: 24px;
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--hrms-shadow-sm);
}

.report-insight-card,
.report-builder-body,
.report-filter-body {
    padding: 1.1rem;
}

.report-section-heading,
.report-filter-header,
.report-table-header,
.report-builder-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.report-section-heading h2,
.report-filter-header h3,
.report-table-header h3,
.report-builder-header h3 {
    margin: 0 0 .25rem;
    color: var(--hrms-text);
    font-size: 1.08rem;
    font-weight: 950;
    letter-spacing: -.025em;
}

.report-section-heading p,
.report-filter-header p,
.report-table-header p,
.report-builder-header p {
    margin: 0;
}

.report-filter-header,
.report-table-header,
.report-builder-header {
    padding: 1.05rem 1.1rem;
    border-bottom: 1px solid #edf2f7;
}

.report-chip,
.report-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: .34rem .64rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.report-chip.is-blue,
.report-status-pill.status-present,
.report-status-pill.status-approved,
.report-status-pill.status-sent,
.report-status-pill.status-active,
.report-status-pill.status-paid,
.report-status-pill.status-issued,
.report-status-pill.status-completed,
.report-status-pill.status-closed,
.report-status-pill.status-verified {
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.report-chip.is-green,
.report-status-pill.status-resolved,
.report-status-pill.status-converted,
.report-status-pill.status-accepted,
.report-status-pill.status-returned,
.report-status-pill.status-finalized,
.report-status-pill.status-cleared,
.report-status-pill.status-published {
    color: #047857;
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
}

.report-chip.is-amber,
.report-status-pill.status-pending,
.report-status-pill.status-draft,
.report-status-pill.status-open,
.report-status-pill.status-in-progress,
.report-status-pill.status-incomplete,
.report-status-pill.status-unpaid,
.report-status-pill.status-partially-paid,
.report-status-pill.status-pending-approval {
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.report-chip.is-red,
.report-status-pill.is-danger,
.report-status-pill.status-absent,
.report-status-pill.status-rejected,
.report-status-pill.status-critical,
.report-status-pill.status-expired,
.report-status-pill.status-lost,
.report-status-pill.status-damaged,
.report-status-pill.status-terminated,
.report-status-pill.status-declined,
.report-status-pill.status-overdue {
    color: #b42318;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.report-chip.is-purple,
.report-status-pill.status-processing,
.report-status-pill.status-shortlisted,
.report-status-pill.status-selected,
.report-status-pill.status-interview {
    color: #6d28d9;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
}

.report-chip.is-dark {
    color: #344054;
    background: #f2f4f7;
    border: 1px solid #d0d5dd;
}

.report-status-pill:not([class*="status-"]):not(.is-danger),
.report-status-pill.status-inactive,
.report-status-pill.status-private {
    color: #475467;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.reports-grid,
.report-template-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .95rem;
}

.report-card,
.report-template-card {
    position: relative;
    display: block;
    min-height: 188px;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--hrms-border);
    border-radius: 24px;
    background: var(--hrms-surface);
    box-shadow: var(--hrms-shadow-sm);
    overflow: hidden;
    transition: transform var(--hrms-transition), box-shadow var(--hrms-transition), border-color var(--hrms-transition);
}

.report-card::after,
.report-template-card::after {
    content: "";
    position: absolute;
    inset: auto -32px -44px auto;
    width: 120px;
    height: 120px;
    border-radius: 38px;
    background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(14, 165, 233, .08));
    transform: rotate(16deg);
}

.report-card:hover,
.report-template-card:hover {
    color: inherit;
    border-color: #bfdbfe;
    box-shadow: 0 22px 58px rgba(37, 99, 235, .13);
    transform: translateY(-3px);
}

.report-card-inner,
.report-template-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.05rem;
}

.report-template-card {
    padding: 1.05rem;
}

.report-card-top {
    justify-content: space-between;
    margin-bottom: 1rem;
}

.report-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    color: #fff;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--report-blue), var(--report-cyan));
    box-shadow: 0 14px 28px rgba(37, 99, 235, .2);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: -.015em;
}

.report-card h3,
.report-template-card strong {
    margin: 0 0 .45rem;
    color: var(--hrms-text);
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: -.02em;
}

.report-card p,
.report-template-card p {
    margin: 0;
}

.report-card-footer {
    justify-content: space-between;
    margin-top: auto;
    padding-top: 1rem;
    color: var(--report-blue);
    font-size: .82rem;
    font-weight: 900;
}

.report-bars {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.report-bar-row {
    display: grid;
    grid-template-columns: minmax(110px, 170px) minmax(120px, 1fr) minmax(54px, auto);
    gap: .8rem;
    align-items: center;
    color: #475467;
    font-size: .82rem;
    font-weight: 850;
}

.report-bar-track {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f7;
}

.report-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--report-blue), var(--report-cyan));
}

.report-bar-row strong {
    color: var(--hrms-text);
    text-align: right;
    font-weight: 950;
}

.report-filter-body .form-label,
.report-builder-body .form-label {
    color: #475467;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .02em;
}

.reports-page .form-control,
.reports-page .form-select {
    min-height: 42px;
    border-color: #d0d5dd;
    border-radius: 14px;
    box-shadow: none;
}

.reports-page .form-control:focus,
.reports-page .form-select:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .12);
}

.report-filter-actions {
    justify-content: flex-end;
}

.report-table-card {
    overflow: hidden;
}

.report-table-card .table {
    margin: 0;
}

.report-table-card .table thead th {
    padding: .85rem 1rem;
    color: #475467;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .065em;
    text-transform: uppercase;
    white-space: nowrap;
}

.report-table-card .table tbody td {
    padding: .9rem 1rem;
    color: #344054;
    border-color: #eef2f7;
    font-size: .86rem;
    vertical-align: middle;
}

.report-table-card .table tbody tr:hover td {
    background: #f8fbff;
}

.report-empty-state {
    padding: 2rem !important;
    color: var(--hrms-muted) !important;
    text-align: center;
    background: #f8fafc !important;
}

.report-empty-state strong {
    display: block;
    margin-bottom: .35rem;
    color: var(--hrms-text);
    font-size: .98rem;
    font-weight: 950;
}

.report-pagination {
    justify-content: space-between;
    padding: .9rem 1.1rem;
    border-top: 1px solid #edf2f7;
    background: #fcfcfd;
}

.report-pagination .pagination {
    margin: 0;
}

.report-pagination .page-link {
    border-radius: 10px;
    margin: 0 .12rem;
    color: var(--report-blue);
    font-size: .78rem;
    font-weight: 850;
}

.report-builder-panel {
    overflow: hidden;
}

.report-column-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
}

.report-check-tile {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 46px;
    padding: .72rem .82rem;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
    transition: background var(--hrms-transition), border-color var(--hrms-transition), transform var(--hrms-transition);
}

.report-check-tile:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    transform: translateY(-1px);
}

.report-check-tile label {
    margin: 0;
    color: #344054;
    font-size: .82rem;
    font-weight: 850;
    cursor: pointer;
}

.report-check-tile .form-check-input {
    margin: 0;
    flex: 0 0 auto;
}

.report-sticky-actions {
    position: sticky;
    bottom: 1rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 1.05rem;
    border: 1px solid rgba(208, 213, 221, .88);
    border-radius: 20px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 18px 45px rgba(16, 24, 40, .14);
    backdrop-filter: blur(16px);
}

.report-sticky-actions strong {
    color: var(--hrms-text);
    font-size: .92rem;
    font-weight: 950;
}

.report-mini-label {
    color: #475467;
    font-size: .82rem;
    font-weight: 850;
}

.reports-page .btn {
    border-radius: 999px;
    font-weight: 850;
}

.reports-page .btn-primary {
    border-color: #2563eb;
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    box-shadow: 0 10px 24px rgba(37, 99, 235, .18);
}

.reports-page .btn-outline-secondary,
.reports-page .btn-outline-success,
.reports-page .btn-outline-primary,
.reports-page .btn-outline-dark {
    background: #fff;
}

.report-print-page {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.report-print-toolbar {
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}

.report-print-table th {
    text-transform: uppercase;
    letter-spacing: .04em;
}

@media (max-width: 1399.98px) {
    .report-stat-grid.is-five,
    .reports-grid,
    .report-template-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1199.98px) {
    .reports-hero,
    .report-insight-grid {
        grid-template-columns: 1fr;
    }

    .report-stat-grid,
    .report-stat-grid.is-four,
    .report-stat-grid.is-five,
    .reports-grid,
    .report-template-card-grid,
    .report-column-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .reports-hero {
        padding: 1.05rem;
        border-radius: 22px;
    }

    .reports-hero-metrics,
    .report-stat-grid,
    .report-stat-grid.is-four,
    .report-stat-grid.is-five,
    .reports-grid,
    .report-template-card-grid,
    .report-column-picker {
        grid-template-columns: 1fr;
    }

    .report-section-heading,
    .report-filter-header,
    .report-table-header,
    .report-builder-header,
    .report-sticky-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .report-filter-actions,
    .reports-hero-actions,
    .report-table-actions {
        width: 100%;
    }

    .report-filter-actions .btn,
    .reports-hero-actions .btn,
    .report-table-actions .btn,
    .report-sticky-actions .btn {
        flex: 1 1 135px;
    }

    .report-filter-panel,
    .report-table-card,
    .report-builder-panel,
    .report-insight-card {
        border-radius: 20px;
    }

    .report-bar-row {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .report-bar-row strong {
        text-align: left;
    }
}


@media (max-width: 991.98px) {

}

@media (max-width: 575.98px) {
    .hrms-section-shortcut-link {
        max-width: 200px;
        min-height: 38px;
        padding-right: .62rem;
    }

    .hrms-section-shortcut-text {
        font-size: .78rem;
    }
}