/* styles/layout.css */

/* Apply the global UI scale. zoom is well-supported in Chromium,
   Safari, and modern Firefox; it scales every dimension, font,
   border-radius, and box-shadow in lockstep, so the design system
   stays in proportion. Browser zoom still composes on top of this
   (e.g. 1.25 × 110% browser = 1.375 effective).
   Mock reference: Backup/V4/card-vault-mock.html lines 162–169. */
body {
  zoom: var(--ui-scale);
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  width: 100%;
  max-width: 100vw;
  /* `minmax(0, 1fr)` on the main row is critical — without the explicit
     0 minimum, CSS Grid's default `minmax(auto, 1fr)` lets the row grow
     to fit content. Tall main content (e.g. inventory grids) would push
     the row past the viewport, the body itself would start scrolling,
     and the sidebar would scroll out of view with it. The 0 minimum
     locks the row to available space and lets .main's overflow-y: auto
     do the actual scrolling internally. */
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  /* `height` (not `min-height`) so the shell is locked at exactly one
     viewport tall. With min-height, content overflow grew the shell past
     the viewport and the page itself scrolled, dragging the sidebar with
     it. Divide by --ui-scale so the zoomed render fills exactly one
     viewport rather than overflowing by the scale factor.
     Mock reference: lines 227–230. */
  height: calc(100vh / var(--ui-scale));
}

.sidebar {
  grid-area: sidebar;
  background: var(--bg);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  /* Same trick as .app-shell — sidebar's logical height shrinks so
     its zoomed render is exactly one viewport tall. Without this the
     sidebar overflows by (--ui-scale - 1) × 100vh.
     Mock reference: lines 242–246. */
  height: calc(100vh / var(--ui-scale));
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 4px;
  overflow: hidden;
}
/* Brand stays top, footer stays bottom; only the nav middle scrolls. */
.sidebar > nav {
  overflow-y: auto;
  min-height: 0;
}

/* Topbar — grid layout per V4 mock lines 426-438. Three tracks:
   breadcrumb (left) · search (center, flex) · actions (right). */
.topbar {
  grid-area: topbar;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 10;
  min-width: 0;
}
@media (max-width: 700px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding: 0 10px;
  }
  .topbar .breadcrumb { display: none; }
  .topbar .search {
    max-width: none;
    min-width: 0;
    margin: 0;
    padding-inline: 10px;
  }
  .topbar .search .kbd {
    display: none;
  }
  .topbar .search input {
    min-width: 0;
  }
  .topbar .icon-btn {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }
  .topbar .topbar-action-secondary {
    display: none;
  }
  .topbar .topbar-action-catalog {
    display: flex;
  }
}

.main {
  grid-area: main;
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  min-width: 0;
  max-width: 100vw;
}

/* When the support banner is visible, push .main content below the
   fixed-position banner so the first row isn't occluded. The banner
   sits at top: var(--topbar-height) and is ~40px tall (8px padding
   + ~24px line-height + 8px padding). */
.app-shell[data-banner="visible"] .main {
  padding-top: calc(24px + 40px);
}

/* Support-mode banner.
   Per shell.js renderShell, this is appended as a sibling of .app-shell
   (NOT inside .main). Since .main owns the scroll and the page itself
   doesn't scroll, position: sticky has no scroll context to pin against
   — so we use position: fixed and anchor below the topbar across the
   full viewport. z-index stays below .topbar (10) so the topbar wins
   any visual overlap on the seam. */
.support-banner {
  background: var(--warning);
  color: #1a1300;
  font-weight: 600;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  right: 0;
  z-index: 9;
}

/* Hamburger toggle (hidden on desktop) */
.hamburger { display: none; }

/* Mobile breakpoint — collapse sidebar to drawer */
@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "main";
  }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 280px;
    max-width: calc(100vw - 40px);
    transform: translateX(-100%);
    transition: transform var(--motion-base) ease;
    z-index: 20;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }
  .sidebar[data-open="true"] {
    transform: translateX(0);
  }
  .drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 19;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-base);
  }
  .drawer-backdrop[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
  }
  .hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--text);
  }
}

/* Tighter padding on small phones */
@media (max-width: 700px) {
  html {
    --ui-scale: 1 !important;
  }
  .t-display-lg {
    font-size: 36px;
    line-height: 1.08;
    letter-spacing: 0;
  }
  .t-display {
    font-size: 28px;
    line-height: 1.12;
    letter-spacing: 0;
  }
  .main {
    padding: 12px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .main > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .main > * > * {
    max-width: 100%;
    min-width: 0;
  }
}

/* Mobile responsive sweep — override grid styles for known view shells.
   Some grids carry a stable class (.kpi-grid) we can target directly; older
   shells still set grid-template-columns inline and we override those via
   :has() selectors targeting the unclassed wrappers around .quick-action, etc.
   !important is required to defeat any inline style attr. */

/* Home: KPI grid → 2 cols on mobile (was repeat(4, 1fr)) */
@media (max-width: 700px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Home: quick-actions → stack vertically on mobile (was repeat(3, 1fr)) */
@media (max-width: 700px) {
  .main > div > div:has(> .quick-action) {
    grid-template-columns: 1fr !important;
  }
}

/* Home: top-value / recent-sales two-column → stack on mobile.
   Targeted via inline style match — home.js sets gridTemplateColumns: '1fr 1fr'. */
@media (max-width: 700px) {
  .main > div > div[style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Inventory grid: tighter minmax on mobile (220px → 140px).
   Targeted via stable .inventory-grid class set in inventory.js. */
@media (max-width: 700px) {
  .inventory-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  }
}

/* Auth full-screen layouts (no shell). Theme V8 Holo: two-column hero +
   form treatment ported from signin-mock.html. The legacy single-card
   layout has been replaced by the .holo-auth grid; the .auth-screen
   wrapper still wraps the page so any remaining bootstrap or external
   reference doesn't break. */
.auth-screen {
  /* Same trick as .app-shell and .sidebar — divide by --ui-scale so the
     zoomed render fills exactly one viewport rather than overflowing by
     (--ui-scale - 1) × 100vh. */
  min-height: calc(100vh / var(--ui-scale));
  display: grid;
  place-items: stretch;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
}