/* ==================================================================================
   SI-KORCAM BGN Agrabinta — antarmuka padat data (ala ERP), dominan biru navy BGN.
   Palet resmi BGN: #071e49 (biru gelap) • #92d05d (hijau terang)
                    #b5e0ea (biru muda) • #d1b06c (emas/Generasi Emas 2045)
   ================================================================================== */
:root{
  /* --- palet BGN --- */
  --navy:#071e49;
  --navy-800:#0a2a5e;
  --navy-700:#0e3672;
  --navy-600:#14448a;
  --navy-500:#1b5aa8;
  --emas:#d1b06c;
  --emas-tua:#a8863c;
  --hijau:#92d05d;
  --hijau-tua:#4e8b27;
  --biru-muda:#b5e0ea;
  --biru-muda-2:#e4f3f8;
  /* --- semantik --- */
  --teks:#0d1f38;
  --teks-2:#39536f;
  --muted:#64809e;
  --garis:#cfdcec;
  --garis-2:#e6eef7;
  --bg:#eef3f9;
  --putih:#fff;
  --merah:#c62828;
  --kuning:#a86a08;
  --ungu:#6d3bd4;
  --radius:10px;
  --radius-kecil:7px;
  --bayang:0 2px 8px rgba(7,30,73,.06);
  --bayang-2:0 8px 24px rgba(7,30,73,.12);
  --baris:31px;      /* tinggi baris tabel padat */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg);color:var(--teks);font-size:12.5px;line-height:1.45;
  -webkit-text-size-adjust:100%;
}
a{color:var(--navy-600);text-decoration:none}
a:hover{text-decoration:underline}
.iko,.logo-mark{flex:0 0 auto;display:block}
/* Logo tampilan: AUTO RESIZE — tinggi mengikuti header, lebar otomatis sesuai rasio asli logo.
   (logo lebar/landscape tetap tampil proporsional, tidak dipaksa jadi kotak persegi) */
.logo-gambar{
  flex:0 0 auto;
  height:var(--logo-tinggi,34px);   /* dapat diatur di Pengaturan Instansi */
  width:auto;                       /* lebar mengikuti rasio gambar */
  max-width:min(62vw,var(--logo-maks,190px));
  object-fit:contain;
  object-position:left center;
  background:#fff;
  border-radius:7px;
  padding:3px;
  box-shadow:0 1px 5px rgba(0,0,0,.18)
}
.logo-gambar.besar{
  height:calc(var(--logo-tinggi,34px) * 1.65);
  max-width:min(70vw,280px);
  border-radius:10px;padding:5px
}
/* teks brand harus tetap rapi walaupun logo lebar */
.topbar .brand > div{min-width:0}
.topbar .brand b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pilih-posyandu{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:6px;max-height:210px;overflow:auto;
  border:1px solid var(--garis);border-radius:var(--radius-kecil);padding:8px;background:#fbfdff
}
.pilih-item{display:flex;align-items:flex-start;gap:6px;font-size:11.5px;padding:4px 5px;border-radius:6px;cursor:pointer}
.pilih-item:hover{background:#eef6fd}
.pilih-item small{display:block;color:var(--muted);font-size:10px}
.logo-baris{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.logo-pratinjau{display:flex;align-items:center;gap:10px}
.logo-pratinjau img{
  width:74px;height:74px;object-fit:contain;background:#fff;border:1px solid var(--garis);
  border-radius:10px;padding:5px
}
h1,h2,h3,h4{margin:0}

/* ============================================================ topbar (compact) */
.topbar{
  background:linear-gradient(100deg,var(--navy) 0%,var(--navy-700) 58%,var(--navy-600) 100%);
  color:#fff;display:flex;align-items:center;gap:10px;padding:7px 12px;
  position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(7,30,73,.3);
  border-bottom:2px solid var(--emas);min-height:52px;
}
.topbar .menu-toggle{
  display:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;
  border-radius:8px;padding:6px 8px;cursor:pointer;align-items:center;gap:6px;font-family:inherit
}
.topbar .brand{display:flex;align-items:center;gap:9px;min-width:0}
.topbar .brand b{display:block;font-size:13.5px;line-height:1.1;letter-spacing:.35px}
.topbar .brand span{display:block;font-size:10.5px;color:var(--biru-muda);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .spacer{flex:1}
.topbar .who{font-size:10.5px;color:var(--biru-muda);text-align:right;line-height:1.3;white-space:nowrap}
.topbar .who b{color:#fff;font-size:12px;display:block}
.iconbtn{
  position:relative;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:8px;padding:6px 9px;
  font-size:11.5px;cursor:pointer;font-family:inherit;line-height:1
}
.iconbtn:hover{background:rgba(255,255,255,.2);text-decoration:none}
.badge-notif{
  position:absolute;top:-5px;right:-5px;background:#e53935;color:#fff;border-radius:999px;
  font-size:9.5px;font-weight:800;padding:0 5px;border:2px solid var(--navy-700);line-height:1.5
}

/* ============================================================ kerangka */
.shell{display:flex;align-items:flex-start;min-height:calc(100vh - 52px)}
.sidebar{
  width:214px;flex:0 0 214px;background:var(--putih);border-right:1px solid var(--garis);
  padding:8px 6px 24px;position:sticky;top:52px;align-self:stretch;
  max-height:calc(100vh - 52px);overflow:auto;scrollbar-width:thin;
}
.sidebar .grup{
  font-size:9px;text-transform:uppercase;letter-spacing:1.05px;color:#8fa4bd;
  margin:12px 8px 4px;font-weight:800
}
.sidebar a{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;color:var(--teks-2);
  font-size:12px;margin-bottom:1px;border-left:3px solid transparent
}
.sidebar a:hover{background:#f2f7fd;text-decoration:none;color:var(--navy-700)}
.sidebar a.aktif{background:linear-gradient(90deg,#e7f0fb,#fff);color:var(--navy-700);font-weight:800;border-left-color:var(--emas)}
.sidebar a .iko{color:#7d95b1}
.sidebar a.aktif .iko{color:var(--navy-600)}
.sidebar a .pill{margin-left:auto;background:#e53935;color:#fff;border-radius:999px;font-size:9.5px;padding:0 6px;font-weight:800;line-height:1.6}
.main{flex:1;min-width:0;padding:14px 16px 40px}
.footer{color:#7e93ab;font-size:10.5px;padding:10px 16px 22px;text-align:center;line-height:1.7}

/* ============================================================ judul halaman */
.pagehead{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:12px}
.pagehead h1{font-size:17px;letter-spacing:.15px;color:var(--navy)}
.pagehead p{margin:2px 0 0;color:var(--muted);font-size:11.5px}
.pagehead .aksi{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}

/* ============================================================ kartu */
.kartu{background:var(--putih);border:1px solid var(--garis);border-radius:var(--radius);margin-bottom:12px;box-shadow:var(--bayang);overflow:hidden}
.kartu > .kartu-head{
  padding:8px 12px;border-bottom:1px solid var(--garis-2);display:flex;gap:8px;align-items:center;
  background:linear-gradient(90deg,#f5f9fd,#fff);
}
.kartu > .kartu-head h2{font-size:12.5px;color:var(--navy-700);display:flex;align-items:center;gap:7px;font-weight:800}
.kartu > .kartu-head h2 .iko{color:var(--navy-600)}
.kartu > .kartu-head .kanan{margin-left:auto;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px}
.kartu .isi{padding:12px}
.grid2,.grid3{display:grid;gap:10px}
.grid2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.grid3{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* ============================================================ KPI padat */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:8px;margin-bottom:12px}
.stat{
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--radius);padding:9px 11px;
  box-shadow:var(--bayang);position:relative;overflow:hidden;min-width:0
}
.stat::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--navy-600)}
.stat .stat-head{display:flex;align-items:center;gap:6px}
.stat .stat-ikon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:#e7f0fb;color:var(--navy-600)}
.stat .label{font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:800;line-height:1.2}
.stat .nilai{font-size:21px;font-weight:800;color:var(--navy);margin-top:3px;line-height:1;font-variant-numeric:tabular-nums}
.stat .ket{font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.3}
.stat.kecil{padding:8px 10px}
.stat.kecil .nilai{font-size:17px}
.stat.hijau::before{background:var(--hijau-tua)} .stat.hijau .nilai{color:var(--hijau-tua)} .stat.hijau .stat-ikon{background:#eaf7e0;color:var(--hijau-tua)}
.stat.kuning::before{background:var(--emas)} .stat.kuning .nilai{color:var(--kuning)} .stat.kuning .stat-ikon{background:#fbf3e2;color:var(--emas-tua)}
.stat.merah::before{background:var(--merah)} .stat.merah .nilai{color:var(--merah)} .stat.merah .stat-ikon{background:#fdeaea;color:var(--merah)}
.stat.ungu::before{background:var(--ungu)} .stat.ungu .nilai{color:var(--ungu)} .stat.ungu .stat-ikon{background:#f1ebfd;color:var(--ungu)}
.stat.sky::before{background:#0b7ea0} .stat.sky .nilai{color:#0b7ea0} .stat.sky .stat-ikon{background:var(--biru-muda-2);color:#0b7ea0}
.stat.biru::before{background:var(--navy-600)}

/* ============================================================ infografis */
.info-grid{display:grid;grid-template-columns:minmax(270px,1fr) minmax(300px,1.35fr);gap:12px;margin-bottom:12px}
.info-donut{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.info-donut svg{flex:0 0 auto}
.info-legenda{list-style:none;margin:0;padding:0;font-size:11.5px;min-width:160px;flex:1}
.info-legenda li{display:flex;align-items:center;gap:7px;padding:4px 0;border-bottom:1px dashed var(--garis-2)}
.info-legenda li:last-child{border-bottom:none}
.info-legenda .titik{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.info-legenda .lbl{flex:1;color:var(--teks-2)}
.info-legenda b{font-variant-numeric:tabular-nums}
.info-legenda small{color:var(--muted);width:34px;text-align:right}
.info-batang{list-style:none;margin:0;padding:0}
.info-batang li{display:grid;grid-template-columns:104px 1fr 42px;align-items:center;gap:8px;padding:3.5px 0;font-size:11.5px}
.info-batang .bar-lbl{color:var(--teks-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info-batang .bar-track{background:#e9f0f9;border-radius:999px;height:9px;overflow:hidden}
.info-batang .bar-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--navy-600),var(--biru-muda))}
.info-batang .bar-val{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.info-progres{margin:8px 0}
.info-progres .ip-head{display:flex;justify-content:space-between;font-size:11px;color:var(--teks-2);margin-bottom:4px}
.info-progres .ip-track{background:#e9f0f9;border-radius:999px;height:10px;overflow:hidden}
.info-progres .ip-fill{display:block;height:100%;border-radius:999px;transition:width .4s}

/* kartu SPPG padat */
.sppg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.sppg-chip{
  display:flex;gap:10px;align-items:flex-start;padding:10px 11px;border:1px solid var(--garis);
  border-radius:var(--radius);background:linear-gradient(140deg,#fff,#f4f9fd);color:var(--teks)
}
.sppg-chip:hover{text-decoration:none;box-shadow:var(--bayang-2);border-color:var(--biru-muda)}
.sppg-chip .chip-ikon{width:32px;height:32px;border-radius:9px;background:#e7f0fb;color:var(--navy-600);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.sppg-chip .chip-isi{min-width:0}
.sppg-chip .chip-isi b{display:block;font-size:12px;color:var(--navy-700)}
.sppg-chip .chip-isi small{display:block;color:var(--muted);font-size:10.5px}
.sppg-chip .chip-pil{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}

/* ============================================================ tabel padat (ERP) */
.tabel-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tabel{width:100%;border-collapse:collapse;font-size:11.5px;min-width:520px}
table.tabel th{
  position:sticky;top:0;z-index:2;background:#eaf1f9;color:var(--navy-700);text-align:left;
  font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;padding:6px 8px;
  border-bottom:1px solid var(--garis);white-space:nowrap;font-weight:800
}
table.tabel td{padding:5px 8px;border-bottom:1px solid var(--garis-2);vertical-align:top;line-height:1.35}
table.tabel tbody tr:nth-child(even){background:#fafcfe}
table.tabel tbody tr:hover{background:#eef6fd}
table.tabel tbody tr:last-child td{border-bottom:none}
table.tabel tfoot td{padding:6px 8px;border-top:2px solid var(--garis);font-weight:800;background:#f4f8fc}
table.tabel td.num,table.tabel th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.tabel td.aksi,table.tabel th.aksi{white-space:nowrap}
table.tabel.compact td{padding:4px 7px}
table.tabel .sel-satu{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kosong{padding:18px 12px;text-align:center;color:var(--muted);font-size:12px}

/* ============================================================ badge & label */
.badge{display:inline-block;padding:1px 6px;border-radius:999px;font-size:10px;font-weight:800;white-space:nowrap;border:1px solid transparent;line-height:1.6}
.b-biru{background:#e7f0fb;color:var(--navy-600);border-color:#cbdcef}
.b-hijau{background:#eaf7e0;color:#41761f;border-color:#cde9b7}
.b-kuning{background:#fbf3e2;color:#8a6410;border-color:#eddbb6}
.b-merah{background:#fdeaea;color:#a51f1f;border-color:#f4cccc}
.b-abu{background:#eef2f7;color:#4c6480;border-color:#dbe3ed}
.b-ungu{background:#f1ebfd;color:#5b2bb8;border-color:#dfcff8}
.tag{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:800;color:var(--muted)}
.small{font-size:10.5px;color:var(--muted);line-height:1.4}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px}

/* ============================================================ form */
.field{display:flex;flex-direction:column;gap:3px;min-width:0}
.field label{font-size:11px;font-weight:800;color:var(--teks-2)}
.field .wajib{color:var(--merah)}
.field .bantuan{font-size:10.5px;color:var(--muted);line-height:1.4}
input[type=text],input[type=password],input[type=date],input[type=number],input[type=tel],input[type=email],input[type=file],select,textarea{
  font-family:inherit;font-size:12.5px;padding:6px 8px;border:1px solid #c6d5e6;border-radius:var(--radius-kecil);
  background:#fff;color:var(--teks);width:100%;max-width:100%
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy-500);box-shadow:0 0 0 3px rgba(27,90,168,.14)}
textarea{min-height:76px;resize:vertical}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;font-size:11.5px;
  font-weight:800;padding:7px 12px;border-radius:var(--radius-kecil);border:1px solid var(--navy-600);
  background:linear-gradient(180deg,var(--navy-600),var(--navy-700));color:#fff;cursor:pointer;line-height:1.2;white-space:nowrap
}
.btn:hover{filter:brightness(1.1);text-decoration:none;color:#fff}
.btn.outline{background:#fff;color:var(--navy-600);border-color:#b9cde6}
.btn.outline:hover{background:#f3f8fd;color:var(--navy-700)}
.btn.netral{background:#fff;border-color:#c6d5e6;color:var(--teks-2)}
.btn.netral:hover{background:#f4f8fc}
.btn.bahaya{background:linear-gradient(180deg,#d94a4a,#b32727);border-color:#b32727}
.btn.kecil{padding:4px 8px;font-size:10.5px;border-radius:6px}
.btn.emas{background:linear-gradient(180deg,var(--emas),var(--emas-tua));border-color:var(--emas-tua);color:#3a2a06}
.btn:disabled{opacity:.5;cursor:not-allowed}
.filter{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;align-items:end}
.pesan{
  padding:8px 11px;border-radius:var(--radius-kecil);font-size:11.5px;margin-bottom:10px;border:1px solid;
  display:block;line-height:1.55;overflow-wrap:anywhere
}
.pesan .pesan-ikon,.pesan > svg.iko{display:inline-block;vertical-align:-2px;margin-right:6px}
.pesan .pesan-teks{display:inline}
.pesan b{font-weight:800}
.pesan ul{margin:5px 0 0;padding-left:17px}
.pesan .stat-grid{margin:8px 0 0}
.pesan.ok{background:#eaf7e0;border-color:#cde9b7;color:#3f6d1f}
.pesan.err{background:#fdeaea;border-color:#f4cccc;color:#951a1a}
.pesan.info{background:var(--biru-muda-2);border-color:#b5e0ea;color:var(--navy-700)}
.pesan.warn{background:#fdf6e6;border-color:#eeddb3;color:#8a5a0c}

/* ============================================================ misc */
.aksi-baris{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-width:0}
.aksi-baris > *{max-width:100%}
.paginasi{display:flex;gap:4px;flex-wrap:wrap;align-items:center;padding:8px 12px;border-top:1px solid var(--garis-2);font-size:11px}
.paginasi a,.paginasi span{padding:3px 8px;border:1px solid var(--garis);border-radius:5px;background:#fff}
.paginasi span.kini{background:var(--navy-600);border-color:var(--navy-600);color:#fff;font-weight:800}

/* notifikasi */
.notif-item{display:flex;gap:9px;padding:8px 11px;border-bottom:1px solid var(--garis-2)}
.notif-item:last-child{border-bottom:none}
.notif-item .ic{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:#e7f0fb;color:var(--navy-600);flex:0 0 auto}
.notif-item.merah .ic{background:#fdeaea;color:var(--merah)}
.notif-item.kuning .ic{background:#fbf3e2;color:var(--emas-tua)}
.notif-item .isi-n{flex:1;min-width:0}
.notif-item .isi-n b{display:block;font-size:12px}
.notif-item .isi-n p{margin:2px 0 0;font-size:11px;color:var(--muted);line-height:1.45}

/* ============================================================ ruang chat */
.chat-shell{display:grid;grid-template-columns:250px 1fr;gap:12px;align-items:start}
.chat-sisi{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);box-shadow:var(--bayang);overflow:hidden}
.chat-sisi-head{padding:10px 12px;background:linear-gradient(120deg,var(--navy),var(--navy-600));color:#fff}
.chat-sisi-head h2{font-size:13px}
.chat-sisi-head p{margin:2px 0 0;font-size:10.5px;color:var(--biru-muda)}
.chat-kanal-list{max-height:56vh;overflow:auto}
.chat-kanal{display:flex;gap:9px;align-items:center;padding:8px 11px;border-bottom:1px solid var(--garis-2);color:var(--teks)}
.chat-kanal:hover{background:#f4f9fd;text-decoration:none}
.chat-kanal.aktif{background:#e7f0fb;border-left:4px solid var(--emas)}
.chat-kanal .ck-ikon{width:28px;height:28px;border-radius:8px;background:#e7f0fb;color:var(--navy-600);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11.5px;flex:0 0 auto}
.chat-kanal.aktif .ck-ikon{background:var(--navy-600);color:#fff}
.chat-kanal .ck-isi{flex:1;min-width:0}
.chat-kanal .ck-isi b{display:block;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-kanal .ck-isi small{color:var(--muted);font-size:10px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-kanal .ck-baru{background:#e53935;color:#fff;border-radius:999px;font-size:9.5px;font-weight:800;padding:0 6px;min-width:18px;text-align:center;line-height:1.7}
.chat-kanal .ck-baru.kosong{display:none}
.chat-sisi-kaki{padding:8px 11px;font-size:10.5px;color:var(--muted);border-top:1px solid var(--garis-2);display:flex;align-items:center;gap:6px}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--hijau-tua);box-shadow:0 0 0 3px rgba(146,208,93,.25);animation:denyut 1.6s infinite}
@keyframes denyut{0%,100%{opacity:1}50%{opacity:.35}}
.chat-utama{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);box-shadow:var(--bayang);display:flex;flex-direction:column;min-height:64vh;overflow:hidden}
.chat-head{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--garis-2);background:linear-gradient(90deg,#f5f9fd,#fff)}
.chat-head h3{font-size:13px;color:var(--navy-700)}
.chat-head p{margin:1px 0 0;font-size:10.5px;color:var(--muted)}
.chat-head-kanan{margin-left:auto;display:flex;align-items:center;gap:6px}
.chat-pesan{padding:12px;overflow-y:auto;flex:1;max-height:60vh;background:
  radial-gradient(500px 180px at 100% 0,rgba(27,90,168,.05),transparent),linear-gradient(#fff,#fafcff)}
.chat-bubble{display:flex;gap:8px;margin-bottom:11px}
.chat-bubble .cb-avatar{width:30px;height:30px;border-radius:50%;background:#e7f0fb;color:var(--navy-700);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11.5px;flex:0 0 auto}
.chat-bubble .cb-body{background:#f3f8fd;border:1px solid var(--garis-2);border-radius:3px 10px 10px 10px;padding:7px 10px;max-width:min(640px,84%)}
.chat-bubble .cb-head{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap;font-size:10.5px;color:var(--muted)}
.chat-bubble .cb-head b{color:var(--navy-700);font-size:11.5px}
.chat-bubble .cb-waktu{margin-left:auto;font-size:10px}
.chat-bubble .cb-isi{margin-top:2px;word-wrap:break-word;font-size:12.5px}
.chat-bubble.saya{flex-direction:row-reverse}
.chat-bubble.saya .cb-avatar{background:var(--navy-600);color:#fff}
.chat-bubble.saya .cb-body{background:linear-gradient(140deg,var(--navy-600),var(--navy-700));border-color:var(--navy-700);color:#fff;border-radius:10px 3px 10px 10px}
.chat-bubble.saya .cb-head b,.chat-bubble.saya .cb-head span{color:#dbe8f8}
.chat-bubble.baru-atas{animation:muncul .28s ease}
@keyframes muncul{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.chat-ketik{display:flex;gap:8px;padding:9px 11px;border-top:1px solid var(--garis-2);align-items:flex-end;background:#fff}
.chat-ketik textarea{min-height:40px;max-height:130px}
.chat-ketik .btn{height:38px;padding:0 16px}

/* ============================================================ halaman masuk */
.login-page{
  min-height:100dvh;display:grid;grid-template-columns:1.05fr .95fr;
  background:var(--navy);
}
.login-brand{
  position:relative;padding:38px 40px;color:#fff;display:flex;flex-direction:column;justify-content:center;gap:22px;
  background:
    radial-gradient(680px 380px at 6% 4%,rgba(27,90,168,.75),transparent 62%),
    radial-gradient(520px 320px at 96% 96%,rgba(181,224,234,.22),transparent 60%),
    linear-gradient(150deg,var(--navy),#0b2b62 60%,#123a78);
  overflow:hidden;
}
.login-brand::after{
  content:'';position:absolute;right:-90px;top:-70px;width:320px;height:320px;border-radius:50%;
  border:2px solid rgba(209,176,108,.35)
}
.login-brand .lb-atas{display:flex;align-items:center;gap:13px}
.login-brand h1{font-size:23px;letter-spacing:.2px;line-height:1.2}
.login-brand .lb-sub{color:var(--biru-muda);font-size:12.5px;margin-top:4px;line-height:1.6}
.login-brand .lb-ciri{display:grid;gap:10px;max-width:430px}
.login-brand .lb-ciri li{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:#dce8f6;list-style:none}
.login-brand .lb-ciri .t{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.login-brand .lb-ciri b{color:#fff}
.login-form{background:#fff;display:flex;align-items:center;justify-content:center;padding:28px 22px}
.login-box{width:100%;max-width:392px}
.login-box .head h2{font-size:19px;color:var(--navy);letter-spacing:.1px}
.login-box .head p{margin:5px 0 0;font-size:11.5px;color:var(--muted);line-height:1.6}
.login-box .body{margin-top:18px}
.login-box .body .btn{width:100%;margin-top:4px;padding:10px;font-size:12.5px}
.login-box .kaki{margin-top:14px;font-size:11px;color:var(--muted);text-align:center;line-height:1.6}

/* ============================================================ RESPONSIF (ponsel) */
@media (max-width:1080px){
  .info-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  body{font-size:12.5px}
  .topbar{padding:6px 10px;gap:8px}
  .topbar .menu-toggle{display:inline-flex}
  .topbar .brand b{font-size:12.5px}
  .topbar .brand span{display:none}
  .logo-gambar{height:min(var(--logo-tinggi,34px),30px);max-width:min(48vw,132px)}
  .logo-gambar.besar{height:min(calc(var(--logo-tinggi,34px) * 1.5),46px);max-width:min(72vw,220px)}
  .topbar .who{display:none}
  .teks-keluar{display:none}
  /* sidebar jadi laci (drawer) */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;width:266px;flex:none;max-height:100vh;height:100dvh;
    z-index:80;transform:translateX(-102%);transition:transform .22s ease;padding-top:14px;
    box-shadow:var(--bayang-2);overflow:auto
  }
  .sidebar.terbuka{transform:none}
  .shell{display:block}
  .main{padding:12px 11px 34px}
  .laci-overlay{position:fixed;inset:0;background:rgba(7,30,73,.45);z-index:70;display:none}
  .laci-overlay.tampil{display:block}
  table.tabel{font-size:11px}
  table.tabel th{position:static}
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:7px}
  .stat{padding:8px 9px}
  .stat .nilai{font-size:19px}
  .chat-shell{grid-template-columns:1fr}
  .chat-kanal-list{max-height:34vh}
  .chat-pesan{max-height:52vh}
  .info-donut{justify-content:center}
  .login-page{grid-template-columns:1fr}
  .login-brand{padding:22px 18px;gap:14px}
  .login-brand h1{font-size:19px}
  .login-brand .lb-ciri{display:none}
  .login-form{padding:20px 14px 30px;align-items:flex-start}
  .pagehead h1{font-size:15.5px}
  .pagehead .aksi{width:100%}
  .pagehead .aksi .btn{flex:1}
}
@media (max-width:560px){
  .grid2,.grid3{grid-template-columns:1fr}
  .info-batang li{grid-template-columns:82px 1fr 38px}
  .kartu .isi{padding:10px}
  .btn{padding:7px 10px}
}
@media print{
  .topbar,.sidebar,.pagehead .aksi,.footer,.no-print,.chat-ketik,.laci-overlay{display:none!important}
  .main{padding:0}
  .kartu{border:none;box-shadow:none}
}