/* =========================================
   RESPONSIVE — shared tablet / phone / touch rules for the layout and components.
   Loaded before the page files, so a page can still adjust its own pieces.
   ========================================= */

/* =========================================
   TABLET — ≤1024px
   ========================================= */
@media (max-width: 1024px) {
  .chart-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
  .responsive-grid-2col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .search-input { width: 160px; }
  .topbar { padding: 0 16px; }
  .page-content { padding: 20px; }
  .notif-panel { min-width: 280px; right: 0; }
}

/* =========================================
   PHONE LANDSCAPE — ≤768px
   ========================================= */
@media (max-width: 768px) {
  /* Sidebar: full-screen overlay */
  .mobile-menu-btn { display: flex; }
  .sidebar {
    transform: translateX(-100%);
    width: 280px;
    z-index: 200;
    box-shadow: none;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 8px 0 30px rgba(0,0,0,0.2);
  }
  .sidebar.collapsed { width: 280px; }
  .sidebar.collapsed .sidebar-brand,
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .nav-section-label { opacity: 1; width: auto; }
  .sidebar.collapsed .sidebar-user .user-info { display: flex; }
  .sidebar.collapsed .btn-logout { display: block; }
  .sidebar-toggle { display: flex; margin-left: auto; }
  .main-wrapper { margin-left: 0 !important; }

  /* Topbar adjustments */
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-username { display: none; }
  .topbar-profile svg:last-child { display: none; }

  /* Page content */
  .page-content { padding: 16px; }
  .page-title { font-size: 1.25rem; }
  .page-header-row { flex-direction: column; gap: 8px; }
  .page-actions { width: 100%; }
  .filter-bar { width: 100%; }

  /* KPI Grid */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi-value { font-size: clamp(1rem, 11cqi, 1.3rem); }
  .kpi-card { padding: 14px 16px; }

  /* Responsive grids */
  .responsive-grid-2col { grid-template-columns: 1fr; }

  /* Charts */
  .chart-grid { grid-template-columns: 1fr; }
  .chart-canvas-wrap { height: 200px; }

  /* Shop layout */
  .shop-layout { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cart-panel { position: static; }

  /* Forms */
  .form-row { grid-template-columns: 1fr; }

  /* Tables — horizontal scroll */
  .table-container { border-radius: var(--radius); }
  .data-table td, .data-table thead th { padding: 10px 12px; font-size: 0.8rem; }

  /* Modal — near full-screen */
  .modal-overlay { padding: 8px; align-items: flex-end; }
  .modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .modal-wide { max-width: 100%; }
  .modal-body { padding: 16px; }
  .modal-header { padding: 16px; }
  .modal-footer { padding: 12px 16px; }

  /* Receipt */
  .receipt { padding: 12px; }

  /* Toast — bottom center */
  .toast-container { bottom: 12px; right: 12px; left: 12px; }
  .toast { min-width: auto; max-width: 100%; }

  /* Notification panel */
  .notif-panel { position: fixed; top: var(--topbar-height); left: 8px; right: 8px; min-width: auto; }
  .profile-menu { min-width: 150px; }

  /* Table toolbar */
  .table-toolbar { flex-direction: column; align-items: stretch; }

  /* Alert banners */
  .alert-banner { flex-wrap: wrap; font-size: 0.8rem; padding: 10px 12px; }

  /* Tabs */
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tab-btn { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; }

  /* Empty state */
  .empty-state { padding: 40px 16px; }

  /* Auth */
  .auth-container { padding: 28px 24px; }
}

/* =========================================
   PHONE PORTRAIT — ≤480px
   ========================================= */
@media (max-width: 480px) {
  html { font-size: 13px; }

  .page-content { padding: 12px; }
  .page-title { font-size: 1.1rem; }

  /* KPI grid stacks */
  .kpi-grid { grid-template-columns: 1fr; gap: 8px; }
  .kpi-card { padding: 12px 14px; }
  .kpi-value { font-size: 1.2rem; }

  /* All responsive grids to single column */
  .responsive-grid-2col { grid-template-columns: 1fr; }

  /* Products */
  .product-grid { grid-template-columns: 1fr; }

  /* Sidebar full width */
  .sidebar { width: 100%; }

  /* Auth compact */
  .auth-container { padding: 24px 20px; }
  .auth-title { font-size: 1.3rem; }

  /* Modal full screen */
  .modal { max-height: 95vh; }

  /* Buttons */
  .btn { padding: 7px 12px; font-size: 0.8rem; }
  .page-actions { flex-wrap: wrap; }

  /* Inline two-column grids inside modals (order details, product form) */
  .modal-body [style*="grid-template-columns:1fr 1fr"],
  .modal-body [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Cart items compact */
  .cart-item { flex-wrap: wrap; gap: 6px; }
}

/* =========================================
   MOBILE / TOUCH OPTIMIZATIONS — ≤768px
   ========================================= */
@media (max-width: 768px) {
  body { -webkit-text-size-adjust: 100%; }

  /* iOS Safari zooms the page when a focused input is under 16px */
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea,
  .form-input, .form-select, .form-textarea, .forecast-select { font-size: 16px !important; }

  /* Topbar: overrides for inline styles in dashboard.blade.php */
  .topbar-left { gap: 4px !important; min-width: 0; }
  .mobile-menu-btn {
    width: 40px; height: 40px; flex-shrink: 0;
    align-items: center; justify-content: center;
    border-radius: var(--radius);
  }
  .global-search-container { margin-left: 0 !important; max-width: none !important; min-width: 0; }
  .global-search-container > svg { left: 12px !important; }
  #global-search-input { height: 36px !important; padding: 0 12px 0 36px !important; }
  #global-search-results {
    position: fixed !important;
    top: calc(var(--topbar-height) + 4px) !important;
    left: 8px !important; right: 8px !important;
    width: auto !important; max-height: 70vh !important;
  }
  .topbar-right { gap: 0 !important; padding-right: 0 !important; }
  .topbar-username, .topbar-chevron { display: none; }
  .profile-dropdown-container > button { padding: 4px !important; }

  /* Dropdowns: full width under the topbar instead of overflowing off-screen */
  #notif-dropdown {
    position: fixed !important;
    top: calc(var(--topbar-height) + 4px) !important;
    left: 8px !important; right: 8px !important;
    width: auto !important; margin-top: 0 !important;
  }
  #notif-list { max-height: 60vh !important; }
  #profile-dropdown { max-width: calc(100vw - 16px); }

  /* Filter bars: inline fixed widths (e.g. width:250px) become flexible */
  .filter-bar .flex-row { width: 100%; }
  .filter-bar > .form-input, .filter-bar > .form-select,
  .filter-bar .flex-row > .form-input, .filter-bar .flex-row > .form-select {
    flex: 1 1 140px; width: auto !important; min-width: 0; max-width: 100%;
  }
  .filter-bar > div:has(> .form-input, > .form-select) { flex: 1 1 140px; min-width: 0; }
  .filter-bar > div > .form-input, .filter-bar > div > .form-select { width: 100% !important; }
  .filter-bar .search-field { flex: 1 1 140px; width: auto !important; min-width: 0; }
  .table-toolbar .filter-bar { margin-bottom: 0; }

  /* Page actions wrap and share the row */
  .page-actions { flex-wrap: wrap; }
  .page-actions .btn { flex: 1 1 auto; }

  /* Tables: smooth momentum scroll, long text cells don't force huge widths */
  .table-container { -webkit-overflow-scrolling: touch; }

  /* Modals: use dynamic viewport so the browser toolbar doesn't cut the footer */
  .modal { max-height: 92dvh; }
  .modal-footer { flex-wrap: wrap; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .modal-footer .btn { flex: 1 1 auto; }
  .receipt-modal .modal-header { flex-wrap: wrap; gap: 8px; }

  /* Toasts sit above the home indicator */
  .toast-container { bottom: calc(12px + env(safe-area-inset-bottom)); }

  /* Sidebar: bigger tap targets */
  .nav-item { padding: 12px 12px; }
}

@media (max-width: 480px) {
  .modal { max-height: 95dvh; }

  /* Search inputs get their own row; selects pair up two per row */
  .filter-bar > .form-input,
  .filter-bar .flex-row > .form-input,
  .filter-bar .search-field { flex-basis: 100%; }
}

/* Touch screens: no hover-lift jitter; expandable action buttons stay icon-only
   (a tap would otherwise leave them stuck half-expanded) */
@media (hover: none) {
  .card:hover, .kpi-card:hover, .btn:hover { transform: none; }
  .btn-expandable,
  .btn-expandable:hover { height: 36px; max-width: 36px; padding: 0 9px !important; }
  .btn-expandable:hover .btn-text { opacity: 0; }
  .data-table td:has(.btn-expandable),
  .table td:has(.btn-expandable) { min-width: 0 !important; }
  .row-actions { gap: 6px; width: 210px; }
  .data-table td:has(.row-actions),
  .table td:has(.row-actions) { width: 210px; }

  /* Press-and-hold on buttons, cards and labels shouldn't start a text selection
     (with its magnifier loupe) or the link/image callout; fields stay selectable */
  body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
  a, button, input, select, textarea, label, .nav-item, .card, .kpi-card { touch-action: manipulation; }
}