/**
 * wraptor-suite-bar.css
 * Shared suite navigation bar styles — Wraptor Pro Suite.
 * Namespace: wsb- (Wraptor Suite Bar) to avoid conflicts with app-level CSS.
 * Visual reference: Dashboard flat dark header style.
 */

/* ── Fonts (fallback load — apps that already have these will not re-request) */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@400;600;700&display=swap');

/* ── CSS custom properties (theme-aware) ─────────────────────────────────── */
:root {
  --wsb-orange:        #efa220;
  --wsb-orange-light:  #ffcc66;
  --wsb-bg:            #0a0a0a;
  --wsb-panel:         #141414;
  --wsb-border:        #1e1e1e;
  --wsb-text:          #f0f0f0;
  --wsb-muted:         #888888;
  --wsb-chip:          rgba(20, 20, 20, 0.78);
  --wsb-chip-border:   rgba(148, 163, 184, 0.2);
  --wsb-height:        56px;
  --wsb-z:             1000;
}

/* Tech / neon green mode */
body.theme-tech {
  --wsb-orange:        #00ff88;
  --wsb-orange-light:  #00ffbb;
  --wsb-bg:            #030a06;
  --wsb-panel:         #071210;
  --wsb-border:        #0d2b20;
  --wsb-text:          #ccffe8;
  --wsb-muted:         #3a7a5a;
}

/* Creamsicle / warm tan mode */
body.theme-creamsicle {
  --wsb-orange:        #c87800;
  --wsb-orange-light:  #e09020;
  --wsb-bg:            #f5f0e8;
  --wsb-panel:         #ede8dc;
  --wsb-border:        #d4c9aa;
  --wsb-text:          #1a1208;
  --wsb-muted:         #7a6a4a;
  --wsb-chip:          rgba(237, 232, 220, 0.85);
  --wsb-chip-border:   rgba(100, 80, 30, 0.2);
}

/* Standard light mode */
body.theme-light {
  --wsb-orange:        #d97706;
  --wsb-orange-light:  #f59e0b;
  --wsb-bg:            #f1f3f5;
  --wsb-panel:         #ffffff;
  --wsb-border:        #dde1e7;
  --wsb-text:          #1c2533;
  --wsb-muted:         #64748b;
  --wsb-chip:          rgba(255, 255, 255, 0.9);
  --wsb-chip-border:   rgba(0, 0, 0, 0.12);
}

/* ── Bar container ───────────────────────────────────────────────────────── */
#wraptor-suite-bar {
  position: sticky;
  top: 0;
  z-index: var(--wsb-z);
  height: var(--wsb-height);
  background: linear-gradient(180deg, var(--wsb-panel) 0%, rgba(20, 20, 20, 0.97) 100%);
  border-bottom: 1px solid var(--wsb-border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.wsb-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  max-width: 1480px;
  margin: 0 auto;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}

body.theme-creamsicle #wraptor-suite-bar {
  background: linear-gradient(180deg, var(--wsb-panel) 0%, rgba(237, 232, 220, 0.97) 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
body.theme-light #wraptor-suite-bar {
  background: linear-gradient(180deg, #ffffff 0%, rgba(241, 243, 245, 0.97) 100%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* ── Brand (left side) ───────────────────────────────────────────────────── */
.wsb-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--wsb-text);
  flex-shrink: 0;
}

/* The suite mark — the full logotype (icon + "Wraptor" wordmark), not the
   bare icon. The bar's own "Wraptor Pro Suite" kicker still sits immediately
   to the right of this — that's deliberate, not leftover duplication to
   clean up; don't swap in the icon-only variant to "fix" it.
   Referenced as a background image rather than <img> so the browser only
   downloads the one variant the current theme applies; they are ~50KB gzipped
   each and only one is ever visible. */
.wsb-mark {
  width: 84px;
  height: 45px;                       /* 422.68 x 226.88 artwork, ~1.86:1 */
  flex-shrink: 0;
  background-image: url('/suite/wraptor-mark.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Light grounds get the light artwork, transparent like the dark one. */
body.theme-light .wsb-mark,
body.theme-creamsicle .wsb-mark {
  background-image: url('/suite/wraptor-mark-light.svg');
}

.wsb-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.wsb-kicker {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wsb-muted);
  line-height: 1;
  font-weight: 600;
}

.wsb-appname {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 2.5px;
  background: linear-gradient(135deg, var(--wsb-orange) 0%, var(--wsb-orange-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

/* ── Right controls ──────────────────────────────────────────────────────── */
.wsb-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Shared pill-button base ─────────────────────────────────────────────── */
.wsb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--wsb-chip-border);
  background: var(--wsb-chip);
  color: var(--wsb-text);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.12s ease, background 0.15s ease;
  white-space: nowrap;
}

.wsb-btn:hover {
  border-color: rgba(239, 162, 32, 0.5);
  transform: translateY(-1px);
}

/* ── App launcher ────────────────────────────────────────────────────────── */
.wsb-launcher {
  position: relative;
}

.wsb-launcher-btn {
  width: 42px;
  padding: 0;
}

.wsb-launcher-grid {
  display: grid;
  grid-template-columns: repeat(3, 4px);
  gap: 3.5px;
  pointer-events: none;
}

.wsb-launcher-dot {
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: var(--wsb-text);
  pointer-events: none;
  opacity: 0.85;
}

/* Launcher dropdown menu */
.wsb-launcher-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  /* A grid, not a list: nine apps as a column was a scan from top to bottom,
     and the artwork gives each one a shape you recognise before you read it. */
  display: none;
  grid-template-columns: repeat(3, 84px);
  gap: 6px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(10, 10, 10, 0.98);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.65);
  z-index: calc(var(--wsb-z) + 50);
}

.wsb-launcher-menu.open {
  display: grid;
}

body.theme-creamsicle .wsb-launcher-menu {
  background: rgba(245, 240, 232, 0.99);
  border-color: rgba(100, 80, 30, 0.2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
body.theme-light .wsb-launcher-menu {
  background: rgba(255, 255, 255, 0.99);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Launcher items */
.wsb-launcher-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 10px 6px 8px;
  border-radius: 10px;
  /* Was a slate blue (rgba(30,41,59)) that belonged to no theme and fought the
     bar's warm accent. Neutral lets the artwork carry the colour. */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  color: var(--wsb-text);
  text-decoration: none;
  /* 10px, not 11: "Swatchosaurus" is 13 characters with no space to break at,
     so at 11px it overflowed the 72px of text width in an 84px tile and
     overflow-wrap dropped the final "s" onto its own line. */
  font-size: 10px;
  font-family: 'Barlow', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.1px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}

.wsb-launcher-item:hover {
  border-color: rgba(239, 162, 32, 0.42);
  background: rgba(255, 255, 255, 0.09);
}

.wsb-launcher-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.wsb-launcher-label {
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.wsb-launcher-item.wsb-active {
  border-color: rgba(239, 162, 32, 0.55);
  background: linear-gradient(135deg, rgba(239, 162, 32, 0.2) 0%, rgba(249, 115, 22, 0.14) 100%);
}

.wsb-launcher-item.wsb-soon {
  color: var(--wsb-muted);
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.15);
  cursor: default;
  pointer-events: none;
}

body.theme-creamsicle .wsb-launcher-item {
  background: rgba(200, 190, 170, 0.35);
}
body.theme-creamsicle .wsb-launcher-item:hover {
  background: rgba(200, 190, 170, 0.6);
}
body.theme-light .wsb-launcher-item {
  background: rgba(241, 243, 245, 0.8);
}
body.theme-light .wsb-launcher-item:hover {
  background: rgba(220, 225, 232, 0.9);
}

.wsb-launcher-soon-badge {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wsb-muted);
  font-weight: 700;
}

/* Corner-pinned now that items are a column — in the old row layout this sat
   after the label, which in a grid tile would push it under the text. */
.wsb-launcher-active-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wsb-orange);
  flex-shrink: 0;
}

/* ── User pill ───────────────────────────────────────────────────────────── */
.wsb-user-wrap {
  position: relative;
}

.wsb-user-btn {
  padding: 0 12px 0 6px;
  background: rgba(239, 162, 32, 0.07);
  border-color: rgba(239, 162, 32, 0.18);
  gap: 8px;
}

.wsb-user-btn:hover {
  background: rgba(239, 162, 32, 0.14);
  border-color: rgba(239, 162, 32, 0.38);
}

.wsb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wsb-orange), #ff9933);
  color: #0a0a0a;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wsb-username {
  font-size: 13px;
  font-weight: 600;
  color: var(--wsb-text);
}

.wsb-ro-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffaa00;
  font-weight: 700;
}

.wsb-caret {
  font-size: 9px;
  color: var(--wsb-muted);
  margin-left: 2px;
}

/* User dropdown menu */
.wsb-user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 176px;
  display: none;
  flex-direction: column;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--wsb-border);
  background: rgba(10, 10, 10, 0.98);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.65);
  z-index: calc(var(--wsb-z) + 50);
}

.wsb-user-menu.open {
  display: flex;
}

body.theme-creamsicle .wsb-user-menu {
  background: rgba(245, 240, 232, 0.99);
  border-color: rgba(100, 80, 30, 0.2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
body.theme-light .wsb-user-menu {
  background: rgba(255, 255, 255, 0.99);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.wsb-user-menu-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--wsb-muted);
  padding: 4px 8px 6px;
  font-family: 'Barlow', system-ui, sans-serif;
}

/* Theme switcher */
.wsb-theme-row {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.wsb-theme-btn {
  flex: 1;
  padding: 6px 2px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: var(--wsb-muted);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.wsb-theme-btn:hover {
  border-color: var(--wsb-orange);
  color: var(--wsb-orange);
}

.wsb-theme-btn.wsb-theme-active {
  background: rgba(239, 162, 32, 0.12);
  border-color: var(--wsb-orange);
  color: var(--wsb-orange);
}

body.theme-creamsicle .wsb-theme-btn,
body.theme-light .wsb-theme-btn {
  border-color: rgba(0, 0, 0, 0.12);
}

/* Text size row — S / M / L */
.wsb-textsize-row {
  margin-bottom: 6px;
}
.wsb-textsize-btn {
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

/* Divider */
.wsb-divider {
  height: 1px;
  background: var(--wsb-border);
  margin: 4px 0;
}

/* Settings link (opens the shared Shop & Quote / Team settings page) */
.wsb-settings-link {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--wsb-text, #ccc);
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.wsb-settings-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Log out button */
.wsb-logout-btn {
  width: 100%;
  background: transparent;
  border: none;
  color: #ff6666;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.wsb-logout-btn:hover {
  background: rgba(255, 80, 80, 0.12);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .wsb-inner {
    padding: 0 12px;
    gap: 8px;
  }
  .wsb-kicker {
    display: none;
  }
  .wsb-appname {
    font-size: 18px;
  }
  .wsb-username {
    display: none;
  }
  .wsb-launcher-menu {
    left: 0;
    right: auto;
  }
}

@media (max-width: 420px) {
  .wsb-copy {
    display: none;
  }
}

/* ── QR pill (centered in bar, fixed 340px width) ────────────────────────── */
.wsb-qr-pill {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 340px; height: 44px;
  background: none;
  border: none;
  border-radius: 0;
  /* dark theme: count "(1)", "@" and "/ sq ft" inherit this gold (price/value are
     explicitly white; tech/light/cream override this per theme). */
  color: #f5a623;
  font-family: 'Barlow', system-ui, sans-serif;
  cursor: pointer;
  transition: opacity 120ms, filter 120ms;
  white-space: nowrap;
  overflow: visible;   /* let the banner ::before hang below the pill */
}
/* quotecart.svg banner skin (served next to this CSS at /suite/quotecart.svg).
   Sized to the pill WIDTH at the SVG's true ratio, so it's ~58px tall in the
   44px pill: the main banner body fills the pill and the pennant tail hangs
   below, floating over whatever sits south of the bar. Undistorted (the box
   matches the viewBox ratio). z-index:-1 keeps it behind the count/price text. */
.wsb-qr-pill::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 512.53 / 87.02;
  background: url("quotecart.svg") top center / 100% 100% no-repeat;
  z-index: -1;
  pointer-events: none;
}
.wsb-qr-pill:hover {
  filter: brightness(1.12);
}
/* Spring: on price change JS adds .wsb-qr-pill--bump; the whole pill slides
   back and forth a couple of times, decaying. Keyframes keep the -50%,-50%
   centering so only the horizontal offset animates. */
@keyframes wsb-qr-pill-spring {
  0%   { transform: translate(-50%, -50%); }
  16%  { transform: translate(calc(-50% + 10px), -50%); }
  33%  { transform: translate(calc(-50% - 7px), -50%); }
  50%  { transform: translate(calc(-50% + 4.5px), -50%); }
  66%  { transform: translate(calc(-50% - 2.5px), -50%); }
  82%  { transform: translate(calc(-50% + 1px), -50%); }
  100% { transform: translate(-50%, -50%); }
}
/* Note: intentionally NOT gated behind prefers-reduced-motion — this pill spring
   is an explicitly-requested feedback cue, and the shop's own browsers run with
   reduced-motion on, which would otherwise suppress it entirely. */
.wsb-qr-pill--bump { animation: wsb-qr-pill-spring 0.55s ease-out both; }
.wsb-qr-pill--empty { opacity: 0.4; }
.wsb-qr-pill--empty:hover { opacity: 0.7; }
.wsb-qr-pill-icon { font-size: 18px; line-height: 1; }
/* Off-standard warning: a job in the cart deviates from org pricing defaults. */
.wsb-qr-pill-warn {
  position: relative;
  font-size: 15px; line-height: 1;
  color: #ff5a5a;
  text-shadow: 0 0 5px rgba(255, 60, 60, 0.7);
  margin-right: 1px;
}

/* Only the glyph pulses — a pulsing panel would be unreadable. */
.wsb-qr-warn-icon {
  display: inline-block;
  animation: wsb-qr-warn-pulse 1.8s ease-in-out infinite;
}

/* Hover panel listing what differs. A title attribute can only carry one line
   of plain text, which is why this used to just say that pricing differed. */
.wsb-qr-warn-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  z-index: 1200;
  min-width: 270px;
  padding: 10px 12px;
  background: #14161c;
  border: 1px solid rgba(255, 90, 90, 0.35);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
  text-align: left;
  text-shadow: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  pointer-events: none;
}

.wsb-qr-pill-warn:hover .wsb-qr-warn-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.wsb-qr-warn-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ff8a8a;
  margin-bottom: 8px;
  white-space: nowrap;
}

.wsb-qr-warn-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wsb-qr-warn-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 3px 0;
  font-size: 12px;
  color: #d6d8de;
}

/* The bullet the field list reads as. */
.wsb-qr-warn-field::before {
  content: '•';
  color: #ff5a5a;
  margin-right: 7px;
}

.wsb-qr-warn-vals {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.wsb-qr-warn-vals b { color: #ffffff; font-weight: 700; }

.wsb-qr-warn-was {
  font-size: 10px;
  color: #7d818c;
  text-decoration: line-through;
}

.wsb-qr-warn-unit { font-size: 10px; color: #7d818c; }
@keyframes wsb-qr-warn-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.wsb-qr-pill-count {
  font-size: 14px; font-weight: 600;
  opacity: 0.75;
  letter-spacing: 0.04em;
}
.wsb-qr-pill-price {
  font-size: 26px; font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.01em;
}
.wsb-qr-pill-sqft-rate {
  display: inline-flex; align-items: baseline; gap: 3px;
}
.wsb-qr-pill-sqft-at {
  font-size: 13px; font-weight: 500; opacity: 0.7;
}
.wsb-qr-pill-sqft-val {
  font-size: 16px; font-weight: 700; color: #ffffff;
}
.wsb-qr-pill-sqft-lbl {
  font-size: 12px; font-weight: 400; opacity: 0.7;
}
.wsb-qr-pill-trash {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.45;
  transition: opacity 120ms;
}
.wsb-qr-pill-trash:hover { opacity: 1; }

/* ── QR dropdown — receipt card style ───────────────────────────────────── */
.wsb-qr-dropdown {
  position: fixed;
  z-index: calc(var(--wsb-z, 9000) + 50);
  width: 340px;
  background: rgba(10, 11, 22, 0.97);
  border: 1px solid rgba(129, 140, 248, 0.28);
  border-radius: 11px;
  overflow: hidden;
  box-shadow:
    0 6px 28px rgba(0,0,0,0.65),
    0 0 0 1px rgba(20,184,166,0.12) inset,
    0 0 20px rgba(20,184,166,0.18),
    0 0 48px rgba(20,184,166,0.08);
  font-family: 'Barlow', system-ui, sans-serif;
}
/* Card header */
.wsb-qr-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 13px;
  background: linear-gradient(135deg, rgba(129,140,248,.13) 0%, rgba(99,102,241,.07) 100%);
  border-bottom: 1px solid rgba(129,140,248,.28);
}
.wsb-qr-card-brand {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: #818cf8;
}
.wsb-qr-card-dino { font-size: 14px; line-height: 1; }
.wsb-qr-card-count {
  font-size: 9px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: 4px; padding: 2px 8px;
  color: #4ade80;
  background: rgba(74,222,128,.12);
  border: 1px solid rgba(74,222,128,.28);
}
/* Card body: vertical dark layout */
.wsb-qr-card-body {
  display: flex; flex-direction: column; padding: 10px 13px; gap: 2px;
}
.wsb-qr-eyebrow {
  font-size: 8px; font-weight: 800; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(129,140,248,.6); margin-bottom: 6px;
}
/* Line items */
.wsb-qr-line {
  display: flex; align-items: baseline; gap: 4px; padding: 2px 0;
}
.wsb-qr-line-desc {
  font-size: 11px; font-weight: 600; color: #cbd5e1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 1; min-width: 0;
}
.wsb-qr-line-dots {
  flex: 1; border-bottom: 1px dotted rgba(100,116,139,.5); margin-bottom: 3px; min-width: 8px;
}
.wsb-qr-line-amt {
  font-size: 11px; font-weight: 700; color: #94a3b8; white-space: nowrap; flex-shrink: 0;
}
/* Total row */
.wsb-qr-total {
  display: flex; align-items: baseline; gap: 4px;
  padding: 7px 0 4px; margin-top: 4px;
  border-top: 1px solid rgba(129,140,248,.22);
}
.wsb-qr-total-lbl {
  flex: 1; font-size: 9px; font-weight: 900;
  letter-spacing: .15em; text-transform: uppercase; color: rgba(129,140,248,.7);
}
.wsb-qr-total-val { font-size: 13px; font-weight: 800; color: #e2e8f0; }
/* Inline per-item action buttons */
.wsb-qr-line-actions {
  display: flex; gap: 3px; flex-shrink: 0; align-items: center; margin-left: 6px;
}
.wsb-qr-dd-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: #64748b;
  border-radius: 4px; padding: 2px 6px;
  font-size: 10px; font-family: 'Barlow', system-ui, sans-serif;
  cursor: pointer; white-space: nowrap;
  transition: background 100ms, border-color 100ms, color 100ms;
}
.wsb-qr-dd-btn:hover {
  background: rgba(20,184,166,.18);
  border-color: rgba(20,184,166,.45);
  color: #2dd4bf;
}
/* Nav footer — always-visible app links */
.wsb-qr-nav {
  display: flex; gap: 4px; padding: 8px 13px 10px;
  border-top: 1px solid rgba(129,140,248,.15);
}
.wsb-qr-nav-btn {
  flex: 1; text-align: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: #64748b;
  border-radius: 6px; padding: 6px 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  font-family: 'Barlow', system-ui, sans-serif;
  text-decoration: none;
  transition: background 100ms, border-color 100ms, color 100ms;
}
.wsb-qr-nav-btn:hover {
  background: rgba(20,184,166,.15);
  border-color: rgba(20,184,166,.4);
  color: #2dd4bf;
}
/* Empty / idle state */
.wsb-qr-idle {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; font-size: 12px; color: rgba(148,163,184,.55); line-height: 1.5;
}
/* ══════════════════════════════════════════════════════════════════════════
   QR CART PILL + DROPDOWN — per-theme looks
   The base styles above are dark-first (teal tint + white price, dark card),
   which is unreadable on the light backgrounds. These overrides give the pill
   real contrast on every theme and turn the dropdown into a light receipt on
   the light / creamsicle themes. Dark + tech stay dark.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── PILL · per-theme banner ── the ::before uses a recolored quotecart-*.svg per
   theme, and the text flips to stay readable (light banners get dark text). Default
   (dark) uses quotecart.svg (dark-teal body) with the base white price / teal count. */

/* tech — dark green banner, neon accent, light text */
body.theme-tech .wsb-qr-pill::before {
  background-image: url("quotecart-tech.svg");
  /* Bright neon glow around the tech2 outline + a slight drop shadow (applied here,
     not inside the SVG, so the glow isn't clipped by the SVG viewBox). */
  filter: drop-shadow(0 0 2px #00ff88) drop-shadow(0 0 4px rgba(0,255,136,.55)) drop-shadow(0 1.5px 1.5px rgba(0,0,0,.5));
}
body.theme-tech .wsb-qr-pill { color: #00ff88; }
body.theme-tech .wsb-qr-pill-price,
body.theme-tech .wsb-qr-pill-sqft-val { color: #eafff4; }

/* light — light-teal banner, dark teal text */
body.theme-light .wsb-qr-pill::before { background-image: url("quotecart-light.svg"); }
body.theme-light .wsb-qr-pill { color: #0d7a6e; }
body.theme-light .wsb-qr-pill-price,
body.theme-light .wsb-qr-pill-sqft-val { color: #134e4a; }

/* creamsicle — warm cream banner, dark brown/orange text */
body.theme-creamsicle .wsb-qr-pill::before { background-image: url("quotecart-cream.svg"); }
body.theme-creamsicle .wsb-qr-pill { color: #a85f00; }
body.theme-creamsicle .wsb-qr-pill-price,
body.theme-creamsicle .wsb-qr-pill-sqft-val { color: #6b3e00; }

/* ── DROPDOWN · light receipt (light + creamsicle) ── */
body.theme-light .wsb-qr-dropdown { background: #ffffff; border-color: rgba(13,148,136,.35); box-shadow: 0 8px 28px rgba(0,0,0,.18), 0 0 0 1px rgba(13,148,136,.10) inset; }
body.theme-creamsicle .wsb-qr-dropdown { background: #fffaf2; border-color: rgba(200,120,0,.35); box-shadow: 0 8px 28px rgba(120,80,0,.18), 0 0 0 1px rgba(200,120,0,.10) inset; }

/* shared dark text on the light receipt */
body.theme-light .wsb-qr-line-desc,
body.theme-creamsicle .wsb-qr-line-desc { color: #1c2533; }
body.theme-light .wsb-qr-line-amt,
body.theme-creamsicle .wsb-qr-line-amt { color: #475569; }
body.theme-light .wsb-qr-total-val,
body.theme-creamsicle .wsb-qr-total-val { color: #0f172a; }
body.theme-light .wsb-qr-line-dots,
body.theme-creamsicle .wsb-qr-line-dots { border-bottom-color: rgba(0,0,0,.25); }
body.theme-light .wsb-qr-idle,
body.theme-creamsicle .wsb-qr-idle { color: #64748b; }
body.theme-light .wsb-qr-card-count,
body.theme-creamsicle .wsb-qr-card-count { color: #15803d; background: rgba(22,163,74,.12); border-color: rgba(22,163,74,.30); }
body.theme-light .wsb-qr-dd-btn,
body.theme-creamsicle .wsb-qr-dd-btn,
body.theme-light .wsb-qr-nav-btn,
body.theme-creamsicle .wsb-qr-nav-btn { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); color: #475569; }
body.theme-light .wsb-qr-nav,
body.theme-creamsicle .wsb-qr-nav { border-top-color: rgba(0,0,0,.10); }

/* light accents (teal) */
body.theme-light .wsb-qr-card-header { background: linear-gradient(135deg, rgba(13,148,136,.10) 0%, rgba(13,148,136,.04) 100%); border-bottom-color: rgba(13,148,136,.25); }
body.theme-light .wsb-qr-card-brand { color: #0d7a6e; }
body.theme-light .wsb-qr-eyebrow { color: rgba(13,148,136,.75); }
body.theme-light .wsb-qr-total { border-top-color: rgba(13,148,136,.25); }
body.theme-light .wsb-qr-total-lbl { color: rgba(13,148,136,.85); }
body.theme-light .wsb-qr-dd-btn:hover,
body.theme-light .wsb-qr-nav-btn:hover { background: rgba(13,148,136,.12); border-color: rgba(13,148,136,.4); color: #0d7a6e; }

/* creamsicle accents (orange) */
body.theme-creamsicle .wsb-qr-card-header { background: linear-gradient(135deg, rgba(200,120,0,.10) 0%, rgba(200,120,0,.04) 100%); border-bottom-color: rgba(200,120,0,.25); }
body.theme-creamsicle .wsb-qr-card-brand { color: #a85f00; }
body.theme-creamsicle .wsb-qr-eyebrow { color: rgba(200,120,0,.75); }
body.theme-creamsicle .wsb-qr-total { border-top-color: rgba(200,120,0,.25); }
body.theme-creamsicle .wsb-qr-total-lbl { color: rgba(200,120,0,.85); }
body.theme-creamsicle .wsb-qr-dd-btn:hover,
body.theme-creamsicle .wsb-qr-nav-btn:hover { background: rgba(200,120,0,.12); border-color: rgba(200,120,0,.4); color: #a85f00; }

/* ── Per-app control slots ──
   Filled by a host app (Dashboard) via React portal; collapse when empty so
   they take no space on apps that don't use them. */
.wsb-left { display: flex; align-items: center; gap: 14px; }
.wsb-app-slot-left { display: flex; align-items: center; gap: 8px; }
.wsb-app-slot-left:empty { display: none; }
.wsb-app-slot-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px;
}
.wsb-app-slot-center:empty { display: none; }
.wsb-app-menu-slot:empty { display: none; }
.wsb-app-menu-slot:not(:empty) { margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.10); }
body.theme-light .wsb-app-menu-slot:not(:empty),
body.theme-creamsicle .wsb-app-menu-slot:not(:empty) { border-bottom-color: rgba(0,0,0,.12); }

/* ════════════════════════════════════════════════════════════════════════
   SHOP ACTIVITY — bell + dropdown
   What other people have been doing. Lives in the bar so it reaches you
   wherever you are rather than only on a page you have to remember to visit.
   ════════════════════════════════════════════════════════════════════════ */
.wsb-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--wsb-chip-border);
  background: var(--wsb-chip);
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
  flex-shrink: 0;
}
.wsb-bell:hover { border-color: rgba(239, 162, 32, 0.5); transform: translateY(-1px); }
.wsb-bell-icon { font-size: 15px; line-height: 1; filter: saturate(0.9); }

/* Unread gets a warm ring — noticeable across a desk, not alarming. */
.wsb-bell--unread { border-color: rgba(239, 162, 32, 0.65); }

/* How many events have landed since this user last opened the bell.
   Green rather than red: nothing here is wrong, it's just news — a red badge
   reads as an error and makes people anxious about a feed that only says
   someone moved a job. The ring keeps it legible against the bar; the glow is
   what makes it catch the eye from across a desk. */
.wsb-bell-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
  color: #04210f;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow:
    0 0 0 2px rgba(10, 10, 10, 0.92),      /* ring, so it reads over the bell */
    0 0 9px rgba(74, 222, 128, 0.85),      /* the glow */
    0 0 18px rgba(74, 222, 128, 0.35);
  animation: wsb-bell-breathe 2.6s ease-in-out infinite;
}

/* A slow breath rather than a blink — present without nagging. */
@keyframes wsb-bell-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(10, 10, 10, 0.92),
      0 0 9px rgba(74, 222, 128, 0.85),
      0 0 18px rgba(74, 222, 128, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(10, 10, 10, 0.92),
      0 0 13px rgba(74, 222, 128, 1),
      0 0 26px rgba(74, 222, 128, 0.5);
  }
}

/* One pop when the number actually goes up, so new activity is noticeable
   without the badge constantly moving. */
.wsb-bell-badge--pop { animation: wsb-bell-pop .45s ease-out; }

@keyframes wsb-bell-pop {
  0%   { transform: scale(1);   }
  35%  { transform: scale(1.45); }
  100% { transform: scale(1);   }
}

@media (prefers-reduced-motion: reduce) {
  .wsb-bell-badge, .wsb-bell-badge--pop { animation: none; }
}

/* Light themes: the dark ring would look like a hole punched in the bar. */
body.theme-light .wsb-bell-badge,
body.theme-creamsicle .wsb-bell-badge {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.95),
    0 0 9px rgba(34, 197, 94, 0.6);
  animation: none;
}

.wsb-act-dropdown {
  position: fixed;
  z-index: 1300;
  width: 370px;
  max-width: calc(100vw - 16px);
  background: #14161c;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  overflow: hidden;
}
.wsb-act-dropdown.wsb-act-open { opacity: 1; visibility: visible; transform: translateY(0); }

.wsb-act-head {
  padding: 11px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #94a3b8;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.wsb-act-list { max-height: 340px; overflow-y: auto; }

.wsb-act-row {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.07);
}
.wsb-act-row:last-child { border-bottom: none; }

/* A colour per app, so you can tell at a glance whether something happened on
   the board, in the catalog, or in a quote — without reading every line. */
.wsb-act-app {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #64748b;
  transform: translateY(-1px);
}
.wsb-act-app--dashboard   { background: #4ecdc4; }
.wsb-act-app--boneyard    { background: #efa220; }
.wsb-act-app--quoteraptor { background: #818cf8; }
.wsb-act-app--oms         { background: #4ade80; }
.wsb-act-app--rollcalc    { background: #ff6b6b; }
/* Suite releases — white, because they come from us rather than a colleague. */
.wsb-act-app--suite       { background: #e8eaee; }

.wsb-act-text {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #d6d8de;
}
.wsb-act-text b { color: #ffffff; font-weight: 700; }

/* ── What the cart is carrying ────────────────────────────────────────────
   The cart holds pieces measured in RollCalc or SheetCalc, the estimate they
   were priced into, and the work order the shop makes from it. Showing all
   three — and whether they are joined up — is what stops a suite with this
   many doors feeling like separate tools that share a browser. */
.wsb-qr-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
}
.wsb-qr-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px 3px 8px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.wsb-qr-chip--quote { color: #0d9488; border-color: rgba(13, 148, 136, .45); background: rgba(13, 148, 136, .12); }
.wsb-qr-chip--job   { color: #d97706; border-color: rgba(217, 119, 6, .45);  background: rgba(217, 119, 6, .12); }
.wsb-qr-chip--card  { color: #2563eb; border-color: rgba(37, 99, 235, .45);  background: rgba(37, 99, 235, .12); }
.wsb-qr-chip:hover { filter: brightness(1.2); }
.wsb-qr-chip-x {
  border: 0;
  background: none;
  color: inherit;
  opacity: .5;
  font-size: 13px;
  line-height: 1;
  padding: 0 3px;
  cursor: pointer;
}
.wsb-qr-chip-x:hover { opacity: 1; }
.wsb-qr-chip-linked {
  display: inline-flex;
  align-items: center;
  color: #16a34a;
  cursor: default;
}
.wsb-qr-chip-linked svg { display: block; }

/* Which tool measured this piece. The shop thinks in tools, so the cart says
   so rather than showing an undifferentiated list. */
.wsb-qr-kind {
  flex: 0 0 auto;
  margin-right: 7px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(148, 163, 184, .18);
  color: var(--wsb-muted);
}
.wsb-qr-kind--rollcalc  { background: rgba(217, 119, 6, .18);  color: #d97706; }
.wsb-qr-kind--sheetcalc { background: rgba(13, 148, 136, .18); color: #0d9488; }
.wsb-qr-kind--vehicle   { background: rgba(99, 102, 241, .18); color: #818cf8; }

/* A move names two things worth picking out: the job, so you can spot yours at
   a glance, and the column, in the colour it wears on the wall. */
.wsb-act-job { color: #ffffff; font-weight: 700; }
.wsb-act-col { font-weight: 700; }
body.theme-light .wsb-act-job,
body.theme-creamsicle .wsb-act-job { color: #0f172a; }

/* Individual notes from a merged run of releases. */
.wsb-act-notes {
  margin: 4px 0 0;
  padding: 0 0 0 14px;
  list-style: disc;
  opacity: .85;
}
.wsb-act-notes li { margin: 2px 0; }

.wsb-act-time {
  flex-shrink: 0;
  font-size: 10.5px;
  color: #7d818c;
  font-variant-numeric: tabular-nums;
}

.wsb-act-empty {
  padding: 26px 16px;
  text-align: center;
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

.wsb-act-all {
  display: block;
  padding: 10px 14px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  color: #efa220;
  text-decoration: none;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(239, 162, 32, 0.05);
}
.wsb-act-all:hover { background: rgba(239, 162, 32, 0.12); }

/* Light themes: the panel has to sit on a light ground too. */
body.theme-light .wsb-act-dropdown,
body.theme-creamsicle .wsb-act-dropdown {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}
body.theme-light .wsb-act-text,
body.theme-creamsicle .wsb-act-text { color: #334155; }
body.theme-light .wsb-act-text b,
body.theme-creamsicle .wsb-act-text b { color: #0f172a; }
body.theme-light .wsb-act-head,
body.theme-creamsicle .wsb-act-head { color: #475569; }
body.theme-light .wsb-act-row,
body.theme-creamsicle .wsb-act-row { border-bottom-color: rgba(15, 23, 42, 0.07); }

/* Shown beside Log In when the bar has just cleared an expired session, so the
   sign-out has a visible reason rather than looking like a glitch. */
.wsb-session-note {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #f59e0b;
  margin-right: 10px;
  white-space: nowrap;
}