/* ================================================================
   Theme switch + theme plumbing (shared by light and dark)

   Loaded only by the pages that offer a theme choice, after app.css
   (or admin.css). Colour values live in theme-dark.css / admin-dark.css;
   this file only carries the control so it renders in both modes.
   ================================================================ */

/* Icon-only cycle button: customer topnav and the admin page header.
   Fallbacks keep it usable on the admin surface, which defines a smaller
   set of custom properties. */
.theme-toggle {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  background: var(--surface-hover, var(--panel2));
  color: var(--text-secondary, var(--muted));
  border: 1px solid var(--line);
  border-radius: var(--r-full, 999px);
  cursor: pointer;
  transition: background var(--t-fast, 140ms ease), border-color var(--t-fast, 140ms ease), color var(--t-fast, 140ms ease);
}

.theme-toggle:hover {
  color: var(--text);
  border-color: var(--line-bright, var(--muted));
}

.theme-toggle:active { transform: scale(0.96); }

.theme-toggle svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Full-width cycle button, admin sidebar footer. */
.theme-toggle-wide {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 9px 13px;
  background: var(--panel, var(--surface));
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: 600 13px var(--sans, var(--font-sans));
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.theme-toggle-wide:hover { background: var(--panel2, var(--surface-hover)); }
.theme-toggle-wide:active { transform: scale(0.98); }

.theme-toggle-wide svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* One icon per mode; the attribute is set before first paint by theme.js. */
.theme-toggle .theme-icon,
.theme-toggle-wide .theme-icon { display: none; }

html[data-theme-mode="system"] .theme-icon-system,
html:not([data-theme-mode]) .theme-icon-system,
html[data-theme-mode="light"] .theme-icon-light,
html[data-theme-mode="dark"] .theme-icon-dark { display: inline-block; }

/* Brand assets: the shipped wordmark/mark are dark ink, so the dark theme
   swaps in the generated light-ink variants. */
html[data-theme="dark"] .brand-logo-full { content: url("/static/brand/asai-wordmark-light.png"); }
html[data-theme="dark"] .brand-logo-mark { content: url("/static/brand/asai-mark-light.png"); }

/* Admin page header: theme control sits beside the primary action. */
.page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Admin sign-in has no sidebar; keep the control at its natural width so it
   does not stretch across the copy panel. */
.login-copy .theme-toggle-wide {
  width: auto;
  align-self: flex-start;
}

/* The admin sidebar overflows a 900px-tall viewport by ~20px even before any
   theme work (14 nav sections + a three-control footer). Make it scrollable so
   the footer stays reachable, and reserve the gutter so the scrollbar cannot
   reflow the nav labels. */
.sidebar {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle-wide { transition: none; }
}

/* ================================================================
   Customer header fit (layout, not colour)

   The authenticated header holds eight nav tabs plus four right-hand
   controls. Before these rules it needed 1379px inside a 1184px content box,
   so the page scrolled sideways from 1297px to 1573px viewport width and the
   right-most control sat outside the viewport.

   After these rules, measured on the built app at 1440x900:
     1081-1208px  icon-only labels, 0px overflow
     1209-1345px  labelled, 82px at 1209px tapering to 0px  <- accepted defect
     1346px+      0px overflow
   Links, label text, tab order and the 64px header height are unchanged.
   Closing the remaining window means raising the icon-only breakpoint to
   where the labelled row actually fits; that is deliberately not done here.
   ================================================================ */
@media (min-width: 1081px) {
  .topnav { gap: 14px; }
  .main-nav { gap: 0; }
  .nav-tab { padding-inline: 9px; gap: 6px; }
  .nav-right { gap: 8px; }
}

@media (min-width: 1081px) and (max-width: 1208px) {
  .nav-tab .nav-label { display: none; }
  .nav-tab { padding-inline: 10px; }
  .nav-tab svg { width: 17px; height: 17px; opacity: 1; }
}