:root {
    --admin-bg: #f4f6fb;
    --admin-panel: #ffffff;
    --admin-border: rgba(15, 23, 42, 0.08);
    --admin-muted: #64748b;
    --admin-primary: #2563eb;
    --admin-primary-soft: rgba(37, 99, 235, 0.12);
    --admin-sidebar-bg: #0f172a;
    --admin-sidebar-panel: rgba(255, 255, 255, 0.06);
    --admin-sidebar-border: rgba(255, 255, 255, 0.1);
    --admin-sidebar-text: #cbd5e1;
    --admin-sidebar-strong: #ffffff;
    --admin-topbar-bg: radial-gradient(circle at top right, rgba(37, 99, 235, 0.24), transparent 34%), linear-gradient(90deg, #101b33 0%, var(--admin-sidebar-bg) 56%, #0b1120 100%);
}

body {
    background:
        linear-gradient(180deg, rgba(37, 99, 235, 0.05), transparent 320px),
        var(--admin-bg);
}

.page {
    background: transparent;
}

.page-wrapper {
    background: transparent;
}

.container-xl {
    max-width: 1280px;
}

.admin-sidebar {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.24), transparent 34%),
        linear-gradient(180deg, #101b33 0%, var(--admin-sidebar-bg) 56%, #0b1120 100%) !important;
    border-right: 1px solid var(--admin-sidebar-border);
    box-shadow: 18px 0 40px rgba(15, 23, 42, 0.08);
}

.admin-sidebar .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
}

.admin-sidebar .navbar-brand {
    min-height: 4.75rem;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem 0.25rem;
}

.admin-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    max-width: 100%;
    color: var(--admin-sidebar-strong);
    text-decoration: none;
}

.admin-brand-logo {
    display: block;
    width: auto;
    max-width: 11rem;
    max-height: 3.25rem;
    object-fit: contain;
}

.admin-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    overflow: hidden;
    border: 1px solid var(--admin-sidebar-border);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 850;
}

.admin-brand-copy {
    min-width: 0;
}

.admin-brand-name {
    display: block;
    max-width: 10rem;
    overflow: hidden;
    color: var(--admin-sidebar-strong);
    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-brand-label {
    display: block;
    margin-top: 0.2rem;
    color: #93a4bb;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-sidebar .navbar-nav {
    gap: 0.2rem;
    padding-bottom: 1rem;
}

.admin-nav-section {
    margin: 1.05rem 0 0.35rem;
    padding: 0 0.75rem;
    color: #7f90aa;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.admin-sidebar .nav-link {
    min-height: 2.65rem;
    margin: 0.05rem 0;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    color: var(--admin-sidebar-text);
    font-weight: 650;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link:focus {
    background: var(--admin-sidebar-panel);
    border-color: var(--admin-sidebar-border);
    color: var(--admin-sidebar-strong);
    transform: translateX(2px);
}

.admin-sidebar .nav-link.active,
.admin-sidebar .nav-link.show {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(14, 165, 233, 0.82));
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    box-shadow: 0 14px 26px rgba(37, 99, 235, 0.24);
}

.admin-sidebar .nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: 0.55rem;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.07);
    color: inherit;
}

.admin-sidebar .nav-link-icon i {
    font-size: 1.05rem;
}

.admin-sidebar .dropdown-menu {
    margin: 0.25rem 0 0.35rem 2.25rem;
    padding: 0.2rem;
    border: 0;
    border-left: 1px solid var(--admin-sidebar-border);
    background: transparent;
    box-shadow: none;
}

.admin-sidebar .dropdown-item {
    min-height: 2.25rem;
    border-radius: 0.62rem;
    color: #aebdd0;
    font-weight: 600;
}

.admin-sidebar .dropdown-item:hover,
.admin-sidebar .dropdown-item:focus,
.admin-sidebar .dropdown-item.active {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.admin-sidebar .badge {
    min-width: 1.5rem;
    border-radius: 999px;
}

.admin-footer {
    margin-top: 0.5rem;
    padding: 1rem 0;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: #64748b;
    font-size: 0.82rem;
}

.admin-ui .page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.admin-ui .page-wrapper {
    flex: 1 0 auto;
}

.admin-ui .admin-footer {
    margin-top: auto;
}

.admin-footer-copyright,
.admin-footer-credit {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
}

.admin-footer-copyright > i {
    color: #94a3b8;
    font-size: 1rem;
}

.admin-footer-legal-links {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    margin-left: 0.12rem;
}

.admin-footer a {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
}

.admin-footer a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.admin-footer-credit {
    padding: 0.32rem 0.62rem;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.05);
    color: #64748b;
}

.admin-footer-credit a {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
}

.admin-footer-credit i {
    font-size: 0.92rem;
}

body[data-bs-theme=dark] .admin-footer {
    border-top-color: rgba(148, 163, 184, 0.16) !important;
    background: rgba(15, 23, 42, 0.72) !important;
    color: #aebdd0;
}

body[data-bs-theme=dark] .admin-footer-credit {
    border-color: rgba(96, 165, 250, 0.2);
    background: rgba(37, 99, 235, 0.14);
    color: #cbd5e1;
}

.admin-topbar {
    border-bottom: 1px solid var(--admin-sidebar-border);
    background: var(--admin-topbar-bg) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.05);
    color: var(--admin-sidebar-strong);
}

body[data-bs-theme=dark] .admin-topbar {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22);
}

.admin-topbar,
.admin-topbar .nav-link,
.admin-topbar .text-reset,
.admin-topbar .dropdown-toggle {
    color: var(--admin-sidebar-strong) !important;
}

.admin-topbar .text-secondary,
.admin-topbar .small {
    color: var(--admin-sidebar-text) !important;
}

body[data-bs-theme=dark] .admin-topbar .dropdown-menu {
    border-color: rgba(148, 163, 184, 0.16);
    background: #111827;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38);
}

body[data-bs-theme=dark] .admin-topbar .dropdown-item {
    color: #dbe6f5;
}

body[data-bs-theme=dark] .admin-topbar .dropdown-item:hover,
body[data-bs-theme=dark] .admin-topbar .dropdown-item:focus {
    background: rgba(37, 99, 235, 0.18);
    color: #ffffff;
}

body[data-bs-theme=dark] .admin-topbar .dropdown-divider {
    border-top-color: rgba(148, 163, 184, 0.16);
}

.admin-topbar .avatar,
.admin-sidebar .avatar {
    border: 2px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

/* Shared dark dashboard chrome and account menu, mirrored from the admin reference layout. */
.admin-account-toggle { gap: .55rem; min-height: 2.8rem; padding: .3rem .45rem !important; border: 1px solid transparent !important; border-radius: .8rem; transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease; }
.admin-account-toggle::after { margin-left: .1rem; border-top-color: currentColor; }
.admin-account-toggle:hover, .admin-account-toggle:focus, .admin-account-toggle[aria-expanded="true"] { border-color: rgba(255,255,255,.18) !important; background: rgba(255,255,255,.1) !important; transform: translateY(-1px); }
.admin-account-dropdown { width: min(19rem, calc(100vw - 2rem)); margin-top: .7rem !important; padding: .45rem; overflow: hidden; border: 1px solid rgba(15,23,42,.1); border-radius: .9rem; background: #fff; box-shadow: 0 18px 42px rgba(15,23,42,.2); }
.admin-account-dropdown .dropdown-header { padding: .65rem; }
.admin-account-summary { display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; align-items: center; white-space: normal; }
.admin-account-summary .avatar { grid-row: span 2; border-color: rgba(37,99,235,.2); }
.admin-account-name { color: #172033; font-size: .88rem; font-weight: 750; }
.admin-account-role { margin-top: .1rem; color: var(--admin-primary); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.admin-account-email { grid-column: 2; margin-top: .3rem; overflow: hidden; color: var(--admin-muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-account-dropdown .dropdown-divider { margin: .35rem 0; }
.admin-account-dropdown .dropdown-item { display: flex; align-items: center; gap: .65rem; min-height: 2.65rem; padding: .55rem .7rem; border: 0; border-radius: .62rem; color: #344054; font-size: .88rem; font-weight: 600; transition: background-color 150ms ease, color 150ms ease; }
.admin-account-dropdown .dropdown-item i { color: #64748b; font-size: 1.1rem; }
.admin-account-dropdown .dropdown-item:hover, .admin-account-dropdown .dropdown-item:focus { background: var(--admin-primary-soft); color: #1746a2; }
.admin-account-dropdown .admin-account-logout { color: #c2413b; }
.admin-account-dropdown .admin-account-logout i { color: #d85b54; }
.admin-account-dropdown .admin-account-logout:hover, .admin-account-dropdown .admin-account-logout:focus { background: rgba(220,38,38,.09); color: #b42318; }
.admin-mobile-topbar, .admin-mobile-topbar .nav-link, .admin-mobile-topbar .text-reset, .admin-mobile-topbar .dropdown-toggle { color: #fff !important; }
.admin-mobile-topbar .admin-mobile-menu-btn, .admin-mobile-topbar .admin-mobile-brand-mark { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.1); color: #fff; }

/* Keep the utility controls evenly spaced: theme/notification/avatar/menu. */
.admin-mobile-topbar .navbar-nav {
    gap: .65rem;
}

.admin-mobile-topbar .navbar-nav > .nav-link {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.admin-mobile-topbar .navbar-nav > .nav-item {
    margin-left: 0 !important;
}

.admin-mobile-topbar .admin-mobile-menu-btn {
    margin-left: 0 !important;
}

.admin-mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.25rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--admin-sidebar-border);
    background: var(--admin-topbar-bg) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.admin-mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.75rem;
    background: #ffffff;
    color: #111827;
    font-size: 1.35rem;
}

/* Keep every dashboard menu control legible on the dark navigation chrome. */
.admin-mobile-topbar .admin-mobile-menu-btn,
.admin-sidebar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.48) !important;
    background: transparent !important;
    color: #fff !important;
}

.admin-mobile-topbar .admin-mobile-menu-btn svg,
.admin-sidebar .navbar-toggler svg {
    stroke: #fff;
}

.admin-sidebar .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}

/* Tabler turns this hamburger into an × while the mobile sidebar is open. */
.admin-sidebar .navbar-toggler-icon,
.admin-sidebar .navbar-toggler-icon::before,
.admin-sidebar .navbar-toggler-icon::after {
    background: #fff !important;
    filter: none !important;
}

.admin-mobile-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    margin-right: auto;
    color: #111827;
    text-decoration: none;
}

.admin-mobile-brand-logo {
    display: block;
    width: auto;
    max-width: 9.5rem;
    max-height: 2.4rem;
    object-fit: contain;
}

.admin-mobile-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    overflow: hidden;
    border: 1px solid var(--admin-border);
    border-radius: 0.7rem;
    background: #ffffff;
    color: #111827;
    font-size: 0.9rem;
    font-weight: 850;
}

.admin-mobile-brand-name {
    max-width: 58vw;
    overflow: hidden;
    font-size: 0.95rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-bs-theme=dark] .admin-mobile-topbar {
    border-bottom-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.92);
}

body[data-bs-theme=dark] .admin-mobile-menu-btn,
body[data-bs-theme=dark] .admin-mobile-brand-mark {
    border-color: rgba(148, 163, 184, 0.16);
    background: #111827;
    color: #e5edf8;
}

body[data-bs-theme=dark] .admin-mobile-brand {
    color: #e5edf8;
}

.page-header {
    margin-bottom: 0;
    padding-top: 1.5rem;
}

.page-title {
    color: #111827;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0;
}

.text-secondary,
.text-muted {
    color: var(--admin-muted) !important;
}

.card {
    border: 1px solid var(--admin-border);
    border-radius: 0.85rem;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.card-header,
.card-footer {
    border-color: var(--admin-border);
}

.card-title {
    color: #111827;
    font-weight: 760;
}

.form-control,
.form-select,
.select2-container .select2-selection--single {
    border-color: #d8dee9;
    border-radius: 0.65rem;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(37, 99, 235, 0.55);
    box-shadow: 0 0 0 0.22rem var(--admin-primary-soft);
}

.btn {
    border-radius: 0.62rem;
    font-weight: 650;
}

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

.btn-primary:hover,
.btn-primary:focus {
    border-color: transparent;
    filter: brightness(0.98);
}

.table {
    --tblr-table-bg: transparent;
}

.table thead th {
    color: #475569;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.list-group-transparent .list-group-item {
    border-radius: 0.65rem;
    font-weight: 650;
}

.list-group-transparent .list-group-item.active {
    background: var(--admin-primary-soft);
    color: var(--admin-primary);
}

.footer {
    color: var(--admin-muted);
}

.admin-auth {
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% 10%, rgba(37, 99, 235, 0.18), transparent 30%),
        radial-gradient(circle at 80% 0%, rgba(14, 165, 233, 0.16), transparent 28%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.admin-auth .page-center {
    min-height: 100vh;
}

.admin-auth-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(13rem, 100%);
    height: 5.25rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(15, 47, 105, 0.18);
    border-radius: 1rem;
    background: linear-gradient(135deg, #0b2f81, #087c8d);
    box-shadow: 0 18px 44px rgba(11, 47, 129, 0.22);
}

.admin-auth-brand img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.admin-auth-title {
    margin-bottom: 0.25rem;
    color: #111827;
    font-size: 1.25rem;
    font-weight: 800;
}

.admin-auth-subtitle {
    color: var(--admin-muted);
    font-size: 0.9rem;
}

.admin-auth .card {
    border-radius: 1rem;
}

@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg.admin-sidebar {
        width: 17.5rem;
    }

    .admin-ui .page-wrapper,
    .admin-ui .admin-footer {
        margin-left: 17.5rem;
    }

    .admin-ui .admin-topbar {
        position: sticky;
        top: 0;
        z-index: 1020;
        display: flex;
        box-sizing: border-box;
        width: auto;
        min-height: 4.25rem;
        margin-left: 17.5rem;
        margin-right: 0;
        padding: 0;
    }

    .admin-ui .admin-topbar .container-xl {
        width: 100%;
        max-width: none;
        min-height: 4.25rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .navbar-vertical.navbar-expand-lg ~ .page-wrapper,
    .navbar-vertical.navbar-expand-lg ~ .footer {
        margin-left: 17.5rem;
    }
}

@media (max-width: 991.98px) {
    body.admin-sidebar-open {
        overflow: hidden;
    }

    body.admin-sidebar-open::after {
        position: fixed;
        inset: 0;
        z-index: 1035;
        background: rgba(15, 23, 42, 0.52);
        content: "";
    }

    .navbar-vertical.navbar-expand-lg.admin-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        display: block;
        width: min(19rem, 86vw);
        max-width: 100vw;
        overflow-y: auto;
        transform: translateX(-102%);
        transition: transform 220ms ease;
        padding: 0 !important;
    }

    body.admin-sidebar-open .navbar-vertical.navbar-expand-lg.admin-sidebar {
        transform: translateX(0);
    }

    .admin-sidebar .container-fluid {
        display: block !important;
        min-height: 100%;
        padding: 1rem !important;
        flex-direction: initial !important;
        align-items: initial !important;
        justify-content: flex-start !important;
    }

    .admin-sidebar .navbar-brand {
        display: flex !important;
        justify-content: flex-start !important;
        min-height: 0;
        margin: 0 !important;
        padding: 0 3.2rem 1rem 0 !important;
    }

    .admin-sidebar > .container-fluid > .navbar-nav.flex-row.d-lg-none {
        display: none !important;
    }

    .admin-sidebar .navbar-collapse {
        display: block !important;
        height: auto !important;
        flex-basis: auto !important;
        flex-grow: 0 !important;
        margin-top: 0;
        padding: 0 !important;
    }

    .admin-sidebar .navbar-nav {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        margin: 0 !important;
        padding-top: 0 !important;
    }

    .admin-sidebar .navbar-toggler {
        position: absolute;
        top: 1.05rem;
        right: 1rem;
        z-index: 2;
    }

    .admin-sidebar .navbar-toggler-icon {
        filter: invert(1);
    }

    .admin-sidebar .nav-link-icon {
        display: inline-flex !important;
    }

    .admin-brand-name {
        max-width: 12rem;
    }

    .admin-nav-section {
        margin-top: 0.55rem;
    }

    .admin-sidebar .navbar-nav > .admin-nav-section:first-child {
        margin-top: 0;
    }
}

/* Shared dashboard finishing system — applies to all admin and staff workspaces. */
.admin-ui .page-body { padding-top: 1.35rem; padding-bottom: 1.25rem; }
.admin-ui .page-header .page-pretitle { color: var(--admin-primary); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.admin-ui .page-header .text-secondary { max-width: 48rem; }
.admin-ui .page-header .btn-list { gap: .55rem; }
.admin-ui .card { overflow: hidden; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.admin-ui .card.card-link:hover, .admin-ui a.card:hover { transform: translateY(-3px); border-color: rgba(37, 99, 235, .26); box-shadow: 0 1.25rem 2.8rem rgba(15, 23, 42, .12); }
.admin-ui .card-header { min-height: 4rem; padding: 1rem 1.25rem; background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.88)); }
.admin-ui .card-footer { padding: .9rem 1.25rem; background: rgba(248,250,252,.62); }
.admin-ui .card-body { padding: 1.25rem; }
.admin-ui .card-sm .card-body { padding: 1.15rem 1.25rem; }
.admin-ui .card .subheader { color: #718096; font-size: .7rem; font-weight: 800; letter-spacing: .07em; }
.admin-ui .card .display-6, .admin-ui .card .h1, .admin-ui .card .h2 { color: #172554; font-weight: 800; letter-spacing: -.03em; }
.admin-ui .avatar { border-radius: .75rem; font-weight: 800; }
.admin-ui .card .avatar { box-shadow: 0 .5rem 1rem rgba(15, 23, 42, .1); }
.admin-ui .badge { border-radius: 999px; padding: .38rem .62rem; font-size: .7rem; font-weight: 750; letter-spacing: .01em; }
.admin-ui .table-responsive { border-radius: inherit; }
.admin-ui .table > :not(caption) > * > * { padding: .9rem 1.25rem; vertical-align: middle; }
.admin-ui .table tbody tr { transition: background-color 140ms ease; }
.admin-ui .table tbody tr:hover { background: rgba(37, 99, 235, .035); }
.admin-ui .table a:not(.btn) { color: #1d4ed8; font-weight: 650; text-decoration: none; }
.admin-ui .table a:not(.btn):hover { color: #0e7490; text-decoration: underline; }
.admin-ui .form-label { margin-bottom: .42rem; color: #34445d; font-size: .79rem; font-weight: 750; }
.admin-ui .form-control, .admin-ui .form-select { min-height: 2.65rem; padding: .56rem .78rem; background-color: #fff; }
.admin-ui textarea.form-control { min-height: auto; }
.admin-ui .input-group .form-control { border-radius: .65rem 0 0 .65rem; }
.admin-ui .input-group .btn { border-radius: 0 .65rem .65rem 0; }
.admin-ui .btn { min-height: 2.45rem; padding: .48rem .82rem; }
.admin-ui .btn-sm { min-height: 2rem; padding: .25rem .6rem; }
.admin-ui .btn-outline-secondary { border-color: #d7dee9; color: #465872; }
.admin-ui .btn-outline-secondary:hover { border-color: #b9c6d7; background: #f3f6fa; color: #172554; }
.admin-ui .btn-ghost-primary { color: var(--admin-primary); }
.admin-ui .alert { border: 0; border-radius: .8rem; box-shadow: 0 .5rem 1.5rem rgba(15,23,42,.06); }
.admin-ui .nav-tabs { gap: .3rem; border-bottom-color: var(--admin-border); }
.admin-ui .nav-tabs .nav-link { border: 0; border-radius: .65rem .65rem 0 0; color: #64748b; font-weight: 700; }
.admin-ui .nav-tabs .nav-link.active { border-bottom: 2px solid var(--admin-primary); background: var(--admin-primary-soft); color: var(--admin-primary); }
.admin-ui .list-group-item { padding: .9rem 1.15rem; border-color: #edf1f6; }
.admin-ui .pagination { gap: .28rem; }
.admin-ui .page-link { min-width: 2.25rem; border: 0; border-radius: .6rem !important; color: #475569; font-weight: 700; text-align: center; }
.admin-ui .page-item.active .page-link { background: linear-gradient(135deg, #2563eb, #0ea5e9); box-shadow: 0 .45rem 1rem rgba(37,99,235,.22); }
.admin-ui .progress { height: .55rem; overflow: hidden; border-radius: 99px; background: #e9eef5; }
.admin-ui .progress-bar { border-radius: inherit; background: linear-gradient(90deg, #2563eb, #0ea5e9); }
.admin-ui .empty-state, .admin-ui td.text-center.py-5, .admin-ui td.text-center.py-4 { color: #7a8799 !important; }
.admin-ui .modal-content { overflow: hidden; border: 0; border-radius: 1rem; box-shadow: 0 1.5rem 4rem rgba(15,23,42,.2); }
.admin-ui .dropdown-menu { border: 1px solid var(--admin-border); border-radius: .8rem; box-shadow: 0 1rem 2.25rem rgba(15,23,42,.12); }
.admin-ui .dropdown-item { border-radius: .45rem; font-weight: 600; }
.admin-dashboard-hero { position: relative; overflow: hidden; margin-top: 1.5rem; border: 0; border-radius: 1.1rem; background: linear-gradient(118deg, #0f2454, #18588d 62%, #149ab0); box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, .16); }
.admin-dashboard-hero::after { position: absolute; top: -9rem; right: -5rem; width: 21rem; height: 21rem; border: 2.6rem solid rgba(255,255,255,.09); border-radius: 50%; content: ''; }
.admin-dashboard-hero .card-body { position: relative; z-index: 1; padding: 1.6rem 1.8rem; }
.admin-dashboard-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 4.75rem; height: 4.75rem; overflow: hidden; border: 3px solid rgba(255,255,255,.75); border-radius: 1rem; background: rgba(255,255,255,.14); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.17); color: #fff; font-size: 1.3rem; font-weight: 850; }
.admin-dashboard-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-dashboard-hero .hero-kicker { color: rgba(255,255,255,.68); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.admin-dashboard-hero h1 { margin: .15rem 0; color: #fff; font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 850; letter-spacing: -.04em; }
.admin-dashboard-hero p { margin: 0; color: rgba(255,255,255,.75); }
.admin-dashboard-hero .btn-light { color: #12315e; font-weight: 750; }
.payroll-page { --payroll-navy: #102a59; --payroll-blue: #2563eb; --payroll-cyan: #0ea5e9; }
.payroll-export-form { display: flex; gap: .55rem; align-items: center; }.payroll-export-form .form-control { width: 10.7rem; }.payroll-export-form .btn { border: 0; box-shadow: 0 .55rem 1.25rem rgba(8, 47, 103, .16); color: var(--payroll-navy); font-weight: 800; }
.payroll-hero { position: relative; overflow: hidden; border: 0; border-radius: 1.1rem; background: linear-gradient(120deg, #0d2351, #185cb7 62%, #15a7c2); box-shadow: 0 1.2rem 2.8rem rgba(15, 40, 85, .18); }.payroll-hero::after { position: absolute; top: -10rem; right: -4rem; width: 23rem; height: 23rem; border: 2.6rem solid rgba(255,255,255,.09); border-radius: 50%; content: ''; }.payroll-hero .card-body { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.65rem 1.8rem; }.payroll-hero__intro { display: flex; align-items: center; gap: 1rem; }.payroll-hero__icon, .payroll-section-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: .9rem; background: rgba(255,255,255,.16); color: #fff; font-size: 1.45rem; }.payroll-hero__eyebrow { color: rgba(255,255,255,.7); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.payroll-hero h2 { margin: .15rem 0; color: #fff; font-size: 1.35rem; font-weight: 850; }.payroll-hero p { margin: 0; color: rgba(255,255,255,.76); font-size: .85rem; }.payroll-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(6.7rem, 1fr)); gap: .55rem; }.payroll-stat { padding: .75rem .85rem; border: 1px solid rgba(255,255,255,.18); border-radius: .8rem; background: rgba(7, 31, 78, .18); }.payroll-stat span { display: block; color: rgba(255,255,255,.72); font-size: .68rem; font-weight: 700; }.payroll-stat strong { display: block; margin-top: .18rem; color: #fff; font-size: 1.1rem; font-weight: 850; }
.payroll-setup-card { border-color: #dce6f7; }.payroll-setup-card .card-header { background: linear-gradient(105deg, #f7faff, #fff); }.payroll-section-icon { width: 2.5rem; height: 2.5rem; border-radius: .7rem; background: #e8f0ff; color: var(--payroll-blue); font-size: 1.15rem; }.payroll-setup-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.25rem -1.25rem -1.25rem; padding: .85rem 1.25rem; border-top: 1px solid #e8edf5; background: #fbfcfe; color: #718096; font-size: .78rem; }.payroll-setup-card__footer .btn { box-shadow: 0 .45rem 1rem rgba(37,99,235,.22); font-weight: 750; }
.payroll-table-card .card-header { min-height: 4.4rem; }.payroll-table-card thead th { color: #54657e; font-size: .68rem; font-weight: 850; letter-spacing: .06em; }.payroll-table-card tbody tr:nth-child(even) { background: rgba(248,250,252,.72); }.payroll-amount { color: #102a59; font-weight: 800; }.payroll-frequency { display: inline-flex; align-items: center; gap: .35rem; color: #455a78; font-size: .82rem; font-weight: 700; }.payroll-frequency i { color: var(--payroll-blue); }.payroll-table-card .btn-sm { font-weight: 750; }
.payroll-staff-card { overflow: hidden; }.payroll-staff-list { max-height: 43rem; overflow-y: auto; }.payroll-staff-list__item { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid #edf1f6; color: #34445d; text-decoration: none; transition: background .15s ease, color .15s ease; }.payroll-staff-list__item:last-child { border-bottom: 0; }.payroll-staff-list__item:hover { background: #f5f8ff; color: #1d4ed8; }.payroll-staff-list__item.active { background: linear-gradient(90deg, #eaf1ff, #f8fbff); color: #155eef; }.payroll-staff-list__item strong, .payroll-staff-list__item small { display: block; }.payroll-staff-list__item strong { font-size: .86rem; }.payroll-staff-list__item small { margin-top: .08rem; color: #718096; font-size: .73rem; }.payroll-staff-list__item.active small { color: #4774c9; }
.payroll-payment-details { margin-top: 1.25rem; border: 1px solid #e4eaf3; border-radius: .75rem; background: #fbfcfe; }.payroll-payment-details summary { display: flex; align-items: center; padding: .8rem .95rem; color: #31527f; cursor: pointer; font-size: .82rem; font-weight: 750; list-style: none; }.payroll-payment-details summary::-webkit-details-marker { display: none; }.payroll-payment-details summary::after { margin-left: auto; color: #2563eb; content: '⌄'; font-size: 1rem; }.payroll-payment-details[open] summary { border-bottom: 1px solid #e4eaf3; }.payroll-payment-details[open] summary::after { transform: rotate(180deg); }.payroll-payment-details summary span { margin-left: .45rem; color: #8492a6; font-size: .7rem; font-weight: 650; }.payroll-payment-details > .row { padding-right: .95rem; padding-bottom: .95rem; padding-left: .95rem; }
.payslip-modal-frame { display: block; width: 100%; min-height: min(72vh, 48rem); border: 0; background: #fff; }
@media (max-width: 575.98px) {
    .admin-ui .page-header { padding-top: 1rem; }
    .admin-ui .page-header .btn { margin-top: .5rem; }
    .admin-ui .card-header, .admin-ui .card-body, .admin-ui .card-footer { padding-left: 1rem; padding-right: 1rem; }
    .admin-ui .table > :not(caption) > * > * { padding-left: 1rem; padding-right: 1rem; }
    .admin-dashboard-hero { margin-top: 1rem; }
    .admin-dashboard-hero .card-body { padding: 1.25rem; }
    .payroll-export-form { width: 100%; }.payroll-export-form .form-control { flex: 1; width: auto; }.payroll-hero .card-body { display: block; padding: 1.25rem; }.payroll-stat-grid { grid-template-columns: 1fr; margin-top: 1rem; }.payroll-setup-card__footer { flex-direction: column; align-items: stretch; }.payroll-setup-card__footer .btn { width: 100%; }
}