/* mobile.css — PHASE-155. Imported LAST in index.html so it overrides earlier sheets.
   Makes the admin console and the landing / project-select usable on a phone. Desktop is
   byte-identical: every rule below lives inside a max-width media query, and the hamburger is
   display:none until <=640px. The coding workspace (.page-coding) and marketing pages are out
   of scope and untouched (their existing 960px sidebar-hide behaviour stays). */

/* Horizontal-scroll box for wide `.table`s (wrapTables() in lib/dom.js). Present at every
   width but only actually scrolls when the table is wider than its container, so desktop is
   unaffected. The page body must never scroll sideways — only the table does. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Hamburger: hidden on desktop; the media query below reveals it on phones. */
.topbar-burger {
  display: none;
}

/* Mobile "New project" FAB (PHASE-156): hidden on desktop; the media query reveals it. */
.fab-new-project {
  display: none;
}

/* ============================ Phone tier (<=640px) ============================ */
@media (max-width: 640px) {
  /* ---- Topbar -> hamburger --------------------------------------------------- */
  .topbar {
    position: relative;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }
  .topbar-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  .topbar-burger:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  /* The right-side control cluster becomes a full-width dropdown, hidden until
     the header carries .topbar-open (set by the burger). */
  .topbar-right {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    z-index: 6;
  }
  .topbar.topbar-open .topbar-right {
    display: flex;
  }

  /* Full-width, comfortably-tappable menu items. */
  .topbar-right .btn,
  .topbar-right > a {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }
  .topbar-right .theme-toggle {
    min-height: 44px;
  }
  .topbar-right .help-menu {
    width: 100%;
  }
  .topbar-right .help-menu > .btn {
    width: 100%;
  }
  /* The help dropdown flows inline inside the mobile menu instead of floating. */
  .topbar-right .help-menu-list {
    position: static;
    width: 100%;
    box-shadow: none;
  }
  /* "Signed in as {name}" is redundant on a phone — the Account button IDs the user. */
  .topbar-right .topbar-user {
    display: none;
  }

  /* ---- Content padding ------------------------------------------------------- */
  .main-content {
    padding: var(--space-4) var(--space-4);
    max-width: 100%;
  }
  .page-auth {
    padding: var(--space-5) var(--space-3);
  }
  .auth-card {
    padding: var(--space-5);
  }

  /* ---- Grids -> single column ------------------------------------------------ */
  .projects-grid {
    grid-template-columns: 1fr;
  }
  /* Any fixed / multi-column grid inside an admin or landing page collapses to one
     column on a phone. Scoped to .main-content so the coding three-pane
     (.page-coding, a different wrapper) is never touched. !important because these
     grids are set via an inline style attribute on the page element. */
  .main-content [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Toolbars and filter rows wrap instead of overflowing. */
  .projects-toolbar,
  .toolbar,
  .filters,
  .filter-row {
    flex-wrap: wrap;
  }

  /* ---- Constrain the content chain to the viewport ----------------------------
     The load-bearing fix. `.main-content` on admin pages is `display:flex;
     flex-direction:column`, and a flex item's default `min-width:auto` refuses to shrink
     below its content's min-content width — so a wide data table's .table-scroll box
     inflated the whole column to ~650px (measured), and everything inside (heading,
     description, form, and the .table-scroll itself) laid out at 650 and got clipped
     instead of fitting. Setting `min-width:0` down the chain lets those flex/grid items
     shrink to the viewport, which lets .table-scroll (overflow-x:auto) finally scroll the
     wide table inside its own box while the page stays 375px wide. */
  html,
  body,
  #app,
  .page-app {
    max-width: 100vw;
  }
  .main-content {
    max-width: 100%;
    min-width: 0;
  }
  .main-content *,
  .table-scroll {
    min-width: 0;
  }
  /* But the wide data table itself keeps its natural (max-content) width so it SCROLLS
     inside the now-narrow .table-scroll box rather than squishing its columns to fit. */
  .table-scroll > table {
    width: max-content;
    max-width: none;
    min-width: 0;
  }

  /* ---- Hard "the page never scrolls sideways" guarantee ------------------------
     `overflow-x: clip` (not hidden) prevents horizontal page scroll WITHOUT creating a
     scroll container — so it does not force overflow-y and does not break the sticky
     topbar or the absolute burger dropdown (both overflow vertically). Belt-and-suspenders
     on top of the min-width:0 fix above. */
  body,
  .page-app {
    overflow-x: clip;
  }

  /* Breadcrumb trail is redundant on a phone (every page has an <h1>) and is the main
     thing that overflowed the header. Keep the brand + env pill + org name; drop the
     "/ Admin / Users" trail. */
  .topbar-left > span.muted,
  .topbar-left > a:not(.brand),
  .topbar-left > span[aria-current="page"] {
    display: none;
  }
  .topbar-left {
    min-width: 0;
  }

  /* Form controls never exceed their container (a fixed-width input is the other thing
     that forced admin pages wider than the viewport; capping it lets the flex/grid form
     rows wrap or stack cleanly). */
  .main-content input:not([type="checkbox"]):not([type="radio"]),
  .main-content select,
  .main-content textarea {
    max-width: 100%;
  }

  /* Cards stay within the viewport. Tables deliberately keep their natural width and
     scroll inside their .table-scroll box (wrapTables wraps every <table>) — capping the
     table itself would squish the columns instead of scrolling. */
  .main-content .card {
    max-width: 100%;
  }

  /* ---- Mobile "New project" FAB (PHASE-156) ---------------------------------- */
  /* The header "New project" button is redundant on a phone — the FAB is the create
     affordance there. Facilitator console + Import project stay in the (stacked) header. */
  .new-project-header {
    display: none;
  }
  .fab-new-project {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    /* Cleared from the Phase-107 Report widget (a pill at right:16px; bottom:16px) by
       POSITION — 76px up leaves a ~24px gap, so the two never overlap. z-index sits BELOW
       the modal backdrop (40) so the create-project modal the FAB opens covers it, instead
       of a bright accent circle floating over the dark overlay; still above page content. */
    right: 16px;
    bottom: 76px;
    z-index: 30;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: 30px;
    line-height: 1;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease;
  }
  .fab-new-project:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
  }
  .fab-new-project:focus-visible {
    outline: 2px solid var(--color-text-inverse);
    outline-offset: 2px;
  }

  /* ---- Modals fit the phone -------------------------------------------------- */
  .modal-backdrop {
    padding: var(--space-3);
  }
  .modal {
    padding: var(--space-5);
    max-width: 100%;
  }
  /* Modals render into .modal-backdrop (fixed, appended to <body>), not into
     .main-content, so the landing-page grid rule above doesn't reach them. Collapse
     any inline multi-column grid inside a modal to one column on a phone. */
  .modal [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}