.app { display: grid; grid-template-columns: var(--sidebar-width) 1fr; grid-template-rows: auto 1fr; height: 100vh; }
.app-header {
grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
padding: 12px 20px; background: var(--bg-surface); border-bottom: 1px solid var(--border); z-index: 20;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 220px; }
.brand-icon {
width: 28px; height: 28px; background: linear-gradient(135deg, var(--accent), #14b8a6);
border-radius: 6px; display: grid; place-items: center; color: white; font-weight: 700;
}
/* Layout only. The field itself (icon, padding, focus ring) is the shared
   .search-field component in components.css - a component rule here would be
   silently overridden by the generic input rule loaded after this file. */
.header-search { flex: 1; max-width: 520px; min-width: 0; }
.header-actions { display: flex; gap: 8px; margin-left: auto; }
.sidebar {
background: var(--bg-surface); border-right: 1px solid var(--border);
overflow-y: auto; padding: 16px 12px;
}
.nav-section { margin-bottom: 20px; }
.nav-section-title {
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-subtle); padding: 8px 12px; margin-bottom: 4px;
}
.nav-item {
display: flex; align-items: center; gap: 12px; padding: 8px 12px;
border-radius: 6px; color: var(--text-muted); font-size: 13px; font-weight: 500;
cursor: pointer; width: 100%; text-align: left;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text); }
.nav-item.active { background: var(--accent-subtle); color: var(--accent); }
.nav-item .count {
margin-left: auto; font-size: 11px; color: var(--text-subtle);
background: var(--bg-muted); padding: 1px 6px; border-radius: 10px;
}
/* min-width: 0 is what lets the column actually SHRINK: a grid item defaults to
   min-width: auto, so one wide child (a data table, a long path) would push the
   whole page sideways on a phone instead of scrolling inside its own wrapper. */
.main { overflow-y: auto; padding: 24px 32px; background: var(--bg); min-width: 0; }
.app { min-width: 0; }
.sidebar { min-width: 0; }

@media (max-width: 900px) {
.app { grid-template-columns: minmax(0, 1fr); }
/* The drawer slides in over the content. `visibility: hidden` while closed is what
   keeps it out of the tab order: merely moving it off-screen left every item in it
   focusable, so a keyboard user could tab into a menu that is not on screen. */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width);
  transform: translateX(-100%); visibility: hidden; z-index: 50;
  transition: transform var(--duration-base) var(--ease-standard), visibility var(--duration-base) var(--ease-standard);
}
.sidebar.open { transform: translateX(0); visibility: visible; }
.main { padding: 16px; min-width: 0; }
.brand { min-width: auto; }
}

/* The phone header. On a wide screen the search sits between the brand and the
   actions; at 390px that row cannot hold all of them, and before this rule the
   actions alone were 518px wide - which pushed the WHOLE PAGE sideways (a real
   defect the browser tests caught). Now the header wraps: the brand shrinks with
   an ellipsis, the search takes its own full-width row, and the account block
   collapses to its button (the popover still carries the details). */
@media (max-width: 700px) {
.app-header { flex-wrap: wrap; row-gap: var(--space-2); padding: 10px 12px; }
.brand { flex: 1 1 auto; min-width: 0; }
.brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-search { order: 3; flex: 1 1 100%; max-width: none; }
.header-actions { flex: 0 0 auto; gap: 2px; margin-left: 0; }
.user-menu { gap: 2px; }
.user-menu .user-email, .user-menu .user-inventory { display: none; }
}

/* Very narrow phones (320px). Even after the header wraps, five icon buttons plus
   the account controls cannot share one 320px line, so the search takes the first
   row (it is the most-used control), the rest flows onto the rows below, and the
   one REDUNDANT shortcut is dropped - AI Scan is in the Items toolbar and in the
   navigation drawer, so nothing becomes unreachable. */
@media (max-width: 480px) {
.header-search { order: -1; }
/* flex: 1 1 100% (not 0 0 auto) is what lets the row WRAP inside 320px instead of
   being 352px wide and dragging the page with it. */
.header-actions { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }
#aiCatalogBtn { display: none; }
}
@media print {
/* The bottom navigation and its backdrop are screen affordances: they must never
   appear on paper. */
.app-header, .sidebar, .toolbar, .page-actions, .modal-footer, .toasts,
.bottom-nav, .nav-backdrop { display: none !important; }
/* An open overlay (item details, photo viewer) is a SCREEN affordance and must
   never print: the report underneath is the printable document. Without this the
   dialog would appear on paper, because #modalRoot is outside .app. */
#modalRoot { display: none !important; }
/* A clickable report cell prints as plain text, with no underline artefact. */
.report-link { text-decoration: none !important; color: inherit !important; }
.report-photo-btn { cursor: auto; }
.app { display: block; }
.main { padding: 0; overflow: visible; }
body { overflow: visible; }
/* Printing helpers for QR labels & reports */
.no-print { display: none !important; }
/* Force light colors so dark theme doesn't print as black paper */
html {
  --bg: #fff; --bg-surface: #fff; --bg-elevated: #fff; --bg-muted: #f3f4f6; --bg-hover: #f3f4f6;
  --text: #111; --text-muted: #4b5563; --text-subtle: #6b7280;
  --border: #d1d5db; --border-strong: #9ca3af; --shadow: none;
}
body { background: #fff; color: #111; }
/* Label sheet */
.label { border: 1px solid #9ca3af; break-inside: avoid; page-break-inside: avoid; box-shadow: none !important; }
/* Report tables */
.report-table { width: 100%; border-collapse: collapse; }
.report-table th, .report-table td { border: 1px solid #d1d5db; padding: 5px 8px; font-size: 11px; text-align: left; }
.report-group-title { break-after: avoid; page-break-after: avoid; }
}