/*
 * Taiga mobile responsive layer — local stopgap for board.antoviaque.org (card #107).
 * Served AFTER the container's theme-taiga.css. Every rule lives inside a media
 * query; desktop (>1024px) is untouched.
 *
 * ROOT CAUSE (re-diagnosed 2026-08-04 — the :has()-based v1 left ticket detail
 * BLANK on Xav's real Firefox Android). The detail view is a 3-column flex ROW:
 *     .wrapper > tg-project-menu(200px)
 *              + .main.detail(flex:1 1 0%)
 *              + sidebar.ticket-data(300px)
 * At ~390px the menu + sidebar alone (500px) exceed the viewport, so
 * .main.detail (flex-basis:0%) shrinks to width:0 — the "blank page". Reproduced
 * in Gecko: force the wrapper back to a row and .main.detail measures width=0,
 * with only the sidebar's "Created by" fragment escaping — exactly his screenshot.
 *
 * WHY v1 FAILED ON DEVICE. v1's ONLY stacking mechanism was
 *     .wrapper:has(> .main.detail){ flex-direction: column }
 * gated entirely on :has(). On his device that rule did not take effect and the
 * row collapsed. Playwright's headless *desktop*-Gecko supports :has() and
 * rendered it perfectly — a FALSE PASS. Lesson: the load-bearing fix must NOT
 * hinge on :has().
 *
 * ROBUST FIX (this file). Stack the three columns with BASIC flexbox, supported
 * everywhere since ~2015:
 *   - flex-wrap:wrap on the shared .wrapper. This is INERT on the kanban board
 *     (verified live: the board has no .main.detail / .ticket-data, and its main
 *     content has flex-basis:0% so nothing ever forces a wrap there);
 *   - flex-basis:100% on the two DETAIL-ONLY children (.main.detail and
 *     .ticket-data) so each takes a full row and they stack.
 * No :has(). Verified in Gecko INCLUDING the forced-row (no-:has()) state:
 * .main.detail restored from width 0 → full viewport width.
 *
 * The .detail-shell-based upstream PR (targets main, adds a real marker class)
 * never depended on :has() and is unaffected. Keep this file :has()-free.
 */

/* ── Phones: stack the 3 detail columns (the load-bearing fix) ───────────── */
@media screen and (max-width: 768px) {
  /* Shared selector, but the only property it sets on .wrapper is flex-wrap,
     which is inert on the board (see header). */
  .wrapper { flex-wrap: wrap; }

  /* Detail-only classes: force each to a full row so they stack instead of
     being squeezed to width:0 next to the menu + sidebar. */
  .wrapper > .main.detail,
  .wrapper > .ticket-data {
    flex-basis: 100%;
    max-width: 100%;
    min-width: 0;               /* let long words / code blocks shrink, not overflow */
  }
  .wrapper > .main.detail { overflow-wrap: break-word; }

  /* Content first. The project menu is a full-height (theme: calc(100vh-48px))
     sticky rail; left first in the source order it fills the opening screen and
     the ticket reads as "blank" until you scroll past it. Give the two
     DETAIL-ONLY children a negative order so they render ABOVE the shared menu.
     Board-safe: the kanban has no .main.detail / .ticket-data, so its menu keeps
     its natural first position and nothing there is reordered. */
  .wrapper > .main.detail { order: -2; }
  .wrapper > .ticket-data { order: -1; }

  /* With the menu now last, collapse its pinned full-height rail so it's a
     compact block at the bottom rather than a tall dark gap. Specificity
     (0,2,1) + load order beats the theme's tg-project-menu .sticky-project-menu
     (0,1,1); the low-specificity v-first attempt did NOT apply. */
  .wrapper > tg-project-menu .sticky-project-menu {
    position: static;
    height: auto;
    min-height: 0;
  }

  /* Attachment-row controls are right-anchored (justify-content:flex-end) and a
     fixed 10% flex-basis, so they spill ~70px past a 390px row and side-scroll
     the whole page. Contain them within the attachments box. */
  .attachment-full,
  .attachment-list { max-width: 100%; overflow-x: clip; }

  /* Top navbar: tighten the right-hand icons / user menu so they fit at 390px. */
  .navbar .nav-right > a,
  .navbar .nav-right .topnav-dropdown-wrapper > a,
  .navbar [tg-dropdown-user] { padding-inline: .25rem; }

  /* Lightboxes (create / edit modals) single-column so they fit the screen. */
  .lightbox form,
  .lightbox section,
  .lightbox .form,
  .lightbox .content,
  .lightbox .form-wrapper { max-width: 100%; }
  .lightbox .form-wrapper { flex-direction: column; }
  .lightbox .form-wrapper .sidebar { flex-basis: auto; min-width: 0; width: auto; }

  /* Comment / activity tabs wrap instead of overflowing. */
  .history-tabs { flex-wrap: wrap; }
}

/* ── Small tablets: let the sidebar drop full-width; main keeps a comfortable
   column. No collapse happens in this range, so this is a nicety, not a fix. ─ */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .wrapper { flex-wrap: wrap; }
  .wrapper > .ticket-data {
    flex-basis: 100%;
    max-width: 100%;
  }
}