/* ════════════════════════════════════════════════════════════════════════════
 * Urban Makers — shared chrome for the white-app-bar pages (wiki, crm, dashboard).
 * Defined ONCE here so the app bar's responsive behaviour can't drift page to
 * page (the recurring source of mobile breakage). Link this BEFORE each page's
 * own <style> so a page can still override a specific rule if it needs to.
 * Note: the dark-bar pages (projects, quote builder) have a different app-bar
 * design and intentionally do NOT use this file.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Single-row bar at every width: it never wraps. When the buttons don't fit
   (narrow phones, mid widths) the bar scrolls horizontally instead of stacking
   into 2-3 rows — so it stays ~52px tall. The scrollbar is visually hidden. */
.app-bar{display:flex;align-items:center;gap:14px;background:#fff;border-bottom:1px solid var(--um-line);padding:10px 22px;position:sticky;top:0;z-index:30;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
.app-bar::-webkit-scrollbar{display:none}
/* Keep every item at its natural size so the row scrolls rather than squashing. */
.app-bar>*{flex-shrink:0}
.app-bar-logo{display:flex;align-items:center;gap:7px;font-weight:800;letter-spacing:.5px;font-size:13px}
/* The wordmark doubles as the way home (chrome.js). It must stay visually
   identical to the plain-text version — no underline, no link colour — so the
   only tell is the pointer and a slight lift on hover. */
a.app-bar-home{text-decoration:none;color:inherit;cursor:pointer}
a.app-bar-home:hover{opacity:.72}
a.app-bar-home:focus-visible{outline:2px solid var(--um-ink);outline-offset:3px;border-radius:3px}
.app-bar-spacer{flex:1 1 0;min-width:0}
.app-bar-user{font-size:12.5px;color:var(--ink-soft)}
.app-bar-btn{font-size:12.5px;padding:7px 13px;border:1px solid var(--um-line);border-radius:7px;background:#fff;color:var(--um-ink);cursor:pointer;white-space:nowrap}
.app-bar-btn:hover{background:var(--um-paper)}
.back-link{font-size:12.5px;color:var(--ink-soft);text-decoration:none;white-space:nowrap}
.back-link:hover{color:var(--um-ink)}

/* ── Responsive nav collapse (chrome.js) ──────────────────────────────────────
   When the bar can't fit its links, chrome.js moves them into the .app-bar-menu
   dropdown and adds .nav-collapsed, which reveals the hamburger. No more items
   scrolling off behind a hidden scrollbar. */
.app-bar-more{display:none;font-size:16px;line-height:1;padding:6px 11px;border:1px solid var(--um-line);border-radius:7px;background:#fff;color:var(--um-ink);cursor:pointer}
.app-bar-more:hover{background:var(--um-paper)}
/* ☰ shows when the bar overflowed, and also whenever a page pinned config
   actions to it with data-chrome-slot="menu" (then it's the ONLY overflow). */
.app-bar.nav-collapsed .app-bar-more,
.app-bar.has-menu-items .app-bar-more{display:inline-flex;align-items:center;justify-content:center}
.app-bar-menu{position:fixed;display:none;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--um-line);border-radius:11px;box-shadow:0 14px 40px rgba(0,0,0,.18);padding:7px;z-index:60;min-width:196px;max-width:min(280px,calc(100vw - 16px));max-height:calc(100vh - 64px);overflow-y:auto}
.app-bar-menu.open{display:flex}
/* Items look like a vertical list once inside the dropdown. */
.app-bar-menu .app-bar-btn,.app-bar-menu .back-link{width:100%;text-align:left;border:none;background:none;border-radius:8px;padding:10px 12px;font-size:13.5px;display:flex;align-items:center}
.app-bar-menu .app-bar-btn:hover,.app-bar-menu .back-link:hover{background:var(--um-paper-mid)}
.app-bar-menu .back-link{color:var(--um-ink)}
.app-bar-menu .app-bar-user{display:block;padding:7px 12px 4px;font-size:12px;color:var(--ink-soft);border-top:1px solid var(--um-line);margin-top:3px}

/* ── data-chrome-menu="all" (the quote builder) ───────────────────────────────
   With EVERY action pinned to the dropdown, controls land here that were only
   ever styled as bar chrome: the primary Save button, the status <select>, the
   live catalogue readout. They become full-width rows like everything else, so
   the menu reads as one list rather than a bar folded sideways. Only their layout
   is said here: the Save button's look is .save-btn's and the select's is the
   field spec, both in shared-ui.css. */
.app-bar-menu .save-btn,.app-bar-menu .status-select{width:100%;box-sizing:border-box;text-align:left;margin:0}
.app-bar-menu .save-btn{display:flex;align-items:center;justify-content:flex-start}
/* The live save/load readout. Inside the ☰ it is a row in a list, and it both
   appears/disappears (idle clears it 3.5s after every save) and changes message
   length. Either one re-flows the rows underneath it while the menu is open and
   the pointer is already travelling — that is the misclick. So: it always
   occupies its row, and the row is always the same height. */
.app-bar-menu .catalogue-status{display:flex;align-items:center;gap:7px;padding:8px 12px;font-size:12px;color:var(--ink-soft);
  min-height:33px;box-sizing:border-box;position:relative}
.app-bar-menu .catalogue-status.status-idle{display:flex;visibility:hidden}
/* Taken out of flow on purpose. The menu sizes itself to its widest row, so an
   in-flow "Loading price list (Supabase)…" made it 280px and "Saved ✓" snapped
   it back to 196 — the whole menu changing width under the pointer. Absolutely
   positioned, the message contributes nothing to that measurement and simply
   truncates inside whatever width the real actions ask for. */
.app-bar-menu .catalogue-status #status-text{position:absolute;left:26px;right:12px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-bar-menu .catalogue-status .status-dot{flex:0 0 auto}
/* Where the page's own intent changes: actions above, config/admin below. */
.app-bar-menu .menu-sep{border-top:1px solid var(--um-line);margin-top:4px;padding-top:11px}
/* A menu-only bar has nothing to overflow, so the ☰ is its whole right side —
   give it a little breathing room from the title. */
.app-bar-menu-only .app-bar-more{margin-left:4px}

/* The responsive rule that kept getting forgotten — now applies to every page
   that links this file. On phones: tighten the bar and drop the long email. */
@media(max-width:600px){
  .app-bar{padding:10px 12px;gap:8px}
  .app-bar-user{display:none}
}

/* iOS Safari auto-zooms (and never zooms back) when a focused form field has a
   font-size below 16px — the "I keep having to pinch to zoom out" bug. The 16px
   phone field (and its touch height) is the field spec's, in shared-ui.css
   (DESIGN-GUIDE §3.2); a second copy here was a page restyling the control. */
html{-webkit-text-size-adjust:100%}


/* ── Shared modal shell ───────────────────────────────────────────────────────
   The quote builder's item-finder shell, promoted here so any page can use the
   same centred, full-height picker. index.html keeps its own identical copy
   inline (it loads after this file, so the builder is byte-for-byte unchanged).

   Deliberately a normal-layer overlay rather than <dialog showModal()>: a modal
   dialog renders in the browser's TOP LAYER, which sits above every z-index on
   the page — so ui-kit's dropdown menu (a body child) can never paint over it.
   A plain z-indexed backdrop lets the dropdown stack correctly. It also can't
   be knocked off-centre by a page's `*{margin:0}` reset, which cancels the UA
   stylesheet's `margin:auto` on <dialog>. */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:flex-start;
  justify-content:center;padding-top:32px;z-index:200}
.modal{background:var(--um-paper);border-radius:10px;border:1px solid var(--um-line);width:540px;max-height:500px;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.12)}
/* Picking from a long list is a browsing task, not a dialog: give it the screen. */
.modal.modal-tall{width:clamp(320px, max(50vw, 1100px), 92vw);height:calc(100dvh - 64px);max-height:calc(100dvh - 64px)}
.modal-header{padding:11px 14px;border-bottom:1px solid var(--um-line);display:flex;align-items:center;gap:8px}
.modal-header h3{flex:1;font-size:14px;font-weight:500}
.modal-search{padding:8px 12px;border-bottom:1px solid var(--um-line);display:flex;gap:7px;align-items:center}
.modal-search input{flex:1}   /* the box is the field spec (shared-ui.css, DESIGN-GUIDE §3.2) */
.modal-list{overflow-y:auto;flex:1;padding:7px;overscroll-behavior:contain}
.modal-footer{padding:9px 14px;border-top:1px solid var(--um-line);display:flex;align-items:center;
  justify-content:space-between;gap:10px}
/* While a modal is up the page must not take the scroll. Without this, a
   phone's scroll gesture leaks to the body the moment the modal's inner
   scroller hits an end — "sometimes it scrolls the window" — and the footer
   buttons walk away from the thumb. :has() keeps it markup-driven: every
   page that opens a .modal-backdrop gets the lock without wiring any JS. */
body:has(.modal-backdrop){overflow:hidden}
@media(max-width:640px){
  /* Phone: a modal IS the screen. Header and footer are pinned by the flex
     column; only the middle (.modal-list / the page's own body div) scrolls.
     Desktop keeps the floating pop-up. */
  .modal-backdrop{padding-top:0;align-items:stretch}
  .modal{width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:none}
  .modal.modal-tall{width:100%;height:100dvh;max-height:100dvh}
}

/* ── Print: the app chrome is never part of a document ────────────────────────
   The bar, its hamburger and its dropdown are navigation. They belong on
   screen and nowhere else — printing a PDF with a nav bar across the top was
   just a rule nobody had written yet. Lives here, not per-page, because it is
   true of every page that loads this file. */
@media print{
  .app-bar,.app-bar-menu,.app-bar-more,#um-auth,.uik-dd-menu,.uik-toast,.noprint{display:none!important}
  body{background:#fff}
  /* Table rows shouldn't be cut in half, and a table running over a page
     boundary should reprint its headings. */
  thead{display:table-header-group}
  tr,.card,.panel{break-inside:avoid}
}