/* ==========================================================================
   IKAPA — Stylesheet bersama untuk seluruh halaman (public & admin)
   Dimuat lewat asset('css/style.css') -> otomatis kena cache-busting (?v=filemtime)
   ========================================================================== */

html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', sans-serif; }
.font-display { font-family: 'Amiri', serif; }

.skip-link{position:absolute;left:-9999px;top:0;background:#0F5132;color:#fff;padding:.6rem 1rem;z-index:100;border-radius:0 0 .5rem 0;}
.skip-link:focus{left:0;}

/* Motif geometris 8-titik (girih) — signature pattern, dipakai berulang di beberapa halaman */
.star-pattern{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='0.9'%3E%3Crect x='14' y='14' width='16' height='16'/%3E%3Crect x='14' y='14' width='16' height='16' transform='rotate(45 22 22)'/%3E%3C/g%3E%3C/svg%3E");
  background-size:44px 44px;
}

.hero-bg, .brand-panel { background:radial-gradient(120% 100% at 15% 0%,#146840 0%,#0F5132 45%,#0B3D26 100%); }

/* Bingkai arch (mihrab) — elemen visual berulang khas pesantren */
.arch-frame{
  width:min(78vw,300px); height:340px; margin:0 auto; position:relative;
  border-radius:500px 500px 0 0; overflow:hidden;
  background:linear-gradient(160deg,#1B7A4D,#0B3D26);
  border:6px solid #D4AF37; box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.arch-frame::before{content:"";position:absolute;inset:0;opacity:.35;background-image:inherit;}
.arch-frame.arch-frame--sm{width:min(60vw,220px);height:250px;border-width:5px;}

/* Pembatas skyline berbentuk kubah — pengganti garis pembatas biasa */
.arch-divider{height:34px;background-color:#0B3D26;background-image:radial-gradient(circle at 50% 100%,#FBF8F1 0 17px,transparent 17px);background-size:34px 34px;background-repeat:repeat-x;}

.hero-slide{transition:opacity .7s ease;}
.hero-slide.is-hidden{opacity:0;position:absolute;inset:0;pointer-events:none;}
.hero-slide.is-active{opacity:1;position:relative;}

[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
[data-reveal].in-view{opacity:1;transform:translateY(0);}

.progress-fill{width:0%;transition:width 1.1s cubic-bezier(.22,.9,.3,1);}

/* --------------------------------------------------------------------------
   Bottom navigation (mobile-only) — dipakai di layout publik & admin.
   Kelima item berbagi struktur flex yang IDENTIK (column, center, gap sama)
   supaya presisi; hanya "bungkus ikon" tombol tengah yang lebih besar &
   diangkat lewat margin-top negatif (bukan position:absolute), sehingga
   tetap ikut alur flex yang sama dengan 4 tombol lain — label selalu
   sejajar persis di semua tombol.
   -------------------------------------------------------------------------- */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:70;height:64px;background:#fff;display:flex;box-shadow:0 -6px 24px rgba(11,61,38,.10);padding-bottom:env(safe-area-inset-bottom);}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;color:#4B5750;text-decoration:none;position:relative;}
.bottom-nav a .nav-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;}
.bottom-nav a .nav-icon svg{width:100%;height:100%;}
.bottom-nav a.is-active{color:#0F5132;}
.bottom-nav a.fab-slot{color:#0F5132;font-weight:700;}
.bottom-nav a.fab-slot .nav-icon{width:56px;height:56px;margin-top:-30px;border-radius:9999px;background:linear-gradient(150deg,#1B7A4D,#0B3D26);border:3px solid #D4AF37;box-shadow:0 10px 22px rgba(15,81,50,.4),0 0 0 6px #fff;}
.bottom-nav a.fab-slot .nav-icon svg{width:26px;height:26px;color:#fff;}
.bottom-nav a.fab-slot .nav-icon img{width:32px;height:32px;border-radius:9999px;object-fit:cover;}
.bottom-nav a.fab-slot .nav-badge{position:absolute;top:-28px;right:calc(50% - 26px);background:#D4AF37;color:#0B3D26;font-size:9px;font-weight:800;width:16px;height:16px;border-radius:9999px;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff;}

@media (min-width:768px){ .bottom-nav.is-public{display:none;} }
@media (min-width:768px){ .bottom-nav.is-alumni{display:none;} }
@media (min-width:1024px){ .bottom-nav.is-admin{display:none;} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;} }

html.dark .bottom-nav{background:#0F231A;box-shadow:0 -6px 24px rgba(0,0,0,.35);}
html.dark .bottom-nav a{color:#9FB3A9;}
html.dark .bottom-nav a.is-active{color:#7CBC97;}
html.dark .bottom-nav a.fab-slot{color:#E6C766;}
html.dark .bottom-nav a.fab-slot .nav-icon{box-shadow:0 10px 22px rgba(0,0,0,.5),0 0 0 6px #0F231A;}

/* --------------------------------------------------------------------------
   Admin dashboard: sidebar off-canvas + item nav sidebar
   -------------------------------------------------------------------------- */
.sidebar{transition:transform .25s ease;}
@media (max-width:1023px){ .sidebar{position:fixed;inset:0 auto 0 0;transform:translateX(-100%);z-index:60;} .sidebar.is-open{transform:translateX(0);} }
.side-nav-item{display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem;border-radius:.65rem;font-size:.875rem;font-weight:600;color:#D3E9DC;}
.side-nav-item svg{width:18px;height:18px;flex-shrink:0;}
.side-nav-item:hover{background:rgba(255,255,255,.06);}
.side-nav-item.is-active{background:#D4AF37;color:#0B3D26;}

/* Override tampilan default DataTables (v2.3.8) agar senada tema.
   DataTables 2 sudah membuat baris kontrolnya sendiri jadi flexbox
   (.dt-layout-row), jadi di sini kita tinggal merapikan ELEMEN DI
   DALAMNYA — bukan lagi menulis ulang tata letaknya dari nol. */
table.dataTable{border-collapse:separate !important;border-spacing:0;font-size:.875rem;width:100%;}
table.dataTable thead th{background:#EAF4EE;color:#0B3D26;font-weight:700;border-bottom:1px solid rgba(11,61,38,.1) !important;padding:.75rem 1rem !important;white-space:nowrap;}
table.dataTable tbody td{padding:.75rem 1rem !important;border-bottom:1px solid rgba(11,61,38,.06);vertical-align:middle;}
table.dataTable tbody tr:last-child td{border-bottom:none;}

html.dark table.dataTable thead th{background:#0F231A;color:#EAF4EE;border-bottom-color:rgba(255,255,255,.08) !important;}
html.dark table.dataTable tbody td{border-bottom-color:rgba(255,255,255,.06);color:#D3E9DC;}

/* Baris atas (length + search) dan baris bawah (info + paging) — DataTables
   sendiri sudah menaruh keduanya sebagai flex row rata kiri/kanan; di sini
   cuma menambah jarak & garis pemisah supaya menyatu rapi dengan kartu. */
.dt-container .dt-layout-row:has(.dt-length){margin-bottom:1rem;}
.dt-container .dt-layout-row:has(.dt-paging){margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(11,61,38,.08);}

.dt-length label,
.dt-search label{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;color:#4B5750;margin:0 !important;white-space:nowrap;}
.dt-length select{height:2.25rem !important;border:1px solid rgba(11,61,38,.2) !important;border-radius:.5rem !important;padding:0 2rem 0 .6rem !important;font-size:.8rem !important;background-color:#fff !important;color:#1B231D !important;}

.dt-search{position:relative;}
.dt-search::before{content:"";position:absolute;left:.9rem;top:50%;width:14px;height:14px;transform:translateY(-50%);pointer-events:none;z-index:1;background-repeat:no-repeat;background-size:contain;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5750' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4' stroke-linecap='round'/%3E%3C/svg%3E");}
.dt-search input{height:2.25rem !important;width:220px !important;max-width:100%;background:#FBF8F1 !important;border:1px solid rgba(11,61,38,.2) !important;border-radius:.6rem !important;padding:0 .8rem 0 2.75rem !important;font-size:.8rem !important;box-sizing:border-box;margin:0 !important;color:#1B231D !important;}
.dt-search input::placeholder{color:#8A9490;}
.dt-search input:focus{outline:none;background:#fff !important;border-color:#1B7A4D !important;box-shadow:0 0 0 2px rgba(27,122,77,.15);}

html.dark .dt-length label,
html.dark .dt-search label{color:#9FB3A9;}
html.dark .dt-length select{background-color:#10261C !important;border-color:rgba(255,255,255,.15) !important;color:#EAF4EE !important;}
html.dark .dt-search input{background:#10261C !important;border-color:rgba(255,255,255,.15) !important;color:#EAF4EE !important;}
html.dark .dt-search input:focus{background:#0F231A !important;border-color:#4E9E71 !important;}
html.dark .dt-search::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239FB3A9' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4' stroke-linecap='round'/%3E%3C/svg%3E");}


.dt-info{margin:0;font-size:.75rem;color:#4B5750;display:flex;align-items:center;gap:.35rem;white-space:nowrap;flex-shrink:1;overflow:hidden;text-overflow:ellipsis;}
.dt-info .dt-info-icon{width:14px;height:14px;flex-shrink:0;color:#8A9490;}
.dt-paging{margin:0;display:flex;flex-shrink:0;}
.dt-container .dt-paging .dt-paging-button{display:inline-flex !important;align-items:center !important;justify-content:center !important;min-width:2rem !important;height:2rem !important;border-radius:.5rem !important;padding:0 .5rem !important;margin-left:2px !important;border:1px solid transparent !important;font-size:.8rem !important;line-height:1 !important;color:#33403A !important;background:transparent;}
.dt-container .dt-paging .dt-paging-button:hover{background:#EAF4EE !important;border-color:transparent !important;color:#0F5132 !important;}
.dt-container .dt-paging .dt-paging-button.current{background:#0F5132 !important;color:#fff !important;border-color:#0F5132 !important;}
.dt-container .dt-paging .dt-paging-button.disabled{opacity:.35;pointer-events:none;}
.dt-paging .dt-paging-button .dt-page-icon{width:14px;height:14px;display:block;}
.badge{font-size:.7rem;font-weight:700;padding:.2rem .6rem;border-radius:9999px;display:inline-block;}
.badge-approved{background:#D3E9DC;color:#0F5132;}
.badge-pending{background:#F7ECC4;color:#8F711F;}
.badge-rejected{background:#FBDAD6;color:#9B3B30;}
html.dark .badge-approved{background:rgba(78,158,113,.2);color:#7CBC97;}
html.dark .badge-pending{background:rgba(212,175,55,.2);color:#E6C766;}
html.dark .badge-rejected{background:rgba(184,73,63,.2);color:#E8877D;}

html.dark .dt-container .dt-layout-row:has(.dt-paging){border-top-color:rgba(255,255,255,.08);}
html.dark .dt-info{color:#9FB3A9;}
html.dark .dt-container .dt-paging .dt-paging-button{color:#D3E9DC !important;}
html.dark .dt-container .dt-paging .dt-paging-button:hover{background:rgba(255,255,255,.08) !important;color:#EAF4EE !important;}

/* DataTables sendiri men-stack baris kontrol (length/search/info/paging)
   jadi vertikal di bawah 768px (lihat dataTables.dataTables.css bawaan).
   Kita batalkan itu supaya tetap sejajar kiri-kanan di semua ukuran layar
   — kolom tabel yang menyesuaikan lewat Responsive di bawah, bukan
   toolbar-nya yang menumpuk. */
@media screen and (max-width:767px){
  .dt-container .dt-layout-row:not(.dt-layout-table){display:flex !important;flex-wrap:nowrap !important;}
  .dt-container .dt-layout-row:not(.dt-layout-table) .dt-layout-cell{display:flex !important;text-align:left !important;}
  .dt-container .dt-layout-row:not(.dt-layout-table) .dt-layout-cell > *{margin:0 !important;}
}
@media (max-width:640px){
  .dt-search input{width:auto;min-width:0;flex:1 1 auto;}
  .dt-info{font-size:.7rem;}
  .dt-paging .dt-paging-button{min-width:1.75rem;height:1.75rem;padding:0 .35rem !important;}
}

/* --------------------------------------------------------------------------
   DataTables Responsive — kolom yang tersembunyi di layar sempit dibuka
   lewat tanda "+" di depan Nama Lengkap (mode inline, bawaan ekstensi).
   -------------------------------------------------------------------------- */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dt-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dt-control:before{
  background-color:#1B7A4D;box-shadow:0 0 0 rgba(0,0,0,0);border:none;line-height:1.1;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dt-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dt-control:before{
  background-color:#B8912A;
}
table.dataTable > tbody > tr.child{background:#FBF8F1;}
table.dataTable > tbody > tr.child ul.dtr-details{padding:.5rem 1rem;margin:0;list-style:none;}
table.dataTable > tbody > tr.child ul.dtr-details li{padding:.4rem 0;border-bottom:1px dashed rgba(11,61,38,.12);font-size:.8rem;}
table.dataTable > tbody > tr.child ul.dtr-details li:last-child{border-bottom:none;}
table.dataTable > tbody > tr.child span.dtr-title{font-weight:700;color:#0B3D26;min-width:110px;display:inline-block;}

html.dark table.dataTable.dtr-inline.collapsed > tbody > tr > td.dt-control:before{background-color:#4E9E71;}
html.dark table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dt-control:before{background-color:#D4AF37;}
html.dark table.dataTable > tbody > tr.child{background:#0F231A;}
html.dark table.dataTable > tbody > tr.child ul.dtr-details li{border-bottom-color:rgba(255,255,255,.1);}
html.dark table.dataTable > tbody > tr.child span.dtr-title{color:#EAF4EE;}

/* Toast kecil (dipakai halaman login untuk pesan error) */
.toast{transition:opacity .3s ease, transform .3s ease;}

/* --------------------------------------------------------------------------
   Mode Gelap — switch on/off ala iOS, dipakai di drawer publik & sidebar admin
   -------------------------------------------------------------------------- */
.theme-switch{width:44px;height:24px;border-radius:9999px;background:rgba(0,0,0,.15);position:relative;flex-shrink:0;transition:background .2s ease;border:none;cursor:pointer;}
.theme-switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.theme-switch[aria-checked="true"]{background:#1B7A4D;}
.theme-switch[aria-checked="true"]::after{transform:translateX(20px);}
html.dark .theme-switch{background:rgba(255,255,255,.15);}

.theme-icon-toggle .icon-sun{display:none;}
.theme-icon-toggle .icon-moon{display:block;}
html.dark .theme-icon-toggle .icon-sun{display:block;}
html.dark .theme-icon-toggle .icon-moon{display:none;}

/* --------------------------------------------------------------------------
   Drawer navigasi mobile (pengganti dropdown sederhana) — panel geser dari
   kiri + overlay gelap, dipakai di halaman publik.
   -------------------------------------------------------------------------- */
.drawer-overlay{position:fixed;inset:0;background:rgba(8,26,17,.55);z-index:80;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.drawer-overlay.is-open{opacity:1;pointer-events:auto;}
.drawer-panel{position:fixed;top:0;bottom:0;left:0;width:min(88vw,340px);background:#FBF8F1;z-index:90;transform:translateX(-100%);transition:transform .3s cubic-bezier(.22,.9,.3,1);overflow-y:auto;box-shadow:12px 0 40px rgba(0,0,0,.25);}
.drawer-panel.is-open{transform:translateX(0);}
.drawer-nav-item{display:flex;align-items:center;gap:.85rem;padding:.7rem .5rem;border-radius:.75rem;color:#33403A;text-decoration:none;font-weight:600;font-size:.9rem;}
.drawer-nav-item:hover{background:rgba(11,61,38,.05);}
.drawer-nav-item .drawer-icon{width:38px;height:38px;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.drawer-nav-item .drawer-chevron{margin-left:auto;color:#8A9490;}
.drawer-nav-item.is-active{background:rgba(27,122,77,.08);color:#0F5132;}
.drawer-nav-item--danger{color:#B8493F;}
.drawer-nav-item--danger:hover{background:rgba(184,73,63,.08);}

html.dark .drawer-panel{background:#0A1A13;box-shadow:12px 0 40px rgba(0,0,0,.5);}
html.dark .drawer-nav-item{color:#EAF4EE;}
html.dark .drawer-nav-item:hover{background:rgba(255,255,255,.05);}
html.dark .drawer-nav-item .drawer-chevron{color:#6B756F;}
html.dark .drawer-nav-item.is-active{background:rgba(78,158,113,.15);color:#7CBC97;}
html.dark .drawer-nav-item--danger{color:#E8877D;}
html.dark .drawer-nav-item--danger:hover{background:rgba(184,73,63,.12);}

/* Kartu interaktif area alumni — sedikit terangkat & bayangan lebih tebal saat hover/fokus */
.hover-lift{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.hover-lift:hover,.hover-lift:focus-visible{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(15,81,50,.25);}
html.dark .hover-lift:hover,html.dark .hover-lift:focus-visible{box-shadow:0 12px 24px -12px rgba(0,0,0,.5);}

/* Pemilih channel pembayaran (Iuran & Donasi) — radio disembunyikan (sr-only),
   kartu label-nya sendiri yang jadi tombol pilihan visual. */
.channel-opsi:has(input:checked){border-color:#146840;background:#EAF4EE;box-shadow:0 0 0 1.5px #146840;}
html.dark .channel-opsi:has(input:checked){background:rgba(20,104,64,.18);box-shadow:0 0 0 1.5px #4E9E71;}

/* Tab horizontal /dashboard/pengaturan — full-width, scrollable di
   mobile (overflow-x-auto pada wrapper). Tombol tidak aktif abu-abu
   netral, aktif hijau tebal + garis bawah (pola underline tab standar). */
.tab-pengaturan-btn{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;padding:.75rem 1.1rem;font-size:.825rem;font-weight:700;color:#6B756F;border-bottom:2.5px solid transparent;transition:color .15s ease,border-color .15s ease;}
.tab-pengaturan-btn:hover{color:#146840;}
.tab-pengaturan-btn.is-active{color:#0F5132;border-bottom-color:#146840;}
html.dark .tab-pengaturan-btn{color:#6B756F;}
html.dark .tab-pengaturan-btn:hover{color:#7CBC97;}
html.dark .tab-pengaturan-btn.is-active{color:#7CBC97;border-bottom-color:#4E9E71;}
.tab-panel-pengaturan.hidden{display:none;}

/* Indikator "Memuat data…" DataTables server-side (dt-processing) — BUG
   DITEMUKAN via screenshot pengguna: DataTables 2.x PUNYA CSS bawaan
   SENDIRI `div.dt-processing{position:absolute;top:50%;left:50%;
   width:200px;margin-left:-100px;margin-top:-22px;...}` (lihat CDN
   dataTables.dataTables.min.css) — SELECTOR itu (tag+class) SPECIFICITY-
   nya LEBIH TINGGI drpd `.dt-processing` polos yg SEBELUMNYA ditulis di
   sini, jadi override kita KALAH utk position/top/left/width/margin
   (HANYA background yg menang, krn DataTables tidak mendefinisikan
   ulang) — hasilnya: kotak transparan KECIL 200px doang di tengah,
   BUKAN overlay penuh — baris-baris di LUAR kotak 200px itu (tabel yg
   lebih lebar) tetap terlihat jelas TANPA backdrop sama sekali, persis
   yg terlihat "mengambang aneh menimpa data lama" di screenshot.
   DataTables JUGA membuat 4 titik loader BIRU bawaan sendiri di dalam
   div.dt-processing>div:last-child (warna rgb(2,117,216) — biru
   Bootstrap default, SAMA SEKALI tidak sesuai tema hijau IKAPA) —
   disembunyikan, diganti spinner sendiri via ::before. Diperbaiki
   dgn: (1) selector `div.dt-processing` (match specificity DataTables)
   + !important pd property yg DataTables sudah definisikan sendiri,
   (2) sembunyikan 4-dot loader biru bawaan, (3) inset:0 penuh + backdrop
   solid supaya SELURUH tabel tertutup rapi, bukan cuma kotak kecil di
   tengah. .dt-container perlu position:relative eksplisit — DataTables
   2.x TIDAK selalu menyetelnya sendiri, dan tanpa itu overlay absolute
   akan lepas relatif ke <body>. */
.dt-container{position:relative;}
div.dt-processing{position:absolute !important;inset:0 !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;margin:0 !important;padding:0 !important;display:flex;align-items:center;justify-content:center;gap:.6rem;background:rgba(251,248,241,.92);z-index:10;border-radius:.75rem;}
div.dt-processing>div:last-child{display:none !important;}
div.dt-processing::before{content:"";width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(11,61,38,.15);border-top-color:#1B7A4D;animation:dt-spin .7s linear infinite;flex-shrink:0;}
@keyframes dt-spin{to{transform:rotate(360deg);}}
html.dark div.dt-processing{background:rgba(10,26,19,.92);}
html.dark div.dt-processing::before{border-color:rgba(255,255,255,.15);border-top-color:#4E9E71;}