/* ── Design Tokens ─────────────────────────────────────────────────────────
   The canonical design tokens (--gray-*, --fs-*, --space-*, --bg, --surface,
   --radius, --shadow, --success/-warn/-danger, --z-*, --font, motion, etc.)
   now come from the vendored @nobul/ui tokens.css, linked BEFORE this file in
   index.html. The values are identical to what this block used to define, so
   rendering is unchanged. Only recruitment-specific tokens remain here. ──── */
:root {
  /* Brand — Recruitment Hub deep orange.
     The variable is named --navy for historical reasons (it used to be
     navy blue before the orange rebrand). The value is the brand bar
     colour used by .app-header + .nav-bar. Set to the same orange
     used by the splash screen and browser theme colour. */
  --navy:       var(--brand-nav, #ce9434);
  --navy-dark:  #ce9434;
  --primary:    var(--brand-ochre, #B66B2D);
  --primary-dk: #a87724;
  --primary-light: #e6b859;
  --primary-bg:    color-mix(in srgb, #ce9434 12%, transparent);

  /* Focus ring — recruitment focuses on --primary (ochre), NOT the shared
     --brand-accent that tokens.css wires --focus-color to; --focus-ring-rgba
     is the ochre glow and stays app-specific (tokens.css leaves it per-app). */
  --focus-color:      var(--primary);
  --focus-ring-rgba:  rgba(206,148,52,.15);
}

/* ── Dark mode ────────────────────────────────────────────── */
.dark a { color: #6ee7b7; }
.dark .badge-draft { background: var(--gray-200); color: var(--gray-700); border-color: var(--gray-300); }
.dark .badge-closed { background: var(--gray-200); color: var(--gray-600); }

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}

/* ── Header ────────────────────────────────────────────────── */
.app-header {
  display: flex;
  align-items: center;
  background: var(--navy);
  color: #fff;
  flex-shrink: 0;
  z-index: 20;
}
.header-left  { display: flex; align-items: center; gap: 10px; }
.header-right { margin-left: auto; }
.hub-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.07);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}

/* Credit Checks */
.cr-page {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.cr-page-head,
.cr-toolbar,
.cr-detail-head,
.cr-modal-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cr-page-head {
  justify-content: space-between;
}

.cr-page-head h2 {
  margin: 0 0 3px;
  font-size: 20px;
  line-height: 1.2;
}

.cr-page-head span,
.cr-table small,
.cr-result span,
.cr-selected-card span,
.cr-detail-grid span,
.cr-outcome span,
.cr-note span,
.cr-client-card span,
.cr-client-card small,
.cr-modal-subtitle,
.cr-muted {
  color: var(--gray-500);
  font-size: 11px;
}

.cr-toolbar {
  align-items: stretch;
  flex-wrap: wrap;
}

.cr-toolbar .form-control {
  max-width: 260px;
}

.cr-table-wrap {
  overflow: auto;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--surface);
}

.cr-table {
  width: 100%;
  border-collapse: collapse;
}

.cr-table th,
.cr-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-100);
  text-align: left;
  vertical-align: middle;
}

.cr-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--gray-50);
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 800;
}

.cr-table tbody tr {
  border-left: 4px solid var(--gray-200);
  cursor: pointer;
}

.cr-table tbody tr:hover,
.cr-table tbody tr:focus {
  background: var(--gray-50);
  outline: none;
}

.cr-table strong,
.cr-table small {
  display: block;
}

.cr-table a,
.cr-ja-link {
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.cr-table a:hover,
.cr-ja-link:hover {
  text-decoration: underline;
}

.cr-stage-submitted { border-left-color: #d97706 !important; }
.cr-stage-in_review { border-left-color: #2563eb !important; }
.cr-stage-needs_info { border-left-color: #f59e0b !important; }
.cr-stage-completed { border-left-color: #059669 !important; }
.cr-stage-cancelled { border-left-color: #dc2626 !important; }

.cr-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cr-form label {
  display: grid;
  gap: 5px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-700);
}

.cr-client-lookup,
.cr-full {
  grid-column: 1 / -1;
}

.cr-results {
  display: grid;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--surface, #fff);
}

.cr-results[hidden] {
  display: none;
}

.cr-result {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--gray-100);
  background: transparent;
  color: var(--gray-900);
  text-align: left;
  cursor: pointer;
}

.cr-result:hover {
  background: var(--gray-50);
}

.cr-selected-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
}

.cr-selected-card > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cr-ja-link { align-self: center; white-space: nowrap; }

.cr-help {
  color: var(--gray-500);
  font-size: 11px;
  font-weight: 500;
}

.cr-file-label {
  align-items: stretch;
}

.cr-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 14px;
  border: 1px dashed var(--gray-300, #d1d5db);
  border-radius: 8px;
  background: var(--gray-50);
  color: var(--gray-700);
  cursor: pointer;
}

.cr-dropzone:hover,
.cr-dropzone.is-dragover {
  border-color: #2563eb;
  background: #eff6ff;
}

.cr-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.cr-dropzone div {
  display: grid;
  gap: 3px;
}

.cr-dropzone strong {
  font-size: 13px;
}

.cr-dropzone span {
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 500;
}

.cr-check {
  align-content: end;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.cr-status {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
}

.cr-status-submitted {
  background: #fffbeb;
  color: #92400e;
}

.cr-status-in_review {
  background: #dbeafe;
  color: #1d4ed8;
}

.cr-status-completed {
  background: #dcfce7;
  color: #166534;
}

.cr-status-needs_info {
  background: #fef3c7;
  color: #92400e;
}

.cr-status-cancelled {
  background: #fee2e2;
  color: #991b1b;
}

.cr-urgent {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin-left: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 11px;
  font-weight: 800;
}

.cr-modal {
  width: min(860px, 94vw);
  max-width: 860px;
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
}

.cr-modal .modal-header h3 {
  margin: 0;
}

.cr-modal .modal-body {
  flex: 1;
  overflow-y: auto;
}

.cr-modal-footer {
  justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid var(--gray-200);
}

.cr-detail-head {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 12px;
}

.cr-client-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #eff6ff;
}

.cr-client-card > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cr-client-card strong {
  color: var(--gray-900);
  font-size: 15px;
}

.cr-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.cr-detail-grid div,
.cr-outcome,
.cr-note,
.cr-empty,
.cr-loading,
.cr-error {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--gray-50);
  padding: 10px;
}

.cr-detail-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.cr-detail-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.cr-outcome,
.cr-note {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.cr-outcome strong {
  font-size: 15px;
}

.cr-outcome p,
.cr-note p {
  margin: 0;
  color: var(--gray-700);
  font-size: 13px;
  line-height: 1.45;
}

.cr-empty,
.cr-loading,
.cr-error {
  color: var(--gray-500);
  font-size: 12px;
}

.cr-error {
  color: var(--danger, #b91c1c);
}

@media (max-width: 900px) {
  .cr-form,
  .cr-detail-grid {
    grid-template-columns: 1fr;
  }

  .cr-page-head,
  .cr-toolbar,
  .cr-client-card {
    align-items: stretch;
    flex-direction: column;
  }

  .cr-selected-card,
  .cr-modal-footer {
    flex-direction: column;
  }

  .cr-toolbar .form-control {
    max-width: none;
  }

  .cr-ja-link {
    align-self: flex-start;
  }
}

/* Reference Checks */
.rfc-header {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin: 0 0 16px;
}
.rfc-header > div:first-child,
.rfc-editor-title > div:first-child,
.rfc-target-card-head > div:first-child,
.rfc-subsection-head > div:first-child {
  min-width: 0;
}
.rfc-editor-title > div:first-child {
  flex: 1 1 240px;
}
.rfc-header h2 {
  font-size: 22px;
  margin: 0 0 4px;
}
.rfc-header h2,
.rfc-editor-title h3,
.rfc-target-card-head h3 {
  overflow: hidden;
  text-overflow: ellipsis;
}
.rfc-editor-title h3 {
  overflow-wrap: anywhere;
}
.rfc-header p,
.rfc-empty,
.rfc-loading,
.rfc-side-note,
.rfc-meta-list span,
.rfc-question-row span,
.rfc-result-card span,
.rfc-result-card small,
.rfc-summary-grid span,
.rfc-subsection-head span,
.rfc-answer-flags span {
  color: var(--text-muted);
}
.rfc-header-actions,
.rfc-row-actions,
.rfc-card-actions,
.rfc-side-actions,
.rfc-actions-large,
.rfc-search-row,
.rfc-section-head,
.rfc-question-head,
.rfc-question-options,
.rfc-bank-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rfc-header-actions,
.rfc-card-actions,
.rfc-side-actions,
.rfc-actions-large {
  justify-content: flex-end;
}
.rfc-table td.rfc-row-actions {
  display: table-cell;
  text-align: right;
  white-space: nowrap;
}
.rfc-row-actions-inner {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}
.rfc-editor-title,
.rfc-reference-section-head,
.rfc-subsection-head {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
.rfc-toolbar {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 180px) minmax(200px, 240px);
  margin-bottom: 14px;
}
.rfc-input,
.rfc-textarea,
.rfc-section-title,
.rfc-question-text {
  min-width: 0;
}
.rfc-label,
.rfc-grid label,
.rfc-admin-form label,
.rfc-consent-grid label,
.rfc-question label {
  color: var(--text);
  display: grid;
  font-size: 14px;
  font-weight: 700;
  gap: 6px;
}
.rfc-shell {
  display: grid;
  gap: 16px;
  grid-template-columns: 280px minmax(0, 1fr);
}
.rfc-side,
.rfc-main-panel,
.rfc-section,
.rfc-admin-card,
.rfc-question-row,
.rfc-script,
.rfc-candidate-card {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
}
.rfc-side,
.rfc-main-panel,
.rfc-admin-card,
.rfc-script,
.rfc-candidate-card {
  padding: 14px;
}
.rfc-subsection {
  border-top: 1px solid var(--gray-200);
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
}
.rfc-side {
  align-self: start;
  display: grid;
  gap: 12px;
}
.rfc-main-panel {
  display: grid;
  gap: 18px;
}
.rfc-locked-fields {
  border: 0;
  display: grid;
  gap: 18px;
  margin: 0;
  min-width: 0;
  padding: 0;
}
.rfc-stepper {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
}
.rfc-chevrons {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  margin: 0 0 16px;
}
.rfc-chevron {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  gap: 8px;
  min-height: 38px;
  min-width: 0;
  padding: 8px 10px;
  position: relative;
  text-align: left;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}
.rfc-chevron strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rfc-chevron span {
  align-items: center;
  background: var(--gray-100);
  border-radius: 999px;
  color: var(--text-muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  height: 22px;
  justify-content: center;
  width: 22px;
}
.rfc-chevron.done span {
  background: #dcfce7;
  color: #166534;
}
.rfc-chevron.active {
  background: var(--primary-bg);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  color: var(--text);
}
.rfc-chevron.active span {
  background: var(--primary);
  color: #fff;
}
.rfc-step-nav {
  align-items: center;
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 14px;
}
.rfc-step {
  background: var(--surface);
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  padding: 8px 12px;
  white-space: nowrap;
}
.rfc-step.active {
  background: #111827;
  border-color: #111827;
  color: #fff;
}
.rfc-candidate-card {
  display: grid;
  gap: 5px;
}
.rfc-kicker {
  color: #a16207;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rfc-meta-list {
  display: grid;
  gap: 9px;
}
.rfc-meta-list div,
.rfc-summary-grid div {
  display: grid;
  gap: 3px;
}
.rfc-grid.two,
.rfc-consent-grid,
.rfc-summary-grid,
.rfc-toggle-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rfc-grid.stacked {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
.rfc-consent-grid,
.rfc-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}
.rfc-results {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.rfc-results.compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.rfc-candidate-lookup,
.cvb-candidate-lookup,
.cvb-client-lookup,
.ap-lookup {
  position: relative;
}
.rfc-candidate-dropdown,
.cvb-candidate-dropdown,
.cvb-client-dropdown,
.ap-lookup-results {
  position: absolute;
  z-index: 1400;
  top: 44px;
  left: 0;
  right: 0;
  max-height: min(340px, 52vh);
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.rfc-candidate-dropdown:empty,
.cvb-candidate-dropdown:empty,
.cvb-client-dropdown:empty,
.ap-lookup-results:empty {
  display: none;
}
.rfc-result-card,
.rfc-result-pill,
.rfc-bank-item {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 4px;
  padding: 10px;
  text-align: left;
}
.rfc-result-card:hover,
.rfc-result-pill:hover,
.rfc-bank-item:hover {
  border-color: #ce9434;
}
.ap-lookup-result {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 4px;
  padding: 10px;
  text-align: left;
}
.ap-lookup-result:hover {
  border-color: #ce9434;
}
.ap-lookup-result strong,
.ap-lookup-result span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ap-lookup-result span,
.ap-lookup-empty {
  color: var(--text-muted);
  font-size: 12px;
}
.ap-lookup-empty {
  padding: 8px 10px;
}
.rfc-question-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: 270px minmax(0, 1fr);
}
.rfc-reference-workspace {
  display: grid;
  gap: 18px;
}
.rfc-question-bank,
.rfc-question-main {
  min-width: 0;
}
.rfc-bank-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 66vh;
  overflow: auto;
}
.rfc-section {
  margin-bottom: 16px;
  padding: 14px;
}
.rfc-section-head {
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.rfc-section-title {
  flex: 1 1 240px;
  font-weight: 800;
}
.rfc-question {
  border-top: 1px solid var(--gray-200);
  display: grid;
  gap: 10px;
  padding: 12px 0;
}
.rfc-reference-section {
  background: color-mix(in srgb, var(--surface) 92%, #f8fafc 8%);
  border-color: var(--gray-300);
  box-shadow: 0 2px 8px rgba(15,23,42,.05);
  padding: 0;
}
.rfc-reference-section-head {
  background: color-mix(in srgb, var(--gray-50) 84%, #ce9434 16%);
  border-bottom: 1px solid var(--gray-200);
  padding: 12px 14px;
}
.rfc-reference-section-head h3 {
  font-size: 15px;
  margin: 0;
}
.rfc-reference-section-head p {
  color: var(--text-muted);
  margin: 4px 0 0;
}
.rfc-reference-questions {
  display: grid;
  gap: 12px;
  padding: 14px;
}
.rfc-answer-card {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--gray-300);
  border-radius: 8px;
  padding: 14px;
}
.rfc-answer-card.answered {
  border-left-color: #22c55e;
}
.perm-research-question.skipped {
  background: var(--gray-50);
  border-left-color: var(--gray-400);
}
.rfc-answer-card.pulse {
  box-shadow: 0 0 0 3px rgba(206,148,52,.28);
}
.rfc-answer-question {
  display: grid;
  gap: 6px;
}
.rfc-answer-question strong {
  font-size: 14px;
  line-height: 1.45;
}
.rfc-answer-question p {
  color: var(--text-muted);
  font-size: 12px;
  margin: 0;
}
.rfc-answer-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rfc-answer-flags span,
.rfc-lock-pill {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
}
.rfc-answer-flags span:last-child {
  background: #fef3c7;
  border-color: #fde68a;
  color: #92400e;
}
.rfc-answer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rfc-skipped-state {
  background: #f3f4f6;
  border: 1px dashed var(--gray-300);
  border-radius: 6px;
  color: var(--text-muted);
  font-weight: 700;
  padding: 10px;
}
.rfc-progress-rail {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 190px);
  overflow: auto;
  padding: 12px;
  position: sticky;
  top: 14px;
}
.rfc-progress-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.rfc-progress-bar {
  background: var(--gray-100);
  border-radius: 999px;
  height: 7px;
  overflow: hidden;
}
.rfc-progress-bar span {
  background: #22c55e;
  display: block;
  height: 100%;
}
.rfc-progress-list {
  display: grid;
  gap: 12px;
}
.rfc-progress-section {
  display: grid;
  gap: 6px;
}
.rfc-progress-section > strong {
  font-size: 12px;
}
.rfc-progress-question {
  align-items: flex-start;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  display: grid;
  font-size: 12px;
  gap: 7px;
  grid-template-columns: 18px minmax(0, 1fr);
  line-height: 1.35;
  padding: 5px;
  text-align: left;
}
.rfc-progress-question:hover {
  background: var(--gray-50);
  color: var(--text);
}
.rfc-progress-question.done {
  color: var(--text);
}
.rfc-progress-check {
  align-items: center;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  display: inline-flex;
  font-size: 11px;
  height: 16px;
  justify-content: center;
  width: 16px;
}
.rfc-progress-question.done .rfc-progress-check {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}
.rfc-question-head {
  align-items: flex-start;
  flex-wrap: wrap;
}
.rfc-question-head .rfc-question-text {
  flex: 1 1 260px;
}
.rfc-question-options {
  flex-wrap: wrap;
}
.rfc-question-options .rfc-input {
  max-width: 260px;
}
.rfc-textarea.internal {
  background: color-mix(in srgb, var(--surface) 90%, #f59e0b 10%);
}
.rfc-warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #9a3412;
  margin-bottom: 12px;
  padding: 10px 12px;
}
.rfc-card-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.rfc-template-workbench,
.rfc-question-bank-workbench {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
}
.rfc-template-list,
.rfc-question-bank-workbench .rfc-admin-list {
  align-self: start;
  display: grid;
  gap: 8px;
  max-height: 76vh;
  overflow: auto;
}
.rfc-template-list-item,
.rfc-question-row {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 4px;
  padding: 10px;
  text-align: left;
}
.rfc-template-list-item strong,
.rfc-template-list-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.rfc-question-row {
  gap: 8px;
  padding: 12px;
}
.rfc-question-row > span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.rfc-template-list-item.active,
.rfc-question-row.active {
  border-color: #ce9434;
  box-shadow: inset 3px 0 0 #ce9434;
}
.rfc-template-editor,
.rfc-question-editor,
.rfc-primary-template-panel {
  min-width: 0;
}
.rfc-template-meta,
.rfc-template-builder,
.rfc-question-editor .rfc-admin-form {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
}
.rfc-template-section {
  border-left: 4px solid #ce9434;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
}
.rfc-section-title-wrap {
  display: grid;
  flex: 1 1 260px;
  gap: 2px;
  min-width: 0;
}
.rfc-section-title-wrap > span {
  color: var(--text-muted);
  font-size: 12px;
}
.rfc-drag {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: grab;
  display: inline-flex;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  letter-spacing: 0;
  min-width: 28px;
  user-select: none;
}
.rfc-drag:focus-visible,
.cvb-drag-handle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.rfc-drag:active {
  cursor: grabbing;
}
.rfc-dragging {
  opacity: .58;
  outline: 2px dashed #ce9434;
}
.rfc-drop-target {
  box-shadow: 0 0 0 2px rgba(206, 148, 52, .28);
}
.rfc-template-question-list {
  display: grid;
  gap: 10px;
}
.rfc-template-question {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-left: 3px solid #d1d5db;
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}
.rfc-template-question.locked {
  background: color-mix(in srgb, var(--gray-50) 86%, #fbbf24 14%);
  border-left-color: #ce9434;
}
.rfc-bank-search-panel {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.rfc-bank-results {
  display: grid;
  gap: 8px;
}
.rfc-question-card-settings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rfc-question-card-settings span {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1;
  padding: 5px 7px;
}
.rfc-configure-workspace {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
}
.rfc-configure-side {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 12px;
}
.rfc-config-card {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 14px;
}
.rfc-config-card h3,
.rfc-config-card p {
  margin: 0;
}
.rfc-config-card p {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.rfc-config-section-list {
  display: grid;
  gap: 6px;
}
.rfc-config-section-list button {
  align-items: center;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  text-align: left;
}
.rfc-config-section-list span {
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.rfc-settings-form {
  max-width: none;
}
.rfc-token-help {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
}
.rfc-token-help > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rfc-token {
  background: var(--surface);
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  padding: 4px 7px;
}
.rfc-token:hover {
  border-color: #ce9434;
}
.rfc-admin-card {
  display: grid;
  gap: 8px;
}
.rfc-admin-card h3 {
  margin: 0;
}
.rfc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rfc-tags span {
  background: var(--gray-100);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 11px;
  padding: 3px 7px;
}
.rfc-admin-list {
  display: grid;
  gap: 8px;
}
.rfc-admin-form {
  display: grid;
  gap: 14px;
  max-width: 980px;
}
.rfc-admin-form.rfc-settings-form {
  max-width: none;
}
.rfc-toggle {
  align-items: center;
  display: flex !important;
  flex-direction: row;
  gap: 10px !important;
}
.rfc-finalise {
  display: grid;
  gap: 18px;
}
.rfc-finalise-branding {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.rfc-finalise-branding label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
}
.rfc-target-toolbar,
.rfc-output-picker {
  display: grid;
  gap: 8px;
}
.rfc-target-list,
.rfc-summary-editor,
.rfc-summary-field-list {
  display: grid;
  gap: 12px;
}
.rfc-ai-meta,
.rfc-muted {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}
.rfc-ai-draft-toolbar {
  display: flex;
  justify-content: flex-start;
}
.rfc-summary-draft-grid {
  display: grid;
  gap: 10px 14px;
  grid-template-columns: minmax(280px, .95fr) minmax(340px, 1.05fr);
}
.rfc-summary-draft-head {
  color: var(--text);
  font-size: 14px;
  padding: 0 2px 2px;
}
.rfc-summary-draft-head-ai {
  color: var(--text-muted);
}
.rfc-summary-draft-head-final {
  color: var(--text);
}
.rfc-summary-pair-row {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(280px, .95fr) minmax(340px, 1.05fr);
  min-width: 0;
}
.rfc-summary-card {
  align-content: start;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  color: var(--text);
  display: grid;
  gap: 8px;
  min-height: 154px;
  padding: 12px;
}
.rfc-ai-summary-block {
  background: var(--gray-50);
  border-color: var(--gray-200);
}
.rfc-final-summary-block {
  background: #fff;
  border-color: #d6dee8;
  box-shadow: inset 3px 0 0 #ce9434;
}
.rfc-summary-card strong {
  color: var(--text);
  font-size: 12px;
}
.rfc-ai-summary-block p {
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0 0;
  white-space: pre-wrap;
}
.rfc-ai-summary-block .btn {
  align-self: end;
  justify-self: end;
  min-width: 92px;
}
.rfc-final-summary-block span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}
.rfc-final-summary-block textarea {
  min-height: 118px;
  resize: vertical;
}
.rfc-summary-recommendation {
  grid-column: 2;
  min-height: 0;
}
.rfc-target-card,
.rfc-output-option,
.rfc-config-subpanel {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
}
.rfc-target-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}
.rfc-target-card.active,
.rfc-output-option.active {
  border-color: #ce9434;
  box-shadow: inset 3px 0 0 #ce9434;
}
.rfc-target-card-head {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}
.rfc-target-card-head h3 {
  font-size: 15px;
  margin: 2px 0;
}
.rfc-target-card-head span,
.rfc-summary-editor label span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}
.rfc-output-option {
  align-items: center;
  color: var(--text);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 12px;
  text-align: left;
}
.rfc-output-option > button[data-select-target] {
  all: unset;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: grid;
  gap: 3px;
  min-width: 0;
}
.rfc-output-option > button[data-select-target]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.rfc-output-option span {
  color: var(--text-muted);
  font-size: 12px;
}
.rfc-summary-editor label {
  display: grid;
  gap: 6px;
}
.rfc-config-subpanel {
  display: grid;
  gap: 12px;
  padding: 12px;
}
.rfc-summary-field-row {
  align-items: end;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(100px, .8fr) minmax(150px, 1fr) minmax(180px, 1.4fr) auto auto auto;
  min-width: 0;
  padding: 10px;
}
.rfc-actions-large {
  flex-wrap: wrap;
}
.rfc-pdf-modal,
.rfc-history-modal {
  background: rgba(15, 23, 42, .72);
  display: none;
  inset: 0;
  padding: 22px;
  position: fixed;
  z-index: 1100;
}
.rfc-pdf-modal.open,
.rfc-history-modal.open {
  display: block;
}
.rfc-pdf-dialog {
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: min(900px, calc(100vh - 44px));
  margin: 0 auto;
  max-width: 980px;
  overflow: hidden;
}
.rfc-pdf-head {
  align-items: center;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
}
.rfc-pdf-dialog iframe {
  border: 0;
  height: 100%;
  width: 100%;
}
.rfc-history-dialog {
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  margin: 8vh auto 0;
  max-height: 78vh;
  max-width: 680px;
  overflow: hidden;
}
.rfc-history-list {
  display: grid;
  gap: 8px;
  overflow: auto;
  padding: 12px;
}
.rfc-history-event {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 10px;
}
.rfc-history-event span {
  color: var(--text-muted);
  font-size: 12px;
}

@media (max-width: 900px) {
  .rfc-header,
  .rfc-question-row,
  .rfc-search-row,
  .rfc-section-head,
  .rfc-question-head,
  .rfc-step-nav,
  .rfc-target-card-head {
    align-items: stretch;
    flex-direction: column;
  }
  .rfc-toolbar,
  .rfc-shell,
  .rfc-question-layout,
  .rfc-template-workbench,
  .rfc-question-bank-workbench,
  .rfc-configure-workspace,
  .rfc-summary-draft-grid,
  .rfc-summary-pair-row,
  .rfc-summary-field-row,
  .rfc-grid.two,
  .rfc-consent-grid,
  .rfc-summary-grid,
  .rfc-toggle-grid {
    grid-template-columns: 1fr;
  }
  .rfc-configure-side,
  .rfc-bank-search-panel {
    position: static;
  }
  .rfc-summary-recommendation {
    grid-column: 1;
  }
  /* .rfc-row-actions dropped from the mobile stretch: its buttons are now
     28px .btn-table/.btn-table-text row controls (button contract, Buttons
     In Tables) and must never be stretched full-width. */
  .rfc-header-actions,
  .rfc-side-actions,
  .rfc-card-actions,
  .rfc-target-toolbar,
  .rfc-output-picker,
  .rfc-actions-large {
    justify-content: stretch;
  }
  .rfc-header-actions .btn,
  .rfc-side-actions .btn,
  .rfc-card-actions .btn:not(.btn-table):not(.btn-table-text),
  .rfc-target-toolbar .btn,
  .rfc-actions-large .btn {
    width: 100%;
  }
}
.app-header .hub-link,
.app-header .hub-link:visited { color: #fff; }
.hub-link:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Auth chip / user menu now come from the shared @nobul/ui avatar menu
   (.nobul-avatar-* in vendor/nobul-ui ui.css); the old bespoke .auth-* and
   .view-as-* rules were removed with the markup. */
.app-brand {
  cursor: pointer;
}
.app-brand:focus-visible {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 2px rgba(255,255,255,.32);
}

.candidate-search-status {
  color: var(--text-muted);
  font-size: 14px;
  padding: 10px 12px;
}
/* Canonical button sizing, intent, loading, table actions and hover states are
   owned by the vendored @nobul/ui ui.css. */
.ai-warning-card {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #fde68a;
  border-radius: 8px;
  background: #fffbeb;
  color: #7c2d12;
  font-size: 12px;
  line-height: 1.4;
}
.ai-warning-card strong {
  color: #92400e;
  font-size: 12px;
}
.ai-warning-card span {
  color: #7c2d12;
  font-weight: 500;
}
/* Header icon buttons now use the vendored .header-icon-btn (white-on-
   translucent, white in BOTH themes) + NobulUI.HEADER_ICONS glyphs and
   mountThemeToggle — see .docs/nobul-header-standards.md. The old local
   white .btn-icon block and .dm-icon moon/sun swap lived here; .btn-icon
   now falls through to the vendored ui.css hierarchy button (neutral 32px
   surface icon button — the correct meaning outside the dark header bar). */

/* ── Nav Bar ──────────────────────────────────────────────── */
.nav-bar {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: transparent;
  flex-shrink: 0;
  z-index: 15;
}
.nav-section {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  border-right: 1px solid rgba(255,255,255,.08);
  height: 100%;
}
.nav-section:last-child { border-right: none; }
.nav-section-label {
  font-size: 9px; font-weight: 700; color: rgba(255,255,255,.3);
  text-transform: uppercase; letter-spacing: .08em;
  margin-right: 6px; white-space: nowrap;
}
.nav-segment { display: flex; gap: 1px; }
.nav-btn {
  background: transparent; border: none; color: rgba(255,255,255,.55);
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 6px 10px; border-radius: var(--radius-sm);
  cursor: pointer; white-space: nowrap;
  transition: all .12s var(--ease);
}
.nav-btn:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); }
.nav-btn.active { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }

/* ── Filter Bar ──────────────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  /* ui.css cascade guard: its .filter-bar adds flex-wrap:wrap + margin-bottom;
     recruitment's is a single-row sticky bar — re-assert the defaults. */
  flex-wrap: nowrap;
  margin-bottom: 0;
}
.search-wrap {
  position: relative;
  flex: 1;
  max-width: 320px;
}
.search-icon {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--gray-400); pointer-events: none;
}
.search-input {
  width: 100%; height: 32px; padding: 0 28px 0 30px;
  border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  font: inherit; font-size: 12px; background: var(--bg); color: var(--text);
  transition: border-color .15s;
}
.search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--focus-ring-rgba); }
.search-clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; background: none; border: none;
  color: var(--gray-400); font-size: 14px; cursor: pointer;
  display: none;
}
.search-input:not(:placeholder-shown) + .search-clear,
.search-wrap:focus-within .search-clear { display: block; }
/* Preserve the shared 32px dense-filter height while keeping the search box
   fluid instead of the generic filter width. */
.filter-bar .search-wrap .search-input {
  height: 32px; width: 100%; min-width: 0; max-width: none;
}
.filter-bar.store-orders-filter-bar {
  position: relative;
  z-index: 4;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.filter-bar.store-orders-filter-bar .search-input {
  background: var(--surface);
  border-color: var(--gray-300);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.store-orders-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.store-orders-filter-actions[hidden] {
  display: none;
}
.travel-extra-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.travel-consultant-filter { width: min(280px, 28vw); min-width: 210px; }
.travel-compact-filter { width: min(190px, 22vw); min-width: 150px; }
.travel-date-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.travel-date-filter .travel-date-input {
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  min-width: 118px;
  color-scheme: light;
}
.travel-date-filter .travel-date-input:focus { outline: none; }
.dark .travel-date-filter .travel-date-input { color-scheme: dark; }
.travel-completed-filter { white-space: nowrap; color: var(--text-muted); font-size: 14px; display: inline-flex; align-items: center; }
.travel-page-actions {
  flex: 0 0 auto;
  margin-bottom: 12px;
}
.travel-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.travel-table {
  min-width: 1180px;
}
.travel-table th {
  background: var(--surface-alt);
  background-clip: padding-box;
  box-shadow: 0 1px 0 var(--border), 0 5px 10px rgba(15, 23, 42, .06);
  z-index: 6;
}
.travel-table td.nowrap,
.travel-table th.nowrap,
.nowrap {
  white-space: nowrap;
}
.travel-table .travel-date-range {
  display: table-cell;
}
.travel-date-arrow {
  display: inline-block;
  margin: 0 7px;
  color: var(--text-muted);
  font-family: var(--font);
  font-weight: 700;
}
.travel-charge-account {
  color: var(--text);
}
.travel-comment-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  cursor: default;
  position: relative;
}
.travel-info-bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: default;
}
.travel-info-bubble:hover,
.travel-info-bubble:focus,
.travel-comment-count:hover,
.travel-comment-count:focus {
  border-color: var(--gray-300);
  outline: none;
}
.travel-info-bubble[data-tooltip]:hover::after,
.travel-info-bubble[data-tooltip]:focus::after,
.travel-comment-count[data-tooltip]:hover::after,
.travel-comment-count[data-tooltip]:focus::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 50;
  width: max-content;
  max-width: 320px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: pre-wrap;
  text-transform: none;
  letter-spacing: 0;
}
.travel-status-pill.travel-status-booked { background: color-mix(in srgb, #3b82f6 18%, var(--surface)); color: #1d4ed8; }
.travel-status-pill.travel-status-invoiced { background: color-mix(in srgb, #64748b 18%, var(--surface)); color: #475569; }
.travel-status-pill.travel-status-pending_deduction { background: color-mix(in srgb, #f59e0b 24%, var(--surface)); color: #92400e; }
.travel-status-pill.travel-status-deducted { background: color-mix(in srgb, #10b981 22%, var(--surface)); color: #047857; }
.travel-status-pill.travel-status-reversed { background: color-mix(in srgb, #ef4444 18%, var(--surface)); color: #b91c1c; }
.travel-status-pill.travel-status-cancelled { background: color-mix(in srgb, #6b7280 18%, var(--surface)); color: #374151; }
.travel-table tr.travel-row-status-booked td { background: color-mix(in srgb, #3b82f6 5%, var(--surface)); }
.travel-table tr.travel-row-status-pending_deduction td { background: color-mix(in srgb, #f59e0b 7%, var(--surface)); }
.travel-table tr.travel-row-status-deducted td { background: color-mix(in srgb, #10b981 6%, var(--surface)); }
.travel-table tr.travel-row:hover td { background: var(--surface-hover); }
.dark .travel-table-wrap {
  border-color: var(--gray-300);
  background: var(--surface);
}
.dark .travel-table th {
  background: #111827;
  box-shadow: 0 1px 0 var(--gray-300), 0 6px 14px rgba(0, 0, 0, .22);
}
.dark .travel-table td {
  border-bottom-color: var(--gray-300);
}
.dark .travel-table tr.travel-row-status-booked td { background: color-mix(in srgb, #3b82f6 14%, var(--surface)); }
.dark .travel-table tr.travel-row-status-pending_deduction td { background: color-mix(in srgb, #f59e0b 15%, var(--surface)); }
.dark .travel-table tr.travel-row-status-deducted td { background: color-mix(in srgb, #10b981 13%, var(--surface)); }
.dark .travel-table tr.travel-row-status-invoiced td { background: color-mix(in srgb, #64748b 13%, var(--surface)); }
.dark .travel-table tr.travel-row-status-reversed td { background: color-mix(in srgb, #ef4444 13%, var(--surface)); }
.dark .travel-table tr.travel-row-status-cancelled td { background: color-mix(in srgb, #6b7280 13%, var(--surface)); }
.dark .travel-table tr.travel-row:hover td { background: var(--surface-hover); }
.dark .travel-status-pill.travel-status-booked { background: color-mix(in srgb, #3b82f6 24%, var(--surface)); color: #93c5fd; }
.dark .travel-status-pill.travel-status-invoiced { background: color-mix(in srgb, #94a3b8 20%, var(--surface)); color: #cbd5e1; }
.dark .travel-status-pill.travel-status-pending_deduction { background: color-mix(in srgb, #f59e0b 26%, var(--surface)); color: #fcd34d; }
.dark .travel-status-pill.travel-status-deducted { background: color-mix(in srgb, #10b981 24%, var(--surface)); color: #6ee7b7; }
.dark .travel-status-pill.travel-status-reversed { background: color-mix(in srgb, #ef4444 24%, var(--surface)); color: #fca5a5; }
.dark .travel-status-pill.travel-status-cancelled { background: color-mix(in srgb, #94a3b8 18%, var(--surface)); color: #cbd5e1; }
.dark .travel-comment-count,
.dark .travel-info-bubble {
  border-color: var(--gray-300);
  background: var(--surface-alt);
  color: var(--text-muted);
}
.dark .travel-comment-count:hover,
.dark .travel-comment-count:focus,
.dark .travel-info-bubble:hover,
.dark .travel-info-bubble:focus {
  border-color: var(--gray-400);
  color: var(--text);
}
.dark .travel-info-bubble[data-tooltip]:hover::after,
.dark .travel-info-bubble[data-tooltip]:focus::after,
.dark .travel-comment-count[data-tooltip]:hover::after,
.dark .travel-comment-count[data-tooltip]:focus::after {
  border-color: var(--gray-300);
  background: #111827;
  color: var(--text);
}
.travel-line-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.travel-charge-type-mount .ss-wrap {
  min-width: 0;
  width: 100%;
}
.travel-comments-section { margin-top: 24px; }
.travel-comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.travel-comment {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  padding: 8px 10px;
}
.travel-comment-meta { font-size: 10px; color: var(--text-muted); margin-bottom: 3px; }
.travel-comment-body { white-space: pre-wrap; line-height: 1.4; }
.travel-comments-empty { color: var(--text-muted); font-size: 12px; padding: 8px 0; }
.travel-comment-compose { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; }

/* ── Main Content ─────────────────────────────────────────── */
.main-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: var(--space-4);
}
.main-content.main-content-temps {
  padding-top: 0;
}
.main-content.main-content-contained {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.view { display: none; }
.view.active { display: block; }
#travel-schedule-view.active,
#mining-candidates-view.active {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.card.card-visible { overflow: visible; }
.card-header {
  padding: 10px var(--space-4);
  font-size: var(--fs-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card-body { padding: var(--space-4); }

/* ── Stat Tiles ────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.stat-tile::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.stat-tile.green::before { background: var(--success); }
.stat-tile.amber::before { background: var(--warn); }
.stat-tile.red::before   { background: var(--danger); }
.stat-tile.blue::before  { background: #3b82f6; }
.stat-label { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: .04em; }
.stat-value { font-size: 26px; font-weight: 700; color: var(--text); margin-top: 4px; font-family: var(--font-mono); }
.stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono); }

/* ── Tables ────────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.data-table th {
  padding: 8px 12px;
  text-align: left;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2;
}
.data-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.data-table tr:hover td { background: var(--surface-hover); }
.data-table tr { cursor: pointer; transition: background .1s; }
.data-table td.mono { font-family: var(--font-mono); font-size: 11px; }
.data-table td.right, .data-table th.right { text-align: right; }

/* ── Status Badges ──────────────────────────────────────────
   Base badge — the two former `.badge {}` blocks (this one + the icon-layout
   block that used to live further down) are merged here. Recruitment keeps its
   compact 10px UPPERCASE pill look; @nobul/ui ui.css supplies the shared
   .badge-success/-warning/-danger/-info/-neutral tones (this file loads after
   ui.css, so recruitment's base wins). */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap;
  border: 0;  /* ui.css .badge adds a 1px transparent border; keep original size */
}
.badge svg { width: 9px; height: 9px; display: block; }
.badge-label { display: inline-block; }

/* Domain status badges mapped to the @nobul/ui tone system
   (nobul-badge-standards.md). The class NAMES stay (5 view files render them,
   untouched); each now composes the shared tone tokens instead of a bespoke
   colour, so "Rejected" reads the same across every Nobul app. Backgrounds
   move to the lighter standard tints; deep tone text is unchanged. */
.badge-draft            { background: var(--gray-100);   color: var(--gray-600); border: 1px solid var(--gray-200); }  /* neutral */
.badge-closed           { background: var(--gray-100);   color: var(--gray-600); border: 1px solid var(--gray-200); }  /* neutral */
.badge-submitted,
.badge-pending_approval { background: var(--info-bg);    color: #1e40af; }  /* info */
.badge-sent_to_payroll  { background: var(--info-bg);    color: #1e40af; }  /* info */
.badge-approved,
.badge-paid             { background: var(--success-bg); color: #065f46; }  /* success */
.badge-rejected         { background: var(--danger-bg);  color: #991b1b; }  /* danger */
.badge-finance_review   { background: var(--warn-bg);    color: var(--warn-text); }  /* warning */

.dark .badge-submitted,
.dark .badge-pending_approval { background: #1e3a5f; color: #93c5fd; }
.dark .badge-approved { background: #064e3b; color: #6ee7b7; }
.dark .badge-rejected { background: #7f1d1d; color: #fca5a5; }
.dark .badge-sent_to_payroll { background: #312e81; color: #a5b4fc; }
.dark .badge-paid { background: #064e3b; color: #6ee7b7; }
.dark .badge-finance_review { background: #78350f; color: #fcd34d; }

/* Canonical form labels, controls and compact sizing are owned by the
   vendored @nobul/ui ui.css. */
.nobul-select-inline {
  width: auto;
  min-width: 120px;
  display: inline-block;
}
input[type="date"].form-control { color-scheme: light; }
.dark input[type="date"].form-control { color-scheme: dark; }
.dark #temps-daily-view input[type="date"],
.dark #temps-clients-view input[type="date"],
.dark #temps-consultants-view input[type="date"] { color-scheme: dark; }

/* Checkboxes: styled entirely by vendor ui.css (--cb-size spec, 24px default,
   .checkbox-sm 18px dense). No local fork — see .docs/nobul-button-hierarchy.md. */
.checkbox-inline,
.rates-check,
.rates-mini-check,
.mining-shift-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  font-size: 14px;
}

/* SearchableSelect: context overrides */
.filter-bar .ss-wrap { min-width: 160px; }
.data-table .ss-wrap { min-width: 100px; width: auto; }

.rates-line-select-mount,
.rates-penalty-unit-select {
  min-width: 0;
}

.rates-line-group-select .ss-wrap,
.rates-line-item-select .ss-wrap,
.rates-line-basis-select .ss-wrap { min-width: 0; width: 100%; }
.rates-line-unit-select .ss-wrap,
.rates-penalty-unit-select .ss-wrap { min-width: 96px; }
.rates-list-status-select .ss-wrap { min-width: 150px; }
.rates-report-select .ss-wrap { min-width: 220px; max-width: 320px; }
.order-charge-card { position: relative; z-index: 30; }

/* Drop zone upload */
.drop-zone {
  position: relative;
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  cursor: pointer;
  overflow: hidden;
}
.drop-zone::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(5,150,105,.03) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .25s var(--ease);
  pointer-events: none;
}
.drop-zone:hover { border-color: var(--primary); }
.drop-zone:hover::before { opacity: 1; }
.drop-zone.drag-over {
  border-color: var(--primary);
  border-style: solid;
  background: rgba(5,150,105,.06);
  box-shadow: 0 0 0 3px rgba(5,150,105,.12);
}
.drop-zone.drag-over .drop-zone-prompt { opacity: 0; transform: scale(.96); }
.drop-zone.drag-over .drop-zone-active-text { opacity: 1; transform: translateY(0); }
.drop-zone.has-files { cursor: default; border-style: solid; border-color: var(--gray-200); padding: 12px; }
.drop-zone.has-files::before { display: none; }
.drop-zone-input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }

/* Prompt state */
.drop-zone-prompt {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.drop-zone.has-files .drop-zone-prompt { display: none; }
.drop-zone-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--success-bg); color: var(--primary);
  border-radius: 50%;
  transition: transform .2s var(--ease);
}
.drop-zone:hover .drop-zone-icon { transform: translateY(-2px); }
.drop-zone-text { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; color: var(--gray-500); }
.drop-zone-hint { font-size: 11px; color: var(--gray-400); }
.drop-zone-link {
  background: none; border: none; padding: 0;
  color: var(--primary); font-weight: 600; font-size: inherit;
  cursor: pointer; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.drop-zone-link:hover { border-bottom-color: var(--primary); }

/* Drag-over state overlay text */
.drop-zone-active-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; color: var(--primary);
  opacity: 0; transform: translateY(4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  pointer-events: none;
}
.drop-zone.has-files .drop-zone-active-text { display: none; }

/* Camera button (mobile only) */
.drop-zone-camera-btn {
  display: none; align-items: center; gap: 6px;
  padding: 6px 14px; margin-top: 2px;
  font-size: 12px; font-weight: 500; color: var(--gray-600);
  background: var(--surface); border: 1px solid var(--gray-200); border-radius: 20px;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.drop-zone-camera-btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
.drop-zone-camera-btn svg { color: var(--gray-500); }
@media (max-width: 600px) { .drop-zone-camera-btn { display: inline-flex; } }

/* File cards */
.drop-zone-files { display: flex; flex-direction: column; gap: 6px; }
@keyframes dropFileIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.drop-zone-card {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: var(--gray-50); border: 1px solid var(--gray-100);
  border-radius: var(--radius); position: relative;
  animation: dropFileIn .25s var(--ease) both;
  transition: background .15s;
}
.drop-zone-card:hover { background: var(--gray-100); }
.drop-zone-thumb {
  width: 42px; height: 42px; border-radius: 6px; overflow: hidden; flex-shrink: 0;
  background: var(--gray-200);
}
.drop-zone-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drop-zone-badge {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #fecaca, #fde8e8); color: #b91c1c;
  border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: .5px;
}
.drop-zone-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.drop-zone-name {
  font-size: 12px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drop-zone-size { font-size: 11px; color: var(--gray-400); }
.drop-zone-remove {
  width: 24px; height: 24px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 50%;
  font-size: 16px; line-height: 1; color: var(--gray-400); cursor: pointer;
  transition: background .15s, color .15s;
}
.drop-zone-remove:hover { background: var(--danger-bg); color: var(--danger); }
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.form-help { font-size: 11px; color: var(--gray-400); margin-top: 2px; }

/* ── Dialog ────────────────────────────────────────────────── */
.dialog-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: var(--overlay-bg);
  align-items: center; justify-content: center;
}
.dialog-overlay.open { display: flex; }
.dialog-box {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 24px; width: min(420px, 90vw);
  box-shadow: var(--shadow-lg);
}
.dialog-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.dialog-message { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.dialog-input, .dialog-textarea {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--gray-200); border-radius: var(--radius-sm);
  font: inherit; font-size: 13px; margin-bottom: 12px;
  background: var(--surface); color: var(--text);
}
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Detail Panel ─────────────────────────────────────────── */
.detail-overlay {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: var(--overlay-bg);
}
.detail-overlay.open { display: flex; justify-content: flex-end; }
.detail-panel {
  width: min(600px, 90vw); height: 100%;
  background: var(--surface); display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: slide-in .2s var(--ease);
}
@keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.detail-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.detail-panel-header h3 { font-size: 15px; font-weight: 700; }
.detail-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; }
.detail-panel:has(.rates-award-data),
.detail-panel:has(.rates-agreement-form),
.detail-panel:has(.rates-penalty-form) { width: min(1120px, 96vw); }

/* ── Modal ─────────────────────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 600;
  background: var(--overlay-bg);
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--surface); border-radius: var(--radius-lg);
  max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 15px; font-weight: 700; }
.modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
#order-new-modal-body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary-bg) 58%, var(--bg)) 0%, var(--bg) 280px);
}

.store-order-form {
  max-width: 740px;
  margin: 0 auto;
  padding: 10px 0 44px;
}
.store-order-form h2 {
  color: var(--text);
  font-size: var(--fs-4xl);
  font-weight: 750;
  letter-spacing: 0;
}
.store-order-hero {
  width: 100%;
  aspect-ratio: 7 / 4;
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #05080f;
  box-shadow: var(--shadow-sm);
}
.store-order-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.store-order-form > .card {
  position: relative;
  border-color: color-mix(in srgb, var(--primary) 16%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, var(--primary-bg)) 0%, var(--surface) 100%);
  box-shadow: 0 10px 26px rgba(17,24,39,.075), 0 1px 0 rgba(255,255,255,.78) inset;
}
.store-order-form > .card::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, #1769ff 0%, var(--primary) 100%);
}
.store-order-form > .card.card-visible {
  overflow: visible;
}
.store-order-form .form-control,
.store-order-form .ss-trigger {
  background: color-mix(in srgb, var(--surface-alt) 64%, var(--surface));
}
.store-order-form .order-item-option-picker .ss-wrap {
  min-width: 0;
}
.store-order-form .order-item-option-picker .ss-trigger {
  min-width: 0;
}
.store-order-form .order-item-qty {
  appearance: textfield;
}
.dark #order-new-modal-body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary-bg) 28%, var(--bg)) 0%, var(--bg) 280px);
}
.dark .store-order-form > .card {
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, #172033) 0%, var(--surface) 100%);
  box-shadow: 0 12px 28px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.04) inset;
}

/* ── Store Orders Watermark ───────────────────────────────── */
.store-orders-page {
  position: relative;
  min-height: calc(100vh - 160px);
  isolation: isolate;
}
.store-orders-page::before {
  content: '';
  position: fixed;
  top: 154px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('/assets/nobul-store-logo.webp?v=3a3ac5a18925');
  background-repeat: no-repeat;
  background-size: 100vw calc(100vh - 154px);
  background-position: center;
  opacity: .0675;
  filter: grayscale(1) contrast(1.12);
}
.store-orders-content {
  position: relative;
  z-index: 1;
}
.store-orders-table-card {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(1px);
}
.store-orders-empty-wrap {
  max-width: 560px;
  margin: 54px auto 0;
  padding: 0 16px;
}
.store-orders-empty-card {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(2px);
  box-shadow: var(--shadow-md);
}
.dark .store-orders-page::before {
  opacity: .099;
  filter: grayscale(1) contrast(1.16);
}
.dark .store-orders-table-card {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}
.dark .store-orders-empty-card {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
@media (max-width: 700px) {
  .store-order-form { padding-top: 0; }
  .store-order-hero { margin-bottom: 14px; }
  .store-orders-filter-actions {
    width: 100%;
    margin-left: 0;
  }
  .store-orders-filter-actions .btn {
    flex: 1;
  }
  .store-orders-empty-wrap {
    margin-top: 28px;
    padding: 0;
  }
  .store-orders-page::before {
    top: 132px;
    background-size: 100vw calc(100vh - 132px);
    background-position: center;
    opacity: .05;
  }
}

#settings-overlay .modal-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.settings-changelog-list { display: grid; gap: 12px; }
.settings-changelog-items { margin: 8px 0 0 18px; padding: 0; color: var(--text); line-height: 1.5; }
.settings-changelog-items li + li { margin-top: 6px; }

/* ── Toast ─────────────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 20px; right: 20px; z-index: 2000;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 12px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toast-in .25s var(--ease);
  max-width: 360px;
}
.toast-success { background: #059669; color: #fff; }
.toast-error   { background: #dc2626; color: #fff; }
.toast-info    { background: #3b82f6; color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── Progress Bar (claim detail) ──────────────────────────── */
.progress-bar {
  display: flex; align-items: flex-start; padding: 12px 0 20px; margin-bottom: 8px;
}
.step-node {
  display: flex; flex-direction: column; align-items: center; flex-shrink: 0;
}
.step-circle {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; transition: all .2s;
}
.step-done {
  background: var(--primary); color: #fff;
}
.step-current {
  background: transparent; color: var(--primary);
  border: 3px solid var(--primary);
  box-shadow: 0 0 0 4px var(--focus-ring-rgba);
}
.step-rejected {
  background: var(--danger); color: #fff;
  box-shadow: 0 0 0 4px var(--danger-ring-rgba);
}
.step-future {
  background: transparent; color: var(--gray-400);
  border: 2px solid var(--gray-300);
}
.step-label {
  font-size: 10px; font-weight: 600; text-align: center;
  margin-top: 6px; white-space: nowrap;
}
.step-label-done, .step-label-current { color: var(--primary); }
.step-label-rejected { color: var(--danger); }
.step-label-future { color: var(--gray-400); }
.step-line {
  flex: 1; height: 3px; min-width: 16px; margin-top: 15px; border-radius: 2px;
}
.step-line-done { background: var(--primary); }
.step-line-future { background: var(--gray-200); }

/* ── Notifications ────────────────────────────────────────── */
.notif-wrap { position: relative; }
.notif-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; font-size: 10px; font-weight: 700;
  background: var(--danger); color: #fff;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; line-height: 1;
}
.notif-panel {
  position: absolute; right: 0; top: 100%; margin-top: 4px;
  width: 320px; max-height: 400px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  z-index: 200;
}
.notif-header {
  padding: 10px 14px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.notif-item {
  padding: 10px 14px; border-bottom: 1px solid var(--gray-100);
  cursor: pointer; transition: background .1s;
}
.notif-item:hover { background: var(--surface-hover); }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: var(--success-bg); }
.notif-action { font-size: 12px; font-weight: 600; color: var(--text); }
.notif-meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.notif-bucket-label {
  padding: 6px 14px; font-size: 10px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em;
  background: var(--surface-alt); border-bottom: 1px solid var(--border);
}

/* ── Tick / Cross icons ──────────────────────────────────────── */
.icon-tick { color: var(--primary); font-weight: 700; font-size: 14px; }
.icon-cross { color: var(--gray-400); font-size: 14px; }

/* ── Pre-registered badge ────────────────────────────────────── */
.badge-prereg { background: var(--info-bg); color: #1e40af; }  /* info tone */
.dark .badge-prereg { background: #1e3a5f; color: #93c5fd; }

/* Temps daily report */
.temps-daily-page {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 24px;
}
.temps-daily-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.temps-title-block {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.temps-title-block h2 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
}
.temps-title-block span {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
}
.temps-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.temps-sync-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}
.temps-sync-live { color: var(--primary); }
.temps-owner-history { font-size: 13px; }
.temps-owner-history p { margin: 0 0 10px; }
.temps-owner-history-note { color: var(--text-muted); font-size: 12px; }
.temps-owner-history-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.temps-owner-history-search .search-input { flex: 1 1 260px; min-width: 0; padding: 0 10px; }
.temps-owner-history-table { max-width: 100%; max-height: 48vh; overflow: auto; }
.temps-owner-history-table table { min-width: 620px; }
.temps-owner-history-table th:first-child { min-width: 160px; }
.temps-owner-history-table tr { cursor: default; }
.temps-owner-history-table td { vertical-align: top; }
.temps-active-pill {
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.tt-content-frame {
  width: 100%;
  overflow: clip;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.temps-date-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  box-shadow: 0 8px 14px rgba(15, 23, 42, .12);
  transform: translateZ(0);
}
.temps-date-bar::before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -16px;
  height: 16px;
  background: var(--bg);
  pointer-events: none;
}
.temps-date-controls {
  display: grid;
  grid-template-columns: 32px minmax(170px, 1fr) 32px 64px;
  gap: 6px;
  align-items: center;
}
.temps-date-controls input[type="date"] {
  height: 32px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  text-align: center;
}
.temps-date-step,
.temps-today-btn {
  height: 32px;
  min-width: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}
.temps-date-step {
  display: flex;
  align-items: center;
  justify-content: center;
}
.temps-today-btn {
  font-size: 12px;
  font-weight: 700;
}
.temps-filter-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(3, minmax(160px, 220px));
  gap: 8px;
  align-items: center;
}
.temps-filter-row .search-input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 11px;
  font-size: 13px;
}
.temps-filter-row > .ss-field,
.temps-filter-row .ss-wrap {
  width: 100%;
  min-width: 0;
}
.temps-daily-state {
  padding: 40px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}
.tt-table-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: clip;
  background: var(--surface);
}
.tt-table-wrap-teams,
.tt-table-wrap-placements {
  max-width: none;
}
.tt-table-wrap-placements {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.tt-teams-table,
.tt-placements-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.tt-placements-table {
  min-width: 800px;
}
.tt-teams-table th,
.tt-placements-table th {
  position: sticky;
  top: 0;
  z-index: 9;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.tt-number-col,
.tt-date-col,
.tt-number-cell,
.tt-date-cell {
  text-align: right !important;
}
.tt-teams-table .tt-number-col {
  width: 76px;
}
.tt-placements-table .tt-team-col {
  width: 130px;
}
.tt-placements-table .tt-date-col {
  width: 96px;
}
.tt-sticky-team td {
  position: sticky;
  z-index: 8;
  padding: 8px 12px;
  border-top: 1px solid color-mix(in srgb, var(--tt-team-color, #64748b) 55%, transparent);
  background: var(--tt-team-color, #64748b);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.15);
}
.tt-team-name {
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tt-consultant-row td {
  padding: 7px 12px;
  border-top: 1px solid rgba(148,163,184,.20);
  color: var(--text);
  font-size: 12px;
}
.tt-consultant-row td:first-child {
  box-shadow: inset 3px 0 0 var(--tt-team-color, #64748b);
}
.tt-consultant-name {
  min-width: 0;
  padding-left: 12px;
  font-weight: 650;
}
.tt-name-text,
.tt-market-segment {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-name-text {
  line-height: 15px;
}
.tt-market-segment {
  margin-top: 1px;
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 600;
  line-height: 11px;
}
.tt-number-cell {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  white-space: nowrap;
}
.tt-strong-num {
  font-weight: 700;
}
.tt-grand-total td {
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.16);
  background: #111827;
  color: #fff;
  font-weight: 800;
}
.tt-grand-total td:first-child {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tt-sticky-group td {
  position: sticky;
  z-index: 7;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-alt) 84%, var(--surface));
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.tt-sticky-group small {
  margin-left: 8px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
}
.tt-placements-table tbody tr:not(.tt-sticky-group) td {
  padding: 8px 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  color: var(--text);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-row-even td {
  background: var(--surface);
}
.tt-row-odd td {
  background: color-mix(in srgb, var(--surface-alt) 72%, var(--surface));
}
.tt-main-cell {
  font-size: 13px !important;
  font-weight: 700;
}
.tt-muted-cell,
.tt-date-cell {
  color: var(--text-muted) !important;
}
.tt-start-date {
  white-space: nowrap !important;
}
.tt-nowrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tt-ongoing {
  color: var(--success);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.dark .tt-grand-total td {
  background: #0f172a;
}
@media (max-width: 980px) {
  .temps-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .temps-filter-row .search-input {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  .temps-daily-header,
  .temps-title-block,
  .temps-header-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .temps-header-actions {
    gap: 8px;
  }
  .temps-date-controls {
    grid-template-columns: 34px minmax(130px, 1fr) 34px 58px;
  }
  .tt-teams-table .tt-number-col {
    width: 62px;
  }
  .tt-consultant-row td,
  .tt-sticky-team td,
  .tt-grand-total td {
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media (max-width: 520px) {
  .temps-filter-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .temps-filter-row .search-input {
    grid-column: auto;
  }
}

/* Operational dashboard / reports */
.ops-page { display: flex; flex-direction: column; gap: 16px; }
.ops-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.ops-hero.compact { align-items: flex-start; }
.ops-hero h1 { font-size: var(--fs-5xl); font-weight: 700; margin: 0; color: var(--text); letter-spacing: 0; }
.ops-hero p { margin-top: 4px; color: var(--text-muted); max-width: 720px; line-height: 1.45; }
.ops-health {
  min-width: 210px; display: grid; grid-template-columns: 10px 1fr; column-gap: 8px; row-gap: 2px;
  align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-alt);
}
.ops-health span, .system-dot {
  width: 10px; height: 10px; border-radius: 999px; background: var(--warn); display: inline-block;
}
.ops-health.ok span, .system-card.ok .system-dot { background: var(--success); }
.ops-health.bad span, .system-card.warn .system-dot { background: var(--danger); }
.ops-health strong { font-size: 12px; }
.ops-health small { grid-column: 2; color: var(--text-muted); font-size: 11px; }
.dash-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.dash-card {
  text-align: left; min-height: 92px; padding: 14px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow);
  cursor: pointer; display: flex; flex-direction: column; justify-content: space-between;
}
.dash-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.dash-card-label { color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.dash-card strong { font-size: 28px; font-family: var(--font-mono); color: var(--text); }
.dash-card-green { box-shadow: inset 0 3px 0 var(--success); }
.dash-card-amber { box-shadow: inset 0 3px 0 var(--warn); }
.dash-card-red { box-shadow: inset 0 3px 0 var(--danger); }
.dash-card-blue { box-shadow: inset 0 3px 0 #3b82f6; }
.ops-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ops-layout.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ops-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.ops-panel-header { min-height: 42px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.ops-panel-header h2 { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.cancellation-report-page { gap: 18px; min-width: 0; }
.cancellation-report-page > *,
.cancellation-dashboard-grid > *,
.cancellation-detail-panel,
.cancellation-detail-panel .table-scroll { min-width: 0; }
.cancellation-detail-panel .table-scroll { max-width: 100%; overflow-x: auto; }
.cancellation-report-hero { align-items: center; }
.cancellation-filter-panel { overflow: visible; }
.cancellation-filter-grid { display: grid; grid-template-columns: 150px 150px minmax(150px, .7fr) minmax(220px, 1.3fr) auto; gap: 12px; align-items: end; padding: 14px; }
.cancellation-filter-grid label { display: grid; gap: 5px; min-width: 0; color: var(--text-muted); font-size: 11px; font-weight: 700; }
.cancellation-filter-actions { display: flex; gap: 8px; align-items: center; }
.cancellation-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cancellation-metric-card { min-height: 116px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.cancellation-metric-card span { display: block; color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cancellation-metric-card strong { display: block; margin-top: 8px; color: var(--text); font-family: var(--font-mono); font-size: 28px; line-height: 1; }
.cancellation-metric-card small { display: block; margin-top: 9px; color: var(--text-muted); font-size: 11px; line-height: 1.4; }
.cancellation-coverage-note { display: flex; gap: 10px; align-items: baseline; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border)); border-radius: var(--radius); background: color-mix(in srgb, var(--warn) 8%, var(--surface)); font-size: 12px; }
.cancellation-coverage-note span { color: var(--text-muted); }
.cancellation-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cancellation-dashboard-grid-wide { grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr); }
.cancellation-panel-header { align-items: flex-start; }
.cancellation-panel-header small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 11px; font-weight: 400; }
.cancellation-panel-body { padding: 14px; }
.cancellation-trend-panel .cancellation-panel-body { min-height: 270px; display: flex; align-items: center; }
.cancellation-trend-chart { display: block; width: 100%; height: auto; min-height: 230px; overflow: visible; }
.cancellation-chart-grid { stroke: var(--border); stroke-width: 1; }
.cancellation-chart-axis { fill: var(--text-muted); font-size: 10px; }
.cancellation-trend-line { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cancellation-trend-point { fill: var(--surface); stroke: var(--primary); stroke-width: 3; }
.cancellation-chart-empty { display: grid; min-height: 150px; place-items: center; color: var(--text-muted); font-size: 12px; text-align: center; }
.cancellation-single-period { display: grid; min-height: 150px; place-items: center; align-content: center; gap: 6px; width: 100%; }
.cancellation-single-period strong { font-family: var(--font-mono); font-size: 34px; }
.cancellation-single-period span { color: var(--text-muted); font-size: 12px; }
.cancellation-ranked-bars { display: grid; gap: 12px; }
.cancellation-ranked-row { display: grid; gap: 4px; }
.cancellation-ranked-label { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 12px; }
.cancellation-ranked-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cancellation-ranked-label strong { flex: 0 0 auto; font-family: var(--font-mono); }
.cancellation-ranked-row small { color: var(--text-muted); font-size: 10px; }
.cancellation-ranked-row progress { display: block; width: 100%; height: 9px; border: 0; border-radius: 999px; overflow: hidden; background: var(--gray-100); }
.cancellation-ranked-row progress::-webkit-progress-bar { background: var(--gray-100); }
.cancellation-ranked-row progress::-webkit-progress-value { background: var(--primary); border-radius: 999px; }
.cancellation-ranked-row progress::-moz-progress-bar { background: var(--primary); border-radius: 999px; }
.cancellation-proceeded-bars [data-response="no"] progress::-webkit-progress-value { background: var(--text-muted); }
.cancellation-proceeded-bars [data-response="no"] progress::-moz-progress-bar { background: var(--text-muted); }
.cancellation-proceeded-bars [data-response="unclear"] progress::-webkit-progress-value { background: var(--warn); }
.cancellation-proceeded-bars [data-response="unclear"] progress::-moz-progress-bar { background: var(--warn); }
.cancellation-proceeded-bars [data-response="not_recorded"] progress::-webkit-progress-value { background: var(--gray-300); }
.cancellation-proceeded-bars [data-response="not_recorded"] progress::-moz-progress-bar { background: var(--gray-300); }
.cancellation-detail-table { min-width: 1640px; }
.cancellation-detail-table td { max-width: 260px; white-space: normal; vertical-align: top; }
.cancellation-source-note { color: var(--text-muted); font-size: 11px; line-height: 1.45; }
@media (max-width: 1100px) {
  .cancellation-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cancellation-filter-actions { grid-column: 1 / -1; }
  .cancellation-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cancellation-dashboard-grid-wide { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .cancellation-filter-grid,
  .cancellation-metric-grid,
  .cancellation-dashboard-grid { grid-template-columns: 1fr; }
  .cancellation-filter-actions { grid-column: auto; }
  .cancellation-coverage-note { align-items: flex-start; flex-direction: column; }
}
.queue-list { display: flex; flex-direction: column; }
.queue-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 13px 14px; border: 0; border-bottom: 1px solid var(--gray-100);
  background: transparent; text-align: left; color: var(--text); cursor: pointer;
}
.queue-row:last-child { border-bottom: 0; }
.queue-row:hover { background: var(--surface-hover); }
.queue-row strong { display: block; font-size: 13px; }
.queue-row small { display: block; margin-top: 2px; color: var(--text-muted); line-height: 1.35; }
.queue-row b { font-family: var(--font-mono); font-size: 18px; }
.timeline.compact { padding: 14px 16px 0; }
.export-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.audit-toolbar {
  display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)) auto auto;
  gap: 8px; align-items: center; margin: 14px 0;
}
.activity-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
.activity-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.activity-select-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 190px;
}
.activity-select-field > label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.activity-team-select {
  width: 100%;
  min-width: 0;
}
.activity-team-select .ss-wrap {
  width: 100%;
  min-width: 0;
}
.activity-team-select .ss-trigger {
  min-width: 0;
}
.activity-toolbar input,
.activity-toolbar select {
  height: 32px;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 0 10px;
  font: inherit;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}
.activity-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--border);
}
.activity-summary > div {
  min-height: 74px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--primary) 72%, #ffffff);
}
.activity-summary span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.activity-summary strong {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 25px;
  line-height: 1;
  color: var(--text);
}
.activity-dashboard-page {
  gap: 14px;
}
.activity-dashboard-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
.activity-dashboard-hero h1 {
  margin: 0;
  color: var(--text);
  font-size: 30px;
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: 0;
}
.activity-dashboard-hero p {
  margin: 7px 0 0;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
}
.activity-week-controls {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.activity-week-picker {
  display: flex;
  align-items: end;
  gap: 6px;
}
.activity-week-controls label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.activity-week-controls .activity-select-field {
  min-width: 200px;
}
.activity-week-controls input,
.activity-week-controls select {
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 0 9px;
  font-size: 12px;
}
.activity-week-controls select {
  min-width: 168px;
  font-weight: 650;
}
.activity-week-select {
  min-width: 190px;
}
.activity-week-select .ss-wrap {
  width: 100%;
  min-width: 0;
}
.activity-week-select .ss-trigger {
  font-weight: 650;
}
.activity-week-step {
  width: 32px;
  min-width: 32px;
  padding-inline: 0;
  font-size: 18px;
  line-height: 1;
}
.activity-sync-warning {
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--warn) 42%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}
.activity-sync-status {
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}
.activity-sync-status[hidden] {
  display: none;
}
.activity-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.activity-stat-card {
  min-height: 88px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.activity-stat-card span {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.activity-stat-card strong {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 13px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 31px;
  line-height: 1;
}
.activity-trend {
  display: inline-block;
  position: relative;
  top: -.35em;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
.activity-trend.up { color: var(--success); }
.activity-trend.down { color: var(--danger); }
.activity-trend.neutral { color: var(--text-muted); }
.activity-stat-card .activity-trend {
  margin-left: 0;
  top: 0;
  transform: translateY(-.42em);
}
.activity-scoreboard {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.activity-scoreboard-header {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.activity-scoreboard-header strong {
  color: var(--text);
  font-size: var(--fs-lg);
}
.activity-scoreboard-header span {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}
.activity-scoreboard-wrap {
  max-height: calc(100vh - 380px);
  min-height: 320px;
  overflow: auto;
  background: var(--surface);
}
.activity-scoreboard-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text);
  font-size: 12px;
}
.activity-scoreboard-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  text-transform: uppercase;
}
.activity-scoreboard-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  line-height: 1.2;
}
.activity-scoreboard-table tbody tr:hover td {
  background: var(--surface-hover);
}
.activity-scoreboard-table th.right,
.activity-scoreboard-table td.right {
  text-align: right;
}
.activity-value-cell {
  min-width: 70px;
}
.activity-trend-heading {
  width: 42px;
  min-width: 42px;
  padding-left: 0 !important;
}
.activity-trend-cell {
  width: 42px;
  min-width: 42px;
  padding-left: 0 !important;
  color: var(--text-muted);
  line-height: 1;
  text-align: left;
  vertical-align: middle;
}
.activity-recruiter-cell {
  position: relative;
  min-width: 190px;
  background: var(--surface);
  color: var(--text) !important;
  font-weight: 750;
  box-shadow: inset 4px 0 0 var(--team-color, #94a3b8);
  padding-left: 14px !important;
}
.activity-recruiter-cell span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-recruiter-cell small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
}
.activity-table-wrap {
  max-height: calc(100vh - 345px);
  min-height: 260px;
  overflow: auto;
}
.activity-table th,
.activity-table td { white-space: nowrap; }
.activity-table tr { cursor: default; }
.activity-empty-cell {
  padding: 22px !important;
  color: var(--text-muted) !important;
  text-align: center;
}
.activity-consultant-email {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 11px;
}
.activity-version {
  color: var(--text-muted);
  font-size: 11px;
  font-family: var(--font-mono);
}
.activity-config-panel .ops-panel-header small { display: block; margin-top: 2px; color: var(--text-muted); }
.activity-config-form { display: grid; gap: 14px; padding: 14px; }
.activity-config-form > label,
.activity-config-section > label,
.activity-config-column-head > label {
  display: grid;
  gap: 5px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}
.activity-config-title { max-width: 520px; }
.activity-config-section {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.activity-config-section > legend,
.activity-config-section-head h3 {
  margin: 0;
  padding: 0 5px;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
}
.activity-config-section-head,
.activity-config-column-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.activity-config-section-head { margin-bottom: 10px; }
.activity-config-column-head > label { flex: 1; }
.activity-config-column-actions { display: flex; gap: 5px; }
.activity-config-checks,
.activity-config-teams {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 7px 12px;
  margin-top: 10px;
}
.activity-config-check,
.activity-config-teams label,
.activity-config-all-teams { display: flex !important; grid-template-columns: none !important; flex-direction: row !important; align-items: flex-start; gap: 7px !important; color: var(--text) !important; font-size: 11px !important; }
.activity-config-check input,
.activity-config-teams input,
.activity-config-all-teams input { margin-top: 2px; }
.activity-config-check span { display: grid; gap: 1px; }
.activity-config-check small { color: var(--text-muted); font-weight: 500; line-height: 1.25; }
#activity-config-columns { display: grid; gap: 9px; }
.activity-config-column { padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.activity-config-column fieldset { margin: 9px 0 0; padding: 0; border: 0; }
.activity-config-column legend { color: var(--text-muted); font-size: 10px; font-weight: 700; }
.activity-config-readonly { margin: 0; color: var(--text-muted); font-size: 12px; }
.activity-analysis-page {
  gap: 14px;
}
.activity-analysis-controls {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 720px;
}
.activity-analysis-controls label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.activity-analysis-controls input,
.activity-analysis-controls select {
  height: 32px;
  min-width: 96px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 0 9px;
  font-size: 12px;
}
.activity-analysis-controls .activity-select-field {
  min-width: 190px;
}
.activity-analysis-controls .activity-type-select-field {
  min-width: 270px;
}
.activity-analysis-controls select[multiple] {
  height: 64px;
}
.activity-analysis-insights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.activity-analysis-insight {
  min-height: 96px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 3px 0 var(--gray-300);
}
.activity-analysis-insight.good { box-shadow: inset 0 3px 0 var(--success); }
.activity-analysis-insight.watch { box-shadow: inset 0 3px 0 var(--warn); }
.activity-analysis-insight.risk { box-shadow: inset 0 3px 0 var(--danger); }
.activity-analysis-insight span,
.activity-analysis-kpis span {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.activity-analysis-insight strong {
  display: block;
  margin-top: 9px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.12;
}
.activity-analysis-insight p {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}
.activity-analysis-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.activity-analysis-kpis > div {
  min-height: 78px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.activity-analysis-kpis strong {
  display: block;
  margin-top: 10px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 27px;
  line-height: 1;
}
.activity-analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 14px;
}
.activity-analysis-panel {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.activity-analysis-panel.wide {
  grid-row: span 2;
}
.activity-analysis-panel header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.activity-analysis-panel header strong {
  color: var(--text);
  font-size: 14px;
}
.activity-analysis-panel header span {
  color: var(--text-muted);
  font-size: 11px;
}
.activity-analysis-line {
  display: block;
  width: 100%;
  min-height: 260px;
  padding: 12px;
}
.activity-analysis-line line {
  stroke: var(--border);
  stroke-width: 1;
}
.activity-analysis-line path {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.activity-analysis-line circle {
  fill: var(--primary);
}
.activity-analysis-line text {
  fill: var(--text-muted);
  font-size: 10px;
  text-anchor: middle;
}
.activity-analysis-mix,
.activity-analysis-bars {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
}
.activity-analysis-mix-row,
.activity-analysis-bar {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) minmax(96px, 1.7fr) 64px;
  gap: 10px;
  align-items: center;
}
.activity-analysis-mix-row span,
.activity-analysis-bar span {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-analysis-mix-row div,
.activity-analysis-bar div {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--gray-200);
}
.activity-analysis-mix-row i,
.activity-analysis-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.activity-analysis-mix-row strong,
.activity-analysis-bar strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
}
.activity-analysis-empty {
  padding: 18px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}
.activity-analysis-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text);
  font-size: 12px;
}
.activity-analysis-table th,
.activity-analysis-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.activity-analysis-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.activity-analysis-table .right {
  text-align: right;
}
.activity-analysis-table small {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 10px;
}
.finisher-report-page .activity-dashboard-hero > div > small {
  display: block;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 11px;
}
.finisher-report-controls .ss-field,
.finisher-report-controls .ss-wrap { min-width: 170px; }
.finisher-report-kpis { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
.finisher-kpi { color: inherit; cursor: pointer; font: inherit; text-align: left; width: 100%; }
.finisher-kpi:hover,
.finisher-kpi[aria-pressed="true"] { border-color: var(--primary); }
.finisher-drill-link[aria-pressed="true"] { text-decoration: underline; }
.finisher-kpi:focus-visible,
.finisher-drill-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.finisher-kpi small {
  display: block;
  margin-top: 9px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.3;
}
.finisher-report-table-wrap { overflow-x: auto; }
.finisher-reason-bars .activity-analysis-bar {
  grid-template-columns: minmax(105px, 1fr) minmax(96px, 1.7fr) 88px;
}
.finisher-reason-bars .finisher-drill-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finisher-scoreboard .activity-scoreboard-wrap {
  min-height: 0;
  max-height: 520px;
}
.finisher-breakdown-table th,
.finisher-breakdown-table td { white-space: nowrap; }
.finisher-detail-table th,
.finisher-detail-table td { white-space: nowrap; }
.system-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.system-card {
  display: grid; grid-template-columns: 10px 1fr; column-gap: 8px; row-gap: 3px;
  padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt);
}
.system-card strong { font-size: 13px; }
.system-card small { grid-column: 2; color: var(--text-muted); word-break: break-word; line-height: 1.35; }
.notif-item.notif-alert { box-shadow: inset 3px 0 0 var(--danger); }

/* ── Timeline ──────────────────────────────────────────────── */
.timeline { padding: 0; list-style: none; }
.timeline-item {
  position: relative;
  padding: 0 0 16px 24px;
}
.timeline-item::before {
  content: '';
  position: absolute; left: 7px; top: 6px; bottom: 0;
  width: 2px; background: var(--gray-200);
}
.timeline-item:last-child::before { display: none; }
.timeline-item::after {
  content: '';
  position: absolute; left: 2px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--surface);
}
.timeline-item .timeline-date { font-size: 10px; color: var(--text-muted); }
.timeline-item .timeline-text { font-size: 12px; color: var(--text); margin-top: 2px; }

/* ── Claim Form ────────────────────────────────────────────── */
.line-item-card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 8px;
}
.line-item-card .line-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.line-item-card .line-number {
  font-size: 11px; font-weight: 700; color: var(--primary);
}
.attachment-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; background: var(--gray-100); border-radius: var(--radius-sm);
  font-size: 11px; color: var(--text-muted); margin: 2px;
}
.attachment-chip .remove-att {
  cursor: pointer; color: var(--danger); font-weight: 700; margin-left: 2px;
}

/* ── Empty state ───────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 40px 20px;
  color: var(--text-muted);
}
.empty-state h3 { font-size: 16px; color: var(--text); margin-bottom: 8px; }
.empty-state p { font-size: 13px; max-width: 400px; margin: 0 auto; }

/* ── Misc utilities ──────────────────────────────────────────
   Utility class values align with the --space-* scale so future
   refactors can drop these in favour of inline token usage.      */
.amount { font-family: var(--font-mono); font-weight: 500; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--fs-sm); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }

/* ── Hamburger button ──────────────────────────────────────── */
.hamburger-btn { display: none; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Header */
  .app-header {
    padding: 0 10px;
    gap: 8px;
  }

  /* Hamburger */
  .hamburger-btn { display: inline-flex; }

  /* Nav */
  .nav-bar {
    display: none;
    flex-direction: column;
    height: auto;
    padding: 8px;
    gap: 4px;
    overflow-x: unset;
    -webkit-overflow-scrolling: unset;
  }
  .nav-bar.open {
    display: flex;
  }
  .nav-section {
    flex-direction: column;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 6px 0;
    height: auto;
  }
  .nav-section:last-child { border-bottom: none; }
  .nav-segment {
    flex-wrap: wrap;
    gap: 4px;
  }
  .nav-btn {
    padding: 8px 12px;
  }

  /* Filter bar */
  .filter-bar {
    flex-wrap: wrap;
    padding: 6px 10px;
    gap: 6px;
  }
  .search-wrap {
    max-width: 100%;
    flex: 1 1 100%;
  }
  .filter-bar .ss-wrap {
    flex: 1 1 45%;
    min-width: 0;
  }
  .travel-extra-filters {
    width: 100%;
    flex-wrap: wrap;
  }
  .travel-consultant-filter {
    width: 100%;
    min-width: 0;
  }
  .travel-compact-filter {
    flex: 1 1 150px;
    min-width: 0;
    width: auto;
  }
  .travel-date-filter {
    flex: 1 1 140px;
  }
  .travel-comment-compose {
    grid-template-columns: 1fr;
  }

  /* Touch-friendly form controls */
  .form-control {
    min-height: 44px;
    font-size: 16px; /* prevents iOS zoom */
  }
  select.form-control {
    min-height: 44px;
  }
  textarea.form-control {
    min-height: 80px;
  }

  /* Full-size touch actions grow on mobile; dense/icon controls retain their
     canonical 32px/28px geometry. */
  .btn:not(.btn-icon):not(.btn-table):not(.btn-table-text) {
    min-height: 44px;
    padding: 0 16px;
  }
  .btn-sm:not(.btn-icon):not(.btn-table):not(.btn-table-text) {
    min-height: 36px;
  }

  /* Full-screen edit/detail panels */
  .detail-panel {
    width: 100vw !important;
  }

  /* Edit overlay full-screen with sticky footer */
  .detail-overlay.open .detail-panel {
    width: 100vw !important;
    height: 100vh;
    border-radius: 0;
  }
  .detail-panel-body {
    padding: 12px 16px;
  }

  /* Dialog full-width */
  .dialog-box {
    width: 95vw;
    max-width: 95vw;
  }

  /* Modal full-width */
  .modal {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 95vh;
  }

  /* Tables */
  .data-table {
    font-size: 11px;
  }
  .data-table th,
  .data-table td {
    padding: 6px 8px;
  }

  /* Toast full-width */
  .toast-container {
    left: 12px;
    right: 12px;
  }
  .toast {
    max-width: 100%;
  }

  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .analytics-grid { grid-template-columns: 1fr; }
  .ops-hero { align-items: stretch; flex-direction: column; }
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-layout, .ops-layout.three { grid-template-columns: 1fr; }
  .audit-toolbar { grid-template-columns: 1fr; }
  .activity-toolbar { grid-template-columns: 1fr; }
  .activity-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-dashboard-hero { align-items: stretch; flex-direction: column; }
  .activity-dashboard-hero h1 { font-size: 28px; }
  .activity-week-controls { justify-content: flex-start; }
  .activity-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-scoreboard-wrap { max-height: none; }
  .activity-table-wrap { max-height: none; }
  .activity-config-column-head { align-items: stretch; flex-direction: column; }
  .activity-config-column-actions { flex-wrap: wrap; }
  .activity-config-checks,
  .activity-config-teams { grid-template-columns: 1fr; }
  .activity-analysis-controls { justify-content: flex-start; max-width: none; }
  .activity-analysis-insights,
  .activity-analysis-kpis,
  .activity-analysis-grid { grid-template-columns: 1fr; }
  .activity-analysis-panel.wide { grid-row: auto; }
  .activity-analysis-line { min-height: 220px; }
  .export-actions { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .brand-product { display: none; }
}

/* ── Comments ───────────────────────────────────────────────── */
.comment-item { padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
.comment-item:last-child { border-bottom: none; }
.comment-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.comment-initials {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.comment-author { font-size: 13px; font-weight: 600; color: var(--text); }
.comment-time { font-size: 11px; color: var(--text-muted); }
.comment-body { font-size: 13px; color: var(--text); line-height: 1.5; padding-left: 36px; }
.comment-input-wrap { display: flex; flex-direction: column; gap: 0; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gray-100); }

/* ── Analytics ──────────────────────────────────────────────── */
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-label { font-size: 12px; color: var(--text); min-width: 120px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { flex: 1; height: 20px; background: var(--gray-100); border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width .3s ease; min-width: 2px; }
.bar-value { font-size: 12px; font-weight: 500; color: var(--text); min-width: 80px; text-align: right; font-family: var(--font-mono); }

.dark .bar-track { background: var(--gray-700); }
.dark .comment-item { border-bottom-color: var(--gray-700); }
.dark .comment-input-wrap { border-top-color: var(--gray-700); }

/* ── Help Page ──────────────────────────────────────────────── */
.help-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-5); max-width: 1080px; margin: 0 auto; padding: 0 var(--space-4); }
.help-toc { position: sticky; top: var(--space-4); align-self: start; padding: var(--space-3); border-right: 1px solid var(--border); max-height: calc(100vh - 160px); overflow-y: auto; }
.help-toc-title { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: var(--space-2); }
.help-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.help-toc a { display: block; padding: 6px 8px; font-size: var(--fs-md); color: var(--text); border-radius: var(--radius-sm); text-decoration: none; transition: background var(--motion-fast); }
.help-toc a:hover { background: var(--gray-100); color: var(--primary); }
@media (max-width: 768px) {
  .help-layout { grid-template-columns: 1fr; }
  .help-toc { position: static; border-right: none; border-bottom: 1px solid var(--border); max-height: none; }
  .help-toc ul { flex-direction: row; flex-wrap: wrap; }
}
.help-page { max-width: 800px; margin: 0; padding: 0 0 var(--space-10); }
.help-header { margin-bottom: 32px; }
.help-header h1 { font-size: 24px; font-weight: 700; margin: 0 0 4px; }
.help-section { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--gray-200); }
.help-section:last-child { border-bottom: none; }
.help-section h2 { font-size: 18px; font-weight: 700; margin: 0 0 16px; color: var(--primary); }
.help-section h3 { font-size: 14px; font-weight: 600; margin: 20px 0 8px; color: var(--text); }
.help-section p { font-size: 13px; line-height: 1.7; margin: 0 0 10px; color: var(--text); }
.help-section ul, .help-section ol { font-size: 13px; line-height: 1.7; margin: 0 0 10px; padding-left: 20px; color: var(--text); }
.help-section li { margin-bottom: 4px; }
.help-section .data-table { font-size: 13px; margin: 12px 0; }
.help-section .data-table th { font-size: 12px; }
.dark .help-section { border-bottom-color: var(--gray-700); }

/* ── Skeleton loaders ──────────────────────────────────────── */
.skel {
  background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skel-stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); }
.skel-card-stack { display: flex; flex-direction: column; gap: var(--space-2); }
.skel-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); }
.dark .skel { background: linear-gradient(90deg, var(--gray-200) 0%, var(--gray-300) 50%, var(--gray-200) 100%); }

/* ── Empty states (rich variant) ───────────────────────────── */
.empty-state-rich {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--space-8) var(--space-5); text-align: center; gap: var(--space-2);
}
.empty-state-icon { color: var(--gray-300); margin-bottom: var(--space-2); }
.empty-state-rich h3 { font-size: var(--fs-2xl); font-weight: 600; color: var(--text); }
.empty-state-rich p { font-size: var(--fs-base); color: var(--text-muted); max-width: 360px; margin: 0; line-height: 1.5; }
.empty-state-rich .btn { margin-top: var(--space-3); }

/* ── Toast — dismissible + action slot ──────────────────────── */
.toast {
  display: flex; align-items: center; gap: var(--space-2);
}
.toast-body { flex: 1; }
.toast-close, .toast-action {
  background: transparent; border: none; color: inherit; cursor: pointer;
  font: inherit; font-weight: 600; padding: 4px 8px; border-radius: var(--radius-sm);
  transition: background var(--motion-med);
}
.toast-close { padding: 2px 6px; font-size: var(--fs-2xl); line-height: 1; opacity: .7; }
.toast-close:hover,
.toast-action:hover { background: rgba(255,255,255,.15); opacity: 1; }

/* Status badge icon layout (.badge display/svg/.badge-label) merged into the
   single .badge block in the Status Badges section above — dedupe of the two
   former `.badge {}` definitions flagged by the audit. */

/* ── Keyboard shortcut help overlay ─────────────────────────── */
.shortcut-help {
  position: fixed; inset: 0; z-index: 3000;
  background: var(--overlay-bg);
  display: flex; align-items: center; justify-content: center;
}
.shortcut-help-card {
  background: var(--surface); color: var(--text);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  min-width: 340px; max-width: 420px; padding: var(--space-5);
}
.shortcut-help-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-xl); font-weight: 700; margin-bottom: var(--space-3);
}
.shortcut-help-header button {
  background: transparent; border: none; color: var(--text-muted);
  font-size: var(--fs-2xl); cursor: pointer; border-radius: var(--radius-sm);
  width: 28px; height: 28px;
}
.shortcut-help-card dl {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0;
}
.shortcut-help-card dt { font-size: var(--fs-sm); display: flex; gap: 4px; align-items: center; }
.shortcut-help-card dd { font-size: var(--fs-base); margin: 0; color: var(--text-muted); }
.shortcut-help-card kbd {
  display: inline-block; padding: 2px 6px;
  background: var(--gray-100); color: var(--text);
  border: 1px solid var(--gray-300); border-bottom-width: 2px;
  border-radius: 4px; font-family: var(--font-mono); font-size: var(--fs-xs);
}

/* ── Row navigation highlight (keyboard J/K) ────────────────── */
.data-table tr.row-focus td { background: var(--success-bg); box-shadow: inset 2px 0 0 var(--primary); }

/* ── Claim cards (approval inbox) ───────────────────────────── */
.claim-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: border-color var(--motion-med), box-shadow var(--motion-med);
}
.claim-card:hover { border-color: var(--gray-300); box-shadow: var(--shadow-md); }
.claim-card.row-focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--focus-ring-rgba); }
.claim-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  flex-wrap: wrap;
}
.claim-card-title { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-base); }
.claim-card-meta { font-size: var(--fs-sm); color: var(--text-muted); }
.claim-card-total { font-family: var(--font-mono); font-size: var(--fs-3xl); font-weight: 600; }
.claim-card-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.claim-card-summary { font-size: var(--fs-sm); color: var(--text-muted); display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ── Table row-hover feedback (stronger) ────────────────────── */
.data-table tr[data-id]:hover td { background: var(--surface-hover); }

/* ── Section grouping (dashboard) ───────────────────────────── */
.section-group { margin-bottom: var(--space-4); }
.section-group-header {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) 0; font-size: var(--fs-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
  cursor: pointer; user-select: none;
}
.section-group-header .chev {
  transition: transform var(--motion-med); display: inline-block;
}
.section-group.collapsed .chev { transform: rotate(-90deg); }
.section-group.collapsed .section-group-body { display: none; }
.section-group-count { color: var(--text-muted); font-weight: 500; }

/* ── Amount input with $ prefix ─────────────────────────────── */
.amount-input-wrap { position: relative; }
.amount-input-wrap::before {
  content: '$'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-weight: 500; pointer-events: none;
}
.amount-input-wrap .form-control { padding-left: 22px; }

/* Pipeline-card hover actions: keep buttons hidden until the card is
   hovered or focused-within, so the cards stay visually quiet.
   Default state lives here (not inline) — inline opacity:0 would beat
   the hover override on specificity and the buttons would never show. */
.placement-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.placement-row:hover .placement-actions,
.placement-row:focus-within .placement-actions { opacity: 1; }

/* Recruitment adoption of the Nobul UI palette's P-05 accordion pattern. */
.periodic-directory { margin-bottom: 16px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.periodic-directory .accordion-trigger { width: 100%; min-height: 42px; padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: left; font-weight: 700; }
.periodic-directory .accordion-trigger:hover { background: var(--surface-alt); }
.periodic-directory .accordion-chevron { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface-alt); color: var(--text-muted); }
.periodic-directory .accordion-chevron svg { display: block; width: 16px; height: 16px; transform-origin: center; transition: transform var(--motion-fast, .15s) var(--ease, ease); }
.periodic-directory .accordion-trigger[aria-expanded="true"] .accordion-chevron svg { transform: rotate(90deg); }
.periodic-directory .accordion-panel { padding: 0 12px 12px; color: var(--text-muted); border-radius: 0 0 9px 9px; }
.periodic-directory .accordion-panel[hidden] { display: none; }
.periodic-directory .accordion-trigger[aria-expanded="false"] { border-radius: 0 0 9px 9px; }
.periodic-directory .accordion-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }
.periodic-directory-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.periodic-directory-heading > span { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 400; }
.periodic-summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 285px), 1fr)); gap: 10px; padding-top: 4px; }
.periodic-summary-card { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-sm); line-height: 1.4; text-align: left; cursor: pointer; overflow-wrap: anywhere; transition: border-color var(--motion-fast, .15s), background var(--motion-fast, .15s); }
.periodic-summary-card:hover { border-color: var(--primary); background: var(--surface-alt); }
.periodic-summary-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.periodic-summary-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.periodic-summary-heading > strong { font-size: var(--fs-base); line-height: 1.3; }
.periodic-summary-heading .badge { flex: 0 0 auto; }
.periodic-summary-client { font-weight: 600; }
.periodic-summary-role, .periodic-summary-dates, .periodic-summary-next, .periodic-summary-fee > span { color: var(--text-muted); }
.periodic-summary-fee { margin-top: 3px; }
.periodic-summary-forecast { margin-top: auto; padding-top: 7px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 11px; }
.periodic-directory-empty { grid-column: 1 / -1; margin: 4px 0; }
.periodic-directory-error { padding: 12px 16px; margin-bottom: 16px; }
@media (prefers-reduced-motion: reduce) {
  .periodic-directory .accordion-chevron svg, .periodic-summary-card { transition: none; }
}

/* Pipeline modal person cards */
.pipeline-select-mount { width: 100%; }
.placements-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.placements-search { flex: 1 1 320px; display: grid; gap: 4px; }
.placements-type-filter { flex: 0 1 240px; min-width: 180px; display: grid; gap: 4px; }
.placements-scope { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.pipeline-select-mount .ss-wrap { width: 100%; min-width: 0; }
.pipeline-person-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pipeline-person-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 30px;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.pipeline-person-card-compact {
  grid-template-columns: minmax(0, 1fr) 30px;
}
.pipeline-person-main { min-width: 0; }
.pipeline-person-name {
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 650;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pipeline-person-subtitle {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.25;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pipeline-person-percent-wrap {
  position: relative;
}
.pipeline-person-percent-wrap .form-control {
  padding-right: 22px;
  text-align: right;
  font-family: var(--font-mono);
}
.pipeline-person-percent-symbol {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  pointer-events: none;
}
.pipeline-card-empty {
  padding: 8px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  background: var(--surface-alt);
}

.travel-line-extra {
  padding: 0 0 8px 8px;
  font-size: 11px;
  color: var(--text-muted);
}
.travel-line-extra-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: min(100%, 360px);
}
.travel-line-extra-field > span {
  flex: 0 0 auto;
}
.travel-line-extra-field .travel-line-extra-select {
  min-width: 220px;
  width: 260px;
}
/* Two-band nav matching finance app: dark band lists modules with bare
   typography, light band below holds the active module's sub-tabs. */
.nav-bar {
  display: flex; flex-direction: column;
  background: var(--navy);
  border-bottom: 1px solid var(--gray-200);
  padding: 0;
}
.nav-modules {
  display: flex; gap: 4px; padding: 6px 16px 4px 16px;
  overflow-x: auto;
}
.nav-modules::-webkit-scrollbar { display: none; }
.nav-module-btn {
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255,255,255,.55);
  font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.nav-module-btn:hover { color: rgba(255,255,255,.8); }
.nav-module-btn.active { color: #fff; border-bottom-color: var(--primary); font-weight: 600; }

.nav-pages {
  background: var(--surface);
  padding: 4px 16px;
  border-bottom: 1px solid var(--gray-200);
  min-height: 36px;
  overflow-x: auto;
}
.nav-pages::-webkit-scrollbar { display: none; }
.nav-page-group { display: none; gap: 2px; }
.nav-page-group.active { display: flex; }
.nav-page-group .nav-btn {
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 12px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  border-radius: 0;
}
.nav-page-group .nav-btn:hover { color: var(--text); background: transparent; }
.nav-page-group .nav-btn.active { color: var(--text); background: transparent; border-bottom-color: var(--primary); font-weight: 600; }

@media (max-width: 768px) {
  .header-right { min-width: 0; gap: var(--space-1); }
  .header-right .nobul-avatar-chip { width: 32px; height: 32px; padding: 0; justify-content: center; }
  .header-right .nobul-avatar { width: 28px; height: 28px; }
  .header-right .nobul-avatar-id,
  .header-right .nobul-avatar-caret { display: none; }
  .nav-bar { display: none; }
  .nav-bar.open { display: flex; }
}

/* Grouped settings layout — natural labels, section titles + notes. */
.settings-section { margin: 0 0 24px 0; padding-bottom: 16px; border-bottom: 1px solid var(--gray-200); }
.settings-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.settings-section-header { margin-bottom: 12px; }
.settings-section-title { font-size: 14px; font-weight: 600; color: var(--text); }
.settings-section-note { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.settings-section-body { display: flex; flex-direction: column; gap: 12px; }
.settings-field-label { font-size: 14px; font-weight: 600; color: var(--text); display: block; margin-bottom: 4px; }
.settings-field-help { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
/* Settings panel plumbing classes — Shell v2 bans inline styles in settings
   panels (nobul-settings-standards.md); these replace settings.js's old
   style="…" strings. */
.settings-panel-body { padding: 20px; }
.temps-email-preview-image { display: block; max-width: 100%; height: auto; margin-top: 16px; }
.settings-panel-loading { padding: 20px; color: var(--text-muted); }
.settings-panel-error { padding: 20px; color: var(--danger); }
.settings-help-danger { color: var(--danger); }
.settings-form-group { margin-bottom: 0; }
.settings-field-unset { opacity: .55; }
.settings-unset-note { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 7px 0; }
.settings-list-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.finisher-reason-fields { display: grid; gap: 8px; }
.finisher-reason-setting-field { display: grid; gap: 4px; color: var(--text-muted); font-size: 11px; font-weight: 600; }
.settings-list-actions { display: flex; gap: 8px; align-items: center; }
.settings-cancellation-outcomes { display: grid; gap: 12px; margin-bottom: 12px; }
.settings-cancellation-outcome { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.settings-cancellation-outcome-header { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 10px; }
.settings-cancellation-outcome-header input { font-weight: 650; }
.settings-cancellation-reasons { display: grid; gap: 8px; }
.settings-cancellation-reason { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.settings-cancellation-reason-fields { display: grid; gap: 8px; }
.settings-cancellation-reason-action { min-width: 68px; text-align: right; }
.settings-cancellation-add-reason { margin-top: 10px; }
.settings-required-badge { display: inline-flex; padding: 3px 7px; border-radius: 999px; background: var(--gray-100); color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.placement-cancel-proceed { border: 0; padding: 0; }
.placement-cancel-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.placement-cancel-choice { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.placement-cancel-choice:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.placement-cancel-choice input { margin-top: 3px; }
.placement-cancel-choice strong, .placement-cancel-choice small { display: block; }
.placement-cancel-choice small { margin-top: 2px; color: var(--text-muted); font-size: 11px; line-height: 1.3; }
@media (max-width: 700px) {
  .placement-cancel-choice-grid { grid-template-columns: 1fr; }
  .settings-cancellation-outcome-header,
  .settings-cancellation-reason { grid-template-columns: 1fr; }
  .settings-cancellation-reason-action { text-align: left; }
}
.settings-row-split { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.settings-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.settings-check-chip { display: flex; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: 14px; }
.audit-details-cell { max-width: 360px; white-space: normal; color: var(--text-muted); }
.mining-shift-types-settings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-x: auto;
}
.mining-shift-type-head,
.mining-shift-type-row {
  display: grid;
  grid-template-columns: 68px minmax(170px, 1fr) 58px 72px 70px 72px 72px 64px 64px;
  gap: 8px;
  align-items: center;
  min-width: 760px;
}
.mining-shift-type-head {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
  min-width: 760px;
}
.mining-shift-type-row {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.mining-shift-code-input {
  text-transform: uppercase;
  font-weight: 700;
}
.mining-shift-colour-input {
  height: 34px;
  padding: 3px;
}
.mining-shift-hours-input,
.mining-shift-order-input {
  min-width: 0;
}
.mining-shift-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
}
.mining-shift-new-title {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Finishers reason picker — shared option buttons with title and subtitle. */
.finisher-reason-picker { border: 0; min-width: 0; padding: 0; }
.finisher-reason-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.finisher-reason-option { align-items: flex-start; flex-direction: column; height: auto; justify-content: flex-start; min-height: 68px; min-width: 0; padding: 12px; text-align: left; white-space: normal; }
.finisher-reason-option-title { display: block; font-size: 13px; font-weight: 700; }
.finisher-reason-option-description { color: var(--text-muted); display: block; font-size: 11px; font-weight: 400; line-height: 1.4; margin-top: 3px; }
.finisher-toolbar { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.finisher-filter { color: var(--text-muted); display: flex; flex: 1 1 150px; flex-direction: column; font-size: 11px; font-weight: 700; gap: 4px; max-width: 210px; min-width: 150px; }
.finisher-filter-search { flex-basis: 280px; max-width: 420px; min-width: 220px; }
.finisher-filter .search-input,
.finisher-filter > .ss-field,
.finisher-filter .ss-wrap { min-width: 0; width: 100%; }
.finisher-sort-button { align-items: center; background: none; border: 0; color: inherit; cursor: pointer; display: inline-flex; font: inherit; font-weight: inherit; gap: 4px; padding: 0; text-align: left; }
.finisher-sort-button:focus-visible { border-radius: 3px; outline: 2px solid var(--primary); outline-offset: 2px; }
.finisher-sort-button span { color: var(--text-muted); font-size: 9px; }
.finisher-cell-detail { color: var(--text-muted); display: block; font-size: 11px; line-height: 1.35; margin-top: 3px; }

@media (max-width: 560px) {
  .finisher-reason-options { grid-template-columns: 1fr; }
  .finisher-filter { flex-basis: 100%; max-width: none; min-width: 0; width: 100%; }
}
/* Pill-shaped sliding toggle for the Perm/Temp period selector. */
.period-toggle {
  position: relative;
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  padding: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  user-select: none;
}
.period-toggle-opt {
  position: relative; z-index: 1;
  padding: 4px 14px;
  background: transparent;
  border: none;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
}
.period-toggle-opt:hover { color: var(--text); }
.period-toggle[data-period="current"]  .period-toggle-opt[data-period="current"],
.period-toggle[data-period="previous"] .period-toggle-opt[data-period="previous"],
.period-toggle[data-period="next"]     .period-toggle-opt[data-period="next"] {
  color: #fff;
}
.period-toggle-thumb {
  position: absolute; top: 2px; bottom: 2px;
  width: calc(50% - 2px);
  background: var(--primary);
  border-radius: 999px;
  transition: left .18s ease;
  z-index: 0;
}
.period-toggle[data-period="current"]  .period-toggle-thumb { left: 2px; }
.period-toggle[data-period="previous"] .period-toggle-thumb { left: calc(50% + 0px); }
.period-toggle.period-toggle-three {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
}
.period-toggle.period-toggle-three .period-toggle-thumb {
  left: 2px;
  width: calc((100% - 4px) / 3);
  transition: transform .18s ease;
}
.period-toggle.period-toggle-three .period-toggle-opt {
  min-width: 72px;
  text-align: center;
}
.period-toggle.period-toggle-three[data-period="previous"] .period-toggle-thumb { left: 2px; transform: translateX(0); }
.period-toggle.period-toggle-three[data-period="current"]  .period-toggle-thumb { left: 2px; transform: translateX(100%); }
.period-toggle.period-toggle-three[data-period="next"]     .period-toggle-thumb { left: 2px; transform: translateX(200%); }

/* Travel module — status badges */
.badge-booked            { background: color-mix(in srgb, #94a3b8 18%, var(--surface)); color: #475569; }
.badge-invoiced          { background: color-mix(in srgb, #3b82f6 18%, var(--surface)); color: #1d4ed8; }
.badge-pending_deduction { background: color-mix(in srgb, #f59e0b 22%, var(--surface)); color: #b45309; }
.badge-deducted          { background: color-mix(in srgb, #10b981 22%, var(--surface)); color: #047857; }
.badge-cancelled         { background: color-mix(in srgb, #6b7280 18%, var(--surface)); color: #374151; }

/* Travel — booking row + line indent */
.travel-booking-row { cursor: pointer; }
.travel-line-row td:first-child { padding-left: 32px; color: var(--text-muted); }
.travel-line-indicator { display: inline-block; width: 14px; color: var(--text-muted); }
.travel-expand-chev   { display: inline-block; width: 14px; transition: transform .1s; }
.travel-booking-row.expanded .travel-expand-chev { transform: rotate(90deg); }

/* Travel + Orders — charge-type badges. Vocabulary follows the on-charges
   API (see finance/docs/on-charges-api.md): margins/client/candidate are
   the rec-hub-driven values; division/employee are finance account targets.
   The deduction/corporate classes are
   kept for back-compat against any pre-migration rows that still carry
   the old vocabulary. */
.badge-charge-margins   { background: color-mix(in srgb, #6b7280 14%, var(--surface)); color: #374151; font-size: 0.75em; margin-right: 4px; }
.badge-charge-client    { background: color-mix(in srgb, #8b5cf6 18%, var(--surface)); color: #6d28d9; font-size: 0.75em; margin-right: 4px; }
.badge-charge-candidate { background: color-mix(in srgb, #f97316 18%, var(--surface)); color: #c2410c; font-size: 0.75em; margin-right: 4px; }
.badge-charge-division  { background: color-mix(in srgb, #0ea5e9 18%, var(--surface)); color: #0369a1; font-size: 0.75em; margin-right: 4px; }
.badge-charge-employee  { background: color-mix(in srgb, #14b8a6 18%, var(--surface)); color: #0f766e; font-size: 0.75em; margin-right: 4px; }
.badge-charge-other     { background: color-mix(in srgb, #6b7280 18%, var(--surface)); color: #4b5563; font-size: 0.75em; margin-right: 4px; }
/* Legacy classes — pre-2026-04 vocabulary, retained for unmigrated rows. */
.badge-charge-deduction { background: color-mix(in srgb, #6b7280 14%, var(--surface)); color: #374151; font-size: 0.75em; margin-right: 4px; }
.badge-charge-corporate { background: color-mix(in srgb, #0ea5e9 18%, var(--surface)); color: #0369a1; font-size: 0.75em; margin-right: 4px; }

/* Orders module — status badges for the post-state-refresh state machine.
   .badge-draft / .badge-submitted / .badge-cancelled already defined above. */
.badge-on_hold              { background: color-mix(in srgb, #f59e0b 18%, var(--surface)); color: #92400e; }
.badge-posted               { background: color-mix(in srgb, #3b82f6 18%, var(--surface)); color: #1d4ed8; }
.badge-ready_for_collection { background: color-mix(in srgb, #8b5cf6 18%, var(--surface)); color: #6d28d9; }
.badge-collected            { background: color-mix(in srgb, #14b8a6 20%, var(--surface)); color: #0f766e; }
.badge-pending_oncharge     { background: color-mix(in srgb, #f59e0b 22%, var(--surface)); color: #b45309; }
.badge-settlement_failed    { background: color-mix(in srgb, #ef4444 18%, var(--surface)); color: #b91c1c; }
.badge-processed            { background: color-mix(in srgb, #10b981 22%, var(--surface)); color: #047857; }
.badge-reversed             { background: color-mix(in srgb, #ef4444 18%, var(--surface)); color: #b91c1c; }

/* Mining roster */
.mining-tracker {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 16px;
}
.mining-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.mining-toolbar h2 { margin: 0; font-size: var(--fs-2xl); font-weight: 650; }
.mining-month-controls,
.mining-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mining-filter-row {
  margin-bottom: 12px;
}
.mining-filter-row #mining-search { width: min(380px, 100%); }
.mining-filter-row #mining-consultant-filter { width: min(280px, 100%); }
.mining-filter-row #mining-status-filter { width: 180px; }
.mining-filter-row #mining-sort-filter { width: 170px; }
.mining-legend-bar {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.mining-range-title {
  margin: 0;
  font-weight: 650;
  font-size: 13px;
  white-space: nowrap;
}
.mining-legend {
  display: flex;
  gap: 8px 14px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--text-muted);
  font-size: 11px;
}
.mining-legend-bar .mining-month-controls { margin-left: auto; }
.mining-legend span { display: inline-flex; align-items: center; gap: 5px; }
#mining-tracker-grid-slot {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.mining-grid-wrap {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
  background: var(--surface);
}
.mining-grid-loading {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.mining-grid {
  --mining-month-head-height: 30px;
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  user-select: none;
}
.mining-grid th,
.mining-grid td {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.mining-grid thead th {
  position: sticky;
  top: 0;
  z-index: 5;
}
.mining-grid thead tr:nth-child(2) th {
  top: var(--mining-month-head-height);
  z-index: 5;
}
.mining-sticky {
  position: sticky;
  left: 0;
  z-index: 4;
}
.mining-grid .mining-candidate-head {
  width: 300px;
  min-width: 300px;
  padding: 8px 10px;
  text-align: left;
  background: var(--gray-50);
  left: 0;
  top: 0;
  z-index: 8;
  box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border);
}
.mining-grid .mining-month-head {
  height: var(--mining-month-head-height);
  padding: 6px 10px;
  text-align: left;
  background: var(--gray-50);
  color: var(--text);
  font-weight: 650;
  box-shadow: 0 1px 0 var(--border);
}
.mining-grid .mining-date-head {
  width: 38px;
  min-width: 38px;
  height: 44px;
  padding: 4px 2px;
  text-align: center;
  background: var(--surface);
  color: var(--text-muted);
}
.mining-grid .is-month-start {
  border-left: 1px solid var(--border);
}
.mining-group-row th,
.mining-group-row td {
  position: sticky;
  top: 75px;
  z-index: 3;
  height: 26px;
  padding: 5px 10px;
  background: color-mix(in srgb, var(--gray-100) 80%, var(--surface));
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mining-grid .mining-group-label {
  left: 0;
  z-index: 7;
  width: 300px;
  min-width: 300px;
  text-align: left;
  box-shadow: 1px 0 0 var(--border);
}
.mining-date-head strong,
.mining-date-head span { display: block; line-height: 1.1; }
.mining-date-head strong { color: var(--text); font-size: 12px; margin-top: 3px; }
.mining-date-head.is-weekend,
.mining-day-cell.is-weekend { background: color-mix(in srgb, var(--gray-100) 65%, var(--surface)); }
.mining-grid .mining-candidate-cell {
  width: 300px;
  min-width: 300px;
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--border);
}
.mining-candidate-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.mining-candidate-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.mining-candidate-name { font-size: 13px; font-weight: 700; color: var(--text); }
.mining-candidate-lookup {
  position: relative;
}
.mining-candidate-dropdown {
  position: absolute;
  z-index: 1400;
  top: 64px;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: min(340px, 52vh);
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.mining-candidate-dropdown:empty {
  display: none;
}
.mining-candidate-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mining-candidate-source-badge {
  border-radius: 999px;
  background: color-mix(in srgb, #0ea5e9 18%, var(--surface));
  color: #0369a1;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  text-transform: uppercase;
  white-space: nowrap;
}
.mining-candidate-source-badge.is-reference {
  background: color-mix(in srgb, #f59e0b 20%, var(--surface));
  color: #92400e;
}
.mining-candidate-selected-card {
  cursor: default;
  margin-top: 8px;
}
.mining-candidate-selected-card:hover {
  border-color: var(--gray-200);
}
.mining-ended-pill {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, #6b7280 16%, var(--surface));
  color: #475569;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.mining-candidate-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.25;
}
.mining-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.mining-info-btn {
  border-radius: 50%;
}
.mining-info-btn[aria-expanded="true"] {
  background: var(--gray-100);
  color: var(--text);
}
.mining-more-icon,
.mining-more-icon::before,
.mining-more-icon::after {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}
.mining-more-icon {
  position: relative;
}
.mining-more-icon::before,
.mining-more-icon::after {
  content: '';
  position: absolute;
  top: 0;
}
.mining-more-icon::before { left: -5px; }
.mining-more-icon::after { left: 5px; }
.mining-info-popover {
  position: fixed;
  z-index: 1200;
  display: none;
  width: 380px;
  max-width: min(380px, 92vw);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
  pointer-events: none;
}
.mining-info-popover.is-floating {
  display: block;
}
.mining-info-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  margin-bottom: 4px;
}
.mining-info-row > span {
  color: var(--text-muted);
}
.mining-info-row > strong {
  max-width: none;
  overflow: hidden;
  color: var(--text);
  font-weight: 700;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mining-info-value {
  max-width: none;
  color: var(--text);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mining-info-value .mining-day-tooltip-total-parts {
  justify-content: flex-end;
}
.mining-info-value .mining-day-tooltip-total-parts strong {
  color: var(--text);
}
.mining-day-cell {
  position: relative;
  width: 38px;
  min-width: 38px;
  height: 42px;
  padding: 2px;
  vertical-align: middle;
  cursor: pointer;
  background: var(--surface);
  overflow: hidden;
}
.mining-day-cell.has-swing { box-shadow: inset 0 0 0 1px color-mix(in srgb, #059669 28%, transparent); }
.mining-day-cell:hover { background: var(--surface-hover); }
.mining-day-cell.has-code {
  background: var(--mining-cell-bg);
  box-shadow: inset 0 0 0 1px var(--mining-cell-border);
}
.mining-day-cell.has-code:hover {
  background: color-mix(in srgb, var(--mining-cell-bg) 88%, var(--surface-hover));
}
.mining-day-cell.has-code.has-swing {
  box-shadow: inset 0 0 0 2px var(--mining-cell-border);
}
.mining-day-cell.has-unlinked-travel {
  outline: 2px dotted var(--mining-cell-border);
  outline-offset: -4px;
}
.mining-day-cell.is-multi {
  background-image: none;
}
.mining-day-cell.is-multi::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 0;
  height: 0;
  border-top: 13px solid var(--mining-cell-alt1, var(--mining-cell-border));
  border-left: 13px solid transparent;
  pointer-events: none;
}
.mining-day-cell.is-multi.has-third::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 0;
  height: 0;
  border-top: 7px solid var(--mining-cell-alt2, var(--mining-cell-border));
  border-left: 7px solid transparent;
  pointer-events: none;
}
.mining-day-cell.is-range-selected {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}
.mining-day-cell.has-code.is-range-selected {
  background: color-mix(in srgb, var(--primary) 16%, var(--mining-cell-bg));
}
.mining-day-codes {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  min-height: 100%;
}
.mining-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  border: 1px solid transparent;
  background: var(--mining-code-bg, transparent);
  color: var(--mining-code-fg, var(--text));
  border-color: var(--mining-code-border, transparent);
}
.mining-code.is-unlinked-travel {
  background: transparent;
  border-style: dotted;
}
.mining-code.is-linked-travel {
  background: transparent;
}
.mining-day-cell.has-code:not(.is-multi) .mining-code {
  background: transparent;
  border-color: transparent;
  color: var(--mining-cell-fg);
  font-size: 11px;
}
.mining-day-cell.has-code:not(.is-multi) .mining-code.is-unlinked-travel {
  border-color: var(--mining-cell-border);
  border-style: dotted;
}
.mining-day-code-D,
.mining-day-code-S { --mining-cell-bg: #dcfce7; --mining-cell-fg: #166534; --mining-cell-border: #86efac; }
.mining-day-code-N { --mining-cell-bg: #e0e7ff; --mining-cell-fg: #3730a3; --mining-cell-border: #a5b4fc; }
.mining-day-code-H { --mining-cell-bg: #fee2e2; --mining-cell-fg: #991b1b; --mining-cell-border: #fca5a5; }
.mining-day-code-R { --mining-cell-bg: #fef3c7; --mining-cell-fg: #92400e; --mining-cell-border: #fbbf24; }
.mining-day-code-F { --mining-cell-bg: #dbeafe; --mining-cell-fg: #1d4ed8; --mining-cell-border: #93c5fd; }
.mining-day-code-A { --mining-cell-bg: #f3e8ff; --mining-cell-fg: #7e22ce; --mining-cell-border: #d8b4fe; }
.mining-day-code-M { --mining-cell-bg: #fce7f3; --mining-cell-fg: #be185d; --mining-cell-border: #f9a8d4; }
.mining-day-code-X { --mining-cell-bg: #f3f4f6; --mining-cell-fg: #4b5563; --mining-cell-border: #d1d5db; }
.mining-code-D,
.mining-code-S { --mining-code-bg: #dcfce7; --mining-code-fg: #166534; --mining-code-border: #86efac; }
.mining-code-N { --mining-code-bg: #e0e7ff; --mining-code-fg: #3730a3; --mining-code-border: #a5b4fc; }
.mining-code-H { --mining-code-bg: #fee2e2; --mining-code-fg: #991b1b; --mining-code-border: #fca5a5; }
.mining-code-R { --mining-code-bg: #fef3c7; --mining-code-fg: #92400e; --mining-code-border: #fbbf24; }
.mining-code-F { --mining-code-bg: #dbeafe; --mining-code-fg: #1d4ed8; --mining-code-border: #93c5fd; }
.mining-code-A { --mining-code-bg: #f3e8ff; --mining-code-fg: #7e22ce; --mining-code-border: #d8b4fe; }
.mining-code-M { --mining-code-bg: #fce7f3; --mining-code-fg: #be185d; --mining-code-border: #f9a8d4; }
.mining-code-X { --mining-code-bg: #f3f4f6; --mining-code-fg: #4b5563; --mining-code-border: #d1d5db; }
.mining-day-tooltip {
  position: fixed;
  z-index: 1300;
  width: 380px;
  max-width: min(380px, calc(100vw - 16px));
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: 11px;
  pointer-events: none;
}
.mining-day-tooltip-title {
  font-size: 12px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mining-day-tooltip-shift {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  margin-top: 4px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}
.mining-day-tooltip-shift span {
  overflow: hidden;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mining-day-tooltip-shift strong {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.mining-day-tooltip-grid {
  display: grid;
  grid-template-columns: minmax(76px, auto) minmax(0, 1fr);
  gap: 3px 12px;
  padding-top: 7px;
}
.mining-day-tooltip-grid span {
  color: var(--text-muted);
}
.mining-day-tooltip-grid strong {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.mining-day-tooltip-total {
  min-width: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mining-day-tooltip-total-parts {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3px 5px;
  flex-wrap: wrap;
}
.mining-day-tooltip-total-parts span {
  color: var(--text-muted);
}
.mining-day-tooltip-total-parts strong,
.mining-day-tooltip-total strong {
  color: var(--text);
  font-weight: 800;
}
.mining-day-tooltip-sep {
  color: var(--text-muted);
}
.mining-code-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}
.mining-code-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
}
.mining-code-option:hover { background: var(--surface-hover); }
.mining-bulk-range {
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 12px;
}
.mining-replace-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
}
.mining-candidate-form-stack {
  display: grid;
  gap: 16px;
  min-width: 0;
}
#mining-candidate-overlay {
  padding: 12px;
}
.mining-candidate-modal {
  overflow: hidden;
}
.mining-candidate-form {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.mining-candidate-modal .modal-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mining-form-section {
  display: grid;
  gap: 10px;
}
.mining-form-section + .mining-form-section {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.mining-form-section-head h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 750;
  color: var(--text);
}
.mining-candidate-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.mining-split-field {
  grid-column: 1 / -1;
}
.mining-split-editor {
  display: grid;
  gap: 8px;
}
.mining-split-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 8px;
  align-items: center;
}
.mining-split-percent {
  text-align: right;
}
.mining-candidate-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mining-candidate-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--gray-200);
}
.mining-candidate-footer-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.mining-check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px;
}

/* Rates module */
.rates-page { padding: 16px; }
.rates-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.rates-toolbar h2 { margin: 0; font-size: var(--fs-2xl); font-weight: 650; }
.rates-subtitle { margin-top: 3px; color: var(--text-muted); font-size: 12px; }
.rates-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.rates-filter-card {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.rates-filter-grid,
.rates-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.rates-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}
.rates-field > span,
.rates-section-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}
.rates-field small { color: var(--text-muted); font-size: 11px; line-height: 1.35; }
.rates-search,
.rates-span-2 { grid-column: span 2; }
.rates-check {
  align-self: end;
  color: var(--text-muted);
}
.rates-table-card { margin-bottom: 0; }
.rates-table-wrap,
.rates-lines-wrap {
  overflow: auto;
  max-height: calc(100vh - 300px);
}
#rates-awards-view .rates-table-wrap,
.rates-award-data .rates-table-wrap {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}
.rates-table { min-width: 800px; table-layout: fixed; }
.rates-table th:first-child { width: 44px; }
.rates-table th:nth-child(2) { width: 29%; }
.rates-table th:nth-child(3) { width: 23%; }
.rates-table th:nth-child(4) { width: 145px; }
.rates-table th:last-child { width: 48px; }
.rates-table tr.is-muted td { opacity: .58; }
.rates-row-warning { margin-top: 2px; color: var(--warn); font-size: 10px; font-weight: 700; }
.rates-row-actions { white-space: nowrap; text-align: right; }
.rates-status-draft,
.rates-status-active,
.rates-status-needs_review,
.rates-status-archived { border: 1px solid transparent; }
.rates-status-draft { background: var(--gray-100); color: var(--text-muted); border-color: var(--border); }
.rates-status-active { background: color-mix(in srgb, #10b981 18%, var(--surface)); color: #047857; }
.rates-status-needs_review { background: color-mix(in srgb, #f59e0b 22%, var(--surface)); color: #92400e; }
.rates-status-archived { background: color-mix(in srgb, #64748b 18%, var(--surface)); color: #475569; }
.rates-card-modal {
  width: min(1180px, 96vw);
  max-width: min(1180px, 96vw);
  height: min(96vh, 1040px);
  max-height: 96vh;
  display: flex;
  flex-direction: column;
}
.rates-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}
.rates-loading { padding: 20px; color: var(--text-muted); }
.rates-editor { display: flex; flex-direction: column; gap: 14px; }
.rates-editor-tabs,
.rates-template-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
}
.rates-editor-tabs {
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: thin;
}
.rates-editor-tabs .btn { flex: 0 0 auto; }
.rates-editor-tab[aria-selected="true"] {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
}
.rates-template-tools .rates-field { min-width: 240px; flex: 1; }
.rates-structure-suggestion {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
}
.rates-structure-summary { display: flex; flex-wrap: wrap; gap: 5px; }
.rates-output-table { min-width: 680px; }
.rates-output-preview {
  overflow-x: auto;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
}
.rates-output-document { min-width: 620px; }
.rates-editor-section { display: flex; flex-direction: column; gap: 10px; }
.rates-card-field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rates-more-details {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alt);
}
.rates-more-details summary {
  padding: 10px 12px;
  cursor: pointer;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.rates-more-details summary span {
  margin-left: 6px;
  color: var(--text-muted);
  font-weight: 400;
}
.rates-more-details[open] summary { border-bottom: 1px solid var(--border); }
.rates-more-details .rates-form-grid { padding: 12px; }
.rates-lines-head,
.rates-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rates-warning-panel {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--border));
  border-radius: 8px;
  background: var(--warn-bg);
  color: var(--text);
}
.rates-warning-panel strong { display: block; margin-bottom: 4px; font-size: 12px; }
.rates-warning-panel ul { margin: 0 0 0 18px; color: var(--text-muted); font-size: 12px; }
.rates-lines-table { width: 100%; min-width: 0; table-layout: fixed; }
.rates-lines-table .rates-col-details { width: 32%; }
.rates-lines-table .rates-col-unit { width: 11%; }
.rates-lines-table .rates-col-money { width: 13%; }
.rates-lines-table .rates-col-action { width: 5%; }
.rates-card-modal .rates-lines-wrap { max-height: none; overflow: visible; }
.rates-placement-table { min-width: 900px; }
.rates-placement-table-wrap { max-height: none; overflow-x: auto; overflow-y: visible; }
.rates-lines-table tr { cursor: default; }
.rates-lines-table td { vertical-align: top; }
.rates-lines-table .form-control { width: 100%; min-width: 0; }
.rates-lines-table .rates-line-unit-select .ss-wrap { width: 100%; min-width: 0; }
.rates-line-details-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 7px; }
.rates-line-details-grid > label,
.rates-line-award-match { display: grid; min-width: 0; gap: 3px; }
.rates-line-details-grid > label > span,
.rates-line-award-match > span { color: var(--text-muted); font-size: 14px; font-weight: 700; }
.rates-line-detail-wide { grid-column: 1 / -1; }
.rates-line-award-match small { display: block; color: var(--text-muted); }
.rates-money-input { min-width: 0; text-align: right; }
.rates-pay-source {
  display: block;
  max-width: 155px;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.25;
}
.rates-pay-source button {
  display: block;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}
.rates-inline-action {
  display: block;
  max-width: 100%;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  cursor: pointer;
  font-size: 10px;
  line-height: 1.2;
  text-align: left;
  text-decoration: underline;
}
.rates-party-picker { position: relative; }
.rates-party-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
  padding: 0;
  list-style: none;
}
.rates-party-cards:empty { display: none; }
.rates-party-card {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
}
.rates-party-card > div { min-width: 0; }
.rates-party-card strong,
.rates-party-card span { display: block; overflow-wrap: anywhere; }
.rates-party-card strong { color: var(--text); font-size: 12px; }
.rates-party-card span { margin-top: 2px; color: var(--text-muted); font-size: 10px; }
.rates-party-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 5px;
}
.rates-party-chips:empty { display: none; }
.rates-party-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text);
  font-size: 11px;
}
.rates-party-chip button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.rates-party-legacy,
.rates-party-result-status {
  padding: 6px 8px;
  color: var(--text-muted);
  font-size: 11px;
}
.rates-party-legacy {
  margin-bottom: 5px;
  border-left: 3px solid var(--warn);
  background: var(--warn-bg);
}
.rates-party-results {
  position: absolute;
  z-index: 20;
  right: 0;
  left: 0;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.rates-party-results:empty { display: none; }
.rates-party-result {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.rates-party-result:hover,
.rates-party-result:focus-visible { background: var(--surface-alt); }
.rates-party-result span { color: var(--text-muted); font-size: 10px; }

.rates-fwc-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--border);
}
.rates-fwc-status > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface);
}
.rates-fwc-status span { color: var(--text-muted); font-size: 11px; }
.rates-fwc-status strong { font-size: 13px; }
.rates-fwc-ok { color: var(--success); }
.rates-fwc-off { color: var(--warn); }
.rates-fwc-callout,
.rates-fwc-disclaimer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--warning-border, #d7a84a);
  border-radius: var(--radius-md);
  background: var(--warning-bg, #fff8e6);
  color: var(--text);
  font-size: 12px;
}
.rates-fwc-callout span { flex: 1; color: var(--text-muted); }
.rates-fwc-error { border-color: var(--danger); background: var(--danger-bg); }
.rates-award-filters { display: flex; align-items: end; gap: 14px; }
.rates-award-filters .rates-field { flex: 1; }
.rates-award-select-col { width: 52px; }
.rates-award-counts { display: flex; flex-wrap: wrap; gap: 5px; }
.rates-award-counts span {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 10px;
}
.rates-award-coverage-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 10px;
}
.rates-coverage-unreviewed,
.rates-coverage-incomplete,
.rates-condition-unresolved,
.rates-condition-needs_decision,
.rates-condition-open { background: var(--warn-bg); color: var(--warn-text, #92400e); }
.rates-coverage-verified,
.rates-condition-available,
.rates-condition-imported,
.rates-condition-reviewed,
.rates-condition-resolved_by_supplement { background: color-mix(in srgb, var(--success) 16%, var(--surface)); color: var(--success); }
.rates-coverage-not_applicable,
.rates-condition-retired,
.rates-condition-reference_only { background: var(--surface-alt); color: var(--text-muted); }
.rates-inline-error { margin-top: 4px; color: var(--danger); font-size: 10px; }
.rates-row-muted { opacity: .6; }
.rates-award-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.rates-field > .rates-award-link,
.rates-award-data > .rates-award-link { font-size: 11px; }
.rates-award-link:hover { text-decoration: underline; }
.rates-award-data { display: grid; gap: 14px; min-width: 0; }
.rates-fwc-data-help,
.rates-fwc-code-key { color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.rates-award-data-tabs { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.rates-award-data-tabs .btn { flex: 0 0 auto; }
.rates-award-data-tabs [aria-selected="true"] { border-color: var(--accent); color: var(--accent); }
.rates-agreement-form { display: grid; gap: 14px; }
.rates-agreement-basics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rates-manual-section {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
section.rates-manual-section { padding: 12px; }
.rates-manual-section summary {
  padding: 12px;
  cursor: pointer;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.rates-manual-section summary span { margin-left: 5px; color: var(--text-muted); font-weight: 400; }
.rates-manual-section[open] summary { border-bottom: 1px solid var(--border); }
.rates-manual-section-body { display: grid; gap: 10px; padding: 12px; }
.rates-manual-section small { color: var(--text-muted); font-size: 11px; }
.rates-agreement-table-wrap { max-height: none; overflow-x: auto; overflow-y: visible; }
.rates-agreement-table { width: auto; min-width: 100%; }
.rates-agreement-table tr { cursor: default; }
.rates-agreement-table .form-control { min-width: 110px; }
.rates-agreement-rates { min-width: 980px; }
.rates-agreement-allowances { min-width: 1250px; }
.rates-agreement-penalties { min-width: 850px; }
.rates-agreement-table td:nth-last-child(1),
.rates-agreement-table th:nth-last-child(1) { width: 42px; }
.rates-coverage-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.rates-coverage-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 4px 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.rates-coverage-step.is-current { border-color: var(--warn); background: var(--warn-bg); }
.rates-coverage-step.is-waiting { opacity: .68; }
.rates-coverage-step-number {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}
.rates-coverage-step.is-complete .rates-coverage-step-number { background: var(--success-bg); color: var(--success); }
.rates-coverage-step strong,
.rates-coverage-step small { display: block; }
.rates-coverage-step small,
.rates-coverage-review small { color: var(--text-muted); font-size: 10px; }
.rates-coverage-step > .badge { grid-column: 2; justify-self: start; }
.rates-coverage-next {
  padding: 9px 11px;
  border-left: 3px solid var(--primary);
  background: var(--surface-alt);
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}
.rates-coverage-review {
  display: grid;
  grid-template-columns: minmax(170px, .65fr) minmax(260px, 1.4fr) auto;
  align-items: end;
  gap: 12px;
  padding: 12px;
}
.rates-coverage-review > div { display: flex; flex-direction: column; align-self: center; gap: 5px; }
.rates-coverage-review > p { grid-column: 2 / -1; margin: 0; color: var(--text-muted); font-size: 11px; }
.rates-coverage-notes textarea { min-height: 58px; }
.rates-condition-form,
.rates-coverage-conditions { display: grid; gap: 12px; }
.rates-condition-form .rates-editor-actions > div { display: flex; gap: 7px; }
.rates-coverage-conditions > .rates-penalty-head > .rates-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rates-coverage-dispositions { margin: 2px 0 0; }
.rates-coverage-filter {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  align-items: end;
  gap: 12px;
}
.rates-coverage-filter .rates-check,
.rates-coverage-filter > .rates-subtitle { min-height: 34px; display: flex; align-items: center; }
.rates-coverage-table-wrap { min-width: 0; overflow: visible; }
.rates-coverage-table { width: 100%; table-layout: fixed; }
.rates-coverage-table th,
.rates-coverage-table td { vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.rates-coverage-table th:nth-child(1) { width: 23%; }
.rates-coverage-table th:nth-child(2) { width: 19%; }
.rates-coverage-table th:nth-child(3) { width: 16%; }
.rates-coverage-table th:nth-child(4) { width: 18%; }
.rates-coverage-table th:nth-child(5) { width: 11%; }
.rates-coverage-table th:nth-child(6) { width: 13%; }
.rates-coverage-table td:first-child .badge { margin-right: 5px; }
.rates-coverage-table td:last-child > .badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.rates-coverage-table .rates-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-top: 6px; }
.rates-source-fwc { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); }
.rates-source-supplemental { background: color-mix(in srgb, var(--success) 14%, var(--surface)); color: var(--success); }
.rates-source-manual { background: var(--surface-alt); color: var(--text-muted); }
.rates-coverage-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 11px;
}
.rates-coverage-empty strong { color: var(--text); font-size: 12px; }
.rates-pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; color: var(--text-muted); font-size: 11px; }
.rates-pagination > div { display: flex; gap: 6px; }
.rates-award-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.rates-award-check-grid > :only-child { grid-column: 1 / -1; }
.rates-award-basis-card { display: grid; gap: 10px; }
.rates-award-readiness {
  padding: 12px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--warn);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.rates-award-readiness.is-confirmed { border-left-color: var(--success); }
.rates-award-readiness ol {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  counter-reset: readiness;
  list-style: none;
}
.rates-award-readiness li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
  counter-increment: readiness;
}
.rates-award-readiness li::before {
  content: counter(readiness);
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: 10px;
  font-weight: 800;
}
.rates-award-readiness li.is-complete::before { background: var(--success-bg); color: var(--success); }
.rates-award-readiness li small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 11px; line-height: 1.35; }
.rates-award-basis-selection {
  display: grid;
  gap: 4px;
  padding: 9px 11px;
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.rates-award-basis-selection strong { color: var(--text); }
.rates-award-basis-none { align-self: start; margin: 0; }
.rates-award-basis-optional-dropdown .ss-select-all,
.rates-award-basis-optional-dropdown .ss-divider { display: none; }
.rates-award-comparison {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--surface);
}
.rates-award-basis-result { border-left-color: var(--primary); }
.rates-award-basis-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rates-award-basis-hero span,
.rates-award-basis-hero small { display: block; color: var(--text-muted); font-size: 11px; }
.rates-award-basis-hero strong { font-size: 18px; white-space: nowrap; }
.rates-award-basis-result details { border-top: 1px solid var(--border); padding-top: 7px; }
.rates-award-basis-result summary { color: var(--primary); cursor: pointer; font-size: 11px; font-weight: 700; }
.rates-award-basis-result summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.rates-award-basis-breakdown { display: grid; gap: 5px; margin: 8px 0 0; }
.rates-award-basis-breakdown > div { display: flex; justify-content: space-between; gap: 12px; }
.rates-award-basis-breakdown dt { color: var(--text-muted); font-size: 11px; }
.rates-award-basis-breakdown dd { margin: 0; color: var(--text); font-size: 11px; text-align: right; }
.rates-award-comparison > span,
.rates-award-comparison > small,
.rates-award-comparison strong small { color: var(--text-muted); font-size: 11px; }
.rates-award-comparison-above { border-left-color: var(--success); }
.rates-award-comparison-equal,
.rates-award-comparison-missing { border-left-color: var(--warn); }
.rates-award-comparison-below { border-left-color: var(--danger); background: var(--danger-bg); }
.rates-award-check-table,
.rates-history-table { min-width: 760px; }
.rates-award-table-wrap,
.rates-history-event .rates-lines-wrap { max-height: none; overflow-x: auto; overflow-y: visible; }
.rates-history-list { display: grid; gap: 10px; }
.rates-history-event {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.rates-history-event header > div { display: flex; justify-content: space-between; gap: 12px; }
.rates-history-event header span,
.rates-history-event p { color: var(--text-muted); font-size: 11px; }
.rates-history-event p { margin: 0; }
.rates-history-card-changes { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--text-muted); font-size: 11px; }
.rates-history-old { color: var(--text-muted); text-decoration: line-through; }

@media (max-width: 900px) {
  .rates-fwc-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rates-award-filters { align-items: stretch; flex-direction: column; }
  .rates-fwc-callout { align-items: flex-start; flex-direction: column; }
  .rates-award-check-grid { grid-template-columns: 1fr; }
  .rates-history-event header > div { flex-direction: column; gap: 3px; }
  .rates-agreement-basics { grid-template-columns: 1fr; }
  .rates-agreement-basics .rates-span-2 { grid-column: auto; }
  .rates-coverage-steps { grid-template-columns: 1fr; }
  .rates-coverage-review { grid-template-columns: 1fr; align-items: stretch; }
  .rates-coverage-review > p { grid-column: auto; }
  .rates-coverage-filter { grid-template-columns: 1fr; align-items: stretch; }
  .rates-coverage-filter .rates-check,
  .rates-coverage-filter > .rates-subtitle { min-height: 0; }
  .rates-line-details-grid { grid-template-columns: 1fr; }
  .rates-line-detail-wide { grid-column: auto; }
}
@media (max-width: 760px) {
  .rates-lines-table colgroup,
  .rates-lines-table thead { display: none; }
  .rates-lines-table,
  .rates-lines-table tbody { display: block; }
  .rates-lines-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 10px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
  }
  .rates-lines-table td { display: block; padding: 0; border: 0; }
  .rates-lines-table td[data-label]::before {
    display: block;
    margin-bottom: 3px;
    color: var(--text-muted);
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
  }
  .rates-line-details,
  .rates-line-action { grid-column: 1 / -1; }
  .rates-line-action { text-align: right; }
}
.rates-zero-margin-reason { min-width: 150px !important; margin-top: 5px; font-size: 11px; }
.rates-line-margin-warning {
  display: block;
  margin-top: 4px;
  color: var(--warn-text);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.rates-line-margin-warning[hidden] { display: none; }
.rates-table tbody tr[role="button"]:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.rates-mini-check {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: 14px;
  white-space: nowrap;
}
.rates-line-floor-warning td { background: var(--danger-bg) !important; }
.rates-line-charge,
.rates-line-oncost,
.rates-line-gm {
  white-space: nowrap;
  vertical-align: middle;
}
.rates-line-derived {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}
.rates-oncost-form { display: flex; flex-direction: column; gap: 16px; }
.rates-oncost-form > .rates-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rates-oncost-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rates-oncost-categories { display: flex; flex-direction: column; gap: 8px; }
.rates-oncost-category {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 8px;
  align-items: center;
}
.rates-oncost-history { display: flex; flex-direction: column; gap: 8px; }
.rates-pay-grid {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(360px, 1.25fr);
  gap: 12px;
}
.rates-pay-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rates-pay-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  align-items: center;
}
.rates-pay-item-main { grid-template-columns: minmax(180px, 1fr) 130px 110px 34px; align-items: end; }
.rates-pay-abbreviation,
.rates-pay-multiplier {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  gap: 5px;
  color: var(--text-muted);
  font-size: 11px;
}
.rates-pay-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.rates-pay-type-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.rates-structure-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 260px;
  max-width: 620px;
}
.rates-penalty-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rates-penalty-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rates-penalty-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rates-penalty-line {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.rates-penalty-line-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(100px, .5fr) minmax(170px, 1fr) 100px 100px minmax(190px, 1.2fr) 28px;
  gap: 8px;
  align-items: end;
}
.rates-penalty-trigger-notes { min-width: 0; }
.rates-penalty-output {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 2px;
}
.rates-drawer-footer {
  margin: 4px -20px -16px;
  position: sticky;
  bottom: -16px;
  background: var(--surface);
}
.rates-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.rates-kv { display: grid; gap: 8px; }
.rates-kv div { display: flex; justify-content: space-between; gap: 10px; }
.rates-kv span,
.rates-audit-item span { color: var(--text-muted); font-size: 11px; }
.rates-preview-text {
  min-height: 180px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
}
.rates-audit-list { display: flex; flex-direction: column; gap: 8px; }
.rates-audit-item {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alt);
}
.rates-audit-item strong,
.rates-audit-item span { display: block; }
.rates-audit-item p { margin-top: 6px; color: var(--text); font-size: 12px; }
.rates-empty-inline { color: var(--text-muted); font-size: 12px; }
.rates-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.rates-settings-section { padding: 16px 0; border-top: 1px solid var(--border); }
.rates-page [hidden], #rates-card-modal [hidden], .rates-award-data [hidden] { display: none !important; }
#rates-award-data-table { min-width: 0; }
.rates-reference-table { min-width: 660px; }
.rates-reference-table td { vertical-align: top; white-space: nowrap; }
.rates-reference-table td:first-child { min-width: 190px; white-space: normal; }
.rates-reference-table summary { cursor: pointer; white-space: nowrap; }
.rates-reference-table .rates-report-reference { white-space: normal; }
.rates-reference-table .rates-report-reference dd { overflow-wrap: anywhere; }
/* Rates operating layout: contextual rows, persistent navigation, bounded controls. */
.rates-list-filters { display: grid; grid-template-columns: minmax(240px, 2fr) repeat(3, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.rates-list-filters .rates-search { grid-column: auto; }
.rates-list-options, .rates-selection-bar, .rates-report-toolbar, .rates-pagination { display: flex; align-items: center; gap: 12px; padding: 10px 0; flex-wrap: wrap; }
.rates-list-options .rates-check { align-self: center; }
.rates-list-sort { margin-left: auto; width: 210px; }
.rates-selection-bar { justify-content: space-between; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 12px; }
.rates-pagination { justify-content: flex-end; }
#rates-list-region[aria-busy="true"], #rates-report-results[aria-busy="true"] { opacity: .6; }
.rates-table-wrap:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.rates-table tbody tr.is-selected td { background: var(--primary-bg); }
.rates-table td, .rates-report-table td { vertical-align: top; }
.rates-table .rates-cell-meta, .rates-report-table .rates-cell-meta { color: var(--text-muted); }
.rates-table .rates-row-warning, .rates-report-table .rates-row-warning { font-size: inherit; font-weight: 500; }
.rates-table .rates-inline-action { font: inherit; }
.rates-report-table { min-width: 850px; }
.rates-report-reference { min-width: 190px; max-width: 330px; margin: 8px 0 0; }
.rates-report-reference dt { font-weight: 600; }
.rates-report-reference dd { margin: 0 0 8px; color: var(--text-muted); }
.rates-report-table summary, .rates-source-details summary, .rates-review-notes summary, .rates-structure-details summary { cursor: pointer; }
.rates-source-details { margin: 0 0 14px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.rates-source-details > summary { color: var(--text-muted); font-size: 12px; }
.rates-source-details .rates-actions { justify-content: flex-start; margin: 10px 0; }
.rates-editor-navigation { flex-shrink: 0; position: sticky; top: -16px; z-index: 5; margin: -16px -20px 0; padding: 14px 20px 8px; background: var(--surface); border-bottom: 1px solid var(--border); }
.rates-card-context { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding-bottom: 10px; }
.rates-card-context > div { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; }
.rates-card-context > div:first-child { flex: 1; }
.rates-card-context strong { overflow-wrap: anywhere; }
.rates-card-context span:not(.badge) { color: var(--text-muted); font-size: 12px; }
.rates-card-modal .modal-header h3 { overflow-wrap: anywhere; }
.rates-editor [role="tabpanel"] { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rates-review-notes summary { font-size: 13px; font-weight: 600; }
.rates-review-notes summary span { color: var(--text-muted); font-weight: 400; margin-left: 8px; }
.rates-review-notes ul { margin-top: 8px; }
.rates-review-notes .rates-actions { margin-top: 10px; justify-content: flex-start; }
.rates-structure-details { color: var(--text-muted); font-size: 12px; }
.rates-structure-summary { margin-top: 8px; gap: 6px 16px; }
.rates-more-details { background: transparent; border-width: 1px 0 0; border-radius: 0; }
.rates-more-details summary { padding-left: 0; }
.rates-modal-footer { align-items: center; flex-shrink: 0; }
#rates-card-save-state { margin-right: auto; font-size: 12px; color: var(--text-muted); }
.rates-line-margin-warning, .rates-line-derived { white-space: normal; }
@media (max-width: 1100px) {
  .rates-penalty-line-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rates-list-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rates-list-filters .rates-search { grid-column: 1 / -1; }
  .rates-card-modal .rates-card-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rates-page { padding: 12px; }
  .rates-toolbar, .rates-card-context { flex-direction: column; }
  .rates-toolbar > .rates-actions { justify-content: flex-start; }
  .rates-selection-bar { align-items: start; }
  .rates-selection-bar > .rates-actions { justify-content: flex-start; }
  .rates-card-modal { width: 100vw !important; max-width: 100vw !important; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .rates-card-modal .modal-body { padding: 12px; }
  .rates-editor-navigation { top: -12px; margin: -12px -12px 0; padding: 12px; }
  .rates-template-tools { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  .rates-template-tools .rates-field { min-width: 0; }
  .rates-card-modal .rates-placement-table-wrap, .rates-card-modal .rates-lines-wrap:has(.rates-output-table), .rates-card-modal .rates-lines-wrap:has(.rates-award-check-table) { overflow-x: auto; }
  .rates-modal-footer { padding: 10px 12px; flex-wrap: wrap; }
  #rates-card-save-state { flex-basis: 100%; }
}
@media (max-width: 480px) {
  .rates-oncost-form > .rates-form-grid { grid-template-columns: 1fr; }
  .rates-oncost-form .rates-span-2 { grid-column: auto; }
  .rates-list-filters { grid-template-columns: 1fr; }
  .rates-card-modal .rates-card-field-grid { grid-template-columns: 1fr; }
  .rates-card-field-grid .rates-span-2 { grid-column: auto; }
  .rates-list-sort { width: 100%; margin-left: 0; }
}

.cvb-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding: 14px;
  gap: 12px;
}
.cvb-toolbar,
.cvb-doc-head,
.cvb-section-card-head,
.cvb-section-tools,
.cvb-actions,
.cvb-generate-actions,
.cvb-finalise-actions,
.cvb-role-summary-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cvb-toolbar,
.cvb-doc-head,
.cvb-section-card-head,
.cvb-section-tools {
  justify-content: space-between;
}
.cvb-toolbar > div:first-child,
.cvb-doc-head > div:first-child,
.cvb-resume-row > div:first-child,
.cvb-role-summary-row > div:first-child {
  min-width: 0;
}
.cvb-toolbar h2,
.cvb-doc-head h3,
.cvb-section-head h3,
.cvb-admin-page h2 {
  margin: 0;
  color: var(--text);
  letter-spacing: 0;
}
.cvb-toolbar h2 { font-size: 18px; }
.cvb-doc-head h3,
.cvb-section-head h3 { font-size: 15px; }
.cvb-doc-head h3,
.cvb-doc-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cvb-subtitle,
.cvb-doc-head span,
.cvb-section-head span,
.cvb-note span,
.cvb-draft small,
.cvb-result span,
.cvb-job-result span {
  color: var(--text-muted);
  font-size: 12px;
}
.cvb-workspace {
  display: grid;
  grid-template-columns: 240px minmax(420px, 1fr);
  gap: 12px;
  min-height: 0;
  flex: 1;
}
.cvb-drafts,
.cvb-section-picker,
.cvb-main,
.cvb-admin-panel {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.cvb-drafts,
.cvb-section-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  overflow: auto;
}
.cvb-main {
  overflow: auto;
  padding: 14px;
}
.cvb-main:has(.cvb-create) {
  overflow: visible;
}
.cvb-panel-title {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.cvb-draft-list,
.cvb-picker-list,
.cvb-result-list,
.cvb-sections,
.cvb-entry-list,
.cvb-warning-list,
.cvb-brand-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cvb-draft,
.cvb-picker-item,
.cvb-result,
.cvb-job-result {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  padding: 10px;
  text-align: left;
}
.cvb-picker-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.cvb-picker-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--primary-bg);
  color: var(--primary);
  font-weight: 800;
}
.cvb-picker-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cvb-draft {
  display: grid;
  gap: 4px;
}
.cvb-draft span,
.cvb-draft strong,
.cvb-result strong,
.cvb-job-result strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cvb-draft.active,
.cvb-result:hover,
.cvb-job-result:hover {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: var(--primary-bg);
}
.cvb-create,
.cvb-editor,
.cvb-admin-page,
.cvb-template-form,
.cvb-brand-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cvb-editor .form-control {
  font-family: var(--font);
  font-weight: 400;
}
.cvb-list-page {
  overflow: auto;
}
.cvb-list-filters {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.cvb-list-search {
  flex: 1 1 360px;
  max-width: 560px;
}
.cvb-resume-table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.cvb-resume-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  font-size: var(--fs-base);
  line-height: 1.45;
}
.perm-profile-list-table {
  min-width: 760px;
}
.cvb-resume-table th,
.cvb-resume-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.cvb-resume-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cvb-resume-table td {
  font-size: var(--fs-base);
}
.cvb-resume-table tbody tr:hover td {
  background: var(--surface-hover);
}
.cvb-resume-table strong,
.cvb-resume-table small {
  display: block;
}
.cvb-resume-table small {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: inherit;
}
.cvb-resume-table .right {
  text-align: right;
}
.cvb-table-link {
  border: 0;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 0;
  text-align: left;
}
.cvb-empty-cell {
  color: var(--text-muted);
  text-align: center;
}
.cvb-resume-list {
  display: grid;
  gap: 10px;
}
.cvb-resume-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}
.cvb-resume-row strong,
.cvb-resume-row span {
  display: block;
  min-width: 0;
}
.cvb-resume-row span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
}
.cvb-resume-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.cvb-step-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}
.cvb-step-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 10px;
  min-width: 0;
}
.cvb-step-tab strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cvb-step-tab span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--text-muted);
  font-size: 11px;
}
.cvb-step-tab.done span {
  background: #dcfce7;
  color: #166534;
}
.cvb-step-tab.active {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: var(--primary-bg);
  color: var(--text);
}
.cvb-step-tab.active span {
  background: var(--primary);
  color: #fff;
}
.cvb-step-panel {
  display: grid;
  gap: 14px;
}
.cvb-candidate-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  padding: 12px;
  text-align: left;
}
.cvb-candidate-card span,
.cvb-candidate-card small {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
}
.cvb-candidate-card strong {
  display: block;
  margin: 2px 0;
  color: var(--text);
  font-size: 15px;
}
.cvb-card-action {
  flex-shrink: 0;
  font-weight: 800;
}
.cvb-section-head {
  display: grid;
  gap: 3px;
}
.cvb-search-row,
.cvb-inline-field {
  display: flex;
  gap: 8px;
  min-width: 0;
}
.cvb-search-row input,
.cvb-inline-field input {
  min-width: 0;
  flex: 1;
}
.cvb-pick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cvb-create-options,
.cvb-meta-grid,
.cvb-entry-grid,
.cvb-role-target-grid,
.cvb-brand-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.cvb-meta-grid label,
.cvb-create-options label,
.cvb-entry-grid label,
.cvb-template-form label,
.cvb-upload-field,
.cvb-full-label {
  display: grid;
  gap: 5px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}
.cvb-field-label-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cvb-select-mount {
  min-width: 0;
}
.cvb-select-mount .ss-wrap {
  width: 100%;
  min-width: 0;
}
.cvb-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.cvb-inline-label {
  display: grid;
  gap: 5px;
  max-width: 220px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}
.cvb-text-controls,
.cvb-format-toolbar,
.cvb-section-preview-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.cvb-formatted-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.cvb-entry .cvb-formatted-field {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.cvb-formatted-field .cvb-inline-label {
  min-width: 180px;
}
.cvb-text-controls {
  align-items: flex-end;
  gap: 12px;
}
.cvb-format-toolbar .btn {
  min-width: 36px;
}
.cvb-format-help {
  color: var(--text-muted);
  font-size: 12px;
}
.cvb-custom-display,
.cvb-textarea {
  grid-column: 1 / -1;
}
.cvb-generate-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cvb-finalise-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.cvb-section-card,
.cvb-entry,
.cvb-note {
  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--text-muted));
  border-radius: 8px;
  background: var(--surface-alt);
}
.cvb-section-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  position: relative;
}
.cvb-section-card.is-dragging {
  opacity: .58;
}
.cvb-section-card.is-drop-before::before,
.cvb-section-card.is-drop-after::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  height: 3px;
  border-radius: 999px;
  background: var(--primary);
}
.cvb-section-card.is-drop-before::before {
  top: -7px;
}
.cvb-section-card.is-drop-after::after {
  bottom: -7px;
}
.cvb-section-card-head {
  display: grid;
  grid-template-columns: 28px minmax(180px, 360px) minmax(0, 1fr);
  align-items: flex-start;
}
.cvb-drag-handle {
  width: 28px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: grab;
  font: inherit;
  font-weight: 800;
}
.cvb-drag-handle:active {
  cursor: grabbing;
}
.cvb-section-title {
  width: 100%;
  font-weight: 400;
}
.cvb-section-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.cvb-check {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
}
.cvb-textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.45;
}
.cvb-auto-grow {
  field-sizing: content;
}
.cvb-section-preview-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-alt);
  color: var(--text);
  padding: 0;
  overflow: auto;
}
.cvb-section-preview-dialog::backdrop {
  background: rgb(15 23 42 / 58%);
}
.cvb-section-preview-head {
  position: sticky;
  top: 0;
  z-index: 1;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 12px 14px;
}
.cvb-section-preview-head strong,
.cvb-section-preview-head small {
  display: block;
}
.cvb-section-preview-head small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
}
.cvb-section-preview-page {
  width: min(620px, calc(100% - 32px));
  min-height: 780px;
  margin: 16px auto;
  background: #fff;
  box-shadow: 0 8px 28px rgb(15 23 42 / 16%);
  color: #1f2937;
  padding: 54px 48px;
}
.cvb-section-preview-document h3 {
  margin: 0;
  color: #111827;
  font-size: 18px;
}
.cvb-section-preview-rule {
  width: 64px;
  height: 2px;
  margin: 7px 0 18px;
  background: var(--primary);
}
.cvb-section-preview-copy {
  font-size: 12px;
  line-height: 1.55;
}
.cvb-section-preview-copy.two-columns {
  column-count: 2;
  column-gap: 26px;
}
.cvb-section-preview-copy p {
  margin: 0 0 10px;
}
.cvb-section-preview-list-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 5px;
  break-inside: avoid;
  margin-bottom: 5px;
}
.cvb-section-preview-list-row > span {
  color: var(--primary);
  font-weight: 700;
  text-align: right;
}
.cvb-section-preview-subheading {
  break-after: avoid;
  break-inside: avoid;
  margin: 9px 0 5px;
  color: #374151;
  font-weight: 700;
}
.cvb-section-preview-gap {
  height: 8px;
}
.cvb-section-preview-entry {
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 1.5;
}
.cvb-section-preview-entry h4,
.cvb-section-preview-entry h5,
.cvb-section-preview-entry p {
  margin: 0 0 5px;
}
.cvb-section-preview-entry h4 {
  color: #111827;
  font-size: 13px;
}
.cvb-section-preview-entry h5 {
  margin-top: 8px;
  color: #374151;
  font-size: 11px;
}
.cvb-section-preview-entry small {
  display: block;
  margin-bottom: 6px;
  color: #6b7280;
}
.cvb-entry {
  padding: 10px;
}
.cvb-role-target-list {
  display: grid;
  gap: 8px;
}
.cvb-role-target {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 10px;
}
.cvb-role-target .btn {
  justify-self: end;
}
.cvb-role-target-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.cvb-role-target-head strong,
.cvb-role-summary-row strong {
  display: block;
  color: var(--text);
  font-size: 13px;
}
.cvb-role-target-head span,
.cvb-role-summary-row span {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
}
.cvb-role-target-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  flex-shrink: 0;
}
.cvb-role-target-actions .btn {
  justify-self: auto;
}
.cvb-role-job-results,
.cvb-role-summary-list {
  display: grid;
  gap: 8px;
}
.cvb-finalise-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.cvb-summary-assist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.cvb-summary-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 238px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}
.cvb-summary-column > .btn {
  align-self: flex-start;
}
.cvb-summary-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cvb-summary-column-head strong {
  color: var(--text);
  font-size: 12px;
}
.cvb-ai-summary-output {
  flex: 1 1 auto;
  min-height: 174px;
  white-space: pre-line;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}
.cvb-ai-summary-draft {
  display: grid;
  gap: 6px;
}
.cvb-ai-summary-draft .cvb-ai-summary-output {
  min-height: 0;
}
.cvb-ai-summary-draft .cvb-role-summary-actions {
  justify-content: flex-start;
}
.cvb-muted {
  color: var(--text-muted);
}
.cvb-finalise-summary .cvb-kv,
.cvb-role-summary-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 10px;
}
.cvb-role-summary-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.cvb-role-summary-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}
.cvb-admin-json {
  font-family: var(--font-mono);
  font-size: 11px;
}
.cvb-entry-grid {
  align-items: end;
}
.cvb-entry-grid .cvb-textarea {
  min-height: 86px;
}
.cvb-note {
  display: grid;
  gap: 8px;
  padding: 10px;
}
.cvb-kv {
  display: grid;
  gap: 7px;
}
.cvb-kv div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.cvb-kv span {
  color: var(--text-muted);
}
.cvb-kv strong {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}
.cvb-warning-list {
  color: inherit;
  font-size: 12px;
  line-height: 1.35;
  margin: 0;
  padding-left: 16px;
}
.cvb-warning-card {
  display: grid;
  gap: 6px;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  background: #fef2f2;
  color: #b91c1c;
  padding: 10px 12px;
}
.cvb-inline-results {
  display: grid;
  gap: 8px;
}
.cvb-empty,
.cvb-loading {
  color: var(--text-muted);
  font-size: 12px;
  padding: 10px;
}
.cvb-error {
  color: var(--danger);
}
.cvb-admin-page {
  height: 100%;
  padding: 14px;
  overflow: auto;
}
.cvb-admin-grid {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(360px, 1.1fr);
  gap: 12px;
  min-height: 0;
}
.cvb-admin-grid.sections {
  grid-template-columns: 1fr;
}
.cvb-admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cvb-admin-tab {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 12px;
}
.cvb-admin-tab.active {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: var(--primary-bg);
  color: var(--text);
}
.cvb-admin-template-bar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.cvb-admin-template-select {
  max-width: 420px;
  flex: 1 1 280px;
}
.cvb-template-section-picker {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.cvb-template-section-picker label {
  flex: 1 1 260px;
}
.cvb-admin-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}
.cvb-sections-admin-panel {
  gap: 14px;
}
.cvb-section-config-list {
  display: grid;
  gap: 10px;
}
.cvb-section-config-card {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, var(--text-muted));
  border-radius: 8px;
  background: var(--surface-alt);
  padding: 12px;
}
.cvb-summary-column textarea {
  flex: 1 1 auto;
  min-height: 174px;
  resize: vertical;
}
.cvb-section-config-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.cvb-section-config-head strong,
.cvb-section-config-head span {
  display: block;
}
.cvb-section-config-head span {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
}
.cvb-section-config-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.cvb-section-help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.cvb-section-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}
.cvb-template-form textarea {
  min-height: 170px;
  resize: vertical;
}
.cvb-brand-grid {
  align-items: center;
}
.cvb-brand-grid .cvb-upload-field {
  grid-column: span 2;
}
.cvb-brand-grid .btn {
  justify-self: end;
}
.cvb-preview-modal,
.cvb-job-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .62);
  padding: 20px;
}
.cvb-preview-modal.open,
.cvb-job-modal.open {
  display: flex;
}
.cvb-preview-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(980px, 96vw);
  height: min(900px, 94vh);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cvb-job-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(680px, 94vw);
  max-height: min(620px, 90vh);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cvb-job-list {
  display: grid;
  gap: 8px;
  overflow: auto;
  padding: 12px;
}
.cvb-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
}
.cvb-preview-actions {
  display: flex;
  gap: 8px;
}
.cvb-preview-dialog iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #f8fafc;
}

.perm-page {
  display: grid;
  gap: 16px;
  padding: 16px;
}
.perm-header,
.perm-doc-head,
.perm-section-head,
.perm-actions,
.perm-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.perm-header h2,
.perm-doc-head h3,
.perm-section-head h3 {
  margin: 0;
  letter-spacing: 0;
}
.perm-header h2 { font-size: 18px; }
.perm-doc-head h3,
.perm-section-head h3 { font-size: 15px; }
.perm-header p,
.perm-doc-head span,
.perm-section-head span,
.perm-result span,
.perm-profile-row span,
.perm-field small,
.perm-empty,
.perm-loading {
  color: var(--text-muted);
}
.perm-workspace {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.perm-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 16px;
  align-items: start;
}
.perm-main-single {
  grid-template-columns: 1fr;
}
.perm-side,
.perm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}
.perm-side,
.perm-card {
  padding: 14px;
}
.perm-panel-title {
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.perm-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.perm-profile-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.perm-profile-table th,
.perm-profile-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.perm-profile-table th {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.perm-profile-table td strong,
.perm-profile-table td small {
  display: block;
}
.perm-profile-table td small {
  margin-top: 2px;
  color: var(--text-muted);
}
.perm-summary-list {
  display: grid;
  gap: 10px;
}
.perm-builder-side {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  max-height: calc(100vh - 190px);
  min-height: 0;
  overflow: hidden;
  position: sticky;
  top: 14px;
  width: 100%;
  box-sizing: border-box;
}
.perm-builder-side-with-qa {
  height: calc(100vh - 190px);
  height: calc(100dvh - 190px);
}
.perm-summary-card {
  display: grid;
  gap: 7px;
  padding: 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.perm-summary-head,
.perm-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.perm-summary-head strong {
  color: var(--text);
  font-size: 13px;
}
.perm-summary-head span,
.perm-summary-row span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}
.perm-summary-card.pending .perm-summary-head span {
  color: var(--warn-text);
}
.perm-summary-row b {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 400;
  text-align: right;
  overflow-wrap: anywhere;
}
.perm-qa-summary {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  margin-top: 14px;
  min-height: 0;
  overflow: hidden;
}
.perm-qa-summary > .perm-panel-title {
  margin-bottom: 0;
}
.perm-qa-summary-body {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.perm-builder-side .rfc-progress-rail {
  grid-template-rows: auto auto minmax(0, 1fr);
  margin-top: 14px;
  max-height: none;
  min-height: 0;
  overflow: hidden;
  position: static;
}
.perm-builder-side .rfc-progress-list {
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.perm-qa-group {
  padding: 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.perm-qa-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}
.perm-qa-group summary small {
  color: var(--text-muted);
  font-size: 11px;
}
.perm-qa-items {
  display: grid;
  gap: 8px;
  padding-top: 8px;
}
.perm-qa-item {
  display: grid;
  gap: 3px;
}
.perm-qa-item strong {
  color: var(--text);
  font-size: 11px;
}
.perm-qa-item p {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.perm-pdf-preview-frame {
  width: 100%;
  height: min(76vh, 820px);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.perm-profile-list,
.perm-result-list,
.perm-step-panel,
.perm-audience-list,
.perm-config-questions {
  display: grid;
  gap: 8px;
}
.perm-client-lookup {
  position: relative;
}
.perm-client-dropdown {
  position: absolute;
  z-index: 1400;
  top: 44px;
  left: 0;
  right: 0;
  max-height: min(340px, 52vh);
  padding: 8px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}
.perm-profile-row,
.perm-result {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 10px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.perm-profile-row:hover,
.perm-profile-row.active,
.perm-result:hover {
  border-color: var(--primary);
  background: var(--surface-hover);
}
.perm-profile-row strong,
.perm-result strong {
  color: var(--text);
  font-size: 13px;
}
.perm-profile-row span,
.perm-result span {
  font-size: 11px;
  line-height: 1.35;
}
.perm-editor,
.perm-settings-form {
  display: grid;
  gap: 14px;
}
.perm-settings-form > .perm-meta-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.perm-settings-form .form-control,
.perm-settings-form .ss-trigger {
  font-weight: 400;
}
.perm-settings-form .perm-meta-grid label,
.perm-settings-form .perm-field {
  font-weight: 600;
}
.perm-settings-form .ss-field,
.perm-settings-form .ss-wrap {
  width: 100%;
  min-width: 0;
}
.perm-settings-panel {
  display: grid;
  gap: 14px;
}
.perm-settings-panel[hidden] {
  display: none;
}
.perm-step-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
}
.perm-step-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  min-width: 0;
  padding: 8px 10px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}
.perm-step-tab strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.perm-step-tab span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--text-muted);
  background: var(--gray-100);
  border-radius: 999px;
  font-size: 11px;
}
.perm-step-tab.done span {
  color: #166534;
  background: #dcfce7;
}
.perm-step-tab.active {
  color: var(--text);
  background: var(--primary-bg);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
}
.perm-step-tab.active span {
  color: #fff;
  background: var(--primary);
}
.perm-row-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
.perm-client-card,
.perm-audience-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 12px;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  text-align: left;
}
.perm-client-card {
  cursor: default;
  opacity: 1;
}
.perm-client-card span,
.perm-client-card small,
.perm-audience-card span,
.perm-audience-card small {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}
.perm-client-card strong,
.perm-audience-card strong {
  display: block;
  margin: 2px 0;
  color: var(--text);
  font-size: 14px;
}
.perm-card-action {
  flex-shrink: 0;
  font-weight: 800;
}
.perm-finalise-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}
.perm-audience-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.perm-meta-grid,
.perm-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.perm-field-grid.stacked {
  grid-template-columns: 1fr;
}
.perm-field-grid.stacked .perm-field {
  padding: 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.perm-field-grid.stacked textarea.form-control {
  min-height: 96px;
}
.perm-research-question {
  scroll-margin-top: 78px;
}
.perm-research-question .perm-field {
  color: var(--text);
}
.perm-meta-grid label,
.perm-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}
.perm-meta-grid .form-control,
.perm-field > .form-control {
  font-weight: 400;
}
.perm-field.skipped > label:first-child {
  color: var(--gray-500);
}
.perm-field.skipped .form-control:disabled {
  background: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--gray-500);
  cursor: not-allowed;
  opacity: 1;
}
.perm-field-skip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
}
.perm-muted,
.perm-ai-meta {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}
.perm-config-builder {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.perm-config-section {
  display: grid;
  gap: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--gray-300);
  border-left: 4px solid #ce9434;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(15,23,42,.05);
}
.perm-draft-grid {
  display: grid;
  grid-template-columns: minmax(280px, .95fr) minmax(340px, 1.05fr);
  gap: 10px 14px;
}
.perm-draft-head {
  color: var(--text);
  font-size: 14px;
  padding: 0 2px 2px;
}
.perm-draft-head-ai {
  color: var(--text-muted);
}
.perm-draft-pair-row {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(280px, .95fr) minmax(340px, 1.05fr);
  min-width: 0;
}
.perm-ai-draft-toolbar {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.perm-ai-draft-toolbar .btn {
  flex: 0 0 auto;
  min-width: 120px;
}
.perm-ai-notice {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 32px;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid #fde68a;
  border-radius: var(--radius);
  background: #fffbeb;
  color: #7c2d12;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.perm-ai-draft-block,
.perm-consultant-draft-block {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 238px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
.perm-ai-draft-block {
  background: var(--gray-50);
  border-color: var(--gray-200);
}
.perm-consultant-draft-block {
  background: #fff;
  border-color: #d6dee8;
  box-shadow: inset 3px 0 0 #ce9434;
}
.perm-ai-draft-block strong,
.perm-consultant-draft-block strong {
  display: block;
  color: var(--text);
  font-size: 12px;
}
.perm-ai-draft-block p {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  white-space: pre-wrap;
}
.perm-consultant-draft-block textarea {
  min-height: 190px;
  overflow: hidden;
  resize: vertical;
}
.perm-output-settings {
  display: grid;
  gap: 12px;
}
.perm-output-settings-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
}
.perm-output-settings-card h4 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}
.perm-output-settings-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}
.perm-output-settings-fields > label {
  display: grid;
  gap: 5px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.perm-output-settings-fields > .perm-mini-check {
  display: inline-flex;
  font-weight: 400;
}
.perm-output-settings-wide {
  grid-column: 1 / -1;
}
.perm-output-settings-fields textarea[data-perm-auto-grow] {
  field-sizing: content;
  min-height: 60px;
  overflow-y: hidden;
  resize: none;
}
.perm-config-section-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--gray-50) 84%, #ce9434 16%);
  border-bottom: 1px solid var(--gray-200);
}
.perm-config-category-name {
  display: grid;
  flex: 1 1 300px;
  gap: 4px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}
.perm-config-category-name .form-control {
  color: var(--text);
  text-transform: none;
}
.perm-config-question-count {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.perm-config-category-actions,
.perm-config-question-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.perm-config-questions {
  gap: 16px;
  padding: 12px;
}
.perm-config-question {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 130px minmax(180px, 220px) auto;
  align-items: end;
  gap: 12px;
  padding: 10px 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--gray-300);
  border-radius: 7px;
}
.perm-config-question > label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.perm-config-question-text textarea {
  min-height: 60px;
}
.perm-config-question-actions {
  align-self: end;
  flex-wrap: nowrap;
}
.perm-mini-check {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
}
.perm-section {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.perm-kv {
  display: grid;
  gap: 3px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.perm-kv span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.perm-kv strong {
  color: var(--text);
  font-size: 13px;
}
.perm-json {
  font-family: var(--font-mono);
  font-size: 12px;
}
.perm-advanced-json {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.perm-advanced-json summary {
  display: grid;
  gap: 3px;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}
.perm-advanced-json summary small {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.perm-advanced-json[open] summary {
  margin-bottom: 8px;
}
.perm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}
.perm-error {
  color: var(--danger);
}

.content-copy-locked,
.content-copy-locked * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

.content-copy-locked input,
.content-copy-locked textarea,
.content-copy-locked select {
  user-select: auto !important;
  -webkit-user-select: auto !important;
}

.content-copy-locked .export-hide,
.content-copy-locked .copy-print-hide {
  display: none !important;
}

@media print {
  body.content-copy-locked-active > * {
    display: none !important;
  }

  body.content-copy-locked-active::before {
    content: "Printing is disabled for this access level.";
    display: block;
    padding: 32px;
    color: #111827;
    font: 600 14px/1.4 Arial, sans-serif;
  }
}

@media (min-width: 761px) and (max-width: 1050px) {
  .perm-config-question {
    grid-template-columns: minmax(0, 1fr) 130px minmax(180px, 220px);
  }
  .perm-config-question-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 760px) {
  .mining-toolbar { display: block; }
  .mining-legend-bar { align-items: stretch; }
  .mining-legend-bar .mining-month-controls {
    margin-left: 0;
    width: 100%;
  }
  .mining-month-controls { margin-top: 0; }
  .mining-filter-row { display: grid; grid-template-columns: 1fr; }
  .mining-filter-row #mining-search,
  .mining-filter-row #mining-consultant-filter,
  .mining-filter-row #mining-status-filter,
  .mining-filter-row #mining-sort-filter { width: 100%; }
  .rates-page { padding: 12px; }
  .rates-toolbar,
  .rates-lines-head,
  .rates-editor-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .rates-actions { justify-content: stretch; }
  .rates-actions .btn { flex: 1; }
  .rates-filter-grid,
  .rates-form-grid,
  .rates-penalty-line-grid,
  .rates-pay-grid,
  .rates-settings-grid,
  .perm-workspace,
  .perm-main,
  .perm-meta-grid,
  .perm-field-grid,
  .perm-draft-grid,
  .perm-draft-pair-row,
  .perm-config-question,
  .perm-output-settings-fields,
  .perm-finalise-summary,
  .perm-step-tabs,
  .cvb-workspace,
  .cvb-pick-grid,
  .cvb-create-options,
  .cvb-meta-grid,
  .cvb-entry-grid,
  .cvb-role-target-grid,
  .cvb-summary-assist,
  .cvb-finalise-summary,
  .cvb-admin-grid,
  .cvb-section-help-grid,
  .cvb-section-field-grid,
  .cvb-brand-grid,
  .cvb-step-tabs { grid-template-columns: 1fr; }
  .rates-pay-item-main { grid-template-columns: 1fr; }
  .rates-pay-item-main .btn { justify-self: start; }
  .cvb-page,
  .perm-page,
  .cvb-admin-page { padding: 12px; }
  .perm-header,
  .perm-doc-head,
  .perm-section-head,
  .perm-config-section-head,
  .perm-search-row,
  .perm-audience-card,
  .cvb-toolbar,
  .cvb-doc-head,
  .cvb-section-card-head,
  .cvb-section-tools,
  .cvb-search-row,
  .cvb-list-filters,
  .cvb-template-section-picker {
    align-items: stretch;
    flex-direction: column;
  }
  .perm-builder-side {
    height: auto;
    max-height: none;
    overflow: visible;
    position: static;
  }
  .perm-ai-draft-toolbar {
    flex-direction: column;
  }
  .perm-ai-notice {
    padding: 8px 10px;
    overflow: visible;
    line-height: 1.35;
    white-space: normal;
  }
  .perm-qa-summary-body {
    max-height: none;
    overflow-y: visible;
    scrollbar-gutter: auto;
  }
  .perm-builder-side .rfc-progress-rail {
    overflow: visible;
  }
  .perm-builder-side .rfc-progress-list {
    overflow-y: visible;
    scrollbar-gutter: auto;
  }
  .cvb-generate-actions,
  .cvb-finalise-actions,
  .cvb-role-summary-actions,
  .perm-actions,
  .perm-audience-actions,
  .cvb-actions {
    justify-content: stretch;
  }
  .cvb-generate-actions .btn,
  .cvb-finalise-actions .btn,
  .cvb-role-summary-actions .btn,
  .perm-actions .btn,
  .perm-audience-actions .btn,
  .perm-search-row .btn,
  .cvb-actions .btn,
  .cvb-search-row .btn,
  .cvb-template-section-picker .btn {
    width: 100%;
  }
  .cvb-main,
  .cvb-drafts,
  .cvb-section-picker {
    overflow: visible;
  }
  .cvb-resume-row,
  .cvb-candidate-card,
  .cvb-role-summary-row,
  .cvb-preview-head {
    align-items: stretch;
    flex-direction: column;
  }
  .cvb-resume-actions,
  .cvb-preview-actions {
    width: 100%;
  }
  .cvb-resume-actions .btn:not(.btn-table):not(.btn-table-text),
  .cvb-preview-actions .btn,
  .cvb-preview-actions a {
    flex: 1;
  }
  .cvb-section-card-head {
    grid-template-columns: 1fr;
  }
  .cvb-workspace {
    overflow: auto;
  }
  .cvb-brand-grid .cvb-upload-field {
    grid-column: auto;
  }
  .rates-search,
  .rates-span-2 { grid-column: auto; }
  .mining-candidate-form-grid,
  .mining-candidate-check-grid { grid-template-columns: 1fr; }
  .mining-split-row {
    grid-template-columns: minmax(0, 1fr) 84px;
  }
  .mining-candidate-modal-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .mining-candidate-footer-actions {
    justify-content: stretch;
  }
  .mining-candidate-footer-actions .btn {
    flex: 1;
  }
  .mining-grid .mining-candidate-head,
  .mining-grid .mining-candidate-cell,
  .mining-grid .mining-group-label { width: 230px; min-width: 230px; }
}

/* Activity call rounds and competitions: shared controls, local layout. */
.rounds-heading, .rounds-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rounds-actions { justify-content: flex-start; }
.rounds-heading { margin: 16px 0; }
.rounds-heading h2, .rounds-heading h3 { margin: 0; }
.rounds-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; margin-top: 20px; }
.rounds-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin: 16px 0; }
.rounds-editor label { display: grid; gap: 6px; }
.rounds-category { display: grid; grid-template-columns: minmax(200px, 2fr) 80px minmax(160px, 1fr) auto; gap: 6px 12px; align-items: end; margin: 16px 0; }
.rounds-note-source { grid-column: 1 / -1; }
.rounds-scoring { display: flex; gap: 8px 20px; flex-wrap: wrap; margin-top: 16px; }
.rounds-rules { white-space: pre-wrap; }
.rounds-table-wrap { overflow-x: auto; }
.rounds-table { width: 100%; border-collapse: collapse; }
.rounds-table th, .rounds-table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border); }
.rounds-table th { min-width: 100px; }
.rounds-table small, .rounds-scoring small { display: block; color: var(--text-muted); font-weight: normal; }
@media (max-width: 1100px) {
  .rounds-category { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rounds-category button { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 600px) { .rounds-category { grid-template-columns: minmax(0, 1fr); } }
/* Rates document builder uses the shared Tiptap controls and an isolated print preview. */
.rates-document-builder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.rates-document-builder > * { min-width: 0; max-width: 100%; }
.rates-document-builder h3, .rates-document-builder p { margin: 0; }
.rates-document-builder .nobul-rte-surface { min-height: 360px; }
.rates-document-builder .rates-actions { flex-wrap: wrap; }
.rates-document-actions { margin-top: 16px; }
.rates-document-preview-frame { width: 100%; height: min(780px, 80vh); background: #fff; border: 1px solid var(--border, #dce1e8); border-radius: 6px; }

.environment-bar { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; padding:.5rem 1rem; background:#fff0c2; color:#4b3500; font-weight:600; }
.environment-bar[hidden], .environment-bar a[hidden] { display:none; }
.environment-bar a { color:inherit; text-decoration:underline; }