/* ══════════════════════════════════════════════════════════════════════
   css/mobile-enhancements.css  —  MOBILE ENHANCEMENTS (NEW)
   Additive-only fixes added during this refactor (login/admin card vw
   fallback, admin user-row wrapping, report sub-tabs horizontal scroll).
   Loaded LAST. See comment block inside the file for full rationale.
   (original index.html lines: NEW FILE -- not present in original)
   ══════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   MOBILE ENHANCEMENTS — added during the modularization refactor.
   These are ADDITIVE fixes layered on top of base.css + mobile.css.
   Nothing here removes or overrides desktop behavior; every rule is
   scoped inside a max-width media query so desktop is untouched.

   Gaps this file closes (found by auditing the original CSS):
   1. .login-card / .admin-card had fixed pixel widths (400px / 700px)
      with no small-screen fallback — would overflow on any phone.
   2. .user-row (Admin panel user list) is a single-line flex row with
      avatar + name + 2 badges + 2 <select> + delete button — far too
      much to fit on a narrow screen without wrapping.
   3. .ctabs (the Date Range / Chart / Comparison / Events / Summary /
      Jhora report sub-tabs) had no horizontal-scroll fallback, unlike
      .step-bar which already got this treatment in mobile.css.
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ── Report sub-tabs: scroll horizontally instead of wrapping/clipping ── */
  .ctabs {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ctabs::-webkit-scrollbar { display: none; }
  .ctab { flex-shrink: 0; }

  /* ── Login card: never exceed the viewport ── */
  .login-card {
    width: 92vw;
    max-width: 400px;
    padding: 28px 22px;
  }

  /* ── Admin card: never exceed the viewport ── */
  .admin-card {
    width: 92vw;
    max-width: 700px;
  }
  .admin-body { padding: 12px 14px; }

  /* ── Admin user row: wrap onto multiple lines instead of overflowing ── */
  .user-row {
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  .user-row > div[style*="flex:1"] {
    flex-basis: 100%;
    order: -1;
  }
  .user-row select {
    font-size: 11px;
    padding: 3px 5px;
  }
}

@media (max-width: 480px) {
  .login-card { padding: 24px 16px; }
  .admin-hdr { padding: 12px 14px; }
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR HIDE/SHOW TOGGLE — iPad & Desktop (≥769px)
   Separate mechanism from the mobile drawer (.sb.open / #sb-overlay)
   which only exists below 768px and is untouched by this block.
   Requested: reclaim the ~272px filter panel width on demand to
   increase visibility on iPad and desktop. State persists via
   localStorage (see toggleDesktopSidebar() in ui-helpers.js).
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .main { position: relative; }

  .sb { transition: width .2s ease, min-width .2s ease, padding .2s ease, opacity .15s ease; }

  .sb-hide-btn {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 14px; left: 272px;
    width: 20px; height: 40px;
    background: var(--bg2); border: 1px solid var(--bdr); border-left: none;
    border-radius: 0 6px 6px 0;
    color: var(--text3); font-size: 11px; cursor: pointer;
    z-index: 250; transition: left .2s ease, color .15s, border-color .15s;
  }
  .sb-hide-btn:hover { color: var(--gold); border-color: var(--gold); }
  .sb-hide-btn .arrow { display: inline-block; transition: transform .2s ease; }

  body.sb-collapsed .sb {
    width: 0; min-width: 0; padding: 0; border-right: none;
    opacity: 0; overflow: hidden; pointer-events: none;
  }
  body.sb-collapsed .sb-hide-btn { left: 0; border-radius: 6px; border-left: 1px solid var(--bdr); }
  body.sb-collapsed .sb-hide-btn .arrow { transform: rotate(180deg); }
}
@media (max-width: 768px) {
  /* This toggle is desktop/iPad-only; mobile already has the ☰ Filters
     drawer button in the mobile-bar, so hide this one to avoid two
     competing controls on phones. */
  .sb-hide-btn { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   AI ANALYST CHAT COMPOSER — clarity + iPad/touch fix
   The .ci textarea and .sbtn send button (bottom of the AI Analyst
   tab) had no explicit contrast/sizing rules for tablets, so on iPad
   — and the 769-1024px gap that a pure "mobile vs desktop" breakpoint
   scheme misses — they could read as too faint to notice, and the
   send button fell under Apple's 44x44pt minimum touch target,
   making it easy to miss/mis-tap. Scoped to <=1366px (covers every
   iPad size, portrait and landscape, including 12.9" Pro) so ordinary
   desktop/laptop screens are untouched — same additive philosophy as
   the rest of this file.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1366px) {
  .cinw {
    background: var(--bg2);
    border-top: 1px solid var(--bdr);
    padding: 10px 12px;
    position: sticky;
    bottom: 0;
    z-index: 20;
  }
  .cirow {
    display: flex;
    align-items: flex-end;
    gap: 8px;
  }
  .ci {
    flex: 1;
    min-height: 42px;
    max-height: 140px;
    padding: 10px 12px;
    line-height: 1.4;
    border: 1.5px solid var(--bdr);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
  }
  .ci:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(184,134,11,0.15);
  }
  .sbtn {
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: none;
    background: var(--gold);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .sbtn:active { transform: scale(0.95); }
  .sbtn:disabled { opacity: .5; cursor: not-allowed; }
}

/* Touch devices specifically (iPad, tablets, phones) regardless of exact
   viewport width — a font-size under 16px makes iOS Safari auto-zoom the
   page on focus, which is what usually makes the composer feel "broken"
   on iPad even when the layout itself is fine. */
@media (hover: none) and (pointer: coarse) {
  .ci { font-size: 16px; }
  .sbtn { width: 46px; height: 46px; }
}

/* ════════════════════════════════════════════════════════════════
   PER-PLANET CONDITIONS (Planet/Multi mode, 2+ planets) — touch fix
   Same iOS-zoom-prevention pattern as the AI Analyst composer above:
   the dimension/value <select> elements inherit .sw select's 12px
   font-size, which is below the 16px iOS needs to avoid auto-zooming
   the page when the select gains focus. Scoped to touch devices only
   so desktop keeps the compact 12px sizing used everywhere else in
   the sidebar.
   ════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  .pmc-dim-wrap select,
  .pmc-val-wrap select {
    font-size: 16px;
    padding: 9px 26px 9px 8px;
  }
}

/* On very narrow phones, even the fixed-width dimension dropdown can feel
   cramped next to the planet name — let it drop to its own full-width
   line too, so nothing gets visually clipped on small screens. */
@media (max-width: 380px) {
  .pmc-top { flex-wrap: wrap; }
  .pmc-dim-wrap { flex: 0 0 100%; width: 100%; }
}