/* ============================================================
   SHANNA POS — responsive.css
   Dimuat PALING AKHIR agar override-nya menang.
   Desktop: sidebar · Tablet: sidebar compact · Mobile: drawer + bottom nav
   ============================================================ */

/* ---------- <= 1100px : sidebar compact otomatis (tablet lanskap) ---------- */
@media (max-width: 1100px) {
  .app { grid-template-columns: var(--sidebar-w-compact) minmax(0, 1fr); }
  .side-head .brand-name,
  .side-group > .lbl,
  .side-link .txt,
  .side-link .pill,
  .side-foot .u-meta { display: none; }
  .side-head { justify-content: center; padding: 0; }
  .side-link { justify-content: center; padding: 11px 0; }
  .side-foot .u-btn { justify-content: center; }
  /* Kelas is-collapsed dinetralkan: sudah compact secara default */
  .app.is-collapsed { grid-template-columns: var(--sidebar-w-compact) minmax(0, 1fr); }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi.is-hero { grid-column: span 2; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- <= 1024px : landing jadi satu kolom ---------- */
@media (max-width: 1024px) {
  .hero { padding-top: var(--s-8); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .preview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section { padding: var(--s-9) 0; }
}

/* ---------- <= 900px : navbar mobile, fitur 2 kolom ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta .btn-ghost { display: none; }
  .nav-toggle { display: grid; margin-left: auto; }
  .nav-cta { margin-left: 0; }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-grid { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; }
  .plan.is-featured { order: -1; }
  .grid-2-eq { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   <= 820px : MODE MOBILE APP
   Sidebar menjadi drawer off-canvas + bottom navigation.
   ============================================================ */
@media (max-width: 820px) {
  .app,
  .app.is-collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "main";
  }

  /* Sidebar -> drawer */
  .side {
    position: fixed; inset-block: 0; left: 0;
    width: min(300px, 84vw);
    transform: translateX(-102%);
    transition: transform var(--t-med) var(--ease-out);
    box-shadow: var(--shadow-3);
    z-index: 900;
  }
  .side.is-open { transform: none; }
  /* Kembalikan label penuh di dalam drawer */
  .side-head { justify-content: flex-start; padding: 0 var(--s-4); }
  .side-head .brand-name,
  .side-group > .lbl,
  .side-link .txt,
  .side-link .pill,
  .side-foot .u-meta { display: revert; }
  .side-link { justify-content: flex-start; padding: 10px var(--s-3); }
  .side-foot .u-btn { justify-content: flex-start; }

  .drawer-backdrop {
    display: block; position: fixed; inset: 0; z-index: 850;
    background: rgba(11, 11, 11, .48);
    animation: fade-in var(--t-fast) var(--ease);
  }

  /* Tombol tutup drawer hanya relevan di mobile */
  #btnCloseDrawer { display: grid !important; margin-left: auto; }

  .top { padding: 0 var(--s-4); }
  .top .sub { display: none; }
  .top-search { display: none; }
  .main { padding: var(--s-4) var(--s-4) calc(var(--bottomnav-h) + var(--s-6)); }

  /* Bottom navigation: Dashboard · Kasir · Produk · Transaksi · Lainnya */
  .bottom-nav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; inset-inline: 0; bottom: 0; z-index: 700;
    height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--surface-1) 94%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--border);
  }
  .bn-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: .68rem; font-weight: 600; color: var(--ink-3);
    transition: color var(--t-fast) var(--ease);
  }
  .bn-item:hover { text-decoration: none; }
  .bn-item svg { width: 21px; height: 21px; }
  .bn-item.is-active { color: var(--brand); }

  .page-head h2 { font-size: 1.2rem; }
  .filters { gap: var(--s-2); }
  .filters .seg { width: 100%; overflow-x: auto; }
}

/* ---------- <= 620px : satu kolom penuh ---------- */
@media (max-width: 620px) {
  .container { padding-inline: var(--s-4); }
  .kpi-row { grid-template-columns: minmax(0, 1fr); }
  .kpi.is-hero { grid-column: span 1; }
  .kpi { padding: var(--s-4); }
  .feat-grid { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .mock-body { grid-template-columns: minmax(0, 1fr); }
  .mock-left { border-right: 0; border-bottom: 1px solid var(--border); }
  .hero-actions .btn { width: 100%; }
  .section-head p { font-size: .95rem; }
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; }
  .toast-stack { right: var(--s-3); left: var(--s-3); bottom: var(--s-3); max-width: none; }
  .chart-box { padding: var(--s-3) var(--s-3) var(--s-4); }
}

/* ---------- Print: struk & laporan ---------- */
@media print {
  .nav, .side, .top, .bottom-nav, .filters, .toast-stack, .no-print { display: none !important; }
  .app { grid-template-columns: 1fr; grid-template-areas: "main"; }
  .main { padding: 0; }
  .card { border: 0; box-shadow: none; }
  body { background: #fff; }

  /* Kop laporan hanya ada di kertas — di layar sudah ada judul halaman */
  .print-only { display: block !important; }
  /* Kembaran tabel selalu dicetak: nilai grafik tidak boleh hilang di kertas */
  .chart-card .viz-table { display: block !important; }
  .chart-card.show-table .chart-box { display: block !important; }
  .chart-card .chart-box { break-inside: avoid; }
  table.data thead th { position: static; }
}