/* responsive.css — mobile + tablet adaptation for dripcheck.
 *
 * The app is built with inline React style objects. React serializes them WITH
 * a space after each colon and "; " between declarations, e.g.
 *   style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;"
 * so attribute-substring selectors below match that exact spacing.
 *
 * Card grids are collapsed; small THUMBNAIL grids (gap: 2px / 6px, literal
 * 1fr 1fr 1fr, repeat(24, 1fr)) are deliberately NOT matched (we discriminate
 * on the gap value) so they stay multi-column.
 * Breakpoints: tablet ≤960px, phone ≤640px, public nav ≤720px.
 */

/* ── Global overflow guards ─────────────────────────────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0.04); }

/* ════════════════ TABLET (≤960px) ════════════════ */
@media (max-width: 960px) {
  /* Stat / card grids step down a column */
  [style*="grid-template-columns: repeat(4, 1fr); gap: 14px"],
  [style*="grid-template-columns: repeat(5, 1fr); gap: 10px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Two-column fractional splits stack */
  [style*="grid-template-columns: 1.6fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1.2fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1.3fr 0.85fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Dashboard builder 3-col → stack */
  [style*="grid-template-columns: 300px 1fr 320px"] {
    grid-template-columns: 1fr !important;
  }
  /* Settings 2-col (tab rail + panel) → stack */
  [style*="grid-template-columns: 200px 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Profile header (avatar / bio / actions) → stack */
  [style*="grid-template-columns: 160px 1fr auto"] {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════ PHONE (≤640px) ════════════════ */
@media (max-width: 640px) {
  /* All real card / stat grids → single column.
     Gap value discriminates real cards (≥10px) from thumbnail grids (≤6px). */
  [style*="grid-template-columns: repeat(2, 1fr); gap: 14px"],
  [style*="grid-template-columns: repeat(2, 1fr); gap: 10px"],
  [style*="grid-template-columns: repeat(2, 1fr); gap: 32px"],
  [style*="grid-template-columns: repeat(3, 1fr); gap: 14px"],
  [style*="grid-template-columns: repeat(3, 1fr); gap: 16px"],
  [style*="grid-template-columns: repeat(3, 1fr); gap: 18px"],
  [style*="grid-template-columns: repeat(3, 1fr); gap: 24px"],
  [style*="grid-template-columns: repeat(3, 1fr); gap: 32px"],
  [style*="grid-template-columns: repeat(4, 1fr); gap: 14px"],
  [style*="grid-template-columns: repeat(4, 1fr); gap: 16px"],
  [style*="grid-template-columns: repeat(4, 1fr); gap: 18px"] {
    grid-template-columns: 1fr !important;
  }
  /* Top-brands / outfit-detail stat strip (5-up) → 2-up */
  [style*="grid-template-columns: repeat(5, 1fr); gap: 10px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Field pairs (1fr 1fr, terminated by ;) → stack for full-width inputs.
     The trailing ; avoids matching 1fr 1fr 1fr. */
  [style*="grid-template-columns: 1fr 1fr;"] {
    grid-template-columns: 1fr !important;
  }
  /* Partnership-detail terms label/value → stack */
  [style*="grid-template-columns: 160px 1fr;"] {
    grid-template-columns: 1fr !important;
  }

  /* Section / footer horizontal padding tightened */
  section { padding-left: 18px !important; padding-right: 18px !important; }
  footer  { padding-left: 18px !important; padding-right: 18px !important; }

  h1 { letter-spacing: -0.03em; }

  /* Fixed-width inputs become fluid */
  [style*="width: 480px"] { width: 100% !important; max-width: 100% !important; }
  [style*="width: 280px"] { width: 100% !important; }
  [style*="max-width: 360px"] { max-width: 100% !important; }
}

/* ── Studio: hide desktop sidebar, show mobile chrome ───────────────────── */
.dc-studio-mobilebar { display: none; }
.dc-studio-bottomnav { display: none; }
.dc-studio-overlay { display: none; }

@media (max-width: 960px) {
  /* Collapse the 232px sidebar column — sidebar becomes a fixed drawer */
  .dc-studio-shell { grid-template-columns: 1fr !important; }
  .dc-studio-sidebar {
    position: fixed !important; top: 0; left: 0; bottom: 0; z-index: 120;
    width: 264px !important; height: 100vh !important;
    transform: translateX(-100%); transition: transform .28s ease;
    box-shadow: 0 0 60px rgba(20,20,18,0.18);
  }
  .dc-studio-shell.drawer-open .dc-studio-sidebar { transform: translateX(0); }
  .dc-studio-overlay {
    display: block; position: fixed; inset: 0; z-index: 110;
    background: rgba(20,20,18,0.4); opacity: 0; pointer-events: none;
    transition: opacity .28s ease;
  }
  .dc-studio-shell.drawer-open .dc-studio-overlay { opacity: 1; pointer-events: auto; }
  .dc-studio-mobilebar { display: flex !important; }
  .dc-studio-bottomnav { display: flex !important; }
  /* Hide the desktop topbar search row on mobile (search lives in drawer) */
  .dc-studio-topbar { display: none !important; }
  /* Room for the sticky bottom nav */
  .dc-studio-main { padding-bottom: 96px !important; padding-left: 18px !important; padding-right: 18px !important; }
}

/* ── Public nav: swap desktop bar for mobile bar ────────────────────────── */
.dc-nav-mobile { display: none; }
@media (max-width: 720px) {
  .dc-nav-desktop { display: none !important; }
  .dc-nav-mobile { display: flex !important; }
}

/* ── Tables: allow horizontal scroll, keep columns aligned ──────────────── */
@media (max-width: 760px) {
  .dc-scroll-x { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .dc-scroll-x > div[style*="grid-template-columns:"] { min-width: 640px; }
}

/* ── Touch: prevent iOS focus-zoom on form fields (16px min) ────────────── */
@media (max-width: 640px) {
  input, textarea, select { font-size: 16px !important; }
}

/* ── Create-outfit builder: mobile layout ───────────────────────────────── */
@media (max-width: 960px) {
  .dc-build-grid {
    display: flex !important;
    flex-direction: column !important;
  }
  /* Let left-rail panels interleave with the board on mobile */
  .dc-build-rail-left { display: contents !important; }
  .dc-mb-import        { order: 1; }
  .dc-build-canvas     { order: 2; }
  .dc-build-rail-left > *:not(.dc-mb-import) { order: 3; }
  .dc-build-rail-right { order: 4; }
  .dc-build-head  { padding: 20px 18px 12px !important; }
  .dc-build-body  { padding: 12px 18px 56px !important; }
  /* Keep the canvas a comfortable, non-overflowing square */
  .dc-build-canvas > div:nth-child(2) { max-width: 100%; }
}
@media (max-width: 640px) {
  .dc-build-head-row { gap: 12px !important; }
  /* Header Save/Publish move to below the board on mobile */
  .dc-build-actions { display: none !important; }
  .dc-build-actions-mobile { display: flex !important; }
  .dc-build-actions-mobile > button { padding: 11px 16px !important; font-size: 10px !important; letter-spacing: 0.1em !important; }
}