/* ============================================================
   Home Dashboard — shared styles for SE and External variants
   ============================================================ */

.dash-page {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: #f7f7f7;
  min-height: 100vh;
  padding: clamp(1rem, calc(3 * var(--vwx)), 2.5rem);
  padding-top: 1rem;
}

/* --- Header bar --- */
.dash-header-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.dash-greeting {
  font-size: clamp(1.5rem, calc(4 * var(--vwx)), 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a;
  margin: 0 0 0.25rem;
}

.dash-subtitle {
  font-size: 0.875rem;
  color: #6b6b6b;
  margin: 0;
  /* R6: readable measure — never a viewport-wide line. */
  max-width: 65ch;
}

.dash-acct-mgr-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #c9c9c9;
  border-radius: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  color: #1a1a1a;
  flex-shrink: 0;
}

.dash-acct-mgr-chip strong {
  font-weight: 600;
}

.dash-acct-mgr-label {
  color: #6b6b6b;
  font-weight: 400;
}

/* --- KPI tile row --- */

/* Reuse .orders-kpi-tile, .orders-kpi-value, .orders-kpi-label.
   Add only dashboard-specific overrides: */

/* The dashboard KPI tiles have NO leading icon (unlike the orders page),
   so the shared .orders-kpi-tile's `flex-direction: row; align-items:
   center` lays the big value and the small label side-by-side on one line
   with mismatched baselines — that's the "total not aligned vertically"
   the AM sees. Stack them: value on top, label beneath, left-aligned and
   vertically centred as a block within the tile's fixed height. */

.dash-kpi-tile--coming-soon .orders-kpi-value {
  color: #9e9e9e;
}

.dash-coming-soon-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: #f2f2f2;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  padding: 2px 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #9e9e9e;
  margin-top: 2px;
}

/* --- Body layout (main + sidebar) ---
   Fluid, breakpoint-free: main hogs the leftover space (grow 999) while
   the sidebar holds its ~17rem basis; when the row can't fit both, the
   sidebar wraps below at full width. Replaces the old 900px media query. */
.dash-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start;
}

.dash-main-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* Sub-700 rail yield: basis raised 30rem -> 44rem so the 17rem sidebar
     wraps below once the row is narrower than ~61rem (~700 effective px
     at the fluid root) — main content wins first, still two-up at 853. */
  flex: 999 1 min(100%, 44rem);
  min-width: 0;
}

/* --- Section card --- */
.dash-section {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 0.75rem;
  padding: 1rem 1rem 0.875rem;
}

.dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.625rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.dash-section-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dash-section-icon {
  font-size: 1rem;
}

.dash-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
  border-radius: 999px;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #6b6b6b;
}

.dash-section-link {
  font-size: 0.8125rem;
  color: #1a1a1a;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.dash-section-link:hover {
  text-decoration: underline;
}

.dash-empty {
  font-size: 0.8125rem;
  color: #9e9e9e;
  padding: 0.5rem 0;
  /* R6: readable measure — empty-state copy caps at ~65ch instead of
     stretching the full section width. */
  max-width: 65ch;
}

/* --- Needs your action (SE) --- */
.dash-action-filters {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.dash-action-filter-btn {
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  background: #fff;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b6b6b;
  cursor: pointer;
}

.dash-action-filter-btn.active {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}

.dash-action-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 4rem;
  justify-content: center;
}

.dash-action-badge--urgent {
  background: #fde8e8;
  color: #c0392b;
  border: 1px solid #f5c6c6;
}

.dash-action-badge--delay {
  background: #fff3e0;
  color: #e67e22;
  border: 1px solid #ffe0b2;
}

.dash-action-badge--info {
  background: #e8f4fd;
  color: #2980b9;
  border: 1px solid #bee3f8;
}

.dash-action-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid #c9c9c9;
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
  cursor: pointer;
}

.dash-action-cta:hover {
  background: #f5f5f5;
}

/* --- Saved cart cards (horizontal scroll) --- */

/* --- Mini orders table --- */

.dash-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.dash-status-dot--pending {
  background: #f5c842;
}

.dash-status-dot--confirmed {
  background: #4a90e2;
}

.dash-status-dot--execution {
  background: #27ae60;
}

.dash-status-dot--cancelled {
  background: #e74c3c;
}

/* --- External: order status breakdown tiles --- */
.dash-order-status-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: 0.5rem;
}

.dash-order-status-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.875rem 1rem;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 0.625rem;
}

.dash-order-status-tile--attention {
  border-color: #fde8e8;
}

.dash-order-status-tile-label {
  font-size: 0.6875rem;
  color: #6b6b6b;
  font-weight: 500;
}

.dash-order-status-tile-label--attention {
  color: #c0392b;
}

.dash-order-status-tile-value {
  font-size: clamp(1.125rem, calc(3 * var(--vwx)), 1.75rem);
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.1;
}

.dash-order-status-tile-value--attention {
  color: #c0392b;
}

.dash-attention-icon {
  font-size: 0.75rem;
  margin-right: 2px;
}

/* --- External: order detail rows --- */
.dash-order-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dash-order-detail-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f5f5f5;
}

.dash-order-detail-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Rows are now real links to the order detail (same target as /orders rows). */
.dash-order-detail-item--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.dash-order-detail-item--link:hover {
  background: #fafafa;
}

.dash-order-detail-main {
  flex: 1;
  min-width: 0;
}

.dash-order-detail-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.dash-order-detail-po {
  font-size: 0.75rem;
  font-weight: 600;
  color: #9e9e9e;
}

.dash-order-detail-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 0.4375rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.dash-order-detail-status-badge--delay {
  background: #fde8e8;
  color: #c0392b;
  border: 1px solid #f5c6c6;
}

.dash-order-detail-status-badge--production {
  background: #e8f4fd;
  color: #2980b9;
  border: 1px solid #bee3f8;
}

.dash-order-detail-status-badge--shipped {
  background: #e8f7ef;
  color: #27ae60;
  border: 1px solid #c3e6cb;
}

/* Canonical "pending" status — amber (awaiting confirmation, needs eyes). */
.dash-order-detail-status-badge--pending {
  background: #fdf3e0;
  color: #b9770e;
  border: 1px solid #f6ddb3;
}

.dash-order-detail-desc {
  font-size: 0.8125rem;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-order-detail-right {
  text-align: right;
  flex-shrink: 0;
}

.dash-order-detail-delivery-label {
  font-size: 0.6875rem;
  color: #9e9e9e;
}

.dash-order-detail-delivery-date {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1a1a1a;
}

.dash-order-detail-delivery-date--pending {
  color: #e67e22;
}

/* Order total under the delivery date — same resolved value as /orders. */
.dash-order-detail-total {
  font-size: 0.75rem;
  font-weight: 600;
  color: #641e8c;
}

/* --- Two-column section grid --- */
.dash-two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
  align-items: start;
}

/* --- Quotes list (ext dashboard) --- */
.dash-quote-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid #f5f5f5;
}

.dash-quote-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dash-quote-ref {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a1a1a;
}

.dash-quote-name {
  font-size: 0.75rem;
  color: #6b6b6b;
}

.dash-quote-expiry {
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.dash-quote-expiry--urgent {
  color: #e67e22;
}

.dash-quote-expiry--ok {
  color: #9e9e9e;
}

/* --- Team members (ext dashboard) --- */
.dash-team-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dash-team-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid #f5f5f5;
}

.dash-team-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dash-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.dash-avatar--blue {
  background: #2980b9;
}

.dash-avatar--green {
  background: #27ae60;
}

.dash-avatar--purple {
  background: #641e8c;
}

.dash-avatar--teal {
  background: #009999;
}

.dash-team-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a1a1a;
}

.dash-team-role {
  font-size: 0.75rem;
  color: #9e9e9e;
}

/* --- Find a spare part (ext, disabled) --- */
.dash-spare-part-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dash-spare-part-desc {
  font-size: 0.8125rem;
  color: #6b6b6b;
}

.dash-spare-part-input-row {
  display: flex;
  gap: 0.5rem;
}

.dash-spare-part-input {
  flex: 1;
  padding: 0.625rem 0.875rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  color: #9e9e9e;
  background: #f7f7f7;
  cursor: not-allowed;
}

.dash-spare-part-btn {
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  border: none;
  background: #c9c9c9;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: not-allowed;
}

/* --- Coming soon wrapper --- */
.dash-coming-soon-wrap {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
}

.dash-coming-soon-content {
  filter: blur(0.2188rem);
  pointer-events: none;
  user-select: none;
}

.dash-coming-soon-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 0.5rem;
}

.dash-coming-soon-tag {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b6b6b;
  box-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.08);
}

/* --- Mock content (blurred placeholders) --- */
.dash-mock-chart {
  background: #1a2a4a;
  border-radius: 0.5rem;
  padding: 1.25rem;
  color: #fff;
}

.dash-mock-chart-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.5rem;
}

.dash-mock-chart-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.dash-mock-chart-sub {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

.dash-mock-chart-pct {
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  float: right;
  margin-top: -2.5rem;
}

.dash-mock-chart-bar {
  height: 0.375rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
  margin: 1rem 0 0.5rem;
}

.dash-mock-chart-bar-fill {
  height: 100%;
  width: 68.8%;
  background: #fff;
  border-radius: 3px;
}

.dash-mock-chart-footer {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.dash-mock-task-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid #f5f5f5;
}

.dash-mock-task-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dash-mock-checkbox {
  width: 1rem;
  height: 1rem;
  border: 1.5px solid #c9c9c9;
  border-radius: 3px;
  flex-shrink: 0;
}

.dash-mock-task-main {
  flex: 1;
}

.dash-mock-task-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a1a1a;
}

.dash-mock-task-sub {
  font-size: 0.6875rem;
  color: #9e9e9e;
}

.dash-mock-task-due {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #e67e22;
  white-space: nowrap;
}

.dash-mock-meeting-row {
  padding: 0.625rem 0;
  border-bottom: 1px solid #f5f5f5;
}

.dash-mock-meeting-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dash-mock-meeting-time {
  font-size: 0.6875rem;
  color: #9e9e9e;
  margin-bottom: 2px;
}

.dash-mock-meeting-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a1a1a;
}

.dash-mock-activity-row {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid #f5f5f5;
}

.dash-mock-activity-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dash-mock-activity-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.dash-mock-activity-text {
  font-size: 0.8125rem;
  color: #1a1a1a;
  flex: 1;
}

.dash-mock-activity-text strong {
  font-weight: 600;
}

.dash-mock-activity-time {
  font-size: 0.6875rem;
  color: #9e9e9e;
  margin-top: 2px;
}

.dash-mock-account-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f5f5f5;
}

.dash-mock-account-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dash-mock-account-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a1a1a;
  flex: 1;
}

.dash-mock-account-id {
  font-size: 0.6875rem;
  color: #9e9e9e;
}

.dash-mock-account-country {
  font-size: 0.8125rem;
  color: #6b6b6b;
  width: 4.375rem;
  flex-shrink: 0;
}

.dash-mock-account-revenue {
  font-size: 0.8125rem;
  color: #1a1a1a;
  width: 6.25rem;
  flex-shrink: 0;
}

.dash-mock-account-health {
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 5rem;
  flex-shrink: 0;
}

.dash-mock-account-health--risk {
  color: #e67e22;
}

.dash-mock-account-health--ok {
  color: #6b6b6b;
}

.dash-mock-doc-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid #f5f5f5;
}

.dash-mock-doc-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dash-mock-doc-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.dash-mock-doc-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a1a1a;
  flex: 1;
}

.dash-mock-doc-meta {
  font-size: 0.6875rem;
  color: #9e9e9e;
}

/* --- My accounts (live) --- */

.dash-account-title-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.375rem;
}

.dash-account-frame-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 0.5rem;
  border-radius: 999px;
  background: #ece7f2;
  color: #641e8c;
  font-size: 0.625rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Coming-soon roadmap (consolidates 4 sidebar scaffold cards) ───────── */

/* ── KPI numerals — stronger hierarchy (Gemini critique finding) ─────── */
.orders-kpi-value {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
  color: #0f172a;
  letter-spacing: -0.017em;
}
.orders-kpi-label {
  font-size: 0.8125rem;
  color: #64748b;
  font-weight: 500;
  margin-top: 0.25rem;
}

/* Find-a-Spare-Part — now-live CTAs (was disabled "Coming soon").
 * Three doors into the same flow: serial typeahead, nameplate OCR,
 * or browse from /my-assets. Polished 2026-06-09 critique pass. */
.dash-spare-part-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 0.625rem;
}
.dash-spare-part-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.5625rem 1rem;
  border-radius: 0.3125rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.015em;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.dash-spare-part-cta--primary {
  background: #0f766e;
  border: 1px solid #0f766e;
  color: #ffffff;
}
.dash-spare-part-cta--primary:hover {
  background: #115e59;
  border-color: #115e59;
}
.dash-spare-part-cta--secondary {
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #0f172a;
}
.dash-spare-part-cta--secondary:hover {
  border-color: #0f766e;
  color: #0f766e;
}
.dash-spare-part-cta--tertiary {
  background: transparent;
  border: 1px dashed #d1d5db;
  color: #475569;
}
.dash-spare-part-cta--tertiary:hover {
  border-color: #0f766e;
  color: #0f766e;
  border-style: solid;
}

/* ── Program strip pace pill (shared with /insights wording) ─────────── */
.dash-report-pace {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  letter-spacing: 0.03em;
}
.dash-report-pace--on_track {
  background: #e6f0ff;
  color: #1a56db;
}
.dash-report-pace--target_met {
  background: #e6f6ec;
  color: #1a7f37;
}
.dash-report-pace--behind {
  background: #fff4e5;
  color: #b35900;
}
/* ============================================================
   AM dashboard (HomeDashboardSE) — command bar, action queue,
   accounts table, reference rail.

   Scope: `.dash-am` is a second class on HomeDashboardSE's root, added
   because `.dash-page` is ALSO the root of home_dashboard_ext.dart (the
   customer Order Dashboard). The density/colour tokens below and the
   two-column basis overrides must not reach that page, so they hang off
   `.dash-am`; the component classes (`.dash-cmdbar`, `.dash-q-row`,
   `.dash-acct-*`, `.dash-rail-*`) are unique to this page and need no
   scoping.

   This block deliberately does NOT restate `.dash-section`,
   `.dash-section-header/-title/-count/-link`, `.dash-empty`,
   `.dash-action-badge`, `.dash-action-cta`, `.dash-status-dot--*` or
   `.orders-group-tab` — all shared, all inherited as-is, several of them
   also used by the customer dashboard.

   Doctrine (scripts/ui-audit/lint-css.mjs --gate):
     no px except hairlines, no width media queries, no raw vw.
   ============================================================ */
.dash-am {
  /* SE theme scale (themes/siemens-energy.css), not a parallel palette.
     Held as local custom properties rather than var(--se-text-*) because
     those only resolve under body.theme-siemens-energy, and this page must
     render correctly without the theme class. */
  --d-ink: #1a1a1a;
  --d-ink-2: #666666;
  --d-ink-3: #9e9e9e;
  --d-ink-4: #c9c9c9;
  /* Row divider one step lighter than the card stroke (#ebebeb), so a
     long list reads as rows inside one card and not as stacked cards. */
  --d-rule: #f2f2f2;
  --d-stroke: #ebebeb;
  --d-brand: #641e8c;
  --d-brand-wash: #f4ecf8;
  --d-brand-stroke: #d9c2e6;
  /* Matches the shipped .dash-page gap. */
  --d-gap: 0.75rem;
  --d-row-y: 0.5rem;
}

/* ── Command bar: greeting + metric strip + refresh, one line ──────────
   Replaces .dash-header-bar (a 2.25rem h1, a subtitle and a LAST
   REFRESHED stack) plus .dash-kpi-row (six boxed 5.25rem tiles). Same
   card language as .dash-section: white, #f0f0f0 hairline, 0.75rem
   radius (--se-radius-card). */
.dash-cmdbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding: 0.875rem 1rem;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 0.75rem;
}

.dash-cmdbar-id {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex: 0 0 auto;
}

/* Deliberately not an h1 at --se-font-size-d4. The greeting is
   orientation, not the headline of the page; the numbers next to it are
   the content. */
.dash-cmdbar-greet {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--d-ink);
  white-space: nowrap;
}

.dash-cmdbar-role {
  font-size: 0.75rem;
  color: var(--d-ink-3);
  white-space: nowrap;
}

/* Metric strip. Each metric is a real button: clicking filters or jumps,
   which the shipped inert tiles never did. The pressed wash is the
   .orders-kpi-tile[aria-pressed] treatment from the orders page, so a
   selected metric here reads the same as a selected KPI there. */
.dash-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.25rem;
  flex: 1 1 auto;
  min-width: 0;
}

.dash-metric {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  border-radius: 0.5rem;
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: nowrap;
}

.dash-metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
}

.dash-metric-label {
  font-size: 0.75rem;
  color: var(--d-ink-2);
}

.dash-metric:hover {
  background: #f5f5f5;
}

.dash-metric[aria-pressed='true'] {
  background: var(--d-brand-wash);
  border-color: var(--d-brand-stroke);
}

.dash-metric[aria-pressed='true'] .dash-metric-value {
  color: var(--d-brand);
}

/* A zero is information, but it is not news. Dropped to the theme's
   quaternary ink so the eye lands on 361 and 27 instead of reading all
   six numbers as equals. */
.dash-metric.is-zero .dash-metric-value {
  color: var(--d-ink-4);
}

.dash-metric.is-zero .dash-metric-label {
  color: var(--d-ink-3);
}

/* Secondary-button language from the theme (white, hairline, dark ink). */
.dash-refresh {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--d-ink-4);
  border-radius: 0.5rem;
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--d-ink);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.dash-refresh:hover {
  background: #f5f5f5;
}

/* The hero metric: the queue count, the one number the AM reads first.
   A button (click clears the queue filter) with the same wash language as
   the other metrics, only bigger. Zero drops to the quaternary ink like the
   other zeros: "nothing needs you" is calm, not celebrated. */
.dash-hero {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.125rem 0.875rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.dash-hero:hover {
  background: #f5f5f5;
}

.dash-hero-value {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--d-brand);
  font-variant-numeric: tabular-nums;
}

.dash-hero-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--d-ink);
}

.dash-hero.is-zero .dash-hero-value {
  color: var(--d-ink-4);
}

.dash-hero.is-zero .dash-hero-label {
  color: var(--d-ink-3);
  font-weight: 500;
}

/* The book metrics, demoted: same controls, one text size, no numerals
   competing with the hero. */
.dash-metrics--quiet {
  gap: 0;
}

.dash-metrics--quiet .dash-metric {
  padding: 0.25rem 0.625rem;
  gap: 0.3rem;
}

.dash-metrics--quiet .dash-metric-value {
  font-size: 0.9375rem;
  line-height: 1.3;
}

.dash-metrics--quiet .dash-metric-label {
  font-size: 0.8125rem;
}

/* Insights door in the metric strip: label-only, brand ink, same hit area
   and hover wash as the numeric metrics so it reads as one of them. */
.dash-metric--go {
  text-decoration: none;
  align-self: stretch;
  align-items: center;
}

.dash-metric--go .dash-metric-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--d-brand);
}

/* ── Program strip: count, bar, pace, run rate, one line ──────────────
   Replaces the 600-target card (gauge + stats + months + customers +
   milestones), which now lives on /insights. Wraps on narrow widths; the
   bar keeps a minimum so it never collapses to a sliver. */
.dash-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.625rem 1rem;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 0.75rem;
}

.dash-strip-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--d-ink-3);
}

.dash-strip-total {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
}

.dash-strip-target {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--d-ink-3);
}

.dash-strip-bar {
  flex: 1 1 8rem;
  min-width: 6rem;
  height: 0.375rem;
  border-radius: 999px;
  background: #f0f0f0;
  overflow: hidden;
}

.dash-strip-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--d-brand);
}

.dash-strip-meta {
  font-size: 0.75rem;
  color: var(--d-ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dash-strip-link {
  margin-left: auto;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--d-brand);
  text-decoration: none;
  white-space: nowrap;
}

.dash-strip-link:hover {
  text-decoration: underline;
}

/* ── Body: worklist left, book right ───────────────────────────────────
   Breakpoint-free two-up. The rail only appears once the row can hold
   both bases, so "wide screens only" is a flex-basis sum, not a media
   query (budget.json pins mediaWidthQueries at 0).

     two-up threshold = main basis + rail basis + gap
                      = 52rem + 22rem + 0.75rem = 74.75rem (~1196px @16px)

   Below that the rail wraps underneath at full width. Shipped values are
   44rem + 17rem, wrapping at ~61.75rem (~988px), which kept a rail beside
   the content on a 1024 laptop where neither column had room. */
.dash-am .dash-main-col {
  flex: 999 1 min(100%, 52rem);
}

.dash-am .dash-rail-col {
  display: flex;
  flex-direction: column;
  gap: var(--d-gap);
  flex: 1 1 22rem;
  min-width: 0;
}

/* ── Action queue ──────────────────────────────────────────────────────
   One list replacing four sections (needs-your-action, my offers,
   pending quotes, approvals): four headers, four empty states and the
   recurring "all clear" card collapse into one queue with a type badge.

   Row metrics are the shipped .dash-action-item's (0.625rem padding-y,
   0.75rem gap, #f0f0f0 divider) — this is that row, gridded so the badge,
   amount and age columns line up down a list of mixed types, which is
   what makes a merged queue scannable. */
/* The tab row. `.orders-group-tab` supplies each tab; this supplies the row —
   without it the tabs fall back to inline whitespace for their spacing and
   cannot wrap cleanly next to the section title. */
.dash-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.dash-q-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dash-q-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(7rem, 22rem) minmax(0, 1fr) auto 3rem auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  color: inherit;
}

.dash-q-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Single-kind queue: no badge column, the name moves to the left edge. */
.dash-q-row--nobadge {
  grid-template-columns: minmax(7rem, 22rem) minmax(0, 1fr) auto 3rem auto;
}

.dash-q-row:hover .dash-q-name {
  color: var(--d-brand);
}

/* Badges reuse .dash-action-badge + --urgent / --delay / --info. Three
   tiers, not one colour per source type: red acts now (a blocked approval,
   a dead offer), amber acts soon (a quote inside its last week), blue is
   waiting on someone else. The badge TEXT still names the source, so
   collapsing the palette costs no information.

   A fourth neutral/grey tier belongs to "your own unfinished draft"; it
   arrives with the rep-offers source (SHOP-1033, not on this branch), so no
   rule is shipped for it yet. */
/* The badge column is fixed, so centre the label inside it rather than
   letting eight ragged left edges run down the queue. */
.dash-q-row .dash-action-badge {
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.dash-q-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--d-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-q-meta {
  font-size: 0.75rem;
  color: var(--d-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-q-amount {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.dash-q-age {
  font-size: 0.75rem;
  color: var(--d-ink-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dash-q-urgent .dash-q-age {
  color: #c0392b;
  font-weight: 700;
}

/* ── Accounts table ────────────────────────────────────────────────────
   93 accounts as cards is a 60px row pitch and ~6700px of scroll, ordered
   by name, so the 12.8M account sits between two 0-euro ones. A table
   gives a sort and a ~38px pitch at this spacing. */
.dash-acct-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 12rem;
  min-width: 0;
  justify-content: flex-end;
}

.dash-inline-filter {
  flex: 1 1 10rem;
  min-width: 0;
  max-width: 20rem;
  box-sizing: border-box;
  min-height: var(--account-control-height);
  padding: 0.4375rem 0.75rem;
  border: 1px solid var(--d-stroke);
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--d-ink);
  background: #fafafa;
}

.dash-inline-filter:focus {
  outline: none;
  border-color: var(--d-ink, #242424);
  background: #fff;
}

.dash-acct-table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.dash-acct-table-wrap:focus-visible {
  outline: 2px solid #737373;
  outline-offset: -2px;
}

.dash-acct-table {
  width: 100%;
  min-width: 48rem;
  border-collapse: collapse;
  font-size: 0.875rem;
  /* Fixed layout with widths only on the metric columns: the account name
     absorbs all remaining width, so the numbers cluster right instead of
     being smeared across 1798px with the name truncated. */
  table-layout: fixed;
}

/* Metric columns sized to their widest realistic value (a two-digit count,
   "12,8M €", "7mo ago"), not to their header. Sum is 29.25rem, down from
   34.5rem, which is the difference between "50Hertz Trans…" and the full name
   at 1280 with the rail beside it. */
.dash-acct-table th:nth-child(2),
.dash-acct-table th:nth-child(3) {
  width: 3.75rem;
}

.dash-acct-table th:nth-child(4) {
  width: 6.75rem;
}

.dash-acct-table th:nth-child(5) {
  width: 4rem;
}

.dash-acct-table th:nth-child(6) {
  width: 6.5rem;
}

.dash-acct-table th:nth-child(7) {
  width: 4.5rem;
}

/* Same uppercase micro-label as the shipped .dash-orders-th. */
.dash-acct-table th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--d-ink-3);
  padding: 0 0.625rem 0.5rem 0;
  border-bottom: 1px solid var(--d-stroke);
  white-space: nowrap;
  user-select: none;
}

/* The sort control is a button so it is in the tab order; it inherits the
   header's type so the column head still reads as one label. */
.dash-acct-th-btn {
  all: unset;
  cursor: pointer;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.dash-acct-th-btn:hover {
  color: var(--d-ink-2);
}

.dash-acct-th-btn:focus-visible {
  outline: 2px solid var(--d-ink, #242424);
  outline-offset: 2px;
  border-radius: 0.125rem;
}

.dash-acct-table th.is-num,
.dash-acct-table td.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dash-acct-table th.is-sorted {
  color: var(--d-ink, #242424);
}

.dash-acct-table td {
  padding: var(--d-row-y) 0.625rem var(--d-row-y) 0;
  border-bottom: 1px solid var(--d-rule);
  color: var(--d-ink-2);
  white-space: nowrap;
}

.dash-acct-table tbody tr:last-child td {
  border-bottom: none;
}

.dash-acct-tr {
  cursor: pointer;
}

.dash-acct-tr:hover td {
  background: #f7f7f7;
}
.dash-acct-tr td { transition: background-color 150ms ease; }

/* Company names WRAP rather than truncate — see the same change in
   accounts.css. The metric columns keep their nowrap; only this cell is
   allowed to run to a second line. */
.dash-acct-name {
  font-weight: 600;
  color: var(--d-ink);
  white-space: normal;
  overflow-wrap: anywhere;
}

.dash-acct-namebtn {
  all: unset;
  cursor: pointer;
  font: inherit;
  color: inherit;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: bottom;
}

.dash-acct-tr:hover .dash-acct-namebtn,
.dash-acct-namebtn:focus-visible {
  color: var(--d-ink, #242424);
}

.dash-acct-namebtn:focus-visible {
  outline: 2px solid var(--d-ink, #242424);
  outline-offset: 2px;
  border-radius: 0.125rem;
}

.dash-acct-money {
  font-weight: 600;
  color: var(--d-ink);
}

.dash-acct-zero {
  color: var(--d-ink-4);
}

.dash-acct-muted {
  color: var(--d-ink-3);
  font-size: 0.8125rem;
}

/* Row click is the primary view-as (dashboard). These two cover the other
   surfaces: always rendered and focusable, low contrast until the row is
   hovered, so 93 rows do not ship 279 competing outline buttons. */
.dash-acct-acts {
  display: flex;
  gap: 0.25rem;
  justify-content: flex-end;
}

.dash-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: none;
  color: var(--d-ink-4);
  cursor: pointer;
}

.dash-acct-tr:hover .dash-icon-btn {
  color: var(--d-ink-2);
  border-color: var(--d-ink-4);
}

.dash-acct-tr .dash-icon-btn:hover,
.dash-acct-tr .dash-icon-btn:focus-visible {
  color: #fff;
  background: var(--d-ink, #242424);
  border-color: var(--d-ink, #242424);
  outline: none;
}

.dash-icon-btn svg {
  width: 1rem;
  height: 1rem;
}

/* Quiet fold: most of the 93 have nothing open and nothing pending. */
.dash-fold {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem 0 0;
  border: none;
  border-top: 1px solid var(--d-rule);
  background: none;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--d-ink-2);
  cursor: pointer;
}

.dash-fold:hover {
  color: var(--d-ink, #242424);
}

/* ── Rail widgets ──────────────────────────────────────────────────────
   Recent orders as rows instead of a 5-column table, and saved carts as
   rows instead of a horizontal card scroller that hides items offscreen
   on a 1798px desktop. */
.dash-rail-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--d-rule);
  text-decoration: none;
  color: inherit;
}

.dash-rail-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Both rail lists empty: one line, two doors. */
.dash-rail-quiet {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.dash-rail-quiet .dash-empty {
  margin: 0;
}

.dash-rail-quiet-links {
  display: flex;
  gap: 1rem;
}

.dash-rail-row:hover .dash-rail-title {
  color: var(--d-brand);
}

.dash-rail-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--d-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-rail-amount {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dash-rail-sub {
  grid-column: 1;
  font-size: 0.75rem;
  color: var(--d-ink-3);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-rail-date {
  grid-column: 2;
  font-size: 0.75rem;
  color: var(--d-ink-3);
  white-space: nowrap;
  text-align: right;
}

/* ── Your Details card (SHOP-531) ────────────────────────────────────
 * Name/Phone/Email folded in from the old standalone /profile "Profile
 * Details" tab. Reuses profile.css's .profile-row/.profile-input/
 * .profile-address-table__* primitives (imported globally via main.css),
 * but those were sized for /profile's full-width page — tighten them
 * here to this card's compact homepage footprint instead of introducing
 * a parallel set of row/input components.
 */
.profile-rows--compact .profile-row--compact {
  border-bottom: none; /* .orders-section already gives its own divider */
}

.profile-rows--compact .profile-row--compact .profile-row__header {
  padding: 0.625rem 0;
  gap: 0.75rem;
  align-items: center;
}

.profile-rows--compact .profile-row--compact:first-of-type .profile-row__header {
  padding-top: 0;
}

.profile-rows--compact .profile-row--compact .profile-row__label {
  width: 6.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25rem;
  padding-left: 0;
}

.profile-rows--compact .profile-row--compact .profile-row__value {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #1a1a1a;
}

.profile-rows--compact .profile-row--compact .profile-row__edit {
  padding: 0 0 0.75rem;
}

.profile-rows--compact .profile-row--compact .profile-input {
  font-size: 0.9375rem;
  padding: 0.25rem 0;
  min-width: 8rem;
}

.profile-rows--compact .profile-name-form {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.profile-rows--compact .profile-name-form .profile-input {
  flex: 1;
  min-width: 8rem;
}

.your-details-row__actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

@media (prefers-color-scheme: dark) {
  .profile-rows--compact .profile-row--compact .profile-row__value {
    color: #e8e8e8;
  }

/* ── Machines on a SAP document (order + quote detail) ───────────────
   The reverse of the site page's "Orders ▸": which of the company's
   machines a document built. Rendered by
   components/dashboard/order_machines_section.dart on both pages; the
   wrapper reuses .order-section / .order-section-label (order_detail.css)
   and the site chip reuses .quote-asset-chip (orders.css). */
/* The island's mount div is rendered on every build and stays EMPTY for the
   common case (guest, foreign document, no machines) — and its parent
   (.order-summary-content, .quote-items) is a gap-based flex column, so an
   empty child would open a blank slot. Hidden until React puts something in
   it; a rule here, not in the island's CSS, because this sheet is on the page
   before the bundle is. */
.order-machines-mount:empty {
  display: none;
}
.order-machines-section .order-machines-count {
  margin-left: 0.5rem;
  padding: 0 0.4rem;
  border-radius: 0.625rem;
  background: #f1f1f1;
  color: #6b6b6b;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1rem;
}
.order-machines-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.order-machines-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
}
.order-machines-serial {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}
a.order-machines-serial:hover {
  text-decoration: underline;
}
.order-machines-name {
  color: #6b6b6b;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.order-machines-site {
  text-decoration: none;
}
.order-machines-more {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: #6b6b6b;
}
@media (prefers-color-scheme: dark) {
  .order-machines-section .order-machines-count { background: #2c2c2c; color: #b8b8b8; }
  .order-machines-name, .order-machines-more { color: #b8b8b8; }
}

/* ── Account grouping: Region / Entity ──────────────────────────────────
   The accounts table can organise the book by SE region (Europe › Germany)
   or by corporate family (the twelve Siemens Gamesa entities). `All` is the
   default and leaves the sortable table exactly as it was.

   Grouping re-buckets the rows; the column sort still orders them WITHIN a
   group. Headers are collapsed until opened, and the inline filter expands
   everything so a match is never hidden. Sits alongside the existing
   .dash-acct-tools filter — see the "Accounts table" block above. */

/* Group headings are full-width buttons; child accounts stay table rows. */
.dash-acct-table .dash-acct-grouptr > td {
  padding: 0.25rem 0 0;
  border-bottom: 1px solid transparent;
  white-space: normal;
}
.dash-acct-grouphead {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  border: 0;
  border-radius: 0.375rem;
  background: #fafafa;
  color: #262626;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.dash-acct-grouphead[aria-expanded="true"] { background: #f7f7f7; }
.dash-acct-grouphead:hover { background: #f2f2f2; }
.dash-acct-grouphead:active { background: #ebebeb; }
.dash-acct-grouphead:focus-visible {
  outline: 2px solid #737373;
  outline-offset: -2px;
}
.dash-acct-groupname {
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: inherit;
}
.dash-acct-groupcode { font-size: 0.75rem; color: #666; }
.dash-acct-tr.is-nested .dash-acct-name { padding-left: 1.25rem; }
.dash-acct-groupcount {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #666;
  font-variant-numeric: tabular-nums;
}