/* GTM Digital dashboard - the shared design system.
 *
 * Loaded last, after dashboard.css, portal.css, mobile.css and theme.css, so
 * every screen reads one set of tokens and one treatment per component. The
 * earlier sheets still own layout specifics; anything visual that two screens
 * share belongs here (dashboard proposal 1, section 6).
 *
 * Direction: a console, not a landing page. Jet-black canvas, neutral
 * charcoal surfaces, hairline borders, compact sentence-case headings, the
 * system UI face, and green used sparingly for the one primary action and
 * for "good" states. Monospace only for references and phone numbers.
 */

/* ---------- tokens ---------- */

:root {
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --control-h: 2.5rem;
  --rail-w: 15rem;
  --font-display: var(--font-ui);
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --divider: #ebebeb;
  --field-bg: #ffffff;
  --field-border: #c9c9c9;
  --hover: #f4f4f4;
  --shadow-sm: none;
  --shadow-pop: 0 12px 32px rgb(0 0 0 / 12%), 0 0 0 1px rgb(0 0 0 / 6%);
  --rail-bg: #fafafa;
  --rail-active: #ececec;
}

@media screen {
  :root[data-theme="dark"] {
    --bg: #000000;
    --surface: #0d0d0d;
    --surface-2: #161616;
    --surface-3: #1f1f1f;
    --border: #262626;
    --border-strong: #4d4d4d;
    --divider: #1c1c1c;
    --text: #ededed;
    --text-muted: #a1a1a1;
    --field-bg: #0a0a0a;
    --field-border: #333333;
    --hover: #141414;
    --rail-bg: #000000;
    --rail-bg-raised: #0d0d0d;
    --rail-line: #1f1f1f;
    --rail-text: #a1a1a1;
    --rail-text-strong: #ededed;
    --rail-active: #1a1a1a;
    --paper: #0d0d0d;
    --section-title-bg: transparent;
    --section-border: #262626;
    --shadow-pop: 0 16px 40px rgb(0 0 0 / 60%), 0 0 0 1px #262626;
  }
}

/* ---------- type ---------- */

body.portal { font-size: var(--text-base); -webkit-font-smoothing: antialiased; }
.portal :is(h1, h2, h3, h4) {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: -0.011em;
  text-transform: none;
}
.portal h1 { font-size: 1.75rem; line-height: 1.2; }
.portal h2 { font-size: 1.0625rem; line-height: 1.3; }
.portal h3 { font-size: 0.9375rem; line-height: 1.35; }
@media (max-width: 40rem) { .portal h1 { font-size: 1.5rem; } }

.portal :is(.eyebrow, .step-number, .optional, .record-id, .client-code, .brand-kicker, .setup-status,
  .who-role, .label, .filter-bar label, .field, .breadcrumb, .badge, .pill) {
  font-family: var(--font-ui);
  letter-spacing: 0;
}
.portal .eyebrow {
  font-size: var(--text-sm); font-weight: 500; text-transform: none; color: var(--text-muted);
}
.portal .mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; }
.portal :is(.muted, .caption, .row-sub, .sub) { color: var(--text-muted); }
.portal .caption { font-size: var(--text-sm); }

/* ---------- shell: rail ---------- */

.portal .rail {
  gap: 2px;
  padding: 0.75rem 0.625rem;
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-line);
}
.portal .rail-brand { gap: 0.625rem; padding: 0.375rem 0.5rem; margin-bottom: 0.5rem; }
.portal .rail-brand img { width: 1.75rem; height: 1.75rem; border-radius: 6px; }
.portal .rail-brand-copy strong { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }

.rail-context { display: grid; gap: 4px; margin: 0 0 0.75rem; }
.rail-context-label { padding: 0.5rem 0.5rem 0; font-size: var(--text-xs); color: var(--rail-text); }
.rail-picker {
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 2.25rem; padding: 0.375rem 0.625rem;
  border: 1px solid var(--rail-line); border-radius: var(--radius);
  background: var(--rail-bg-raised); color: var(--rail-text-strong);
  font-size: var(--text-sm); font-weight: 500; text-decoration: none; cursor: pointer;
  list-style: none;
}
.rail-picker::-webkit-details-marker { display: none; }
.rail-picker:hover { background: var(--rail-active); color: var(--rail-text-strong); }
.rail-picker-static { cursor: default; }
.rail-picker-static:hover { background: var(--rail-bg-raised); }
.rail-picker-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-picker .ico-chevron { width: 0.875rem; height: 0.875rem; opacity: 0.6; transform: rotate(90deg); }
.rail-picker-menu { position: relative; }
.rail-picker-menu[open] .ico-chevron { transform: rotate(-90deg); }
.rail-picker-list {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-pop);
}
.rail-picker-list :is(a, span.is-locked, li > span) {
  display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.5rem; border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; font-size: var(--text-sm);
}
.rail-picker-list a:hover { background: var(--surface-2); }
.rail-picker-list span > span, .rail-picker-list a > span { display: grid; gap: 1px; min-width: 0; }
.rail-picker-list strong { font-weight: 500; }
.rail-picker-list small { color: var(--text-muted); font-size: var(--text-xs); line-height: 1.35; }
.rail-picker-list .is-locked { color: var(--text-muted); cursor: default; }
.rail-picker-list .ico { flex: none; width: 1rem; height: 1rem; margin-top: 2px; }

.portal .rail-label {
  margin: 0.875rem 0 0.25rem; padding: 0 0.5rem;
  font-size: var(--text-xs); font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--rail-text);
}
.portal .rail-item {
  min-height: 2.125rem; gap: 0.625rem; padding: 0.375rem 0.5rem;
  border-radius: var(--radius-sm); border: 0;
  font-size: var(--text-sm); font-weight: 450; color: var(--rail-text);
}
.portal .rail-item .ico { width: 1.0625rem; height: 1.0625rem; opacity: 0.9; }
.portal .rail-item:hover { background: var(--rail-active); color: var(--rail-text-strong); }
.portal .rail-item[aria-current="page"] {
  background: var(--rail-active); color: var(--rail-text-strong); font-weight: 500;
  box-shadow: none; border: 0;
}
.portal .rail-item[aria-current="page"]::before { display: none; }
.portal .rail-count {
  margin-left: auto; min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem;
  border-radius: 999px; background: var(--surface-3); color: var(--rail-text-strong);
  font-size: 0.6875rem; font-weight: 600; line-height: 1.25rem; text-align: center;
}
.portal .rail-count-urgent { background: #c4283f; color: #fff; }
.portal .rail-foot { border-top: 1px solid var(--rail-line); padding-top: 0.5rem; gap: 2px; }
.portal .rail-who { display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 0.5rem; }
.rail-avatar {
  display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--surface-3); color: var(--rail-text-strong); font-size: var(--text-xs); font-weight: 600;
}
.rail-who-copy { display: grid; min-width: 0; line-height: 1.25; }
.portal .rail-who strong { font-size: var(--text-sm); font-weight: 500; }
.portal .rail-who-copy > span { font-size: var(--text-xs); text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--rail-text); }
@media (min-width: 40rem) {
  html.rail-collapsed .rail-context, html.rail-collapsed .rail-label, html.rail-collapsed .rail-who-copy { display: none; }
}
html.rail-collapsed .portal .rail-who { justify-content: center; }

/* ---------- shell: top bar ---------- */

.portal .portal-topbar {
  min-height: 3.25rem; gap: 0.5rem; background: var(--bg); border-bottom: 1px solid var(--divider);
}
.portal .portal-scope { font-size: var(--text-xs); margin: 0; }
.portal .portal-scope a { font-weight: 500; }
.portal .portal-crumb { font-size: var(--text-sm); }
.portal .portal-crumb strong { font-weight: 500; }
.portal .rail-toggle { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); }
.topbar-icon {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm);
  color: var(--text-muted); text-decoration: none;
}
.topbar-icon:first-of-type { margin-left: auto; }
.topbar-icon:hover { background: var(--surface-2); color: var(--text); }
.topbar-icon .ico { width: 1.125rem; height: 1.125rem; }
.portal .portal-topbar .theme-control { margin-left: 0.25rem; }
.portal .portal-topbar > .theme-control:first-of-type { margin-left: auto; }
.portal .topbar-icon ~ .theme-control { margin-left: 0.25rem; }
@media (pointer: coarse) { .topbar-icon, .portal .rail-toggle { width: 2.75rem; height: 2.75rem; } }

/* ---------- page header ---------- */

.portal main.dashboard-main { max-width: 72rem; padding-top: 1.75rem; }
.portal :is(.page-head, .board-head) {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1rem;
  max-width: none; margin: 0 0 1.5rem;
}
.portal .page-head > :is(h1, div) { min-width: 0; }
.portal :is(.page-head, .board-head) h1 { font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.015em; }
.portal :is(.page-head .sub, .board-head .board-when) {
  flex-basis: 100%; order: 2; margin: 0.25rem 0 0; color: var(--text-muted); font-size: 0.875rem; line-height: 1.5;
}
.portal .page-head > div > .sub { flex-basis: auto; }
.portal .breadcrumb { margin: 0 0 0.75rem; font-size: var(--text-sm); color: var(--text-muted); }
.portal .breadcrumb a { color: var(--text-muted); font-weight: 400; text-decoration: none; }
.portal .breadcrumb a:hover { color: var(--text); }

/* Decorated hero bands become ordinary compact headers. */
.portal :is(.setup-hero, .created-hero, .command-hero) {
  display: block; max-width: none; margin: 0 0 1.5rem; padding: 0;
  border: 0; border-radius: 0; background: none; color: var(--text); box-shadow: none;
}
.portal :is(.setup-hero, .created-hero, .command-hero) h1 {
  max-width: none; margin: 0.25rem 0; font-size: 1.75rem; line-height: 1.2;
}
.portal :is(.setup-hero, .created-hero, .command-hero) :is(p, .eyebrow) { color: var(--text-muted); }
.portal .setup-aside { margin-top: 1rem; border-color: var(--border); background: var(--surface); }
.portal .setup-aside strong { color: var(--text); }

/* ---------- surfaces ---------- */

.portal :is(.panel, .form-panel, .next-steps, .launch-bar, .credential-reveal, .empty-workspace) {
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: none;
}
.portal .panel { margin-bottom: 1rem; overflow: hidden; }
.portal .panel > header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 1.125rem; background: transparent; border-bottom: 1px solid var(--divider);
}
.portal .panel > header :is(h2, h3) {
  margin: 0; color: var(--text); font-family: var(--font-ui);
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; text-transform: none;
}
.portal .panel-body { padding: 1.125rem; }
.portal .section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin: 1.75rem 0 0.75rem; padding: 0; background: none; border: 0;
}
.portal .section-head h2 {
  font-size: 0.9375rem; font-weight: 600; text-transform: none; letter-spacing: -0.005em; color: var(--text);
}
.portal .section-head a { font-size: var(--text-sm); color: var(--text-muted); text-decoration: none; }
.portal .section-head a:hover { color: var(--text); }
.portal .form-panel > header { background: transparent; border-bottom: 1px solid var(--divider); }
.portal .form-panel-dark { --text: inherit; --text-muted: inherit; background: var(--surface); color: var(--text); border-color: var(--border); }
.portal .form-panel-dark > header { background: transparent; border-color: var(--divider); }
.portal .form-panel-dark :is(.field, .check-field) { color: var(--text); }
.portal .form-panel-dark :is(header div > p, .field small, .check-field small) { color: var(--text-muted); }
.portal .form-panel-dark .field input { background: var(--field-bg); border-color: var(--field-border); color: var(--text); }
.portal .step-number { background: var(--surface-2); color: var(--text-muted); font-weight: 600; }

/* ---------- figures ---------- */

.portal .stat-grid { gap: 0.75rem; margin-bottom: 1rem; }
.portal .stat, .portal .overview-stat {
  border: 1px solid var(--border); border-top-width: 1px; border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: none; color: var(--text);
}
.portal .stat .label, .portal .overview-stat-label {
  font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-muted);
}
.portal .stat .value, .portal .overview-stat .figure, .portal .confirmed-value strong {
  font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.02em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.portal .stat .value { font-size: 1.75rem; }
.portal :is(.stat.clear, .stat.attention, .stat.critical, .stat.info) { border-top: 1px solid var(--border); background: var(--surface); }
.portal :is(.stat.attention, .stat.critical, .stat.clear, .stat.info) .label::before,
.portal :is(.overview-stat-needs-you, .overview-stat-booked, .overview-stat-talking) .overview-stat-label::before {
  content: ""; display: inline-block; width: 0.4375rem; height: 0.4375rem; margin-right: 0.4375rem;
  border-radius: 50%; vertical-align: 0.0625rem; background: var(--text-muted);
}
.portal :is(.stat.attention, .overview-stat-needs-you) :is(.label, .overview-stat-label)::before { background: var(--warn); }
.portal .stat.critical .label::before { background: var(--danger); }
.portal :is(.stat.clear, .overview-stat-booked) :is(.label, .overview-stat-label)::before { background: var(--ok); }
.portal :is(.stat.info, .overview-stat-talking) :is(.label, .overview-stat-label)::before { background: var(--info); }
.portal .overview-stat { min-height: 6.5rem; }
.portal .overview-stat:hover { background: var(--hover); border-color: var(--border-strong); }
.portal :is(.overview-stat-needs-you, .overview-stat-booked) .figure { color: var(--text); }
.portal .overview-stat .figure { font-size: 1.875rem; }
.portal .confirmed-value strong { font-size: 2rem; }

/* ---------- tables and lists ---------- */

.portal .table-scroll { border-radius: 0; }
.portal table.grid { border-collapse: collapse; }
.portal table.grid thead th {
  background: transparent; color: var(--text-muted); font-family: var(--font-ui);
  font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; text-transform: none;
  border-bottom: 1px solid var(--border);
}
.portal table.grid :is(th, td) { padding: 0.75rem 1.125rem; border-color: var(--divider); }
.portal table.grid tbody tr:hover td { background: var(--hover); }
.portal :is(.ticket, .job-card, .client-card) { border-color: var(--border); }
.portal .ticket { background: var(--surface); border-radius: var(--radius-lg); }
.portal .ticket:hover { background: var(--hover); }
.portal .job-card { border-radius: var(--radius-lg); background: var(--surface); border-left-width: 1px; }
.portal .client-list { border-top: 1px solid var(--border); }
.portal .client-card { border-bottom: 1px solid var(--border); }
.portal .client-card h3 { font-size: 1.0625rem; line-height: 1.3; }
.portal .client-card:hover { padding-inline: 0; background: none; }

/* ---------- status ---------- */

.portal :is(.badge, .pill, .setup-status) {
  border-radius: 999px; font-size: var(--text-xs); font-weight: 500; letter-spacing: 0; text-transform: none;
  padding: 0.125rem 0.5rem;
}

/* ---------- controls ---------- */

.portal :is(button, .button, .action-button):not(.rail-item):not(.rail-toggle):not(.theme-control):not(.chip) {
  min-height: var(--control-h); padding: 0 0.875rem; border-radius: var(--radius);
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0;
}
.portal :is(button, .button):not(.primary):not(.action-button):not(.danger-button):not(.rail-item):not(.rail-toggle):not(.theme-control):not(.chip):not(.link-button) {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
}
.portal :is(button, .button):not(.primary):not(.action-button):not(.danger-button):not(.rail-item):not(.rail-toggle):not(.theme-control):not(.chip):not(.link-button):hover {
  background: var(--surface-3); border-color: var(--border-strong);
}
.portal .field { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; color: var(--text); }
.portal :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  min-height: var(--control-h); border: 1px solid var(--field-border); border-radius: var(--radius);
  background: var(--field-bg); color: var(--text); font-family: var(--font-ui); font-size: 0.875rem; font-weight: 400;
}
.portal textarea { min-height: 5rem; }
.portal :is(input, select, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.portal .field small { font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); }
.portal .filter-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; padding: 0; margin: 0 0 0.75rem;
  background: none; border: 0;
}
.portal .filter-bar .field { display: grid; gap: 0.375rem; margin: 0; }
.portal .filter-bar label { color: var(--text-muted); font-size: var(--text-sm); font-weight: 400; text-transform: none; }
.portal .filter-bar .filter-search { flex: 1 1 16rem; }
.portal .filter-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0 0 1rem; }
.portal .chip {
  display: inline-flex; align-items: center; min-height: 1.875rem; padding: 0 0.75rem;
  border: 1px solid var(--border); border-radius: 999px; background: transparent;
  color: var(--text-muted); font-size: var(--text-sm); text-decoration: none;
}
.portal .chip:hover { background: var(--surface-2); color: var(--text); }
.portal :is(.chip.is-active, .chip-on) { background: var(--surface-3); border-color: var(--border-strong); color: var(--text); }
.portal .pager { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }

/* ---------- notices ---------- */

.portal :is(.notice, .notice-good, .notice-bad, .form-error, .form-success) {
  border-radius: var(--radius); font-size: var(--text-sm); font-weight: 400;
}

/* ---------- sentence case everywhere ---------- */

/* Earlier sheets uppercased many small labels with wide tracking. A console
   reads in sentence case; status keeps its meaning through colour and words. */
.portal :is(.dashboard-main, .rail, .portal-topbar) * { text-transform: none; }
.portal :is(dt, .msg-who, .money-row dt, .credential-reveal dt, .evidence-path span, .pulse-grid span,
  .operator-menu-title, .rail-who span, .auth-soon, .bill-cell dt) {
  font-family: var(--font-ui); letter-spacing: 0; font-size: var(--text-sm); font-weight: 400; color: var(--text-muted);
}
.portal main .section-head { padding: 0; }
.portal .rail-who strong { letter-spacing: 0; }

/* One header pattern: title and description on the left, actions on the right. */
.portal .page-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 1rem;
}
.portal .page-head > :is(h1, .sub, div:first-child) { grid-column: 1; }
.portal .page-head > .sub { order: 0; margin-top: 0.25rem; }
.portal .page-head > :not(h1):not(.sub):not(div:first-child):not(.record-facts):not(.record-status) {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end;
}
.portal .row-sub.mono { font-family: var(--font-ui); font-size: var(--text-sm); }

/* ---------- sign-in ---------- */

.portal-auth :is(h1, h2) { font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.015em; }
.portal-auth :is(input:not([type="checkbox"]):not([type="radio"])) {
  min-height: var(--control-h); border-radius: var(--radius); border: 1px solid var(--field-border); background: var(--field-bg);
}
.portal-auth button { border-radius: var(--radius); font-weight: 500; }
.portal .page-head > .button { align-self: end; margin-bottom: 0.25rem; }
@media (max-width: 40rem) {
  .portal .panel > header { flex-direction: row; justify-content: space-between; text-align: left; }
}
.portal .services-editor tbody tr:nth-child(even) td { background: none; }

/* ---------- records: a name, then labelled fields ---------- */

/* A field label names the value under it: small and quieter than the value,
   but never faint. Icons sit in the label so the three money figures can be
   told apart at a glance; the word stays for anyone who cannot see the icon. */
:root { --text-label: #4a4a4a; }
@media screen { :root[data-theme="dark"] { --text-label: #bdbdbd; } }

.portal .job-card { display: grid; gap: 0.875rem; padding: 1.125rem 1.25rem; }
.portal .job-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.portal .customer-name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.portal .customer-ref {
  padding: 0.0625rem 0.4375rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em;
}
.portal .job-status { font-weight: 500; }
.portal .job-status.pill-open { background: var(--warn-soft); color: var(--warn); }
.portal .job-pending .job-status { background: var(--warn-soft); color: var(--warn); }
.portal .job-completed .job-status { background: var(--ok-soft); color: var(--ok); }
.portal :is(.job-cancelled, .job-no_show) .job-status { background: var(--danger-soft); color: var(--danger); }

.portal :is(.job-facts, .money-row, .record-facts) { display: grid; gap: 0.625rem; margin: 0; }
.portal :is(.job-facts, .record-facts) { grid-template-columns: repeat(auto-fit, minmax(12rem, max-content)); column-gap: 2.5rem; }
.portal .money-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portal .money-row > div {
  padding: 0.75rem 0.875rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2);
}
.portal :is(.job-facts, .money-row, .record-facts) dt, .portal .field-label {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-family: var(--font-ui); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--text-label);
}
.portal :is(.job-facts, .money-row, .record-facts) dt .ico, .portal .field-label .ico { width: 0.9375rem; height: 0.9375rem; flex: none; opacity: 0.9; }
.portal :is(.job-facts, .money-row, .record-facts) dd {
  margin: 0.25rem 0 0; font-size: 0.9375rem; font-weight: 500; color: var(--text);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.portal :is(.job-facts, .record-facts) dd.mono { font-family: var(--font-mono); font-size: 0.875rem; }
.portal .money-actual dt .ico { color: var(--ok); opacity: 1; }
.portal .money-actual dd { font-weight: 600; }
.portal .is-empty { color: var(--text-muted); font-weight: 400; font-size: 0.875rem; }
.portal .job-card > :is(.row-sub, .problem-body) { margin: 0; }
.portal .job-form-wrap { margin: 0; padding-top: 0.75rem; border-top: 1px solid var(--divider); }
.portal .job-form-wrap summary { color: var(--text-label); font-size: var(--text-sm); font-weight: 500; }
@media (max-width: 40rem) {
  .portal .money-row { grid-template-columns: 1fr; }
  .portal :is(.job-facts, .record-facts) { grid-template-columns: 1fr; }
}
.portal .panel > header { flex-direction: row; flex-wrap: wrap; align-items: baseline; text-align: left; gap: 0.25rem 1rem; }

/* An inline value led by its icon, for table cells and compact rows. */
.portal .with-icon { display: inline-flex; align-items: center; gap: 0.375rem; }
.portal .with-icon > .ico { width: 0.9375rem; height: 0.9375rem; flex: none; color: var(--text-label); }
.portal .page-head > :is(.record-facts, .record-status) { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; align-self: start; margin-top: 0.75rem; }
.portal .record-status { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; }

/* Records in lists: Inbox rows, Overview tickets, client cards. */
.portal .inbox-customer { gap: 0.5rem; }
.portal .inbox-customer .customer-name { font-size: 0.9375rem; }
.portal .inbox-customer:hover .customer-name { text-decoration: underline; }
.portal .inbox-phone { margin-top: 0.375rem; color: var(--text); font-size: var(--text-sm); }
.portal .inbox-summary { color: var(--text-label); font-size: var(--text-sm); margin-top: 0.375rem; }
.portal .inbox-handling, .portal .inbox-channel { color: var(--text); font-size: var(--text-sm); }
.portal .inbox-table th { padding-block: 0.625rem; }
.portal .ticket-main { display: grid; gap: 0.25rem; }
.portal .ticket .customer-name { font-size: 0.9375rem; }
.portal .ticket-why { color: var(--text-label); font-size: var(--text-sm); }
.portal .ticket-urgent .ticket-why > .ico { color: var(--danger); }
.portal .ticket-age { color: var(--text-label); font-size: var(--text-sm); }
.portal .bill-cell dd { margin: 0.25rem 0 0; font-weight: 500; color: var(--text); }
.portal .client-card .customer-line { margin: 0 0 0.75rem; }
.portal .client-card .customer-name { font-size: 1.0625rem; text-decoration: none; }
.portal .client-card .customer-name:hover { text-decoration: underline; color: var(--text); }
.portal .client-card .record-facts { margin-bottom: 0.625rem; column-gap: 2rem; }
.portal .client-detail { color: var(--text-label); font-size: var(--text-sm); }
.portal .inbox-phone { display: flex; width: fit-content; }
.portal .inbox-table tbody tr, .portal .inbox-table tbody tr:nth-child(even) td { background: none; }
@media (max-width: 48rem) {
  .portal .inbox-table td[data-label]:not(:first-child)::before { color: var(--text-label); font-size: 0.75rem; font-weight: 500; align-self: center; }
  .portal .inbox-table td[data-label='Handling'] { align-items: center; }
  .portal .inbox-table td[data-label='Handling'] .inbox-handling { flex: 0 1 auto; margin-left: 0; margin-top: 0; }
}


/* ---------- filters ---------- */

.portal .clear-filters, .portal .filter-toggle { display: inline-flex; align-items: center; gap: 0.375rem; }
.portal .clear-filters { align-self: end; color: var(--text-muted); background: transparent !important; border-color: transparent !important; }
.portal .clear-filters:hover { color: var(--text); background: var(--surface-2) !important; }
.portal :is(.clear-filters, .filter-toggle) .ico { width: 1rem; height: 1rem; }
.portal .inbox-options { border-color: var(--border); border-radius: var(--radius); background: var(--surface); }
.portal .inbox-options > summary.filter-toggle {
  display: flex; min-height: var(--control-h); padding: 0 0.875rem; list-style: none; cursor: pointer;
  font-size: var(--text-sm); font-weight: 500; color: var(--text);
}
.portal .inbox-options > summary::-webkit-details-marker { display: none; }
.portal .inbox-options[open] > summary { border-bottom: 1px solid var(--divider); }
.portal .client-filters label, .portal .inbox-filters label { color: var(--text); }

/* ---------- client cards: whole-card hover ---------- */

.portal .client-list { display: grid; gap: 0.75rem; border-top: 0; }
.portal .client-card {
  padding: 1.25rem 1.375rem; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.portal .client-card:hover, .portal .client-card:focus-within {
  transform: translateY(-2px); padding-inline: 1.375rem;
  border-color: var(--border-strong); background: var(--surface-2);
  box-shadow: 0 10px 30px rgb(0 0 0 / 35%), 0 0 0 1px rgb(255 255 255 / 3%);
}
:root:not([data-theme="dark"]) .portal .client-card:hover { box-shadow: 0 10px 28px rgb(0 0 0 / 10%); }
.portal .client-card-actions { align-self: center; }
@media (prefers-reduced-motion: reduce) {
  .portal .client-card { transition: none; }
  .portal .client-card:hover { transform: none; }
}

/* Quiet scrollbars: the panel scrolls, but the bar only shows on hover. */
.portal .rail { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.portal .rail:hover { scrollbar-color: var(--border-strong) transparent; }
.portal .rail::-webkit-scrollbar { width: 6px; }
.portal .rail::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.portal .rail:hover::-webkit-scrollbar-thumb { background: var(--border-strong); }
.portal .inbox-views { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
.portal .inbox-views a { min-height: 2.25rem; border-color: var(--border); border-radius: 999px; font-size: var(--text-sm); }
.portal .inbox-views a[aria-current] { box-shadow: none; border-color: var(--border-strong); background: var(--surface-3); }
.portal .portal-topbar { flex-wrap: nowrap; }
.portal .portal-location { overflow: hidden; }
.portal .portal-crumb, .portal .portal-scope { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal .ticket-why { white-space: normal; align-items: flex-start; }
.portal .ticket-why > .ico { margin-top: 0.125rem; }
@media (max-width: 39.99rem) {
  .portal .portal-topbar { gap: 0.25rem; padding-inline: 0.75rem; }
  .portal .portal-crumb > span:first-child, .portal .portal-crumb > .ico { display: none; }
}