/**
 * Responsive layout — tablet (<=1100px) and phone (<=900px / <=600px)
 */

html, body, #app { height: 100dvh; }
#app { height: 100dvh; width: 100%; }

/* ======================= Small desktop / tablet landscape ======================= */
@media (max-width: 1280px) {
  .toolbar-center .toolbar-metric { display: none; }
  .brand-badge { display: none; }
  .statusbar-center { display: none; }
}

@media (max-width: 1100px) {
  .pos-checkout-area { min-width: 330px; }
  .user-shift-info .shift-badge { display: none; }
  .dashboard-charts-row { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 190px 1fr; }
}

/* ============================ Tablet portrait / phone ============================ */
@media (max-width: 900px) {
  /* Toolbar: 2 rows */
  .app-toolbar {
    height: auto;
    flex-wrap: wrap;
    padding: 6px 8px;
    gap: 6px;
    padding-top: max(6px, env(safe-area-inset-top));
  }
  .app-toolbar { position: relative; }
  .toolbar-left { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; order: 2; }
  .toolbar-left::-webkit-scrollbar { display: none; }
  .toolbar-brand { position: absolute; left: 52px; top: max(10px, env(safe-area-inset-top)); margin: 0; font-size: 15px; }
  .toolbar-center { display: none; }
  .toolbar-right { margin-left: auto; order: 1; gap: 4px; }
  .mobile-menu-btn { display: inline-flex; order: 0; position: absolute; left: 8px; top: max(6px, env(safe-area-inset-top)); z-index: 2; }
  .toolbar-left > .toolbar-brand + .order-type-selector, .toolbar-left > .order-type-selector { flex-shrink: 0; }
  .app-toolbar { min-height: 44px; }
  .toolbar-right .user-shift-info { display: none; }
  #btn-toggle-fullscreen { display: none; }
  .order-type-btn { padding: 6px 10px; white-space: nowrap; }
  .custom-channel-dropdown { flex-shrink: 0; }
  .channel-menu { position: fixed; top: auto; left: 8px; right: 8px; bottom: 8px; border-radius: 12px; z-index: 3000; box-shadow: 0 -8px 30px rgba(0,0,0,.35); }
  .channel-menu-item { padding: 14px 16px; font-size: 14px; }

  /* Sidebar -> slide-in drawer */
  .app-sidebar, .app-sidebar.collapsed {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: 250px; min-width: 250px;
    transform: translateX(-102%);
    transition: transform .25s ease;
    z-index: 2500;
    padding-top: env(safe-area-inset-top);
  }
  .app-sidebar.mobile-open { transform: none; box-shadow: 6px 0 30px rgba(0,0,0,.5); }
  .app-sidebar.collapsed .nav-label, .app-sidebar.collapsed .sidebar-logo-text { display: block; }
  .nav-item-btn { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 13px 18px; }
  .nav-item-btn .nav-icon { margin: 0; }
  .nav-item-btn .nav-label { font-size: 14px; max-width: none; }
  .nav-badge { right: 16px; top: 12px; }
  .sidebar-toggle-btn { display: none; }
  .sidebar-scrim { display: block; position: fixed; inset: 0; background: rgba(10,14,18,.55); z-index: 2400; opacity: 0; pointer-events: none; transition: opacity .25s; }
  .sidebar-scrim.show { opacity: 1; pointer-events: auto; }

  /* Status bar: minimal */
  .app-statusbar { padding: 0 8px; height: 24px; font-size: 10px; padding-bottom: env(safe-area-inset-bottom); }
  .statusbar-left .statusbar-item:nth-child(n+2), .statusbar-right { display: none; }

  /* POS: catalog OR cart (phone/tablet portrait) */
  .pos-view-container { position: relative; flex-direction: column; }
  .pos-catalog-area { flex: 1; border-right: none; min-height: 0; }
  .pos-checkout-area {
    position: absolute; inset: 0; min-width: 0; z-index: 30;
    transform: translateY(100%); transition: transform .28s ease;
    visibility: hidden;
  }
  .pos-view-container.show-cart .pos-checkout-area { transform: none; visibility: visible; }
  .pos-mobile-back {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 10px 14px; border: none; border-bottom: 1px solid var(--border-panel);
    background: var(--bg-header-gradient); font-weight: 700; font-size: 14px; color: var(--text-heading); cursor: pointer;
  }
  .pos-mobile-cartbar {
    display: flex; align-items: center; gap: 10px;
    position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 20;
    padding: 12px 16px; border: 1px solid #1b5e20; border-radius: 12px;
    background: var(--bg-primary-glossy); color: #fff; font-weight: 800; font-size: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,.35); cursor: pointer;
  }
  .pos-mobile-cartbar .mcb-total { margin-left: auto; }
  .pos-mobile-cartbar.is-empty { display: none; }
  .pos-view-container.show-cart .pos-mobile-cartbar { display: none; }
  .product-grid-container { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); padding-bottom: 80px; gap: 8px; }
  .category-filter-bar { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .cat-pill-btn { flex-shrink: 0; }
  .pos-actions-grid { grid-template-columns: repeat(4, 1fr); }
  .pos-action-btn { font-size: 11px; padding: 6px 2px; flex-direction: column; gap: 2px; height: auto; min-height: 44px; }

  /* Module pages */
  .module-header { height: auto; min-height: 44px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; gap: 8px; }
  .module-title { font-size: 16px; }
  .module-actions { flex-wrap: wrap; }
  .module-body { padding: 10px; }
  .filter-subbar { flex-wrap: wrap; gap: 8px; }
  .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-container table { min-width: 640px; }
  .settings-grid { grid-template-columns: 1fr; height: auto; }
  .settings-sidebar { display: flex; flex-direction: row; overflow-x: auto; }
  .tables-top-bar { padding: 8px 10px; }
  .tables-legend { flex-wrap: wrap; gap: 8px; }
  .floor-plan-viewport { padding: 14px; }
  .floor-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px; }
  .table-token.rectangle { grid-column: span 1; }
  .table-token.round { width: 110px; height: 110px; }

  /* KDS */
  .kds-header { padding: 6px 10px; }
  .kds-filters { overflow-x: auto; flex-wrap: nowrap; width: 100%; scrollbar-width: none; }
  .kds-station-btn { white-space: nowrap; flex-shrink: 0; }
  .kds-board { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); padding: 10px; gap: 10px; }

  /* Modals -> near full width */
  .modal-window, .modal-window.modal-sm, .modal-window.modal-md, .modal-window.modal-lg, .modal-window.modal-xl {
    width: 96vw; min-width: 0; max-width: 96vw; max-height: 92dvh;
  }
  .modal-footer { flex-wrap: wrap; }
  .payment-modal-layout { flex-direction: column; }
  .payment-methods-column { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .pay-method-btn { flex: 1 1 45%; }
  .modal-body [style*="grid-template-columns"] { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
  .receipt-paper { width: 100%; max-width: 320px; }

  /* Toasts at the top, full width */
  .toast-container { left: 8px; right: 8px; top: auto; bottom: 70px; align-items: stretch; }
  .toast { min-width: 0; max-width: none; }

  /* Bigger touch targets */
  .btn { min-height: 38px; }
  .btn-sm { min-height: 34px; }
  .qty-btn { width: 34px; height: 34px; }
  .form-control, .form-select { min-height: 40px; }
}

/* ================================= Small phones ================================= */
@media (max-width: 600px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-card { padding: 10px; }
  .cart-item-row { flex-wrap: wrap; }
  .cart-item-info { flex-basis: 100%; }
  .kds-board { grid-template-columns: 1fr; }
  .kds-stats-summary { width: 100%; justify-content: space-between; }
  .kds-ticket { max-height: none; }
  .tables-admin-actions { width: 100%; }
  .tables-admin-actions .btn { flex: 1; }
  .quick-cash-grid { grid-template-columns: repeat(2, 1fr); }
  .toolbar-brand span:first-child { font-size: 14px; }
}

@media (max-width: 380px) {
  .pos-actions-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid-container { grid-template-columns: repeat(2, 1fr); }
}

/* Landscape phones: keep cart panel usable */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .app-toolbar { padding-top: 4px; }
  .pos-view-container { flex-direction: row; }
  .pos-checkout-area { position: static; transform: none; visibility: visible; min-width: 300px; flex: 0 0 42%; }
  .pos-mobile-back, .pos-mobile-cartbar { display: none !important; }
}