/* Page-only composition for jobs.html.
   Shared rules live in assets/app.css, which loads first. Tokens only. */

.jobs-list { display: grid; gap: var(--s-4); }

.jobs-toolbar { --od-gap: var(--s-4); flex-wrap: wrap; }
.jobs-toolbar > .toolbar-status { flex: 1 1 100%; }
.jobs-toolbar > .toolbar-search { flex: 2 1 240px; }
.jobs-toolbar > .toolbar-client { flex: 1 1 200px; }

/* Numeric cells align right; .cell-stack in app.css aligns start, so this
   rule has to stay later in the cascade — assets/app.css loads before it. */
.cell-num { justify-items: end; }
.th-sort.col-num > button { justify-content: flex-end; }

/* ---------------------------------------------------------------------------
   Internal owner vs client account
   One convention, four redundant cues so the two never read as the same kind
   of thing: shape (round person / square company), the brand tint reserved
   for Samcruit people, a "Samcruit consultant" sub-line, and the column name.
   --------------------------------------------------------------------------- */
.mono-internal {
  border-radius: var(--r-pill);
  background: var(--primary-soft);
  color: var(--primary-hover);
  box-shadow: inset 0 0 0 1.5px var(--primary);
}
.owner-cell { --od-gap: var(--s-2); }
.owner-name { display: block; font-weight: 600; color: var(--ink); }
.owner-role {
  display: block;
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  color: var(--ink-muted);
}
.client-cell { --od-gap: var(--s-2); }

.owner-legend {
  --od-gap: var(--s-2);
  align-items: flex-start;
  margin-top: var(--s-2);
  font-size: var(--fs-micro); line-height: var(--lh-micro);
  color: var(--ink-muted);
}
.owner-legend strong { color: var(--ink); }

/* ---------------------------------------------------------------------------
   Row actions
   Four named controls per row instead of one overflow menu: view, edit,
   pause or resume, close. Quiet and compact at table density so the column
   reads as a single group, with the full 44px touch target restored once the
   row becomes a card below 768px.
   --------------------------------------------------------------------------- */
.col-actions { white-space: nowrap; }

.row-actions {
  --od-gap: var(--s-1);
  flex-wrap: nowrap;
}
.row-actions .btn-icon {
  min-width: 34px;
  min-height: 34px;
  padding: var(--s-1);
  background: transparent;
  border-color: transparent;
  color: var(--ink-muted);
  transition: background-color var(--t-state), border-color var(--t-state), color var(--t-state);
}
.row-actions .btn-icon:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
}
/* closing a role is the one destructive action in the group */
.row-actions .action-danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger-hover);
}
/* an action that does not apply to this status stays in place, dimmed, so the
   column keeps one rhythm and the icon order never shifts between rows */
.row-actions .btn-icon[disabled] { color: var(--ink-faint); }
.row-actions .btn-icon[disabled]:hover {
  background: transparent;
  border-color: transparent;
  color: var(--ink-faint);
}

.drafts-note { --od-gap: var(--s-4); flex-wrap: wrap; }

@media (max-width: 767px) {
  .cell-num { justify-items: start; }

  .row-actions {
    --od-gap: var(--s-2);
    flex-wrap: wrap;
  }
  .row-actions .btn-icon {
    min-width: 44px;
    min-height: 44px;
    background: var(--surface);
    border-color: var(--border-strong);
  }
  .row-actions .btn-icon[disabled] { border-color: var(--border); }
}