/* Unified responsive layer for desktop, tablet and mobile. */
*, *::before, *::after { box-sizing: border-box; }
html { width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body { width: 100%; min-width: 0; overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; }
input, select, textarea, button { max-width: 100%; font: inherit; }
.container, .main-container, main, .content, .dashboard-content { width: 100%; min-width: 0; }
.products-grid, .orders-grid, .carts-grid, .stats-grid, .dashboard-stats-grid { align-items: stretch; }
.product-card, .order-card, .cart-card, .dashboard-stat-card, .card { min-width: 0; overflow-wrap: anywhere; }
.product-card-actions { width: 100%; min-width: 0; overflow: hidden; }
.availability-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center;
  width: max-content;
  max-width: calc(100% - 1rem);
  min-height: 38px;
  margin: 0 auto .2rem !important;
  padding: .4rem .85rem;
  gap: .5rem;
  border: 1px solid color-mix(in srgb, var(--success, #10b981) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--success, #10b981) 10%, transparent);
  direction: rtl;
  flex-wrap: nowrap !important;
  overflow: hidden;
}
.availability-toggle input[type="checkbox"] {
  position: static !important;
  display: block !important;
  flex: 0 0 20px;
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  accent-color: var(--success, #10b981);
}
.availability-toggle label {
  display: block;
  min-width: 0;
  margin: 0 !important;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  font-weight: 700;
}
.modal-overlay { padding: clamp(.6rem, 3vw, 1.5rem); }
.modal-card { max-width: min(94vw, 760px); max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; }
.table-container, .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { max-width: 100%; }

@media (min-width: 1200px) {
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .orders-grid, .carts-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .container, .main-container, main { padding-left: clamp(1rem, 3vw, 2rem); padding-right: clamp(1rem, 3vw, 2rem); }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
  .orders-grid, .carts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .dashboard-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sidebar-drawer, .categories-drawer { width: min(380px, 48vw); }
}

@media (max-width: 768px) {
  body { font-size: 14px; }
  .container, .main-container, main, .content, .dashboard-content { padding-left: .75rem !important; padding-right: .75rem !important; }
  header, .header-content, .top-bar, .toolbar, .controls-row { flex-wrap: wrap; gap: .65rem; }
  header h1, .page-title { font-size: clamp(1.15rem, 5vw, 1.55rem) !important; }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .7rem !important; }
  .orders-grid, .carts-grid, .stats-grid { grid-template-columns: 1fr !important; gap: .8rem !important; }
  .dashboard-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .65rem !important; }
  .product-card, .order-card, .cart-card, .card { border-radius: 12px; }
  .product-details { padding: .7rem !important; }
  .availability-toggle { width: calc(100% - .5rem); max-width: 240px; min-height: 42px; padding: .5rem .75rem; }
  .product-img-container { aspect-ratio: 1 / 1; height: auto !important; }
  .product-img { width: 100%; height: 100%; object-fit: cover; }
  .btn, button { min-height: 42px; touch-action: manipulation; }
  form .form-row, .filter-row, .date-filter-row { display: grid !important; grid-template-columns: 1fr !important; gap: .75rem !important; }
  .sidebar-drawer, .categories-drawer { width: min(88vw, 360px) !important; }
  .modal-overlay { align-items: flex-end; padding: .4rem; }
  .modal-card { width: 100% !important; max-width: 100% !important; max-height: 94dvh; border-radius: 18px 18px 10px 10px !important; }
  table { min-width: 680px; }
}

@media (max-width: 420px) {
  body { font-size: 13px; }
  .products-grid { grid-template-columns: 1fr !important; }
  .dashboard-stats-grid { grid-template-columns: 1fr 1fr !important; }
  .btn, button { padding-left: .7rem !important; padding-right: .7rem !important; }
  .modal-overlay { padding: .2rem; }
}

@media (hover: none) and (pointer: coarse) {
  button, .btn, a, input, select { min-height: 44px; }
  button:hover, .btn:hover, .product-card:hover { transform: none !important; }
}

@media print {
  .sidebar-drawer, .categories-drawer, .sidebar-overlay, .categories-drawer-overlay, .no-print { display: none !important; }
  body { overflow: visible; }
}