/* ============================================================================
   sbs-dashboard.css - buyer dashboard rendered with the iOS customer system.
   ----------------------------------------------------------------------------
   This intentionally layers over the legacy dashboard rather than changing its
   data and account behavior. Cards, status pills, controls, and type all use
   the same Theme.swift tokens as Shop, PDP, Cart, and Checkout.
   ========================================================================== */

body.buyer-dashboard {
  --primary-gold: var(--sbs-gold);
  --bg-dark: var(--sbs-bg-card);
  --bg-card: var(--sbs-bg-card);
  --bg-hover: var(--sbs-bg-hover);
  --text-primary: var(--sbs-text-primary);
  --text-secondary: var(--sbs-text-secondary);
  --border: var(--sbs-border-subtle);
  --border-subtle: var(--sbs-border-subtle);
  --success: var(--sbs-success);
  --success-green: var(--sbs-status-complete);
  --warning: var(--sbs-status-pending);
  --warning-orange: var(--sbs-status-pending);
  --danger: var(--sbs-danger);
  --danger-red: var(--sbs-danger);
  --shadow-card: var(--sbs-shadow-soft);
  background: var(--sbs-bg-black);
  color: var(--sbs-text-primary);
  font-family: var(--sbs-font-body);
  font-variant-numeric: tabular-nums;
}

body.buyer-dashboard::before { display: none; }

body.buyer-dashboard .header {
  background: color-mix(in srgb, var(--sbs-bg-black) 92%, transparent);
  border-bottom: 1px solid var(--sbs-border-subtle);
  box-shadow: none;
  -webkit-backdrop-filter: blur(var(--sbs-glass-blur));
  backdrop-filter: blur(var(--sbs-glass-blur));
}

body.buyer-dashboard .nav {
  max-width: 1120px;
  padding: var(--sbs-sm) var(--sbs-md);
}

body.buyer-dashboard .logo { color: var(--sbs-gold-text); }
body.buyer-dashboard .logo img { max-height: 42px; }

body.buyer-dashboard .nav-link,
body.buyer-dashboard .hero-signout-btn {
  min-height: var(--sbs-control-hit);
  padding: 0 var(--sbs-pill-pad-x);
  border-radius: var(--sbs-r-pill) !important;
  font: var(--sbs-fw-semibold) var(--sbs-fs-caption)/1 var(--sbs-font-body);
}

body.buyer-dashboard .hero-signout-btn {
  border-color: var(--sbs-border-subtle);
  color: var(--sbs-text-secondary);
  background: color-mix(in srgb, var(--sbs-bg-card) 62%, transparent);
}

body.buyer-dashboard .container {
  max-width: 1120px;
  padding: var(--sbs-lg) var(--sbs-md) calc(var(--sbs-2xl) + 88px);
}

body.buyer-dashboard .page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0 0 var(--sbs-lg);
  padding: 0 0 var(--sbs-md);
  border-bottom: 1px solid var(--sbs-border-subtle);
  text-align: left;
}

body.buyer-dashboard .page-title,
body.buyer-dashboard .section-title {
  background: none;
  color: var(--sbs-text-primary);
  -webkit-text-fill-color: currentColor;
  font-family: var(--sbs-font-body);
  letter-spacing: 0;
  text-transform: none;
}

body.buyer-dashboard .page-title {
  margin: 0;
  font-size: var(--sbs-fs-title-xl);
  font-weight: var(--sbs-fw-bold);
  line-height: 1.15;
  animation: none;
}

body.buyer-dashboard .page-subtitle {
  margin: var(--sbs-xs) 0 0;
  color: var(--sbs-text-secondary);
  font-size: var(--sbs-fs-caption);
  line-height: 1.4;
  animation: none;
}

body.buyer-dashboard .dashboard-grid {
  grid-template-columns: 264px minmax(0, 1fr);
  gap: var(--sbs-md);
}

body.buyer-dashboard .sidebar,
body.buyer-dashboard .main-content {
  background: var(--sbs-bg-card);
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-card);
  box-shadow: none;
  animation: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.buyer-dashboard .sidebar { padding: var(--sbs-md); }
body.buyer-dashboard .main-content { min-height: 420px; padding: var(--sbs-md); }

body.buyer-dashboard .profile-section {
  margin: 0 0 var(--sbs-md);
  padding: 0 0 var(--sbs-md);
  border-bottom-color: var(--sbs-border-subtle);
}

body.buyer-dashboard .profile-avatar {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sbs-sm);
  background: var(--sbs-gold-gradient);
  box-shadow: none;
  font-size: var(--sbs-fs-title-lg);
}

body.buyer-dashboard .profile-avatar:hover { transform: none; box-shadow: none; }
body.buyer-dashboard .profile-name { font-size: var(--sbs-fs-body); font-weight: var(--sbs-fw-semibold); }
body.buyer-dashboard .profile-email { color: var(--sbs-text-muted); font-size: var(--sbs-fs-micro); overflow-wrap: anywhere; }

body.buyer-dashboard .sidebar-menu li { margin-bottom: var(--sbs-xs); }
body.buyer-dashboard .sidebar-menu a,
body.buyer-dashboard .sidebar-menu button {
  min-height: var(--sbs-control-hit);
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 var(--sbs-sm);
  border-radius: var(--sbs-r-md);
  color: var(--sbs-text-secondary);
  font: var(--sbs-fw-semibold) var(--sbs-fs-caption)/1 var(--sbs-font-body);
}

body.buyer-dashboard .sidebar-menu a:hover,
body.buyer-dashboard .sidebar-menu button:hover {
  background: color-mix(in srgb, var(--sbs-gold) 10%, transparent);
  color: var(--sbs-gold-text);
  transform: none;
}

body.buyer-dashboard .sidebar-menu a.active {
  background: var(--sbs-chip-active-bg);
  color: var(--sbs-chip-active-fg);
  box-shadow: none;
}

body.buyer-dashboard .menu-section {
  margin-top: var(--sbs-md);
  padding-top: var(--sbs-md);
  border-top-color: var(--sbs-border-subtle);
}

body.buyer-dashboard .menu-section-title {
  color: var(--sbs-text-muted);
  font-size: var(--sbs-fs-micro);
  font-weight: var(--sbs-fw-semibold);
  letter-spacing: 0.6px;
}

/* Sections are layout groups, not a second card around every card. */
body.buyer-dashboard .section {
  margin: 0 0 var(--sbs-lg);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

body.buyer-dashboard .section:last-child { margin-bottom: 0; }
body.buyer-dashboard .section-header {
  min-height: var(--sbs-control-hit);
  display: flex;
  align-items: center;
  gap: var(--sbs-sm);
  margin: 0 0 var(--sbs-sm);
  padding: 0;
}

body.buyer-dashboard .section-title {
  margin: 0;
  font-size: var(--sbs-fs-title);
  font-weight: var(--sbs-fw-bold);
  line-height: 1.25;
}

body.buyer-dashboard .section-link {
  margin-left: auto;
  color: var(--sbs-gold-text);
  font-size: var(--sbs-fs-caption);
  font-weight: var(--sbs-fw-semibold);
}

body.buyer-dashboard .card,
body.buyer-dashboard .order-card,
body.buyer-dashboard .orders-empty-state,
body.buyer-dashboard .empty-state,
body.buyer-dashboard .submission-empty,
body.buyer-dashboard .status-summary-card {
  background: var(--sbs-bg-card);
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-card);
  box-shadow: none;
}

body.buyer-dashboard .card,
body.buyer-dashboard .order-card { padding: var(--sbs-md); }

body.buyer-dashboard .card:hover,
body.buyer-dashboard .order-card:hover { box-shadow: none; transform: none; }

body.buyer-dashboard .card-title,
body.buyer-dashboard .order-card-header h3,
body.buyer-dashboard .order-item-details h4 {
  color: var(--sbs-text-primary);
  font-size: var(--sbs-fs-title);
  font-weight: var(--sbs-fw-semibold);
}

body.buyer-dashboard .card-details,
body.buyer-dashboard .order-meta,
body.buyer-dashboard .order-item-details p,
body.buyer-dashboard .order-badge-note,
body.buyer-dashboard .basket-modal-message {
  color: var(--sbs-text-secondary);
  font-size: var(--sbs-fs-caption);
  line-height: 1.45;
}

body.buyer-dashboard .order-item,
body.buyer-dashboard .basket-modal-items .order-item {
  gap: var(--sbs-sm);
  padding: var(--sbs-sm);
  background: var(--sbs-bg-hover);
  border-color: var(--sbs-border-subtle);
  border-radius: var(--sbs-r-md);
}

body.buyer-dashboard .order-item-image,
body.buyer-dashboard .basket-modal-items .order-item-image {
  border-radius: var(--sbs-r-sm);
  background: var(--sbs-bg-hover);
  border-color: var(--sbs-border-subtle);
}

/* Status uses the app semantic colours only: gold/pending, green/completed,
   red/cancelled, blue/information. The old purple and generic green variants
   were not part of ThemeScheme. */
body.buyer-dashboard .badge,
body.buyer-dashboard .basket-status-chip {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: var(--sbs-xs);
  padding: var(--sbs-chip-pad-y) var(--sbs-chip-pad-x);
  border: 1px solid color-mix(in srgb, var(--sbs-gold) 35%, transparent);
  border-radius: var(--sbs-r-pill);
  background: color-mix(in srgb, var(--sbs-gold) 10%, transparent);
  color: var(--sbs-gold-text);
  font: var(--sbs-fw-semibold) var(--sbs-fs-micro)/1 var(--sbs-font-body);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

body.buyer-dashboard .badge-pending,
body.buyer-dashboard .badge-reviewing,
body.buyer-dashboard .badge-ready {
  background: color-mix(in srgb, var(--sbs-status-pending) 12%, transparent);
  border-color: color-mix(in srgb, var(--sbs-status-pending) 36%, transparent);
  color: var(--sbs-status-pending);
}

body.buyer-dashboard .badge-delivered,
body.buyer-dashboard .badge-completed {
  background: color-mix(in srgb, var(--sbs-status-complete) 12%, transparent);
  border-color: color-mix(in srgb, var(--sbs-status-complete) 36%, transparent);
  color: var(--sbs-status-complete);
}

body.buyer-dashboard .badge-offered {
  background: color-mix(in srgb, var(--sbs-info) 12%, transparent);
  border-color: color-mix(in srgb, var(--sbs-info) 36%, transparent);
  color: var(--sbs-info);
}

body.buyer-dashboard .badge-cancelled {
  background: color-mix(in srgb, var(--sbs-danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--sbs-danger) 36%, transparent);
  color: var(--sbs-danger);
}

body.buyer-dashboard .orders-owner-chip,
body.buyer-dashboard .order-adjust-note,
body.buyer-dashboard .basket-modal-summary {
  background: color-mix(in srgb, var(--sbs-gold) 7%, var(--sbs-bg-card));
  border-color: var(--sbs-border-subtle);
  border-radius: var(--sbs-r-md);
}

body.buyer-dashboard .order-badge-note { border-left-color: var(--sbs-gold); background: color-mix(in srgb, var(--sbs-gold) 8%, transparent); }

body.buyer-dashboard .status-summary-grid { gap: var(--sbs-sm); }
body.buyer-dashboard .status-summary-card,
body.buyer-dashboard .status-summary-card.primary {
  min-height: 132px;
  padding: var(--sbs-md);
  background: var(--sbs-bg-hover) !important;
  border-color: var(--sbs-border-subtle) !important;
}
body.buyer-dashboard .status-summary-card h3 { color: var(--sbs-text-secondary); font-size: var(--sbs-fs-caption); }
body.buyer-dashboard .status-summary-metric { color: var(--sbs-gold-text); font-size: var(--sbs-fs-title-xl); font-weight: var(--sbs-fw-bold); }
body.buyer-dashboard .status-summary-meta { color: var(--sbs-text-muted); font-size: var(--sbs-fs-micro); }

/* One button hierarchy across every dynamic account state. */
body.buyer-dashboard .btn,
body.buyer-dashboard .btn-primary,
body.buyer-dashboard .btn-gold,
body.buyer-dashboard .btn-outline,
body.buyer-dashboard .btn-danger,
body.buyer-dashboard .btn-secondary,
body.buyer-dashboard .order-adjust-btn {
  min-height: var(--sbs-control-hit);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sbs-sm);
  padding: 0 var(--sbs-pill-pad-x);
  border-radius: var(--sbs-r-pill) !important;
  box-shadow: none;
  font: var(--sbs-fw-semibold) var(--sbs-fs-caption)/1 var(--sbs-font-body);
  letter-spacing: 0;
  text-transform: none;
}

body.buyer-dashboard .btn-primary,
body.buyer-dashboard .btn-gold {
  border: 0;
  background: var(--sbs-gold-gradient);
  color: var(--sbs-chip-active-fg);
}

body.buyer-dashboard .btn-primary:hover,
body.buyer-dashboard .btn-gold:hover { background: var(--sbs-gold-gradient); box-shadow: none; transform: none; }

body.buyer-dashboard .btn-outline,
body.buyer-dashboard .btn-secondary,
body.buyer-dashboard .order-adjust-btn {
  border: 1px solid var(--sbs-border-subtle);
  background: color-mix(in srgb, var(--sbs-bg-card) 62%, transparent);
  color: var(--sbs-text-secondary);
}

body.buyer-dashboard .btn-outline:hover,
body.buyer-dashboard .btn-secondary:hover,
body.buyer-dashboard .order-adjust-btn:hover {
  border-color: color-mix(in srgb, var(--sbs-gold) 40%, transparent);
  background: color-mix(in srgb, var(--sbs-gold) 10%, transparent);
  color: var(--sbs-gold-text);
  transform: none;
}

body.buyer-dashboard .btn-danger { border: 0; background: var(--sbs-danger); color: #fff; }

body.buyer-dashboard input,
body.buyer-dashboard select,
body.buyer-dashboard textarea {
  min-height: var(--sbs-control-hit);
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-md);
  background: var(--sbs-bg-hover);
  color: var(--sbs-text-primary);
  font: var(--sbs-fw-medium) var(--sbs-fs-body)/1.2 var(--sbs-font-body);
}

body.buyer-dashboard input:focus,
body.buyer-dashboard select:focus,
body.buyer-dashboard textarea:focus { outline: 2px solid var(--sbs-gold-bright); outline-offset: 2px; }

body.buyer-dashboard .modal,
body.buyer-dashboard .help-modal { background: rgba(0, 0, 0, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.buyer-dashboard .modal-content,
body.buyer-dashboard .basket-modal-content,
body.buyer-dashboard .help-content {
  background: var(--sbs-bg-card);
  border: 1px solid var(--sbs-border-subtle);
  border-radius: var(--sbs-r-card);
  box-shadow: var(--sbs-shadow-strong);
}

body.buyer-dashboard .sbs-dash-icon {
  width: var(--sbs-icon-size);
  height: var(--sbs-icon-size);
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  color: currentColor;
  vertical-align: -0.18em;
}
body.buyer-dashboard .sbs-dash-icon svg { width: 100%; height: 100%; stroke-width: 2; }

@media (max-width: 860px) {
  body.buyer-dashboard .container { padding: var(--sbs-md) var(--sbs-sm) calc(var(--sbs-2xl) + 88px); }
  body.buyer-dashboard .dashboard-grid { grid-template-columns: 1fr; }
  body.buyer-dashboard .sidebar { padding: var(--sbs-sm); }
  body.buyer-dashboard .profile-section { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--sbs-sm); text-align: left; align-items: center; }
  body.buyer-dashboard .profile-avatar { grid-row: span 2; margin: 0; }
  body.buyer-dashboard .profile-name { margin: 0; }
  body.buyer-dashboard .sidebar-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sbs-xs); }
  body.buyer-dashboard .sidebar-menu li { margin: 0; }
  body.buyer-dashboard .menu-section { margin-top: var(--sbs-sm); padding-top: var(--sbs-sm); }
  body.buyer-dashboard .main-content { padding: var(--sbs-sm); }
}

@media (max-width: 480px) {
  body.buyer-dashboard .page-header { margin-bottom: var(--sbs-md); }
  body.buyer-dashboard .page-title { font-size: var(--sbs-fs-title-lg); }
  body.buyer-dashboard .sidebar-menu { grid-template-columns: 1fr; }
  body.buyer-dashboard .section-header { align-items: flex-start; flex-wrap: wrap; padding: var(--sbs-xs) 0; }
  body.buyer-dashboard .section-link { margin-left: 0; }
  body.buyer-dashboard .status-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}