:root {
  color-scheme: light dark;

  --surface-1: #fcfcfb;
  --surface-2: #f2f1ee;
  --border: #dddcd6;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #8a8983;
  --accent: #2a78d6;      /* categorical slot 1 (blue) — single data color */
  --accent-soft: #cde2fb;
  --danger: #b3261e;
  --track: #e6e5e0;       /* neutral donut track */
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-1: #1a1a19;
    --surface-2: #232322;
    --border: #3a3936;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #8f8e86;
    --accent: #3987e5;
    --accent-soft: #10375f;
    --danger: #e66767;
    --track: #33332f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--surface-2);
  color: var(--text-primary);
}

a { color: var(--accent); text-decoration: none; }

.panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  /* Wide tables scroll inside the panel instead of pushing the whole page
     sideways (the "right part hidden at 100% zoom" problem). */
  overflow-x: auto;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-tile .kpi-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.kpi-tile .kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.donut-wrap { display: flex; align-items: center; gap: 20px; }

.donut-center-value {
  font-size: 22px;
  font-weight: 700;
  fill: var(--text-primary);
}

.donut-center-label { font-size: 9px; fill: var(--text-secondary); }

.stack { display: flex; flex-direction: column; gap: 12px; }

/* Block layout keeps the label text and the mandatory * on the same line,
   with the input dropping to its own full-width line below. */
label.field { display: block; font-size: 13px; color: var(--text-secondary); }

label.field > input,
label.field > select,
label.field > textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
}

input, select, textarea {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-size: 14px;
}

button {
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--border); }

button:disabled { opacity: 0.55; cursor: not-allowed; }

/* The portal shell (topbar / sidebar / modal head) styles .icon-btn buttons
   itself but leaves padding and font to the browser default — keep the app's
   generic button skin (padding 9px 16px, bold 14px) from squeezing the
   42x42 icon buttons out of shape. */
button.icon-btn { padding: 0; font-size: 1.05rem; font-weight: 400; }

/* The same leak, for every design-system button that sets its own width and
   height and centres a glyph inside it. None of them declare padding, so the
   generic skin above inflates the box and pushes the icon off centre. Listed
   in one place rather than patched one class at a time, which is how the
   pager and .icon-btn each ended up here. */
.pager .pages button,
.dg-actions button,
.jobd-modal__x,
.jobd-icon,
.jobd-pager button,
.jobd-seg button,
.jobd-tag button,
.rpt__del,
.tag button,
.thumb__x,
.ivt-mx,
.ivt-icon,
.ivt-q__del,
.ivt-pager button,
.cmp-mx,
.cmp-pager button,
.pal__btn {
  padding: 0;
}

.error-banner {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface-1));
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
}

.info-banner {
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.data th {
  text-align: left;
  color: var(--text-secondary);
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

table.data td { padding: 10px; border-bottom: 1px solid var(--border); }

.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-secondary);
}

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card { width: 100%; max-width: 420px; }

.auth-card h1 { font-size: 20px; margin: 0 0 4px; }

.auth-card .subtitle { color: var(--text-secondary); font-size: 14px; margin-bottom: 20px; }

.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.page-title { font-size: 20px; font-weight: 700; margin: 0 0 16px; }

/* ---------- Auth extras ---------- */

.auth-brand {
  display: inline-block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: 12px;
}

.captcha-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }

.captcha-image {
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.captcha-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  color: var(--text-muted);
  font-size: 13px;
}

.otp-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Profile photo ---------- */

.avatar-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
}

.avatar-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 36px;
  font-weight: 700;
}

.hint { font-size: 11px; color: var(--text-muted); }

/* ---------- Inline field validation ---------- */

.field-error {
  display: block;
  color: var(--danger);
  font-size: 12px;
  margin-top: 2px;
}

/* Mandatory field indicator */
.req { color: var(--danger); font-weight: 700; margin-left: 1px; }

/* Icon action buttons in listings (scoped: the portal shell also has .icon-btn) */
.actions-row .icon-btn, .captcha-row .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--accent);
  cursor: pointer;
}

.actions-row .icon-btn:hover, .captcha-row .icon-btn:hover { background: var(--accent-soft); }

.actions-row .icon-btn.danger { color: var(--danger); }

.actions-row .icon-btn.danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--surface-1)); }

.actions-row .icon-btn svg { width: 16px; height: 16px; }

.actions-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* Multi-select dropdown (checkbox list) */
.multiselect { position: relative; margin-top: 4px; }

.multiselect-toggle {
  width: 100%;
  text-align: left;
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 14px;
  font-weight: 400;
}

.multiselect-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.15);
  padding: 6px;
}

.multiselect-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
}

.multiselect-option:hover { background: var(--accent-soft); }

.multiselect-option input[type='checkbox'] { accent-color: var(--accent); }

.multiselect-search {
  width: 100%;
  margin-bottom: 6px;
}

/* Employment-type checkbox chips */
.chip-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

.chip-list label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
}

.chip-list input[type='checkbox'] { accent-color: var(--accent); }

.chip-list label:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text-primary);
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.checkbox-field input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--accent);
}

/* ---------- Header profile dropdown (portal topbar) ---------- */

/* Pushes the user chip to the right edge of the topbar and anchors the menu. */
.topbar__profile { position: relative; margin-left: auto; }

/* The portal shell is a light design, so the menu uses fixed light colours. */
.profile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 232px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  padding: 6px;
  z-index: 90;
}

.profile-menu__id { padding: 10px 12px 12px; border-bottom: 1px solid #eef2f9; margin-bottom: 6px; }

.profile-menu__id .nm {
  font-weight: 700;
  font-size: 14px;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-menu__id .tp { font-size: 12px; color: #64748b; }

.profile-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 9px;
  background: none;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  cursor: pointer;
}

.profile-menu__item:hover { background: #f1f5f9; color: #0f172a; }

.profile-menu__item.signout { color: var(--danger); }

.profile-menu__item.signout:hover { background: #fef2f2; }

/* ---------- Modals (create / edit forms) ---------- */

/* The base .modal-card in the portal design system is 560px wide. */
.modal-card.modal-card--wide { width: min(940px, 100%); }


/* ---------- Portal shell: React's mount point ----------
   The design's shell.js injected .sidebar and .main as direct children of
   body.app, but React mounts into <div id="root">, so that div sits between
   the flex container and the shell. As a flex item it defaults to
   flex: 0 1 auto — grow 0, basis auto — which sizes it to its own max-content
   width instead of the viewport, leaving a gap down the right-hand side that
   changes with whatever the page happens to contain. Make it the shell's flex
   container so .main can fill the width and height as designed. */
body.app > #root {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- Searchable select ----------
   A combobox that looks like the design system's .form-select but filters as
   you type. Used where a master list is long enough that scrolling a native
   <select> is the slow way to find a value. */
.ssel { position: relative; }
.ssel__input { width: 100%; padding-right: 2.2rem !important; cursor: text; }
.ssel__caret {
  position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; font-size: .8rem;
}
.ssel__list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: .3rem; list-style: none; max-height: 240px; overflow-y: auto;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 36px rgba(20, 42, 94, .16);
}
.ssel__list li { margin: 0; }
.ssel__opt {
  display: block; width: 100%; text-align: left; padding: .5rem .65rem; border: none;
  border-radius: 8px; background: none; color: var(--body); cursor: pointer;
  font-size: .88rem; font-weight: 500;
}
.ssel__opt:hover, .ssel__opt.active { background: var(--blue-50); color: var(--blue-700); }
.ssel__opt.on { font-weight: 700; color: var(--blue-700); }
.ssel__empty { padding: .6rem .65rem; color: var(--muted); font-size: .85rem; }
/* Inside a floating-label field the label cannot use style.css's
   `input:not(:placeholder-shown) + label` trick, because the input is nested a
   level down. It sits raised at all times instead. */
.float > .ssel ~ label {
  top: .42rem; font-size: .7rem; color: var(--blue-600); font-weight: 600; letter-spacing: .02em;
}

/* A bare checkbox on the design's .tick square. The input has to be the .tick's
   previous sibling for style.css's `input:checked + .tick` to fire, so the
   label only supplies the hit area. */
.tick-box {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
  position: relative;
}

/* Applied screening filters, shown above the grid so what is in force is
   visible without reading the sidebar. */
.applied-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--line);
}

.applied-filters__lbl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.chip.applied-chip { display: inline-flex; align-items: center; gap: .35rem; }
.chip.applied-chip b { font-weight: 600; }

.chip.applied-chip button {
  padding: 0;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 5px;
  background: rgba(0, 0, 0, .06);
  color: inherit;
  font-size: .68rem;
  cursor: pointer;
}

.chip.applied-chip button:hover { background: rgba(0, 0, 0, .14); }

/* The employer's own assessment on a candidate's job offer card. It sits
   below the tracker as a task the candidate can act on, so it reads as a
   call to action rather than as more offer detail. */
.offer-task {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: 12px;
  background: var(--orange-soft);
}

@media (max-width: 575.98px) {
  .offer-task { align-items: flex-start; }
  .offer-task .btn { width: 100%; }
}

/* The question palette is a status map, not a control: the paper does not go
   back, so its buttons are disabled. Keep them at full strength — the browser's
   default dimming would read as "unavailable" rather than "not clickable". */
.pal__btn:disabled {
  opacity: 1;
  cursor: default;
}

.pal__btn:disabled:hover {
  border-color: var(--line);
  color: var(--body);
}

.pal__btn:disabled.answered:hover,
.pal__btn:disabled.current:not(.answered):hover {
  border-color: transparent;
  color: #fff;
}

/* Palette cells for questions the paper has not served yet. They are drawn so
   the candidate can see how far there is left to go, and have to read as
   "not reached" rather than as "served but unanswered". */
.pal__btn.pending {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
}

.dotc.pending {
  background: transparent;
  border-style: dashed;
}

/* A disabled design-system button still ran its hover animation — lifting and
   glowing under the cursor, which reads as "click me" on a control that is
   locked. The hover rules live on .btn-brand / .btn-ghost and load after this
   file, so these need the element selector to outrank them. */
button.btn:disabled,
button.btn:disabled:hover {
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

button.btn-ghost:disabled:hover {
  border-color: var(--line);
  color: var(--ink);
}

/* style.css hides the input and draws the .tick for checkboxes only
   (input[type="checkbox"].hidden-chk). A radio using the same markup would
   stay visible and never mark, so single-choice lists — interview time slots —
   need the same treatment in a round shape. */
input[type="radio"].hidden-chk {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

input[type="radio"].hidden-chk + .tick { border-radius: 50%; }

input[type="radio"].hidden-chk:checked + .tick {
  background: var(--grad-blue);
  border-color: transparent;
  box-shadow: inset 0 0 0 3px #fff;
}

/* The proficiency badge carries a word (Basic / Intermediate / Expert) rather
   than a letter, so keep it on one line — a five-skill row is narrow enough
   that it would otherwise break mid-word. */
.skill-cell .grade { white-space: nowrap; }

/* A file input dressed as a button. The label carries the button skin and the
   input inside it is hidden, so the whole control opens the file picker without
   the browser's own "Choose file" chrome appearing in a table cell. */
.upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0;
}

.upload-btn input[type="file"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  padding: 0;
  border: 0;
}

/* The design system ships bars and donuts as data-chart widgets driven by its
   own script; these are the styles for the React ports in dashkit. */
.bars-chart {
  display: flex;
  align-items: flex-end;
  gap: .6rem;
  height: 190px;
  padding-top: .5rem;
}

.bars-chart__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  height: 100%;
}

.bars-chart__col small { font-size: .7rem; color: var(--muted); }

.bars-chart__track {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  background: #f4f7fc;
  border-radius: 10px;
  overflow: hidden;
}

.bars-chart__track i {
  display: block;
  width: 100%;
  border-radius: 10px;
  transition: height .9s cubic-bezier(.22, 1, .36, 1);
}

.donut-chart { margin: 0 auto; }

.donut-chart__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  fill: var(--ink);
}

.donut-chart__lbl { font-size: .68rem; fill: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .bars-chart__track i { transition: none; }
}

/* A button that reads as a link: used where the text itself is the control,
   like the employer name on a job offer. A real <button> so it is reachable
   by keyboard and announced as an action, styled so it does not look like
   one sitting inside a sentence. */
button.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--blue-700, #1d4ed8);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

button.link-btn:hover,
button.link-btn:focus-visible { color: var(--ink); }