/* ============================================================================
   DT²⁵⁶ v2.06d — RESPONSIVE ORIENTATION SYSTEM (styles-11-orientation.css)
   ----------------------------------------------------------------------------
   Purpose: make DT²⁵⁶ adapt beautifully when the user's device auto-rotates.
   Strategy: 100% ADDITIVE. This file is loaded LAST, and every rule is gated
   behind orientation + height media queries, so:
     • Portrait phones  → completely unchanged.
     • Desktop          → completely unchanged.
     • Tablets portrait → completely unchanged.
   Only "compact landscape" (a phone turned sideways: wide but short) and the
   821–1023px landscape width gap receive new rules.

   NOTE: The actual rotation unlock is in manifest.json (portrait lock removed)
   — this file only optimizes the layout once rotation happens. No JavaScript
   was added or changed: rotation is a pure CSS reflow, so page, state, scroll,
   forms, modals and history are naturally preserved by the existing SPA.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. WIDTH-GAP FIX (821–1023px, landscape)
   Base CSS caps body at 480px; ≤820px goes full width; ≥1024px goes desktop
   (1180px). That left 821–1023px — exactly where most modern phones land in
   landscape (851 / 896 / 915 / 932 CSS px) — showing a narrow 480px column
   with empty sides. In landscape, use the full width there.
   --------------------------------------------------------------------------- */
@media (orientation: landscape) and (min-width: 821px) and (max-width: 1023px) {
  body{max-width:none;width:100%;margin:0}
  .hdr{width:100%;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .content{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .nav{width:100%;padding-left:max(4px,env(safe-area-inset-left));padding-right:max(4px,env(safe-area-inset-right))}
  .modal-box{max-width:560px}
  .grid2{grid-template-columns:repeat(3,1fr)}
}

/* ----------------------------------------------------------------------------
   2. COMPACT LANDSCAPE — a phone rotated sideways (wide but ≤500px tall).
   Vertical space is precious: shrink chrome (header, bottom nav), use the
   extra width (more grid columns, side-by-side product layout), keep every
   function and touch target intact.
   --------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 500px) {

  /* --- App shell: full width + notch-safe side padding --- */
  body{max-width:none;width:100%;margin:0}
  .hdr{width:100%;padding-top:calc(6px + env(safe-area-inset-top,0px));padding-bottom:6px;
       padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .hdr-name small{display:none}               /* drop tagline; keep logo + name */
  .content{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));
           padding-top:10px;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}

  /* --- Bottom navigation: shorter, all five actions kept, targets ≥40px --- */
  .nav{padding:4px 6px calc(5px + env(safe-area-inset-bottom,0px));
       padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}
  .nav-item{padding:3px 12px;min-height:40px;justify-content:center}
  .nav-item span,.nav-center span{font-size:9px}
  .nav-center .nav-plus{transform:scale(.88)}

  /* --- Home hero: compact, premium, no oversized portrait banner --- */
  .hero{padding:11px 14px;margin-bottom:11px}
  .hero-chip{margin-top:8px;padding:6px 12px}

  /* --- Product/listing grid: use the width, keep cards readable --- */
  .grid2{grid-template-columns:repeat(3,1fr)}

  /* --- Modals: wider + shorter, buttons always reachable, inner scroll --- */
  .modal-box{max-width:560px;max-height:calc(100dvh - 24px);padding:18px 20px}
  .dt-final-dialog{max-height:calc(100dvh - 24px)}

  /* --- Side drawer: compact head so menu + logout stay reachable --- */
  .snav-head{padding:10px 16px 8px}
  .snav-user{padding:8px 16px}

  /* --- AI Assistant: wider/shorter panel above the nav; FAB clear of edges --- */
  .ai-ov-panel{width:min(520px,calc(100vw - 24px));height:auto;top:max(8px,env(safe-area-inset-top,0px));
               bottom:calc(64px + env(safe-area-inset-bottom,0px));right:max(12px,env(safe-area-inset-right));max-height:none}
  #ai-fab-root{bottom:calc(60px + env(safe-area-inset-bottom,0px));right:max(14px,env(safe-area-inset-right))}
  .ai-fab{width:48px;height:48px}

  /* --- Chat: a little wider than the 480px portrait column --- */
  .chat-panel{max-width:640px}

  /* --- PRODUCT PAGE: gallery left, title/price/actions right (spec §16) --- */
  .dt-product-hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:12px}
  .dt-product-sidebar{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .dt-gallery-stage{height:min(56vh,300px);min-height:180px;max-height:300px}
  .dt-product-lower-grid{grid-template-columns:1fr}
  /* Approved action hierarchy preserved, arranged for width (spec §18):
     WhatsApp primary row stays first; secondary + utility compact below. */
  .dt-primary-actions{grid-template-columns:1fr 1fr}
  .dt-secondary-actions{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dt-product-facts{grid-template-columns:repeat(4,1fr)}
  .dt-product-services{grid-template-columns:repeat(3,minmax(0,1fr))}

  /* --- WALLET: Available left; Pending/Total right; actions below (spec §23) --- */
  .wal-top{grid-template-columns:1.4fr 1fr;align-items:stretch}
  .wal-split{grid-template-columns:1fr 1fr}
  .wal-stats{grid-template-columns:repeat(4,1fr)}

  /* --- ADMIN: stats fit in one row; tables scroll sideways, never crush --- */
  .adm-grid4{grid-template-columns:repeat(4,1fr)}
  .adm-table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}

  /* --- Category picker in Sell flow: 3 columns fits landscape width --- */
  .dt-sell-category-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:min(62vh,610px)}

  /* --- Category request/chat panel: keep header+input on screen, chat scrolls --- */
  .dt-sub-inline{max-height:calc(100dvh - 20px)}
}

/* ----------------------------------------------------------------------------
   3. VERY SHORT LANDSCAPE (≤380px tall — small phones sideways, or landscape
   with the keyboard open). Trim harder so forms stay usable.
   --------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 380px) {
  .hero{padding:9px 12px;margin-bottom:9px}
  .dt-gallery-stage{height:52vh;min-height:150px}
  .modal-box{padding:14px 18px}
  .card-p{padding:11px}
}