/* =========================================================================
   admin-light.css — modernized, lighter admin theme
   Loaded after admin-shared.css. Tokens live at :root; visual overrides are
   scoped under `.admin-light` so legacy admin pages render unchanged until
   they opt in by using the new classes (.al-page-header, .btn-soft, etc.)
   ========================================================================= */

:root {
    /* surfaces */
    --admin-bg:           #fafbfc;
    --admin-surface:      #ffffff;
    --admin-surface-soft: #f6f7f9;
    --admin-border:       rgba(15, 23, 42, 0.08);
    --admin-border-soft:  rgba(15, 23, 42, 0.04);

    /* text */
    --admin-text:         #0f172a;
    --admin-text-muted:   #64748b;
    --admin-text-subtle:  #94a3b8;

    /* accent (single source — drop the rainbow) */
    --admin-accent:       #0056b3;
    --admin-accent-hover: #00468f;
    --admin-accent-soft:  rgba(0, 86, 179, 0.08);
    --admin-accent-ring:  rgba(0, 86, 179, 0.18);

    /* semantic — used sparingly, only for status */
    --admin-success: #16a34a;
    --admin-success-soft: rgba(22, 163, 74, 0.08);
    --admin-warning: #d97706;
    --admin-warning-soft: rgba(217, 119, 6, 0.10);
    --admin-danger:  #dc2626;
    --admin-danger-soft:  rgba(220, 38, 38, 0.08);

    /* elevation — subtle, no glassmorphism */
    --admin-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --admin-shadow:    0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --admin-shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.08);

    /* shape */
    --admin-radius-sm: 8px;
    --admin-radius:    10px;
    --admin-radius-lg: 14px;
}

/* =========================================================================
   Page surface (applied to AdminLayout root)
   ========================================================================= */
.admin-light {
    background: var(--admin-bg);
    color: var(--admin-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

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

/* =========================================================================
   Buttons — subtle, flat
   ========================================================================= */
.btn-soft {
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
    border: 1px solid transparent;
    font-weight: 500;
    border-radius: var(--admin-radius-sm);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-soft:hover,
.btn-soft:focus-visible {
    background: rgba(0, 86, 179, 0.14);
    color: var(--admin-accent-hover);
}
.btn-soft:focus-visible {
    outline: 2px solid var(--admin-accent-ring);
    outline-offset: 2px;
}

.btn-soft-success { background: var(--admin-success-soft); color: var(--admin-success); border: 1px solid transparent; font-weight: 500; border-radius: var(--admin-radius-sm); }
.btn-soft-success:hover,
.btn-soft-success:focus-visible { background: rgba(22, 163, 74, 0.14); color: #15803d; }

.btn-soft-warning { background: var(--admin-warning-soft); color: var(--admin-warning); border: 1px solid transparent; font-weight: 500; border-radius: var(--admin-radius-sm); }
.btn-soft-warning:hover,
.btn-soft-warning:focus-visible { background: rgba(217, 119, 6, 0.16); color: #b45309; }

.btn-soft-danger  { background: var(--admin-danger-soft);  color: var(--admin-danger);  border: 1px solid transparent; font-weight: 500; border-radius: var(--admin-radius-sm); }
.btn-soft-danger:hover,
.btn-soft-danger:focus-visible  { background: rgba(220, 38, 38, 0.14); color: #b91c1c; }

.btn-ghost {
    background: transparent;
    color: var(--admin-text);
    border: 1px solid transparent;
    font-weight: 500;
    border-radius: var(--admin-radius-sm);
    transition: background-color 0.15s ease;
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: var(--admin-surface-soft);
    color: var(--admin-text);
}

/* Flatten primary inside admin-light */
.admin-light .btn-primary {
    box-shadow: none;
    border-radius: var(--admin-radius-sm);
    font-weight: 500;
}

/* Bordered light button (replaces the heavy "btn-white bg-body border shadow-sm" combo) */
.btn-outline-soft {
    background: var(--admin-surface);
    color: var(--admin-text);
    border: 1px solid var(--admin-border);
    font-weight: 500;
    border-radius: var(--admin-radius-sm);
}
.btn-outline-soft:hover,
.btn-outline-soft:focus-visible {
    background: var(--admin-surface-soft);
    border-color: rgba(15, 23, 42, 0.14);
    color: var(--admin-text);
}

/* =========================================================================
   Badges — three states only (neutral, accent, status)
   ========================================================================= */
.badge-neutral { background: rgba(15, 23, 42, 0.08); color: var(--admin-text-muted); font-weight: 500; padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; }
.badge-accent  { background: var(--admin-accent-soft); color: var(--admin-accent); font-weight: 500; padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; }
.badge-success { background: var(--admin-success-soft); color: var(--admin-success); font-weight: 500; padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; }
.badge-warning { background: var(--admin-warning-soft); color: var(--admin-warning); font-weight: 500; padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; }
.badge-danger  { background: var(--admin-danger-soft);  color: var(--admin-danger);  font-weight: 500; padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; }

/* =========================================================================
   Page header (.al-page-header)
   ========================================================================= */
.al-page-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--admin-border);
}
@media (min-width: 768px) {
    .al-page-header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1.5rem;
    }
}
.al-page-header__titles { min-width: 0; }
.al-page-header__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--admin-text);
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.01em;
}
.al-page-header__subtitle {
    color: var(--admin-text-muted);
    font-size: 0.9rem;
    margin: 0.25rem 0 0;
}
.al-page-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* =========================================================================
   Stat card (.al-stat-card)
   ========================================================================= */
.al-stat-card {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    padding: 1.25rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.al-stat-card:hover {
    border-color: rgba(15, 23, 42, 0.14);
    box-shadow: var(--admin-shadow);
}
.al-stat-card__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--admin-text-muted);
    font-weight: 600;
    margin: 0;
}
.al-stat-card__value {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--admin-text);
    line-height: 1.1;
    margin: 0.5rem 0 0;
    letter-spacing: -0.02em;
}
.al-stat-card__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.al-stat-card__delta {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--admin-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.al-stat-card__delta.up   { color: var(--admin-success); }
.al-stat-card__delta.down { color: var(--admin-danger); }

/* Tone variants — left accent strip + tinted icon. Used sparingly to flag
   stat cards in actionable states (live, warning, danger). */
.al-stat-card--success { border-left: 3px solid var(--admin-success); }
.al-stat-card--success .al-stat-card__icon {
    background: var(--admin-success-soft);
    color: var(--admin-success);
}
.al-stat-card--warning { border-left: 3px solid var(--admin-warning); }
.al-stat-card--warning .al-stat-card__icon {
    background: var(--admin-warning-soft);
    color: var(--admin-warning);
}
.al-stat-card--danger  { border-left: 3px solid var(--admin-danger); }
.al-stat-card--danger .al-stat-card__icon {
    background: var(--admin-danger-soft);
    color: var(--admin-danger);
}

/* =========================================================================
   Quick action tile (.al-quick-action)
   ========================================================================= */
.al-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
    padding: 1rem 0.75rem;
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    color: var(--admin-text);
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    height: 100%;
}
.al-quick-action:hover,
.al-quick-action:focus-visible {
    border-color: var(--admin-accent-ring);
    transform: translateY(-1px);
    box-shadow: var(--admin-shadow);
    color: var(--admin-text);
    text-decoration: none;
}
.al-quick-action:focus-visible {
    outline: 2px solid var(--admin-accent-ring);
    outline-offset: 2px;
}
.al-quick-action__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
.al-quick-action__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--admin-text);
}
.al-quick-action__hint {
    font-size: 0.7rem;
    color: var(--admin-text-muted);
}

/* =========================================================================
   Surface card (generic light card, replaces heavy "card border-0 shadow-sm")
   ========================================================================= */
.al-card {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-lg);
    box-shadow: var(--admin-shadow-sm);
}
.al-card.al-hover {
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.al-card.al-hover:hover {
    border-color: var(--admin-accent-ring);
    box-shadow: var(--admin-shadow-lg);
    transform: translateY(-1px);
}
.al-card-body { padding: 1.25rem; }
.al-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--admin-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.al-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--admin-text);
    margin: 0;
}

/* =========================================================================
   Table chrome (light, breathable rows)
   ========================================================================= */
.admin-light .table {
    --bs-table-bg: transparent;
    color: var(--admin-text);
}
.admin-light .table > :not(caption) > * > * {
    padding: 14px 16px;
    border-bottom-color: var(--admin-border-soft);
}
.admin-light .table thead th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--admin-text-muted);
    font-weight: 600;
    background: transparent;
    border-bottom: 1px solid var(--admin-border);
}
.admin-light .table > tbody > tr:hover {
    background: var(--admin-surface-soft);
}

/* =========================================================================
   Filter button overrides — make the active state actually visible.
   The legacy admin-nav-pill/filter-btn active states relied on a white
   surface + drop shadow which the compatibility layer flattens, leaving
   no clear "selected" affordance.
   ========================================================================= */
.admin-light .admin-nav-pills {
    background: var(--admin-surface-soft);
    border: 1px solid var(--admin-border-soft);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    display: inline-flex;
    flex-wrap: wrap;
}
.admin-light .admin-nav-pill {
    border-radius: 999px;
    padding: 7px 16px;
    color: var(--admin-text-muted);
    font-weight: 500;
    background: transparent;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.admin-light .admin-nav-pill:hover:not(.active),
.admin-light .admin-nav-pill:focus-visible:not(.active) {
    background: rgba(15, 23, 42, 0.04);
    color: var(--admin-text);
}
.admin-light .admin-nav-pill.active {
    background: var(--admin-accent);
    color: #fff !important;
    font-weight: 600;
    box-shadow: none;
}
.admin-light .admin-nav-pill.active .badge,
.admin-light .admin-nav-pill.active .badge-accent,
.admin-light .admin-nav-pill.active .badge-neutral {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

/* Filter dropdown buttons (.filter-btn) — bordered when inactive,
   accent-tinted when an option is applied / dropdown is open. */
.admin-light .filter-btn,
.admin-light .admin-filter-btn {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
    border-radius: var(--admin-radius-sm);
    padding: 8px 14px;
    font-weight: 500;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    box-shadow: none;
}
.admin-light .filter-btn:hover,
.admin-light .admin-filter-btn:hover {
    background: var(--admin-surface-soft);
    border-color: rgba(15, 23, 42, 0.16);
    color: var(--admin-text);
}
.admin-light .filter-btn[aria-expanded="true"],
.admin-light .admin-filter-btn[aria-expanded="true"],
.admin-light .filter-btn.has-value,
.admin-light .admin-filter-btn.has-value {
    background: var(--admin-accent-soft);
    border-color: var(--admin-accent-ring);
    color: var(--admin-accent);
}

/* Dropdown active-item: clear accent fill (was washed-out subtle blue) */
.admin-light .filter-dropdown .dropdown-item.active,
.admin-light .filter-dropdown .dropdown-item:active,
.admin-light .dropdown-menu .dropdown-item.active {
    background: var(--admin-accent);
    color: #fff !important;
}
.admin-light .filter-dropdown .dropdown-item.active i,
.admin-light .dropdown-menu .dropdown-item.active i {
    color: #fff !important;
}

/* =========================================================================
   Segmented control (.al-segmented) — replaces the heavy btn-group
   bg-body-tertiary pattern used on filter toolbars
   ========================================================================= */
.al-segmented {
    display: inline-flex;
    background: var(--admin-surface-soft);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}
.al-segmented__btn {
    border: 0;
    background: transparent;
    color: var(--admin-text-muted);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.al-segmented__btn:hover,
.al-segmented__btn:focus-visible {
    color: var(--admin-text);
}
.al-segmented__btn.active {
    background: var(--admin-surface);
    color: var(--admin-text);
    box-shadow: var(--admin-shadow-sm);
}

/* =========================================================================
   Subtle badge variants used by approval pages (Leave types, etc.)
   The C# helpers return these class names — they previously had no CSS
   so the pills rendered invisible.
   ========================================================================= */
.badge-subtle-info,
.badge-subtle-primary {
    background-color: var(--admin-accent-soft);
    color: var(--admin-accent);
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.badge-subtle-success {
    background-color: var(--admin-success-soft);
    color: var(--admin-success);
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.badge-subtle-warning {
    background-color: var(--admin-warning-soft);
    color: var(--admin-warning);
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.badge-subtle-danger {
    background-color: var(--admin-danger-soft);
    color: var(--admin-danger);
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.badge-subtle-purple {
    background-color: rgba(139, 92, 246, 0.10);
    color: #7c3aed;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.badge-subtle-secondary {
    background-color: rgba(15, 23, 42, 0.06);
    color: var(--admin-text-muted);
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* =========================================================================
   Approval-page table polish — applied to all admin pages by default,
   overridable per-page if needed.
   ========================================================================= */
.admin-light .table.table-hover > tbody > tr {
    transition: background-color 0.15s ease;
}
.admin-light .table.table-hover > tbody > tr.cursor-pointer:hover {
    background-color: var(--admin-surface-soft);
}

/* Status pill convention (replaces ad-hoc bg-* badge usage on approval pages) */
.admin-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-status-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}
.admin-status-pill.pending  { background: var(--admin-warning-soft); color: var(--admin-warning); }
.admin-status-pill.approved { background: var(--admin-success-soft); color: var(--admin-success); }
.admin-status-pill.rejected { background: var(--admin-danger-soft);  color: var(--admin-danger); }
.admin-status-pill.cancelled,
.admin-status-pill.canceled { background: rgba(15, 23, 42, 0.06); color: var(--admin-text-muted); }

/* Compact action button group used in approval rows */
.admin-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.admin-row-actions .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--admin-radius-sm);
}
.admin-row-actions .btn.btn-with-label {
    width: auto;
    padding: 0 12px;
    gap: 6px;
}
.admin-row-actions .btn-approve {
    background: var(--admin-success-soft);
    color: var(--admin-success);
    border: 1px solid transparent;
}
.admin-row-actions .btn-approve:hover,
.admin-row-actions .btn-approve:focus-visible {
    background: rgba(22, 163, 74, 0.16);
    color: #15803d;
}
.admin-row-actions .btn-reject {
    background: var(--admin-danger-soft);
    color: var(--admin-danger);
    border: 1px solid transparent;
}
.admin-row-actions .btn-reject:hover,
.admin-row-actions .btn-reject:focus-visible {
    background: rgba(220, 38, 38, 0.16);
    color: #b91c1c;
}
.admin-row-actions .btn-undo {
    background: var(--admin-warning-soft);
    color: var(--admin-warning);
    border: 1px solid transparent;
}
.admin-row-actions .btn-undo:hover,
.admin-row-actions .btn-undo:focus-visible {
    background: rgba(217, 119, 6, 0.18);
    color: #b45309;
}
.admin-row-actions .btn-view {
    background: var(--admin-surface);
    color: var(--admin-text-muted);
    border: 1px solid var(--admin-border);
}
.admin-row-actions .btn-view:hover,
.admin-row-actions .btn-view:focus-visible {
    background: var(--admin-surface-soft);
    color: var(--admin-text);
    border-color: rgba(15, 23, 42, 0.14);
}

/* Avatar circle convention for approval rows */
.admin-row-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
    flex-shrink: 0;
    overflow: hidden;
}
.admin-row-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================================================
   Shared Pagination (Components/Common/Pagination.razor) — admin-light skin
   The component renders Bootstrap .pagination markup. We re-skin it here so
   it sits naturally inside the lighter admin chrome.
   ========================================================================= */
.admin-light .pagination {
    --bs-pagination-padding-x: 10px;
    --bs-pagination-padding-y: 6px;
    --bs-pagination-color: var(--admin-text-muted);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: transparent;
    --bs-pagination-border-radius: var(--admin-radius-sm);
    --bs-pagination-hover-color: var(--admin-accent);
    --bs-pagination-hover-bg: var(--admin-surface-soft);
    --bs-pagination-hover-border-color: transparent;
    --bs-pagination-focus-color: var(--admin-accent);
    --bs-pagination-focus-bg: var(--admin-surface-soft);
    --bs-pagination-focus-box-shadow: 0 0 0 2px var(--admin-accent-ring);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--admin-accent);
    --bs-pagination-active-border-color: var(--admin-accent);
    --bs-pagination-disabled-color: var(--admin-text-subtle);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: transparent;
    gap: 4px;
}
.admin-light .pagination .page-item .page-link {
    border-radius: var(--admin-radius-sm);
    font-weight: 500;
    min-width: 34px;
    text-align: center;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.admin-light .pagination .page-item.active .page-link,
.admin-light .pagination .page-item .page-link[aria-current="page"] {
    background: var(--admin-accent);
    color: #fff;
    border-color: var(--admin-accent);
    font-weight: 600;
    box-shadow: none;
}
.admin-light .pagination .page-item.disabled .page-link {
    background: transparent;
    color: var(--admin-text-subtle);
    opacity: 0.55;
}
.admin-light .pagination-sm .page-link {
    padding: 4px 9px;
    font-size: 0.82rem;
}

/* =========================================================================
   Approval tabs (.approval-tabs) — replaces the old All Pending hub
   ========================================================================= */
.approval-tabs {
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-lg);
    padding: 6px;
    overflow: hidden;
}
.approval-tabs__scroll {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.approval-tabs__scroll::-webkit-scrollbar { height: 4px; }
.approval-tabs__scroll::-webkit-scrollbar-thumb { background: var(--admin-border); border-radius: 4px; }

.approval-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 8px 14px;
    border-radius: var(--admin-radius-sm);
    color: var(--admin-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
    border: 1px solid transparent;
}
.approval-tab:hover,
.approval-tab:focus-visible {
    background: var(--admin-surface-soft);
    color: var(--admin-text);
    text-decoration: none;
}
.approval-tab.active {
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
}
.approval-tab i {
    font-size: 0.95rem;
    opacity: 0.8;
}
.approval-tab.active i {
    opacity: 1;
}
.approval-tab__badge {
    background: rgba(15, 23, 42, 0.08);
    color: var(--admin-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    line-height: 1.5;
    min-width: 18px;
    text-align: center;
}
.approval-tab.active .approval-tab__badge {
    background: var(--admin-accent);
    color: #fff;
}

/* On smaller screens, hide labels and just show icon + badge */
@media (max-width: 540px) {
    .approval-tab__label {
        display: none;
    }
    .approval-tab {
        padding: 8px 10px;
    }
}

/* =========================================================================
   Spinning icon helper (refresh buttons)
   ========================================================================= */
.admin-spin {
    animation: admin-spin-anim 0.7s linear infinite;
    display: inline-block;
}
@keyframes admin-spin-anim {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* =========================================================================
   Compatibility layer — soften legacy admin patterns inside .admin-light.
   These rules let unmigrated pages inherit the lighter look without
   touching their markup. Per-page rewrites are still preferred long-term
   but this keeps the visual language consistent everywhere today.
   ========================================================================= */

/* Cards: flatten heavy shadow-sm/shadow-lg, normalize border to a hairline */
.admin-light .card.shadow-sm,
.admin-light .card.shadow,
.admin-light .card.shadow-lg {
    box-shadow: var(--admin-shadow-sm) !important;
}
.admin-light .card.border-0 {
    border: 1px solid var(--admin-border) !important;
}
.admin-light .card {
    border-radius: var(--admin-radius-lg);
}

/* Stat-card colored icon halos — neutralize rainbow into a single accent.
   Targets the common Bootstrap "bg-X bg-opacity-10 text-X" combo when used
   as a stat-card icon background. Plain badges/chips elsewhere are not
   affected because they don't appear inside a card body's first child. */
.admin-light .card-body > .d-flex .bg-primary.bg-opacity-10,
.admin-light .card-body > .d-flex .bg-info.bg-opacity-10,
.admin-light .card-body > .d-flex .bg-secondary.bg-opacity-10,
.admin-light .card-body > .d-flex .bg-success.bg-opacity-10,
.admin-light .card-body > .d-flex .bg-warning.bg-opacity-10,
.admin-light .card-body > .d-flex .bg-danger.bg-opacity-10 {
    background-color: var(--admin-accent-soft) !important;
    color: var(--admin-accent) !important;
}
.admin-light .card-body > .d-flex .bg-primary.bg-opacity-10 i,
.admin-light .card-body > .d-flex .bg-info.bg-opacity-10 i,
.admin-light .card-body > .d-flex .bg-secondary.bg-opacity-10 i,
.admin-light .card-body > .d-flex .bg-success.bg-opacity-10 i,
.admin-light .card-body > .d-flex .bg-warning.bg-opacity-10 i,
.admin-light .card-body > .d-flex .bg-danger.bg-opacity-10 i {
    color: var(--admin-accent) !important;
}

/* Soften the heavy "card.bg-{color}.bg-opacity-10" full-card tints
   (e.g. admin-stat-card pattern in OvertimeApproval) — make them subtle */
.admin-light .card.bg-primary.bg-opacity-10,
.admin-light .card.bg-info.bg-opacity-10,
.admin-light .card.bg-success.bg-opacity-10,
.admin-light .card.bg-warning.bg-opacity-10,
.admin-light .card.bg-danger.bg-opacity-10,
.admin-light .card.bg-secondary.bg-opacity-10 {
    background-color: var(--admin-surface) !important;
    border: 1px solid var(--admin-border);
}

/* Flatten primary buttons. modern-theme.css turns .btn-primary into a soft
   tinted style (blue text on faint blue), so we have to override color too
   or text becomes invisible on our solid accent fill. */
.admin-light .btn-primary,
.admin-light a.btn-primary {
    background-color: var(--admin-accent) !important;
    border-color: var(--admin-accent) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.admin-light .btn-primary i,
.admin-light a.btn-primary i {
    color: #fff !important;
}
.admin-light .btn-primary:hover,
.admin-light .btn-primary:focus-visible,
.admin-light a.btn-primary:hover,
.admin-light a.btn-primary:focus-visible {
    background-color: var(--admin-accent-hover) !important;
    border-color: var(--admin-accent-hover) !important;
    color: #fff !important;
    transform: none;
}

/* Convert generic btn-light into the soft-outline style */
.admin-light .btn-light {
    background-color: var(--admin-surface);
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
    box-shadow: none !important;
    font-weight: 500;
}
.admin-light .btn-light:hover,
.admin-light .btn-light:focus-visible {
    background-color: var(--admin-surface-soft);
    border-color: rgba(15, 23, 42, 0.14);
    color: var(--admin-text);
}

/* Outline-primary becomes a subtle tinted button */
.admin-light .btn-outline-primary {
    background: var(--admin-accent-soft);
    color: var(--admin-accent);
    border-color: transparent;
    box-shadow: none !important;
}
.admin-light .btn-outline-primary:hover,
.admin-light .btn-outline-primary:focus-visible {
    background: rgba(0, 86, 179, 0.14);
    color: var(--admin-accent-hover);
    border-color: transparent;
}

/* Override stale gradient hero blocks if a page still has them */
.admin-light .gradient-hero,
.admin-light .admin-hero-gradient,
.admin-light .welcome-panel,
.admin-light .admin-welcome-card {
    background: var(--admin-surface) !important;
    color: var(--admin-text) !important;
    border: 1px solid var(--admin-border);
    box-shadow: var(--admin-shadow-sm);
}
.admin-light .welcome-panel * {
    color: var(--admin-text) !important;
}

/* Card headers — drop heavy "bg-body" + thick borders */
.admin-light .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--admin-border-soft);
}

/* Soften "bg-body-tertiary" / "bg-body" used as card backgrounds */
.admin-light .bg-body-tertiary,
.admin-light .bg-body {
    background-color: transparent !important;
}

/* Modals — lighter chrome */
.admin-light .modal-content,
.modal .modal-content {
    border-radius: var(--admin-radius-lg);
    border: 1px solid var(--admin-border);
}
.admin-light .modal-header {
    border-bottom: 1px solid var(--admin-border-soft);
}
.admin-light .modal-footer {
    border-top: 1px solid var(--admin-border-soft);
}

/* =========================================================================
   Subtle everywhere — convert filled buttons & badges into soft tinted
   variants inside .admin-light. The user explicitly asked for everything
   to feel quieter; this rules out shouty success-green / danger-red surfaces
   and replaces them with low-saturation tints + matching text color.
   ========================================================================= */

/* Filled colored buttons → soft tinted */
.admin-light .btn-success {
    background-color: var(--admin-success-soft) !important;
    border-color: transparent !important;
    color: var(--admin-success) !important;
    box-shadow: none !important;
    font-weight: 500;
}
.admin-light .btn-success:hover,
.admin-light .btn-success:focus-visible {
    background-color: rgba(22, 163, 74, 0.16) !important;
    color: #15803d !important;
}

.admin-light .btn-danger {
    background-color: var(--admin-danger-soft) !important;
    border-color: transparent !important;
    color: var(--admin-danger) !important;
    box-shadow: none !important;
    font-weight: 500;
}
.admin-light .btn-danger:hover,
.admin-light .btn-danger:focus-visible {
    background-color: rgba(220, 38, 38, 0.16) !important;
    color: #b91c1c !important;
}

.admin-light .btn-warning {
    background-color: var(--admin-warning-soft) !important;
    border-color: transparent !important;
    color: var(--admin-warning) !important;
    box-shadow: none !important;
    font-weight: 500;
}
.admin-light .btn-warning:hover,
.admin-light .btn-warning:focus-visible {
    background-color: rgba(217, 119, 6, 0.18) !important;
    color: #b45309 !important;
}

.admin-light .btn-info {
    background-color: var(--admin-accent-soft) !important;
    border-color: transparent !important;
    color: var(--admin-accent) !important;
    box-shadow: none !important;
    font-weight: 500;
}
.admin-light .btn-info:hover,
.admin-light .btn-info:focus-visible {
    background-color: rgba(0, 86, 179, 0.16) !important;
    color: var(--admin-accent-hover) !important;
}

.admin-light .btn-secondary {
    background-color: rgba(15, 23, 42, 0.06) !important;
    border-color: transparent !important;
    color: var(--admin-text) !important;
    box-shadow: none !important;
    font-weight: 500;
}
.admin-light .btn-secondary:hover,
.admin-light .btn-secondary:focus-visible {
    background-color: rgba(15, 23, 42, 0.10) !important;
    color: var(--admin-text) !important;
}

.admin-light .btn-dark {
    background-color: rgba(15, 23, 42, 0.08) !important;
    border-color: transparent !important;
    color: var(--admin-text) !important;
    box-shadow: none !important;
    font-weight: 500;
}
.admin-light .btn-dark:hover,
.admin-light .btn-dark:focus-visible {
    background-color: rgba(15, 23, 42, 0.14) !important;
    color: var(--admin-text) !important;
}

/* Outline variants — also soft tinted, no harsh borders */
.admin-light .btn-outline-success {
    background: var(--admin-success-soft) !important;
    border-color: transparent !important;
    color: var(--admin-success) !important;
    box-shadow: none !important;
}
.admin-light .btn-outline-success:hover,
.admin-light .btn-outline-success:focus-visible {
    background: rgba(22, 163, 74, 0.16) !important;
    color: #15803d !important;
}

.admin-light .btn-outline-danger {
    background: var(--admin-danger-soft) !important;
    border-color: transparent !important;
    color: var(--admin-danger) !important;
    box-shadow: none !important;
}
.admin-light .btn-outline-danger:hover,
.admin-light .btn-outline-danger:focus-visible {
    background: rgba(220, 38, 38, 0.16) !important;
    color: #b91c1c !important;
}

.admin-light .btn-outline-warning {
    background: var(--admin-warning-soft) !important;
    border-color: transparent !important;
    color: var(--admin-warning) !important;
    box-shadow: none !important;
}
.admin-light .btn-outline-warning:hover,
.admin-light .btn-outline-warning:focus-visible {
    background: rgba(217, 119, 6, 0.18) !important;
    color: #b45309 !important;
}

.admin-light .btn-outline-info {
    background: var(--admin-accent-soft) !important;
    border-color: transparent !important;
    color: var(--admin-accent) !important;
    box-shadow: none !important;
}
.admin-light .btn-outline-info:hover,
.admin-light .btn-outline-info:focus-visible {
    background: rgba(0, 86, 179, 0.16) !important;
    color: var(--admin-accent-hover) !important;
}

.admin-light .btn-outline-secondary {
    background: transparent !important;
    border-color: var(--admin-border) !important;
    color: var(--admin-text-muted) !important;
    box-shadow: none !important;
}
.admin-light .btn-outline-secondary:hover,
.admin-light .btn-outline-secondary:focus-visible {
    background: var(--admin-surface-soft) !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    color: var(--admin-text) !important;
}

.admin-light .btn-outline-dark {
    background: transparent !important;
    border-color: var(--admin-border) !important;
    color: var(--admin-text) !important;
    box-shadow: none !important;
}
.admin-light .btn-outline-dark:hover,
.admin-light .btn-outline-dark:focus-visible {
    background: var(--admin-surface-soft) !important;
    color: var(--admin-text) !important;
}

/* Filled colored badges → soft tinted (the "shouty" pills become whispers) */
.admin-light .badge.bg-primary {
    background-color: var(--admin-accent-soft) !important;
    color: var(--admin-accent) !important;
    font-weight: 500;
    box-shadow: none;
}
.admin-light .badge.bg-success {
    background-color: var(--admin-success-soft) !important;
    color: var(--admin-success) !important;
    font-weight: 500;
    box-shadow: none;
}
.admin-light .badge.bg-danger {
    background-color: var(--admin-danger-soft) !important;
    color: var(--admin-danger) !important;
    font-weight: 500;
    box-shadow: none;
}
.admin-light .badge.bg-warning {
    background-color: var(--admin-warning-soft) !important;
    color: var(--admin-warning) !important;
    font-weight: 500;
    box-shadow: none;
}
.admin-light .badge.bg-info {
    background-color: var(--admin-accent-soft) !important;
    color: var(--admin-accent) !important;
    font-weight: 500;
    box-shadow: none;
}
.admin-light .badge.bg-secondary {
    background-color: rgba(15, 23, 42, 0.08) !important;
    color: var(--admin-text-muted) !important;
    font-weight: 500;
    box-shadow: none;
}
.admin-light .badge.bg-dark {
    background-color: rgba(15, 23, 42, 0.10) !important;
    color: var(--admin-text) !important;
    font-weight: 500;
    box-shadow: none;
}
.admin-light .badge.bg-light {
    background-color: var(--admin-surface-soft) !important;
    color: var(--admin-text-muted) !important;
    font-weight: 500;
    box-shadow: none;
}

/* Status pill components used across admin pages */
.admin-light .admin-pill-badge,
.admin-light .admin-nav-pill .badge,
.admin-light .admin-status-badge {
    background-color: var(--admin-accent-soft) !important;
    color: var(--admin-accent) !important;
    border: none !important;
    box-shadow: none !important;
}

/* "Subtle" Bootstrap variants get the same flat look as their solid cousins */
.admin-light .bg-success-subtle,
.admin-light .bg-success.bg-opacity-10 {
    background-color: var(--admin-success-soft) !important;
}
.admin-light .bg-danger-subtle,
.admin-light .bg-danger.bg-opacity-10 {
    background-color: var(--admin-danger-soft) !important;
}
.admin-light .bg-warning-subtle,
.admin-light .bg-warning.bg-opacity-10 {
    background-color: var(--admin-warning-soft) !important;
}
.admin-light .bg-info-subtle,
.admin-light .bg-info.bg-opacity-10 {
    background-color: var(--admin-accent-soft) !important;
}
.admin-light .bg-primary-subtle,
.admin-light .bg-primary.bg-opacity-10 {
    background-color: var(--admin-accent-soft) !important;
}
.admin-light .bg-secondary-subtle,
.admin-light .bg-secondary.bg-opacity-10 {
    background-color: rgba(15, 23, 42, 0.06) !important;
}

/* Border-color helpers used with subtle backgrounds — drop them */
.admin-light .border-success-subtle,
.admin-light .border-danger-subtle,
.admin-light .border-warning-subtle,
.admin-light .border-info-subtle,
.admin-light .border-primary-subtle,
.admin-light .border-secondary-subtle {
    border-color: var(--admin-border-soft) !important;
}

/* Cards that used to live on a dark gradient: text-white / bg-white tints
   would now sit on a light surface and become invisible. Re-tint them. */
.admin-light .card.text-white,
.admin-light .card .text-white {
    color: var(--admin-text) !important;
}
.admin-light .card .text-white-50,
.admin-light .card .text-white.text-opacity-50,
.admin-light .card .text-white.text-opacity-75 {
    color: var(--admin-text-muted) !important;
}
.admin-light .card .bg-white.bg-opacity-10,
.admin-light .card .bg-white.bg-opacity-15,
.admin-light .card .bg-white.bg-opacity-20,
.admin-light .card .bg-white.bg-opacity-25 {
    background-color: var(--admin-accent-soft) !important;
}
.admin-light .card .bg-white.bg-opacity-10 i,
.admin-light .card .bg-white.bg-opacity-25 i {
    color: var(--admin-accent) !important;
}
.admin-light .card .border-white,
.admin-light .card .border-white.border-opacity-10,
.admin-light .card .border-white.border-opacity-25 {
    border-color: var(--admin-border) !important;
}

/* Alert components — softer */
.admin-light .alert {
    border: 1px solid var(--admin-border-soft);
    box-shadow: none;
    border-radius: var(--admin-radius);
}
.admin-light .alert-success {
    background-color: var(--admin-success-soft);
    color: var(--admin-success);
    border-color: transparent;
}
.admin-light .alert-danger {
    background-color: var(--admin-danger-soft);
    color: var(--admin-danger);
    border-color: transparent;
}
.admin-light .alert-warning {
    background-color: var(--admin-warning-soft);
    color: var(--admin-warning);
    border-color: transparent;
}
.admin-light .alert-info,
.admin-light .alert-primary {
    background-color: var(--admin-accent-soft);
    color: var(--admin-accent);
    border-color: transparent;
}

/* =========================================================================
   Dark-mode parity
   ========================================================================= */
[data-bs-theme="dark"] {
    --admin-bg:           #0f172a;
    --admin-surface:      #1e293b;
    --admin-surface-soft: #273449;
    --admin-border:       rgba(255, 255, 255, 0.08);
    --admin-border-soft:  rgba(255, 255, 255, 0.04);
    --admin-text:         #e2e8f0;
    --admin-text-muted:   #94a3b8;
    --admin-text-subtle:  #64748b;
    --admin-accent-soft:  rgba(96, 165, 250, 0.14);
    --admin-accent:       #60a5fa;
    --admin-accent-hover: #93c5fd;
    --admin-success-soft: rgba(34, 197, 94, 0.16);
    --admin-warning-soft: rgba(251, 146, 60, 0.16);
    --admin-danger-soft:  rgba(248, 113, 113, 0.16);
}