/* =============================================================
   Jurnal Kegiatan - Stylesheet Utama
   Tema: Modern, clean, sedikit glassmorphism, gradient aksen
============================================================= */
:root {
    --brand-1: #4f46e5;
    --brand-2: #7c3aed;
    --brand-3: #06b6d4;
    --bg-soft: #f5f6fb;
    --ink: #1e2130;
    --ink-soft: #6b7280;
    --card-radius: 18px;
    --shadow-soft: 0 10px 30px -12px rgba(31, 41, 55, 0.15);
    --shadow-hover: 0 16px 36px -14px rgba(79, 70, 229, 0.28);
    --bottom-nav-h: 64px; /* tinggi nyata bottom-nav, dipakai bareng di padding/margin biar tidak tebak angka lagi */
}

* { box-sizing: border-box; }

/* Cegah Firefox/Chrome Android auto-membesarkan ukuran font
   ("font/text inflation") pada blok teks yang dianggap kecil. */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg-soft);
    color: var(--ink);
    min-height: 100vh;   /* fallback untuk browser lama */
    min-height: 100dvh;  /* viewport dinamis: ikut menyesuaikan saat address bar browser collapse/expand */
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c7c9e0; border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Auth Page ---------- */
/* Tema khusus halaman login: minimalis modern, nuansa biru-ungu (indigo-violet
   dipadu aksen biru langit lembut) -- tetap ramah di mata, tidak neon/terlalu
   jenuh warnanya. Semua variabel & selector di bawah ini SENGAJA di-scope
   hanya untuk halaman auth (login), tidak menyentuh --brand-1/2/3 atau
   .btn-gradient dasar yang dipakai di halaman lain. */
.auth-wrapper {
    --auth-deep: #2f2b63;
    --auth-mid: #5d55b0;
    --auth-soft: #9089dd;
    --auth-accent: #6fa8dc;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 10% 12%, rgba(93, 85, 176, 0.16) 0%, transparent 40%),
        radial-gradient(circle at 90% 15%, rgba(111, 168, 220, 0.14) 0%, transparent 38%),
        radial-gradient(circle at 85% 88%, rgba(144, 137, 221, 0.24) 0%, transparent 46%),
        linear-gradient(160deg, #f8f7fb 0%, #f2f1fa 45%, #eef1fa 100%);
    padding: 20px;
}

.auth-card {
    width: 100%;
    max-width: 960px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 24px 60px -24px rgba(47, 43, 99, 0.24), 0 2px 8px rgba(47, 43, 99, 0.06);
    border: 1px solid rgba(93, 85, 176, 0.14);
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
}

.auth-visual {
    background: linear-gradient(165deg, var(--auth-deep) 0%, var(--auth-mid) 58%, var(--auth-soft) 120%);
    color: #fff;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.auth-visual::before {
    content: "";
    position: absolute;
    width: 320px; height: 320px;
    background: rgba(111, 168, 220, 0.26);
    border-radius: 50%;
    top: -120px; right: -100px;
}
.auth-visual::after {
    content: "";
    position: absolute;
    width: 220px; height: 220px;
    background: rgba(144, 137, 221, 0.28);
    border-radius: 50%;
    bottom: -80px; left: -60px;
}

.auth-visual h1 { font-weight: 700; font-size: 1.75rem; z-index: 1; letter-spacing: -0.01em; }
.auth-visual p { opacity: 0.9; z-index: 1; }
.auth-visual .badge-feature {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(111, 168, 220, 0.22);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    z-index: 1;
}
.auth-visual .badge-feature i { color: var(--auth-accent); }

/* Kotak kelompok branding di halaman login (meniru kotak branding di side menu) */
.auth-brand-box {
    display: inline-flex;
    padding: 10px 14px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(111, 168, 220, 0.25);
    border-radius: 12px;
    z-index: 1;
    position: relative;
}

.auth-wrapper .brand-logo {
    box-shadow: 0 0 0 3px rgba(93, 85, 176, 0.35);
}

.auth-form-side {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Input & tombol submit di form login: indigo-violet senada dengan panel
   visual, dipakai HANYA di dalam .auth-form-side supaya tidak mengubah
   tampilan form/tombol di halaman lain. */
.auth-form-side .form-control-modern,
.auth-form-side .input-group-text {
    background: #faf9fd;
    border-color: #ddd9f2 !important;
}
.auth-form-side .form-control-modern:focus {
    border-color: var(--auth-mid);
    box-shadow: 0 0 0 4px rgba(93, 85, 176, 0.14);
    background: #fff;
}
.auth-form-side .btn-gradient {
    background: linear-gradient(135deg, var(--auth-deep), var(--auth-mid));
    border: 1px solid rgba(111, 168, 220, 0.4);
    box-shadow: 0 10px 22px -10px rgba(93, 85, 176, 0.4);
}
.auth-form-side .btn-gradient:hover {
    box-shadow: 0 16px 28px -10px rgba(93, 85, 176, 0.45);
}
.auth-form-side .form-label-modern { color: #34473d; }

/* Branding "TUMINDAK plus": kata "plus" ditampilkan lebih kecil,
   bergaya tulisan tangan (handwriting), dan sejajar tengah secara
   vertikal terhadap teks TUMINDAK di sebelahnya. */
.brand-name-row {
    display: inline-flex;
    align-items: center;
}
.brand-plus {
    font-family: 'Brush Script MT', 'Segoe Script', 'Comic Sans MS', cursive;
    font-style: italic;
    font-weight: 400;
    font-size: 1.5em;
    line-height: 1;
    margin-left: 4px;
    color: #ffe600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.brand-logo {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-1), var(--brand-3));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 1.2rem;
    overflow: hidden;
}
.brand-logo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.form-control-modern, .form-select-modern {
    border-radius: 12px;
    border: 1.5px solid #e5e7eb;
    padding: 12px 16px;
    background: #fafbff;
    transition: all .2s ease;
}
.form-control-modern:focus, .form-select-modern:focus {
    border-color: var(--brand-1);
    box-shadow: 0 0 0 4px rgba(79,70,229,0.12);
    background: #fff;
}

.btn-gradient {
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    border: none;
    color: #fff;
    border-radius: 12px;
    padding: 12px 20px;
    font-weight: 600;
    transition: all .2s ease;
    box-shadow: 0 10px 22px -10px rgba(79,70,229,0.55);
}
.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(79,70,229,0.6);
    color: #fff;
}

/* Tombol Cetak (hijau) disamakan ukurannya dengan tombol Tampilkan (btn-gradient) */
.btn-success {
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
}

/* Efek hover tombol Import Excel di halaman Manajemen User, disamakan
   dengan efek hover tombol Tambah User (.btn-gradient) */
.btn-import-excel {
    transition: all .2s ease;
}
.btn-import-excel:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(25,135,84,0.6);
    color: #fff;
}

/* Efek hover tombol Enroll Tugas User di halaman Manajemen Tugas, disamakan
   dengan efek hover tombol Tambah Jenis Tugas (.btn-gradient) */
.btn-enroll-tugas {
    transition: all .2s ease;
}
.btn-enroll-tugas:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(25,135,84,0.6);
    color: #fff;
}

/* Tombol Tampilkan & Cetak di halaman Cetak Jurnal User: ukuran/lebar disamakan persis */
.btn-print-action { min-width: 150px; transition: all .2s ease; }

/* Tombol Cari & Reset (refresh, hijau) di halaman Lihat Jurnal: ukuran & efek
   hover disamakan -- dibatasi ke .btn-filter-action supaya tidak memengaruhi
   tombol .btn-success di halaman lain */
.btn-filter-action {
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all .2s ease;
}
.btn-filter-action.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(25,135,84,0.6);
    color: #fff;
}

/* Efek hover tombol Cetak (hijau) di halaman Cetak Jurnal, disamakan dengan
   efek hover tombol Tampilkan (.btn-gradient) -- dibatasi ke .btn-print-action
   supaya tidak memengaruhi tombol .btn-success di halaman lain */
.btn-print-action.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(25,135,84,0.6);
    color: #fff;
}

/* Tombol Export XLSX di halaman Cetak Presensi: warna dasarnya oranye.
   Saat enable warnanya oranye JELAS (opacity 1, persis pola tombol Cetak
   saat enable). Saat disable warnanya oranye tapi AGAK BURAM (opacity .65,
   disamakan persis dengan buramnya tombol Cetak/.btn-success saat disable,
   yang buramnya berasal dari default Bootstrap: --bs-btn-disabled-opacity:.65). */
.btn-export-xlsx {
    background: #fd7e14;
    border: none;
    color: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all .2s ease;
    opacity: 1;
    cursor: pointer;
}
/* PENTING: background-color WAJIB ditulis ulang di sini. Bootstrap punya rule
   bawaan ".btn:hover { background-color: var(--bs-btn-hover-bg) }" yang
   spesifisitasnya menang untuk properti background-color dibanding rule
   ".btn-export-xlsx" di atas (yang cuma pakai shorthand "background", bukan
   "background-color"). Karena --bs-btn-hover-bg tidak pernah didefinisikan di
   sini, nilainya kosong/transparan -- itu sebabnya tombol berubah jadi putih
   saat di-hover. Menulis background-color secara eksplisit di rule :hover ini
   memperbaikinya. */
.btn-export-xlsx:hover:not(:disabled) {
    background-color: #fd7e14;
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(253,126,20,0.6);
    color: #fff;
}
/* Tanpa aturan di bawah ini, warna latar akan balik jadi putih saat tombol
   diklik/ditekan (state :active) atau saat difokus lewat keyboard
   (:focus-visible) -- karena Bootstrap punya rule bawaan seperti
   ".btn:active { background-color: var(--bs-btn-active-bg) }" yang otomatis
   berlaku ke tombol ini juga, dan variabel itu tidak pernah didefinisikan di
   sini sehingga nilainya kosong/transparan. */
.btn-export-xlsx:active:not(:disabled),
.btn-export-xlsx:focus-visible:not(:disabled) {
    background-color: #fd7e14;
    border-color: transparent;
    color: #fff;
}
/* Status disable: tetap warna oranye (background-color ditulis ulang supaya
   menang dari rule bawaan Bootstrap ".btn:disabled { background-color:
   var(--bs-btn-disabled-bg) }"), tapi dibuat agak buram (opacity .65) supaya
   terlihat jelas beda dari status enable -- persis pola buramnya tombol Cetak. */
.btn-export-xlsx:disabled {
    background-color: #fd7e14;
    opacity: .65;
    cursor: not-allowed;
    box-shadow: none;
}

/* Tombol Buka Kunci & Kunci di halaman Manajemen Presensi: ukuran lebar
   disamakan persis, dan efek hover disamakan dengan tombol lain yang sudah
   ada di sistem (translateY + box-shadow). Tombol Kunci diberi warna merah
   supaya beda jelas dari tombol Buka Kunci (hijau). */
.btn-presensi-kunci {
    width: 140px;
    padding: .375rem .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 600;
    transition: all .2s ease;
}
.btn-presensi-kunci.btn-buka:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 22px -10px rgba(25,135,84,0.6);
    color: #fff;
}
.btn-presensi-kunci.btn-kunci {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}
.btn-presensi-kunci.btn-kunci:hover {
    background: #c82333;
    border-color: #bd2130;
    transform: translateY(-2px);
    box-shadow: 0 12px 22px -10px rgba(220,53,69,0.6);
    color: #fff;
}

/* Tombol Batal di form Edit Jurnal (Manajemen Jurnal): warna merah dengan
   efek hover disamakan dengan tombol lain yang sudah ada di sistem
   (translateY + box-shadow), sama seperti .btn-presensi-kunci.btn-kunci. */
.btn-batal-jurnal {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
    border-radius: 12px;
    padding: 12px 20px;
    font-weight: 600;
    transition: all .2s ease;
}
.btn-batal-jurnal:hover {
    background: #c82333;
    border-color: #bd2130;
    transform: translateY(-2px);
    box-shadow: 0 12px 22px -10px rgba(220,53,69,0.6);
    color: #fff;
}

/* ---------- App Shell (setelah login) ---------- */
.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; }

.sidebar {
    width: 250px;
    flex-shrink: 0;
    background: #14132b;
    color: #d7d7f0;
    padding: 16px 14px 14px 14px;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    overflow: hidden;
    z-index: 1030;
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
}
.sidebar-scroll-area {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}
.sidebar-bottom {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.sidebar-version {
    text-align: center;
    font-size: 0.62rem;
    color: #6f6fa0;
    margin-top: 8px;
}

.sidebar .brand {
    display: flex; flex-direction: column;
    flex-shrink: 0;
    padding: 10px 10px 10px 10px;
    margin: 0 0 10px 0;
    color: #fff;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
}
.sidebar .brand-top-row { display: flex; align-items: center; gap: 12px; }
.sidebar .brand .brand-logo { width: 44px; height: 44px; font-size: 1.1rem; flex-shrink: 0; }
.sidebar .brand-text { line-height: 1; text-align: left; }
.sidebar .brand-title { font-size: 1.15rem; font-weight: 700; color: #fff; line-height: 1.1; margin: 0; }
.sidebar .brand-subtitle { font-size: 0.88rem; color: #9c9cd6; line-height: 1.1; margin: 4px 0 0 0; }
.sidebar-date-info { color: #fbbf24 !important; font-size: 0.68rem; line-height: 1; margin: -4px 0 10px 0; display: block; text-align: center; }

.nav-section-label {
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6f6fa0;
    padding: 10px 10px 4px;
}

/* Tombol kolektif untuk collapse grup menu "Administrasi" di sidebar (hanya
   berfungsi/terlihat di HP karena tombolnya diberi class d-lg-none). */
.nav-section-label-collapsible { padding-right: 4px; cursor: pointer; }
.sidebar-section-toggle {
    background: none;
    border: none;
    color: #6f6fa0;
    padding: 2px 6px;
    line-height: 1;
    font-size: 0.8rem;
    transition: transform .2s ease;
    pointer-events: none;
}
.nav-section-label-collapsible:hover .sidebar-section-toggle { color: #fff; }
.nav-section-label-collapsible[aria-expanded="true"] .sidebar-section-toggle i { transform: rotate(180deg); display: inline-block; }
.sidebar-section-toggle i { display: inline-block; transition: transform .2s ease; }

.sidebar .nav-link {
    color: #c6c6ea;
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 2px;
    display: flex; align-items: center; gap: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    transition: all .18s ease;
}
.sidebar nav.nav.flex-column > .nav-link:first-child { margin-top: 8px; }
.sidebar .nav-link i { font-size: 0.95rem; width: 18px; text-align: center; }
.sidebar .nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sidebar .nav-link.active {
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(124,58,237,0.7);
}

.main-content {
    flex: 1;
    /* min-width: 0 mematikan perilaku default flex-item ("min-width: auto")
       yang membuat .main-content ikut mengunci lebar mengikuti elemen anak
       paling lebar (mis. grafik/chart di dashboard yang sempat melebar saat
       sidebar disembunyikan). Tanpa ini, saat sidebar dimunculkan kembali,
       .main-content tidak mau menyusut ke lebar semula walau margin-left
       sudah dikembalikan -> halaman terlihat "melebar". Berlaku untuk semua
       ukuran layar (sebelumnya cuma diterapkan di media query HP). */
    min-width: 0;
    margin-left: 250px;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    transition: margin-left .25s ease;
}

/* Sidebar disembunyikan (toggle manual) -> halaman menyesuaikan lebar penuh */
body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
body.sidebar-collapsed .main-content { margin-left: 0; }

.topbar {
    background: #fff;
    padding: 4px 26px;
    display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    position: sticky; top: 0; z-index: 1020;
}

.topbar .page-title { font-weight: 700; font-size: 1.15rem; }
.topbar .page-subtitle { font-size: 0.82rem; color: var(--ink-soft); }

.sidebar-toggle-btn {
    display: inline-flex;
    border: none; background: #f1f1fb; width: 40px; height: 40px;
    border-radius: 10px; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .15s ease;
}
.sidebar-toggle-btn:hover { background: #e6e6fb; }

.user-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 14px 6px 6px;
    border-radius: 30px;
    background: #f5f6fb;
    cursor: pointer;
}

/* ---------- Item pulldown menu profil user (efek hover meniru gaya side menu) ---------- */
.dropdown-menu .dropdown-item {
    padding: 8px 12px;
    font-size: 0.83rem;
    font-weight: 500;
    border-radius: 12px;
    margin: 0 4px;
    width: calc(100% - 8px);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all .18s ease;
}
.dropdown-menu .dropdown-item i { font-size: 0.9rem; width: 18px; text-align: center; }
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(124,58,237,0.7);
}
.dropdown-menu .dropdown-item.text-danger:hover,
.dropdown-menu .dropdown-item.text-danger:focus {
    background: linear-gradient(135deg, #f76b6b, #dc3545);
    color: #fff !important;
    box-shadow: 0 8px 18px -8px rgba(220,53,69,0.6);
}

/* ---------- Badge jumlah user online (di header, sebelah kiri avatar) ---------- */
.online-users-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #fb5779, #ef4468);
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 7px 11px;
    border-radius: 12px;
    line-height: 1;
    box-shadow: 0 4px 10px -4px rgba(239,68,104,0.55);
}
.online-users-chip i { font-size: 0.95rem; }
.online-users-chip::after {
    content: "";
    position: absolute;
    left: 12px;
    bottom: -5px;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #ef4468;
}
.avatar-circle {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-1), var(--brand-3));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}
.avatar-circle.lg { width: 68px; height: 68px; font-size: 1.4rem; }

.content-area { padding: 26px; flex: 1; }

/* ---------- Cards & widgets ---------- */
.card-modern {
    background: #fff;
    border: none;
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-soft);
}

.stat-card {
    border-radius: var(--card-radius);
    padding: 22px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}
.stat-card.grad-1 { background: linear-gradient(135deg,#4f46e5,#7c3aed); }
.stat-card.grad-2 { background: linear-gradient(135deg,#06b6d4,#3b82f6); }
.stat-card.grad-3 { background: linear-gradient(135deg,#f97316,#ec4899); }
.stat-card.grad-4 { background: linear-gradient(135deg,#10b981,#06b6d4); }
.stat-card.grad-5 { background: linear-gradient(135deg,#059669,#10b981); }
.stat-card.grad-6 { background: linear-gradient(135deg,#dc2626,#f97316); }

.stat-card.sm { padding: clamp(8px, 1.6vw, 16px) clamp(8px, 1.4vw, 14px); }
.stat-card.sm .stat-icon {
    width: clamp(20px, 3vw, 30px);
    height: clamp(20px, 3vw, 30px);
    font-size: clamp(0.65rem, 1.6vw, 0.9rem);
    margin-bottom: clamp(4px, 1vw, 8px);
    border-radius: 8px;
}
.stat-card.sm .stat-value {
    font-size: clamp(0.7rem, 2vw, 1.05rem);
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat-card.sm .stat-label {
    font-size: clamp(0.52rem, 1.2vw, 0.72rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.admin-section-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg,#1e1b4b,#4c1d95);
    color: #fff; padding: 6px 14px; border-radius: 30px;
    font-size: 0.76rem; font-weight: 700; letter-spacing: 0.03em;
}

.jabatan-bar-row { margin-bottom: 12px; }
.jabatan-bar-track {
    background: #f0f0f7; border-radius: 30px; height: 10px; overflow: hidden; margin-top: 4px;
}
.jabatan-bar-fill {
    height: 100%; border-radius: 30px;
    background: linear-gradient(90deg, var(--brand-1), var(--brand-3));
}

/* ---------- User search combobox (Cetak Jurnal User) ---------- */
.user-search-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 14px 34px -10px rgba(31,41,55,0.25);
    z-index: 1040;
    border: 1px solid #eceefc;
}
.user-search-dropdown.show { display: block; }
.user-search-item {
    padding: 10px 14px;
    font-size: 0.87rem;
    cursor: pointer;
    border-bottom: 1px solid #f4f4fb;
}
.user-search-item:last-child { border-bottom: none; }
.user-search-item:hover { background: #f5f5ff; color: var(--brand-1); }
.user-search-empty {
    padding: 14px; text-align: center; color: var(--ink-soft); font-size: 0.85rem;
}

/* ---------- App Footer ---------- */
.app-footer {
    text-align: center;
    padding: 4px 26px;
    color: var(--ink-soft);
    font-size: 0.78rem;
    border-top: 1px solid #eceefc;
    background: #fff;
}

/* ---------- Sidebar Logout Button ---------- */
.btn-sidebar-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(220, 38, 38, 0.15);
    color: #ef4444;
    border: none;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .18s ease;
}
.btn-sidebar-logout:hover {
    background: #dc2626;
    color: #fff;
}
.stat-card .stat-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin-bottom: 14px;
}
.stat-card .stat-value { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.stat-card .stat-label { opacity: 0.9; font-size: 0.84rem; margin-bottom: 0; }

.menu-tile {
    background: #fff;
    border-radius: var(--card-radius);
    padding: 16px;
    text-decoration: none;
    color: var(--ink);
    display: block;
    box-shadow: var(--shadow-soft);
    transition: all .2s ease;
    height: 100%;
}
.menu-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); color: var(--ink); }
.menu-tile .tile-icon {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: #fff; margin-bottom: 10px;
}
.menu-tile h6 { font-weight: 700; margin-bottom: 3px; font-size: 0.86rem; }
.menu-tile p { font-size: 0.74rem; color: var(--ink-soft); margin-bottom: 0; }

/* ---------- Tables ---------- */
.table-modern { border-collapse: separate; border-spacing: 0; }
.table-modern thead th {
    background: #f8f8fd;
    color: var(--ink-soft);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    border: none;
    padding: 13px 16px;
}
.table-modern tbody td { padding: 13px 16px; vertical-align: middle; border-bottom: 1px solid #f0f0f7; font-size: 0.9rem; }
.table-modern tbody tr:last-child td { border-bottom: none; }

/* ---------- Card-list "Jurnal Terbaru" versi HP (pengganti tabel di layar <768px) ----------
   Elemen ini hanya dirender di dalam wrapper .d-md-none, jadi otomatis
   tidak pernah tampil di layar tablet/desktop (>=768px). */
.dash-mobile-card {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f7;
}
.dash-mobile-card:last-child { border-bottom: none; padding-bottom: 0; }
.dash-mobile-card:first-child { padding-top: 0; }
.dash-mobile-card-media { flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
.dash-mobile-card-media img,
.dash-mobile-card-media-empty {
    width: 56px; height: 56px;
    border-radius: 10px;
    object-fit: cover;
}
.dash-mobile-card-media-empty {
    display: flex; align-items: center; justify-content: center;
    background: #f5f6fb; color: var(--ink-soft); font-size: 1.1rem;
}
.dash-mobile-card-body { min-width: 0; flex: 1; }
.dash-mobile-card-body .fw-semibold { font-size: 0.92rem; }
.table-modern tbody tr:hover { background: #fafaff; }

.badge-soft { padding: 6px 12px; border-radius: 30px; font-weight: 600; font-size: 0.74rem; }
.badge-soft.admin { background: #ede9fe; color: #6d28d9; }
.badge-soft.supervisor { background: #ffedd5; color: #c2410c; }
.badge-soft.user { background: #dbeafe; color: #1d4ed8; }
.badge-soft.aktif { background: #d1fae5; color: #047857; }
.badge-soft.nonaktif { background: #fee2e2; color: #b91c1c; }
.badge-soft.online { background: #d1fae5; color: #059669; }
.badge-soft.offline { background: #fee2e2; color: #dc2626; }

.journal-thumb {
    width: 52px; height: 52px; border-radius: 10px; object-fit: cover;
}

.btn-icon-action {
    width: 34px; height: 34px; border-radius: 9px; border: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem; margin-right: 4px;
}
.btn-icon-action.edit { background: #eef2ff; color: #4338ca; }
.btn-icon-action.delete { background: #fee2e2; color: #dc2626; }
.btn-icon-action.view { background: #ecfeff; color: #0e7490; }
.btn-icon-action.print { background: #fef3c7; color: #b45309; }

.form-label-modern { font-weight: 600; font-size: 0.86rem; margin-bottom: 6px; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.empty-state i { font-size: 3rem; opacity: 0.35; margin-bottom: 14px; display:block; }

.overlay-backdrop {
    display: none;
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    z-index: 1025;
}

/* ---------- Bottom navigation bar (khas aplikasi mobile) ----------
   Default: disembunyikan. Baru dimunculkan lewat @media (max-width:991px)
   di bawah, jadi TIDAK berpengaruh ke tampilan desktop/komputer. */
.bottom-nav {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1030;
    background: #fff;
    border-top: 1px solid #eceef7;
    box-shadow: 0 -4px 20px rgba(31,41,55,0.08);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    align-items: stretch;
    justify-content: space-around;
}
.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: none;
    color: var(--ink-soft);
    font-size: 0.66rem;
    font-weight: 600;
    padding: 6px 2px;
    border-radius: 12px;
    text-decoration: none;
    line-height: 1.1;
}
.bottom-nav-item i { font-size: 1.15rem; }
.bottom-nav-item.active,
.bottom-nav-item:active { color: var(--brand-1); }
.bottom-nav-item.active { background: #f0f0ff; }

/* ---------- Photo preview ---------- */
.photo-drop {
    border: 2px dashed #d7d7ea;
    border-radius: 14px;
    padding: 22px;
    text-align: center;
    background: #fafbff;
    cursor: pointer;
    transition: all .2s;
}
.photo-drop:hover { border-color: var(--brand-1); background: #f5f5ff; }
.photo-preview-img { max-width: 100%; max-height: 220px; border-radius: 12px; margin-top: 12px; }

/* ---------- Kamera Wajah (Rekam Wajah & Presensi) ---------- */
.face-cam-wrap {
    position: relative;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 20px;
    overflow: hidden;
    background: #10121c;
    box-shadow: var(--shadow-soft);
}
.face-cam-wrap video, .face-cam-wrap .face-cam-placeholder {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.face-cam-wrap .face-cam-placeholder {
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.5); font-size: 3rem; background: #10121c;
}
.face-cam-oval {
    position: absolute; inset: 8%;
    border: 3px solid rgba(255,255,255,0.55);
    border-radius: 50% / 55%;
    pointer-events: none;
    transition: border-color .2s;
}
.face-cam-oval.ok { border-color: #22c55e; }
.face-cam-oval.warn { border-color: #f59e0b; }
.face-cam-status {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 10px 14px;
    font-size: 0.8rem; font-weight: 600; text-align: center; color: #fff;
    background: linear-gradient(0deg, rgba(0,0,0,0.65), rgba(0,0,0,0));
}
.face-cam-actions { max-width: 380px; margin: 16px auto 0; }

/* Halaman Presensi: layar kamera dibuat full menempel ke tepi frame kartu
   pada sisi atas, kanan, dan kiri (kartu induknya diberi class overflow-hidden) */
.face-cam-wrap-full {
    width: calc(100% + 3rem);
    max-width: calc(100% + 3rem);
    margin: -1.5rem -1.5rem 0;
    border-radius: 0 0 20px 20px;
}

/* Halaman Presensi: pada layout desktop, layar kamera dibuat utuh 1:1
   di tengah dan dibatasi tinggi viewport agar tidak terpotong atas/bawah layar */
@media (min-width: 992px) {
    .face-cam-wrap-full {
        width: min(58vh, 100%);
        max-width: 480px;
        max-height: 58vh;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
        border-radius: 20px;
    }
}

/* Tombol Datang (hijau sage) & Pulang (merah sage) di halaman Presensi */
.btn-sage-datang {
    background: #7C9473;
    border: none;
    color: #fff;
    border-radius: 12px;
    padding: 12px 20px;
    font-weight: 600;
    transition: all .2s ease;
    box-shadow: 0 10px 22px -10px rgba(124,148,115,0.55);
}
.btn-sage-datang:hover { background: #6b8263; transform: translateY(-2px); box-shadow: 0 16px 28px -10px rgba(124,148,115,0.6); color: #fff; }
.btn-sage-datang:disabled { opacity: .55; transform: none; box-shadow: none; }

.btn-sage-pulang {
    background: #B5675D;
    border: none;
    color: #fff;
    border-radius: 12px;
    padding: 12px 20px;
    font-weight: 600;
    transition: all .2s ease;
    box-shadow: 0 10px 22px -10px rgba(181,103,93,0.55);
}
.btn-sage-pulang:hover { background: #a05850; transform: translateY(-2px); box-shadow: 0 16px 28px -10px rgba(181,103,93,0.6); color: #fff; }
.btn-sage-pulang:disabled { opacity: .55; transform: none; box-shadow: none; }

/* Tombol Batalkan (merah) di bawah kamera scan wajah, efek hover disamakan
   dengan efek hover tombol merah lain yang sudah ada di sistem */
#btnBatalPresensi {
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all .2s ease;
}
#btnBatalPresensi:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(220,53,69,0.6);
    color: #fff;
}

/* Notifikasi melayang (toast) untuk validasi jam presensi Datang/Pulang */
.presensi-toast-wrap {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 92%;
    max-width: 380px;
}
.presensi-toast {
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 12px 30px -10px rgba(0,0,0,0.3);
    font-size: 0.85rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-left: 4px solid #6b7280;
    animation: presensiToastIn .25s ease;
}
.presensi-toast.warn { border-left-color: #d97706; }
.presensi-toast.danger { border-left-color: #dc2626; }
.presensi-toast.confirm { border-left-color: #2563eb; }
.presensi-toast i { font-size: 1.1rem; margin-top: 1px; }
.presensi-toast-body { flex: 1; }
.presensi-toast-actions { display: flex; gap: 8px; margin-top: 10px; }
.presensi-toast-actions button {
    border: none; border-radius: 8px; padding: 6px 14px; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.presensi-toast-actions .btn-toast-ya { background: #2563eb; color: #fff; }
.presensi-toast-actions .btn-toast-batal { background: #e5e7eb; color: #374151; }
@keyframes presensiToastIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.face-enrolled-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 30px; font-weight: 600; font-size: 0.8rem;
    background: #d1fae5; color: #047857;
}
.face-not-enrolled-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 30px; font-weight: 600; font-size: 0.8rem;
    background: #fee2e2; color: #b91c1c;
}
.presensi-thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    /* Sidebar dibuat berhenti tepat di atas bottom-nav (bukan sampai dasar
       layar) supaya kotak profil & tombol Keluar di bagian bawah sidebar
       tidak tertutup bar menu bawah. Area scroll menu (.sidebar-scroll-area)
       otomatis menyesuaikan tingginya karena sidebar tetap flex column. */
    .sidebar { bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); transform: translateX(-100%); }
    .sidebar.show { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.4); }
    .main-content { margin-left: 0; }
    .sidebar-toggle-btn { display: inline-flex; }
    .overlay-backdrop.show { display: block; }

    /* Tampilkan bottom navigation bar & beri ruang di bawah konten +
       footer supaya tidak tertutup bar (hanya berlaku di HP/tablet <992px). */
    .bottom-nav { display: flex; }
    .content-area { padding-bottom: calc(var(--bottom-nav-h) + 20px + env(safe-area-inset-bottom, 0px)); }
    .app-footer { margin-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 767px) {
    /* .main-content adalah flex item dari .app-shell (display:flex). Secara
       default flex item punya "min-width: auto" yang membuatnya ikut melebar
       mengikuti elemen anak yang lebar (mis. .print-sheet 900px di halaman
       Cetak Jurnal), sehingga SELURUH HALAMAN ikut melebar melebihi layar HP
       walau .print-preview-window sudah diberi scroll sendiri. min-width:0
       di sini mematikan perilaku itu khusus di HP, supaya body tetap pas
       selebar layar dan hanya area print preview saja yang bisa di-scroll
       horizontal. Tidak memengaruhi tampilan desktop karena di dalam media
       query ini. */
    .main-content { min-width: 0; }

    .auth-card { grid-template-columns: 1fr; min-height: auto; }
    .auth-visual { display: none; }
    .auth-form-side { padding: 34px 24px; }
    .content-area { padding: 16px 16px 84px; }
    .topbar { padding: 4px 16px; }

    /* Pastikan ukuran font dasar body tidak terlalu kecil untuk dibaca
       di layar HP (khusus di dalam media query ini, tidak memengaruhi
       tampilan di monitor komputer/desktop). */
    body {
        font-size: 16px;
    }

    /* Kunci font-size input ke 16px khusus di layar HP agar Safari/iOS
       tidak otomatis zoom saat field difokus (auto-zoom terpicu jika
       font-size di bawah 16px). Tidak memengaruhi tampilan desktop
       karena berada di dalam media query ini. */
    input.form-control,
    select.form-select,
    textarea.form-control,
    .form-control-modern,
    .form-select-modern {
        font-size: 16px !important;
    }

    /* Area upload foto (drop-zone) dibuat lebih tinggi & lega khusus di HP
       supaya nyaman disentuh jari. Tampilan desktop tidak berubah karena
       berada di dalam media query ini. */
    .photo-drop {
        padding: 32px 20px;
        min-height: 120px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* ---------- Form filter jurnal: tombol Cari & Reset full-width + mudah
       disentuh khusus di HP (journal_view.php). Di desktop tombol ini tetap
       tampil seperti semula (icon-only, sejajar) karena aturan ini hanya
       berlaku di dalam media query max-width:767px. ---------- */
    .filter-actions {
        flex-direction: column;
    }
    .filter-actions .btn {
        width: 100%;
        min-height: 46px;
        font-size: 0.92rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .filter-actions .filter-btn-reset {
        order: 2;
    }

    /* ---------- Card-list jurnal versi HP (journal_view.php) ----------
       Elemen ini hanya dirender di dalam wrapper .d-md-none di halaman,
       jadi otomatis tidak pernah tampil di layar tablet/desktop. */
    .journal-mobile-card {
        border: 1px solid #f0f0f7;
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 12px;
    }
    .journal-mobile-card:last-child { margin-bottom: 0; }
    .journal-mobile-card-top {
        display: flex;
        gap: 12px;
        margin-bottom: 10px;
    }
    .journal-mobile-card-media {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .journal-mobile-thumb {
        width: 64px;
        height: 64px;
        border-radius: 10px;
        object-fit: cover;
        display: block;
    }
    .journal-mobile-thumb-empty {
        background: #f5f6fb;
        color: var(--ink-soft);
        font-size: 1.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .journal-mobile-thumb-second { display: block; }
    .journal-mobile-card-head { min-width: 0; flex: 1; }
    .journal-mobile-card-title {
        font-weight: 700;
        font-size: 0.96rem;
        line-height: 1.3;
        margin-bottom: 3px;
    }
    .journal-mobile-card-date {
        font-size: 0.8rem;
        color: var(--ink-soft);
    }
    .journal-mobile-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 14px;
        font-size: 0.82rem;
        color: var(--ink-soft);
        margin-bottom: 8px;
    }
    .journal-mobile-card-meta-item i { margin-right: 3px; }
    .journal-mobile-card-desc {
        font-size: 0.86rem;
        color: #4b4b5a;
        margin-bottom: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .journal-mobile-card-actions {
        display: flex;
        gap: 8px;
    }
    .journal-mobile-action-form { flex: 1; display: flex; }
    .journal-mobile-action-btn {
        flex: 1;
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 0.84rem;
        font-weight: 600;
        border-radius: 10px;
    }
    .journal-mobile-action-delete {
        width: 100%;
        color: #dc2626;
    }

    /* ---------- Preview halaman cetak (journal_print.php,
       journal_print_admin.php) khusus di HP: FRAME preview (.print-preview-window)
       dibuat mengikuti lebar layar gadget (full width, seperti kartu-kartu lain
       di halaman), sedangkan ISI kertasnya (.print-sheet) tetap dikunci lebar
       normal ukuran kertas (900px, tidak gepeng/menyusut). Karena isinya lebih
       lebar dari frame di HP, otomatis muncul scrollbar horizontal di dalam
       frame untuk menggeser lihat seluruh isi kertas. Tidak mengubah tampilan
       preview di desktop karena berada di dalam media query ini. ---------- */
    .print-preview-window {
        width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y pinch-zoom;
    }
    .print-preview-window .print-sheet {
        width: 900px;
        max-width: none;
    }

    /* ---------- Area sentuh tombol aksi (edit/hapus/icon) khusus di HP ----------
       .btn-icon-action dipakai di tabel journal_view.php, user_management.php,
       dan position_management.php. Ukuran asli 34x34px (tetap dipakai apa
       adanya di desktop) diperbesar jadi standar tap target mobile (44x44px)
       hanya di dalam media query ini, jadi tampilan desktop tidak berubah. */
    .btn-icon-action {
        width: 44px;
        height: 44px;
        font-size: 0.95rem;
    }

    /* Tombol Edit/Hapus di card-list mobile (journal_view.php) juga
       dipastikan memenuhi tinggi minimal 44px sebagai tombol aksi. */
    .journal-mobile-action-btn {
        min-height: 44px;
    }

    /* ---------- Halaman Perijinan khusus HP (perijinan.php) ----------
       Tombol "Kirim Pengajuan Perijinan" dibuat full-width & tinggi
       standar tap target mobile. Tampilan desktop tidak berubah karena
       aturan ini hanya berlaku di dalam media query max-width:767px. */
    .perijinan-submit-btn {
        width: 100%;
        min-height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ---------- Kartu riwayat perijinan versi HP (perijinan.php) ----------
       Elemen ini hanya dirender di dalam wrapper .d-md-none di halaman,
       jadi otomatis tidak pernah tampil di layar tablet/desktop. Meniru
       gaya .journal-mobile-card supaya konsisten dengan halaman lain. */
    .perijinan-mobile-card {
        border: 1px solid #f0f0f7;
        border-radius: 14px;
        padding: 14px;
        margin-bottom: 12px;
    }
    .perijinan-mobile-card:last-child { margin-bottom: 0; }
    .perijinan-mobile-card-top {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
    }
    .perijinan-mobile-card-title {
        font-weight: 700;
        font-size: 0.96rem;
        line-height: 1.3;
    }
    .perijinan-mobile-card-date {
        font-size: 0.8rem;
        color: var(--ink-soft);
        white-space: nowrap;
        flex-shrink: 0;
    }
    .perijinan-mobile-card-meta {
        font-size: 0.8rem;
        color: var(--ink-soft);
        margin-bottom: 8px;
    }
    .perijinan-mobile-card-desc {
        font-size: 0.86rem;
        color: #4b4b5a;
        margin-bottom: 12px;
        white-space: pre-line;
    }
    .perijinan-mobile-card-doc {
        width: 100%;
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-weight: 600;
    }
}

/* ---------- Format tabel cetak jurnal (PELAKSANAAN / DETIL KEGIATAN / FOTO KEGIATAN) ---------- */
.print-journal-table th { text-transform: uppercase; font-weight: 700; }
.print-journal-table td { vertical-align: top; }

/* Garis tabel cetak berwarna hitam (Cetak Jurnal, Cetak Jurnal User, Cetak Presensi).
   Ketiga halaman memakai class .print-journal-table, jadi cukup diatur di sini.
   Warna isian header (abu-abu muda) sengaja tidak diubah agar teks tetap terbaca. */
.print-journal-table,
.print-journal-table > thead,
.print-journal-table > tbody,
.print-journal-table > tfoot,
.print-journal-table tr,
.print-journal-table th,
.print-journal-table td {
    --bs-table-border-color: #000;
    border-color: #000 !important;
}
.print-foto-slot:not(:last-child) {
    border-bottom-color: #000;
}

.print-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.print-detail-list li {
    margin-bottom: 10px;
    line-height: 1.4;
}
.print-detail-list li:last-child { margin-bottom: 0; }
.print-detail-list li strong { display: inline; }

.print-foto-cell {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.print-foto-slot {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    min-height: 158px;
}
.print-foto-slot:not(:last-child) {
    border-bottom: 1px solid #dee2e6;
}
.print-foto-slot img {
    max-width: 100%;
    max-height: 228px;
    object-fit: contain;
    border-radius: 4px;
}

/* ---------- Jendela Preview Dokumen Cetak (bisa di-scroll, seperti tampilan tercetak) ---------- */
.print-preview-window {
    background: #f0f0f5;
    border-radius: 14px;
    padding: 24px;
    max-height: 78vh;
    overflow-y: auto;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.06);
}
.print-preview-window .print-sheet {
    background: #fff;
    max-width: 900px;
    margin: 0 auto;
    padding: 32px;
    border-radius: 6px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.12);
}

/* ---------- Lightbox foto jurnal (self-contained, tanpa library luar) ----------
   Dipakai di dashboard.php & journal_view.php lewat #photoLightbox
   (lihat assets/js/photo-lightbox.js). Sebelumnya duplikat sebagai inline
   <style> di kedua halaman tsb, sekarang digabung jadi satu di sini. */
.photo-lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 15, 20, 0.9);
    align-items: center;
    justify-content: center;
}
.photo-lightbox-overlay.is-open { display: flex; }
.photo-lightbox-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.photo-lightbox-stage img {
    max-width: 90vw;
    max-height: 82vh;
    transform: scale(1);
    transition: transform .15s ease;
    cursor: grab;
    user-select: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    border-radius: 6px;
    touch-action: none;
}
.photo-lightbox-stage img.is-dragging { cursor: grabbing; transition: none; }
.photo-lightbox-stage img.is-rotated-90 { max-width: 82vh; max-height: 90vw; }
.photo-lightbox-caption {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
    font-size: 0.85rem;
    opacity: .85;
    padding: 0 16px;
}
.photo-lightbox-toolbar {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    gap: 8px;
    z-index: 2001;
}
.photo-lightbox-toolbar button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease;
}
.photo-lightbox-toolbar button:hover { background: rgba(255,255,255,0.25); }
.photo-lightbox-toolbar .photo-lightbox-close { background: rgba(220,53,69,0.85); }
.photo-lightbox-toolbar .photo-lightbox-close:hover { background: #dc3545; }

/* ---------- Enroll Pengaturan Tugas User (kotak daftar anggota/non-anggota) ---------- */
.enroll-list-box { height: 420px; overflow-y: auto; border: 1.5px solid #c7cbe0; border-radius: 12px; }
.enroll-list-box table thead th { border-bottom: 2px solid #c7cbe0; }
.enroll-list-box table tbody td { border-bottom: 1px solid #dde0ee !important; }
.enroll-list-box .form-check-input { border: 1.5px solid #8c93b8; }
#btnRemove, #btnTambah { padding: 12px 20px; border-radius: 12px; font-weight: 600; }

/* Efek hover tombol Remove & Tambah di halaman Enroll Tugas User,
   disamakan dengan efek hover tombol merah/hijau yang sudah ada
   di sistem (naik sedikit + bayangan warna tombol). */
#btnRemove, #btnTambah {
    transition: all .2s ease;
}
#btnRemove:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(220,53,69,0.6);
    color: #fff;
}
#btnTambah:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(25,135,84,0.6);
    color: #fff;
}

/* ---------- Print styles ---------- */
@media print {
    /* Margin cetak 1cm di semua sisi (atas, bawah, kiri, kanan).
       Ukuran kertas sengaja TIDAK dipaksa di sini, jadi mengikuti pilihan
       "Paper size" yang dipilih user di dialog print browser (A4, Letter, dst). */
    @page {
        margin: 1cm;
    }

    .no-print { display: none !important; }
    .main-content { margin-left: 0 !important; }
    body { background: #fff !important; overflow: visible !important; }
    .print-preview-window {
        background: #fff !important;
        padding: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        box-shadow: none !important;
    }
    .print-sheet {
        box-shadow: none !important;
        padding: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* ---------- Jendela Peringatan: GPS Presensi Di Luar Area ---------- */
.gps-alert-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(20, 22, 34, 0.55);
    backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.gps-alert-backdrop.show { display: flex; }

.gps-alert-box {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 22px;
    padding: 32px 28px 26px;
    text-align: center;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.4);
    transform: translateY(14px) scale(0.97);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.gps-alert-backdrop.show .gps-alert-box {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.gps-alert-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #b45309;
    font-size: 1.7rem;
}

.gps-alert-title {
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 6px;
    color: var(--ink);
}

.gps-alert-desc {
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 18px;
}

.gps-alert-meta {
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
}
.gps-alert-meta-item {
    flex: 1;
    background: var(--bg-soft);
    border-radius: 14px;
    padding: 12px 10px;
}
.gps-alert-meta-label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    margin-bottom: 4px;
}
.gps-alert-meta-value {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
}
.gps-alert-meta-item.over .gps-alert-meta-value { color: #dc2626; }

.gps-alert-box .btn-gradient {
    margin-top: 20px;
}

/* ---------- Jendela Info: Presensi Datang Belum Bisa Dilakukan (sebelum
   jam batas awal), desain minimalis sama seperti jendela GPS di atas ---------- */
.belum-waktu-alert-icon {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #2563eb;
}

/* ---------- Jendela Info: Presensi Datang Sudah Dilakukan Hari Ini
   (menggantikan alert() bawaan browser), desain minimalis sama seperti
   jendela GPS/keterlambatan di atas ---------- */
.sudah-presensi-alert-icon {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #059669;
}
#sudahPresensiAlertBackdrop .btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(5, 150, 105, 0.5);
}

/* ---------- Jendela Info: Keterlambatan Presensi Datang (muncul setelah
   scan wajah berhasil, desain minimalis sama seperti jendela GPS di atas) ---------- */
.telat-alert-icon {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #b45309;
}

/* Tombol OK (hijau) di jendela info keterlambatan, efek hover disamakan
   dengan efek hover tombol hijau lain yang sudah ada di sistem */
#telatAlertBackdrop .btn-success {
    margin-top: 20px;
    transition: all .2s ease;
}
#telatAlertBackdrop .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(25,135,84,0.6);
    color: #fff;
}

/* ---------- Jendela Info: Presensi Pulang Berhasil (muncul setelah scan
   wajah presensi PULANG berhasil), desain minimalis sama seperti jendela
   info lainnya di atas ---------- */
#pulangBerhasilAlertBackdrop .btn-success {
    margin-top: 20px;
    transition: all .2s ease;
}
#pulangBerhasilAlertBackdrop .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(25,135,84,0.6);
    color: #fff;
}

/* ---------- Jendela Konfirmasi: Presensi Pulang Lebih Awal ---------- */
.pulang-awal-confirm-icon {
    background: #dbeafe;
    color: #2563eb;
}

/* Tombol "Ya, Lanjut" (hijau) dan "Batal" (merah): ukuran (padding, radius,
   ketebalan huruf) disamakan, efek hover disamakan dengan efek hover
   tombol hijau/merah lain yang sudah ada di sistem */
#pulangAwalConfirmBackdrop .btn-success,
#pulangAwalConfirmBackdrop .btn-danger {
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all .2s ease;
}
#pulangAwalConfirmBackdrop .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(25,135,84,0.6);
    color: #fff;
}
#pulangAwalConfirmBackdrop .btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(220,53,69,0.6);
    color: #fff;
}

/* ---------- Jendela Konfirmasi: Presensi Pulang tanpa Presensi Datang ----------
   Tombol "Lanjut" (hijau) dan "Batal" (merah): ukuran (padding, radius,
   ketebalan huruf) serta efek hover disamakan persis dengan tombol
   Ya/Batal pada jendela Konfirmasi Presensi Pulang Lebih Awal di atas */
#belumDatangConfirmBackdrop .btn-success,
#belumDatangConfirmBackdrop .btn-danger {
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all .2s ease;
}
#belumDatangConfirmBackdrop .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(25,135,84,0.6);
    color: #fff;
}
#belumDatangConfirmBackdrop .btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(220,53,69,0.6);
    color: #fff;
}

/* ---------- Jendela Info: Presensi Datang Tidak Bisa Dilakukan (karena
   Presensi Pulang sudah tercatat), desain minimalis sama seperti jendela
   info lainnya di atas ---------- */
.tidak-bisa-datang-alert-icon {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #b45309;
}
#tidakBisaDatangAlertBackdrop .btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(180, 83, 9, 0.5);
}

/* ---------- Jendela Info: Wajah Tidak Cocok (menggantikan alert() bawaan
   browser saat scan presensi Datang/Pulang gagal dikenali), desain
   minimalis sama seperti jendela GPS/keterlambatan di atas ---------- */
.wajah-tidak-cocok-alert-icon {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #dc2626;
}
#wajahTidakCocokAlertBackdrop .btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(220, 38, 38, 0.5);
}

/* ---------- Jadwal Presensi: daftar Hari Aktif & Jam per Hari (tipe Harian) ---------- */
.jadwal-hari-item {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 8px;
}
.jadwal-hari-item:last-child { margin-bottom: 0; }

/* ---------- Modal Konfirmasi Status Jadwal Presensi (minimalis) ---------- */
.confirm-status-modal {
    border: none;
    border-radius: 20px;
    overflow: hidden;
}
.confirm-status-icon {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    background: #eef2ff;
    color: var(--brand-1);
}
.confirm-status-icon.is-hide {
    background: #fef2f2;
    color: #dc2626;
}
#modalKonfirmasiStatus .btn-gradient {
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    border: none;
    color: #fff;
}

/* Tombol Batal di modal Konfirmasi Status Jadwal Presensi (hijau), efek hover
   disamakan dengan efek hover tombol hijau lain yang sudah ada di sistem */
#modalKonfirmasiStatus .btn-success {
    transition: all .2s ease;
}
#modalKonfirmasiStatus .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(25,135,84,0.6);
    color: #fff;
}

/* Bootstrap 5 secara default memberi margin ke tiap tombol di dalam
   .modal-footer (dari variabel --bs-modal-footer-gap). Kalau digabung
   dengan tombol lebar w-50, total lebarnya jadi lebih dari 100% lebar
   modal, sehingga tombol kedua "wrap" (turun ke baris baru / bertumpuk)
   -- terutama terlihat di layar sempit/mobile. Di-nol-kan di sini dan
   diganti gap, supaya tombol Ya/Batal selalu sejajar satu baris dan
   sama besar. Pakai selector class .confirm-status-modal supaya
   berlaku ke SEMUA modal konfirmasi hapus (bukan cuma sebagian id),
   termasuk modal hapus Perijinan, Login Background, Jurnal, dan
   Jenis Tugas yang sebelumnya belum ke-cover. */
.confirm-status-modal .modal-footer {
    flex-wrap: nowrap;
    gap: 10px;
}
.confirm-status-modal .modal-footer > * {
    margin: 0;
}
/* Tombol Batal & Ya di semua modal konfirmasi hapus: lebar sama (w-50
   dari HTML) + tinggi disamakan lewat padding/border-radius/font-weight
   yang seragam, supaya kedua tombol identik ukurannya. */
.confirm-status-modal .modal-footer .btn {
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    transition: all .2s ease;
}
/* Efek hover disamakan dengan efek hover tombol hijau/merah yang sudah
   ada di sistem (naik sedikit + bayangan warna tombol). */
.confirm-status-modal .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(25,135,84,0.6);
    color: #fff;
}
.confirm-status-modal .btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(220,53,69,0.6);
    color: #fff;
}

/* ---------- Modal Peringatan Validasi Tanggal Perijinan (minimalis premium) ---------- */
.perijinan-warning-modal {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 48px -12px rgba(0,0,0,0.25);
}
.perijinan-warning-icon {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    background: #fff7ed;
    color: #f59e0b;
}
.perijinan-warning-modal .btn-gradient {
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    border: none;
    color: #fff;
    border-radius: 12px;
    padding: 10px 20px;
    font-weight: 600;
    transition: all .2s ease;
}
.perijinan-warning-modal .btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -10px rgba(99,102,241,0.5);
    color: #fff;
}