/* ══════════════════════════════════════════════════════════════════════════
   APP MOBILE THEME
   Reskins the core shopper flow (store, product, cart, checkout, courier,
   shop+, account, dashboard) on small screens to match app/index.php's
   palette: navy background, slate cards, purple accent. Desktop is
   untouched — everything here is scoped to the same 768px breakpoint the
   rest of the site's mobile CSS (mobile-app.css, global-wide.css) uses.

   Loaded last (after each page's own <style> block) and uses !important
   throughout for the same reason global-wide.css and mobile-app.css do:
   every target page hardcodes its own light-theme colors rather than the
   --bn-* tokens, so matching or beating their specificity is the only way
   to win the cascade without rewriting each page's CSS from scratch.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --bn-primary:       #7c3aed !important;
    --bn-primary-dark:  #6d28d9 !important;
    --bn-primary-light: #2e1065 !important;
    --bn-accent:        #a78bfa !important;
    --bn-surface:       #1e293b !important;
    --bn-bg:            #0f172a !important;
    --bn-border:        #334155 !important;
    --bn-text:          #e2e8f0 !important;
    --bn-muted:         #94a3b8 !important;
  }

  html, body { background: #0f172a !important; color: #e2e8f0 !important; }

  /* ── Generic light "card on white page" pattern used across store.php,
     product.php, cart.php, checkout.php, account.php, dashboard.php ──── */
  body, .app-sec, #main-content, #app-root,
  .card, .info-card, .stat-card, .product-card, .store-card, .n-card,
  .cart-item, .checkout-form, .form-section, .summary-box, .order-card,
  .dashboard-card, .account-card, .sidebar-checkout, .empty-state,
  section, .container, .page-section {
    background-color: transparent;
  }
  body { background-color: #0f172a !important; }
  .app-sec, #main-content, #app-root, .container, .page-section, section,
  .admin-wrapper, .admin-content, .sd-desktop-wrap, .sd-main-col {
    background-color: #0f172a !important;
  }
  .card, .info-card, .stat-card, .product-card, .store-card, .n-card,
  .cart-item, .checkout-form, .form-section, .summary-box, .order-card,
  .dashboard-card, .account-card, .sidebar-checkout {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
  }

  /* Common hardcoded white/near-white surfaces, page by page — grepped for
     each target page's own background:#fff rules rather than guessed, since
     forcing light text globally (previous approach) without confirming
     every one of these was actually darkened is what caused invisible
     light-on-still-white text on Shop+ and Courier. */
  .white-card, .bg-white, .light-panel,
  /* customer/shop-deliver.php */
  .how-it-works, .order-panel, .chat-wrap,
  /* courier-book.php (#courierBookPage .card, .btn-outline) */
  #courierBookPage .card,
  /* store.php / product.php product grid (v3-complete.css .product-item) */
  .product-item {
    background-color: #1e293b !important;
    border-color: #334155 !important;
  }
  #courierBookPage .btn-outline {
    background-color: transparent !important;
    border-color: #a78bfa !important;
    color: #a78bfa !important;
  }

  /* Text color is only ever forced *inside a container this file has
     actually darkened above* — never globally. A blanket rule on every
     heading/paragraph on the page makes text invisible the moment it sits
     in some other light box this stylesheet doesn't know about yet; scoping
     to known-dark containers means anything not yet covered just keeps its
     own (legible-on-light) color instead of turning invisible. */
  .card, .info-card, .stat-card, .product-card, .store-card, .n-card,
  .cart-item, .checkout-form, .form-section, .summary-box, .order-card,
  .dashboard-card, .account-card, .sidebar-checkout,
  .how-it-works, .order-panel, .chat-wrap, #courierBookPage .card,
  .app-sec, #main-content, #app-root, .admin-wrapper, .admin-content,
  .sd-desktop-wrap, .sd-main-col, .product-item {
    color: #e2e8f0 !important;
  }
  /* :not([style*="background"]) is load-bearing: several of these dark
     containers wrap their own self-contained colored callouts/badges
     (e.g. courier-book.php's light-lavender "multiple shipments are
     cheaper" tip, save-banners, "Open Now" pills) that set their OWN
     background + a color chosen to match it via inline style="". Without
     this guard, the blanket rule below forced those elements' text light
     too while leaving their (non-white, so untouched) background alone —
     light text on a light background, invisible again. Anything that
     declares its own background is assumed to already pair it with a
     readable text color and is left alone; everything else (plain text
     sitting directly on the container) gets relit for the dark bg. */
  .card :is(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):not([style*="background"]),
  .info-card :is(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):not([style*="background"]),
  .stat-card :is(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):not([style*="background"]),
  .cart-item :is(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):not([style*="background"]),
  .checkout-form :is(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):not([style*="background"]),
  .form-section :is(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):not([style*="background"]),
  .summary-box :is(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):not([style*="background"]),
  .order-card :is(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):not([style*="background"]),
  .dashboard-card :is(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):not([style*="background"]),
  .account-card :is(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):not([style*="background"]),
  .sidebar-checkout :is(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):not([style*="background"]),
  .how-it-works :is(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):not([style*="background"]),
  .order-panel :is(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):not([style*="background"]),
  .chat-wrap :is(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):not([style*="background"]),
  #courierBookPage .card :is(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):not([style*="background"]),
  .product-item :is(h1,h2,h3,h4,h5,h6,p,span,div,label,li,td,th):not([style*="background"]) {
    color: #e2e8f0 !important;
  }
  /* Class-based light bubbles/badges (not inline-styled, so the guard above
     can't catch them) get their own explicit exclusion instead. */
  .chat-wrap .msg.assistant .msg-bubble,
  .chat-wrap .msg.assistant .msg-bubble * {
    color: #1f2937 !important;
  }

  /* templates/store-restaurant.php's menu — plain CSS classes (not inline
     styles), so neither the guard above nor the attribute selectors reach
     them; the page's own dark-on-white colors go invisible once this
     stylesheet darkens the page background under them. */
  .menu-section-title, .menu-item-name { color: #e2e8f0 !important; }
  .menu-item-desc { color: #94a3b8 !important; }
  .menu-section-title { border-bottom-color: #334155 !important; }
  .menu-item { border-bottom-color: #334155 !important; }

  /* ── Raw inline-styled boxes (store.php's About/Hours/Contact cards, and
     others across the flow, are plain `<div style="background:#fff;...">`
     with no class at all — an external stylesheet can't reach them with a
     normal selector, but CSS attribute selectors can text-match inside the
     style="" attribute itself. Also catches the same hardcoded hex values
     wherever else these pages inline them (sort dropdown's siblings,
     courier/shop-deliver leftovers, etc). Broad but scoped to mobile only,
     and only these exact literal hex strings — legitimate colored badges
     (green "Open Now", red "Closed") use other hex values and are untouched. */
  [style*="background:#fff"], [style*="background: #fff"],
  [style*="background:#ffffff"], [style*="background-color:#fff"] {
    background-color: #1e293b !important;
  }
  [style*="color:#111827"], [style*="color: #111827"],
  [style*="color:#1f2937"], [style*="color: #1f2937"] {
    color: #e2e8f0 !important;
  }
  [style*="color:#374151"], [style*="color: #374151"] {
    color: #cbd5e1 !important;
  }
  [style*="color:#6b7280"], [style*="color: #6b7280"],
  [style*="color:#9ca3af"], [style*="color: #9ca3af"],
  [style*="color:#4b5563"], [style*="color: #4b5563"] {
    color: #94a3b8 !important;
  }

  /* store.php's shared v3-complete.css white components */
  .sort-button, .sort-menu, .checkout-option, .modal-content, .modal-header,
  .store-group, .form-card,
  /* account.php */
  .account-sidebar, .account-content, .loyalty-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
  }
  .sort-option:hover { background-color: #263449 !important; }
  .account-nav a { color: #cbd5e1 !important; }
  .account-nav a:hover, .account-nav a.active {
    background: rgba(124,58,237,.18) !important;
    color: #a78bfa !important;
  }
  .account-nav-logout { color: #f87171 !important; }
  .account-nav-logout:hover { color: #f87171 !important; background: rgba(220,38,38,.15) !important; }

  /* account.php: header sits directly on the page body (not inside any of
     the darkened containers above) and keeps its own dark heading color;
     the Messages panel's thread box and notify banner are inline-styled
     with hex values (#f9fafb, #eef2ff) this file's #fff-only attribute
     selectors don't match. */
  .account-header h1, .account-header p { color: #e2e8f0 !important; }
  #msgThread { background-color: #1e293b !important; }
  #msgThread > div { color: #94a3b8 !important; }
  #msgNotifyBanner {
    background-color: #2e1065 !important;
    border-color: #6d28d9 !important;
  }
  #msgNotifyBanner, #msgNotifyBanner * { color: #ddd6fe !important; }

  /* ── Product card polish (store.php / product.php grid) — a modern,
     app-store-style tile instead of v3-complete.css's plain flat card:
     tighter radius, a real border instead of just a shadow, a squared-off
     image with its own soft backdrop, and a smaller pill-style button. */
  .product-item {
    border: 1px solid #334155 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.25) !important;
    padding: 10px !important;
  }
  .product-item img {
    border-radius: 12px !important;
    height: 130px !important;
    background: #0f172a !important;
    object-fit: contain !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    margin-bottom: .6rem !important;
  }
  .product-item h4 {
    font-size: .88rem !important;
    font-weight: 700 !important;
    margin-bottom: .3rem !important;
  }
  .product-item p {
    font-size: .78rem !important;
    margin-bottom: .6rem !important;
  }
  .product-item button {
    border-radius: 20px !important;
    padding: 9px !important;
    font-size: .82rem !important;
    box-shadow: none !important;
  }
  .product-item:active { transform: scale(.98); }
  .muted, .subtitle, .sub, small, .text-muted, .help-text,
  .step, .step-label, .item-qty {
    color: #94a3b8 !important;
  }
  .item-price { color: #e2e8f0 !important; }
  a { color: #a78bfa !important; }

  /* Success/confirmation messages inside the now-dark .card (cart.php,
     checkout.php's #success-msg) hardcode a dark green/gray meant for a
     white card — swap for tones that read on the dark one instead. */
  #success-msg h2, .success-msg h2 { color: #34d399 !important; }
  #success-msg p, .success-msg p, #success-msg i, .success-msg i {
    color: #94a3b8 !important;
  }
  #success-msg .fa-check-circle, .success-msg .fa-check-circle {
    color: #34d399 !important;
  }

  hr, .divider, .border-top, .border-bottom {
    border-color: #334155 !important;
  }

  /* ── Typography scale — match app/index.php's compact sizing instead of
     each page's own desktop-scale headings (e.g. cart.php's "Your Cart"
     was an inline font-size:3rem, roughly 3x the app's page titles). */
  h1 { font-size: 1.4rem !important; margin-top: 0 !important; }
  h2 { font-size: 1.15rem !important; }
  h3 { font-size: 1rem !important; }

  /* ── Buttons / primary actions ──────────────────────────────────────── */
  .btn-primary, .btn-add, .btn-checkout, .checkout-btn, .order-btn,
  .add-to-cart, button[type="submit"], input[type="submit"] {
    background: #7c3aed !important;
    background-image: none !important;
    border-color: #7c3aed !important;
    color: #fff !important;
  }
  .btn-secondary, .btn-outline {
    background: transparent !important;
    border-color: #7c3aed !important;
    color: #a78bfa !important;
  }

  /* ── Inputs ──────────────────────────────────────────────────────────── */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select, textarea {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
  }
  input::placeholder, textarea::placeholder { color: #64748b !important; }

  /* ── Headers some of these pages render themselves (not header.php's) ── */
  header, .page-header, .top-bar, .sd-header, .dash-header {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
  }

  /* ── Bottom nav bar (header.php's inline copy, includes/mobile-bottom-nav.php,
     and shop-deliver.php's own copy) — match app/index.php's dark nav instead
     of the site's white one. */
  .mob-bottom-nav {
    background: #0f172a !important;
    border-top-color: #1e293b !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,.35) !important;
  }
  .mob-nav-item { color: #64748b !important; }
  .mob-nav-item.active, .mob-nav-item:hover { color: #a78bfa !important; }
}