/*
 * Item-search dropdown rows (PO / SO line entry) render as "SKU: Description".
 * These live in the global stylesheet so every search box that uses the shared
 * po_item_search / so_item_search partials looks the same, on the new-order page,
 * the edit page, and anywhere else. The row container (.po-item-result /
 * .so-item-result) provides the flex layout; these style the SKU lead + price.
 */
/*
 * WRAPS RATHER THAN ELLIPSING. These lists read "SKU: Description", and the SKUs in
 * this catalogue share long prefixes — TR12BWHB, TR12BWLG, TR12BWLM all render as
 * "Trays - 12 Pac…" when clipped, so the list showed four rows a buyer could not tell
 * apart. The whole point of the description is to distinguish them.
 */
.poi-main  { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.poi-sku   { font-weight: 600; color: #0f172a; }
.poi-price { font-size: 11px; color: #888; margin-left: 10px; white-space: nowrap; }

/*
 * The dropdown itself, shared by the PO new page, the PO edit page and the SO line
 * editor. It lived in each page's own <style> block, which is how the PO EDIT page
 * ended up referencing .po-item-dropdown while defining no rules for it at all — an
 * unstyled, unscrollable list. One definition here instead.
 */
.po-item-search-wrap,
.so-item-search-wrap { position: relative; }

.po-item-dropdown,
.so-item-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  background: #fff;
  border: 1px solid var(--colour-border, #e0e0e0);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);

  /* WIDER THAN THE COLUMN. The Item column is narrow because Supplier SKU and Qty sit
     beside it; the list is an overlay and has no reason to inherit that width. */
  min-width: 100%;
  width: max-content;
  max-width: min(560px, 92vw);

  /* Tall enough for every row the endpoint will return (12), so the common case needs
     no scrolling at all — the scrollbar was the thing that made this unusable. */
  max-height: min(60vh, 480px);
  overflow-y: auto;
  /* Don't hand the wheel to the page once the list hits its end. */
  overscroll-behavior: contain;
}

.po-item-result,
.so-item-result {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid var(--colour-border, #f0f0f0);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.po-item-result:last-child,
.so-item-result:last-child { border-bottom: none; }
.po-item-result:hover,
.so-item-result:hover { background: var(--colour-hover, #f5f5f5); }

/* "Showing the first N" footer — see po_item_search. Not a result row: no hover, no
   pointer, so it never looks clickable. */
.poi-more {
  padding: 7px 12px;
  font-size: 11px;
  color: #64748b;
  background: #f8fafc;
  border-top: 1px solid var(--colour-border, #f0f0f0);
  cursor: default;
}

/*
 * app.css — Battle-ERP global styles
 *
 * Design tokens are defined as CSS custom properties so they can be referenced
 * consistently across all templates without magic values. The colour palette
 * is derived from the wireframes (Battle_Station_Wireframe_1.0.pdf).
 *
 * Layout: three-column flex layout matching the wireframe exactly:
 *   [primary nav 140px] [secondary nav 160px] [content area flex-1]
 * The secondary nav only appears when a module is active (handled in base.html).
 */

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
  /* Brand colours */
  --colour-accent:        #960019;  /* Red — "Welcome, Name" text, active states */
  --colour-teal:          #960019;  /* Teal — links, action buttons, search button */
  --colour-teal-dark:     #7a0015;  /* Teal hover state */

  /* Layout */
  --colour-sidebar:       #f0f0f0;  /* Both sidebar columns — light grey */
  --colour-sidebar-hover: #e4e4e4;  /* Nav item hover */
  --colour-sidebar-active:#e8e8e8;  /* Active nav item background */
  --colour-content:       #ffffff;  /* Main content area */
  --colour-border:        #dddddd;  /* Subtle dividers */

  /* Typography */
  --colour-text:          #333333;  /* Primary text */
  --colour-text-light:    #888888;  /* Secondary / muted text */
  --colour-text-white:    #ffffff;

  /* Sizing */
  --nav-primary-width:    112px;
  --nav-secondary-width:  160px;
  --header-height:        48px;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  color: var(--colour-text);
  background: var(--colour-content);
}

a {
  color: var(--colour-teal);
  text-decoration: none;
}

a:hover {
  color: var(--colour-teal-dark);
  text-decoration: underline;
}

/* ==========================================================================
   APPLICATION SHELL LAYOUT
   Three columns: [primary nav] [secondary nav] [content]
   ========================================================================== */

.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* --- Primary navigation column --- */

.nav-primary {
  width: var(--nav-primary-width);
  min-width: var(--nav-primary-width);
  background: var(--colour-sidebar);
  border-right: 1px solid var(--colour-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}

.nav-logo {
  padding: 11px 6px 8px;
  border-bottom: 1px solid var(--colour-border);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
}

.nav-logo img {
  max-width: 100px;
  max-height: 90px;
  object-fit: contain;
}

.nav-logo-placeholder {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--colour-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -1px;
}

.nav-primary-items {
  list-style: none;
  padding: 8px 0;
  flex: 1;
}

.nav-primary-items li a {
  display: block;
  padding: 9px 8px 9px 16px;
  color: var(--colour-text);
  font-size: 13px;
  text-decoration: none;
  transition: background 0.1s;
}

.nav-primary-items li a:hover {
  background: var(--colour-sidebar-hover);
  text-decoration: none;
  color: var(--colour-text);
}

/* Active module — the currently selected section */
.nav-primary-items li a.active {
  color: var(--colour-text-light);
  font-weight: 400;
  background: transparent;
}

/* --- Secondary navigation column (module submenu) --- */

.nav-secondary {
  width: var(--nav-secondary-width);
  min-width: var(--nav-secondary-width);
  background: var(--colour-sidebar);
  border-right: 1px solid var(--colour-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}

.nav-secondary-title {
  /* Match --header-height exactly so the bottom border aligns with the
     top bar's bottom border, creating one continuous horizontal rule. */
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--colour-text);
  border-bottom: 1px solid var(--colour-border);
}

.nav-secondary-group {
  list-style: none;
  padding: 8px 0;
  border-bottom: 1px solid var(--colour-border);
}

.nav-secondary-group:last-child {
  border-bottom: none;
}

.nav-secondary-group li a {
  display: block;
  padding: 7px 16px;
  color: var(--colour-text);
  font-size: 13px;
  text-decoration: none;
  transition: background 0.1s;
}

.nav-secondary-group li a:hover {
  background: var(--colour-sidebar-hover);
  text-decoration: none;
  color: var(--colour-text);
}

.nav-secondary-group li a.active {
  color: var(--colour-text-light);
}

/* --- Main content column --- */

.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Top bar: Welcome message + Account/Settings/Sign Out */
.content-header {
  height: var(--header-height);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-content);
  font-size: 13px;
  gap: 4px;
  flex-shrink: 0;
}

.content-header .welcome-name {
  color: var(--colour-accent);
  font-weight: 500;
}

.content-header .header-sep {
  color: var(--colour-border);
  margin: 0 6px;
}

.content-header a {
  color: var(--colour-text);
  text-decoration: none;
}

.content-header a:hover {
  text-decoration: underline;
  color: var(--colour-text);
}

.content-main {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* ==========================================================================
   COMING SOON PLACEHOLDER
   ========================================================================== */

.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: var(--colour-text-light);
  text-align: center;
  gap: 8px;
}

.coming-soon h2 {
  font-size: 18px;
  font-weight: 400;
  color: var(--colour-text-light);
}

.coming-soon p {
  font-size: 13px;
}

/* ==========================================================================
   LOGIN PAGE
   ========================================================================== */

.login-page {
  min-height: 100vh;
  background: var(--colour-sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  background: var(--colour-content);
  border: 1px solid var(--colour-border);
  border-radius: 6px;
  padding: 40px 48px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.login-logo-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--colour-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 26px;
  font-weight: 700;
}

.login-title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 24px;
  color: var(--colour-text);
}

.login-card .form-group {
  margin-bottom: 16px;
}

.login-card label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--colour-text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

/* Text-like fields in a login card.

   DELIBERATELY NOT KEYED ON THE INPUT TYPE — that is the fix, not a shortcut.
   This used to list [type="email"], [type="password"], which missed the 2FA
   wizard's email box completely. That field comes from Django's
   AuthenticationForm, whose UsernameField renders <input type="text"> even
   though USERNAME_FIELD is the email address, so it got none of these rules:
   the browser's ~180px default box with no padding and no radius. Worse, the
   field carries autofocus and the :focus rule below is NOT type-restricted, so
   its border was painted brand red on an untouched form — which reads as a
   validation error rather than a focus ring.

   The widget type is decided by a third-party form, so enumerating types here is
   a selector that silently stops matching when somebody else's code changes.
   Same shape of trap as the one-time-code field being type="number" (see the
   note in two_factor/_base.html).

   :where() adds no specificity, so this stays at one class plus one element.
   That is load-bearing: the 2FA code field needs its own much larger styling,
   and `.tf-code input` is the same specificity in a stylesheet loaded AFTER this
   one, so it still wins on source order. Raising the specificity here would
   flatten the code box back to a normal-sized field. */
.login-card input:where(:not([type="checkbox"]):not([type="radio"]):not([type="submit"])) {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  font-size: 13px;
  color: var(--colour-text);
  background: #fff;
  transition: border-color 0.15s;
  /* Without this, width:100% plus the padding overflows the card's inner edge. */
  box-sizing: border-box;
}

.login-card input:focus {
  outline: none;
  border-color: var(--colour-teal);
}

.btn-login {
  width: 100%;
  padding: 10px;
  background: var(--colour-teal);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.15s;
}

.btn-login:hover {
  background: var(--colour-teal-dark);
}

.login-errors {
  background: #fdf0f0;
  border: 1px solid #f5c6c6;
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--colour-accent);
}

/* ==========================================================================
   CONTACTS MODULE
   ========================================================================== */

.module-title {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  color: var(--colour-text);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--colour-text-light);
  border-bottom: 1px solid var(--colour-border);
}

.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f5f5f5;
  color: var(--colour-text);
}

.data-table tr:hover td {
  background: #fafafa;
}

.data-table a {
  color: var(--colour-teal);
}

.section-card {
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  margin-bottom: 16px;
  overflow: hidden;
}

.section-card-header {
  padding: 10px 16px;
  background: var(--colour-sidebar);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--colour-text-light);
  border-bottom: 1px solid var(--colour-border);
}

.section-card-body {
  padding: 16px;
}

.section-field {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
}

.section-field label {
  width: 120px;
  font-size: 12px;
  font-weight: 500;
  color: var(--colour-text-light);
  flex-shrink: 0;
}

.section-field span {
  color: var(--colour-text);
}

.permission-denied {
  padding: 16px;
  color: var(--colour-text-light);
  font-style: italic;
  font-size: 13px;
}

/* ==========================================================================
   DJANGO MESSAGES
   ========================================================================== */

.messages {
  list-style: none;
  margin-bottom: 16px;
}

.messages li {
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 6px;
}

.messages .success { background: #f0faf0; border: 1px solid #c3e6c3; color: #2d6a2d; }
.messages .error   { background: #fdf0f0; border: 1px solid #f5c6c6; color: var(--colour-accent); }
.messages .warning { background: #fffbf0; border: 1px solid #ffe4a0; color: #7a5f00; }
.messages .info    { background: #f0f8ff; border: 1px solid #b8d8f0; color: #1a4f7a; }

/* ==========================================================================
   ACCOUNT PAGE
   Vertical-scroll layout: Profile → Security → Organizations → Login History
   ========================================================================== */

/* Hero bar at top of account page — avatar + name + title + email */
.acct-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--colour-border);
  border-radius: 6px;
  margin-bottom: 24px;
}

.acct-avatar {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 50%;
  background: var(--colour-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -1px;
}

.acct-hero-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--colour-text);
  line-height: 1.2;
}

.acct-hero-title {
  font-size: 13px;
  color: var(--colour-text-light);
  margin-top: 2px;
}

.acct-hero-email {
  font-size: 12px;
  color: var(--colour-text-light);
  margin-top: 4px;
}

/* Section card */
.acct-section {
  background: #fff;
  border: 1px solid var(--colour-border);
  border-radius: 6px;
  margin-bottom: 20px;
  overflow: hidden;
}

.acct-section--last {
  margin-bottom: 48px;
}

.acct-section-header {
  padding: 16px 28px 14px;
  border-bottom: 1px solid var(--colour-border);
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.acct-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--colour-text);
}

.acct-section-sub {
  font-size: 12px;
  color: var(--colour-text-light);
}

/* Form inside a section */
.acct-form {
  padding: 22px 28px 20px;
}

.acct-form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 18px;
}

.acct-form-row:last-of-type {
  margin-bottom: 0;
}

.acct-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.acct-field label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--colour-text-light);
}

.acct-field input[type="text"],
.acct-field input[type="email"],
.acct-field input[type="tel"],
.acct-field input[type="password"],
.acct-select {
  padding: 8px 11px;
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  font-size: 13px;
  color: var(--colour-text);
  background: #fff;
  transition: border-color 0.15s;
  width: 100%;
  font-family: inherit;
}

.acct-field input:focus,
.acct-select:focus {
  outline: none;
  border-color: var(--colour-teal);
}

/* Locked email field */
.acct-input-locked {
  background: var(--colour-sidebar) !important;
  color: var(--colour-text-light) !important;
  cursor: not-allowed;
}

.acct-field-hint {
  font-size: 11px;
  color: var(--colour-text-light);
}

.acct-form-actions {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--colour-border);
}

/* Buttons */
.acct-btn {
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background 0.15s;
}

.acct-btn--primary {
  background: var(--colour-teal);
  color: #fff;
}

.acct-btn--primary:hover {
  background: var(--colour-teal-dark);
}

/* Subsection label inside Security */
.acct-subsection-label {
  padding: 16px 28px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--colour-text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* MFA card */
.acct-mfa-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 28px 24px;
}

.acct-mfa-icon {
  font-size: 28px;
  line-height: 1;
}

.acct-mfa-text {
  flex: 1;
}

.acct-mfa-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--colour-text);
  margin-bottom: 3px;
}

.acct-mfa-desc {
  font-size: 12px;
  color: var(--colour-text-light);
  line-height: 1.5;
}

/* Badges */
.acct-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.acct-badge--soon {
  background: #f0f0f0;
  color: var(--colour-text-light);
  border: 1px solid var(--colour-border);
}

.acct-badge--on {
  background: #e1f5ee;
  color: #0f6e56;
  border: 1px solid #b8e5d5;
}

/* Role badge in organizations table */
.acct-role-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: #fdf0f2;
  color: var(--colour-teal-dark);
  border: 1px solid #f5c0c6;
}

/* Status pill */
.acct-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.acct-status--active {
  background: #edfbee;
  color: #287030;
}

/* Current company indicator */
.acct-current-badge {
  font-size: 11px;
  color: var(--colour-teal);
  font-weight: 600;
}

/* Link-style button for switch */
.acct-link-btn {
  background: none;
  border: none;
  color: var(--colour-teal);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  padding: 0;
  text-decoration: underline;
}

.acct-link-btn:hover {
  color: var(--colour-teal-dark);
}

/* Tables in account page */
.acct-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.acct-table th {
  text-align: left;
  padding: 10px 28px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--colour-text-light);
  border-bottom: 1px solid var(--colour-border);
}

.acct-table td {
  padding: 12px 28px;
  border-bottom: 1px solid #f5f5f5;
}

.acct-table tr:last-child td {
  border-bottom: none;
}

.acct-table-company {
  font-weight: 500;
}

.acct-table-muted {
  color: var(--colour-text-light);
}

/* Messages */
.acct-message {
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 6px;
}

.acct-message--success {
  background: #f0faf0;
  border: 1px solid #c3e6c3;
  color: #2d6a2d;
}

.acct-message--error {
  background: #fdf0f0;
  border: 1px solid #f5c6c6;
  color: var(--colour-accent);
}

/* Empty state */
.acct-empty {
  padding: 24px 28px;
  color: var(--colour-text-light);
  font-size: 13px;
}

/* Password fields — stacked vertically, not full width */
.acct-password-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 320px;
}

/* ==========================================================================
   SETTINGS PAGE
   ========================================================================== */

.stg-page-header {
  margin-bottom: 24px;
}

.stg-page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--colour-text);
  margin: 0 0 4px;
}

.stg-page-sub {
  font-size: 13px;
  color: var(--colour-text-light);
}

/* Section cards */
.stg-section {
  background: #fff;
  border: 1px solid var(--colour-border);
  border-radius: 6px;
  margin-bottom: 20px;
  overflow: hidden;
}

.stg-section--flush { overflow: visible; }
.stg-section--last  { margin-bottom: 48px; }

.stg-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--colour-border);
}

.stg-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--colour-text);
}

/* Forms */
.stg-form { padding: 20px 24px; }

.stg-form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}

.stg-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stg-field label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--colour-text-light);
}

.stg-field input[type="text"],
.stg-field input[type="email"],
.stg-field input[type="tel"],
.stg-field input[type="password"],
.stg-field select {
  padding: 8px 11px;
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  font-size: 13px;
  color: var(--colour-text);
  background: #fff;
  width: 100%;
  font-family: inherit;
  transition: border-color 0.15s;
}

.stg-field input:focus, .stg-field select:focus {
  outline: none;
  border-color: var(--colour-teal);
}

.stg-field-hint {
  font-size: 11px;
  color: var(--colour-text-light);
}

.stg-form-actions {
  padding-top: 14px;
  border-top: 1px solid var(--colour-border);
  margin-top: 4px;
}

/* Buttons */
.stg-btn {
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.stg-btn--primary {
  background: var(--colour-teal);
  color: #fff;
  border-color: var(--colour-teal);
}
.stg-btn--primary:hover { background: var(--colour-teal-dark); border-color: var(--colour-teal-dark); }

.stg-btn--ghost {
  background: #fff;
  color: var(--colour-text);
  border-color: var(--colour-border);
}
.stg-btn--ghost:hover { background: var(--colour-sidebar); }

.stg-btn--danger {
  background: #fff;
  color: #c0392b;
  border-color: #f5c6c6;
}
.stg-btn--danger:hover { background: #fdf0f0; }

.stg-btn--sm { padding: 5px 12px; font-size: 12px; }

/* Tables */
.stg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.stg-table th {
  text-align: left;
  padding: 10px 24px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--colour-text-light);
  border-bottom: 1px solid var(--colour-border);
}

.stg-table td {
  padding: 12px 24px;
  border-bottom: 1px solid #f5f5f5;
  vertical-align: middle;
}

.stg-table tr:last-child td { border-bottom: none; }
.stg-table-name { font-weight: 500; }
.stg-table-muted { color: var(--colour-text-light); }

.stg-role-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: #fdf0f2;
  color: var(--colour-teal-dark);
  border: 1px solid #f5c0c6;
}

.stg-status--active {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: #edfbee;
  color: #287030;
}

.stg-you-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  background: var(--colour-sidebar);
  color: var(--colour-text-light);
}

.stg-action-cell { white-space: nowrap; }

.stg-action-btn {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  margin-left: 4px;
}
.stg-action-btn--warn {
  background: #fff8f0;
  color: #b05000;
  border-color: #f5d8b0;
}
.stg-action-btn--warn:hover { background: #fff0e0; }
.stg-action-btn--danger {
  background: #fdf0f0;
  color: #c0392b;
  border-color: #f5c6c6;
}
.stg-action-btn--danger:hover { background: #fde0e0; }

.stg-link-btn {
  background: none;
  border: none;
  color: var(--colour-teal);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  padding: 0;
  text-decoration: underline;
}

.stg-empty { color: var(--colour-text-light); font-style: italic; }

/* Sales rep badge — shown in the Sales Rep column when flagged */
.stg-sales-rep-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: #e8f5e9;
  color: #287030;
  border: 1px solid #c3e6c3;
}

/* Inline user edit row */
.stg-edit-row-cell {
  padding: 14px 20px !important;
  background: #f8fafc;
  border-top: 1px dashed var(--colour-border);
  border-bottom: 1px dashed var(--colour-border);
}
.stg-edit-row-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.stg-field--inline {
  flex: none;
}
.stg-field--inline input[type="text"],
.stg-field--inline select {
  width: 135px;
}
/* Checkbox variant inside the inline edit row */
.stg-field--check {
  flex: none;
}
.stg-check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0 7px;
  font-size: 13px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--colour-text);
  cursor: pointer;
}
.stg-check-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--colour-teal);
}
.stg-edit-row-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-bottom: 1px;
  margin-left: auto;
}

/* Permissions panel */
.stg-perm-panel {
  background: var(--colour-sidebar);
  border-top: 1px solid var(--colour-border);
}

.stg-perm-form { padding: 16px 24px; }

.stg-perm-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.stg-perm-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.stg-perm-label {
  width: 140px;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
}

.stg-perm-options { display: flex; gap: 20px; }

.stg-perm-opt {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  cursor: pointer;
}

.stg-perm-actions { padding-top: 12px; border-top: 1px solid var(--colour-border); }

/* Documents & Templates layout */
.stg-templates-layout {
  display: flex;
  min-height: 400px;
}

.stg-cat-sidebar {
  width: 160px;
  min-width: 160px;
  border-right: 1px solid var(--colour-border);
  padding: 12px 0;
  background: var(--colour-sidebar);
}

.stg-cat-item {
  display: block;
  padding: 8px 20px;
  font-size: 13px;
  color: var(--colour-text);
  text-decoration: none;
  transition: background 0.1s;
}
.stg-cat-item:hover { background: var(--colour-sidebar-hover); text-decoration: none; }
.stg-cat-item--active { color: var(--colour-teal); font-weight: 600; }

.stg-template-grid {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-content: flex-start;
}

/* Template card */
.stg-template-card {
  width: 160px;
  border: 1px solid var(--colour-border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
}
.stg-template-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-color: #ccc; }

.stg-template-card--new {
  border: 2px dashed var(--colour-border);
  background: none;
  align-items: center;
  justify-content: center;
  height: 200px;
  gap: 8px;
  color: var(--colour-teal);
}
.stg-template-card--new:hover { border-color: var(--colour-teal); background: #fdf0f2; }

.stg-template-new-icon { font-size: 28px; font-weight: 300; line-height: 1; }
.stg-template-new-label { font-size: 12px; font-weight: 600; }

.stg-template-thumb {
  background: #f8f8f8;
  padding: 12px;
  flex: 1;
}

.stg-template-thumb-inner {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 10px 8px;
  min-height: 130px;
}

/* Simulated document preview lines */
.stg-doc-preview { display: flex; flex-direction: column; gap: 5px; }
.stg-doc-line {
  height: 5px;
  background: #ddd;
  border-radius: 2px;
}
.stg-doc-line--header { height: 8px; background: #bbb; width: 60%; }
.stg-doc-line--short  { width: 45%; }
.stg-doc-block {
  height: 30px;
  background: #f0f0f0;
  border-radius: 2px;
  margin-top: 4px;
}

.stg-template-footer {
  padding: 8px 10px;
  border-top: 1px solid var(--colour-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.stg-template-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--colour-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* Modals */
.stg-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.stg-modal {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
}

.stg-modal--wide { max-width: 720px; }
.stg-modal--sm   { max-width: 400px; }

.stg-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--colour-border);
}

.stg-modal-title { font-size: 16px; font-weight: 600; }

.stg-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--colour-text-light);
  line-height: 1;
  padding: 0;
}
.stg-modal-close:hover { color: var(--colour-text); }

.stg-modal-body { padding: 24px; }

.stg-modal-actions {
  display: flex;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--colour-border);
  margin-top: 4px;
}

/* Template modal extras */
.stg-tmpl-actions-top {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--colour-border);
}

.stg-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stg-file-browse {
  padding: 6px 14px;
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  background: var(--colour-sidebar);
  color: var(--colour-text);
  white-space: nowrap;
}
.stg-file-browse:hover { background: var(--colour-sidebar-hover); }

.stg-file-current {
  font-size: 12px;
  color: var(--colour-text-light);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Email-body editor: placeholder palette + textarea ───────────────────── */
.stg-textarea {
  padding: 9px 11px;
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  font-size: 13px;
  color: var(--colour-text);
  background: #fff;
  width: 100%;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.15s;
}
.stg-textarea:focus {
  outline: none;
  border-color: var(--colour-teal);
}

.stg-ph-palette {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.stg-ph-hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--colour-text-light);
  margin-right: 2px;
}
/* Only one category's group is shown at a time; the inline style sets the
   initial visible group and swapPlaceholderPalette() toggles thereafter. */
.stg-ph-group {
  flex-wrap: wrap;
  gap: 6px;
}
.stg-ph-chip {
  padding: 3px 9px;
  border: 1px solid var(--colour-border);
  border-radius: 12px;
  background: var(--colour-sidebar);
  color: var(--colour-teal);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.stg-ph-chip:hover {
  background: var(--colour-sidebar-hover);
  border-color: var(--colour-teal);
}

/* Recipients toggles */
.stg-recipients-section {
  background: var(--colour-sidebar);
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 14px;
}

.stg-recipients-label {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--colour-text);
}

.stg-recipients-toggles { display: flex; gap: 32px; margin-bottom: 14px; }

.stg-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
}

.stg-toggle-switch { position: relative; display: inline-block; width: 36px; height: 20px; }
.stg-toggle-switch input { opacity: 0; width: 0; height: 0; }
.stg-toggle-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 20px;
  transition: background 0.2s;
}
.stg-toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.stg-toggle-switch input:checked + .stg-toggle-slider { background: var(--colour-teal); }
.stg-toggle-switch input:checked + .stg-toggle-slider::before { transform: translateX(16px); }

/* Coming soon in automation */
.stg-coming-soon {
  padding: 32px 24px;
  color: var(--colour-text-light);
  font-size: 13px;
}

/* ==========================================================================
   COMPANY SWITCHER (header, left side)
   ========================================================================== */

/* Make the header a proper two-sided bar */
.content-header {
  justify-content: space-between !important;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Company name — non-interactive (single company) */
.company-switcher {
  position: relative;
  display: flex;
  align-items: center;
}

.company-switcher__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--colour-text);
}

/* Calendar entry point in the global header, right of the company name.
   In the header rather than only the module rail because the Calendar aggregates
   production, orders and maintenance — people reach it from anywhere. */
.header-calendar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 10px;
  border-radius: 6px;
  color: var(--colour-text-light);
  flex: none;
  transition: background .12s, color .12s;
}
.header-calendar svg { width: 21px; height: 21px; }
.header-calendar:hover {
  background: #f1f5f9;
  color: var(--colour-accent);
}
/* Active state reuses the accent tint pair already used elsewhere in the header. */
.header-calendar--active {
  background: #fdf0f2;
  color: var(--colour-accent);
}

/* Company name button — interactive (multiple companies) */
.company-switcher__btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--colour-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  transition: color 0.15s;
}

.company-switcher__btn:hover {
  color: var(--colour-teal);
}

.company-switcher__caret {
  font-size: 10px;
  color: var(--colour-text-light);
}

/* Dropdown panel */
.company-switcher__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1px solid var(--colour-border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 220px;
  z-index: 500;
  overflow: hidden;
}

.company-switcher__label {
  padding: 8px 14px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--colour-text-light);
  border-bottom: 1px solid var(--colour-border);
}

.company-switcher__option {
  display: block;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--colour-text);
  cursor: pointer;
  transition: background 0.1s;
}

.company-switcher__option:hover {
  background: var(--colour-sidebar);
  color: var(--colour-teal);
}

/* ==========================================================================
   SUPPLIERS / CONTACTS LIST VIEW  (sl- prefix)
   ========================================================================== */

.sl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sl-title {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.sl-toolbar-actions { display: flex; gap: 8px; }

.sl-filterbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.sl-search-input {
  padding: 7px 11px;
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  font-size: 13px;
  width: 220px;
  transition: border-color 0.15s;
}
.sl-search-input:focus { outline: none; border-color: var(--colour-teal); }

/* Dropdown filter select — same height and border as search input */
.sl-filter-select {
  padding: 7px 10px;
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  color: var(--colour-text);
  cursor: pointer;
  height: 34px;
}
.sl-filter-select:focus { outline: none; border-color: var(--colour-teal); }

/* Active filter chip strip — shown below the filterbar when filters are applied */
.sl-active-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: -8px;   /* pull up under the filterbar */
  margin-bottom: 12px;
}

/* Individual removable chip */
.sl-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: #e8f0ff;
  color: #2355a0;
  border: 1px solid #c5d5f5;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.1s;
  line-height: 1.4;
}
.sl-filter-chip:hover { background: #d0e1ff; text-decoration: none; color: #1a3f8a; }
.sl-chip-x { font-size: 14px; line-height: 1; margin-left: 2px; font-weight: 400; }

/* "Clear all filters" chip variant */
.sl-filter-chip--clear {
  background: #f5f5f5;
  color: #666;
  border-color: #ddd;
}
.sl-filter-chip--clear:hover { background: #eee; color: #444; }

/* Muted SKU hyperlink used in table cells (e.g. PO line items) */
.sl-sku-link {
  color: #888;
  font-size: 12px;
  text-decoration: none;
}
.sl-sku-link:hover { color: var(--colour-teal); text-decoration: underline; }

/* Clickable On Order quantity box on inventory detail */
.inv-stock-total-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.inv-stock-total-link:hover {
  color: var(--colour-teal);
  text-decoration: underline;
  cursor: pointer;
}

.sl-filter-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.sl-icon-btn {
  background: none;
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  padding: 6px 9px;
  font-size: 15px;
  cursor: pointer;
  color: var(--colour-text-light);
  transition: background 0.1s, color 0.1s;
}
.sl-icon-btn:hover { background: var(--colour-sidebar); color: var(--colour-text); }

.sl-gear-wrap { position: relative; }

/* Column picker dropdown */
.sl-column-picker {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--colour-border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 200px;
  z-index: 200;
  padding: 8px 0;
}

.sl-column-picker-title {
  padding: 6px 14px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--colour-text-light);
  border-bottom: 1px solid var(--colour-border);
  margin-bottom: 4px;
}

.sl-column-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s;
}
.sl-column-picker-row:hover { background: var(--colour-sidebar); }

/* Table */
.sl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sl-table th, .sl-th-sort {
  text-align: left;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--colour-text-light);
  border-bottom: 2px solid var(--colour-border);
  white-space: nowrap;
}

.sl-th-check { width: 36px; }

.sl-sort-link {
  color: var(--colour-text-light);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.sl-sort-link:hover { color: var(--colour-teal); text-decoration: none; }
.sl-sort-link--active { color: var(--colour-text); }
.sl-sort-idle { opacity: 0.3; }

.sl-row {
  cursor: pointer;
  transition: background 0.1s;
}
.sl-row:hover td { background: #fafafa; }

.sl-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #f5f5f5;
  color: var(--colour-text);
  vertical-align: middle;
}

.sl-td-check { width: 36px; }
.sl-td-name  { font-weight: 500; }

/* Plan tab — run-speed bar + Projected Run Times ------------------------- */
.rt-bar {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 12px 24px; border-bottom: 1px solid var(--colour-border);
}
.rt-bar__title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--colour-text-muted);
}
.rt-bar__field { display: flex; flex-direction: column; gap: 3px; }
.rt-bar__field > label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--colour-text-muted); font-weight: 600;
}
.rt-inline { display: flex; align-items: center; gap: 5px; }
.rt-inline input {
  width: 74px; font-size: 13px; padding: 4px 7px;
  border: 1px solid var(--colour-border); border-radius: 5px;
}
.rt-bar__cans { margin-left: auto; text-align: right; }
.rt-bar__cansval { font-size: 16px; font-weight: 800; color: var(--colour-text); }
.rt-unit { font-size: 11px; color: var(--colour-text-muted); font-weight: 600; }

.rt-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  padding: 16px 24px;
}
@media (max-width: 900px) { .rt-grid { grid-template-columns: repeat(2, 1fr); } }
.rt-cell {
  border: 1px solid var(--colour-border); border-radius: 8px;
  padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 7px;
}
.rt-cell--derived { background: #f0fdf4; border-color: #bbf7d0; }
.rt-cell--total   { background: #eef4ff; border-color: #c7d7f5; }
.rt-cell__label { font-size: 12px; font-weight: 700; color: var(--colour-text); }
.rt-cell__hint {
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--colour-text-muted); margin-left: 4px;
}
.rt-cell__sub { font-size: 10px; color: var(--colour-text-muted); min-height: 12px; }
.rt-cell__derived { font-size: 20px; font-weight: 800; color: #166534; line-height: 1.1; }
.rt-cell__derived--total { color: #1e40af; }

/* CIP requirement controls tucked under the Batching / Startup cells. */
.rt-cip { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--colour-border); font-size: 11px; font-weight: 600;
  color: #334155; cursor: pointer; }
.rt-cip input[type="checkbox"] { width: 14px; height: 14px; flex: none; cursor: pointer; }
.rt-cip__when { margin-top: 5px; width: 100%; font-size: 11px; padding: 3px 5px;
  border: 1px solid var(--colour-border); border-radius: 4px; background: var(--colour-bg);
  color: var(--colour-text); }
.rt-cip__when[data-off] { opacity: .5; }

/* 15-minute stepper */
.rt-stepper { display: flex; align-items: center; gap: 4px; }
.rt-step {
  width: 24px; height: 26px; border: 1px solid var(--colour-border);
  background: #f8fafc; border-radius: 5px; cursor: pointer; font-size: 15px;
  line-height: 1; color: #334155; padding: 0; flex: none;
}
.rt-step:hover { background: #eef2f7; }
.rt-step-input {
  width: 52px; text-align: center; font-size: 13px; padding: 4px 4px;
  border: 1px solid var(--colour-border); border-radius: 5px;
  /* Hide native number spinners — the ± buttons are the control. */
  -moz-appearance: textfield;
}
.rt-step-input::-webkit-outer-spin-button,
.rt-step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Inline checkbox label for new-contact forms (primary → billing contact). */
.ct-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  color: var(--colour-text);
  cursor: pointer;
}
.ct-check-inline input { cursor: pointer; }

/* Inventory batch expansion (Roll up batches off) ------------------------- */
/* Each SKU is a group: the first row carries a heavier top border so a block
   of batch rows reads as one product.  Sub-rows repeat neither SKU nor name;
   the batch number is nudged in so the grouping is obvious at a glance. */
.inv-grp-top > td { border-top: 2px solid #e4e4e4; }
.inv-batch-sub .inv-batch-num {
  color: #666;
  padding-left: 16px;
  position: relative;
}
.inv-batch-sub .inv-batch-num::before {
  content: "└";
  position: absolute;
  left: 2px;
  color: #c9c9c9;
}
.inv-batch-num { color: #333; }

.sl-table a { color: var(--colour-teal); text-decoration: none; }
.sl-table a:hover { text-decoration: underline; }

.sl-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--colour-text-light);
  font-style: italic;
}

/* Status badges */
.sl-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.sl-badge--active      { background: #edfbee; color: #287030; }
.sl-badge--inactive    { background: #f5f5f5; color: #888; }
.sl-badge--hold        { background: #fff8e6; color: #7a5000; }
.sl-badge--tag         { background: #f0f0f0; color: #555; }
.sl-badge--primary     { background: #e8f0ff; color: #2355a0; }
/* Purchase Order status badges */
.sl-badge--draft       { background: #f0f0f0; color: #666; }
.sl-badge--authorized  { background: #e8f0ff; color: #2355a0; }
.sl-badge--partial     { background: #fff3e0; color: #e65c00; }
.sl-badge--received    { background: #edfbee; color: #287030; }
.sl-badge--cancelled   { background: #fdecea; color: #b71c1c; }

.sl-pagination {
  display: flex;
  align-items: center;
  padding: 12px 0;
  font-size: 12px;
  color: var(--colour-text-light);
}

/* Buttons (shared with settings) */
.sl-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.sl-btn--primary { background: var(--colour-teal); color: #fff; border-color: var(--colour-teal); }
.sl-btn--primary:hover { background: var(--colour-teal-dark); color: #fff; text-decoration: none; }
.sl-btn--ghost { background: #fff; color: var(--colour-text); border-color: var(--colour-border); }
.sl-btn--ghost:hover { background: var(--colour-sidebar); text-decoration: none; }
/* Outline variant — the brand action colour without the solid-fill weight.
   Lighter than --primary for row-level actions; fills solid on hover. */
.sl-btn--outline { background: #fff; color: var(--colour-teal); border-color: var(--colour-teal); }
.sl-btn--outline:hover { background: var(--colour-teal); color: #fff; text-decoration: none; }
.sl-btn--sm { padding: 5px 12px; font-size: 12px; }

/* ==========================================================================
   SUPPLIER / CONTACT DETAIL VIEW  (det- prefix)
   ========================================================================== */

.det-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.det-breadcrumb {
  font-size: 13px;
  color: var(--colour-text-light);
  display: flex;
  align-items: center;
  gap: 6px;
}
.det-breadcrumb a { color: var(--colour-teal); text-decoration: none; }
.det-breadcrumb a:hover { text-decoration: underline; }
.det-breadcrumb-sep { color: var(--colour-border); }

.det-header-actions { display: flex; align-items: center; gap: 8px; }

.det-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}
.det-status--active   { background: #edfbee; color: #287030; }
.det-status--inactive { background: #f5f5f5; color: #888; }
.det-status--hold     { background: #fff8e6; color: #7a5000; }

.det-section {
  background: #fff;
  border: 1px solid var(--colour-border);
  border-radius: 6px;
  margin-bottom: 20px;
  overflow: hidden;
}

/*
 * A SECTION THAT HOSTS A TYPE-AHEAD MUST NOT CLIP IT.
 *
 * overflow:hidden above exists so the 6px radius clips child backgrounds. It also
 * guillotines any absolutely-positioned dropdown at the card's edge — and THAT, not a
 * short list, is what made the PO item search unusable: the list was cut off by the
 * card while not being scrollable itself, so the rows past the cut could not be reached
 * by scrolling, dragging or anything else. It simply looked like a four-item catalogue.
 *
 * :has() scopes the exception to the sections that actually contain a search box, so
 * every other card keeps its corner clipping. The dropdown carries z-index 200, so
 * where it now extends past the card it paints over what follows rather than under it.
 */
.det-section:has(.po-item-search-wrap),
.det-section:has(.so-item-search-wrap) {
  overflow: visible;
}

/* Sits directly under a section header to state the BASIS of the numbers below it — the
   Bill of Materials quantities are per one base unit, which is not guessable from a row.
   Quieter than the header so it reads as a caption rather than a second heading. */
.bom-basis {
  padding: 8px 24px 0;
  font-size: 11px;
  color: var(--colour-text-muted, #94a3b8);
}

.det-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 24px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--colour-text);
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-sidebar);
  /* Own border-radius so the section can use overflow:visible when a child
     dropdown needs to escape the box (e.g. BOM component search in edit mode)
     without the header's background bleeding past the section's corners. */
  border-radius: 6px 6px 0 0;
}

.det-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  padding: 20px 24px;
}

.det-info-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.det-info-field label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--colour-text-light);
}

.det-info-field span, .det-info-field a {
  font-size: 13px;
  color: var(--colour-text);
}
.det-info-field a { color: var(--colour-teal); }

/* Inline forms in detail sections */
.det-inline-form {
  padding: 16px 24px;
  background: #fafafa;
  border-bottom: 1px solid var(--colour-border);
}

.det-form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

/* Responsive multi-column grid for detail edit forms — mirrors .det-info-grid
   (view mode) so edit mode fills three columns instead of two flex fields. */
.det-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px 16px;
}

.det-form-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}

.det-form-field label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--colour-text-light);
}

.det-input {
  padding: 7px 10px;
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  font-size: 13px;
  color: var(--colour-text);
  background: #fff;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.15s;
}
.det-input:focus { outline: none; border-color: var(--colour-teal); }

.det-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

/* Notes */
.det-note-compose { padding: 16px 24px; border-bottom: 1px solid var(--colour-border); }
.det-note-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}
.det-note-input:focus { outline: none; border-color: var(--colour-teal); }

.det-notes { padding: 8px 0; }

.det-note {
  padding: 14px 24px;
  border-bottom: 1px solid #f5f5f5;
}
.det-note:last-child { border-bottom: none; }

.det-note-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 12px;
}
.det-note-author { font-weight: 600; color: var(--colour-text); }
.det-note-date   { color: var(--colour-text-light); }
.det-note-body   { font-size: 13px; color: var(--colour-text); line-height: 1.5; }

/* ==========================================================================
   DETAIL VIEW — EDIT MODE TOGGLE
   CSS-driven: adding .detail-edit-mode to #detail-root flips visibility.
   ========================================================================== */

/* View mode: hide edit-only elements */
.detail-view-mode .edit-only { display: none !important; }

/* Edit mode: hide view-only elements */
.detail-edit-mode .view-only { display: none !important; }

/* Edit mode delete buttons — hidden by default, shown via body class */
.edit-mode-btn  { display: none; }
.edit-mode-col  { width: 80px; }

body.in-edit-mode .edit-mode-btn { display: inline-flex; }

/* Delete buttons in partials */
.det-del-btn {
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: #fdf0f0;
  color: #c0392b;
  border: 1px solid #f5c6c6;
  transition: background 0.1s;
}
.det-del-btn:hover { background: #fde0e0; }

/* Neutral row-action button (Edit / Make Preferred) next to the red Remove */
.det-edit-btn {
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  transition: background 0.1s;
}
.det-edit-btn:hover { background: #e2e8f0; }

/* Checkbox in edit form */
.det-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
}

/* Delete supplier zone at bottom of detail page */
.det-delete-zone {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0 40px;
  border-top: 1px solid var(--colour-border);
  margin-top: 8px;
}

.det-delete-btn {
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  color: #c0392b;
  border: 1px solid #f5c6c6;
  transition: background 0.15s;
  white-space: nowrap;
}
.det-delete-btn:hover { background: #fdf0f0; }

.det-delete-hint {
  font-size: 12px;
  color: var(--colour-text-light);
}

/* Fix: edit-only elements are hidden by default regardless of parent class.
   enterEditMode() adds in-edit-mode to <body> which makes them visible.
   This handles elements outside #detail-root (e.g. header buttons). */
.edit-only { display: none !important; }
body.in-edit-mode .edit-only { display: inline-flex !important; }
body.in-edit-mode .view-only { display: none !important; }
/* Edit-only elements that are full-width blocks (e.g. a detail edit form with a
   multi-column grid) rather than inline controls — higher specificity so they
   fill their container instead of shrinking to content. */
body.in-edit-mode .edit-only.edit-block { display: block !important; }

/* Read-only display field that looks like an input (used for Balance Due in edit mode) */
.det-input--locked {
  display: block;
  padding: 7px 10px;
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  font-size: 13px;
  color: var(--colour-text-light);
  background: var(--colour-sidebar);
}

/* Inline row edit — Edit button and edit form styling */
.det-edit-btn {
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: #f0f5ff;
  color: #2355a0;
  border: 1px solid #c8d8f5;
  margin-right: 4px;
  transition: background 0.1s;
}
.det-edit-btn:hover { background: #e0eaff; }

.inline-edit-row td { background: #fafafa; }

.inline-edit-form {
  padding: 12px 16px;
  border-top: 2px solid var(--colour-teal);
}

.inline-edit-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
}

.inline-edit-fields .det-input {
  flex: 1;
  min-width: 80px;
}

.inline-edit-actions {
  display: flex;
  gap: 8px;
}

/* Delete Supplier zone — only visible in edit mode */
.det-delete-zone {
  display: none;
}
body.in-edit-mode .det-delete-zone {
  display: flex;
}

/* Edit + Remove buttons side by side in table rows */
.row-action-btns {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: nowrap;
}

/* ==========================================================================
   PIPELINE KANBAN STRIP
   Inspired by modern CRM pipeline views (Pipedrive / Close.com style).
   Compact summary cards — each stage shows deal count, total value,
   and a proportional fill bar. Clicking a card filters the list below.
   ========================================================================== */

.kb-strip {
  display: flex;
  gap: 12px;
  margin-bottom: 4px;
}

.kb-card {
  flex: 1;
  background: #fff;
  border: 1px solid var(--colour-border);
  border-radius: 8px;
  padding: 14px 16px 10px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
  position: relative;
  overflow: hidden;
  /* Colored top accent bar */
  border-top: 3px solid var(--stage-color, #ccc);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 130px;
}

.kb-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  border-color: var(--stage-color, #ccc);
  transform: translateY(-1px);
  text-decoration: none;
  color: inherit;
}

.kb-card--active {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  background: #fafafa;
}

.kb-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.kb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kb-stage-name {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--colour-text-light);
}

.kb-count {
  font-size: 22px;
  font-weight: 700;
  color: var(--colour-text);
  line-height: 1.1;
}

.kb-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--colour-text-light);
  flex: 1;
}

.kb-empty-val { color: #ccc; }

/* Proportion bar at the bottom of each card */
.kb-bar-track {
  height: 4px;
  background: #f0f0f0;
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.kb-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
  min-width: 2px;
}

/* Stage chip in list table */
.kb-stage-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c, #666);
  background: color-mix(in srgb, var(--c, #666) 12%, white);
  border: 1px solid color-mix(in srgb, var(--c, #666) 25%, white);
}

/* Weighted probability in Kanban card header — right justified, same size as stage name */
.kb-prob {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--colour-text-light);
  letter-spacing: 0.3px;
}

/* Reminder chips — upcoming reminders shown above the notes compose box */
.reminder-chips {
  padding: 10px 24px;
  background: #fffdf0;
  border-bottom: 1px solid #f5e8a0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reminder-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.reminder-chip-icon { font-size: 13px; }

.reminder-chip-date {
  font-weight: 600;
  color: var(--colour-text);
}

.reminder-chip-note {
  color: var(--colour-text-light);
  flex: 1;
}

.reminder-chip-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #b08000;
  background: #fff3c0;
  border: 1px solid #f5e080;
  padding: 1px 7px;
  border-radius: 8px;
  white-space: nowrap;
}

/* ==========================================================================
   ATTACHMENT GRID — card-based file previews
   ========================================================================== */

.attach-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 24px;
}

.attach-card {
  display: flex;
  flex-direction: column;
  width: 140px;
  border: 1px solid var(--colour-border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.15s;
}

.attach-card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Preview area — image thumbnail or icon */
.attach-preview {
  display: block;
  height: 96px;
  background: var(--colour-sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  overflow: hidden;
  border-bottom: 1px solid var(--colour-border);
}

.attach-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* File type icon cards */
.attach-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
}

.attach-icon-svg {
  width: 32px;
  height: 32px;
  opacity: 0.6;
}

.attach-icon-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  color: #fff;
}

.attach-icon--pdf   { color: #c0392b; }
.attach-icon--pdf   .attach-icon-label  { background: #c0392b; }
.attach-icon--word  { color: #2355a0; }
.attach-icon--word  .attach-icon-label  { background: #2355a0; }
.attach-icon--excel { color: #287030; }
.attach-icon--excel .attach-icon-label  { background: #287030; }
.attach-icon--file  { color: #666; }
.attach-icon--file  .attach-icon-label  { background: #666; }

/* File name + metadata below the preview */
.attach-info {
  padding: 8px 10px 6px;
  flex: 1;
}

.attach-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--colour-text);
  text-decoration: none;
  line-height: 1.3;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attach-name:hover { color: var(--colour-teal); text-decoration: underline; }

.attach-desc {
  font-size: 11px;
  color: var(--colour-text-light);
  margin-bottom: 4px;
  line-height: 1.3;
}

.attach-meta {
  font-size: 10px;
  color: var(--colour-text-light);
}

/* Actual uploaded filename, shown under the size·date line */
.attach-filename {
  font-size: 11px;
  color: var(--colour-text-light);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Associated variant tag on an attachment card */
.attach-variant {
  font-size: 11px;
  font-weight: 600;
  color: #2b7a72;
  margin-top: 2px;
}

/* Edit mode action buttons below each card */
.attach-actions {
  padding: 6px 8px;
  border-top: 1px solid var(--colour-border);
  background: #fafafa;
  justify-content: center;
}

/* Set Primary button — star accent, edit mode only */
.det-primary-btn {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: #fffbea;
  color: #8a6500;
  border: 1px solid #f5e090;
  transition: background 0.1s;
  white-space: nowrap;
}
.det-primary-btn:hover { background: #fff3c0; }

/* ==========================================================================
   INVENTORY — general item detail
   ========================================================================== */

.inv-general-view {
  display: flex;
  gap: 24px;
  padding: 20px 24px;
  align-items: flex-start;
}

.inv-image-area {
  flex-shrink: 0;
}

.inv-item-image {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border: 1px solid var(--colour-border);
  border-radius: 6px;
  background: var(--colour-sidebar);
}

.inv-image-placeholder {
  width: 120px;
  height: 120px;
  border: 1px dashed var(--colour-border);
  border-radius: 6px;
  background: var(--colour-sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--colour-text-light);
}

.inv-general-fields { flex: 1; }

.inv-edit-with-image {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.inv-image-edit {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 120px;
}

/* Stock totals bar */
.inv-stock-totals {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-sidebar);
}

.inv-stock-total-item {
  flex: 1;
  padding: 14px 20px;
  border-right: 1px solid var(--colour-border);
  text-align: center;
}
.inv-stock-total-item:last-child { border-right: none; }

.inv-stock-total-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--colour-text-light);
  margin-bottom: 4px;
}

.inv-stock-total-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--colour-text);
}

.inv-stock-placeholder {
  color: var(--colour-text-light);
  font-size: 16px;
}

/* Clone From — dimension picker in Dimensions/Units edit section */
.inv-clone-wrap { position: relative; }

.inv-clone-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--colour-text-light);
  margin-bottom: 6px;
}

.inv-clone-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--colour-border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 300;
  overflow: hidden;
}

.inv-clone-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--colour-border);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.1s;
}
.inv-clone-option:last-child { border-bottom: none; }
.inv-clone-option:hover { background: var(--colour-sidebar); }

.inv-clone-sku {
  font-weight: 700;
  color: var(--colour-text);
  white-space: nowrap;
  min-width: 80px;
}

.inv-clone-name {
  color: var(--colour-text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-clone-dims {
  font-size: 11px;
  color: var(--colour-text-light);
  white-space: nowrap;
}

/* ==========================================================================
   UNITS OF MEASURE — UOM table view + edit grid
   ========================================================================== */

/* Type chips */
.uom-type-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.uom-type-base        { background: #e8f0ff; color: #2355a0; }
.uom-type-middle      { background: #fff0e8; color: #8a4000; }
.uom-type-pallet      { background: #f0ffe8; color: #287030; }
.uom-type-alternative { background: #f8f8f8; color: #666; border: 1px solid #ddd; }

/* Alternative unit row in view table — slightly muted */
.uom-alt-row { opacity: 0.75; }

/* Edit grid — 7 columns matching the table */
.uom-edit-grid {
  display: grid;
  grid-template-columns: 145px minmax(120px, 300px) 120px 110px 90px 90px 90px;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.uom-edit-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--colour-text-light);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--colour-border);
}

.uom-alt-edit-row {
  padding: 8px 0 4px;
  border-top: 1px dashed var(--colour-border);
  margin-top: 4px;
}

/* Multi-unit conversions in the stock totals bar */
.inv-uom-name {
  font-size: 10px;
  font-weight: 400;
  color: var(--colour-text-light);
  text-transform: none;
  letter-spacing: 0;
}

.inv-uom-convert {
  font-size: 11px;
  color: var(--colour-text-light);
  margin-top: 2px;
  font-weight: 400;
}

/* UOM edit container — always visible when the section is open,
   independent of the page-level edit mode toggle */
.uom-edit-container {
  display: none;  /* hidden until edit mode */
}
body.in-edit-mode .uom-edit-container {
  display: block;
}

/* Bill of Materials — edit container (same show/hide pattern as uom-edit-container) */
.bom-edit-container {
  display: none;
}
body.in-edit-mode .bom-edit-container {
  display: block;
}

/* Product Specifications — edit container */
.pspec-edit-container {
  display: none;
}
body.in-edit-mode .pspec-edit-container {
  display: block;
}

/* Two-panel wrapper: QC left, Micro right */
.pspec-panels {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.pspec-panel-qc    { flex: 3; min-width: 0; }
.pspec-panel-micro { flex: 1.4; min-width: 160px; }

/* Shared column header style — matches uom-edit-header */
.pspec-col-head {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--colour-text-light);
  padding: 0 6px 4px 0;
  border-bottom: 1px solid var(--colour-border);
  white-space: normal;
  line-height: 1.3;
}

/* QC table: name | status | range — using flex rows for reliable column alignment */
.pspec-qc-table { font-size: 13px; }
.pspec-qc-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}
.pspec-qc-row:last-child { border-bottom: none; }
.pspec-qc-col-test {
  flex: 1;
  min-width: 0;
  padding: 5px 8px 5px 2px;
}
.pspec-qc-col-status {
  width: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 4px;
}
.pspec-qc-col-range {
  width: 150px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 4px;
}
/* Header row */
.pspec-qc-row--header .pspec-qc-col-test,
.pspec-qc-row--header .pspec-qc-col-status,
.pspec-qc-row--header .pspec-qc-col-range {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--colour-text-light);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--colour-border);
}
/* Micro grid: name | checkbox */
.pspec-micro-grid {
  display: grid;
  /* Test · Req. · Per batch — the third column says whether the test is taken once per
     batch (kit) or once for the whole run. */
  grid-template-columns: 1fr 44px 70px;
  gap: 0;
  font-size: 13px;
}

/* Shared cell */
.pspec-cell {
  padding: 5px 6px 5px 2px;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
}
.pspec-cell:last-child { border-bottom: none; }
.pspec-cell--center { justify-content: center; }
.pspec-cell--muted  { color: #bbb; }

/* Section title row inside a panel */
.pspec-panel-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--colour-text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

/* Included / selected badges */
.pspec-included {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: #e8f5e9;
  color: #2e7d32;
  white-space: nowrap;
}
.pspec-check {
  color: #27AE60;
  font-size: 15px;
  font-weight: 700;
}
.pspec-dash { color: #ccc; font-size: 14px; }

/* Range display: "21.65 – 23.95" */
.pspec-range {
  font-size: 12px;
  color: var(--colour-text);
  white-space: nowrap;
}
.pspec-range--empty { color: #ccc; }

/* Edit-mode checkbox alignment */
.pspec-cb-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.pspec-cb-wrap input[type=checkbox] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--colour-primary, #2355a0);
}

/* Compact range input pair */
.pspec-range-inputs {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
}
.pspec-range-inputs input {
  width: 46px;
  padding: 3px 5px;
  font-size: 12px;
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  text-align: right;
}
.pspec-range-inputs .pspec-sep {
  color: #aaa;
  font-size: 11px;
  flex-shrink: 0;
}

/* Allow the BOM section's component search dropdown to escape the section box.
   Only active in edit mode so the rounded-box appearance is preserved in view
   mode. The det-section-header has its own border-radius so its corners stay
   sharp even when the parent overflow is visible. */
body.in-edit-mode .det-section--bom {
  overflow: visible;
}

/* BOM component search dropdown — appears below the search input in each row */
.bom-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  z-index: 200;
  max-height: 220px;
  overflow-y: auto;
}
.bom-search-item {
  display: block;
  width: 100%;
  padding: 7px 12px;
  background: none;
  border: none;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  color: var(--colour-text);
  line-height: 1.4;
}
.bom-search-item:last-child { border-bottom: none; }
.bom-search-item:hover { background: #f5f5f5; }

/* View mode rows — same grid, text instead of inputs */
.uom-view-row {
  padding: 6px 0;
  border-bottom: 1px solid #f5f5f5;
}
.uom-view-row:last-child { border-bottom: none; }

.uom-view-val {
  font-size: 13px;
  color: var(--colour-text);
  padding: 2px 0;
}

.uom-alt-view-row { opacity: 0.75; }
.uom-edit-header-row { margin-bottom: 6px; }

/* ==========================================================================
   BRAND TAGS
   ========================================================================== */

.brand-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--colour-text-light);
  margin-bottom: 8px;
  margin-top: 4px;
}

.brand-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.brand-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #fdf0f2;
  border: 1px solid #f5c0c6;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--colour-teal-dark);
}

.brand-tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--colour-text-light);
  font-size: 11px;
  padding: 0;
  line-height: 1;
  transition: color 0.1s;
}
.brand-tag-remove:hover { color: var(--colour-teal); }

.brand-tag-empty {
  font-size: 12px;
  color: var(--colour-text-light);
  font-style: italic;
}

/* Brand search dropdown (inventory forms) */
.brand-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--colour-border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 300;
  overflow: hidden;
}

.brand-search-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 14px;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--colour-border);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.1s;
}
.brand-search-option:last-child { border-bottom: none; }
.brand-search-option:hover { background: var(--colour-sidebar); }

.brand-search-name { font-weight: 600; color: var(--colour-text); }
.brand-search-customer { font-size: 11px; color: var(--colour-text-light); }

/* Reusable brand picker — results container is the positioning anchor's child */
.bp-results { position: relative; }

/* "Add New Brand" row — the sole, deliberately-distinct create affordance */
.brand-search-option--add {
  display: block;
  font-weight: 600;
  color: var(--colour-teal, #2b7a72);
  background: #f4faf9;
}
.brand-search-option--add:hover { background: #e0f2f1; }

.brand-search-empty {
  padding: 9px 14px;
  font-size: 12px;
  color: var(--colour-text-light);
  border-bottom: 1px solid var(--colour-border);
}

/* Near-duplicate confirm panel shown before creating a look-alike brand */
.bp-confirm__head {
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #7a6b00;
  background: #fffbea;
  border-bottom: 1px solid var(--colour-border);
}

/* Battle Ops logo — nav sidebar */
.nav-logo-img {
  width: 104px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Login page logo — larger than sidebar */
.login-logo-img {
  width: 140px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Inline brand field — edit mode row with input + red + button */
.brand-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.brand-add-form {
  display: flex;
  gap: 4px;
  align-items: center;
}

.brand-add-input {
  width: 160px !important;
  padding: 6px 10px !important;
}

.brand-add-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--colour-teal);
  color: #fff;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  transition: background 0.15s;
  flex-shrink: 0;
}
.brand-add-btn:hover { background: var(--colour-teal-dark); }

/* Compact brand chip used inline */
.brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #fdf0f2;
  border: 1px solid #f5c0c6;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #7a0015;
  white-space: nowrap;
}

.brand-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: #c0392b;
  font-size: 11px;
  padding: 0;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.1s;
}
.brand-chip-remove:hover { opacity: 1; }

/* Read-only hint under locked fields in contact edit forms */
.det-field-hint {
  font-size: 10px;
  color: var(--colour-text-light);
  margin-top: 3px;
  display: block;
}

/* ==========================================================================
   LOCATIONS — Warehouse / Zone / Bin tree in Settings
   ========================================================================== */

.loc-warehouse {
  background: #fff;
  border: 1px solid var(--colour-border);
  border-radius: 8px;
  border-left: 4px solid var(--colour-teal);
  margin-bottom: 16px;
  overflow: hidden;
}

.loc-warehouse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--colour-sidebar);
  border-bottom: 1px solid var(--colour-border);
}

.loc-warehouse-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
}

.loc-wh-icon { font-size: 16px; }
.loc-zone-icon { font-size: 13px; }

.loc-code-chip {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--colour-teal);
  color: #fff;
  padding: 1px 7px;
  border-radius: 8px;
}

.loc-actions { display: flex; gap: 6px; }

.loc-edit-btn {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  color: var(--colour-text);
  transition: background 0.1s;
}
.loc-edit-btn:hover { background: var(--colour-sidebar-hover); }

.loc-del-btn {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background: #fdf0f0;
  border: 1px solid #f5c6c6;
  border-radius: 4px;
  color: #c0392b;
}
.loc-del-btn:hover { background: #fde0e0; }

.loc-save-btn {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--colour-teal);
  color: #fff;
  border: none;
  border-radius: 4px;
}

.loc-cancel-btn {
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  background: none;
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  color: var(--colour-text-light);
}

.loc-inline-input {
  padding: 4px 8px;
  border: 1px solid var(--colour-teal);
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  width: 200px;
  outline: none;
}

/* Zones */
.loc-zones-wrap { padding: 0; }

.loc-zone {
  padding: 12px 18px 12px 44px;
  border-bottom: 1px solid #f5f5f5;
}
.loc-zone:last-of-type { border-bottom: none; }

.loc-zone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.loc-zone-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  color: #2355a0;
  cursor: default;
}
/* System-managed zone (manufacturing staging / quality hold): a small indigo pill
   marking it as provisioned + protected by the system, with no edit/delete actions. */
.loc-sys-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: #3730a3;
  background: #e0e7ff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  padding: 1px 8px;
  white-space: nowrap;
}
.loc-sys-note { font-size: 11px; color: #94a3b8; font-style: italic; }

/* Bins as chips */
.loc-bins {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.loc-bin-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.loc-bin-icon { font-size: 11px; }

.loc-bin-del {
  background: none;
  border: none;
  cursor: pointer;
  color: #c0392b;
  font-size: 11px;
  opacity: 0.5;
  padding: 0;
  line-height: 1;
}
.loc-bin-del:hover { opacity: 1; }

.loc-add-bin-form {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.loc-bin-input {
  width: 100px;
  padding: 3px 7px;
  border: 1px dashed var(--colour-border);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  color: var(--colour-text-light);
  background: transparent;
  transition: border-color 0.15s;
}
.loc-bin-input:focus {
  outline: none;
  border-color: var(--colour-teal);
  border-style: solid;
  color: var(--colour-text);
}

.loc-bin-add-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--colour-teal);
  color: #fff;
  border: none;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loc-add-zone-row {
  padding: 10px 18px 10px 44px;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
}

.loc-add-warehouse-row {
  margin-top: 8px;
  padding: 12px 0;
}

.loc-add-form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.loc-empty-zone, .loc-no-warehouses {
  padding: 12px 18px 8px 44px;
  font-size: 12px;
  color: var(--colour-text-light);
  font-style: italic;
}

/* Maintenance locations — compact responsive grid (3–4 across) instead of one
   full-width card per location, which wasted horizontal space. */
.mloc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin: 4px 0 12px;
  /* Cap the total width so it settles at 3–4 columns rather than sprawling
     across ultra-wide screens; reflows to 2/1 as the panel narrows. */
  max-width: 980px;
}
.mloc-card {
  background: #fff;
  border: 1px solid var(--colour-border);
  border-left: 4px solid var(--colour-teal);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mloc-card-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  word-break: break-word;
  min-height: 20px;
}
.mloc-card-actions { display: flex; gap: 6px; }

/* ── Pallet tracking section ─────────────────────────────────────────────── */
.pallet-section {
  padding: 0 24px 24px;
  border-top: 1px solid #f0f0f0;
  margin-top: 8px;
}
.pallet-action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 16px;
}
.pallet-action-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #888;
  margin-right: 4px;
}
.pallet-batch-group {
  margin-bottom: 24px;
}
.pallet-batch-header {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  margin-bottom: 12px;
  color: #222;
}
.pallet-batch-header span {
  font-weight: 400;
  color: #888;
  font-size: 12px;
  margin-left: 8px;
}
.pallet-zones-row {
  display: flex;
  gap: 0;
}
.pallet-zone-col {
  flex: 1;
  padding: 0 20px 0 0;
  border-right: 1px solid #ebebeb;
  margin-right: 20px;
}
.pallet-zone-col:last-child {
  border-right: none;
  margin-right: 0;
}
.pallet-zone-label {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
  font-style: italic;
}
.pallet-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Individual pallet card */
.pallet-card {
  position: relative;
  cursor: pointer;
  width: 56px;
  user-select: none;
  -webkit-user-select: none;
}
.pallet-icon {
  /* Files are 112×166 px (2× retina source). Display at exactly half so
     retina screens map 1:1 physical pixel with no interpolation blur. */
  width: 56px;
  height: 83px;
  display: block;
  transition: transform 0.1s ease;
}
.pallet-card:hover .pallet-icon {
  transform: translateY(-2px);
}
.pallet-card.pallet-selected .pallet-icon {
  filter: drop-shadow(0 0 4px rgba(192, 57, 43, 0.6));
}

/* Selection checkmark overlay */
.pallet-checkmark {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  background: #c0392b;
  border-radius: 50%;
  color: white;
  font-size: 11px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.pallet-card.pallet-selected .pallet-checkmark {
  display: flex;
}

/* Quality Hold badge — mirrors the selection checkmark (same circular overlay),
   but always visible and coloured by hold type via an inline background. Sits on
   the LEFT so it never collides with the right-hand selection checkmark. */
.pallet-hold-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 0 2px #fff;
}
/* Held pallets are quarantined — dim slightly and show a not-allowed cursor so it
   reads as non-selectable. Server-side guards enforce this regardless. */
.pallet-card.pallet-on-hold { cursor: not-allowed; }
.pallet-card.pallet-on-hold .pallet-icon { opacity: .55; }

/* MJ-staged pallets are locked for production — same non-selectable treatment as
   a hold. A medium-grey padlock badge marks them; server-side guards enforce it. */
.pallet-card.pallet-mj-staged { cursor: not-allowed; }
.pallet-card.pallet-mj-staged .pallet-icon { opacity: .55; }
.pallet-staged-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #6b7280;              /* medium grey — quieter than the QH type colours */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 0 0 2px #fff;       /* same white ring as the QH "!" badge */
}

/* Quantity label below icon */
.pallet-qty-box {
  text-align: center;
  font-size: 10px;
  color: #666;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Hover card */
.pallet-hover-card {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 14px;
  min-width: 190px;
  max-width: 220px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  z-index: 200;
  pointer-events: none;
  white-space: nowrap;
}
.pallet-card:hover .pallet-hover-card {
  display: block;
}
.phc-name {
  font-weight: 700;
  font-size: 12px;
  color: #222;
  margin-bottom: 2px;
  white-space: normal;
}
.phc-qty {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 8px;
}
.phc-detail {
  font-size: 11px;
  color: #888;
  line-height: 1.7;
}
/* Ensure pallet section doesn't clip hover cards */
.det-section:has(.pallet-section) {
  overflow: visible;
}

/* ===========================================================================
   MJ PICK TAB — accordion cards for ingredient and packaging picking
   =========================================================================== */

.mj-pick-card {
  border-bottom: 1px solid var(--colour-border, #e0e0e0);
}
.mj-pick-card:last-child {
  border-bottom: none;
}

.mj-pick-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}
.mj-pick-card-header:hover {
  background: #fafafa;
}
.mj-pick-card--done .mj-pick-card-header {
  background: #f4faf4;
}
.mj-pick-card--done .mj-pick-card-header:hover {
  background: #edf6ed;
}

.mj-pick-card-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mj-pick-card-sku {
  font-weight: 400;
  font-size: 12px;
  color: #888;
}

.mj-pick-card-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: #555;
}

.mj-pick-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: #f0f0f0;
  color: #666;
}
.mj-pick-badge--ok {
  background: #d6f0d8;
  color: #287030;
}

.mj-pick-card-chevron {
  font-size: 10px;
  color: #aaa;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.mj-pick-action-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}

.mj-pick-staged-bar {
  padding: 10px 20px 14px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}
.mj-pick-staged-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #aaa;
  letter-spacing: .05em;
  margin-bottom: 8px;
}
.mj-pick-staged-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f0f8f0;
  border: 1px solid #c3e6c3;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
}

/* ===========================================================================
   COMPANY ADDRESSES (Settings → Addresses section)
   =========================================================================== */

.addr-type-group {
  margin-bottom: 28px;
}
.addr-type-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #888;
  margin-bottom: 12px;
}
.addr-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.addr-card {
  background: #fff;
  border: 1px solid var(--colour-border, #e0e0e0);
  border-radius: 8px;
  padding: 14px 16px;
  min-width: 260px;
  max-width: 360px;
  flex: 1 1 260px;
}
.addr-card--editing {
  max-width: 100%;
  flex: 1 1 100%;
  padding: 20px 24px;
}
.addr-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.addr-card-title {
  font-weight: 600;
  font-size: 14px;
  color: #1a1a2e;
  display: flex;
  align-items: center;
  gap: 8px;
}
.addr-default-badge {
  font-size: 10px;
  font-weight: 600;
  background: #e8f0ff;
  color: #2355a0;
  border-radius: 4px;
  padding: 2px 7px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.addr-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.addr-contact-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  font-size: 12px;
  color: #555;
  margin-bottom: 6px;
}
.addr-contact-line span::before {
  content: '';
}
.addr-address-lines {
  font-size: 12px;
  color: #777;
  line-height: 1.6;
}

/* Address forms */
.addr-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.addr-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.addr-form-row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.addr-form-row--4 {
  grid-template-columns: 2fr 1fr 1fr 1fr;
}
.addr-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.addr-field label {
  font-size: 12px;
  font-weight: 600;
  color: #555;
}
.addr-field input,
.addr-field select {
  border: 1px solid var(--colour-border, #e0e0e0);
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 13px;
  color: #222;
  background: #fff;
  width: 100%;
}
.addr-field input:focus,
.addr-field select:focus {
  outline: none;
  border-color: var(--colour-primary, #2355a0);
}
.addr-field--sm {
  max-width: 180px;
}
.addr-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  color: #333;
  cursor: pointer;
  margin-top: 2px;
}
.addr-form-actions {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}
.addr-add-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--colour-border, #e8e8e8);
}
.addr-add-toggle-row {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.addr-new-form-wrap {
  background: #f9fafb;
  border: 1px solid var(--colour-border, #e0e0e0);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}
.addr-new-form-header {
  font-weight: 600;
  font-size: 13px;
  color: #333;
  margin-bottom: 14px;
}

/* PO form address display panel */
.po-addr-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 16px 24px 20px;
}
.po-addr-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.po-addr-block label {
  font-size: 12px;
  font-weight: 600;
  color: #555;
}
.po-addr-preview {
  background: #f9fafb;
  border: 1px solid var(--colour-border, #e0e0e0);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  color: #555;
  line-height: 1.7;
  min-height: 72px;
}
.po-addr-preview strong {
  display: block;
  color: #222;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}
/* Draft order-number override shown in the New PO / New SO header. The number
   is burgundy with a subtle pencil; clicking reveals the override input. */
.ord-num-override { display: flex; align-items: center; gap: 6px; }
.ord-num-value { color: #960019; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.ord-num-edit, .ord-num-revert {
  border: none; background: none; cursor: pointer; color: #960019;
  font-size: 13px; padding: 2px 4px; border-radius: 4px; line-height: 1;
}
.ord-num-edit:hover, .ord-num-revert:hover { background: #fbe9ec; }
.ord-num-edit-wrap { display: inline-flex; align-items: center; gap: 4px; }
.ord-num-input { width: 150px; font-size: 13px; padding: 4px 8px; }

/* New PO/SO line-item tables: tighter column gaps to fit the extra columns,
   a right-aligned line Total, and a compact delete button. Id-scoped so other
   .sl-table instances are unaffected. */
#po-lines-table th, #po-lines-table td,
#so-lines-table th, #so-lines-table td { padding-left: 5px; padding-right: 5px; }
#po-lines-table th:first-child, #po-lines-table td:first-child,
#so-lines-table th:first-child, #so-lines-table td:first-child { padding-left: 0; }
#po-lines-table th:last-child, #po-lines-table td:last-child,
#so-lines-table th:last-child, #so-lines-table td:last-child { padding-right: 0; }
.ord-line-total, .so-line-total {
  text-align: right; font-variant-numeric: tabular-nums;
  color: #1e293b; font-weight: 600; white-space: nowrap;
}
.ord-line-del {
  border: none; background: none; cursor: pointer; color: #b91c1c;
  font-size: 16px; line-height: 1; padding: 2px 5px; border-radius: 4px;
}
.ord-line-del:hover { background: #fee2e2; }

/* Read-only pallet cards (Receive/Pick review): not clickable, no selection. */
.pallet-card.pallet-readonly { cursor: default; }
.pallet-card.pallet-readonly .pallet-checkmark { display: none; }

/* Remove the up/down spinners on Qty / Unit Cost number inputs in PO/SO line
   tables (new + edit) — they add hover clutter and aren't useful here. */
#po-lines-table input[type=number]::-webkit-inner-spin-button,
#po-lines-table input[type=number]::-webkit-outer-spin-button,
#so-lines-table input[type=number]::-webkit-inner-spin-button,
#so-lines-table input[type=number]::-webkit-outer-spin-button,
#edit-lines-table input[type=number]::-webkit-inner-spin-button,
#edit-lines-table input[type=number]::-webkit-outer-spin-button,
#vendor-lines-table input[type=number]::-webkit-inner-spin-button,
#vendor-lines-table input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
#po-lines-table input[type=number],
#so-lines-table input[type=number],
#edit-lines-table input[type=number],
#vendor-lines-table input[type=number] {
  -moz-appearance: textfield; appearance: textfield;
}

/* The supplier billing/shipping selects + previews live inside an HTMX-swapped
   wrapper div; give it the same column gap as .po-addr-block so the dropdown→
   preview spacing matches the Battle (own-address) columns. Id-based so the
   spacing survives HTMX innerHTML / OOB swaps that replace inline styles. */
#supplier-billing-addr-wrap,
#supplier-shipping-addr-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Billing + Shipping halves side by side */
.po-addr-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.po-addr-half {
  border-right: 1px solid var(--colour-border, #e0e0e0);
}
.po-addr-half:last-child {
  border-right: none;
}
.po-addr-half-title {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  padding: 12px 24px 0;
}
/* Inside a half, the addr-panel needs no extra side padding gap */
.po-addr-half .po-addr-panel {
  padding-top: 10px;
}

/* ── Reusable address cards ─────────────────────────────────────────────────
   One visual language for addresses across POs, suppliers and sales orders.
   .addr-grid lays cards out responsively; the matrix modifier puts the four
   PO/SO addresses in a single row (collapsing to 2-up then stacked). */
.addr-grid {
  display: grid;
  gap: 14px;
  padding: 16px 24px 20px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.addr-grid--matrix {
  grid-template-columns: repeat(4, 1fr);
}
/* Pair modifier: split the container in two (Pick Up | Ship To). Cards are
   capped and left-justified within their half rather than stretched wide. */
.addr-grid--pair {
  grid-template-columns: 1fr 1fr;
}
/* Each half (a direct child — a bare card, or a column wrapping a card + its
   contacts) is capped and left-justified within its column. */
.addr-grid--pair > * {
  max-width: 360px;
  justify-self: start;
}
.addr-grid--pair .addr-card { width: 100%; }
/* Contact block shown beneath an address card on the booked shipment view. */
.addr-contact { margin-top: 10px; }
.addr-contact__label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
/* Drop to two-up, then stacked, when there isn't room for four across. */
@media (max-width: 1100px) {
  .addr-grid--matrix { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .addr-grid--matrix { grid-template-columns: 1fr; }
  .addr-grid--pair { grid-template-columns: 1fr; }
}
.addr-card {
  border: 1px solid var(--colour-border, #e0e0e0);
  border-radius: 8px;
  background: #fff;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 118px;
}
.addr-card__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #8a8a8a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.addr-card__name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}
.addr-card__body {
  font-size: 13px;
  color: #444;
  line-height: 1.55;
}
.addr-card__meta {
  font-size: 12px;
  color: #6b6b6b;
  border-top: 1px dashed #ececec;
  padding-top: 6px;
  margin-top: auto;
  white-space: pre-line;       /* honour multi-line delivery instructions */
}
.addr-card__meta strong { color: #444; font-weight: 600; }
.addr-card--empty {
  color: #b5b5b5;
  font-style: italic;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.addr-card select.det-input,
.addr-card textarea.det-input { width: 100%; }
.addr-card__defaults {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sl-badge--default {
  background: #eaf5ec;
  color: #2e7d32;
  border: 1px solid #cfe8d4;
}
/* Person's linked address jumps to its card in the Addresses section. */
.person-addr-link { color: inherit; text-decoration: none; }
.person-addr-link:hover { text-decoration: underline; }
/* Brief highlight when an address card is targeted via the link above. */
.addr-card:target {
  border-color: var(--colour-accent, #2e7d32);
  box-shadow: 0 0 0 2px rgba(46,125,50,.18);
}

/* Small uppercase sub-heading inside a det-section (e.g. "Addresses" above a
   card grid). Replaces a repeated inline style across the shipment templates. */
.det-subsection-title {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

/* ── Purchase Order detail page ─────────────────────────────────────────── */

/* 3-column order detail grid */
.po-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  padding: 0 24px 4px;
}
.po-detail-col {
  padding: 12px 16px 12px 0;
}
.po-detail-col + .po-detail-col {
  padding-left: 16px;
  border-left: 1px solid var(--colour-border);
}

/* Status strip — Order → Receive → Invoice pipeline */
.po-status-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: #fff;
  border: 1px solid var(--colour-border);
  border-radius: 8px;
  padding: 12px 20px;
  margin-bottom: 16px;
  /* Safety net: if the strip still overflows at the narrowest breakpoint,
     let it scroll horizontally rather than hiding tabs off-screen. */
  overflow-x: auto;
  scrollbar-width: none;   /* Firefox — hide scrollbar visually */
}
.po-status-strip::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.po-stage {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #aaa;
  transition: background 0.15s, color 0.15s;
  user-select: none;
  white-space: nowrap;  /* keep icon + label on one line while scaling */
  flex-shrink: 0;       /* let the strip scroll rather than crushing text */
}
.po-stage:hover { background: #f5f5f5; color: #666; }
.po-stage--active { background: #f0f0f0; color: var(--colour-text); }
.po-stage-icon { width: 22px; height: 22px; flex-shrink: 0; }

/* Stage state colours */
.po-stage--pending .po-stage-icon { color: #ccc; }
.po-stage--pending .po-stage-label { color: #aaa; }
.po-stage--done    .po-stage-icon { color: #27AE60; }
.po-stage--done    .po-stage-label { color: var(--colour-text); }
.po-stage--partial .po-stage-icon { color: #F39C12; }
.po-stage--partial .po-stage-label { color: var(--colour-text); }

.po-stage-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ddd;
  font-size: 18px;
  pointer-events: none;
  width: 28px;
  flex-shrink: 0;
}

/* ── Responsive stage bar ────────────────────────────────────────────────────
   Three breakpoints shrink the bar progressively so all tabs stay visible
   without scrolling on common laptop/tablet widths.

   Breakpoints are viewport-width based; the sidebar is ~240px, so:
     1400px vp  →  ~1160px content
     1200px vp  →  ~960px  content  (tight but still fits with reduced sizing)
     1024px vp  →  ~784px  content  (icons hidden; labels only)
   ──────────────────────────────────────────────────────────────────────── */

/* Medium — tighten spacing, shrink icon slightly */
@media (max-width: 1400px) {
  .po-status-strip { padding: 8px 12px; }
  .po-stage         { padding: 6px 10px; font-size: 13px; gap: 6px; }
  .po-stage-icon    { width: 18px; height: 18px; }
  .po-stage-arrow   { width: 20px; font-size: 16px; }
}

/* Narrow — tighten further */
@media (max-width: 1200px) {
  .po-status-strip { padding: 6px 8px; }
  .po-stage         { padding: 5px 8px; font-size: 12px; gap: 5px; }
  .po-stage-icon    { width: 16px; height: 16px; }
  .po-stage-arrow   { width: 16px; font-size: 14px; }
}

/* Compact — hide icons entirely, labels only */
@media (max-width: 1024px) {
  .po-status-strip  { padding: 4px 6px; }
  .po-stage         { padding: 5px 7px; font-size: 11px; gap: 0; }
  .po-stage-icon    { display: none; }
  .po-stage-arrow   { width: 12px; font-size: 12px; }
}

/* Locked section — used on New PO to disable Line Items until supplier is chosen */
.po-section-locked {
  opacity: 0.38;
  pointer-events: none;
  user-select: none;
}

/* Invoice tab styles */
.inv-tab-grid {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr;
  gap: 0;
}
.inv-totals-block {
  max-width: 380px;
  margin-left: auto;
  margin-top: 12px;
  padding: 0 24px 16px;
}
.inv-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--colour-border);
}
.inv-totals-row:last-child { border-bottom: none; }
.inv-totals-row--total {
  font-weight: 700;
  font-size: 15px;
  padding-top: 10px;
}
.inv-misc-section { padding: 12px 24px; }
.inv-misc-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.inv-misc-row input[type="text"] { flex: 1; }
.inv-misc-row .imisc-qty    { width: 70px;  flex: none; }
.inv-misc-row .imisc-amount { width: 130px; flex: none; }
.inv-misc-row .imisc-unit   { width: 130px; flex: none; }
.imisc-line-total {
  min-width: 80px;
  text-align: right;
  font-size: 13px;
  color: #555;
  white-space: nowrap;
}

/* ── Freight vendor typeahead ─────────────────────────────────────────────── */
.typeahead-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 200;
  background: #fff;
  border: 1px solid var(--colour-border);
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
  max-height: 220px;
  overflow-y: auto;
}
.typeahead-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.typeahead-item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--colour-border);
}
.typeahead-item:last-child { border-bottom: none; }
.typeahead-item:hover { background: var(--colour-bg-alt); }
.typeahead-item--empty { color: #aaa; cursor: default; }
/* Absolute dropdown wrapper for typeahead results under a search input. Collapses
   when empty so it never leaves a stray border/box. */
.typeahead-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 200;
  background: #fff;
  border: 1px solid var(--colour-border, #e0e0e0);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  max-height: 220px;
  overflow-y: auto;
}
.typeahead-dropdown:empty { display: none; }

/* ── Book Shipment — pickup contact column ────────────────────────────────── */
.ship-contact-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #333;
}
.ship-contact-row:last-child { margin-bottom: 0; }
.ship-contact-name  { font-weight: 600; }
.ship-contact-role  { font-size: 12px; color: #888; }
.ship-contact-phone { color: #555; }

/* ===========================================================================
   MJ PLANNING TAB — column header tooltips
   =========================================================================== */

/* Dotted underline signals the column header is hoverable.
   The tooltip bubble itself is rendered by JS (position:fixed) so it
   can escape the overflow-x:auto table wrapper without being clipped. */
.plan-col-tip {
  cursor: default;
  border-bottom: 1px dashed #aaa;
  white-space: nowrap;
}

/* ── Order-form guard (New SO/PO/MO) ──────────────────────────────────────
   Verbose "fix this before creating" banner + red field highlight, shown by
   static/js/order_form_guard.js when a create form is submitted incomplete.
   Blocks the submit client-side so no entered data is lost.                */
.ofg-banner {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-left: 4px solid #dc2626;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 18px;
}
.ofg-banner-title { font-size: 14px; font-weight: 700; color: #991b1b; }
.ofg-banner-list { margin: 6px 0 0; padding-left: 22px; }
.ofg-banner-list li { font-size: 13px; color: #b91c1c; line-height: 1.6; }
.ofg-invalid,
input.ofg-invalid,
select.ofg-invalid,
textarea.ofg-invalid {
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}


/* ── Warehouse split ──────────────────────────────────────────────────────────
   Shown only when a company runs more than one warehouse: essential with two
   buildings, pure noise with one. Zones stay combined — which rack something sits
   on is a detail, which building it is in is not. */
.inv-wh-split { margin-top: 6px; border-top: 1px solid var(--colour-border); padding-top: 5px; }
.inv-wh-split__row { display: flex; align-items: baseline; gap: 8px; font-size: 11px;
  line-height: 1.7; }
.inv-wh-split__name { flex: 1; color: var(--colour-text-light); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.inv-wh-split__code { color: #b0b0b0; }
.inv-wh-split__qty { font-variant-numeric: tabular-nums; color: var(--colour-text);
  font-weight: 600; }

/* In a list cell, under the single total. */
.inv-wh-cell { margin-top: 3px; font-size: 11px; color: var(--colour-text-light);
  line-height: 1.6; }
.inv-wh-cell b { color: var(--colour-text); font-variant-numeric: tabular-nums; }

/* A quiet prefix on a zone name, so "Rack A" is never ambiguous between buildings. */
.inv-wh-tag { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 5px;
  border-radius: 4px; background: #f1f5f9; color: #475569; white-space: nowrap; }


/* ── Manufacturing job stage badges ───────────────────────────────────────────
   Seven stages, one shared style. The colour walks from grey (nothing started)
   through blue (planned and prepared) to amber (running) and green (done), so the
   stage is legible at a glance without reading the word — and so a row of jobs
   sorts visually by how far along it is.

   The status is DERIVED from the job's own progress; see manufacturing/status.py. */
.mj-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.mj-badge--draft     { background: #f0f0f0; color: #666; }
.mj-badge--scheduled { background: #e3f2fd; color: #1565c0; }
.mj-badge--picked    { background: #e1f0fb; color: #10618f; }
.mj-badge--kitted    { background: #e0f2f1; color: #00695c; }
.mj-badge--batched   { background: #ede7f6; color: #4527a0; }
.mj-badge--started   { background: #fff3e0; color: #e65100; }
.mj-badge--completed { background: #e8f5e9; color: #2e7d32; }

/* ---------------------------------------------------------------------------
   Dunnage
   ---------------------------------------------------------------------------
   Dunnage is the only thing in the system that moves as a SIDE EFFECT of a
   document the operator is already filling in — a receipt, a production
   finalize, a shipment. It therefore needs a visual language that reads as
   "and this is also happening", clearly distinct from the fields being edited.

   The frame borrows its shape from .recv-scan-frame (the blue "Data from
   Scanning App" box on the PO Receive tab), which already established the
   convention on that page: a 2px coloured border, an uppercase header strip in
   a pale tint of the same hue, and a stacked body. Colour carries the
   direction, so the same component works on all four screens:

     --in    amber   dunnage arriving, and usually owed back to a supplier
     --out   green   dunnage leaving our own pool (consumed, or returned)
     --info  slate   informational only; nothing is being booked here
*/
.dun-frame {
  border: 2px solid #f59e0b;
  border-radius: 8px;
  overflow: hidden;
  font-size: 12px;
  background: #fff;
}
.dun-frame__header {
  background: #fffbeb;
  color: #92400e;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 7px 12px;
  border-bottom: 1px solid #fcd34d;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.dun-frame__body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dun-frame__body--empty {
  color: #94a3b8;
  font-style: italic;
}
/* One requirement line: role on the left, quantity hard right so a column of
   them reads as a column of numbers. */
.dun-frame__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.dun-frame__role { color: #475569; }
.dun-frame__qty  { font-weight: 700; color: #1e293b; font-variant-numeric: tabular-nums; }
.dun-frame__note {
  color: #64748b;
  font-size: 11px;
  border-top: 1px dashed #e2e8f0;
  padding-top: 6px;
}
/* A shortfall is the one thing in this box that must not be scannable-past:
   production consumed less dunnage than the pallets needed. */
.dun-frame__short {
  color: #b91c1c;
  font-weight: 600;
  font-size: 11px;
}

.dun-frame--out                 { border-color: #10b981; }
.dun-frame--out .dun-frame__header {
  background: #f0fdf4; color: #15803d; border-bottom-color: #bbf7d0;
}
.dun-frame--info                { border-color: #94a3b8; }
.dun-frame--info .dun-frame__header {
  background: #f8fafc; color: #475569; border-bottom-color: #e2e8f0;
}

/* ---------------------------------------------------------------------------
   Packaging consumption frame — MJ Summary tab
   ---------------------------------------------------------------------------
   What the Kitting & Batching App reported it consumed and returned for a run.

   Blue, and the SAME blue as .recv-scan-frame on the PO Receive tab, because
   that box already means one specific thing in this system: "a connected app
   said this, we did not". An operator who has received a PO should not have to
   learn a second visual language to know that this frame is somebody else's
   number and that nothing in it is editable. The amber/green .dun-frame above
   is the other half of that convention — colour carries meaning, so a new
   colour here would have implied a new meaning.

   Read-only throughout: no input, button, or affordance appears inside it. The
   Consume/Restock marks on the pallet cards remain the only thing that books
   stock at Finalize.
*/
.pkgc-frame {
  border: 2px solid #3b82f6;
  border-radius: 8px;
  overflow: hidden;
  font-size: 12px;
  background: #fff;
  max-width: 520px;
}
.pkgc-frame__header {
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 7px 12px;
  border-bottom: 1px solid #bfdbfe;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
/* Who the app credited. Quieter than the title — it is provenance, not a heading. */
.pkgc-frame__operator {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #3b82f6;
}
.pkgc-frame__body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pkgc-frame__body--empty {
  color: #94a3b8;
  font-style: italic;
}

/* Consumed / Returned. Red and green match the Consume/Restock legend directly
   below the pallet grid, so the frame's two halves map onto the two marks the
   operator is choosing between rather than introducing a third scheme. */
.pkgc-sub__title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding-bottom: 4px;
  margin-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
}
.pkgc-sub__title--con { color: #991b1b; }
.pkgc-sub__title--ret { color: #15803d; }

.pkgc-comp { margin-bottom: 8px; }
.pkgc-comp:last-child { margin-bottom: 0; }
.pkgc-comp__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.pkgc-comp__name { font-weight: 700; color: #334155; }
.pkgc-comp__sku  { font-size: 11px; color: #94a3b8; }

.pkgc-batch { margin: 4px 0 0 10px; }
.pkgc-batch__label {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 1px;
}

/* One pallet-size line: "40 pallets of 8,096 cans".
   tabular-nums so a stack of counts and quantities lines up as columns — the
   whole reason partials get their own line is to make the odd one visible. */
.pkgc-line {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-left: 10px;
  padding: 1px 0;
}
.pkgc-line__count {
  font-weight: 600;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
  min-width: 74px;
}
.pkgc-line__of   { color: #cbd5e1; }
.pkgc-line__qty  {
  font-weight: 600;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
}
.pkgc-line__unit { color: #64748b; }

.pkgc-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 2px;
}
.pkgc-tag--partial { background: #fef3c7; color: #92400e; }
.pkgc-tag--full    { background: #f1f5f9; color: #64748b; }

.pkgc-none {
  color: #94a3b8;
  font-style: italic;
  font-size: 11px;
}

.pkgc-frame__foot {
  border-top: 1px dashed #e2e8f0;
  padding-top: 6px;
  font-size: 11px;
  color: #64748b;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
/* Stated, not implied. This box sits inside an editable worksheet and its
   numbers look like the ones next to them, so it says outright that it is not
   an input. */
.pkgc-frame__ro {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #94a3b8;
}

/* The derived "1 tier sheet per X units" readout on the detail pages. Styled as
   a computed-value box rather than a field, because it is not editable — it is
   pallet units ÷ tier sheets, recomputed whenever either input changes. */
.dun-ratio-box {
  margin-top: 16px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  border-radius: 8px;
  padding: 10px 14px;
  max-width: 340px;
}
.dun-ratio-box__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #1d4ed8;
}
.dun-ratio-box__value {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-top: 3px;
}
.dun-ratio-box__note { font-size: 11px; color: #64748b; margin-top: 3px; }

/* View-mode inline version of the same figure, sized to sit as one cell in the
   detail page's .det-info-grid. */
.dun-ratio-chip {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

/* Balance figures on the Dunnage page: what we still owe a supplier reads as a
   liability (amber), a settled or over-returned line as neutral/green. */
.dun-bal        { font-weight: 700; font-variant-numeric: tabular-nums; }
.dun-bal--owed  { color: #b45309; }
.dun-bal--clear { color: #15803d; }

/* ---------------------------------------------------------------------------
   Stocktake and Stock Transfer
   ---------------------------------------------------------------------------
   The count sheet is the only screen in this app designed for hundreds of rows
   entered by hand, so it is tuned for that: tabular numerals so columns of
   figures line up, a tight row height so more fits on a screen, and a variance
   column loud enough to catch a mis-key at the rack.

   Signed figures use one shared pair of colours across stocktake, transfers and
   the Accounting adjustments screen — red for stock lost, green for stock found —
   so the sign means the same thing everywhere it appears.
*/
.stk-net        { font-weight: 700; font-variant-numeric: tabular-nums; }
.stk-net--down  { color: #b91c1c; }
.stk-net--up    { color: #15803d; }

/* Progress / variance summary strip. */
.stk-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 18px 24px;
}
.stk-total { display: flex; flex-direction: column; gap: 3px; }
.stk-total__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #94a3b8;
}
.stk-total__value {
  font-size: 20px;
  font-weight: 800;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
}
.stk-total__value--warn { color: #b45309; }

/* The sheet itself. */
.stk-sheet td { padding-top: 4px; padding-bottom: 4px; }
.stk-sheet .stk-num { text-align: right; font-variant-numeric: tabular-nums; }
.stk-count-input {
  width: 110px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.stk-zone-input { font-size: 12px; padding: 3px 6px; }

/* A line added during counting because the books had no row for it at all. */
.stk-row--found { background: #f0fdf4; }
.stk-found-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #dcfce7;
  color: #15803d;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
}

/* Stock moved between generating the sheet and posting it. Not an error — an
   explanation, so the resulting on-hand figure doesn't look like a posting bug. */
.stk-drift-row td {
  padding: 6px 12px 8px 12px;
  font-size: 11px;
  color: #92400e;
  background: #fffbeb;
  border-top: 1px dashed #fcd34d;
}

.stk-pager {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px 24px;
}

/* Scope picker on the new-stocktake form: many zones and categories, chosen by
   ticking, so a wrapping grid of compact checkboxes beats a multi-select nobody
   can operate. */
.stk-zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px 14px;
  margin-top: 6px;
}
.stk-zone-pick {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--colour-text);
  cursor: pointer;
}

/* Shared SKU typeahead — the stocktake's "found stock" row and every transfer
   line. A <select> of several thousand SKUs is not operable. */
.stk-typeahead {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  margin-top: 2px;
  background: #fff;
  border: 1px solid var(--colour-border);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
  max-height: 260px;
  overflow-y: auto;
}
.stk-typeahead__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  background: none;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
}
.stk-typeahead__row:last-child { border-bottom: none; }
.stk-typeahead__row:hover      { background: #f8fafc; }
.stk-typeahead__cat            { margin-left: auto; color: #94a3b8; font-size: 11px; }

/* Transfer direction chip. Deliberately not the same shape as an .mj-badge status
   pill — direction and status sit side by side in the toolbar and must not read as
   two halves of one thing. */
.tr-dir {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.tr-dir--in  { background: #dcfce7; color: #15803d; }
.tr-dir--out { background: #fee2e2; color: #b91c1c; }

/* Blocking problems on a draft transfer, listed BEFORE the confirm button rather
   than surfaced as an error after pressing it. */
.tr-problems {
  border: 1px solid #fecaca;
  background: #fef2f2;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.tr-problems__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #b91c1c;
  margin-bottom: 6px;
}
.tr-problems ul { margin: 0; padding-left: 18px; }
.tr-problems li { font-size: 12px; color: #7f1d1d; line-height: 1.6; }

/* ---------------------------------------------------------------------------
   Detail-page editing: unsaved-section chip, and number inputs without spinners
   ---------------------------------------------------------------------------
   A detail page is several independent forms. "Save Changes" now posts all of
   them (see templates/inventory/partials/_detail_save_all.html), but a section's
   own Save button still only saves itself — so a section holding unsaved edits
   flags itself in its header. Amber rather than red: this is a state to notice,
   not an error.
*/
.det-unsaved-chip {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  vertical-align: middle;
}

/* Spinners off — everywhere, on every number input.
 *
 * Two reasons, and the second is the serious one:
 *   - the arrows eat horizontal space in an already narrow cell and sit exactly
 *     where the caret wants to be, so the value they crowd out gets clipped;
 *   - a focused number input changes its value on scroll-wheel, so scrolling
 *     down a batch sheet can silently rewrite a quantity you were only reading.
 *     CSS cannot stop that — static/js/number_inputs.js does, globally, and the
 *     two have to travel together. Hiding the arrows without blocking the wheel
 *     would make that silent edit *harder* to spot, not easier.
 *
 * This was scoped to a `.no-spin` class on the Batch Sheet and BOM quantity
 * fields. It is global now because nobody nudges a spec value by one — every
 * number in this app is typed, and a spec range or a case count stepping by 1
 * is never what was meant. `.no-spin` is kept below because templates still
 * carry it; it is a no-op that costs nothing and avoids a sweep of dead
 * attributes across a dozen files.
 */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number],
.no-spin {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ---------------------------------------------------------------------------
   Detail-page floating save bar
   ---------------------------------------------------------------------------
   A detail page is long — a filled good runs to Product Specifications, well
   past a screen of scrolling. The only Save lived in the page header, so saving
   meant scrolling back to the top to find it, and the reflex instead was to hit
   a section's own Save button, which used to save that section alone.

   Sticky rather than fixed. `position: fixed` is viewport-relative, so the bar
   would have had to know the width of the nav column(s) to avoid sitting on top
   of them — a hardcoded offset that breaks the moment the nav changes. Sticky
   confines it to .content-main, the scroll container, for free.

   Bottom, not top: the header already holds the same buttons, and a bar that
   pins to the bottom stays out of the way of the field being typed into.
*/
.det-save-bar {
  display: none;
  position: sticky;
  bottom: 0;
  z-index: 40;
  /* Negative side margins bleed through .content-main's 24px padding so the bar
   * spans the full content width; the bottom one lets it sit flush on the edge. */
  margin: 24px -24px -24px;
  padding: 12px 24px;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  background: var(--colour-content, #fff);
  border-top: 1px solid var(--colour-border);
  box-shadow: 0 -4px 16px rgba(15, 23, 42, .10);
}
body.in-edit-mode .det-save-bar { display: flex; }

/* Left-aligned status: which sections are dirty, or that none are. Pushed away
 * from the buttons by margin-right:auto rather than a spacer element. */
.det-save-bar-status {
  margin-right: auto;
  font-size: 12px;
  color: var(--colour-text-light);
}
.det-save-bar-status--dirty { color: #92400e; font-weight: 600; }

/* ---------------------------------------------------------------------------
   MJ Pick tab — split / combine available pallets
   ---------------------------------------------------------------------------
   Splitting happens BEFORE picking: a run that needs part of a tote or part of a
   pallet of ends shouldn't have to stage the whole thing and take the remainder
   out of circulation for every other job.
*/

/* Refusals render next to the button instead of as a page message — the grid is
   swapped in place, so there is no reload to carry one. */
.mj-pick-split-err {
  font-size: 11px;
  color: #b91c1c;
  max-width: 320px;
  line-height: 1.4;
}

.mjps-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .4);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.mjps-dialog {
  background: #fff;
  border-radius: 12px;
  padding: 20px 22px;
  width: 380px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
}
.mjps-title  { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.mjps-help   { font-size: 12px; color: #64748b; line-height: 1.5; margin: 0 0 14px; }
.mjps-total  { font-size: 12px; color: #334155; margin-bottom: 10px; }
.mjps-total strong { font-variant-numeric: tabular-nums; }

/* The remainder preview. The number that tells an operator whether they typed what
   they meant, so it is given its own line rather than hidden in help text. */
.mjps-remainder {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #15803d;
  font-variant-numeric: tabular-nums;
  min-height: 18px;
}
.mjps-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

/* Quantity subtotal beside a pallet batch header's full/partial count. Quieter than
   the count it sits next to — it answers "is there enough here", which is a glance,
   not a heading. */
.pallet-batch-units {
  font-weight: 400;
  color: #64748b;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* ── Voided manufacturing job ────────────────────────────────────────────────
   Slate, not red. A void is a decision that was taken, not an error condition or
   something to act on — red here would compete with the genuine warnings (unpaid
   deposit, stale spec book) that sit in the same strip and DO need action. */
.mj-void-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #cbd5e1;
  border-left: 5px solid #64748b;
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.mj-void-banner__title {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 4px;
}
.mj-void-banner__body { font-size: 12px; color: #475569; line-height: 1.5; }
.mj-badge--void { background: #e2e8f0; color: #475569; }

/* The two void modes, as equally-weighted choices rather than one default and one
   alternative — see the dialog comment. */
.mjvoid-choice { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.mjvoid-choice label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  color: #334155;
  line-height: 1.45;
  cursor: pointer;
  border: 1px solid var(--colour-border, #e0e0e0);
  border-radius: 6px;
  padding: 9px 11px;
}
.mjvoid-choice label:hover { background: #f8fafc; }

/* Which batch a per-batch lab reading belongs to. Four aerobic counts on one run are
   otherwise four identical cards. Quieter than the test name it follows. */
.lab-batch-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #0f766e;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
}