@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Space+Grotesk:wght@400;500;700&display=swap");

:root {
  /* Global palette (2026-07 redesign, from the Manager Override PIN design comp):
     warm cream ground + near-black ink. --bg and --ink drive every page's main area. */
  --bg: #f7f1ea;
  --surface: rgba(255, 252, 247, 0.88);
  --line: rgba(23, 23, 26, 0.14);
  --line-strong: rgba(23, 23, 26, 0.3);
  --ink: #17171a;
  --ink-soft: #6e695f;
  --accent: #c96f34;
  --accent-dark: #964b1d;
  --danger: #b44232;
  --white: #ffffff;
  --shadow: 0 24px 60px rgba(23, 23, 26, 0.12);

  /* Extended tokens introduced with the redesign — prefer these for new/reworked pages. */
  --muted: #a79e92;            /* uppercase micro-labels, tertiary text */
  --card: #ffffff;             /* card surface */
  --card-line: #ece4d9;        /* card border */
  --card-line-soft: #f0eae1;   /* dividers inside cards */
  --field-bg: #fbf8f3;         /* input/select surface */
  --field-line: #e6ded2;       /* input/select border */
  --accent-red: #e4322b;       /* interactive hover/danger accent */
  --accent-ring: rgba(201, 111, 52, 0.14); /* focus ring around accent-colored inputs (login comp) */
  --card-inset: #f5efe3;       /* tinted inset section inside a card (Alerting comp: the "Add …" footer) */
  --success: #2e9e6b;
  --success-deep: #1f7a50;
  --success-tint: rgba(46, 158, 107, 0.14); /* wash behind something just created (DEV-1193: the new row on a list) */
  --card-shadow: 0 1px 2px rgba(23, 23, 26, 0.04), 0 12px 32px rgba(23, 23, 26, 0.06);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Space Grotesk", system-ui, sans-serif;
  color: var(--ink);
  /* Flat warm ground (the old orange/blue radial washes are retired with the redesign). */
  background: var(--bg);
}

a {
  color: inherit;
}

.hidden,
.app-hidden {
  display: none !important;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 18px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  color: var(--white);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

.btn.secondary {
  background: linear-gradient(180deg, #30445d, #182536);
}

.btn.danger {
  background: linear-gradient(180deg, #c94f3c, #a83528);
  border: 0;
}

.btn.danger:hover {
  background: linear-gradient(180deg, #d9604d, #b83c30);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Compact primary — inline row actions. Promoted from dot-tills.css (rule of two:
   Tills + Native Taxes). */
.btn-sm {
  padding: 0.3rem 0.6rem;
  font-size: 0.82rem;
  min-height: 0;
  border-radius: 8px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-lockup.compact {
  gap: 12px;
}

.brand-mark {
  /* Size by height so the header stays a consistent height; let width follow the image's aspect
     ratio (no squishing of wide logos). max-width caps an extreme banner so it can't blow out the
     header; object-fit keeps it undistorted if that cap engages. */
  height: 52px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 16px 32px rgba(20, 32, 51, 0.18);
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.section-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 28px;
  line-height: 1.05;
  white-space: nowrap;   /* "Picker Queue" / "Stock Take Count" must not wrap the brand block (DEV-959) */
}

.hero-title {
  margin: 8px 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 0.98;
}

.hero-copy {
  margin: 14px 0 0;
  /* No measure cap — hero copy spans the section width; container padding sets the inset. */
  max-width: none;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px clamp(18px, 4vw, 40px);
}

/* One row, always (DEV-959). The actions used to flex-wrap, so any page that added a Back button — or a
   two-word section title — pushed Sign Out onto a second row at laptop widths (1280px). Now nothing wraps
   at desktop widths: the e-mail chip truncates first, then the location selector shrinks to its minimum.
   Phones are handled separately below — the 720px rule stacks the header, the handheld rule keeps its own
   one-row layout. */
.site-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  justify-content: flex-end;
}

/* ── Help menu (DEV-990) — the manual and problem reporting, behind one header control ────────────
   Built on <details> so it opens, closes and keyboard-navigates with no script at all; the header is
   the one place a stray dependency is most likely to break the very page someone is asking for help
   with. The summary is styled as an ordinary .btn secondary so it sits in the row with News. */
.portal-help {
  position: relative;
}

.portal-help > summary {
  list-style: none;          /* Firefox draws a marker unless both of these are set */
  cursor: pointer;
}

.portal-help > summary::-webkit-details-marker {
  display: none;
}

.portal-help-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;               /* above the page, below the modal overlays (news/report sit at 100+) */
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portal-help-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.portal-help-item:hover,
.portal-help-item:focus-visible {
  background: rgba(0, 0, 0, 0.05);
}

.portal-help-hint {
  color: var(--muted, #6b6b6b);
  font-size: 0.75rem;
}

/* Per-page Back link. Redundant next to the portal nav and the section sidebars, so it is hidden at desktop
   widths and only shows on the handheld scanner pages, whose mobile rule removes the nav (see below). */
.portal-back {
  display: none;
}

.user-chip {
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 700;
  min-width: 0;
  max-width: 220px;
  flex: 0 1 auto;
}

.user-chip-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Clickable variant — the header name chip links to the self-service profile page. */
a.user-chip--link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

a.user-chip--link:hover,
a.user-chip--link:focus-visible {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--accent, #2d6cdf);
}

.shell-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  font-weight: 700;
  text-decoration: none;
}

/* ── Master location selector (portal header) ────────────────────────────── */

/* Plain text shown when the user only has one accessible location */
.location-selector-text {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 10px;
  white-space: nowrap;
}

/* Compact dropdown shown when the user has multiple accessible locations */
.location-selector-select {
  height: 44px;
  min-width: 140px;
  max-width: 210px;
  flex: 0 1 auto;        /* may shrink towards min-width before the header would wrap (DEV-959) */
  padding: 0 32px 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  transition: border-color 0.15s;
}

.location-selector-select:focus {
  outline: none;
  border-color: var(--accent);
}

/* ── Portal navigation strip — appears below the site-header on every portal page (the Picker too, since DEV-1177) ── */

.portal-nav {
  border-bottom: 1px solid var(--line);
  padding: 0 clamp(18px, 4vw, 40px);
  background: var(--surface);
}

.portal-nav-links {
  display: flex;
  gap: 2px;
  height: 44px;
  align-items: center;
}

.portal-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}

.portal-nav-link:hover {
  background: rgba(20, 32, 51, 0.06);
  color: var(--ink);
}

.portal-nav-link.active {
  background: rgba(20, 32, 51, 0.08);
  color: var(--ink);
}

/* ── Two-column section layout: sidebar + content area ───────────────────── */
/* minmax(0, 1fr) prevents the content column from blowing out its grid cell. */

.section-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
}

.section-sidebar {
  padding: 24px 8px;
  border-right: 1px solid var(--line);
  min-height: 100%;
}

.section-sidebar-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  padding: 0 10px 8px;
}

/* In-list section headings (SectionNavItem.IsHeading, DEV-750) — the same face as the sidebar's
   top label, titling a block of entries. A heading that follows other entries opens a new block,
   so it gets air and a rule above it; the first entry in the list needs neither. */
.section-sidebar-list li:not(:first-child) > .section-sidebar-heading {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.section-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.section-sidebar-link {
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}

.section-sidebar-link:hover {
  background: rgba(20, 32, 51, 0.06);
  color: var(--ink);
}

.section-sidebar-link.active {
  background: rgba(20, 32, 51, 0.08);
  color: var(--ink);
  font-weight: 600;
}

.section-sidebar-group {
  display: block;
  padding: 7px 10px 3px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.section-sidebar-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

.section-sidebar-sublink {
  padding-left: 20px;
  font-size: 13px;
}

/* DEV-1166: a red count beside a sidebar entry with something waiting (Unassigned Requisitions, Short
   Picks), the way a mail client shows unread. Filled by _SectionSidebar's script after the page loads.
   The [hidden] rule is needed because display here would otherwise override the attribute.
   A badged link is a flex row so the count stays beside its label: a long label ("Unassigned
   Requisitions") wraps onto two lines instead of pushing the count onto a line of its own. */
.section-sidebar-link-badged {
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-sidebar-badge {
  display: inline-block;
  flex: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--danger);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  vertical-align: 1px;
}

.section-sidebar-badge[hidden] {
  display: none;
}

/* ── Narrow screens: the portal nav and the section sidebar stop widening the page (DEV-1412) ─────────
   At 412px every back-office page scrolled sideways to 977px, and at 768px (a tablet) to 990px: the portal nav's
   links are one row that never wraps (at a tablet they broke over three lines and still overflowed), and the
   section layout kept its 220px sidebar column beside a 192px content column, so a page's own content (a stock
   unit's card, a permissions panel) was pushed off the right edge.
   - The portal nav's links swipe sideways inside their own strip, at every width. On a desktop they fit, so
     nothing changes there.
   - Below 720px the section layout becomes one column, with the sidebar above the content as a single
     swipeable strip of its links; its group labels read as small labels, not as links.
   wwwroot/js/nav-strip.js centres each strip's active link and marks which ends have more to scroll
   (data-more), which the fade below shows: a word cut at the edge then reads as "more this way", not as broken.
   Handheld pages (body.handheld) hide the portal nav in the 768px rule below; the strip rules are harmless there. */
.portal-nav-links {
  overflow-x: auto;
  scrollbar-width: thin;
}

.portal-nav-link {
  flex: none;
  white-space: nowrap;
}

/* The edge fade, on whichever side has more (set by nav-strip.js; no attribute, no fade). */
[data-strip] {
  --strip-fade-left: 0px;
  --strip-fade-right: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--strip-fade-left), #000 calc(100% - var(--strip-fade-right)), transparent);
          mask-image: linear-gradient(to right, transparent, #000 var(--strip-fade-left), #000 calc(100% - var(--strip-fade-right)), transparent);
}
[data-strip][data-more~="left"]  { --strip-fade-left: 32px; }
[data-strip][data-more~="right"] { --strip-fade-right: 32px; }

@media (max-width: 720px) {
  .section-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-sidebar {
    min-height: 0;
    padding: 6px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: thin;
  }

  /* The section's name is already the portal header's title, so the strip starts with the links. */
  .section-sidebar > .section-sidebar-heading {
    display: none;
  }

  .section-sidebar-list,
  .section-sidebar-sublist {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0;
  }

  .section-sidebar-list > li {
    display: flex;
    align-items: center;
    flex: none;
  }

  /* A group's name ("Products", "User Control") is a label, not a link: small, muted and set off by a rule, as
     the sidebar's own heading is on a desktop. The first one needs no rule before it. */
  .section-sidebar-list .section-sidebar-heading,
  .section-sidebar-group {
    margin-left: 8px;
    padding: 0 6px 0 12px;
    border-left: 1px solid var(--line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
  }

  .section-sidebar-list > li:first-child > .section-sidebar-heading,
  .section-sidebar-list > li:first-child > .section-sidebar-group {
    margin-left: 0;
    padding-left: 2px;
    border-left: 0;
  }

  .section-sidebar-link,
  .section-sidebar-sublink {
    padding: 7px 10px;
    white-space: nowrap;
  }
}

.hero-card,
.page-notice {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.hero-card {
  padding: clamp(22px, 4vw, 36px);
}

.page-notice {
  padding: 16px 18px;
  font-weight: 700;
}

.page-notice.error {
  color: var(--danger);
}

/* The other kinds a page notice carries (DEV-1343). Requisitions ▸ Detail had rendered `page-notice warning`
   with no rule for it, so its cancel-with-sale warning read as plain info. Same tokens as .flash-banner. */
.page-notice.warning {
  color: var(--accent-dark);
}

.page-notice.success {
  color: var(--success-deep);
}

/* What a page could not load and why (DEV-1341, Pages/Shared/_LoadNotices.cshtml): one stack of notices under the
   portal nav, or above the body on pages without it, set off from what follows. */
.load-notices {
  display: grid;
  gap: 10px;
  margin: 14px clamp(16px, 3vw, 40px);   /* the portal nav's own side gutter, so it lines up instead of touching the edges */
}

/* Several refusals in one notice: the reasons as a plain list under its first line. */
.load-notices-list {
  margin: 6px 0 0;
  padding-left: 20px;
  font-weight: 600;
}

/* ── Handheld chrome for the scanner apps (body.handheld: Picker, Shipping, Receiving, Stow) ──
   On a dock phone or scanner the shared portal chrome stacked seven full-width header buttons and
   a nav strip that panned sideways — 400px of screen before the first card, so the job itself
   started below the fold (Romon, 2026-09-03, checked at 390×844). Same treatment the stock-take
   count page gave itself (DEV-649), lifted here so every scanner app gets it from one rule: the
   nav strip goes, the header keeps only its Home button (it read "Back" until DEV-1177), the location
   selector (queues are scoped by it) and Sign Out on ONE row, and nothing pans sideways. Desktop widths and every other page are untouched. */
@media (max-width: 768px) {
  body.handheld .portal-nav { display: none; }

  body.handheld .site-header-actions > button,                 /* bell, News */
  body.handheld .site-header-actions > .portal-help,           /* Help — a <details>, not a button (DEV-990) */
  body.handheld .site-header-actions .location-selector-text,
  body.handheld .site-header-actions .user-chip { display: none; }

  body.handheld .site-header { padding: 8px 12px; gap: 8px; }
  body.handheld .site-header .brand-mark { width: 34px; height: 34px; }
  body.handheld .site-header .eyebrow { display: none; }

  body.handheld .site-header-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  body.handheld .site-header-actions .portal-back { display: inline-flex; }   /* the scanner's way home once the nav is gone */
  body.handheld .site-header-actions .btn.secondary,
  body.handheld .site-header-actions .btn,
  body.handheld .site-header-actions .location-selector-select { width: auto; flex: 0 1 auto; }

  body.handheld { overflow-x: hidden; }
}

/* DEV-1412: below 900px the header stacks, the brand above its actions, and the actions wrap. The one-row rule
   (DEV-959) is for desktop widths: at a tablet's 768px the row overlapped the section title, squeezed the user
   chip to an empty pill and broke Sign Out over two lines, and on a phone it ran Sign Out off the right edge.
   Handheld pages keep their own one-row header (the 768px rule above). */
@media (max-width: 900px) {
  body:not(.handheld) .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  body:not(.handheld) .site-header-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* DEV-1412: on a phone the header's controls are compact, so it takes two rows of them rather than four (about
   160px of screen, not 300). Each keeps its own width: the full-width rule below is for buttons in a page's body. */
@media (max-width: 720px) {
  body:not(.handheld) .site-header { padding: 12px 16px; gap: 10px; }
  body:not(.handheld) .site-header .brand-mark { height: 40px; border-radius: 12px; }
  body:not(.handheld) .site-header .section-title { font-size: 22px; }
  body:not(.handheld) .site-header-actions { gap: 8px; }

  body:not(.handheld) .site-header-actions .btn,
  body:not(.handheld) .site-header-actions .btn.secondary,
  body:not(.handheld) .site-header-actions .user-chip {
    width: auto;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 14px;
  }

  body:not(.handheld) .site-header-actions .user-chip { border-radius: 999px; }
  /* Starts at its 140px minimum rather than its 210px maximum, so it fits beside the bell, News and Help and the
     header takes two rows of controls, not three; it grows into what's left of that row. */
  body:not(.handheld) .site-header-actions .location-selector-select { height: 40px; flex: 1 1 140px; }
}

@media (max-width: 720px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  /* Left-aligned under the brand. Handheld pages rely on this too: their own 768px rule doesn't set it. */
  .site-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .shell-link,
  .btn.secondary,
  .user-chip {
    width: 100%;
    justify-content: center;
  }
}