/* ============================================================
   Bank Referensi [Bracket] — page styles
   Prefix: .bb-  (Bracket Bank). Semua warna pakai CSS var tema
   yang sama dengan halaman lain (--bg2, --border2, --txt, dst)
   supaya otomatis ikut light/dark mode tanpa override tambahan.

   [REDESIGN v2] Dari grid kartu → dua panel (kategori | item),
   masing-masing scroll independen via flex + min-height:0, biar
   tetap rapi walau datanya puluhan kategori / ratusan item.
   ============================================================ */

.bb-page {
  /* Lebar disamakan dengan .page (Home) & .qe-page (Quick Engine): full
     width mengikuti .feed-col, tanpa max-width/centering sendiri, supaya
     lebar kartu/konten konsisten antar halaman. */
  padding: 24px 24px 24px; width: 100%; animation: pageIn .28s var(--ease);
  box-sizing: border-box;
  display: flex; flex-direction: column;
  /* .feed-col induk sudah di-offset ke bawah topbar via padding-top di
     .main-layout, jadi tinggi yang tersisa buat halaman ini persis
     100vh dikurangi tinggi topbar saja (bukan dikurangi lagi). */
  height: calc(100vh - var(--topbar-h)); min-height: 480px;
}

.bb-header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-shrink: 0;
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 18px;
  box-shadow: var(--shadow-card); padding: 20px 22px;
}
.bb-header-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(0,0,0,.07), rgba(0,0,0,.03));
  border: 1px solid var(--border2); color: var(--txt);
}
html.dark .bb-header-icon { background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.07)); }
.bb-header-title { font-size: 17px; font-weight: 800; color: var(--txt); letter-spacing: -.4px; line-height: 1.2; margin-bottom: 4px; }
.bb-header-sub { font-size: 11.5px; font-weight: 500; color: var(--txt3); line-height: 1.5; max-width: 560px; }

.bb-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; flex-shrink: 0; }

.bb-btn {
  font-size: 11.5px; font-weight: 700; padding: 8px 13px; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  border: 1px solid var(--border2); background: var(--bg2); color: var(--txt2);
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.bb-btn:hover { background: var(--tint-05); border-color: var(--border3); color: var(--txt); }
html.dark .bb-btn:hover { background: rgba(255,255,255,.08); }
.bb-btn-primary { background: var(--txt); color: var(--bg2); border-color: transparent; }
.bb-btn-primary:hover { opacity: .88; background: var(--txt); color: var(--bg2); }
.bb-btn-ghost { background: transparent; }
.bb-btn svg { flex-shrink: 0; }
/* Badge total item · kategori — dulu di header, sekarang digeser ke
   jajaran tombol Export/Import/Reset (rata kanan) biar header lebih
   ringkas dan info jumlah nempel deket aksi yang relevan. */
.bb-toolbar-badge {
  margin-left: auto; flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--txt3);
  padding: 6px 12px; border-radius: 99px; background: var(--tint-2); border: 1px solid var(--border);
  white-space: nowrap;
}
html.dark .bb-toolbar-badge { background: rgba(255,255,255,.06); }

/* ---------------- Layout dua panel ---------------- */
.bb-layout {
  display: flex; gap: 12px; flex: 1; min-height: 0;
}

/* ---- Panel kiri: daftar kategori ---- */
.bb-cat-panel {
  width: 240px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 16px;
  box-shadow: var(--shadow-card); overflow: hidden; min-height: 0;
}
.bb-cat-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--txt3); flex-shrink: 0;
}
.bb-cat-add-icon-btn {
  width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--border2); background: var(--bg3);
  color: var(--txt2); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bb-cat-add-icon-btn:hover { background: var(--tint-3); color: var(--txt); }
html.dark .bb-cat-add-icon-btn:hover { background: rgba(255,255,255,.09); }

.bb-cat-search-wrap { position: relative; margin: 0 10px 8px; flex-shrink: 0; }
.bb-cat-search-input {
  width: 100%; font-size: 11.5px; font-weight: 500; padding: 7px 10px 7px 26px; border-radius: 8px;
  border: 1px solid var(--border2); background: var(--bg3); color: var(--txt);
}
.bb-cat-search-input::placeholder { color: var(--txt3); }
.bb-cat-search-wrap svg { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--txt3); pointer-events: none; }

.bb-cat-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 6px 6px; }
.bb-cat-list-empty { font-size: 11px; color: var(--txt3); text-align: center; padding: 22px 12px; line-height: 1.6; }

.bb-cat-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 8px; border-radius: 9px; cursor: pointer;
  margin-bottom: 2px; border: 1px solid transparent;
}
.bb-cat-row:hover:not(.active) { background: var(--tint-2); }
html.dark .bb-cat-row:hover:not(.active) { background: rgba(255,255,255,.06); }
.bb-cat-row.active, .bb-cat-row.active:hover { background: var(--txt); border-color: transparent; }
.bb-cat-row.active .bb-cat-row-name, .bb-cat-row.active .bb-cat-row-count { color: var(--bg2); }
.bb-cat-row-icon { font-size: 14px; flex-shrink: 0; line-height: 1; }
.bb-cat-row-name {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--txt2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bb-cat-row-count {
  flex-shrink: 0; font-size: 10px; font-weight: 700; color: var(--txt3);
  background: var(--tint-05); border-radius: 99px; padding: 2px 7px;
}
.bb-cat-row.active .bb-cat-row-count { background: rgba(255,255,255,.20); }
html.dark .bb-cat-row-count { background: rgba(255,255,255,.08); }

.bb-cat-add-form-slot { flex-shrink: 0; padding: 0 10px 10px; }
.bb-add-cat-form { display: flex; flex-direction: column; gap: 7px; padding-top: 8px; border-top: 1px solid var(--border); }
.bb-add-cat-form-row { display: flex; gap: 7px; }
.bb-add-cat-name-input, .bb-add-cat-icon-input, .bb-add-cat-alias-input {
  font-size: 12px; font-weight: 600; padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--border2); background: var(--bg3); color: var(--txt); width: 100%;
}
.bb-add-cat-icon-input { text-align: center; flex: 0 0 44px; width: 44px; }
.bb-add-cat-name-input { flex: 1 1 auto; min-width: 0; }
.bb-add-cat-alias-input { font-weight: 500; font-size: 11.5px; }
.bb-add-cat-alias-input::placeholder, .bb-edit-cat-alias-input::placeholder { color: var(--txt3); }
.bb-add-cat-form-actions { display: flex; gap: 6px; justify-content: flex-end; }
.bb-add-cat-form-actions .bb-btn { padding: 6px 10px; font-size: 11px; }

/* ---- Alias kategori: badge di panel item + form Edit Kategori inline ---- */
.bb-items-head-aliases {
  font-size: 10.5px; font-weight: 500; color: var(--txt3); padding: 0 16px 12px;
  line-height: 1.5; word-break: break-word;
}
.bb-items-head-edit {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--txt3); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.bb-items-head-edit:hover { background: var(--tint-2); border-color: var(--border2); color: var(--txt); }
html.dark .bb-items-head-edit:hover { background: rgba(255,255,255,.07); }

.bb-edit-cat-form-slot:empty { display: none; }
.bb-edit-cat-form {
  display: flex; flex-direction: column; gap: 8px; margin: 0 16px 14px; padding: 12px;
  border: 1px solid var(--border2); border-radius: 12px; background: var(--tint-05);
}
html.dark .bb-edit-cat-form { background: rgba(255,255,255,.035); }
.bb-edit-cat-form-row { display: flex; gap: 7px; }
.bb-edit-cat-icon-input, .bb-edit-cat-name-input, .bb-edit-cat-alias-input {
  font-size: 12.5px; font-weight: 600; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border2); background: var(--bg3); color: var(--txt); width: 100%;
}
.bb-edit-cat-icon-input { text-align: center; flex: 0 0 46px; width: 46px; }
.bb-edit-cat-name-input { flex: 1 1 auto; min-width: 0; }
.bb-edit-cat-alias-input { font-weight: 500; font-size: 11.5px; }
.bb-edit-cat-hint { font-size: 10.5px; color: var(--txt3); line-height: 1.5; }
.bb-edit-cat-form-actions { display: flex; gap: 6px; justify-content: flex-end; }
.bb-edit-cat-form-actions .bb-btn { padding: 6px 10px; font-size: 11px; }

/* ---- Panel kanan: daftar item ---- */
.bb-items-panel {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 16px;
  box-shadow: var(--shadow-card); overflow: hidden;
}
.bb-items-head { flex-shrink: 0; border-bottom: 1px solid var(--border); }
.bb-items-head-top { display: flex; align-items: center; gap: 9px; padding: 14px 16px 12px; }
.bb-items-head-icon { font-size: 16px; flex-shrink: 0; line-height: 1; }
.bb-items-head-name {
  font-size: 13.5px; font-weight: 800; color: var(--txt); cursor: pointer; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bb-items-head-name:hover { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.bb-items-head-count {
  font-size: 10.5px; font-weight: 700; color: var(--txt3); background: var(--tint-05);
  border-radius: 99px; padding: 3px 9px; flex-shrink: 0;
}
html.dark .bb-items-head-count { background: rgba(255,255,255,.08); }
.bb-items-head-del {
  margin-left: auto; flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--txt3); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.bb-items-head-del:hover { background: rgba(255,59,48,.10); border-color: rgba(255,59,48,.22); color: #ff3b30; }

.bb-items-head-toolrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 16px 14px; }
.bb-item-search-wrap { position: relative; flex: 1 1 200px; min-width: 160px; }
.bb-item-search-input {
  width: 100%; font-size: 12px; font-weight: 500; padding: 8px 10px 8px 28px; border-radius: 9px;
  border: 1px solid var(--border2); background: var(--bg3); color: var(--txt);
}
.bb-item-search-input::placeholder { color: var(--txt3); }
.bb-item-search-wrap svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--txt3); pointer-events: none; }

.bb-item-add-row { display: flex; gap: 6px; flex: 1 1 220px; min-width: 180px; }
.bb-item-add-input {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 500; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--border2); background: var(--bg3); color: var(--txt);
}
.bb-item-add-input::placeholder { color: var(--txt3); }
.bb-item-add-btn {
  flex-shrink: 0; padding: 8px 13px; border-radius: 9px; border: 1px solid transparent;
  background: var(--txt); color: var(--bg2); font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.bb-item-add-btn:hover { opacity: .88; }

.bb-items-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px 14px; }

.bb-item-list { display: flex; flex-direction: column; gap: 3px; }
.bb-item-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-radius: 9px;
  border: 1px solid transparent;
}
.bb-item-row:hover { background: var(--tint-1); border-color: var(--border); }
html.dark .bb-item-row:hover { background: rgba(255,255,255,.05); }
.bb-item-row-text { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--txt2); word-break: break-word; }
.bb-item-row-del {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; border: 1px solid transparent;
  background: transparent; color: var(--txt3); cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.bb-item-row:hover .bb-item-row-del,
.bb-item-row-del:focus-visible { opacity: 1; }
.bb-item-row-del:hover { background: rgba(255,59,48,.10); border-color: rgba(255,59,48,.22); color: #ff3b30; }

.bb-items-empty-state { text-align: center; padding: 46px 20px; color: var(--txt3); }
.bb-items-empty-icon { font-size: 30px; margin-bottom: 10px; opacity: .7; }
.bb-items-empty-title { font-size: 12.5px; font-weight: 700; color: var(--txt2); margin-bottom: 4px; }
.bb-items-empty-sub { font-size: 11px; line-height: 1.5; }

/* Touch devices: tombol hapus item selalu kelihatan (tidak ada hover state) */
@media (hover: none) {
  .bb-item-row-del { opacity: 1; }
}

/* ---------------- Dropdown menu (Export ▾ / Import ▾) ---------------- */
.bb-menu-wrap { position: relative; display: inline-flex; }
.bb-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 232px; padding: 6px; border-radius: 12px;
  background: var(--bg2); border: 1px solid var(--border2); box-shadow: var(--shadow-modal);
}
.bb-menu.open { display: block; }
.bb-menu-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  padding: 8px 10px; border-radius: 8px; border: none; background: transparent; cursor: pointer;
  text-align: left; font-family: inherit;
}
.bb-menu-item:hover { background: var(--tint-05); }
html.dark .bb-menu-item:hover { background: rgba(255,255,255,.08); }
.bb-menu-item-title { font-size: 12px; font-weight: 700; color: var(--txt); }
.bb-menu-item-sub { font-size: 10.5px; font-weight: 500; color: var(--txt3); line-height: 1.4; }
.bb-menu-divider { height: 1px; background: var(--border); margin: 5px 3px; }

/* ---------------- Pagination (panel item, ratusan entri per kategori) ---------------- */
.bb-items-pagination {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; border-top: 1px solid var(--border); flex-wrap: wrap;
}
.bb-pg-info { font-size: 10.5px; font-weight: 600; color: var(--txt3); white-space: nowrap; }
.bb-pg-controls { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bb-pg-btn {
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 7px; border: 1px solid var(--border2);
  background: var(--bg3); color: var(--txt2); font-size: 11px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.bb-pg-btn:hover:not(:disabled):not(.active) { background: var(--tint-3); color: var(--txt); }
html.dark .bb-pg-btn:hover:not(:disabled):not(.active) { background: rgba(255,255,255,.09); }
.bb-pg-btn.active { background: var(--txt); border-color: transparent; color: var(--bg2); cursor: default; }
.bb-pg-btn:disabled { opacity: .35; cursor: not-allowed; }
.bb-pg-ellipsis { font-size: 11px; color: var(--txt3); padding: 0 2px; user-select: none; }

/* [FIX 2026-08-22] "Tampilkan Semua" / "Tampilkan per Halaman" — tombol ini
   ikut nebeng di flex-wrap yang sama dengan nomor halaman (.bb-pg-btn 1 2 3…).
   Di layar sempit, kalau nomor halamannya kebetulan 2-digit (mis. "…10 11 12…")
   baris nomor jadi lebih lebar dan tombol ini kadang masih nyempil di ujung
   baris yang sama, kadang malah "ketarik" turun sendirian — posisinya jadi
   tidak konsisten tergantung berapa banyak/lebar nomor halaman saat itu.
   width:auto + padding di sini (dulu inline style di JS) dipindah ke class
   supaya bisa di-override rapi di breakpoint sempit di bawah. */
.bb-pg-showall-btn { width: auto; padding: 0 10px; }

@media (max-width: 760px) {
  /* BUGFIX (mobile): sebelumnya halaman ini dipaksa PAS SATU LAYAR PENUH
     (height:100dvh - topbar) dan panel Kategori + panel Item harus berbagi
     sisa ruang itu lewat flex — hasilnya kedua panel jadi kotak kecil
     dengan scroll internal masing-masing (scroll di dalam scroll), jadi
     kepotong & terasa sempit walau datanya cuma dikit (lihat feedback:
     kategori cuma nongol 1 baris, daftar item nongol 2 baris lalu langsung
     paginasi). Sekarang halaman dibiarkan mengikuti tinggi kontennya
     sendiri dan scroll biasa lewat halaman (persis seperti scroll list
     pada umumnya) — cuma panel Kategori & panel Item yang tetap dikasih
     batas atas (max-height) generous supaya kategori/item yang BANYAK
     tidak bikin halaman jadi kepanjangan tak berujung. */
  .bb-page {
    /* UI/UX FIX: horizontal disamain pakai var(--sb-gap), dulu hardcode 12px */
    /* UI/UX FIX: top pakai var(--nav-v-gap), bukan 16px — biar sejajar
       sama top sidebar drawer (file ini di-load SETELAH components.css,
       jadi rule di sini yang menang, harus difix di sumbernya langsung). */
    padding: var(--nav-v-gap) var(--sb-gap) calc(12px + env(safe-area-inset-bottom, 0px));
    height: auto;
    min-height: calc(100vh - var(--topbar-h));
    min-height: calc(100dvh - var(--topbar-h));
  }
  /* UI/UX FIX: dulu flex-wrap:wrap bikin icon "lompat" jadi baris sendiri
     di atas judul (makan tempat vertikal). Sekarang tetap 1 baris
     (icon sejajar judul), sama pola dengan .lic-header di License. */
  .bb-header { gap: 10px; padding: 14px 14px; }
  .bb-header-icon { width: 34px; height: 34px; }
  .bb-header-title { font-size: 14px; }
  .bb-header-sub {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }

  /* Toolbar: tombol dibikin ngisi lebar & tetap rapi kebagi rata walau
     teksnya beda-beda panjang ("Export ▾" vs "Reset"), tidak numpuk mepet
     atau kepotong di layar sempit. Dropdown-nya di-clamp biar gak
     kepotong/nongol keluar layar (menu Import dibuka nge-anchor ke kanan
     soalnya posisi tombolnya lebih ke kanan/tengah). */
  .bb-toolbar { gap: 7px; }
  /* [BUGFIX 2026-08-08] Sebelumnya .bb-btn dikasih `width:100%` di sini —
     itu maksa TIAP tombol (Export/Import/Reset) ambil lebar 100% wadahnya
     sendiri, jadi meski .bb-toolbar flex-wrap, hasilnya tiap tombol selalu
     numpuk jadi baris sendiri-sendiri (3 lapis ke bawah) dan badge "N item
     · N kategori" ikut kelempar ke baris terpisah di bawahnya. Yang benar:
     tombol berbagi SATU baris secara rata (flex-basis 0 + grow sama besar),
     badge tetap nempel rata-kanan di baris yang sama (lihat margin-left:auto
     di .bb-toolbar-badge). Baru di layar SANGAT sempit (<400px, lihat
     media query di bawah) tombol dipaksa turun satu-satu — itu memang. */
  .bb-toolbar .bb-menu-wrap, .bb-toolbar > .bb-btn { flex: 1 1 0; min-width: 0; }
  .bb-toolbar .bb-btn { justify-content: center; }
  .bb-menu { max-width: calc(100vw - 24px); }
  #bb-import-menu { left: auto; right: 0; }

  /* Panel kategori & item: dilepas dari sistem "berbagi sisa layar" —
     masing-masing sekarang boleh setinggi kontennya sendiri sampai batas
     generous ini, baru scroll internal muncul kalau memang isinya banyak
     (misal puluhan kategori / 50 item per halaman). Kalau isinya cuma
     sedikit (kayak contoh 4-8 item), panelnya otomatis pas-pasan sesuai
     isi — tidak dipaksa mepet 220px/160px seperti sebelumnya. */
  .bb-layout { flex-direction: column; gap: 10px; flex: none; min-height: 0; }
  .bb-cat-panel { width: 100%; flex: none; max-height: min(340px, 46dvh); }
  .bb-items-panel { flex: none; max-height: min(580px, 66dvh); }

  /* BUGFIX (mobile): .bb-item-search-wrap (flex:1 1 200px) & .bb-item-add-row
     (flex:1 1 220px) di CSS dasar dirancang untuk layout SATU BARIS (flex-row)
     di desktop — flex-basis situ berarti LEBAR minimum. Begitu toolrow ini
     dipaksa jadi kolom (flex-direction:column di bawah), flex-basis yang sama
     otomatis dibaca sebagai TINGGI minimum oleh browser (karena main-axis
     berubah jadi vertikal), sehingga kotak pencarian melar setinggi ~200px
     dan baris "Tambah item baru" ikut terdorong turun — itulah gap kosong
     raksasa & ikon kaca-pembesar yang "mengambang" di tengah layar HP.
     Reset ke auto/lebar-penuh supaya tinggi tiap baris mengikuti kontennya
     sendiri (natural), bukan flex-basis warisan dari layout desktop. */
  .bb-items-head-toolrow { flex-direction: column; align-items: stretch; }
  .bb-item-search-wrap,
  .bb-item-add-row { flex: 0 0 auto; width: 100%; min-width: 0; }
  .bb-item-add-row { flex-wrap: wrap; }
  .bb-items-pagination { justify-content: center; }
  .bb-pg-info { width: 100%; text-align: center; }
  /* [FIX 2026-08-22] nomor halaman (bb-pg-controls) dipusatkan & dibiarkan
     wrap sendiri; tombol "Tampilkan Semua"/"Tampilkan per Halaman" DIPAKSA
     jadi baris penuh sendiri (flex-basis 100% dalam flex-wrap = otomatis
     pindah baris) — hasilnya SELALU satu baris rapi di bawah, konsisten
     berapa pun banyak/lebar nomor halaman di atasnya (1 digit atau 2 digit,
     4 halaman atau 40 halaman — posisinya tidak akan berubah-ubah lagi). */
  .bb-pg-controls { width: 100%; justify-content: center; }
  .bb-pg-showall-btn {
    flex: 1 1 100%;
    margin-top: 6px;
    justify-content: center;
  }
}

@media (max-width: 400px) {
  .bb-toolbar { flex-wrap: wrap; }
  .bb-toolbar .bb-menu-wrap, .bb-toolbar > .bb-btn { flex: 1 1 100%; }
}

/* ── BUG FIX 2026-07-30: iPad mode vertical + sidebar kiri/kanan sama-sama
   melebar, halaman Brackets — pola sama persis dgn fix qe-step23-row (lihat
   components.css, cari "BUG FIX: iPad mode vertical"). @media(max-width:760px)
   di atas cuma ngecek lebar VIEWPORT — kalau viewport tablet-nya masih lebar
   (misal iPad portrait ~810px) tapi ruang .feed-col yang sebenarnya kepotong
   gara-gara sidebar kiri+kanan sama-sama kebuka lebar, breakpoint itu nggak
   kepicu, jadi panel Kategori & panel Item tetap dipaksa sejajar (side-by-
   side) padahal ruangnya udah sempit banget. Container query di bawah ini
   ngecek lebar KONTEN .feed-col yang sebenarnya tersedia (container-type
   sudah di-set di rule .feed-col, lihat components.css), jadi tetap kepicu
   walau viewport-nya lebar, selama sidebar kiri+kanan lagi motong ruang
   konten sampai sempit — panel Item otomatis pindah ke BAWAH panel Kategori,
   bukan lagi maksa sejajar di sampingnya sampai kepotong. Browser yg belum
   dukung container query otomatis skip blok ini (fallback tetap ke @media
   viewport di atas). */
@container qe-feedcol (max-width: 760px) {
  .bb-layout { flex-direction: column; gap: 10px; flex: none; min-height: 0; }
  .bb-cat-panel { width: 100%; flex: none; max-height: min(340px, 46dvh); }
  .bb-items-panel { flex: none; max-height: min(580px, 66dvh); }

  .bb-items-head-toolrow { flex-direction: column; align-items: stretch; }
  .bb-item-search-wrap,
  .bb-item-add-row { flex: 0 0 auto; width: 100%; min-width: 0; }
  .bb-item-add-row { flex-wrap: wrap; }
  .bb-items-pagination { justify-content: center; }
  .bb-pg-info { width: 100%; text-align: center; }
  .bb-pg-controls { width: 100%; justify-content: center; }
  .bb-pg-showall-btn {
    flex: 1 1 100%;
    margin-top: 6px;
    justify-content: center;
  }
}