/* =========================================================
   Tablet & laptop
   -----------------------------------------------------------------
   Bukan sekadar melebarkan tampilan HP. Pada tiap ukuran, susunannya
   memang berubah bentuk mengikuti cara alat itu dipegang:

     < 768px   HP     — tab di bawah, keranjang mengambang, satu kolom
     ≥ 768px   Tablet — kolom lebih lapang, panel jadi dialog tengah
     ≥ 1024px  Laptop — navigasi samping, keranjang jadi panel tetap
   ========================================================= */

/* =========================================================
   TABLET — ≥ 768px
   ========================================================= */

@media (min-width: 768px) {
  :root {
    --topbar-h: 70px;
    --radius: 16px;
  }

  /* Isi dipusatkan lewat padding, BUKAN `margin: auto`.
     `.view` adalah flex item; margin auto di flexbox menyerap ruang kosong dan
     membuat elemennya menciut ke lebar konten — kolomnya jadi kurus sendiri. */
  .view {
    padding: 24px max(24px, calc((100% - 900px) / 2))
             calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 28px);
  }

  .topbar { padding-inline: 26px; }
  .topbar__names strong { font-size: 16px; }
  .topbar__mark { width: 44px; height: 44px; flex-basis: 44px; font-size: 22px; }

  .section-head { margin-bottom: 15px; }
  .section-head:not(:first-child) { margin-top: 34px; }

  .menu-card { min-height: 108px; padding: 15px; }
  .menu-card__name { font-size: 15.5px; }
  .menu-card__price { font-size: 14px; }

  .stats { gap: 12px; }
  .stat--utama .stat__value { font-size: 36px; }

  /* Panel bawah berubah jadi dialog di tengah — di layar lebar, panel yang
     menempel di dasar terasa seperti tampilan HP yang dipaksa membesar. */
  .sheet { align-items: center; padding: 24px; }

  .sheet__panel {
    max-width: 560px;
    max-height: min(88dvh, 780px);
    border-radius: 20px;
    border-bottom: 1px solid var(--line);
    transform: translateY(18px) scale(0.98);
    opacity: 0;
    transition: transform var(--sedang), opacity var(--sedang);
  }
  .sheet.is-open .sheet__panel { transform: none; opacity: 1; }

  .sheet__head::before { display: none; }
  .sheet__foot { padding-bottom: 16px; }

  .cart-dock { left: auto; right: 24px; width: 380px; }

  .atur-grid { grid-template-columns: repeat(3, 1fr); }
  .chip-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   LAPTOP — ≥ 1024px
   ========================================================= */

@media (min-width: 1024px) {
  :root { --sidebar-w: 236px; }

  body { overflow-y: scroll; } /* cegah layout melompat saat isi berubah tinggi */

  /* ---------- navigasi pindah ke samping ---------- */
  .tabbar {
    top: calc(var(--topbar-h) + env(safe-area-inset-top));
    bottom: 0;
    right: auto;
    width: var(--sidebar-w);
    height: auto;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: none;
    border-right: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(31, 22, 22, 0.6), rgba(26, 26, 26, 0.94));
  }

  .tabbar__btn {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    min-height: 52px;
    padding: 0 15px;
    border-radius: 12px;
    font-size: 14px;
    letter-spacing: 0.01em;
    transition: background var(--cepat), color var(--cepat);
  }
  .tabbar__btn:active { transform: none; }
  .tabbar__ico { font-size: 19px; }

  @media (hover: hover) {
    .tabbar__btn:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-mid); }
  }

  .tabbar__btn.is-active {
    background: linear-gradient(100deg, rgba(139, 30, 30, 0.55), rgba(139, 30, 30, 0.12));
    box-shadow: inset 0 0 0 1px var(--line);
  }

  /* Penanda emas di tepi kiri tab aktif — sekali lihat langsung tahu posisi. */
  .tabbar__btn.is-active::before {
    content: "";
    position: absolute;
    left: 14px;
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--gold);
    box-shadow: 0 0 10px rgba(232, 176, 75, 0.6);
  }
  .tabbar__btn { position: relative; }

  /* ---------- isi bergeser ke kanan sidebar ---------- */
  .view {
    margin-left: var(--sidebar-w);
    padding: 30px clamp(28px, 4vw, 56px) 48px;
  }

  .view--with-cart { padding-bottom: 48px; }

  /* ---------- halaman kasir jadi dua kolom ---------- */
  .view--order {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
    align-items: start;
  }

  .order-menu { min-width: 0; }

  /* Keranjang berhenti mengambang: jadi panel tetap yang selalu terlihat,
     seperti mesin kasir sungguhan. */
  .order-keranjang {
    position: sticky;
    top: calc(var(--topbar-h) + 30px);
  }

  .cart-dock {
    position: static;
    width: auto;
    transform: none;
    transition: none;
    box-shadow: var(--shadow);
  }

  .cart-dock__summary { pointer-events: none; padding: 15px 16px; }
  .cart-dock__chevron { display: none; }

  /* Isi keranjang selalu terbuka di laptop — ruangnya memang tersedia. */
  .cart-dock__body { display: block !important; max-height: min(52vh, 460px); }

  .cart-dock:not(.is-open) { opacity: 0.55; }
  .cart-dock:not(.is-open) .cart-dock__body::after {
    content: "Ketuk menu di sebelah kiri untuk memulai pesanan";
    display: block;
    padding: 26px 18px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-dim);
  }

  .menu-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }

  /* ---------- laporan memanfaatkan lebar ---------- */
  .view--report { padding-inline: max(clamp(28px, 4vw, 56px), calc((100% - 1180px) / 2)); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat--utama { grid-column: span 2; }
  .daychart { height: 168px; }

  /* ---------- menu & pengaturan: dibatasi lebarnya agar baris teks tetap
       nyaman dibaca, bukan memanjang selebar layar ---------- */
  .view--menu, .view--settings {
    padding-inline: max(clamp(28px, 4vw, 56px), calc((100% - 880px) / 2));
  }
  .mlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .drive-aksi { max-width: 420px; }

  @media (hover: hover) {
    .mrow:hover, .riwayat__item:hover, .rank__row:hover, .beli:hover {
      border-color: rgba(255, 255, 255, 0.11);
    }
    .btn:hover { filter: brightness(1.08); }
  }
}

/* =========================================================
   LAYAR LEBAR — ≥ 1440px
   ========================================================= */

@media (min-width: 1440px) {
  .view--order { grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; }
  .menu-grid { grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); }
  .view { padding-inline: clamp(40px, 5vw, 88px); }
}