/* Shared business-row reminders, jump targets and existing row selections.
   Keep layouts, semantic status colors and keyboard focus indicators intact. */
body {
  --row-highlight-bg: #f7f9fc;
  --row-highlight-rail: #4673b1;
}

body :is(.nav-alert-highlight, .dashboard-highlight-row, .dashboard-highlight-card,
  .ca-highlight, .ai-highlight, .material-section-focus, .support-venue-selected,
  .receivable-main-row.is-expanded, .task-card.expanded) {
  animation: none !important;
  box-shadow: none !important;
}

body :is(tr.nav-alert-highlight, tr.dashboard-highlight-row, tr.ca-highlight,
  tr.ai-highlight, tr.support-venue-selected, tr.receivable-main-row.is-expanded),
body :is(tr.nav-alert-highlight, tr.dashboard-highlight-row, tr.ca-highlight,
  tr.ai-highlight, tr.support-venue-selected, tr.receivable-main-row.is-expanded) > td {
  background: var(--row-highlight-bg) !important;
  animation: none !important;
  box-shadow: none !important;
}

body :is(tr.nav-alert-highlight, tr.dashboard-highlight-row, tr.ca-highlight,
  tr.ai-highlight, tr.support-venue-selected, tr.receivable-main-row.is-expanded) > td:first-child {
  position: relative;
}

/* Desktop cells already use ::before for the approved reminder rail. */
@media (min-width: 769px) {
  body :is(tr.nav-alert-highlight, tr.dashboard-highlight-row, tr.ca-highlight,
    tr.ai-highlight, tr.support-venue-selected, tr.receivable-main-row.is-expanded) > td:first-child::before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 3px;
    background: var(--row-highlight-rail);
    pointer-events: none;
  }
}

/* Current task headers use task-workspace-row; older/mobile headers use toggle. */
body .task-card:is(.nav-alert-highlight, .dashboard-highlight-card, .expanded) {
  background: #fff !important;
}
body .task-card:is(.nav-alert-highlight, .dashboard-highlight-card, .expanded):not(.needs-nudge) {
  border-color: #dbe4ec !important;
}
body .task-card:is(.nav-alert-highlight, .dashboard-highlight-card, .expanded)
  > :is(.task-workspace-row, .task-card-toggle) {
  position: relative;
  background: var(--row-highlight-bg) !important;
  animation: none !important;
  box-shadow: none !important;
}
body .task-card:is(.nav-alert-highlight, .dashboard-highlight-card, .expanded)
  > :is(.task-workspace-row, .task-card-toggle)::before {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: var(--row-highlight-rail);
  pointer-events: none;
}

/* Non-table reminders have their own containing box; never add layout padding. */
body .mobile-client-card:is(.nav-alert-highlight, .dashboard-highlight-row),
body .material-section-focus,
body #material-pending-section .client-detail-item.nav-alert-highlight {
  position: relative;
  background: var(--row-highlight-bg) !important;
  border-color: #dce6f0 !important;
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
}
body .mobile-client-card:is(.nav-alert-highlight, .dashboard-highlight-row)::before,
body .material-section-focus::before,
body #material-pending-section .client-detail-item.nav-alert-highlight::before {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 10px !important;
  bottom: auto !important;
  width: 3px;
  height: 32px;
  max-height: calc(100% - 20px);
  border-radius: 3px;
  background: var(--row-highlight-rail);
  pointer-events: none;
}

@media (max-width: 768px) {
  /* ::before belongs to field labels on phone tables. Use the unused ::after. */
  body :is(tr.nav-alert-highlight, tr.dashboard-highlight-row, tr.ca-highlight,
    tr.ai-highlight, tr.support-venue-selected, tr.receivable-main-row.is-expanded) > td:first-child::after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: var(--row-highlight-rail);
    pointer-events: none;
  }

  /* These existing phone layouts turn rows into cards. Some hide the first cell,
     so put one short rail on the row itself instead of a hidden/indented cell. */
  body :is(.mobile-system-shell .project-contract-board-table,
    .mobile-system-shell .quote-list-table,
    .mobile-system-shell .maintenance-project-table,
    .mobile-system-shell .maintenance-record-table-wrap > table,
    .mobile-system-shell .fund-list-panel .table-scroll > table,
    .fw-workspace:not([data-view="accounts"]) table, .ca-table, .reim-table)
    tr:is(.nav-alert-highlight, .dashboard-highlight-row, .ca-highlight,
      .ai-highlight, .support-venue-selected, .receivable-main-row.is-expanded) {
    position: relative;
    border-color: #dce6f0 !important;
  }
  body :is(.mobile-system-shell .project-contract-board-table,
    .mobile-system-shell .quote-list-table,
    .mobile-system-shell .maintenance-project-table,
    .mobile-system-shell .maintenance-record-table-wrap > table,
    .mobile-system-shell .fund-list-panel .table-scroll > table,
    .fw-workspace:not([data-view="accounts"]) table, .ca-table, .reim-table)
    tr:is(.nav-alert-highlight, .dashboard-highlight-row, .ca-highlight,
      .ai-highlight, .support-venue-selected, .receivable-main-row.is-expanded)::after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 12px;
    width: 3px;
    height: 32px;
    max-height: calc(100% - 24px);
    border-radius: 3px;
    background: var(--row-highlight-rail);
    pointer-events: none;
  }
  body :is(.mobile-system-shell .project-contract-board-table,
    .mobile-system-shell .quote-list-table,
    .mobile-system-shell .maintenance-project-table,
    .mobile-system-shell .maintenance-record-table-wrap > table,
    .mobile-system-shell .fund-list-panel .table-scroll > table,
    .fw-workspace:not([data-view="accounts"]) table, .ca-table, .reim-table)
    tr:is(.nav-alert-highlight, .dashboard-highlight-row, .ca-highlight,
      .ai-highlight, .support-venue-selected, .receivable-main-row.is-expanded) > td:first-child::after {
    content: none;
  }
}