/* ============================================================
   CLOCKIN+ DARK THEME
   Scoped under [data-bs-theme="dark"] to work with Bootstrap 5.3.8
   native dark mode support. Bootstrap automatically handles:
   - bg-white, bg-light, bg-body → dark variants
   - text-muted, text-dark, text-body → light variants
   - form controls, tables, alerts, badges, modals
   This file handles custom app styles only.
   ============================================================ */

/* --- Smooth transition on theme switch --- */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
    transition-delay: 0s !important;
}

/* ============ CSS CUSTOM PROPERTIES ============ */
[data-bs-theme="dark"] {
    /* Core theme variables */
    --theme-bg-dark: #121318;
    --theme-card-bg: rgba(30, 32, 40, 0.9);
    --theme-text-main: #e1e3e8;
    --theme-text-muted: #9ca3af;
    --theme-border-color: rgba(100, 116, 179, 0.2);

    /* Glass / Tech accents */
    --tech-glow-blue: 0 0 10px rgba(59, 130, 246, 0.3);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
    --glass-border: 1px solid rgba(100, 116, 179, 0.15);

    /* Semantic surfaces */
    --surface-primary: #1e2028;
    --surface-secondary: #262830;
    --surface-elevated: #2a2d35;
    --border-subtle: rgba(255, 255, 255, 0.08);

    /* Skeleton loader */
    --skeleton-base: #2a2d35;
    --skeleton-highlight: #3a3d45;
}

/* ============ BASE OVERRIDES ============ */
[data-bs-theme="dark"] .card {
    background-color: var(--surface-primary);
    border-color: var(--border-subtle);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

[data-bs-theme="dark"] .card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

[data-bs-theme="dark"] .card-header {
    border-bottom-color: var(--border-subtle);
}

[data-bs-theme="dark"] .glass-card {
    background: var(--theme-card-bg);
    border-color: rgba(100, 116, 179, 0.15);
}

/* ============ FORM CONTROLS ============ */
[data-bs-theme="dark"] .form-control {
    border-color: var(--border-subtle);
    background-color: var(--surface-secondary);
    color: var(--theme-text-main);
}

[data-bs-theme="dark"] .form-control:focus {
    border-color: var(--bs-primary);
    background-color: var(--surface-secondary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--theme-text-muted);
    opacity: 0.7;
}

[data-bs-theme="dark"] .form-select {
    border-color: var(--border-subtle);
    background-color: var(--surface-secondary);
    color: var(--theme-text-main);
}

/* ============ DROPDOWN ============ */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--surface-elevated);
    border-color: var(--border-subtle);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--theme-text-main);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: rgba(59, 130, 246, 0.1);
    color: #93bbfc;
}

[data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--border-subtle);
}

/* ============ HEADERS (Main, Portal, Admin) ============ */
[data-bs-theme="dark"] .main-header {
    background: rgba(30, 32, 40, 0.95);
    border-bottom-color: var(--border-subtle);
}

[data-bs-theme="dark"] .portal-header {
    background: rgba(30, 32, 40, 0.95);
    border-bottom-color: var(--border-subtle);
}

[data-bs-theme="dark"] .mobile-top-bar {
    background: rgba(30, 32, 40, 0.97);
    border-bottom-color: var(--border-subtle);
}

/* Mobile headers — override the !important in modern-theme.css */
@media (max-width: 767.98px) {
    [data-bs-theme="dark"] [class*="-mobile-header"] {
        background: rgba(30, 32, 40, 0.98) !important;
    }
}

/* ============ USER BUTTON / MENU ============ */
[data-bs-theme="dark"] .user-button {
    background: var(--surface-secondary);
    border-color: var(--border-subtle);
}

[data-bs-theme="dark"] .user-button:hover {
    background: var(--surface-elevated);
    border-color: rgba(59, 130, 246, 0.25);
}

[data-bs-theme="dark"] .portal-user-btn {
    background: var(--surface-secondary);
    border-color: var(--border-subtle);
}

[data-bs-theme="dark"] .portal-user-btn:hover {
    background: var(--surface-elevated);
    border-color: rgba(59, 130, 246, 0.25);
}

/* ============ HEADER NAV ITEMS ============ */
[data-bs-theme="dark"] .header-nav .nav-item:hover {
    background: rgba(59, 130, 246, 0.1);
}

[data-bs-theme="dark"] .header-nav .nav-item.active {
    background: rgba(59, 130, 246, 0.15);
}

[data-bs-theme="dark"] .portal-nav-item:hover {
    background: rgba(59, 130, 246, 0.1);
}

[data-bs-theme="dark"] .portal-nav-item.active {
    background: rgba(59, 130, 246, 0.15);
}

/* OrgLogo component text */
[data-bs-theme="dark"] .org-logo-name {
    color: #f3f4f6 !important;
}

.admin-sidebar .org-logo-name {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .portal-more-menu {
    background: #1a1d23;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .portal-more-menu .dropdown-item {
    color: #d1d5db;
}

[data-bs-theme="dark"] .portal-more-menu .dropdown-item:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #6ea8fe;
}

[data-bs-theme="dark"] .portal-more-menu .dropdown-item i {
    color: #6b7280;
}

[data-bs-theme="dark"] .portal-more-menu .dropdown-item:hover i {
    color: #6ea8fe;
}

[data-bs-theme="dark"] .portal-more-menu .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .btn-header.outline:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ============ USER MENU DROPDOWN ============ */
[data-bs-theme="dark"] .user-menu .dropdown-menu,
[data-bs-theme="dark"] .portal-user-menu .dropdown-menu,
[data-bs-theme="dark"] .portal-dropdown {
    background-color: var(--surface-elevated);
    border-color: var(--border-subtle);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .user-menu .dropdown-item:hover,
[data-bs-theme="dark"] .portal-user-menu .dropdown-item:hover,
[data-bs-theme="dark"] .portal-dropdown .dropdown-item:hover {
    background: rgba(59, 130, 246, 0.1);
}

[data-bs-theme="dark"] .user-menu .dropdown-divider,
[data-bs-theme="dark"] .portal-user-menu .dropdown-divider,
[data-bs-theme="dark"] .portal-dropdown .dropdown-divider {
    border-color: var(--border-subtle);
}

/* ============ SKELETON SHIMMER ============ */
[data-bs-theme="dark"] .skeleton-shimmer {
    background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);
    background-size: 200% 100%;
}

/* ============ SYMBOL LABELS ============ */
[data-bs-theme="dark"] .symbol .symbol-label {
    background-color: var(--surface-secondary);
    color: var(--theme-text-muted);
}

/* ============ STAT CARDS ============ */
[data-bs-theme="dark"] .stat-card-value {
    color: var(--theme-text-main);
}

/* ============ LOADING INDICATOR ============ */
[data-bs-theme="dark"] #app-loading {
    background: #121318 !important;
}

[data-bs-theme="dark"] #app-loading p {
    color: var(--theme-text-muted) !important;
}

/* ============ MOBILE BOTTOM NAV ============ */
[data-bs-theme="dark"] .mobile-nav {
    background: rgba(30, 32, 40, 0.95) !important;
    border-top-color: var(--border-subtle) !important;
}

/* ============ MORE MENU (Bottom Sheet) ============ */
[data-bs-theme="dark"] .more-menu {
    background: var(--surface-primary) !important;
}

[data-bs-theme="dark"] .more-header {
    border-bottom-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .close-btn {
    background: var(--surface-secondary) !important;
    color: var(--theme-text-muted) !important;
}

[data-bs-theme="dark"] .more-item:active {
    background: rgba(59, 130, 246, 0.1) !important;
}

[data-bs-theme="dark"] .item-badge {
    border-color: var(--surface-primary) !important;
}

[data-bs-theme="dark"] .more-footer {
    border-top-color: var(--border-subtle) !important;
}

/* ============ PORTAL SHARED (mobile headers) ============ */
[data-bs-theme="dark"] .portal-mobile-header {
    background: rgba(30, 32, 40, 0.98) !important;
    border-bottom-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .portal-mobile-header-content {
    color: var(--theme-text-main);
}

/* ============ ADMIN TOP BAR (light area) ============ */
[data-bs-theme="dark"] .admin-top-header {
    background: var(--surface-primary) !important;
    border-bottom-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .admin-content-area {
    background: var(--theme-bg-dark) !important;
}

[data-bs-theme="dark"] .admin-mobile-header {
    background: rgba(30, 32, 40, 0.97) !important;
    border-bottom-color: var(--border-subtle) !important;
}

/* ============ ALERTS ============ */
[data-bs-theme="dark"] .alert {
    border-color: var(--border-subtle);
}

/* ============ MODAL ============ */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--surface-primary);
    border-color: var(--border-subtle);
}

/* ============ TABLE ============ */
[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    color: var(--theme-text-main);
    border-color: var(--border-subtle);
}

/* ============ TOAST ============ */
[data-bs-theme="dark"] .toast-custom,
[data-bs-theme="dark"] .toast {
    background: var(--surface-elevated) !important;
    color: var(--theme-text-main) !important;
    border-color: var(--border-subtle) !important;
}

/* ============ RECONNECT MODAL ============ */
[data-bs-theme="dark"] .reconnect-card {
    background: var(--surface-primary) !important;
}

/* ============ LIST GROUP ============ */
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--surface-primary);
    border-color: var(--border-subtle);
    color: var(--theme-text-main);
}

[data-bs-theme="dark"] .list-group-item-action:hover {
    background-color: var(--surface-secondary);
}

/* ============ HOVER OPACITY FIX ============ */
[data-bs-theme="dark"] .hover-opacity-20:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* ============ BREADCRUMB ============ */
[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--theme-text-muted);
}

/* ============ BORDER UTILITY OVERRIDES ============ */
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end {
    border-color: var(--border-subtle) !important;
}

/* ============ RECOGNITION SPECIFIC ============ */

/* Recognition card action buttons */
[data-bs-theme="dark"] .card-action-btn:hover {
    background: var(--surface-secondary) !important;
    color: var(--theme-text-main) !important;
}

/* Points balance card */
[data-bs-theme="dark"] .balance-icon-wrapper {
    background: rgba(251, 192, 45, 0.15) !important;
}

[data-bs-theme="dark"] .budget-stat-card {
    background: var(--surface-secondary) !important;
    border-color: var(--border-subtle) !important;
}

/* Recognition dashboard */
[data-bs-theme="dark"] .points-card,
[data-bs-theme="dark"] .activity-card,
[data-bs-theme="dark"] .leaderboard-card {
    background: var(--surface-primary);
    border-color: var(--border-subtle);
}

[data-bs-theme="dark"] .recognition-item {
    border-bottom-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .recognition-avatar {
    background: linear-gradient(145deg, #4a5568 0%, #2d3748 100%) !important;
}

/* Feed compose box */
[data-bs-theme="dark"] .compose-card {
    background: var(--surface-primary) !important;
}

/* Card stats row */
[data-bs-theme="dark"] .card-stats-row {
    border-bottom-color: var(--border-subtle) !important;
}

/* ============ UTILITY: bg-theme-surface ============ */
/* Use instead of inline style="background: #f8f9fa" or style="background: white" */
.bg-theme-surface {
    background-color: #f8f9fa;
}

[data-bs-theme="dark"] .bg-theme-surface {
    background-color: var(--theme-bg-dark);
}

.bg-theme-card {
    background-color: #ffffff;
}

[data-bs-theme="dark"] .bg-theme-card {
    background-color: var(--surface-primary);
}

/* ============ THEME TOGGLE BUTTON ============ */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: transparent;
    color: var(--theme-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    font-size: 1.05rem;
}

.theme-toggle-btn:hover {
    background: rgba(0, 86, 179, 0.08);
    color: var(--bs-primary);
    border-color: rgba(0, 86, 179, 0.2);
}

[data-bs-theme="dark"] .theme-toggle-btn {
    border-color: var(--border-subtle);
}

[data-bs-theme="dark"] .theme-toggle-btn:hover {
    background: rgba(59, 130, 246, 0.12);
    color: #93bbfc;
    border-color: rgba(59, 130, 246, 0.25);
}

/* More menu theme item */
.more-icon.theme {
    background: rgba(108, 117, 125, 0.1);
    color: var(--bs-secondary, #6c757d);
}

[data-bs-theme="dark"] .more-icon.theme {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
}

/* ============================================================
   PORTAL PAGES — DARK MODE OVERRIDES
   Covers portal-shared.css elements + employee portal pages
   ============================================================ */

/* --- Portal Shared: Mobile Stats Bar --- */
[data-bs-theme="dark"] .portal-mobile-stats-bar {
    background: rgba(30, 32, 40, 0.5);
    border-top-color: var(--border-subtle);
}

[data-bs-theme="dark"] .portal-stat-divider {
    background: var(--border-subtle);
}

/* --- Portal Shared: Mobile Toggle Bar --- */
[data-bs-theme="dark"] .portal-mobile-toggle-bar {
    background: rgba(30, 32, 40, 0.5);
    border-top-color: var(--border-subtle);
}

[data-bs-theme="dark"] .portal-toggle-item {
    border-color: var(--border-subtle);
}

[data-bs-theme="dark"] .portal-toggle-item.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.25);
}

/* --- Portal Shared: Filters Card --- */
[data-bs-theme="dark"] .portal-filters-card {
    background: var(--surface-primary);
    border-color: var(--border-subtle);
}

[data-bs-theme="dark"] .portal-filter-btn {
    background: var(--surface-secondary);
    border-color: var(--border-subtle);
}

[data-bs-theme="dark"] .portal-filter-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.25);
}

/* --- Portal Shared: Skeleton Cards --- */
[data-bs-theme="dark"] .portal-skeleton-card {
    background: var(--surface-primary);
    border-color: var(--border-subtle);
}

[data-bs-theme="dark"] .portal-skeleton-shimmer {
    background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);
    background-size: 200% 100%;
}

/* --- Portal Shared: List Items --- */
[data-bs-theme="dark"] .portal-list-item {
    background: var(--surface-primary);
    border-color: var(--border-subtle);
}

[data-bs-theme="dark"] .portal-list-item:hover {
    border-color: rgba(59, 130, 246, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* --- Portal Shared: View Toggle --- */
[data-bs-theme="dark"] .portal-view-toggle {
    background: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .portal-view-toggle .portal-toggle-btn.active {
    background: var(--surface-elevated);
    color: #93bbfc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* --- Portal Shared: Info Banners --- */
[data-bs-theme="dark"] .portal-info-banner.warning {
    background: rgba(251, 192, 45, 0.1);
    color: #fbbf24;
    border-color: rgba(251, 192, 45, 0.2);
}

/* --- Portal Shared: Empty State --- */
[data-bs-theme="dark"] .portal-empty-icon {
    background: rgba(59, 130, 246, 0.1);
}

/* --- Portal Shared: Desktop Buttons --- */
[data-bs-theme="dark"] .portal-btn-refresh {
    background: var(--surface-secondary);
    border-color: var(--border-subtle);
}

[data-bs-theme="dark"] .portal-btn-refresh:hover {
    background: var(--surface-elevated);
}

[data-bs-theme="dark"] .portal-btn-header-action {
    border-color: rgba(59, 130, 246, 0.25);
}

[data-bs-theme="dark"] .portal-btn-header-action:hover {
    background: rgba(59, 130, 246, 0.1);
}

/* ============ EMPLOYEE DASHBOARD ============ */

/* Stat Cards */
[data-bs-theme="dark"] .stat-card {
    background: var(--surface-primary);
    border-color: var(--border-subtle);
}

[data-bs-theme="dark"] .stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Section Blocks (Quick Actions, Recent Activity, More Options) */
[data-bs-theme="dark"] .section-block {
    background: var(--surface-primary);
    border-color: var(--border-subtle);
}

/* Action Items (Quick Actions grid) */
[data-bs-theme="dark"] .action-item {
    background: var(--surface-secondary);
}

[data-bs-theme="dark"] .action-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Activity Items (Recent Activity list) */
[data-bs-theme="dark"] .activity-item {
    background: var(--surface-secondary);
}

[data-bs-theme="dark"] .activity-item:hover {
    background: rgba(59, 130, 246, 0.08);
}

/* Option Items (More Options list) */
[data-bs-theme="dark"] .option-item {
    background: var(--surface-secondary);
}

[data-bs-theme="dark"] .option-item:hover {
    background: rgba(59, 130, 246, 0.08);
}

/* Admin option special gradient */
[data-bs-theme="dark"] .admin-option {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, var(--surface-secondary) 100%);
    border-color: rgba(59, 130, 246, 0.15);
}

[data-bs-theme="dark"] .admin-option:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-color: rgba(59, 130, 246, 0.3);
}

/* Profile button on mobile */
[data-bs-theme="dark"] .profile-btn {
    background: rgba(59, 130, 246, 0.12);
}

[data-bs-theme="dark"] .profile-btn:hover {
    background: rgba(59, 130, 246, 0.18);
}

/* Mobile Stats Bar (dashboard-specific) */
[data-bs-theme="dark"] .mobile-stats-bar {
    background: var(--surface-primary, #1e2028) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .stat-divider {
    background: var(--border-subtle);
}

/* View toggle button on mobile */
[data-bs-theme="dark"] .view-toggle-btn {
    background: var(--surface-secondary);
    color: var(--theme-text-muted);
}

/* ============ ATTENDANCE HISTORY / COMMON PAGE PATTERNS ============ */

/* History page background */
[data-bs-theme="dark"] .history-page {
    background: var(--theme-bg-dark);
}

/* Generic record/request cards used across portal pages */
[data-bs-theme="dark"] .record-card,
[data-bs-theme="dark"] .request-card,
[data-bs-theme="dark"] .leave-card,
[data-bs-theme="dark"] .overtime-card,
[data-bs-theme="dark"] .session-card,
[data-bs-theme="dark"] .wml-card {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .record-card:hover,
[data-bs-theme="dark"] .request-card:hover,
[data-bs-theme="dark"] .leave-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* Detail panels / expanded views */
[data-bs-theme="dark"] .detail-panel,
[data-bs-theme="dark"] .detail-card,
[data-bs-theme="dark"] .leave-detail-card,
[data-bs-theme="dark"] .wml-detail-card {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

/* Detail info rows with light backgrounds */
[data-bs-theme="dark"] .detail-row,
[data-bs-theme="dark"] .info-row,
[data-bs-theme="dark"] .leave-detail-row,
[data-bs-theme="dark"] .wml-detail-row {
    border-bottom-color: var(--border-subtle) !important;
}

/* ============ LEAVE & OVERTIME PAGES ============ */

/* Leave balance cards */
[data-bs-theme="dark"] .leave-balance-card,
[data-bs-theme="dark"] .balance-card {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

/* Leave calendar specific */
[data-bs-theme="dark"] .calendar-container,
[data-bs-theme="dark"] .calendar-grid,
[data-bs-theme="dark"] .calendar-card {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .calendar-day {
    background: var(--surface-secondary);
    border-color: var(--border-subtle);
}

[data-bs-theme="dark"] .calendar-day:hover {
    background: var(--surface-elevated);
}

[data-bs-theme="dark"] .calendar-day.today {
    border-color: rgba(59, 130, 246, 0.4);
}

/* Leave detail status banners */
[data-bs-theme="dark"] .leave-detail-status-banner {
    border-color: var(--border-subtle) !important;
}

/* ============ PAYROLL REPORT ============ */

[data-bs-theme="dark"] .report-card,
[data-bs-theme="dark"] .summary-card,
[data-bs-theme="dark"] .export-card {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .export-dropdown-item:hover {
    background: var(--surface-secondary) !important;
}

[data-bs-theme="dark"] .report-stat-card {
    background: var(--surface-secondary) !important;
}

/* ============ WORK MODE REQUEST LIST ============ */

[data-bs-theme="dark"] .wml-skeleton-card {
    background: var(--surface-primary) !important;
}

[data-bs-theme="dark"] .wml-list-item {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .wml-list-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* ============ GENERIC PORTAL PATTERNS ============ */

/* Any .page that uses a light bg */
[data-bs-theme="dark"] .portal-page,
[data-bs-theme="dark"] .leave-page,
[data-bs-theme="dark"] .overtime-page,
[data-bs-theme="dark"] .export-page,
[data-bs-theme="dark"] .settings-page,
[data-bs-theme="dark"] .report-page,
[data-bs-theme="dark"] .calendar-page,
[data-bs-theme="dark"] .wml-page,
[data-bs-theme="dark"] .sessions-page {
    background: var(--theme-bg-dark);
}

/* Sections with #f8f9fa background patterns */
[data-bs-theme="dark"] .info-section,
[data-bs-theme="dark"] .summary-section,
[data-bs-theme="dark"] .filter-section {
    background: var(--surface-secondary) !important;
}

/* Form cards on portal pages */
[data-bs-theme="dark"] .form-card,
[data-bs-theme="dark"] .form-section {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

/* Skeleton border fix for dashboard */
[data-bs-theme="dark"] .portal-skeleton [style*="border-bottom: 1px solid #f0f0f0"] {
    border-bottom-color: var(--border-subtle) !important;
}

/* ============ NOTIFICATION SETTINGS ============ */
[data-bs-theme="dark"] .notification-card,
[data-bs-theme="dark"] .settings-card {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

/* ============ ACTIVE SESSIONS ============ */
[data-bs-theme="dark"] .session-item {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

/* ============ HELP CENTER ============ */
[data-bs-theme="dark"] .help-card,
[data-bs-theme="dark"] .faq-card {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

/* ============ MY PROFILE ============ */
[data-bs-theme="dark"] .profile-card,
[data-bs-theme="dark"] .profile-section {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

/* ============ DATA EXPORT ============ */
[data-bs-theme="dark"] .export-option-card {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .export-option-card:hover {
    border-color: rgba(59, 130, 246, 0.25) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* ============ ATTENDANCE HISTORY SPECIFIC ============ */
[data-bs-theme="dark"] .view-toggle {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .toggle-btn.active {
    background: var(--surface-elevated) !important;
    color: #93bbfc !important;
}

[data-bs-theme="dark"] .skeleton-record {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .fix-modal-content,
[data-bs-theme="dark"] .detail-modal-content {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .detail-header {
    border-bottom-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .detail-close-btn {
    background: var(--surface-secondary) !important;
    color: var(--theme-text-muted) !important;
}

[data-bs-theme="dark"] .detail-close-btn:hover {
    background: var(--surface-elevated) !important;
}

[data-bs-theme="dark"] .detail-time-item,
[data-bs-theme="dark"] .detail-location-item {
    background: var(--surface-secondary) !important;
}

[data-bs-theme="dark"] .detail-footer {
    background: var(--surface-primary) !important;
    border-top-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .detail-btn-close:hover {
    background: var(--surface-secondary) !important;
}

/* ============ LEAVE REQUEST LIST SPECIFIC ============ */
[data-bs-theme="dark"] .leave-list-item,
[data-bs-theme="dark"] .leave-skeleton-card {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .leave-detail-section {
    background: var(--surface-secondary) !important;
}

[data-bs-theme="dark"] .leave-detail-footer {
    background: var(--surface-primary) !important;
    border-top-color: var(--border-subtle) !important;
}

/* ============ LEAVE CALENDAR SPECIFIC ============ */
[data-bs-theme="dark"] .cal-header {
    background: var(--surface-primary) !important;
}

[data-bs-theme="dark"] .cal-day-cell {
    background: var(--surface-secondary) !important;
    border-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .cal-day-cell.other-month {
    background: var(--theme-bg-dark) !important;
}

[data-bs-theme="dark"] .cal-legend-container {
    background: var(--surface-primary) !important;
}

/* ============ OVERTIME REQUEST LIST ============ */
[data-bs-theme="dark"] .ot-card,
[data-bs-theme="dark"] .ot-list-item,
[data-bs-theme="dark"] .ot-skeleton-card {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .ot-detail-card {
    background: var(--surface-primary) !important;
}

[data-bs-theme="dark"] .ot-detail-section {
    background: var(--surface-secondary) !important;
}

/* ============ HOLIDAY LIST ============ */
[data-bs-theme="dark"] .holiday-card,
[data-bs-theme="dark"] .holiday-item {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

/* ============ REQUEST FORM PAGES ============ */
[data-bs-theme="dark"] .form-wrapper,
[data-bs-theme="dark"] .request-form-card {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

/* ============ BROAD CATCH-ALL: ANY REMAINING WHITE BACKGROUNDS ============ */
/* Catches portal page elements that use common patterns */
[data-bs-theme="dark"] [class*="-card"]:not(.welcome-card):not(.btn):not([class*="badge"]) {
    --fallback-card-bg: var(--surface-primary);
}

/* Fix inline border colors in portal pages */
[data-bs-theme="dark"] [style*="border-bottom: 1px solid #f0f0f0"],
[data-bs-theme="dark"] [style*="border-top: 1px solid #f0f0f0"] {
    border-color: var(--border-subtle) !important;
}

/* ============ SCAN QR PAGE ============ */

/* OTP input boxes */
[data-bs-theme="dark"] .otp-input {
    background: var(--surface-secondary) !important;
    border-color: var(--border-subtle) !important;
    color: var(--theme-text-main) !important;
}

[data-bs-theme="dark"] .otp-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

[data-bs-theme="dark"] .otp-input.filled {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
}

[data-bs-theme="dark"] .otp-input:disabled {
    background: var(--surface-primary) !important;
}

[data-bs-theme="dark"] .otp-clear-btn {
    color: var(--theme-text-muted);
    border-color: var(--border-subtle);
}

[data-bs-theme="dark"] .otp-clear-btn:hover {
    color: #f87171;
    border-color: #f87171;
    background: rgba(248, 113, 113, 0.08);
}

/* Scan mode toggle pill container */
[data-bs-theme="dark"] .scan-mode-toggle {
    background: var(--surface-secondary) !important;
    border-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .scan-mode-toggle .scan-mode-active {
    background: var(--surface-elevated) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Time badge on scan page */
[data-bs-theme="dark"] .badge.bg-light.text-dark {
    background: var(--surface-secondary) !important;
    color: var(--theme-text-main) !important;
    border-color: var(--border-subtle) !important;
}

/* ============ RECOGNITION FEED — GLOBAL OVERRIDES ============ */
/* Override scoped .razor.css styles that :global() may not reach */

/* Suggestion items ("Who to Recognize") */
[data-bs-theme="dark"] .suggest-item {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .suggest-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .suggest-text {
    color: #9ca3af !important;
}

/* Trending hashtag items */
[data-bs-theme="dark"] .trending-hashtag-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .trending-hashtag-item .hashtag-name {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .trending-hashtag-item .hashtag-count {
    color: #9ca3af !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .trending-hashtag-item.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%) !important;
}

/* Top Earners card (LeaderboardSidebar) */
[data-bs-theme="dark"] .lb-card {
    background: #16181c !important;
}

[data-bs-theme="dark"] .lb-title {
    color: #e7e9ea !important;
}

[data-bs-theme="dark"] .lb-period-tabs {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .lb-period-tab {
    color: #71767b !important;
}

[data-bs-theme="dark"] .lb-period-tab:hover {
    color: #e7e9ea !important;
}

[data-bs-theme="dark"] .lb-period-tab.active {
    background: #2a2d35 !important;
    color: #e7e9ea !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .lb-item:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

[data-bs-theme="dark"] .lb-rank-num {
    color: #71767b !important;
}

[data-bs-theme="dark"] .lb-name {
    color: #e7e9ea !important;
}

[data-bs-theme="dark"] .lb-points-badge {
    background: rgba(29, 155, 240, 0.15) !important;
    color: #6ea8fe !important;
}

[data-bs-theme="dark"] .lb-top-1 {
    background: rgba(251, 191, 36, 0.04) !important;
}

[data-bs-theme="dark"] .lb-top-1:hover {
    background: rgba(251, 191, 36, 0.08) !important;
}

[data-bs-theme="dark"] .lb-top-1 .lb-points-badge {
    background: rgba(251, 191, 36, 0.12) !important;
    color: #fbbf24 !important;
}

[data-bs-theme="dark"] .lb-footer-link {
    color: #1d9bf0 !important;
}

[data-bs-theme="dark"] .lb-footer-link:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

[data-bs-theme="dark"] .lb-empty p {
    color: #e7e9ea !important;
}

[data-bs-theme="dark"] .lb-empty span {
    color: #71767b !important;
}

[data-bs-theme="dark"] .skeleton-circle-sm,
[data-bs-theme="dark"] .skeleton-avatar,
[data-bs-theme="dark"] .skeleton-text,
[data-bs-theme="dark"] .skeleton-badge {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Recognition card action buttons */
[data-bs-theme="dark"] .card-action-btn {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .card-action-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .card-action-btn.active {
    color: var(--bs-primary) !important;
}

/* Recognition card stats row */
[data-bs-theme="dark"] .card-stats-row {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .card-comment-link {
    color: #9ca3af !important;
}

/* Reaction picker */
[data-bs-theme="dark"] .rp-icon-circle {
    background: #2a2d35 !important;
    border-color: #2a2d35 !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .rp-popup {
    background: #2a2d35 !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .rp-option:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .rp-trigger {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .rp-summary-text {
    color: #9ca3af !important;
}

/* Reaction detail modal */
[data-bs-theme="dark"] .rdm-modal {
    background: #1e2028 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme="dark"] .rdm-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .rdm-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .rdm-close:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .rdm-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .rdm-tab {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .rdm-tab:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .rdm-user-row {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .rdm-user-row:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .rdm-user-name {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .rdm-reaction-badge {
    background: #2a2d35 !important;
    box-shadow: 0 0 0 2px #1e2028, 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Campaign card */
[data-bs-theme="dark"] .campaign-card {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .campaign-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .campaign-desc,
[data-bs-theme="dark"] .campaign-meta {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .campaign-progress-bar {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Recognition feed search bar */
[data-bs-theme="dark"] .search-toggle-btn {
    background: var(--surface-primary, #1e2028) !important;
    border-color: var(--border-subtle) !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .search-toggle-btn:hover {
    border-color: rgba(59, 130, 246, 0.4) !important;
    color: #93bbfc !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .search-input-container {
    background: var(--surface-primary, #1e2028) !important;
    border-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .search-input-container:focus-within {
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

[data-bs-theme="dark"] .search-input {
    color: var(--theme-text-main, #e1e3e8) !important;
}

[data-bs-theme="dark"] .search-close-btn {
    border-color: var(--border-subtle) !important;
    color: var(--theme-text-muted, #9ca3af) !important;
}

[data-bs-theme="dark"] .search-close-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--theme-text-main, #e1e3e8) !important;
}

[data-bs-theme="dark"] .search-indicator {
    background: rgba(59, 130, 246, 0.1) !important;
}

[data-bs-theme="dark"] .search-indicator-text {
    color: var(--theme-text-muted, #9ca3af) !important;
}

[data-bs-theme="dark"] .search-results-count {
    color: #93bbfc !important;
}

/* Recognition feed mobile stats bar */
[data-bs-theme="dark"] .recognition-mobile-header {
    background: rgba(30, 32, 40, 0.98) !important;
    border-bottom-color: var(--border-subtle) !important;
}

/* Budget stat cards */
[data-bs-theme="dark"] .budget-stat-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
    border-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .budget-stat-label {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .budget-stat-value {
    color: #93bbfc !important;
}

[data-bs-theme="dark"] .mobile-budget-item {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .mobile-budget-divider {
    background: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .mobile-stat-value {
    color: #e1e3e8 !important;
}

/* ============================================================
   COMPOSE BOX — Dark mode overrides
   ============================================================ */

[data-bs-theme="dark"] .compose-box {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .compose-box:hover {
    border-color: rgba(255, 255, 255, 0.14) !important;
}

[data-bs-theme="dark"] .compose-box.expanded {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

[data-bs-theme="dark"] .compose-collapsed-input {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .compose-collapsed-input:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

[data-bs-theme="dark"] .compose-collapsed-text {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .compose-textarea {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .compose-textarea::placeholder {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .compose-mention-input {
    color: #93bbfc !important;
}

[data-bs-theme="dark"] .compose-mention-input::placeholder {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .compose-dropdown {
    background: var(--surface-elevated, #2a2d35) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .compose-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .compose-dropdown-name {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .compose-dropdown-email {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .compose-divider {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .compose-hashtag-picker {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── Reaction picker popup (Like button hover) ── */
[data-bs-theme="dark"] .like-reaction-popup {
    background: var(--surface-elevated, #2a2d35) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .like-reaction-option.selected {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25) !important;
}

/* ── Profile Popover (dark mode) ── */
[data-bs-theme="dark"] .profile-popover {
    background: var(--surface-elevated, #2a2d35) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .pp-name {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .pp-department {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .pp-avatar {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .pp-stats {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .pp-stat-value {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .pp-stat-divider {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .pp-action-btn {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.15) !important;
}

[data-bs-theme="dark"] .pp-action-btn:hover {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25) !important;
}

[data-bs-theme="dark"] .compose-hashtag-suggest {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .compose-hashtag-suggest:hover {
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.1) !important;
}

[data-bs-theme="dark"] .compose-hashtag-input {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .compose-hashtag-input::placeholder {
    color: #4b5563 !important;
}

[data-bs-theme="dark"] .compose-points-popover {
    background: var(--surface-elevated, #2a2d35) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .compose-pts-opt {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .compose-pts-opt:hover:not(.disabled) {
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.1) !important;
}

[data-bs-theme="dark"] .compose-pts-opt.selected {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

[data-bs-theme="dark"] .compose-pts-opt.disabled {
    color: #4b5563 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

[data-bs-theme="dark"] .compose-toolbar-divider {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .compose-points-label {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .compose-avatar {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ── Template Picker (dark mode) ── */
[data-bs-theme="dark"] .compose-template-picker {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .compose-template-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .compose-template-close {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .compose-template-close:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .compose-template-category-pill {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .compose-template-category-pill:hover {
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1) !important;
}

[data-bs-theme="dark"] .compose-template-category-pill.active {
    background: var(--bs-primary, #0d6efd) !important;
    border-color: var(--bs-primary, #0d6efd) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .compose-template-card {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

[data-bs-theme="dark"] .compose-template-card:hover {
    border-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.4) !important;
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme="dark"] .compose-template-card-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .compose-template-card-preview {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .compose-template-card-arrow {
    color: #4b5563 !important;
}

[data-bs-theme="dark"] .compose-template-card:hover .compose-template-card-arrow {
    color: #93bbfc !important;
}

/* ============================================================
   GIF PICKER — Dark mode overrides
   ============================================================ */

[data-bs-theme="dark"] .gp-sheet {
    background: var(--surface-primary, #1e2028) !important;
}

[data-bs-theme="dark"] .gp-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .gp-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .gp-close {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .gp-close:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .gp-search-box {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .gp-search-box:focus-within {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .gp-search-input {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .gp-search-input::placeholder {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .gp-cat {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .gp-cat:hover {
    border-color: var(--bs-primary, #0056b3) !important;
    color: #93bbfc !important;
}

[data-bs-theme="dark"] .gp-cat.active {
    background: var(--bs-primary, #0056b3) !important;
    color: #fff !important;
    border-color: var(--bs-primary, #0056b3) !important;
}

[data-bs-theme="dark"] .gp-item {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .gp-skeleton {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.06) 100%) !important;
    background-size: 200% 100% !important;
}

[data-bs-theme="dark"] .gp-empty p {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .gp-footer {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .gp-content {
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent !important;
}

[data-bs-theme="dark"] .gp-categories {
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent !important;
}

/* ============================================================
   RECOGNITION DETAIL PAGE — Dark mode overrides
   ============================================================ */

[data-bs-theme="dark"] .recognition-detail-page {
    background: var(--theme-bg-dark, #121318) !important;
}

[data-bs-theme="dark"] .detail-header {
    background: rgba(22, 24, 28, 0.85) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .header-title {
    color: #e7e9ea !important;
}

[data-bs-theme="dark"] .back-button {
    color: #e7e9ea !important;
}

[data-bs-theme="dark"] .back-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .detail-container {
    background: var(--surface-primary, #16181c) !important;
    border-left-color: rgba(255, 255, 255, 0.08) !important;
    border-right-color: rgba(255, 255, 255, 0.08) !important;
}

/* Tweet detail post */
[data-bs-theme="dark"] .tweet-detail-display-name {
    color: #e7e9ea !important;
}

[data-bs-theme="dark"] .tweet-detail-handle {
    color: #71767b !important;
}

[data-bs-theme="dark"] .tweet-detail-context {
    color: #71767b !important;
}

[data-bs-theme="dark"] .tweet-detail-mention {
    color: #6ea8fe !important;
}

[data-bs-theme="dark"] .tweet-detail-points-badge {
    background: rgba(251, 191, 36, 0.12) !important;
    color: #fbbf24 !important;
}

[data-bs-theme="dark"] .tweet-detail-points-badge i {
    color: #fbbf24 !important;
}

[data-bs-theme="dark"] .tweet-detail-text {
    color: #e7e9ea !important;
}

[data-bs-theme="dark"] .tweet-detail-hashtag {
    color: #6ea8fe !important;
}

[data-bs-theme="dark"] .tweet-detail-timestamp {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    color: #71767b !important;
}

[data-bs-theme="dark"] .tweet-detail-stats {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .tweet-detail-comment-link {
    color: #71767b !important;
}

[data-bs-theme="dark"] .tweet-detail-comment-link:hover {
    color: #6ea8fe !important;
}

[data-bs-theme="dark"] .tweet-detail-actions {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .tweet-detail-action-btn {
    color: #71767b !important;
}

[data-bs-theme="dark"] .tweet-detail-action-comment:hover {
    color: #1d9bf0 !important;
    background: rgba(29, 155, 240, 0.12) !important;
}

[data-bs-theme="dark"] .tweet-detail-action-like:hover {
    color: #f91880 !important;
    background: rgba(249, 24, 128, 0.12) !important;
}

[data-bs-theme="dark"] .tweet-detail-action-like.active {
    color: #f91880 !important;
}

[data-bs-theme="dark"] .tweet-detail-action-share:hover {
    color: #1d9bf0 !important;
    background: rgba(29, 155, 240, 0.12) !important;
}

[data-bs-theme="dark"] .tweet-detail-reaction-popup {
    background: #2a2d35 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .tweet-detail-reaction-option.selected {
    background: rgba(29, 155, 240, 0.2) !important;
}

/* Comments section */
[data-bs-theme="dark"] .comments-section {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .comment-composer {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .comment-textarea {
    color: #e7e9ea !important;
}

[data-bs-theme="dark"] .comment-textarea::placeholder {
    color: #71767b !important;
}

[data-bs-theme="dark"] .composer-divider {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .composer-toolbar-sep {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .composer-points-popover {
    background: var(--surface-elevated, #2a2d35) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .composer-pts-opt {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .composer-pts-opt:hover:not(.disabled) {
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.1) !important;
}

[data-bs-theme="dark"] .composer-pts-opt.selected {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

[data-bs-theme="dark"] .composer-pts-opt.disabled {
    color: #4b5563 !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

[data-bs-theme="dark"] .composer-points-label {
    color: #6b7280 !important;
}

/* Comment items */
[data-bs-theme="dark"] .comment-item {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .comment-item:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

[data-bs-theme="dark"] .comment-points {
    background: rgba(255, 193, 7, 0.1) !important;
    color: #fbbf24 !important;
}

/* No comments empty state */
[data-bs-theme="dark"] .no-comments {
    color: #6b7280 !important;
}

/* ============================================================
   REWARDS CATALOG PAGE — Dark mode overrides
   ============================================================ */

/* Mobile header */
[data-bs-theme="dark"] .rewards-mobile-header {
    background: var(--surface-primary, #1e2028) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .mobile-header-content {
    background: var(--surface-primary, #1e2028) !important;
}

[data-bs-theme="dark"] .mobile-points-bar {
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.08) 0%, rgba(251, 192, 45, 0.06) 100%) !important;
}

/* Desktop points badge */
[data-bs-theme="dark"] .points-badge {
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.12) 0%, rgba(251, 192, 45, 0.08) 100%) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Category filter pills */
[data-bs-theme="dark"] .category-pill {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .category-pill:hover {
    background: rgba(var(--bs-primary-rgb, 0, 86, 179), 0.1) !important;
}

[data-bs-theme="dark"] .category-pill.active {
    background: var(--bs-primary, #0056b3) !important;
    border-color: var(--bs-primary, #0056b3) !important;
}

/* Skeleton loader */
[data-bs-theme="dark"] .skeleton-card {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .skeleton-image {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
}

[data-bs-theme="dark"] .skeleton-title,
[data-bs-theme="dark"] .skeleton-description,
[data-bs-theme="dark"] .skeleton-points,
[data-bs-theme="dark"] .skeleton-button {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .shimmer {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 75%) !important;
    background-size: 200% 100% !important;
}

/* Empty state */
[data-bs-theme="dark"] .rewards-page .empty-state,
[data-bs-theme="dark"] .redemption-history-page .empty-state {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Reward cards */
[data-bs-theme="dark"] .reward-card {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme="dark"] .reward-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-bs-theme="dark"] .reward-card.rare-reward {
    background: linear-gradient(var(--surface-primary, #1e2028), var(--surface-primary, #1e2028)) padding-box,
                linear-gradient(135deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff) border-box !important;
}

[data-bs-theme="dark"] .reward-image-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
}

[data-bs-theme="dark"] .category-tag {
    background: rgba(30, 32, 40, 0.9) !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .approval-notice {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

/* Redeem modal */
[data-bs-theme="dark"] .redeem-modal {
    background: var(--surface-primary, #1e2028) !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme="dark"] .redeem-modal .modal-header-custom {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .redeem-modal .btn-close-custom {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .redeem-modal .btn-close-custom:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .points-breakdown {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
}

[data-bs-theme="dark"] .breakdown-divider {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .redeem-modal .modal-footer-custom {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================================
   REDEMPTION HISTORY PAGE — Dark mode overrides
   ============================================================ */

/* Stat badges on desktop */
[data-bs-theme="dark"] .portal-stat-badge {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Redemption cards (mobile) */
[data-bs-theme="dark"] .redemption-card {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme="dark"] .card-bottom {
    background: rgba(255, 255, 255, 0.03) !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .points-spent {
    background: rgba(0, 86, 179, 0.12) !important;
}

/* Desktop table */
[data-bs-theme="dark"] .redemption-table thead {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
}

[data-bs-theme="dark"] .redemption-table thead th {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .redemption-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

[data-bs-theme="dark"] .redemption-table tbody tr.row-fulfilled {
    background: rgba(25, 135, 84, 0.06) !important;
}

[data-bs-theme="dark"] .redemption-table tbody tr.row-rejected {
    background: rgba(211, 47, 47, 0.06) !important;
}

/* Status legend */
[data-bs-theme="dark"] .status-legend {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Details modal */
[data-bs-theme="dark"] .details-modal {
    background: var(--surface-primary, #1e2028) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme="dark"] .details-modal .modal-header-custom {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .details-modal .btn-close-custom {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .details-modal .btn-close-custom:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .modal-reward-preview {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .detail-row {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .refund-notice,
[data-bs-theme="dark"] .fulfilled-date {
    background: rgba(0, 86, 179, 0.08) !important;
}

[data-bs-theme="dark"] .details-modal .modal-footer-custom {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================================
   ATTENDANCE DETAIL MODAL — Dark mode overrides
   ============================================================ */

[data-bs-theme="dark"] .detail-modal-content {
    background: var(--surface-primary, #1e2028) !important;
    box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .detail-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .detail-date-day {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .detail-date-month {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .detail-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .detail-session {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .detail-close-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .detail-close-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .drag-bar {
    background: rgba(255, 255, 255, 0.2) !important;
}

[data-bs-theme="dark"] .detail-section {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .detail-section-title {
    color: #9ca3af !important;
}

/* Time details */
[data-bs-theme="dark"] .detail-time-item {
    background: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .detail-time-label {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .detail-time-value {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .detail-time-sub {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .detail-duration {
    background: rgba(13, 110, 253, 0.08) !important;
    color: #93bbfc !important;
}

/* Payroll indicators */
[data-bs-theme="dark"] .detail-indicator .indicator-label {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .detail-indicator .indicator-value {
    color: #9ca3af !important;
}

/* Location */
[data-bs-theme="dark"] .detail-location-item {
    background: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .detail-location-label {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .detail-location-coords {
    color: #e1e3e8 !important;
}

/* Session info rows */
[data-bs-theme="dark"] .detail-info-row {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .info-key {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .info-val {
    color: #e1e3e8 !important;
}

/* Actions footer */
[data-bs-theme="dark"] .detail-modal-actions {
    background: var(--surface-primary, #1e2028) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .detail-btn-close {
    color: #9ca3af !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: transparent !important;
}

[data-bs-theme="dark"] .detail-btn-close:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #e1e3e8 !important;
}

/* ============================================================
   MY PAYROLL REPORT PAGE — Dark mode overrides
   ============================================================ */

/* Filters card */
[data-bs-theme="dark"] .filters-card {
    background: var(--surface-primary, #1e2028) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Filter controls */
[data-bs-theme="dark"] .mpr-ctl {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .mpr-ctl:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #86b7fe !important;
}

[data-bs-theme="dark"] .mpr-period-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .mpr-period-btn.active {
    background: #0d6efd !important;
    border-color: #0d6efd !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .mpr-period-btn:not(.active):hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .mpr-separator {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .mpr-nav-btn {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .mpr-nav-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Export menu button */
[data-bs-theme="dark"] .export-menu-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e1e3e8 !important;
}

/* Export dropdown */
[data-bs-theme="dark"] .export-dropdown {
    background: var(--surface-elevated, #2a2d35) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .export-dropdown-item {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .export-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Mobile stats bar */
[data-bs-theme="dark"] .report-page .mobile-stats-bar {
    background: var(--surface-primary, #1e2028) !important;
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .report-page .stat-divider {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Summary cards (mobile) */
[data-bs-theme="dark"] .summary-item {
    background: var(--surface-primary, #1e2028) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme="dark"] .summary-value {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .summary-label {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .summary-total {
    color: #6b7280 !important;
}

/* Desktop DAILY RECORD table card header */
[data-bs-theme="dark"] .report-page .card-header.bg-white {
    background: var(--surface-primary, #1e2028) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* Payroll info header */
[data-bs-theme="dark"] .payroll-info-header:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .payroll-info-header:active {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Day cards (mobile) */
[data-bs-theme="dark"] .day-card {
    background: var(--surface-primary, #1e2028) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

[data-bs-theme="dark"] .day-num {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .day-name {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .day-times {
    color: #e1e3e8 !important;
}

/* ND footnote */
[data-bs-theme="dark"] .nd-footnote {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #9ca3af !important;
}

/* Holiday work card */
[data-bs-theme="dark"] .holiday-work-card {
    background: var(--surface-primary, #1e2028) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme="dark"] .hw-value {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .hw-label {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .hw-entry {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

/* Desktop daily record table — override bg-light thead */
[data-bs-theme="dark"] .report-page .table thead.bg-light {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .report-page .table thead.bg-light th {
    color: #9ca3af !important;
    background: transparent !important;
}

/* Weekend/upcoming rows — override bg-light bg-opacity-50 */
[data-bs-theme="dark"] .report-page .table tbody tr.bg-light {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Rest Day text in table - Badge with bg-light text-dark */
[data-bs-theme="dark"] .report-page .badge.bg-light.text-dark {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #9ca3af !important;
}

/* Bootstrap dropdown menus used for cutoff/year/month selectors */
[data-bs-theme="dark"] .mpr-dropdown-menu {
    background: var(--surface-elevated, #2a2d35) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .mpr-dropdown-menu .dropdown-item {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .mpr-dropdown-menu .dropdown-item:hover,
[data-bs-theme="dark"] .mpr-dropdown-menu .dropdown-item:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .mpr-dropdown-menu .dropdown-item.active {
    background: #0d6efd !important;
    color: #fff !important;
}

/* Dropdown toggle button */
[data-bs-theme="dark"] .mpr-dropdown-toggle {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .mpr-dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Payroll info card */
[data-bs-theme="dark"] .report-page .card {
    background: var(--surface-primary, #1e2028) !important;
}

/* Desktop summary cards - card-body text-muted */
[data-bs-theme="dark"] .report-page .card .card-body .text-muted {
    color: #9ca3af !important;
}

/* Desktop summary card number values */
[data-bs-theme="dark"] .report-page .card .card-body .fs-3.fw-bold {
    /* Colors are set by text-success, text-danger, etc. — just ensure non-themed values remain visible */
}

/* Day card detail text */
[data-bs-theme="dark"] .day-detail-text {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .day-times {
    color: #e1e3e8 !important;
}

/* Mobile day card — inline style colors are fine, but ensure base text is visible */
[data-bs-theme="dark"] .day-card .day-detail-text,
[data-bs-theme="dark"] .day-card .small {
    color: #c8cad0 !important;
}

/* Holiday work entry time text */
[data-bs-theme="dark"] .hw-entry-time {
    color: #9ca3af !important;
}

/* Daily section header */
[data-bs-theme="dark"] .daily-section-header {
    color: #9ca3af !important;
}

/* Day number */
[data-bs-theme="dark"] .day-num {
    color: #e1e3e8 !important;
}

/* Day name */
[data-bs-theme="dark"] .day-name {
    color: #9ca3af !important;
}

/* Table text-muted cells */
[data-bs-theme="dark"] .report-page .table td.text-muted {
    color: #9ca3af !important;
}

/* Table cell general text */
[data-bs-theme="dark"] .report-page .table td {
    color: #c8cad0 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Payroll info card content text */
[data-bs-theme="dark"] .report-page .card-body .small {
    color: #c8cad0 !important;
}

[data-bs-theme="dark"] .report-page .card-body .small.text-muted {
    color: #9ca3af !important;
}


/* ============================================================
   RECOGNITION FEED — mobile stats bar
   ============================================================ */

[data-bs-theme="dark"] .mobile-stats-bar {
    background: var(--surface-primary, #1e2028) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .mobile-stat-value {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .mobile-budget-divider {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .mobile-budget-item {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .budget-stat-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .budget-stat-label {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .budget-stat-value {
    color: #93bbfc !important;
}


/* ============================================================
   LEAVE REQUEST LIST — portal/leave
   ============================================================ */

/* Request cards */
[data-bs-theme="dark"] .leave-page .request-card,
[data-bs-theme="dark"] .leave-page .skeleton-card {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Cancel modal */
[data-bs-theme="dark"] .cancel-modal-content {
    background: var(--surface-elevated, #2a2d35) !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .cancel-modal-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .cancel-modal-subtitle {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .cancel-request-card {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .cancel-request-type {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .cancel-request-reason {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .cancel-btn-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .cancel-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Leave detail modal */
[data-bs-theme="dark"] .leave-detail-content {
    background: var(--surface-elevated, #2a2d35) !important;
}

[data-bs-theme="dark"] .leave-detail-close {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .leave-detail-close:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .leave-detail-section-title {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .leave-detail-date-card,
[data-bs-theme="dark"] .leave-detail-reason-card,
[data-bs-theme="dark"] .leave-detail-info-card {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .leave-detail-date-label {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .leave-detail-date-value {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .leave-detail-duration {
    color: #c8cad0 !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .leave-detail-reason-card {
    color: #c8cad0 !important;
}

[data-bs-theme="dark"] .leave-detail-response-card {
    background: rgba(13, 110, 253, 0.06) !important;
    color: #c8cad0 !important;
}

[data-bs-theme="dark"] .leave-detail-info-row {
    color: #c8cad0 !important;
}

[data-bs-theme="dark"] .leave-detail-info-row + .leave-detail-info-row {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .leave-detail-footer {
    background: var(--surface-elevated, #2a2d35) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}


/* ============================================================
   LEAVE REQUEST FORM — portal/leave/new & edit
   ============================================================ */

[data-bs-theme="dark"] .leave-form-page .form-card {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .leave-form-page .type-option {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .leave-form-page .type-option:hover {
    background: rgba(0, 86, 179, 0.06) !important;
    border-color: rgba(0, 86, 179, 0.3) !important;
}

[data-bs-theme="dark"] .leave-form-page .type-option.selected {
    background: rgba(0, 86, 179, 0.1) !important;
}

[data-bs-theme="dark"] .leave-form-page .statutory-type-option {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .leave-form-page .statutory-type-option:hover {
    background: rgba(16, 185, 129, 0.06) !important;
}

[data-bs-theme="dark"] .leave-form-page .statutory-type-option.selected {
    background: rgba(16, 185, 129, 0.1) !important;
}

[data-bs-theme="dark"] .leave-form-page .date-input {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}


/* ============================================================
   OVERTIME REQUEST LIST — portal/overtime
   ============================================================ */

/* Request cards & skeletons */
[data-bs-theme="dark"] .overtime-page .request-card,
[data-bs-theme="dark"] .overtime-page .skeleton-card {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Cancel modal */
[data-bs-theme="dark"] .overtime-page .cancel-modal-content {
    background: var(--surface-elevated, #2a2d35) !important;
}

[data-bs-theme="dark"] .overtime-page .cancel-btn-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e1e3e8 !important;
}

/* OT detail modal */
[data-bs-theme="dark"] .ot-detail-content {
    background: var(--surface-elevated, #2a2d35) !important;
}

[data-bs-theme="dark"] .ot-detail-close {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .ot-detail-close:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .ot-detail-section-title {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .ot-detail-time-card,
[data-bs-theme="dark"] .ot-detail-type-card,
[data-bs-theme="dark"] .ot-detail-reason-card,
[data-bs-theme="dark"] .ot-detail-info-card {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .ot-detail-time-label {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .ot-detail-time-value {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .ot-detail-hours-bar {
    color: #c8cad0 !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .ot-detail-reason-card {
    color: #c8cad0 !important;
}

[data-bs-theme="dark"] .ot-detail-response-card {
    background: rgba(13, 110, 253, 0.06) !important;
    color: #c8cad0 !important;
}

[data-bs-theme="dark"] .ot-detail-info-row {
    color: #c8cad0 !important;
}

[data-bs-theme="dark"] .ot-detail-info-row + .ot-detail-info-row {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .ot-detail-footer {
    background: var(--surface-elevated, #2a2d35) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}


/* ============================================================
   OVERTIME REQUEST FORM — portal/overtime/new & edit
   ============================================================ */

[data-bs-theme="dark"] .ot-form-page .form-card,
[data-bs-theme="dark"] .overtime-form-page .form-card {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .overtime-form-page .type-option,
[data-bs-theme="dark"] .ot-form-page .type-option {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .overtime-form-page .type-option.selected,
[data-bs-theme="dark"] .ot-form-page .type-option.selected {
    background: rgba(0, 86, 179, 0.1) !important;
}

[data-bs-theme="dark"] .overtime-form-page .time-input,
[data-bs-theme="dark"] .ot-form-page .time-input,
[data-bs-theme="dark"] .overtime-form-page .date-input,
[data-bs-theme="dark"] .ot-form-page .date-input {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}


/* ============================================================
   WORK-MODE REQUEST LIST — portal/work-mode
   ============================================================ */

/* Request cards & skeletons */
[data-bs-theme="dark"] .wml-request-card,
[data-bs-theme="dark"] .wml-skeleton-card {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .wml-cancel-btn {
    background: rgba(220, 53, 69, 0.08) !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
}

/* Cancel modal */
[data-bs-theme="dark"] .wml-cancel-container {
    background: var(--surface-elevated, #2a2d35) !important;
}

[data-bs-theme="dark"] .wml-cancel-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .wml-cancel-request-card {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .wml-cancel-btn-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e1e3e8 !important;
}

/* Detail modal */
[data-bs-theme="dark"] .wml-detail-container {
    background: var(--surface-elevated, #2a2d35) !important;
}

[data-bs-theme="dark"] .wml-detail-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .wml-detail-close {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .wml-detail-close:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .wml-detail-section-title {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .wml-detail-change-card,
[data-bs-theme="dark"] .wml-detail-reason-card {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .wml-detail-change-label {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .wml-detail-response-card {
    background: rgba(13, 110, 253, 0.06) !important;
}

[data-bs-theme="dark"] .wml-detail-footer {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}


/* ============================================================
   WORK-MODE REQUEST FORM — portal/work-mode/request
   ============================================================ */

[data-bs-theme="dark"] .wm-form-card {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .wm-mode-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .wm-mode-option:hover .wm-mode-card {
    background: rgba(0, 86, 179, 0.06) !important;
    border-color: rgba(0, 86, 179, 0.3) !important;
}

[data-bs-theme="dark"] .wm-mode-option.active .wm-mode-card {
    background: rgba(0, 86, 179, 0.08) !important;
}

[data-bs-theme="dark"] .wm-date-control {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .wm-textarea {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .wm-btn-cancel {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e1e3e8 !important;
}


/* ============================================================
   SHARED: Skeleton loading in dark mode
   ============================================================ */

[data-bs-theme="dark"] .skeleton-card,
[data-bs-theme="dark"] .skeleton-content {
    background: var(--surface-primary, #1e2028) !important;
}


/* ============================================================
   LEAVE BALANCE CARD — dark mode
   ============================================================ */

[data-bs-theme="dark"] .leave-balance-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .balance-item {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .balance-item.low {
    border-color: rgba(255, 193, 7, 0.4) !important;
    background: rgba(255, 193, 7, 0.06) !important;
}

[data-bs-theme="dark"] .balance-item.exhausted {
    border-color: rgba(220, 53, 69, 0.4) !important;
    background: rgba(220, 53, 69, 0.06) !important;
}

[data-bs-theme="dark"] .balance-item.has-pending {
    border-color: rgba(230, 126, 34, 0.4) !important;
    background: rgba(230, 126, 34, 0.06) !important;
}

[data-bs-theme="dark"] .balance-item.exhausted.has-pending {
    border-color: rgba(220, 53, 69, 0.4) !important;
    background: rgba(220, 53, 69, 0.06) !important;
}

[data-bs-theme="dark"] .balance-type {
    color: #c8cad0 !important;
}

[data-bs-theme="dark"] .balance-header {
    color: #e1e3e8 !important;
}


/* ============================================================
   WORK MODE REQUEST FORM — page background fix
   ============================================================ */

[data-bs-theme="dark"] .wm-request-page {
    background: var(--theme-bg-dark, #121318) !important;
}


/* ============================================================
   ADMIN — PlatformDashboard inline <style> overrides
   ============================================================ */

[data-bs-theme="dark"] .pa-stat-card {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .pa-stat-icon-blue {
    background: rgba(79, 70, 229, 0.15) !important;
    color: #818cf8 !important;
}

[data-bs-theme="dark"] .pa-stat-icon-green {
    background: rgba(5, 150, 105, 0.15) !important;
    color: #34d399 !important;
}

[data-bs-theme="dark"] .pa-stat-icon-amber {
    background: rgba(217, 119, 6, 0.15) !important;
    color: #fbbf24 !important;
}

[data-bs-theme="dark"] .pa-stat-icon-teal {
    background: rgba(13, 148, 136, 0.15) !important;
    color: #2dd4bf !important;
}

[data-bs-theme="dark"] .pa-stat-label {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .pa-stat-footer {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .pa-quick-action {
    background: var(--surface-secondary, #262830) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .pa-quick-action:hover {
    border-color: rgba(96, 165, 250, 0.4) !important;
    background: rgba(59, 130, 246, 0.1) !important;
    color: #93c5fd !important;
}

[data-bs-theme="dark"] .pa-quick-action-danger:hover {
    border-color: rgba(252, 165, 165, 0.4) !important;
    background: rgba(239, 68, 68, 0.1) !important;
    color: #fca5a5 !important;
}

[data-bs-theme="dark"] .pa-panel {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .pa-panel-header {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .pa-type-row {
    border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .pa-usage-card {
    background: var(--surface-secondary, #262830) !important;
}

[data-bs-theme="dark"] .pa-usage-card:hover {
    background: var(--surface-elevated, #2a2d35) !important;
}

[data-bs-theme="dark"] .pa-usage-value {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .pa-usage-label {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .pa-table thead th {
    color: #9ca3af !important;
    background: var(--surface-secondary, #262830) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .pa-table-row:hover {
    background: var(--surface-secondary, #262830) !important;
}

[data-bs-theme="dark"] .pa-action-btn:hover {
    background: rgba(79, 70, 229, 0.15) !important;
    border-color: rgba(129, 140, 248, 0.3) !important;
    color: #818cf8 !important;
}

[data-bs-theme="dark"] .pa-badge-company {
    background: rgba(79, 70, 229, 0.15) !important;
    color: #818cf8 !important;
}

[data-bs-theme="dark"] .pa-badge-public {
    background: rgba(5, 150, 105, 0.15) !important;
    color: #34d399 !important;
}

[data-bs-theme="dark"] .pa-badge-event {
    background: rgba(217, 119, 6, 0.15) !important;
    color: #fbbf24 !important;
}

[data-bs-theme="dark"] .pa-badge-nonprofit {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
}

[data-bs-theme="dark"] .pa-alert-warning {
    background: rgba(217, 119, 6, 0.12) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: #fbbf24 !important;
}


/* ============================================================
   ADMIN — LeaveApproval inline <style> overrides
   ============================================================ */

[data-bs-theme="dark"] .filter-btn {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: var(--surface-secondary, #262830) !important;
    color: #c8cad0 !important;
}

[data-bs-theme="dark"] .filter-btn:hover,
[data-bs-theme="dark"] .filter-btn.active {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
    color: #93c5fd !important;
}

[data-bs-theme="dark"] .filter-dropdown .dropdown-menu {
    background: var(--surface-elevated, #2a2d35) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .custom-date-card {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .custom-date-input input {
    color: #e1e3e8 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .custom-date-input input:focus {
    background: var(--surface-secondary, #262830) !important;
    border-color: #60a5fa !important;
}

[data-bs-theme="dark"] .custom-date-input label {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .view-dropdown-item {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .view-dropdown-item i:first-child {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .mobile-stats-summary {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}


/* ============================================================
   ADMIN — LeaveCalendar inline <style> overrides
   ============================================================ */

[data-bs-theme="dark"] .calendar-grid {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .calendar-header {
    background: var(--surface-secondary, #262830) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .day-header {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .calendar-day {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .calendar-day:hover {
    background: var(--surface-secondary, #262830) !important;
}

[data-bs-theme="dark"] .calendar-day.other-month {
    background: rgba(255, 255, 255, 0.02) !important;
    color: #4b5563 !important;
}

[data-bs-theme="dark"] .calendar-day.weekend {
    background: rgba(239, 68, 68, 0.04) !important;
}

[data-bs-theme="dark"] .calendar-day.holiday {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.12) 0%, rgba(255, 215, 0, 0.08) 100%) !important;
}

[data-bs-theme="dark"] .calendar-day.holiday:hover {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.18) 0%, rgba(255, 215, 0, 0.12) 100%) !important;
}

[data-bs-theme="dark"] .leave-more {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .legend-card {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .legend-item {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .legend-item:hover {
    color: #e1e3e8 !important;
}


/* ============================================================
   ADMIN — AdminDashboard scoped CSS overrides
   ============================================================ */

[data-bs-theme="dark"] .date-box {
    background: linear-gradient(135deg, var(--surface-secondary, #262830) 0%, var(--surface-elevated, #2a2d35) 100%) !important;
}

[data-bs-theme="dark"] .session-item:hover {
    background-color: var(--surface-secondary, #262830) !important;
}

[data-bs-theme="dark"] .live-dot {
    background: #34d399 !important;
}


/* ============================================================
   ADMIN — AttendanceView inline style overrides
   ============================================================ */

/* Summary table header gradient */
.summary-table-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

[data-bs-theme="dark"] .summary-table-header {
    background: linear-gradient(135deg, var(--surface-secondary, #262830) 0%, var(--surface-elevated, #2a2d35) 100%) !important;
}

/* Expanded detail row gradient */
.expanded-detail-bg {
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
}

[data-bs-theme="dark"] .expanded-detail-bg {
    background: linear-gradient(180deg, var(--surface-secondary, #262830) 0%, var(--surface-primary, #1e2028) 100%) !important;
}

/* Nested table header gradient */
.nested-table-header {
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
}

[data-bs-theme="dark"] .nested-table-header {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(168, 85, 247, 0.12) 100%) !important;
}

/* Delete warning icon */
.delete-warning-icon {
    border: 4px solid #f8d7da;
    background-color: #fff5f5;
}

[data-bs-theme="dark"] .delete-warning-icon {
    border-color: rgba(220, 53, 69, 0.3) !important;
    background-color: rgba(220, 53, 69, 0.1) !important;
}

/* Time cards row in detail modal */
.time-cards-row {
    background-color: #f8f9fa;
}

[data-bs-theme="dark"] .time-cards-row {
    background-color: var(--surface-secondary, #262830) !important;
}

/* Check-in icon circle */
.checkin-icon-circle {
    background-color: #d1fae5;
}

[data-bs-theme="dark"] .checkin-icon-circle {
    background-color: rgba(16, 185, 129, 0.15) !important;
}

/* Check-out icon circle */
.checkout-icon-circle {
    background-color: #fee2e2;
}

[data-bs-theme="dark"] .checkout-icon-circle {
    background-color: rgba(239, 68, 68, 0.15) !important;
}


/* ============================================================
   NOTIFICATION SETTINGS — dark mode overrides
   ============================================================ */

/* Override CSS custom properties used by notification-settings-enhanced.css */
[data-bs-theme="dark"] {
    --bg-primary: #1e2028;
    --bg-secondary: #262830;
    --bg-tertiary: #121318;
    --text-primary: #e1e3e8;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --border-color: rgba(255, 255, 255, 0.08);
    --hover-bg: rgba(255, 255, 255, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .settings-page,
[data-bs-theme="dark"] .notification-settings-page {
    background: var(--theme-bg-dark, #121318) !important;
}

[data-bs-theme="dark"] .settings-tab {
    background: #262830 !important;
    color: #9ca3af !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .settings-tab.active,
[data-bs-theme="dark"] .settings-tab:hover {
    background: rgba(0, 86, 179, 0.15) !important;
    color: #6ea8fe !important;
}

[data-bs-theme="dark"] .settings-card {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .setting-item {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .setting-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .setting-description {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .section-header {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .section-subtitle {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .privacy-notice {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .privacy-notice h6 {
    color: #e1e3e8 !important;
}

/* Toggle slider background in off state */
[data-bs-theme="dark"] .toggle-slider {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

[data-bs-theme="dark"] .setting-item.nested {
    background: #262830 !important;
}

[data-bs-theme="dark"] .highlight-item {
    background: linear-gradient(90deg, rgba(0, 86, 179, 0.1) 0%, rgba(0, 86, 179, 0.04) 100%) !important;
}

/* Stat badge (Push/Email/Quiet tabs) */
[data-bs-theme="dark"] .stat-badge {
    background: #262830 !important;
    color: #9ca3af !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .stat-badge.active {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light)) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
}

[data-bs-theme="dark"] .settings-header {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .settings-header h4,
[data-bs-theme="dark"] .settings-header h5 {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .category-header {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .category-description {
    color: #9ca3af !important;
}

/* ============================================================
   PUSH NOTIFICATION SETTINGS — dark mode overrides
   ============================================================ */

[data-bs-theme="dark"] .push-notifications-page {
    background: var(--theme-bg-dark, #121318) !important;
}

[data-bs-theme="dark"] .push-notifications-page .card,
[data-bs-theme="dark"] .push-notifications-page .settings-card {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .push-notifications-page .btn-back {
    background: #262830 !important;
    color: #e1e3e8 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .push-notifications-page .feature-item {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .push-notifications-page .feature-item h6 {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .push-notifications-page .feature-item p {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .push-notifications-page .btn-test {
    background: #262830 !important;
    color: #e1e3e8 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .push-notifications-page .section-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .push-notifications-page .browser-help {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .push-notifications-page .browser-help h6 {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .push-notifications-page .security-item {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .push-notifications-page .security-item h6 {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .push-notifications-page .security-item p {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .push-notifications-page .status-card {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================================
   RECOGNITION DASHBOARD — dark mode overrides
   ============================================================ */

[data-bs-theme="dark"] .points-card {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .badges-card {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .badges-card-header {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .badges-card-header i {
    color: #93bbfc !important;
}

[data-bs-theme="dark"] .badges-view-all {
    color: #93bbfc !important;
}

[data-bs-theme="dark"] .points-card .stat-label {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .points-card .stat-divider {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .activity-card {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .activity-tabs {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .activity-tabs .tab-btn {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .activity-tabs .tab-btn.active {
    background: #1e2028 !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .tab-count {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .activity-tabs .tab-btn.active .tab-count {
    background: rgba(0, 86, 179, 0.2) !important;
    color: #6ea8fe !important;
}

[data-bs-theme="dark"] .leaderboard-card {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .leaderboard-header {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .period-select {
    background: #262830 !important;
    color: #e1e3e8 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .budget-section {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .budget-bar {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .recognition-item {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .recognition-item:hover {
    background: #2a2d35 !important;
}

[data-bs-theme="dark"] .recognition-item .recognition-message {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .recognition-item .recognition-meta {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .transaction-item {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .transaction-item:hover {
    background: #2a2d35 !important;
}

[data-bs-theme="dark"] .transaction-item .transaction-description {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .transaction-item .transaction-date {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .dashboard-leaderboard-item {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .dashboard-leaderboard-item .lb-name {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .dashboard-leaderboard-item .lb-department {
    color: #9ca3af !important;
}

/* Podium items */
[data-bs-theme="dark"] .podium-item.first {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.12) 0%, rgba(255, 193, 7, 0.04) 100%) !important;
    border-color: rgba(255, 193, 7, 0.2) !important;
}

[data-bs-theme="dark"] .podium-item.second {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.12) 0%, rgba(192, 192, 192, 0.04) 100%) !important;
    border-color: rgba(192, 192, 192, 0.2) !important;
}

[data-bs-theme="dark"] .podium-item.third {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.12) 0%, rgba(205, 127, 50, 0.04) 100%) !important;
    border-color: rgba(205, 127, 50, 0.2) !important;
}

[data-bs-theme="dark"] .points-badge {
    background: rgba(0, 86, 179, 0.15) !important;
    color: #6ea8fe !important;
}

[data-bs-theme="dark"] .empty-state {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .empty-state h6 {
    color: #e1e3e8 !important;
}


/* ============================================================
   SPONSORED REWARDS — dark mode overrides
   ============================================================ */

[data-bs-theme="dark"] .sponsored-page {
    background: var(--theme-bg-dark, #121318) !important;
}

[data-bs-theme="dark"] .sponsored-mobile-header {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .mobile-points-bar {
    background: rgba(255, 193, 7, 0.08) !important;
    border-color: rgba(255, 193, 7, 0.12) !important;
}

[data-bs-theme="dark"] .points-value {
    color: #ffc107 !important;
}

[data-bs-theme="dark"] .points-label {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .sponsored-tabs {
    background: #262830 !important;
}

[data-bs-theme="dark"] .tab-btn {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .tab-btn:hover {
    color: #e1e3e8 !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .tab-btn.active {
    background: #1e2028 !important;
    color: #e1e3e8 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .tab-count {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .tab-btn.active .tab-count {
    background: rgba(255, 193, 7, 0.2) !important;
    color: #ffc107 !important;
}

[data-bs-theme="dark"] .sponsored-card {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .sponsored-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .sponsored-card.free-reward {
    border-color: rgba(40, 167, 69, 0.25) !important;
}

[data-bs-theme="dark"] .sponsored-placeholder {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 152, 0, 0.15) 100%) !important;
}

[data-bs-theme="dark"] .sponsored-image-container {
    background: #262830 !important;
}

[data-bs-theme="dark"] .sponsored-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .sponsored-description {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .sponsor-info {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .sponsor-name {
    color: #c9cdd4 !important;
}

[data-bs-theme="dark"] .sponsor-avatar-small {
    background: #353840 !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .sponsored-footer {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .progress-bar-container {
    background: #353840 !important;
}

[data-bs-theme="dark"] .progress-text {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .funded-badge {
    background: rgba(255, 193, 7, 0.12) !important;
}

/* Sponsored rewards modals */
[data-bs-theme="dark"] .sponsored-page .modal-panel {
    background: #1e2028 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .sponsored-page .btn-close-custom {
    background: #353840 !important;
    color: #9ca3af !important;
}

/* Create modal header */
[data-bs-theme="dark"] .create-header-bg {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.08) 0%, rgba(255, 152, 0, 0.12) 50%, rgba(255, 193, 7, 0.06) 100%) !important;
}

[data-bs-theme="dark"] .create-header-sub {
    color: #9ca3af !important;
}

/* Create modal sections */
[data-bs-theme="dark"] .create-section {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .create-section-label {
    color: #e1e3e8 !important;
}

/* Points config cards */
[data-bs-theme="dark"] .points-config-card {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .points-config-card.fund {
    border-color: rgba(255, 193, 7, 0.2) !important;
    background: rgba(255, 193, 7, 0.06) !important;
}

[data-bs-theme="dark"] .points-config-card.cost {
    border-color: rgba(59, 130, 246, 0.2) !important;
    background: rgba(59, 130, 246, 0.06) !important;
}

[data-bs-theme="dark"] .points-config-header {
    color: #c9cdd4 !important;
}

/* Image URL help */
[data-bs-theme="dark"] .image-url-help {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .image-url-help a {
    color: #93bbfc !important;
}

[data-bs-theme="dark"] .image-preview-box {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Balance card */
[data-bs-theme="dark"] .balance-card {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .balance-card-header {
    background: #2a2d35 !important;
    color: #c9cdd4 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .balance-row {
    color: #c9cdd4 !important;
}

[data-bs-theme="dark"] .balance-divider {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
}

[data-bs-theme="dark"] .balance-warning {
    background: rgba(220, 53, 69, 0.12) !important;
}

[data-bs-theme="dark"] .sponsored-page .modal-footer-section {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .sponsor-message {
    background: #262830 !important;
    border-left-color: rgba(255, 193, 7, 0.5) !important;
    color: #c9cdd4 !important;
}

[data-bs-theme="dark"] .claim-summary {
    background: #262830 !important;
}

[data-bs-theme="dark"] .balance-preview {
    background: #262830 !important;
}

[data-bs-theme="dark"] .preview-placeholder {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.15)) !important;
}

/* Sponsored rewards skeleton */
[data-bs-theme="dark"] .sponsored-page .skeleton-card {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .sponsored-page .skeleton-image,
[data-bs-theme="dark"] .sponsored-page .skeleton-title,
[data-bs-theme="dark"] .sponsored-page .skeleton-description,
[data-bs-theme="dark"] .sponsored-page .skeleton-points,
[data-bs-theme="dark"] .sponsored-page .skeleton-button {
    background: #2a2d35 !important;
}

[data-bs-theme="dark"] .sponsored-page .shimmer {
    background: linear-gradient(90deg, #2a2d35 25%, #353840 50%, #2a2d35 75%) !important;
    background-size: 200% 100% !important;
}

[data-bs-theme="dark"] .sponsored-page .empty-icon {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.15)) !important;
}

/* Sponsored rewards form controls in modal */
[data-bs-theme="dark"] .sponsored-page .form-control,
[data-bs-theme="dark"] .sponsored-page .form-select {
    background: #262830 !important;
    color: #e1e3e8 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .sponsored-page .form-label {
    color: #c9cdd4 !important;
}

[data-bs-theme="dark"] .sponsored-page .form-text {
    color: #6b7280 !important;
}

/* Sponsored rewards — category dropdown dark mode */
[data-bs-theme="dark"] .sp-dropdown-toggle {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .sp-dropdown-toggle:hover {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-bs-theme="dark"] .sp-dropdown-menu {
    background: #2a2d35 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .sp-dropdown-item {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .sp-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .sp-dropdown-item.active {
    background: rgba(59, 130, 246, 0.1) !important;
}

/* Sponsored rewards — bottom-sheet modal dark mode */
[data-bs-theme="dark"] .sp-modal-content {
    background: #1e2028 !important;
}

[data-bs-theme="dark"] .sp-modal-header {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .sp-header-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .sp-header-sub {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .sp-close-btn {
    background: #353840 !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .sp-drag-bar {
    background: #555 !important;
}

[data-bs-theme="dark"] .sp-modal-actions {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .sp-btn-secondary {
    color: #9ca3af !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .sp-btn-secondary:hover {
    background: #2a2d35 !important;
}

[data-bs-theme="dark"] .sp-label {
    color: #c9cdd4 !important;
}

[data-bs-theme="dark"] .sp-hint {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .sp-section-divider {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .sp-balance-bar {
    background: #262830 !important;
}

[data-bs-theme="dark"] .sp-message-box {
    background: #262830 !important;
    border-left-color: rgba(255, 193, 7, 0.5) !important;
    color: #c9cdd4 !important;
}

[data-bs-theme="dark"] .sp-info-section {
    background: #262830 !important;
}

[data-bs-theme="dark"] .sp-info-key {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .sp-info-val {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .sp-preview-placeholder {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.15)) !important;
}

/* Sponsored rewards — empty state card (from demo-pages.css) */
[data-bs-theme="dark"] .sponsored-page .empty-state {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .sponsored-page .empty-state h5 {
    color: #e1e3e8 !important;
}

/* ============================================================
   HELP CENTER — dark mode overrides
   ============================================================ */

[data-bs-theme="dark"] .help-page {
    background: var(--theme-bg-dark, #121318) !important;
}

[data-bs-theme="dark"] .help-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .help-subtitle {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .search-input {
    background: #262830 !important;
    color: #e1e3e8 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .search-input::placeholder {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .search-input:focus {
    border-color: rgba(0, 86, 179, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.15) !important;
}

[data-bs-theme="dark"] .help-tab {
    background: #262830 !important;
    color: #9ca3af !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .help-tab.active,
[data-bs-theme="dark"] .help-tab:hover {
    background: rgba(0, 86, 179, 0.15) !important;
    color: #6ea8fe !important;
}

[data-bs-theme="dark"] .video-tutorial-card {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .tutorial-card {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .tutorial-card h6 {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .tutorial-card p {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .tutorial-visual {
    background: linear-gradient(135deg, #262830 0%, #1e2028 100%) !important;
}

[data-bs-theme="dark"] .faq-group-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .tutorial-guides-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .faq-item {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .faq-question {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .faq-question:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

[data-bs-theme="dark"] .faq-answer {
    color: #9ca3af !important;
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .contact-card {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .contact-card h6 {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .contact-card p {
    color: #9ca3af !important;
}


/* ============================================================
   MY PROFILE PAGE — dark mode overrides
   ============================================================ */

/* Input group icons — bg-light looks too dark in dark mode */
[data-bs-theme="dark"] .input-group-text.bg-light {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #9ca3af !important;
}

/* Readonly disabled inputs with bg-light */
[data-bs-theme="dark"] .form-control.bg-light {
    background: #262830 !important;
    color: #9ca3af !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Profile placeholder avatar */
[data-bs-theme="dark"] .symbol .bg-light.text-primary {
    background: #262830 !important;
}

/* Account Info containers (bg-light rounded) */
[data-bs-theme="dark"] .d-flex.align-items-center.p-3.bg-light.rounded {
    background: #262830 !important;
}

/* Fixed action bar at bottom of profile page */
[data-bs-theme="dark"] .fixed-action-bar {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .fixed-action-bar .btn-light {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e1e3e8 !important;
}

/* Profile page mobile reset/save buttons */
[data-bs-theme="dark"] .btn-light.border {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #e1e3e8 !important;
}

/* Profile action bar - Biometric list group */
[data-bs-theme="dark"] .list-group-item {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e1e3e8 !important;
}

/* Alert light in biometric section */
[data-bs-theme="dark"] .alert-light {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #9ca3af !important;
}


/* ============================================================
   ATTENDANCE CALENDAR — dark mode overrides
   ============================================================ */

[data-bs-theme="dark"] .calendar-page {
    background: var(--theme-bg-dark, #121318) !important;
}

/* Calendar card */
[data-bs-theme="dark"] .calendar-card {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Month nav buttons */
[data-bs-theme="dark"] .month-nav-btn {
    background: #262830 !important;
    color: #6ea8fe !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .month-btn {
    background: #262830 !important;
    color: #6ea8fe !important;
    border-color: rgba(0, 86, 179, 0.3) !important;
}

[data-bs-theme="dark"] .month-btn:hover:not(:disabled) {
    background: rgba(0, 86, 179, 0.15) !important;
}

/* Mobile month nav bar */
[data-bs-theme="dark"] .mobile-month-nav {
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.06) 0%, rgba(0, 86, 179, 0.1) 100%) !important;
}

/* View toggle */
[data-bs-theme="dark"] .view-toggle {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .toggle-btn {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .toggle-btn:hover {
    color: #6ea8fe !important;
}

[data-bs-theme="dark"] .toggle-btn.active {
    background: var(--bs-primary, #0056b3) !important;
    color: white !important;
}

/* Calendar day cells */
[data-bs-theme="dark"] .calendar-day {
    background: rgba(255, 255, 255, 0.03) !important;
}

[data-bs-theme="dark"] .calendar-day:hover {
    background: rgba(0, 86, 179, 0.12) !important;
}

[data-bs-theme="dark"] .calendar-day.weekend {
    background: rgba(255, 255, 255, 0.02) !important;
}

[data-bs-theme="dark"] .calendar-day.other-month {
    opacity: 0.25 !important;
}

[data-bs-theme="dark"] .calendar-day.today {
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.2) 0%, rgba(0, 86, 179, 0.1) 100%) !important;
}

[data-bs-theme="dark"] .calendar-day.holiday {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.12) 0%, rgba(255, 215, 0, 0.08) 100%) !important;
}

[data-bs-theme="dark"] .calendar-day.holiday:hover {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.18) 0%, rgba(255, 215, 0, 0.14) 100%) !important;
}

[data-bs-theme="dark"] .day-number {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .day-header {
    color: #9ca3af !important;
}

/* Legend card */
[data-bs-theme="dark"] .legend-card {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .legend-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .legend-item span {
    color: #9ca3af !important;
}

/* Summary card */
[data-bs-theme="dark"] .summary-card {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .summary-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .summary-label {
    color: #9ca3af !important;
}

/* Skeleton loader */
[data-bs-theme="dark"] .calendar-skeleton {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .skeleton-header,
[data-bs-theme="dark"] .calendar-skeleton .calendar-header {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .skeleton-day-header {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .skeleton-grid {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .skeleton-day {
    background: #1a1c24 !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .skeleton-week {
    border-color: rgba(255, 255, 255, 0.04) !important;
}


/* ============================================================
   LEAVE CALENDAR — dark mode overrides
   ============================================================ */

/* Calendar grid borders */
[data-bs-theme="dark"] .calendar-grid {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Leave calendar day cells */
[data-bs-theme="dark"] .calendar-week .calendar-day {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .calendar-day.other-month {
    background: rgba(255, 255, 255, 0.01) !important;
    color: #4a4d56 !important;
}

[data-bs-theme="dark"] .calendar-day.weekend {
    background: rgba(255, 255, 255, 0.015) !important;
}

/* Calendar header row */
[data-bs-theme="dark"] .calendar-header {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Legend card (leave calendar version - gradient) */
[data-bs-theme="dark"] .legend-card {
    background: linear-gradient(135deg, #1e2028 0%, #262830 100%) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Legend items */
[data-bs-theme="dark"] .legend-item {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .legend-item:hover {
    color: #e1e3e8 !important;
}

/* Leave more badge */
[data-bs-theme="dark"] .leave-more {
    background: #3a3d45 !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .leave-more:hover {
    background: #4a4d56 !important;
}

/* Leave type badge borders */
[data-bs-theme="dark"] .leave-type-badge {
    border-color: #1e2028 !important;
}

[data-bs-theme="dark"] .half-day-badge {
    border-color: #1e2028 !important;
}

/* Filter button */
[data-bs-theme="dark"] .filter-btn {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .filter-btn:hover {
    background: #2a2d35 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-bs-theme="dark"] .reset-btn {
    background: rgba(220, 53, 69, 0.15) !important;
    color: #ea6875 !important;
    border-color: rgba(220, 53, 69, 0.25) !important;
}

/* Leave calendar skeleton */
[data-bs-theme="dark"] .calendar-skeleton {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .skeleton-filter-btn,
[data-bs-theme="dark"] .skeleton-badge {
    background: linear-gradient(90deg, #262830 25%, #2a2d35 50%, #262830 75%) !important;
    background-size: 200% 100% !important;
}

[data-bs-theme="dark"] .skeleton-day-number,
[data-bs-theme="dark"] .skeleton-avatar {
    background: linear-gradient(90deg, #262830 25%, #2a2d35 50%, #262830 75%) !important;
    background-size: 200% 100% !important;
}

/* Leave card in modal */
[data-bs-theme="dark"] .leave-card {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .leave-card-meta {
    color: #9ca3af !important;
}

/* Holiday modal banner */
[data-bs-theme="dark"] .holiday-modal-banner {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.12) 0%, rgba(255, 215, 0, 0.1) 50%, rgba(34, 139, 34, 0.1) 100%) !important;
    border-color: rgba(220, 53, 69, 0.25) !important;
}

[data-bs-theme="dark"] .holiday-banner-type {
    color: #9ca3af !important;
}

/* Legend chips (mobile) - darken text for contrast */
[data-bs-theme="dark"] .legend-chip.sick {
    background: rgba(13, 202, 240, 0.15) !important;
    color: #3dd8f5 !important;
}

[data-bs-theme="dark"] .legend-chip.vacation {
    background: rgba(25, 135, 84, 0.15) !important;
    color: #4dd89a !important;
}

[data-bs-theme="dark"] .legend-chip.personal {
    background: rgba(111, 66, 193, 0.15) !important;
    color: #a78bdb !important;
}

[data-bs-theme="dark"] .legend-chip.other {
    background: rgba(108, 117, 125, 0.15) !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .legend-chip.approved {
    background: rgba(25, 135, 84, 0.15) !important;
    color: #4dd89a !important;
}

[data-bs-theme="dark"] .legend-chip.pending {
    background: rgba(255, 193, 7, 0.15) !important;
    color: #ffc107 !important;
}

/* Modal overrides for Leave Calendar */
[data-bs-theme="dark"] .modal-content {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .modal-header {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .modal-footer {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .modal-title.text-dark {
    color: #e1e3e8 !important;
}

/* Empty state circle */
[data-bs-theme="dark"] .bg-light.rounded-circle {
    background: #262830 !important;
}


/* ============================================================
   NOTIFICATION BELL DROPDOWN — dark mode overrides
   ============================================================ */

/* Desktop dropdown panel */
[data-bs-theme="dark"] .notification-desktop {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

/* Bell icon color in dark header */
[data-bs-theme="dark"] .notification-bell-icon {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .notification-badge {
    border-color: #1e2028 !important;
}

[data-bs-theme="dark"] .connection-indicator {
    border-color: #1e2028 !important;
}

/* Header */
[data-bs-theme="dark"] .notif-header {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Notification items */
[data-bs-theme="dark"] .notif-item {
    border-color: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .notif-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .notif-item.unread {
    background: rgba(0, 86, 179, 0.08) !important;
}

[data-bs-theme="dark"] .notif-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .notif-item:not(.unread) .notif-title {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .notif-time {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .notif-message {
    color: #9ca3af !important;
}

/* Footer */
[data-bs-theme="dark"] .notif-footer {
    background: #262830 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .notif-footer a {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .notif-footer a:last-child {
    color: #6ea8fe !important;
}

/* Scrollbar */
[data-bs-theme="dark"] .notif-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Empty state */
[data-bs-theme="dark"] .notif-empty-icon {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .notif-empty-icon i {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .notif-empty p {
    color: #6b7280 !important;
}

/* Mobile panel */
[data-bs-theme="dark"] .notification-mobile-panel {
    background: #1e2028 !important;
    background-color: #1e2028 !important;
}

[data-bs-theme="dark"] .notif-mobile-header {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .notif-mobile-scroll {
    background: #121318 !important;
}

[data-bs-theme="dark"] .notif-mobile-item:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .notif-mobile-item.unread {
    background: rgba(0, 86, 179, 0.06) !important;
}

[data-bs-theme="dark"] .notif-mobile-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .notif-mobile-item:not(.unread) .notif-mobile-title {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .notif-mobile-msg {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .notif-mobile-time {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .notif-mobile-chevron {
    color: #4a4d56 !important;
}

[data-bs-theme="dark"] .notif-mobile-footer {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .notif-close-btn {
    background: #262830 !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .notif-empty-circle {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .notif-empty-circle i {
    color: #6b7280 !important;
}


/* ============================================================
   NOTIFICATIONS LIST PAGE (/notifications) — dark mode overrides
   ============================================================ */

[data-bs-theme="dark"] .notif-page-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .notif-page-subtitle {
    color: #9ca3af !important;
}

/* Filter tabs */
[data-bs-theme="dark"] .notif-filter-tabs {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .notif-filter-tab {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .notif-filter-tab.active {
    background: #262830 !important;
    color: #6ea8fe !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .notif-filter-tab:hover:not(.active) {
    color: #e1e3e8 !important;
}

/* Notification list container */
[data-bs-theme="dark"] .notif-page-list {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Notification items */
[data-bs-theme="dark"] .notif-page-item:not(:last-child) {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .notif-page-item:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

[data-bs-theme="dark"] .notif-page-item.unread {
    background: rgba(0, 86, 179, 0.06) !important;
}

[data-bs-theme="dark"] .notif-page-item.unread:hover {
    background: rgba(0, 86, 179, 0.1) !important;
}

[data-bs-theme="dark"] .notif-page-item:active {
    background: rgba(0, 86, 179, 0.1) !important;
}

/* Title */
[data-bs-theme="dark"] .notif-page-item-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .notif-page-item:not(.unread) .notif-page-item-title {
    color: #9ca3af !important;
}

/* Message & meta */
[data-bs-theme="dark"] .notif-page-msg {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .notif-page-time {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .notif-page-chevron {
    color: #4a4d56 !important;
}

/* Empty state */
[data-bs-theme="dark"] .notif-page-empty {
    background: #1e2028 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .notif-page-empty-icon {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .notif-page-empty-icon i {
    color: #6b7280 !important;
}


/* ============================================================
   PROFILE COMPLETENESS — dark mode
   ============================================================ */

[data-bs-theme="dark"] .profile-completeness-compact {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .profile-completeness-compact:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .profile-completeness-detailed {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

[data-bs-theme="dark"] .pc-header {
    color: #e1e3e8 !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .pc-compact-message {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .pc-subtitle {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .pc-missing-list {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .pc-missing-header {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .pc-missing-item {
    border-bottom-color: rgba(255, 255, 255, 0.03) !important;
}

[data-bs-theme="dark"] .pc-missing-icon {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .pc-missing-label {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .pc-missing-action {
    color: #9ca3af !important;
}


/* ============================================================
   ATTENDANCE ANALYTICS PAGE — dark mode
   ============================================================ */

[data-bs-theme="dark"] .analytics-page {
    background: var(--theme-bg-dark, #121318) !important;
}

[data-bs-theme="dark"] .period-toggle {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .period-btn {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .period-btn.active {
    background: var(--bs-primary, #0d6efd) !important;
    color: white !important;
}

[data-bs-theme="dark"] .summary-stat-card {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .summary-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .summary-stat-value {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .summary-stat-label {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .analytics-card {
    background: var(--surface-primary, #1e2028) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .analytics-card-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .dow-name {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .dow-stat {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .checkin-time-range {
    background: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .checkin-time-sub {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .checkin-time-label {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .checkin-time-divider {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .empty-chart-state {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .dow-legend-item {
    color: #9ca3af !important;
}


/* ============================================================
   TEAM STATUS WIDGET — dark mode
   ============================================================ */

[data-bs-theme="dark"] .team-dept-filter {
    background: var(--surface-secondary, #262830) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .team-summary-bar {
    background: var(--surface-secondary, #262830) !important;
}

[data-bs-theme="dark"] .summary-divider {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .summary-label {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .team-category-header {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .category-count {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .team-member:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .member-avatar {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .avatar-initials {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-bs-theme="dark"] .member-name {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .member-time {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .member-dept {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .badge-status.on-time {
    background: rgba(25, 135, 84, 0.2) !important;
    color: #5dd99c !important;
}

[data-bs-theme="dark"] .badge-status.late {
    background: rgba(251, 192, 45, 0.2) !important;
    color: #fbc02d !important;
}

[data-bs-theme="dark"] .badge-mode.wfo {
    background: rgba(25, 135, 84, 0.15) !important;
    color: #5dd99c !important;
}

[data-bs-theme="dark"] .badge-mode.wfh {
    background: rgba(77, 163, 255, 0.15) !important;
    color: #4da3ff !important;
}

[data-bs-theme="dark"] .badge-leave {
    background: rgba(251, 192, 45, 0.18) !important;
    color: #fbc02d !important;
}

[data-bs-theme="dark"] .show-more-btn {
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--bs-primary, #4da3ff) !important;
}

[data-bs-theme="dark"] .show-more-btn:hover {
    background: rgba(77, 163, 255, 0.08) !important;
    border-color: var(--bs-primary, #4da3ff) !important;
}

[data-bs-theme="dark"] .team-empty-state {
    color: #9ca3af !important;
}

/* ============ REWARD PROGRESS CARD ============ */

[data-bs-theme="dark"] .reward-progress-card {
    background-color: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
}

[data-bs-theme="dark"] .reward-progress-card .reward-item {
    background: linear-gradient(135deg, #1e2028 0%, #262830 100%) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .reward-progress-card .reward-item.can-redeem {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%) !important;
    border-color: rgba(34, 197, 94, 0.25) !important;
}

[data-bs-theme="dark"] .reward-progress-card .reward-name {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .reward-progress-card .progress-bar-track {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .reward-progress-card .progress-label {
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .reward-progress-card .browse-all-link {
    color: #818cf8 !important;
}

[data-bs-theme="dark"] .reward-progress-card .browse-all-link:hover {
    color: #a5b4fc !important;
}

/* ============ CAMPAIGN SYSTEM (dark mode overrides) ============ */

/* Campaign Highlight Card */
[data-bs-theme="dark"] .campaign-card {
    background: var(--surface-primary) !important;
    border-color: var(--border-subtle) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}

[data-bs-theme="dark"] .campaign-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

[data-bs-theme="dark"] .campaign-goal-reached {
    border-color: rgba(16, 185, 129, 0.25) !important;
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.1) !important;
}

[data-bs-theme="dark"] .campaign-title {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .campaign-desc {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .campaign-progress-bar {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .campaign-progress-text {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .campaign-meta {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .campaign-leaderboard {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .campaign-leaderboard-header {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .campaign-leaderboard-name {
    color: #d1d5db !important;
}

[data-bs-theme="dark"] .campaign-leaderboard-score {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .campaign-participate-btn {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .campaign-participate-btn:hover {
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3) !important;
}

/* Campaign Sidebar Widget */
[data-bs-theme="dark"] .campaign-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .campaign-sidebar-name {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .campaign-sidebar-meta {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .campaign-sidebar-dot {
    background: #4b5563 !important;
}

[data-bs-theme="dark"] .campaign-sidebar-progress-bar {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .campaign-sidebar-progress-text {
    color: #9ca3af !important;
}

/* Campaign badge on Recognition Card */
[data-bs-theme="dark"] .recognition-campaign-badge {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15)) !important;
    color: #818cf8 !important;
    border-color: rgba(102, 126, 234, 0.25) !important;
}

/* Campaign pill in ComposeBox */
[data-bs-theme="dark"] .compose-campaign-pill {
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .compose-campaign-pill:hover {
    border-color: #667eea !important;
    color: #818cf8 !important;
    background: rgba(102, 126, 234, 0.1) !important;
}

[data-bs-theme="dark"] .compose-campaign-pill.active {
    border-color: #667eea !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15)) !important;
    color: #818cf8 !important;
}

/* ============================================================
   Badges & Achievements — Dark Mode !important overrides
   Ensures dark mode wins any specificity battles.
   ============================================================ */
[data-bs-theme="dark"] .badge-display {
    background: #0f1117 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .badge-category-section {
    border-top-color: rgba(255, 255, 255, 0.04) !important;
}

[data-bs-theme="dark"] .category-icon-pip {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .category-icon-pip i {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-bs-theme="dark"] .category-name {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-bs-theme="dark"] .category-earned {
    color: #fbbf24 !important;
}

[data-bs-theme="dark"] .category-total {
    color: rgba(255, 255, 255, 0.3) !important;
}

[data-bs-theme="dark"] .badge-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .badge-item.unearned {
    opacity: 0.3 !important;
}

[data-bs-theme="dark"] .badge-item.earned.tier-none {
    border-color: rgba(99, 102, 241, 0.4) !important;
    background: linear-gradient(160deg, rgba(99, 102, 241, 0.12) 0%, rgba(99, 102, 241, 0.04) 100%) !important;
}

[data-bs-theme="dark"] .badge-item.earned.tier-bronze {
    border-color: rgba(205, 127, 50, 0.45) !important;
    background: linear-gradient(160deg, rgba(205, 127, 50, 0.14) 0%, rgba(205, 127, 50, 0.04) 100%) !important;
}

[data-bs-theme="dark"] .badge-item.earned.tier-silver {
    border-color: rgba(192, 192, 220, 0.4) !important;
    background: linear-gradient(160deg, rgba(192, 192, 220, 0.1) 0%, rgba(192, 192, 220, 0.03) 100%) !important;
}

[data-bs-theme="dark"] .badge-item.earned.tier-gold {
    border-color: rgba(255, 215, 0, 0.5) !important;
    background: linear-gradient(160deg, rgba(255, 215, 0, 0.14) 0%, rgba(255, 215, 0, 0.03) 100%) !important;
}

[data-bs-theme="dark"] .badge-item.earned.tier-platinum {
    border-color: rgba(139, 92, 246, 0.5) !important;
    background: linear-gradient(160deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.04) 100%) !important;
}

[data-bs-theme="dark"] .badge-name {
    color: rgba(255, 255, 255, 0.7) !important;
}

[data-bs-theme="dark"] .badge-item.earned .badge-name {
    color: rgba(255, 255, 255, 0.9) !important;
}

[data-bs-theme="dark"] .badge-progress-track {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .badge-progress-text {
    color: rgba(255, 255, 255, 0.35) !important;
}

[data-bs-theme="dark"] .badge-overlay {
    background: rgba(0, 0, 0, 0.75) !important;
}

[data-bs-theme="dark"] .badge-detail-card {
    background: #1a1d28 !important;
}

[data-bs-theme="dark"] .badge-detail-close {
    background: rgba(0, 0, 0, 0.3) !important;
    color: white !important;
}

[data-bs-theme="dark"] .detail-badge-name {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .detail-desc {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-bs-theme="dark"] .detail-progress-section {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .detail-progress-label {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-bs-theme="dark"] .detail-progress-pct {
    color: #fbbf24 !important;
}

[data-bs-theme="dark"] .detail-xp-bar {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .detail-progress-footer {
    color: rgba(255, 255, 255, 0.4) !important;
}

[data-bs-theme="dark"] .earned-check-ring {
    background: rgba(52, 211, 153, 0.1) !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
    color: #34d399 !important;
}

[data-bs-theme="dark"] .detail-earned-badge span {
    color: #34d399 !important;
}

/* ============ INLINE COMMENT BOX ============ */
[data-bs-theme="dark"] .inline-comments-section {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .inline-comment-bubble {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .inline-comment-author {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .inline-comment-text {
    color: #d1d5db !important;
}

[data-bs-theme="dark"] .inline-view-all-btn {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .inline-view-all-btn:hover {
    color: var(--bs-primary, #6ea8fe) !important;
}

[data-bs-theme="dark"] .inline-comment-input-container {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .inline-comment-input-container:focus-within {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25) !important;
}

[data-bs-theme="dark"] .inline-comment-input {
    color: #e1e3e8 !important;
}

[data-bs-theme="dark"] .inline-comment-input::placeholder {
    color: #4b5563 !important;
}

/* ============ TWITTER/X-STYLE RECOGNITION POSTS ============ */
[data-bs-theme="dark"] .tweet-post {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .tweet-post:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

[data-bs-theme="dark"] .tweet-context-line {
    color: #8b8f94;
}

[data-bs-theme="dark"] .tweet-display-name {
    color: #e7e9ea;
}

[data-bs-theme="dark"] .tweet-handle,
[data-bs-theme="dark"] .tweet-separator,
[data-bs-theme="dark"] .tweet-time {
    color: #8b8f94;
}

[data-bs-theme="dark"] .tweet-more-btn {
    color: #8b8f94;
}

[data-bs-theme="dark"] .tweet-more-btn:hover {
    background-color: rgba(29, 155, 240, 0.15);
    color: #1d9bf0;
}

[data-bs-theme="dark"] .tweet-recognition-context {
    color: #8b8f94;
}

[data-bs-theme="dark"] .tweet-points-badge {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.2));
    color: #fbbf24;
}

[data-bs-theme="dark"] .tweet-points-badge i {
    color: #fbbf24;
}

[data-bs-theme="dark"] .tweet-text {
    color: #e7e9ea;
}

/* Remove media borders inside tweet posts */
[data-bs-theme="dark"] .tweet-media .media-preview-image,
[data-bs-theme="dark"] .tweet-media .media-preview-gif {
    border: none !important;
}

.tweet-media .media-preview {
    margin: 0 !important;
}

.tweet-media .media-preview-container,
.tweet-media .media-preview-gif-container {
    display: block !important;
}

.tweet-media .media-preview-image,
.tweet-media .media-preview-gif {
    max-width: 100% !important;
    border-radius: 16px !important;
    border: none !important;
    object-fit: contain !important;
    max-height: 400px !important;
}

[data-bs-theme="dark"] .tweet-campaign {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15), rgba(118, 75, 162, 0.15));
    color: #818cf8;
    border-color: rgba(102, 126, 234, 0.25);
}

[data-bs-theme="dark"] .tweet-action-btn {
    color: #8b8f94;
}

[data-bs-theme="dark"] .tweet-reaction-popup {
    background: #2a2d35;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .tweet-reaction-option.selected {
    background: rgba(29, 155, 240, 0.2);
}

[data-bs-theme="dark"] .timeline-container {
    background: #16181c;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .skeleton-tweet-post {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ── Admin Reward Manager Dark Mode ── */
[data-bs-theme="dark"] .arm-stat-card {
    background: #1e1e2e;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .arm-stat-value {
    color: #e2e8f0;
}

[data-bs-theme="dark"] .arm-stat-label {
    color: #94a3b8;
}

[data-bs-theme="dark"] .arm-tabs {
    background: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .arm-tab {
    color: #94a3b8;
}

[data-bs-theme="dark"] .arm-tab:hover {
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .arm-tab--active {
    background: #1e1e2e;
    color: #e2e8f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .arm-tab-count {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

[data-bs-theme="dark"] .arm-tab--active .arm-tab-count {
    background: #3b82f6;
    color: #fff;
}

[data-bs-theme="dark"] .arm-list {
    background: #1e1e2e;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .arm-item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .arm-item:hover {
    background: rgba(255, 255, 255, 0.03);
}

[data-bs-theme="dark"] .arm-item-title {
    color: #e2e8f0;
}

[data-bs-theme="dark"] .arm-item-desc {
    color: #64748b;
}

[data-bs-theme="dark"] .arm-item-thumb-placeholder {
    background: linear-gradient(135deg, #2a2a3e, #1e1e30);
    color: #64748b;
}

[data-bs-theme="dark"] .arm-action-btn {
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
}

[data-bs-theme="dark"] .arm-empty {
    background: #1e1e2e;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .arm-empty h5 {
    color: #e2e8f0;
}

[data-bs-theme="dark"] .arm-empty p {
    color: #64748b;
}

[data-bs-theme="dark"] .arm-stock {
    color: #94a3b8;
}

[data-bs-theme="dark"] .arm-item-actions {
    border-top-color: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .arm-modal {
    background: #1e1e2e;
}

[data-bs-theme="dark"] .arm-modal-title {
    color: #e2e8f0;
}

[data-bs-theme="dark"] .arm-modal-close {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

[data-bs-theme="dark"] .arm-modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
}

[data-bs-theme="dark"] .arm-modal-footer {
    border-top-color: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .arm-form-label {
    color: #94a3b8;
}

[data-bs-theme="dark"] .arm-form-input {
    background: #16181c;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

[data-bs-theme="dark"] .arm-form-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

[data-bs-theme="dark"] .arm-form-input::placeholder {
    color: #64748b;
}

/* ── Admin Reward Manager Modal Form (global for Blazor components) ── */
.arm-modal-body .arm-form-input,
.arm-modal-body input.arm-form-input,
.arm-modal-body textarea.arm-form-input,
.arm-modal-body select.arm-form-input {
    padding: 10px 14px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    color: #1e293b !important;
    background: #fff !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.arm-modal-body .arm-form-input:focus,
.arm-modal-body input.arm-form-input:focus,
.arm-modal-body textarea.arm-form-input:focus,
.arm-modal-body select.arm-form-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.arm-modal-body .arm-form-input::placeholder,
.arm-modal-body input.arm-form-input::placeholder,
.arm-modal-body textarea.arm-form-input::placeholder {
    color: #94a3b8 !important;
}

.arm-modal-body textarea.arm-form-input,
.arm-modal-body .arm-form-textarea {
    resize: vertical !important;
    min-height: 80px !important;
}

.arm-modal-body select.arm-form-input {
    appearance: auto !important;
    cursor: pointer !important;
}

[data-bs-theme="dark"] .arm-modal-body .arm-form-input,
[data-bs-theme="dark"] .arm-modal-body input.arm-form-input,
[data-bs-theme="dark"] .arm-modal-body textarea.arm-form-input,
[data-bs-theme="dark"] .arm-modal-body select.arm-form-input {
    background: #16181c !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .arm-modal-body .arm-form-input:focus,
[data-bs-theme="dark"] .arm-modal-body input.arm-form-input:focus,
[data-bs-theme="dark"] .arm-modal-body textarea.arm-form-input:focus,
[data-bs-theme="dark"] .arm-modal-body select.arm-form-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

[data-bs-theme="dark"] .arm-modal-body .arm-form-input::placeholder,
[data-bs-theme="dark"] .arm-modal-body input.arm-form-input::placeholder,
[data-bs-theme="dark"] .arm-modal-body textarea.arm-form-input::placeholder {
    color: #64748b !important;
}

[data-bs-theme="dark"] .arm-toggle-wrap {
    background: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] .arm-toggle-wrap:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .arm-toggle {
    background: #475569;
}

[data-bs-theme="dark"] .arm-toggle-label {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .arm-btn--cancel {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

[data-bs-theme="dark"] .arm-btn--cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
}

[data-bs-theme="dark"] .arm-reject-summary {
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
}

[data-bs-theme="dark"] .arm-info-banner {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
}

/* ── Comment Point Targeting (multi-recipient) ── */
[data-bs-theme="dark"] .composer-target-wrap {
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .composer-target-toggle {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-bs-theme="dark"] .composer-target-btn {
    color: #9ca3af !important;
    background: transparent !important;
}

[data-bs-theme="dark"] .composer-target-btn.active {
    background: var(--bs-primary, #0d6efd) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .composer-target-recipient-label {
    color: #d1d5db !important;
}

[data-bs-theme="dark"] .composer-target-recipients {
    color: #d1d5db !important;
}

/* InlineCommentBox targeting */
[data-bs-theme="dark"] .inline-target-row {
    color: #d1d5db !important;
}

[data-bs-theme="dark"] .inline-target-label {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .inline-target-toggle {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

[data-bs-theme="dark"] .inline-target-btn {
    color: #9ca3af !important;
    background: transparent !important;
}

[data-bs-theme="dark"] .inline-target-btn.active {
    background: var(--bs-primary, #0d6efd) !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .inline-target-check-label {
    color: #d1d5db !important;
}

/* ── ComposeBox distribution row ── */
[data-bs-theme="dark"] .compose-distribution-row {
    background: rgba(255, 255, 255, 0.04);
    color: #9ca3af;
}

[data-bs-theme="dark"] .compose-distribution-remainder {
    color: #6b7280;
}

/* ── Organization Settings Form (global for Blazor InputText/Select components) ── */
.os-form-input,
input.os-form-input,
select.os-form-input,
textarea.os-form-input {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    color: #1f2937 !important;
    background: #fff !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    outline: none !important;
    box-sizing: border-box !important;
    appearance: auto !important;
}

.os-form-input:focus,
input.os-form-input:focus,
select.os-form-input:focus,
textarea.os-form-input:focus {
    border-color: var(--bs-primary, #0d6efd) !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1) !important;
}

.os-form-input::placeholder,
input.os-form-input::placeholder,
textarea.os-form-input::placeholder {
    color: #9ca3af !important;
}

.os-form-input[readonly],
input.os-form-input[readonly] {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    cursor: default !important;
}

.os-form-label {
    display: block !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 6px !important;
}

.os-form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

.os-form-group {
    margin-bottom: 18px !important;
}

.os-form-hint {
    font-size: 0.75rem !important;
    color: #9ca3af !important;
    margin-top: 4px !important;
}

[data-bs-theme="dark"] .os-form-input,
[data-bs-theme="dark"] input.os-form-input,
[data-bs-theme="dark"] select.os-form-input,
[data-bs-theme="dark"] textarea.os-form-input {
    background: #16181c !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e5e7eb !important;
}

[data-bs-theme="dark"] .os-form-input:focus,
[data-bs-theme="dark"] input.os-form-input:focus,
[data-bs-theme="dark"] select.os-form-input:focus,
[data-bs-theme="dark"] textarea.os-form-input:focus {
    border-color: var(--bs-primary, #6ea8fe) !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15) !important;
}

[data-bs-theme="dark"] .os-form-input::placeholder,
[data-bs-theme="dark"] input.os-form-input::placeholder,
[data-bs-theme="dark"] textarea.os-form-input::placeholder {
    color: #4b5563 !important;
}

[data-bs-theme="dark"] .os-form-input[readonly],
[data-bs-theme="dark"] input.os-form-input[readonly] {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #6b7280 !important;
}

[data-bs-theme="dark"] .os-form-label {
    color: #9ca3af !important;
}

[data-bs-theme="dark"] .os-form-hint {
    color: #6b7280 !important;
}

@media (max-width: 991.98px) {
    .os-form-row {
        grid-template-columns: 1fr !important;
    }
}