/* StrataGreen design system — shared CSS for all utilities.
   Loaded by every page first, then each app adds its own
   app-specific rules on top. Lives at /shared/static/sg.css so
   tokens + common components are owned in exactly one place. */

:root {
  /* Brand palette */
  --sg-teal:        #005778;
  --sg-teal-dk:     #004661;
  --sg-green:       #3c9342;
  --sg-green-dk:    #2c6b2f;

  /* Status / utility colours */
  --sg-warn:        #b3201f;
  --sg-warn-soft:   #fdecec;
  --sg-warn-bd:     #f0bcbc;

  /* Neutrals */
  --sg-bg:          #ffffff;
  --sg-bg-soft:     #f4f5f6;
  --sg-border:      #bdbfbf;
  --sg-border-soft: #e2e4e6;
  --sg-text:        #0b1215;
  --sg-muted:       #535a61;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* The browser hides [hidden] via `display: none` in its own stylesheet,
   which ANY author `display` rule outranks — so a `.chip { display:
   inline-flex }` silently defeats `hidden` and the element stays on
   screen while `el.hidden` still reports true. That combination is
   invisible in tests that check the attribute. !important is the
   conventional fix (normalize.css does the same). */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--sg-bg-soft); color: var(--sg-text);
  /* Explicit properties, not the `font:` shorthand — a single unrecognised
     token in the shorthand nukes the whole rule and lets the browser fall
     back to its default (monospace on some Chromium builds). Split form is
     bulletproof. Segoe UI is the reliable Windows sans-serif, -apple-system
     the macOS one; Arial + sans-serif are the universal fallbacks. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
               Arial, "Liberation Sans", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  min-height: 100vh;
}
button, input, select { font: inherit; }

/* ---------- Top bar (POS sale page, POD warehouse home, Utilities home) ---------- */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--sg-bg); border-bottom: 1px solid var(--sg-border-soft);
  flex-wrap: wrap; gap: 8px;
}
.bar-left  { display: flex; align-items: center; gap: 10px; }
.bar-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Sub-bar — row below .bar for page-level actions/nav.
   Right-justifies its content with a divider underneath. Padding is
   tuned so that with the standard .subbar-btn inside, the subbar's
   total height matches the .bar above (~50px) — looks balanced. */
.subbar {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 10px; flex-wrap: wrap;
  padding: 8px 16px;
  border-bottom: 1px solid var(--sg-border-soft);
}
/* Standard action button for the .subbar — same visual weight as the
   Sales Analytics .sa-dash-btn nav buttons: teal-outlined, fills on
   hover, with room for a small leading icon.
   Note: line-height is explicit because `display: inline-flex` doesn't
   inherit the body's 1.4 line-height for its text node the way a plain
   inline anchor does — without this the button rendered ~5px shallower
   than the equivalent .sa-dash-btn. */
/* Opt-in: pushes everything after it to the right, so a "back" link sits at
   the left edge while the page's actions stay right. .subbar is flex-end for
   every module, so this is additive rather than a change to that. */
.subbar-back { margin-right: auto; }

.subbar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .9rem; line-height: 1.4;
  padding: .5rem 1rem;
  border: 1px solid var(--sg-teal); color: var(--sg-teal);
  background: #fff; border-radius: 6px;
  text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s;
}
.subbar-btn:hover { background: var(--sg-teal); color: #fff; }
.subbar-btn:disabled { opacity: .55; cursor: default; }
.subbar-btn.active { background: var(--sg-teal); color: #fff; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--sg-bg-soft); border: 1px solid var(--sg-border-soft);
}

/* ---------- Chips ---------- */
.chip {
  display: inline-block; padding: 3px 9px;
  background: var(--sg-teal); color: #fff;
  border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap;
}
.chip.muted {
  background: var(--sg-bg-soft); color: var(--sg-muted);
  border: 1px solid var(--sg-border-soft);
}
.chip.mode {
  background: var(--sg-warn); color: #fff;
}

/* ---------- Pill buttons (sign out, refresh stock, etc.) ---------- */
.signout-pill,
.feedback-pill,
.chip-button {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px 2px 8px;
  background: transparent;
  border: 1px solid var(--sg-border);
  border-radius: 999px;
  color: var(--sg-muted);
  font: 600 11px/1.4 inherit; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.signout-pill:hover,
.feedback-pill:hover,
.chip-button:hover {
  background: #fff; border-color: var(--sg-teal); color: var(--sg-teal);
}
.feedback-pill svg { width: 11px; height: 11px; }

/* Header user avatar — small circular photo of the signed-in user that
   replaces the old muted display-name chip. Clicks through to /me. */
.header-me {
  display: inline-flex; align-items: center;
  text-decoration: none;
  border-radius: 999px;
  padding: 2px;
  transition: box-shadow 0.15s;
  line-height: 0;
}
.header-me:hover { box-shadow: 0 0 0 2px var(--sg-teal); }
.header-me img {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--sg-bg-soft);
  display: block;
}
.header-me img.failed,
.header-me img[src=""] { opacity: 0.35; }
.chip-button[disabled] { opacity: 0.6; cursor: progress; }
.spinning svg { animation: chip-spin 1s linear infinite; }
@keyframes chip-spin {
  from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}

form.inline { display: inline; margin: 0; padding: 0; }


/* ---------- Auth / login cards (POS login + settings, POD warehouse picker) ---------- */
.page-auth,
.page-login {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 32px 16px;
}
.auth-card,
.login-card {
  background: var(--sg-bg);
  width: 380px; max-width: 100%;
  border: 1px solid var(--sg-border-soft);
  border-radius: 14px;
  padding: 28px 28px 24px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}

/* Card heading row (avatar + title) */
.auth-brand,
.login-brand {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
}
.auth-brand img,
.login-brand img {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--sg-bg-soft); border: 1px solid var(--sg-border-soft);
}
.auth-brand h1,
.login-brand h1 { margin: 0; font-size: 18px; }
.auth-brand .sub,
.login-brand .sub { margin: 2px 0 0; color: var(--sg-muted); font-size: 13px; }

/* Form controls inside cards */
.auth-card label,
.login-card label {
  display: block; margin-bottom: 12px;
  font-size: 12px; font-weight: 600; color: var(--sg-muted);
  letter-spacing: 0.02em;
}
.auth-card input, .auth-card select,
.login-card input, .login-card select {
  display: block; width: 100%; margin-top: 4px;
  padding: 10px 12px; font-size: 15px;
  border: 1px solid var(--sg-border); border-radius: 6px; background: #fff;
  color: var(--sg-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-card input:focus, .auth-card select:focus,
.login-card input:focus, .login-card select:focus {
  outline: 2px solid var(--sg-teal); outline-offset: -1px;
  border-color: var(--sg-teal);
}
.auth-card button[type=submit],
.login-card button {
  width: 100%; padding: 12px;
  background: var(--sg-teal); color: #fff;
  border: 0; border-radius: 8px;
  font: 600 15px/1 inherit; margin-top: 6px;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
  cursor: pointer;
}
.auth-card button[type=submit]:hover,
.login-card button:hover {
  background: var(--sg-teal-dk);
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
  transform: translateY(-1px);
}

/* Inline error block at top of card */
.auth-card .error,
.login-card .error,
.error {
  background: var(--sg-warn-soft); color: var(--sg-warn);
  border: 1px solid var(--sg-warn-bd);
  padding: 9px 11px; border-radius: 6px;
  margin: 8px 0 12px;
  font-size: 13px;
}

/* ---------- Inline-link button ---------- */
button.link {
  background: transparent; border: 0; color: var(--sg-teal);
  font-size: 13px; padding: 4px 6px;
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
button.link:hover { color: var(--sg-teal-dk); }

/* ---------- Page layout — shared across modules ----------
   Generic content-area building blocks used by /whs, /sms, /marketing,
   etc. Kept here so a new module renders correctly by loading sg.css
   alone; per-module CSS layers on top only for genuinely module-
   specific tweaks (see `.whs-subbar`, `.wrap.whs`, ...). */
.wrap {
  max-width: 1040px; margin: 16px auto 64px; padding: 0 14px;
}

.subbar-actions {
  margin-left: auto; display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap;
}
.subbar-actions:empty { display: none; }
.subbar-btn.primary { background: var(--sg-teal); color: #fff; }
.subbar-btn.primary:hover { background: var(--sg-teal-dk); color: #fff; }

.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 4px 0 16px;
}
.page-head h1 {
  margin: 0; font-size: 20px; display: flex;
  align-items: center; gap: 8px; flex-wrap: wrap;
}
.page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Standalone button — same weight as .subbar-btn but usable outside a
   subbar. Modules that need it (WHS, SMS) declare it in their own CSS
   too; the copies match so the shared version here is the safe default
   for any new module. */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 14px/1.2 inherit; padding: 10px 16px;
  border: 1px solid var(--sg-border); border-radius: 8px;
  background: #fff; color: var(--sg-text); cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { border-color: var(--sg-teal); color: var(--sg-teal); }
.btn-primary {
  background: var(--sg-teal); border-color: var(--sg-teal); color: #fff;
}
.btn-primary:hover { background: var(--sg-teal-dk); color: #fff; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-danger {
  background: var(--sg-warn); border-color: var(--sg-warn); color: #fff;
}
.btn-danger:hover { background: #8f1918; border-color: #8f1918; color: #fff; }

/* Inline navigation links inside module content — teal, no underline,
   underline on hover for affordance. Applies inside `.wrap` (any Central
   module page) so we don't touch prose or storefront/email anchors that
   pull sg.css. `.btn` links already zero their text-decoration in the
   button rule above; ghost/link buttons keep their own styling. */
.wrap a { color: var(--sg-teal); text-decoration: none; }
.wrap a:hover { color: var(--sg-teal-dk); text-decoration: underline; }
.wrap a.btn { color: inherit; }
.wrap a.btn-primary { color: #fff; }

/* Inline link-styled submit button — for secondary actions that sit
   next to a value, like "Verify" beside a USI. No border/background,
   just link colour so it doesn't compete visually. */
.btn-link {
  background: none; border: 0; padding: 0; margin: 0 0 0 6px;
  font: inherit; color: var(--sg-teal); cursor: pointer;
  text-decoration: underline;
}
.btn-link:hover { color: var(--sg-teal-dk); }
.btn-link.small { font-size: 12px; }

.card {
  background: var(--sg-bg); border: 1px solid var(--sg-border-soft);
  border-radius: 10px; padding: 16px 16px 18px; margin-bottom: 14px;
}
.card h2 { margin: 0 0 12px; font-size: 15px; color: var(--sg-teal); }
.card h3 {
  margin: 16px 0 6px; font-size: 13px; color: var(--sg-muted);
  text-transform: uppercase; letter-spacing: .03em;
}

.col-2 { display: grid; grid-template-columns: 1fr; gap: 14px; }

.stat-row {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.stat {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--sg-bg); border: 1px solid var(--sg-border-soft);
  border-radius: 10px; padding: 14px; text-decoration: none;
  color: var(--sg-text);
  transition: box-shadow .15s, border-color .15s;
}
.stat:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.06); border-color: var(--sg-border);
}
.stat-num {
  font-size: 26px; font-weight: 700; color: var(--sg-teal); line-height: 1;
}
.stat-label { font-size: 12px; color: var(--sg-muted); }
.stat-warn .stat-num { color: var(--sg-warn); }

.list { list-style: none; margin: 0; padding: 0; }
.list li {
  padding: 10px 0; border-bottom: 1px solid var(--sg-border-soft);
}
.list li:last-child { border-bottom: 0; }
.list li a {
  text-decoration: none; color: var(--sg-text); display: flex;
  align-items: center; gap: 8px; flex-wrap: wrap;
}
.list li a:hover strong { color: var(--sg-teal); }
.list-sub { font-size: 12px; color: var(--sg-muted); margin-top: 2px; }
.empty { color: var(--sg-muted); font-size: 14px; padding: 6px 0; }

.pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: var(--sg-bg-soft); color: var(--sg-muted);
  border: 1px solid var(--sg-border-soft); white-space: nowrap;
}
.pill-warn {
  background: var(--sg-warn-soft); color: var(--sg-warn);
  border-color: var(--sg-warn-bd);
}

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--sg-muted);
  padding: 8px 8px; border-bottom: 1px solid var(--sg-border);
}
.table td {
  padding: 10px 8px; border-bottom: 1px solid var(--sg-border-soft);
  vertical-align: top;
}
.table tr.row-warn td { background: var(--sg-warn-soft); }

.notice {
  border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px;
}
.notice-warn {
  background: var(--sg-warn-soft); color: var(--sg-warn);
  border: 1px solid var(--sg-warn-bd);
}
.notice-ok {
  background: #eef6ee; color: var(--sg-green-dk); border: 1px solid #cfe6cf;
}

.hint { margin: 6px 0 0; font-size: 12px; color: var(--sg-muted); }
.hint em { font-style: normal; font-weight: 700; }

/* IDs, codes, and other fixed-width cells. Explicit stack rather than
   `ui-monospace` because older Chromium falls all the way back to the
   browser default (Times on Windows) when it can't resolve the first
   token. This order is Mac / Windows / Linux / generic — every desktop
   OS lands on a real monospace face before the last-resort fallback. */
.mono {
  font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono",
               "Courier New", monospace;
}

@media (min-width: 900px) {
  .col-2 { grid-template-columns: 1fr 1fr; align-items: start; }
  .stat-row { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 640px) and (max-width: 899.98px) {
  .stat-row { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Modal dialogs + toasts ----------
   Paired with /shared/static/sg-dialog.js. Replaces native confirm() /
   prompt(), which are unstyled and, for prompt(), suppressed outright in
   some contexts. Lives here so every module gets the same dialog rather
   than growing its own. */
.sg-modal-overlay {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(11, 18, 21, .5);
  opacity: 0;
  transition: opacity .16s ease;
}
.sg-modal-overlay.in { opacity: 1; }
.sg-modal {
  width: 100%; max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--sg-bg);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .26);
  padding: 20px 20px 16px;
  transform: translateY(8px);
  transition: transform .16s ease;
}
.sg-modal-overlay.in .sg-modal { transform: translateY(0); }
.sg-modal-title {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--sg-teal);
}
.sg-modal-msg {
  margin: 0 0 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--sg-text);
  white-space: pre-line;
}
.sg-modal-body { display: grid; gap: 12px; margin-top: 14px; }
.sg-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sg-field > span { font-size: 12px; font-weight: 600; color: var(--sg-muted); }
.sg-field input,
.sg-field select,
.sg-field textarea {
  font: inherit;
  padding: 9px 10px;
  border: 1px solid var(--sg-border);
  border-radius: 7px;
  background: #fff;
  color: var(--sg-text);
}
.sg-field input:focus,
.sg-field select:focus,
.sg-field textarea:focus {
  outline: none;
  border-color: var(--sg-teal);
  box-shadow: 0 0 0 2px rgba(0, 87, 120, .15);
}
.sg-field textarea { resize: vertical; }
.sg-field-check { flex-direction: row; align-items: center; gap: 9px; }
.sg-field-check input { width: 17px; height: 17px; }
.sg-field-hint { font-size: 12px; color: var(--sg-muted); font-weight: 400; }
/* Canned-answer chips under a dialog field — see `presets` in sg-dialog.js.
   Reuses .chip-button for the chips themselves. */
.sg-field-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sg-modal-err {
  margin: 10px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sg-warn);
}
.sg-modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 18px;
}
.sg-btn {
  font: inherit; font-size: .9rem; font-weight: 600;
  padding: .55rem 1.05rem;
  border-radius: 7px;
  border: 1px solid var(--sg-border);
  background: #fff;
  color: var(--sg-text);
  cursor: pointer;
}
.sg-btn:hover { border-color: var(--sg-teal); color: var(--sg-teal); }
.sg-btn-primary {
  background: var(--sg-teal); border-color: var(--sg-teal); color: #fff;
}
.sg-btn-primary:hover { background: var(--sg-teal-dk); color: #fff; }
.sg-btn-danger {
  background: var(--sg-warn); border-color: var(--sg-warn); color: #fff;
}
.sg-btn-danger:hover { background: #8f1a19; color: #fff; }

.sg-toasts {
  position: fixed; z-index: 950;
  bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  align-items: center;
  pointer-events: none;
}
.sg-toast {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--sg-text);
  color: #fff;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  opacity: 0; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.sg-toast.in { opacity: 1; transform: translateY(0); }
.sg-toast.ok  { background: var(--sg-green-dk); }
.sg-toast.err { background: var(--sg-warn); }

@media (max-width: 560px) {
  .sg-modal { max-width: none; }
  .sg-modal-foot { flex-direction: column-reverse; }
  .sg-modal-foot .sg-btn { width: 100%; }
}