/* SIWARGA - Stylesheet */
:root{
  --sw-primary:#0f4c81;
  --sw-primary-dark:#093a66;
  --sw-accent:#e63946;
  --sw-bg:#f4f6fb;
  --sw-sidebar:#0f172a;
  --sw-sidebar-text:#cbd5e1;
}
*{box-sizing:border-box;}
html, body {max-width: 100%; overflow-x: clip;}
/* Poppins dimuat di includes/header.php. Helvetica dan sans-serif sebagai
   cadangan bila Google Fonts tidak bisa dijangkau, supaya halaman tetap
   terbaca dan tidak jatuh ke font serif bawaan browser.

   Bobot dasar sengaja 400, BUKAN 300 seperti panel Metronic yang jadi acuan.
   Panel itu isinya menu pendek, sedangkan halaman ini penuh tabel data (NIK,
   nama, alamat) - Poppins 300 pada angka berukuran kecil terlalu tipis dan
   melelahkan dibaca berlama-lama. */
body{font-family:'Poppins',Helvetica,sans-serif;font-weight:400;background:var(--sw-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

/* ===== LOGIN ===== */
.login-bg{
  min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0f4c81 0%,#1e3a5f 50%,#093a66 100%);
  padding:20px;
}
/* Halaman publik yang berisi DAFTAR, bukan kartu login.
   .login-bg memakai display:flex + align-items:center untuk memusatkan kartu
   login. Efek sampingnya: anaknya disizing menurut lebar ALAMI isinya, bukan
   lebar layar - di ponsel itu jauh melebihi layar, lalu terpotong diam-diam
   oleh overflow-x:clip. Halaman loker/artikel/UMKM/CCTV/POR meminjam latar
   yang sama tapi butuh tata letak blok biasa.
   Kelas login-bg sengaja DIPERTAHANKAN, hanya ditimpa - banyak selektor lain
   memakai body:not(.login-bg) untuk membedakan latar gelap dari terang, dan
   mengganti namanya akan membalik warna teks jadi gelap di atas latar gelap. */
.login-bg.halaman-isi{
  display:block;align-items:stretch;justify-content:flex-start;
}
@media (max-width:575.98px){
  /* Padding 20px milik .login-bg menumpuk dengan padding pembungkus di dalam,
     menyisakan lebar isi yang sempit di layar kecil. */
  .login-bg.halaman-isi{padding:0;}
}
.login-wrapper{width:100%;max-width:960px;}
.login-card{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:18px;overflow:hidden;}
.login-left{
  position:relative;
  background:linear-gradient(135deg,#0f4c81,#093a66);color:#fff;padding:48px 40px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.brand-large i{font-size:42px;background:rgba(255,255,255,.15);padding:14px;border-radius:14px;}
.brand-large h1{font-size:34px;margin:18px 0 4px;font-weight:700;}
.brand-large p{opacity:.85;}
.feature-list{list-style:none;padding:0;margin:24px 0 0;}
.feature-list li{padding:8px 0;opacity:.9;}
.feature-list i{color:#67e8a9;margin-right:10px;}
.login-right{padding:48px 40px;}
.login-right h3{font-weight:700;color:var(--sw-primary);}
.btn-primary{background:var(--sw-primary);border-color:var(--sw-primary);}
.btn-primary:hover{background:var(--sw-primary-dark);border-color:var(--sw-primary-dark);}
@media (max-width: 768px){
  .login-card{grid-template-columns:1fr;}
  .login-left{padding:28px 22px;}
  .login-right{padding:28px 22px;}
  .brand-large h1{font-size:26px;margin:12px 0 2px;}
  .brand-large i{font-size:32px;padding:10px;}
  .feature-list li{padding:4px 0;font-size:14px;}
  .register-card .login-right{max-height:none !important;}
}
/* ===== MODAL BERGULIR YANG DIBUNGKUS <form> =====
   Banyak modal di aplikasi ini menaruh <form> di antara .modal-content dan
   kepala/isi/kaki modal, supaya tombol simpan di kaki ikut mengirim formulir.
   Pada .modal-dialog-scrollable susunan itu merusak pengguliran: Bootstrap
   membatasi tinggi .modal-content lalu menggulir .modal-body, tetapi <form> di
   tengahnya ikut memanjang setinggi isinya - isi modal tidak bisa digulir dan
   kaki modal terpotong di luar layar. Akibatnya nyata: tombol "Bentuk Group"
   di Jadwal Ronda berada di 855px pada layar 768px dan tidak bisa dicapai
   sama sekali; pengurus mengira tombol simpannya belum ada (2026-09-14).
   Form dijadikan kolom lentur yang ikut dibatasi, sehingga yang bergulir
   kembali .modal-body dan kaki modal selalu terlihat. Hanya berlaku untuk form
   yang LANGSUNG di dalam .modal-content modal bergulir. */
.modal-dialog-scrollable .modal-content > form{
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0;max-height:100%;overflow:hidden;
}
.modal-dialog-scrollable .modal-content > form > .modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;}
.modal-dialog-scrollable .modal-content > form > .modal-header,
.modal-dialog-scrollable .modal-content > form > .modal-footer{flex-shrink:0;}

/* Tombol chatbot melayang (z-index 9999, di includes/footer.php) berada di atas
   modal Bootstrap (1055). Di ponsel ia menutupi tombol simpan di kaki modal -
   "Bentuk Group" terbaca "Bentuk G..." dan sentuhan di situ membuka chatbot.
   Selama modal terbuka chatbot tidak dibutuhkan, jadi disembunyikan. */
body.modal-open .ai-chat-widget{display:none !important;}

/* Register page badge in sidebar */
.nav-link .badge{font-size:10px;padding:3px 6px;}

/* ===== APP SHELL ===== */
.app-shell{display:flex;min-height:100dvh;}
.app-sidebar{
  width:260px;background:var(--sw-sidebar);color:var(--sw-sidebar-text);
  position:fixed;top:0;bottom:0;left:0;z-index:1030;
  display:flex;flex-direction:column;
  transition:transform .25s ease;
}
.app-sidebar .brand{display:flex;align-items:center;gap:12px;padding:20px 18px;border-bottom:1px solid rgba(255,255,255,.07); flex-shrink:0; background:var(--sw-sidebar); z-index:10;}
.app-sidebar .brand i{font-size:28px;color:#fff;background:var(--sw-primary);padding:10px;border-radius:10px;}
.app-sidebar .brand-name{color:#fff;font-weight:700;font-size:18px;line-height:1;}
.app-sidebar .brand small{color:#94a3b8;}
.app-sidebar .nav{flex: 1 1 0; min-height: 0; overflow-y: auto; flex-wrap: nowrap;}
.app-sidebar .nav-section{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#64748b;margin:18px 14px 6px;}
.app-sidebar .nav-link{color:var(--sw-sidebar-text);padding:9px 14px;border-radius:8px;margin:1px 6px;display:flex;align-items:center;gap:10px;font-size:14px;}
.app-sidebar .nav-link:hover{background:rgba(255,255,255,.06);color:#fff;}
.app-sidebar .nav-link.active{background:var(--sw-primary);color:#fff;}
.app-sidebar .nav-link i{width:18px;text-align:center;}
.app-sidebar .nav::-webkit-scrollbar { width: 5px; }
.app-sidebar .nav::-webkit-scrollbar-track { background: transparent; }
.app-sidebar .nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 10px; }
.app-sidebar .nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1025;}
.sidebar-backdrop.show{display:block;}

.app-main{flex:1;margin-left:260px;display:flex;flex-direction:column;min-height:100dvh;min-width:0;transition:margin-left .25s ease;}

/* Sembunyikan sidebar di layar besar. Kelas dipasang di <html>, bukan <body>,
   karena Turbo Drive mengganti <body> tiap navigasi sehingga kelas di sana
   akan hilang. Dibatasi ke >=992px supaya tidak bentrok dengan .open di mobile. */
@media (min-width:992px){
  html.sidebar-collapsed .app-sidebar{transform:translateX(-100%);}
  html.sidebar-collapsed .app-main{margin-left:0;}
}
.topbar{background:var(--sw-sidebar);color:#fff;border-bottom:1px solid rgba(255,255,255,0.05);padding:12px 22px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:1020;}
.topbar h5{font-size:1rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.content{flex:1;padding:24px;min-width:0;}
.app-footer{background:#fff;border-top:1px solid #e5e7eb;padding:12px 22px;display:flex;justify-content:space-between;font-size:13px;flex-wrap:wrap;gap:8px;position:sticky;bottom:0;z-index:1020;}

/* ===== STAT CARDS ===== */
.stat-card{background:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 1px 3px rgba(15,23,42,.06);display:flex;align-items:center;gap:16px;transition:transform .15s;}
.stat-card:hover{transform:translateY(-2px);}
.stat-card .icon{width:54px;height:54px;min-width:54px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;}
.stat-card .label{color:#64748b;font-size:13px;}
.stat-card .value{font-size:26px;font-weight:700;color:#0f172a;line-height:1;word-break:break-word;}
.bg-c1{background:linear-gradient(135deg,#0f4c81,#1e6bb8);}
.bg-c2{background:linear-gradient(135deg,#16a34a,#22c55e);}
.bg-c3{background:linear-gradient(135deg,#f59e0b,#fbbf24);}
.bg-c4{background:linear-gradient(135deg,#dc2626,#ef4444);}
.bg-c5{background:linear-gradient(135deg,#7c3aed,#a855f7);}
.bg-c6{background:linear-gradient(135deg,#0891b2,#06b6d4);}

/* ===== Page card ===== */
.card{border:none;border-radius:12px;box-shadow:0 1px 3px rgba(15,23,42,.05);}
.card-header{background:#fff;border-bottom:1px solid #f1f5f9;font-weight:600;padding:14px 18px;}
.card-header.d-flex{flex-wrap:wrap;gap:8px;}
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table thead th{background:#f8fafc;color:#475569;font-size:13px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;}
.table td{vertical-align:middle;}
.btn-sm i{font-size:12px;}
.required::after{content:' *';color:#dc2626;}

/* DataTables wrapping */
.dataTables_wrapper{overflow-x:auto;}
table.dataTable{width:100% !important;}

/* Anti-goyang: hanya untuk DPT yang punya initComplete terkontrol */
table#dptTable {
    opacity: 0;
    transition: opacity .3s ease;
}
table#dptTable.dt-ready {
    opacity: 1;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 992px){
  .app-sidebar{transform:translateX(-100%);}
  .app-sidebar.open{transform:translateX(0);box-shadow:4px 0 20px rgba(0,0,0,.3);}
  .app-main{margin-left:0;}
  .content{padding:16px;}
  .topbar{padding:10px 14px;}
  .app-footer{padding:10px 14px;font-size:12px;}
  .stat-card{padding:14px 16px;gap:12px;}
  .stat-card .icon{width:44px;height:44px;min-width:44px;font-size:18px;}
  .stat-card .value{font-size:22px;}
  .stat-card .label{font-size:12px;}
  .card-header{padding:12px 14px;font-size:14px;}
  .card-body{padding:14px;}
  .table{font-size:13px;}
  .table thead th{font-size:11px;padding:8px 6px;}
  .table td{padding:8px 6px;}
  .btn{font-size:14px;}
  .btn-sm{font-size:12px;padding:4px 8px;}
  .modal-dialog{margin:8px;}
  .modal-dialog.modal-xl, .modal-dialog.modal-lg{max-width:calc(100vw - 16px);}
  h5{font-size:1rem;}
  .form-label{font-size:13px;margin-bottom:4px;}
  .form-control, .form-select{font-size:14px;}
  .input-group-text{font-size:13px;padding:6px 10px;}
}
/* Kartu angka dashboard, dua per baris di layar sempit. Setengah lebar ponsel
   hanya menyisakan ~85px untuk tulisan kalau ikon tetap di samping - label
   seperti "Laki-laki / Perempuan" jadi terpotong tiga baris. Ikon dipindah ke
   atas supaya tulisan mendapat seluruh lebar kartu. */
@media (max-width: 576px){
  .stat-grid .stat-card{flex-direction:column;align-items:flex-start;gap:8px;padding:12px;height:100%;}
  .stat-grid .stat-card .icon{width:36px;height:36px;min-width:36px;font-size:15px;border-radius:10px;}
  .stat-grid .stat-card .label{font-size:11.5px;line-height:1.3;}
  .stat-grid > [class*="col-"] > a{height:100%;}
}
@media (max-width: 576px){
  .content{padding:12px;}
  .topbar{padding:10px;gap:8px;}
  .topbar h5{font-size:.95rem;}
  .topbar .dropdown a{font-size:12px;padding:4px 8px;}
  .stat-card{padding:12px;}
  .stat-card .value{font-size:18px;}
  .card-body{padding:12px;}
  .card-header{font-size:13px;padding:10px 12px;}
  .btn{padding:6px 10px;}
  /* Tombol aksi di tabel jadi stacked */
  .table td .btn-sm{margin-bottom:2px;}
  /* List group cleaner */
  .list-group-item{padding:10px 12px;font-size:13px;}
  /* Modal full screen feel */
  .modal-dialog{margin:0;max-width:100%;min-height:100dvh;}
  .modal-content{border-radius:0;min-height:100dvh;}
  .modal-xl, .modal-lg{max-width:100% !important;}
}

/* Print friendly */
@media print{
  .app-sidebar, .topbar, .app-footer, .no-print, .sidebar-backdrop {display:none !important;}
  .app-main{margin-left:0 !important;}
  .content{padding:0 !important;}
}

/* Running Text / Marquee */
.ticker-wrap {
  width: 100%;
  overflow: hidden;
  background-color: #4caf50;
  color: #fff;
  padding: 5px 0;
  box-sizing: border-box;
}
.ticker-text {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: marquee-anim 25s linear infinite;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
@keyframes marquee-anim {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}


/* ==========================================================================
   Bayangan kolom nominal uang (dipasang oleh assets/js/app.js).
   Warnanya sengaja biru muda, bukan abu-abu: kotak ini harus tertangkap mata
   tanpa dicari, karena gunanya memeriksa ulang angka sebelum disimpan.
   ========================================================================== */
.uang-bayang {
    background: #eef4ff;
    border-left: 4px solid #0d6efd;
    border-radius: 6px;
    padding: 9px 13px;
    margin-top: 8px;
}
.uang-bayang .angka { font-size: 19px; font-weight: 700; color: #0b3d6e; line-height: 1.25; }
.uang-bayang .kata  { font-size: 12px; color: #5a6570; font-style: italic; margin-top: 1px; }

/* Varian ringkas untuk baris tabel, di mana kotak penuh tiap baris akan
   membuat formulirnya jauh lebih panjang daripada isinya. */
.uang-bayang-ringkas {
    font-size: 11px;
    color: #0b3d6e;
    margin-top: 3px;
    line-height: 1.3;
}



/* Bayangan kartu dipertegas selama latar bendera aktif. Latar berwarna terang
   membuat bayangan lembut bawaan Bootstrap nyaris tidak terlihat, sehingga
   kartu putih terasa menempel rata pada kain. */
/* !important wajib di sini: kartunya memakai kelas .shadow-lg milik Bootstrap
   yang nilainya sendiri sudah !important, sehingga aturan biasa selalu kalah
   berapa pun spesifisitasnya. */
body.musim-hut .login-card {
    box-shadow: 0 18px 50px rgba(3, 17, 32, .48), 0 3px 12px rgba(3, 17, 32, .3) !important;
}

/* Partikel disembunyikan selama latar bendera aktif. Titik dan garis putihnya
   terbaca sebagai goresan di atas kain, dan dua latar yang bersaing di satu
   layar membuat keduanya sama-sama tidak terbaca sebagai apa pun.

   Penandanya kelas .musim-hut dari PHP, bukan pemilih :has(). :has() baru
   didukung peramban terbitan 2022 ke atas, sedangkan sebagian warga memakai
   Android lawas - di sana aturannya diabaikan diam-diam dan partikel tetap
   menumpuk di atas kain. */
body.musim-hut #particles-js { display: none; }

/* Panel merek jadi merah selama musim HUT RI.
   Merahnya sengaja lebih tua daripada merah bendera di latar (#ce1126). Kalau
   dibuat sama persis, panelnya melebur ke latar dan kartu login kehilangan
   bentuk - yang terlihat cuma bidang merah besar dengan tulisan mengambang. */
body.musim-hut .login-left {
    background: linear-gradient(135deg, #a80f1d, #6b0a13);
}

/* ========================================
   HURUF KAPITAL OTOMATIS
   ========================================

   HANYA untuk data kependudukan: Data Warga, Kartu Keluarga, dan DPT.

   Nama, alamat, tempat lahir, dan pekerjaan pada dokumen kependudukan memang
   ditulis kapital, dan menyeragamkannya membuat daftar warga jauh lebih rapi
   dibaca ketika satu orang mengetik "Bekasi" sementara yang lain "BEKASI".

   Sebelumnya aturan ini dipasang menyeluruh ke SETIAP tabel dan SETIAP kolom
   isian di aplikasi. Akibatnya keterangan transaksi keuangan, isi pengumuman,
   judul artikel, nama lowongan, sampai catatan surat ikut berteriak kapital -
   padahal kalimat bebas yang seluruhnya kapital justru lebih sulit dibaca dan
   terkesan membentak. Karena itu sekarang disasar lewat penanda modul pada
   <body> yang dipasang includes/header.php.
   ======================================== */

body[data-modul="warga"] .table tbody td,
body[data-modul="kk"] .table tbody td,
body[data-modul="dpt"] .table tbody td {
    text-transform: uppercase;
}

body[data-modul="warga"] input.form-control,
body[data-modul="warga"] textarea.form-control,
body[data-modul="kk"] input.form-control,
body[data-modul="kk"] textarea.form-control,
body[data-modul="dpt"] input.form-control,
body[data-modul="dpt"] textarea.form-control {
    text-transform: uppercase;
}

/* Kolom yang isinya bukan nama orang atau tempat tetap apa adanya. Email dan
   sandi bahkan bisa RUSAK kalau ikut dikapitalkan - sebagian sistem surel
   membedakan huruf besar-kecil, dan sandi hampir selalu membedakannya.
   Kolom pencarian juga dikecualikan supaya kata yang diketik tetap terbaca
   wajar oleh pengetiknya. */
body[data-modul="warga"] input[type="email"].form-control,
body[data-modul="warga"] input[type="password"].form-control,
body[data-modul="warga"] input[type="url"].form-control,
body[data-modul="warga"] input[type="number"].form-control,
body[data-modul="warga"] input[type="date"].form-control,
body[data-modul="warga"] input[type="file"].form-control,
body[data-modul="warga"] input[type="search"].form-control,
body[data-modul="kk"] input[type="email"].form-control,
body[data-modul="kk"] input[type="password"].form-control,
body[data-modul="kk"] input[type="url"].form-control,
body[data-modul="kk"] input[type="number"].form-control,
body[data-modul="kk"] input[type="date"].form-control,
body[data-modul="kk"] input[type="file"].form-control,
body[data-modul="kk"] input[type="search"].form-control,
body[data-modul="dpt"] input[type="email"].form-control,
body[data-modul="dpt"] input[type="password"].form-control,
body[data-modul="dpt"] input[type="url"].form-control,
body[data-modul="dpt"] input[type="number"].form-control,
body[data-modul="dpt"] input[type="date"].form-control,
body[data-modul="dpt"] input[type="file"].form-control,
body[data-modul="dpt"] input[type="search"].form-control,
body input[name="username"].form-control,
body input[name="email"].form-control,
/* Kolom pencarian DataTables ada di luar form module, jadi disebut terpisah. */
.dataTables_filter input {
    text-transform: none;
}