/* ============================================================
   POSkitch — responsive.css
   Breakpoint tuning for tablet & mobile.
   ============================================================ */

/* ---------- ≤ 1399px ---------- */
@media (max-width:1399.98px) {
  .pos-wrap { grid-template-columns:minmax(0,1fr) 372px; }
  .stat-card .sc-value { font-size:19px; }
}

/* ---------- ≤ 1199px ---------- */
@media (max-width:1399.98px) {
  .tb-clock { display:none !important; }
}
@media (max-width:1199.98px) {
  .pos-wrap { grid-template-columns:minmax(0,1fr) 332px; gap:14px; }
  body[data-page="pos"] .app-content { padding:14px; }
  .pos-search { flex:1 1 100%; max-width:none; }
  .pos-toolbar > .btn { flex:1; justify-content:center; }
  .tb-clock { display:none !important; }
  .kds-wrap { grid-template-columns:repeat(3,1fr); }
}

/* ---------- ≤ 991px (tablet: overlay sidebar) ---------- */
@media (max-width:991.98px) {
  .app-sidebar { transform:translateX(-100%); width:var(--sidebar-w)!important; }
  body.sidebar-open .app-sidebar { transform:translateX(0); }
  body.sidebar-collapsed .app-main, .app-main { margin-left:0!important; }
  .sidebar-brand .collapse-btn { display:none; }

  /* POS keeps the two-pane layout on tablets; the cart stays in reach */
  body[data-page="pos"] .app-content { padding:14px; }
  .pos-wrap { grid-template-columns:minmax(0,1fr) 320px; gap:12px; }
  .pos-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
  .pos-cats .chip { padding:7px 13px; }

  .kds-wrap { grid-template-columns:1fr; grid-auto-flow:column; grid-auto-columns:88%; overflow-x:auto; height:auto; }
  .kds-col { min-height:70vh; }
  .auth-wrap { grid-template-columns:1fr; }
  .auth-side { display:none; }
  .auth-logo-mob { display:flex; align-items:center; gap:10px; margin-bottom:22px; justify-content:center; }
  .vnav-wrap { flex-direction:column; }
  .vnav { flex-direction:row; flex-wrap:wrap; }
  .vnav .vnav-link { width:auto; }
}

/* ---------- ≤ 767px (mobile: catalog + cart bottom sheet) ---------- */
@media (max-width:767.98px) {
  .app-content { padding:16px 14px 24px; }
  .topbar-search { display:none; }
  .app-topbar { padding:0 12px; gap:8px; }
  .page-title { font-size:18px; }
  .stat-card { padding:14px; }
  .stat-card .sc-value { font-size:18px; }

  /* POS: natural page flow, cart becomes a slide-up panel */
  body[data-page="pos"] .app-main { height:auto; min-height:100vh; overflow:visible; }
  body[data-page="pos"] .app-content {
    flex:0 0 auto; padding:12px 12px calc(88px + env(safe-area-inset-bottom));
  }
  .pos-wrap { display:block; height:auto; min-height:0; }
  .pos-left { display:flex; }
  .pos-grid { flex:0 0 auto; overflow:visible; padding:2px 2px 8px; grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); gap:10px; }
  .pos-cats { padding-bottom:6px; }
  .pos-cats .chip { padding:7px 12px; font-size:12px; }

  .pos-cart {
    position:fixed; left:0; right:0; bottom:0; z-index:1046;
    height:min(88vh, 680px); height:min(88dvh, 680px);
    max-height:none;
    border-radius:18px 18px 0 0; border-bottom:0;
    box-shadow:0 -12px 40px rgba(16,24,40,.22);
    transform:translateY(102%); transition:transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y:auto; overscroll-behavior:contain;
  }
  body.pos-cart-open .pos-cart { transform:translateY(0); }
  .pos-cart .pc-head {
    position:sticky; top:0; z-index:2; background:var(--card);
    border-radius:18px 18px 0 0;
  }
  .pos-cart .pc-items { flex:0 0 auto; overflow:visible; }
  body.pos-cart-open { overflow:hidden; }
  .pc-mini-btn.pc-close-btn { display:grid; }
  .pos-cart .pc-foot {
    position:sticky; bottom:0; z-index:2; margin-top:auto;
    background:var(--card); border-top:1px solid var(--border);
    padding-top:10px; padding-bottom:calc(14px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 18px rgba(16,24,40,.08);
  }

  .pos-cart-backdrop {
    display:block; position:fixed; inset:0; z-index:1045;
    background:rgba(8,12,20,.5); opacity:0; visibility:hidden;
    transition:opacity .25s, visibility .25s;
  }
  body.pos-cart-open .pos-cart-backdrop { opacity:1; visibility:visible; }

  .pos-cart-bar {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1044;
    background:var(--card); border-top:1px solid var(--border);
    box-shadow:0 -6px 24px rgba(16,24,40,.12);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    transition:transform .25s ease;
  }
  body.pos-cart-open .pos-cart-bar { transform:translateY(110%); }
  .pcb-main {
    flex:1; display:flex; align-items:center; gap:12px; min-width:0;
    border:0; background:transparent; color:var(--text); text-align:left; padding:0;
  }
  .pcb-ic {
    position:relative; width:42px; height:42px; border-radius:12px; flex:0 0 42px;
    background:var(--accent-soft); color:var(--accent-600);
    display:grid; place-items:center; font-size:18px;
  }
  .pcb-count {
    position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px;
    border-radius:9px; background:var(--accent-500); color:#fff;
    font-size:10px; font-weight:800; display:grid; place-items:center;
  }
  .pcb-meta { display:flex; flex-direction:column; line-height:1.2; min-width:0; }
  .pcb-label { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .pcb-total { font-size:17px; font-weight:800; }
  .pcb-cta { margin-left:auto; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-size:12.5px; font-weight:700; color:var(--accent-600); }

  /* keep toasts clear of the fixed cart bar */
  #toast-container.toast-bottom-right, #toast-container.toast-bottom-left, #toast-container.toast-bottom-center { bottom:calc(76px + env(safe-area-inset-bottom)); }

  .pos-toolbar { gap:8px; }

  .pm-tabs { grid-template-columns:repeat(2,1fr); }
  .notif-menu { width:min(92vw,340px); }
  .modal-dialog { margin:10px; }
  .fp-canvas { min-height:420px; }
  .fp-node { width:72px; height:58px; font-size:12px; }
  .fp-node.round { width:62px; height:62px; }
  .cal-cell { min-height:70px; padding:4px 5px; }
  .cal-ev { display:none; }
  .cal-cell.today::after { content:''; position:absolute; bottom:5px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:var(--accent-500); }
  .tb-user .tb-texts { display:none; }
}

/* ---------- ≤ 575px ---------- */
@media (max-width:575.98px) {
  .page-header .btn { flex:1; justify-content:center; display:inline-flex; }
  .pc-head-icons { gap:4px; }
  .receipt { width:100%; }
  .modal-header { flex-wrap:wrap; gap:8px; }
  .modal-header .seg { flex-wrap:wrap; }
  .modal-footer .btn { flex:1; }
}

/* ---------- ≤ 400px (small phones) ---------- */
@media (max-width:400px) {
  .pos-grid { grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); }
  .pc-foot-mini { grid-template-columns:repeat(2,1fr); }
  .pcb-cta span { display:none; }
  .pos-cart { height:min(92dvh, 680px); }
  .success-nums { gap:20px; }
}

/* ---------- Short landscape phones: full-height cart ---------- */
@media (max-width:767.98px) and (max-height:520px) {
  .pos-cart { height:100vh; height:100dvh; border-radius:0; }
  .pos-cart .pc-head { border-radius:0; }
  body[data-page="pos"] .app-content { padding-bottom:80px; }
}

/* ---------- Print helpers are in print.css ---------- */