/* ===== ProAgri Sheet Component ===== */

/* === Base Structure === */

.proagri-sheet-wrap {
  width: 100%;
  position: relative;
}

/* Search toolbar */
.proagri-sheet-toolbar {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  gap: 8px;
}

.proagri-sheet-search {
  flex: 1;
  max-width: 280px;
  padding: 6px 12px;
  font-size: 12px;
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 8px;
  background: rgba(128, 128, 128, 0.06);
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.proagri-sheet-search:focus {
  border-color: var(--color-accent-light);
}

.proagri-sheet-search::placeholder {
  color: var(--text-muted);
}

/* Header row */
.proagri-sheet-header {
  display: flex;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
  transition: opacity 0.2s ease;
}

.proagri-sheet-header-cell {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  flex: 1;
  min-width: 0;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 4px;
  user-select: none;
}

/* Typography floor on touch-class viewports — 10px is unreadable at 375px. */
@media (max-width: 768px) {
  .proagri-sheet-header-cell { font-size: 11px; }
}
@media (max-width: 480px) {
  .proagri-sheet-header-cell { font-size: 12px; }
}

.proagri-sheet-header-cell.sortable {
  cursor: pointer;
}

.proagri-sheet-header-cell.sortable:hover {
  color: var(--text-secondary);
}

.proagri-sheet-sort-arrows {
  display: inline-flex;
  flex-direction: column;
  margin-left: 4px;
  line-height: 1;
  vertical-align: middle;
}

.sort-arrow {
  font-size: 8px;
  line-height: 8px;
  opacity: 0.3;
  transition: opacity 0.15s, color 0.15s;
}

.sort-arrow.active {
  opacity: 1;
  color: var(--color-accent-light);
}

.proagri-sheet-header-cell.sortable:hover .sort-arrow {
  opacity: 0.6;
}

.proagri-sheet-header-cell.sortable:hover .sort-arrow.active {
  opacity: 1;
}

/* Column width classes */
.proagri-sheet-header-cell.cell-sm,
.proagri-sheet-cell.cell-sm {
  flex: 0 0 60px;
}

.proagri-sheet-header-cell.cell-md,
.proagri-sheet-cell.cell-md {
  flex: 0 0 140px;
}

.proagri-sheet-header-cell.cell-lg,
.proagri-sheet-cell.cell-lg {
  flex: 0 0 180px;
}

.proagri-sheet-header-cell.radial-col,
.proagri-sheet-cell.radial-col {
  flex: 0 0 40px;
}

/* === Data Rows === */

.proagri-sheet-row {
  display: flex;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.08);
  align-items: center;
  transition: opacity 0.2s ease, background 0.15s ease;
  animation: sheetRowIn 0.25s ease both;
}

.proagri-sheet-row:hover {
  background: rgba(128, 128, 128, 0.04);
}

@keyframes sheetRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Cells === */

.proagri-sheet-cell {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.proagri-sheet-cell.cell-wrap {
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  text-overflow: unset;
}

.proagri-sheet-cell.cell-name {
  color: var(--text-primary);
  font-weight: 500;
}

.proagri-sheet-cell.cell-editable {
  cursor: pointer;
}

.proagri-sheet-cell.cell-editable:hover {
  background: rgba(128, 128, 128, 0.08);
}

.proagri-sheet-cell.cell-editing {
  background: rgba(128, 128, 128, 0.1);
  outline: 2px solid var(--color-accent-light);
  outline-offset: -1px;
}


.proagri-sheet-cell.radial-col {
  flex: 0 0 40px;
  text-align: right;
  overflow: visible;
}

/* === Status Badges === */

.proagri-sheet-link {
  color: var(--color-accent-light, #f5a623);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(245, 166, 35, 0.3);
  transition: background 0.15s;
}

.proagri-sheet-link:hover {
  background: rgba(245, 166, 35, 0.1);
  text-decoration: none;
}

.proagri-sheet-upload-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(100, 100, 100, 0.25);
  background: transparent;
  color: var(--color-text-secondary, #64748b);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.proagri-sheet-upload-btn:hover {
  background: var(--color-accent-light, #f5a623);
  color: #fff;
  border-color: var(--color-accent-light, #f5a623);
}

.proagri-sheet-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  text-transform: capitalize;
  white-space: nowrap;
}

.proagri-sheet-status-pending {
  background: rgba(245, 166, 35, 0.15);
  color: #f5a623;
}

.proagri-sheet-status-in_progress {
  background: rgba(52, 152, 219, 0.15);
  color: #3498db;
}

.proagri-sheet-status-completed,
.proagri-sheet-status-done {
  background: rgba(39, 174, 96, 0.15);
  color: #27ae60;
}

.proagri-sheet-status-overdue {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
}

.proagri-sheet-status-active {
  background: rgba(39, 174, 96, 0.15);
  color: #27ae60;
}

.proagri-sheet-status-inactive {
  background: rgba(128, 128, 128, 0.15);
  color: #888;
}

.proagri-sheet-status-request_client_materials,
.proagri-sheet-status-materials_requested {
  background: rgba(245, 166, 35, 0.15);
  color: #f5a623;
}

.proagri-sheet-status-materials_received {
  background: rgba(39, 174, 96, 0.15);
  color: #27ae60;
}

.proagri-sheet-status-lead {
  background: rgba(245, 166, 35, 0.15);
  color: #f5a623;
}

.proagri-sheet-status-low {
  background: rgba(39, 174, 96, 0.15);
  color: #27ae60;
}

.proagri-sheet-status-medium {
  background: rgba(245, 166, 35, 0.15);
  color: #f5a623;
}

.proagri-sheet-status-high {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
}

.proagri-sheet-status-urgent {
  background: rgba(192, 57, 43, 0.2);
  color: #c0392b;
}

.proagri-sheet-status-draft {
  background: rgba(128, 128, 128, 0.15);
  color: #888;
}

.proagri-sheet-status-outline_proposal {
  background: rgba(155, 89, 182, 0.15);
  color: #9b59b6;
}

.proagri-sheet-status-design {
  background: rgba(52, 152, 219, 0.15);
  color: #3498db;
}

.proagri-sheet-status-design_proposal {
  background: rgba(52, 152, 219, 0.15);
  color: #3498db;
}

.proagri-sheet-status-design_review {
  background: rgba(41, 128, 185, 0.15);
  color: #2980b9;
}

.proagri-sheet-status-proposal_ready {
  background: rgba(39, 174, 96, 0.15);
  color: #27ae60;
}

.proagri-sheet-status-sent_to_client {
  background: rgba(243, 156, 18, 0.15);
  color: #f39c12;
}

.proagri-sheet-status-client_approved {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
}

.proagri-sheet-status-booking_form_ready {
  background: rgba(22, 160, 133, 0.15);
  color: #16a085;
}

.proagri-sheet-status-client_changes {
  background: rgba(230, 126, 34, 0.15);
  color: #e67e22;
}

.proagri-sheet-status-booking_form_sent {
  background: rgba(0, 172, 193, 0.15);
  color: #00acc1;
}

.proagri-sheet-status-onboarding {
  background: rgba(52, 152, 219, 0.15);
  color: #3498db;
}

.proagri-sheet-status-onboarded {
  background: rgba(39, 174, 96, 0.15);
  color: #27ae60;
}

.proagri-sheet-status-declined {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
}

.proagri-sheet-status-approved {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
}

/* Web-design pipeline statuses */
.proagri-sheet-status-request_client_materials {
  background: rgba(245, 166, 35, 0.15);
  color: #f5a623;
}

.proagri-sheet-status-materials_requested {
  background: rgba(243, 156, 18, 0.15);
  color: #f39c12;
}

.proagri-sheet-status-materials_received {
  background: rgba(22, 160, 133, 0.15);
  color: #16a085;
}

.proagri-sheet-status-sitemap {
  background: rgba(155, 89, 182, 0.15);
  color: #9b59b6;
}

.proagri-sheet-status-wireframe {
  background: rgba(142, 68, 173, 0.15);
  color: #8e44ad;
}

.proagri-sheet-status-prototype {
  background: rgba(52, 152, 219, 0.15);
  color: #3498db;
}

.proagri-sheet-status-ready_for_approval {
  background: rgba(243, 156, 18, 0.15);
  color: #f39c12;
}

.proagri-sheet-status-sent_for_approval {
  background: rgba(230, 126, 34, 0.15);
  color: #e67e22;
}

.proagri-sheet-status-design_changes {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
}

.proagri-sheet-status-development {
  background: rgba(41, 128, 185, 0.15);
  color: #2980b9;
}

.proagri-sheet-status-site_developed {
  background: rgba(39, 174, 96, 0.15);
  color: #27ae60;
}

.proagri-sheet-status-hosting_seo {
  background: rgba(22, 160, 133, 0.15);
  color: #16a085;
}

.proagri-sheet-status-complete {
  background: rgba(39, 174, 96, 0.15);
  color: #27ae60;
}

/* Content calendar legacy statuses (pre-2026-04-08 rename: focus_points → materials).
   These selectors are retained for any rows in flight that haven't migrated yet.
   New rows use `request_materials` / `materials_requested` / `materials_received`
   which inherit the standard "materials" palette defined above. */
.proagri-sheet-status-request_focus_points {
  background: rgba(142, 68, 173, 0.15);
  color: #8e44ad;
}

.proagri-sheet-status-focus_points_requested {
  background: rgba(155, 89, 182, 0.15);
  color: #9b59b6;
}

.proagri-sheet-status-focus_points_received {
  background: rgba(52, 152, 219, 0.15);
  color: #3498db;
}

/* Content calendar — request_materials gets its own purple accent so the
   pipeline reads visually like a kickoff (the other two materials_* classes
   inherit the orange/teal palette from earlier in this file). */
.proagri-sheet-status-request_materials {
  background: rgba(142, 68, 173, 0.15);
  color: #8e44ad;
}

.proagri-sheet-status-editorial {
  background: rgba(230, 126, 34, 0.15);
  color: #e67e22;
}

.proagri-sheet-status-editorial_review {
  background: rgba(211, 84, 0, 0.15);
  color: #d35400;
}

.proagri-sheet-status-ready_for_scheduling {
  background: rgba(22, 160, 133, 0.15);
  color: #16a085;
}

/* Social Media pipeline statuses */
.proagri-sheet-status-upload_materials {
  background: rgba(245, 166, 35, 0.15);
  color: #f5a623;
}

.proagri-sheet-status-waiting_for_materials {
  background: rgba(245, 166, 35, 0.15);
  color: #f5a623;
}

.proagri-sheet-status-artwork_design {
  background: rgba(52, 152, 219, 0.15);
  color: #3498db;
}

.proagri-sheet-status-create_captions {
  background: rgba(155, 89, 182, 0.15);
  color: #9b59b6;
}

.proagri-sheet-status-create_links {
  background: rgba(52, 152, 219, 0.15);
  color: #3498db;
}

.proagri-sheet-status-create_stat_sheet {
  background: rgba(22, 160, 133, 0.15);
  color: #16a085;
}

.proagri-sheet-status-scheduled {
  background: rgba(46, 204, 113, 0.15);
  color: #2ecc71;
}

/* Agri4All product-uploads pipeline statuses */
.proagri-sheet-status-agri4all-links {
  background: rgba(22, 163, 74, 0.15);
  color: #16a34a;
}

.proagri-sheet-status-posted {
  background: rgba(39, 174, 96, 0.15);
  color: #27ae60;
}

/* Agri4All pipeline statuses */
.proagri-sheet-status-agri4all-links {
  background: rgba(22, 163, 74, 0.15);
  color: #16a34a;
}

/* Editorial/Online Articles statuses */
.proagri-sheet-status-editing {
  background: rgba(230, 126, 34, 0.15);
  color: #e67e22;
}

.proagri-sheet-status-editorial_changes {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
}

.proagri-sheet-status-translating {
  background: rgba(155, 89, 182, 0.15);
  color: #9b59b6;
}

.proagri-sheet-status-ready_to_upload {
  background: rgba(22, 160, 133, 0.15);
  color: #16a085;
}

/* Video pipeline statuses */
.proagri-sheet-status-send_request_form {
  background: rgba(142, 68, 173, 0.15);
  color: #8e44ad;
}

.proagri-sheet-status-request_form_sent {
  background: rgba(155, 89, 182, 0.15);
  color: #9b59b6;
}

.proagri-sheet-status-request_form_received {
  background: rgba(52, 152, 219, 0.15);
  color: #3498db;
}

.proagri-sheet-status-populating_video_dept {
  background: rgba(52, 152, 219, 0.15);
  color: #3498db;
}

.proagri-sheet-status-brief_received {
  background: rgba(41, 128, 185, 0.15);
  color: #2980b9;
}

.proagri-sheet-status-assign_and_schedule {
  background: rgba(245, 166, 35, 0.15);
  color: #f5a623;
}

.proagri-sheet-status-production {
  background: rgba(217, 119, 6, 0.15);
  color: #b45309;
}

.proagri-sheet-status-review {
  background: rgba(230, 126, 34, 0.15);
  color: #e67e22;
}

.proagri-sheet-status-changes_requested {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
}

.proagri-sheet-status-final_delivery {
  background: rgba(39, 174, 96, 0.15);
  color: #27ae60;
}

/* === Multi-Select Tags (in cell) === */

.proagri-sheet-tags {
  display: flex;
  gap: 4px;
  overflow: hidden;
  flex-wrap: nowrap;
}

.proagri-sheet-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
  background: rgba(128, 128, 128, 0.12);
  color: var(--text-secondary);
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proagri-sheet-tag-overflow {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(128, 128, 128, 0.1);
  color: var(--text-muted);
  white-space: nowrap;
}

/* === Person Avatars (in cell) === */

.proagri-sheet-persons {
  display: flex;
  align-items: center;
}

.proagri-sheet-person-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-secondary, #fff);
  object-fit: cover;
  margin-left: -6px;
  background: rgba(128, 128, 128, 0.15);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: box-shadow 0.15s;
}

@media (hover: hover) {
  .proagri-sheet-person-avatar:hover {
    box-shadow: 0 0 0 2px var(--color-primary, #4f46e5);
  }
}

.proagri-sheet-person-avatar:first-child {
  margin-left: 0;
}

.proagri-sheet-person-avatar-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-secondary, #fff);
  margin-left: -6px;
  background: rgba(128, 128, 128, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: box-shadow 0.15s;
}

.proagri-sheet-person-avatar-placeholder:hover {
  box-shadow: 0 0 0 2px var(--color-primary, #4f46e5);
}

.proagri-sheet-person-avatar-placeholder:first-child {
  margin-left: 0;
}

.proagri-sheet-person-avatar-placeholder svg {
  width: 14px;
  height: 14px;
  fill: rgba(128, 128, 128, 0.5);
}

.proagri-sheet-person-avatar-empty {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px dashed rgba(128, 128, 128, 0.35);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}

.proagri-sheet-person-avatar-empty:hover {
  border-color: var(--color-primary, #4f46e5);
  background: rgba(79, 70, 229, 0.06);
}

.proagri-sheet-person-avatar-empty svg {
  width: 16px;
  height: 16px;
  fill: rgba(128, 128, 128, 0.4);
  transition: fill 0.15s;
}

.proagri-sheet-person-avatar-empty:hover svg {
  fill: var(--color-primary, #4f46e5);
}

.proagri-sheet-person-overflow {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-secondary, #fff);
  margin-left: -6px;
  background: rgba(128, 128, 128, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Person tooltip */
.proagri-sheet-person-tooltip {
  position: fixed;
  z-index: 600;
  background: var(--color-secondary, #fff);
  border: 1px solid rgba(128, 128, 128, 0.15);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 10px 14px;
  pointer-events: none;
  animation: editorFadeIn 0.15s ease;
  white-space: nowrap;
}

.proagri-sheet-person-tooltip-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.proagri-sheet-person-tooltip-role {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* === Checkbox (in cell) === */

.proagri-sheet-checkbox {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.proagri-sheet-checkbox.checked {
  background: var(--color-accent-light);
  border-color: var(--color-accent-light);
}

.proagri-sheet-checkbox.checked svg {
  display: block;
}

.proagri-sheet-checkbox svg {
  display: none;
  width: 12px;
  height: 12px;
  fill: #fff;
}

/* === Number Cell === */

.proagri-sheet-cell-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* === Editor Popover Base === */

.proagri-sheet-editor {
  position: fixed;
  z-index: 500;
  background: var(--color-secondary, #fff);
  border: 1px solid rgba(128, 128, 128, 0.15);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  animation: editorFadeIn 0.15s ease;
  overflow: hidden;
}

@keyframes editorFadeIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* === Text Inline Editor === */

.proagri-sheet-text-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-primary);
  padding: 0;
}

/* === Select Dropdown (single select / status) === */

.proagri-sheet-select-dropdown {
  min-width: 180px;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
}

.proagri-sheet-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-primary);
  transition: background 0.12s ease;
}

.proagri-sheet-select-option:hover {
  background: rgba(128, 128, 128, 0.08);
}

.proagri-sheet-select-option.selected {
  background: rgba(128, 128, 128, 0.1);
}

.proagri-sheet-select-check {
  width: 16px;
  text-align: center;
  color: var(--color-accent-light);
  font-size: 14px;
  flex-shrink: 0;
}

/* === Multi-Select Dropdown === */

.proagri-sheet-multiselect-dropdown {
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}

.proagri-sheet-multiselect-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-primary);
  transition: background 0.12s ease;
}

.proagri-sheet-multiselect-option:hover {
  background: rgba(128, 128, 128, 0.08);
}

.proagri-sheet-multiselect-check {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.proagri-sheet-multiselect-check.checked {
  background: var(--color-accent-light);
  border-color: var(--color-accent-light);
}

.proagri-sheet-multiselect-check svg {
  width: 10px;
  height: 10px;
  fill: #fff;
  display: none;
}

.proagri-sheet-multiselect-check.checked svg {
  display: block;
}

/* === Date Picker === */

.proagri-sheet-datepicker {
  width: 260px;
  padding: 12px;
}

.proagri-sheet-datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.proagri-sheet-datepicker-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.proagri-sheet-datepicker-nav {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 14px;
  transition: background 0.12s;
}

.proagri-sheet-datepicker-nav:hover {
  background: rgba(128, 128, 128, 0.1);
}

.proagri-sheet-datepicker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-bottom: 4px;
}

.proagri-sheet-datepicker-weekday {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 4px 0;
}

.proagri-sheet-datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.proagri-sheet-datepicker-day {
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-primary);
  transition: background 0.12s;
  border: none;
  background: none;
  font-family: inherit;
}

.proagri-sheet-datepicker-day:hover {
  background: rgba(128, 128, 128, 0.1);
}

.proagri-sheet-datepicker-day.today {
  font-weight: 700;
  color: var(--color-accent-light);
}

.proagri-sheet-datepicker-day.selected {
  background: var(--color-accent-light);
  color: #fff;
  font-weight: 600;
}

.proagri-sheet-datepicker-day.other-month {
  color: var(--text-muted);
  opacity: 0.4;
}

.proagri-sheet-datepicker-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(128, 128, 128, 0.1);
}

.proagri-sheet-datepicker-btn {
  flex: 1;
  padding: 5px 0;
  font-size: 11px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
  background: rgba(128, 128, 128, 0.08);
  color: var(--text-secondary);
  font-family: inherit;
}

.proagri-sheet-datepicker-btn:hover {
  background: rgba(128, 128, 128, 0.15);
}

.proagri-sheet-datepicker-btn-primary {
  background: var(--color-accent-light);
  color: #fff;
}

.proagri-sheet-datepicker-btn-primary:hover {
  opacity: 0.9;
}

/* === Person Picker Dropdown === */

.proagri-sheet-person-picker {
  width: 280px;
  max-height: 340px;
  display: flex;
  flex-direction: column;
}

.proagri-sheet-person-picker-search {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.proagri-sheet-person-picker-search input {
  width: 100%;
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  background: rgba(128, 128, 128, 0.06);
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}

.proagri-sheet-person-picker-search input:focus {
  border-color: var(--color-accent-light);
}

.proagri-sheet-person-picker-search input::placeholder {
  color: var(--text-muted);
}

.proagri-sheet-person-picker-list {
  overflow-y: auto;
  padding: 6px;
  flex: 1;
}

.proagri-sheet-person-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}

.proagri-sheet-person-picker-item:hover {
  background: rgba(128, 128, 128, 0.08);
}

.proagri-sheet-person-picker-item.selected {
  background: rgba(128, 128, 128, 0.1);
}

.proagri-sheet-person-picker-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(128, 128, 128, 0.15);
}

.proagri-sheet-person-picker-avatar-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(128, 128, 128, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.proagri-sheet-person-picker-avatar-placeholder svg {
  width: 16px;
  height: 16px;
  fill: rgba(128, 128, 128, 0.5);
}

.proagri-sheet-person-picker-info {
  flex: 1;
  min-width: 0;
}

.proagri-sheet-person-picker-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proagri-sheet-person-picker-role {
  font-size: 10px;
  color: var(--text-muted);
}

.proagri-sheet-person-picker-check {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(128, 128, 128, 0.3);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}

.proagri-sheet-person-picker-check.checked {
  background: var(--color-accent-light);
  border-color: var(--color-accent-light);
}

.proagri-sheet-person-picker-check svg {
  width: 10px;
  height: 10px;
  fill: #fff;
  display: none;
}

.proagri-sheet-person-picker-check.checked svg {
  display: block;
}

.proagri-sheet-person-picker-unassign {
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
  opacity: 0.7;
}

.proagri-sheet-person-picker-unassign:hover {
  opacity: 1;
}

.proagri-sheet-person-picker-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

/* === Loading & Empty States === */

.proagri-sheet-empty,
.proagri-sheet-loading {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.proagri-sheet-loading::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(128, 128, 128, 0.2);
  border-top-color: var(--text-muted);
  border-radius: 50%;
  animation: sheetSpin 0.6s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}

@keyframes sheetSpin {
  to { transform: rotate(360deg); }
}

/* === Cell Flash Feedback === */

.proagri-sheet-cell.cell-saved {
  animation: cellSaved 0.6s ease;
}

@keyframes cellSaved {
  0% { background: rgba(39, 174, 96, 0.15); }
  100% { background: transparent; }
}

.proagri-sheet-cell.cell-error {
  animation: cellError 0.6s ease;
}

@keyframes cellError {
  0% { background: rgba(231, 76, 60, 0.15); }
  100% { background: transparent; }
}

/* === Row Hover Actions === */

.proagri-sheet-actions-col {
  overflow: visible;
  text-align: right;
  padding: 0 8px !important;
}

.proagri-sheet-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  /* Touch devices: always show. Overridden below for hover-capable devices. */
  opacity: 1;
  transition: opacity 0.15s ease;
}

@media (hover: hover) {
  .proagri-sheet-row-actions {
    opacity: 0;
  }
  .proagri-sheet-row:hover .proagri-sheet-row-actions {
    opacity: 1;
  }
}

.proagri-sheet-row-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted, #999);
  cursor: pointer;
  padding: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}

.proagri-sheet-row-action-btn:hover {
  background: rgba(128, 128, 128, 0.15);
  color: var(--text-primary, #333);
}

.proagri-sheet-row-action-btn.action-delete:hover {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
}

.proagri-sheet-row-action-btn.action-advance:hover {
  background: rgba(52, 152, 219, 0.15);
  color: #3498db;
}

.proagri-sheet-row-action-btn.action-skip:hover {
  background: rgba(245, 166, 35, 0.15);
  color: #f5a623;
}

.proagri-sheet-row-action-btn.action-approve:hover {
  background: rgba(39, 174, 96, 0.15);
  color: #27ae60;
}

.proagri-sheet-row-action-btn.action-decline:hover {
  background: rgba(231, 76, 60, 0.15);
  color: #e74c3c;
}

.proagri-sheet-row-action-btn.action-view {
  color: #3b82f6;
}

.proagri-sheet-row-action-btn.action-view:hover {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

.proagri-sheet-row-action-btn.action-upload {
  color: #8b5cf6;
}

.proagri-sheet-row-action-btn.action-upload:hover {
  background: rgba(139, 92, 246, 0.15);
  color: #7c3aed;
}

.proagri-sheet-row-action-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ============================================================
   Responsive sheets — cards on phones, scrollable tables above
   ============================================================
   Phones (<=768px): each row reflows into a self-contained card —
   the header hides and every cell becomes a labelled line whose
   value WRAPS (never clipped). The client name becomes the card
   title and an unassigned avatar is dropped. Label text comes from
   the cell's data-label attribute (set in proagri-sheet.js).
   Tablet/desktop (>=769px, admin sheets): columns keep a sane
   minimum and wrap; the sheet scrolls horizontally if they don't
   fit — so names / statuses / buttons / fields are NEVER cut off.
   Plus touch-target minimums (D4) and dropdown clamping (D5).
   ============================================================ */

@media (max-width: 768px) {
  /* Each row → a self-contained card; each cell → a labelled line whose
     value wraps and is never clipped. */
  .proagri-sheet-wrap { overflow-x: visible; }
  .proagri-sheet-header { display: none; }

  .proagri-sheet-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: auto;
    min-width: 0;
    margin: 0 0 12px;
    padding: 4px 16px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    background: var(--card-bg, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  .proagri-sheet-row:hover { background: var(--card-bg, #fff); }

  /* Each cell is a label/value line. The line itself wraps (flex-wrap), so a
     value that can't share the row with its label drops to the next line
     instead of being clipped at the card's right edge. Value still wraps
     internally too — nothing is ever cut off. */
  .proagri-sheet-cell,
  .proagri-sheet-cell.cell-sm,
  .proagri-sheet-cell.cell-md,
  .proagri-sheet-cell.cell-lg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 14px;
    width: 100%;
    min-width: 0;
    flex: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    padding: 9px 0;
    border-top: 1px solid rgba(128, 128, 128, 0.10);
  }

  /* CRITICAL: the fixed-width columns are sized for the desktop horizontal table
     (e.g. actions-col flex:0 0 144px). In the VERTICAL card flex that basis
     becomes a fixed HEIGHT — a 144px-tall dead block. Force every special column
     to auto height / full width so each cell hugs its content. */
  .proagri-sheet-cell.proagri-sheet-leading-col,
  .proagri-sheet-cell.proagri-sheet-actions-col,
  .proagri-sheet-cell.radial-col,
  .proagri-sheet-cell.cell-person {
    flex: none !important;  /* beats the inline cell.style.flex set by the renderer */
    width: 100%;
  }

  /* Label (uppercase, muted) hugs the left. */
  .proagri-sheet-cell[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    flex: 0 0 auto;
    margin-right: auto;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    white-space: nowrap;
  }

  /* Value content hugs the right and wraps rather than clipping. */
  .proagri-sheet-cell > * { text-align: right; min-width: 0; }
  .proagri-sheet-cell .proagri-sheet-status { white-space: normal; }
  .proagri-sheet-cell .proagri-sheet-tags,
  .proagri-sheet-cell .proagri-sheet-persons {
    flex-wrap: wrap;
    justify-content: flex-end;
    overflow: visible;
  }
  .proagri-sheet-cell .proagri-sheet-tag {
    white-space: normal;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }

  /* Upload / link button groups: the value is the inline-flex <div> from the
     upload renderer (View/Download link + Upload/Replace button) or a bare
     <a class="proagri-sheet-link">. In a card it must WRAP its buttons and,
     when the label leaves too little room to fit even one button, drop to its
     OWN line right-aligned — never clip at the card's right edge.
       • The cell is flex-wrap:wrap, so the value drops as a unit once the
         remaining space is smaller than its content (kept at natural min-width,
         NOT 0, so flexbox wraps the line instead of shrinking+clipping it).
       • justify-content:flex-end keeps buttons tidy on the right whether they
         sit beside the label or on the dropped line. */
  .proagri-sheet-cell > div:has(> .proagri-sheet-upload-btn),
  .proagri-sheet-cell > div:has(> .proagri-sheet-link) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;            /* allow it to share the label's line when it fits */
    margin-left: auto;       /* hug the right edge */
  }
  /* The interactive bits themselves never shrink below their text — that's what
     forces a clean wrap to the next line rather than a clipped button. */
  .proagri-sheet-cell .proagri-sheet-upload-btn,
  .proagri-sheet-cell .proagri-sheet-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  /* A standalone link value (link renderer, no wrapper div) also hugs right and
     can drop to its own line. */
  .proagri-sheet-cell > a.proagri-sheet-link { margin-left: auto; }

  /* Client name → the card title: bold, full-width, no label, pinned to the
     very top of the card (order:-1) even though the assignee column precedes
     it in the DOM. This guarantees every card opens with its bold client title,
     not a labelless avatar. */
  .proagri-sheet-cell.cell-name {
    order: -1;
    justify-content: flex-start;
    border-top: none;
    padding: 8px 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
  }
  /* Specificity must beat the generic [data-label] label rule above. */
  .proagri-sheet-cell.cell-name[data-label]:not([data-label=""])::before { content: none; }
  .proagri-sheet-cell.cell-name > * { text-align: left; }

  /* Drop the orphaned, unassigned assignee avatar so cards don't open with an
     empty circle. (An assigned avatar still shows on its own labelled row.) */
  .proagri-sheet-cell:has(.proagri-sheet-person-avatar-empty) { display: none; }

  /* The assignee column carries an empty label (label:'') so on desktop the
     avatar sits in a header-less column. In a card a labelless avatar reads as
     an orphan, so when someone IS assigned we synthesize an "Assigned" label
     and render it as a normal labelled row (avatar right). Unassigned rows are
     already hidden by the :has(...-empty) rule above, so this only fires for a
     real photo/placeholder avatar. Person columns that already have a label
     (e.g. "Reviewer") are untouched. */
  .proagri-sheet-cell.cell-person[data-label=""]:has(.proagri-sheet-person-avatar)::before,
  .proagri-sheet-cell.cell-person[data-label=""]:has(.proagri-sheet-person-avatar-placeholder)::before {
    content: "Assigned";
    flex: 0 0 auto;
    margin-right: auto;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    white-space: nowrap;
  }
  /* Avatar value hugs the right on that row and never overflows. */
  .proagri-sheet-cell.cell-person .proagri-sheet-persons {
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* Actions → a tidy wrapped footer row at the bottom of the card. The leading
     action column (e.g. the "view" eye) precedes everything in the DOM, so it
     would otherwise float at the very top as a labelless box; order:99 drops it
     into the footer alongside the trailing actions / radial trigger. */
  .proagri-sheet-cell.proagri-sheet-leading-col,
  .proagri-sheet-cell.proagri-sheet-actions-col,
  .proagri-sheet-cell.radial-col { order: 99; }
  .proagri-sheet-cell.proagri-sheet-leading-col::before,
  .proagri-sheet-cell.proagri-sheet-actions-col::before,
  .proagri-sheet-cell.radial-col::before { content: none; }
  .proagri-sheet-cell.proagri-sheet-leading-col,
  .proagri-sheet-cell.proagri-sheet-actions-col,
  .proagri-sheet-cell.radial-col {
    justify-content: flex-start;
    padding-top: 10px;
    border-top: 1px solid rgba(128, 128, 128, 0.10);
  }
  /* Collapse the divider/padding on any footer cell that already has an earlier
     footer cell among its siblings, so the footer reads as ONE strip with a
     single top rule (on whichever footer cell comes first) rather than two or
     three stacked, separately-bordered rows. The ~ combinator (general sibling)
     is required because data columns sit between the leading-col and the
     trailing action cells in the DOM, so + (adjacent) would not match. */
  .proagri-sheet-cell.proagri-sheet-leading-col ~ .proagri-sheet-cell.proagri-sheet-actions-col,
  .proagri-sheet-cell.proagri-sheet-leading-col ~ .proagri-sheet-cell.radial-col,
  .proagri-sheet-cell.proagri-sheet-actions-col ~ .proagri-sheet-cell.radial-col {
    border-top: none;
    padding-top: 2px;
  }
  .proagri-sheet-leading-col,
  .proagri-sheet-actions-col,
  .proagri-sheet-row-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
  /* In a card the actions are always shown — the desktop hover-reveal
     (@media (hover:hover) sets opacity:0) makes no sense on a tap layout and
     would leave a blank footer. Force them visible. */
  .proagri-sheet-row-actions { opacity: 1; }

  /* D4 — Touch-target minimums for sheet-level interactive controls. */
  .proagri-sheet-row-action-btn {
    width: 38px;
    height: 38px;
    padding: 7px;
    background: rgba(128, 128, 128, 0.08);
  }
  .proagri-sheet-checkbox {
    width: 20px;
    height: 20px;
  }
}

/* Admin sheets, tablet/desktop (>=769px): NEVER clip a value. Flexible columns
   keep a comfortable minimum and wrap their text; the sheet scrolls
   horizontally when the columns together exceed the panel width. */
@media (min-width: 769px) {
  /* The wrap NO LONGER owns horizontal scroll. The bordered .dept-sheet-container
     (styles.css) is now the single both-axis scroller for admin sheets, so the wide
     table scrolls INSIDE the full-width white frame instead of overflowing past it
     (the old cutoff: a fixed-width wrap scrolled while the frame/card/grey bg stayed
     pinned at viewport width). The wrap sizes to its content (max-content) so a wide
     table actually extends and gives the container something to scroll. Covers the
     Declined tab too (.dept-dashboard-main), which previously had no h-scroll at all. */
  .proposal-grid .proagri-sheet-wrap,
  .dept-dashboard-main .proagri-sheet-wrap {
    overflow-x: visible;
    min-width: max-content;
  }
  .proposal-grid .proagri-sheet-header-cell,
  .proposal-grid .proagri-sheet-cell {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  /* Generic columns keep a comfortable text minimum and wrap. Person columns
     are excluded here (:not(.cell-person)) — a 28px avatar doesn't need 130px;
     reserving that much pushed wide tables (8-col Booking Form) into scroll far
     too early and left a big empty gap before the first text column. */
  .proposal-grid .proagri-sheet-header-cell:not(.cell-sm):not(.cell-md):not(.cell-lg):not(.cell-person):not(.radial-col):not(.proagri-sheet-actions-col):not(.proagri-sheet-leading-col),
  .proposal-grid .proagri-sheet-cell:not(.cell-sm):not(.cell-md):not(.cell-lg):not(.cell-person):not(.radial-col):not(.proagri-sheet-actions-col):not(.proagri-sheet-leading-col) {
    min-width: 130px;
  }
  /* Avatar / person column: snug to the avatar, header + rows stay aligned. */
  .proposal-grid .proagri-sheet-header-cell.cell-person,
  .proposal-grid .proagri-sheet-cell.cell-person {
    flex: 0 0 48px;
    min-width: 48px;
  }
}

/* D5 — Clamp cell dropdowns / pickers to viewport on narrow screens. */
@media (max-width: 480px) {
  .proagri-sheet-select-dropdown,
  .proagri-sheet-person-dropdown,
  .proagri-sheet-date-picker {
    max-width: calc(100vw - 16px);
    min-width: 0;
    left: 8px !important;
    right: 8px !important;
  }
}

/* ── #134 dark mode overrides ─────────────────────────────── */
/* The table chrome in this file is unusually theme-safe already: the row
   borders, hovers, tag pills and avatar wells are all rgba(128,128,128,x),
   which works over either surface, and the text/surface colours come from
   tokens that theme.css flips. What is NOT safe falls into four buckets:
     1. the two var() fallbacks whose custom property is never declared,
     2. --color-primary used as a focus RING (it is the page background in
        dark, so the ring becomes invisible),
     3. white foregrounds sitting on brand orange,
     4. the ~80 status pills, whose mid-tone hues drop under 4.5:1 on slate.
   Light mode is untouched — every rule below is prefixed and additive. */

/* 1. Undeclared token fallbacks -------------------------------------------
   --color-text-secondary is declared nowhere in the app, so this button always
   resolves to the literal #64748b, which is ~2.9:1 on a dark row. Point it at
   the real token instead. */
html[data-theme="dark"] .proagri-sheet-upload-btn {
  border-color: rgba(148, 163, 184, 0.28);
  color: var(--text-secondary);
}
/* On its orange hover fill, white drops to ~2:1. Dark ink matches the treatment
   theme.css already uses for accent-backed elements (.dashboard-tab.active). */
html[data-theme="dark"] .proagri-sheet-upload-btn:hover {
  color: #0b1220;
}

/* 2. Focus rings built on --color-primary ---------------------------------
   In light mode --color-primary is #dce1e8 (a pale ring). In dark it becomes
   #0f172a — the page background — so the avatar hover ring would be a
   near-invisible black halo. Swap to the shared accent blue. */
html[data-theme="dark"] .proagri-sheet-person-avatar:hover,
html[data-theme="dark"] .proagri-sheet-person-avatar-placeholder:hover {
  box-shadow: 0 0 0 2px #60a5fa;
}
html[data-theme="dark"] .proagri-sheet-person-avatar-empty:hover {
  border-color: #60a5fa;
  background: rgba(96, 165, 250, 0.12);
}
html[data-theme="dark"] .proagri-sheet-person-avatar-empty:hover svg {
  fill: #60a5fa;
}

/* 3. Checkmarks and selected days on brand orange -------------------------- */
html[data-theme="dark"] .proagri-sheet-checkbox svg,
html[data-theme="dark"] .proagri-sheet-multiselect-check svg,
html[data-theme="dark"] .proagri-sheet-person-picker-check svg {
  fill: #0b1220;
}
html[data-theme="dark"] .proagri-sheet-datepicker-day.selected,
html[data-theme="dark"] .proagri-sheet-datepicker-btn-primary {
  color: #0b1220;
}

/* Floating surfaces: a 12-15% black shadow does nothing over a dark page, so
   the editor popovers and tooltips lose their separation from the sheet. */
html[data-theme="dark"] .proagri-sheet-editor {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .proagri-sheet-person-tooltip {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* 4. Status pills ---------------------------------------------------------
   Every pill is a 15% tint of its hue behind a mid-tone foreground picked for
   a white row. Each group below keeps its hue (so the pipeline still reads the
   same at a glance) and lifts the foreground to the 300-level of that hue,
   with slightly more tint behind it. Note the admin sheets add
   `border: 1px solid currentColor` to these pills — that follows the new
   foreground automatically, so the ring stays in step.

   Brand orange (#f5a623) pills are deliberately absent: theme.css measures
   that hue at 8.7:1 on the dark page, so pending / lead / medium /
   request_client_materials / upload_materials / waiting_for_materials /
   assign_and_schedule are already correct and are left untouched. */

/* blue */
html[data-theme="dark"] .proagri-sheet-status-in_progress,
html[data-theme="dark"] .proagri-sheet-status-design,
html[data-theme="dark"] .proagri-sheet-status-design_proposal,
html[data-theme="dark"] .proagri-sheet-status-onboarding,
html[data-theme="dark"] .proagri-sheet-status-prototype,
html[data-theme="dark"] .proagri-sheet-status-focus_points_received,
html[data-theme="dark"] .proagri-sheet-status-artwork_design,
html[data-theme="dark"] .proagri-sheet-status-create_links,
html[data-theme="dark"] .proagri-sheet-status-request_form_received,
html[data-theme="dark"] .proagri-sheet-status-populating_video_dept {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}

/* deep blue — the "in review / in build" shade, kept one step cooler than the
   plain blue above so the two remain distinguishable side by side */
html[data-theme="dark"] .proagri-sheet-status-design_review,
html[data-theme="dark"] .proagri-sheet-status-brief_received,
html[data-theme="dark"] .proagri-sheet-status-development {
  background: rgba(41, 128, 185, 0.22);
  color: #7dd3fc;
}

/* green */
html[data-theme="dark"] .proagri-sheet-status-completed,
html[data-theme="dark"] .proagri-sheet-status-done,
html[data-theme="dark"] .proagri-sheet-status-active,
html[data-theme="dark"] .proagri-sheet-status-low,
html[data-theme="dark"] .proagri-sheet-status-proposal_ready,
html[data-theme="dark"] .proagri-sheet-status-onboarded,
html[data-theme="dark"] .proagri-sheet-status-site_developed,
html[data-theme="dark"] .proagri-sheet-status-complete,
html[data-theme="dark"] .proagri-sheet-status-posted,
html[data-theme="dark"] .proagri-sheet-status-final_delivery,
html[data-theme="dark"] .proagri-sheet-status-agri4all-links {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}

/* mint green — the approval family */
html[data-theme="dark"] .proagri-sheet-status-client_approved,
html[data-theme="dark"] .proagri-sheet-status-approved,
html[data-theme="dark"] .proagri-sheet-status-scheduled {
  background: rgba(46, 204, 113, 0.18);
  color: #6ee7b7;
}

/* teal — the "materials ready / ready to ship" family */
html[data-theme="dark"] .proagri-sheet-status-booking_form_ready,
html[data-theme="dark"] .proagri-sheet-status-materials_received,
html[data-theme="dark"] .proagri-sheet-status-hosting_seo,
html[data-theme="dark"] .proagri-sheet-status-ready_for_scheduling,
html[data-theme="dark"] .proagri-sheet-status-create_stat_sheet,
html[data-theme="dark"] .proagri-sheet-status-ready_to_upload {
  background: rgba(22, 160, 133, 0.20);
  color: #5eead4;
}

/* cyan */
html[data-theme="dark"] .proagri-sheet-status-booking_form_sent {
  background: rgba(0, 172, 193, 0.20);
  color: #67e8f9;
}

/* amber — "sent, waiting on someone" */
html[data-theme="dark"] .proagri-sheet-status-sent_to_client,
html[data-theme="dark"] .proagri-sheet-status-materials_requested,
html[data-theme="dark"] .proagri-sheet-status-ready_for_approval {
  background: rgba(243, 156, 18, 0.18);
  color: #fcd34d;
}

/* deep amber */
html[data-theme="dark"] .proagri-sheet-status-production {
  background: rgba(217, 119, 6, 0.22);
  color: #fbbf24;
}

/* burnt orange — the "changes / editing" family */
html[data-theme="dark"] .proagri-sheet-status-client_changes,
html[data-theme="dark"] .proagri-sheet-status-sent_for_approval,
html[data-theme="dark"] .proagri-sheet-status-editorial,
html[data-theme="dark"] .proagri-sheet-status-editing,
html[data-theme="dark"] .proagri-sheet-status-review,
html[data-theme="dark"] .proagri-sheet-status-editorial_review {
  background: rgba(230, 126, 34, 0.18);
  color: #fdba74;
}

/* red — blocked / rejected / overdue */
html[data-theme="dark"] .proagri-sheet-status-overdue,
html[data-theme="dark"] .proagri-sheet-status-high,
html[data-theme="dark"] .proagri-sheet-status-declined,
html[data-theme="dark"] .proagri-sheet-status-design_changes,
html[data-theme="dark"] .proagri-sheet-status-changes_requested,
html[data-theme="dark"] .proagri-sheet-status-editorial_changes {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}

/* deep red — urgent stays hotter than the plain red */
html[data-theme="dark"] .proagri-sheet-status-urgent {
  background: rgba(192, 57, 43, 0.26);
  color: #f87171;
}

/* purple */
html[data-theme="dark"] .proagri-sheet-status-outline_proposal,
html[data-theme="dark"] .proagri-sheet-status-sitemap,
html[data-theme="dark"] .proagri-sheet-status-focus_points_requested,
html[data-theme="dark"] .proagri-sheet-status-create_captions,
html[data-theme="dark"] .proagri-sheet-status-translating,
html[data-theme="dark"] .proagri-sheet-status-request_form_sent {
  background: rgba(155, 89, 182, 0.20);
  color: #d8b4fe;
}

/* deep purple — the kickoff / "request it" family */
html[data-theme="dark"] .proagri-sheet-status-wireframe,
html[data-theme="dark"] .proagri-sheet-status-request_focus_points,
html[data-theme="dark"] .proagri-sheet-status-request_materials,
html[data-theme="dark"] .proagri-sheet-status-send_request_form {
  background: rgba(142, 68, 173, 0.24);
  color: #c4b5fd;
}

/* grey — dormant states */
html[data-theme="dark"] .proagri-sheet-status-inactive,
html[data-theme="dark"] .proagri-sheet-status-draft {
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
}

/* Row action buttons carry the same mid-tone problem as the pills. */
html[data-theme="dark"] .proagri-sheet-row-action-btn.action-delete:hover,
html[data-theme="dark"] .proagri-sheet-row-action-btn.action-decline:hover {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}
html[data-theme="dark"] .proagri-sheet-row-action-btn.action-advance:hover {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}
html[data-theme="dark"] .proagri-sheet-row-action-btn.action-approve:hover {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}
html[data-theme="dark"] .proagri-sheet-row-action-btn.action-view {
  color: #60a5fa;
}
html[data-theme="dark"] .proagri-sheet-row-action-btn.action-view:hover {
  background: rgba(96, 165, 250, 0.18);
  color: #93c5fd;
}
html[data-theme="dark"] .proagri-sheet-row-action-btn.action-upload {
  color: #a78bfa;
}
html[data-theme="dark"] .proagri-sheet-row-action-btn.action-upload:hover {
  background: rgba(167, 139, 250, 0.18);
  color: #c4b5fd;
}

/* Mobile card layout: the card surface and border already come from tokens, but
   a 5% black shadow is invisible over a dark page, so stacked cards lose the
   separation that tells them apart. */
@media (max-width: 768px) {
  html[data-theme="dark"] .proagri-sheet-row {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  }
}