/* -------------------------------------------------------------------------- */
/* HRIS Enterprise - Multi-Platform Mobile & Desktop CSS System              */
/* iOS Safari, Android Chrome/Samsung, Windows, macOS, Tablets               */
/* -------------------------------------------------------------------------- */

:root {
    color-scheme: dark;
    --sat: env(safe-area-inset-top, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
}

/* Ensure full viewport height on mobile browsers without jumpy address bar */
html, body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Safe area insets support for iPhone Notch and Home Indicator */
body {
    padding-top: var(--sat);
    padding-left: var(--sal);
    padding-right: var(--sar);
}

/* Prevent iOS Safari auto-zoom on focus by enforcing min 16px font-size on mobile inputs */
@media (max-width: 768px) {
    input, select, textarea, .input-field {
        font-size: 16px !important;
    }
    
    /* Extra padding at bottom so content is never hidden behind mobile bottom nav */
    main {
        padding-bottom: calc(var(--sab) + 5.5rem) !important;
    }
}

/* Momentum Touch Scrolling for iOS */
.touch-scroll {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

/* Mirror preview for front selfie camera */
.mirror {
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}

/* Touch-optimized Navigation Buttons */
.nav-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    padding: 0.65rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #94a3b8;
    border-radius: 0.75rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 0.75rem;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.nav-btn svg,
.nav-btn i {
    flex-shrink: 0;
}

.nav-btn > span:not([class*="ml-auto"]) {
    flex: 1;
    min-width: 0;
    text-align: left;
    line-height: 1.35;
}

.nav-btn span {
    text-align: left;
}

.nav-btn span[class*="ml-auto"],
.nav-btn .badge-pill {
    flex-shrink: 0;
    white-space: nowrap;
    text-align: center;
}

#sectionMenuUtama,
#sectionSecurityAudit {
    text-align: left;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}

.nav-btn:hover, .nav-btn:active {
    color: #ffffff;
    background-color: rgba(30, 41, 59, 0.7);
}

.nav-btn.active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.3), rgba(99, 102, 241, 0.18));
    border: 1px solid rgba(99, 102, 241, 0.4);
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.18);
}

.nav-btn.active svg {
    color: #818cf8;
}

/* Mobile Bottom Navigation Bar Buttons */
.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 48px;
    padding: 0.4rem 0.2rem;
    color: #94a3b8;
    font-size: 0.6875rem;
    font-weight: 600;
    transition: color 0.15s ease, transform 0.15s ease;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.mobile-nav-item:active {
    transform: scale(0.92);
}

.mobile-nav-item.active {
    color: #818cf8;
}

.mobile-nav-item.active svg {
    color: #6366f1;
}

/* Glassmorphic KPI Cards */
.kpi-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.45));
    border: 1px solid rgba(51, 65, 85, 0.65);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.45);
}

.kpi-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kpi-value {
    font-size: 1.625rem;
    font-weight: 800;
    margin-top: 0.35rem;
    letter-spacing: -0.025em;
}

/* Dashboard List Items & Badges (Dark Mode Default) */
.dashboard-widget-card {
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-list-item {
    background: rgba(7, 11, 20, 0.65);
    border: 1px solid rgba(30, 41, 59, 0.8);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-list-item:hover {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(71, 85, 105, 0.8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dashboard-list-item .dashboard-emp-name {
    color: #f1f5f9;
}

.dashboard-list-item .dashboard-emp-sub {
    color: #94a3b8;
}

.badge-urgent {
    background: rgba(244, 63, 94, 0.18);
    color: #fda4af;
    border: 1px solid rgba(244, 63, 94, 0.35);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.badge-ontime {
    background: rgba(16, 185, 129, 0.18);
    color: #6ee7b7;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.badge-late {
    background: rgba(244, 63, 94, 0.18);
    color: #fda4af;
    border: 1px solid rgba(244, 63, 94, 0.35);
}

/* Tab Transition */
.tab-content {
    display: none;
    animation: fadeIn 0.25s ease-in-out;
}

.tab-content.active {
    display: block;
}

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

/* Buttons with tactile active states */
.btn-primary {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
    color: #ffffff;
    font-weight: 600;
    padding: 0.6rem 1.1rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
    transition: all 0.2s ease;
    touch-action: manipulation;
    cursor: pointer;
    min-height: 42px;
}

.btn-primary:active {
    transform: scale(0.97);
    opacity: 0.9;
}

.btn-secondary {
    background: rgba(30, 41, 59, 0.85);
    color: #e2e8f0;
    border: 1px solid #475569;
    font-weight: 600;
    padding: 0.6rem 1.1rem;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
    touch-action: manipulation;
    cursor: pointer;
    min-height: 42px;
}

.btn-secondary:active {
    background: #334155;
    transform: scale(0.97);
}

.input-field {
    background-color: #0f172a;
    border: 1px solid #334155;
    border-radius: 0.75rem;
    color: #f1f5f9;
    padding: 0.65rem 0.85rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.input-field:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

/* Universal Select & Options dark styling */
select {
    color-scheme: dark;
}

select option,
select optgroup {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

select option:checked,
select option:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

/* Performance Management Dropdown Periode & Filter specific styling */
#perfPeriodSelect,
#perfCategoryFilter {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

#perfPeriodSelect option,
#perfCategoryFilter option,
#goalPeriodId option,
#appraisalPeriodId option {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

/* Modals with Mobile Bottom-Sheet support */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(7, 11, 20, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-box {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 1.25rem;
    padding: 1.5rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    animation: modalIn 0.2s ease-out;
}

@keyframes modalIn {
    from {
        transform: scale(0.96);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* On mobile, modals slide up comfortably from bottom */
@media (max-width: 640px) {
    .modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }
    .modal-box {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        max-height: 88vh;
        border-width: 1px 0 0 0;
        animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Mobile Drawer Overlay */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(7, 11, 20, 0.8);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 60;
    transition: opacity 0.25s ease;
}

.drawer-content {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 290px;
    max-width: 85vw;
    background: #0f172a;
    border-left: 1px solid #334155;
    z-index: 61;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    padding-top: calc(var(--sat) + 1.25rem);
    padding-bottom: calc(var(--sab) + 1.25rem);
}

.drawer-open .drawer-content {
    transform: translateX(0);
}

/* Responsive Table Scroll Hints & Visible Scrollbars */
.table-responsive-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 1rem;
    scrollbar-width: thin;
    scrollbar-color: #475569 #1e293b;
}

.table-responsive-container::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.table-responsive-container::-webkit-scrollbar-track {
    background: #0f172a;
    border-radius: 9999px;
    margin: 0 4px;
}

.table-responsive-container::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 9999px;
    border: 2px solid #0f172a;
}

.table-responsive-container::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

html.light .table-responsive-container,
html:not(.dark) .table-responsive-container {
    scrollbar-color: #94a3b8 #f1f5f9;
}

html.light .table-responsive-container::-webkit-scrollbar-track,
html:not(.dark) .table-responsive-container::-webkit-scrollbar-track {
    background: #f1f5f9;
}

html.light .table-responsive-container::-webkit-scrollbar-thumb,
html:not(.dark) .table-responsive-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border: 2px solid #f1f5f9;
}

html.light .table-responsive-container::-webkit-scrollbar-thumb:hover,
html:not(.dark) .table-responsive-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* -------------------------------------------------------------------------- */
/* THEME SYSTEM (LIGHT & DARK MODE)                                          */
/* -------------------------------------------------------------------------- */

/* Transitions for silky smooth theme switching */
body, header, aside, main, .kpi-card, .btn-secondary, .input-field, .modal-box, .drawer-content, #mobileBottomNav {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Theme Toggle Button */
.theme-toggle-btn {
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}

.theme-toggle-btn:active {
    transform: scale(0.94);
}

/* ========================================================================== */
/* LIGHT THEME STYLES (Modern, Bright, Corporate Clean SaaS)                  */
/* ========================================================================== */
html.light,
html:not(.dark) {
    color-scheme: light !important;
}

html.light body,
html:not(.dark) body {
    background-color: #f8fafc !important;
    color: #1e293b !important;
}

/* Header & Top Bar */
html.light header,
html:not(.dark) header {
    background-color: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

html.light header h1,
html:not(.dark) header h1 {
    background: linear-gradient(135deg, #0f172a 0%, #312e81 50%, #4f46e5 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

html.light #liveClock,
html:not(.dark) #liveClock {
    color: #4338ca !important;
}

html.light header .font-mono,
html:not(.dark) header .font-mono {
    background-color: #eef2ff !important;
    border-color: #c7d2fe !important;
    color: #4338ca !important;
}

html.light #currentUserName,
html:not(.dark) #currentUserName {
    color: #0f172a !important;
}

html.light #currentUserRole,
html:not(.dark) #currentUserRole {
    color: #64748b !important;
}

html.light #roleSwitcher,
html:not(.dark) #roleSwitcher {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

html.light #roleSwitcher:hover,
html:not(.dark) #roleSwitcher:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
}

html.light .theme-toggle-btn,
html:not(.dark) .theme-toggle-btn {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

html.light .theme-toggle-btn:hover,
html:not(.dark) .theme-toggle-btn:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

/* Desktop Sidebar */
html.light aside,
html:not(.dark) aside {
    background-color: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
}

html.light #sectionMenuUtama,
html.light #sectionSecurityAudit,
html:not(.dark) #sectionMenuUtama,
html:not(.dark) #sectionSecurityAudit {
    color: #94a3b8 !important;
}

html.light .nav-btn,
html:not(.dark) .nav-btn {
    color: #64748b !important;
}

html.light .nav-btn:hover,
html.light .nav-btn:active,
html:not(.dark) .nav-btn:hover,
html:not(.dark) .nav-btn:active {
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
}

html.light .nav-btn.active,
html:not(.dark) .nav-btn.active {
    color: #4338ca !important;
    background: #eef2ff !important;
    border: 1px solid #c7d2fe !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.1) !important;
}

html.light .nav-btn.active svg,
html:not(.dark) .nav-btn.active svg {
    color: #4f46e5 !important;
}

/* Main Container */
html.light main,
html:not(.dark) main {
    background-color: #f8fafc !important;
    background-image: radial-gradient(#e2e8f0 1.2px, transparent 1.2px) !important;
    background-size: 24px 24px !important;
}

/* Headings in Light Mode */
html.light h1:not([class*="bg-gradient"]),
html.light h2:not([class*="bg-gradient"]),
html.light h3:not([class*="bg-gradient"]),
html.light h4:not([class*="bg-gradient"]),
html:not(.dark) h1:not([class*="bg-gradient"]),
html:not(.dark) h2:not([class*="bg-gradient"]),
html:not(.dark) h3:not([class*="bg-gradient"]),
html:not(.dark) h4:not([class*="bg-gradient"]) {
    color: #0f172a !important;
}

html.light #dashboardTitle,
html.light #essFullName,
html:not(.dark) #dashboardTitle,
html:not(.dark) #essFullName {
    color: #0f172a !important;
}

html.light #dashboardSubtitle,
html.light #essPositionDept,
html.light p.text-slate-400,
html:not(.dark) #dashboardSubtitle,
html:not(.dark) #essPositionDept,
html:not(.dark) p.text-slate-400 {
    color: #64748b !important;
}

/* KPI Cards */
html.light .kpi-card,
html:not(.dark) .kpi-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
}

html.light .kpi-card:hover,
html:not(.dark) .kpi-card:hover {
    border-color: #c7d2fe !important;
    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.12) !important;
}

html.light .kpi-label,
html:not(.dark) .kpi-label {
    color: #64748b !important;
}

html.light .kpi-value.text-white,
html.light .kpi-value:not([class*="text-"]),
html:not(.dark) .kpi-value.text-white,
html:not(.dark) .kpi-value:not([class*="text-"]) {
    color: #0f172a !important;
}

html.light .kpi-card .text-emerald-400,
html:not(.dark) .kpi-card .text-emerald-400 {
    color: #047857 !important;
}

html.light .kpi-card .text-amber-400,
html:not(.dark) .kpi-card .text-amber-400 {
    color: #b45309 !important;
}

html.light .kpi-card .text-rose-400,
html:not(.dark) .kpi-card .text-rose-400 {
    color: #be123c !important;
}

html.light .kpi-card .text-cyan-400,
html:not(.dark) .kpi-card .text-cyan-400 {
    color: #0369a1 !important;
}

html.light .kpi-card .text-purple-400,
html:not(.dark) .kpi-card .text-purple-400 {
    color: #6b21a8 !important;
}

html.light .kpi-card .text-blue-400,
html:not(.dark) .kpi-card .text-blue-400 {
    color: #1d4ed8 !important;
}

/* Background Containers to Crisp White Panels */
html.light .bg-darkbg-800\/30,
html.light .bg-darkbg-800\/40,
html.light .bg-darkbg-800\/50,
html.light .bg-darkbg-800\/60,
html.light .bg-darkbg-800\/80,
html.light .bg-darkbg-800\/90,
html.light .bg-darkbg-800,
html.light .bg-darkbg-700\/30,
html.light .bg-darkbg-700\/40,
html.light .bg-darkbg-700\/50,
html.light .bg-darkbg-700\/60,
html.light .bg-darkbg-700\/80,
html.light .bg-darkbg-700,
html:not(.dark) .bg-darkbg-800\/30,
html:not(.dark) .bg-darkbg-800\/40,
html:not(.dark) .bg-darkbg-800\/50,
html:not(.dark) .bg-darkbg-800\/60,
html:not(.dark) .bg-darkbg-800\/80,
html:not(.dark) .bg-darkbg-800\/90,
html:not(.dark) .bg-darkbg-800,
html:not(.dark) .bg-darkbg-700\/30,
html:not(.dark) .bg-darkbg-700\/40,
html:not(.dark) .bg-darkbg-700\/50,
html:not(.dark) .bg-darkbg-700\/60,
html:not(.dark) .bg-darkbg-700\/80,
html:not(.dark) .bg-darkbg-700 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html.light .bg-darkbg-900\/60,
html.light .bg-darkbg-900\/80,
html.light .bg-darkbg-900,
html:not(.dark) .bg-darkbg-900\/60,
html:not(.dark) .bg-darkbg-900\/80,
html:not(.dark) .bg-darkbg-900 {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* ESS Banner in Light Mode */
html.light #essDashboardView > div:first-child,
html:not(.dark) #essDashboardView > div:first-child {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #eef2ff 100%) !important;
    border: 1px solid #c7d2fe !important;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.08) !important;
}

html.light #essTaxTer,
html:not(.dark) #essTaxTer {
    color: #4338ca !important;
}

/* Form Controls & Inputs */
html.light .input-field,
html.light input:not([type="checkbox"]):not([type="radio"]),
html.light select,
html.light textarea,
html:not(.dark) .input-field,
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]),
html:not(.dark) select,
html:not(.dark) textarea {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html.light .input-field:focus,
html.light input:focus,
html.light select:focus,
html.light textarea:focus,
html:not(.dark) .input-field:focus,
html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
}

html.light input::placeholder,
html.light textarea::placeholder,
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: #94a3b8 !important;
}

html.light select,
html:not(.dark) select {
    color-scheme: light !important;
}

html.light select option,
html.light select optgroup,
html:not(.dark) select option,
html:not(.dark) select optgroup {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

html.light select option:checked,
html.light select option:hover,
html:not(.dark) select option:checked,
html:not(.dark) select option:hover {
    background-color: #eef2ff !important;
    color: #4338ca !important;
}

html.light #perfPeriodSelect,
html.light #perfCategoryFilter,
html:not(.dark) #perfPeriodSelect,
html:not(.dark) #perfCategoryFilter {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

html.light #perfSearchInput,
html:not(.dark) #perfSearchInput {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

html.light label,
html:not(.dark) label {
    color: #475569 !important;
}

/* Secondary Buttons */
html.light .btn-secondary,
html:not(.dark) .btn-secondary {
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

html.light .btn-secondary:hover,
html.light .btn-secondary:active,
html:not(.dark) .btn-secondary:hover,
html:not(.dark) .btn-secondary:active {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* Tables */
html.light .table-responsive-container,
html:not(.dark) .table-responsive-container {
    background-color: #ffffff !important;
}

html.light table thead,
html.light table thead tr,
html.light table thead th,
html:not(.dark) table thead,
html:not(.dark) table thead tr,
html:not(.dark) table thead th {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html.light table tbody tr,
html:not(.dark) table tbody tr {
    border-bottom: 1px solid #f1f5f9 !important;
}

html.light table tbody tr:hover,
html:not(.dark) table tbody tr:hover {
    background-color: #f8fafc !important;
}

html.light table tbody td,
html:not(.dark) table tbody td {
    color: #334155 !important;
}

html.light table .font-bold.text-white,
html.light table .font-bold:not([class*="text-"]),
html:not(.dark) table .font-bold.text-white,
html:not(.dark) table .font-bold:not([class*="text-"]) {
    color: #0f172a !important;
}

html.light table .text-slate-200,
html.light table .text-slate-300,
html:not(.dark) table .text-slate-200,
html:not(.dark) table .text-slate-300 {
    color: #334155 !important;
}

html.light table .text-slate-400,
html.light table .text-slate-500,
html:not(.dark) table .text-slate-400,
html:not(.dark) table .text-slate-500 {
    color: #64748b !important;
}

/* Allowance Breakdown Card & List in Positions Table */
.allowance-breakdown-card {
    transition: all 0.2s ease;
}

html.light .allowance-breakdown-card,
html:not(.dark) .allowance-breakdown-card {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html.light .allowance-breakdown-card li,
html:not(.dark) .allowance-breakdown-card li {
    border-color: #e2e8f0 !important;
}

html.light .allowance-breakdown-card .text-slate-400,
html:not(.dark) .allowance-breakdown-card .text-slate-400 {
    color: #64748b !important;
}

html.light .allowance-breakdown-card .text-slate-300,
html:not(.dark) .allowance-breakdown-card .text-slate-300 {
    color: #334155 !important;
}

html.light .allowance-breakdown-card .text-slate-200,
html:not(.dark) .allowance-breakdown-card .text-slate-200 {
    color: #0f172a !important;
}

html.light .allowance-breakdown-card .text-slate-500,
html:not(.dark) .allowance-breakdown-card .text-slate-500 {
    color: #94a3b8 !important;
}

/* Borders across app */
html.light .border-slate-800,
html.light .border-slate-700,
html.light .border-slate-600,
html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-700,
html:not(.dark) .border-slate-600 {
    border-color: #e2e8f0 !important;
}

html.light .divide-slate-800 > :not([hidden]) ~ :not([hidden]),
html.light .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]),
html:not(.dark) .divide-slate-800 > :not([hidden]) ~ :not([hidden]),
html:not(.dark) .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]) {
    border-color: #f1f5f9 !important;
}

/* Modals */
html.light .modal-backdrop,
html:not(.dark) .modal-backdrop {
    background-color: rgba(15, 23, 42, 0.45) !important;
}

html.light .modal-box,
html:not(.dark) .modal-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15) !important;
}

html.light .modal-box h3,
html:not(.dark) .modal-box h3 {
    color: #0f172a !important;
}

html.light .modal-box button.text-slate-400:hover,
html:not(.dark) .modal-box button.text-slate-400:hover {
    color: #0f172a !important;
}

html.light .modal-box .border-b,
html.light .modal-box .border-t,
html:not(.dark) .modal-box .border-b,
html:not(.dark) .modal-box .border-t {
    border-color: #e2e8f0 !important;
}

/* Drawer */
html.light .drawer-backdrop,
html:not(.dark) .drawer-backdrop {
    background: rgba(15, 23, 42, 0.45) !important;
}

html.light .drawer-content,
html:not(.dark) .drawer-content {
    background: #ffffff !important;
    border-left: 1px solid #e2e8f0 !important;
    box-shadow: -10px 0 25px rgba(0, 0, 0, 0.05);
}

html.light .drawer-content .text-white,
html:not(.dark) .drawer-content .text-white {
    color: #0f172a !important;
}

html.light .drawer-content .border-b,
html.light .drawer-content .border-t,
html:not(.dark) .drawer-content .border-b,
html:not(.dark) .drawer-content .border-t {
    border-color: #e2e8f0 !important;
}

/* Mobile Bottom Navigation */
html.light #mobileBottomNav,
html:not(.dark) #mobileBottomNav {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05) !important;
}

html.light .mobile-nav-item,
html:not(.dark) .mobile-nav-item {
    color: #64748b !important;
}

html.light .mobile-nav-item.active,
html:not(.dark) .mobile-nav-item.active {
    color: #4f46e5 !important;
}

html.light #mob-attendance > div,
html:not(.dark) #mob-attendance > div {
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.25) !important;
    border: 3px solid #ffffff !important;
}

/* Bank Dropdown Menu */
html.light #bankDropdownMenu,
html:not(.dark) #bankDropdownMenu {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

html.light #bankDropdownMenu a,
html:not(.dark) #bankDropdownMenu a {
    color: #334155 !important;
}

html.light #bankDropdownMenu a:hover,
html:not(.dark) #bankDropdownMenu a:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* Performance Subtabs */
html.light #perfSubtabBtn-goals:not(.bg-purple-600),
html.light #perfSubtabBtn-appraisals:not(.bg-purple-600),
html.light #perfSubtabBtn-periods:not(.bg-purple-600),
html:not(.dark) #perfSubtabBtn-goals:not(.bg-purple-600),
html:not(.dark) #perfSubtabBtn-appraisals:not(.bg-purple-600),
html:not(.dark) #perfSubtabBtn-periods:not(.bg-purple-600) {
    color: #64748b !important;
}

html.light #perfSubtabBtn-goals:not(.bg-purple-600):hover,
html.light #perfSubtabBtn-appraisals:not(.bg-purple-600):hover,
html.light #perfSubtabBtn-periods:not(.bg-purple-600):hover,
html:not(.dark) #perfSubtabBtn-goals:not(.bg-purple-600):hover,
html:not(.dark) #perfSubtabBtn-appraisals:not(.bg-purple-600):hover,
html:not(.dark) #perfSubtabBtn-periods:not(.bg-purple-600):hover {
    color: #0f172a !important;
}

/* Appraisal preview box */
html.light .bg-gradient-to-r.from-purple-950\/40,
html:not(.dark) .bg-gradient-to-r.from-purple-950\/40 {
    background: linear-gradient(135deg, #fbfbfe 0%, #f3f0ff 100%) !important;
    border: 1px solid #d8b4fe !important;
}

html.light .bg-gradient-to-r.from-purple-950\/40 .text-purple-300,
html:not(.dark) .bg-gradient-to-r.from-purple-950\/40 .text-purple-300 {
    color: #6b21a8 !important;
}

html.light .bg-gradient-to-r.from-purple-950\/40 .text-white,
html:not(.dark) .bg-gradient-to-r.from-purple-950\/40 .text-white {
    color: #1e1b4b !important;
}

/* Geofence Alert Box in Light Mode */
html.light #geofenceAlertBox,
html:not(.dark) #geofenceAlertBox {
    background-color: #ecfdf5 !important;
    color: #065f46 !important;
    border-color: #a7f3d0 !important;
}

/* Regional compliance box in sidebar */
html.light aside .bg-gradient-to-br,
html:not(.dark) aside .bg-gradient-to-br {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* Payroll summary card */
html.light #payrollSummaryCard,
html:not(.dark) #payrollSummaryCard {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border-color: #e2e8f0 !important;
}

html.light #currentPeriodName,
html.light #payrollProcessedCount,
html:not(.dark) #currentPeriodName,
html:not(.dark) #payrollProcessedCount {
    color: #0f172a !important;
}

/* Toast container in Light Mode */
html.light #toastContainer > div,
html:not(.dark) #toastContainer > div {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

/* -------------------------------------------------------------------------- */
/* LOKASI KANTOR & CABANG (BRANCH MANAGEMENT, VIEWS & HIERARCHY TREE STYLES)  */
/* -------------------------------------------------------------------------- */

/* View Switcher Pill Bar (Grid Kartu, Tabel Rinci, Bagan Hierarki, Peta) */
.branch-view-switcher {
    background-color: #0f172a;
    border: 1px solid #334155;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

html.light .branch-view-switcher,
html:not(.dark) .branch-view-switcher {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Switcher Buttons Base */
.branch-view-btn {
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    border: 1px solid transparent;
}

/* Inactive Buttons - Dark Mode */
.branch-view-btn:not(.active) {
    color: #94a3b8;
    background-color: transparent;
}
.branch-view-btn:not(.active) svg {
    color: #94a3b8;
    transition: color 0.18s ease;
}
.branch-view-btn:not(.active):hover {
    color: #ffffff !important;
    background-color: rgba(51, 65, 85, 0.6) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
.branch-view-btn:not(.active):hover svg {
    color: #38bdf8 !important;
}

/* Inactive Buttons - Light Mode (Resolves mouse-over unreadable text) */
html.light .branch-view-btn:not(.active),
html:not(.dark) .branch-view-btn:not(.active) {
    color: #475569 !important;
    background-color: transparent !important;
    border-color: transparent !important;
}
html.light .branch-view-btn:not(.active) svg,
html:not(.dark) .branch-view-btn:not(.active) svg {
    color: #64748b !important;
}

/* Mouse Over in Light Mode: Crisp Slate-900 text on clean elevated white pill */
html.light .branch-view-btn:not(.active):hover,
html:not(.dark) .branch-view-btn:not(.active):hover {
    color: #0f172a !important;
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
html.light .branch-view-btn:not(.active):hover svg,
html:not(.dark) .branch-view-btn:not(.active):hover svg {
    color: #4f46e5 !important;
}

/* Active Button State (Both Light and Dark Mode) */
.branch-view-btn.active,
html.light .branch-view-btn.active,
html:not(.dark) .branch-view-btn.active {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35) !important;
}
.branch-view-btn.active svg,
html.light .branch-view-btn.active svg,
html:not(.dark) .branch-view-btn.active svg {
    color: #ffffff !important;
}
.branch-view-btn.active:hover,
html.light .branch-view-btn.active:hover,
html:not(.dark) .branch-view-btn.active:hover {
    background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%) !important;
    color: #ffffff !important;
}

/* ========================================================================== */
/* VIEW 1: GRID KARTU (Branch Cards)                                          */
/* ========================================================================== */
.branch-card {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.branch-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.35);
}

html.light .branch-card,
html:not(.dark) .branch-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
html.light .branch-card:hover,
html:not(.dark) .branch-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.08) !important;
}

/* Title & Hover State */
html.light .branch-card h3,
html:not(.dark) .branch-card h3 {
    color: #0f172a !important;
}
html.light .branch-card h3:hover,
html:not(.dark) .branch-card h3:hover {
    color: #4f46e5 !important;
}

/* Location text & labels */
html.light .branch-card p.text-slate-400,
html:not(.dark) .branch-card p.text-slate-400 {
    color: #64748b !important;
}
html.light .branch-card .text-slate-500,
html:not(.dark) .branch-card .text-slate-500 {
    color: #64748b !important;
}
html.light .branch-card .text-slate-300,
html:not(.dark) .branch-card .text-slate-300 {
    color: #475569 !important;
}

/* PIC Name & Employee count */
html.light .branch-card .text-slate-200,
html:not(.dark) .branch-card .text-slate-200 {
    color: #0f172a !important;
}
html.light .branch-card .text-white,
html:not(.dark) .branch-card .text-white {
    color: #0f172a !important;
}
html.light .branch-card .text-amber-400,
html:not(.dark) .branch-card .text-amber-400 {
    color: #b45309 !important;
}

/* Branch Code Badge */
html.light .branch-card .font-mono.bg-darkbg-900,
html:not(.dark) .branch-card .font-mono.bg-darkbg-900 {
    background-color: #f1f5f9 !important;
    color: #0369a1 !important;
    border-color: #cbd5e1 !important;
}

/* Parent office bar */
html.light .branch-card .bg-darkbg-900\/60,
html:not(.dark) .branch-card .bg-darkbg-900\/60 {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}
html.light .branch-card .bg-darkbg-900\/60 strong,
html:not(.dark) .branch-card .bg-darkbg-900\/60 strong {
    color: #0f172a !important;
}

/* Action buttons on card */
html.light .branch-card .btn-secondary,
html:not(.dark) .branch-card .btn-secondary {
    background: #f8fafc !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}
html.light .branch-card .btn-secondary:hover,
html:not(.dark) .branch-card .btn-secondary:hover {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
html.light .branch-card .btn-secondary.text-cyan-300,
html:not(.dark) .branch-card .btn-secondary.text-cyan-300 {
    color: #0284c7 !important;
    border-color: #bae6fd !important;
    background: #f0f9ff !important;
}
html.light .branch-card .btn-secondary.text-cyan-300:hover,
html:not(.dark) .branch-card .btn-secondary.text-cyan-300:hover {
    color: #0369a1 !important;
    border-color: #38bdf8 !important;
    background: #e0f2fe !important;
}
html.light .branch-card .bg-darkbg-700,
html:not(.dark) .branch-card .bg-darkbg-700 {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}
html.light .branch-card .bg-darkbg-700:hover,
html:not(.dark) .branch-card .bg-darkbg-700:hover {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* ========================================================================== */
/* VIEW 2: TABEL RINCI (Detailed Table)                                       */
/* ========================================================================== */
html.light #branchViewContainerTable > div,
html:not(.dark) #branchViewContainerTable > div {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html.light #branchViewContainerTable thead,
html:not(.dark) #branchViewContainerTable thead {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html.light #branchTableBody tr,
html:not(.dark) #branchTableBody tr {
    border-bottom: 1px solid #f1f5f9 !important;
}
html.light #branchTableBody tr:hover,
html:not(.dark) #branchTableBody tr:hover {
    background-color: #f8fafc !important;
}

html.light #branchTableBody .text-white,
html:not(.dark) #branchTableBody .text-white {
    color: #0f172a !important;
}
html.light #branchTableBody .cursor-pointer:hover,
html:not(.dark) #branchTableBody .cursor-pointer:hover {
    color: #4f46e5 !important;
}

html.light #branchTableBody .font-mono.bg-darkbg-900,
html:not(.dark) #branchTableBody .font-mono.bg-darkbg-900 {
    background-color: #f1f5f9 !important;
    color: #0369a1 !important;
    border-color: #cbd5e1 !important;
}

html.light #branchTableBody .text-slate-200,
html:not(.dark) #branchTableBody .text-slate-200 {
    color: #1e293b !important;
}
html.light #branchTableBody .text-slate-400,
html:not(.dark) #branchTableBody .text-slate-400 {
    color: #64748b !important;
}

html.light #branchTableBody .btn-secondary,
html:not(.dark) #branchTableBody .btn-secondary {
    background: #ffffff !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}
html.light #branchTableBody .btn-secondary:hover,
html:not(.dark) #branchTableBody .btn-secondary:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* ========================================================================== */
/* VIEW 3: BAGAN HIERARKI (Hierarchy Tree)                                    */
/* ========================================================================== */
html.light #branchViewContainerTree > div,
html:not(.dark) #branchViewContainerTree > div {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
html.light #branchViewContainerTree h3.text-white,
html:not(.dark) #branchViewContainerTree h3.text-white {
    color: #0f172a !important;
}

html.light .tree-branch-item,
html:not(.dark) .tree-branch-item {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
html.light .tree-branch-item:hover,
html:not(.dark) .tree-branch-item:hover {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

html.light .tree-branch-item .text-white,
html:not(.dark) .tree-branch-item .text-white {
    color: #0f172a !important;
}
html.light .tree-branch-item .cursor-pointer:hover,
html:not(.dark) .tree-branch-item .cursor-pointer:hover {
    color: #4f46e5 !important;
}

html.light .tree-branch-item .text-slate-400,
html:not(.dark) .tree-branch-item .text-slate-400 {
    color: #64748b !important;
}
html.light .tree-branch-item strong.text-slate-300,
html:not(.dark) .tree-branch-item strong.text-slate-300 {
    color: #0f172a !important;
}

html.light .tree-branch-item .bg-darkbg-900,
html.light .tree-branch-item .bg-darkbg-900\/90,
html:not(.dark) .tree-branch-item .bg-darkbg-900,
html:not(.dark) .tree-branch-item .bg-darkbg-900\/90 {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #1e293b !important;
}
html.light .tree-branch-item .font-mono.text-cyan-300,
html.light .tree-branch-item .font-mono.text-cyan-400,
html:not(.dark) .tree-branch-item .font-mono.text-cyan-300,
html:not(.dark) .tree-branch-item .font-mono.text-cyan-400 {
    color: #0369a1 !important;
}

/* ========================================================================== */
/* VIEW 4: PETA & GEOFENCE RADAR (Map View)                                   */
/* ========================================================================== */
html.light #branchViewContainerMap > div,
html:not(.dark) #branchViewContainerMap > div {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
html.light #branchViewContainerMap h3.text-white,
html:not(.dark) #branchViewContainerMap h3.text-white {
    color: #0f172a !important;
}
html.light #branchViewContainerMap .text-slate-300,
html:not(.dark) #branchViewContainerMap .text-slate-300 {
    color: #334155 !important;
}
html.light #branchViewContainerMap .text-slate-400,
html:not(.dark) .branchViewContainerMap .text-slate-400 {
    color: #64748b !important;
}

html.light #branchOverviewMap,
html:not(.dark) #branchOverviewMap {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

.branch-map-container {
    height: 480px;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    z-index: 10;
}
.branch-mini-map {
    height: 220px;
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

/* Leaflet Dark & Light theme overrides */
.leaflet-container {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.leaflet-popup-content-wrapper {
    background: #0f172a !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}
.leaflet-popup-tip {
    background: #0f172a !important;
}
html.light .leaflet-popup-content-wrapper,
html:not(.dark) .leaflet-popup-content-wrapper {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12) !important;
}
html.light .leaflet-popup-tip,
html:not(.dark) .leaflet-popup-tip {
    background: #ffffff !important;
}
html.light .branch-popup-title,
html:not(.dark) .branch-popup-title {
    color: #0f172a !important;
}
html.light .branch-popup-sub,
html:not(.dark) .branch-popup-sub {
    color: #64748b !important;
}
html.light .branch-popup-body,
html:not(.dark) .branch-popup-body {
    border-top-color: #e2e8f0 !important;
    color: #334155 !important;
}

/* ========================================================================== */
/* BRANCH TYPE & GEOFENCE BADGES (Comfortable & High Contrast)               */
/* ========================================================================== */
html.light .bg-purple-500\/20,
html:not(.dark) .bg-purple-500\/20 {
    background-color: #f3e8ff !important;
    border-color: #d8b4fe !important;
}
html.light .bg-purple-500\/20.text-purple-300,
html.light .bg-purple-500\/20 .text-purple-300,
html:not(.dark) .bg-purple-500\/20.text-purple-300,
html:not(.dark) .bg-purple-500\/20 .text-purple-300 {
    color: #6b21a8 !important;
}

html.light .bg-amber-500\/20,
html:not(.dark) .bg-amber-500\/20 {
    background-color: #fef3c7 !important;
    border-color: #fde68a !important;
}
html.light .bg-amber-500\/20.text-amber-300,
html.light .bg-amber-500\/20 .text-amber-300,
html:not(.dark) .bg-amber-500\/20.text-amber-300,
html:not(.dark) .bg-amber-500\/20 .text-amber-300 {
    color: #92400e !important;
}

html.light .bg-blue-500\/20,
html:not(.dark) .bg-blue-500\/20 {
    background-color: #dbeafe !important;
    border-color: #bfdbfe !important;
}
html.light .bg-blue-500\/20.text-blue-300,
html.light .bg-blue-500\/20 .text-blue-300,
html:not(.dark) .bg-blue-500\/20.text-blue-300,
html:not(.dark) .bg-blue-500\/20 .text-blue-300 {
    color: #1e40af !important;
}

html.light .bg-emerald-500\/20,
html:not(.dark) .bg-emerald-500\/20 {
    background-color: #d1fae5 !important;
    border-color: #a7f3d0 !important;
}
html.light .bg-emerald-500\/20.text-emerald-300,
html.light .bg-emerald-500\/20 .text-emerald-300,
html:not(.dark) .bg-emerald-500\/20.text-emerald-300,
html:not(.dark) .bg-emerald-500\/20 .text-emerald-300 {
    color: #065f46 !important;
}

html.light .bg-indigo-500\/20,
html:not(.dark) .bg-indigo-500\/20 {
    background-color: #e0e7ff !important;
    border-color: #c7d2fe !important;
}
html.light .bg-indigo-500\/20.text-indigo-300,
html.light .bg-indigo-500\/20 .text-indigo-300,
html:not(.dark) .bg-indigo-500\/20.text-indigo-300,
html:not(.dark) .bg-indigo-500\/20 .text-indigo-300 {
    color: #3730a3 !important;
}

html.light .bg-cyan-500\/10,
html.light .bg-cyan-500\/20,
html:not(.dark) .bg-cyan-500\/10,
html:not(.dark) .bg-cyan-500\/20 {
    background-color: #e0f2fe !important;
    border-color: #bae6fd !important;
}
html.light .bg-cyan-500\/10.text-cyan-300,
html.light .bg-cyan-500\/20.text-cyan-300,
html.light .bg-cyan-500\/10 .text-cyan-300,
html.light .bg-cyan-500\/20 .text-cyan-300,
html:not(.dark) .bg-cyan-500\/10.text-cyan-300,
html:not(.dark) .bg-cyan-500\/20.text-cyan-300,
html:not(.dark) .bg-cyan-500\/10 .text-cyan-300,
html:not(.dark) .bg-cyan-500\/20 .text-cyan-300 {
    color: #0369a1 !important;
}

/* Hierarchy Tree Visual Lines */
.tree-node-wrapper {
    position: relative;
}
.tree-node-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1.5rem;
    bottom: 0;
    width: 2px;
    background: #334155;
}
html.light .tree-node-wrapper::before,
html:not(.dark) .tree-node-wrapper::before {
    background: #cbd5e1;
}
.tree-branch-item::before {
    content: '';
    position: absolute;
    top: 1.75rem;
    left: -1.5rem;
    width: 1.5rem;
    height: 2px;
    background: #334155;
}
html.light .tree-branch-item::before,
html:not(.dark) .tree-branch-item::before {
    background: #cbd5e1;
}

/* Card Komponen Nilai Tunjangan Tetap - Bright & Highly Legible */
#posAllowanceCard {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 60%, #fff7ed 100%) !important;
    border: 1px solid #fcd34d !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.12) !important;
}

#posAllowanceCard label {
    color: #1e293b !important;
    font-weight: 600 !important;
}

#posAllowanceCard .input-field {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #fcd34d !important;
}

#posAllowanceCard .input-field:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
}

#posAllowanceCard .border-b,
#posAllowanceCard .border-t {
    border-color: #fde68a !important;
}

#posAllowanceCard #posTotalAllowanceDisplay {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #6ee7b7 !important;
}

#posAllowanceCard #posTotalAllowanceSummary {
    background-color: #fef3c7 !important;
    color: #78350f !important;
    border: 1px solid #fcd34d !important;
}

/* ========================================================================== */
/* POSITION & ALLOWANCE PREVIEW CARDS (ADD & EDIT EMPLOYEE MODALS)            */
/* Highly Legible & Accessible in Both Dark Mode and Light Mode               */
/* ========================================================================== */

/* Default Dark Mode Styling */
.pos-allowance-preview-card,
#editPositionAllowancePreviewCard,
#positionAllowancePreviewCard {
    background: linear-gradient(135deg, rgba(69, 26, 3, 0.4) 0%, rgba(15, 23, 42, 0.95) 55%, rgba(15, 23, 42, 0.98) 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

.pos-allowance-preview-card .preview-header-label,
#editPositionAllowancePreviewCard .preview-header-label,
#positionAllowancePreviewCard .preview-header-label {
    color: #f8fafc !important;
    font-weight: 700 !important;
}

.pos-allowance-preview-card .preview-pos-title,
#editPositionAllowancePreviewCard #editPreviewPosTitle,
#positionAllowancePreviewCard #previewPosTitle {
    color: #fde047 !important; /* Terang & terbaca jelas di mode gelap */
    font-weight: 800 !important;
}

.pos-allowance-preview-card .preview-job-level-badge,
#editPositionAllowancePreviewCard #editPreviewJobLevelBadge {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

.pos-allowance-preview-card .preview-total-allowance,
#editPositionAllowancePreviewCard #editPreviewTotalAllowance,
#positionAllowancePreviewCard #previewTotalAllowance {
    color: #34d399 !important; /* Emerald terang */
    font-weight: 800 !important;
}

.pos-allowance-preview-card .preview-box,
#editPositionAllowancePreviewCard .grid > div,
#positionAllowancePreviewCard .grid > div {
    background-color: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(51, 65, 85, 0.8) !important;
}

.pos-allowance-preview-card .preview-box-label,
#editPositionAllowancePreviewCard .grid > div span:first-child,
#positionAllowancePreviewCard .grid > div span:first-child {
    color: #94a3b8 !important;
    font-weight: 600 !important;
}

.pos-allowance-preview-card .preview-box-val,
#editPositionAllowancePreviewCard .grid > div span:last-child,
#positionAllowancePreviewCard .grid > div span:last-child {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.pos-allowance-preview-card .preview-footer-note,
#editPositionAllowancePreviewCard .preview-footer-note,
#positionAllowancePreviewCard .preview-footer-note {
    color: #38bdf8 !important;
}

/* -------------------------------------------------------------------------- */
/* LIGHT MODE STYLING: JABATAN TERPILIH & KOMPONEN TUNJANGAN TETAP            */
/* -------------------------------------------------------------------------- */
html.light .pos-allowance-preview-card,
html:not(.dark) .pos-allowance-preview-card,
html.light #editPositionAllowancePreviewCard,
html:not(.dark) #editPositionAllowancePreviewCard,
html.light #positionAllowancePreviewCard,
html:not(.dark) #positionAllowancePreviewCard {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fff7ed 100%) !important;
    border: 1.5px solid #fcd34d !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.12) !important;
}

html.light .pos-allowance-preview-card .border-b,
html:not(.dark) .pos-allowance-preview-card .border-b,
html.light #editPositionAllowancePreviewCard .border-b,
html:not(.dark) #editPositionAllowancePreviewCard .border-b,
html.light #positionAllowancePreviewCard .border-b,
html:not(.dark) #positionAllowancePreviewCard .border-b {
    border-color: #fde68a !important;
}

/* Judul "Jabatan Terpilih:" / "Tunjangan Berdasarkan Jabatan:" */
html.light .pos-allowance-preview-card .preview-header-label,
html:not(.dark) .pos-allowance-preview-card .preview-header-label,
html.light #editPositionAllowancePreviewCard .preview-header-label,
html:not(.dark) #editPositionAllowancePreviewCard .preview-header-label,
html.light #editPositionAllowancePreviewCard .text-white,
html:not(.dark) #editPositionAllowancePreviewCard .text-white,
html.light #positionAllowancePreviewCard .preview-header-label,
html:not(.dark) #positionAllowancePreviewCard .preview-header-label,
html.light #positionAllowancePreviewCard .text-white,
html:not(.dark) #positionAllowancePreviewCard .text-white {
    color: #78350f !important; /* Cokelat tua amber tebal, kontras tinggi */
    font-weight: 700 !important;
}

/* Nilai Nama Jabatan Terpilih (editPreviewPosTitle / previewPosTitle) */
html.light .pos-allowance-preview-card .preview-pos-title,
html:not(.dark) .pos-allowance-preview-card .preview-pos-title,
html.light #editPositionAllowancePreviewCard #editPreviewPosTitle,
html:not(.dark) #editPositionAllowancePreviewCard #editPreviewPosTitle,
html.light #positionAllowancePreviewCard #previewPosTitle,
html:not(.dark) #positionAllowancePreviewCard #previewPosTitle,
html.light #editPositionAllowancePreviewCard .text-amber-300,
html:not(.dark) #editPositionAllowancePreviewCard .text-amber-300,
html.light #positionAllowancePreviewCard .text-amber-300,
html:not(.dark) #positionAllowancePreviewCard .text-amber-300 {
    color: #92400e !important; /* Amber gelap pekat, terbaca sangat tajam */
    font-weight: 800 !important;
    text-shadow: none !important;
}

/* Badge Level Jabatan (Staff, Supervisor, Manager, Director) */
html.light .pos-allowance-preview-card .preview-job-level-badge,
html:not(.dark) .pos-allowance-preview-card .preview-job-level-badge,
html.light #editPositionAllowancePreviewCard #editPreviewJobLevelBadge,
html:not(.dark) #editPositionAllowancePreviewCard #editPreviewJobLevelBadge {
    background-color: #fde68a !important;
    color: #78350f !important;
    border: 1px solid #d97706 !important;
    font-weight: 800 !important;
}

/* Total Akumulasi Tunjangan per Bulan */
html.light .pos-allowance-preview-card .preview-total-allowance,
html:not(.dark) .pos-allowance-preview-card .preview-total-allowance,
html.light #editPositionAllowancePreviewCard #editPreviewTotalAllowance,
html:not(.dark) #editPositionAllowancePreviewCard #editPreviewTotalAllowance,
html.light #positionAllowancePreviewCard #previewTotalAllowance,
html:not(.dark) #positionAllowancePreviewCard #previewTotalAllowance,
html.light #editPositionAllowancePreviewCard .text-emerald-400,
html:not(.dark) #editPositionAllowancePreviewCard .text-emerald-400,
html.light #positionAllowancePreviewCard .text-emerald-400,
html:not(.dark) #positionAllowancePreviewCard .text-emerald-400 {
    color: #047857 !important; /* Hijau zamrud tua tajam, kontras tinggi */
    font-weight: 800 !important;
}

/* 4 Kotak Rincian Komponen Tunjangan (Jabatan, Transport, Makan, Komunikasi) */
html.light .pos-allowance-preview-card .preview-box,
html:not(.dark) .pos-allowance-preview-card .preview-box,
html.light #editPositionAllowancePreviewCard .grid > div,
html:not(.dark) #editPositionAllowancePreviewCard .grid > div,
html.light #positionAllowancePreviewCard .grid > div,
html:not(.dark) #positionAllowancePreviewCard .grid > div {
    background-color: #ffffff !important;
    border: 1.5px solid #fde68a !important;
    box-shadow: 0 1px 4px rgba(180, 83, 9, 0.08) !important;
}

/* Label Komponen Tunjangan (Tunj. Jabatan, dll) */
html.light .pos-allowance-preview-card .preview-box-label,
html:not(.dark) .pos-allowance-preview-card .preview-box-label,
html.light #editPositionAllowancePreviewCard .grid > div span:first-child,
html:not(.dark) #editPositionAllowancePreviewCard .grid > div span:first-child,
html.light #positionAllowancePreviewCard .grid > div span:first-child,
html:not(.dark) #positionAllowancePreviewCard .grid > div span:first-child {
    color: #64748b !important; /* Slate-600 jelas dan kontras */
    font-weight: 700 !important;
}

/* Nilai Rupiah Komponen Tunjangan (Rp ...) */
html.light .pos-allowance-preview-card .preview-box-val,
html:not(.dark) .pos-allowance-preview-card .preview-box-val,
html.light #editPositionAllowancePreviewCard .grid > div span:last-child,
html:not(.dark) #editPositionAllowancePreviewCard .grid > div span:last-child,
html.light #positionAllowancePreviewCard .grid > div span:last-child,
html:not(.dark) #positionAllowancePreviewCard .grid > div span:last-child,
html.light #editPreviewPosAllowance,
html:not(.dark) #editPreviewPosAllowance,
html.light #editPreviewTransportAllowance,
html:not(.dark) #editPreviewTransportAllowance,
html.light #editPreviewMealAllowance,
html:not(.dark) #editPreviewMealAllowance,
html.light #editPreviewCommAllowance,
html:not(.dark) #editPreviewCommAllowance,
html.light #previewPosAllowance,
html:not(.dark) #previewPosAllowance,
html.light #previewTransportAllowance,
html:not(.dark) #previewTransportAllowance,
html.light #previewMealAllowance,
html:not(.dark) #previewMealAllowance,
html.light #previewCommAllowance,
html:not(.dark) #previewCommAllowance {
    color: #0f172a !important; /* Hitam pekat / navy gelap - kontras maksimal */
    font-weight: 800 !important;
}

/* Teks Keterangan di Bawah Card */
html.light .pos-allowance-preview-card .preview-footer-note,
html:not(.dark) .pos-allowance-preview-card .preview-footer-note,
html.light #editPositionAllowancePreviewCard .preview-footer-note,
html:not(.dark) #editPositionAllowancePreviewCard .preview-footer-note,
html.light #positionAllowancePreviewCard .preview-footer-note,
html:not(.dark) #positionAllowancePreviewCard .preview-footer-note,
html.light #positionAllowancePreviewCard .text-cyan-400,
html:not(.dark) #positionAllowancePreviewCard .text-cyan-400 {
    color: #0369a1 !important; /* Cyan-700 kontras */
    font-weight: 600 !important;
}

/* -------------------------------------------------------------------------- */
/* HEADER MODAL EDIT KARYAWAN (Light Mode Polish)                             */
/* -------------------------------------------------------------------------- */
html.light #editEmployeeHeaderCard,
html:not(.dark) #editEmployeeHeaderCard {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html.light #editHeaderName,
html:not(.dark) #editHeaderName {
    color: #0f172a !important;
}

html.light #editHeaderNik,
html:not(.dark) #editHeaderNik {
    color: #475569 !important;
}

html.light #editHeaderLevel,
html:not(.dark) #editHeaderLevel {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fcd34d !important;
}

html.light #editHeaderStatus,
html:not(.dark) #editHeaderStatus {
    background-color: #e0e7ff !important;
    color: #3730a3 !important;
    border: 1px solid #c7d2fe !important;
}

html.light #editAvatarPreview,
html:not(.dark) #editAvatarPreview {
    background-color: #e0e7ff !important;
    color: #4338ca !important;
}

/* Form Edit Subtitle Section Headers */
html.light #formEditEmployee .text-cyan-400,
html:not(.dark) #formEditEmployee .text-cyan-400 {
    color: #0284c7 !important;
}

html.light #formEditEmployee .text-amber-400,
html:not(.dark) #formEditEmployee .text-amber-400 {
    color: #d97706 !important;
}

html.light #formEditEmployee .text-emerald-400,
html:not(.dark) #formEditEmployee .text-emerald-400 {
    color: #059669 !important;
}

html.light #formEditEmployee .text-brand-300,
html:not(.dark) #formEditEmployee .text-brand-300 {
    color: #4338ca !important;
}

/* Position Detail Modal Allowance Cards in light mode */
html.light #modalPositionDetail .from-amber-950\/30,
html:not(.dark) #modalPositionDetail .from-amber-950\/30 {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border-color: #fcd34d !important;
}

html.light #modalPositionDetail .from-amber-950\/30 .text-slate-400,
html:not(.dark) #modalPositionDetail .from-amber-950\/30 .text-slate-400 {
    color: #78350f !important;
}

html.light #modalPositionDetail .from-amber-950\/30 #modalPosDetailTotalAllowance,
html:not(.dark) #modalPositionDetail .from-amber-950\/30 #modalPosDetailTotalAllowance {
    color: #92400e !important;
}

html.light #modalPositionDetail .from-amber-950\/30 .text-emerald-400,
html:not(.dark) #modalPositionDetail .from-amber-950\/30 .text-emerald-400 {
    color: #065f46 !important;
}

html.light #modalPositionDetail .text-white,
html:not(.dark) #modalPositionDetail .text-white {
    color: #0f172a !important;
}

html.light #modalPositionDetail .text-slate-300,
html:not(.dark) #modalPositionDetail .text-slate-300 {
    color: #334155 !important;
}

html.light #modalPositionDetail .text-slate-400,
html:not(.dark) #modalPositionDetail .text-slate-400 {
    color: #64748b !important;
}

html.light #modalPositionDetail .bg-darkbg-800,
html:not(.dark) #modalPositionDetail .bg-darkbg-800 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* History Profile Modal in light mode */
html.light #modalEmployeeHistory .text-white,
html:not(.dark) #modalEmployeeHistory .text-white {
    color: #0f172a !important;
}

html.light #modalEmployeeHistory .bg-darkbg-900\/90,
html:not(.dark) #modalEmployeeHistory .bg-darkbg-900\/90,
html.light #modalEmployeeHistory .bg-darkbg-950,
html:not(.dark) #modalEmployeeHistory .bg-darkbg-950 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light #modalEmployeeHistory .text-slate-300,
html:not(.dark) #modalEmployeeHistory .text-slate-300 {
    color: #334155 !important;
}

html.light #modalEmployeeHistory .text-slate-400,
html:not(.dark) #modalEmployeeHistory .text-slate-400 {
    color: #64748b !important;
}

/* -------------------------------------------------------------------------- */
/* DASHBOARD WIDGETS: PERINGATAN PKWT & KEHADIRAN TERBARU (LIGHT THEME)       */
/* -------------------------------------------------------------------------- */

html.light #sectionExpiringContracts,
html.light #sectionRecentAttendances,
html.light .dashboard-widget-card,
html:not(.dark) #sectionExpiringContracts,
html:not(.dark) #sectionRecentAttendances,
html:not(.dark) .dashboard-widget-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 14px -3px rgba(15, 23, 42, 0.05), 0 2px 6px -2px rgba(15, 23, 42, 0.03) !important;
}

html.light #sectionExpiringContracts h3,
html.light #sectionRecentAttendances h3,
html.light .dashboard-widget-card h3,
html:not(.dark) #sectionExpiringContracts h3,
html:not(.dark) #sectionRecentAttendances h3,
html:not(.dark) .dashboard-widget-card h3 {
    color: #0f172a !important;
    font-weight: 700 !important;
}

html.light #expiringCountBadge,
html:not(.dark) #expiringCountBadge {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
    font-weight: 700 !important;
}

html.light .dashboard-view-all-btn,
html:not(.dark) .dashboard-view-all-btn {
    color: #4f46e5 !important;
    font-weight: 600 !important;
}

html.light .dashboard-view-all-btn:hover,
html:not(.dark) .dashboard-view-all-btn:hover {
    color: #3730a3 !important;
}

/* Dashboard List Row Items in Light Mode */
html.light .dashboard-list-item,
html.light #expiringContractsList > div,
html.light #recentAttendancesList > div,
html.light #essRecentAttendanceList > div,
html:not(.dark) .dashboard-list-item,
html:not(.dark) #expiringContractsList > div,
html:not(.dark) #recentAttendancesList > div,
html:not(.dark) #essRecentAttendanceList > div {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

html.light .dashboard-list-item:hover,
html.light #expiringContractsList > div:hover,
html.light #recentAttendancesList > div:hover,
html.light #essRecentAttendanceList > div:hover,
html:not(.dark) .dashboard-list-item:hover,
html:not(.dark) #expiringContractsList > div:hover,
html:not(.dark) #recentAttendancesList > div:hover,
html:not(.dark) #essRecentAttendanceList > div:hover {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04) !important;
    transform: translateY(-1px);
}

/* Primary Employee Name in Light Mode - Guaranteed deep readable slate */
html.light #expiringContractsList .dashboard-emp-name,
html.light #expiringContractsList .font-bold,
html.light #expiringContractsList .text-white,
html.light #recentAttendancesList .dashboard-emp-name,
html.light #recentAttendancesList .font-bold,
html.light #recentAttendancesList .text-white,
html.light #essRecentAttendanceList .dashboard-emp-name,
html.light #essRecentAttendanceList .font-bold,
html.light #essRecentAttendanceList .text-white,
html:not(.dark) #expiringContractsList .dashboard-emp-name,
html:not(.dark) #expiringContractsList .font-bold,
html:not(.dark) #expiringContractsList .text-white,
html:not(.dark) #recentAttendancesList .dashboard-emp-name,
html:not(.dark) #recentAttendancesList .font-bold,
html:not(.dark) #recentAttendancesList .text-white,
html:not(.dark) #essRecentAttendanceList .dashboard-emp-name,
html:not(.dark) #essRecentAttendanceList .font-bold,
html:not(.dark) #essRecentAttendanceList .text-white {
    color: #0f172a !important;
}

/* Secondary Information: Position, Branch, Jam Absen, NIK */
html.light #expiringContractsList .dashboard-emp-sub,
html.light #expiringContractsList .text-slate-400,
html.light #expiringContractsList .text-\[11px\],
html.light #recentAttendancesList .dashboard-emp-sub,
html.light #recentAttendancesList .text-slate-400,
html.light #recentAttendancesList .text-\[11px\],
html.light #essRecentAttendanceList .dashboard-emp-sub,
html.light #essRecentAttendanceList .text-slate-400,
html.light #essRecentAttendanceList .text-\[11px\],
html:not(.dark) #expiringContractsList .dashboard-emp-sub,
html:not(.dark) #expiringContractsList .text-slate-400,
html:not(.dark) #expiringContractsList .text-\[11px\],
html:not(.dark) #recentAttendancesList .dashboard-emp-sub,
html:not(.dark) #recentAttendancesList .text-slate-400,
html:not(.dark) #recentAttendancesList .text-\[11px\],
html:not(.dark) #essRecentAttendanceList .dashboard-emp-sub,
html:not(.dark) #essRecentAttendanceList .text-slate-400,
html:not(.dark) #essRecentAttendanceList .text-\[11px\] {
    color: #334155 !important;
}

html.light #expiringContractsList span.font-normal,
html:not(.dark) #expiringContractsList span.font-normal {
    color: #64748b !important;
}

/* Dates, Distance, Subtext */
html.light #expiringContractsList .text-slate-500,
html.light #expiringContractsList .text-\[10px\],
html.light #recentAttendancesList .text-slate-500,
html.light #recentAttendancesList .text-\[10px\],
html.light #essRecentAttendanceList .text-slate-500,
html.light #essRecentAttendanceList .text-\[10px\],
html:not(.dark) #expiringContractsList .text-slate-500,
html:not(.dark) #expiringContractsList .text-\[10px\],
html:not(.dark) #recentAttendancesList .text-slate-500,
html:not(.dark) #recentAttendancesList .text-\[10px\],
html:not(.dark) #essRecentAttendanceList .text-slate-500,
html:not(.dark) #essRecentAttendanceList .text-\[10px\] {
    color: #64748b !important;
}

/* Badges in Light Mode */
html.light .badge-urgent,
html.light #expiringContractsList .badge-urgent,
html.light #expiringContractsList .bg-rose-100,
html.light #expiringContractsList .bg-rose-500\/20,
html.light .badge-late,
html.light #recentAttendancesList .badge-late,
html.light #recentAttendancesList .bg-rose-100,
html.light #recentAttendancesList .bg-rose-500\/20,
html.light #essRecentAttendanceList .badge-late,
html.light #essRecentAttendanceList .bg-rose-100,
html.light #essRecentAttendanceList .bg-rose-500\/20,
html:not(.dark) .badge-urgent,
html:not(.dark) #expiringContractsList .badge-urgent,
html:not(.dark) #expiringContractsList .bg-rose-100,
html:not(.dark) #expiringContractsList .bg-rose-500\/20,
html:not(.dark) .badge-late,
html:not(.dark) #recentAttendancesList .badge-late,
html:not(.dark) #recentAttendancesList .bg-rose-100,
html:not(.dark) #recentAttendancesList .bg-rose-500\/20,
html:not(.dark) #essRecentAttendanceList .badge-late,
html:not(.dark) #essRecentAttendanceList .bg-rose-100,
html:not(.dark) #essRecentAttendanceList .bg-rose-500\/20 {
    background-color: #ffe4e6 !important;
    color: #9f1239 !important;
    border: 1px solid #fecdd3 !important;
    font-weight: 700 !important;
}

html.light .badge-warning,
html.light #expiringContractsList .badge-warning,
html.light #expiringContractsList .bg-amber-100,
html.light #expiringContractsList .bg-amber-500\/20,
html:not(.dark) .badge-warning,
html:not(.dark) #expiringContractsList .badge-warning,
html:not(.dark) #expiringContractsList .bg-amber-100,
html:not(.dark) #expiringContractsList .bg-amber-500\/20 {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
    font-weight: 700 !important;
}

html.light .badge-ontime,
html.light #recentAttendancesList .badge-ontime,
html.light #recentAttendancesList .bg-emerald-100,
html.light #recentAttendancesList .bg-emerald-500\/20,
html.light #essRecentAttendanceList .badge-ontime,
html.light #essRecentAttendanceList .bg-emerald-100,
html.light #essRecentAttendanceList .bg-emerald-500\/20,
html:not(.dark) .badge-ontime,
html:not(.dark) #recentAttendancesList .badge-ontime,
html:not(.dark) #recentAttendancesList .bg-emerald-100,
html:not(.dark) #recentAttendancesList .bg-emerald-500\/20,
html:not(.dark) #essRecentAttendanceList .badge-ontime,
html:not(.dark) #essRecentAttendanceList .bg-emerald-100,
html:not(.dark) #essRecentAttendanceList .bg-emerald-500\/20 {
    background-color: #d1fae5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
    font-weight: 700 !important;
}

/* Ensure text inside badge is never unreadable */
html.light #expiringContractsList .text-rose-300,
html.light #recentAttendancesList .text-rose-300,
html.light #essRecentAttendanceList .text-rose-300,
html:not(.dark) #expiringContractsList .text-rose-300,
html:not(.dark) #recentAttendancesList .text-rose-300,
html:not(.dark) #essRecentAttendanceList .text-rose-300 {
    color: #9f1239 !important;
}

html.light #expiringContractsList .text-amber-300,
html:not(.dark) #expiringContractsList .text-amber-300 {
    color: #92400e !important;
}

html.light #recentAttendancesList .text-emerald-300,
html.light #essRecentAttendanceList .text-emerald-300,
html:not(.dark) #recentAttendancesList .text-emerald-300,
html:not(.dark) #essRecentAttendanceList .text-emerald-300 {
    color: #065f46 !important;
}

/* Role switch badge on dashboard in Light Mode */
html.light #dashboardRoleBadge,
html:not(.dark) #dashboardRoleBadge {
    background-color: #e0e7ff !important;
    color: #3730a3 !important;
    border-color: #c7d2fe !important;
}

/* ESS BPJS Section in Light Mode */
html.light #essBpjsTkNum,
html.light #essBpjsKesNum,
html:not(.dark) #essBpjsTkNum,
html:not(.dark) #essBpjsKesNum {
    color: #0369a1 !important;
}