/* =====================================================================
   HRIS MASTER STYLESHEET
   =====================================================================
   Digabungkan dari <style> inline yang sebelumnya berdiri sendiri-sendiri
   di masing-masing file (layouts/admin.php, layouts/ess.php,
   employee/dashboard.php, auth/login.php, auth/forgot.php, auth/reset.php).

   STRUKTUR FILE INI:
   1. SHARED - Bootstrap 5.3 Primary Color Override (identik persis di
      admin/ess/employee-dashboard sebelumnya — sekarang satu salinan saja)
   2. SHARED - SweetAlert2 Dark Mode (identik persis di admin & ess sebelumnya)
   3. AUTH PAGES (login, forgot, reset) — desain kartu 1 kolom terpusat
   4. ADMIN LAYOUT (layouts/admin.php) — sidebar + topbar + dashboard admin
   5. ESS LAYOUT (layouts/ess.php) — layout mobile pegawai (bottom-nav dsb)
   6. EMPLOYEE DASHBOARD / PWA (employee/dashboard.php) — halaman presensi
      mandiri (tidak extend layouts/ess.php)

   CATATAN PENGGABUNGAN — 2 konflik nyata yang ditemukan & diperbaiki saat
   digabung jadi satu file (sebelumnya aman krn tiap <style> cuma berlaku
   di halamannya sendiri; begitu digabung ke 1 file yg dipakai semua
   halaman, selector yg sama tapi beda definisi akan saling menimpa):
     a. `.theme-toggle-btn` dipakai untuk 2 tombol yang SANGAT berbeda:
        tombol bulat melayang (fixed, pojok kanan atas) di halaman auth,
        vs ikon kecil inline di topbar admin. Versi auth di bawah ini
        di-scope jadi `.login-wrap .theme-toggle-btn` (elemennya memang
        selalu di dalam .login-wrap di HTML auth) supaya tidak lagi
        bentrok dengan punya admin.
     b. `[data-bs-theme="dark"] .card` didefinisikan 2x dengan nilai
        sedikit berbeda (opacity .75 vs .78, admin tidak set `color`).
        Digabung jadi satu definisi (dipilih versi yang lebih lengkap +
        box-shadow dari admin) di bagian SHARED supaya kartu gelap
        konsisten di semua halaman.
   Sisanya (topbar/sidebar admin, bottom-nav/presensi-card ESS, glass/
   dx-card dashboard PWA) memakai nama class yang sudah unik per halaman
   jadi aman digabung apa adanya tanpa perlu di-scope ulang.
   ===================================================================== */


/* =====================================================================
   1. SHARED — BOOTSTRAP 5.3 PRIMARY COLOR OVERRIDE
   Dipakai di admin, ess, dan employee dashboard (sebelumnya disalin utuh
   3x, identik byte-per-byte).
   ===================================================================== */

/* =====================================================================
   0. GLOBAL RESET (dipakai di semua halaman)
   Sebelumnya `*{box-sizing:border-box}` disalin ulang 3x (admin/ess/
   employee-dashboard) — sekarang 1 kali saja di sini.
   ===================================================================== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

/* ====================================================================
   GLOBAL THEME COLOR — HRIS
   Bootstrap 5.3 Primary Override
   ==================================================================== */

:root {
    /* ================================================================
       BOOTSTRAP GLOBAL PRIMARY
       ================================================================ */

    --bs-primary: var(--primary, #6366f1);
    --bs-primary-rgb: 99, 102, 241;

    --bs-primary-text-emphasis: var(--primary-dark, #4f46e5);
    --bs-primary-bg-subtle: #e0e7ff;
    --bs-primary-border-subtle: #c7d2fe;

    --bs-link-color: var(--primary, #6366f1);
    --bs-link-color-rgb: 99, 102, 241;

    --bs-link-hover-color: var(--primary-dark, #4f46e5);
    --bs-link-hover-color-rgb: 79, 70, 229;
}


/* ====================================================================
   BACKGROUND / TEXT / BORDER
   ==================================================================== */

.bg-primary {
    background-color: var(--primary, #6366f1) !important;
}

.text-primary {
    color: var(--primary, #6366f1) !important;
}

.border-primary {
    border-color: var(--primary, #6366f1) !important;
}

.link-primary {
    color: var(--primary, #6366f1) !important;
}

.link-primary:hover {
    color: var(--primary-dark, #4f46e5) !important;
}


/* ====================================================================
   BUTTON PRIMARY
   ==================================================================== */

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary, #6366f1);
    --bs-btn-border-color: var(--primary, #6366f1);

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-dark, #4f46e5);
    --bs-btn-hover-border-color: var(--primary-dark, #4f46e5);

    --bs-btn-focus-shadow-rgb: 99, 102, 241;

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-dark, #4f46e5);
    --bs-btn-active-border-color: var(--primary-dark, #4f46e5);

    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--primary, #6366f1);
    --bs-btn-disabled-border-color: var(--primary, #6366f1);
}


/* Pastikan Bootstrap hardcoded #0d6efd tidak menang */

.btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--primary, #6366f1);
    border-color: var(--primary, #6366f1);
}

.btn-primary:hover:not(:disabled):not(.disabled) {
    background-color: var(--primary-dark, #4f46e5);
    border-color: var(--primary-dark, #4f46e5);
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--primary-dark, #4f46e5) !important;
    border-color: var(--primary-dark, #4f46e5) !important;
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 .25rem rgba(99, 102, 241, .25) !important;
}


/* ====================================================================
   OUTLINE PRIMARY
   ==================================================================== */

.btn-outline-primary {
    --bs-btn-color: var(--primary, #6366f1);
    --bs-btn-border-color: var(--primary, #6366f1);

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary, #6366f1);
    --bs-btn-hover-border-color: var(--primary, #6366f1);

    --bs-btn-focus-shadow-rgb: 99, 102, 241;

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary, #6366f1);
    --bs-btn-active-border-color: var(--primary, #6366f1);

    --bs-btn-disabled-color: var(--primary, #6366f1);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primary, #6366f1);
}

.btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--primary, #6366f1) !important;
    border-color: var(--primary, #6366f1) !important;
}

.btn-outline-primary:focus {
    box-shadow: 0 0 0 .25rem rgba(99, 102, 241, .25) !important;
}


/* Checkbox button */

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary:active {
    color: #fff !important;
    background-color: var(--primary, #6366f1) !important;
    border-color: var(--primary, #6366f1) !important;
}


/* ====================================================================
   USER MENU DROPDOWN (ADMIN)
   ==================================================================== */
/* Panel utama */
.dropdown-menu {
    width: 236px;
    padding: .5rem;
    margin-top: .55rem !important;
    background: #fff;
    border: 1px solid var(--ess-card-border, #e5e7eb);
    border-radius: 1.1rem;
    box-shadow: 0 16px 40px rgba(30, 27, 75, .16);
    color: var(--ess-ink, #1f2937);
}

/* Header user */
.dropdown-menu .ump-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .5rem;
}

/* Jika ada avatar di header */
.dropdown-menu .ump-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ess-primary-soft, #eef2ff);
    color: var(--ess-primary, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}


/* ====================================================================
   MENU ITEM
   ==================================================================== */

.dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: auto;
    margin: 0;
    padding: .6rem .7rem;
    border-radius: .7rem;
    color: var(--ess-ink, #1f2937);
    font-size: .82rem;
    font-weight: 600;
    transition:
        background-color .12s ease,
        color .12s ease;
}

/* Icon */
.dropdown-menu .dropdown-item .bi {
    width: 1.1rem;
    text-align: center;
    color: var(--ess-muted, #6b7280);
    flex-shrink: 0;
}

/* ====================================================================
   HOVER
   ==================================================================== */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    color: var(--ess-ink, #1f2937) !important;
    background: #f1f3f9 !important;
}

/* Icon ikut warna primary saat hover */
.dropdown-menu .dropdown-item:hover .bi,
.dropdown-menu .dropdown-item:focus .bi {
    color: var(--ess-primary, #6366f1);
}

/* ====================================================================
   ACTIVE
   ==================================================================== */
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item.active {
    color: var(--ess-ink, #1f2937) !important;
    background: #f1f3f9 !important;
}

/* ====================================================================
   DIVIDER
   ==================================================================== */
.dropdown-menu .dropdown-divider {
    margin: .35rem .2rem;
    border-color: var(--ess-card-border, #e5e7eb);
    opacity: 1;
}

/* ====================================================================
   LOGOUT
   ==================================================================== */
.dropdown-menu .dropdown-item.text-danger,
.dropdown-menu .dropdown-item.text-danger .bi {
    color: var(--ess-red, #dc2626) !important;
}

.dropdown-menu .dropdown-item.text-danger:hover,
.dropdown-menu .dropdown-item.text-danger:focus {
    color: var(--ess-red, #dc2626) !important;
    background: rgba(220, 38, 38, .08) !important;
}

/* ====================================================================
   DARK MODE
   ==================================================================== */
[data-bs-theme="dark"] .dropdown-menu {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}

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

[data-bs-theme="dark"] .dropdown-menu .dropdown-item .bi {
    color: #94a3b8;
}

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

[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover .bi,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item:focus .bi {
    color: #a5b4fc;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-divider {
    border-color: #334155;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item.text-danger,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item.text-danger .bi {
    color: #f87171 !important;
}

[data-bs-theme="dark"] .dropdown-menu .dropdown-item.text-danger:hover,
[data-bs-theme="dark"] .dropdown-menu .dropdown-item.text-danger:focus {
    background: rgba(248, 113, 113, .1) !important;
}

/* ====================================================================
   NAV PILLS
   ==================================================================== */

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--primary, #6366f1);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff !important;
    background-color: var(--primary, #6366f1) !important;
}


/* ====================================================================
   NAV TABS
   ==================================================================== */

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--primary, #6366f1);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--primary, #6366f1) !important;
    border-color: var(--primary, #6366f1);
    border-bottom-color: var(--primary, #6366f1);
}


/* ====================================================================
   FORM CHECK / RADIO / SWITCH
   ==================================================================== */

.form-check-input:checked {
    background-color: var(--primary, #6366f1) !important;
    border-color: var(--primary, #6366f1) !important;
}

.form-check-input:focus {
    border-color: var(--primary-light, #818cf8) !important;
    box-shadow: 0 0 0 .25rem rgba(99, 102, 241, .25) !important;
}

.form-check-input:checked:focus {
    border-color: var(--primary, #6366f1) !important;
}


/* ====================================================================
   PROGRESS
   ==================================================================== */

.progress-bar {
    background-color: var(--primary, #6366f1) !important;
}


/* ====================================================================
   LIST GROUP
   ==================================================================== */

.list-group-item.active {
    color: #fff !important;
    background-color: var(--primary, #6366f1) !important;
    border-color: var(--primary, #6366f1) !important;
}


/* ====================================================================
   PAGINATION — BOOTSTRAP
   ==================================================================== */

.pagination {
    --bs-pagination-color: var(--primary, #6366f1);
    --bs-pagination-hover-color: var(--primary-dark, #4f46e5);

    --bs-pagination-focus-color: var(--primary-dark, #4f46e5);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(99, 102, 241, .25);

    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--primary, #6366f1);
    --bs-pagination-active-border-color: var(--primary, #6366f1);

    --bs-pagination-disabled-color: #adb5bd;
}


/* NORMAL PAGE */

.pagination .page-link {
    color: var(--primary, #6366f1) !important;
}

.pagination .page-link:hover {
    color: var(--primary-dark, #4f46e5) !important;
    background-color: var(--primary-soft, #eef2ff) !important;
}


/* ACTIVE PAGE
   Penting: teks harus PUTIH */

.pagination .page-item.active .page-link {
    color: #fff !important;
    background-color: var(--primary, #6366f1) !important;
    border-color: var(--primary, #6366f1) !important;
}

.pagination .page-item.active .page-link:hover {
    color: #fff !important;
    background-color: var(--primary-dark, #4f46e5) !important;
    border-color: var(--primary-dark, #4f46e5) !important;
}


/* ====================================================================
   DATATABLES — BOOTSTRAP 5
   ==================================================================== */

.dataTables_wrapper .pagination {
    --bs-pagination-color: var(--primary, #6366f1);
    --bs-pagination-hover-color: var(--primary-dark, #4f46e5);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--primary, #6366f1);
    --bs-pagination-active-border-color: var(--primary, #6366f1);
}


/* Normal DataTables page */

.dataTables_wrapper .pagination .page-link {
    color: var(--primary, #6366f1) !important;
    background-color: #fff;
    border-color: var(--bs-border-color, #dee2e6);
}


/* Hover */

.dataTables_wrapper .pagination .page-link:hover {
    color: var(--primary-dark, #4f46e5) !important;
    background-color: var(--primary-soft, #eef2ff) !important;
    border-color: var(--primary, #6366f1) !important;
}


/* ACTIVE — INI YANG PENTING */

.dataTables_wrapper .pagination .page-item.active .page-link {
    color: #fff !important;
    background-color: var(--primary, #6366f1) !important;
    border-color: var(--primary, #6366f1) !important;
}


/* Active + hover */

.dataTables_wrapper .pagination .page-item.active .page-link:hover {
    color: #fff !important;
    background-color: var(--primary-dark, #4f46e5) !important;
    border-color: var(--primary-dark, #4f46e5) !important;
}


/* Disabled */

.dataTables_wrapper .pagination .page-item.disabled .page-link {
    color: #adb5bd !important;
    background-color: #fff !important;
    border-color: var(--bs-border-color, #dee2e6) !important;
}


/* ====================================================================
   TABLE / BADGE / ALERT PRIMARY
   ==================================================================== */

.table-primary {
    --bs-table-color: #000;
    --bs-table-bg: #e0e7ff;
    --bs-table-border-color: #c7d2fe;
}

.badge.bg-primary,
.bg-primary-subtle {
    background-color: var(--primary-soft, #e0e7ff) !important;
}

.text-bg-primary {
    color: #fff !important;
    background-color: var(--primary, #6366f1) !important;
}


/* ====================================================================
   ALERT PRIMARY
   ==================================================================== */

.alert-primary {
    --bs-alert-color: var(--primary-dark, #4f46e5);
    --bs-alert-bg: var(--primary-soft, #e0e7ff);
    --bs-alert-border-color: var(--primary-light, #c7d2fe);
}


/* ====================================================================
   LINKS
   ==================================================================== */

a {
    --bs-link-color-rgb: 99, 102, 241;
    color: var(--primary, #6366f1);
}

a:hover {
    color: var(--primary-dark, #4f46e5);
}


/* ====================================================================
   SELECT2 — BOOTSTRAP 5
   ==================================================================== */

.select2-container--bootstrap-5.select2-container--focus
.select2-selection,
.select2-container--bootstrap-5.select2-container--open
.select2-selection {
    border-color: var(--primary-light, #818cf8) !important;
    box-shadow: 0 0 0 .25rem rgba(99, 102, 241, .25) !important;
}


/* Select2 selected */

.select2-container--bootstrap-5
.select2-dropdown
.select2-results__options
.select2-results__option.select2-results__option--selected,

.select2-container--bootstrap-5
.select2-dropdown
.select2-results__options
.select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    color: #fff !important;
    background-color: var(--primary, #6366f1) !important;
}


/* Select2 hover */

.select2-container--bootstrap-5
.select2-dropdown
.select2-results__option--highlighted {
    color: var(--primary, #6366f1) !important;
    background-color: var(--primary-soft, #eef2ff) !important;
}


/* ====================================================================
   SWEETALERT2
   ==================================================================== */

.swal2-loader {
    border-color:
        var(--primary, #6366f1)
        transparent
        var(--primary, #6366f1)
        transparent !important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--primary, #6366f1) !important;
}

.swal2-styled.swal2-confirm:focus {
    box-shadow: 0 0 0 .25rem rgba(99, 102, 241, .35) !important;
}


/* ====================================================================
   SPINNER BOOTSTRAP
   ==================================================================== */

.spinner-border.text-primary {
    color: var(--primary, #6366f1) !important;
}

.spinner-grow.text-primary {
    color: var(--primary, #6366f1) !important;
}


/* ====================================================================
   FOCUS / RING
   ==================================================================== */

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-light, #818cf8);
    box-shadow: 0 0 0 .25rem rgba(99, 102, 241, .25);
}


/* ====================================================================
   CHECKED SWITCH
   ==================================================================== */

.form-switch .form-check-input:checked {
    background-color: var(--primary, #6366f1) !important;
    border-color: var(--primary, #6366f1) !important;
}

/* =====================================================================
   1b. SHARED — .card DARK MODE (gabungan admin + ess/empdash, lihat catatan
   penggabungan poin (b) di atas)
   ===================================================================== */
[data-bs-theme="dark"] .card{background:rgba(30,30,55,.78);border-color:rgba(255,255,255,.08);color:#e2e8f0;box-shadow:0 6px 20px rgba(0,0,0,.25);}

/* =====================================================================
   2. SHARED — SWEETALERT2 DARK MODE
   Dipakai di admin & ess (sebelumnya disalin utuh 2x, identik byte-per-byte).
   Aman dimuat juga di halaman lain yang pakai SweetAlert2 (auth, employee
   dashboard) — tidak berefek apa-apa kalau elemennya tidak ada.
   ===================================================================== */
/* ====================================================================
   SWEETALERT2 - DARK MODE
   ==================================================================== */

[data-bs-theme="dark"] .swal2-popup{
    background:#1a1a2e!important;
    color:#e2e8f0!important;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 40px rgba(0,0,0,.45);
}

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

[data-bs-theme="dark"] .swal2-html-container{
    color:#cbd5e1!important;
}

[data-bs-theme="dark"] .swal2-input,
[data-bs-theme="dark"] .swal2-textarea,
[data-bs-theme="dark"] .swal2-select{
    background:#11111f!important;
    border-color:rgba(255,255,255,.12)!important;
    color:#e2e8f0!important;
}

[data-bs-theme="dark"] .swal2-input::placeholder,
[data-bs-theme="dark"] .swal2-textarea::placeholder{
    color:#64748b!important;
}

[data-bs-theme="dark"] .swal2-validation-message{
    background:#2a1f2f!important;
    color:#fca5a5!important;
}

[data-bs-theme="dark"] .swal2-footer{
    border-top-color:rgba(255,255,255,.08)!important;
    color:#94a3b8!important;
}

[data-bs-theme="dark"] .swal2-close{
    color:#94a3b8!important;
}

[data-bs-theme="dark"] .swal2-close:hover{
    color:#f1f5f9!important;
}

[data-bs-theme="dark"] .swal2-timer-progress-bar{
    background:rgba(255,255,255,.25);
}

/* =====================================================================
   3. AUTH PAGES — login.php, forgot.php, reset.php
   Ketiga halaman ini sebelumnya punya <style> yang HAMPIR identik; versi
   di bawah ini adalah gabungan superset-nya (termasuk fitur pass-strength
   meter dari reset.php) supaya berlaku untuk ketiganya.
   ===================================================================== */
    body.auth-page {
        min-height: 100vh; margin: 0;
        background:#eef2ff;
        display: flex; align-items: center; justify-content: center;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    }
    .login-wrap { width: 100%; max-width: 420px; padding: 1.5rem; }
    .login-card {
        background: rgba(255,255,255,.97);
        border-radius: 1rem;
        box-shadow: 0 25px 50px rgba(0,0,0,.35);
        overflow: hidden;
    }
    .login-header {
        background:linear-gradient(120deg, rgba(79,70,229,.92), rgba(99,102,241,.88) 45%, rgba(139,92,246,.9));
        padding: 2rem 1.5rem 1.5rem;
        text-align: center; color: #fff;
    }
    .login-header .app-icon {
        width: 56px; height: 56px; background: rgba(255,255,255,.2);
        border-radius: .75rem; display: inline-flex; align-items: center;
        justify-content: center; font-size: 1.6rem; margin-bottom: .75rem;
    }
    .login-header h4 { font-weight: 700; margin: 0; font-size: 1.1rem; }
    .login-header p { opacity: .8; font-size: .8rem; margin: .25rem 0 0; }
    .login-body { padding: 1.75rem; }
    .form-label { font-size: .8rem; font-weight: 600; color: #374151; margin-bottom: .35rem; }
    
    /* Input Group & Focus-Within Animasi */
    .form-control {
        border: 1.5px solid #e5e7eb; 
        padding: .6rem .875rem; font-size: .875rem; transition: border .2s, box-shadow .2s;
    }
    .form-control:focus { border-color: #4f46e5; box-shadow: none; }
    
    .input-group-text { border: 1.5px solid #e5e7eb; background: #f9fafb; border-radius: .5rem 0 0 .5rem; transition: border-color .2s; }
    
    /* Penyesuaian border radius untuk input yang berada di tengah maupun di akhir grup */
    .input-group .form-control { border-left: 0; border-right: 0; border-radius: 0; }
    .input-group .form-control:last-child { border-right: 1.5px solid #e5e7eb; border-radius: 0 .5rem .5rem 0; }
    
    .pass-toggle { cursor: pointer; border: 1.5px solid #e5e7eb; border-left: 0; border-radius: 0 .5rem .5rem 0; background: #f9fafb; transition: border-color .2s; }
    
    .input-group { border-radius: .5rem; transition: box-shadow .2s; }
    .input-group:focus-within .input-group-text,
    .input-group:focus-within .form-control,
    .input-group:focus-within .pass-toggle { border-color: #4f46e5; }
    .input-group:focus-within { box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
    
    .btn-login {
        width: 100%; padding: .7rem; border-radius: .5rem;
        background: #8b5cf6; border: 0; color: #fff; font-weight: 600;
        font-size: .875rem; transition: background .2s, transform .1s;
    }
    .btn-login:hover { background: #4f46e5;color: #fff; }
    .btn-login:active { transform: scale(.99); }
    .login-footer { text-align: center; padding: .75rem 1.5rem 1.25rem; font-size: .75rem; color: #9ca3af; }
    .alert { border-radius: .5rem; font-size: .825rem; }
    
    /* Tambahan untuk indikator kekuatan password */
    .pass-strength { height: 4px; border-radius: 2px; transition: all .3s; }
    /* ====================================================================
    DARK MODE - LOGIN
    Mengikuti Bootstrap 5.3 [data-bs-theme="dark"]
    ==================================================================== */

    [data-bs-theme="dark"] body.auth-page{
        background:#0f0f23;
        color:#e2e8f0;
        background-image:
            radial-gradient(
                circle at 8% 10%,
                rgba(99,102,241,.16) 0%,
                transparent 40%
            ),
            radial-gradient(
                circle at 92% 15%,
                rgba(139,92,246,.14) 0%,
                transparent 42%
            ),
            radial-gradient(
                circle at 12% 90%,
                rgba(6,182,212,.08) 0%,
                transparent 40%
            );
    }


    /* ---------------------------------------------------------------
    LOGIN CARD
    --------------------------------------------------------------- */

    [data-bs-theme="dark"] .login-card{
        background:rgba(26,26,46,.96);
        border:1px solid rgba(255,255,255,.08);
        box-shadow:
            0 25px 50px rgba(0,0,0,.55),
            0 8px 30px rgba(79,70,229,.08);
    }


    /* ---------------------------------------------------------------
    LOGIN HEADER
    --------------------------------------------------------------- */

    [data-bs-theme="dark"] .login-header{
        background:
            linear-gradient(
                120deg,
                rgba(49,46,129,.96),
                rgba(67,56,202,.94) 45%,
                rgba(109,40,217,.94)
            );
    }

    [data-bs-theme="dark"] .login-header .app-icon{
        background:rgba(255,255,255,.16);
        border:1px solid rgba(255,255,255,.12);
    }


    /* ---------------------------------------------------------------
    LOGIN BODY
    --------------------------------------------------------------- */

    [data-bs-theme="dark"] .login-body{
        color:#e2e8f0;
    }


    /* ---------------------------------------------------------------
    FORM LABEL
    --------------------------------------------------------------- */

    [data-bs-theme="dark"] .form-label{
        color:#cbd5e1;
    }


    /* ---------------------------------------------------------------
    FORM CONTROL
    --------------------------------------------------------------- */

    [data-bs-theme="dark"] .form-control{
        background:#11111f;
        border-color:rgba(255,255,255,.12);
        color:#e2e8f0;
    }

    [data-bs-theme="dark"] .form-control::placeholder{
        color:#64748b;
    }

    [data-bs-theme="dark"] .form-control:focus{
        background:#11111f;
        border-color:#6366f1;
        color:#f1f5f9;
    }


    /* ---------------------------------------------------------------
    INPUT GROUP
    --------------------------------------------------------------- */

    [data-bs-theme="dark"] .input-group-text{
        background:#18182b;
        border-color:rgba(255,255,255,.12);
        color:#94a3b8;
    }

    [data-bs-theme="dark"] .pass-toggle{
        background:#18182b;
        border-color:rgba(255,255,255,.12);
        color:#94a3b8;
    }

    [data-bs-theme="dark"] .input-group:focus-within .input-group-text,
    [data-bs-theme="dark"] .input-group:focus-within .form-control,
    [data-bs-theme="dark"] .input-group:focus-within .pass-toggle{
        border-color:#6366f1;
    }

    [data-bs-theme="dark"] .input-group:focus-within{
        box-shadow:0 0 0 3px rgba(99,102,241,.18);
    }


    /* ---------------------------------------------------------------
    BOOTSTRAP text-muted
    --------------------------------------------------------------- */

    [data-bs-theme="dark"] .text-muted{
        color:#94a3b8!important;
    }


    /* ---------------------------------------------------------------
    ALERT
    --------------------------------------------------------------- */

    [data-bs-theme="dark"] .alert-danger{
        background:rgba(127,29,29,.28);
        border-color:rgba(248,113,113,.22);
        color:#fca5a5;
    }

    [data-bs-theme="dark"] .alert-success{
        background:rgba(20,83,45,.28);
        border-color:rgba(74,222,128,.22);
        color:#86efac;
    }

    [data-bs-theme="dark"] .alert-info{
        background:rgba(8,47,73,.30);
        border-color:rgba(56,189,248,.22);
        color:#7dd3fc;
    }


    /* ---------------------------------------------------------------
    ALERT CLOSE BUTTON
    --------------------------------------------------------------- */

    [data-bs-theme="dark"] .btn-close{
        filter:invert(1) grayscale(100%) brightness(1.5);
    }


    /* ---------------------------------------------------------------
    FORGOT PASSWORD
    --------------------------------------------------------------- */

    [data-bs-theme="dark"] .login-body a.text-muted{
        color:#94a3b8!important;
    }

    [data-bs-theme="dark"] .login-body a.text-muted:hover{
        color:#a5b4fc!important;
    }


    /* ---------------------------------------------------------------
    LOGIN BUTTON
    --------------------------------------------------------------- */

    [data-bs-theme="dark"] .btn-login{
        background:#6366f1;
        color:#fff;
        box-shadow:0 5px 15px rgba(99,102,241,.20);
    }

    [data-bs-theme="dark"] .btn-login:hover{
        background:#4f46e5;
        color:#fff;
    }

    [data-bs-theme="dark"] .btn-login:disabled{
        background:#4f46e5;
        color:#fff;
        opacity:.75;
    }


    /* ---------------------------------------------------------------
    LOGIN FOOTER
    --------------------------------------------------------------- */

    [data-bs-theme="dark"] .login-footer{
        background:rgba(255,255,255,.015);
        color:#64748b;
        border-top:1px solid rgba(255,255,255,.05);
    }

    /* Tombol toggle mode gelap di topbar */
    /* ====================================================================
    TOGGLE THEME - FIXED TOP RIGHT
    ==================================================================== */

    .login-wrap .theme-toggle-btn{
        position:fixed;
        top:18px;
        right:18px;
        z-index:1050;

        width:42px;
        height:42px;
        border-radius:.7rem;

        display:flex;
        align-items:center;
        justify-content:center;

        border:1px solid rgba(30,41,59,.12);
        background:rgba(255,255,255,.78);
        backdrop-filter:blur(12px);
        -webkit-backdrop-filter:blur(12px);

        color:#64748b;
        cursor:pointer;

        box-shadow:0 5px 18px rgba(0,0,0,.10);

        transition:
            background .2s,
            color .2s,
            border-color .2s,
            transform .15s,
            box-shadow .2s;
    }

    .login-wrap .theme-toggle-btn:hover{
        background:rgba(255,255,255,.95);
        color:var(--g1,#6366f1);
        transform:translateY(-1px);
        box-shadow:0 7px 22px rgba(0,0,0,.14);
    }

    .login-wrap .theme-toggle-btn:active{
        transform:scale(.94);
    }


    /* DARK MODE */

    [data-bs-theme="dark"] .login-wrap .theme-toggle-btn{
        background:rgba(26,26,46,.78);
        border-color:rgba(255,255,255,.14);
        color:#cbd5e1;

        box-shadow:0 5px 20px rgba(0,0,0,.35);
    }

    [data-bs-theme="dark"] .login-wrap .theme-toggle-btn:hover{
        background:rgba(40,40,70,.92);
        color:#f1f5f9;

        box-shadow:0 7px 24px rgba(0,0,0,.42);
    }


    /* MOBILE */

    @media (max-width:576px){
        .login-wrap .theme-toggle-btn{
            top:12px;
            right:12px;
            width:40px;
            height:40px;
        }
    }

/* =====================================================================
   4. ADMIN LAYOUT — layouts/admin.php
   ===================================================================== */
    :root{
        --sb-w:220px;--tb-h:64px;
        --primary:#6366f1;--primary-dark:#4f46e5;--primary-light:#818cf8;
        --g1:#6366f1;--g2:#8b5cf6;--g3:#4f46e5;--g4:#06b6d4;--g5:#ec4899;
        --sb-bg:#ffffff;--sb-text:#374151;
    }
    body.admin-page{
        font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;font-size:.875rem;color:#1e293b;
        background:#eef2ff;
        background-image:
            radial-gradient(circle at 6% 8%, rgba(99,102,241,.10) 0%, transparent 40%),
            radial-gradient(circle at 96% 12%, rgba(139,92,246,.09) 0%, transparent 42%),
            radial-gradient(circle at 10% 92%, rgba(6,182,212,.08) 0%, transparent 40%);
        background-attachment:fixed;
    }
    /* SIDEBAR — light white theme sesuai desain baru */
    .sidebar{
        position:fixed;top:0;left:0;bottom:0;width:var(--sb-w);overflow-y:auto;z-index:1040;transition:transform .3s;
        background:#ffffff;border-right:1px solid #e5e7eb;box-shadow:2px 0 12px rgba(0,0,0,.04);
        display:flex;flex-direction:column;
    }
    /* Brand area */
    .sb-brand{padding:1rem 1.1rem;border-bottom:1px solid #f3f4f6;display:flex;align-items:center;gap:.65rem;flex-shrink:0;}
    .sb-brand-logo{width:38px;height:38px;border-radius:.65rem;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem;color:#fff;box-shadow:0 4px 10px rgba(99,102,241,.3);}
    .sb-brand-text .app-name{color:#111827;font-weight:800;font-size:.85rem;margin:0;line-height:1.25;}
    .sb-brand-text .app-sub{color:#9ca3af;font-size:.6rem;font-weight:500;display:block;}
    /* Nav body */
    .sb-nav{flex:1;padding:.4rem 0;overflow-y:auto;}
    .sb-label{color:#9ca3af;font-size:.59rem;text-transform:uppercase;letter-spacing:.1em;padding:.7rem 1rem .2rem;font-weight:700;}
    .sb-item a{display:flex;align-items:center;gap:.5rem;padding:.44rem .65rem;margin:0 .45rem .2rem;color:#374151;text-decoration:none;font-size:.8rem;font-weight:600;transition:all .15s;border-radius:.5rem;}
    .sb-item a:hover{color:#6366f1;background:rgba(99,102,241,.07);}
    .sb-item a.active{color:#fff!important;background:#6366f1;box-shadow:0 4px 10px rgba(99,102,241,.28);}
    .sb-item a .bi:first-child{font-size:.88rem;width:.95rem;text-align:center;flex-shrink:0;}
    .sb-chevron{margin-left:auto;font-size:.6rem;opacity:.35;flex-shrink:0;}
    .sb-item a.active .sb-chevron{opacity:.7;}
    .sb-badge{background:#ef4444;color:#fff;font-size:.58rem;padding:.15em .5em;border-radius:9999px;margin-left:auto;font-weight:700;min-width:18px;text-align:center;}
    /* Sidebar footer card */
    .sb-footer{padding:.75rem;flex-shrink:0;border-top:1px solid #f3f4f6;}
    .sb-footer-card{background:linear-gradient(135deg,#eef2ff,#f5f3ff);border-radius:.85rem;padding:.9rem;text-align:center;position:relative;overflow:hidden;}
    .sb-footer-card::before{content:'';position:absolute;top:-20px;right:-20px;width:80px;height:80px;border-radius:50%;background:rgba(99,102,241,.1);}
    .sb-footer-illus{font-size:2rem;margin-bottom:.3rem;}
    .sb-footer-name{font-weight:800;font-size:.78rem;color:#1e1b4b;margin-bottom:.1rem;}
    .sb-footer-tag{font-size:.62rem;color:#6b7280;line-height:1.4;}
    .sb-footer-ver{font-size:.58rem;color:#9ca3af;margin-top:.4rem;}
    /* Search bar topbar */
    .sb-search{flex:1;max-width:380px;}
    .sb-search .search-wrap{position:relative;}
    .sb-search .search-input{border:1.5px solid #e5e7eb;border-radius:.6rem;padding:.4rem .875rem .4rem 2.25rem;font-size:.81rem;background:#f9fafb;color:#374151;width:100%;transition:border .2s,box-shadow .2s;outline:none;}
    .sb-search .search-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.1);background:#fff;}
    .sb-search .search-icon{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:.8rem;pointer-events:none;}
    .sb-search .search-shortcut{position:absolute;right:.55rem;top:50%;transform:translateY(-50%);font-size:.6rem;color:#9ca3af;background:#f3f4f6;padding:.12em .42em;border-radius:.3rem;border:1px solid #e5e7eb;pointer-events:none;}
    /* Topbar user info */
    .topbar-user-info{line-height:1.2;text-align:left;}
    .topbar-user-info .tu-name{font-size:.8rem;font-weight:700;color:#111827;display:block;}
    .topbar-user-info .tu-role{font-size:.66rem;color:#6b7280;display:block;}
    /* TOPBAR */
    .topbar{
        position:fixed;top:0;left:var(--sb-w);right:0;height:var(--tb-h);z-index:1030;display:flex;align-items:center;padding:0 1.25rem;gap:.9rem;
        background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
        border-bottom:1px solid #f0f0f5;box-shadow:0 2px 12px rgba(79,70,229,.05);
    }
    /* CONTENT */
    .main-content{margin-left:var(--sb-w);padding-top:var(--tb-h);min-height:100vh;}
    .page-body{padding:1.5rem;}
    /* NOTIFIKASI — panel dropdown bel, selaras tema indigo */
    .notif-bell{border-radius:.6rem;}
    .notif-panel-header{background:linear-gradient(135deg,var(--g1),var(--g3));}
    .notif-item{display:flex;gap:.65rem;padding:.7rem .9rem;text-decoration:none;color:inherit;border-bottom:1px solid #f1f5f9;transition:background .15s;}
    .notif-item:hover{background:#f5f5ff;}
    .notif-item.unread{background:#f8f7ff;}
    .notif-item.unread:hover{background:#f0eeff;}
    .notif-item .notif-icon{width:38px;height:38px;border-radius:.65rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem;color:#fff;background:linear-gradient(135deg,var(--g1),var(--g2));}
    .notif-item .notif-icon.tp-approval{background:linear-gradient(135deg,#f59e0b,#d97706);}
    .notif-item .notif-icon.tp-approved{background:linear-gradient(135deg,#16a34a,#15803d);}
    .notif-item .notif-icon.tp-rejected{background:linear-gradient(135deg,#ef4444,#dc2626);}
    .notif-item .notif-icon.tp-pending{background:linear-gradient(135deg,#6366f1,#4f46e5);}
    .notif-item .notif-icon.tp-system{background:linear-gradient(135deg,#8b5cf6,#7c3aed);}
    .notif-sys-pill{display:inline-block;font-size:.58rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;padding:.05rem .35rem;border-radius:.35rem;background:#ede9fe;color:#6d28d9;vertical-align:middle;margin-left:.3rem;}
    .notif-item .notif-title{font-weight:700;font-size:.8rem;color:#1e293b;line-height:1.3;}
    .notif-item .notif-msg{font-size:.74rem;color:#64748b;line-height:1.35;margin-top:1px;}
    .notif-item .notif-time{font-size:.66rem;color:#94a3b8;margin-top:3px;}
    .notif-item.unread .notif-title::after{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--g1);margin-left:.4rem;vertical-align:middle;}
    /* CARDS — kaca lembut senada dashboard pegawai */
    .card{
        border:1px solid rgba(255,255,255,.7);border-radius:.9rem;
        background:rgba(255,255,255,.78);backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%);
        box-shadow:0 6px 20px rgba(79,70,229,.07);
    }
    .card-header{background:rgba(255,255,255,.4);border-bottom:1px solid rgba(30,41,59,.06);padding:.875rem 1.25rem;font-weight:700;font-size:.875rem;}
    /* STAT CARDS */
    .stat-card{border-radius:.9rem;padding:1.25rem;color:#fff;position:relative;overflow:hidden;box-shadow:0 10px 24px rgba(79,70,229,.18);}
    .stat-card::after{content:'';position:absolute;top:-20px;right:-20px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.12);}
    .stat-value{font-size:1.75rem;font-weight:800;line-height:1;}
    .stat-label{font-size:.75rem;opacity:.9;margin-top:.25rem;}
    .stat-icon{position:absolute;right:1rem;bottom:.75rem;font-size:2.5rem;opacity:.22;}
    /* BUTTONS */
    .btn{border-radius:.65rem;font-weight:700;}
    .btn-primary{background:linear-gradient(135deg,var(--g3),var(--g1));border:0;box-shadow:0 6px 16px rgba(79,70,229,.3);}
    .btn-primary:hover,.btn-primary:active{background:linear-gradient(135deg,#4338ca,#6d28d9)!important;}
    .btn-outline-primary{--bs-btn-color:var(--g3);--bs-btn-border-color:var(--g1);--bs-btn-hover-bg:var(--g1);--bs-btn-hover-border-color:var(--g1);--bs-btn-active-bg:var(--g3);--bs-btn-active-border-color:var(--g3);}
    /* FORM CONTROLS */
    .form-control:focus,.form-select:focus{border-color:var(--g1);box-shadow:0 0 0 .2rem rgba(99,102,241,.15);}
    .form-check-input:checked{background-color:var(--g1);border-color:var(--g1);}
    .nav-tabs .nav-link.active{color:var(--g3);border-bottom:2px solid var(--g1);font-weight:700;}
    .nav-tabs .nav-link{color:#64748b;font-weight:600;}
    a{color:var(--g3);}
    /* TABLE */
    .table th{font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#64748b;background:rgba(99,102,241,.05);}
    .table td{vertical-align:middle;font-size:.83rem;}
    /* DATATABLES — beri padding karena tabel biasanya berada di dalam card-body.p-0 */
    .dataTables_wrapper{padding:0;}
    .dataTables_wrapper .row:first-child{padding:.9rem 1.25rem .75rem;margin:0;}
    .dataTables_wrapper .row:last-child{padding:.75rem 1.25rem .9rem;margin:0;border-top:1px solid #f1f5f9;}
    .dataTables_wrapper .dataTables_length label,
    /* .dataTables_wrapper .dataTables_filter label{font-size:.8rem;color:#64748b;display:flex;align-items:center;gap:.4rem;margin:0;} */
    .dataTables_wrapper .dataTables_length select{font-size:.8rem;padding:.25rem 1.75rem .25rem .5rem;}
    /* .dataTables_wrapper .dataTables_filter input{font-size:.8rem;margin-left:0;} */
    .dataTables_wrapper .dataTables_info{font-size:.78rem;color:#64748b;padding-top:.35rem;}
    .dataTables_wrapper .dataTables_paginate{padding-top:0;}
    /* .dataTables_wrapper .dataTables_paginate .paginate_button{font-size:.8rem;padding:.3rem .65rem;margin-left:.15rem;border-radius:.5rem!important;} */
    .dataTables_wrapper .dataTables_paginate .paginate_button.current{background:linear-gradient(135deg,var(--g3),var(--g1))!important;border-color:var(--g1)!important;color:#fff!important;}
    .dataTables_wrapper table.dataTable{margin-top:0!important;margin-bottom:0!important;}
    .dataTables_wrapper .table-responsive{border:0;}
    
    /* BADGES */
    .badge{font-weight:600;border-radius:.5rem;}
    /* MOBILE */
    @media(max-width:991px){
        .sidebar{transform:translateX(-100%);}
        .sidebar.show{transform:translateX(0);}
        .topbar{left:0;}
        .main-content{margin-left:0;}
        .overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1039;}
        .overlay.show{display:block;}
    }
    /* TIMELINE */
    .timeline{position:relative;padding-left:1.5rem;}
    .timeline::before{content:'';position:absolute;left:.6rem;top:0;bottom:0;width:2px;background:#e2e8f0;}
    .timeline-item{position:relative;padding-bottom:1.25rem;}
    .timeline-dot{position:absolute;left:-1.5rem;top:.25rem;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px var(--g1);}
    /* FACE CAPTURE */
    #face-video{border-radius:.5rem;border:3px solid var(--g1);}
    #face-canvas{border-radius:.5rem;}
    .face-slot{width:80px;height:80px;border:2px dashed #dee2e6;border-radius:.5rem;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;}
    .face-slot.filled{border-style:solid;border-color:#15803d;}
/* ====================================================================
   MODE GELAP (DARK MODE)
   Memanfaatkan dukungan bawaan Bootstrap 5.3 (data-bs-theme="dark") utk
   komponen standar (card, table, form, modal, dropdown, badge, dsb) —
   supaya cakupannya luas tanpa perlu override manual satu-satu. Bagian
   di bawah ini HANYA menangani elemen KUSTOM non-Bootstrap milik tema
   HRIS ini sendiri (background gradasi body, efek kaca/glassmorphism
   pada topbar & sidebar, kartu dashboard ".dx-card", dsb) yang tidak
   otomatis ikut berubah lewat data-bs-theme saja.
   ==================================================================== */
[data-bs-theme="dark"] body.admin-page{
    color:#e2e8f0;
    background:#0f0f23;
    background-image:
        radial-gradient(circle at 6% 8%, rgba(99,102,241,.14) 0%, transparent 40%),
        radial-gradient(circle at 96% 12%, rgba(139,92,246,.12) 0%, transparent 42%),
        radial-gradient(circle at 10% 92%, rgba(6,182,212,.10) 0%, transparent 40%);
}
[data-bs-theme="dark"] .topbar{
    background:rgba(20,20,40,.75);border-bottom-color:rgba(255,255,255,.08);
}
[data-bs-theme="dark"] .card-header{background:rgba(255,255,255,.03);border-bottom-color:rgba(255,255,255,.08);}
[data-bs-theme="dark"] .dx-card,[data-bs-theme="dark"] .dx-mini{background:rgba(30,30,55,.75)!important;border-color:rgba(255,255,255,.08)!important;color:#e2e8f0;}
[data-bs-theme="dark"] .dx-card-header{background:rgba(255,255,255,.03)!important;border-color:rgba(255,255,255,.08)!important;}
[data-bs-theme="dark"] .table th{background:rgba(99,102,241,.12);color:#94a3b8;}
[data-bs-theme="dark"] .table td, [data-bs-theme="dark"] .table th{border-color:rgba(255,255,255,.08);}
[data-bs-theme="dark"] .table-hover>tbody>tr:hover>*{background:rgba(99,102,241,.10);color:#e2e8f0;}
[data-bs-theme="dark"] .dataTables_wrapper .row:last-child{border-top-color:rgba(255,255,255,.08);}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info{color:#94a3b8;}
[data-bs-theme="dark"] .modal-content{background:#1a1a2e;color:#e2e8f0;}
[data-bs-theme="dark"] .form-control,[data-bs-theme="dark"] .form-select{background-color:#1a1a2e;border-color:rgba(255,255,255,.12);color:#e2e8f0;}
[data-bs-theme="dark"] .form-control:focus,[data-bs-theme="dark"] .form-select:focus{background-color:#1a1a2e;color:#e2e8f0;}
[data-bs-theme="dark"] .text-muted{color:#94a3b8!important;}
[data-bs-theme="dark"] .border,[data-bs-theme="dark"] .border-top,[data-bs-theme="dark"] .border-bottom{border-color:rgba(255,255,255,.1)!important;}
[data-bs-theme="dark"] .bg-light{background-color:#1a1a2e!important;color:#e2e8f0;}
[data-bs-theme="dark"] .notif-panel-header ~ *, [data-bs-theme="dark"] .notif-item{border-bottom-color:rgba(255,255,255,.08);}
[data-bs-theme="dark"] .notif-item:hover,[data-bs-theme="dark"] .notif-item.unread{background:rgba(99,102,241,.10);}
[data-bs-theme="dark"] .notif-item .notif-title{color:#e2e8f0;}
[data-bs-theme="dark"] .badge.bg-light{background-color:#2a2a45!important;color:#cbd5e1!important;}
[data-bs-theme="dark"] a{color:var(--g4);}
/* Sidebar dark mode — ganti dari gelap-default ke dark-on-demand */
[data-bs-theme="dark"] .sidebar{background:#111827;border-right-color:rgba(255,255,255,.08);}
[data-bs-theme="dark"] .sb-brand{border-bottom-color:rgba(255,255,255,.06);}
[data-bs-theme="dark"] .sb-brand-text .app-name{color:#f1f5f9;}
[data-bs-theme="dark"] .sb-brand-text .app-sub{color:#4b5563;}
[data-bs-theme="dark"] .sb-nav{}
[data-bs-theme="dark"] .sb-label{color:#374151;}
[data-bs-theme="dark"] .sb-item a{color:#9ca3af;}
[data-bs-theme="dark"] .sb-item a:hover{color:#a5b4fc;background:rgba(99,102,241,.12);}
[data-bs-theme="dark"] .sb-item a.active{background:#6366f1;color:#fff!important;box-shadow:0 4px 10px rgba(99,102,241,.35);}
[data-bs-theme="dark"] .sb-footer{border-top-color:rgba(255,255,255,.06);}
[data-bs-theme="dark"] .sb-footer-card{background:rgba(99,102,241,.1);}
[data-bs-theme="dark"] .sb-footer-name{color:#e2e8f0;}
[data-bs-theme="dark"] .sb-footer-tag{color:#6b7280;}
[data-bs-theme="dark"] .sb-search .search-input{background:#1a1a2e;border-color:rgba(255,255,255,.1);color:#e2e8f0;}
[data-bs-theme="dark"] .sb-search .search-input:focus{border-color:#6366f1;}
[data-bs-theme="dark"] .sb-search .search-icon{color:#4b5563;}
[data-bs-theme="dark"] .sb-search .search-shortcut{background:#1a1a2e;border-color:rgba(255,255,255,.1);color:#4b5563;}
[data-bs-theme="dark"] .topbar-user-info .tu-name{color:#e2e8f0;}
[data-bs-theme="dark"] .topbar-user-info .tu-role{color:#6b7280;}

/* Tombol toggle mode gelap di topbar */
.theme-toggle-btn{width:38px;height:38px;border-radius:.6rem;display:flex;align-items:center;justify-content:center;border:1px solid rgba(30,41,59,.12);background:transparent;color:#64748b;cursor:pointer;transition:background .15s;flex-shrink:0;}
.theme-toggle-btn:hover{background:rgba(99,102,241,.1);color:var(--g1);}
[data-bs-theme="dark"] .theme-toggle-btn{border-color:rgba(255,255,255,.15);color:#cbd5e1;}
[data-bs-theme="dark"] .theme-toggle-btn:hover{background:rgba(99,102,241,.18);}

.theme-toggle-btn-usr{min-width:38px;height:38px;border-radius:.6rem;display:flex;align-items:center;justify-content:center;border:1px solid rgba(30,41,59,.12);background:transparent;color:#64748b;cursor:pointer;transition:background .15s;flex-shrink:0;}
.theme-toggle-btn-usr:hover{background:rgba(99,102,241,.1);color:var(--g1);}
[data-bs-theme="dark"] .theme-toggle-btn-usr{border-color:rgba(255,255,255,.15);color:#cbd5e1;}
[data-bs-theme="dark"] .theme-toggle-btn-usr:hover{background:rgba(99,102,241,.18);}

/* =====================================================================
   5. ESS LAYOUT — layouts/ess.php (mobile, pegawai) + employee/dashboard.php
   Dirombak mengikuti mockup terbaru: aksen BIRU (#2563eb), hero foto kantor,
   kartu presensi gradasi hijau, tile statistik pastel, bottom-nav didok
   dengan tombol Scan bundar. Satu set style untuk SEMUA halaman ESS —
   dashboard sekarang extend layout yang sama (tidak ada lagi body.empdash-page).
   ===================================================================== */
:root{
    --g1:#6366f1; --g2:#8b5cf6; --g3:#4f46e5; --g4:#06b6d4;
    --ess-primary:#6366f1; --ess-primary-soft:#e3edff;
    --ess-green:#16a34a; --ess-green-soft:#e6f6ec;
    --ess-red:#dc2626;   --ess-red-soft:#fde8e8;
    --ess-amber:#f59e0b; --ess-amber-soft:#fff5e0;
    --ess-violet:#7c3aed;--ess-violet-soft:#efe9ff;
    --ess-bg:#f3f5fa; --ess-ink:#1e2233; --ess-muted:#7c8194;
    --ess-card:#ffffff; --ess-card-border:rgba(20,20,43,.06);
    --ess-shadow:0 6px 18px rgba(30,32,60,.06);
    --ess-radius:1.15rem;
}
body.ess-page{
    font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
    font-size:.875rem; color:var(--ess-ink); padding-bottom:96px; min-height:100vh;
    background:var(--ess-bg);
}
body.ess-page a{text-decoration:none;}

/* ===== TOPBAR (halaman sub-ESS: kembali + judul + lonceng + avatar) ===== */
.ess-topbar{
    background:#fff; color:var(--ess-ink); padding:.85rem 1rem; display:flex; align-items:center; gap:.6rem;
    position:sticky; top:0; z-index:200; box-shadow:0 1px 0 rgba(20,20,43,.06);
}
.ess-topbar .back-btn{color:var(--ess-ink);font-size:1.1rem;line-height:1;width:38px;height:38px;display:flex;
    align-items:center;justify-content:center;border-radius:50%;background:#f1f3f9;transition:background .15s;flex-shrink:0}
.ess-topbar .back-btn:hover{background:#e6e9f3}
.ess-topbar .title{font-weight:800;font-size:1.02rem;flex:1;letter-spacing:.01em;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== ICON BUTTONS (lonceng & avatar — bundar putih seperti mockup) ===== */
.icon-btn-ess{
    color:var(--ess-ink);width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;
    border-radius:50%;background:#f1f3f9;position:relative;border:0;transition:background .15s,transform .15s;flex-shrink:0;cursor:pointer;
}
.icon-btn-ess:hover{background:#e6e9f3;color:var(--ess-ink)}
.icon-btn-ess:active{transform:scale(.94)}
.icon-btn-ess.avatar-btn{background:#e9ecf3;color:#4b5567;}
.notif-badge{
    position:absolute; top:-3px; right:-3px; min-width:19px; height:19px; padding:0 5px; border-radius:10px;
    background:var(--ess-red); color:#fff; font-size:.62rem; font-weight:800; line-height:19px; text-align:center;
    border:2px solid #fff; box-sizing:content-box;
}

/* ===== HERO (dashboard) — foto kantor + sapaan ===== */
.ess-hero{
    position:relative; overflow:hidden; min-height:270px; padding:1rem 1.1rem 4.8rem;
    background-color:#e8eef6; background-size:cover; background-position:right center; color:var(--ess-ink);
}
.ess-hero-overlay{
    position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(240,244,250,.96) 0%, rgba(240,244,250,.88) 40%, rgba(240,244,250,.35) 70%, rgba(240,244,250,0) 100%);
}
.ess-hero-inner{position:relative;z-index:1;}
.ess-hero-actions{display:flex;justify-content:flex-end;gap:.6rem;}
.ess-hero .icon-btn-ess{background:#fff;box-shadow:0 4px 12px rgba(30,32,60,.12);}
.ess-hero .icon-btn-ess.avatar-btn{background:#eef1f7;color:#4b5567;}
.ess-hero-greeting{margin-top:.5rem;max-width:74%;}
.ess-hero .greeting{font-size:.98rem;font-weight:600;color:#4b5567;}
.ess-hero .user-name{font-size:1.45rem;font-weight:800;line-height:1.2;margin-top:.15rem;color:#161a2b;}
.ess-hero .role-name{font-size:.88rem;color:#5b6274;margin-top:.15rem;font-weight:600;}
.ess-hero .hero-quote{font-size:.8rem;color:#5b6274;margin-top:.9rem;max-width:230px;line-height:1.4;}

/* ===== USER MENU DROPDOWN ===== */
.user-menu-panel{
    position:fixed; top:4.6rem; right:1rem; width:236px; z-index:1050;
    background:#fff; border:1px solid var(--ess-card-border); border-radius:1.1rem;
    box-shadow:0 16px 40px rgba(30,27,75,.16); padding:.5rem;
    opacity:0; transform:translateY(-8px) scale(.97); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease; color:var(--ess-ink);
}
.user-menu-panel.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.user-menu-panel .ump-head{display:flex;align-items:center;gap:.6rem;padding:.4rem .5rem;}
.user-menu-panel .ump-avatar{width:36px;height:36px;border-radius:50%;background:var(--ess-primary-soft);color:var(--ess-primary);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.user-menu-panel a{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;border-radius:.7rem;
    color:var(--ess-ink);font-size:.82rem;font-weight:600;transition:background .12s;}
.user-menu-panel a .bi{width:1.1rem;text-align:center;color:var(--ess-muted);}
.user-menu-panel a:hover{background:#f1f3f9;}
.user-menu-panel a.logout-link, .user-menu-panel a.logout-link .bi{color:var(--ess-red);}
.user-menu-panel a.logout-link:hover{background:rgba(220,38,38,.08);}
.user-menu-panel hr{margin:.35rem .2rem;border-color:var(--ess-card-border);opacity:1;}

/* ===== PAGE BODY ===== */
.page-body{padding:1rem .95rem;}
.page-body-hero{position:relative;z-index:3;margin-top:-3.8rem;padding-top:0;}

/* ===== FLAT WHITE CARDS — DI-SCOPE ke body.ess-page supaya tidak menimpa admin ===== */
body.ess-page .card{border:1px solid var(--ess-card-border);border-radius:var(--ess-radius);background:var(--ess-card);box-shadow:var(--ess-shadow);overflow:hidden;}
body.ess-page .card-header{background:#fafbfe;border-bottom:1px solid var(--ess-card-border);font-weight:700;font-size:.85rem}
body.ess-page .card-body{padding:1.1rem}
.ess-card{background:var(--ess-card);border:1px solid var(--ess-card-border);border-radius:var(--ess-radius);box-shadow:var(--ess-shadow);overflow:hidden;}
.ess-card-header{padding:.95rem 1.1rem;border-bottom:1px solid var(--ess-card-border);font-weight:800;font-size:.95rem;display:flex;align-items:center;justify-content:space-between;}
.ess-card-header .bi{color:var(--ess-muted);}
.ess-card-body{padding:1rem;}
.link-more{color:var(--ess-primary)!important;font-size:.82rem;font-weight:700;}
.link-more .bi{color:var(--ess-primary)!important;font-size:.8rem;}
.section-head{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:.95rem;margin:.25rem 0 .8rem;}
.section-head .bi{color:var(--ess-muted);}

/* ===== BUTTONS / BADGES / FORMS (halaman sub-ESS) ===== */
body.ess-page .btn{border-radius:.85rem; font-weight:600; letter-spacing:.01em}
body.ess-page .btn-primary{background:var(--ess-primary);border:0;box-shadow:0 8px 20px rgba(37,99,235,.28)}
body.ess-page .btn-primary:hover,body.ess-page .btn-primary:active{background:#1d4ed8}
body.ess-page .btn-outline-secondary,body.ess-page .btn-outline-primary,body.ess-page .btn-outline-danger{border-radius:.85rem}
body.ess-page .btn-xs{padding:.2rem .45rem;font-size:.75rem;line-height:1.3;border-radius:.55rem}
body.ess-page .badge{border-radius:.55rem;font-weight:600;letter-spacing:.01em}
body.ess-page .form-control,body.ess-page .form-select{border-radius:.7rem;border-color:rgba(30,41,59,.12);background:#fff}
body.ess-page .form-control:focus,body.ess-page .form-select:focus{border-color:var(--ess-primary);box-shadow:0 0 0 .2rem rgba(37,99,235,.15)}
body.ess-page .form-check-input:checked{background-color:var(--ess-primary);border-color:var(--ess-primary);}
body.ess-page .alert{border-radius:1rem;border:1px solid var(--ess-card-border)}
body.ess-page ::-webkit-scrollbar{width:0;height:0}

/* ===== KARTU PRESENSI — gradasi hijau, 2 kolom ===== */
.presensi-card{
    background:linear-gradient(135deg,var(--ess-primary) 0%,#12925e 55%,#0e8f7a 100%);
    border-radius:1.4rem; padding:1.2rem 1.25rem; margin-bottom:.9rem;
    box-shadow:0 16px 34px rgba(16,150,110,.30);
    color:#fff; display:flex; align-items:stretch; gap:1rem; position:relative; overflow:hidden;
}
.presensi-card::after{content:'';position:absolute;right:-40px;bottom:-60px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.07);}
.pc-left{flex:1.35;min-width:0;}
.pc-date{font-size:.84rem;font-weight:600;display:flex;align-items:center;gap:.45rem;opacity:.95;}
.pc-clock{font-size:2.45rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1.1;margin:.35rem 0 .7rem;}
/* .pc-shift{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.2);border-radius:2rem;padding:.4rem .75rem;font-size:.76rem;font-weight:600;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.pc-shift .bi{color:#ffd24a;}
.pc-shift b{font-weight:700;margin-left:.15rem;} */
.pc-shift {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,255,255,.2);
    border-radius: 2rem;
    padding: .4rem .75rem;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    /* Bisa digeser horizontal */
    overflow-x: auto;
    overflow-y: hidden;
    /* Swipe lebih nyaman di HP */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* Hilangkan scrollbar */
    scrollbar-width: none;
}
/* Chrome, Edge, Safari */
.pc-shift::-webkit-scrollbar {display: none;}
.pc-shift .bi {color: #ffd24a;flex-shrink: 0;}
.pc-shift b {font-weight: 700;margin-left: .15rem;flex-shrink: 0;}

.pc-divider{width:1px;background:rgba(255,255,255,.3);align-self:stretch;}
.pc-right{flex:1;min-width:0;}
.pc-lbl{font-size:.85rem;opacity:.9;font-weight:600;}
.pc-val{font-size:1.55rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.25;}
.pc-val-muted{opacity:.6;}
.pc-late{display:inline-block;background:#ffc21a;color:#3a2a00;font-weight:700;font-size:.72rem;border-radius:.5rem;padding:.2rem .55rem;margin-top:.3rem;}

/* ===== TOMBOL CHECK IN / CHECK OUT ===== */
.checkin-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:.8rem;}
.btn-checkin{
    border:0;border-radius:1.25rem;padding:1.15rem .6rem;display:flex;align-items:center;justify-content:center;gap:.7rem;
    text-align:left;transition:transform .15s,opacity .15s;
}
.btn-checkin .bi{font-size:1.75rem;line-height:1;}
.btn-checkin .bc-label{font-weight:800;font-size:1.1rem;line-height:1.15;}
.btn-checkin .bc-sub{font-size:.75rem;opacity:.85;font-weight:600;}
.btn-checkin.in{background:var(--ess-green-soft);color:#158a3d;}
.btn-checkin.out{background:var(--ess-red-soft);color:#c8281f;}
.btn-checkin:active{transform:scale(.97);}
.btn-checkin:disabled{background:#eceef4!important;color:var(--ess-muted)!important;opacity:1;cursor:not-allowed;}

/* ===== BAR AJUKAN IZIN ===== */
.izin-bar{
    display:flex;align-items:center;gap:.7rem;background:#ececfd;border-radius:1rem;padding:.9rem 1.1rem;
    margin-bottom:.9rem;color:#3b3f8c;font-weight:600;font-size:.9rem;transition:background .15s;
}
.izin-bar:hover{background:#e2e3fb;color:#3b3f8c;}
.izin-bar .bi:first-child{font-size:1.1rem;color:#4b4fd6;}
.izin-bar .bi.ms-auto{color:#4b4fd6;font-size:.9rem;}

/* ===== GRID 4 STATISTIK (tile pastel) ===== */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin-bottom:.9rem;}
.stat-tile{border-radius:1.15rem;padding:.9rem .35rem .8rem;text-align:center;display:flex;flex-direction:column;align-items:center;transition:transform .15s;}
.stat-tile:active{transform:scale(.96);}
.st-icon{width:40px;height:40px;border-radius:.9rem;display:flex;align-items:center;justify-content:center;font-size:1.15rem;margin-bottom:.5rem;}
.st-val{font-size:1.5rem;font-weight:800;line-height:1.05;}
.st-lbl{font-size:.7rem;color:#4b5567;margin-top:.3rem;font-weight:600;line-height:1.2;}
.st-lbl small{display:block;color:var(--ess-muted);font-size:.62rem;}
.stat-blue  {background:var(--ess-primary-soft);} .stat-blue .st-icon{background:rgba(37,99,235,.14);color:var(--ess-primary);}  .stat-blue .st-val{color:var(--ess-primary);}
.stat-green {background:var(--ess-green-soft);}   .stat-green .st-icon{background:rgba(22,163,74,.14);color:var(--ess-green);}    .stat-green .st-val{color:var(--ess-green);}
.stat-amber {background:var(--ess-amber-soft);}   .stat-amber .st-icon{background:rgba(245,158,11,.16);color:#d97706;}            .stat-amber .st-val{color:#d97706;}
.stat-violet{background:var(--ess-violet-soft);}  .stat-violet .st-icon{background:rgba(124,58,237,.14);color:var(--ess-violet);} .stat-violet .st-val{color:var(--ess-violet);font-size:1.3rem;}

/* ===== BANNER APPROVAL SAYA ===== */
.approval-banner{
    display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem;padding:.9rem 1rem;border-radius:1.15rem;color:#fff;
    background:linear-gradient(135deg,var(--ess-primary),#4f46e5);box-shadow:0 12px 26px rgba(37,99,235,.28);
}
.approval-banner:hover{color:#fff;}
.approval-banner .ab-icon{width:42px;height:42px;border-radius:.85rem;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;}
.approval-banner .ab-sub{font-size:.75rem;opacity:.9;}

/* ===== PRESENSI TERAKHIR ===== */
.att-row{display:flex;align-items:center;gap:.8rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--ess-card-border);}
.att-row:last-child{border-bottom:0;}
.att-date{width:92px;flex-shrink:0;border-right:1px solid var(--ess-card-border);padding-right:.6rem;}
.att-d{font-weight:700;font-size:.88rem;color:#3f4658;}
.att-day{font-size:.75rem;color:var(--ess-muted);font-weight:600;}
.att-times{flex:1;min-width:0;font-weight:700;font-size:.92rem;}
.att-times .bi{color:var(--ess-muted);font-size:.75rem;}
.att-times .t-in{color:var(--ess-green);} .att-times .t-out{color:var(--ess-red);} .att-times .t-out.empty{opacity:.75;}
.att-times .t-late{font-size:.7rem;color:#d97706;font-weight:600;margin-top:.1rem;}
.att-status{font-size:.78rem;font-weight:700;border-radius:2rem;padding:.35rem .85rem;flex-shrink:0;}
.att-status.ok{background:var(--ess-green-soft);color:#158a3d;} .att-status.bad{background:var(--ess-red-soft);color:#c8281f;}
.att-status.warn{background:var(--ess-amber-soft);color:#b45309;} .att-status.info{background:var(--ess-primary-soft);color:var(--ess-primary);}
.att-status.muted{background:#eef0f5;color:var(--ess-muted);}

/* ===== MENU CEPAT ===== */
.quick-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-bottom:1rem;}
.q-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;color:#3f4658;font-size:.72rem;font-weight:600;line-height:1.2;}
.q-item:hover{color:var(--ess-ink);}
.q-icon{width:54px;height:54px;border-radius:1.1rem;display:flex;align-items:center;justify-content:center;font-size:1.35rem;transition:transform .15s;}
.q-item:active .q-icon{transform:scale(.94);}
.q-blue{background:var(--ess-primary-soft);color:var(--ess-primary);} .q-green{background:var(--ess-green-soft);color:var(--ess-green);}
.q-orange{background:#ffeddc;color:#ea580c;} .q-violet{background:var(--ess-violet-soft);color:var(--ess-violet);} .q-red{background:var(--ess-red-soft);color:var(--ess-red);}

/* ====================================================================
   KOMPONEN HALAMAN SUB-ESS (izin, cuti, lembur, notifikasi, dst) — dibuat
   supaya seluruh halaman ESS selain dashboard memakai bahasa visual yang
   sama (kartu putih rounded, badge pil lembut, ikon bulat berwarna).
   ==================================================================== */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.15rem 0 1rem;flex-wrap:wrap;}
.page-head-title{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.02rem;color:var(--ess-ink);}
.page-head-title .phi{width:38px;height:38px;border-radius:.85rem;background:var(--ess-primary-soft);color:var(--ess-primary);
    display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0;}
.page-head-sub{font-size:.78rem;color:var(--ess-muted);margin-top:.15rem;font-weight:600;}

/* Ringkasan mini (misal: rekap presensi/cuti) — palet sama dengan .stat-tile */
.mini-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1rem;}
.mini-stat-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.mini-stat-grid.cols-6{grid-template-columns:repeat(6,1fr);}
.mini-stat{background:var(--ess-card);border:1px solid var(--ess-card-border);border-radius:1rem;box-shadow:var(--ess-shadow);text-align:center;padding:.75rem .3rem;}
.mini-stat .ms-val{font-weight:800;font-size:1.1rem;line-height:1.2;}
.mini-stat .ms-lbl{font-size:.66rem;color:var(--ess-muted);font-weight:700;margin-top:.15rem;}

/* Daftar pengajuan (izin/cuti/lembur/pindah shift/reimburse/approval) — seragam dgn .att-row */
.req-item{display:flex;align-items:flex-start;gap:.75rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--ess-card-border);}
.req-item:last-child{border-bottom:0;}
.req-icon{width:38px;height:38px;border-radius:.8rem;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;margin-top:.05rem;}
.req-body{flex:1;min-width:0;}
.req-title{font-weight:700;font-size:.86rem;color:var(--ess-ink);}
.req-meta{font-size:.75rem;color:var(--ess-muted);margin-top:.15rem;}
.req-reason{font-size:.75rem;color:var(--ess-muted);margin-top:.2rem;}
.req-side{flex-shrink:0;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;}

/* Badge pil lembut — pengganti bg-*-subtle Bootstrap, dipakai di semua daftar pengajuan */
.status-pill{font-size:.72rem;font-weight:700;border-radius:2rem;padding:.32rem .8rem;display:inline-block;white-space:nowrap;}
.status-pill.ok{background:var(--ess-green-soft);color:#158a3d;} .status-pill.bad{background:var(--ess-red-soft);color:#c8281f;}
.status-pill.warn{background:var(--ess-amber-soft);color:#b45309;} .status-pill.info{background:var(--ess-primary-soft);color:var(--ess-primary);}
.status-pill.muted{background:#eef0f5;color:var(--ess-muted);} .status-pill.violet{background:var(--ess-violet-soft);color:var(--ess-violet);}

/* Empty state seragam (dipakai gantinya text-center text-muted py-4 polos) */
.empty-ess{text-align:center;color:var(--ess-muted);padding:2.4rem 1rem;font-size:.82rem;}
.empty-ess .bi{font-size:2.1rem;display:block;margin-bottom:.55rem;opacity:.3;}

/* ===== BOTTOM NAV — didok rata di dasar layar, 5 slot, Scan bundar biru ===== */
.bottom-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:1000;background:#fff;border-top:1px solid var(--ess-card-border);
    display:flex;align-items:flex-end;padding:.55rem .5rem calc(.5rem + env(safe-area-inset-bottom));
    box-shadow:0 -6px 22px rgba(30,32,60,.08);border-radius:1.4rem 1.4rem 0 0;
}
.bn-item{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;background:transparent;border:0;
    padding:.55rem .1rem .45rem;color:#6b7185;font-size:.72rem;font-weight:600;border-radius:1rem;transition:color .15s,background .15s;position:relative;
    font-family:inherit;cursor:pointer;
}
.bn-item span{line-height:1;}
.bn-item .bi{font-size:1.35rem;display:block;line-height:1;}
.bn-item .bn-dot{display:none;}
.bn-item.active{color:var(--ess-primary);background:var(--ess-primary-soft);font-weight:700;}
.bn-item.active .bn-dot{display:block;width:6px;height:6px;border-radius:50%;background:var(--ess-primary);margin-top:.05rem;}
.bn-item:hover{color:var(--ess-primary);}
.bn-scan-item{gap:.45rem;}
.bn-scan-circle{
    width:3.6rem;height:3.6rem;border-radius:50%;margin-top:-2.2rem;
    background:linear-gradient(160deg,#3b82f6,#1d4ed8);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;
    box-shadow:0 10px 22px rgba(37,99,235,.42),0 0 0 6px #fff;transition:transform .15s;
}
.bn-scan-item span:last-child{color:#6b7185;font-weight:600;}
.bn-scan-item:hover .bn-scan-circle{transform:scale(1.05);}

/* ===== CAMERA MODAL ===== */
#camera-modal .modal-content{border-radius:1.35rem;overflow:hidden;border:0}
#cameraPreview{width:100%;border-radius:0;background:#000;}

/* ====================================================================
   MODE GELAP — memanfaatkan data-bs-theme="dark" Bootstrap 5.3; bagian ini
   hanya elemen kustom ESS. Di-scope agar tidak menimpa dashboard admin.
   ==================================================================== */
[data-bs-theme="dark"] body.ess-page{color:#e2e8f0;background:#0f1120;}
[data-bs-theme="dark"] .ess-topbar{background:#161a2c;box-shadow:0 1px 0 rgba(255,255,255,.06);color:#e2e8f0;}
[data-bs-theme="dark"] .ess-topbar .back-btn,[data-bs-theme="dark"] .icon-btn-ess,[data-bs-theme="dark"] .ess-hero .icon-btn-ess{background:rgba(255,255,255,.1);color:#e2e8f0;box-shadow:none;}
[data-bs-theme="dark"] .icon-btn-ess.avatar-btn,[data-bs-theme="dark"] .ess-hero .icon-btn-ess.avatar-btn{background:rgba(37,99,235,.3);color:#e2e8f0;}
[data-bs-theme="dark"] .notif-badge{border-color:#161a2c;}
[data-bs-theme="dark"] .ess-hero{background-color:#161a2c;}
[data-bs-theme="dark"] .ess-hero-overlay{background:linear-gradient(90deg,rgba(22,26,44,.97) 0%,rgba(22,26,44,.9) 45%,rgba(22,26,44,.55) 75%,rgba(22,26,44,.35) 100%);}
[data-bs-theme="dark"] .ess-hero .greeting,[data-bs-theme="dark"] .ess-hero .role-name,[data-bs-theme="dark"] .ess-hero .hero-quote{color:#a9b1c6;}
[data-bs-theme="dark"] .ess-hero .user-name{color:#f1f5f9;}
[data-bs-theme="dark"] body.ess-page .card,[data-bs-theme="dark"] .ess-card{background:#1a1e33!important;border-color:rgba(255,255,255,.08)!important;color:#e2e8f0;}
[data-bs-theme="dark"] body.ess-page .card-header{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);}
[data-bs-theme="dark"] .ess-card-header,[data-bs-theme="dark"] .att-row,[data-bs-theme="dark"] .att-date{border-color:rgba(255,255,255,.08);}
[data-bs-theme="dark"] .att-d,[data-bs-theme="dark"] .q-item,[data-bs-theme="dark"] .st-lbl{color:#cbd5e1;}
[data-bs-theme="dark"] .btn-checkin.in{background:rgba(22,163,74,.18);color:#4ade80;}
[data-bs-theme="dark"] .btn-checkin.out{background:rgba(220,38,38,.18);color:#f87171;}
[data-bs-theme="dark"] .btn-checkin:disabled{background:rgba(255,255,255,.08)!important;color:#94a3b8!important;}
[data-bs-theme="dark"] .izin-bar{background:rgba(99,102,241,.18);color:#c7d2fe;}
[data-bs-theme="dark"] .izin-bar .bi{color:#c7d2fe;}
[data-bs-theme="dark"] .stat-blue{background:rgba(37,99,235,.18);} [data-bs-theme="dark"] .stat-green{background:rgba(22,163,74,.18);}
[data-bs-theme="dark"] .stat-amber{background:rgba(245,158,11,.18);} [data-bs-theme="dark"] .stat-violet{background:rgba(124,58,237,.2);}
[data-bs-theme="dark"] .stat-blue .st-val{color:#93c5fd;} [data-bs-theme="dark"] .stat-green .st-val{color:#86efac;}
[data-bs-theme="dark"] .stat-amber .st-val{color:#fcd34d;} [data-bs-theme="dark"] .stat-violet .st-val{color:#c4b5fd;}
[data-bs-theme="dark"] .q-blue{background:rgba(37,99,235,.2);color:#93c5fd;} [data-bs-theme="dark"] .q-green{background:rgba(22,163,74,.2);color:#86efac;}
[data-bs-theme="dark"] .q-orange{background:rgba(234,88,12,.2);color:#fdba74;} [data-bs-theme="dark"] .q-violet{background:rgba(124,58,237,.22);color:#c4b5fd;}
[data-bs-theme="dark"] .q-red{background:rgba(220,38,38,.2);color:#fca5a5;}
[data-bs-theme="dark"] .att-status.ok{background:rgba(22,163,74,.2);color:#86efac;} [data-bs-theme="dark"] .att-status.bad{background:rgba(220,38,38,.2);color:#fca5a5;}
[data-bs-theme="dark"] .att-status.warn{background:rgba(245,158,11,.2);color:#fcd34d;} [data-bs-theme="dark"] .att-status.info{background:rgba(37,99,235,.2);color:#93c5fd;}
[data-bs-theme="dark"] .att-status.muted{background:rgba(255,255,255,.08);color:#94a3b8;}
[data-bs-theme="dark"] .bottom-nav{background:#161a2c;border-top-color:rgba(255,255,255,.08);box-shadow:0 -6px 22px rgba(0,0,0,.35);}
[data-bs-theme="dark"] .bn-item{color:#94a3b8;} [data-bs-theme="dark"] .bn-scan-item span:last-child{color:#94a3b8;}
[data-bs-theme="dark"] .bn-item.active{background:rgba(37,99,235,.2);color:#93c5fd;}
[data-bs-theme="dark"] .bn-item.active .bn-dot{background:#93c5fd;}
[data-bs-theme="dark"] .bn-scan-circle{box-shadow:0 10px 22px rgba(37,99,235,.5),0 0 0 6px #161a2c;}
[data-bs-theme="dark"] .user-menu-panel{background:#1a1e33;color:#e2e8f0;border-color:rgba(255,255,255,.1);}
[data-bs-theme="dark"] .user-menu-panel a{color:#e2e8f0;} [data-bs-theme="dark"] .user-menu-panel a:hover{background:rgba(99,102,241,.18);}
[data-bs-theme="dark"] .user-menu-panel hr{border-color:rgba(255,255,255,.1);}
[data-bs-theme="dark"] .user-menu-panel .ump-avatar{background:rgba(37,99,235,.25);color:#93c5fd;}
[data-bs-theme="dark"] body.ess-page .form-control,[data-bs-theme="dark"] body.ess-page .form-select{background-color:#1a1e33;border-color:rgba(255,255,255,.12);color:#e2e8f0;}
[data-bs-theme="dark"] body.ess-page .text-muted,[data-bs-theme="dark"] .att-day{color:#94a3b8!important;}
[data-bs-theme="dark"] body.ess-page .modal-content{background:#1a1e33;color:#e2e8f0;}
[data-bs-theme="dark"] body.ess-page .alert-success{background-color:rgba(22,163,74,.15);color:#86efac;border-color:rgba(22,163,74,.3);}

/* ----- Mode gelap untuk komponen halaman sub-ESS ----- */
[data-bs-theme="dark"] .page-head-title{color:#e2e8f0;}
[data-bs-theme="dark"] .page-head-title .phi{background:rgba(37,99,235,.22);color:#93c5fd;}
[data-bs-theme="dark"] .mini-stat{background:#1a1e33;border-color:rgba(255,255,255,.08);}
[data-bs-theme="dark"] .req-item{border-color:rgba(255,255,255,.08);}
[data-bs-theme="dark"] .req-title{color:#e2e8f0;}
[data-bs-theme="dark"] .status-pill.ok{background:rgba(22,163,74,.2);color:#86efac;}
[data-bs-theme="dark"] .status-pill.bad{background:rgba(220,38,38,.2);color:#fca5a5;}
[data-bs-theme="dark"] .status-pill.warn{background:rgba(245,158,11,.2);color:#fcd34d;}
[data-bs-theme="dark"] .status-pill.info{background:rgba(37,99,235,.2);color:#93c5fd;}
[data-bs-theme="dark"] .status-pill.violet{background:rgba(124,58,237,.22);color:#c4b5fd;}
[data-bs-theme="dark"] .status-pill.muted{background:rgba(255,255,255,.08);color:#94a3b8;}
[data-bs-theme="dark"] .empty-ess{color:#94a3b8;}
[data-bs-theme="dark"] .notif-sys-pill{background:rgba(124,58,237,.25);color:#c4b5fd;}
.min-w-0{min-width:0;}