/* ════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — comprehensive overrides
   Breakpoints:
     ≤ 1024px  — tablet (sidebar collapses to drawer, hide some nav)
     ≤ 768px   — mobile-landscape
     ≤ 640px   — mobile-portrait (most aggressive collapse)
     ≤ 420px   — small phones
   Loaded last so these rules win.
   ════════════════════════════════════════════════════════════════════ */

/* ── Global box-sizing safety + prevent horizontal scroll ─────────── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; }

/* Constrain media + text to not blow horizontal */
img, svg, video, canvas, picture { max-width: 100%; height: auto; }

/* Prevent grid/flex children from forcing parent wider than viewport */
@media (max-width: 1024px) {
  .card, .qa-card, .stat, .summary-card,
  .phase-block, .invpro-row, .activity-row,
  main, .main-wrap, #empty-state, #main-content {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* Long Arabic words/URLs shouldn't expand parents */
  body { word-wrap: break-word; overflow-wrap: break-word; }
}

/* ══════════════════════════════════════════════════════════════════
   INDEX.HTML — topbar + sidebar + dashboard
   ══════════════════════════════════════════════════════════════════ */

/* ── Topbar @ tablet/mobile ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .tb-row { padding: 0 var(--s-4, 16px); gap: var(--s-2, 8px); }
  .tb-brand { padding-inline-end: var(--s-2, 8px); }
  .tb-brand-sub { display: none; } /* hide "ISO 22716 · EU 1223/2009" sub */
  .tb-crumb { display: none; }
  #palette-trigger .hide-md, .tb-crumb { display: none !important; }
  .tb-profile-text { display: none !important; } /* avatar-only on tablet */
  .tb-profile { padding-inline-start: 4px; }
}

@media (max-width: 768px) {
  :root {
    --topbar-h: 56px;
    --topbar-h-sub: 38px;
  }
  .tb-row {
    padding: 0 12px;
    gap: 6px;
    height: var(--topbar-h);
  }
  .tb-brand-mark { width: 30px; height: 30px; }
  .tb-brand-name { font-size: 13px; }
  .tb-batch {
    padding: 4px 8px;
    gap: 4px;
  }
  .tb-batch-label { display: none; }
  .tb-batch input { width: 48px; font-size: 14px; }
  .tb-batch-unit { font-size: 10px; }
  #palette-trigger { padding: 6px 8px !important; }
  #palette-trigger kbd, #palette-trigger .hide-sm { display: none !important; }
  .tb-actions { gap: 2px; }
  .btn-icon {
    width: 34px !important;
    min-height: 34px !important;
  }
  .btn-icon svg { width: 16px; height: 16px; }
  .divider-v { display: none; }
  .tb-row-2 {
    padding: 0 12px;
    height: var(--topbar-h-sub);
    gap: 6px;
    font-size: 11px;
  }
  .tb-row-2 .eyebrow.hide-sm,
  .tb-row-2 .mono.hide-sm,
  .tb-row-2 .live-dot { display: none !important; }
}

@media (max-width: 420px) {
  .tb-row { gap: 4px; padding: 0 10px; }
  .tb-brand-name { font-size: 11.5px; max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tb-brand-mark { width: 28px; height: 28px; }
  .tb-batch input { width: 40px; font-size: 13px; }
  .btn-icon { width: 32px !important; min-height: 32px !important; }
  .btn-icon svg { width: 15px; height: 15px; }
  .tb-actions { gap: 0; }
}

/* ── Sidebar — slide-in drawer on mobile ────────────────────────────
   IMPORTANT NOTES:
   1. Use PHYSICAL right/left (not inset-inline-*) — logical props flip
      unpredictably in RTL when combined with translateX().
   2. No backdrop-filter on the backdrop — Chromium leaks the filter into
      sibling fixed-positioned elements; the drawer text rendered blurred.
   3. isolation: isolate on the drawer to create its own stacking context.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #app-body {
    display: block !important;
    grid-template-columns: none !important;
  }

  /* Default off-screen state — set on BOTH #sidebar and ancestors so the
     drawer is fully hidden when not opened. */
  #sidebar {
    position: fixed !important;
    top: var(--topbar-h, 64px) !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: min(86vw, 320px) !important;
    max-width: 320px !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: calc(100vh - var(--topbar-h, 64px)) !important;
    z-index: 9100 !important;
    transform: translate3d(110%, 0, 0) !important;
    transition: transform 0.28s cubic-bezier(0.21, 0.61, 0.35, 1);
    box-shadow: -20px 0 48px rgba(15,16,20,0.28),
                -2px 0 8px rgba(15,16,20,0.10) !important;
    background: #FFFFFF !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: none !important;
    padding: 12px 6px 24px !important;
    margin: 0 !important;
    /* Force own stacking context so the backdrop CANNOT bleed in */
    isolation: isolate !important;
    /* Disable any inherited filter / backdrop-filter */
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* For older mobile browsers */
    -webkit-overflow-scrolling: touch;
  }
  [data-theme="dark"] #sidebar { background: #1C1D22 !important; }

  /* Hide the desktop collapse arrow */
  #sb-collapse, .sb-footer { display: none !important; }

  /* Open state */
  [data-sidebar="open"] #sidebar {
    transform: translate3d(0, 0, 0) !important;
  }

  /* Backdrop — plain semi-opaque, NO backdrop-filter (that's what caused
     the blurred-text bleed in the previous version) */
  #sidebar-backdrop {
    position: fixed !important;
    top: var(--topbar-h, 64px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 16, 20, 0.55) !important;
    z-index: 9000 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
    /* explicitly no filter */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  [data-sidebar="open"] #sidebar-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-out, visibility 0s linear 0s;
  }

  /* Sidebar section items get a small drawer-specific tune */
  #sidebar .sb-section { padding: 8px 6px !important; gap: 2px !important; }
  #sidebar .sb-label { padding: 8px 12px !important; }
  #sidebar .sb-item {
    padding: 11px 12px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }
  #sidebar .sb-item-ic { width: 22px !important; height: 22px !important; }
  #sidebar .sb-item-ic svg { width: 18px !important; height: 18px !important; }

  /* Mobile menu toggle button (injected via JS) */
  .mobile-menu-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border, #EAEBEE);
    background: var(--surface, #fff);
    color: var(--text-1, #0F1014);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 110;
  }
  .mobile-menu-btn:hover { background: var(--surface-3, #F4F5F6); }
  .mobile-menu-btn svg { width: 18px; height: 18px; }
  [data-theme="dark"] .mobile-menu-btn {
    background: rgba(255,255,255,0.04);
    border-color: #3A3B42;
    color: #ECECEE;
  }
}
@media (min-width: 1025px) {
  .mobile-menu-btn { display: none !important; }
  #sidebar-backdrop { display: none !important; }
}

/* ── Dashboard hero / cards ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Force ALL .g-12 children (and inline-styled grid containers) to a
     SINGLE-column layout. Inline styles win over CSS without !important —
     these rules use !important + attribute selectors to override. */
  .g-12,
  div[class~="g-12"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Any g-col-* spans 1 column (full width) */
  [class*="g-col-"] {
    grid-column: 1 / -1 !important;
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 768px) {
  #main, .main-wrap { padding: 16px !important; }
  #main { max-width: 100%; }
  .page-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 20px;
  }
  .page-head .row { justify-content: stretch; flex-wrap: wrap; }
  .page-head .row .btn { flex: 1; }
  .page-title { font-size: 26px !important; line-height: 1.18 !important; }
  .page-sub { font-size: 13.5px !important; max-width: 100% !important; }
  .page-eyebrow { font-size: 10.5px; }
  .stat { padding: 14px 16px !important; }
  .stat-val { font-size: 24px !important; }
  .hero-illu svg { width: 140px !important; height: 140px !important; }
  .display { font-size: 22px !important; }

  /* Hero card body */
  .card-body { min-height: auto !important; }
  .card-body p { max-width: 100% !important; }
  .card-body .row { width: 100%; flex-wrap: wrap; }
  .card-body .row .btn { flex: 1; min-width: 130px; }

  /* Recent activity table — scroll horizontally instead of overflow */
  .table-wrap { overflow-x: auto; }
  .table { min-width: 540px; }
}

@media (max-width: 640px) {
  .qa-card {
    padding: 14px !important;
  }
  .qa-card-title { font-size: 14px !important; }
  .qa-card-sub { font-size: 12px !important; }
}

@media (max-width: 480px) {
  .page-title { font-size: 22px !important; }
  .hero-illu svg { width: 110px !important; height: 110px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   APP.HTML — formula / cost / batch setup
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .app-topbar { padding: 0; }
  .app-tb-row {
    padding: 10px 12px !important;
    gap: 8px !important;
    flex-wrap: wrap;
  }
  .app-tb-brand { gap: 8px !important; }
  .app-tb-mark { width: 30px !important; height: 30px !important; }
  .app-tb-name { font-size: 13px !important; }
  .app-tb-sub { display: none !important; }
  .app-tb-batch input { width: 48px !important; font-size: 14px !important; }
  .app-tb-batch-label { display: none; }
  .app-tb-actions { gap: 2px !important; }
  .app-tb-btn { padding: 7px !important; min-width: 34px; justify-content: center; }
  .app-tb-btn .hide-sm { display: none !important; }
  .app-tb-btn svg { width: 15px !important; height: 15px !important; }

  /* Product tabs scroll horizontally */
  #tb-apps.app-tb-products {
    padding: 4px 12px 10px !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  #tb-apps.app-tb-products::-webkit-scrollbar { display: none; }
  .tb-app {
    flex-shrink: 0 !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
  .tb-app-name { font-size: 12px !important; }

  /* Sub-tabs scrollable */
  #apptabs-inner.app-tb-subtabs {
    padding: 0 12px !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #apptabs-inner.app-tb-subtabs::-webkit-scrollbar { display: none; }
  .apptab {
    flex-shrink: 0;
    padding: 11px 4px !important;
    margin-inline-end: 16px !important;
    font-size: 13px !important;
  }

  #main { padding: 18px 14px 60px !important; }

  /* Page head (formula tab) */
  .fp-pagehead {
    padding: 6px 0 16px !important;
    margin-bottom: 18px;
    gap: 14px;
  }
  .fp-pagehead-left { flex: 1 1 100% !important; }
  .fp-pagehead-right { width: 100%; gap: 6px !important; }
  .fp-eyebrow { font-size: 10px !important; margin-bottom: 6px !important; }
  .fp-title { font-size: 26px !important; }
  .fp-sub { font-size: 13px !important; }
  .fp-chip, .fp-action-btn {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  /* Phase cards */
  .phase-block { border-radius: 12px !important; margin-bottom: 12px !important; }
  .phase-block > .phase-head { padding: 12px 14px !important; gap: 8px; flex-wrap: wrap; }
  .phase-label { font-size: 9.5px !important; padding: 3px 8px !important; }
  .phase-name { font-size: 14px !important; }
  .phase-total { font-size: 11px !important; padding: 4px 9px !important; }

  /* Ingredient rows — single column layout */
  .phase-block tbody tr {
    grid-template-columns: 38px 1fr !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  .phase-block tbody tr td:nth-child(3),
  .phase-block tbody tr td:nth-child(4) {
    grid-column: 2 !important;
    justify-content: flex-start !important;
    margin-top: 8px !important;
  }
  .phase-block tbody tr td:nth-child(3) { margin-top: 10px !important; }
  .phase-block tbody tr td:nth-child(4) { margin-top: 4px !important; margin-inline-start: 0 !important; }
  .ing-inci { font-size: 13px !important; }
  .ing-arabic { font-size: 12.5px !important; }
  .ing-role { font-size: 11.5px !important; }
  .pct-input { width: 70px !important; font-size: 13px !important; padding: 7px 8px !important; }
  .gram-badge { font-size: 11.5px !important; padding: 5px 10px !important; min-width: 70px !important; }
  .toggle { width: 32px !important; height: 18px !important; }
  .toggle-knob { width: 14px !important; height: 14px !important; }
  .toggle.on .toggle-knob { inset-inline-start: 16px !important; }

  /* Why panel */
  .why-inner { padding: 10px 12px !important; font-size: 12.5px !important; }

  /* Summary cards */
  .summary {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .summary-card { padding: 12px 14px !important; }
  .sc-val { font-size: 22px !important; }

  /* Cost tab table */
  #main table { font-size: 12px; }
  #main table td, #main table th { padding: 8px 10px !important; }
  .cost-input { width: 70px !important; padding: 7px 8px !important; font-size: 12px !important; }
}

@media (max-width: 420px) {
  .summary { grid-template-columns: 1fr !important; }
  .app-tb-row { padding: 8px 10px !important; }
  .fp-title { font-size: 22px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   MODALS / OVERLAYS — fit small screens
   ══════════════════════════════════════════════════════════════════ */

/* Batch setup overlay */
@media (max-width: 768px) {
  #bs-overlay { padding: 0 !important; align-items: stretch !important; }
  .bs-panel { max-height: 100vh !important; border-radius: 0 !important; max-width: 100% !important; border: none !important; }
  .bs-head { padding: 20px 18px 16px !important; }
  .bs-head-product { top: 14px !important; inset-inline-end: 14px !important; padding: 4px 9px 4px 5px !important; }
  .bs-head-icon { font-size: 14px !important; width: 22px !important; height: 22px !important; }
  .bs-head-code { font-size: 9.5px !important; }
  .bs-eyebrow { font-size: 10px !important; margin-bottom: 6px !important; }
  .bs-title { font-size: 22px !important; max-width: 100% !important; padding-inline-end: 90px; }
  .bs-sub { font-size: 12.5px !important; }
  .bs-body { padding: 16px 18px !important; }
  #bs-kg-input { font-size: 44px !important; padding: 14px 16px !important; }
  .bs-presets { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .bs-preset { padding: 10px 6px !important; font-size: 11.5px !important; }
  .bs-types { grid-template-columns: 1fr !important; gap: 8px !important; }
  .bs-type-btn { padding: 12px 14px !important; gap: 12px !important; }
  .bs-foot { padding: 14px 18px !important; flex-direction: column-reverse !important; align-items: stretch !important; gap: 8px !important; }
  .bs-foot > * { width: 100% !important; justify-content: center !important; margin: 0 !important; }
  .bs-go { padding: 14px 18px !important; font-size: 15px !important; }
  .bs-preview-grid { grid-template-columns: 1fr 1fr !important; }
}

/* Inventory Pro panel */
@media (max-width: 768px) {
  #invpro-overlay { padding: 0 !important; align-items: stretch !important; }
  #invpro-panel { max-height: 100vh !important; border-radius: 0 !important; max-width: 100% !important; border: none !important; }
  .invpro-head { padding: 16px 18px 14px !important; }
  .invpro-title { font-size: 22px !important; }
  .invpro-sub { font-size: 12.5px !important; }
  .invpro-summary { grid-template-columns: 1fr !important; }
  .invpro-stat { padding: 12px 18px !important; }
  .invpro-stat-val { font-size: 22px !important; }
  .invpro-alerts { padding: 12px 18px !important; }
  .invpro-body { padding: 12px 18px 18px !important; }
  .invpro-section-head h3 { font-size: 14px !important; }
  /* Stack rows on phone */
  .invpro-row {
    grid-template-columns: 44px 1fr 1fr !important;
    gap: 10px 12px !important;
    padding: 10px 6px !important;
  }
  .invpro-row .invpro-c-name { grid-column: 2 / span 2 !important; }
  .invpro-row .invpro-c-stock { grid-column: 1 / span 1 !important; padding-top: 4px; }
  .invpro-row .invpro-c-cost { grid-column: 2 / span 1 !important; padding-top: 4px; }
  .invpro-row .invpro-c-min { grid-column: 3 / span 1 !important; padding-top: 4px; }
  .invpro-row .invpro-c-status { grid-column: 1 / span 3 !important; padding-top: 4px; }
  .invpro-row .invpro-c-toggle { grid-row: 1; grid-column: 1; }
  .invpro-name-main { font-size: 13px !important; }
  .invpro-input { font-size: 12px !important; padding: 7px 8px !important; }
  .invpro-row-head { display: none !important; }
  .invpro-foot { padding: 12px 18px !important; flex-direction: column !important; gap: 10px; }
  .invpro-foot-actions { width: 100%; }
  .invpro-foot-actions .invpro-btn { flex: 1; }
}

/* AI Suggestions modal */
@media (max-width: 768px) {
  #ai-overlay { padding: 0 !important; align-items: stretch !important; }
  #ai-panel { max-height: 100vh !important; max-width: 100% !important; border-radius: 0 !important; }
}

/* Sale price card */
@media (max-width: 600px) {
  .spc-head { padding: 16px 18px !important; }
  .spc-title { font-size: 20px !important; }
  .spc-sub { font-size: 12.5px !important; line-height: 1.65 !important; }
  .spc-bands { grid-template-columns: 1fr !important; gap: 6px !important; }
  .spc-band { padding: 12px 14px !important; }
  .spc-band-range { font-size: 18px !important; }
  .spc-market, .spc-foot { padding-left: 18px !important; padding-right: 18px !important; }
  .spc-tier { padding: 14px !important; }
  .spc-tier-price { font-size: 24px !important; }
}

/* Recipes panel (legacy) */
@media (max-width: 768px) {
  .recipes-panel {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   ADMIN.HTML — sidebar drawer
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .admin-body {
    grid-template-columns: 1fr !important;
  }
  .admin-sidebar {
    position: fixed !important;
    top: var(--topbar-h, 56px);
    inset-inline-end: 0;
    bottom: 0;
    width: 260px !important;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.21, 0.61, 0.35, 1);
    z-index: 99;
    box-shadow: -12px 0 32px rgba(15,16,20,0.08);
  }
  [dir="rtl"] .admin-sidebar { transform: translateX(100%); }
  [dir="ltr"] .admin-sidebar { transform: translateX(-100%); }
  .admin-app[data-sidebar="open"] .admin-sidebar { transform: translateX(0) !important; }
  .admin-app[data-sidebar="open"]::before {
    content: '';
    position: fixed;
    inset: var(--topbar-h, 56px) 0 0;
    background: rgba(15,16,20,0.45);
    backdrop-filter: blur(4px);
    z-index: 98;
  }
  .admin-topbar { padding: 0 16px !important; gap: 8px !important; }
  .admin-brand small { display: none; }
  .admin-breadcrumb { display: none; }
  .profile-chip span:not(.avatar) { display: none; }
  .profile-chip { padding: 4px !important; }
}

@media (max-width: 600px) {
  .admin-main { padding: 16px !important; }
  .page-title { font-size: 22px !important; }
  .stat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .stat-card { padding: 14px !important; }
  .stat-card .value { font-size: 20px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   AUTH GATE — mobile fit
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  #cfs-auth-overlay { padding: 5vh 16px !important; align-items: flex-start !important; }
  #cfs-auth-card { padding: 26px 22px !important; max-width: 100% !important; }
  #cfs-auth-card h1 { font-size: 22px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   GENERAL — touch targets, readability
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (pointer: coarse) {
  /* Make tiny buttons at least 36px tall to be tappable */
  button, .btn, a.btn, input[type="checkbox"], input[type="radio"] {
    min-height: 36px;
  }
  /* Smaller default font for tables */
  table { font-size: 12.5px; }
}