/* Recruiting visual finish — 2026-09-06.
 * Scoped to the existing Recruiting surfaces and candidate drawer. Their
 * renderers still own layout, density, drag/drop feedback and status colors.
 * Dark surfaces deliberately stay in the app's neutral charcoal family.
 */
:is([id^="recruiting-"][id$="-root"], .cpd-root) {
  --rec-page: #f5f6f8;
  --rec-card: #ffffff;
  --rec-inset: #f7f8fa;
  --rec-inset-strong: #eef1f4;
  --rec-border: #d8dde4;
  --rec-border-strong: #bdc6d1;
  --rec-text: #152033;
  --rec-muted: #42516a;
  --rec-subtle: #5d6879;
  --rec-shadow: 0 1px 2px #00000006, 0 3px 12px #00000005;
  --rec-shadow-hover: 0 2px 8px #0000000c;
  --rec-highlight: inset 0 1px 0 #ffffffb3;
  --rec-accent-ink: color-mix(in srgb, var(--accent, #f5a623) 40%, #152033);
  --rec-accent-tint: color-mix(in srgb, var(--accent, #f5a623) 6%, var(--rec-card));

  /* Root-defined aliases otherwise resolve before inheritance. Rebind these
   * locally; do not change any global or semantic status/approval token. */
  --color-surface: var(--rec-card);
  --color-surface-2: var(--rec-inset);
  --color-surface-3: var(--rec-inset-strong);
  --color-border: var(--rec-border);
  --color-border-strong: var(--rec-border-strong);
  --color-text: var(--rec-text);
  --color-text-muted: var(--rec-muted);
  --color-text-subtle: var(--rec-subtle);
  --emr-divider: var(--rec-border);
  color: var(--rec-text);
}

html:is([data-theme="dark"],[data-theme="dim"]) :is([id^="recruiting-"][id$="-root"], .cpd-root) {
  --rec-page: var(--emr-bg);
  --rec-card: var(--emr-card-bg);
  --rec-inset: var(--emr-bg-muted);
  --rec-inset-strong: var(--bg4);
  --rec-border: var(--emr-border);
  --rec-border-strong: var(--emr-border-strong);
  --rec-text: var(--emr-text);
  --rec-muted: var(--emr-text-muted);
  --rec-subtle: var(--emr-text-subtle);
  --rec-shadow: 0 2px 5px #00000026;
  --rec-shadow-hover: 0 3px 10px #00000040;
  --rec-highlight: inset 0 1px 0 #ffffff06;
  --rec-accent-ink: color-mix(in srgb, var(--accent, #f5a623) 72%, white);
}

[id^="recruiting-"][id$="-root"] { background: var(--rec-page); }

/* Cards retain their original grid positions, dimensions and inner spacing. */
:is([id^="recruiting-"][id$="-root"], .cpd-root)
  :is(.recruiting-tile, .recruiting-pipeline, .recruiting-analytics-tile,
      .recruiting-aggregate, .recruiting-links-card, .rta-card, .rta-kpi,
      .rtl-form-card) {
  background: var(--rec-card);
  border-color: var(--rec-border);
  border-radius: 8px;
  box-shadow: var(--rec-shadow), var(--rec-highlight);
}
[id^="recruiting-"][id$="-root"] :is(.rta-card-edbot, .rtl-form-card) {
  border-left-color: var(--color-primary);
}
#recruiting-hub-root .recruiting-tile[data-tile="candidates"] {
  background: var(--rec-accent-tint);
  box-shadow: inset 2px 0 0 var(--accent, #f5a623), var(--rec-shadow);
}
#recruiting-hub-root .recruiting-tile[data-tile="candidates"] .recruiting-tile-value {
  color: var(--rec-accent-ink);
}
#recruiting-hub-root .recruiting-tile:hover {
  border-color: var(--rec-accent-ink);
  box-shadow: var(--rec-shadow-hover);
}
:is([id^="recruiting-"][id$="-root"], .cpd-root)
  :is(.recruiting-page-kicker, .cpd-header-kicker) {
  color: var(--rec-accent-ink);
}
#recruiting-hub-root :is(.recruiting-pipeline-title, .recruiting-analytics-title, .recruiting-tile-label) {
  color: var(--rec-muted);
}

/* Inset metric groups and stage cells get definition without competing with
 * the existing hired/rejected/compliance colors or changing their meaning. */
[id^="recruiting-"][id$="-root"]
  :is(.recruiting-summary-bar, .recruiting-metric-grid) > div {
  box-shadow: inset 0 0 0 1px var(--rec-border);
}
#recruiting-hub-root .recruiting-pipeline-cell:not(.is-hired):not(.is-rejected) {
  background: var(--rec-inset);
  box-shadow: inset 0 0 0 1px var(--rec-border);
}
#recruiting-hub-root .recruiting-pipeline-cell:hover {
  outline: 1px solid var(--rec-border-strong);
  outline-offset: -1px;
}

/* Column headers, stage rails and drag targets keep their existing semantics.
 * Only the neutral container treatment is shared with the hub. */
#recruiting-pipeline-root .recruiting-board-col {
  background: var(--rec-inset);
  border-color: var(--rec-border);
  border-radius: 8px;
  box-shadow: var(--rec-shadow);
}
#recruiting-pipeline-root .recruiting-board-col-head {
  background: var(--rec-card);
  border-bottom-color: var(--rec-border);
  box-shadow: var(--rec-highlight);
}
#recruiting-pipeline-root .recruiting-card:not(.is-approved) {
  background: var(--rec-card);
  /* Keep the stage-colored left edge. */
  border-top-color: var(--rec-border);
  border-right-color: var(--rec-border);
  border-bottom-color: var(--rec-border);
  border-radius: 7px;
  box-shadow: var(--rec-shadow), var(--rec-highlight);
}
#recruiting-pipeline-root .recruiting-card:not(.is-approved):not(.is-dragging):not(.is-moving):hover {
  box-shadow: var(--rec-shadow-hover);
}

/* Compact tables keep every column and row height. Existing positive/negative,
 * overdue and stage classes retain their own foregrounds and backgrounds. */
:is([id^="recruiting-"][id$="-root"], .cpd-root)
  :is(.recruiting-data-table, .recruiting-list-table, .rta-table, .cpd-table) thead {
  background: var(--rec-inset);
  box-shadow: 0 1px 0 var(--rec-border);
}
:is([id^="recruiting-"][id$="-root"], .cpd-root)
  :is(.recruiting-th, .recruiting-th-right, .rta-th) {
  color: var(--rec-muted);
}

/* Secondary controls remain secondary; primary and destructive actions keep
 * their existing colors, sizes, disabled states and handlers. */
:is([id^="recruiting-"][id$="-root"], .cpd-root) .btn-secondary {
  background: var(--rec-card);
  border-color: var(--rec-border-strong);
  border-radius: 6px;
  color: var(--rec-muted);
  box-shadow: var(--rec-highlight);
}
:is([id^="recruiting-"][id$="-root"], .cpd-root) .btn-secondary:hover:not(:disabled) {
  background: var(--rec-inset-strong);
  border-color: var(--rec-accent-ink);
  color: var(--rec-text);
}
:is([id^="recruiting-"][id$="-root"], .cpd-root)
  :is(.recruiting-board-select, .recruiting-url-input, .rtl-input, .cpd-input,
      .cpd-reason-input, .cpd-comment-input) {
  border-color: var(--rec-border-strong);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px #00000008;
}
:is([id^="recruiting-"][id$="-root"], .cpd-root)
  :is(.btn, button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--rec-accent-ink);
  outline-offset: 2px;
}
/* Search ships with an inline outline reset; restore keyboard visibility. */
#recruiting-pipeline-root input[data-q]:focus-visible {
  outline: 2px solid var(--rec-accent-ink) !important;
  outline-offset: 2px;
}

/* Candidate drawer: preserve the approved green header, document status cards,
 * widths and tab structure. A quiet neutral frame emphasizes the content. */
.cpd-root .cpd-panel {
  background: var(--rec-page);
  border-left-color: var(--rec-border-strong);
}
.cpd-root.is-open .cpd-panel { box-shadow: -12px 0 36px #00000033; }
.cpd-root :is(.cpd-header:not(.is-approved), .cpd-tabbar, .cpd-footer) {
  background: var(--rec-card);
}
.cpd-root .cpd-tab.active {
  color: var(--rec-accent-ink);
  background: var(--rec-accent-tint);
}
.cpd-root .cpd-tab:hover { background: var(--rec-inset-strong); }

/* Color feedback stays still while working in dense controls. Dragging and
 * moving states retain the pipeline's existing transforms and opacity. */
:is([id^="recruiting-"][id$="-root"], .cpd-root) .btn:not(:disabled):active {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  :is([id^="recruiting-"][id$="-root"], .cpd-root) .btn { transition: none; }
}