/* ==========================================================
   SULUTTENGGO II — RESPONSIVE UI LAYER
   Hanya untuk tampilan/UX. Tidak mengubah PHP/database.
   ========================================================== */
:root{
  --ui-primary:#0f6b57;
  --ui-primary-2:#16816a;
  --ui-primary-soft:#eaf6f2;
  --ui-gold:#b99343;
  --ui-bg:#f5f8f7;
  --ui-card:#ffffff;
  --ui-text:#17332c;
  --ui-muted:#71807b;
  --ui-line:#e3ebe8;
  --ui-shadow:0 8px 28px rgba(20,58,48,.07);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:var(--ui-bg)!important;color:var(--ui-text);}
button,input,select,textarea{font-size:16px;}
button,a,input,select,textarea{transition:box-shadow .18s ease,border-color .18s ease,background-color .18s ease,transform .12s ease;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(22,129,106,.22);outline-offset:2px;}

/* halaman panel yang memakai sidebar */
.app{min-width:0;}
.sidebar{background:#fff!important;box-shadow:4px 0 24px rgba(25,60,50,.035);}
.sidebar-logo{color:var(--ui-primary)!important;}
.sidebar-menu a.aktif{background:var(--ui-primary-soft)!important;color:var(--ui-primary)!important;}
.sidebar-menu a:hover:not(.aktif){background:#f4f8f6!important;}
.tombol-menu{background:var(--ui-primary)!important;box-shadow:0 6px 18px rgba(15,107,87,.25)!important;}
.konten{max-width:1500px;}
.halaman-judul{letter-spacing:-.02em;}
.kartu,.box,.card,.form-box,.form-kotak,.kotak{border:1px solid var(--ui-line)!important;box-shadow:var(--ui-shadow)!important;}
.btn,.btnsimpan,.btn-simpan,.btn-kirim,.tombol-kirim,.tombol{min-height:42px;}

/* form */
input,select,textarea{max-width:100%;}
input:focus,select:focus,textarea:focus{border-color:var(--ui-primary)!important;box-shadow:0 0 0 3px rgba(22,129,106,.11)!important;outline:none;}

/* tabel: tetap tabel di desktop, bisa digeser di HP */
table{width:100%;max-width:100%;}
.table-responsive, .tabel-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* kartu dashboard */
.grid-kartu{gap:16px!important;}
.grid-kartu > *{min-width:0;}

/* ==========================================================
   MOBILE
   ========================================================== */
@media (max-width:760px){
  body{overflow-x:hidden!important;}
  .main,.konten,.content{min-width:0!important;max-width:100%!important;}
  .konten{padding:20px 15px!important;}
  .halaman-judul{font-size:24px!important;line-height:1.25!important;}
  .halaman-judul + *{max-width:100%;}

  /* sidebar panel */
  .sidebar{width:min(84vw,310px)!important;}
  .tombol-menu{top:12px!important;left:12px!important;}
  .sidebar-menu a{min-height:44px!important;padding:11px 12px!important;}

  /* dashboard cards */
  .grid-kartu{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .grid{min-width:0!important;}
  .kartu{padding:16px!important;}
  .grid-label,.grid-nilai{overflow-wrap:anywhere;}

  /* forms */
  .form-grid,.form-baris,.grid{min-width:0!important;}
  .form-grid,.form-baris{grid-template-columns:1fr!important;}
  .form-group,.form‑group{min-width:0!important;}
  .form-group.full,.form‑group.penuh,.penuh{grid-column:1/-1!important;}
  input,select,textarea{width:100%!important;}

  /* tables / long lists */
  table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}
  th,td{padding:.7rem .65rem!important;}

  /* buttons */
  .aksi,.actions{display:flex;flex-wrap:wrap;gap:8px;}
  .btn,.btn-edit,.btn-hapus,.btnedit,.btnhapus,.btnsimpan,.btn-simpan,.btn-kembali,.btn-unduh,.btn-hapus{min-height:42px;}

  /* login & public form */
  .kotak{padding:1.5rem!important;border-radius:18px!important;}
  .form-kotak{padding:1.4rem!important;}
  .judul-kotak h2{font-size:1.35rem!important;}
  .wadah{width:100%!important;max-width:520px!important;}
}
@media (max-width:480px){
  .grid-kartu{grid-template-columns:1fr!important;}
  .kartu,.box,.card,.form-box,.form-kotak{border-radius:14px!important;}
  .tombol-kirim,.btn-simpan,.btnsimpan{width:100%;}
  .atas-logo h2{font-size:1.25rem!important;}
}

/* Jika halaman mempunyai kartu dengan baris aksi, beri ruang napas */
@media (max-width:760px){
  .baris,.atas,.bawah{min-width:0!important;}
  .baris{gap:10px!important;}
  .deskripsi{overflow-wrap:anywhere;}
}