/* dashboard.css - a product's Dashboard, a table (boards F40 to F42, F60,
   4.73, 4.79 to 4.81): Sources (in the Signals toolbar's right end), the Pass when line (a changed cutoff navy with its reset arrow),
   the table of a row per signal (what passes dark and bold, an overdue
   signal a pale red row with a red edge), and its terms open in place. */

@layer components {
  .signals-dashboard[hidden] { display: none; }
  .dashboard { display: flex; flex-direction: column; gap: var(--space-6); }
  .dashboard[data-state="loading"] { opacity: 0.6; }

  /* ---- Sources, at the right end of the Signals toolbar (238) ---- */
  .dashboard-sources { display: inline-flex; align-items: center; gap: var(--space-3); }
  .dashboard-sources-words { display: inline-flex; gap: var(--space-2); }
  .dashboard-sources-lead { color: var(--ink-soft); }
  .dashboard-sources-value { color: var(--ink); font-weight: var(--weight-medium); }
  .dashboard-sources .icon, .dashboard-sources .icon svg { display: block; width: var(--icon-sm); height: var(--icon-sm); }

  /* ---- Pass when: each cutoff a number to press; a changed one navy, with the reset arrow ---- */
  .dashboard-cutoffs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-10);
    margin: 0;
    color: var(--ink-soft);
    font-size: var(--text-sm);
  }
  .dashboard-cutoff { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); }
  .dashboard-cutoff-value {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
  }
  .dashboard-cutoff[data-state="changed"] .dashboard-cutoff-value { color: var(--accent); font-weight: var(--weight-strong); }
  .dashboard-cutoff-input { width: var(--dashboard-cutoff-width); padding: 0 var(--space-2); font-size: var(--text-sm); }
  .dashboard-reset { min-width: 0; min-height: 0; padding: 0; }
  .dashboard-reset .icon, .dashboard-reset .icon svg { display: block; width: var(--icon-sm); height: var(--icon-sm); }

  /* ---- the table ---- */
  .dashboard-frame { border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--panel); overflow-x: auto; }
  .dashboard-table { width: 100%; border-collapse: collapse; font-size: var(--text-row); }
  .dashboard-table th, .dashboard-table td {
    padding: var(--space-6) var(--space-5);
    border-bottom: var(--hairline) solid var(--line);
    text-align: left;
    vertical-align: top;
    font-weight: var(--weight-regular);
  }
  .dashboard-table thead th {
    color: var(--ink-faint);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .dashboard-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: pointer;
  }
  .dashboard-sort-arrow { color: var(--ink-soft); }
  .dashboard-table td[data-state="pass"] { color: var(--ink); font-weight: var(--weight-strong); }
  /* PRR clears its value without its chi-squared part: passing in part */
  .dashboard-table td[data-state="partial"] { color: var(--ink); font-weight: var(--weight-medium); text-decoration: underline dotted var(--ink-faint); }
  .dashboard-table .dashboard-floor { color: var(--ink-faint); }

  /* an overdue signal: a pale red row with a red edge (decision 128) */
  .dashboard-table tr[data-state="overdue"] { background: var(--danger-soft); outline: var(--hairline) solid var(--danger); outline-offset: calc(-1 * var(--hairline)); }
  /* side by side, a signal spans several lines: the pale red alone */
  .dashboard-table[data-state="side"] tr[data-state="overdue"] { outline: none; }

  /* ---- the Signal cell: the chevron, the name with its mark, what it was flagged on ---- */
  .dashboard-table tbody th { min-width: var(--dashboard-signal-min); }
  .dashboard-signal { display: flex; align-items: flex-start; gap: var(--space-2); }
  .dashboard-open { min-width: 0; min-height: 0; padding: var(--space-1); }
  .dashboard-open .icon, .dashboard-open .icon svg { display: block; width: var(--icon-sm); height: var(--icon-sm); }
  .dashboard-open[aria-expanded="true"] .icon { transform: rotate(90deg); }
  .dashboard-open-gap { display: block; width: calc(var(--icon-sm) + 2 * var(--space-1)); flex: 0 0 auto; }
  .dashboard-signal-words { display: flex; flex-direction: column; min-width: 0; }
  .dashboard-signal-name { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); }
  .dashboard-mark { display: block; color: var(--danger); }
  .dashboard-mark .icon, .dashboard-mark .icon svg { display: block; width: var(--icon-size); height: var(--icon-size); }
  .dashboard-flagged { color: var(--ink-faint); font-size: var(--text-sm); }
  .dashboard-stage {
    display: inline-block;
    padding: 0 var(--space-3);
    border-radius: var(--radius-mark);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--text-tag);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  /* ---- a signal's terms, open in place (F41) ---- */
  .dashboard-term-row { background: var(--frame-ground); }
  .dashboard-term { display: block; padding-left: var(--space-8); color: var(--ink); }
  .dashboard-term-flag { color: var(--accent); }
  .dashboard-empty { margin: 0; padding: var(--space-6); }
  .dashboard-empty[hidden] { display: none; }

  /* ---- the Sources menu: a tick per source, each with its i and card (F60, decision 123) ---- */
  .dashboard-sources-menu { min-width: var(--filter-options-width); }
  .dashboard-source-row { display: flex; align-items: center; gap: var(--space-3); padding-right: var(--space-3); }
  .dashboard-source-row .menu-choice { flex: 1 1 auto; }
  .dashboard-source-card { margin: 0 var(--space-3) var(--space-3); }
}