.surus-theme-toggle {
  width: auto;
  min-width: 84px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid #b9d4ad;
  border-radius: 8px;
  background: #fff;
  color: #175d35;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  gap: 7px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.surus-theme-toggle__icon {
  font-size: 20px;
  line-height: 1;
}

.surus-theme-toggle:hover,
.surus-theme-toggle:focus-visible {
  border-color: #1f7a3f;
  background: #e7f5dc;
  box-shadow: 0 0 0 3px rgba(31, 122, 63, 0.14);
  outline: 0;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121812;
  --panel: #1c251d;
  --ink: #f1f5ee;
  --muted: #c2cdc0;
  --line: #405040;
  --green: #1f7a3f;
  --green-dark: #9bd7ab;
  --green-soft: #243c29;
  --yellow: #e2bd45;
  --yellow-soft: #3b3318;
  --blue: #73a9cf;
  --blue-soft: #203443;
}

html[data-theme="dark"] body,
html[data-theme="dark"] main {
  background: var(--bg);
  color: var(--ink);
}

html[data-theme="dark"] header,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .summary,
html[data-theme="dark"] .intro,
html[data-theme="dark"] .platform-explainer,
html[data-theme="dark"] .market-dashboard,
html[data-theme="dark"] .user-report,
html[data-theme="dark"] .user-reviews,
html[data-theme="dark"] .listing-highlight,
html[data-theme="dark"] .supply-listing,
html[data-theme="dark"] .supply-group-card,
html[data-theme="dark"] .selected-bids-panel,
html[data-theme="dark"] .bid-confirmation,
html[data-theme="dark"] .listing-photo-editor,
html[data-theme="dark"] .confirmation-panel,
html[data-theme="dark"] .settings-grid > div,
html[data-theme="dark"] .toggle-field,
html[data-theme="dark"] .reset-stage {
  border-color: var(--line) !important;
  background: var(--panel) !important;
  color: var(--ink);
}

html[data-theme="dark"] .confirmation-panel.is-overdue {
  border-color: #9b7a27 !important;
  background: var(--yellow-soft) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .confirmation-panel strong,
html[data-theme="dark"] .confirmation-panel span,
html[data-theme="dark"] .toggle-field label {
  color: var(--ink) !important;
}

html[data-theme="dark"] .confirmation-actions .decline-action,
html[data-theme="dark"] .confirmation-actions .cancel-action {
  border-color: #d78579 !important;
  background: #3a211f !important;
  color: #ffc1b8 !important;
}

html[data-theme="dark"] .listing-highlight.is-recent {
  border-color: var(--yellow) !important;
  background: #3b3318 !important;
  box-shadow: 0 0 0 3px rgba(226, 189, 69, 0.2);
}

html[data-theme="dark"] .listing-highlight__recent {
  border-color: var(--yellow);
  background: #3b3318;
  color: #f6dc7b;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  border-color: var(--line);
  background: #111812;
  color: var(--ink);
}

html[data-theme="dark"] table,
html[data-theme="dark"] thead,
html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] th,
html[data-theme="dark"] td {
  border-color: var(--line) !important;
  color: var(--ink);
}

html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .market-dashboard__source,
html[data-theme="dark"] .market-dashboard__item-meta,
html[data-theme="dark"] .market-dashboard__request-facts dt {
  color: var(--muted) !important;
}

html[data-theme="dark"] .notice,
html[data-theme="dark"] .status.success,
html[data-theme="dark"] .bid-alert,
html[data-theme="dark"] .market-dashboard__request,
html[data-theme="dark"] .market-dashboard__empty,
html[data-theme="dark"] .market-dashboard__request-list {
  border-color: var(--line) !important;
  background: #2d2a18 !important;
  color: var(--ink);
}

html[data-theme="dark"] .promise,
html[data-theme="dark"] button.choice,
html[data-theme="dark"] .app-info-badge,
html[data-theme="dark"] .app-context-badge,
html[data-theme="dark"] header .nav-actions .nav-link,
html[data-theme="dark"] .app-header-actions .app-header-button,
html[data-theme="dark"] .surus-theme-toggle {
  border-color: var(--line);
  background: #243026;
  color: var(--ink);
}

html[data-theme="dark"] .promise:nth-child(2),
html[data-theme="dark"] header .nav-actions .nav-link--notification {
  background: var(--yellow-soft);
  color: #f6dc7b;
}

html[data-theme="dark"] header .nav-actions .nav-link--notification.has-unread {
  border-color: #e2bd45;
  background: #51451d;
  color: #fff0a4;
  box-shadow: 0 0 0 3px rgba(226, 189, 69, 0.22);
}

html[data-theme="dark"] .unread-badge {
  background: #e2bd45;
  color: #1b1a10;
}

html[data-theme="dark"] button.secondary,
html[data-theme="dark"] .secondary {
  border-color: #d4aa38 !important;
  background: #4a3c16 !important;
  color: #ffe899 !important;
}

html[data-theme="dark"] .notification-popup {
  border-color: #e2bd45 !important;
  background: #2d2a18 !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .notification-popup__body,
html[data-theme="dark"] .notification-popup__body strong,
html[data-theme="dark"] .notification-popup__body span {
  color: var(--ink) !important;
}

html[data-theme="dark"] .hero-picture,
html[data-theme="dark"] .banner-panel {
  background: #fff !important;
}

/* Marketplace home uses several nested surfaces that need explicit dark colors. */
html[data-theme="dark"] .market-dashboard__header,
html[data-theme="dark"] .market-dashboard__search-row,
html[data-theme="dark"] .market-dashboard__toolbar,
html[data-theme="dark"] .market-dashboard__categories,
html[data-theme="dark"] .market-dashboard__list-view,
html[data-theme="dark"] .market-dashboard__detail,
html[data-theme="dark"] .market-price-guide {
  border-color: var(--line) !important;
  background: var(--panel) !important;
  color: var(--ink);
}

html[data-theme="dark"] .market-dashboard__search-control,
html[data-theme="dark"] .market-dashboard__district-control,
html[data-theme="dark"] .market-dashboard__tabs,
html[data-theme="dark"] .market-dashboard__view-switch,
html[data-theme="dark"] .market-dashboard__group,
html[data-theme="dark"] .market-dashboard__stat,
html[data-theme="dark"] .market-dashboard__result-card,
html[data-theme="dark"] .market-dashboard__request-list,
html[data-theme="dark"] .market-dashboard__details-button,
html[data-theme="dark"] .market-price-guide__table,
html[data-theme="dark"] .market-price-guide__post {
  border-color: var(--line) !important;
  background: #182019 !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .market-dashboard__tabs,
html[data-theme="dark"] .market-dashboard__view-switch {
  background: #111812 !important;
}

html[data-theme="dark"] .market-dashboard__tab,
html[data-theme="dark"] .market-dashboard__view-switch button,
html[data-theme="dark"] .market-dashboard__category,
html[data-theme="dark"] .market-dashboard__item-toggle,
html[data-theme="dark"] .market-dashboard__details-button {
  color: var(--ink) !important;
}

html[data-theme="dark"] .market-dashboard__tab[aria-selected="true"],
html[data-theme="dark"] .market-dashboard__view-switch button[aria-selected="true"],
html[data-theme="dark"] .market-dashboard__category[aria-pressed="true"],
html[data-theme="dark"] .market-dashboard__category:hover,
html[data-theme="dark"] .market-dashboard__item-toggle:hover {
  border-color: var(--green) !important;
  background: var(--green-soft) !important;
  color: #d9f4df !important;
  box-shadow: none;
}

html[data-theme="dark"] .market-dashboard__category,
html[data-theme="dark"] .market-dashboard__item,
html[data-theme="dark"] .market-dashboard__result-visual,
html[data-theme="dark"] .market-dashboard__empty {
  border-color: var(--line) !important;
  background: #222c23 !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .market-dashboard__map-panel {
  border-color: var(--line) !important;
  background: #1b2d20 !important;
}

html[data-theme="dark"] .market-dashboard__request,
html[data-theme="dark"] .market-price-guide__detail-row td {
  border-color: var(--line) !important;
  background: #2d2a18 !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .market-dashboard__result-visual .surus-item-cell__text {
  background: rgba(17, 24, 18, 0.94);
  color: var(--ink);
}

html[data-theme="dark"] .market-dashboard__stat-value,
html[data-theme="dark"] .market-dashboard__district-name,
html[data-theme="dark"] .market-dashboard__item-name,
html[data-theme="dark"] .market-dashboard__result-heading h3,
html[data-theme="dark"] .market-dashboard__result-facts dd,
html[data-theme="dark"] .market-price-guide__header h3,
html[data-theme="dark"] .market-price-guide__table td strong,
html[data-theme="dark"] .market-price-guide__post,
html[data-theme="dark"] .market-price-guide__post > span {
  color: var(--ink) !important;
}

html[data-theme="dark"] .market-dashboard__subtitle,
html[data-theme="dark"] .market-dashboard__category-copy small,
html[data-theme="dark"] .market-dashboard__results-header p,
html[data-theme="dark"] .market-dashboard__stat-label,
html[data-theme="dark"] .market-dashboard__district-summary,
html[data-theme="dark"] .market-dashboard__group-hint,
html[data-theme="dark"] .market-dashboard__result-heading p,
html[data-theme="dark"] .market-dashboard__result-facts dt,
html[data-theme="dark"] .market-price-guide__header p,
html[data-theme="dark"] .market-price-guide__table td span,
html[data-theme="dark"] .market-price-guide__source-button small {
  color: var(--muted) !important;
}

html[data-theme="dark"] .market-price-guide__table th {
  border-color: var(--line) !important;
  background: #243026 !important;
  color: #dce8da !important;
}

html[data-theme="dark"] .market-price-guide__source-button {
  border-color: #487853;
  background: var(--green-soft);
  color: #d9f4df;
}

html[data-theme="dark"] .market-dashboard__results-header > strong,
html[data-theme="dark"] .market-dashboard__side-label--demand,
html[data-theme="dark"] .market-dashboard__rating,
html[data-theme="dark"] .market-dashboard__upcoming-button,
html[data-theme="dark"] .market-price-guide__post-type {
  border-color: #7a681f;
  background: var(--yellow-soft);
  color: #f6dc7b !important;
}

/* Keep marketplace tables and nested cards readable in dark mode. */
html[data-theme="dark"] .market-dashboard__stats,
html[data-theme="dark"] .market-dashboard__body,
html[data-theme="dark"] .market-price-guide__table thead,
html[data-theme="dark"] .market-price-guide__table tbody,
html[data-theme="dark"] .market-price-guide__table tr,
html[data-theme="dark"] .market-price-guide__table td {
  border-color: var(--line) !important;
  background: #182019 !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .market-dashboard__stat,
html[data-theme="dark"] .market-dashboard__group,
html[data-theme="dark"] .market-dashboard__request,
html[data-theme="dark"] .market-dashboard__request-facts,
html[data-theme="dark"] .market-dashboard__result-facts {
  color: var(--ink) !important;
}

html[data-theme="dark"] .market-dashboard__request-heading strong,
html[data-theme="dark"] .market-dashboard__request-facts dd,
html[data-theme="dark"] .market-dashboard__result-facts dd,
html[data-theme="dark"] .market-price-guide__table td strong,
html[data-theme="dark"] .market-price-guide__source-button span {
  color: var(--ink) !important;
}

html[data-theme="dark"] .market-dashboard__request-heading span,
html[data-theme="dark"] .market-dashboard__request-facts dt,
html[data-theme="dark"] .market-dashboard__result-facts dt,
html[data-theme="dark"] .market-price-guide__table td span,
html[data-theme="dark"] .market-price-guide__source-button small {
  color: var(--muted) !important;
}

html[data-theme="dark"] .market-dashboard__side-label--supply {
  background: var(--green-soft);
  color: #a9e5b8;
}

html[data-theme="dark"] .market-upcoming-dialog,
html[data-theme="dark"] .market-upcoming-dialog__header,
html[data-theme="dark"] .market-upcoming-dialog__content,
html[data-theme="dark"] .market-upcoming-card {
  border-color: var(--line) !important;
  background: var(--panel) !important;
  color: var(--ink) !important;
}

html[data-theme="dark"] .market-upcoming-dialog__header button,
html[data-theme="dark"] .market-upcoming-card__facts div {
  border-color: var(--line);
  background: #111812;
  color: var(--ink);
}

html[data-theme="dark"] .market-upcoming-dialog__note,
html[data-theme="dark"] .market-upcoming-card__facts .is-needed {
  border-color: #6e6026;
  background: var(--yellow-soft);
  color: #f6dc7b;
}

html[data-theme="dark"] .market-upcoming-card__facts .is-covered,
html[data-theme="dark"] .market-upcoming-group__heading span {
  background: var(--green-soft);
  color: #a9e5b8;
}

html[data-theme="dark"] .market-upcoming-dialog__header p,
html[data-theme="dark"] .market-upcoming-dialog__empty,
html[data-theme="dark"] .market-upcoming-card__heading span,
html[data-theme="dark"] .market-upcoming-card__district-stock,
html[data-theme="dark"] .market-upcoming-card__requests,
html[data-theme="dark"] .market-upcoming-card__facts dt {
  color: var(--muted) !important;
}

html[data-theme="dark"] .market-upcoming-card__heading time,
html[data-theme="dark"] .market-upcoming-card__facts dd {
  color: var(--ink) !important;
}

html[data-theme="dark"] .user-reviews__summary,
html[data-theme="dark"] .user-reviews__score,
html[data-theme="dark"] .user-review {
  border-color: var(--line) !important;
}

html[data-theme="dark"] .user-review {
  background: #182019;
  color: var(--ink);
}

html[data-theme="dark"] .user-reviews__score strong,
html[data-theme="dark"] .user-reviews__score span,
html[data-theme="dark"] .user-review__comment,
html[data-theme="dark"] .user-review h3 {
  color: var(--ink);
}

html[data-theme="dark"] .user-reviews__score small,
html[data-theme="dark"] .user-review__detail,
html[data-theme="dark"] .user-review__date,
html[data-theme="dark"] .user-reviews__empty {
  color: var(--muted);
}

html[data-theme="dark"] .user-reviews__bar {
  background: #3b493c;
}

html[data-theme="dark"] .user-review__verified {
  background: var(--green-soft);
  color: #a9e5b8;
}

html[data-theme="dark"] .user-review__rating {
  border-color: #7a681f;
  background: var(--yellow-soft);
  color: #f6dc7b;
}

@media (max-width: 900px) {
  .surus-theme-toggle {
    min-width: 42px;
    flex: 0 0 42px !important;
  }

  .surus-theme-toggle__label {
    display: none;
  }
}
/* Dark mode readability lock: avoid pale text/panels inside marketplace and role dashboards. */
html[data-theme="dark"] body.role-page,
html[data-theme="dark"] .role-page {
  background: #101712;
  color: #f5f8f4;
}

html[data-theme="dark"] .role-page .card,
html[data-theme="dark"] .role-page .table-wrap,
html[data-theme="dark"] .market-dashboard,
html[data-theme="dark"] .market-price-guide {
  background: #1b261e;
  border-color: #49604f;
  color: #f5f8f4;
}

html[data-theme="dark"] .role-page h1,
html[data-theme="dark"] .role-page h2,
html[data-theme="dark"] .role-page h3,
html[data-theme="dark"] .role-page h4,
html[data-theme="dark"] .role-page strong,
html[data-theme="dark"] .market-dashboard h1,
html[data-theme="dark"] .market-dashboard h2,
html[data-theme="dark"] .market-dashboard h3,
html[data-theme="dark"] .market-dashboard strong,
html[data-theme="dark"] .market-price-guide h2,
html[data-theme="dark"] .market-price-guide strong {
  color: #f7fff2;
}

html[data-theme="dark"] .role-page label,
html[data-theme="dark"] .role-page .form-label,
html[data-theme="dark"] .role-page .hint,
html[data-theme="dark"] .role-page .muted,
html[data-theme="dark"] .role-page small,
html[data-theme="dark"] .market-dashboard small,
html[data-theme="dark"] .market-dashboard .muted,
html[data-theme="dark"] .market-price-guide p,
html[data-theme="dark"] .market-price-guide small {
  color: #cfe0cf;
}

html[data-theme="dark"] .role-page input,
html[data-theme="dark"] .role-page select,
html[data-theme="dark"] .role-page textarea,
html[data-theme="dark"] .market-dashboard input,
html[data-theme="dark"] .market-dashboard select {
  background: #101712;
  border-color: #5a735f;
  color: #f5f8f4;
}

html[data-theme="dark"] .market-dashboard__tabs,
html[data-theme="dark"] .market-dashboard__stats,
html[data-theme="dark"] .market-dashboard__body,
html[data-theme="dark"] .market-dashboard__category,
html[data-theme="dark"] .market-dashboard__district-detail,
html[data-theme="dark"] .market-dashboard__district-card,
html[data-theme="dark"] .market-dashboard__listing-card,
html[data-theme="dark"] .market-price-guide table,
html[data-theme="dark"] .market-price-guide tbody tr,
html[data-theme="dark"] .market-price-guide .price-guide-row {
  background: #243128;
  border-color: #49604f;
  color: #f5f8f4;
}

html[data-theme="dark"] .market-dashboard__category[aria-pressed="true"],
html[data-theme="dark"] .market-dashboard__category.is-active {
  background: #203a25;
  border-color: #79c86f;
}

html[data-theme="dark"] .market-dashboard__category-copy small,
html[data-theme="dark"] .market-dashboard__empty,
html[data-theme="dark"] .market-dashboard__detail-empty,
html[data-theme="dark"] .market-dashboard__list-empty {
  color: #dcebd9;
}

html[data-theme="dark"] .market-dashboard__empty,
html[data-theme="dark"] .market-dashboard__detail-empty,
html[data-theme="dark"] .market-dashboard__list-empty,
html[data-theme="dark"] .role-page .empty-state,
html[data-theme="dark"] .role-page .empty-row {
  background: #101712;
  border-color: #49604f;
}

html[data-theme="dark"] .market-price-guide th,
html[data-theme="dark"] .market-price-guide td {
  color: #f5f8f4;
  border-color: #49604f;
}

/* Final dark-mode readability lock. */
html[data-theme="dark"] .role-page,
html[data-theme="dark"] .market-dashboard,
body.theme-dark .role-page,
body.theme-dark .market-dashboard,
.role-page[data-theme="dark"],
.market-dashboard[data-theme="dark"] {
  background: #0f1a12;
  color: #f5fff1;
}

html[data-theme="dark"] .role-page h1,
html[data-theme="dark"] .role-page h2,
html[data-theme="dark"] .role-page h3,
html[data-theme="dark"] .market-dashboard h1,
html[data-theme="dark"] .market-dashboard h2,
html[data-theme="dark"] .market-dashboard h3,
body.theme-dark .role-page h1,
body.theme-dark .role-page h2,
body.theme-dark .role-page h3,
body.theme-dark .market-dashboard h1,
body.theme-dark .market-dashboard h2,
body.theme-dark .market-dashboard h3 {
  color: #fffef5;
}

html[data-theme="dark"] .role-page p,
html[data-theme="dark"] .role-page label,
html[data-theme="dark"] .role-page small,
html[data-theme="dark"] .role-page th,
html[data-theme="dark"] .role-page td,
html[data-theme="dark"] .market-dashboard p,
html[data-theme="dark"] .market-dashboard label,
html[data-theme="dark"] .market-dashboard small,
html[data-theme="dark"] .market-dashboard th,
html[data-theme="dark"] .market-dashboard td,
body.theme-dark .role-page p,
body.theme-dark .role-page label,
body.theme-dark .role-page small,
body.theme-dark .role-page th,
body.theme-dark .role-page td,
body.theme-dark .market-dashboard p,
body.theme-dark .market-dashboard label,
body.theme-dark .market-dashboard small,
body.theme-dark .market-dashboard th,
body.theme-dark .market-dashboard td {
  color: #dce9d7;
  opacity: 1;
}

html[data-theme="dark"] .role-page .role-panel,
html[data-theme="dark"] .role-page .card,
html[data-theme="dark"] .role-page .panel,
html[data-theme="dark"] .market-dashboard .card,
html[data-theme="dark"] .market-dashboard .panel,
html[data-theme="dark"] .market-dashboard__category,
body.theme-dark .role-page .role-panel,
body.theme-dark .role-page .card,
body.theme-dark .role-page .panel,
body.theme-dark .market-dashboard .card,
body.theme-dark .market-dashboard .panel,
body.theme-dark .market-dashboard__category {
  background: #17231a;
  border-color: #39573a;
  color: #f5fff1;
}

html[data-theme="dark"] .role-page input,
html[data-theme="dark"] .role-page select,
html[data-theme="dark"] .role-page textarea,
html[data-theme="dark"] .market-dashboard input,
html[data-theme="dark"] .market-dashboard select,
html[data-theme="dark"] .market-dashboard textarea,
body.theme-dark .role-page input,
body.theme-dark .role-page select,
body.theme-dark .role-page textarea,
body.theme-dark .market-dashboard input,
body.theme-dark .market-dashboard select,
body.theme-dark .market-dashboard textarea {
  background: #101a13;
  border-color: #52714e;
  color: #fffef5;
}

html[data-theme="dark"] .role-page table thead,
html[data-theme="dark"] .market-dashboard table thead,
body.theme-dark .role-page table thead,
body.theme-dark .market-dashboard table thead {
  background: #20351f;
}

html[data-theme="dark"] .empty,
html[data-theme="dark"] .empty-state,
body.theme-dark .empty,
body.theme-dark .empty-state {
  color: #f5fff1;
}
