/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* <fieldset> defaults to min-width: min-content, which refuses to shrink
 * below its widest unbreakable descendant. Any nowrap text (long user-agent
 * strings, etc.) inside a fieldset will stretch the whole fieldset past
 * the viewport on mobile. This reset makes fieldsets behave like normal
 * block elements. Well-known gotcha — see e.g. https://thatemil.com/blog/2015/01/03/reset-your-fieldset/
 */
fieldset {
  min-width: 0;
}

:root {
  /* Brand palette — see .ai/context/conventions.md#brand--colors.
     Primary is the vivid leaf-lime (rgb 132,189,0). It is light: NEVER put
     white text on it — pair lime backgrounds with --color-on-primary (dark).
     Forest is the readable dark green used for chrome (navbar), links, and
     any green text on white. Mint and gold are the secondary accents. */
  --color-primary: #84bd00; /* rgb(132,189,0) — brand lime; actions, progress, focus, active */
  --color-primary-hover: #6f9e00; /* darkened lime for hover on lime surfaces */
  --color-primary-light: #c6e5de; /* rgb(198,229,222) — mint; tints, badges, bubbles */
  --color-on-primary: #14250a; /* dark text/icons placed ON a lime background */
  --color-forest: #264e35; /* rgb(38,78,53) — dark green; chrome, links, readable green text */
  --color-forest-hover: #1a3826; /* darker forest for link/chrome hover */
  --color-accent: #e5c76d; /* rgb(229,199,109) — wheat gold; secondary accent */
  --color-accent-tint: rgba(229, 199, 109, 0.22); /* soft gold fill for badges/highlights */
  --color-accent-text: #7a5e12; /* readable dark gold for text on light/gold-tint */
  --color-bg: #f8f9fa;
  --color-surface: #ffffff;
  --color-text: #212529;
  --color-text-muted: #6c757d;
  --color-border: #dee2e6;
  --color-danger: #dc3545;
  --color-danger-hover: #bb2d3b;
  --color-success: #198754;
  --color-google: #4285f4;
  --color-linkedin: #0a66c2;
  --color-microsoft: #00a4ef;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --transition: 150ms ease;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
}

a {
  color: var(--color-forest);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-forest-hover);
  text-decoration: underline;
}

/* Inline link inside body/hint text. The global `a` rule only underlines on
   hover, which is fine for nav/buttons but makes a link buried in a muted
   paragraph invisible — this keeps it always underlined and clearly green. */
.text-link {
  color: var(--color-forest);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Nav */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: var(--color-forest);
  color: white;
  border-bottom: 3px solid var(--color-primary);
  box-shadow: var(--shadow-md);
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.25rem;
  color: white;
  text-decoration: none;
  letter-spacing: -0.5px;
}

/* The Puris "P" is a black, transparent logo — invert it to white so it reads
   on the dark forest navbar. */
.navbar-logo {
  display: block;
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
}

.navbar-brand:hover {
  color: white;
  text-decoration: none;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.navbar-links a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
  font-weight: 500;
}

.navbar-links a:hover {
  color: white;
  text-decoration: none;
}

.navbar-user {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Role cue: which persona you're signed in as. Light pill + dark text reads
   clearly on the dark forest navbar. Gold = admin (staff), mint = grower. */
.navbar-role {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  line-height: 1.4;
  white-space: nowrap;
}

.navbar-role-admin {
  background: var(--color-accent); /* wheat gold */
  color: #4a3a08;
}

.navbar-role-grower {
  background: var(--color-primary-light); /* mint */
  color: var(--color-forest);
}

.navbar-dropdown {
  position: relative;
}

.navbar-dropdown > summary {
  list-style: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
  font-weight: 500;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 44px;
}

.navbar-dropdown > summary::-webkit-details-marker {
  display: none;
}

.navbar-dropdown > summary::after {
  content: "▾";
  font-size: 0.75rem;
}

.navbar-dropdown > summary:hover {
  color: white;
}

.navbar-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  display: flex;
  flex-direction: column;
  z-index: 100;
  padding: 0.25rem 0;
}

.navbar-dropdown-menu a {
  color: var(--color-text);
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.navbar-dropdown-menu a:hover {
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
}

.navbar .btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition);
}

.navbar .btn-sm:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Flash messages */
.flash {
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.flash-alert {
  background: #f8d7da;
  color: #842029;
  border-bottom: 1px solid #f5c2c7;
}

.flash-notice {
  background: #d1e7dd;
  color: #0f5132;
  border-bottom: 1px solid #badbcc;
}

/* Layout */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.container-narrow {
  max-width: 440px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.card-header h1,
.card-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0;
}

.card-header p {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

/* Typography */
h1 {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Forms */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: var(--color-text);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-size: 0.9375rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(132, 189, 0, 0.3);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  line-height: 1.4;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-primary);
  text-decoration: none;
}

.btn-danger {
  background: var(--color-danger);
  color: white;
  border-color: var(--color-danger);
}

.btn-danger:hover {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  color: white;
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-outline:hover {
  background: var(--color-bg);
  text-decoration: none;
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

/* OAuth buttons */
.oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* Provider sign-in buttons — themed to GrowerOne: white surface, forest text,
   brand logo on the left, mint hover. Uniform across providers so they read as
   "our" buttons; the colored logos carry the brand recognition. */
.btn-oauth {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.7rem 1rem;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 600;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-forest);
  cursor: pointer;
  transition: all var(--transition);
}

.btn-oauth:hover {
  background: var(--color-primary-light);
  border-color: var(--color-forest);
  color: var(--color-forest);
}

.oauth-logo {
  width: 18px;
  height: 18px;
  flex: none;
  display: block;
}

/* Divider */
.divider {
  display: flex;
  align-items: center;
  margin: 1.5rem 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.divider::before {
  margin-right: 0.75rem;
}

.divider::after {
  margin-left: 0.75rem;
}

/* Tables */
.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

thead {
  background: var(--color-bg);
}

th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border);
}

td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: rgba(132, 189, 0, 0.06);
}

/* Badges */
.badge {
  display: inline-block;
  padding: 0.2em 0.6em;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  text-transform: capitalize;
}

.badge-owner {
  background: var(--color-accent-tint);
  color: var(--color-accent-text);
}

.badge-member {
  background: #e9ecef;
  color: var(--color-text-muted);
}

.badge-pending {
  background: #fff3cd;
  color: #664d03;
}

.badge-accepted {
  background: var(--color-primary-light);
  color: var(--color-forest);
}

.badge-expired {
  background: #e9ecef;
  color: var(--color-text-muted);
}

/* Job/run outcome badges (admin job monitor). Success reuses the forest-on-mint
   pairing rather than a second green, so the palette stays at four colours. */
.badge-success {
  background: var(--color-primary-light);
  color: var(--color-forest);
}

.badge-warning {
  background: #fff3cd;
  color: #664d03;
}

.badge-danger {
  background: #f8d7da;
  color: #842029;
}

.text-danger {
  color: var(--color-danger);
}

/* Action bar */
.action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Read-only preview of an announcement on the confirm screen. */
.announcement-preview {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  padding: 1.25rem 1.5rem;
  margin: 1rem 0 1.5rem;
}

.announcement-preview h2 {
  margin-top: 0;
}

/* The global reset zeroes paragraph margins, but the email renders in the bare
   mailer layout with default paragraph spacing. Restore that here so a blank
   line in the compose box shows the same gap in the review as in the sent
   email. */
.announcement-preview p {
  margin: 0 0 1em;
}

.announcement-preview p:last-child {
  margin-bottom: 0;
}

/* Recipient audit list on the announcement show page. */
.recipient-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recipient-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.recipient-list li:last-child {
  border-bottom: none;
}

.recipient-name {
  font-weight: 600;
}

/* Admin signup-request review controls: org + role selects stacked full-width,
   Approve/Deny side by side beneath them. Approve and Deny are separate <form>s
   (forms can't nest), so both are flattened into this grid with
   display: contents to let their buttons share the last row. */
.signup-review {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  min-width: 250px;
}

.signup-review form {
  display: contents;
}

.signup-review select {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 44px;
  padding: 0.45rem 0.6rem;
  font-size: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}

.signup-review select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(132, 189, 0, 0.3);
}

.signup-review .btn {
  width: 100%;
  min-height: 44px;
}

.signup-review-deny {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.signup-review-deny:hover {
  background: rgba(220, 53, 69, 0.08);
  color: var(--color-danger);
}

/* .btn-outline is transparent, so the row-hover tint bleeds through the
   Deny and View buttons — keep them solid white on tinted rows. (Selectors
   kept at one class of specificity so the buttons' own :hover rules,
   declared above, still win when pointing directly at them.) */
.signup-review-deny,
.note-dropdown > summary {
  background: var(--color-surface);
}

/* Note disclosure on the admin signup-requests table — a native <details>
   dropdown whose panel FLOATS over the table without resizing the row.
   position: fixed escapes .table-wrapper's overflow clipping; the top/left
   (and width) are set per-open by dropdown_controller.js, anchored to the
   View button. */
.note-dropdown > summary {
  list-style: none;
  user-select: none;
}

.note-dropdown > summary::-webkit-details-marker {
  display: none;
}

.note-dropdown > summary::after {
  content: "\25BE"; /* ▾ */
  font-size: 0.75rem;
  margin-left: 0.35rem;
  transition: transform 0.18s ease;
}

.note-dropdown[open] > summary::after {
  transform: rotate(180deg);
}

.note-dropdown-panel {
  position: fixed;
  z-index: 100;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.6rem 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-size: 0.875rem;
  text-align: left;
  color: var(--color-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Entry animation: fade + slide down as the panel appears. (No exit
   animation — a closing <details> hides its content instantly.) */
@starting-style {
  .note-dropdown[open] .note-dropdown-panel {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .note-dropdown > summary::after,
  .note-dropdown-panel {
    transition: none;
  }
}

/* Section spacing */
.section {
  margin-bottom: 2rem;
}

/* Turbo Frame defaults to display: inline, which collapses any block/grid
   layout we put inside it (e.g. .bpo-grid would stop spanning full width).
   Force block so children inherit the container's full width like they did
   before lazy-framing. */
turbo-frame {
  display: block;
}

/* Turbo Frame loading placeholder. Used as the in-frame default content for
   pages that lazy-load slow Fabric data — gives the user something to look at
   while the network round-trip resolves. Centered, compact, non-intrusive. */
.frame-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 1rem;
}

.frame-loading-label {
  color: var(--muted, #6b7280);
  font-size: 0.875rem;
  margin: 0;
}

.frame-loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid #e5e7eb;
  border-top-color: var(--brand, #84bd00);
  border-radius: 50%;
  animation: frame-loading-spin 0.9s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .frame-loading-spinner { animation: none; }
}

/* Errors */
.errors {
  background: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.errors ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.errors li::before {
  content: "\2022";
  margin-right: 0.5rem;
}

/* Links row */
.text-center {
  text-align: center;
}

.text-muted {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* Responsive */
@media (max-width: 640px) {
  .container {
    padding: 1rem;
  }

  .container-narrow {
    padding: 1rem;
  }

  .navbar {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  .navbar-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .action-bar {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }

  table {
    font-size: 0.8125rem;
  }

  th, td {
    padding: 0.5rem 0.625rem;
  }
}

/* Vendor Search */
.vendor-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vendor-search-input-wrap input {
  flex: 1;
}

.vendor-search-input-wrap button {
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  color: #666;
  cursor: pointer;
  padding: 0 0.25rem;
}

[data-vendor-search-target="dropdown"] {
  position: absolute;
  z-index: 100;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  max-height: 240px;
  overflow-y: auto;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.vendor-search-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
}

.vendor-search-item:hover {
  background: #f0f4ff;
}

.vendor-search-no {
  font-weight: 600;
  color: #555;
  margin-right: 0.4rem;
}

.contract-preview-panel {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  padding: 2rem;
}

.contract-preview-panel[hidden] {
  display: none;
}

.contract-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 0.75rem 1rem;
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid #e5e7eb;
}

.contract-preview-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.contract-preview-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
  border-radius: 0 0 6px 6px;
}

.vendor-search-empty {
  padding: 0.5rem 0.75rem;
  color: #999;
  font-size: 0.9rem;
}

/* Fabric reference picker (fill-time searchable dropdown). Reuses the
   .vendor-search-item / .vendor-search-empty option styles. */
.fabric-ref {
  position: relative;
}

.fabric-ref-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.fabric-ref-input-wrap input {
  flex: 1;
  min-height: 44px;
}

.fabric-ref-input-wrap button {
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  color: #666;
  cursor: pointer;
  padding: 0 0.5rem;
  min-height: 44px;
  min-width: 44px;
}

.fabric-ref-dropdown {
  position: absolute;
  z-index: 100;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  max-height: 240px;
  overflow-y: auto;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.fabric-ref-dropdown[hidden] {
  display: none;
}

/* ---- Workflow run timeline ---- */
.wf-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wf-step {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.75rem;
  padding-bottom: 1rem;
}

.wf-step-marker {
  position: relative;
}

/* status dot */
.wf-step-marker::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #cbd5e1;
  box-shadow: 0 0 0 1px #cbd5e1;
  border: 3px solid #fff;
  z-index: 1;
}

/* connector line to the next step */
.wf-step-marker::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 20px;
  bottom: -1rem;
  width: 2px;
  background: #e2e8f0;
}

.wf-step:last-child .wf-step-marker::after {
  display: none;
}

.wf-step-succeeded .wf-step-marker::before { background: #16a34a; box-shadow: 0 0 0 1px #16a34a; }
.wf-step-failed    .wf-step-marker::before { background: #dc2626; box-shadow: 0 0 0 1px #dc2626; }
.wf-step-running   .wf-step-marker::before { background: #2563eb; box-shadow: 0 0 0 1px #2563eb; }
.wf-step-awaiting  .wf-step-marker::before { background: #7c3aed; box-shadow: 0 0 0 1px #7c3aed; }

.wf-step-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  background: #fff;
}

.wf-step.is-current .wf-step-card {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

.wf-step-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.wf-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.78em;
  font-weight: 700;
  flex: none;
}

.wf-step-title {
  flex: 1;
  min-width: 0;
}

.wf-current-flag {
  background: #2563eb;
  color: #fff;
  font-size: 0.68em;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.wf-pill {
  font-size: 0.75em;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.wf-pill-succeeded,
.wf-pill-completed { background: #dcfce7; color: #166534; }
.wf-pill-failed    { background: #fee2e2; color: #991b1b; }
.wf-pill-running   { background: #dbeafe; color: #1e40af; }
.wf-pill-awaiting  { background: #ede9fe; color: #5b21b6; }
.wf-erp-result { margin: 0.4rem 0; padding: 0.4rem 0.6rem; border-radius: 6px; font-size: 0.85rem; }
.wf-erp-ok   { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.wf-erp-fail { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.nav-badge { display: inline-block; min-width: 1.25rem; padding: 0 0.375rem; margin-left: 0.25rem; border-radius: 999px; background: #7c3aed; color: #fff; font-size: 0.75rem; line-height: 1.25rem; text-align: center; font-weight: 600; }
.action-item-icon { font-size: 1.25rem; }
.wf-pill-pending   { background: #f1f5f9; color: #475569; }

.wf-step-time {
  margin: 0.35rem 0 0;
  font-size: 0.8em;
  color: #64748b;
}

.wf-step-error {
  margin-top: 0.55rem;
  padding: 0.5rem 0.65rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #991b1b;
  font-size: 0.85em;
}

.wf-io {
  margin-top: 0.6rem;
}

.wf-io > summary {
  cursor: pointer;
  font-size: 0.85em;
  color: #2563eb;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.wf-io-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  margin-top: 0.35rem;
}

@media (max-width: 640px) {
  .wf-io-grid { grid-template-columns: 1fr; }
}

.wf-io-col h4 {
  margin: 0 0 0.35rem;
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

.wf-io-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85em;
}

.wf-io-table th {
  text-align: left;
  vertical-align: top;
  padding: 0.25rem 0.6rem 0.25rem 0;
  color: #475569;
  font-weight: 600;
  white-space: nowrap;
  width: 1%;
}

.wf-io-table td {
  padding: 0.25rem 0;
  word-break: break-word;
}

.wf-json {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.5rem;
  font-size: 0.92em;
  overflow-x: auto;
  margin: 0;
  white-space: pre-wrap;
}

/* BPO Cards */
.bpo-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.plant-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.plant-filter-chip {
  padding: 0.4rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  min-height: 36px;
}

.plant-filter-chip:hover {
  border-color: var(--color-text-muted);
}

.plant-filter-chip.is-active {
  background: var(--color-text);
  color: var(--color-surface);
  border-color: var(--color-text);
}

/* The plant filter hides cards/groups via the [hidden] attribute, but .bpo-card
   (flex) and .bpo-grid (grid) set an explicit display that overrides the UA
   [hidden] rule — so force it back off when filtered out. */
.bpo-card[hidden],
.bpo-grid[hidden],
.closed-contracts[hidden] {
  display: none !important;
}

.bpo-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Desktop: lay the card out horizontally as a single stretched row.
   Every column except progress/stats has a fixed width so columns line up
   across cards; progress + stats absorb the leftover space in a fixed 1:2 ratio
   (identical on every card). Widths are budgeted so the row fits inside the
   .container (max 1100px) without the actions column running off the page. */
@media (min-width: 1040px) {
  .bpo-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
  }

  /* Fixed width so every card's downstream columns line up with each other.
     A content-sized header would make each card a different width. */
  .bpo-card-header {
    flex: 0 0 150px;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Progress bar + shipping period as one stacked column — fixed width so it
     doesn't absorb the leftover row space and balloon. Equal height + centered
     content with the stats column so the two align. */
  .bpo-card-progress-due {
    flex: 0 0 215px;
    align-self: stretch;
    justify-content: center;
  }

  /* Nudge just the progress bar down to line up with the first stats row. */
  .bpo-card-progress-due .bpo-card-progress {
    position: relative;
    top: 2px;
  }

  /* Nudge the shipping period down to line up with the second stats row. */
  .bpo-card-progress-due .bpo-card-due {
    margin-top: 0.25rem;
    position: relative;
    top: 3px;
  }

  /* Fixed content-width columns (not 1fr) so each value hugs its column and
     the gap between the two stat columns matches the gaps between the other
     columns, instead of leaving a cavernous stretched-cell gap. */
  .bpo-card-stats {
    flex: 0 0 auto;
    grid-template-columns: 140px 200px;
    gap: 0.5rem 1.5rem;
    align-self: stretch;
    align-content: center;
  }

  .bpo-card-actions {
    flex: 0 0 140px;
    flex-direction: column;
    margin-top: 0;
  }

  .bpo-card-actions .btn-tap {
    width: 100%;
  }
}

.bpo-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bpo-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

.bpo-card-pills {
  display: flex;
  gap: 0.375rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.bpo-card-refs {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.bpo-card-ref-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.6875rem;
  margin-right: 0.3rem;
}

.quality-badge {
  display: inline-block;
  padding: 0.2em 0.7em;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  text-transform: capitalize;
  border: 1px solid transparent;
}

.quality-badge.green {
  background: #d1e7dd;
  color: #0f5132;
  border-color: #a3cfbb;
}

.quality-badge.yellow {
  background: #fff3cd;
  color: #664d03;
  border-color: #ffda6a;
}

.quality-badge.red {
  background: #f8d7da;
  color: #842029;
  border-color: #f1aeb5;
}

/* Groups the progress bar + shipping period into one stacked column, mirroring
   how the stats stack into vertical pairs. Gap matches the stats row-gap so the
   two content blocks are the same height and center-align on desktop. */
.bpo-card-progress-due {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bpo-card-progress {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill,
.progress-fill-pending {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  transition: width var(--transition);
}

.progress-fill {
  background: var(--color-primary);
  z-index: 2;
}

.progress-fill-pending {
  background: var(--color-border);
  z-index: 1;
}

.progress-caption-pending {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.progress-caption {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.bpo-card-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 520px) {
  .bpo-card-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bpo-stat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.bpo-stat-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bpo-stat-value {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
}

.bpo-stat-sub {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-weight: 400;
  margin-left: 0.25rem;
}

.bpo-card-due {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* Keep each date in the shipping-period range unbreakable so the line only
   ever wraps *between* the two dates, never in the middle of one. */
.shipping-date {
  white-space: nowrap;
}

.bpo-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

.btn-tap {
  min-height: 44px;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  flex: 1 1 auto;
}

/* Settlements page */
.settlement-summary-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem;
}

.settlement-summary-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.settlement-summary-title {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.settlement-summary-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.settlement-summary-doc {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
}

.settlement-status-pill,
.contract-status-pill {
  display: inline-block;
  padding: 0.25em 0.75em;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-forest);
  text-transform: capitalize;
}

.settlement-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 520px) {
  .settlement-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 820px) {
  .settlement-summary-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.settlement-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.settlement-section-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: 600;
}

.settlement-section-summary::-webkit-details-marker {
  display: none;
}

.settlement-section-title {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1.05rem;
  color: var(--color-text);
}

.settlement-section-count {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.settlement-section-chevron {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-text-muted);
  transition: transform var(--transition);
  display: inline-block;
  transform: rotate(90deg);
}

.settlement-section[open] .settlement-section-chevron {
  transform: rotate(-90deg);
}

.settlement-section .table-wrapper,
.settlement-section .settlement-empty {
  margin: 0;
  border: none;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  padding: 0;
}

.settlement-section .settlement-empty {
  padding: 1rem 1.25rem;
}

.settlement-section .table-wrapper table {
  border-collapse: collapse;
}

.responsive-load-table td.num,
.responsive-load-table th.num {
  text-align: right;
  white-space: nowrap;
}

.settlement-section-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 1.25rem;
}

/* Bulk-download picker dialog — centered card matching the section styling.
   Base rule holds the hidden/exit state; [open] holds the visible state, and
   @starting-style gives the entry its from-values. `allow-discrete` on display/
   overlay keeps the element around long enough to animate closed. */
.download-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 0;
  width: min(560px, 92vw);
  max-height: 85vh;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28);
  color: var(--color-text);
  background: var(--color-surface);
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    overlay 0.18s ease allow-discrete,
    display 0.18s ease allow-discrete;
}

.download-dialog[open] {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@starting-style {
  .download-dialog[open] {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
  }
}

.download-dialog::backdrop {
  background: rgba(0, 0, 0, 0);
  transition:
    background 0.18s ease,
    overlay 0.18s ease allow-discrete,
    display 0.18s ease allow-discrete;
}

.download-dialog[open]::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

@starting-style {
  .download-dialog[open]::backdrop {
    background: rgba(0, 0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .download-dialog,
  .download-dialog::backdrop {
    transition: none;
  }
}

.download-dialog-inner {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  min-height: 0;
}

/* Header + controls block — pinned at the top; only the list below it scrolls. */
.download-dialog-top {
  flex-shrink: 0;
}

.download-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem 0.5rem;
}

.download-dialog-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.download-dialog-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  min-width: 44px;
  min-height: 44px;
}

.download-dialog-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 1.25rem 0.5rem;
}

.download-daterange {
  display: flex;
  gap: 0.75rem;
}

.download-daterange-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.download-daterange-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.download-daterange-input {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 38px;
}

.download-selectall {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.download-hint {
  flex-shrink: 0;
  margin: 0;
  padding: 0.6rem 1.25rem 0.4rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.download-load-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0.25rem 0.75rem;
  margin: 0 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  user-select: none;
}

.download-load-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
}

.download-load-item:last-child {
  border-bottom: none;
}

.download-load-item.is-selected {
  background: color-mix(in srgb, var(--color-primary, #2563eb) 12%, transparent);
}

.download-load-check {
  width: 1.1rem;
  height: 1.1rem;
  pointer-events: none;
  flex-shrink: 0;
}

.download-load-date {
  font-weight: 500;
  min-width: 6.5rem;
}

.download-load-doc {
  color: var(--color-text-muted);
}

.download-load-ticket {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.download-dialog-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--color-border);
  margin-top: 0.75rem;
}

.download-selected-count {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.download-footer-status {
  flex: 1;
  min-width: 0;
}

.download-progress {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* display:flex above would override the [hidden] attribute, so re-hide it. */
.download-progress[hidden] {
  display: none;
}

.download-progress-track {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.download-progress-cancel {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-text-muted);
  padding: 0.25rem;
  min-width: 28px;
  min-height: 28px;
}

.download-progress-cancel:hover {
  color: var(--color-text);
}

.download-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}

.download-progress-fill {
  height: 100%;
  width: 0;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width 0.15s ease;
}

.download-progress-label {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.responsive-load-table .totals-row td {
  font-weight: 700;
  border-top: 2px solid var(--color-border);
  background: var(--color-bg);
}

.grand-totals-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.25rem;
}

.grand-totals-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.grand-totals-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 520px) {
  .grand-totals-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 760px) {
  .grand-totals-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Mobile: stack load tables as cards using data-label */
@media (max-width: 640px) {
  .responsive-load-table {
    display: block;
  }

  .responsive-load-table thead {
    display: none;
  }

  .responsive-load-table tbody,
  .responsive-load-table tr {
    display: block;
  }

  .responsive-load-table tr {
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 1rem;
  }

  .responsive-load-table tbody tr:last-child {
    border-bottom: none;
  }

  .responsive-load-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.25rem 0;
    border: none;
    text-align: right;
    white-space: normal;
  }

  .responsive-load-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
  }

  .responsive-load-table .totals-row {
    background: var(--color-bg);
    border-top: 2px solid var(--color-border);
  }

  .responsive-load-table .totals-row td.totals-label {
    display: none;
  }

  .responsive-load-table tbody tr:hover {
    background: transparent;
  }

  /* Action buttons (View/Edit/Delete) stack under their label and wrap as
     tappable chips — no horizontal scroll to reach them. */
  .responsive-load-table td.row-actions {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 0.5rem;
  }

  .responsive-load-table td.row-actions .actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .responsive-load-table td.row-actions .actions .btn {
    min-height: 40px;
  }
}

/* Organization financial summary card */
.financial-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 0 1.5rem 1rem;
}

@media (min-width: 520px) {
  .financial-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 820px) {
  .financial-summary-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.financial-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.financial-stat-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.financial-stat-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
}

.financial-stat-sub {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: 0.25rem;
}

.financial-summary-footer {
  padding: 0 1.5rem 1.5rem;
  font-size: 0.875rem;
}

/* Scale-ticket quality spec highlighting */
.spec-target {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: 0;
}

.spec-exceeded {
  background: #fff3cd;
  color: #664d03;
}

/* Scale Tickets page */
.container-wide {
  max-width: 1400px;
}

.scale-ticket-table {
  width: 100%;
  font-size: 0.8125rem;
  table-layout: auto;
}

.scale-ticket-table th,
.scale-ticket-table td {
  padding: 0.5rem 0.375rem;
}

.scale-ticket-table th {
  font-size: 0.6875rem;
  line-height: 1.2;
}

.scale-ticket-table .spec-target {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.625rem;
}

.scale-ticket-table td.num,
.scale-ticket-table th.num {
  text-align: right;
  white-space: nowrap;
}

.scale-ticket-table .scale-ticket-toggle-cell {
  text-align: center;
  white-space: nowrap;
}

.scale-ticket-chevron {
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-text);
  transition: background var(--transition), border-color var(--transition);
  padding: 0.25rem 0.5rem;
}

.scale-ticket-chevron:hover,
.scale-ticket-chevron:focus {
  background: var(--color-bg);
  border-color: var(--color-primary);
  outline: none;
}

.scale-ticket-detail[hidden] {
  display: none;
}

.scale-ticket-detail > td {
  background: var(--color-bg);
  padding: 1rem 1.25rem;
}

.scale-ticket-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.scale-ticket-meta-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

.scale-ticket-quality {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.quality-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.8125rem;
  line-height: 1.2;
}

.quality-chip-label {
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.quality-chip-value {
  font-weight: 600;
  color: var(--color-text);
}

.quality-chip.spec-exceeded {
  border-color: #ffda6a;
}

.quality-chip.spec-exceeded .quality-chip-value,
.quality-chip.spec-exceeded .quality-chip-label {
  color: #664d03;
}

.scale-ticket-breakdown-wrap {
  overflow-x: auto;
}

.scale-ticket-breakdown {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.scale-ticket-breakdown th,
.scale-ticket-breakdown td {
  padding: 0.5rem 0.75rem;
}

.scale-ticket-breakdown td.num,
.scale-ticket-breakdown th.num {
  text-align: right;
  white-space: nowrap;
}

.scale-ticket-breakdown .standard-line {
  background: rgba(132, 189, 0, 0.1);
  border-left: 3px solid var(--color-primary);
  font-weight: 600;
}

.scale-ticket-breakdown .discount-line {
  color: var(--color-text-muted);
}

.scale-ticket-breakdown .discount-line td:first-child {
  padding-left: 1.75rem;
}

.tiered-caption {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.125rem;
  font-weight: 400;
}

.scale-ticket-breakdown .truck-total td {
  font-weight: 700;
  border-top: 2px solid var(--color-border);
}

/* Charges / G-L adjustments — a financial section set apart below the load total. */
.scale-ticket-breakdown .charge-divider td {
  padding-top: 0.75rem;
}

.charge-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--color-text-muted);
}

.scale-ticket-breakdown .charge-line {
  color: var(--color-text-muted);
  font-style: italic;
}

.scale-ticket-breakdown .charge-line td:first-child {
  padding-left: 1.75rem;
}

.scale-ticket-breakdown .net-total td {
  font-weight: 700;
  border-top: 1px solid var(--color-border);
}

.scale-ticket-totals td {
  font-weight: 700;
  background: var(--color-bg);
  border-top: 2px solid var(--color-border);
}

@media (max-width: 640px) {
  .hide-on-mobile {
    display: none;
  }

  /* Scale-ticket main row collapses to a stacked card per truck — no horizontal scroll. */
  .scale-ticket-table {
    display: block;
    border: none;
  }

  .scale-ticket-table thead {
    display: none;
  }

  .scale-ticket-table tbody {
    display: block;
    margin-bottom: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow: hidden;
  }

  .scale-ticket-table tr.scale-ticket-main {
    display: block;
    padding: 0.5rem 0.75rem;
  }

  .scale-ticket-table tr.scale-ticket-main > td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
    border: none;
    text-align: right;
  }

  .scale-ticket-table tr.scale-ticket-main > td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    margin-right: 1rem;
  }

  .scale-ticket-table tr.scale-ticket-main > td.scale-ticket-toggle-cell {
    justify-content: flex-end;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    margin-top: 0.25rem;
  }

  .scale-ticket-table tr.scale-ticket-main > td.scale-ticket-toggle-cell::before {
    content: "";
  }

  .scale-ticket-table tr.scale-ticket-detail:not([hidden]) {
    display: block;
  }

  .scale-ticket-table tr.scale-ticket-detail > td {
    display: block;
    padding: 0.75rem;
    border-top: 1px solid var(--color-border);
  }

  /* Breakdown table (inside the detail panel) also stacks on mobile. */
  .scale-ticket-breakdown {
    display: block;
    border: none;
  }

  .scale-ticket-breakdown thead {
    display: none;
  }

  .scale-ticket-breakdown tbody {
    display: block;
    border: none;
  }

  .scale-ticket-breakdown tbody tr {
    display: block;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    background: var(--color-surface);
  }

  .scale-ticket-breakdown tbody tr > td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    border: none;
    text-align: right;
  }

  .scale-ticket-breakdown tbody tr > td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    margin-right: 1rem;
  }

  /* First cell in each breakdown row is the Category label — render as a heading, no data-label prefix, left-aligned. */
  .scale-ticket-breakdown tbody tr > td:first-child {
    justify-content: flex-start;
    font-weight: 600;
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
  }

  .scale-ticket-breakdown tbody tr > td:first-child::before {
    content: "";
  }

  .scale-ticket-breakdown tbody tr.truck-total > td:first-child {
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

/* ============================================================
   Org ↔ admin messaging (conversations index + show + composer)
   ============================================================ */

/* Conversation index list */
.conversation-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.conversation-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.conversation-row-unread {
  border-color: var(--color-primary);
}

.conversation-link {
  display: block;
  padding: 0.875rem 1rem;
  min-height: 44px;
  color: var(--color-text);
  text-decoration: none;
}

.conversation-link:hover,
.conversation-link:focus {
  background: var(--color-bg);
  color: var(--color-text);
}

.conversation-link-start {
  width: 100%;
  text-align: left;
  background: var(--color-surface);
  border: none;
  font: inherit;
  cursor: pointer;
  color: var(--color-forest);
  font-weight: 500;
}

.conversation-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.conversation-row-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.conversation-org {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-row-meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.badge-unread {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* Conversation show: thread + composer */
.conversation-show {
  display: flex;
  flex-direction: column;
}

.conversation-show-title {
  font-size: 1.25rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-thread {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.conversation-messages {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 200px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.conversation-empty {
  padding: 1rem;
  text-align: center;
}

/* Message bubble — default ("theirs"): left, grey */
.message {
  background: #e9ecef;
  border: 1px solid #e9ecef;
  border-radius: var(--radius);
  padding: 0.625rem 0.75rem;
  max-width: 85%;
  align-self: flex-start;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* "Mine": right, brand tint. Hide redundant sender label since it's me. */
.message-mine {
  align-self: flex-end;
  background: var(--color-primary-light);
  border-color: var(--color-primary-light);
}

.message-mine .message-sender {
  display: none;
}

.message-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  flex-wrap: wrap;
}

.message-sender {
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-sender-badge {
  font-size: 0.65rem;
}

.message-time {
  margin-left: auto;
}

.message-body {
  white-space: pre-wrap;
  line-height: 1.4;
}

/* Conversation header */
.conversation-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.conversation-back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  min-height: 44px;
  padding: 0.5rem;
  margin: -0.5rem 0;
}

.conversation-back:hover {
  color: var(--color-forest);
}

.conversation-back-arrow {
  font-size: 1.25rem;
  line-height: 1;
}

.conversation-header-main {
  flex: 1 1 auto;
  min-width: 0;
}

.conversation-header-title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-header-subtitle {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

@media (max-width: 480px) {
  .conversation-back-text {
    display: none;
  }
  .conversation-header-title {
    font-size: 1.1rem;
  }
}

/* Composer */
.conversation-composer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.conversation-composer-error {
  font-size: 0.85rem;
  color: var(--color-danger);
  padding: 0.25rem 0;
}

.conversation-composer-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.conversation-composer-input {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 200px;
  resize: none;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
  line-height: 1.4;
}

.conversation-composer-submit {
  flex: 0 0 auto;
  min-height: 44px;
}

.conversation-composer-submit:disabled,
.conversation-composer-submit[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .conversation-messages {
    max-height: 55vh;
  }
  .message {
    max-width: 95%;
  }
}

/* Account settings page (/account)
 *
 * Density-focused: the page has the user's contact info plus three notification
 * channels (email/SMS/push) plus per-device push subscriptions plus an
 * SMS-terms disclosure. We tighten vertical spacing aggressively on phones
 * and collapse the SMS-terms behind a <details> so the page fits in roughly
 * one mobile viewport instead of requiring scroll. The SMS-terms element
 * stays one tap from the consent checkbox, which keeps it CTIA-compliant
 * (readily accessible at the point of opt-in).
 */
.account-form-group {
  margin-bottom: 0.875rem;
}

.account-help-text {
  font-size: 0.8125rem;
  margin-top: 0.25rem;
}

/* Phone input group: +1 prefix joined to a flex-1 input. */
.phone-input-group {
  display: flex;
  align-items: stretch;
}

.phone-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 0.75rem;
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  font-size: 0.9375rem;
  min-height: 44px;
  user-select: none;
}

.phone-input-group input[type="tel"] {
  border-radius: 0 var(--radius) var(--radius) 0;
  flex: 1;
  min-height: 44px;
}

.account-notifications-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.875rem 1rem;
  margin-bottom: 0.875rem;
}

.account-notifications-legend {
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0 0.5rem;
}

.account-checkbox-row {
  margin-bottom: 0.5rem;
}

.account-checkbox-row:last-child {
  margin-bottom: 0;
}

/* Per-type email toggles nested under the master "Email notifications" row. */
.account-email-types {
  margin: 0.25rem 0 0.5rem 1.75rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-border);
}

/* Greyed out + non-interactive when the master toggle is off (the per-type
   options don't apply). Driven by notification_prefs_controller.js. */
.account-email-types.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.account-checkbox-label {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* Explicit margin on the checkbox itself (more robust than flex `gap`,
 * which some browsers handle inconsistently when the label contains a
 * hidden Rails-generated input). */
.account-checkbox-label input[type="checkbox"] {
  margin-right: 0.625rem;
  flex-shrink: 0;
}

.sms-disclosure {
  margin-top: 0.375rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  background: var(--color-bg);
}

.sms-disclosure-heading {
  margin: 0 0 0.375rem;
  font-weight: 600;
  color: var(--color-text);
}

.sms-disclosure-body {
  margin: 0;
}

.sms-disclosure-links {
  margin: 0.4rem 0 0;
}

/* Push subscription section inside the notifications fieldset. */
.push-device-section {
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--color-border);
}

.push-device-heading {
  font-size: 0.9375rem;
  margin: 0 0 0.375rem;
}

.push-device-actions {
  gap: 0.5rem;
  flex-wrap: wrap;
}

.push-devices-heading {
  font-size: 0.875rem;
  margin: 0.75rem 0 0.375rem;
}

.push-devices-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.push-device-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.push-device-row .device-info {
  flex: 1 1 200px;
  min-width: 0;
}

.push-device-row .device-ua {
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.push-device-row .text-muted {
  font-size: 0.75rem;
}

@media (max-width: 640px) {
  /* Card has 2rem padding by default; combined with container + fieldset
   * that's >100px lost. Tighten everything for phone viewports. */
  .card {
    padding: 1.25rem;
  }

  .account-notifications-fieldset {
    padding: 0.625rem 0.75rem;
  }

  .account-form-group {
    margin-bottom: 0.625rem;
  }

  /* Full-width Save button — obvious tap target instead of a small chip. */
  .account-save-row .btn {
    display: block;
    width: 100%;
  }

  /* Stack the Enable / Disable buttons on phones so each is a wide tap target. */
  .push-device-actions {
    flex-direction: column;
  }
  .push-device-actions .btn {
    width: 100%;
  }
}

/* ============================================================ */
/* Drawflow node-editor styles (vendored from drawflow@0.0.60). */
/* Used by the admin workflow builder canvas. All rules are     */
/* namespaced under .drawflow so they don't affect other pages. */
/* ============================================================ */
.drawflow,.drawflow .parent-node{position:relative}.parent-drawflow{display:flex;overflow:hidden;touch-action:none;outline:0}.drawflow{width:100%;height:100%;user-select:none;perspective:0}.drawflow .drawflow-node{display:flex;align-items:center;position:absolute;background:#0ff;width:160px;min-height:40px;border-radius:4px;border:2px solid #000;color:#000;z-index:2;padding:15px}.drawflow .drawflow-node.selected{background:red}.drawflow .drawflow-node:hover{cursor:move}.drawflow .drawflow-node .inputs,.drawflow .drawflow-node .outputs{width:0}.drawflow .drawflow-node .drawflow_content_node{width:100%;display:block}.drawflow .drawflow-node .input,.drawflow .drawflow-node .output{position:relative;width:20px;height:20px;background:#fff;border-radius:50%;border:2px solid #000;cursor:crosshair;z-index:1;margin-bottom:5px}.drawflow .drawflow-node .input{left:-27px;top:2px;background:#ff0}.drawflow .drawflow-node .output{right:-3px;top:2px}.drawflow svg{z-index:0;position:absolute;overflow:visible!important}.drawflow .connection{position:absolute;pointer-events:none;aspect-ratio:1/1}.drawflow .connection .main-path{fill:none;stroke-width:5px;stroke:#4682b4;pointer-events:all}.drawflow .connection .main-path:hover{stroke:#1266ab;cursor:pointer}.drawflow .connection .main-path.selected{stroke:#43b993}.drawflow .connection .point{cursor:move;stroke:#000;stroke-width:2;fill:#fff;pointer-events:all}.drawflow .connection .point.selected,.drawflow .connection .point:hover{fill:#1266ab}.drawflow .main-path{fill:none;stroke-width:5px;stroke:#4682b4}.drawflow-delete{position:absolute;display:block;width:30px;height:30px;background:#000;color:#fff;z-index:4;border:2px solid #fff;line-height:30px;font-weight:700;text-align:center;border-radius:50%;font-family:monospace;cursor:pointer}.drawflow>.drawflow-delete{margin-left:-15px;margin-top:15px}.parent-node .drawflow-delete{right:-15px;top:-15px}

/* Workflow builder layout (admin canvas page). */
.workflow-builder-bar { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.workflow-builder-layout { display: flex; gap: 1rem; align-items: stretch; }
.workflow-canvas {
  flex: 1 1 auto; min-height: 460px; height: 60vh;
  border: 1px solid var(--border-color, #d0d5dd); border-radius: 8px;
  background: #f7f8fa repeating-linear-gradient(0deg, transparent, transparent 19px, #eceef1 20px),
              repeating-linear-gradient(90deg, transparent, transparent 19px, #eceef1 20px);
}
.workflow-panel {
  flex: 0 0 320px; padding: 1rem; border: 1px solid var(--border-color, #d0d5dd);
  border-radius: 8px; background: #fff; overflow-y: auto; max-height: 60vh;
}
.workflow-panel label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; }
.workflow-panel input, .workflow-panel select, .workflow-panel textarea { width: 100%; }
.workflow-panel .wf-map { margin: 0.5rem 0; padding: 0.5rem; border: 1px solid #eceef1; border-radius: 6px; }
.wf-node { padding: 0.25rem 0.5rem; font-size: 0.85rem; }
.wf-node-erp_post strong { color: #7a4d00; }
.wf-node-wait strong { color: #5a3d99; }
.workflow-panel .wf-reveal { margin: 0.5rem 0; padding: 0.5rem; border: 1px solid #eceef1; border-radius: 6px; }
.workflow-panel .wf-check { display: flex; align-items: center; gap: 0.4rem; font-weight: normal; }
.workflow-panel .wf-check input { width: auto; }
@media (max-width: 720px) {
  .workflow-builder-layout { flex-direction: column; }
  .workflow-panel { flex-basis: auto; }
}

/* Disabled buttons (e.g. Submit gated until required answers are filled). */
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* /forms — collapsible, searchable sections. */
.forms-section { border: 1px solid var(--border-color, #d0d5dd); border-radius: 8px; margin-bottom: 1rem; background: #fff; overflow: hidden; }
.forms-section-summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1rem; cursor: pointer; font-weight: 600; list-style: none; min-height: 44px; }
.forms-section-summary::-webkit-details-marker { display: none; }
.forms-section-summary::before { content: "\25B8"; color: #98a2b3; transition: transform 0.15s ease; }
.forms-section[open] > .forms-section-summary::before { transform: rotate(90deg); }
.forms-section-title { flex: 1 1 auto; }
.forms-section-body { padding: 0 1rem 1rem; }
.forms-search { width: 100%; margin-bottom: 0.75rem; min-height: 40px; padding: 0.5rem 0.75rem; box-sizing: border-box; }
.inline-dispatch > summary { cursor: pointer; }

/* ── Tom Select (vendored default theme; used by the workflow notify admin picker) ── */
.ts-control{border:1px solid #d0d0d0;border-radius:3px;box-shadow:inset 0 1px 1px rgba(0,0,0,.1);box-sizing:border-box;display:flex;flex-wrap:wrap;overflow:hidden;padding:8px;position:relative;width:100%;z-index:1}.ts-wrapper.multi.has-items .ts-control{padding:5px 8px 2px}.full .ts-control{background-color:#fff}.disabled .ts-control,.disabled .ts-control *{cursor:default!important}.focus .ts-control{box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}.ts-control>*{display:inline-block;vertical-align:initial}.ts-wrapper.multi .ts-control>div{background:#1da7ee;border:1px solid #0073bb;color:#fff;cursor:pointer;margin:0 3px 3px 0;overflow:auto;padding:2px 6px}.ts-wrapper.multi .ts-control>div.active{background:#92c836;border:1px solid #00578d;color:#fff}.ts-wrapper.multi.disabled .ts-control>div,.ts-wrapper.multi.disabled .ts-control>div.active{background:#d2d2d2;border:1px solid #aaa;color:#fff}.ts-control>input{background:none!important;border:0!important;box-shadow:none!important;display:inline-block!important;flex:1 1 auto;line-height:inherit!important;margin:0!important;max-height:none!important;max-width:100%!important;min-height:0!important;min-width:7rem;padding:0!important;text-indent:0!important;-webkit-user-select:auto!important;-moz-user-select:auto!important;-ms-user-select:auto!important;user-select:auto!important}.ts-control>input::-ms-clear{display:none}.ts-control>input:focus{outline:none!important}.has-items .ts-control>input{margin:0 4px!important}.ts-control.rtl{text-align:right}.ts-control.rtl.single .ts-control:after{left:15px;right:auto}.ts-control.rtl .ts-control>input{margin:0 4px 0 -2px!important}.disabled .ts-control{background-color:#fafafa;opacity:.5}.input-hidden .ts-control>input{left:-10000px;opacity:0;position:absolute}.ts-dropdown{background:#fff;border:1px solid #d0d0d0;border-radius:0 0 3px 3px;border-top:0;box-shadow:0 1px 3px rgba(0,0,0,.1);box-sizing:border-box;left:0;margin:.25rem 0 0;position:absolute;top:100%;width:100%;z-index:10}.ts-dropdown [data-selectable]{cursor:pointer;overflow:hidden}.ts-dropdown [data-selectable] .highlight{background:rgba(125,168,208,.2);border-radius:1px}.ts-dropdown .create,.ts-dropdown .no-results,.ts-dropdown .optgroup-header,.ts-dropdown .option{padding:5px 8px}.ts-dropdown .option,.ts-dropdown [data-disabled],.ts-dropdown [data-disabled] [data-selectable].option{cursor:inherit;opacity:.5}.ts-dropdown [data-selectable].option{cursor:pointer;opacity:1}.ts-dropdown .optgroup:first-child .optgroup-header{border-top:0}.ts-dropdown .optgroup-header{background:#fff;color:#303030;cursor:default}.ts-dropdown .active{background-color:#f5fafd;color:#495c68}.ts-dropdown .active.create{color:#495c68}.ts-dropdown .create{color:rgba(48,48,48,.5)}.ts-dropdown .spinner{display:inline-block;height:30px;margin:5px 8px;width:30px}.ts-dropdown .spinner:after{animation:lds-dual-ring 1.2s linear infinite;border-color:#d0d0d0 transparent;border-radius:50%;border-style:solid;border-width:5px;content:" ";display:block;height:24px;margin:3px;width:24px}@keyframes lds-dual-ring{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.ts-dropdown-content{max-height:200px;overflow:hidden auto;scroll-behavior:smooth}.ts-wrapper.plugin-drag_drop .ts-dragging{color:transparent!important}.ts-wrapper.plugin-drag_drop .ts-dragging>*{visibility:hidden!important}.plugin-checkbox_options:not(.rtl) .option input{margin-right:.5rem}.plugin-checkbox_options.rtl .option input{margin-left:.5rem}.plugin-clear_button{--ts-pr-clear-button:1em}.plugin-clear_button .clear-button{background:transparent!important;cursor:pointer;margin-right:0!important;opacity:0;position:absolute;right:2px;top:50%;transform:translateY(-50%);transition:opacity .5s}.plugin-clear_button.form-select .clear-button,.plugin-clear_button.single .clear-button{right:max(var(--ts-pr-caret),8px)}.plugin-clear_button.focus.has-items .clear-button,.plugin-clear_button:not(.disabled):hover.has-items .clear-button{opacity:1}.ts-wrapper .dropdown-header{background:color-mix(#fff,#d0d0d0,85%);border-bottom:1px solid #d0d0d0;border-radius:3px 3px 0 0;padding:10px 8px;position:relative}.ts-wrapper .dropdown-header-close{color:#303030;font-size:20px!important;line-height:20px;margin-top:-12px;opacity:.4;position:absolute;right:8px;top:50%}.ts-wrapper .dropdown-header-close:hover{color:#000}.plugin-dropdown_input.focus.dropdown-active .ts-control{border:1px solid #d0d0d0;box-shadow:none}.plugin-dropdown_input .dropdown-input{background:transparent;border:solid #d0d0d0;border-width:0 0 1px;box-shadow:inset 0 1px 1px rgba(0,0,0,.1);display:block;padding:8px;width:100%}.plugin-dropdown_input .items-placeholder{border:0!important;box-shadow:none!important;width:100%}.plugin-dropdown_input.dropdown-active .items-placeholder,.plugin-dropdown_input.has-items .items-placeholder{display:none!important}.ts-wrapper.plugin-input_autogrow.has-items .ts-control>input{min-width:0}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input{flex:none;min-width:4px}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::-ms-input-placeholder{color:transparent}.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control>input::placeholder{color:transparent}.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content{display:flex}.ts-dropdown.plugin-optgroup_columns .optgroup{border-right:1px solid #f2f2f2;border-top:0;flex-basis:0;flex-grow:1;min-width:0}.ts-dropdown.plugin-optgroup_columns .optgroup:last-child{border-right:0}.ts-dropdown.plugin-optgroup_columns .optgroup:before{display:none}.ts-dropdown.plugin-optgroup_columns .optgroup-header{border-top:0}.ts-wrapper.plugin-remove_button .item{align-items:center;display:inline-flex}.ts-wrapper.plugin-remove_button .item .remove{border-radius:0 2px 2px 0;box-sizing:border-box;color:inherit;display:inline-block;padding:0 6px;text-decoration:none;vertical-align:middle}.ts-wrapper.plugin-remove_button .item .remove:hover{background:rgba(0,0,0,.05)}.ts-wrapper.plugin-remove_button.disabled .item .remove:hover{background:none}.ts-wrapper.plugin-remove_button .remove-single{font-size:23px;position:absolute;right:0;top:0}.ts-wrapper.plugin-remove_button:not(.rtl) .item{padding-right:0!important}.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove{border-left:1px solid #0073bb;margin-left:6px}.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove{border-left-color:#00578d}.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove{border-left-color:#aaa}.ts-wrapper.plugin-remove_button.rtl .item{padding-left:0!important}.ts-wrapper.plugin-remove_button.rtl .item .remove{border-right:1px solid #0073bb;margin-right:6px}.ts-wrapper.plugin-remove_button.rtl .item.active .remove{border-right-color:#00578d}.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove{border-right-color:#aaa}:root{--ts-pr-clear-button:0px;--ts-pr-caret:0px;--ts-pr-min:.75rem}.ts-wrapper.single .ts-control,.ts-wrapper.single .ts-control input{cursor:pointer}.ts-control:not(.rtl){padding-right:max(var(--ts-pr-min),var(--ts-pr-clear-button) + var(--ts-pr-caret))!important}.ts-control.rtl{padding-left:max(var(--ts-pr-min),var(--ts-pr-clear-button) + var(--ts-pr-caret))!important}.ts-wrapper{position:relative}.ts-control,.ts-control input,.ts-dropdown{color:#303030;font-family:inherit;font-size:13px;line-height:18px}.ts-control,.ts-wrapper.single.input-active .ts-control{background:#fff;cursor:text}.ts-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.ts-wrapper.single .ts-control{--ts-pr-caret:2rem}.ts-wrapper.single .ts-control:after{border-color:gray transparent transparent;border-style:solid;border-width:5px 5px 0;content:" ";display:block;height:0;margin-top:-3px;position:absolute;top:50%;width:0}.ts-wrapper.single .ts-control:not(.rtl):after{right:15px}.ts-wrapper.single .ts-control.rtl:after{left:15px}.ts-wrapper.single.dropdown-active .ts-control:after{border-color:transparent transparent gray;border-width:0 5px 5px;margin-top:-4px}.ts-wrapper.single.input-active .ts-control,.ts-wrapper.single.input-active .ts-control input{cursor:text}.ts-wrapper{display:flex;min-height:36px}.ts-wrapper.multi.has-items .ts-control{padding-left:5px;--ts-pr-min:5px}.ts-wrapper.multi .ts-control [data-value]{background-color:color-mix(#1da7ee,#178ee9,60%);background-image:linear-gradient(180deg,#1da7ee,#178ee9);background-repeat:repeat-x;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.2),inset 0 1px hsla(0,0%,100%,.03);text-shadow:0 1px 0 rgba(0,51,83,.3)}.ts-wrapper.multi .ts-control [data-value].active{background-color:color-mix(#008fd8,#0075cf,60%);background-image:linear-gradient(180deg,#008fd8,#0075cf);background-repeat:repeat-x}.ts-wrapper.multi.disabled .ts-control [data-value]{background:none;box-shadow:none;color:#999;text-shadow:none}.ts-wrapper.multi.disabled .ts-control [data-value],.ts-wrapper.multi.disabled .ts-control [data-value] .remove{border-color:#e6e6e6}.ts-wrapper.multi.disabled .ts-control [data-value] .remove{background:none}.ts-wrapper.single .ts-control{background-color:color-mix(#fefefe,#f2f2f2,60%);background-image:linear-gradient(180deg,#fefefe,#f2f2f2);background-repeat:repeat-x;box-shadow:0 1px 0 rgba(0,0,0,.05),inset 0 1px 0 hsla(0,0%,100%,.8)}.ts-dropdown.single,.ts-wrapper.single .ts-control{border-color:#b8b8b8}.dropdown-active .ts-control{border-radius:3px 3px 0 0}.ts-dropdown .optgroup-header{font-size:.85em;font-weight:700;padding-top:7px}.ts-dropdown .optgroup{border-top:1px solid #f0f0f0}.ts-dropdown .optgroup:first-child{border-top:0}
/*# sourceMappingURL=tom-select.default.min.css.map */

/* ── Slide-over field editor (admin form-template page) ── */
.field-drawer-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.4); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 1000; }
.field-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(460px, 94vw); background: #fff; box-shadow: -8px 0 24px rgba(0,0,0,0.18); transform: translateX(100%); transition: transform .25s ease; z-index: 1001; overflow-y: auto; padding: 1.25rem; }
.field-drawer-open .field-drawer-backdrop { opacity: 1; pointer-events: auto; }
.field-drawer-open .field-drawer { transform: translateX(0); }
.field-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.field-drawer-header h2 { margin: 0; font-size: 1.125rem; }
.field-drawer-x { background: none; border: none; font-size: 1.25rem; line-height: 1; cursor: pointer; color: #64748b; padding: 0 .5rem; border-radius: 6px; min-height: 44px; min-width: 44px; }
.field-drawer-x:hover { background: #f1f5f9; color: #0f172a; }

/* Collapsible seed invoices (seed_data.html.slim). Native <details>/<summary>:
 * no JS, accessible, tap-friendly. Collapsed shows invoice #, dates, and the
 * remaining balance; expanding reveals the full line + payment breakdown. */
.seed-invoice {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}

.seed-invoice-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  min-height: 44px;
}

.seed-invoice-summary::-webkit-details-marker {
  display: none;
}

/* Chevron on the right, rotates when the invoice is open. */
.seed-invoice-summary::after {
  content: "▸";
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  transition: transform 0.15s ease;
}

.seed-invoice[open] > .seed-invoice-summary::after {
  transform: rotate(90deg);
}

.seed-invoice-summary:hover {
  background: var(--color-primary-light);
}

.seed-invoice-summary-title {
  margin: 0;
  font-size: 1.05rem;
}

.seed-invoice-summary-meta {
  margin: 0.125rem 0 0;
  font-size: 0.85rem;
}

.seed-invoice-summary-amount {
  text-align: right;
  white-space: nowrap;
}

.seed-invoice-summary-amount-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.seed-invoice-summary-amount-value {
  font-weight: 700;
  font-size: 1.05rem;
}

.seed-invoice-body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}

/* Closed/finished contracts collapsed below the active ones (documents_data).
 * Native <details>/<summary> section toggle with a left-side rotating chevron. */
.closed-contracts-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.closed-contracts-summary::-webkit-details-marker {
  display: none;
}

.closed-contracts-summary::before {
  content: "▸";
  font-size: 0.85rem;
  transition: transform 0.15s ease;
}

.closed-contracts[open] > .closed-contracts-summary::before {
  transform: rotate(90deg);
}

/* Sortable headers (grower directory) — the header text is a server-side sort
   link; the ↑/↓ arrow lives in the link text. Scoped to the directory so other
   .responsive-load-table headers are unaffected. */
[data-controller~="grower-directory"] thead th a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
[data-controller~="grower-directory"] thead th a:hover { text-decoration: underline; }

/* Grower directory toolbar: search input + has-access filter chips. Search
   input matches the .form-group input styling so it fits the rest of the app. */
.directory-toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
/* A server-side filter is a real <form>, so the FORM is the toolbar's flex item
   and .directory-search inside it would no longer stretch. Make the form a flex
   row too, so the input still grows to fill the toolbar. */
.directory-toolbar form {
  display: flex;
  flex: 1 1 20rem;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.directory-search {
  flex: 1 1 16rem;
  min-width: 12rem;
  /* Tap target — see the mobile-friendly requirement in CLAUDE.md. */
  min-height: 44px;
  padding: 0.625rem 0.75rem;
  font-size: 0.9375rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.directory-search:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(132, 189, 0, 0.3);
}
.directory-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
/* Pagination footer under the directory table. */
.directory-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.directory-pagination .pagy.info {
  color: var(--color-text-muted, #6b7280);
  font-size: 0.875rem;
}
.directory-pager {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.directory-pager .btn[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* -----------------------------------------------------------------
   Tech-support widget — floating headphones button + contact popup.
   Fixed bottom-right on every page; the popup uses a native <dialog>.
   ----------------------------------------------------------------- */
.support-fab {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 1000;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: var(--color-forest);
  color: white;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), transform var(--transition);
}

.support-fab:hover {
  background: var(--color-forest-hover);
  transform: translateY(-1px);
}

.support-fab-icon {
  width: 26px;
  height: 26px;
  /* The mic boom extends to the bottom of the viewBox, so the glyph's visual
     weight sits low — nudge it up to look centered in the round button. */
  transform: translateY(-2px);
}

/* Popover anchored just above the floating button (bottom-left), growing out
   of that corner. Base rule holds the hidden/exit state; [open] the visible
   state; @starting-style supplies the entry from-values. `allow-discrete`
   keeps the element around long enough to animate closed. */
.support-dialog {
  position: fixed;
  top: auto;
  bottom: 4.5rem;
  left: 1.25rem;
  margin: 0;
  width: min(88vw, 320px);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28);
  background: var(--color-surface);
  color: var(--color-text);
  transform-origin: bottom left;
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    overlay 0.18s ease allow-discrete,
    display 0.18s ease allow-discrete;
}

.support-dialog[open] {
  opacity: 1;
  transform: scale(1);
}

@starting-style {
  .support-dialog[open] {
    opacity: 0;
    transform: scale(0.85);
  }
}

/* No dark overlay — it reads as a popover, not a modal. The transparent
   backdrop still catches outside clicks (handled in support_controller). */
.support-dialog::backdrop {
  background: rgba(0, 0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .support-dialog {
    transition: none;
  }
}

.support-card {
  padding: 1.25rem 1.25rem 1.5rem;
}

.support-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.support-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-forest);
  margin: 0;
}

.support-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
}

.support-close:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.support-intro {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}

.support-contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.support-contact {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem;
  background: var(--color-bg);
  border-radius: var(--radius);
}

.support-contact-name {
  font-weight: 600;
  font-size: 0.9375rem;
}

.support-contact-link {
  font-size: 0.875rem;
  color: var(--color-forest);
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   Admin job monitor (/admin/job_monitor and its two detail pages)
   ============================================================ */

/* "Warning" text tone. Reuses the wheat-gold accent's readable dark variant
   rather than introducing a fifth colour — used for the states that are neither
   healthy nor broken (a settlement nobody could be emailed about, an email
   handed off but never confirmed). */
.text-warning {
  color: var(--color-accent-text);
}

/* Hub's two "where to go next" cards. One column on phones, side by side once
   there's room. */
.monitor-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .monitor-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* One email's recipient + delivery outcome block inside a table cell. */
.monitor-delivery {
  padding: 0.5rem 0;
  border-top: 1px solid var(--color-border);
}

.monitor-delivery:first-child {
  border-top: none;
  padding-top: 0;
}

/* The attachment manifest: what was physically attached, and for a zip, the
   files bundled inside it. Monospace so filenames line up and a truncated
   bundle is obvious at a glance. */
.monitor-files {
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.monitor-files li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.15rem 0;
  color: var(--color-text-muted);
}

.monitor-files li .monitor-file-name {
  overflow-wrap: anywhere;
}

.monitor-zip {
  margin-top: 0.35rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-primary-light);
}

/* Filter row above the email log. Wraps freely; every control stays tappable. */
.monitor-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.monitor-filters form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.monitor-filters input[type="search"] {
  min-height: 44px;
  min-width: 220px;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 1rem;
}