/* ============================================================
   Netcom Internal Team Tools — shared styles
   Used by /team/login.html and /team/procurement.html
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   Defensive rule against a bug class we hit 4x in 48 hours:
   HTML's `hidden` attribute sets display:none in the user-agent
   stylesheet, but any author CSS with `display: flex/block/grid`
   wins via specificity. Result: element.hidden=true is a no-op
   and components get stuck visible.
   Forcing !important here closes the whole class of bug globally.
   (2026-04-21 post-mortem)
   ──────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }


:root {
  --team-bg: #0B1628;
  --team-bg-card: #ffffff;
  --team-bg-soft: #f5f7f8;
  --team-bg-softer: #fafbfc;
  --team-ink: #0B1628;
  --team-ink-soft: #59656F;
  --team-ink-muted: #8a9199;
  --team-border: #e8eced;
  --team-border-soft: #eef0f1;
  --team-accent: #2FC3E5;
  --team-accent-ink: #0d7994;
  --team-success: #16a34a;
  --team-warning: #f59e0b;
  --team-danger: #dc2626;
  --team-tier-1: #16a34a;
  --team-tier-2: #3b82f6;
  --team-tier-3: #f59e0b;
  --team-tier-4: #6b7280;
  --team-shadow-sm: 0 1px 2px rgba(11, 22, 40, 0.06);
  --team-shadow: 0 4px 16px rgba(11, 22, 40, 0.08);
  --team-shadow-lg: 0 12px 40px rgba(11, 22, 40, 0.15);
  --team-radius: 10px;
  --topbar-h: 56px;
  --status-h: 72px;
  --splist-w: 360px;
}

.team-body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--team-bg-soft);
  color: var(--team-ink);
  min-height: 100vh;
  margin: 0;
  line-height: 1.5;
}

/* Workspace view has no overall page scroll — panes scroll internally */
.team-body--workspace {
  overflow: hidden;
  height: 100vh;
}

/* ============================================================
   COMMAND CENTER (cc-*) — new single-page at-a-glance dashboard
   Replaces the 2-pane workspace layout for /team/procurement
   ============================================================ */

.cc-dashboard {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Status strip --- */
.cc-status {
  background: linear-gradient(135deg, #0B1628 0%, #153a52 100%);
  color: #fff;
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(11, 22, 40, 0.15);
}

.cc-status__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cc-status__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.1;
}

.cc-status__subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 2px;
}

.cc-status__stats {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.cc-stat {
  padding: 4px 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  min-width: 80px;
}

.cc-stat:first-child { border-left: 0; padding-left: 0; }

.cc-stat__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--team-accent);
  font-weight: 600;
  margin-bottom: 2px;
}

.cc-stat__value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.cc-stat--hot .cc-stat__value { color: #fde68a; }

.cc-help {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: Georgia, serif;
  font-style: italic;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.cc-help:hover { background: rgba(255,255,255,0.16); }

@media (max-width: 720px) {
  .cc-status { flex-wrap: wrap; }
  .cc-status__subtitle { display: none; }
  .cc-stat { min-width: 0; padding: 4px 10px; }
  .cc-stat__label { font-size: 9px; }
  .cc-stat__value { font-size: 16px; }
}

/* --- Uploads section (collapsible) --- */
.cc-uploads {
  background: #fff;
  border: 1px solid var(--team-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--team-shadow-sm);
}

.cc-uploads__wrap {
  display: block;
}

.cc-uploads__summary {
  list-style: none;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  color: var(--team-ink);
  transition: background 0.15s;
}

.cc-uploads__summary:hover {
  background: var(--team-bg-softer);
}

.cc-uploads__summary::-webkit-details-marker { display: none; }

.cc-uploads__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--team-ink);
}

.cc-uploads__title svg {
  color: var(--team-accent-ink);
}

.cc-uploads__hint {
  font-size: 12px;
  color: var(--team-ink-soft);
  font-weight: 400;
}

.cc-uploads__count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--team-ink-soft);
  padding: 2px 10px;
  background: var(--team-bg-soft);
  border-radius: 10px;
}

.cc-uploads__caret {
  color: var(--team-ink-muted);
  font-size: 10px;
  transition: transform 0.2s;
}

.cc-uploads__wrap[open] .cc-uploads__caret { transform: rotate(180deg); }

.cc-uploads__body {
  padding: 0 20px 18px;
  border-top: 1px solid var(--team-border-soft);
}

.cc-uploads__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 16px;
  padding-top: 16px;
}

@media (max-width: 780px) {
  .cc-uploads__grid { grid-template-columns: 1fr; }
}

/* Uploader form */
.cc-uploader {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cc-uploader__drop {
  display: block;
  border: 2px dashed var(--team-border);
  border-radius: 10px;
  padding: 28px 20px;
  background: var(--team-bg-softer);
  text-align: center;
  color: var(--team-ink-soft);
  cursor: pointer;
  transition: all 0.15s;
}

.cc-uploader__drop:hover {
  border-color: var(--team-accent);
  background: rgba(47, 195, 229, 0.04);
  color: var(--team-ink);
}

.cc-uploader__drop--dragover {
  border-color: var(--team-accent);
  background: rgba(47, 195, 229, 0.1);
  color: var(--team-accent-ink);
}

.cc-uploader__drop--has-file {
  border-style: solid;
  border-color: var(--team-success);
  background: #f0fdf4;
  color: #14532d;
}

.cc-uploader__drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cc-uploader__drop-text {
  font-size: 13px;
  line-height: 1.5;
}

.cc-uploader__drop-text strong { color: var(--team-ink); }
.cc-uploader__drop-text span { font-size: 11px; color: var(--team-ink-muted); }

.cc-uploader__drop--has-file .cc-uploader__drop-text strong { color: #14532d; }

.cc-uploader__fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cc-uploader__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.cc-uploader__field > span {
  font-weight: 600;
  color: var(--team-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
}

.cc-uploader__field select,
.cc-uploader__field input {
  padding: 8px 10px;
  border: 1px solid var(--team-border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--team-ink);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
}

.cc-uploader__field select:focus,
.cc-uploader__field input:focus {
  outline: none;
  border-color: var(--team-accent);
  box-shadow: 0 0 0 3px rgba(47, 195, 229, 0.12);
}

.cc-uploader__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.cc-uploader__btn {
  padding: 8px 18px;
  background: var(--team-ink);
  color: #fff;
  border: 1px solid var(--team-ink);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}

.cc-uploader__btn:hover:not(:disabled) { background: #15253f; }
.cc-uploader__btn:disabled { opacity: 0.5; cursor: not-allowed; }

.cc-uploader__status {
  font-size: 12px;
  color: var(--team-ink-soft);
  flex: 1;
}

.cc-uploader__status--error { color: var(--team-danger); }
.cc-uploader__status--success { color: var(--team-success); }

/* Recent uploads list */
.cc-uploader__recent {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.cc-uploader__recent-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--team-ink-soft);
  margin-bottom: 4px;
}

.cc-uploader__recent-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.cc-uploader__recent-empty {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--team-ink-muted);
  background: var(--team-bg-soft);
  border-radius: 8px;
}

.cc-upload-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: var(--team-bg-soft);
  border-radius: 8px;
  font-size: 12px;
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}

.cc-upload-item:hover {
  background: #fff;
  border-color: var(--team-border);
}

.cc-upload-item__icon {
  width: 32px;
  height: 32px;
  background: #fff;
  border: 1px solid var(--team-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--team-ink-soft);
  text-transform: uppercase;
}

.cc-upload-item__icon--pdf { background: #fee2e2; color: #7f1d1d; }
.cc-upload-item__icon--xls { background: #dcfce7; color: #14532d; }
.cc-upload-item__icon--csv { background: #dcfce7; color: #14532d; }
.cc-upload-item__icon--img { background: #dbeafe; color: #1e3a8a; }
.cc-upload-item__icon--txt { background: #f3f4f6; color: #374151; }
.cc-upload-item__icon--eml { background: #fef3c7; color: #78350f; }

.cc-upload-item__main { min-width: 0; }

.cc-upload-item__name {
  font-weight: 600;
  color: var(--team-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.cc-upload-item__name a { color: inherit; text-decoration: none; }
.cc-upload-item__name a:hover { color: var(--team-accent-ink); text-decoration: underline; }

.cc-upload-item__meta {
  font-size: 11px;
  color: var(--team-ink-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-upload-item__actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.cc-upload-item__btn {
  padding: 3px 8px;
  border: 1px solid var(--team-border);
  background: #fff;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--team-ink-soft);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}

.cc-upload-item__btn:hover {
  background: var(--team-bg-soft);
  color: var(--team-ink);
}

.cc-upload-item__btn--danger {
  color: var(--team-danger);
  border-color: #fecaca;
}

.cc-upload-item__btn--danger:hover {
  background: #fef2f2;
  color: #7f1d1d;
}

/* Supplier drawer: files section */
.drawer-files {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drawer-files__empty {
  padding: 14px 18px;
  text-align: center;
  color: var(--team-ink-muted);
  font-size: 13px;
  background: var(--team-bg-soft);
  border-radius: 8px;
}

.drawer-files__upload-cta {
  padding: 7px 14px;
  background: var(--team-accent);
  color: #0B1628;
  border: 1px solid var(--team-accent);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
  align-self: flex-start;
  margin-top: 6px;
}

.drawer-files__upload-cta:hover {
  background: #1fa8c7;
  border-color: #1fa8c7;
}

/* --- Sourcing Requests (procurement-for-deal) --- */
.cc-sourcing {
  background: #fff;
  border: 1px solid var(--team-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--team-shadow-sm);
}

.cc-sourcing__wrap { display: block; }

.cc-sourcing__summary {
  list-style: none;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  transition: background 0.15s;
}

.cc-sourcing__summary:hover { background: var(--team-bg-softer); }
.cc-sourcing__summary::-webkit-details-marker { display: none; }

.cc-sourcing__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--team-ink);
}

.cc-sourcing__title svg { color: var(--team-accent-ink); }

.cc-sourcing__hint {
  font-size: 12px;
  color: var(--team-ink-soft);
}

.cc-sourcing__count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--team-ink-soft);
  padding: 2px 10px;
  background: var(--team-bg-soft);
  border-radius: 10px;
}

.cc-sourcing__body {
  padding: 0 20px 18px;
  border-top: 1px solid var(--team-border-soft);
  padding-top: 14px;
}

.cc-sourcing__form {
  margin-bottom: 14px;
  padding: 12px;
  background: var(--team-bg-softer);
  border-radius: 8px;
}

.cc-sourcing__form-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr 80px 60px 80px 110px auto;
  gap: 10px;
  align-items: end;
}

@media (max-width: 960px) {
  .cc-sourcing__form-row { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

.cc-sourcing__form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--team-ink-soft);
}

.cc-sourcing__form input {
  padding: 7px 10px;
  border: 1px solid var(--team-border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  -webkit-appearance: none;
  text-transform: none;
  letter-spacing: normal;
  color: var(--team-ink);
  font-weight: 400;
}

.cc-sourcing__form input:focus {
  outline: none;
  border-color: var(--team-accent);
  box-shadow: 0 0 0 3px rgba(47, 195, 229, 0.12);
}

.cc-sourcing__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc-sourcing__empty {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--team-ink-muted);
  background: var(--team-bg-soft);
  border-radius: 8px;
}

.cc-sourcing-item {
  background: #fff;
  border: 1px solid var(--team-border);
  border-left: 3px solid var(--team-accent);
  border-radius: 8px;
  padding: 12px 14px;
}

.cc-sourcing-item--open    { border-left-color: var(--team-warning); }
.cc-sourcing-item--sourced { border-left-color: var(--team-accent); }
.cc-sourcing-item--quoted  { border-left-color: #3b82f6; }
.cc-sourcing-item--won     { border-left-color: var(--team-success); }
.cc-sourcing-item--lost    { border-left-color: var(--team-ink-muted); }

.cc-sourcing-item__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
}

.cc-sourcing-item__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--team-ink);
  line-height: 1.3;
}

.cc-sourcing-item__meta {
  font-size: 11px;
  color: var(--team-ink-muted);
  margin-top: 2px;
}

.cc-sourcing-item__status-select {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--team-border);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  color: var(--team-ink);
}

.cc-sourcing-item__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 16px;
  font-size: 12px;
  color: var(--team-ink);
  padding: 6px 0;
}

.cc-sourcing-item__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cc-sourcing-item__field-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--team-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cc-sourcing-item__suggestions {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--team-border-soft);
}

.cc-sourcing-item__suggestions-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--team-ink-soft);
  margin-bottom: 6px;
}

.cc-sourcing-item__suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cc-sourcing-item__suggestion {
  display: grid;
  grid-template-columns: 1fr 80px 80px auto;
  gap: 8px;
  font-size: 12px;
  padding: 4px 8px;
  background: var(--team-bg-soft);
  border-radius: 4px;
}

.cc-sourcing-item__suggestion-best {
  background: #dcfce7;
  color: #065f46;
}

.cc-sourcing-item__actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
}

/* --- Watchlists --- */
.cc-watchlists {
  background: #fff;
  border: 1px solid var(--team-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--team-shadow-sm);
}

.cc-watchlists__wrap { display: block; }

.cc-watchlists__summary {
  list-style: none;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  color: var(--team-ink);
  transition: background 0.15s;
}

.cc-watchlists__summary:hover { background: var(--team-bg-softer); }
.cc-watchlists__summary::-webkit-details-marker { display: none; }

.cc-watchlists__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.cc-watchlists__title svg { color: var(--team-accent-ink); }

.cc-watchlists__hint {
  font-size: 12px;
  color: var(--team-ink-soft);
  font-weight: 400;
}

.cc-watchlists__count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--team-ink-soft);
  padding: 2px 10px;
  background: var(--team-bg-soft);
  border-radius: 10px;
}

.cc-watchlists__caret {
  color: var(--team-ink-muted);
  font-size: 10px;
  transition: transform 0.2s;
}

.cc-watchlists__wrap[open] .cc-watchlists__caret { transform: rotate(180deg); }

.cc-watchlists__body {
  padding: 0 20px 18px;
  border-top: 1px solid var(--team-border-soft);
  padding-top: 14px;
}

.cc-watchlist-form {
  margin-bottom: 14px;
  padding: 12px;
  background: var(--team-bg-softer);
  border-radius: 8px;
}

.cc-watchlist-form__row {
  display: grid;
  grid-template-columns: 180px 1fr 100px 100px auto;
  gap: 10px;
  align-items: end;
}

@media (max-width: 820px) {
  .cc-watchlist-form__row { grid-template-columns: 1fr 1fr; }
}

.cc-watchlist-form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--team-ink-soft);
}

.cc-watchlist-form label span { color: var(--team-ink-soft); }

.cc-watchlist-form select,
.cc-watchlist-form input {
  padding: 7px 10px;
  border: 1px solid var(--team-border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  -webkit-appearance: none;
  text-transform: none;
  letter-spacing: normal;
  color: var(--team-ink);
  font-weight: 400;
}

.cc-watchlist-form select:focus,
.cc-watchlist-form input:focus {
  outline: none;
  border-color: var(--team-accent);
  box-shadow: 0 0 0 3px rgba(47, 195, 229, 0.12);
}

.cc-watchlists__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cc-watchlists__empty {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--team-ink-muted);
  background: var(--team-bg-soft);
  border-radius: 8px;
}

.cc-watchlist-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--team-border);
  border-radius: 8px;
  font-size: 13px;
}

.cc-watchlist-item__emoji { font-size: 16px; }

.cc-watchlist-item__text {
  color: var(--team-ink);
  line-height: 1.4;
}

.cc-watchlist-item__text strong { font-weight: 700; }

.cc-watchlist-item__meta {
  font-size: 11px;
  color: var(--team-ink-muted);
}

.cc-watchlist-item__status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--team-bg-soft);
  color: var(--team-ink-soft);
}

.cc-watchlist-item__status--triggered { background: #fef3c7; color: #78350f; }
.cc-watchlist-item__status--match { background: #dcfce7; color: #14532d; }

/* --- Inventory Matrix (cross-supplier parsed stock) --- */
.cc-matrix {
  background: #fff;
  border: 1px solid var(--team-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--team-shadow-sm);
}

.cc-matrix[hidden] { display: none !important; }

/* Collapsible wrap around the matrix. Same visual pattern as the POs /
   Catalog / Watchlists sections so the whole procurement page feels
   consistent. */
.cc-matrix__wrap { display: block; }
.cc-matrix__summary-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.cc-matrix__summary-bar::-webkit-details-marker { display: none; }
.cc-matrix__summary-bar:hover {
  background: #f8fafc;
}
.cc-matrix__summary-stats {
  margin-left: auto;
  margin-right: 4px;
  font-size: 12px;
  color: var(--team-ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}
.cc-matrix__caret {
  color: var(--team-ink-soft);
  font-size: 12px;
  transition: transform 0.15s;
}
.cc-matrix__wrap[open] .cc-matrix__caret {
  transform: rotate(180deg);
}
.cc-matrix__wrap:not([open]) .cc-matrix__summary-bar {
  border-bottom: none;
}
.cc-matrix__wrap[open] .cc-matrix__summary-bar {
  border-bottom: 1px solid var(--team-border-soft);
}
.cc-matrix__body-wrap { display: block; }

.cc-matrix__header {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid var(--team-border-soft);
  flex-wrap: wrap;
}

.cc-matrix__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--team-ink);
}

.cc-matrix__icon { font-size: 18px; }

.cc-matrix__title-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #fef3c7;
  color: #78350f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 4px;
}

.cc-matrix__framing {
  font-size: 12.5px;
  color: var(--team-ink);
  margin: 6px 0 2px;
  line-height: 1.5;
  background: #fffbeb;
  border-left: 3px solid #fcd34d;
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  max-width: 760px;
}
.cc-matrix__framing strong { color: var(--team-ink); }
.cc-matrix__framing-link {
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 600;
}
.cc-matrix__framing-link:hover { text-decoration: underline; }

.cc-matrix__subtitle {
  font-size: 12px;
  color: var(--team-ink-soft);
  margin: 6px 0 0;
  line-height: 1.4;
}

.cc-matrix__controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.cc-matrix__search-wrap { position: relative; }

.cc-matrix__search-wrap input {
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--team-ink);
  background: var(--team-bg-softer);
  border: 1px solid var(--team-border);
  border-radius: 8px;
  width: 240px;
  transition: border-color 0.15s, width 0.2s;
  -webkit-appearance: none;
}

.cc-matrix__search-wrap input:focus {
  outline: none;
  border-color: var(--team-accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47, 195, 229, 0.12);
}

.cc-matrix__filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.cc-matrix__filter {
  padding: 4px 10px;
  border: 1px solid var(--team-border);
  background: #fff;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--team-ink-soft);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.cc-matrix__filter:hover { background: var(--team-bg-soft); color: var(--team-ink); }
.cc-matrix__filter--active { background: var(--team-ink); color: #fff; border-color: var(--team-ink); }

.cc-matrix__body {
  /* Intentionally NOT a scroll container — the page scrolls, inventory
     flows with it, and the single sticky column header glues to the
     page viewport (below the top nav) via position: sticky. Nested
     scroll containers were making the sticky header appear in the
     middle of the viewport. */
}

.cc-matrix__empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--team-ink-soft);
  font-size: 13px;
}

/* Brand group */
.cc-matrix__brand {
  border-bottom: 1px solid var(--team-border-soft);
}

.cc-matrix__brand:last-child { border-bottom: 0; }

/* Legacy brand container no longer renders — brand grouping is now
   expressed via filter chips + an inline, non-sticky divider label. */
.cc-matrix__brand-header,
.cc-matrix__brand-count { display: none; }

/* Brand divider — tiny typographic break between brand sections when
   the user is viewing "All brands". No sticky, no padding chrome. */
.cc-matrix__brand-divider {
  padding: 18px 20px 2px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--team-ink-muted, #94a3b8);
}
.cc-matrix__brand-divider:first-child { padding-top: 8px; }

/* Model group — a section of grouped variant rows. No longer sticky;
   just a clean inline divider so the scroll behavior feels natural. */
.cc-matrix__model {
  padding: 0 20px;
  border-bottom: 1px dashed var(--team-border-soft);
}

.cc-matrix__model:last-child { border-bottom: 0; }
.cc-matrix__model--closed { padding-bottom: 0; }
.cc-matrix__model--open { padding-bottom: 12px; }

/* Model header — now a button (click to expand/collapse the section).
   Reads like a row with caret · name · stats · optional flame badge. */
.cc-matrix__model-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--team-ink);
  transition: background 0.12s, border-color 0.12s;
}
.cc-matrix__model-head:hover {
  background: var(--team-bg-soft);
}
.cc-matrix__model--open .cc-matrix__model-head {
  border-bottom-color: var(--team-border-soft);
  margin-bottom: 4px;
}
.cc-matrix__model-caret {
  display: inline-block;
  width: 14px;
  color: var(--team-ink-soft);
  font-size: 12px;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.cc-matrix__model-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--team-ink);
  flex-shrink: 0;
}
.cc-matrix__model-stats {
  font-size: 12px;
  color: var(--team-ink-soft);
  font-weight: 500;
  flex: 1;
}

/* Model chip row — the NEW second-level drill-down. Horizontal strip of
   model buttons shown when a single brand is scoped. */
.cc-matrix__model-chips {
  display: flex;
  gap: 6px;
  padding: 12px 20px 4px;
  border-bottom: 1px solid var(--team-border-soft);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.cc-matrix__model-chips .cc-matrix__filter {
  white-space: nowrap;
  flex-shrink: 0;
}
.cc-matrix__filter-count {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.07);
  color: var(--team-ink-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.cc-matrix__filter--active .cc-matrix__filter-count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Model toolbar — expand/collapse all + hint text */
.cc-matrix__model-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--team-border-soft);
  background: var(--team-bg-soft);
}
.cc-matrix__bulk {
  padding: 5px 12px;
  border: 1px solid var(--team-border);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--team-ink);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cc-matrix__bulk:hover {
  background: var(--team-bg-soft);
  border-color: var(--team-ink-soft);
}
.cc-matrix__model-toolbar-hint {
  font-size: 11px;
  color: var(--team-ink-soft);
  font-weight: 500;
  flex: 1;
}

.cc-matrix__model-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--team-ink);
}

.cc-matrix__model-stats {
  font-size: 11px;
  color: var(--team-ink-soft);
  font-weight: 500;
}

.cc-matrix__model-stats strong { color: var(--team-ink); font-weight: 700; }

/* "🔥 N% under market" flame chip on the model head — calls the eye to
   the models where at least one config is a real bargain. */
.cc-matrix__model-flame {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #14532d;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Matrix toolbar controls — sort + deals-only toggle */
.cc-matrix__sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cc-matrix__sort-label {
  font-size: 11px;
  color: var(--team-ink-soft);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cc-matrix__sort {
  appearance: none;
  -webkit-appearance: none;
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--team-border);
  border-radius: 6px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2359656F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") right 8px center / 10px no-repeat;
  font-family: inherit;
  font-size: 12px;
  color: var(--team-ink);
  cursor: pointer;
  min-width: 120px;
}
.cc-matrix__sort:focus-visible {
  outline: 2px solid var(--team-accent, #38bdf8);
  outline-offset: 2px;
}

.cc-matrix__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--team-border);
  border-radius: 999px;
  background: #fff;
  font-size: 11.5px;
  color: var(--team-ink-soft);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cc-matrix__toggle:hover {
  border-color: var(--team-ink-soft);
  color: var(--team-ink);
}
.cc-matrix__toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--team-ink-muted, #94a3b8);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}
.cc-matrix__toggle input[type="checkbox"]:checked {
  background: #16a34a;
  border-color: #16a34a;
}
.cc-matrix__toggle input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.cc-matrix__toggle:has(input:checked) {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
  font-weight: 600;
}

/* Variant row */
.cc-matrix__variants {
  display: grid;
  gap: 2px;
}

/* Grid template shared by column-header, grouped row, and per-color child.
   8 columns:
     1 storage · 2 colors · 3 grade · 4 supplier(1fr) ·
     5 market-deal(240px) · 6 units · 7 price · 8 actions [+Books][▸N]
   2026-04-20: moved the flex (1fr) from deal-bar to supplier. Deal-bar
   is now a tight 240px since the indicator + label is compact; supplier
   absorbs leftover horizontal space, which matches the reality that
   supplier names vary in length and deal-bar content is uniform. */
.cc-matrix__variant,
.cc-matrix__colhead,
.cc-matrix__child {
  display: grid;
  grid-template-columns:
    56px                         /* storage   */
    minmax(100px, 160px)         /* colors    */
    96px                         /* grade     */
    minmax(140px, 1fr)           /* supplier (flex absorber) */
    240px                        /* deal bar (fixed, tighter) */
    64px                         /* units     */
    96px                         /* price     */
    140px;                       /* actions — wider so +Books + ▸N fit w/o wrap */
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
  transition: background 0.12s;
}

.cc-matrix__variant:hover { background: var(--team-bg-soft); }

/* Grouped row — visually more prominent than the per-color children */
.cc-matrix__group { position: relative; }
.cc-matrix__group--expandable { cursor: default; }

/* Column header — single sticky row at the top of the entire table.
   Previously appeared once per model which created a lot of visual
   noise during scroll. Now renders exactly once at the top of
   #matrixBody and sticks directly below the page top bar. */
.cc-matrix__colhead {
  padding: 10px 30px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--team-ink-soft);
  border-bottom: 1px solid var(--team-border);
  background: #fff;
}
.cc-matrix__colhead--sticky {
  position: sticky;
  top: var(--topbar-h, 56px);
  z-index: 5;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}
.cc-matrix__colhead--right { text-align: right; }

.cc-matrix__variant-storage { font-weight: 600; color: var(--team-ink); }
.cc-matrix__variant-color,
.cc-matrix__variant-colors { color: var(--team-ink-soft); }
.cc-matrix__variant-colors {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Expand / collapse button on a grouped row */
.cc-matrix__variant-expand {
  font-size: 11px;
  font-weight: 600;
  color: var(--team-ink-soft);
  background: transparent;
  border: 1px solid var(--team-border);
  border-radius: 6px;
  padding: 2px 6px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cc-matrix__variant-expand:hover {
  background: var(--team-bg-soft);
  color: var(--team-ink);
  border-color: var(--team-ink-soft);
}
.cc-matrix__variant-expand--disabled {
  border: 0;
  background: transparent;
  cursor: default;
  pointer-events: none;
}
.cc-matrix__variant-expand--spacer {
  display: inline-block;
  width: 48px;
  visibility: hidden;
}

/* Combined actions cell — holds +Books + expand so the row stays single-line.
   +Books fades in on row hover only, keeping the scan-view uncluttered. */
.cc-matrix__variant-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}
.cc-matrix__variant-actions .cc-matrix__variant-action {
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.cc-matrix__variant:hover .cc-matrix__variant-action,
.cc-matrix__variant:focus-within .cc-matrix__variant-action {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Keyboard users — always show when the action itself is focused */
.cc-matrix__variant-action:focus-visible {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  outline: 2px solid var(--team-accent, #38bdf8);
  outline-offset: 2px;
}

/* Per-color children (revealed when expanded) */
.cc-matrix__children {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 4px 0 6px;
  padding-left: 12px;
  border-left: 2px solid var(--team-border);
}
.cc-matrix__children[hidden] { display: none; }
.cc-matrix__child {
  padding: 4px 10px;
  font-size: 11.5px;
  color: var(--team-ink-soft);
  background: var(--team-bg-soft);
  border-radius: 4px;
}
.cc-matrix__child:hover { background: #f1f5f9; }
.cc-matrix__child-color { color: var(--team-ink); font-weight: 500; }
.cc-matrix__child-supplier { color: var(--team-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-matrix__child-qty { font-variant-numeric: tabular-nums; text-align: right; }
.cc-matrix__child-price { font-variant-numeric: tabular-nums; text-align: right; color: var(--team-ink); font-weight: 600; }
.cc-matrix__variant-action--small {
  font-size: 10px;
  padding: 2px 8px;
}
.cc-matrix__variant-grade {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.cc-matrix__variant-grade--new { background: #dcfce7; color: #14532d; }
.cc-matrix__variant-grade--a-plus-plus,
.cc-matrix__variant-grade--a-plus { background: #d1fae5; color: #065f46; }
.cc-matrix__variant-grade--a { background: #dbeafe; color: #1e3a8a; }
.cc-matrix__variant-grade--a-minus { background: #e0e7ff; color: #3730a3; }
.cc-matrix__variant-grade--cpo-a { background: #ede9fe; color: #5b21b6; }
.cc-matrix__variant-grade--b,
.cc-matrix__variant-grade--b-plus,
.cc-matrix__variant-grade--b-minus { background: #fef3c7; color: #78350f; }
.cc-matrix__variant-grade--as-is { background: #fed7aa; color: #7c2d12; }
.cc-matrix__variant-grade--refurb,
.cc-matrix__variant-grade--open-box { background: #f3f4f6; color: #374151; }
.cc-matrix__variant-grade--unknown { background: #f3f4f6; color: #6b7280; }

.cc-matrix__variant-supplier {
  color: var(--team-ink-soft);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cc-matrix__supplier-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--team-ink);
  font-weight: 500;
}

/* Supplier tier pill inline with supplier name */
.cc-matrix__supplier-tier {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.cc-matrix__supplier-tier--t1 { background: #fef3c7; color: #78350f; }
.cc-matrix__supplier-tier--t2 { background: #dbeafe; color: #1e3a8a; }
.cc-matrix__supplier-tier--t3 { background: #f1f5f9; color: #475569; }
.cc-matrix__supplier-tier--t4 { background: #fee2e2; color: #991b1b; }
.cc-matrix__supplier-tier--unscored { background: #f3f4f6; color: #9ca3af; }

/* =============================================================
   DEAL-QUALITY BAR — "how good is this price vs. market?"
   Fills the middle column with real signal.
   ============================================================= */
.cc-matrix__variant-deal { display: flex; align-items: center; min-width: 0; }

.deal-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.deal-bar__track {
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  min-width: 60px;
  max-width: 140px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}
.deal-bar__center {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: #cbd5e1;
}
.deal-bar__fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 3px;
}
.deal-bar__fill--left  { transform-origin: right center; }
.deal-bar__fill--right { transform-origin: left center; }

.deal-bar__label {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.deal-bar--bargain    { color: #15803d; }
.deal-bar--bargain    .deal-bar__fill { background: #22c55e; }
.deal-bar--good       { color: #16a34a; }
.deal-bar--good       .deal-bar__fill { background: #4ade80; }
.deal-bar--neutral    { color: var(--team-ink-soft); }
.deal-bar--neutral    .deal-bar__fill { background: #94a3b8; }
.deal-bar--caution    { color: #b45309; }
.deal-bar--caution    .deal-bar__fill { background: #fbbf24; }
.deal-bar--overpriced { color: #b91c1c; }
.deal-bar--overpriced .deal-bar__fill { background: #ef4444; }

.deal-bar--nodata {
  color: var(--team-ink-muted, #8a9199);
  font-style: italic;
  font-weight: 400;
  font-size: 11px;
}

.cc-matrix__variant-qty {
  font-weight: 600;
  color: var(--team-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cc-matrix__variant-price {
  font-weight: 700;
  color: var(--team-ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* "as of 2h ago" freshness indicator under the Netcom avg price — shows
   the team when the underlying stock/price data was parsed, so they
   can tell a fresh Apr 20 row apart from a stale Apr 15 row visually. */
.cc-matrix__freshness {
  font-size: 10px;
  font-weight: 500;
  color: var(--team-ink-muted, #8a9199);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.cc-matrix__variant-price--best {
  color: var(--team-success);
}

.cc-matrix__variant-price--best::before {
  content: '▼ ';
  font-size: 9px;
  color: var(--team-success);
}

.cc-matrix__vzw-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  margin-left: 4px;
}

.cc-matrix__vzw-badge--verizon { background: #fee2e2; color: #7f1d1d; }
.cc-matrix__vzw-badge--unlocked { background: #dcfce7; color: #14532d; }
.cc-matrix__vzw-badge--other-carrier { background: #fef3c7; color: #78350f; }

/* Baseline delta badge on prices */
.baseline-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  border-radius: 4px;
  vertical-align: middle;
}

.baseline-badge--bargain   { background: #059669; color: #fff; }
.baseline-badge--below     { background: #d1fae5; color: #065f46; }
.baseline-badge--above     { background: #fef3c7; color: #78350f; }
.baseline-badge--overpriced { background: #fee2e2; color: #7f1d1d; }

/* Variant action button (+ Books) */
.cc-matrix__variant {
  grid-template-columns: 80px 100px 90px 1fr auto auto 56px;
}

.cc-matrix__variant-action {
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--team-accent-ink);
  background: rgba(47, 195, 229, 0.08);
  border: 1px solid rgba(47, 195, 229, 0.3);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.cc-matrix__variant-action:hover {
  background: rgba(47, 195, 229, 0.2);
  color: #0B1628;
}

.cc-matrix__variant-action:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Diff chips on upload items */
.cc-upload-item__diff {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-left: 4px;
}

.cc-upload-item__diff-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.cc-upload-item__diff-chip--added   { background: #dcfce7; color: #065f46; }
.cc-upload-item__diff-chip--removed { background: #fee2e2; color: #7f1d1d; }
.cc-upload-item__diff-chip--price-down { background: #d1fae5; color: #065f46; }
.cc-upload-item__diff-chip--price-up   { background: #fef3c7; color: #78350f; }

/* Drawer: inventory section */
.drawer-inventory {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--team-border-soft);
  border-radius: 8px;
  background: #fff;
}

.drawer-inventory__row {
  display: grid;
  grid-template-columns: 1fr 80px 90px auto auto;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  border-bottom: 1px solid var(--team-border-soft);
  align-items: center;
}

.drawer-inventory__row:last-child { border-bottom: 0; }
.drawer-inventory__row:nth-child(even) { background: var(--team-bg-softer); }

.drawer-inventory__model {
  font-weight: 600;
  color: var(--team-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-inventory__model-sub {
  display: block;
  font-size: 10px;
  color: var(--team-ink-soft);
  font-weight: 400;
}

/* Parsed badge on upload items */
.cc-upload-item__parsed {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: #dcfce7;
  color: #14532d;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* --- Priority Outreach section --- */
.cc-priority {
  background: #fff;
  border: 1px solid var(--team-border);
  border-radius: 12px;
  padding: 18px 20px 20px;
  box-shadow: var(--team-shadow-sm);
}

.cc-priority__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.cc-priority__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--team-ink);
}

.cc-priority__star { font-size: 18px; }

.cc-priority__subtitle {
  font-size: 12px;
  color: var(--team-ink-soft);
  margin: 2px 0 0;
  line-height: 1.4;
}

.cc-priority__info {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--team-ink-soft);
  background: transparent;
  border: 1px solid var(--team-border);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  font-family: inherit;
}

.cc-priority__info:hover {
  color: var(--team-ink);
  background: var(--team-bg-soft);
}

.cc-priority__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.cc-priority__empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--team-ink-soft);
  font-size: 13px;
  background: var(--team-bg-soft);
  border-radius: 8px;
}

.cc-priority__empty strong { color: var(--team-ink); }

/* Individual priority card */
.ccp-card {
  background: #fff;
  border: 1px solid var(--team-border);
  border-left: 4px solid var(--team-warning);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.05s;
}

.ccp-card:hover {
  box-shadow: var(--team-shadow);
}

.ccp-card:active { transform: translateY(1px); }

.ccp-card--priority-1 { border-left-color: var(--team-warning); background: #fffaeb; }
.ccp-card--priority-2 { border-left-color: var(--team-accent); background: #f0f9ff; }
.ccp-card--priority-3 { border-left-color: #a855f7; background: #faf5ff; }
.ccp-card--priority-4 { border-left-color: var(--team-success); background: #f0fdf4; }

.ccp-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ccp-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--team-ink);
  line-height: 1.2;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ccp-card__grade {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--team-ink-soft);
  font-weight: 600;
}

.ccp-card__reason {
  font-size: 12px;
  color: var(--team-ink-soft);
  line-height: 1.4;
  flex: 1;
}

.ccp-card__reason strong { color: var(--team-ink); font-weight: 600; }

.ccp-card__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--team-accent-ink);
  padding-top: 6px;
  border-top: 1px dashed var(--team-border-soft);
}

.ccp-card__action-arrow { transition: transform 0.15s; }
.ccp-card:hover .ccp-card__action-arrow { transform: translateX(3px); }

/* --- Directory section --- */
.cc-directory {
  background: #fff;
  border: 1px solid var(--team-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--team-shadow-sm);
}

.cc-directory__header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--team-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--team-bg-softer);
}

.cc-directory__title {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: var(--team-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.cc-directory__count {
  font-size: 12px;
  font-weight: 500;
  color: var(--team-ink-soft);
  padding: 2px 8px;
  background: var(--team-bg-soft);
  border-radius: 10px;
}

.cc-directory__controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.cc-directory__search {
  position: relative;
  display: flex;
  align-items: center;
}

.cc-directory__search svg {
  position: absolute;
  left: 10px;
  color: var(--team-ink-muted);
  pointer-events: none;
}

.cc-directory__search input {
  padding: 6px 10px 6px 30px;
  font-size: 13px;
  font-family: inherit;
  color: var(--team-ink);
  background: #fff;
  border: 1px solid var(--team-border);
  border-radius: 8px;
  width: 200px;
  transition: border-color 0.15s, width 0.2s;
  -webkit-appearance: none;
}

.cc-directory__search input:focus {
  outline: none;
  border-color: var(--team-accent);
  width: 260px;
  box-shadow: 0 0 0 3px rgba(47, 195, 229, 0.12);
}

.cc-directory__filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.cc-filter {
  padding: 4px 10px;
  border: 1px solid var(--team-border);
  background: #fff;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--team-ink-soft);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.cc-filter:hover {
  background: var(--team-bg-soft);
  color: var(--team-ink);
}

.cc-filter--active {
  background: var(--team-ink);
  color: #fff;
  border-color: var(--team-ink);
}

/* Table */
.cc-table-wrap {
  overflow-x: auto;
}

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

.cc-table thead {
  background: #fff;
  border-bottom: 1px solid var(--team-border);
}

.cc-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--team-ink-soft);
  white-space: nowrap;
}

.cc-table__th-dot { width: 28px; padding-right: 0; padding-left: 16px; }
.cc-table__th-action { width: 110px; text-align: right; padding-right: 16px; }
.cc-table__th-grade { width: 60px; }
.cc-table__th-score { width: 60px; text-align: right; }
.cc-table__th-vzw {
  width: 56px;
  text-align: center;
  color: #d52b1e !important;
  font-weight: 800 !important;
}

/* VZW column cell — central highlight */
.cc-row__vzw {
  text-align: center;
}

/* VZW filter chip — Verizon-red accent to signal importance */
.cc-filter--vzw {
  border-color: rgba(213, 43, 30, 0.35);
  color: #d52b1e;
  font-weight: 600;
}

.cc-filter--vzw:hover {
  background: rgba(213, 43, 30, 0.08);
  color: #b52218;
  border-color: rgba(213, 43, 30, 0.5);
}

.cc-filter--vzw.cc-filter--active {
  background: #d52b1e;
  border-color: #d52b1e;
  color: #fff;
}

/* Supplier context bullets on priority cards */
.ccp-card__bullets {
  margin: 6px 0 4px;
  padding: 0 0 0 14px;
  list-style: disc;
  color: var(--team-text-muted, #475569);
  font-size: 12px;
  line-height: 1.45;
}
.ccp-card__bullets li {
  margin: 0 0 2px;
}
.ccp-card__bullets li:last-child {
  margin-bottom: 0;
}

/* Verizon compatibility badge on priority cards */
.ccp-card__vzw {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

.ccp-card__vzw--verified {
  background: #dcfce7;
  color: #14532d;
}

.ccp-card__vzw--warn {
  background: #fef3c7;
  color: #78350f;
}

.ccp-card__vzw--risk {
  background: #fee2e2;
  color: #7f1d1d;
}

/* VZW pill in drawer header */
.drawer-head__pill--vzw-verified {
  background: #dcfce7;
  color: #14532d;
  border: 1px solid #bbf7d0;
}

.drawer-head__pill--vzw-warn {
  background: #fef3c7;
  color: #78350f;
  border: 1px solid #fde68a;
}

.drawer-head__pill--vzw-risk {
  background: #fee2e2;
  color: #7f1d1d;
  border: 1px solid #fecaca;
  font-weight: 700;
}

.cc-table tbody tr {
  border-bottom: 1px solid var(--team-border-soft);
  cursor: pointer;
  transition: background 0.12s;
}

.cc-table tbody tr:hover {
  background: var(--team-bg-softer);
}

.cc-table tbody tr:last-child {
  border-bottom: 0;
}

.cc-table td {
  padding: 10px 12px;
  color: var(--team-ink);
  vertical-align: middle;
}

.cc-table td:first-child { padding-left: 16px; }
.cc-table td:last-child { padding-right: 16px; text-align: right; }

.cc-row__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: var(--team-ink-muted);
}

.cc-row__dot--pending { background: var(--team-warning); }
.cc-row__dot--sent { background: var(--team-accent); }
.cc-row__dot--active { background: var(--team-success); }
.cc-row__dot--discovered { background: #7c3aed; }
.cc-row__dot--deprioritized { background: var(--team-danger); }

.cc-row__name {
  font-weight: 600;
  color: var(--team-ink);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cc-row__name-warning {
  color: var(--team-danger);
  font-size: 11px;
}

/* Quick-jump bar — floats below the status strip, scrolls to any
   section on click. Lets reps skip the uploads/sourcing/watchlists
   admin strip and go straight to inventory when they just need to
   find a device. */
.cc-quickjump {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  margin: 0 0 14px;
  background: #fff;
  border: 1px solid var(--team-border-soft);
  border-radius: 10px;
  position: sticky;
  top: var(--topbar-h, 56px);
  z-index: 4;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.92);
}
.cc-quickjump__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--team-ink-soft);
  border-radius: 999px;
  text-decoration: none;
  background: var(--team-bg-soft);
  transition: background 0.12s, color 0.12s;
}
.cc-quickjump__link:hover {
  background: var(--team-ink);
  color: #fff;
}

/* Deprioritization reason — red subtitle on rows where Scout has vetoed
   the supplier. Replaces the normal location line so a rep scanning the
   directory knows at a glance why they're skipped. Hover expands to the
   full reason via title attr. */
.cc-row__depr-reason {
  font-size: 11px;
  color: #b91c1c;
  margin-top: 2px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.cc-row__sub {
  font-size: 11px;
  color: var(--team-ink-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.cc-row__score {
  font-size: 11px;
  color: var(--team-ink-soft);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.cc-row__status-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.cc-row__status-chip--pending { background: #fef3c7; color: #78350f; }
.cc-row__status-chip--sent { background: #d1fae5; color: #065f46; }
.cc-row__status-chip--active { background: #e0e7ff; color: #3730a3; }
.cc-row__status-chip--discovered { background: #ede9fe; color: #5b21b6; }
.cc-row__status-chip--deprioritized { background: #fee2e2; color: #7f1d1d; }

.cc-row__cats {
  display: flex;
  gap: 3px;
  flex-wrap: nowrap;
  overflow: hidden;
  max-width: 220px;
}

.cc-row__cat {
  font-size: 10px;
  color: var(--team-ink-soft);
  background: var(--team-bg-soft);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.cc-row__updated {
  font-size: 11px;
  color: var(--team-ink-muted);
  white-space: nowrap;
}

.cc-row__action-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--team-border);
  background: #fff;
  color: var(--team-ink);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.cc-row__action-btn:hover {
  background: var(--team-ink);
  color: #fff;
  border-color: var(--team-ink);
}

.cc-row__action-btn--primary {
  background: var(--team-warning);
  border-color: var(--team-warning);
  color: #fff;
}

.cc-row__action-btn--primary:hover {
  background: #b45309;
  border-color: #b45309;
}

.cc-table__empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--team-ink-soft);
  font-size: 13px;
}

@media (max-width: 960px) {
  .cc-table__th-cats, .cc-table td[data-col="cats"] { display: none; }
}

@media (max-width: 860px) {
  .cc-table__th-updated, .cc-table td[data-col="updated"] { display: none; }
  .cc-directory__search input { width: 140px; }
  .cc-directory__search input:focus { width: 180px; }
}

@media (max-width: 680px) {
  .cc-table__th-status, .cc-table td[data-col="status"] { display: none; }
}

@media (max-width: 560px) {
  .cc-table__th-score, .cc-table td[data-col="score"] { display: none; }
  /* VZW column stays visible — it's too important to hide except at the smallest viewports */
}

@media (max-width: 420px) {
  .cc-table__th-vzw, .cc-table td[data-col="vzw"] { display: none; }
}

/* --- Drawer --- */
.cc-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: flex-end;
}

.cc-drawer[hidden] { display: none !important; }

.cc-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 22, 40, 0.45);
  animation: cc-backdrop-in 0.2s ease both;
}

@keyframes cc-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

.cc-drawer__panel {
  position: relative;
  background: var(--team-bg-soft);
  width: 720px;
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
  box-shadow: -12px 0 40px rgba(11, 22, 40, 0.25);
  animation: cc-drawer-in 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cc-drawer-in {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.cc-drawer__header {
  position: sticky;
  top: 0;
  background: rgba(245, 247, 248, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10px 16px;
  display: flex;
  justify-content: flex-end;
  z-index: 2;
  border-bottom: 1px solid var(--team-border);
}

.cc-drawer__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--team-border);
  background: #fff;
  font-size: 20px;
  color: var(--team-ink-soft);
  cursor: pointer;
  line-height: 1;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.cc-drawer__close:hover {
  background: var(--team-bg-soft);
  color: var(--team-ink);
}

.cc-drawer__body {
  padding: 16px 20px 60px;
}

/* Drawer reuses these section card styles */
.dsec {
  background: #fff;
  border: 1px solid var(--team-border);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--team-shadow-sm);
}

.dsec__header {
  padding: 12px 18px;
  border-bottom: 1px solid var(--team-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dsec__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--team-ink-soft);
  margin: 0;
}

.dsec__body {
  padding: 14px 18px;
}

.dsec--warning { background: #fef9c3; border-color: #fde68a; }
.dsec--warning .dsec__title { color: #78350f; }

.dsec__warning-body {
  padding: 12px 18px 14px;
  color: #7f1d1d;
  font-size: 13px;
  line-height: 1.5;
}

/* Drawer header (supplier identity) */
.drawer-head {
  background: #fff;
  border: 1px solid var(--team-border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 12px;
  box-shadow: var(--team-shadow-sm);
}

.drawer-head__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.drawer-head__name {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: var(--team-ink);
  line-height: 1.2;
}

.drawer-head__location {
  font-size: 13px;
  color: var(--team-ink-soft);
  margin-top: 4px;
}

.drawer-head__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  align-items: center;
}

.drawer-head__pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.drawer-head__pill--pending { background: #fef3c7; color: #78350f; }
.drawer-head__pill--sent { background: #d1fae5; color: #065f46; }
.drawer-head__pill--active { background: #e0e7ff; color: #3730a3; }
.drawer-head__pill--discovered { background: #ede9fe; color: #5b21b6; }
.drawer-head__pill--deprioritized { background: #fee2e2; color: #7f1d1d; }

.drawer-head__chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.drawer-head__chip {
  padding: 2px 8px;
  background: var(--team-bg-soft);
  border: 1px solid var(--team-border-soft);
  border-radius: 6px;
  font-size: 11px;
  color: var(--team-ink-soft);
  font-weight: 500;
}

/* Scorecard in drawer */
.dscore {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dscore__total {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 0 0;
  border-right: 1px solid var(--team-border-soft);
}

.dscore__total-num {
  font-size: 11px;
  color: var(--team-ink-muted);
  margin-top: 4px;
}

.dscore__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  flex: 1;
}

.dscore__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.dscore__cell-label {
  font-size: 10px;
  color: var(--team-ink-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Contact info grid */
.dinfo {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 16px;
  margin: 0;
  font-size: 13px;
}

.dinfo dt { font-weight: 600; color: var(--team-ink-soft); font-size: 12px; }
.dinfo dd { margin: 0; color: var(--team-ink); word-break: break-word; }
.dinfo a { color: var(--team-accent-ink); text-decoration: none; }
.dinfo a:hover { text-decoration: underline; }

/* Tier badges for drawer */
.tier-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

.tier-badge--1 { background: #dcfce7; color: #14532d; }
.tier-badge--2 { background: #dbeafe; color: #1e3a8a; }
.tier-badge--3 { background: #fef3c7; color: #78350f; }
.tier-badge--4 { background: #f3f4f6; color: #374151; }
.tier-badge--existing { background: #e0e7ff; color: #3730a3; }
.tier-badge--deprioritized { background: #fee2e2; color: #7f1d1d; }

/* --- Inline draft editor (drawer) --- */
.draft-editor {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--team-border-soft);
}

.draft-editor__row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 0;
  align-items: center;
  background: #fff;
}

.draft-editor__row--body { align-items: stretch; }

.draft-editor__label {
  padding: 9px 12px;
  font-size: 10px;
  font-weight: 700;
  color: var(--team-ink-soft);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--team-bg-soft);
  border-right: 1px solid var(--team-border-soft);
  display: flex;
  align-items: center;
}

.draft-editor__label--top {
  align-items: flex-start;
  padding-top: 11px;
}

.draft-editor__input {
  border: 0;
  outline: 0;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--team-ink);
  background: #fff;
  width: 100%;
  transition: background 0.12s;
}

.draft-editor__input:focus { background: #fffef3; }
.draft-editor__input--bold { font-weight: 600; }

.draft-editor__textarea {
  border: 0;
  outline: 0;
  padding: 12px;
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--team-ink);
  background: #fff;
  width: 100%;
  min-height: 260px;
  resize: vertical;
  transition: background 0.12s;
}

.draft-editor__textarea:focus { background: #fffef3; }

.draft-editor__status {
  margin: 12px 18px 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.draft-editor__status--info    { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }
.draft-editor__status--success { background: #f0fdf4; color: #14532d; border: 1px solid #bbf7d0; }
.draft-editor__status--error   { background: #fef2f2; color: #7f1d1d; border: 1px solid #fecaca; }

.draft-editor__delivery-note {
  margin: 12px 18px 0;
  padding: 12px 14px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  font-size: 13px;
  color: #78350f;
  line-height: 1.5;
}

.draft-editor__meta {
  margin: 12px 18px 14px;
  padding: 10px 14px;
  background: var(--team-bg-soft);
  border-radius: 8px;
  font-size: 12px;
  color: var(--team-ink-soft);
  line-height: 1.5;
}

.draft-editor__meta strong { color: var(--team-ink); }

.draft-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--team-border-soft);
  background: var(--team-bg-softer);
}

.draft-btn {
  padding: 7px 13px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--team-border);
  background: #fff;
  color: var(--team-ink);
  font-family: inherit;
  transition: background 0.15s, transform 0.05s;
}

.draft-btn:hover { background: var(--team-bg-soft); }
.draft-btn:active { transform: translateY(1px); }
.draft-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.draft-btn--primary {
  background: var(--team-success);
  color: #fff;
  border-color: var(--team-success);
}

.draft-btn--primary:hover { background: #15803d; }

.draft-btn--marksent {
  color: var(--team-accent-ink);
  border-color: rgba(47, 195, 229, 0.4);
  background: rgba(47, 195, 229, 0.06);
}

.draft-btn--marksent:hover { background: rgba(47, 195, 229, 0.15); }

.draft-btn--danger {
  color: var(--team-danger);
  border-color: #fecaca;
  background: #fff;
}

.draft-btn--danger:hover { background: #fef2f2; }

/* Sent banner */
.sent-banner {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 12px;
}

.sent-banner__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #14532d;
  margin-bottom: 6px;
}

.sent-banner__body {
  font-size: 13px;
  color: #14532d;
  line-height: 1.55;
}

.sent-banner__subject {
  font-size: 12px;
  color: #166534;
  margin-top: 4px;
}

.sent-banner__actions { margin-top: 10px; }

/* Lists (pricing / outreach / sources) */
.pricing-list,
.outreach-list,
.sources-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 11px;
  background: var(--team-bg-soft);
  border-radius: 6px;
  font-size: 13px;
}

.pricing-list__device { font-weight: 600; color: var(--team-ink); }
.pricing-list__model { font-size: 11px; color: var(--team-ink-soft); margin-left: 6px; }
.pricing-list__price { font-weight: 700; color: var(--team-ink); }
.pricing-list__price--tbd { color: var(--team-ink-soft); font-weight: 500; font-style: italic; }

.outreach-list__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 11px;
  background: var(--team-bg-soft);
  border-radius: 6px;
  font-size: 13px;
}

.outreach-list__date { font-weight: 600; color: var(--team-ink); flex-shrink: 0; min-width: 100px; font-size: 12px; }
.outreach-list__status { color: var(--team-ink-soft); flex-shrink: 0; min-width: 80px; font-size: 12px; text-transform: capitalize; }
.outreach-list__notes { flex: 1; color: var(--team-ink); }

.sources-list__item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  align-items: start;
  padding: 7px 11px;
  background: var(--team-bg-soft);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}

.sources-list__kind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--team-accent-ink);
  padding-top: 2px;
}

.sources-list__kind--internal { color: #78350f; }
.sources-list__content { color: var(--team-ink); }
.sources-list__content a { color: var(--team-accent-ink); text-decoration: none; word-break: break-all; }
.sources-list__content a:hover { text-decoration: underline; }
.sources-list__note { display: block; font-size: 12px; color: var(--team-ink-soft); margin-top: 2px; }

/* Zoho pills */
.zoho-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.zoho-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(47, 195, 229, 0.1);
  color: var(--team-accent-ink);
  border: 1px solid rgba(47, 195, 229, 0.3);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-decoration: none;
  transition: background 0.15s;
}

.zoho-pill:hover { background: rgba(47, 195, 229, 0.2); }

/* Legend priority list */
.legend-priority {
  margin: 0;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--team-ink);
}

.legend-priority li { margin-bottom: 6px; }
.legend-priority strong { color: var(--team-ink); }

.team-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

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

.team-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background: linear-gradient(135deg, #0B1628 0%, #153a52 100%);
}

.team-login__card {
  background: #fff;
  border-radius: 14px;
  padding: 48px 44px 36px;
  box-shadow: 0 1px 2px rgba(11, 22, 40, 0.04), 0 24px 60px rgba(11, 22, 40, 0.32);
  width: 100%;
  max-width: 460px;
  animation: team-login-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes team-login-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.team-login__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.team-login__brand-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--team-ink);
  line-height: 1.1;
}

.team-login__brand-sub {
  font-size: 12px;
  color: var(--team-ink-soft);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.team-login__title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--team-ink);
}

.team-login__intro {
  font-size: 14px;
  line-height: 1.55;
  color: var(--team-ink-soft);
  margin: 0 0 28px;
}

.team-login__intro strong {
  color: var(--team-ink);
  font-weight: 600;
}

.team-login__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.team-login__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.team-login__field span {
  font-size: 13px;
  font-weight: 600;
  color: var(--team-ink);
}

.team-login__field input {
  padding: 12px 14px;
  border: 1px solid var(--team-border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  color: var(--team-ink);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.team-login__field input:focus {
  outline: none;
  border-color: var(--team-accent);
  box-shadow: 0 0 0 3px rgba(47, 195, 229, 0.15);
}

.team-login__error {
  padding: 12px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: var(--team-danger);
  font-size: 13px;
}

.team-login__submit {
  margin-top: 8px;
  width: 100%;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  background: var(--team-ink);
  color: #fff;
  transition: background 0.15s, transform 0.05s;
}

.team-login__submit:hover { background: #15253f; }
.team-login__submit:active { transform: translateY(1px); }
.team-login__submit:disabled { opacity: 0.6; cursor: not-allowed; }

.team-login__footer {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--team-border-soft);
  font-size: 13px;
  color: var(--team-ink-soft);
  text-align: center;
}

.team-login__footer a {
  color: var(--team-accent-ink);
  text-decoration: none;
  font-weight: 500;
}

.team-login__footer a:hover { text-decoration: underline; }

/* ============================================================
   TOP BAR
   ============================================================ */

.team-topbar {
  background: #fff;
  border-bottom: 1px solid var(--team-border);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  box-shadow: var(--team-shadow-sm);
  flex-shrink: 0;
}

.team-topbar__inner {
  max-width: 100%;
  width: 100%;
  padding: 0 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}

.team-topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--team-ink);
}

.team-topbar__brand-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
}

.team-topbar__brand-sub {
  font-size: 10px;
  color: var(--team-ink-soft);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 1px;
}

.team-topbar__nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Agent group — a single chip + a segmented row of sub-tabs for that
   agent. Collapses the "three Dave chips shouting in a row" pattern
   into one labeled group.                                              */
.team-topbar__group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  background: var(--team-bg-soft);
  border: 1px solid var(--team-border);
  border-radius: 10px;
}

.team-topbar__group .team-topbar__agent-chip {
  margin-right: 2px;
}

.team-topbar__subtab {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--team-ink-soft);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}

.team-topbar__subtab:hover {
  background: #fff;
  color: var(--team-ink);
}

.team-topbar__subtab--active {
  background: #fff;
  color: var(--team-ink);
  font-weight: 600;
  box-shadow: var(--team-shadow-sm);
}

.team-topbar__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--team-ink-soft);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}

.team-topbar__link:hover {
  background: var(--team-bg-soft);
  color: var(--team-ink);
}

.team-topbar__link--active {
  background: var(--team-bg-soft);
  color: var(--team-ink);
  font-weight: 600;
}

.team-topbar__agent-chip {
  display: inline-block;
  padding: 2px 7px;
  background: var(--team-accent);
  color: #0B1628;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.team-topbar__user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.team-topbar__email {
  font-size: 12px;
  color: var(--team-ink-soft);
}

.team-topbar__logout {
  font-size: 12px;
  padding: 5px 10px;
}

.btn--ghost {
  background: transparent;
  border: 1px solid var(--team-border);
  color: var(--team-ink);
  border-radius: 6px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.btn--ghost:hover { background: var(--team-bg-soft); }

@media (max-width: 640px) {
  .team-topbar__email { display: none; }
  .team-topbar__inner { gap: 10px; padding: 0 12px; }
}

/* ============================================================
   LOADING STATE
   ============================================================ */

.team-loading {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--team-ink-soft);
}

.team-loading[hidden],
.workspace[hidden],
.modal[hidden] {
  display: none !important;
}

.team-loading__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--team-border);
  border-top-color: var(--team-accent);
  border-radius: 50%;
  animation: team-spin 0.8s linear infinite;
}

@keyframes team-spin { to { transform: rotate(360deg); } }

/* ============================================================
   WORKSPACE (2-pane)
   ============================================================ */

.workspace {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-h));
  background: var(--team-bg-soft);
  overflow: hidden;
}

/* Compact Scout status strip */
.workspace__status {
  flex-shrink: 0;
  height: var(--status-h);
  padding: 0 20px;
  background: linear-gradient(135deg, #0B1628 0%, #153a52 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.workspace__status-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.scout-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--team-accent);
  color: #0B1628;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.scout-avatar__letter {
  position: relative;
  z-index: 1;
  line-height: 1;
}

/* Live pulse dot on Scout avatar — signals agent is actively monitoring */
.scout-avatar__pulse {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px var(--team-bg, #0B1628);
  z-index: 2;
}
.scout-avatar__pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: #22c55e;
  opacity: 0.5;
  animation: scout-pulse 2s ease-out infinite;
}
@keyframes scout-pulse {
  0%   { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(2.0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scout-avatar__pulse::after { animation: none; }
}

/* "live" chip next to the Scout title */
.scout-live {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px 1px 6px;
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  vertical-align: middle;
}

.workspace__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}

.workspace__subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 2px;
}

.workspace__stats {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.workspace__stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 60px;
}

.workspace__stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--team-accent);
  font-weight: 600;
}

.workspace__stat-value {
  font-size: 16px;
  font-weight: 700;
}

.workspace__stat--accent .workspace__stat-value {
  color: #fde68a;
}

.workspace__help-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: Georgia, serif;
  font-style: italic;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.workspace__help-btn:hover {
  background: rgba(255,255,255,0.16);
}

@media (max-width: 720px) {
  .workspace__subtitle { display: none; }
  .workspace__stat { min-width: 0; }
  .workspace__stat-label { font-size: 9px; }
  .workspace__stats { gap: 12px; }
}

/* 2-pane area */
.workspace__body {
  flex: 1;
  display: grid;
  grid-template-columns: var(--splist-w) 1fr;
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 860px) {
  .workspace__body { grid-template-columns: 1fr; }
  .workspace__body.show-detail .splist { display: none; }
  .workspace__body:not(.show-detail) .detail { display: none; }
}

.workspace__back {
  display: none;
  position: absolute;
  top: calc(var(--topbar-h) + var(--status-h) + 8px);
  left: 12px;
  z-index: 20;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--team-border);
  color: var(--team-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--team-shadow-sm);
}

@media (max-width: 860px) {
  .workspace__body.show-detail .workspace__back { display: inline-flex; }
}

/* ============================================================
   LEFT PANE: SUPPLIER LIST
   ============================================================ */

.splist {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid var(--team-border);
  min-height: 0;
  overflow: hidden;
}

.splist__toolbar {
  padding: 12px;
  border-bottom: 1px solid var(--team-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  background: #fff;
}

.splist__search {
  position: relative;
  display: flex;
  align-items: center;
}

.splist__search svg {
  position: absolute;
  left: 10px;
  color: var(--team-ink-muted);
  pointer-events: none;
}

.splist__search input {
  width: 100%;
  padding: 8px 10px 8px 32px;
  font-size: 13px;
  font-family: inherit;
  color: var(--team-ink);
  background: var(--team-bg-soft);
  border: 1px solid var(--team-border);
  border-radius: 8px;
  transition: border-color 0.15s, background 0.15s;
  -webkit-appearance: none;
}

.splist__search input:focus {
  outline: none;
  border-color: var(--team-accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47, 195, 229, 0.12);
}

.splist__filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.splist__filter {
  padding: 4px 10px;
  border: 1px solid var(--team-border);
  background: #fff;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--team-ink-soft);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.splist__filter:hover {
  background: var(--team-bg-soft);
  color: var(--team-ink);
}

.splist__filter--active {
  background: var(--team-ink);
  color: #fff;
  border-color: var(--team-ink);
}

.splist__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Status group header */
.splist__group {
  display: flex;
  flex-direction: column;
}

.splist__group-header {
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10px 14px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--team-ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--team-border-soft);
  z-index: 1;
}

.splist__group-header--action {
  color: #78350f;
  background: rgba(254, 243, 199, 0.75);
}

.splist__group-count {
  color: var(--team-ink-muted);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.splist__group--collapsed .splist__group-body {
  display: none;
}

.splist__group-toggle {
  margin-left: auto;
  background: transparent;
  border: 0;
  padding: 2px 6px;
  font-size: 10px;
  color: var(--team-ink-muted);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: color 0.15s;
}

.splist__group-toggle:hover { color: var(--team-ink); }

/* Supplier list item (compact) */
.splitem {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--team-border-soft);
  cursor: pointer;
  transition: background 0.12s;
  position: relative;
}

.splitem:hover {
  background: var(--team-bg-softer);
}

.splitem--selected {
  background: rgba(47, 195, 229, 0.09);
}

.splitem--selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--team-accent);
}

.splitem__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--team-ink-muted);
  flex-shrink: 0;
}

.splitem__dot--pending   { background: var(--team-warning); }
.splitem__dot--sent      { background: var(--team-accent); }
.splitem__dot--active    { background: var(--team-success); }
.splitem__dot--deprioritized { background: var(--team-danger); }
.splitem__dot--discovered { background: #7c3aed; }

.splitem__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.splitem__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--team-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.splitem--warning .splitem__name::after {
  content: ' ⚠';
  color: var(--team-danger);
  font-size: 11px;
}

.splitem__sub {
  font-size: 11px;
  color: var(--team-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.splitem__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.splitem__time {
  font-size: 10px;
  color: var(--team-ink-muted);
  white-space: nowrap;
}

.splist__empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--team-ink-muted);
  font-size: 13px;
}

/* ============================================================
   RIGHT PANE: DETAIL
   ============================================================ */

.detail {
  overflow-y: auto;
  background: var(--team-bg-soft);
  min-height: 0;
}

.detail__body {
  padding: 20px 24px 60px;
  max-width: 900px;
  margin: 0 auto;
}

.detail__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  color: var(--team-ink-soft);
  padding: 40px 24px;
}

.detail__placeholder-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--team-border);
  color: var(--team-ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.detail__placeholder-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--team-ink);
  margin: 0 0 10px;
}

.detail__placeholder-text {
  font-size: 14px;
  line-height: 1.6;
  max-width: 380px;
  margin: 0 0 24px;
}

.detail__placeholder-hint {
  font-size: 13px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--team-border);
  border-radius: 8px;
  color: var(--team-ink-soft);
}

.detail__placeholder-hint strong { color: var(--team-ink); }

/* Detail header */
.detail__header {
  background: #fff;
  border: 1px solid var(--team-border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--team-shadow-sm);
}

.detail__header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 4px;
}

.detail__name {
  font-size: 22px;
  font-weight: 700;
  color: var(--team-ink);
  margin: 0;
  line-height: 1.2;
}

.detail__location {
  font-size: 13px;
  color: var(--team-ink-soft);
  margin-top: 4px;
}

.detail__tier {
  flex-shrink: 0;
}

.detail__status-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.detail__status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.detail__status-pill--pending {
  background: #fef3c7;
  color: #78350f;
}

.detail__status-pill--sent {
  background: #d1fae5;
  color: #065f46;
}

.detail__status-pill--active {
  background: #e0e7ff;
  color: #3730a3;
}

.detail__status-pill--discovered {
  background: #ede9fe;
  color: #5b21b6;
}

.detail__status-pill--deprioritized {
  background: #fee2e2;
  color: #7f1d1d;
}

/* Detail sections (cards) */
.dsec {
  background: #fff;
  border: 1px solid var(--team-border);
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--team-shadow-sm);
}

.dsec__header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--team-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dsec__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--team-ink-soft);
  margin: 0;
}

.dsec__body {
  padding: 16px 20px;
}

.dsec--flush .dsec__body {
  padding: 0;
}

.dsec--warning {
  background: #fef9c3;
  border-color: #fde68a;
}

.dsec--warning .dsec__title { color: #78350f; }

.dsec--danger {
  background: #fef2f2;
  border-color: #fecaca;
}

.dsec--danger .dsec__title { color: #7f1d1d; }

.dsec__warning-body {
  padding: 14px 20px 16px;
  color: #7f1d1d;
  font-size: 13px;
  line-height: 1.5;
}

/* Scorecard inside detail */
.dscore {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 0;
}

.dscore__total {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 0 0;
  border-right: 1px solid var(--team-border-soft);
}

.dscore__total-num {
  font-size: 11px;
  color: var(--team-ink-muted);
  margin-top: 4px;
}

.dscore__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  flex: 1;
}

.dscore__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.dscore__cell-label {
  font-size: 10px;
  color: var(--team-ink-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Contact info grid */
.dinfo {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 16px;
  margin: 0;
  font-size: 13px;
}

.dinfo dt {
  font-weight: 600;
  color: var(--team-ink-soft);
  font-size: 12px;
}

.dinfo dd {
  margin: 0;
  color: var(--team-ink);
  word-break: break-word;
}

.dinfo a {
  color: var(--team-accent-ink);
  text-decoration: none;
}

.dinfo a:hover { text-decoration: underline; }

/* Categories + Zoho pill row */
.dchips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.dchip {
  padding: 2px 9px;
  background: var(--team-bg-soft);
  border: 1px solid var(--team-border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--team-ink-soft);
  font-weight: 500;
}

/* Letter grade badges (preserved from previous design) */
.letter-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 26px;
  padding: 0 7px;
  border-radius: 6px;
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  line-height: 1;
}

.letter-grade--sm {
  min-width: 24px;
  height: 22px;
  padding: 0 5px;
  font-size: 12px;
  border-radius: 5px;
}

.letter-grade--a { background: #dcfce7; color: #14532d; }
.letter-grade--b { background: #dbeafe; color: #1e3a8a; }
.letter-grade--c { background: #fef3c7; color: #78350f; }
.letter-grade--d { background: #ffedd5; color: #7c2d12; }
.letter-grade--f { background: #fee2e2; color: #7f1d1d; }

/* Tier badge in detail header */
.tier-badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}

.tier-badge--1 { background: #dcfce7; color: #14532d; }
.tier-badge--2 { background: #dbeafe; color: #1e3a8a; }
.tier-badge--3 { background: #fef3c7; color: #78350f; }
.tier-badge--4 { background: #f3f4f6; color: #374151; }
.tier-badge--existing { background: #e0e7ff; color: #3730a3; }
.tier-badge--deprioritized { background: #fee2e2; color: #7f1d1d; }

/* ============================================================
   INLINE DRAFT EDITOR (in right pane)
   ============================================================ */

.draft-editor {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--team-border-soft);
}

.draft-editor__row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0;
  align-items: center;
  background: #fff;
}

.draft-editor__row--body { align-items: stretch; }

.draft-editor__label {
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 700;
  color: var(--team-ink-soft);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--team-bg-soft);
  border-right: 1px solid var(--team-border-soft);
  display: flex;
  align-items: center;
}

.draft-editor__label--top {
  align-items: flex-start;
  padding-top: 12px;
}

.draft-editor__value-static {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--team-ink);
}

/* Inline note under CC row — explains auto-BCC */
.draft-editor__row--note {
  border-bottom: 0 !important;
  padding-top: 2px;
}
.draft-editor__note {
  padding: 6px 14px 10px;
  font-size: 11px;
  color: var(--team-ink-soft, #64748b);
  font-style: italic;
  line-height: 1.5;
}

.draft-editor__input {
  border: 0;
  outline: 0;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--team-ink);
  background: #fff;
  width: 100%;
  transition: background 0.12s;
}

.draft-editor__input:focus { background: #fffef3; }
.draft-editor__input--bold { font-weight: 600; }

.draft-editor__textarea {
  border: 0;
  outline: 0;
  padding: 14px;
  font-family: 'DM Sans', -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--team-ink);
  background: #fff;
  width: 100%;
  min-height: 280px;
  resize: vertical;
  transition: background 0.12s;
}

.draft-editor__textarea:focus { background: #fffef3; }

.draft-editor__status {
  margin: 14px 20px 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}

.draft-editor__status--info    { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }
.draft-editor__status--success { background: #f0fdf4; color: #14532d; border: 1px solid #bbf7d0; }
.draft-editor__status--error   { background: #fef2f2; color: #7f1d1d; border: 1px solid #fecaca; }

.draft-editor__delivery-note {
  margin: 14px 20px 0;
  padding: 12px 14px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  font-size: 13px;
  color: #78350f;
  line-height: 1.5;
}

.draft-editor__meta {
  margin: 14px 20px 16px;
  padding: 10px 14px;
  background: var(--team-bg-soft);
  border-radius: 8px;
  font-size: 12px;
  color: var(--team-ink-soft);
  line-height: 1.5;
}

.draft-editor__meta strong { color: var(--team-ink); }

.draft-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--team-border-soft);
  background: var(--team-bg-softer);
}

.draft-btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--team-border);
  background: #fff;
  color: var(--team-ink);
  font-family: inherit;
  transition: background 0.15s, transform 0.05s;
}

.draft-btn:hover { background: var(--team-bg-soft); }
.draft-btn:active { transform: translateY(1px); }
.draft-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.draft-btn--primary {
  background: var(--team-success);
  color: #fff;
  border-color: var(--team-success);
}

.draft-btn--primary:hover { background: #15803d; }

.draft-btn--marksent {
  color: var(--team-accent-ink);
  border-color: rgba(47, 195, 229, 0.4);
  background: rgba(47, 195, 229, 0.06);
}

.draft-btn--marksent:hover {
  background: rgba(47, 195, 229, 0.15);
}

.draft-btn--danger {
  color: var(--team-danger);
  border-color: #fecaca;
  background: #fff;
}

.draft-btn--danger:hover { background: #fef2f2; }

/* ============================================================
   SENT / OUTREACH BANNER
   ============================================================ */

.sent-banner {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 14px 20px;
  border-radius: 10px;
  margin-bottom: 14px;
}

.sent-banner__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #14532d;
  margin-bottom: 6px;
}

.sent-banner__body {
  font-size: 13px;
  color: #14532d;
  line-height: 1.55;
}

.sent-banner__subject {
  font-size: 12px;
  color: #166534;
  margin-top: 4px;
}

.sent-banner__actions {
  margin-top: 10px;
}

/* ============================================================
   PRICING LIST
   ============================================================ */

.pricing-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--team-bg-soft);
  border-radius: 6px;
  font-size: 13px;
}

.pricing-list__device {
  font-weight: 600;
  color: var(--team-ink);
}

.pricing-list__model {
  font-size: 11px;
  color: var(--team-ink-soft);
  margin-left: 6px;
}

.pricing-list__price {
  font-weight: 700;
  color: var(--team-ink);
}

.pricing-list__price--tbd {
  color: var(--team-ink-soft);
  font-weight: 500;
  font-style: italic;
}

.pricing-list__price--cached {
  color: var(--team-ink-soft);
  font-weight: 600;
}
.pricing-list__price--cached small {
  display: inline-block;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pricing-list__item {
  align-items: flex-start;
}
.pricing-list__body { flex: 1; min-width: 0; }

.pricing-list__note {
  margin-top: 4px;
  font-size: 11px;
  color: var(--team-ink-soft);
}
.pricing-list__note summary {
  cursor: pointer;
  color: #64748b;
  font-weight: 500;
  list-style: none;
}
.pricing-list__note summary::-webkit-details-marker { display: none; }
.pricing-list__note summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s;
}
.pricing-list__note[open] summary::before {
  content: '▾ ';
}
.pricing-list__note > div {
  margin-top: 4px;
  padding: 6px 8px;
  background: #fff;
  border-left: 2px solid #e2e8f0;
  line-height: 1.5;
}

.pricing-list--collapsed .pricing-list__item:nth-child(n+7) {
  display: none;
}

.dsec__toggle {
  margin-top: 8px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--team-border, #e2e8f0);
  border-radius: 6px;
  font-size: 12px;
  color: var(--team-ink-soft, #475569);
  cursor: pointer;
}
.dsec__toggle:hover {
  background: var(--team-bg-soft, #f8fafc);
  color: var(--team-ink, #0f172a);
}

.dsec__count {
  font-size: 12px;
  font-weight: 500;
  color: var(--team-ink-soft, #64748b);
  margin-left: 4px;
}

/* ============================================================
   OUTREACH HISTORY
   ============================================================ */

.outreach-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.outreach-list__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  background: var(--team-bg-soft);
  border-radius: 6px;
}

.outreach-list__date {
  font-weight: 600;
  color: var(--team-ink);
  flex-shrink: 0;
  min-width: 100px;
  font-size: 12px;
}

.outreach-list__status {
  color: var(--team-ink-soft);
  flex-shrink: 0;
  min-width: 80px;
  font-size: 12px;
  text-transform: capitalize;
}

.outreach-list__notes {
  flex: 1;
  color: var(--team-ink);
}

/* ============================================================
   SOURCES
   ============================================================ */

.sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sources-list__item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  background: var(--team-bg-soft);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}

.sources-list__kind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--team-accent-ink);
  padding-top: 2px;
}

.sources-list__kind--internal {
  color: #78350f;
}

.sources-list__content {
  color: var(--team-ink);
}

.sources-list__content a {
  color: var(--team-accent-ink);
  text-decoration: none;
  word-break: break-all;
}

.sources-list__content a:hover { text-decoration: underline; }

.sources-list__note {
  display: block;
  font-size: 12px;
  color: var(--team-ink-soft);
  margin-top: 2px;
}

/* ============================================================
   ZOHO PILLS
   ============================================================ */

.zoho-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.zoho-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(47, 195, 229, 0.1);
  color: var(--team-accent-ink);
  border: 1px solid rgba(47, 195, 229, 0.3);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-decoration: none;
  transition: background 0.15s;
}

.zoho-pill:hover {
  background: rgba(47, 195, 229, 0.2);
}

/* ============================================================
   LEGEND MODAL
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 22, 40, 0.6);
}

.modal__panel {
  position: relative;
  background: #fff;
  border-radius: 12px;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  box-shadow: var(--team-shadow-lg);
}

.modal__panel--wide { max-width: 760px; }

.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  font-size: 22px;
  color: var(--team-ink-soft);
  cursor: pointer;
  line-height: 1;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.modal__close:hover {
  background: var(--team-bg-soft);
  color: var(--team-ink);
}

.modal__title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--team-ink);
}

.legend-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.legend-section__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--team-ink-soft);
  margin-bottom: 10px;
}

.legend-note {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--team-ink-soft);
}

.legend-dims {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.legend-dims dt {
  font-weight: 700;
  color: var(--team-accent-ink);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding-top: 2px;
}

.legend-dims dd {
  margin: 0;
  color: var(--team-ink);
}

.legend-dims dd strong { color: var(--team-ink); font-weight: 600; }

.legend-grades {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 12px;
  color: var(--team-ink-soft);
}

.legend-grades > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
   ASK SCOUT — floating AI chat
   ============================================================ */

.ask-scout-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 18px 38px -14px rgba(2, 6, 23, 0.55), 0 2px 6px rgba(2, 6, 23, 0.15);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.ask-scout-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -14px rgba(2, 6, 23, 0.6), 0 3px 8px rgba(2, 6, 23, 0.2);
}
.ask-scout-launcher__icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  background: rgba(56, 189, 248, 0.2);
  border-radius: 50%;
  font-size: 15px;
}
.ask-scout-launcher__pulse {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px #0f172a;
}
.ask-scout-launcher__pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: #22c55e;
  opacity: 0.45;
  animation: scout-pulse 2s ease-out infinite;
}

/* Panel — [hidden] MUST win over display:flex; without this the panel
   never truly hides and the opacity transition doesn't re-trigger on open. */
.ask-scout[hidden] { display: none !important; }

.ask-scout {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  width: min(440px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  box-shadow: 0 30px 60px -20px rgba(2, 6, 23, 0.35), 0 4px 12px rgba(2, 6, 23, 0.08);
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.ask-scout.ask-scout--open {
  opacity: 1;
  transform: none;
}

.ask-scout__header {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
}
.ask-scout__title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ask-scout__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #38bdf8;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.ask-scout__name {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.1;
}
.ask-scout__sub {
  font-size: 11px;
  color: rgba(226, 232, 240, 0.72);
  margin-top: 2px;
}
.ask-scout__close {
  background: transparent;
  border: 0;
  color: rgba(226, 232, 240, 0.8);
  font-size: 22px;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.ask-scout__close:hover {
  background: rgba(226, 232, 240, 0.12);
  color: #fff;
}

.ask-scout__messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px 16px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

.ask-scout__intro {
  padding: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 13px;
  color: #334155;
  line-height: 1.55;
}
.ask-scout__intro p { margin: 0 0 10px; }
.ask-scout__intro strong { color: #0f172a; }
.ask-scout__intro-sub {
  margin-top: 14px !important;
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
}
.ask-scout__starters {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ask-scout__starter {
  text-align: left;
  padding: 8px 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  color: #334155;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.12s, border-color 0.12s;
}
.ask-scout__starter:hover {
  background: #e0f2fe;
  border-color: #bae6fd;
  color: #0c4a6e;
}

.ask-scout__msg {
  display: flex;
  width: 100%;
}
.ask-scout__msg--user { justify-content: flex-end; }
.ask-scout__msg--assistant { justify-content: flex-start; }

.ask-scout__bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.55;
  word-wrap: break-word;
}
.ask-scout__msg--user .ask-scout__bubble {
  background: #0f172a;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ask-scout__msg--assistant .ask-scout__bubble {
  background: #fff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-bottom-left-radius: 4px;
}
.ask-scout__bubble p { margin: 0 0 8px; }
.ask-scout__bubble p:last-child { margin-bottom: 0; }
.ask-scout__bubble strong { color: inherit; font-weight: 700; }
.ask-scout__bubble ul,
.ask-scout__bubble ol {
  margin: 6px 0;
  padding-left: 20px;
}
.ask-scout__bubble li { margin: 2px 0; }
.ask-scout__bubble code {
  background: rgba(15, 23, 42, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'SF Mono', Menlo, monospace;
}
.ask-scout__msg--user .ask-scout__bubble code {
  background: rgba(255, 255, 255, 0.15);
}

.ask-scout__dots {
  display: inline-flex;
  gap: 4px;
}
.ask-scout__dots span {
  width: 6px;
  height: 6px;
  background: #94a3b8;
  border-radius: 50%;
  display: inline-block;
  animation: ask-scout-blink 1.2s ease-in-out infinite;
}
.ask-scout__dots span:nth-child(2) { animation-delay: 0.15s; }
.ask-scout__dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ask-scout-blink {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.1); }
}

.ask-scout__error {
  color: #b91c1c;
  font-size: 13px;
  line-height: 1.5;
}

.ask-scout__form {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 10px 4px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
}
.ask-scout__input {
  flex: 1;
  min-height: 40px;
  max-height: 160px;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: #0f172a;
  resize: none;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.ask-scout__input:focus {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}
.ask-scout__input:disabled {
  background: #f1f5f9;
  cursor: not-allowed;
}
.ask-scout__send {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #0f172a;
  color: #fff;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, transform 0.12s;
  flex-shrink: 0;
}
.ask-scout__send:hover:not(:disabled) {
  background: #1e293b;
  transform: translateY(-1px);
}
.ask-scout__send:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
}
.ask-scout__foot {
  padding: 4px 14px 10px;
  font-size: 10.5px;
  color: #94a3b8;
  line-height: 1.4;
  text-align: center;
  background: #fff;
}

@media (max-width: 540px) {
  .ask-scout {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
    max-height: calc(100vh - 24px);
  }
  .ask-scout-launcher__label { display: none; }
  .ask-scout-launcher { padding: 12px; }
}

/* ============================================================
   PHASE 2 CATEGORY CHIPS — the CEO's "Amazon × Google for procurement"
   vision rendered as a tangible row. Filled buckets route into matrix
   filter; empty ones click through to Ask Scout with a queue-discovery
   prompt pre-filled. No feature gating — the empty states sell the
   roadmap.
   ============================================================ */
.cc-matrix__categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  padding: 14px 20px 10px;
  border-top: 1px solid var(--team-border-soft);
  border-bottom: 1px solid var(--team-border-soft);
  background: var(--team-bg-soft);
}
.cc-matrix__cat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--team-border);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
  font-family: inherit;
}
.cc-matrix__cat:hover {
  border-color: var(--team-ink-soft);
  transform: translateY(-1px);
}
.cc-matrix__cat-icon { font-size: 18px; line-height: 1; }
.cc-matrix__cat-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--team-ink);
  margin-top: 2px;
}
.cc-matrix__cat-sub {
  font-size: 10.5px;
  color: var(--team-ink-soft);
}
.cc-matrix__cat--live {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.cc-matrix__cat--live .cc-matrix__cat-sub {
  color: #15803d;
  font-weight: 600;
}
.cc-matrix__cat--empty {
  border-style: dashed;
  opacity: 0.82;
}
.cc-matrix__cat--empty:hover {
  opacity: 1;
  background: #fef3c7;
  border-color: #fde68a;
}

/* ============================================================
   SCOUT ACTIVITY FEED — "always on" proof of life
   ============================================================ */
.cc-activity {
  margin: 18px 0;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--team-border-soft);
  border-radius: 10px;
}
.cc-activity__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.cc-activity__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--team-ink);
  margin: 0;
}
.cc-activity__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
  animation: cc-activity-pulse 2s ease-in-out infinite;
}
@keyframes cc-activity-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-activity__dot { animation: none; }
}
.cc-activity__subtitle {
  font-size: 12px;
  color: var(--team-ink-soft);
}
.cc-activity__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cc-activity__empty {
  font-size: 13px;
  color: var(--team-ink-soft);
  padding: 10px 2px;
  font-style: italic;
}
.cc-activity__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--team-border-soft);
}
.cc-activity__item:last-child { border-bottom: 0; }
.cc-activity__icon {
  font-size: 16px;
  line-height: 1.2;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
.cc-activity__content {
  flex: 1;
  min-width: 0;
}
.cc-activity__item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--team-ink);
}
.cc-activity__item-body {
  font-size: 12px;
  color: var(--team-ink-soft);
  margin-top: 2px;
  line-height: 1.45;
}
.cc-activity__time {
  font-size: 11px;
  color: var(--team-ink-muted);
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   LOG-REPLY INLINE FORM — replaces 3 native prompt() dialogs
   ============================================================ */
.log-reply-form {
  margin: 0 0 10px;
  padding: 12px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
}
.log-reply-form__title {
  font-size: 13px;
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 8px;
}
.log-reply-form__input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--team-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: var(--team-ink);
  background: #fff;
  resize: vertical;
  margin-bottom: 8px;
  box-sizing: border-box;
}
.log-reply-form__input--one-line { resize: none; }
.log-reply-form__input:focus {
  outline: none;
  border-color: #2563eb;
}
.log-reply-form__select {
  padding: 7px 10px;
  border: 1px solid var(--team-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  width: 100%;
}
.log-reply-form__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.log-reply-form__row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.log-reply-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
@media (max-width: 520px) {
  .log-reply-form__row { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE — inventory matrix collapses to card layout under 720px
   ============================================================
   The 8-column grid is ~940px of minimums. On phones it horizontal-
   scrolls or crushes. Below 720px we restack each row into a 2-line
   card: line 1 = storage + grade + price, line 2 = supplier tier +
   deal bar + actions. Column header row is hidden since the visual
   stack already labels each field.
   ============================================================ */
@media (max-width: 720px) {
  .cc-matrix__variant,
  .cc-matrix__child {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "storage  colors  price"
      "grade    supplier actions"
      "deal     deal     deal";
    gap: 6px 10px;
    padding: 10px 12px;
  }
  .cc-matrix__variant-storage { grid-area: storage; font-size: 13px; }
  .cc-matrix__variant-colors { grid-area: colors; font-size: 11px; text-align: center; }
  .cc-matrix__variant-grade { grid-area: grade; justify-self: start; }
  .cc-matrix__variant-supplier { grid-area: supplier; font-size: 11px; }
  .cc-matrix__variant-qty { display: none; }  /* roll qty into the deal label to save space */
  .cc-matrix__variant-price {
    grid-area: price;
    text-align: right;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }
  .cc-matrix__variant-deal { grid-area: deal; padding-top: 2px; }
  .cc-matrix__variant-actions { grid-area: actions; justify-self: end; }

  /* Hide the desktop column header row — the cards are self-labeling */
  .cc-matrix__colhead { display: none; }

  /* Slim the matrix toolbar on mobile */
  .cc-matrix__controls {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .cc-matrix__model-toolbar { flex-wrap: wrap; }
  .cc-matrix__model-toolbar-hint { display: none; }

  /* Categories stack 2-wide */
  .cc-matrix__categories {
    grid-template-columns: repeat(2, 1fr);
    padding: 10px 12px;
  }

  /* Compact model header on mobile — drop the stats into a sub-row */
  .cc-matrix__model-head {
    flex-wrap: wrap;
    gap: 6px;
  }
  .cc-matrix__model-stats { font-size: 11px; width: 100%; }

  /* Quick-jump bar — allow wrap, smaller chips */
  .cc-quickjump {
    padding: 8px 10px;
    gap: 4px;
  }
  .cc-quickjump__link {
    padding: 4px 10px;
    font-size: 11px;
  }

  /* Hub topbar — already has its own mobile rule; nudge padding */
  .team-topbar__inner { padding: 0 12px; }
}

/* Hub portraits on narrow widths — scale the wordmark overlay so it
   doesn't overlap the subject's face. */
@media (max-width: 540px) {
  .portrait-wordmark { font-size: 40px !important; }
  .portrait-kicker { font-size: 10px !important; letter-spacing: 0.2em !important; }
  .portrait-tagline { font-size: 12px !important; }
}

/* =============================================================
   POST-AUDIT FIXES — sales-rep friction removal
   ============================================================= */

/* Supplier-name click-through in the matrix — looks like a regular
   label until hover, then reveals as a link. */
.cc-matrix__supplier-name--link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--team-ink);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
}
.cc-matrix__supplier-name--link:hover,
.cc-matrix__supplier-name--link:focus-visible {
  color: #1d4ed8;
  text-decoration: underline;
  outline: none;
}

/* Phase 2 chip active state — shows the filter is engaged so users
   don't think it's a dead click. */
.cc-matrix__cat--active {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  box-shadow: 0 0 0 1px #2563eb inset;
}
.cc-matrix__cat--active .cc-matrix__cat-sub {
  color: #1d4ed8 !important;
  font-weight: 700;
}
.cc-matrix__cat--all {
  background: #f9fafb;
  border-style: dashed;
}

/* Empty-state "covering suppliers" list — shown when a filter
   returns zero SKUs but suppliers do carry the category/brand. */
.cc-matrix__empty--covering {
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border: 1px solid var(--team-border-soft);
  border-radius: 10px;
  padding: 20px 22px;
  margin: 12px 18px 18px;
  text-align: left;
  color: var(--team-ink);
  line-height: 1.55;
}
.cc-matrix__empty--covering > div + div {
  margin-top: 10px;
  color: var(--team-ink-soft);
  font-size: 13px;
}
.cc-matrix__empty-suppliers {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px !important;
}
.cc-matrix__empty-sup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--team-border);
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: var(--team-ink);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  font-family: inherit;
}
.cc-matrix__empty-sup:hover {
  background: #eff6ff;
  border-color: #2563eb;
  color: #1d4ed8;
}
.cc-matrix__empty-tier {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: #fef3c7;
  color: #78350f;
}
.cc-matrix__empty-hint {
  margin-top: 14px !important;
  padding: 10px 12px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 12px !important;
  color: #78350f !important;
}
.cc-matrix__empty-hint strong { color: #78350f; }

/* Sourcing quote-recording form + captured-quotes list */
.cc-sourcing-item__quotes .cc-sourcing-item__suggestions-title {
  color: #1e3a8a;
}
.cc-sourcing-item__suggestion-chosen {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0;
}
.cc-sourcing-item__chip-chosen {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  background: #10b981;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.cc-sourcing-item__qsrc {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 4px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cc-sourcing-item__qmeta {
  color: var(--team-ink-soft);
  font-size: 11px;
}
.cc-sourcing-item__add-quote {
  margin-top: 10px;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px dashed var(--team-border);
  border-radius: 8px;
}
.cc-sourcing-item__add-quote > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #1d4ed8;
  list-style: none;
  user-select: none;
}
.cc-sourcing-item__add-quote > summary::-webkit-details-marker { display: none; }
.cc-sourcing-item__add-quote-hint {
  font-weight: 500;
  color: var(--team-ink-soft);
}
.cc-sourcing-item__add-quote[open] > summary { margin-bottom: 10px; }
.cc-sourcing-item__quote-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cc-sourcing-item__quote-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cc-sourcing-item__quote-row > label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--team-ink-soft);
  flex: 1 1 120px;
}
.cc-sourcing-item__quote-row > label input,
.cc-sourcing-item__quote-row > label select {
  padding: 6px 8px;
  border: 1px solid var(--team-border);
  border-radius: 6px;
  font-size: 12.5px;
  font-family: inherit;
  background: #fff;
  color: var(--team-ink);
}
.cc-sourcing-item__quote-row > label input:focus,
.cc-sourcing-item__quote-row > label select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.cc-sourcing-item__quote-actions {
  display: flex;
  justify-content: flex-end;
}

/* =============================================================
   MATRIX — mobile breakpoint under 680px
   8-column grid collapses into card-style rows so reps can lookup
   "do we have X in stock" in a customer meeting on their phone.
   ============================================================= */
@media (max-width: 680px) {
  /* Variant row — drop the 8-column grid, go to a compact 2-line card */
  .cc-matrix__variant {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "grade supplier price"
      "storage colors actions"
      "deal   deal     qty" !important;
    gap: 4px 8px !important;
    padding: 10px 12px !important;
    align-items: center;
    font-size: 12px;
  }
  .cc-matrix__variant-storage { grid-area: storage; font-weight: 700; }
  .cc-matrix__variant-colors  { grid-area: colors; font-size: 11px; color: var(--team-ink-soft); }
  .cc-matrix__variant-grade   { grid-area: grade; }
  .cc-matrix__variant-supplier {
    grid-area: supplier;
    min-width: 0;
    justify-self: start;
    max-width: 100%;
  }
  .cc-matrix__variant-deal    {
    grid-area: deal;
    font-size: 10.5px;
    margin-top: 2px;
  }
  .cc-matrix__variant-qty     {
    grid-area: qty;
    text-align: right;
    font-size: 11px;
    color: var(--team-ink-soft);
  }
  .cc-matrix__variant-qty::before { content: 'qty '; color: var(--team-ink-faint); }
  .cc-matrix__variant-price   {
    grid-area: price;
    text-align: right;
    font-size: 14px;
    font-weight: 800;
  }
  .cc-matrix__variant-actions { grid-area: actions; justify-self: end; }

  /* Hide the sticky column header row on mobile — the cards have
     their own labels, and the 8-col grid header would squash visibly. */
  .cc-matrix__colhead,
  .cc-matrix__colhead--sticky { display: none !important; }

  /* Shrink the tier pill + make supplier name break if needed */
  .cc-matrix__supplier-name--link {
    white-space: normal;
    line-height: 1.25;
  }

  /* Deal bar gets a simpler label-only layout so the card doesn't wrap */
  .deal-bar__label { font-size: 10.5px !important; }
  .deal-bar__track { display: none; } /* no room on mobile cards */

  /* Child (per-color) rows collapse to single-line */
  .cc-matrix__child {
    display: flex !important;
    justify-content: space-between !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    gap: 8px;
  }
  .cc-matrix__child > span:empty { display: none; }

  /* Phase 2 chips — 2 per row instead of 4, tighter padding */
  .cc-matrix__categories {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 10px 12px !important;
    gap: 6px !important;
  }
  .cc-matrix__cat { padding: 8px 10px !important; }
  .cc-matrix__cat-label { font-size: 12px; }
  .cc-matrix__cat-sub { font-size: 10px; }

  /* Covering-suppliers empty-state margins */
  .cc-matrix__empty--covering {
    margin: 10px 10px 14px !important;
    padding: 16px !important;
  }

  /* Sourcing add-quote form — stack inputs */
  .cc-sourcing-item__quote-row { flex-direction: column; gap: 6px; }
  .cc-sourcing-item__quote-row > label { flex-basis: auto; }
}

/* Tighter still under 440px — typical phone portrait */
@media (max-width: 440px) {
  .cc-matrix__variant {
    grid-template-areas:
      "grade price"
      "supplier supplier"
      "storage colors"
      "deal deal"
      "qty actions" !important;
    grid-template-columns: auto 1fr !important;
  }
  .cc-matrix__variant-price { font-size: 15px; }
  .cc-matrix__categories { grid-template-columns: 1fr 1fr !important; }
}

/* =============================================================
   POST-AUDIT ROUND 2 — sourcing search, My Day, health, paste-quote
   ============================================================= */

/* Sourcing controls — search + status chips above the list */
.cc-sourcing__controls {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 14px 0 10px;
  padding: 12px 14px;
  background: #f9fafb;
  border: 1px solid var(--team-border-soft);
  border-radius: 8px;
  flex-wrap: wrap;
}
.cc-sourcing__search {
  flex: 1 1 220px;
  min-width: 180px;
  padding: 8px 12px;
  border: 1px solid var(--team-border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}
.cc-sourcing__search:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.cc-sourcing__status-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cc-sourcing__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--team-border);
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  color: var(--team-ink);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, border-color 0.1s;
}
.cc-sourcing__chip:hover:not(:disabled) { background: #f1f5f9; }
.cc-sourcing__chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.cc-sourcing__chip--active {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}
.cc-sourcing__chip-count {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.08);
}
.cc-sourcing__chip--active .cc-sourcing__chip-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.cc-sourcing-item__customer {
  font-size: 13px;
  font-weight: 700;
  color: #1d4ed8;
  margin-right: 4px;
}

/* My Day strip — per-rep recap */
.cc-myday {
  margin: 18px 0;
  padding: 16px 20px;
  background: linear-gradient(135deg, #eff6ff 0%, #fff 80%);
  border: 1px solid #bfdbfe;
  border-radius: 10px;
}
.cc-myday__header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.cc-myday__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--team-ink);
  margin: 0;
}
.cc-myday__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}
.cc-myday__subtitle {
  font-size: 12px;
  color: var(--team-ink-soft);
}
.cc-myday__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.cc-myday__stat {
  --tile-color: #2563eb;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--team-border-soft);
  border-left: 3px solid var(--tile-color);
}
.cc-myday__stat-n {
  font-size: 22px;
  font-weight: 800;
  color: var(--tile-color);
  line-height: 1;
}
.cc-myday__stat-l {
  font-size: 11px;
  color: var(--team-ink-soft);
  margin-top: 4px;
}
.cc-myday__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cc-myday__item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 10px;
  padding: 6px 10px;
  font-size: 12.5px;
  border-radius: 6px;
  align-items: center;
}
.cc-myday__item:hover { background: rgba(255,255,255,0.7); }
.cc-myday__kind {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}
.cc-myday__item--sourcing .cc-myday__kind { background: #dbeafe; color: #1e3a8a; }
.cc-myday__item--quote    .cc-myday__kind { background: #d1fae5; color: #065f46; }
.cc-myday__item--reply    .cc-myday__kind { background: #ede9fe; color: #5b21b6; }
.cc-myday__item--outreach .cc-myday__kind { background: #fce7f3; color: #9f1239; }
.cc-myday__line { color: var(--team-ink); line-height: 1.35; }
.cc-myday__ts { font-size: 11px; color: var(--team-ink-soft); }

/* Relationship health in drawer */
.dsec--health .dsec__header { margin-bottom: 8px; }
.dsec__hint { font-size: 11px; color: var(--team-ink-soft); margin-left: auto; }
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
}
.health-tile {
  --tile-ring: var(--team-border);
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--team-border-soft);
  border-top: 3px solid var(--tile-ring);
}
.health-tile--fresh  { --tile-ring: #10b981; }
.health-tile--aging  { --tile-ring: #f59e0b; }
.health-tile--stale  { --tile-ring: #ef4444; }
.health-tile--warn   { background: #fef2f2; }
.health-tile__n {
  font-size: 17px;
  font-weight: 800;
  color: var(--team-ink);
  line-height: 1;
}
.health-tile__l {
  font-size: 10.5px;
  color: var(--team-ink-soft);
  margin-top: 4px;
}

/* Quote staleness chips inside sourcing items */
.cc-sourcing-item__stale {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.cc-sourcing-item__stale--aging {
  background: #fef3c7;
  color: #78350f;
}
.cc-sourcing-item__stale--expired {
  background: #fee2e2;
  color: #991b1b;
}

/* Paste-a-quote details section + preview table */
.cc-sourcing-item__paste-quote { border-color: #bfdbfe; background: #eff6ff; }
.cc-sourcing-item__paste-quote > summary { color: #1d4ed8; }
.cc-sourcing-item__paste-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--team-border);
  border-radius: 6px;
  font-size: 12.5px;
  font-family: ui-monospace, 'SF Mono', 'Consolas', monospace;
  background: #fff;
  resize: vertical;
  min-height: 90px;
  box-sizing: border-box;
}
.cc-sourcing-item__paste-actions {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-top: 8px;
  flex-wrap: wrap;
}
.cc-sourcing-item__paste-supplier {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--team-ink-soft);
  flex: 1 1 200px;
  max-width: 280px;
}
.cc-sourcing-item__paste-supplier select {
  padding: 6px 8px;
  border: 1px solid var(--team-border);
  border-radius: 6px;
  font-size: 12.5px;
  font-family: inherit;
}
.cc-sourcing-item__paste-status {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #f8fafc;
  font-size: 12px;
  color: var(--team-ink);
}
.cc-sourcing-item__paste-status--err {
  background: #fef2f2;
  color: #991b1b;
}
.cc-sourcing-item__paste-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 11.5px;
  background: #fff;
  border: 1px solid var(--team-border);
  border-radius: 6px;
  overflow: hidden;
}
.cc-sourcing-item__paste-table th,
.cc-sourcing-item__paste-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--team-border-soft);
  vertical-align: middle;
}
.cc-sourcing-item__paste-table thead {
  background: #f8fafc;
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--team-ink-soft);
}
.cc-sourcing-item__paste-table tbody tr:last-child td { border-bottom: none; }
.cc-sourcing-item__paste-table code {
  background: #f1f5f9;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10.5px;
}
.cc-sourcing-item__paste-table select,
.cc-sourcing-item__paste-table input {
  padding: 3px 6px;
  border: 1px solid var(--team-border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 11.5px;
  background: #fff;
  max-width: 100%;
}
.cc-sourcing-item__paste-conf {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.cc-sourcing-item__paste-conf--high   { background: #d1fae5; color: #065f46; }
.cc-sourcing-item__paste-conf--medium { background: #fef3c7; color: #78350f; }
.cc-sourcing-item__paste-conf--low    { background: #fee2e2; color: #991b1b; }

/* Mobile tweaks for new blocks */
@media (max-width: 680px) {
  .cc-myday { padding: 12px 14px; }
  .cc-myday__item { grid-template-columns: 60px 1fr; gap: 6px; }
  .cc-myday__ts { grid-column: 1 / -1; font-size: 10px; padding-left: 66px; }
  .cc-sourcing__controls { padding: 10px; gap: 8px; }
  .health-grid { grid-template-columns: repeat(2, 1fr); }
  .cc-sourcing-item__paste-table { font-size: 10.5px; }
  .cc-sourcing-item__paste-table th:nth-child(3),
  .cc-sourcing-item__paste-table td:nth-child(3) { max-width: 120px; word-break: break-word; }
}

/* =============================================================
   POST-AUDIT ROUND 3 — drawer scroll, toasts, paste-row error
   ============================================================= */

/* Sourcing auto-bump / submit toast */
.cc-sourcing__toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin: 10px 0;
  border-radius: 8px;
  background: #fef3c7;
  color: #78350f;
  border: 1px solid #fde68a;
  font-size: 13px;
  font-weight: 600;
  animation: cc-toast-slide 0.2s ease-out;
}
@keyframes cc-toast-slide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cc-sourcing__toast-btn {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 6px;
  background: #78350f;
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.cc-sourcing__toast-btn:hover { background: #92400e; }
.cc-sourcing__toast-close {
  background: transparent;
  border: none;
  color: #78350f;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.7;
}
.cc-sourcing__toast-close:hover { opacity: 1; }

/* Paste row error flag — highlights rows the save loop couldn't persist */
.cc-sourcing-item__paste-row--err {
  background: #fef2f2 !important;
  outline: 2px solid #fca5a5;
  outline-offset: -2px;
}
.cc-sourcing-item__paste-row--err td:first-child::before {
  content: "⚠";
  color: #991b1b;
  font-weight: 800;
  margin-right: 4px;
}

/* =============================================================
   POST-AUDIT ROUND 4 — notifications, pipeline, assignee
   ============================================================= */

/* Watchlist notifications banner */
.cc-notifications {
  margin: 12px 0;
  padding: 14px 18px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  animation: cc-notif-enter 0.25s ease-out;
}
@keyframes cc-notif-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cc-notifications__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.cc-notifications__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #78350f;
  margin: 0;
}
.cc-notifications__bell {
  animation: cc-bell-ring 1.8s ease-in-out infinite;
  transform-origin: 50% 0;
}
@keyframes cc-bell-ring {
  0%, 90%, 100% { transform: rotate(0); }
  93%           { transform: rotate(-12deg); }
  96%           { transform: rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cc-notifications__bell { animation: none; }
}
.cc-notifications__count {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  min-width: 20px;
  text-align: center;
}
.cc-notifications__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cc-notifications__item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 12.5px;
}
.cc-notifications__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cc-notifications__badge--price_below  { background: #d1fae5; color: #065f46; }
.cc-notifications__badge--stock_above  { background: #dbeafe; color: #1e3a8a; }
.cc-notifications__badge--back_in_stock { background: #fce7f3; color: #9f1239; }
.cc-notifications__line {
  color: var(--team-ink);
  line-height: 1.35;
}
.cc-notifications__detail {
  color: var(--team-ink-soft);
  font-size: 11.5px;
  margin-left: 6px;
}
.cc-notifications__meta {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  background: #f1f5f9;
  color: #475569;
  margin-left: 4px;
}
.cc-notifications__ts {
  font-size: 11px;
  color: var(--team-ink-soft);
  white-space: nowrap;
}
.cc-notifications__dismiss {
  background: transparent;
  border: none;
  color: #78350f;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.6;
}
.cc-notifications__dismiss:hover { opacity: 1; }

/* Pipeline summary strip */
.cc-pipeline {
  margin: 12px 0 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--team-border-soft);
  border-radius: 10px;
}
.cc-pipeline__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 12px;
  flex-wrap: wrap;
}
.cc-pipeline__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--team-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cc-pipeline__total {
  font-size: 12px;
  color: var(--team-ink-soft);
}
.cc-pipeline__stages {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.cc-pipeline__stage {
  --stage-color: #6b7280;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f9fafb;
  border: 1px solid var(--team-border-soft);
  border-top: 3px solid var(--stage-color);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.1s, transform 0.12s;
}
.cc-pipeline__stage:hover:not(:disabled) {
  background: #fff;
  transform: translateY(-1px);
}
.cc-pipeline__stage:disabled {
  opacity: 0.5;
  cursor: default;
}
.cc-pipeline__stage--active {
  background: #fff;
  box-shadow: 0 0 0 2px var(--stage-color) inset;
}
.cc-pipeline__stage-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--team-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cc-pipeline__stage-n {
  font-size: 22px;
  font-weight: 800;
  color: var(--stage-color);
  line-height: 1;
}
.cc-pipeline__stage-v {
  font-size: 11px;
  color: var(--team-ink);
  font-weight: 600;
}
@media (max-width: 680px) {
  .cc-pipeline__stages { grid-template-columns: repeat(3, 1fr); }
  .cc-pipeline__stage { padding: 8px 10px; }
}
@media (max-width: 440px) {
  .cc-pipeline__stages { grid-template-columns: repeat(2, 1fr); }
}

/* Assignee pill on sourcing cards */
.cc-sourcing-item__assigned {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #f1f5f9;
  border: 1px solid var(--team-border);
  color: var(--team-ink-soft);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s;
}
.cc-sourcing-item__assigned:hover {
  background: #e0e7ff;
  border-color: #818cf8;
  color: #3730a3;
}
.cc-sourcing-item__assigned--mine {
  background: #dbeafe;
  border-color: #60a5fa;
  color: #1e3a8a;
}
.cc-sourcing-item__assigned strong { color: inherit; }
.cc-sourcing-item__btn {
  padding: 4px 10px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid #fcd34d;
  color: #78350f;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.cc-sourcing-item__btn:hover {
  background: #fde68a;
}

/* Share-with-customer modal */
.cc-share-dialog {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-share-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}
.cc-share-dialog__panel {
  position: relative;
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 20px 24px;
}
.cc-share-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--team-border-soft);
}
.cc-share-dialog__head h3 { margin: 0; font-size: 16px; }
.cc-share-dialog__close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--team-ink-soft);
}
.cc-share-dialog__close:hover { color: var(--team-ink); }
.cc-share-dialog__controls {
  display: flex;
  gap: 16px;
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
  font-size: 13px;
}
.cc-share-dialog__controls label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--team-ink);
}
.cc-share-dialog__controls input[type="number"] {
  padding: 4px 8px;
  border: 1px solid var(--team-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
}
.cc-share-dialog__preview {
  border: 1px solid var(--team-border-soft);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 14px;
  background: #fff;
  max-height: 300px;
  overflow: auto;
}
.cc-share-dialog__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.cc-share-dialog__raw {
  margin-top: 12px;
  font-size: 12px;
}
.cc-share-dialog__raw summary {
  cursor: pointer;
  color: var(--team-ink-soft);
  font-weight: 600;
}
.cc-share-dialog__raw pre {
  background: #f8fafc;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: pre-wrap;
  color: var(--team-ink);
  margin-top: 8px;
  max-height: 180px;
  overflow: auto;
}
@media (max-width: 540px) {
  .cc-share-dialog__panel { padding: 14px 16px; }
  .cc-share-dialog__controls { gap: 10px; }
}

/* =============================================================
   PURCHASE ORDERS — read-only Zoho Books PO view
   ============================================================= */
.cc-pos {
  margin: 12px 0;
}
.cc-pos__wrap {
  background: #fff;
  border: 1px solid var(--team-border-soft);
  border-radius: 10px;
  overflow: hidden;
}
.cc-pos__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.cc-pos__summary::-webkit-details-marker { display: none; }
.cc-pos__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--team-ink);
  font-size: 14px;
}
.cc-pos__hint {
  color: var(--team-ink-soft);
  font-size: 12px;
  font-weight: 500;
  margin-right: auto;
}
.cc-pos__count {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--team-ink);
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
}
.cc-pos__body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--team-border-soft);
}
.cc-pos__controls {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 0;
  flex-wrap: wrap;
}
.cc-pos__ctrl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--team-ink-soft);
}
.cc-pos__ctrl input {
  padding: 6px 10px;
  border: 1px solid var(--team-border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
  background: #fff;
  min-width: 160px;
}
.cc-pos__ctrl input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Vendor checkbox-dropdown */
.cc-pos__ctrl--vendor { position: relative; }
.cc-pos__vendor-btn {
  padding: 6px 12px;
  border: 1px solid var(--team-border);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--team-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  text-align: left;
  justify-content: space-between;
}
.cc-pos__vendor-btn:hover { border-color: var(--team-ink-soft); }
.cc-pos__vendor-btn[aria-expanded="true"] {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.cc-pos__vendor-caret { color: var(--team-ink-soft); font-size: 10px; }
.cc-pos__vendor-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 400;
  width: 320px;
  max-height: 380px;
  background: #fff;
  border: 1px solid var(--team-border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cc-pos__vendor-pop-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--team-border-soft);
  background: #f8fafc;
}
.cc-pos__vendor-pop-head input[type="search"] {
  flex: 1 1 auto;
  padding: 5px 8px;
  border: 1px solid var(--team-border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  min-width: 0;
}
.cc-pos__vendor-link {
  background: transparent;
  border: none;
  color: #2563eb;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  white-space: nowrap;
  font-family: inherit;
}
.cc-pos__vendor-link:hover { background: #eff6ff; }
.cc-pos__vendor-x {
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--team-ink-soft);
  padding: 0 4px;
  font-family: inherit;
}
.cc-pos__vendor-x:hover { color: var(--team-ink); }
.cc-pos__vendor-pop-foot {
  border-top: 1px solid var(--team-border-soft);
  padding: 8px 12px;
  display: flex;
  justify-content: flex-end;
  background: #f8fafc;
}
.cc-pos__vendor-list {
  overflow-y: auto;
  flex: 1 1 auto;
  padding: 4px 0;
}
.cc-pos__vendor-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--team-ink);
  user-select: none;
}
.cc-pos__vendor-row:hover { background: #f8fafc; }
.cc-pos__vendor-row input[type="checkbox"] { margin: 0; }
.cc-pos__vendor-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-pos__vendor-row-count {
  font-size: 10.5px;
  color: var(--team-ink-soft);
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 600;
}
.cc-pos__vendor-row--hidden .cc-pos__vendor-row-name {
  color: var(--team-ink-soft);
  text-decoration: line-through;
}
.cc-pos__vendor-empty {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--team-ink-soft);
}
@media (max-width: 540px) {
  .cc-pos__vendor-pop {
    width: calc(100vw - 40px);
    left: -10px;
  }
}

/* =============================================================
   PRODUCT CATALOG — Zoho Books Items search
   ============================================================= */
.cc-catalog { margin: 12px 0; }
.cc-catalog__wrap {
  background: #fff;
  border: 1px solid var(--team-border-soft);
  border-radius: 10px;
  overflow: hidden;
}
.cc-catalog__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.cc-catalog__summary::-webkit-details-marker { display: none; }
.cc-catalog__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--team-ink);
  font-size: 14px;
}
.cc-catalog__source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid #bfdbfe;
  cursor: help;
}
.cc-catalog__source-badge::before {
  content: '⚡';
  font-size: 9px;
  line-height: 1;
}
.cc-catalog__hint {
  color: var(--team-ink-soft);
  font-size: 12px;
  font-weight: 500;
  margin-right: auto;
}
.cc-catalog__count {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--team-ink);
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
}
.cc-catalog__body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--team-border-soft);
}
.cc-catalog__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  flex-wrap: wrap;
}
.cc-catalog__search {
  flex: 1 1 280px;
  min-width: 220px;
  padding: 8px 14px;
  border: 1px solid var(--team-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  background: #fff;
}
.cc-catalog__search:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.cc-catalog__meta {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--team-ink-soft);
}
.cc-catalog__list {
  display: flex;
  flex-direction: column;
}
.cc-catalog__row {
  display: grid;
  grid-template-columns: 1fr 140px 140px 90px 90px 70px 70px;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--team-border-soft);
  align-items: center;
  font-size: 12.5px;
}
.cc-catalog__row:last-child { border-bottom: none; }
.cc-catalog__row--head {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--team-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f8fafc;
  border-radius: 6px;
  border-bottom: none;
}
.cc-catalog__row .r { text-align: right; }
.cc-catalog__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--team-ink);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-catalog__cat {
  font-size: 10.5px;
  color: var(--team-ink-soft);
  font-weight: 500;
}
.cc-catalog__sku code {
  background: #f1f5f9;
  color: var(--team-ink);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, 'SF Mono', monospace;
}
.cc-catalog__vendor {
  color: var(--team-ink-soft);
  font-size: 11.5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-catalog__msrp, .cc-catalog__cost {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--team-ink);
}
.cc-catalog__margin {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
}
.cc-catalog__margin--good { background: #d1fae5; color: #065f46; }
.cc-catalog__margin--ok   { background: #fef3c7; color: #78350f; }
.cc-catalog__margin--thin { background: #fee2e2; color: #991b1b; }
.cc-catalog__margin--none { background: #f1f5f9; color: var(--team-ink-soft); }
.cc-catalog__empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--team-ink-soft);
  font-size: 13px;
  background: #f9fafb;
  border-radius: 8px;
  margin: 8px 0;
}
.cc-catalog__empty--err {
  color: #991b1b;
  background: #fef2f2;
}
@media (max-width: 780px) {
  .cc-catalog__row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name name"
      "sku vendor"
      "msrp cost"
      "marg open";
    gap: 4px 10px;
  }
  .cc-catalog__row--head { display: none; }
  .cc-catalog__name   { grid-area: name; }
  .cc-catalog__sku    { grid-area: sku; }
  .cc-catalog__vendor { grid-area: vendor; text-align: right; }
  .cc-catalog__msrp   { grid-area: msrp; text-align: left; }
  .cc-catalog__msrp::before { content: 'MSRP '; color: var(--team-ink-soft); font-weight: 500; font-size: 10px; }
  .cc-catalog__cost   { grid-area: cost; text-align: right; }
  .cc-catalog__cost::before { content: 'Cost '; color: var(--team-ink-soft); font-weight: 500; font-size: 10px; }
  .cc-catalog__marg   { grid-area: marg; text-align: left; }
  .cc-catalog__row .r:last-child { grid-area: open; text-align: right; }
}

/* =============================================================
   OEM PRICE BOOKS — uploaded distributor / OEM pricing sheets
   ============================================================= */
.cc-pricebooks { margin: 12px 0; }
.cc-pricebooks__wrap {
  background: #fff;
  border: 1px solid var(--team-border-soft);
  border-radius: 10px;
  overflow: hidden;
}
.cc-pricebooks__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.cc-pricebooks__summary::-webkit-details-marker { display: none; }
.cc-pricebooks__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--team-ink);
  font-size: 14px;
}
.cc-pricebooks__hint {
  color: var(--team-ink-soft);
  font-size: 12px;
  font-weight: 500;
  margin-right: auto;
}
.cc-pricebooks__count {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--team-ink);
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
}
.cc-pricebooks__body {
  padding: 0 16px 16px;
  border-top: 1px solid var(--team-border-soft);
}
.cc-pricebooks__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  flex-wrap: wrap;
}
.cc-pricebooks__search {
  flex: 1 1 280px;
  min-width: 220px;
  padding: 8px 14px;
  border: 1px solid var(--team-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13.5px;
  background: #fff;
}
.cc-pricebooks__search:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.cc-pricebooks__vendor {
  padding: 8px 10px;
  border: 1px solid var(--team-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  min-width: 140px;
}
.cc-pricebooks__meta {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--team-ink-soft);
}
.cc-pricebooks__books {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: 8px;
}
.cc-pricebooks__books-empty {
  padding: 10px;
  color: var(--team-ink-soft);
  font-size: 12.5px;
}
.cc-pricebooks__books-empty a { color: #2563eb; text-decoration: none; font-weight: 600; }
.cc-pricebooks__book {
  display: grid;
  grid-template-columns: 180px 1fr auto auto;
  gap: 10px;
  font-size: 12px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
}
.cc-pricebooks__book:hover { background: #fff; }
.cc-pricebooks__book-name {
  font-weight: 700;
  color: #1d4ed8;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-pricebooks__book-name:hover { text-decoration: underline; }
.cc-pricebooks__book-file {
  color: var(--team-ink-soft);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-pricebooks__book-stat {
  color: var(--team-ink);
  font-weight: 600;
  font-size: 11.5px;
  white-space: nowrap;
}
.cc-pricebooks__book-ts {
  color: var(--team-ink-soft);
  font-size: 11px;
  white-space: nowrap;
}
.cc-pricebooks__list {
  display: flex;
  flex-direction: column;
}
.cc-pricebooks__row {
  display: grid;
  grid-template-columns: 170px 1fr 170px 110px 110px;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--team-border-soft);
  align-items: center;
  font-size: 12.5px;
}
.cc-pricebooks__row:last-child { border-bottom: none; }
.cc-pricebooks__row--head {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--team-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f8fafc;
  border-radius: 6px;
  border-bottom: none;
}
.cc-pricebooks__row .r { text-align: right; }
.cc-pricebooks__pn code {
  background: #f1f5f9;
  color: var(--team-ink);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, 'SF Mono', monospace;
}
.cc-pricebooks__subsku {
  display: block;
  font-size: 10.5px;
  color: var(--team-ink-soft);
  margin-top: 2px;
  font-family: ui-monospace, 'SF Mono', monospace;
}
.cc-pricebooks__desc {
  color: var(--team-ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-pricebooks__vendor {
  color: var(--team-ink);
  font-weight: 600;
  font-size: 11.5px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cc-pricebooks__sheet {
  color: var(--team-ink-soft);
  font-size: 10.5px;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cc-pricebooks__msrp, .cc-pricebooks__cost {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--team-ink);
}
.cc-pricebooks__empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--team-ink-soft);
  font-size: 13px;
  background: #f9fafb;
  border-radius: 8px;
  margin: 8px 0;
}
.cc-pricebooks__empty--err { color: #991b1b; background: #fef2f2; }
@media (max-width: 780px) {
  .cc-pricebooks__row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "pn pn"
      "desc desc"
      "vendor vendor"
      "msrp cost";
    gap: 4px 10px;
  }
  .cc-pricebooks__row--head { display: none; }
  .cc-pricebooks__pn     { grid-area: pn; }
  .cc-pricebooks__desc   { grid-area: desc; white-space: normal; color: var(--team-ink-soft); font-size: 11.5px; }
  .cc-pricebooks__vendor { grid-area: vendor; flex-direction: row; gap: 6px; align-items: baseline; }
  .cc-pricebooks__msrp   { grid-area: msrp; text-align: left; }
  .cc-pricebooks__msrp::before { content: 'MSRP '; color: var(--team-ink-soft); font-weight: 500; font-size: 10px; }
  .cc-pricebooks__cost   { grid-area: cost; text-align: right; }
  .cc-pricebooks__cost::before { content: 'Cost '; color: var(--team-ink-soft); font-weight: 500; font-size: 10px; }
  .cc-pricebooks__book { grid-template-columns: 1fr auto; }
  .cc-pricebooks__book-file, .cc-pricebooks__book-stat { grid-column: 1 / -1; }
}

.cc-pos__books-link {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--team-border);
  color: var(--team-ink-soft);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.cc-pos__books-link:hover {
  color: #2563eb;
  border-color: #2563eb;
}
.cc-pos__list {
  display: flex;
  flex-direction: column;
}
.cc-pos__row {
  display: grid;
  grid-template-columns: 90px 100px 180px 1fr 130px 130px 70px;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--team-border-soft);
  align-items: center;
  font-size: 12.5px;
}
.cc-pos__row:last-child { border-bottom: none; }
.cc-pos__row--head {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--team-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f8fafc;
  border-radius: 6px;
  border-bottom: none;
}
.cc-pos__row .r { text-align: right; }
.cc-pos__date { color: var(--team-ink-soft); font-variant-numeric: tabular-nums; }
.cc-pos__number a {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 11.5px;
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}
.cc-pos__number a:hover { text-decoration: underline; }
.cc-pos__vendor { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cc-pos__total { font-weight: 700; color: var(--team-ink); font-variant-numeric: tabular-nums; }
.cc-pos__products {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--team-ink);
}
.cc-pos__products-line { cursor: help; }
.cc-pos__products-more {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: var(--team-ink-soft);
  font-size: 10.5px;
  font-weight: 600;
}
.cc-pos__products--empty { color: #cbd5e1; }
.cc-pos__track { color: var(--team-ink-soft); font-size: 11.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cc-pos__tracking--none { color: #cbd5e1; }

.cc-pos__pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.cc-pos__pill--grey  { background: #f1f5f9; color: #475569; }
.cc-pos__pill--blue  { background: #dbeafe; color: #1e3a8a; }
.cc-pos__pill--amber { background: #fef3c7; color: #78350f; }
.cc-pos__pill--green { background: #d1fae5; color: #065f46; }
.cc-pos__pill--red   { background: #fee2e2; color: #991b1b; }

.cc-pos__empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--team-ink-soft);
  font-size: 13px;
  background: #f9fafb;
  border-radius: 8px;
  margin: 8px 0;
}
.cc-pos__empty--err {
  color: #991b1b;
  background: #fef2f2;
}
.cc-pos__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  margin-top: 4px;
  color: var(--team-ink-soft);
  font-size: 11.5px;
}

@media (max-width: 780px) {
  .cc-pos__row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "date number"
      "vendor vendor"
      "products products"
      "status track"
      "open open";
    gap: 4px 10px;
  }
  .cc-pos__row--head { display: none; }
  .cc-pos__date     { grid-area: date; }
  .cc-pos__number   { grid-area: number; text-align: right; }
  .cc-pos__vendor   { grid-area: vendor; font-weight: 700; color: var(--team-ink); }
  .cc-pos__products { grid-area: products; white-space: normal; font-size: 11.5px; color: var(--team-ink-soft); }
  .cc-pos__status   { grid-area: status; }
  .cc-pos__track    { grid-area: track; text-align: right; }
  .cc-pos__row .r:last-child { grid-area: open; text-align: left; }
  .cc-pos__books-link { margin-left: 0; }
}
@media (max-width: 440px) {
  .cc-pos__controls { gap: 6px; }
  .cc-pos__ctrl input { min-width: 120px; }
}