/* ============================================================
   BOUNCEBILLING — RESPONSIVE MOBILE (FINAL)
   Loaded LAST. Targets ALL pages.
   ============================================================ */

/* ─── BASE ─── */
html, body { overflow-x: hidden; width: 100%; position: relative; }
*, *::before, *::after { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
@supports (padding: env(safe-area-inset-bottom)) {
  .bb-safe-bottom, .bottom-nav { padding-bottom: env(safe-area-inset-bottom) !important; }
  .bb-safe-top { padding-top: env(safe-area-inset-top); }
}

/* ════════════════════════════════════════════
   MOBILE: <640px
   ════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── BOTTOM NAV ── */
  .bottom-nav { height: 56px !important; }
  .bottom-nav .flex { gap: 0 !important; height: 100%; width: 100% !important; flex: 1 1 0% !important; }
  .bottom-nav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6px 2px 4px; min-width:0; position:relative; }
  .bottom-nav-item i { font-size:20px !important; }
  .bottom-nav-item span { font-size:9px; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .bottom-nav-item.active::after { content:''; position:absolute; top:2px; left:50%; transform:translateX(-50%); width:16px; height:2px; border-radius:2px; background:#38bdf8; }

  /* ── HEADER COMPACT ── */
  header .h-12 { height:44px !important; }
  header .px-4 { padding-left:10px !important; padding-right:10px !important; }

  /* ── CARDS: Better spacing (target rounded-xl elements that contain p-* classes) ── */
  .bg-slate-900.border-slate-800.rounded-xl { padding:12px !important; }
  .bg-slate-900\/80.border-slate-800.rounded-xl { padding:12px !important; }
  .bg-gradient-to-br.border-slate-800.rounded-xl { padding:12px !important; }
  .space-y-5 > * + * { margin-top:14px !important; }
  .space-y-6 > * + * { margin-top:16px !important; }
  .gap-3 { gap:8px !important; }
  .gap-4 { gap:10px !important; }
  .gap-5 { gap:12px !important; }

  /* ── TABLES: HORIZONTAL SCROLL ── */
  .bb-table-wrap,
  .table-responsive,
  .overflow-x-auto { overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  .bb-table-wrap table,
  .table-responsive table,
  .overflow-x-auto table,
  table.bb-responsive-table,
  table[data-responsive="true"] { 
    min-width:580px !important;
    white-space:nowrap;
  }

  /* ── TEXT OVERFLOW ── */
  .rounded-xl { overflow-wrap:break-word !important; }

  /* ── GRID ── */
  .bb-table-wrap table td:last-child,
  table.bb-responsive-table td:last-child,
  table[data-responsive="true"] td:last-child { border-bottom:none !important; }


  /* ── FORMS: Touch-friendly ── */
  input, select, textarea { font-size:16px !important; min-height:44px !important; }
  button, [type="button"], [type="submit"], [type="reset"] { min-height:44px !important; }
  .flex.items-center.gap-3 button,
  .flex.gap-3 button { flex:1 !important; justify-content:center !important; }

  /* ── GRID ── */

  /* ── MODAL ── */
  .fixed.inset-0.z-50 > div[class*="max-w"] {
    max-width:calc(100vw - 16px) !important;
    margin:8px !important;
    max-height:calc(100vh - 16px) !important;
    overflow-y:auto !important;
  }

  /* ── SIDEBAR ── */
  #sidebar { width:260px !important; max-width:80vw !important; }

  /* ── CEGAH HURUF VERTIKAL: label menu/nav TIDAK pernah pecah per-huruf ── */
  .bottom-nav-item span,
  .nav-label,
  .brand-text,
  .user-text,
  .group-caret,
  .sidebar-link span,
  .nav-row span {
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  /* ── PAGINATION ── */
  .inline-flex.items-center.gap-1 { flex-wrap:wrap !important; justify-content:center !important; }

  /* ── TOAST ── */
  #toast-container { bottom:72px !important; top:auto !important; right:8px !important; left:8px !important; max-width:100% !important; }

  /* ═══ PAKAI KOTAK-KOTAK: KOMPAK, Ga MEMANJANG ═══ */
  main { padding:0.75rem !important; }
  .p-4, .p-5, .p-6 { padding:0.75rem !important; }
  .px-6 { padding-left:0.75rem !important; padding-right:0.75rem !important; }
  .px-5 { padding-left:0.75rem !important; padding-right:0.75rem !important; }
  .space-y-6 > * + * { margin-top:0.875rem !important; }
  .space-y-5 > * + * { margin-top:0.75rem !important; }
  .space-y-4 > * + * { margin-top:0.75rem !important; }

  /* Toolbar/filter: grid 2 kolom biar kotak-kotak, bukan menumpuk panjang */
  .bb-toolbar {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:0.5rem !important;
  }
  .bb-toolbar > * { width:100% !important; margin:0 !important; }
  .bb-toolbar .bb-actions, .bb-toolbar > .bb-actions { grid-column:1 / -1 !important; }
  .bb-actions { display:flex !important; flex-wrap:wrap !important; gap:0.5rem !important; }
  .bb-actions > * { flex:1 1 44% !important; justify-content:center !important; margin:0 !important; }

  /* Baris form/aksi yang umum: 2 kolom */
  form .flex.flex-col.gap-2,
  .flex.flex-col.gap-2 { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:0.5rem !important; }
  form .flex.flex-col.gap-2 > *,
  .flex.flex-col.gap-2 > * { width:100% !important; margin:0 !important; }

  /* Judul halaman lebih padat */
  header h2 { font-size:1rem !important; }
  header .h-12, header.h-16 { height:3rem !important; }

  /* Input lebih ramping (tetap 16px anti-zoom iOS) */
  input, select, textarea { min-height:42px !important; padding-top:0.5rem !important; padding-bottom:0.5rem !important; }
  button, [type="button"], [type="submit"], [type="reset"] { min-height:42px !important; padding-top:0.5rem !important; padding-bottom:0.5rem !important; }
  .grid.grid-cols-2.sm\:grid-cols-4 > .rounded-xl,
  .grid.grid-cols-2.sm\:grid-cols-4.gap-4 > .rounded-xl {
    aspect-ratio:1/1 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
    padding:0.5rem !important;
  }
  .grid.grid-cols-2.sm\:grid-cols-4.gap-4 { gap:0.5rem !important; }
}

/* ─── EXTRA SMALL: <380px ─── */
@media (max-width: 380px) {
  .bottom-nav-item i { font-size:18px !important; }
  .bottom-nav-item span { font-size:8px !important; }
  .text-sm { font-size:12px !important; }
  .text-xs { font-size:11px !important; }
  .text-lg { font-size:15px !important; }
  .text-xl { font-size:17px !important; }
  .text-2xl { font-size:20px !important; }
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ─── TABLET: 641-1023px ─── */
@media (min-width: 641px) and (max-width: 1023px) {
  .bottom-nav-item span { font-size:10px !important; }
}