/* =========================================================
   SI-AWAL — gaya aplikasi
   Warna mengikuti logo Bawaslu: merah, emas, hitam.
   Ubah warna cukup di bagian :root.
   ========================================================= */

/* ---------- Font lokal ---------- */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }

/* ---------- Token warna ---------- */
:root {
    --merah: #C8161E;
    --merah-tua: #8A0F15;
    --merah-sidebar: #6B0C11;
    --merah-muda: #FDF2F2;
    --emas: #F2A900;
    --emas-tua: #9A6B00;
    --emas-muda: #FFF8E6;
    --arang: #1C1C1E;

    --bs-primary: var(--merah);
    --bs-primary-rgb: 200, 22, 30;
    --bs-link-color: var(--merah);
    --bs-link-color-rgb: 200, 22, 30;
    --bs-link-hover-color: var(--merah-tua);
    --bs-link-hover-color-rgb: 138, 15, 21;
    --bs-body-font-family: "Plus Jakarta Sans", system-ui, "Segoe UI", Roboto, sans-serif;
    --bs-body-bg: #F3F4F6;
    --bs-border-color: #E5E7EB;
    --sidebar-w: 260px;
}
body { font-size: .925rem; color: #1F2937; }
:focus-visible { outline: 2px solid var(--emas); outline-offset: 2px; }

/* ---------- Tombol & form ---------- */
.btn-primary {
    --bs-btn-bg: var(--merah); --bs-btn-border-color: var(--merah);
    --bs-btn-hover-bg: var(--merah-tua); --bs-btn-hover-border-color: var(--merah-tua);
    --bs-btn-active-bg: var(--merah-tua); --bs-btn-active-border-color: var(--merah-tua);
    --bs-btn-disabled-bg: var(--merah); --bs-btn-disabled-border-color: var(--merah);
    font-weight: 600;
}
.btn-gelap { background: rgba(255,255,255,.1); color: #fff; border: 0; font-weight: 600; }
.btn-gelap:hover, .btn-gelap:focus { background: rgba(255,255,255,.16); color: #fff; }
.form-control:focus, .form-select:focus { border-color: var(--merah); box-shadow: 0 0 0 .2rem rgba(200,22,30,.12); }
.form-check-input:checked { background-color: var(--merah); border-color: var(--merah); }
.breadcrumb a { text-decoration: none; }

/* ---------- Utilitas warna ---------- */
.text-merah { color: var(--merah) !important; }
.text-emas { color: var(--emas-tua) !important; }
.text-emas-terang { color: var(--emas) !important; }
.bg-merah-muda { background: var(--merah-muda) !important; }
.bg-emas-muda { background: var(--emas-muda) !important; }
.teks-redup { color: #D1D5DB; max-width: 560px; }
.teks-abu { color: #9CA3AF; }
.kecil { font-size: .75rem; }

/* Pita tiga warna — penanda identitas */
.pita { height: 4px; flex-shrink: 0; background: linear-gradient(90deg, var(--merah) 0 60%, var(--emas) 60% 85%, var(--arang) 85% 100%); }

/* =================== SIDEBAR =================== */
.sidebar {
    position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 1040;
    background: var(--merah-sidebar); color: #F5BDC0;
    display: flex; flex-direction: column; transition: transform .2s ease;
}
.sidebar .brand { height: 64px; border-bottom: 1px solid rgba(255,255,255,.1); flex-shrink: 0; }
.brand-sub { font-size: .7rem; color: #F5BDC0; }
.sidebar .menu { overflow-y: auto; flex: 1; padding: 1rem .75rem; }
.sidebar .menu::-webkit-scrollbar { width: 6px; }
.sidebar .menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
.menu-judul { font-size: .7rem; font-weight: 600; color: rgba(245,189,192,.7); padding: 0 .75rem; margin: 1.25rem 0 .4rem; }
.menu-judul:first-child { margin-top: 0; }
.menu-link {
    position: relative; display: flex; align-items: center; gap: .75rem;
    padding: .6rem .75rem; border-radius: .5rem; color: #F5BDC0; text-decoration: none; font-size: .9rem;
}
.menu-link i { font-size: 1.1rem; width: 1.25rem; text-align: center; }
.menu-link:hover { background: rgba(255,255,255,.05); color: #fff; }

.menu-link.active { background: rgba(255,255,255,.09); color: #fff; font-weight: 600; }
.menu-link.active::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--emas);
}
.menu-link .badge { background: var(--emas); color: #4A080C; }
.sidebar-bawah { border-top: 1px solid rgba(255,255,255,.1); }
.btn-keluar-sidebar { background: rgba(255,255,255,.06); color: #fff; }
.btn-keluar-sidebar:hover { background: rgba(255,255,255,.12); color: #fff; }

.sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1035; display: none; }
.konten { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.buka { transform: none; }
    .sidebar.buka + .sidebar-backdrop { display: block; }
    .konten { margin-left: 0; }
}

/* =================== TOPBAR =================== */
.topbar { height: 64px; position: sticky; top: 0; z-index: 1020; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--bs-border-color); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .8rem; flex-shrink: 0; }
.avatar-merah { background: var(--merah); color: #fff; }
.avatar-sm { width: 28px; height: 28px; font-size: .68rem; background: #F3F4F6; color: #4B5563; }
.titik-notif { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; background: var(--merah); border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.menu-notif { width: 320px; }
.dropdown-menu { border-color: #F3F4F6; box-shadow: 0 12px 32px rgba(0,0,0,.12); border-radius: .75rem; }
.dropdown-item:active { background: var(--merah); }

/* =================== KARTU =================== */
.kartu { background: #fff; border: 1px solid var(--bs-border-color); border-radius: .75rem; }
.kartu-judul { font-weight: 600; margin: 0; font-size: 1rem; }
.kartu-sub { font-size: .78rem; color: #6B7280; margin: 0; }
.ikon-stat { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0; }
.angka-stat { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.tinggi-grafik { height: 290px; }
.tinggi-donat { height: 210px; }

/* Panel sapaan */
.panel-sapaan { border-radius: 1rem; overflow: hidden; color: #fff; background: var(--arang); }
.garis-atas { border-top: 1px solid rgba(255,255,255,.1); }

/* Tahapan pemilu */
.tahapan { display: flex; min-width: 640px; list-style: none; padding: 0; margin: 0; }
.tahapan li { display: flex; align-items: flex-start; }
.tahapan li:not(:last-child) { flex: 1; }
.tahap { width: 96px; text-align: center; }
.tahap-bulat { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .75rem; font-weight: 700; background: rgba(255,255,255,.1); color: #9CA3AF; }
.tahap.selesai .tahap-bulat { background: var(--emas); color: #4A080C; }
.tahap.aktif .tahap-bulat { background: var(--merah); color: #fff; box-shadow: 0 0 0 4px rgba(200,22,30,.3); }
.tahap-nama { display: block; margin-top: .5rem; font-size: .72rem; color: #9CA3AF; }
.tahap.aktif .tahap-nama { color: #fff; font-weight: 600; }
.tahap-garis { flex: 1; height: 2px; margin: 15px .5rem 0; background: rgba(255,255,255,.1); }
.tahap-garis.selesai { background: var(--emas); }

/* Badge status */
.badge-status { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 500; border: 1px solid; white-space: nowrap; }
.badge-status .dot { width: 6px; height: 6px; border-radius: 50%; }
.st-diproses { background: var(--emas-muda); color: var(--emas-tua); border-color: #FBCB4F99; }
.st-tindak { background: var(--merah-muda); color: var(--merah-tua); border-color: #F5BDC0; }
.st-selesai { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.st-tms { background: #F3F4F6; color: #4B5563; border-color: #E5E7EB; }

/* Progres wilayah */
.progress { height: 8px; background: #F3F4F6; }
.progress-bar { background: var(--merah); }

/* Linimasa */
.linimasa { list-style: none; padding: 0 0 0 1.25rem; margin: 0 0 0 .5rem; border-left: 2px solid #F3F4F6; }
.linimasa li { position: relative; margin-bottom: 1.2rem; font-size: .88rem; }
.linimasa li:last-child { margin-bottom: 0; }
.linimasa .bulat { position: absolute; left: calc(-1.25rem - 7px); top: 4px; width: 12px; height: 12px; border-radius: 50%; }
.bulat-merah { background: var(--merah); box-shadow: 0 0 0 4px var(--merah-muda); }
.bulat-emas  { background: var(--emas); box-shadow: 0 0 0 4px var(--emas-muda); }
.bulat-hijau { background: #10B981; box-shadow: 0 0 0 4px #ECFDF5; }
.bulat-abu   { background: #9CA3AF; box-shadow: 0 0 0 4px #F3F4F6; }

/* Tabel */
.tabel-ringkas th, table.dataTable thead th { background: #F9FAFB !important; color: #4B5563; font-weight: 600; font-size: .8rem; white-space: nowrap; }
.tabel-ringkas th:first-child, .tabel-ringkas td:first-child { padding-left: 1.5rem; }
table.dataTable tbody td { vertical-align: middle; white-space: nowrap; }
table.dataTable th.dt-type-date, table.dataTable td.dt-type-date { text-align: left; }
table.dataTable > tbody > tr:hover > * { box-shadow: inset 0 0 0 9999px rgba(200,22,30,.03) !important; }
div.dt-container .pagination {
    --bs-pagination-active-bg: var(--merah); --bs-pagination-active-border-color: var(--merah);
    --bs-pagination-color: #374151; --bs-pagination-hover-color: var(--merah-tua);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(200,22,30,.15);
}
div.dt-container .dt-info { color: #6B7280; font-size: .85rem; }
.btn-aksi { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: .5rem; border: 0; background: transparent; color: #6B7280; }
.btn-aksi:hover { background: #F3F4F6; color: var(--arang); }
.btn-aksi.ubah:hover { background: var(--emas-muda); color: var(--emas-tua); }
.btn-aksi.hapus:hover { background: var(--merah-muda); color: var(--merah); }

/* Modal & SweetAlert2 */
.modal-content { border: 0; border-radius: 1rem; overflow: hidden; }
.swal2-popup { font-family: var(--bs-body-font-family) !important; border-radius: 1rem !important; }
.swal2-title { font-size: 1.25rem !important; color: var(--arang) !important; }

/* Halaman masuk: gayanya ada di tambahan.css (kelas masuk-*). */

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }