@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700&display=swap");

/* BUYSTAN Modern Theme
   Theme-only override for Buyer and Supplier portals.
   Sections: Brand, Layout, Sidebar, Header, Typography, Panels, Tables,
   Buttons, Forms, Statuses, Drawers, Responsive.
*/

/* Brand */
:root {
  --buystan-navy: #050A2E;
  --buystan-blue: #1C60B4;
  --buystan-blue-dark: #123E6E;
  --background-page: #F8F9FB;
  --background-card: #FFFFFF;
  --background-selected: #E4ECF8;
  --background-blue-soft: #D8E5F4;
  --background-disabled: #D2D4D8;
  --text-primary: #111214;
  --text-secondary: #62666B;
  --text-muted: #7A7F85;
  --text-on-dark: #FFFFFF;
  --border-default: #D6DADF;
  --border-strong: #AEB6C0;
  --status-success: #257A3A;
  --status-warning: #F2A626;
  --status-pending: #B8892E;
  --status-danger: #C23E38;
  --button-dark: #181814;
  --radius-small: 6px;
  --radius-medium: 10px;
  --radius-large: 14px;

  --buystan-navy-950: var(--buystan-navy);
  --buystan-navy-900: var(--buystan-navy);
  --buystan-navy-800: var(--buystan-blue-dark);
  --buystan-blue-700: var(--buystan-blue-dark);
  --buystan-blue-600: var(--buystan-blue);
  --buystan-blue-500: var(--buystan-blue);
  --buystan-blue-soft: var(--background-selected);
  --buystan-blue-softer: #F1F5FB;
  --buystan-page-bg: var(--background-page);
  --buystan-surface: var(--background-card);
  --buystan-surface-muted: #F3F6FA;
  --buystan-surface-hover: #F1F5FB;
  --buystan-text-primary: var(--text-primary);
  --buystan-text-secondary: var(--text-secondary);
  --buystan-text-muted: var(--text-muted);
  --buystan-text-disabled: #8B929B;
  --buystan-border: var(--border-default);
  --buystan-border-strong: var(--border-strong);
  --buystan-success: var(--status-success);
  --buystan-success-soft: #E8F4EA;
  --buystan-warning: var(--status-warning);
  --buystan-warning-soft: #FFF3D8;
  --buystan-pending: var(--status-pending);
  --buystan-pending-soft: #F7EDD9;
  --buystan-danger: var(--status-danger);
  --buystan-danger-soft: #FCE9E8;
  --buystan-purple: var(--buystan-blue-dark);
  --buystan-purple-soft: var(--background-selected);
  --buystan-neutral: var(--text-secondary);
  --buystan-neutral-soft: #EEF1F4;
  --buystan-shadow-small: 0 1px 3px rgba(15, 23, 42, 0.06);
  --buystan-shadow-panel: 0 1px 3px rgba(15, 23, 42, 0.06);
  --buystan-radius-small: var(--radius-small);
  --buystan-radius-medium: var(--radius-medium);
  --buystan-radius-large: var(--radius-large);

  --bg: var(--buystan-page-bg);
  --surface: var(--buystan-surface);
  --surface-muted: var(--buystan-surface-muted);
  --line: var(--buystan-border);
  --line-strong: var(--buystan-border-strong);
  --text: var(--buystan-text-primary);
  --muted: var(--buystan-text-muted);
  --blue: var(--buystan-blue-600);
  --blue-dark: var(--buystan-navy-900);
  --blue-soft: var(--buystan-blue-soft);
  --green: var(--buystan-success);
  --green-soft: var(--buystan-success-soft);
  --amber: var(--buystan-warning);
  --amber-soft: var(--buystan-warning-soft);
  --slate: var(--buystan-neutral);
  --slate-soft: var(--buystan-neutral-soft);
  --danger: var(--buystan-danger);
  --shadow: var(--buystan-shadow-panel);
  --radius: var(--buystan-radius-medium);
}

/* Layout */
body.theme-buystan-modern {
  overflow-x: hidden;
  background: var(--buystan-page-bg);
  color: var(--buystan-text-primary);
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  letter-spacing: 0;
}

.theme-buystan-modern .workspace {
  background: var(--buystan-page-bg);
}

.theme-buystan-modern *,
.theme-buystan-modern *::before,
.theme-buystan-modern *::after {
  letter-spacing: 0;
}

/* Sidebar */
.theme-buystan-modern .sidebar {
  background: var(--buystan-surface);
  border-right: 1px solid var(--buystan-border);
  color: var(--buystan-text-primary);
}

.theme-buystan-modern .brand {
  min-height: 54px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--buystan-text-primary);
  overflow: visible;
}

.theme-buystan-modern .brand-logo {
  width: min(224px, 100%);
  height: 48px;
  max-width: 100%;
  background: transparent;
  object-fit: contain;
  object-position: left center;
}

.theme-buystan-modern .nav-list {
  gap: 4px;
}

.theme-buystan-modern .nav-item {
  min-height: 44px;
  gap: 11px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--buystan-text-primary);
  font-size: 0.92rem;
  font-weight: 600;
}

.theme-buystan-modern .nav-item:hover {
  border-color: var(--buystan-border);
  background: var(--buystan-blue-softer);
  color: var(--buystan-blue-dark);
}

.theme-buystan-modern .nav-item.active {
  border-color: #C8D6EA;
  background: var(--background-selected);
  color: var(--buystan-blue-dark);
  box-shadow: none;
}

.theme-buystan-modern .nav-item .icon {
  width: 20px;
  height: 20px;
}

.theme-buystan-modern .icon,
.theme-buystan-modern .nav-item svg,
.theme-buystan-modern .icon-button svg,
.theme-buystan-modern .card-visual svg,
.theme-buystan-modern .freight-card svg,
.theme-buystan-modern .freight-tile svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.theme-buystan-modern .nav-item svg {
  width: 19px;
  height: 19px;
}

.theme-buystan-modern .sidebar-footer {
  border-color: var(--buystan-border);
  background: var(--buystan-surface);
  color: var(--buystan-text-secondary);
  box-shadow: none;
}

.theme-buystan-modern .sidebar-footer strong,
.theme-buystan-modern .buyer-details strong,
.theme-buystan-modern .supplier-details strong {
  color: var(--buystan-text-primary);
}

.theme-buystan-modern .sidebar-footer small,
.theme-buystan-modern .buyer-details small,
.theme-buystan-modern .supplier-details small {
  color: var(--buystan-text-secondary);
}

.theme-buystan-modern .status-dot {
  background: var(--buystan-success);
}

/* Header */
.theme-buystan-modern .topbar {
  background: var(--buystan-surface);
  border-bottom: 1px solid var(--buystan-border);
  box-shadow: none;
}

.theme-buystan-modern .topbar h1,
.theme-buystan-modern #page-title {
  color: var(--buystan-text-primary);
  font-size: clamp(1.65rem, 2.4vw, 2.2rem);
  font-weight: 700;
  line-height: 1.12;
}

.theme-buystan-modern .portal-badge {
  border-color: #b9d4ff;
  border-radius: 999px;
  background: var(--buystan-blue-soft);
  color: var(--buystan-blue-700);
  font-size: 0.72rem;
  font-weight: 600;
}

.theme-buystan-modern .hamburger-menu-button,
.theme-buystan-modern .profile-menu-button,
.theme-buystan-modern .icon-button {
  border-color: var(--buystan-border-strong);
  border-radius: var(--buystan-radius-small);
  background: var(--buystan-surface);
  color: var(--buystan-text-secondary);
  box-shadow: none;
}

.theme-buystan-modern .hamburger-line {
  border-radius: 999px;
}

.theme-buystan-modern .hamburger-menu-button:hover,
.theme-buystan-modern .profile-menu-button:hover,
.theme-buystan-modern .icon-button:hover {
  border-color: #adc4de;
  background: var(--buystan-blue-softer);
  color: var(--buystan-blue-700);
}

.theme-buystan-modern .profile-menu-panel {
  overflow: hidden;
  border-color: var(--buystan-border-strong);
  border-radius: var(--buystan-radius-medium);
  background: var(--buystan-surface);
  box-shadow: var(--buystan-shadow-small);
}

.theme-buystan-modern .profile-menu-panel button {
  color: var(--buystan-text-primary);
  font-size: 0.86rem;
  font-weight: 600;
}

.theme-buystan-modern .profile-menu-panel button:hover {
  background: var(--buystan-blue-softer);
  color: var(--buystan-blue-700);
}

/* Typography */
.theme-buystan-modern h1,
.theme-buystan-modern h2,
.theme-buystan-modern h3,
.theme-buystan-modern strong {
  color: var(--buystan-text-primary);
}

.theme-buystan-modern h2 {
  font-size: clamp(1.12rem, 1.6vw, 1.35rem);
  font-weight: 700;
}

.theme-buystan-modern h3 {
  font-size: 1rem;
  font-weight: 700;
}

.theme-buystan-modern p,
.theme-buystan-modern small,
.theme-buystan-modern span {
  color: inherit;
}

.theme-buystan-modern .eyebrow {
  color: var(--buystan-text-secondary);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.theme-buystan-modern a {
  color: var(--buystan-blue-600);
  font-weight: 600;
}

/* Icons */
.theme-buystan-modern .metric-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(16, 24, 40, 0.03);
  border-radius: 10px;
  flex-shrink: 0;
}

.theme-buystan-modern .metric-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.theme-buystan-modern .metric-icon--blue {
  background: var(--background-selected);
  color: var(--buystan-blue);
}

.theme-buystan-modern .metric-icon--green {
  background: var(--buystan-success-soft);
  color: var(--buystan-success);
}

.theme-buystan-modern .metric-icon--orange {
  background: var(--buystan-warning-soft);
  color: var(--buystan-warning);
}

.theme-buystan-modern .metric-icon--purple {
  background: var(--background-blue-soft);
  color: var(--buystan-blue-dark);
}

.theme-buystan-modern .metric-icon--red {
  background: var(--buystan-danger-soft);
  color: var(--buystan-danger);
}

.theme-buystan-modern .metric-icon--neutral {
  background: #eef2f6;
  color: #667085;
}

.theme-buystan-modern .activity-icon {
  display: inline-flex;
  width: 28px;
  height: 28px;
  min-width: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(16, 24, 40, 0.03);
  border-radius: 7px;
  flex-shrink: 0;
}

.theme-buystan-modern .activity-icon svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.theme-buystan-modern .summary-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.theme-buystan-modern .summary-card__content {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.theme-buystan-modern .summary-card__label,
.theme-buystan-modern .summary-card__support {
  min-width: 0;
}

.theme-buystan-modern .summary-card__value {
  line-height: 1;
}

.theme-buystan-modern .freight-card-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

/* Panels */
.theme-buystan-modern :is(
  .hub-card,
  .draft-board,
  .live-rfq-board,
  .ongoing-board,
  .archive-board,
  .past-project-board,
  .quick-work-panel,
  .partner-list-view,
  .data-board,
  .counter-tile,
  .orders-overview-tile,
  .freight-board,
  .freight-detail-board,
  .freight-card,
  .freight-tile,
  .freight-list-board,
  .buyer-profile-workspace,
  .company-profile-body,
  .supplier-issues-workspace,
  .supplier-order-workspace,
  .claim-workspace,
  .claim-action-record,
  .rfq-detail-section,
  .rfq-review-card,
  .sku-card,
  .sku-drawer-card,
  .settings-card
) {
  border-color: var(--buystan-border);
  border-radius: var(--buystan-radius-large);
  background: var(--buystan-surface);
  box-shadow: var(--buystan-shadow-small);
}

.theme-buystan-modern .data-board-header,
.theme-buystan-modern .draft-board-header,
.theme-buystan-modern .freight-board-header,
.theme-buystan-modern .section-inline-head,
.theme-buystan-modern .supplier-drawer-header,
.theme-buystan-modern .modal-header,
.theme-buystan-modern .drawer-header {
  border-color: var(--buystan-border);
}

.theme-buystan-modern .counter-tile,
.theme-buystan-modern .orders-overview-tile,
.theme-buystan-modern .freight-card,
.theme-buystan-modern .freight-tile {
  box-shadow: none;
}

.theme-buystan-modern .counter-tile .summary-card__label,
.theme-buystan-modern .orders-overview-tile__label,
.theme-buystan-modern .freight-label,
.theme-buystan-modern .freight-tile p,
.theme-buystan-modern .card-body p {
  color: var(--buystan-text-secondary);
}

.theme-buystan-modern .counter-tile strong,
.theme-buystan-modern .orders-overview-tile__value,
.theme-buystan-modern .freight-metric,
.theme-buystan-modern .freight-tile strong {
  color: var(--buystan-text-primary);
  font-weight: 700;
}

.theme-buystan-modern .orders-overview-tile:hover {
  border-color: #adc4de;
  background: var(--buystan-blue-softer);
}

.theme-buystan-modern .hub-card:hover {
  transform: translateY(-1px);
  border-color: var(--buystan-border-strong);
  box-shadow: var(--buystan-shadow-panel);
}

.theme-buystan-modern .quick-work-card.active {
  border-color: #C8D6EA;
  box-shadow: 0 0 0 3px rgba(28, 96, 180, 0.12), var(--buystan-shadow-small);
}

.theme-buystan-modern .card-visual {
  color: var(--buystan-blue-700);
}

.theme-buystan-modern .card-visual.metric-card-visual {
  display: flex;
  height: 92px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 18px 0;
  background: transparent;
  color: inherit;
}

.theme-buystan-modern .card-visual.metric-card-visual--with-count {
  justify-content: space-between;
}

.theme-buystan-modern .card-visual.navy,
.theme-buystan-modern .card-visual.blue,
.theme-buystan-modern .card-visual.green,
.theme-buystan-modern .card-visual.slate {
  background: var(--buystan-blue-soft);
}

.theme-buystan-modern #projects-page .action-grid .hub-card[data-target="create"] .card-visual {
  background: #EEF6FF;
  color: var(--buystan-blue-700);
}

.theme-buystan-modern #projects-page .action-grid .hub-card[data-target="rfqs"] .card-visual {
  background: #F1F0FF;
  color: var(--buystan-blue-700);
}

.theme-buystan-modern .hub-card:nth-child(3) .card-visual,
.theme-buystan-modern .card-visual.green {
  background: var(--buystan-success-soft);
  color: var(--buystan-success);
}

.theme-buystan-modern .hub-card:nth-child(4) .card-visual,
.theme-buystan-modern .card-visual.slate {
  background: var(--buystan-neutral-soft);
  color: var(--buystan-neutral);
}

.theme-buystan-modern .card-visual.metric-card-visual {
  background: transparent;
  color: inherit;
}

.theme-buystan-modern .card-body h2,
.theme-buystan-modern .hub-card:nth-child(3) h2,
.theme-buystan-modern .hub-card:nth-child(4) h2 {
  color: var(--buystan-text-primary);
}

.theme-buystan-modern .seal {
  border: 1px solid #d7e7ff;
  color: var(--buystan-blue-700);
  background: var(--buystan-surface);
  box-shadow: none;
}

/* Freight Hub */
.theme-buystan-modern .freight-quote-card,
.theme-buystan-modern .freight-action-tile {
  border-color: var(--buystan-navy-900);
  background: var(--buystan-navy-900);
  color: #fff;
}

.theme-buystan-modern .freight-quote-card h2,
.theme-buystan-modern .freight-quote-card p,
.theme-buystan-modern .freight-action-tile h3,
.theme-buystan-modern .freight-action-tile p {
  color: #fff;
}

.theme-buystan-modern .freight-blue-card,
.theme-buystan-modern .freight-blue-tile {
  border-color: #bfd7fb;
  background: var(--buystan-blue-soft);
}

.theme-buystan-modern .freight-card[data-freight-filter="active"],
.theme-buystan-modern .freight-tile[data-freight-panel="active"] {
  border-color: #C8D6EA;
  background: var(--background-blue-soft);
}

.theme-buystan-modern .freight-card[data-freight-filter="pending"],
.theme-buystan-modern .freight-tile[data-freight-panel="pending"] {
  border-color: #E6D1AA;
  background: var(--buystan-pending-soft);
}

.theme-buystan-modern .freight-green-card,
.theme-buystan-modern .freight-green-tile {
  border-color: #bde8d1;
  background: var(--buystan-success-soft);
  color: var(--buystan-text-primary);
}

.theme-buystan-modern .freight-green-card .freight-label,
.theme-buystan-modern .freight-green-card .freight-metric,
.theme-buystan-modern .freight-green-tile p,
.theme-buystan-modern .freight-green-tile strong {
  color: var(--buystan-text-primary);
}

.theme-buystan-modern .freight-slate-card,
.theme-buystan-modern .freight-grey-tile {
  border-color: var(--buystan-border);
  background: var(--buystan-neutral-soft);
}

.theme-buystan-modern .freight-card[data-freight-filter="completed"],
.theme-buystan-modern .freight-tile[data-freight-panel="completed"] {
  border-color: #bde8d1;
  background: var(--buystan-success-soft);
}

.theme-buystan-modern .freight-card[data-freight-filter="active"],
.theme-buystan-modern .freight-tile[data-freight-panel="active"] {
  border-color: #C8D6EA;
  background: var(--background-blue-soft);
}

.theme-buystan-modern .freight-card[data-freight-filter="pending"],
.theme-buystan-modern .freight-tile[data-freight-panel="pending"] {
  border-color: #E6D1AA;
  background: var(--buystan-pending-soft);
}

.theme-buystan-modern .freight-filter-card.active,
.theme-buystan-modern .orders-overview-tile.active,
.theme-buystan-modern .freight-tile.active {
  border-color: var(--buystan-blue-600);
  box-shadow: 0 0 0 2px rgba(28, 96, 180, 0.12);
}

/* Tables */
.theme-buystan-modern :is(
  .draft-table,
  .live-rfq-table,
  .ongoing-table,
  .past-project-table,
  .freight-table,
  .portal-table,
  .drawer-table,
  .settings-table,
  .buyer-core-details-table,
  .claim-item-table,
  .activity-table,
  .profile-table
) {
  background: var(--buystan-surface);
  color: var(--buystan-text-primary);
}

.theme-buystan-modern table th {
  border-color: var(--buystan-border);
  background: var(--buystan-surface-muted);
  color: var(--buystan-text-secondary);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0;
}

.theme-buystan-modern table td {
  border-color: var(--buystan-border);
  color: var(--buystan-text-primary);
}

.theme-buystan-modern table tbody tr:hover {
  background: var(--buystan-surface-hover);
}

.theme-buystan-modern table td span:not(.status-pill),
.theme-buystan-modern .muted-cell {
  color: var(--buystan-text-muted);
}

.theme-buystan-modern table td .quote-badge,
.theme-buystan-modern table td span.quote-badge:not(.status-pill) {
  color: #fff !important;
}

.theme-buystan-modern .board-count,
.theme-buystan-modern .draft-count,
.theme-buystan-modern .compact-count {
  border-color: var(--buystan-border-strong);
  border-radius: var(--buystan-radius-small);
  background: var(--buystan-surface);
  color: var(--buystan-text-primary);
  font-weight: 700;
}

/* Buttons */
.theme-buystan-modern .primary-button,
.theme-buystan-modern .success-button {
  border: 1px solid var(--buystan-blue-600);
  border-radius: var(--buystan-radius-small);
  background: var(--buystan-blue-600);
  color: #fff;
  box-shadow: none;
  font-weight: 600;
}

.theme-buystan-modern .primary-button:hover,
.theme-buystan-modern .success-button:hover {
  border-color: var(--buystan-blue-700);
  background: var(--buystan-blue-700);
}

.theme-buystan-modern .secondary-button,
.theme-buystan-modern .ghost-button,
.theme-buystan-modern .table-action,
.theme-buystan-modern .freight-request-button {
  border: 1px solid var(--buystan-border-strong);
  border-radius: var(--buystan-radius-small);
  background: var(--buystan-surface);
  color: var(--buystan-blue-700);
  box-shadow: none;
  font-weight: 600;
}

.theme-buystan-modern .secondary-button:hover,
.theme-buystan-modern .ghost-button:hover,
.theme-buystan-modern .table-action:hover,
.theme-buystan-modern .freight-request-button:hover {
  border-color: #adc4de;
  background: var(--buystan-blue-softer);
  color: var(--buystan-blue-700);
}

.theme-buystan-modern .table-action.danger,
.theme-buystan-modern .danger {
  border-color: #f3b8b5;
  background: var(--buystan-danger-soft);
  color: var(--buystan-danger);
}

.theme-buystan-modern .dark-button,
.theme-buystan-modern .dark-action,
.theme-buystan-modern [data-action-tone="dark"] {
  border-color: var(--button-dark);
  background: var(--button-dark);
  color: var(--text-on-dark);
}

.theme-buystan-modern :is(button, .primary-button, .secondary-button, .ghost-button, .table-action):disabled,
.theme-buystan-modern :is(button, .primary-button, .secondary-button, .ghost-button, .table-action)[aria-disabled="true"] {
  border-color: var(--buystan-border);
  background: var(--background-disabled);
  color: var(--buystan-text-disabled);
  cursor: not-allowed;
  opacity: 1;
}

/* Forms */
.theme-buystan-modern input:not([type="checkbox"]):not([type="radio"]),
.theme-buystan-modern select,
.theme-buystan-modern textarea {
  border-color: var(--buystan-border-strong);
  border-radius: 8px;
  background: var(--buystan-surface);
  color: var(--buystan-text-primary);
  box-shadow: none;
}

.theme-buystan-modern input::placeholder,
.theme-buystan-modern textarea::placeholder {
  color: var(--buystan-text-disabled);
}

.theme-buystan-modern input:not([type="checkbox"]):not([type="radio"]):focus,
.theme-buystan-modern select:focus,
.theme-buystan-modern textarea:focus {
  border-color: var(--buystan-blue-600);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(28, 96, 180, 0.12);
}

.theme-buystan-modern input[type="checkbox"],
.theme-buystan-modern input[type="radio"] {
  accent-color: var(--buystan-blue-600);
}

.theme-buystan-modern label,
.theme-buystan-modern .field-label {
  color: var(--buystan-text-secondary);
  font-weight: 600;
}

.theme-buystan-modern .sourcing-mode-card input:checked + span,
.theme-buystan-modern .segmented-region input:checked + span,
.theme-buystan-modern .supplier-option[aria-selected="true"],
.theme-buystan-modern .flat-tabbar button.active {
  border-color: #b9d4ff;
  background: var(--buystan-blue-soft);
  color: var(--buystan-blue-700);
}

/* Statuses */
.theme-buystan-modern .status-pill,
.theme-buystan-modern .expired-rfq-badge,
.theme-buystan-modern .replacement-label {
  border-color: transparent;
  border-radius: 999px;
  background: var(--buystan-neutral-soft);
  color: var(--buystan-neutral);
  min-height: 24px;
  padding: 5px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
}

.theme-buystan-modern .status-pill.blue {
  background: var(--buystan-blue-soft);
  color: var(--buystan-blue-700);
}

.theme-buystan-modern .status-pill.green,
.theme-buystan-modern .rfq-status.active span {
  background: var(--buystan-success-soft);
  color: var(--buystan-success);
}

.theme-buystan-modern .status-pill.amber,
.theme-buystan-modern .status-pill.pending,
.theme-buystan-modern .rfq-status.reviewing span {
  background: var(--buystan-pending-soft);
  color: var(--buystan-pending);
}

.theme-buystan-modern .status-pill.warning,
.theme-buystan-modern .rfq-status.closing span {
  background: var(--buystan-warning-soft);
  color: var(--buystan-warning);
}

.theme-buystan-modern .status-pill.red,
.theme-buystan-modern .rfq-status.expired span {
  background: var(--buystan-danger-soft);
  color: var(--buystan-danger);
}

.theme-buystan-modern .status-pill.slate,
.theme-buystan-modern .expired-rfq-badge,
.theme-buystan-modern .rfq-status.cancelled span {
  background: var(--buystan-neutral-soft);
  color: var(--buystan-neutral);
}

/* Drawers and modals */
.theme-buystan-modern :is(
  .modal,
  .sourcing-modal,
  .rfq-modal,
  .shortlisted-modal,
  .direct-po-modal,
  .sku-modal,
  .vendor-request-modal,
  .freight-modal,
  .rfq-action-modal,
  .rfq-detail-drawer,
  .sku-drawer,
  .partner-drawer,
  .supplier-drawer
) {
  background: var(--buystan-surface);
  border-color: var(--buystan-border);
  box-shadow: var(--buystan-shadow-panel);
}

.theme-buystan-modern :is(
  .modal-footer,
  .supplier-drawer-footer,
  .sku-drawer-footer,
  .drawer-footer
) {
  border-color: var(--buystan-border);
  background: var(--buystan-surface-muted);
}

.theme-buystan-modern :is(
  .backdrop,
  .modal-backdrop,
  .supplier-drawer-backdrop,
  .drawer-backdrop
) {
  background: rgba(6, 27, 53, 0.3);
}

/* Responsive */
@media (max-width: 900px) {
  .theme-buystan-modern .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--buystan-border);
  }

  .theme-buystan-modern .brand {
    width: min(240px, 100%);
  }

  .theme-buystan-modern .nav-item {
    font-size: 0.86rem;
  }

  .theme-buystan-modern .metric-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  .theme-buystan-modern .metric-icon svg {
    width: 20px;
    height: 20px;
  }

}

@media (max-width: 390px) {
  body.theme-buystan-modern {
    max-width: 100vw;
  }

  .theme-buystan-modern .workspace,
  .theme-buystan-modern .page-view,
  .theme-buystan-modern .topbar {
    max-width: 100%;
  }

  .theme-buystan-modern :is(a, td, th, p, span, strong, small) {
    overflow-wrap: anywhere;
  }

  .theme-buystan-modern .topbar h1,
  .theme-buystan-modern #page-title {
    font-size: 1.65rem;
  }
}

.theme-buystan-modern .notification-center {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.theme-buystan-modern .notification-bell-button {
  position: relative;
  display: inline-grid;
  width: 40px;
  min-width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: var(--radius, 8px);
  background: #fff;
  color: var(--ink, #0f172a);
  cursor: pointer;
}

.theme-buystan-modern .notification-bell-button:hover,
.theme-buystan-modern .notification-bell-button:focus-visible {
  border-color: var(--line-strong, #94a3b8);
  background: var(--surface-muted, #f8fafc);
  color: var(--blue, #0f58bd);
}

.theme-buystan-modern .notification-bell-icon,
.theme-buystan-modern .notification-bell-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.theme-buystan-modern .notification-bell-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-buystan-modern .notification-count {
  position: absolute;
  top: -5px;
  right: -6px;
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--danger, #dc2626);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.theme-buystan-modern .notification-panel {
  position: absolute;
  z-index: 140;
  top: calc(100% + 8px);
  right: 0;
  width: min(420px, calc(100vw - 24px));
  max-height: 70vh;
  overflow: hidden;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: var(--radius, 8px);
  background: #fff;
  box-shadow: none;
}

.theme-buystan-modern .notification-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line, #cbd5e1);
  background: #fff;
}

.theme-buystan-modern .notification-panel-header strong {
  color: var(--ink, #0f172a);
  font-size: 0.92rem;
}

.theme-buystan-modern .notification-panel-header button {
  min-height: 30px;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: var(--radius, 8px);
  background: #fff;
  color: var(--blue, #0f58bd);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.theme-buystan-modern .notification-panel-header button:disabled {
  color: var(--muted, #64748b);
  cursor: default;
  opacity: 0.6;
}

.theme-buystan-modern .notification-list {
  max-height: calc(70vh - 55px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.theme-buystan-modern .notification-row {
  display: grid;
  width: 100%;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--line, #cbd5e1);
  background: #fff;
  color: var(--ink, #0f172a);
  text-align: left;
  cursor: pointer;
}

.theme-buystan-modern .notification-row:last-child {
  border-bottom: 0;
}

.theme-buystan-modern .notification-row:hover,
.theme-buystan-modern .notification-row:focus-visible {
  background: var(--surface-muted, #f8fafc);
}

.theme-buystan-modern .notification-row.unread {
  background: var(--blue-soft, #eaf2ff);
}

.theme-buystan-modern .notification-row-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: var(--radius, 8px);
  background: #fff;
  color: var(--blue, #0f58bd);
}

.theme-buystan-modern .notification-row-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-buystan-modern .notification-row-copy {
  min-width: 0;
}

.theme-buystan-modern .notification-row-title,
.theme-buystan-modern .notification-row-message,
.theme-buystan-modern .notification-row-meta {
  display: block;
}

.theme-buystan-modern .notification-row-title {
  position: relative;
  color: var(--ink, #0f172a);
  font-size: 0.82rem;
  font-weight: 850;
  text-transform: uppercase;
}

.theme-buystan-modern .notification-row-message {
  margin-top: 4px;
  color: var(--ink, #0f172a);
  font-size: 0.86rem;
  line-height: 1.35;
}

.theme-buystan-modern .notification-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
  color: var(--muted, #64748b);
  font-size: 0.74rem;
  font-weight: 800;
}

.theme-buystan-modern .notification-context,
.theme-buystan-modern .notification-priority {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 0 7px;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 999px;
  background: #fff;
  color: var(--muted, #64748b);
  text-transform: uppercase;
}

.theme-buystan-modern .notification-priority {
  border-color: #fed7aa;
  color: #9a3412;
}

.theme-buystan-modern .notification-unread-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--blue, #0f58bd);
  vertical-align: middle;
}

.theme-buystan-modern .notification-empty {
  display: grid;
  gap: 6px;
  padding: 22px 16px;
  color: var(--muted, #64748b);
  text-align: center;
}

.theme-buystan-modern .notification-empty strong {
  color: var(--ink, #0f172a);
  font-size: 0.95rem;
}

@media (max-width: 520px) {
  .theme-buystan-modern .notification-panel {
    position: fixed;
    top: 72px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100vh - 92px);
  }

  .theme-buystan-modern .notification-list {
    max-height: calc(100vh - 150px);
  }
}