/* ==========================================================================
   App shell
   Figma source: Tax / Settings (3462:21729), 1440 frame.
   White page, sidebar left, 800px content column, utility icons in the
   top-right (logout) and bottom-right (help) corners.
   PROVISIONAL: Figma places the content column at x=399 on a 1440 frame;
   exact gutter logic isn't defined, so the column flexes between sidebar
   and right edge with a 32px gutter. Confirm with backend shell.
   ========================================================================== */

.app {
  display: flex;
  min-height: 100vh;
  background: var(--color-surface); /* screens are white; the pink lives in the sidebar */
  /* Reserve space for the FIXED sidebar (collapsed footprint = 16 pad + 68 col). */
  padding-left: 84px;
}

.app__main {
  flex: 1;
  min-width: 0;
  max-width: 800px;
  margin-inline: auto;
  padding: 0 var(--space-4) 64px;
}

.app__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8); /* Figma content stack gap */
}

/* Corner utility icon buttons (logout top-right, help bottom-right) */
/* [data-tip] in tooltip.css sets position: relative and loads later, so the corners were
   scrolling off with the page once they got tooltips (Peter, 3 Sep: "going bananas"). */
.app__corner, .app__corner[data-tip] {
  position: fixed;
  right: 32px;
  /* ABOVE THE STICKY HEADER (Peter, 30 Jul: "the background of the top nav is
     cropping out the logout"). The header is z-index 20 with a solid white
     background and its right edge lands mid-icon, so it was painting over the
     left of the logout. Still below any drawer or modal. */
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 12px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

/* one size for both icons (the logout img carries an inline 19px; the ? is a 20px svg) */
.app__corner > svg,
.app__corner > img {
  width: 20px !important;
  height: 20px !important;
}

.app__corner--top { top: 26px; }   /* level with the Bullet logo in the sidebar */
/* "Press again to log out" (13 Aug 2026) — the corner arrow arms before it
   acts; the label sits under the icon where nothing else lives. */
.app__corner--top.is-armed { color: var(--color-danger); }
.app__corner-arm {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  white-space: nowrap;
  font-size: 12px;
  color: var(--color-danger);
  font-weight: var(--weight-medium);
}
.app__corner--bottom { bottom: 26px; } /* level with the Settings cog in the sidebar */

/* provisional */
.app__corner:hover {
  background: var(--color-bg-subtle);
}

/* Drawer-companion main column.
   Left-align beside the sidebar (override the base margin-inline:auto) so the
   spare width falls next to the drawer, not as a dead gap beside the sticky
   sidebar — that void is what ghosts a "second sidebar" in Chrome at wide widths. */
.app__main--with-drawer {
  margin-left: 0;
  margin-right: 440px;
}

/* Right-docked overlay drawer opens → the centred body glides LEFT to make room, back RIGHT on
   close (ui.js toggles .app.drawer-open from the drawers' open state). Pages whose main already
   reserves drawer space (--with-drawer) opt out. GLOBAL (Peter, 1 Jul 2026). */
.app__main:not(.app__main--with-drawer) { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.app.drawer-open { overflow-x: clip; }
/* distance is capped by the room on the left — ui.js writes --drawer-glide
   (Peter, 25 Aug: a flat 210px buried the page under the sidebar on a narrow window) */
.app.drawer-open .app__main:not(.app__main--with-drawer) { transform: translateX(calc(var(--drawer-glide, 210px) * -1)); }
@media (max-width: 900px) { .app.drawer-open .app__main:not(.app__main--with-drawer) { transform: none; } }
@media (prefers-reduced-motion: reduce) { .app__main { transition: none; } }

/* --- Mobile (the design is a "large mobile app" — Peter, 11 Jun 2026) --- */
@media (max-width: 900px) {
  .app { flex-wrap: wrap; }
  .app__main--with-drawer { margin-right: 0; }
  /* main + submenu take the full row below the sidebar so wide content
     (tables, grids, drawers) isn't squeezed into a sliver and overflowing */
  .app__main { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  .submenu { flex: 1 1 100%; max-width: 100%; border-right: none; }
}

@media (max-width: 768px) {
  .app { padding-left: 76px; } /* sidebar footprint shrinks (8px pad + 68 col) */
  .app__main { padding: 0 var(--space-3) 96px; }
  .app__corner { right: var(--space-3); width: 40px; height: 40px; padding: 8px; }
  .app__corner--top { top: var(--space-3); }
  .app__corner--bottom { bottom: var(--space-3); }
}

/* Phone: the sidebar drops to a fixed bottom tab bar, so content takes the full
   width — the app-like shell (ref: bullet-live TabNavigator). See sidebar.css. */
@media (max-width: 640px) {
  .app { flex-wrap: nowrap; padding-left: 0; } /* sidebar is a fixed bottom bar now */
  .app__main { flex: 1 1 100%; max-width: 100%; padding: 0 var(--space-3) calc(76px + env(safe-area-inset-bottom, 0px)); }
  .app__main--with-drawer { margin-right: 0; }
  .app__corner--bottom { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } /* sit above the tab bar */
}

/* ==========================================================================
   TWO-PANE PAGES: THE RIGHT PANEL IS ANCHORED RIGHT (GLOBAL, Peter 28 Jul)
   Every .pt-stage page — invoice / deposit / credit-note / VAT return /
   payroll return / payslip / employee — puts the record on the left and its
   tasks panel on the right. The detail pages centred the whole two-pane group,
   so on a wide window the panel drifted inwards and left a band of dead space
   against the right edge, as if the page had come loose.

   The panel now sits on the right edge and the body centres in the room that
   is left. One rule, here, rather than nine copies in nine screens: the child
   selectors outrank the pages' own `.app__main { margin-inline: 0 }`, so this
   holds without editing each of them — and it covers the next such page too.
   Below 901px the stage stacks into one column and none of this applies.
   ========================================================================== */
/* The stage itself. This used to be an inline style attribute on five screens, which no
   stylesheet could override — so the create flows never stacked on a phone: the editor panel
   took the width and the document beside it squeezed to 24px (Peter, 28 Jul). :not([hidden])
   because payroll's stage starts hidden and display would otherwise un-hide it. */
.app > .pt-stage:not([hidden]) { display: flex; flex: 1 1 auto; min-width: 0; }

@media (min-width: 901px) {
  .app > .pt-stage { justify-content: flex-start; }
  .app > .pt-stage > .app__main { margin-inline: auto; }
}

/* Phone: one column, each pane full width — the same stacking the detail pages already did
   for themselves, now true of every two-pane page. */
@media (max-width: 900px) {
  .app > .pt-stage { flex-direction: column; justify-content: flex-start; }
  .app > .pt-stage > .app__main,
  .app > .pt-stage > .create-section,
  .app > .pt-stage > .inv-tasks { flex: none; width: 100%; max-width: 100%; }
}

/* THE ASK BAR'S SEAT IS RESERVED (Peter, 8 Sep: "the ask box seems to jump all over the place").
   ask-anywhere.js injects the bar after the page paints, so every page used to land, then drop
   76px when the bar arrived. This holds the seat until it lands. Not on Home (the bar lives in
   the yellow box), not on the Personal shell, the checklist or the Ask screen (no bar there).
   SHARED FILE, master chat edit. */
.app:not(.app--wide) > .app__main:not(:has(> .ask-dock))::before { content: ''; display: block; box-sizing: border-box; height: 52px; margin: 18px 0 6px; background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); }   /* the seat DRAWS the pill (8 Sep): the first frame already shows the bar's shape, so the real bar lands without a pop */
/* PHONES (Peter, 8 Sep: "the hop from Home to Invoice is disjointed"): the bar was drawn UNDER the fixed logout +
   profile chip in the top-right corner. It sits below that row now; the seat matches. */
@media (max-width: 640px) {
  .app:not(.app--wide) > .app__main:not(:has(> .ask-dock))::before { margin: 58px 0 4px; }
  .app:not(.app--wide) > .app__main > .ask-dock { margin-top: 48px; }
}
body[data-personal-nav] .app__main::before, body.ask-page .app__main::before { content: none; }
.app__main:has(#ask-input)::before { content: none; }   /* a page with the INLINE ask box (Home, a project, Proposals) has no top bar, so no seat (10 Sep: a ghost pill sat over the Proposals title) */

/* the arrival frame for the wide->narrow engine in ui.js (Peter, 8 Sep): a wide page flagged on the way
   in paints at the narrow width, then blooms; the settle bump is the project page's own */
html.bullet-arrive .app__main { max-width: 800px !important; }
/* leaving a wide page for a narrow one: the project page's inv-stage-out, made global (Peter, 8 Sep) */
@keyframes bulletStageOut { from { transform: translateX(0); opacity: 1; } 70% { opacity: 1; } to { transform: translateX(90px); opacity: 0; } }
@keyframes bulletSettle { 0% { transform: scaleX(1); } 45% { transform: scaleX(1.006); } 100% { transform: scaleX(1); } }