/* Shared mobile layer for the admin portal.
 *
 * Most admin pages carry their own inline <style> block and load no shared
 * stylesheet (confirmed: only admin.html and admin-activity.html link
 * admin.css), so before this there was no single place to make the portal
 * usable on a phone - and almost none of the pages defined a single @media
 * rule. Data tables in particular had no scroll container, so on a phone they
 * forced the whole page to scroll sideways.
 *
 * Loaded LAST on each page so it wins over inline styles without needing
 * !important everywhere. Everything here lives inside a max-width media
 * query: desktop rendering is untouched.
 *
 * Deliberately excluded: anything inside .invoice / .preview-scale. Those
 * reproduce a real A4 document and must keep their fixed pixel width at every
 * viewport - letting them reflow is what garbled the in-chat preview before,
 * and the PDF path depends on that fixed geometry.
 */

@media (max-width: 820px) {

  /* Nothing should force the page itself to scroll sideways.
   *
   * `overflow-x: hidden` would do it, but it makes the element a scroll
   * container, which silently breaks `position: sticky` on every descendant -
   * and the admin topbar, sidebar and table headers are all sticky. `clip`
   * cuts the overflow without creating that container, so sticky survives.
   * The hidden fallback is kept first for browsers without `clip` support;
   * those get working overflow control and lose sticky, which is the right
   * way round. */
  html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }

  .wrap, .dash, .container, main, .page { padding-left: 12px !important; padding-right: 12px !important; }

  /* Multi-column layouts collapse to a single column. Scoped to the known
     layout classes rather than every [class*=grid] so a page's own bespoke
     grid isn't flattened unexpectedly. */
  .dash, .cards, .grid-2, .grid-3, .grid3, .grid4, .two-col, .stats, .form-grid, .kanban {
    grid-template-columns: 1fr !important;
  }

  /* Data tables scroll inside their own box instead of widening the page.
   *
   * Only tables that DON'T already have a scrolling wrapper get display:block.
   * admin.css's `.table` wrapper already scrolls, and forcing display:block on
   * a table inside it is both redundant and harmful - it drops the table
   * layout algorithm (so thead/tbody columns can stop lining up) and kills
   * `position: sticky` on the header row.
   *
   * .items-table is excluded too: invoice-sheet.css already stacks it into
   * labelled rows on mobile, which reads better than sideways scrolling. */
  .table, .table-wrap, .tablebox { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  :not(.table):not(.table-wrap):not(.tablebox) > table:not(.items-table) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Toolbars/headers wrap instead of overflowing. */
  .appbar, .topbar, .toolbar, .table-tools, .row-actions, .actions, .btnbar, .filters {
    flex-wrap: wrap !important;
    gap: 8px;
  }

  /* Controls stay inside the viewport and stay tappable (>=16px font stops
     iOS Safari zooming the page in on focus). */
  input, select, textarea, button { max-width: 100%; box-sizing: border-box; }
  input, select, textarea { font-size: 16px; }
  button, .btn, .save-btn, .secondary-btn, .add-btn { min-height: 40px; }

  /* Long unbroken strings (GSTINs, document numbers, URLs) shouldn't widen
     the layout. */
  td, th, .card, .msg { overflow-wrap: anywhere; }

  img, canvas, svg, iframe { max-width: 100%; height: auto; }

  /* Modals/dialogs: full-width with breathing room rather than a fixed width
     wider than the screen. */
  .modal, .dialog, .sheet, .popup { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }

  /* The real-document previews keep their exact geometry - see header note.
     They get a horizontal scrollbar instead of being reflowed. */
  .invoice, .preview-scale { transform-origin: top left; }
  .canvas-body, .preview-host, .doc-preview { overflow: auto; -webkit-overflow-scrolling: touch; }
}

/* document-chat.html specifically: body is height:100vh/overflow:hidden with a
 * fixed 250px sidebar and a side-by-side document canvas. On a phone that
 * leaves roughly half the width for the conversation itself, so the sidebar
 * becomes a slide-over and the canvas takes the full screen. */
@media (max-width: 820px) {
  .chat-shell { flex-direction: column; }

  .sidebar {
    position: fixed; z-index: 40; top: 0; bottom: 0; left: 0;
    width: 82vw; max-width: 300px;
    transform: translateX(-100%);
    transition: transform .22s ease;
    background: var(--panel);
    box-shadow: 0 0 40px rgba(15, 23, 42, .28);
  }
  .sidebar.open { transform: translateX(0); }

  /* Dimmed backdrop while the slide-over is showing. */
  .sidebar-backdrop {
    position: fixed; inset: 0; z-index: 39;
    background: rgba(15, 23, 42, .45);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  .sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

  #sidebarToggle { display: inline-flex !important; }

  /* The generated document takes the whole screen rather than a slice of it -
     but ONLY once there is a document in it.
     This rule used to apply to .canvas-panel unconditionally, and the panel
     spends most of its life CLOSED: the page keeps it at width:0 until a
     document is generated. Pinned to inset:0 and 100vw regardless, the empty
     panel became a full-screen white sheet reading "Generated documents will
     open here." on top of the conversation - the whole chat, its messages and
     its input box were underneath it and unreachable on every phone. */
  .canvas-panel:not(.open) { display: none !important; }

  .canvas.open, .canvas-panel.open {
    position: fixed !important; inset: 0 !important;
    width: 100vw !important; max-width: 100vw !important;
    z-index: 45;
  }

  /* One row, not two. The shared mobile rule wraps the appbar, which is right
     for pages whose bar carries a search field - but flexbox wraps BEFORE it
     shrinks, so here the title kept its full width and pushed the overflow
     menu onto a second row (105px of chrome). This bar has no field in it, so
     nowrap is safe: the title ellipsises and everything fits on one line. */
  header.appbar { flex-wrap: nowrap !important; padding: 10px 12px; }
  header.appbar .brand { flex: 1 1 auto; min-width: 0; }
  header.appbar h1 { font-size: 14px; }
  header.appbar .brand-badge, header.appbar .brand-badge img { width: 34px; height: 34px; }
  /* Secondary chrome that costs more width than it earns on a phone. */
  #testConnBtn, #testConnResult, #savingsBadge { display: none !important; }

  /* The connection badge stays - on THIS page it is the difference between
     "the assistant will answer" and "the laptop is unreachable" - but its
     label costs 100px of a 390px bar, which was enough to push the whole
     appbar onto a second row. The coloured dot carries the same state, and
     the full wording is still in the element's title attribute. */
  #connBadge #connLabel { display: none; }
  #connBadge { padding: 6px; gap: 0; }
}

@media (max-width: 520px) {
  .wrap, .dash, .container, main, .page { padding-left: 10px !important; padding-right: 10px !important; }
  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.15rem; }
  .card { padding: 14px !important; }
  /* Full-width buttons read as deliberate on a narrow screen, and are a much
     larger tap target than a row of shrunken inline ones. */
  .row-actions > button, .actions > button { flex: 1 1 auto; }
}