/* ==========================================================================
 *  MOBILE DENSITY LAYER  (v1.194.169)
 *  ONE place for OrgHub's phone compactness. Loaded LAST so it wins the
 *  cascade over the static component styles without touching them inline.
 *
 *  Rules:
 *   • Everything is inside a max-width media query — desktop/tablet UNCHANGED.
 *   • Real responsive sizing only — never a scale/zoom hack.
 *   • Dark identity, safe-area handling, a11y and 44px touch targets preserved.
 *   • Shared tokens are overridden once (:root) and cascade everywhere; the
 *     component rules below only retrofit what a shared token can't reach.
 *
 *  The JS-injected design systems own their own mobile rules (they load after
 *  static CSS): the race Command Center hero (.cc-*) in
 *  js/lib/race-organizer-dashboard.js and the .pds system in
 *  js/lib/premium-ui.js. This file covers the static shell + classic cards.
 * ========================================================================== */

/* ─────────────────────────  PHONES  ( ≤ 560px )  ───────────────────────── */
@media (max-width: 560px) {

  /* ── Density tokens — override once, cascade everywhere ──
     --tabbar-h feeds --tabbar-total & --content-bottom (lazily resolved), so
     shrinking it here compacts the bar AND the scroll reservation together. */
  :root {
    --tabbar-h: 58px;   /* was 64 — visible nav height; safe-area added under it */
    --radius: 14px;     /* was 16 — calmer card corners on small screens */
  }

  /* ── App header — reclaim vertical space, keep every control ── */
  .appbar { padding: 7px 12px; padding-top: max(7px, env(safe-area-inset-top)); gap: 8px; }
  .appbar__logo { width: 34px; height: 34px; border-radius: 10px; }
  .appbar__name { font-size: 13.5px; }
  .appbar__actions { gap: 2px; }
  .iconbtn { width: 36px; height: 36px; font-size: 19px; }

  /* ── Bottom tab bar — compact, ≥44px targets, safe-area untouched ── */
  .tab { padding: 6px 2px; gap: 2px; font-size: 11.5px; }
  .tab__icon { font-size: 21px; width: 42px; height: 27px; }

  /* ── Page shell — tighter gutter & rhythm ── */
  .content { padding-left: 14px; padding-right: 14px; }
  .view { gap: 12px; }

  /* ── Cards (classic system) — remove the 22px desktop padding ── */
  .card { padding: 16px; border-radius: var(--radius); }

  /* ── Buttons — 44px targets, not oversized. Toolbars wrap instead of stacking full-width ── */
  .btn { min-height: 44px; }
  .btn--lg { min-height: 48px; padding: 0 18px; font-size: 15px; }

  /* ── FAB — less dominant (item 8) ── */
  .ep-fab, .fab { width: 52px; height: 52px; }
  .ai-fab { width: 50px; height: 50px; }

  /* ── Registration-method cards (item 5) — compact selectable rows ── */
  .regd-method-card { padding: 14px; gap: 7px; }
  .regd-method-card__icon { font-size: 22px; }
  .regd-method-card__title { font-size: 15px; }
  .regd-method-card__features { gap: 5px; font-size: 12.5px; }

  /* ── Public-link panel card (item 6) — its URL row + action grid live in the
     component's own injected CSS (ensureRegdCss → .regd-share__*), which loads
     after this file and owns the compact 2-col actions + URL ellipsis. ── */
  .regd-link-panel { padding: 15px; }

  /* ── Route detail (item 7) — less dead space before the useful info ── */
  .rdd-header { padding: 6px 0 8px; gap: 10px; }
  .rdd-quick { gap: 6px; margin: 6px 0 2px; }
  .rdd-quick .btn { flex: 0 1 auto; }
  .crumbs { margin: -2px 0 0; }

  /* ── Mobile type scale — trim oversized headings, keep body readable (item 9) ── */
  .pagehead__title, .greeting__hello { font-size: 20px; }
  .card__title, .list__title, .rowitem__title { font-size: 15px; }

  /* ── ONE compact mobile header — fold secondary actions into the hamburger ──
     The bar keeps only brand + notifications + menu; search/help/shortcuts/
     profile/persona-switch (.appbar-sec) move into the drawer (app.js). This
     replaces the squeezed desktop toolbar; it does NOT shrink it. */
  .appbar__actions .appbar-sec { display: none !important; }

  /* ── Global bottom nav: clearly separated from page content/tabs ──
     A top shadow + solid ground distinguishes the fixed app nav from in-page
     tab strips (e.g. a route card's «Φωτογραφίες»), so they never read as two
     stacked navbars. Content clearance is already handled by --content-bottom. */
  .tabbar { box-shadow: 0 -6px 20px rgba(0, 0, 0, .22); justify-content: space-around; overflow-x: hidden; }
  /* Fill the bar — tabs share the full width equally instead of being capped at
     92px and left-aligned (mobile-touch-nav's horizontal-scroll design left an
     empty gap, since the footer never exceeds 4 tabs + «Περισσότερα»). */
  .tab { flex: 1 1 0; min-width: 0; max-width: none; }
  .tab__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ── Route card: no horizontal overflow, mobile hierarchy, less height ──
     Title and actions stack; actions become a balanced 2-col grid (≥44px)
     instead of a clipped horizontal row. */
  .route-card__top { flex-direction: column; align-items: stretch; gap: 10px; }
  .route-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .route-card__actions .btn, .route-card__actions .iconbtn { width: 100%; min-width: 0; min-height: 44px; justify-content: center; }
  .route-card__body { padding: 14px 16px 16px; gap: 10px; }
}

/* ─────────────────────  SMALL PHONES  ( ≤ 400px )  ──────────────────────── */
@media (max-width: 400px) {
  :root { --tabbar-h: 56px; }
  .content { padding-left: 12px; padding-right: 12px; }
  .card { padding: 14px; }
  .appbar__name { max-width: 40vw; }
}