/* =====================================================================
   BantuBrand — Panel Admin  ·  public/asset/diadmin/css/admin.css
   Satu berkas mandiri: tanpa Bootstrap / tema luar. Ikon: Font Awesome (CDN di _head.php).
   Daftar isi:  1 Token · 2 Dasar · 3 Utilitas · 4 Halaman tamu · 5 Formulir & tombol
                6 Notifikasi · 7 Kerangka admin · 8 Dashboard · 9 Responsif
   ===================================================================== */

/* ---------- 1. TOKEN ---------- */
:root{
  --brand:#da09ac; --brand-2:#a8068a; --brand-soft:#fdeaf8; --brand-ring:rgba(218,9,172,.18);
  --ink:#171728; --ink-soft:#4b4c66; --muted:#8b8da6;
  --line:#e8e9f2; --line-soft:#f0f1f7; --paper:#f5f6fb; --surface:#fff;
  --side:#17172b; --side-2:#212140; --side-text:#b7b9d3;
  --ok:#12a150; --ok-soft:#e5f7ed; --bad:#e5484d; --bad-soft:#fdecec;
  --warn:#d98200; --warn-soft:#fff4de; --info:#2f6fed; --info-soft:#e8f0ff;
  --r:16px; --r-sm:11px;
  --shadow:0 1px 2px rgba(23,23,40,.04),0 8px 24px rgba(23,23,40,.06);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

/* ---------- 2. DASAR ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;font-family:var(--font);font-size:14px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{margin:0;line-height:1.3;font-weight:700;}
p{margin:0 0 12px;}
a{color:var(--brand);text-decoration:none;} a:hover{color:var(--brand-2);text-decoration:underline;}
img{max-width:100%;}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;background:rgba(23,23,40,.07);padding:2px 6px;border-radius:6px;}
small{font-size:12px;} b{font-weight:700;}
ul,ol{margin:0;padding:0;}
table{border-collapse:collapse;width:100%;}
[hidden]{display:none !important;}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

/* ---------- 3. UTILITAS (yang dipakai view) ---------- */
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 20px;}
.container-fluid{width:100%;padding:0;}
.text-center{text-align:center;} .text-left{text-align:left;} .text-white{color:#fff;} .text-nowrap{white-space:nowrap;}
.mx-auto{margin-left:auto;margin-right:auto;} .w-100{width:100%;} .h-100{height:100%;}
.mt-2{margin-top:8px;} .mt-4{margin-top:24px;} .mb-0{margin-bottom:0;} .mb-3{margin-bottom:16px;} .mb-4{margin-bottom:24px;}
.py-2{padding-top:8px;padding-bottom:8px;} .py-5{padding-top:48px;padding-bottom:48px;}
.list-unstyled{list-style:none;}
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;row-gap:0;}
.row > [class*="col-"]{grid-column:1 / -1;min-width:0;}
@media (min-width:1200px){
  .col-xl-8{grid-column:span 8 !important;} .col-xl-4{grid-column:span 4 !important;}
  .col-xl-7{grid-column:span 7 !important;} .col-xl-5{grid-column:span 5 !important;}
  .mb-xl-5{margin-bottom:36px;} .mt-xl-5{margin-top:36px;} .py-xl-3{padding-top:16px;padding-bottom:16px;}
}

/* ---------- 4. HALAMAN TAMU (gerbang · login · setup) ---------- */
body.bb-halaman-tamu{background:
  radial-gradient(900px 500px at 8% -10%,rgba(218,9,172,.16),transparent 60%),
  radial-gradient(800px 500px at 100% 0%,rgba(47,111,237,.12),transparent 55%),var(--paper);}
.bg-page{min-height:100vh;display:flex;align-items:center;}
.bb-merek{margin-bottom:6px;}
.bb-logo-teks{font-size:34px;font-weight:800;letter-spacing:-.8px;background:linear-gradient(135deg,var(--brand),#7b2ff7);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;}
.bb-sub-merek{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);padding:4px 12px;border-radius:100px;}
.bb-kartu{width:100%;max-width:460px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:34px 32px;box-shadow:var(--shadow);}
.bb-judul-kartu{font-size:21px;font-weight:800;margin-bottom:8px;letter-spacing:-.3px;}
.bb-teks-kartu{color:var(--ink-soft);margin-bottom:20px;}
.bb-poin{list-style:none;margin:0 0 24px;display:grid;gap:10px;}
.bb-poin li{display:flex;gap:12px;align-items:center;color:var(--ink-soft);font-weight:500;}
.bb-poin i{width:34px;height:34px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:14px;flex:none;}
.bb-langkah{margin:0 0 16px;padding-left:20px;display:grid;gap:10px;color:var(--ink-soft);}
.bb-bantuan{font-size:12.5px;color:var(--muted);}
.bb-tautan-kecil{font-size:13px;font-weight:600;color:var(--muted);} .bb-tautan-kecil:hover{color:var(--brand);text-decoration:none;}
.copyright-w3layouts p{margin:0;font-size:12px;color:var(--muted);}
.copyright-w3layouts{padding-top:22px;}

/* ---------- 5. FORMULIR & TOMBOL ---------- */
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--ink);}
.form-group label small{font-weight:400;color:var(--muted);}
.form-control,.bb-input{display:block;width:100%;height:48px;padding:0 15px;font:inherit;font-size:14.5px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);transition:border-color .15s,box-shadow .15s;}
.form-control::placeholder{color:#b3b5c9;}
.form-control:hover{border-color:#d3d5e4;}
.form-control:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-ring);}
.bb-sandi{position:relative;} .bb-sandi .form-control{padding-right:104px;}
.bb-lihat{position:absolute;right:6px;top:6px;height:36px;padding:0 12px;border:0;border-radius:8px;background:var(--line-soft);color:var(--ink-soft);font:inherit;font-size:12px;font-weight:700;cursor:pointer;}
.bb-lihat:hover{background:var(--line);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;font:inherit;font-size:14px;font-weight:700;border:0;border-radius:var(--r-sm);cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .15s,background .15s,opacity .15s;}
.btn:hover{text-decoration:none;} .btn:active{transform:translateY(1px);} .btn[disabled],.btn:disabled{opacity:.6;cursor:not-allowed;}
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 6px 16px rgba(218,9,172,.28);}
.btn-primary:hover{color:#fff;box-shadow:0 8px 22px rgba(218,9,172,.38);}
.bb-tombol-besar{width:100%;height:50px;font-size:15px;}
.btn-info{color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);}
.btn-info:hover{background:var(--line-soft);color:var(--ink);}
.navbar-btn{width:42px;height:42px;padding:0;}

/* ---------- 6. NOTIFIKASI ---------- */
.bb-alert{display:block;padding:12px 15px;border-radius:var(--r-sm);font-size:13px;line-height:1.55;margin-bottom:16px;border:1px solid transparent;}
.bb-alert ul{padding-left:18px;} .bb-alert i{margin-right:4px;}
.bb-alert-galat{background:var(--bad-soft);color:#b42328;border-color:#f7cfd0;}
.bb-alert-info{background:var(--info-soft);color:#1f4fb5;border-color:#cfdffb;}
.bb-alert-peringatan{background:var(--warn-soft);color:#8a5200;border-color:#f6dfae;}
.bb-alert-sukses{background:var(--ok-soft);color:#0c7a3c;border-color:#c5ecd6;}
.bb-alert code{background:rgba(255,255,255,.7);}
.bb-kecil{font-size:12.5px;padding:10px 13px;margin-bottom:10px;}
a.bb-banner{text-decoration:none;font-size:13.5px;} a.bb-banner:hover{text-decoration:none;filter:brightness(.97);}

/* ---------- 7. KERANGKA ADMIN ---------- */
body.bb-halaman-admin{background:var(--paper);}
.wrapper{display:flex;min-height:100vh;}

#sidebar{width:264px;flex:none;position:sticky;top:0;height:100vh;overflow-y:auto;background:linear-gradient(180deg,var(--side),var(--side-2));color:var(--side-text);transition:width .22s ease,transform .22s ease;z-index:40;}
.sidebar-header{display:flex;align-items:center;padding:24px 22px 18px;}
.sidebar-header h1{font-size:21px;font-weight:800;letter-spacing:-.5px;}
.sidebar-header h1 a{color:#fff;text-decoration:none;}
.sidebar-header h1 a::first-letter{color:var(--brand);}
.sidebar-header span{display:none;font-size:22px;font-weight:800;color:#fff;margin:0 auto;}
.profile-bg{height:3px;margin:0 22px 12px;border-radius:3px;background:linear-gradient(90deg,var(--brand),#7b2ff7,transparent);opacity:.9;}
#sidebar .components{padding:6px 12px 24px;display:grid;gap:4px;}
#sidebar .components a{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:12px;color:var(--side-text);font-weight:600;font-size:14px;text-decoration:none;transition:background .15s,color .15s;}
#sidebar .components a i{width:20px;text-align:center;font-size:15px;opacity:.9;}
#sidebar .components a:hover{background:rgba(255,255,255,.07);color:#fff;}
#sidebar .components li.active a{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 6px 16px rgba(218,9,172,.35);}
#sidebar .components li.bb-segera a{opacity:.45;cursor:default;} #sidebar .components li.bb-segera a:hover{background:none;color:var(--side-text);}
#sidebar .components em{margin-left:auto;font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;border-radius:100px;background:rgba(255,255,255,.1);}

#content{flex:1;min-width:0;padding:0 30px 30px;}

/* bilah atas */
.navbar{position:sticky;top:0;z-index:30;margin:0 -30px 26px;padding:14px 30px;background:rgba(245,246,251,.86);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);}
.navbar .container-fluid{display:flex;align-items:center;gap:16px;}
.bb-judul-halaman{font-size:18px;font-weight:800;letter-spacing:-.3px;}
.bb-profil{margin-left:auto;position:relative;}
.bb-profil-tombol{display:flex;align-items:center;gap:10px;padding:5px 12px 5px 5px;border:1px solid var(--line);border-radius:100px;background:var(--surface);font:inherit;cursor:pointer;color:var(--ink);transition:box-shadow .15s;}
.bb-profil-tombol:hover{box-shadow:var(--shadow);}
.bb-profil-nama{font-size:13px;font-weight:700;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bb-profil-tombol .fa-angle-down{color:var(--muted);font-size:13px;}
.bb-ava{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--brand),#7b2ff7);color:#fff;font-size:12px;font-weight:800;}
.bb-ava img{width:100%;height:100%;object-fit:cover;display:block;}
.bb-ava.kecil{width:32px;height:32px;font-size:11px;margin-right:10px;vertical-align:middle;}
.bb-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:240px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(23,23,40,.16);padding:8px;z-index:60;}
.bb-menu-kepala{padding:10px 12px 12px;border-bottom:1px solid var(--line-soft);margin-bottom:6px;}
.bb-menu-kepala b{display:block;font-size:14px;} .bb-menu-kepala small{color:var(--muted);word-break:break-all;}
.bb-menu a,.bb-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink-soft);border-radius:9px;cursor:pointer;text-align:left;text-decoration:none;}
.bb-menu a:hover,.bb-menu button:hover{background:var(--line-soft);color:var(--ink);text-decoration:none;}
.bb-menu button{color:var(--bad);} .bb-menu button:hover{background:var(--bad-soft);color:var(--bad);}
.bb-menu form{margin:0;}

/* ---------- 8. DASHBOARD ---------- */
.bb-sapaan{margin-bottom:22px;} .bb-sapaan h2{font-size:26px;font-weight:800;letter-spacing:-.5px;} .bb-sapaan p{color:var(--muted);margin:4px 0 0;}

.bb-kartu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px;margin-bottom:22px;}
.bb-stat{position:relative;overflow:hidden;color:#fff;border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow);}
.bb-stat.bg-primary{background:linear-gradient(135deg,#e00fb4,#8a2be2);}
.bb-stat.bg-success{background:linear-gradient(135deg,#12a150,#0d7a6c);}
.bb-stat.bg-danger{background:linear-gradient(135deg,#f0525a,#c9304a);}
.bb-stat.bg-warning{background:linear-gradient(135deg,#f5a524,#e5742b);}
.bb-stat.bb-abu{background:var(--surface);color:var(--ink);border:1px solid var(--line);}
.bb-stat .bb-ikon{position:absolute;right:16px;top:16px;font-size:44px;opacity:.18;}
.bb-stat.bb-abu .bb-ikon{color:var(--muted);opacity:.25;}
.bb-label{font-size:13px;font-weight:600;opacity:.92;}
.bb-angka{font-size:31px;font-weight:800;letter-spacing:-.8px;line-height:1.2;margin:4px 0 2px;}
.bb-ket{font-size:12px;opacity:.88;}
.bb-stat.bb-abu .bb-ket,.bb-stat.bb-abu .bb-label{color:var(--muted);opacity:1;}

.outer-w3-agile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);}
.tittle-w3-agileits{font-size:15.5px;font-weight:800;letter-spacing:-.2px;}

.bb-legenda{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--ink-soft);margin-bottom:14px;}
.bb-legenda span{display:inline-flex;align-items:center;gap:7px;}
.bb-kotak{display:inline-block;width:11px;height:11px;border-radius:4px;} .bb-kotak.a,.bb-batang.a{background:var(--brand);} .bb-kotak.b,.bb-batang.b{background:#7b2ff7;}
.bb-bars{display:flex;gap:8px;height:210px;padding-top:6px;}
.bb-kolom{flex:1;min-width:0;display:flex;flex-direction:column;}
.bb-pasang{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:3px;border-bottom:1px solid var(--line);}
.bb-batang{display:block;width:42%;max-width:14px;border-radius:6px 6px 0 0;transition:opacity .15s;} .bb-kolom:hover .bb-batang{opacity:.8;}
.bb-kolom small{text-align:center;color:var(--muted);font-size:11px;margin-top:6px;}
.bb-kolom small.bb-hari-ini{color:var(--brand);font-weight:800;}
.bb-catatan{font-size:12px;color:var(--muted);margin-top:14px;}

.bb-daftar{list-style:none;margin:0 0 16px;}
.bb-daftar li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:13.5px;}
.bb-daftar li:last-child{border-bottom:0;} .bb-daftar span{color:var(--ink-soft);} .bb-daftar b{font-weight:800;}
.bb-sorot{background:linear-gradient(135deg,var(--brand-soft),#f1ebff);border-radius:14px;padding:16px 18px;}
.bb-sorot small{display:block;color:var(--ink-soft);font-weight:600;} .bb-sorot b{display:block;font-size:24px;font-weight:800;letter-spacing:-.6px;margin:2px 0;color:var(--brand-2);} .bb-sorot em{font-style:normal;font-size:12px;color:var(--muted);}

.bb-tabel th{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);text-align:left;padding:0 12px 10px;border-bottom:1px solid var(--line);}
.bb-tabel td{padding:12px;border-bottom:1px solid var(--line-soft);vertical-align:middle;font-size:13.5px;}
.bb-tabel tbody tr:last-child td{border-bottom:0;} .bb-tabel tbody tr:hover{background:#fafaff;}
.bb-tabel td:first-child,.bb-tabel th:first-child{padding-left:0;}
.bb-nm{display:inline-block;vertical-align:middle;line-height:1.35;} .bb-nm b{display:block;font-size:13.5px;} .bb-nm small{color:var(--muted);}
.badge{display:inline-block;padding:3px 11px;border-radius:100px;font-size:11.5px;font-weight:700;line-height:1.5;text-transform:capitalize;}
.badge.bg-success{background:var(--ok-soft);color:var(--ok) !important;} .badge.bg-danger{background:var(--bad-soft);color:var(--bad) !important;}

.bb-kosong{text-align:center;padding:34px 12px;color:var(--muted);}
.bb-kosong i{font-size:38px;opacity:.35;margin-bottom:10px;display:block;} .bb-kosong p{margin:0;font-size:13px;}

/* ---------- 9. RESPONSIF ---------- */
@media (min-width:901px){      /* desktop: .active = sidebar diciutkan jadi rel ikon */
  #sidebar.active{width:78px;}
  #sidebar.active .sidebar-header h1{display:none;} #sidebar.active .sidebar-header span{display:block;}
  #sidebar.active .components{padding-left:10px;padding-right:10px;}
  #sidebar.active .components a{font-size:0;justify-content:center;padding:12px 0;}
  #sidebar.active .components a i{font-size:17px;width:auto;} #sidebar.active .components em{display:none;}
}
@media (max-width:900px){      /* ponsel/tablet: sidebar geser dari kiri, .active = terbuka */
  #sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);box-shadow:none;}
  #sidebar.active{transform:none;box-shadow:0 0 0 100vmax rgba(23,23,40,.45);}
  #content{padding:0 16px 24px;}
  .navbar{margin:0 -16px 20px;padding:12px 16px;}
}
@media (max-width:600px){
  .bb-profil-nama{display:none;} .bb-profil-tombol{padding-right:10px;}
  .bb-kartu{padding:26px 20px;border-radius:18px;} .py-5{padding-top:28px;padding-bottom:28px;}
  .bb-sapaan h2{font-size:22px;} .outer-w3-agile{padding:18px;} .bb-bars{height:170px;gap:4px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;}}