/* ===========================================================================
   Talentloop candidate tracker — journey dashboard.
   Loaded alongside careers.css (shared public-site header/footer tokens are
   reused; only the header gets an extra account slot below). Clicking an
   application in the list below navigates to tracker-application-detail.html
   (its own page + assets/tracker-application-detail.css/.js) rather than
   switching an in-page panel, so the per-application detail markup lives
   there now, not here.
   =========================================================================== */

/* Talentloop is the platform brand on this screen, distinct from Samcruit's
   agency teal — overriding the primary tokens here re-themes every shared
   component (buttons, links, the brand badge, the "My tracker" nav state,
   input focus) on this page alone. Stage-pipeline colors (chip-stage, the
   admin's shared recruitment convention) use their own --stage-* tokens and
   are untouched by this. */
:root {
  --primary: #4338CA;
  --primary-hover: #3730A3;
  --primary-soft: #E7E5FB;
}

.tracker-account { --od-gap: var(--s-3); }
.btn-block { width: 100%; justify-content: center; }

.tracker-page-inner {
  --od-gap: var(--s-6);
  max-width: 1240px;
  margin-inline: auto;
  padding: var(--s-6) var(--s-4) var(--s-12);
  display: flex;
  flex-direction: column;
}

.tracker-welcome { --od-gap: var(--s-1); }
.tracker-welcome-title { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 700; letter-spacing: -.01em; }

/* ---------- one candidate, several applications: scrollable row list ------- */
/* Replaces a chip-per-application switcher, which stopped working once there
   could be 10-30 applications instead of 2: a row list scrolls, a chip row
   wraps into a wall. Search and the stage chips reuse app.js's shared
   [data-search] / [data-filter-group] contract (assets/app.js header
   comment), so this list already supports many rows without extra JS. */
.applications-card { margin-bottom: var(--s-6); }
.app-list-head { --od-gap: var(--s-3); }
.app-list-head-row { --od-gap: var(--s-4); flex-wrap: wrap; }
.app-search-field { flex: 1 1 240px; max-width: 320px; }
.app-stage-filter { --od-gap: var(--s-2); }

.app-list {
  max-height: min(380px, 60vh);
  border-top: 1px solid var(--border);
}
.app-list-empty { padding: var(--s-6) var(--s-4); text-align: center; }
.app-list-empty[hidden] { display: none; }

/* each row is a real link to its own detail page, not an in-page toggle, so
   it gets the site's standard "whole row is a link" treatment: reset the
   browser default link color/underline and let .row-chevron (assets/app.css)
   signal "this goes somewhere" instead of a selected/pressed state. */
a.app-row {
  --od-gap: var(--s-3);
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--t-state);
}
.app-row:last-child { border-bottom: 0; }
.app-row:hover { background: var(--surface-sunken); color: inherit; }
.app-row:hover .row-chevron { color: var(--ink-muted); }
.app-row:focus-visible { outline-offset: -2px; }
.app-row-main { --od-gap: 2px; }
.app-row-title { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.app-row-sub { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); }
.app-row-aside { --od-gap: var(--s-1); justify-items: end; text-align: right; }
.app-row-date { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-muted); }
.app-row[hidden] { display: none; }

/* ---------- account + more-roles widgets ------------------------------------ */
.account-grid { --od-cols: 1; }
@media (min-width: 768px) { .account-grid { --od-cols: 2; } }
.account-card-body { --od-gap: var(--s-3); }
.account-actions { --od-gap: var(--s-2); flex-wrap: wrap; }