/**
 * 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 — square corners across the product and emails */
  --radius-control: 0;
  --radius-textarea: 0;
  --radius-card: 0;
  --radius-button: 0;

  /* 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;
}

/* Square corners everywhere, including leftover rounded-* utilities. */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

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;
}

a.border-2.inline-flex,
button.border-2.inline-flex,
[type="submit"].border-2.inline-flex {
  border-radius: var(--radius-button);
  flex-shrink: 0;
  white-space: nowrap;
}

/* 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: var(--radius-card);
  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: var(--radius-card);
  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);
  overflow-wrap: anywhere;
}

.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;
}

/* In-page document / resume / portfolio viewer */
.doc-viewer {
  width: min(64rem, calc(100vw - 1.5rem));
  height: min(86vh, 48rem);
  max-width: 64rem;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 24px 64px rgb(5 27 5 / 0.22);
  transform-origin: center center;
}

.doc-viewer::backdrop {
  background: rgb(5 27 5 / 0.55);
}

.doc-viewer[open] {
  animation: doc-viewer-in 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.doc-viewer__panel {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  background-color: var(--color-surface);
}

.doc-viewer__header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--color-border);
  padding: 0.875rem 1.25rem;
}

.doc-viewer__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 800;
}

.doc-viewer__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.75rem;
}

.doc-viewer__external {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
}

.doc-viewer__external:hover {
  text-decoration: underline;
}

.doc-viewer__close {
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), border-color 160ms ease, color 160ms ease;
}

.doc-viewer__close:hover {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

.doc-viewer__close:active {
  transform: scale(0.97);
}

.doc-viewer__body {
  position: relative;
  min-height: 0;
  flex: 1;
  background: var(--color-bg);
}

.doc-viewer__frame,
.doc-viewer__image,
.doc-viewer__video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background-color: #ffffff;
}

.doc-viewer__frame[hidden],
.doc-viewer__image[hidden],
.doc-viewer__video[hidden] {
  display: none !important;
}

.doc-viewer__image,
.doc-viewer__video {
  object-fit: contain;
  padding: 1rem;
}

.doc-viewer__fallback {
  margin: 0;
  padding: 2.5rem 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

@keyframes doc-viewer-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .doc-viewer[open] {
    animation: none;
  }
}