/* ============================================================================
   Digit module shell — canonical page chrome (SHIPPED asset, not reference).
   Extracted verbatim from the Projects module (cp-projects/app.css) so every
   new module's MAIN PAGE HEADER is pixel-identical to Projects/Digit.

   Link order in the SPA shell (all relative paths, no build step):
     1. design-tokens.css   (the pinned tokens)
     2. app-shell.css       (this file — shared chrome, DO NOT restyle these classes)
     3. app.css             (module-specific components only)

   Consumes design-tokens.css ONLY. No hard-coded colors/spacing.
   Canonical list-screen structure (see DESIGN.md § Main page header):
     .content > .title-row > .tab-row > .toolbar > #tab-body .table
   ============================================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: var(--tracking-tight);
  -webkit-font-smoothing: antialiased;
}

.app { width: 100%; min-height: 100vh; }

/* Content area only — no outer chrome (we live inside Digit's shell).
   Full width + flush top/left/right: the iframe already provides outer padding,
   so we only keep a little breathing room at the bottom. */
.content { padding: var(--space-4) var(--space-8) 0; }

/* Digit list pattern: content (title, buttons, tab labels, cell text) is inset
   32px, but the structural divider lines — the tab underline and the table row
   borders — bleed full-width to the page edges. Scoped to the list screen: the
   tab body container must be id="tab-body" for the table bleed to apply. */
.content > .tab-row {
  margin-left: calc(-1 * var(--space-8));
  margin-right: calc(-1 * var(--space-8));
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}
.content #tab-body .table {
  margin-left: calc(-1 * var(--space-8));
  margin-right: calc(-1 * var(--space-8));
  width: calc(100% + 2 * var(--space-8));
}
.content #tab-body .table th:first-child,
.content #tab-body .table td:first-child { padding-left: var(--space-8); }
.content #tab-body .table th:last-child,
.content #tab-body .table td:last-child { padding-right: var(--space-8); }

/* ---- Page title + title row ---------------------------------------------- */
.page-title {
  /* Digit page title: 16px / 600 / warm near-black (MuiTypography, 20px line). */
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 20px;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

/* Title row: title left, primary action + utility icons right (Digit-native). */
.title-row { display: flex; align-items: center; justify-content: space-between; height: 28px; margin-bottom: 0; }
.title-row .page-title { margin: 0; }
.title-row-actions { display: flex; align-items: center; gap: var(--space-2); }
.icon-ghost {
  appearance: none; background: none; border: none; cursor: pointer; color: var(--color-label);
  width: var(--control-height); height: var(--control-height); display: inline-flex;
  align-items: center; justify-content: center; border-radius: var(--radius-input);
}
.icon-ghost:hover { background: var(--color-hover); color: var(--color-text); }

/* ---- Toolbar (below the tab row: per-view controls left, search+tools right) */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.toolbar-actions { display: flex; align-items: center; gap: var(--space-2); }
.toolbar-spacer { flex: 1; }

/* ---- Tab row (saved views) ----------------------------------------------- */
.tab-row {
  display: flex; align-items: center; gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
  overflow-x: auto;
}
/* Digit MUI Tabs: 13px / weight 500 (active is NOT bolder, just darker +
   a dark underline); 36px tall. */
.tab {
  appearance: none; background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium);
  color: var(--tab-inactive-color); height: var(--row-height); padding: 0 var(--space-3);
  border-bottom: var(--tab-indicator-height) solid transparent; white-space: nowrap;
}
.tab .icon { width: 16px; height: 16px; }
/* First tab's label sits flush with the page title (no leading padding). */
.tab-row .tab:first-child { padding-left: 0; }
.tab:hover { color: var(--tab-active-color); }
.tab--active { color: var(--tab-active-color); border-bottom-color: var(--tab-indicator-color, var(--tab-active-color)); }

/* ---- Inputs / search ------------------------------------------------------ */
.input, .search {
  height: var(--control-height);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: 0 var(--space-3);
  font-family: inherit; font-size: var(--fs-base); color: var(--color-text);
  background: var(--color-bg);
}
.input::placeholder, .search::placeholder { color: var(--color-muted); }
select.input { cursor: pointer; }
.search { width: 240px; }
textarea.input { height: auto; width: 100%; padding: var(--space-2) var(--space-3); resize: vertical; }

/* ---- Buttons --------------------------------------------------------------- */
.btn {
  height: var(--btn-height);
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-3); border-radius: var(--radius-input);
  font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-medium);
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
}
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); box-shadow: var(--shadow-sm); }
.btn--primary:hover { filter: brightness(1.15); }
/* Digit secondary is a tonal soft-fill (faint gray), not a white outline. */
.btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border-color: var(--btn-secondary-border); }
.btn--secondary:hover { background: rgba(0, 0, 0, 0.09); }
.btn--icon { padding: 0 var(--space-2); }
.btn--sm { height: 28px; font-size: var(--fs-sm); padding: 0 var(--space-2); }
.btn--sm .icon { width: 14px; height: 14px; }
.btn--split { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn--split-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255,255,255,.2); }

.icon { width: var(--icon-size); height: var(--icon-size); stroke-width: 1.75; flex: none; }

/* ---- Badges (e.g. count chip on a tab label) ------------------------------ */
.badge { display: inline-flex; align-items: center; padding: 1px var(--space-2); margin-left: var(--space-2);
  border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.badge--count { background: var(--pill-amber-bg); color: var(--pill-amber-text); font-weight: var(--fw-semibold);
  border-radius: 999px; min-width: 18px; justify-content: center; }

/* ---- Table (Digit ag-Grid look — the list body under the header) ---------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
/* Header mirrors Digit's ag-Grid: full-strength text, regular weight, 13px,
   36px tall, 8px cell padding, faint 5%-black hairlines. */
.table th {
  text-align: left; font-weight: var(--fw-regular); color: var(--color-text);
  font-size: var(--fs-base); height: var(--row-height); padding: 0 var(--space-2);
  border-bottom: 1px solid var(--color-border-faint); white-space: nowrap;
}
.table td {
  padding: 0 var(--space-2); height: var(--row-height);
  border-bottom: 1px solid var(--color-border-faint); vertical-align: middle;
}
.row--clickable { cursor: pointer; }
.row--clickable:hover { background: var(--color-hover); }
.cell-strong { font-weight: var(--fw-semibold); }
.cell-muted { color: var(--color-muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.num-danger { color: var(--color-danger-text); }
.th-sortable { display: inline-flex; align-items: center; gap: 4px; }
.th-sortable .icon { width: 13px; height: 13px; }

/* Pagination footer. */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-3) 0; color: var(--color-label); font-size: var(--fs-sm); }