/* today tab styles — owned by the today builder. Selectors must be prefixed .today-
   Colours come from tokens.css only; nothing here defines a token of its own. */

.today-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s4);
}

/* ------------------------------------------------------------------ cards */

.today-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card, 12px);
  margin-bottom: var(--s4);
  overflow-x: auto;
}

.today-card-head {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
}

.today-card-title {
  margin: 0;
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold, 600);
  color: var(--heading);
}

.today-card-sub {
  margin: var(--s1) 0 0;
  font-size: var(--fs-caption);
  color: var(--muted);
}

/* The inbound promise block is advisory, not an alarm: a tint and a heading
   colour, no blocking and no red button. */
.today-inbound {
  border-color: var(--red);
  background: var(--red-tint);
}

.today-card-head-alert .today-card-title { color: var(--red); }
.today-card-head-alert { border-bottom-color: var(--red); }

/* ------------------------------------------------------------------ table */

.today-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
  /* Fixed layout is what makes the row hold its columns. With auto layout a
     long "why this call" sentence widens its column until the narrow cells are
     squeezed to nothing and the Call button is pushed out of view; with fixed
     layout the widths below hold for every row, so the table scans
     vertically. */
  table-layout: fixed;
  /* Below this the columns stop being readable, so the card scrolls sideways
     instead of crushing every cell into an ellipsis. The Action column is
     pinned to the right so the Call button is on screen either way. */
  min-width: 980px;
}

/* The widths are declared once, on the header row, because table-layout: fixed
   reads them from the first row only. Every table on this tab uses the same
   header, so all of them line up. */
.today-head th:nth-child(1) { width: 17%; }
.today-head th:nth-child(2) { width: 20%; }
.today-head th:nth-child(3) { width: 19%; }
.today-head th:nth-child(4) { width: 9%; }
.today-head th:nth-child(5) { width: 7%; }
.today-head th:nth-child(6) { width: 10%; }
.today-head th:nth-child(7) { width: 7%; }
.today-head th:nth-child(8) { width: 11%; }
.today-head th:nth-child(9) { width: 100px; }

.today-head th {
  text-align: left;
  padding: var(--s2) var(--s3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  /* The heading wraps onto a second line rather than being cut short: a
     column called "Last cha…" tells the operator nothing. */
  white-space: normal;
  vertical-align: bottom;
}

.today-row td {
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--border);
  color: var(--body);
  vertical-align: top;
  /* Fixed layout does not wrap for us: without this a single long token — a
     URL, an address — overflows its cell and drags the row apart. */
  overflow: hidden;
  text-overflow: ellipsis;
}

.today-row:last-child td { border-bottom: none; }

/* The flex box goes on a span inside the cell, never on the <td> itself: a td
   set to display:flex or display:grid leaves the column grid, and every cell
   after it wraps underneath instead of sitting in its own column. */
.today-biz-inner {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
}

.today-biz-text {
  display: block;
  min-width: 0;
  overflow: hidden;
}

.today-biz,
.today-contact { vertical-align: top; }

.today-biz-name {
  display: block;
  color: var(--primary);
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-biz-city,
.today-contact-role {
  display: block;
  font-size: var(--fs-caption);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Four separate values in one cell. The gap is what keeps the address and the
   website from reading as one string; each also truncates on its own line and
   carries the full value in a title. */
.today-contact-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.today-contact-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-contact-email,
.today-contact-site {
  display: block;
  max-width: 100%;
  font-size: var(--fs-caption);
  color: var(--muted);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-contact-site { color: var(--primary); }
.today-contact-none { color: var(--muted); }

.today-contact-email:hover,
.today-contact-site:hover { text-decoration: underline; }

/* The flexible column, clamped. Full sentence on hover through the title. */
.today-why-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.today-channel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-due,
.today-stale {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Touch can carry a second and third pill (off-window, touch cap). It wraps
   inside its own column rather than widening the row. */
.today-touch { white-space: normal; }

/* Pinned right: when the card scrolls sideways on a narrow window the Call
   button stays where the operator's eye already is. position: sticky on a cell
   keeps it inside the column grid -- unlike display: flex, it does not take the
   cell out of the table. */
.today-action,
.today-head th:nth-child(9) {
  text-align: right;
  white-space: nowrap;
  position: sticky;
  right: 0;
  background: var(--surface);
}

.today-row-offwindow .today-action { background: var(--amber-tint); }

.today-call { text-decoration: none; }

/* Off-window is a flag on a row that is still fully callable. */
.today-row-offwindow { background: var(--amber-tint); }
.today-row-inbound { background: var(--surface); }

/* ---------------------------------------------------------------- hidden */

.today-hidden { padding: var(--s3) var(--s4); }

.today-hidden-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-weight: var(--fw-medium);
  color: var(--heading);
}

/* ------------------------------------------------------------------ jobs */

.today-jobs {
  font-size: var(--fs-caption);
  color: var(--muted);
  padding: var(--s2) 0 var(--s4);
}

.today-job-ok { color: var(--green); }
.today-job-fail { color: var(--red); }

/* ------------------------------------------------------------------ rail */

.today-rail { display: flex; flex-direction: column; gap: var(--s3); }

.today-rail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card, 12px);
  padding: var(--s3);
}

.today-rail-title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold, 600);
  color: var(--heading);
  margin-bottom: var(--s1);
}

.today-rail-value {
  font-size: var(--fs-body);
  color: var(--body);
  font-variant-numeric: tabular-nums;
}

.today-rail-text {
  margin: var(--s1) 0 0;
  font-size: var(--fs-caption);
  color: var(--muted);
}

.today-chips {
  display: flex;
  gap: var(--s1);
  margin-top: var(--s2);
}

.today-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--s2) 0;
  border: 1px solid var(--border);
  border-radius: var(--r-ctl, 8px);
  background: var(--surface);
  color: var(--body);
  font: inherit;
  font-size: var(--fs-caption);
  cursor: pointer;
}

.today-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--surface);
}

.today-chip-date { color: inherit; opacity: 0.8; }
.today-chip-count { font-variant-numeric: tabular-nums; }

.today-switch { display: flex; margin-top: var(--s2); }

.today-quick {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--s2) 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--body);
  font: inherit;
  cursor: pointer;
}

.today-quick:last-child { border-bottom: none; }
.today-quick:hover { color: var(--primary); }