@import url("/static/css/fonts.css");
/* =============================================================================
   Hiring Portal - UIkit theme layer (loaded AFTER uikit.min.css).
   We use UIkit for the generic component system (buttons, forms, tables, cards,
   labels, nav, alerts, modals, icons). This file does three things only:
     1. Design tokens - fed by --color-primary / --color-accent, which are
        injected per request from branding settings.
     2. Brand overrides - re-skin UIkit's primary-colored components to the
        tenant brand without recompiling UIkit's SASS (zero build step).
     3. Shared app components UIkit doesn't ship (hero, picker cards, key/value
        tables, consent rows, code blocks …). All class-scoped - no bare element
        rules that would out-specify UIkit's .uk-input / .uk-button etc.
   App-shell + admin tables live in admin.css; the proctored runner in test.css.
   ============================================================================= */
:root {
  /* ---- Brand (default = communication blue; overridden by branding) ---- */
  --color-primary: #0f6cbd;
  --color-accent: #0e700e;
  --brand: var(--color-primary);
  --brand-hover: color-mix(in srgb, var(--color-primary) 86%, #000);
  --brand-pressed: color-mix(in srgb, var(--color-primary) 72%, #000);
  --brand-tint: color-mix(in srgb, var(--color-primary) 12%, #fff);
  --brand-tint-2: color-mix(in srgb, var(--color-primary) 7%, #fff);

  /* ---- Neutral palette ---- */
  --neutral-bg-1: #ffffff;
  --neutral-bg-2: #f7f8fa;
  --neutral-bg-3: #eef0f3;
  --neutral-fg-1: #1c1d20;
  --neutral-fg-2: #43454a;
  --neutral-fg-3: #6b6e76;
  --neutral-stroke-1: #d4d7dd;
  --neutral-stroke-2: #e6e8ec;

  /* ---- Semantic ---- */
  --danger: #c0102a;  --danger-bg: #fdf2f3;  --danger-border: #f1d2d6;
  --success: #1a7f37; --success-bg: #eef8f1; --success-border: #cbe7d3;
  --warning: #9a6700; --warning-bg: #fff8ec; --warning-border: #f0e0bd;

  /* code surface (dark, tokenized) */
  --code-bg: #1b1f24; --code-fg: #e8eaed; --code-stroke: #30363d;

  /* ---- Typography ---- */
  --font-base: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Noto Sans Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  /* ---- Spacing (4px grid) ---- */
  --sp-xs: 4px; --sp-s: 8px; --sp-m: 12px; --sp-l: 16px; --sp-xl: 20px; --sp-xxl: 24px; --sp-xxxl: 32px;

  /* ---- Type scale - everything derives from --fs-base (13px) ---- */
  --fs-xs: 11px;   /* breadcrumb, fine print */
  --fs-sm: 12px;   /* meta, captions, badges, table headers */
  --fs-base: 13px; /* body, tables, inputs, buttons, nav, toasts */
  --fs-md: 15px;   /* card titles, brand, section headings */
  --fs-lg: 18px;   /* h3 */
  --fs-xl: 22px;   /* page titles / h1 */
  --fs-2xl: 28px;  /* dashboard stat numbers */
  --lh-base: 1.55;

  /* ---- Layout ---- */
  --navbar-h: 36px; --app-max: 1240px;
  --radius-s: 4px; --radius-m: 6px; --radius-l: 8px; --radius-xl: 12px;

  /* legacy aliases still referenced by some app CSS */
  --muted: var(--neutral-fg-3); --border: var(--neutral-stroke-2);
}

/* =============================================================================
   1. Base - font family + surface. UIkit owns the type scale; we only set the
   family, body background, and a couple of primitives.
   ============================================================================= */
html { -webkit-text-size-adjust: 100%; background: var(--neutral-bg-2); }
body {
  font-family: var(--font-base);
  font-size: var(--fs-base); line-height: var(--lh-base);
  background: var(--neutral-bg-2);
  color: var(--neutral-fg-1);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
.muted, .uk-text-meta { color: var(--neutral-fg-3); }
code, .mono { font-family: var(--font-mono); }
:not(pre) > code { background: var(--neutral-bg-3); color: var(--neutral-fg-2); padding: 1px 5px; border-radius: var(--radius-s); font-size: .92em; }

/* =============================================================================
   Type scale - pin UIkit's text + components to the scale so sizes are coherent
   (UIkit defaults, e.g. a 1.25rem toast, are otherwise off-base).
   ============================================================================= */
h1, .uk-h1 { font-size: var(--fs-xl); line-height: 1.25; }
h2, .uk-h2 { font-size: var(--fs-lg); line-height: 1.3; }
h3, .uk-h3 { font-size: var(--fs-md); line-height: 1.35; }
h4, h5, h6, .uk-h4 { font-size: var(--fs-base); line-height: 1.4; }
h1, h2, h3, h4, h5, h6, .uk-h1, .uk-h2, .uk-h3, .uk-h4 { font-family: var(--font-base); color: var(--neutral-fg-1); }
.uk-card-title { font-size: var(--fs-md); line-height: 1.4; }
p, li, td, th, label, dd, dt { font-size: var(--fs-base); }
.uk-text-meta, .uk-text-small, small { font-size: var(--fs-sm); line-height: 1.5; }
.uk-text-large { font-size: var(--fs-md); }
.uk-input, .uk-select, .uk-textarea { font-size: var(--fs-base); }
.uk-table { font-size: var(--fs-base); }
.uk-breadcrumb > * > * { font-size: var(--fs-xs); }
.uk-notification-message { font-size: var(--fs-base); line-height: 1.5; background: var(--neutral-bg-1); border-radius: var(--radius-m); box-shadow: 0 6px 22px rgba(0,0,0,.22); }
.uk-tooltip { font-size: var(--fs-sm); }
.uk-alert { font-size: var(--fs-base); }
.uk-nav-default, .uk-navbar-dropdown-nav { font-size: var(--fs-base); }

/* =============================================================================
   2. Brand overrides - re-skin UIkit's primary-colored components.
   ============================================================================= */
a, .uk-link, .uk-link-toggle, .uk-link-muted a:hover { color: var(--color-primary); }
a:hover, .uk-link:hover { color: var(--brand-hover); }

.uk-button-primary { background-color: var(--color-primary); }
.uk-button-primary:hover, .uk-button-primary:focus { background-color: var(--brand-hover); }
.uk-button-primary:active, .uk-button-primary.uk-active { background-color: var(--brand-pressed); }
.uk-button-text::before { border-bottom-color: var(--color-primary); }
.uk-button-link { color: var(--color-primary); }
/* destructive buttons use the brand danger token (UIkit ships coral by default) */
.uk-button-danger { background-color: var(--danger); }
.uk-button-danger:hover, .uk-button-danger:focus { background-color: color-mix(in srgb, var(--danger) 86%, #000); }
/* default buttons: lighter, neutral chrome that reads as "secondary" */
.uk-button-default { border-color: var(--neutral-stroke-1); color: var(--neutral-fg-1); background: var(--neutral-bg-1); }
.uk-button-default:hover, .uk-button-default:focus { border-color: var(--neutral-fg-3); background: var(--neutral-bg-1); color: var(--neutral-fg-1); }

/* ONE universal button size across the whole platform - no small/large mix.
   Size modifiers are neutralized so any stray class still renders uniformly. */
.uk-button, .uk-button-small, .uk-button-large {
  text-transform: none; letter-spacing: normal; font-weight: 500;
  font-size: var(--fs-base); line-height: 32px; padding: 0 15px; border-radius: var(--radius-s); }
.uk-button-text, .uk-button-link { line-height: inherit; padding: 0; }

/* uk-form-custom select rendered as a designed dropdown button */
.ui-select { display: inline-block; }
.ui-select--block { display: block; }
.ui-select > .uk-button { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-s);
  width: 100%; font-weight: 400; color: var(--neutral-fg-1); }
.ui-select > .uk-button > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select > .uk-button .uk-icon { flex: none; color: var(--neutral-fg-3); }

/* labels (badges) - default is brand; add neutral + semantic variants */
.uk-label { background-color: var(--color-primary); border-radius: var(--radius-s); text-transform: none; font-weight: 500; letter-spacing: .01em; font-size: var(--fs-sm); }
.uk-label-muted { background: var(--neutral-bg-3); color: var(--neutral-fg-2); }
.uk-label-soft { background: var(--brand-tint); color: var(--brand-pressed); }
.uk-label-success { background-color: var(--success); }
.uk-label-warning { background-color: var(--warning); color: #fff; }
.uk-label-danger  { background-color: var(--danger); }

/* form controls */
.uk-input:focus, .uk-select:focus, .uk-textarea:focus { border-color: var(--color-primary); }
.uk-checkbox:checked, .uk-radio:checked, .uk-checkbox:indeterminate { background-color: var(--color-primary); border-color: var(--color-primary); }
.uk-checkbox:focus, .uk-radio:focus { border-color: var(--color-primary); }
.uk-form-danger, .uk-form-danger:focus { border-color: var(--danger) !important; color: var(--danger); }

/* alerts */
.uk-alert-primary { background: var(--brand-tint); color: var(--brand-pressed); }
.uk-alert-success { background: var(--success-bg); color: var(--success); }
.uk-alert-warning { background: var(--warning-bg); color: var(--warning); }
.uk-alert-danger  { background: var(--danger-bg); color: var(--danger); }

/* misc accents */
.uk-progress::-webkit-progress-value { background-color: var(--color-primary); }
.uk-progress::-moz-progress-bar { background-color: var(--color-primary); }
.uk-progress { accent-color: var(--color-primary); }
.uk-text-primary { color: var(--color-primary) !important; }
.uk-card-default { box-shadow: 0 1px 2px rgba(20,23,28,.06), 0 1px 3px rgba(20,23,28,.10); border: 1px solid var(--neutral-stroke-2); border-radius: var(--radius-l); }
.uk-card-title { font-size: var(--fs-md); line-height: 1.4; }
.uk-heading-divider { border-bottom-color: var(--neutral-stroke-2); }
/* calmer, sentence-case tabs/subnav/nav-headers to match the nav + buttons */
.uk-tab > * > a, .uk-subnav > * > a { text-transform: none; letter-spacing: normal; }
.uk-nav-header { text-transform: none; letter-spacing: normal; }
.uk-tab > .uk-active > a { color: var(--color-primary); border-color: var(--color-primary); }
.uk-hr, hr { border-top-color: var(--neutral-stroke-2); }
::selection { background: var(--brand-tint); }

/* =============================================================================
   3. Shared app components (not provided by UIkit).
   ============================================================================= */

/* ---- Public top app bar ---- */
.site-header { position: sticky; top: 0; z-index: 980; background: var(--neutral-bg-1);
  border-bottom: 1px solid var(--neutral-stroke-2); }
.site-header__inner { display: flex; align-items: center; min-height: var(--navbar-h); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-m); text-decoration: none; color: var(--neutral-fg-1); }
.brand:hover { text-decoration: none; color: var(--neutral-fg-1); }
.brand__logo { height: 26px; max-width: 170px; width: auto; object-fit: contain; }
.brand__name { font-weight: 500; font-size: var(--fs-md); }
.site-main { min-height: calc(100vh - var(--navbar-h) - 72px); }
.site-footer { border-top: 1px solid var(--neutral-stroke-2); background: var(--neutral-bg-1); color: var(--neutral-fg-3); }

/* ---- Hero (landing) ---- */
.hero { text-align: center; }
.hero h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: var(--sp-s); }
.hero .lead { font-size: 1.15rem; color: var(--neutral-fg-2); max-width: 640px; margin: 0 auto; }

/* ---- Picker position cards ---- */
.position-card { display: flex; flex-direction: column; gap: var(--sp-s); height: 100%;
  background: var(--neutral-bg-1); border: 1px solid var(--neutral-stroke-2); border-radius: var(--radius-l);
  padding: var(--sp-xl); text-decoration: none; color: var(--neutral-fg-1);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; }
.position-card:hover { border-color: var(--color-primary); box-shadow: 0 8px 24px rgba(20,23,28,.10); transform: translateY(-2px); text-decoration: none; color: var(--neutral-fg-1); }
.position-card h3 { margin: 0; }
.position-card__meta { display: flex; gap: var(--sp-s); align-items: center; margin-top: auto; padding-top: var(--sp-s); flex-wrap: wrap; }
.position-card__cta { color: var(--color-primary); font-weight: 500; }
.position-card__btn { align-self: flex-start; margin-top: var(--sp-s); }

/* Light/dark toggle on candidate-facing pages (admin has its own in admin.css) */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: var(--radius-m); color: var(--neutral-fg-2); cursor: pointer; }
.theme-toggle:hover { background: var(--neutral-bg-3); color: var(--neutral-fg-1); text-decoration: none; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
/* Floating variant for the test runner / preflight (no header bar there) */
.theme-toggle--fixed { position: fixed; top: 10px; right: 12px; z-index: 1010;
  background: var(--neutral-bg-1); border: 1px solid var(--neutral-stroke-2); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ---- Key / value table (candidate detail, answer key) ---- */
.kv { width: 100%; border-collapse: collapse; }
.kv th { text-align: left; color: var(--neutral-fg-3); font-weight: 400; padding: var(--sp-s) var(--sp-m) var(--sp-s) 0; width: 45%; vertical-align: top; }
.kv td { padding: var(--sp-s) 0; }
.kv tr.total td, .kv tr.total th { border-top: 1px solid var(--neutral-stroke-2); padding-top: var(--sp-s); }

/* ---- Consent rows (apply / preflight) ---- */
label.consent { display: flex; gap: var(--sp-m); align-items: flex-start; cursor: pointer; color: var(--neutral-fg-1);
  background: var(--neutral-bg-2); border: 1px solid var(--neutral-stroke-1); border-radius: var(--radius-m);
  padding: var(--sp-m) var(--sp-l); margin-top: var(--sp-s); line-height: 1.5; }
label.consent:hover { border-color: var(--neutral-fg-3); }
label.consent input { margin-top: 2px; flex: none; width: 20px; height: 20px; }

/* ---- Code surfaces ---- */
.code-block, pre.code-block { background: var(--code-bg); color: var(--code-fg); border: 1px solid var(--code-stroke);
  padding: var(--sp-m); border-radius: var(--radius-m); overflow: auto; font-family: var(--font-mono);
  white-space: pre-wrap; font-size: var(--fs-sm); line-height: 1.5; }
.q-prompt pre { background: var(--code-bg); color: var(--code-fg); border: 1px solid var(--code-stroke);
  padding: var(--sp-m); border-radius: var(--radius-m); overflow: auto; font-family: var(--font-mono); }
.q-prompt pre code { background: none; padding: 0; color: inherit; }

/* ---- OTP / verification code input ---- */
.otp-input { max-width: 180px; text-align: center; letter-spacing: 8px; font-size: var(--fs-xl); }

/* small helpers */
.stack-sm > * + * { margin-top: var(--sp-s); }
.field-error { color: var(--danger); font-size: var(--fs-sm); margin-top: var(--sp-xs); }

/* =============================================================================
   Theme surfaces + dark mode.
   UIkit hardcodes light colors on several components; we re-point them at our
   --neutral-* tokens so they follow the theme. html[data-theme="dark"] then just
   flips the tokens. Brand (--color-primary) stays tenant-driven and unchanged.
   ============================================================================= */
.uk-card-default { background: var(--neutral-bg-1); color: var(--neutral-fg-1); }
.uk-input, .uk-select, .uk-textarea { background-color: var(--neutral-bg-1); color: var(--neutral-fg-1); border-color: var(--neutral-stroke-1); }
.uk-input:focus, .uk-select:focus, .uk-textarea:focus { background-color: var(--neutral-bg-1); color: var(--neutral-fg-1); }
.uk-input::placeholder, .uk-textarea::placeholder { color: var(--neutral-fg-3); }
.uk-form-label { color: var(--neutral-fg-2); }
/* disabled controls (e.g. the uk-form-custom upload field) must follow the theme;
   UIkit hardcodes #f8f8f8/#999 on :disabled at 0,2,0 - match it. */
.uk-input:disabled, .uk-select:disabled, .uk-textarea:disabled { background-color: var(--neutral-bg-3); color: var(--neutral-fg-3); border-color: var(--neutral-stroke-1); }
/* plain (un-modified) .uk-alert - UIkit gives it a hardcoded light bg */
.uk-alert:not(.uk-alert-primary):not(.uk-alert-success):not(.uk-alert-warning):not(.uk-alert-danger) { background: var(--neutral-bg-3); color: var(--neutral-fg-2); }
.uk-navbar-dropdown, .uk-dropdown { background: var(--neutral-bg-1); color: var(--neutral-fg-2); }
.uk-navbar-dropdown-nav > li > a, .uk-nav-default > li > a, .uk-dropdown-nav > li > a { color: var(--neutral-fg-2); }
.uk-navbar-dropdown-nav > li > a:hover, .uk-nav-default > li > a:hover, .uk-dropdown-nav > li > a:hover { color: var(--color-primary); }
/* dropdown section header (e.g. the role label) - UIkit hardcodes #333 at higher specificity */
.uk-nav-header, .uk-navbar-dropdown .uk-nav-header, .uk-dropdown .uk-nav-header { color: var(--neutral-fg-3); }
.uk-nav-divider, .uk-dropdown-nav .uk-nav-divider { border-top-color: var(--neutral-stroke-2); }
.uk-modal-dialog { background: var(--neutral-bg-1); color: var(--neutral-fg-1); }
.uk-breadcrumb > * > * { color: var(--neutral-fg-3); }
.uk-breadcrumb > * > a:hover { color: var(--color-primary); }
.uk-tab > * > a { color: var(--neutral-fg-3); }
.uk-placeholder { background: var(--neutral-bg-2); border-color: var(--neutral-stroke-2); }
.uk-hr, hr { border-top-color: var(--neutral-stroke-2); }
.uk-table-divider > tr:not(:first-child), .uk-table-divider > :not(:first-child) > tr, .uk-table-divider > :first-child > tr:not(:first-child) { border-top-color: var(--neutral-stroke-2); }

/* theme toggle (admin top bar) */
.app-themetoggle { display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--sp-s);
  color: var(--neutral-fg-2); cursor: pointer; }
.app-themetoggle:hover { color: var(--color-primary); }
.app-themetoggle svg { width: 18px; height: 18px; display: block; }
.app-themetoggle .icon-sun { display: none; }
html[data-theme="dark"] .app-themetoggle .icon-moon { display: none; }
html[data-theme="dark"] .app-themetoggle .icon-sun { display: block; }

/* ---- Dark palette: flip neutral + tint tokens; brand stays tenant-driven ---- */
html[data-theme="dark"] {
  --neutral-bg-1: #24262b;
  --neutral-bg-2: #17181b;
  --neutral-bg-3: #2f3239;
  --neutral-fg-1: #e7e9ee;
  --neutral-fg-2: #b4b8c1;
  --neutral-fg-3: #8a8f99;
  --neutral-stroke-1: #3b3f47;
  --neutral-stroke-2: #2c2f35;
  --brand-tint: color-mix(in srgb, var(--color-primary) 30%, #24262b);
  --brand-tint-2: color-mix(in srgb, var(--color-primary) 18%, #24262b);
  --danger-bg: color-mix(in srgb, var(--danger) 24%, #24262b);
  --danger-border: color-mix(in srgb, var(--danger) 45%, #24262b);
  --success-bg: color-mix(in srgb, var(--success) 24%, #24262b);
  --success-border: color-mix(in srgb, var(--success) 45%, #24262b);
  --warning-bg: color-mix(in srgb, var(--warning) 26%, #24262b);
  --warning-border: color-mix(in srgb, var(--warning) 45%, #24262b);
}
/* dark: lift link / accent legibility on dark surfaces */
html[data-theme="dark"] a, html[data-theme="dark"] .uk-link,
html[data-theme="dark"] .stat__num, html[data-theme="dark"] .uk-text-primary,
html[data-theme="dark"] .position-card__cta { color: color-mix(in srgb, var(--color-primary) 60%, #fff); }
html[data-theme="dark"] a:hover, html[data-theme="dark"] .uk-link:hover { color: color-mix(in srgb, var(--color-primary) 42%, #fff); }
html[data-theme="dark"] .app-navbar .app-nav > li.uk-active > a { color: color-mix(in srgb, var(--color-primary) 60%, #fff); }
/* dropdown menu items stay neutral (not link-blue) in dark, matching light mode */
html[data-theme="dark"] .uk-navbar-dropdown-nav > li > a, html[data-theme="dark"] .uk-dropdown-nav > li > a { color: var(--neutral-fg-2); }
html[data-theme="dark"] .uk-navbar-dropdown-nav > li > a:hover, html[data-theme="dark"] .uk-dropdown-nav > li > a:hover { color: color-mix(in srgb, var(--color-primary) 60%, #fff); }
/* dark: question-type tags need dark-friendly fills */
html[data-theme="dark"] .q-type--mc   { background: #2b2f52; color: #aab2ff; }
html[data-theme="dark"] .q-type--ms   { background: #173f3a; color: #6fe0cf; }
html[data-theme="dark"] .q-type--sa   { background: #2a2f38; color: #aeb6c4; }
html[data-theme="dark"] .q-type--code { background: #322048; color: #c9a6ff; }
html[data-theme="dark"] .asset-preview { background: var(--neutral-bg-3); }