/* =============================================
   Akun Pusat Dispendik Pamekasan
   Diselaraskan dengan desain admin Pendidikan Pamekasan
   ============================================= */

:root {
    --primary: #1a4f8a;
    --primary-dark: #0f3462;
    --primary-light: #2563b0;

    --text-primary: #1a2540;
    --text-secondary: #5a6a7e;
    --text-muted: #94a3b8;

    --border: #e2e8f0;

    --success-bg: #dcfce7;
    --warning-bg: #fef3c7;
    --danger: #dc2626;
    --danger-bg: #fee2e2;
    --info-bg: #e0f2fe;

    --radius: 10px;
    --radius-sm: 6px;
    --radius-lg: 16px;

    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body { font-family: var(--font-body); }

/* Sebagian browser (Firefox teramati) kadang salah kira glyph Font
   Awesome tertentu (mis. fa-fingerprint) sebagai emoji berwarna, bukan
   simbol monokrom biasa. font-variant-emoji: text memaksa presentasi
   teks/monokrom -- tidak berpengaruh ke ikon yang sudah tampil normal. */
.fas, .far, .fab, .fa { font-variant-emoji: text; }

.mb-16 { margin-bottom: 16px; }

.otp-input {
    text-align: center; font-size: 26px; letter-spacing: 12px; font-weight: 700;
    font-family: var(--font-display, monospace);
    padding: 12px 10px 12px 20px;
}

.secret-box {
    background:#f8fafc;border:1px dashed var(--border);border-radius:8px;padding:10px 12px;
    font-family:monospace;font-size:13px;letter-spacing:1px;text-align:center;word-break:break-all;
    margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:8px;
}

#qrcode {
    display:flex;justify-content:center;padding:16px;background:#fff;
    border-radius:12px;border:1px solid var(--border);margin:14px 0;
}

/* FORM */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.3px; }
.form-control {
    padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: #fff; color: var(--text-primary); font-size: 13.5px;
    transition: border-color 0.18s, box-shadow 0.18s; outline: none; width: 100%;
    font-family: var(--font-body);
}
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26, 79, 138, 0.1); }

.show-pwd {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 14px;
}
.pwd-wrap { position: relative; }
.pwd-wrap .form-control { padding-right: 36px; }

/* ALERT */
.alert {
    padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13.5px;
    display: flex; align-items: flex-start; gap: 10px; border: 1px solid;
}
.alert-danger { background: var(--danger-bg); color: #991b1b; border-color: #fecaca; }
.alert-info { background: var(--info-bg); color: #075985; border-color: #bae6fd; }
.alert-warning { background: var(--warning-bg); color: #92400e; border-color: #fde68a; }
.alert-success { background: var(--success-bg); color: #166534; border-color: #bbf7d0; }

.page-content { padding: 28px 24px; max-width: 1000px; margin: 0 auto; }
.page-title {
    font-family: var(--font-display); font-size: 19px; font-weight: 700;
    color: var(--text-primary); margin-bottom: 4px;
}
.page-subtitle { color: var(--text-muted); font-size: 13px; margin-bottom: 20px; }

/* Checklist syarat password (validasi real-time) */
.pwd-checklist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pwd-checklist li {
    font-size: 12.5px; font-weight: 500; color: var(--danger);
    display: flex; align-items: center; gap: 7px; transition: color .15s;
}
.pwd-checklist li i { font-size: 12px; width: 13px; text-align: center; }
.pwd-checklist li.met { color: #166534; }

/* Varian 2 kolom */
.pwd-checklist.grid-2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 7px 20px;
}

.aksi-row { display: flex; gap: 6px; flex-wrap: nowrap; }
.aksi-row form { display: inline-flex; }

/* Tombol aksi ikon compact (pola sama dengan tabel di Dapodik: ikon + tooltip,
   supaya baris tabel tidak menjadi tinggi saat aksi banyak). */
.dpk-btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border-radius: 7px;
    font-size: 12.5px; border: 1px solid #dee2e6; background: #fff; color: #495057;
    cursor: pointer; text-decoration: none; transition: all .15s;
}
.dpk-btn-icon:hover { background: #f8f9fa; transform: translateY(-1px); }
.dpk-btn-icon.disabled { opacity: .4; pointer-events: none; }

/* Dropdown "Aksi Lainnya" (kebab menu) -- pengganti tumpukan banyak tombol
   ikon per baris tabel. Cuma 1-2 aksi paling sering & paling aman yang
   tetap tampil langsung sebagai ikon; sisanya (termasuk semua aksi
   berbahaya) masuk sini dengan LABEL TEKS -- bukan cuma ikon+tooltip,
   karena tooltip lewat title="" tidak muncul sama sekali di HP/tablet.
   Menu-nya position:fixed (posisi dihitung JS saat dibuka di dpk-modal.js)
   supaya tidak terpotong oleh div overflow-x:auto pembungkus tabel. */
.dpk-actions-dropdown { position: relative; display: inline-flex; }
.dpk-actions-trigger.dpk-actions-open { background: #eef1f4; border-color: #c7ced6; }
.dpk-actions-menu {
    display: none; position: fixed; z-index: 1000; min-width: 220px;
    background: #fff; border: 1px solid #e5e9ef; border-radius: 10px;
    box-shadow: 0 12px 32px rgba(20,30,50,.16); padding: 6px; font-size: 13px;
}
.dpk-actions-menu.dpk-actions-open { display: block; }
.dpk-actions-menu form { display: block; }
.dpk-actions-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border: none; background: none; border-radius: 7px;
    color: #333c47; font-size: 13px; text-align: left; cursor: pointer;
    text-decoration: none; font-family: var(--dpk-font); line-height: 1.3;
}
.dpk-actions-menu-item i { width: 16px; text-align: center; color: #8a94a3; flex-shrink: 0; }
.dpk-actions-menu-item:hover { background: #f4f6f8; }
.dpk-actions-menu-item.danger { color: #b02a2a; }
.dpk-actions-menu-item.danger i { color: #c0433a; }
.dpk-actions-menu-item.danger:hover { background: #fdecea; }
.dpk-actions-menu-divider { height: 1px; background: #eef1f4; margin: 6px 4px; }

/* DataTables — selaraskan dengan warna brand Akun Pusat */
.dataTables_wrapper { font-family: var(--dpk-font); font-size: 12.5px; color: var(--text-secondary); }
.dataTables_wrapper .dataTables_info { padding-top: 14px; }
.dataTables_wrapper .dataTables_length { padding: 12px 0; }
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 12.5px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 5px 11px; margin-left: 3px; border-radius: 6px !important;
    border: 1px solid #dee2e6 !important; background: #fff !important;
    color: var(--dpk-blue-dark) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--dpk-blue) !important; border-color: var(--dpk-blue) !important; color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--text-muted) !important; background: #f8f9fa !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
    background: #eef6fc !important; border-color: var(--dpk-blue) !important; color: var(--dpk-blue) !important;
}

.app-list-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; margin-bottom: 10px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); text-decoration: none; color: var(--text-primary);
    font-weight: 600; font-size: 14px; transition: all 0.15s;
}
.app-list-link:hover { border-color: var(--primary); background: #f8faff; transform: translateX(2px); }
.app-list-link i.arrow { color: var(--primary); }

.checkbox-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; }
.checkbox-row input { width: auto; }
.checkbox-row label { font-size: 13px; color: var(--text-secondary); margin: 0; }

/* =============================================================
   TEMA DAPODIK — dipakai di halaman Login dan panel Admin
   (Sidebar, Topbar, Kartu, Tabel) supaya selaras dengan
   tampilan aplikasi dapodik.dispendikpamekasan.id
   ============================================================= */
:root {
    --dpk-blue: #0078bf;
    --dpk-blue-light: #2398e0;
    --dpk-blue-dark: #003a5e;
    --dpk-blue-darker: #021f33;
    --dpk-orange: #f7a707;
    --dpk-orange-light: #ffc44d;
    --dpk-sidebar-width: 260px;
    --dpk-topbar-height: 60px;
    --dpk-font: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Halaman otentikasi (kartu terpusat gaya Dapodik) ---------- */
.dpk-auth-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 85% 15%, rgba(247,167,7,.18) 0%, transparent 45%),
        linear-gradient(135deg, var(--dpk-blue-darker) 0%, var(--dpk-blue-dark) 45%, var(--dpk-blue) 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    font-family: var(--dpk-font);
}
.dpk-auth-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    width: 420px; max-width: 100%;
    box-shadow: 0 20px 60px rgba(0,20,40,.35);
    border-top: 4px solid var(--dpk-orange);
}
.dpk-auth-logo {
    width: 84px; height: 84px;
    background: #fff; border: 1.5px solid #eef1f4; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px; padding: 10px;
    box-shadow: 0 6px 16px rgba(0,58,94,.12);
}
.dpk-auth-logo img { width: 100%; height: 100%; object-fit: contain; }
.dpk-auth-header { text-align: center; margin-bottom: 26px; }
.dpk-auth-title { font-size: 20px; font-weight: 700; color: var(--dpk-blue-dark); }
.dpk-auth-subtitle { color: #6c757d; font-size: 13px; margin-top: 4px; }
.dpk-auth-form { display: flex; flex-direction: column; gap: 16px; }
.dpk-auth-form .form-label { color: var(--dpk-blue-dark); font-weight: 700; }
.dpk-auth-form .form-control { font-family: var(--dpk-font); }
.dpk-auth-form .form-control:focus { border-color: var(--dpk-blue); box-shadow: 0 0 0 3px rgba(0,120,191,.12); }
.dpk-auth-foot { text-align: center; margin-top: 18px; font-size: 12.5px; color: #94a3b8; }
.dpk-auth-foot a { color: var(--dpk-blue); text-decoration: none; font-weight: 600; }

.dpk-btn-orange {
    background: linear-gradient(135deg, var(--dpk-orange), var(--dpk-orange-light));
    border: none; border-radius: 10px;
    padding: 12px; font-weight: 700; font-size: 15px; color: var(--dpk-blue-darker);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; cursor: pointer; transition: all .2s;
    font-family: var(--dpk-font);
}
.dpk-btn-orange:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(247,167,7,.4); }
.dpk-btn-orange:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

/* Aksen per-aplikasi tujuan (diatur admin di "Daftar Aplikasi") -- cuma
   aktif kalau atribut data-tema-app ada di .dpk-auth-card (artinya tujuan
   login ini terdeteksi & punya warna kustom). Pakai custom property
   supaya satu titik override cukup buat 2 elemen (garis atas + tombol). */
.dpk-auth-card[data-tema-app] { border-top-color: var(--app-color); }
.dpk-auth-card[data-tema-app] .dpk-btn-orange { background: var(--app-color); color: var(--app-text-color); }
.dpk-auth-card[data-tema-app] .dpk-btn-orange:hover { filter: brightness(0.92); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.dpk-auth-card[data-tema-app] .dpk-icon-badge:not(.danger) { background: var(--app-color); color: var(--app-text-color); }

/* ---------- Sidebar + Topbar (panel admin Akun Pusat) ---------- */
.dpk-body { background: #f0f2f5; font-family: var(--dpk-font); }

.dpk-sidebar {
    width: var(--dpk-sidebar-width);
    background: linear-gradient(195deg, #07314f 0%, #0a4d7a 55%, #0c5d92 100%);
    height: 100vh; position: fixed; top: 0; left: 0; z-index: 1000;
    overflow-y: auto; border-right: 3px solid var(--dpk-orange);
    transition: transform .3s;
}
.dpk-sidebar::-webkit-scrollbar { width: 6px; }
.dpk-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

.dpk-sidebar-brand {
    padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.1);
    background: rgba(0,0,0,.18); display: flex; align-items: center; gap: 12px;
}
.dpk-sidebar-brand .logo-badge {
    width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    padding: 5px; flex-shrink: 0;
}
.dpk-sidebar-brand .logo-badge img { width: 100%; height: 100%; object-fit: contain; }
.dpk-sidebar-brand .brand-text { min-width: 0; overflow: hidden; }
.dpk-sidebar-brand .app-name { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpk-sidebar-brand .app-sub { font-size: 11px; color: var(--dpk-orange-light); font-weight: 600; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dpk-sidebar-section {
    padding: 16px 16px 6px; font-size: 10px; font-weight: 700; color: rgba(255,255,255,.4);
    text-transform: uppercase; letter-spacing: 1px;
}
.dpk-sidebar .nav-link {
    color: rgba(255,255,255,.78); padding: 10px 20px; border-radius: 8px; margin: 2px 10px;
    font-size: 13.5px; display: flex; align-items: center; gap: 10px; text-decoration: none;
    border-left: 3px solid transparent; transition: all .2s;
}
.dpk-sidebar .nav-link:hover { background: rgba(255,255,255,.08); color: #fff; border-left-color: var(--dpk-orange-light); }
.dpk-sidebar .nav-link.active {
    background: var(--dpk-orange); color: var(--dpk-blue-darker); font-weight: 600;
    border-left-color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.dpk-sidebar .nav-link.active i { color: var(--dpk-blue-darker); }
.dpk-sidebar .nav-link i { width: 18px; text-align: center; font-size: 14px; }

.dpk-topbar {
    height: var(--dpk-topbar-height); background: #fff; border-bottom: 1px solid #e9ecef;
    border-top: 3px solid var(--dpk-orange);
    position: fixed; top: 0; left: var(--dpk-sidebar-width); right: 0; z-index: 999;
    display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.dpk-topbar .page-title { font-size: 16px; font-weight: 600; color: var(--dpk-blue-dark); }
.dpk-topbar .dpk-user { display: flex; align-items: center; gap: 10px; }
.dpk-avatar {
    width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 13px; background: rgba(0,120,191,.12); color: var(--dpk-blue); flex-shrink: 0;
}
.dpk-topbar .dpk-user-name { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.dpk-topbar .dpk-user-role { font-size: 10.5px; color: var(--dpk-orange); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.dpk-topbar .dpk-logout { color: #94a3b8; text-decoration: none; font-size: 16px; margin-left: 4px; }
.dpk-topbar .dpk-logout:hover { color: #dc2626; }
.dpk-sidebar-toggle-mobile {
    display: none; background: none; border: 1px solid #e2e8f0; border-radius: 8px;
    width: 34px; height: 34px; align-items: center; justify-content: center; color: #5a6a7e; cursor: pointer;
}

.dpk-main {
    margin-left: var(--dpk-sidebar-width); margin-top: var(--dpk-topbar-height);
    padding: 26px 28px; min-height: calc(100vh - var(--dpk-topbar-height));
}

@media (max-width: 860px) {
    .dpk-sidebar { transform: translateX(-100%); }
    .dpk-sidebar.show { transform: translateX(0); }
    .dpk-topbar, .dpk-main { left: 0; margin-left: 0; }
    .dpk-sidebar-toggle-mobile { display: flex; }
}

/* ---------- Kartu & tabel gaya Dapodik (dipakai di Kelola Akun) ---------- */
.dpk-card { background: #fff; border: none; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.dpk-card-header {
    border-radius: 12px 12px 0 0; background: #fff; border-bottom: 1px solid #f0f2f5;
    padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.dpk-card-title { font-weight: 600; font-size: 14.5px; color: var(--text-primary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px; }
.dpk-card-title i { color: var(--dpk-blue); }
.dpk-card-body { padding: 20px; }

.dpk-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dpk-table thead th {
    font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: #6c757d;
    padding: 10px 14px; text-align: left; border-bottom: 2px solid #f0f2f5; background: #f8f9fb;
}
.dpk-table td { padding: 11px 14px; border-bottom: 1px solid #f0f2f5; vertical-align: middle; color: var(--text-primary); }
.dpk-table tbody tr:hover { background: #f8f9fa; }

/* ---------- Tabel jadi kartu di layar sempit (HP) ----------
   Di layar lebar, .dpk-table tampil sebagai tabel biasa. Di bawah 700px,
   <thead> disembunyikan dan tiap <tr> jadi "kartu" berdiri sendiri --
   tiap <td> jadi baris label:nilai (labelnya diambil dari atribut
   data-label="..." yang wajib diisi di setiap <td> tabel yang mau ikut
   pola ini). Ini menggantikan overflow-x:auto polos yang bikin tabel
   padat (banyak kolom) susah dibaca di HP karena harus geser-geser
   horizontal terus.
   Kolom yang TIDAK perlu label (mis. kolom checkbox, atau kolom Aksi
   yang isinya tombol-tombol) cukup dikasih data-label="" atau
   class="dpk-td-nolabel" -- lihat pemakaian di kelola-akun.php &
   log-aktivitas.php. */
@media (max-width: 700px) {
    .dpk-table-stack thead { display: none; }
    .dpk-table-stack, .dpk-table-stack tbody, .dpk-table-stack tr, .dpk-table-stack td { display: block; width: 100%; }
    .dpk-table-stack tr {
        border: 1px solid #eef0f3; border-radius: 12px; margin-bottom: 10px;
        padding: 4px 0; background: #fff;
    }
    .dpk-table-stack tr:hover { background: #fff; }
    .dpk-table-stack td {
        border-bottom: none; padding: 8px 14px;
        display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    }
    .dpk-table-stack td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
        color: #94a3b8; flex-shrink: 0; padding-top: 2px;
    }
    .dpk-table-stack td.dpk-td-nolabel { justify-content: flex-start; }
    .dpk-table-stack td.dpk-td-nolabel::before { content: none; }
    /* Nilai kolom rata kanan berdampingan dengan label -- kecuali kolom
       yang isinya banyak elemen (badge, tombol aksi dropdown, dll), yang
       lebih enak dibaca rata kiri di bawah labelnya. */
    .dpk-table-stack td.dpk-td-wrap { flex-direction: column; align-items: flex-start; }

    /* Baris filter (kotak cari + dropdown) -- di layar sempit dipaksa
       satu kolom penuh per baris, supaya tidak ada yang berpasangan
       "kebetulan muat" dan yang lain sendirian (kelihatan acak). */
    .dpk-filter-bar { flex-direction: column; align-items: stretch !important; }
    .dpk-filter-bar > * { width: 100% !important; max-width: 100% !important; }
}

.dpk-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 6px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.dpk-badge-green { background: #d1f5e0; color: #146c43; }
.dpk-badge-red { background: #fde2e1; color: #b02a2a; }
.dpk-badge-orange { background: #fff3cd; color: #8a6100; }
.dpk-badge-blue { background: #dbeeff; color: var(--dpk-blue); }
.dpk-badge-purple { background: #ede9fe; color: #6d28d9; }
.dpk-badge-gray { background: #f1f3f5; color: #5a6a7e; }

.dpk-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 7px; font-size: 12px; font-weight: 600; border: 1px solid #dee2e6; background: #fff; color: #495057; cursor: pointer; text-decoration: none; font-family: var(--dpk-font); transition: all .15s; }
.dpk-btn:hover { background: #f8f9fa; }
.dpk-btn-primary { background: var(--dpk-blue); border-color: var(--dpk-blue); color: #fff; }
.dpk-btn-primary:hover { background: var(--dpk-blue-light); }
.dpk-btn-warn { color: #8a6100; border-color: #ffe69c; }
.dpk-btn-warn:hover { background: #fff8e6; }
.dpk-btn-danger { color: #b02a2a; border-color: #f5c2c0; }
.dpk-btn-danger:hover { background: #fdeeee; }
.dpk-btn-ok { color: #146c43; border-color: #b6e6cb; }
.dpk-btn-ok:hover { background: #eefcf4; }
.dpk-btn-lg { padding: 11px 18px; font-size: 14px; width: 100%; justify-content: center; }

.dpk-search-box { position: relative; max-width: 280px; }
.dpk-search-box i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 12px; }
.dpk-search-box input { padding-left: 32px; font-family: var(--dpk-font); }

/* Icon badge bulat gradient oranye — dipakai di halaman 2FA/akses ditolak,
   menggantikan .twofa-icon-badge biru lama supaya konsisten dengan Dapodik. */
.dpk-icon-badge {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, var(--dpk-orange), var(--dpk-orange-light));
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px; font-size: 26px; color: var(--dpk-blue-darker);
}
.dpk-icon-badge.danger { background: linear-gradient(135deg,#fee2e2,#fecaca); color:#991b1b; }

/* Override warna komponen lama (app-list-link, otp-input, dst) supaya
   ikut palet biru/oranye Dapodik saat dipakai di dalam .dpk-auth-card */
.dpk-auth-card { font-family: var(--dpk-font); }
.dpk-auth-card .app-list-link:hover { border-color: var(--dpk-blue); background: #f0f8ff; }
.dpk-auth-card .app-list-link i.arrow { color: var(--dpk-blue); }
.dpk-auth-card .otp-input { font-family: var(--dpk-font); }
.dpk-auth-card .form-control:focus { border-color: var(--dpk-blue); box-shadow: 0 0 0 3px rgba(0,120,191,.12); }
.dpk-auth-card .form-control {
    padding: 10px 14px; font-size: 14px; border-radius: 10px; border: 1.5px solid #e9ecef;
}
.dpk-auth-card .pwd-wrap .form-control { padding-left: 14px; }
.dpk-auth-card .form-control.otp-input {
    padding: 12px 10px 12px 20px; font-size: 22px; letter-spacing: 10px; font-weight: 700;
}

/* Pastikan komponen lama (form-control, page-title, dst) yang dipakai ulang
   di dalam area ber-tema Dapodik ikut memakai font Segoe UI, bukan font lama. */
.dpk-body, .dpk-body .form-control, .dpk-body input, .dpk-body select, .dpk-body textarea,
.dpk-body .btn, .dpk-body .page-title, .dpk-body .page-subtitle, .dpk-body .card-title {
    font-family: var(--dpk-font);
}
.dpk-body .page-title { color: var(--dpk-blue-dark); }

/* ============================================================
   DASHBOARD (admin/index.php)
   ============================================================ */
.dpk-greeting {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; margin-bottom: 22px;
}
.dpk-greeting-sub { color: var(--text-secondary); font-size: 13.5px; margin-top: 2px; }

.dpk-stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px;
}
@media (max-width: 1300px) { .dpk-stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .dpk-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .dpk-stats-grid { grid-template-columns: 1fr; } }

/* Grid khusus "Perbandingan Periode" -- selalu berisi 3 item, jadi
   dipisah dari .dpk-stats-grid (yang sekarang 4-kolom untuk 7 kartu di
   atas) supaya tidak perlu inline style yang memaksa 3 kolom tetap dan
   bikin overflow/kepotong di layar HP. */
.dpk-periode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .dpk-periode-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dpk-periode-grid { grid-template-columns: 1fr; } }

.dpk-stat-card {
    background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.06);
    padding: 18px; display: flex; align-items: flex-start; gap: 14px;
}
.dpk-stat-icon {
    width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 17px;
    background: rgba(0,120,191,.12); color: var(--dpk-blue);
}
.dpk-stat-value { font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.dpk-stat-label { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; margin-top: 2px; }
.dpk-stat-extra { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.dpk-stat-extra a { color: var(--dpk-blue); text-decoration: none; font-weight: 600; }
.dpk-stat-extra a:hover { text-decoration: underline; }

.dpk-stat-card.blue   { border-left-color: var(--dpk-blue); }
.dpk-stat-card.green  { border-left-color: #16a34a; }
.dpk-stat-card.green  .dpk-stat-icon { background: #dcfce7; color: #16a34a; }
.dpk-stat-card.orange { border-left-color: var(--dpk-orange); }
.dpk-stat-card.orange .dpk-stat-icon { background: #fff3cd; color: #b7791f; }
.dpk-stat-card.purple { border-left-color: #7c3aed; }
.dpk-stat-card.purple .dpk-stat-icon { background: #ede9fe; color: #7c3aed; }
.dpk-stat-card.red    { border-left-color: var(--danger); }
.dpk-stat-card.red    .dpk-stat-icon { background: #fee2e2; color: var(--danger); }
.dpk-stat-card.teal    { border-left-color: #0d9488; }
.dpk-stat-card.teal    .dpk-stat-icon { background: #ccfbf1; color: #0d9488; }

.dpk-dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 980px) { .dpk-dash-grid { grid-template-columns: 1fr; } }

.dpk-app-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f2f5; }
.dpk-app-row:last-child { border-bottom: none; }
.dpk-app-icon {
    width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
    background: rgba(0,120,191,.1); color: var(--dpk-blue);
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.dpk-app-row-body { flex: 1; min-width: 0; }
.dpk-app-row-top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.dpk-app-row-top .name { font-weight: 600; color: var(--text-primary); }
.dpk-app-row-top .count { color: var(--text-muted); font-size: 12px; }
.dpk-app-bar-track { height: 7px; background: #eef1f4; border-radius: 4px; overflow: hidden; }
.dpk-app-bar-fill { height: 100%; background: linear-gradient(90deg, var(--dpk-blue), var(--dpk-blue-light)); border-radius: 4px; }

.dpk-timeline { display: flex; flex-direction: column; gap: 4px; }
.dpk-timeline-item { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f5f6f8; }
.dpk-timeline-item:last-child { border-bottom: none; }
.dpk-timeline-icon {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 12.5px;
}
.dpk-timeline-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.dpk-timeline-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.dpk-timeline-empty { color: var(--text-muted); font-size: 13px; text-align: center; padding: 18px 0; }

.dpk-watch-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0; border-bottom: 1px solid #f5f6f8; font-size: 13px;
}
.dpk-watch-item:last-child { border-bottom: none; }
.dpk-watch-item .label { color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.dpk-watch-item .val { font-weight: 700; color: var(--text-primary); text-decoration: none; }
.dpk-watch-ok { color: #16a34a; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; padding: 6px 0 12px; }

.dpk-quick-actions { display: flex; flex-direction: column; gap: 8px; }
.dpk-quick-actions .dpk-btn { justify-content: flex-start; }

/* =============================================
   Strength bar + label (kekuatan password)
   ============================================= */
.pwd-strength { margin-top: 10px; }
.pwd-strength-track {
    height: 6px; background: var(--border); border-radius: 4px;
    overflow: hidden; margin-bottom: 7px;
}
.pwd-strength-fill {
    height: 100%; width: 0%; border-radius: 4px; background: var(--border);
    transition: width .2s ease, background-color .2s ease;
}
.pwd-strength-fill.level-1 { background: var(--danger); }
.pwd-strength-fill.level-2 { background: #f59e0b; }
.pwd-strength-fill.level-3 { background: #2563b0; }
.pwd-strength-fill.level-4 { background: #16a34a; }

.pwd-strength-label { font-size: 12px; font-weight: 700; letter-spacing: 0.2px; color: var(--text-muted); }
.pwd-strength-label.level-1 { color: var(--danger); }
.pwd-strength-label.level-2 { color: #b45309; }
.pwd-strength-label.level-3 { color: #1d4ed8; }
.pwd-strength-label.level-4 { color: #166534; }

/* =============================================
   Live match — indikator konfirmasi password real-time
   ============================================= */
.pwd-match {
    font-size: 12.5px; font-weight: 600; margin-top: 7px;
    display: flex; align-items: center; gap: 6px;
    transition: color .15s ease;
}
.pwd-match.hidden { display: none; }
.pwd-match i { font-size: 12px; }
.pwd-match.match { color: #166534; }
.pwd-match.nomatch { color: var(--danger); }

/* ============================================================
   MODAL KONFIRMASI/ALERT KUSTOM (dpk-modal.js)
   Pengganti confirm()/alert() bawaan browser -- fade + scale halus,
   senada tema SSO. Tidak butuh Bootstrap.
   ============================================================ */
.dpk-confirmbox-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(2, 31, 51, 0);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    opacity: 0; pointer-events: none;
    transition: background .22s ease, opacity .22s ease;
}
.dpk-confirmbox-overlay.show {
    background: rgba(2, 31, 51, .55);
    opacity: 1; pointer-events: auto;
}
.dpk-confirmbox-box {
    background: #fff; border-radius: 18px; width: 100%; max-width: 380px;
    padding: 28px 26px 22px; text-align: center;
    box-shadow: 0 20px 60px rgba(0,20,40,.35);
    border-top: 4px solid var(--dpk-orange);
    transform: translateY(14px) scale(.96); opacity: 0;
    transition: transform .22s cubic-bezier(.2,.9,.3,1.2), opacity .22s ease;
}
.dpk-confirmbox-overlay.show .dpk-confirmbox-box { transform: translateY(0) scale(1); opacity: 1; }
.dpk-confirmbox-icon {
    width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #eef6fc; color: var(--dpk-blue); font-size: 20px;
}
.dpk-confirmbox-icon.is-danger { background: #fdecec; color: #d9364a; }
.dpk-confirmbox-title { font-size: 16.5px; font-weight: 700; color: var(--dpk-blue-dark); margin-bottom: 6px; }
.dpk-confirmbox-text { font-size: 13.5px; color: var(--text-secondary, #5c6b7a); line-height: 1.55; }
.dpk-confirmbox-actions { display: flex; gap: 10px; margin-top: 20px; }
.dpk-confirmbox-actions .dpk-btn { flex: 1; justify-content: center; }
.dpk-confirmbox-box .form-control { box-sizing: border-box; text-align: left; }