/* Image lightbox, how-it-works poster, remaining Admin sections (sub-nav/feature flags/corp wallet), and the mobile responsive overrides. MUST load last -- the final @media (max-width: 760px) block overrides selectors defined in every earlier file. */
/* ── Image lightbox (in-page enlarge, dark backdrop) ──────────────────────────── */
.img-lightbox { position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 28px;
  background: rgba(6, 8, 12, 0.9); backdrop-filter: blur(3px); }
.img-lightbox.open { display: flex; }
.img-lightbox img { max-width: min(94vw, 540px); max-height: 94vh; width: auto; height: auto;
  border: 1px solid #2a4a6a; border-radius: 12px;
  box-shadow: 0 24px 70px -22px rgba(0, 0, 0, 0.9); }
.img-lightbox-close { position: absolute; top: max(16px, env(safe-area-inset-top, 0px) + 10px); right: 22px; background: none; border: none;
  color: var(--clr-text-bright); font-size: 32px; line-height: 1; cursor: pointer; padding: 4px 10px; }
.img-lightbox-close:hover { color: #fff; }

/* ── How-it-works poster (the 5-step infographic) ─────────────────────────────── */
.hiw-poster { float: right; width: 360px; max-width: 42%; margin: 2px 0 18px 26px; }
.hiw-poster a { display: block; border: 1px solid var(--clr-border); border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 26px -14px rgba(0, 0, 0, 0.8); transition: border-color 0.15s; }
.hiw-poster a:hover { border-color: #2a4a6a; }
.hiw-poster img { display: block; width: 100%; height: auto; }
.hiw-poster figcaption { margin-top: 7px; font-size: 11px; color: var(--clr-text-dim); text-align: center; }
@media (max-width: 860px) {
  .hiw-poster { float: none; width: 100%; max-width: 340px; margin: 0 auto 18px; }
}

/* ── Admin sub-navigation (one section per page) ──────────────────────────────── */
/* Admin sidebar nav items — styled like .tab.tab-sub but managed outside switchTab. */
.admin-nav-item { background: none; border: none; color: #7c879c; cursor: pointer;
  display: flex; align-items: center; gap: 11px; padding: 7px 13px 7px 30px;
  font-size: 12.5px; font-weight: 500; text-align: left; width: 100%;
  transition: color 0.14s, background 0.14s; border-radius: 6px; }
.admin-nav-item:hover { color: var(--clr-text-bright); background: #161c2a; }
.admin-nav-item.active { color: #d2e6ff; background: #161c2a; }
body.nav-collapsed .admin-nav-item { padding-left: 0; justify-content: center; }
body.nav-collapsed .admin-nav-item .nav-lbl { display: none; }
.admin-nav-badge:not(:empty) { display: inline-block; margin-left: 4px; min-width: 15px;
  padding: 0 4px; border-radius: 8px; background: #4a3018; color: var(--clr-amber); font-size: 10px;
  font-weight: 700; text-align: center; line-height: 15px; vertical-align: middle; }

/* ── Admin: feature flags ─────────────────────────────────────────────────────── */
.admin-feature-list { display: flex; flex-direction: column; gap: 4px; }
.admin-feature-row { padding: 9px 11px; border: 1px solid #1c2030; border-radius: 7px;
  background: #11151f; }
.admin-feature-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.admin-feature-name { font-size: 13px; font-weight: 600; color: var(--clr-text-bright); flex: 1 1 120px; }
.admin-feature-desc { font-size: 11.5px; color: var(--clr-text-dim); margin-top: 6px; }
.afs-group { display: flex; gap: 2px; margin-left: auto; }
.afs-btn { background: #12151f; border: 1px solid #1e2436; color: #56607a; border-radius: 5px;
  padding: 3px 10px; font-size: 11px; font-weight: 600; cursor: pointer; letter-spacing: 0.3px; }
.afs-btn:hover { background: #181d2e; color: var(--clr-text-soft); }
.afs-active.afs-hidden  { background: #1e1520; border-color: #3a2040; color: #c060c0; }
.afs-active.afs-admin   { background: #131a2a; border-color: #2a3a5a; color: #5ab4e6; }
.afs-active.afs-testers { background: #161a14; border-color: #2a4020; color: var(--clr-amber); }
.afs-active.afs-public  { background: #111e16; border-color: #1e4030; color: var(--clr-green); }

/* ── Admin: corp wallet (donations) ───────────────────────────────────────────── */
.admin-wallet { margin-top: 4px; }
.wallet-actions { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.wallet-don-head { font-size: 12px; font-weight: 700; color: var(--clr-text-bright); margin: 16px 0 8px; }
.wallet-don-list { display: flex; flex-direction: column; gap: 4px; }
.wallet-don-row { display: grid; grid-template-columns: 140px 1fr auto; align-items: baseline;
  gap: 3px 14px; padding: 7px 11px; border: 1px solid #1c2030; border-radius: 7px;
  background: #11151f; font-size: 13px; }
.wallet-don-amt { color: var(--clr-green-alt); font-weight: 700; font-variant-numeric: tabular-nums; }
.wallet-don-who { color: #e6e9ef; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.wallet-don-date { color: var(--clr-text-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wallet-don-reason { grid-column: 2 / -1; color: #8a93ad; font-style: italic; font-size: 12px; }


/* ============================================================================
   Mobile / "Add to Home Screen" layout (phones, <=760px)
   The left sidebar becomes a fixed bottom tab bar showing only the lightweight
   pages (Dashboard, Setup Analysis, How it works, Contribute, Admin). The heavy
   planning tools (Planetary Planning, Factory Layout, Find Buildables, Refill,
   Planet DB, Characters) stay desktop-only. Selectors are paired with
   `body.nav-collapsed ...` so a desktop-collapsed state can't override them.
   ============================================================================ */
/* Mobile-only nav buttons — hidden on desktop, shown by mobile media query. */
#adminMobileTab, .settings-mobile-tab { display: none; }

@media (max-width: 760px) {
  /* Header: compact; drop the desktop hamburger + subtitle. The top padding
     respects the iOS status bar when launched from the home screen. */
  header { padding: 0 12px; padding-top: env(safe-area-inset-top); }
  .nav-toggle { display: none; }
  .header-brand { padding: 10px 0; margin-right: 0; gap: 8px; }
  .header-brand span { display: none; }
  header h1 { font-size: 16px; white-space: nowrap; }   /* keep "EVE PI" on one line */
  #reportBugBtn { display: none; }                       /* drop Report bug on phones */

  /* Single-column body; leave room for the fixed bottom bar + home indicator. */
  .app-layout { display: block; }
  main {
    max-width: 100%;
    padding: 16px 12px calc(74px + env(safe-area-inset-bottom)) 12px;
  }

  /* Sidebar -> fixed bottom tab bar */
  .sidebar,
  body.nav-collapsed .sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; flex-basis: auto; height: auto; align-self: auto;
    flex-direction: row;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)) 4px;
    background: #0d0f14; border-top: 1px solid var(--clr-border);
    box-shadow: 0 -4px 18px -10px rgba(0, 0, 0, 0.9);
    overflow: visible; z-index: 50;
  }
  .sidebar-nav { flex-direction: row; justify-content: space-around; width: 100%; gap: 0; }

  /* Hide the heavy tools + non-essential nav items and the donate box on phones.
     #adminNavGroup is a .nav-group so it's hidden here — the dedicated #adminMobileTab
     button replaces it in the bottom bar. */
  .sidebar .nav-group,
  .sidebar [data-tab="planetary"],
  .sidebar [data-tab="layout"],
  .sidebar [data-tab="planetdb"],
  .sidebar [data-tab="contribute"],
  .sidebar [data-tab="characters"],
  .sidebar-discord { display: none !important; }
  .sidebar-donate { display: none !important; }

  /* Keep the Dashboard tab on the bar even when logged out — its panel is the
     login call-to-action, so the bar stays consistent and shows an active item.
     (JS hides it via an inline style when logged out; override that on phones.) */
  .sidebar #dashboardNavTab { display: flex !important; }

  /* Bottom-bar order: Dashboard · Setup Analysis · How it works · Admin
     Characters was moved to the Settings modal (gear icon in header).
     Admin uses a dedicated mobile tab button (#adminMobileTab) instead of the
     sidebar nav-group, which would overflow the bar with its sub-items. */
  .sidebar #dashboardNavTab        { order: 0; }
  .sidebar [data-tab="analyze"]    { order: 1; }
  .sidebar [data-tab="howitworks"] { order: 2; }
  #adminMobileTab                   { display: flex; }
  .sidebar #adminMobileTab          { order: 3; }
  .sidebar #adminNavGroup          { order: 5; }

  /* Each remaining tab -> icon over a tiny label */
  .sidebar .tab,
  body.nav-collapsed .sidebar .tab {
    flex: 1 1 0; min-width: 0;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 7px 3px 5px; border-radius: 6px;
  }
  .sidebar .tab .nav-ico { display: block; flex: none; font-size: 12px; }
  .sidebar .tab .nav-lbl {
    display: block; font-size: 9.5px; letter-spacing: 0.2px; line-height: 1;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
  /* Active accent: a top bar instead of the desktop left rail. */
  .sidebar .tab.active { background: linear-gradient(180deg, rgba(74,136,204,0.18), rgba(74,136,204,0.02)); }
  .sidebar .tab.active::before,
  body.nav-collapsed .sidebar .tab.active::before {
    left: 8px; right: 8px; top: 0; bottom: auto; width: auto; height: 2px;
  }

  /* Stack the two-column page layouts. */
  .pp-layout { grid-template-columns: 1fr; gap: 14px; }
  .input-grid { grid-template-columns: 1fr; }
  .contrib { padding: 14px 14px 18px; }

  /* Stat tiles (Overview, Setup Analysis) → an even 2-up grid so a lone tile
     doesn't stretch full-width with its value stranded on the left. */
  .an-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  /* Dashboard tiles are short (runtime / value-per-day) → fit 3 per row; compact a touch so they
     don't crowd. (Analysis stats keep 2-up — those values are longer.) */
  #dashboardContent .an-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  #dashboardContent .an-stat { padding: 8px 8px; }
  #dashboardContent .an-stat-val { font-size: 17px; }
  /* At 3-up the tile is narrow; the uppercase + letter-spaced label broke each word onto its own
     line. Drop the letter-spacing, shrink a touch, and tighten lines so 2–3 words sit per line. */
  #dashboardContent .an-stat-lbl { font-size: 9.5px; letter-spacing: 0; line-height: 1.2; }
  #dashboardContent .dash-rt-sub { font-size: 9px; letter-spacing: 0; }

  /* Setup Analysis card title: let the "Plan" dropdown take its own full-width
     line instead of squishing the title onto three lines. */
  .pp-card-title { flex-wrap: wrap; }
  .pp-analyze-pick { width: 100%; margin-left: 0; }
  .pp-card-hint { flex-basis: 100%; }

  /* Setup Analysis: the rebalance "move factories" cards and the manual
     "Move a character to another account" tool aren't useful on a phone. */
  .an-suggest-move,
  .an-suggest-sep { display: none; }

  /* Reseat-candidate rows: the location (character · system P#) is flex:1 with
     ellipsis truncation, so the fixed value/tag columns squeeze it to nothing on a
     phone — the user couldn't see WHICH toon/planet to reseat. Stack so the location
     gets a full, un-truncated line. */
  .an-bd-prod { flex-wrap: wrap; }
  .an-bd-prod-loc { flex-basis: 100%; white-space: normal; overflow: visible; }
  .an-bd-prod-val, .an-bd-prod-tag { min-width: 0; text-align: left; }
  .an-pd-fix-col { flex-wrap: wrap; }
  .an-pd-fix-rec { white-space: normal; }

  /* Per-material drill-down: the 4-column grid (char/loc/P0/val, ~450px wide) overflows a phone.
     Drop the grid; make each producer a self-contained wrapping row with the character on its own
     line, then location · P0/hr · /day below. */
  .an-row-detail { display: block; }
  .an-pd-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 12px; padding: 3px 0;
    border-bottom: 1px solid #161b28; }
  .an-pd-char { flex-basis: 100%; font-weight: 600; }

  /* Fill-factories breakdown rows: single column stack — name / bar / amount. */
  .padfill-row { grid-template-columns: 1fr; }
  .padfill-bar { grid-column: 1; }
  .padfill-amt { text-align: left; font-size: 11px; white-space: normal; }

  /* Factory rows: reflow 5-column desktop grid into 2 rows on mobile.
     Row 1: name/loc (1fr) | time | haul value
     Row 2: fill bar (spans cols 1-2) | fill % */
  .dash-fac-head { display: none; }
  .dash-fac-row { grid-template-columns: 1fr auto auto; gap: 3px 8px; }
  .dash-fac-id   { grid-column: 1; grid-row: 1; }
  .dash-fac-time { grid-column: 2; grid-row: 1; }
  .dash-fac-val  { grid-column: 3; grid-row: 1; }
  .an-bar-track  { grid-column: 1 / 3; grid-row: 2; }
  .dash-fac-pct  { grid-column: 3; grid-row: 2; }

  /* Characters tab (now visible on phones): each planet row is a wide single-line flex on desktop —
     on a phone wrap it so the LOCATION sits on its own line, then "what it produces · time · pad est"
     flow below without the desktop right-push (margin-left:auto), and produce names don't break mid-word. */
  .pp-pl-row { flex-wrap: wrap; gap: 1px 8px; padding: 4px 0; border-bottom: 1px solid #161b28; align-items: baseline; }
  .pp-pl-loc { flex-basis: 100%; min-width: 0; }
  .pp-pl-extract, .pp-pl-build { white-space: nowrap; }
  .pp-pl-pad { margin-left: 0; }
  .pp-pl-cc { margin-left: 0; }

  /* Wide tabular grids (factory tables, per-material detail) scroll inside their
     card instead of forcing the whole page to scroll sideways. */
  .pp-card { overflow-x: auto; }

  /* Donate strip — a thin bar just below the header, visible on every page. */
  .mobile-donate {
    display: block;
    width: 100%; text-align: center;
    padding: 5px 12px; font-size: 11px;
    color: #7a8aaa; line-height: 1.4;
    background: #0d0f14; border-bottom: 1px solid var(--clr-border);
  }
  .mobile-donate strong { color: #ffce6b; font-weight: 600; }

  .mobile-discord {
    display: block;
    width: 100%; text-align: center;
    padding: 5px 12px; font-size: 11px;
    color: #7289da; line-height: 1.4;
    background: #0d0f14; border-bottom: 1px solid var(--clr-border);
    text-decoration: none;
  }
  .mobile-discord:hover { color: #99aae8; }

  /* Pull-to-refresh indicator (rescan on pull-down from the top) */
  #ptr-indicator {
    position: fixed; top: calc(-46px); left: 0; right: 0; height: 46px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 12px; letter-spacing: 0.3px; color: #8fb4d6;
    background: #0d0f14; border-bottom: 1px solid var(--clr-border);
    z-index: 60; pointer-events: none;
  }

  /* Bigger tap targets for modal close buttons on phones */
  .pp-modal-close { padding: 8px 12px; font-size: 18px; }

  /* Settings modal: switch to full-screen stacked layout on phones. */
  .settings-modal-box {
    width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0;
    /* Safe-area: status bar at top, home indicator at bottom */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .settings-modal-hdr { padding: 12px 16px 10px; }
  .settings-modal-layout { flex-direction: column; }
  .settings-modal-nav {
    width: 100%; flex-direction: row; gap: 6px; padding: 6px 12px;
    border-right: none; border-bottom: 1px solid var(--clr-border);
    overflow-x: auto; overflow-y: hidden; flex-shrink: 0; -webkit-overflow-scrolling: touch;
  }
  .settings-nav-item { flex: 0 0 auto; width: auto; padding: 7px 14px; font-size: 12px; }
  .settings-nav-ico { display: none; }
  .settings-modal-content { padding: 14px 16px; }

  /* Admin mobile sub-page navigation */
  .admin-mobile-page-nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--clr-border);
    flex-shrink: 0;
  }
  .admin-mobile-page-btn {
    flex: 0 0 auto;
    padding: 6px 13px;
    border-radius: 6px;
    border: 1px solid var(--clr-border);
    background: #161b28;
    color: #7a8aaa;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
  }
  .admin-mobile-page-btn.active {
    background: #1e2a3e;
    border-color: #2a4060;
    color: #7abfe8;
  }
}