:root {
  --surus-farmer: #38963c;
  --surus-farmer-dark: #1f6f23;
  --surus-farmer-soft: #E8F5E9;
  --surus-farmer-highlight: #d8f0da;
  --surus-buyer: #1565C0;
  --surus-buyer-dark: #0d47a1;
  --surus-buyer-soft: #E3F2FD;
  --surus-offer: #f59e0b;
  --surus-offer-soft: #fff6dc;
  --surus-confirmed: #166534;
  --surus-waiting: #fbbf24;
  --surus-danger: #dc2626;
  --surus-page: #f6f8f4;
  --surus-dark-page: #101712;
  --surus-dark-panel: #1b261e;
  --surus-dark-raised: #243128;
  --surus-dark-line: #49604f;
  --surus-dark-ink: #f5f8f4;
  --surus-dark-muted: #c4d1c5;
}

body.role-page,
body.role-farmer,
body.role-buyer {
  background: var(--surus-page);
}

html:not([data-theme="dark"]) body {
  background: var(--surus-page);
}

body.role-farmer {
  --green: var(--surus-farmer);
  --green-dark: var(--surus-farmer-dark);
  --green-soft: var(--surus-farmer-soft);
  --bg: #f7fbff;
}

.role-label {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--green, #38963c);
  border-radius: 999px;
  background: var(--green-soft, #E8F5E9);
  color: var(--green-dark, #1f6f23);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.15;
  white-space: nowrap;
}

body.role-buyer .role-label {
  border-color: var(--surus-buyer);
  background: var(--surus-buyer-soft);
  color: var(--surus-buyer-dark);
}

body.role-buyer {
  --green: var(--surus-buyer);
  --green-dark: var(--surus-buyer-dark);
  --green-soft: var(--surus-buyer-soft);
  --blue: var(--surus-buyer);
  --blue-soft: var(--surus-buyer-soft);
  --bg: var(--surus-page);
}

button,
select,
input,
textarea,
.nav-link,
.link-button {
  min-height: 48px;
}

button,
.nav-link,
.link-button,
[role="button"] {
  touch-action: manipulation;
}

.role-mode-panel {
  grid-column: 1 / -1;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line, #dce5dc);
  border-radius: 8px;
  background: var(--panel, #fff);
  box-shadow: 0 8px 20px rgba(24, 55, 32, 0.07);
  display: grid;
  grid-template-columns: minmax(170px, 0.38fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.role-mode-panel,
.role-switch-button {
  display: none !important;
}

body:not(.role-mode-can-switch) .role-mode-panel {
  display: none !important;
}

body.role-mode-can-switch .role-mode-panel {
  display: none !important;
}

.role-switch-button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--green, #238b45);
  border-radius: 8px;
  background: #fff;
  color: var(--green-dark, #166534);
  font-weight: 900;
  white-space: nowrap;
}

.role-switch-button--buyer {
  border-color: var(--surus-buyer);
  color: var(--surus-buyer-dark);
}

.role-switch-button:hover,
.role-switch-button:focus-visible {
  background: var(--green-soft, #eaf7ed);
}

.role-switch-button--buyer:hover,
.role-switch-button--buyer:focus-visible {
  background: var(--surus-buyer-soft);
}

.role-mode-panel__intro strong {
  display: block;
  color: var(--ink, #172019);
  font-size: 16px;
  line-height: 1.35;
}

.role-mode-panel__intro span,
.role-mode-button small {
  display: block;
  margin-top: 3px;
  color: var(--muted, #526056);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.role-mode-panel__buttons {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.role-mode-button {
  min-width: 0;
  min-height: 68px;
  padding: 10px 14px;
  border: 2px solid var(--line, #dce5dc);
  border-radius: 8px;
  background: #fff;
  color: #203028;
  text-align: left;
  cursor: pointer;
  display: grid;
  align-content: center;
  box-shadow: none;
}

.role-mode-button strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 17px;
  line-height: 1.3;
}

.role-mode-button__mark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex: 0 0 24px;
  font-size: 14px;
  font-weight: 900;
}

.role-mode-button--farmer:hover,
.role-mode-button--farmer:focus-visible,
.role-mode-button--farmer[aria-pressed="true"] {
  border-color: var(--surus-farmer);
  background: var(--surus-farmer-highlight);
  color: var(--surus-farmer-dark);
}

.role-mode-button--buyer:hover,
.role-mode-button--buyer:focus-visible,
.role-mode-button--buyer[aria-pressed="true"] {
  border-color: var(--surus-buyer);
  background: var(--surus-buyer-soft);
  color: var(--surus-buyer-dark);
}

.role-mode-button--farmer .role-mode-button__mark {
  background: var(--surus-farmer);
  color: #fff;
}

.role-mode-button--buyer .role-mode-button__mark {
  background: var(--surus-buyer);
  color: #fff;
}

.role-mode-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.role-mode-panel__status {
  grid-column: 1 / -1;
  min-height: 0;
  color: var(--surus-danger);
  font-size: 14px;
  font-weight: 800;
}

.role-mode-panel__status:empty {
  display: none;
}

body.role-farmer header {
  border-bottom-color: rgba(35, 139, 69, 0.4);
}

body.role-buyer header {
  border-bottom-color: rgba(37, 99, 235, 0.38);
}

body.role-farmer .listing-highlight,
body.role-farmer .market-dashboard__result-card.is-own,
body.role-farmer .my-ad {
  border-color: var(--surus-farmer);
}

body.role-farmer .listing-highlight.has-new-bid,
body.role-farmer .listing-highlight.is-recent {
  background: var(--surus-farmer-highlight);
}

body.role-buyer .supply-listing.is-match,
body.role-buyer .smart-match-card {
  border-color: var(--surus-buyer);
  background: var(--surus-buyer-soft);
}

#confirmBidButton,
body.role-farmer .selected-bid-row button:not(.secondary),
body.role-buyer .card-btn.offer,
body.role-buyer .quick-bid-dialog button[type="submit"] {
  border-color: #c87900;
  background: var(--surus-offer);
  color: #3f2b00;
}

.surus-status--confirmed,
.pill.is-confirmed,
[data-status="Confirmed"] {
  background: var(--surus-confirmed) !important;
  color: #fff !important;
}

.surus-status--waiting,
.pill.is-waiting {
  border-color: #c59416 !important;
  background: #fff3bd !important;
  color: #604400 !important;
}

.surus-status--cancelled,
.pill.is-cancelled,
.pill.is-expired {
  border-color: var(--surus-danger) !important;
  background: #fff0ee !important;
  color: #9f251b !important;
}

body.role-buyer .market-dashboard__tab[aria-selected="true"],
body.role-buyer .market-dashboard__view-switch button[aria-selected="true"],
body.role-buyer .market-dashboard__category[aria-pressed="true"],
body.role-buyer .market-dashboard__primary-action,
body.role-buyer .contact-button,
body.role-buyer button:not(.secondary):not(.warn):not(.decline-action):not(.cancel-action) {
  border-color: var(--surus-buyer);
}

body.role-buyer .market-dashboard__primary-action,
body.role-buyer .contact-button {
  background: var(--surus-buyer);
  color: #fff;
}

html[data-theme="dark"] body.role-farmer,
html[data-theme="dark"] body.role-buyer,
html[data-theme="dark"] body.role-page {
  --bg: var(--surus-dark-page);
  --panel: var(--surus-dark-panel);
  --ink: var(--surus-dark-ink);
  --muted: var(--surus-dark-muted);
  --line: var(--surus-dark-line);
  background: var(--surus-dark-page) !important;
  color: var(--surus-dark-ink) !important;
}

html[data-theme="dark"] body.role-farmer {
  --green: #1f7a3f;
  --green-dark: #b7efc5;
  --green-soft: #203e29;
}

html[data-theme="dark"] body.role-buyer {
  --green: #2563eb;
  --green-dark: #c8dbff;
  --green-soft: #1c3155;
  --blue: #2563eb;
  --blue-soft: #1c3155;
}

html[data-theme="dark"] .role-mode-panel,
html[data-theme="dark"] .role-mode-button,
html[data-theme="dark"] .quick-bid-dialog,
html[data-theme="dark"] .quick-bid-dialog__body,
html[data-theme="dark"] .smart-match-dialog,
html[data-theme="dark"] .request-match-summary,
html[data-theme="dark"] .supply-listing,
html[data-theme="dark"] .request-row-actions,
html[data-theme="dark"] .contract-table-wrap,
html[data-theme="dark"] .listing-highlights,
html[data-theme="dark"] .focus-stat,
html[data-theme="dark"] .report-loading {
  border-color: var(--surus-dark-line) !important;
  background: var(--surus-dark-panel) !important;
  color: var(--surus-dark-ink) !important;
}

html[data-theme="dark"] .role-mode-panel__intro strong,
html[data-theme="dark"] .role-mode-button strong,
html[data-theme="dark"] .card h1,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .panel h1,
html[data-theme="dark"] .panel h2,
html[data-theme="dark"] .panel h3,
html[data-theme="dark"] .focus-stat strong,
html[data-theme="dark"] label {
  color: var(--surus-dark-ink) !important;
}

html[data-theme="dark"] .role-mode-panel__intro span,
html[data-theme="dark"] .role-mode-button small,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .mini,
html[data-theme="dark"] .status,
html[data-theme="dark"] small {
  color: var(--surus-dark-muted) !important;
}

html[data-theme="dark"] .role-mode-button--farmer[aria-pressed="true"] {
  border-color: #66c781 !important;
  background: #203e29 !important;
  color: #d6f6de !important;
}

html[data-theme="dark"] .role-mode-button--buyer[aria-pressed="true"] {
  border-color: #6ea1ff !important;
  background: #1c3155 !important;
  color: #e0eaff !important;
}

html[data-theme="dark"] .role-mode-button--farmer:hover,
html[data-theme="dark"] .role-mode-button--farmer:focus-visible {
  border-color: #66c781;
  background: #203e29;
  color: #d6f6de;
}

html[data-theme="dark"] .role-mode-button--buyer:hover,
html[data-theme="dark"] .role-mode-button--buyer:focus-visible {
  border-color: #6ea1ff;
  background: #1c3155;
  color: #e0eaff;
}

html[data-theme="dark"] .surus-status--waiting,
html[data-theme="dark"] .pill.is-waiting {
  border-color: #d8a92d !important;
  background: #443713 !important;
  color: #ffe899 !important;
}

html[data-theme="dark"] .surus-status--cancelled,
html[data-theme="dark"] .pill.is-cancelled,
html[data-theme="dark"] .pill.is-expired {
  border-color: #f1786e !important;
  background: #45231f !important;
  color: #ffc0ba !important;
}

html[data-theme="dark"] body.role-buyer .supply-listing.is-match,
html[data-theme="dark"] body.role-buyer .smart-match-card {
  border-color: #6ea1ff !important;
  background: #1c3155 !important;
}

html[data-theme="dark"] body.role-farmer .listing-highlight.has-new-bid,
html[data-theme="dark"] body.role-farmer .listing-highlight.is-recent {
  border-color: #66c781 !important;
  background: #203e29 !important;
}

/* Contract rows are action-heavy, so they render as cards even on wide pages. */
.contract-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.contract-table,
.contract-table tbody,
.contract-table tr,
.contract-table td {
  display: block;
  width: 100%;
  min-width: 0;
}

.contract-table thead {
  display: none;
}

.contract-table tbody {
  display: grid;
  gap: 14px;
}

.contract-table tr {
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 4px solid var(--green);
  border-radius: 8px;
  background: var(--panel);
}

.contract-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.contract-table td:last-child {
  border-bottom: 0;
}

.contract-table td[data-label]::before {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  content: attr(data-label);
}

.contract-table td[colspan]::before {
  display: none;
}

.contract-table .confirmation-panel,
.contract-table .settlement {
  width: 100%;
  min-width: 0;
}

.contract-table button,
.contract-table select,
.contract-table input {
  width: 100%;
}

@media (max-width: 760px) {
  .role-mode-panel {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .role-mode-panel__intro {
    display: none;
  }

  .role-mode-button {
    min-height: 62px;
    padding: 9px 10px;
  }

  .role-mode-button strong {
    font-size: 16px;
  }
}

@media (max-width: 430px) {
  .role-mode-panel__buttons {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .role-mode-button {
    transition: none;
  }
}

/* Balanced role workspace for laptop and desktop screens. */
.role-page .role-workspace {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
  width: 100%;
}

.role-page .role-workspace > * {
  min-width: 0;
  width: 100%;
}

.role-page .role-workspace .two > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.role-page .role-workspace .two > div > label:first-child {
  display: flex;
  min-height: 3.2em;
  align-items: flex-end;
}

.role-page .role-workspace input,
.role-page .role-workspace select,
.role-page .role-workspace textarea,
.role-page .role-workspace button {
  max-width: 100%;
}

.role-page .role-workspace input,
.role-page .role-workspace select,
.role-page .role-workspace button {
  min-height: 48px;
}

.role-page .role-workspace textarea {
  min-height: 104px;
}

.role-page #surusLanguageSelect,
.role-page #surusPwaInstall {
  min-height: 48px;
}

.role-page .item-search-dialog {
  position: relative;
  z-index: 40;
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.role-page .item-search-dialog.hidden {
  display: none !important;
}

body.item-search-open {
  overflow: auto;
}

.role-page .item-search-dialog__sheet {
  display: grid;
  gap: 10px;
  width: 100%;
  max-height: min(54dvh, 520px);
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
}

.role-page .item-search-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.role-page .item-search-dialog__head h3 {
  margin: 0;
  font-size: clamp(18px, 3.5vw, 24px);
  line-height: 1.15;
}

.role-page .item-search-dialog__head button {
  flex: 0 0 auto;
  width: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 8px;
  font-size: 24px;
  touch-action: manipulation;
}

.role-page .item-search-dialog input {
  width: 100%;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  line-height: 1.2;
  padding: 0 14px;
  overflow: hidden;
  white-space: nowrap;
}

.role-page .item-search-results {
  display: grid;
  max-height: min(36dvh, 340px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.role-page .item-search-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(35, 139, 69, 0.15);
}

.role-page .item-search-result__radio {
  width: 30px;
  height: 30px;
  min-height: 30px;
  margin: 0;
  accent-color: var(--green, #238b45);
  cursor: pointer;
}

.role-page .item-search-result:last-child {
  border-bottom: 0;
}

.role-page .item-search-result:hover,
.role-page .item-search-result:focus-visible {
  background: var(--green-soft, #eef8ee);
}

.role-page .item-search-result__emoji {
  font-size: 24px;
}

.role-page .item-search-result__name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 800;
}

.role-page .item-search-empty {
  padding: 18px;
  color: var(--muted);
  font-weight: 800;
}

@media (max-width: 1180px) {
  .role-page .role-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .role-page .item-search-dialog {
    margin-top: 6px;
  }

  .role-page .item-search-dialog__sheet {
    max-height: min(46dvh, 460px);
    padding: 10px;
  }

  .role-page .item-search-results {
    max-height: min(28dvh, 300px);
    -webkit-overflow-scrolling: touch;
  }

  .role-page .item-search-result {
    min-height: 64px;
    padding: 12px 14px;
  }

  .role-page .role-workspace .two > div > label:first-child {
    min-height: 0;
  }
}
/* UI safety pass: keep role pages readable and balanced on phone, laptop, and desktop. */
.role-page .grid.role-workspace {
  display: grid;
  grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: 1480px;
  margin-inline: auto;
}

.role-page .dashboard-column,
.role-page .card,
.role-page .table-wrap,
.role-page .role-workspace > * {
  min-width: 0;
}

.role-page .dashboard-column {
  display: grid;
  gap: 18px;
}

.role-page .role-workspace .card {
  overflow: hidden;
}

.role-page label,
.role-page .form-label,
.role-page .hint,
.role-page .muted,
.role-page small {
  color: #34443a;
}

.role-page input,
.role-page select,
.role-page textarea,
.role-page button,
.role-page .btn {
  min-height: 48px;
}

.role-page input,
.role-page select,
.role-page textarea {
  font-size: 1rem;
  color: #101712;
}

.role-page .empty-state,
.role-page .empty-row {
  color: #233228;
  background: #f8fbf4;
  border: 1px solid #d7e5cc;
}

@media (min-width: 1500px) {
  .role-page .grid.role-workspace {
    grid-template-columns: minmax(390px, 500px) minmax(0, 1fr);
  }
}

@media (max-width: 1180px) {
  .role-page .grid.role-workspace {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
  }
}

@media (max-width: 640px) {
  .role-page .grid.role-workspace {
    gap: 14px;
  }

  .role-page input,
  .role-page select,
  .role-page textarea {
    font-size: 1.05rem;
  }
}

/* Final UI stabilization: mobile-first farmer/buyer pages. */
.role-page {
  background: #cbed98;
  color: #172317;
  font-size: clamp(17px, 1.05vw, 19px);
}

.role-page main {
  width: min(1600px, calc(100% - 32px));
  margin-inline: auto;
}

.role-page h1,
.role-page h2,
.role-page h3 {
  color: #101a12;
  letter-spacing: 0;
}

.role-page p,
.role-page label,
.role-page small,
.role-page th,
.role-page td {
  color: #263528;
  opacity: 1;
}

.role-page .grid.role-workspace {
  display: grid;
  grid-template-columns: minmax(370px, 0.76fr) minmax(560px, 1.38fr);
  gap: 24px;
  align-items: start;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
}

.role-page .dashboard-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  min-width: 0;
}

.role-page .role-panel,
.role-page .card,
.role-page .panel {
  min-width: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #fffef8;
}

.role-page .role-panel > header,
.role-page .panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.role-page input,
.role-page select,
.role-page textarea,
.role-page button {
  min-height: 52px;
  font-size: 1rem;
}

.role-page .two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.role-page .table-scroll,
.role-page table {
  max-width: 100%;
}

.role-page table {
  table-layout: fixed;
}

.role-page th,
.role-page td {
  overflow-wrap: anywhere;
  word-break: normal;
}

.role-page .empty,
.role-page .empty-state {
  color: #203022;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .role-page .grid.role-workspace {
    grid-template-columns: 1fr;
  }

  .role-page main {
    width: min(100% - 22px, 980px);
  }
}

@media (max-width: 640px) {
  .role-page {
    font-size: 17px;
  }

  .role-page .two {
    grid-template-columns: 1fr;
  }

  .role-page input,
  .role-page select,
  .role-page textarea,
  .role-page button {
    min-height: 54px;
  }
}

.bulk-request-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line, #dfe8d2);
  border-radius: 8px;
  background: #f7fbef;
}

.bulk-request-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink, #172115);
  font-size: 14px;
  font-weight: 900;
}

.bulk-request-toggle input {
  width: 18px;
  min-height: 18px;
}

.bulk-request-items {
  display: grid;
  gap: 8px;
}

.bulk-request-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.25fr) minmax(96px, 0.65fr) minmax(110px, 0.75fr) 44px;
  gap: 8px;
  align-items: center;
}

.bulk-request-row .secondary {
  min-width: 44px;
  padding-inline: 0;
}

@media (max-width: 720px) {
  .bulk-request-row {
    grid-template-columns: 1fr 1fr 44px;
  }

  .bulk-request-row select {
    grid-column: 1 / -1;
  }
}