/* ============================================================
   Aim Caffee — Perbaikan tata letak area owner
   v1 · 6 Nov 2026 · dibuat Novi (Hermes)

   File TAMBAHAN. app.css tidak diubah sama sekali.
   Untuk mengembalikan: hapus baris <link ... owner-fix.css> di halaman owner
   (atau jalankan restore.sh di folder backup).
   ============================================================ */

/* ---------- 1. NAV ATAS ----------
   Dulu nowrap + scroll horizontal, jadi tab paling kanan kepotong
   (mis. "Per Menu", "Poin", "Pelanggan"). Sekarang wrap: semua kelihatan. */
.appnav{
  flex-wrap:wrap;
  overflow:visible;
  justify-content:center;
  gap:6px;
  padding:0 12px 10px;
}
.appnav a,
.appnav span.link{font-size:.7rem;padding:6px 10px}

/* di HP: 3 tab per baris, lebar sama → tinggi header konsisten antar halaman */
@media(max-width:600px){
  .appnav{gap:6px}
  .appnav{justify-content:flex-start}
  .appnav a,
  .appnav span.link{
    flex:0 1 calc(33.333% - 6px);
    text-align:center;
    padding:6px 4px;
    font-size:.68rem;
  }
}

/* ---------- 2. RITME HALAMAN ----------
   Dulu tiap halaman beda: 14px, 16px, 18px. Sekarang seragam 16px. */
main.page,
main.wrap{
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
  padding-left:16px;
  padding-right:16px;
}
/* naikkan spesifisitas supaya menang dari .newui .wrap dan .page lokal */
.newui main.page,
.newui main.wrap{padding-left:16px;padding-right:16px}
main.page{padding-bottom:40px}
/* halaman yang punya bar bawah (fixed) diberi ruang ekstra */
body:has(.footbar) main.page,
body:has(.footbar) main.wrap{padding-bottom:104px}

@media(max-width:760px){
  main.page,
  main.wrap,
  .newui main.page,
  .newui main.wrap{padding-left:14px;padding-right:14px}
}

/* ---------- 3. JUDUL SEKSI ---------- */
.newui .sec{margin:20px 0 9px}
.newui .card + .sec{margin-top:22px}

/* ---------- 4. KARTU ---------- */
.newui .card{padding:15px}

/* ---------- 5. TILE BERANDA ----------
   Dulu tinggi tiap kartu beda-beda (170–205px) → baris kelihatan bergerigi.
   Sekarang: HP = daftar rapi (ikon kiri, judul+keterangan, badge kanan);
   desktop = grid 3–4 kolom dengan tinggi seragam. */
.newui .grid{grid-auto-rows:1fr}
.newui .tile{height:100%;gap:8px}
.newui .tile .d{line-height:1.35}
.newui .tile .badge{margin-top:auto}

@media(max-width:600px){
  .newui .grid{grid-template-columns:1fr;gap:8px;grid-auto-rows:auto}
  .newui .tile{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) auto;
    grid-template-areas:"ico t b" "ico d b";
    column-gap:11px;row-gap:2px;align-items:center;
    height:auto;min-height:0;padding:11px 13px;
  }
  .newui .tile .ico{grid-area:ico;width:44px;height:44px;font-size:1.3rem}
  .newui .tile .t{grid-area:t;font-size:.95rem;line-height:1.2}
  .newui .tile .d{
    grid-area:d;font-size:.72rem;line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .newui .tile .badge{grid-area:b;margin:0;align-self:center}
}

@media(min-width:780px){
  .newui .grid{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
}

/* ---------- 6. CHIP KATEGORI (kelola-menu) ----------
   Dulu scroll ke samping → kategori di ujung kanan tak terlihat. */
.kats{flex-wrap:wrap;overflow:visible;padding-bottom:8px}
.kats button{flex:0 0 auto}

/* ---------- 7. BARIS INPUT KECIL ----------
   Dulu tinggi input 34px vs tombol 31px → garis bawahnya tidak rata. */
.mini{align-items:center}
.mini input,
.mini button{height:36px;box-sizing:border-box}

/* ---------- 8. ANGKA PANJANG ---------- */
.sum-card .val,
.newui .stat b,
.chip .v,
.dompet-card .v,
.total-big .val{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}

/* ---------- 9. DAFTAR PANJANG ----------
   Baris dirapatkan 2–3px supaya halaman tidak kepanjangan (laporan 8.300px). */
.tx,
.li,
.peng-row,
.mutasi{padding-top:7px;padding-bottom:7px}
.mutasi{font-size:.78rem}

/* ---------- 10. BAR BAWAH ---------- */
.footbar{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}

/* ---------- 11. HEADER ---------- */
.appbar .title{max-width:58%}
@media(max-width:400px){
  .appbar .title{font-size:1rem}
  .appbar-in{padding:8px 12px;min-height:52px}
}

/* ---------- 12. TOOLBAR / FILTER DI HP ----------
   Dulu input melar menekan tombol/select sampai gepeng. */
@media(max-width:520px){
  .tools,
  .toolbar{flex-wrap:wrap;gap:8px}
  .tools .input,
  .toolbar .input{flex:1 1 100%;min-width:0}
  .tools select,
  .toolbar select{flex:1 1 auto;width:auto}
}