/* 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; }
}

/* Inventory page */
.store-page .container { width: min(100%, 1400px); }
.store-page header { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 2fr); align-items: center; gap: 1rem; width: 100%; }
.store-page header h1 { min-width: 0; line-height: 1.4; }
.store-page .header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; min-width: 0; }
.store-page .header-actions .btn { width: auto; min-width: 0; margin: 0; white-space: nowrap; text-decoration: none; }
.store-page .store-toolbar, .store-page .store-primary-actions, .store-page .store-filters { min-width: 0; max-width: 100%; }
.store-page .store-filters > div { min-width: min(240px, 100%) !important; }
.store-page .product-card-actions > div:last-child { display: flex; flex-wrap: wrap; width: 100%; gap: .4rem; }
.store-page .product-card-actions .btn-edit, .store-page .product-card-actions .btn-delete { min-width: 0; min-height: 40px; }
.store-page .modal-card form, .store-page .modal-card .form-group { min-width: 0; max-width: 100%; }
.store-page .modal-card input, .store-page .modal-card select, .store-page .modal-card textarea { width: 100%; }
.store-menu-toggle, .store-sidebar-header, .store-sidebar-overlay { display: none; }

@media (min-width: 769px) and (max-width: 1199px) {
  .store-page header { grid-template-columns: 1fr; text-align: center; }
  .store-page header h1 { text-align: center; }
  .store-page .header-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .store-page .header-actions .btn { width: 100%; white-space: normal; }
  .store-page .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .store-page .container { padding: .65rem !important; gap: 1rem; }
  .store-page header { display: grid !important; grid-template-columns: 44px minmax(0, 1fr); padding: .75rem .65rem !important; gap: .55rem; text-align: center; }
  .store-page header h1 { width: 100%; font-size: clamp(1.05rem, 5vw, 1.35rem) !important; text-align: center; }
  .store-menu-toggle { display: flex; grid-column: 1; grid-row: 1; align-items: center; justify-content: center; width: 42px; height: 42px; min-height: 42px; padding: 0 !important; border: 1px solid var(--card-border); border-radius: 10px; background: var(--input-bg); color: var(--text-main); font-size: 1.35rem; cursor: pointer; }
  .store-page header h1 { grid-column: 2; grid-row: 1; align-self: center; }
  .store-page .header-actions { position: fixed !important; top: 0; right: 0; z-index: 1200; display: flex !important; flex-direction: column; align-items: stretch; justify-content: flex-start; width: min(88vw, 360px) !important; max-width: 360px; height: 100dvh; padding: 0 1rem 1.2rem !important; gap: .65rem; background: var(--card-bg); border-left: 1px solid var(--card-border); box-shadow: -12px 0 32px rgba(0,0,0,.35); overflow-y: auto; overscroll-behavior: contain; transform: translateX(105%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }
  .store-page .header-actions.open { transform: translateX(0); visibility: visible; transition: transform .3s ease, visibility 0s; }
  .store-page .header-actions .btn { width: 100% !important; min-height: 48px; padding: .65rem .75rem !important; white-space: normal; line-height: 1.35; font-size: .9rem; justify-content: center; flex: 0 0 auto; }
  .store-page .header-actions .store-theme-toggle { order: 999; margin-top: auto !important; position: sticky; bottom: 0; z-index: 2; background: var(--card-bg); border-color: var(--accent) !important; box-shadow: 0 -8px 18px rgba(0,0,0,.12); }
  .store-sidebar-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; min-height: 68px; margin: 0 -1rem .25rem; padding: .8rem 1rem; background: var(--card-bg); border-bottom: 1px solid var(--card-border); color: var(--accent); }
  .store-sidebar-close { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; min-height: 38px; padding: 0 !important; border: 1px solid var(--card-border); border-radius: 50%; background: var(--input-bg); color: var(--text-main); font-size: 1.35rem; cursor: pointer; }
  .store-sidebar-overlay { position: fixed; inset: 0; z-index: 1190; display: block; background: rgba(0,0,0,.58); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; backdrop-filter: blur(3px); }
  .store-sidebar-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease, visibility 0s; }
  body.store-sidebar-open { overflow: hidden !important; overscroll-behavior: none; }
  .store-page .card { width: 100%; padding: .8rem !important; overflow: hidden; }
  .store-page .store-toolbar { margin-bottom: 1rem !important; padding-bottom: 1rem !important; }
  .store-page .store-primary-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem !important; }
  .store-page .store-primary-actions .btn { width: 100% !important; min-width: 0; padding: .55rem .4rem !important; justify-content: center; }
  .store-page .store-filters { display: grid !important; grid-template-columns: 1fr; gap: .6rem !important; }
  .store-page .store-filters > div { width: 100%; min-width: 0 !important; }
  .store-page .store-toolbar h2 { font-size: 1rem !important; line-height: 1.5; }
  .store-page .products-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .65rem !important; }
  .store-page .product-card { width: 100%; min-width: 0; }
  .store-page .product-img-container { height: auto !important; aspect-ratio: 1 / 1; }
  .store-page .product-card-actions { padding: .6rem !important; }
  .store-page .product-card-actions > div:last-child { display: grid !important; grid-template-columns: 1fr 1fr; }
  .store-page .product-card-actions .btn-edit, .store-page .product-card-actions .btn-delete { width: 100%; padding: .45rem .2rem !important; font-size: .75rem; }
  .store-page .modal-overlay { padding: .3rem; }
  .store-page .modal-card { width: 100% !important; max-width: 100% !important; padding: 1.2rem .85rem !important; gap: 1rem; }
  .store-page .modal-card form > div:last-child { flex-wrap: wrap; }
  .store-page .modal-card form > div:last-child .btn { min-width: 120px; }
  .store-page .preview-container { max-width: 100%; overflow-x: auto; }
}

@media (max-width: 420px) {
  .store-page .products-grid { grid-template-columns: 1fr !important; }
  .store-page .store-primary-actions { grid-template-columns: 1fr; }
}

@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; }
}

/* Manager dashboard header and drawer */
#dashboardView { overflow: visible; }
#dashboardView > * { min-width: 0; max-width: 100%; }
#dashboardView .db-header {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center !important;
  gap: .75rem !important;
  width: 100%;
  padding: 1rem 1.25rem !important;
}
#dashboardView .db-header > .menu-toggle-btn {
  position: static !important;
  grid-column: 1;
  grid-row: 1;
  transform: none !important;
  justify-self: center;
}
#dashboardView .db-header > .theme-toggle-btn {
  position: static !important;
  grid-column: 3;
  grid-row: 1;
  transform: none !important;
  justify-self: center;
}
#dashboardView .db-header > div {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
#dashboardView .db-header h1,
#dashboardView #subscriptionInfoBar { max-width: 100%; overflow-wrap: anywhere; }
.sidebar-drawer {
  right: 0 !important;
  left: auto !important;
  z-index: 2147483646 !important;
  transform: translate3d(110%, 0, 0) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, visibility 0s linear .3s !important;
  overflow: hidden;
}
.sidebar-drawer.open {
  right: 0 !important;
  transform: translate3d(0, 0, 0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, visibility 0s !important;
}
.sidebar-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sidebar-overlay { inset: 0; width: auto !important; height: auto !important; z-index: 2147483645 !important; pointer-events: none; }
.sidebar-overlay[style*="display: block"] { pointer-events: auto; }
body.sidebar-open { overflow: hidden !important; overscroll-behavior: none; }

@media (min-width: 769px) and (max-width: 1199px) {
  #dashboardView .db-header { grid-template-columns: 52px minmax(0, 1fr) 52px; padding: 1rem 1.5rem !important; }
  #dashboardView .db-header h1 { font-size: clamp(1.35rem, 3vw, 1.75rem) !important; }
}

@media (max-width: 768px) {
  #dashboardView { padding: .65rem !important; gap: 1rem !important; }
  #dashboardView .db-header { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: .35rem !important; padding: .7rem .45rem !important; min-height: 72px !important; }
  #dashboardView .db-header h1 { font-size: clamp(1rem, 4.8vw, 1.3rem) !important; line-height: 1.35; }
  #dashboardView #subscriptionInfoBar { font-size: .7rem !important; gap: .25rem !important; line-height: 1.45; }
  #dashboardView .menu-toggle-btn, #dashboardView .theme-toggle-btn { width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; }
  #dashboardView .store-link-card { width: 100%; padding: 1rem .75rem !important; overflow: hidden; }
  #dashboardView #storeLinkText { width: 100%; max-width: 100%; word-break: break-all; overflow-wrap: anywhere; }
  .sidebar-drawer { width: min(88vw, 360px) !important; max-width: 360px; }
  .toast-container { right: .5rem !important; left: .5rem !important; width: auto !important; }
  .toast { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
}

@media (max-width: 768px) {
  .store-page .header-actions { z-index: 2147483646 !important; }
  .store-sidebar-overlay { z-index: 2147483645 !important; }
}