/**
 * Hirewaar design tokens — single source of truth for the entire service.
 * Edit colors, radius, and layout values here only.
 */

:root {
  /* Brand */
  --color-primary: #C6D936;
  --color-primary-hover: #044647;
  --color-primary-light: #D8E86A;
  --color-on-primary: #051B05;
  --color-on-primary-hover: #ffffff;

  /* Surfaces */
  --color-bg: #FAFAF8;
  --color-surface: #FFFFFF;
  --color-surface-raised: #fafafa;
  --color-border: #E2E8E6;

  /* Text */
  --color-text: #051B05;
  --color-text-muted: #595B62;

  /* Accent / status */
  --color-accent: #044647;
  --color-accent-light: #00C7B1;
  --color-success: #2E9E4D;
  --color-warning: #B8942A;
  --color-error: #C94A42;

  /* Shape */
  --radius-control: 9999px;
  --radius-textarea: 1.25rem;
  --radius-card: 0;
  --radius-button: 9999px;

  /* Layout */
  --width-rail: 14.5rem;

  /* Light-era fallbacks (legacy templates / email) */
  --color-surface-light: #f4f4f4;
  --color-heading-light: #051B05;
  --color-body-light: #595B62;
  --color-muted-light: #969696;
}

/* Rounded inputs — pill for single-line fields, softer corners on textareas */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
.form-input,
.form-select {
  border-radius: var(--radius-control);
}

textarea,
.form-textarea {
  border-radius: var(--radius-textarea);
}

input[type="checkbox"],
input[type="radio"],
.form-checkbox {
  border-radius: 0.25rem;
}

/* Pill radius on all bordered CTAs (primary + outlined) */
a.border-2.inline-flex,
button.border-2.inline-flex,
[type="submit"].border-2.inline-flex {
  border-radius: var(--radius-button);
}

/* Primary CTAs — lime fill, dark label; teal + white on hover */
a.border-primary.bg-primary,
button.border-primary.bg-primary,
[type="submit"].border-primary.bg-primary {
  border-radius: var(--radius-button);
  color: var(--color-on-primary) !important;
}

a.border-primary.bg-primary:hover,
button.border-primary.bg-primary:hover,
[type="submit"].border-primary.bg-primary:hover {
  color: var(--color-on-primary-hover) !important;
}

/* Portal / dashboard cards */
.portal-card {
  border-radius: 1rem;
  background-color: var(--color-surface);
  box-shadow: 0 4px 20px rgb(4 70 71 / 0.06), 0 0 0 1px color-mix(in srgb, var(--color-border) 70%, transparent);
}

.portal-card-muted {
  border-radius: 1rem;
  background-color: var(--color-surface-raised);
  box-shadow: 0 4px 20px rgb(4 70 71 / 0.04), 0 0 0 1px color-mix(in srgb, var(--color-border) 70%, transparent);
}

/* Application pipeline stepper (candidate applications) */
.app-step {
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
}

.app-step--done {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  color: var(--color-text);
}

.app-step--current {
  border-color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface));
  color: var(--color-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.app-step--pending {
  border-color: var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
}

.app-step--success {
  border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));
  background-color: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
  color: var(--color-success);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-success) 20%, transparent);
}

.app-step--rejected {
  border-color: color-mix(in srgb, var(--color-error) 45%, var(--color-border));
  background-color: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
  color: var(--color-error);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-error) 20%, transparent);
}

/* Candidate application list cards */
.application-card-list {
  overflow: hidden;
}

.application-card-list__item + .application-card-list__item {
  border-top: 1px solid var(--color-border);
}

.application-card {
  display: flex;
  align-items: stretch;
  min-height: 4.75rem;
  background-color: var(--color-surface-raised);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.application-card:hover {
  background-color: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface-raised));
}

.application-card__accent {
  width: 4px;
  flex-shrink: 0;
}

.application-card__accent--active {
  background-color: var(--color-primary);
}

.application-card__accent--success {
  background-color: var(--color-success);
}

.application-card__accent--rejected {
  background-color: color-mix(in srgb, var(--color-error) 70%, var(--color-border));
}

.application-card__body {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  padding: 0.875rem 1rem;
}

.application-card__chevron {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.application-card:hover .application-card__chevron {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  color: var(--color-primary);
}

.analytics-chart {
  position: relative;
  overflow: hidden;
}

.analytics-chart svg {
  display: block;
  overflow: hidden;
}