/* ============================================================================
   S1 — Shell & navigation.
   Served as _content/ClientSharedLibrary/css/shell.css. Depends on tokens.css.

   THE BREAKPOINT FIX
   Before this file the app had exactly two layouts, split at 1400px: a desktop
   sidebar above it, the phone off-canvas hamburger below. Everything else —
   every tablet, and a 12.9" iPad in landscape at 1366px — got the phone menu
   and lost the whole screen to it. Three tiers now:

     < 1500px           off-canvas drawer & mobile navbar   phones, tablets, laptops
     >= 1500px          persistent full sidebar             desktop

   The user's chosen brand colour is applied inline in NavMenu.razor
   (style="background-color: @_home.backgroundcolor"). Inline styles win, so
   that preference keeps working — nothing here sets a background on the
   elements that carry it.
   ========================================================================= */

/* The page ground itself. Bootstrap sets `body { background: var(--bs-body-bg) }`,
   which is white and — being a --bs-* variable — cannot be retimed on the MAUI
   host's Bootstrap 5.1 at all. `.page` paints --mp-bg over it and is
   min-height: 100dvh, so this only showed at the edges: overscroll bounce on
   iOS, and any moment the app shell is not yet mounted. Found in dark mode with
   a white body behind dark panels. Painted here so the ground matches. */
body {
  background: var(--mp-bg);
  color: var(--mp-ink);
}

/* ---- Page frame ---------------------------------------------------------- */
.page {
  position: relative;
  min-height: 100dvh;
  background: var(--mp-bg);
  color: var(--mp-ink);
  font-family: var(--mp-font);
  font-size: var(--mp-text-ui);
  line-height: var(--mp-leading);
}

.page main {
  flex: 1;
  width: 100%;
  min-width: 0;               /* lets flex children shrink instead of overflowing */
}

.page article.content {
  padding: var(--mp-gap);
  max-width: 100%;
}

/* iOS Safari zooms the page when a text field smaller than 16px takes focus,
   and it does not zoom back out. Two pages (/stock and /Purchase) each carried
   their own `input, select, textarea { font-size: 16px !important }` inside a
   max-width: 768px query — unscoped element selectors with !important, emitted
   from a component style block, so opening either page forced every field in
   the app to 16px and overrode the density system wholesale.

   The intent is right and belongs to the whole app, so it lives here once, at
   the touch sizes where it matters, and without !important. Above 768px the
   density tokens govern. */
@media (max-width: 767.98px) {
  input[type="text"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  select,
  textarea { font-size: 16px; }
}

/* ---- Top strip ----------------------------------------------------------- */
.top-row {
  background: var(--mp-surface);
  border-bottom: 1px solid var(--mp-line);
  height: var(--mp-topbar-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mp-gap-tight);
  padding-inline: var(--mp-space-4);
}

.top-row a,
.top-row .btn-link {
  white-space: nowrap;
  text-decoration: none;
  color: var(--mp-ink-2);
  border-radius: var(--mp-radius-sm);
}

.top-row a:hover,
.top-row .btn-link:hover { color: var(--mp-accent); text-decoration: none; }

.top-row a:focus-visible,
.top-row .btn-link:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}

/* ---- Sidebar ------------------------------------------------------------- */
.nav-wrapper { --mp-nav-w: var(--mp-sidebar-w); }

.sidebar {
  display: none;                     /* shown from 1500px up */
  width: var(--mp-nav-w);
  min-width: var(--mp-nav-w);
  height: 100dvh;
  position: sticky;
  top: 0;
  z-index: var(--mp-z-nav);
  background: var(--mp-surface);
  border-right: 1px solid var(--mp-line);
}

.sidebar-content {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.brand-header {
  padding: var(--mp-space-3) var(--mp-space-4);
  display: flex;
  align-items: center;
  gap: var(--mp-space-3);
  min-height: var(--mp-topbar-h);
  position: sticky;
  top: 0;
  z-index: 1;
}

.brand-header .logo-image,
.mobile-navbar .logo-image {
  width: 40px !important;            /* was 80px inline — halved, and fluid below */
  height: 40px !important;
  object-fit: contain;
  border-radius: var(--mp-radius-sm);
  cursor: pointer;
}

.brand-title {
  font-size: var(--mp-text-md);
  font-weight: var(--mp-weight-bold);
  letter-spacing: .01em;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Brand-coloured surfaces: background comes from the user's preference inline,
   so the foreground must be the fixed on-brand colour, never a theme token. The
   default brand colour sits under the inline one: while the preference is still
   loading the inline style is empty, and the white title and menu icon were
   drawn on a transparent bar over the white page. */
.brand-header,
.mobile-navbar,
.mobile-menu .offcanvas-header {
  background-color: var(--mp-brand);
  color: var(--mp-on-brand);
}
.brand-header .brand-title,
.mobile-navbar .brand-title,
.mobile-menu .offcanvas-title { color: var(--mp-on-brand); }
.mobile-menu .offcanvas-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }

.nav-content { padding: var(--mp-space-2); flex: 1; }
/* Scoped in S4. `.nav-item { width: 100% }` and `.nav.flex-column` are
   Bootstrap classes, and these were unscoped — so every Bootstrap nav in the
   app got full-width items, which stacks a horizontal .nav-tabs into one tab
   per row. Confined to the sidebar and drawer, which is all they were for. */
.nav-wrapper .nav-menu,
.nav-wrapper .nav.flex-column,
.mobile-nav-shell .nav-menu,
.mobile-nav-shell .nav.flex-column { display: flex; flex-direction: column; gap: 2px; }
.nav-wrapper .nav-item,
.mobile-nav-shell .nav-item { width: 100%; }

/* ---- Nav links ----------------------------------------------------------- */
/* NavMenu's links carry no Bootstrap utility classes — .text-white, .py-3 and
   .px-4 are all !important in Bootstrap and were overriding colour and padding
   here (white text on the light sidebar, invisible until hover). They were
   removed from the markup so this file owns the whole appearance. */
.sidebar .nav-link,
.mobile-menu .nav-link,
.offcanvas .nav-link {
  display: flex;
  align-items: center;
  gap: var(--mp-space-3);
  min-height: var(--mp-row-h);
  padding: var(--mp-space-2) var(--mp-space-3);
  border-radius: var(--mp-radius-sm);
  color: var(--mp-ink-2);
  font-size: var(--mp-text-ui);
  font-weight: var(--mp-weight-medium);
  line-height: var(--mp-leading-tight);
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}

.sidebar .nav-link svg,
.mobile-menu .nav-link svg,
.offcanvas .nav-link svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  opacity: .78;
}

.sidebar .nav-link:hover,
.mobile-menu .nav-link:hover,
.offcanvas .nav-link:hover {
  background: var(--mp-surface-2);
  color: var(--mp-ink);
}

.sidebar .nav-link.active,
.mobile-menu .nav-link.active,
.offcanvas .nav-link.active {
  background: var(--mp-accent-soft);
  color: var(--mp-accent);
  font-weight: var(--mp-weight-bold);
}

.sidebar .nav-link.active svg,
.mobile-menu .nav-link.active svg,
.offcanvas .nav-link.active svg { opacity: 1; }

.sidebar .nav-link:focus-visible,
.mobile-menu .nav-link:focus-visible,
.offcanvas .nav-link:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: -2px;
}

/* Pending-order count and similar counters */
.sidebar .nav-link .badge,
.mobile-menu .nav-link .badge,
.offcanvas .nav-link .badge {
  /* The markup carries Bootstrap's .ms-2, whose margin-left is !important —
     match it so the counter still parks against the right edge. */
  margin-left: auto !important;
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--mp-text-xs);
  font-weight: var(--mp-weight-bold);
  padding: 2px 7px;
  border-radius: var(--mp-radius-pill);
}

/* Group heading inside the nav (e.g. "Marketplace"). Typography comes from
   .mp-label in tokens.css; this only positions it. */
.nav-section-label {
  padding: var(--mp-space-4) var(--mp-space-3) var(--mp-space-1);
}

/* ---- Mobile bar + drawer ------------------------------------------------- */
/* Safe area at the top: a host that already reserves the status-bar height above
   the app (the MAUI hosts' .status-bar-safe-area on iOS) sets
   --mp-safe-top-pad: 0px and --mp-safe-top-stick to that height. Without that the
   bar padded for the status bar a second time - an empty band above MIRUS POS -
   and, once scrolled, stuck underneath it. */
.mobile-navbar {
  display: flex;
  align-items: center;
  min-height: var(--mp-topbar-h);
  padding: var(--mp-space-2) var(--mp-space-3);
  position: sticky;
  top: var(--mp-safe-top-stick, 0px);
  z-index: var(--mp-z-nav);
  padding-top: max(var(--mp-space-2), var(--mp-safe-top-pad, env(safe-area-inset-top, 0px)));
}

/* The bar's one child is this row. As a flex item it shrank to its content, so
   the toggle's ms-auto had no space to push into and the menu button sat right
   after the title instead of at the right edge. */
.mobile-navbar-row {
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--mp-space-2);
}
.mobile-navbar-row .brand-title { min-width: 0; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;         /* real touch target */
  border: none;
  background: transparent;
  color: inherit;
  border-radius: var(--mp-radius-sm);
  cursor: pointer;
}
.menu-toggle:hover { background: rgba(255, 255, 255, .14); }
.menu-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.mobile-menu {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(88vw, 320px);
  background: var(--mp-surface);
  border-right: 1px solid var(--mp-line);
  box-shadow: var(--mp-shadow-lg);
  transform: translateX(-100%);
  transition: transform .22s ease;
  z-index: var(--mp-z-overlay);
  display: flex;
  flex-direction: column;
}
.mobile-menu.show { transform: translateX(0); }

.mobile-menu .offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-space-3);
  padding: var(--mp-space-3) var(--mp-space-4);
  min-height: var(--mp-topbar-h);
  padding-top: max(var(--mp-space-3), env(safe-area-inset-top));
}
.mobile-menu .offcanvas-title {
  margin: 0;
  font-size: var(--mp-text-md);
  font-weight: var(--mp-weight-bold);
}

/* The markup carries bg-dark text-white here; override to the token surface. */
.mobile-menu .offcanvas-body,
.mobile-menu .offcanvas-body.bg-dark {
  background: var(--mp-surface) !important;
  color: var(--mp-ink) !important;
  padding: var(--mp-space-2) !important;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: max(var(--mp-space-4), env(safe-area-inset-bottom));
}
.mobile-menu .offcanvas-body .nav-link.active { color: var(--mp-accent); }

.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(9, 12, 17, .48);
  z-index: calc(var(--mp-z-overlay) - 1);
}

/* ============================================================================
   Tier rules. These replace the single 1400px split.
   ========================================================================= */

/* Screens under 1500px — drawer and mobile navbar only. */
@media (max-width: 1499.98px) {
  .sidebar      { display: none; }
  .mobile-navbar{ display: flex; }
  .mobile-menu  { display: flex; }
}

/* Desktop — full sidebar 1500px and up. */
@media (min-width: 1500px) {
  .page          { display: flex; align-items: flex-start; }
  .nav-wrapper   { position: sticky; top: 0; height: 100dvh; z-index: var(--mp-z-nav); flex-shrink: 0; }
  .sidebar       { display: block; }
  .mobile-navbar { display: none; }
  .mobile-menu,
  .mobile-menu-backdrop { display: none !important; }
  .top-row       { position: sticky; top: 0; z-index: calc(var(--mp-z-nav) - 1); }
  .page article.content { padding: var(--mp-space-5); }
}

/* ============================================================================
   Shell overlays — access-restricted block and update snackbar.
   ========================================================================= */
.overlayModal-block {
  position: fixed;
  inset: 0;
  background: rgba(9, 12, 17, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mp-space-4);
  z-index: var(--mp-z-overlay);
}

.overlayModal-content {
  background: var(--mp-surface);
  color: var(--mp-ink);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-lg);
  box-shadow: var(--mp-shadow-lg);
  padding: var(--mp-space-6);
  width: min(100%, 520px);
  max-height: 88dvh;
  overflow-y: auto;
  text-align: center;
}

/* Scoped to .overlayModal-content: .modal-title is a Bootstrap class, and an
   unscoped rule here would resize the heading of every real Bootstrap modal in
   the app. The other three are bespoke names but are kept together with it so
   the block reads as one component. */
.overlayModal-content .modal-icon { color: var(--mp-danger); margin-bottom: var(--mp-space-3); }
.overlayModal-content .modal-title {
  font-size: var(--mp-text-xl);
  font-weight: var(--mp-weight-bold);
  margin: 0 0 var(--mp-space-3);
  text-wrap: balance;
}
.overlayModal-content .modal-divider {
  height: 1px;
  background: var(--mp-line);
  margin: var(--mp-space-4) 0;
}
.overlayModal-content .modal-message { color: var(--mp-ink-2); margin: 0 0 var(--mp-space-4); }

.reason-box, .contact-box {
  text-align: left;
  border-radius: var(--mp-radius);
  padding: var(--mp-space-4);
  margin-bottom: var(--mp-space-4);
}
.reason-box  { background: var(--mp-surface-2); border-left: 3px solid var(--mp-warn); }
.contact-box { background: var(--mp-accent-soft); }
.contact-box h4 {
  color: var(--mp-accent);
  font-size: var(--mp-text-base);
  font-weight: var(--mp-weight-bold);
  margin: 0 0 var(--mp-space-3);
}
.reason-label { font-weight: var(--mp-weight-bold); color: var(--mp-ink); }
.reason-text  { color: var(--mp-ink-2); }
.contact-info { display: flex; flex-direction: column; gap: var(--mp-space-2); }
.contact-method {
  display: flex;
  align-items: center;
  gap: var(--mp-space-2);
  color: var(--mp-ink-2);
  font-size: var(--mp-text-sm);
}
.contact-method a { color: var(--mp-accent); text-decoration: none; }
.contact-method a:hover { text-decoration: underline; }

.logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mp-space-2);
  height: var(--mp-control-h);
  padding: var(--mp-control-pad);
  background: var(--mp-danger);
  color: var(--mp-danger-ink);
  border: none;
  border-radius: var(--mp-radius-sm);
  font-family: inherit;
  font-size: var(--mp-text-ui);
  font-weight: var(--mp-weight-bold);
  cursor: pointer;
}
.logout-button:hover { filter: brightness(.94); }
.logout-button:focus-visible { outline: 2px solid var(--mp-ink); outline-offset: 2px; }

/* The Admin's way back in when the licence has ended: to the plans page. */
.renew-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--mp-control-h);
  padding: var(--mp-control-pad);
  margin-right: var(--mp-space-2);
  background: var(--mp-accent);
  color: #fff;
  border: none;
  border-radius: var(--mp-radius-sm);
  font-family: inherit;
  font-size: var(--mp-text-ui);
  font-weight: var(--mp-weight-bold);
  cursor: pointer;
}
.renew-button:hover { filter: brightness(.94); }
.renew-button:focus-visible { outline: 2px solid var(--mp-ink); outline-offset: 2px; }

/* ---- Update snackbar ----------------------------------------------------- */
.update-snackbar {
  position: fixed;
  right: var(--mp-space-4);
  bottom: max(var(--mp-space-4), env(safe-area-inset-bottom));
  left: auto;
  width: min(calc(100vw - var(--mp-space-4) * 2), 380px);
  background: var(--mp-surface);
  color: var(--mp-ink);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow-lg);
  z-index: var(--mp-z-overlay);
  overflow: hidden;
}

.update-snackbar-header {
  display: flex;
  align-items: center;
  gap: var(--mp-space-3);
  padding: var(--mp-space-4);
  border-bottom: 1px solid var(--mp-line);
}
.update-snackbar-icon {
  color: var(--mp-accent);
  background: var(--mp-accent-soft);
  border-radius: var(--mp-radius-sm);
  padding: 6px;
  display: inline-flex;
}
.update-snackbar-title {
  font-weight: var(--mp-weight-bold);
  font-size: var(--mp-text-base);
  flex: 1;
}
.update-snackbar-close {
  background: transparent;
  border: none;
  color: var(--mp-muted);
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: var(--mp-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.update-snackbar-close:hover { background: var(--mp-surface-2); color: var(--mp-ink); }

.update-snackbar-body { padding: var(--mp-space-4); font-size: var(--mp-text-sm); }
.update-snackbar-body p { margin: 0 0 var(--mp-space-2); }
.update-notes { color: var(--mp-muted); }

.update-progress-container {
  height: 6px;
  background: var(--mp-surface-sunk);
  margin: 0 var(--mp-space-4);
  border-radius: var(--mp-radius-pill);
  overflow: hidden;
}
.update-progress-bar {
  height: 100%;
  background: var(--mp-accent);
  transition: width .2s ease;
}
.update-progress-text {
  padding: var(--mp-space-2) var(--mp-space-4) var(--mp-space-4);
  font-size: var(--mp-text-xs);
  color: var(--mp-muted);
  font-family: var(--mp-font-num);
  font-variant-numeric: tabular-nums;
}

.update-snackbar-footer {
  display: flex;
  gap: var(--mp-space-2);
  justify-content: flex-end;
  padding: 0 var(--mp-space-4) var(--mp-space-4);
}
.btn-update-later, .btn-update-now {
  height: var(--mp-control-h);
  padding: var(--mp-control-pad);
  border-radius: var(--mp-radius-sm);
  font-family: inherit;
  font-size: var(--mp-text-sm);
  font-weight: var(--mp-weight-bold);
  cursor: pointer;
}
.btn-update-later {
  background: transparent;
  color: var(--mp-ink-2);
  border: 1px solid var(--mp-line-strong);
}
.btn-update-later:hover { background: var(--mp-surface-2); }
.btn-update-now {
  background: var(--mp-accent);
  color: var(--mp-accent-ink);
  border: 1px solid var(--mp-accent);
}
.btn-update-now:hover { background: var(--mp-accent-hover); }
.btn-update-later:focus-visible, .btn-update-now:focus-visible {
  outline: 2px solid var(--mp-accent);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .update-snackbar { left: var(--mp-space-3); right: var(--mp-space-3); width: auto; }
}