/* HR intelligence dashboard skin - dark visual, compact, RTL-first. */
:root {
  --hr-bg-0: #111928;
  --hr-bg-1: #172235;
  --hr-bg-2: #223149;
  --hr-panel: rgba(31, 43, 64, .86);
  --hr-panel-strong: rgba(39, 53, 78, .94);
  --hr-panel-soft: rgba(255, 255, 255, .055);
  --hr-line: rgba(207, 216, 231, .13);
  --hr-line-strong: rgba(232, 238, 248, .22);
  --hr-text: #f6f8fd;
  --hr-muted: #aab7cc;
  --hr-muted-2: #d1d8e6;
  --hr-gold: #e6bd42;
  --hr-gold-2: #f4d66d;
  --hr-green: #31dd7c;
  --hr-red: #ff6575;
  --hr-amber: #f59e0b;
  --hr-blue: #71a8ff;
  --hr-cyan: #4ed3ff;
  --hr-shadow: 0 18px 55px rgba(2, 8, 23, .32);
  --hr-radius: 18px;
}

/* Page background */
body[data-page="admin"] {
  background:
    radial-gradient(circle at 85% 0%, rgba(74, 103, 150, .22), transparent 30rem),
    radial-gradient(circle at 18% 8%, rgba(230, 189, 66, .12), transparent 22rem),
    radial-gradient(circle at 50% 105%, rgba(78, 211, 255, .10), transparent 32rem),
    linear-gradient(135deg, #101827 0%, #172234 45%, #1b263a 100%);
  color: var(--hr-text);
}
body[data-page="admin"]::before {
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .55;
}
body[data-page="admin"] h1,
body[data-page="admin"] h2,
body[data-page="admin"] h3,
body[data-page="admin"] h4 { color: #fff; }
body[data-page="admin"] p,
body[data-page="admin"] small,
body[data-page="admin"] .muted { color: var(--hr-muted); }

body[data-page="admin"] .page-header {
  background: rgba(15, 24, 38, .86);
  border-bottom: 1px solid var(--hr-line);
  box-shadow: 0 10px 36px rgba(2, 8, 23, .24);
}
body[data-page="admin"] .page-header__inner { min-height: 58px; }
body[data-page="admin"] .brand-title { color: #fff; letter-spacing: .02em; }
body[data-page="admin"] .brand-subtitle { color: var(--hr-muted); }
body[data-page="admin"] .brand-mark {
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), transparent 42%),
    linear-gradient(135deg, #2c3548, #59677f 45%, #e3b93d);
  box-shadow: 0 12px 30px rgba(230, 189, 66, .18);
}
body[data-page="admin"] .brand-mark::before { content: "HR"; font-size: .9rem; letter-spacing: .04em; }
body[data-page="admin"] .badge {
  background: rgba(255,255,255,.065);
  color: var(--hr-muted-2);
  border-color: var(--hr-line-strong);
}

/* Admin layout: real dashboard with a vertical command rail */
body[data-page="admin"] .admin-dashboard-main {
  width: min(100% - 1.1rem, 1720px);
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  grid-template-areas:
    "rail toolbar"
    "rail context"
    "rail content";
  gap: .78rem;
  align-items: start;
  padding: .78rem 0 1.5rem;
}
body[data-page="admin"] .admin-toolbar { grid-area: toolbar; }
body[data-page="admin"] #questionnaire-context-slot { grid-area: context; min-width: 0; }
body[data-page="admin"] #admin-tabs-slot { grid-area: rail; min-width: 0; }
body[data-page="admin"] #admin-content { grid-area: content; min-width: 0; }
body[data-page="admin"] .admin-main:not(.admin-dashboard-main) { color: var(--text); }

body[data-page="admin"] .card,
body[data-page="admin"] .lead-card,
body[data-page="admin"] .admin-toolbar,
body[data-page="admin"] .results-table-wrap,
body[data-page="admin"] .detail-section,
body[data-page="admin"] .candidate-detail-hero,
body[data-page="admin"] .candidate-decision-guide,
body[data-page="admin"] .config-table-card,
body[data-page="admin"] .questionnaire-context-bar,
body[data-page="admin"] .candidate-filters,
body[data-page="admin"] .config-filters,
body[data-page="admin"] .export-card,
body[data-page="admin"] .questionnaire-card,
body[data-page="admin"] .questionnaire-form-card,
body[data-page="admin"] .questionnaire-help-card {
  background: var(--hr-panel);
  border-color: var(--hr-line);
  box-shadow: var(--hr-shadow);
  color: var(--hr-text);
  backdrop-filter: blur(16px);
}
body[data-page="admin"] .admin-toolbar {
  position: sticky;
  top: 66px;
  z-index: 30;
  padding: .72rem .9rem;
  border-radius: var(--hr-radius);
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 38%),
    rgba(28, 40, 60, .92);
}
body[data-page="admin"] .admin-toolbar h1 { font-size: clamp(1.15rem, 2vw, 1.72rem); }
body[data-page="admin"] .admin-status-pill {
  background: rgba(49, 221, 124, .11);
  color: #bff7d2;
  border: 1px solid rgba(49, 221, 124, .22);
}
body[data-page="admin"] .admin-status-dot { background: var(--hr-green); box-shadow: 0 0 18px rgba(49,221,124,.55); }

body[data-page="admin"] #admin-tabs-slot {
  position: sticky;
  top: 66px;
  z-index: 32;
}
body[data-page="admin"] .admin-tabs {
  position: static;
  display: grid;
  grid-template-columns: 1fr;
  gap: .34rem;
  padding: .48rem;
  min-height: calc(100dvh - 86px);
  border-radius: 20px;
  background: rgba(27, 39, 59, .86);
  border: 1px solid var(--hr-line);
  box-shadow: var(--hr-shadow);
  overflow: auto;
  scrollbar-width: none;
}
body[data-page="admin"] .admin-tabs::-webkit-scrollbar { display: none; }
body[data-page="admin"] .admin-tab {
  width: 100%;
  min-height: 46px;
  display: grid;
  place-items: center;
  padding: .18rem;
  border-radius: 14px;
  border: 1px solid transparent;
  color: #d7deec;
  background: transparent;
  position: relative;
}
body[data-page="admin"] .admin-tab__icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 11px;
  background: rgba(255,255,255,.06);
  color: #f3f6fb;
  font-weight: 950;
  font-size: .86rem;
}
body[data-page="admin"] .admin-tab__label {
  position: absolute;
  inset-inline-end: calc(100% + .55rem);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid #dbe4f0;
  border-radius: 999px;
  padding: .32rem .62rem;
  box-shadow: 0 12px 30px rgba(2,8,23,.20);
  transition: opacity .12s ease, transform .12s ease;
  z-index: 10;
}
body[data-page="admin"] .admin-tab:hover .admin-tab__label,
body[data-page="admin"] .admin-tab:focus-visible .admin-tab__label { opacity: 1; transform: translateY(-50%) translateX(-2px); }
body[data-page="admin"] .admin-tab:hover { background: rgba(255,255,255,.08); }
body[data-page="admin"] .admin-tab.is-active {
  background: linear-gradient(180deg, rgba(230,189,66,.28), rgba(230,189,66,.10));
  border-color: rgba(230, 189, 66, .38);
  box-shadow: inset 3px 0 0 var(--hr-gold), 0 10px 22px rgba(230, 189, 66, .11);
}
body[data-page="admin"] .admin-tab.is-active .admin-tab__icon {
  background: var(--hr-gold);
  color: #1b2435;
}

/* Questionnaire context */
body[data-page="admin"] .questionnaire-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .62rem .78rem;
  border-radius: 17px;
  border-inline-start: 4px solid var(--hr-gold);
}
body[data-page="admin"] .questionnaire-context-bar strong { color: #fff; }
body[data-page="admin"] .questionnaire-context-controls select,
body[data-page="admin"] input,
body[data-page="admin"] textarea,
body[data-page="admin"] select {
  background: rgba(14, 23, 37, .72);
  border-color: rgba(203, 213, 225, .18);
  color: #fff;
}
body[data-page="admin"] option { background: #172235; color: #fff; }
body[data-page="admin"] label { color: #eef3fc; }

/* Dashboard panels */
body[data-page="admin"] .admin-section-title { padding: .05rem .1rem; }
body[data-page="admin"] .eyebrow { color: var(--hr-gold-2); letter-spacing: .08em; }
.hr-dashboard-overview { display: grid; gap: .78rem; }
.hr-hero-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: stretch;
  gap: .75rem;
  padding: .95rem;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
}
.hr-hero-panel::after {
  content: "";
  position: absolute;
  inset: auto -30px -70px auto;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(230,189,66,.18), transparent 70%);
  pointer-events: none;
}
.hr-hero-copy h2 { font-size: clamp(1.55rem, 3vw, 2.7rem); line-height: 1.08; margin: .18rem 0 .42rem; }
.hr-hero-copy p { max-width: 82ch; color: var(--hr-muted-2); }
.hr-hero-score {
  min-height: 134px;
  border-radius: 18px;
  border: 1px solid rgba(230,189,66,.25);
  background: linear-gradient(135deg, rgba(230,189,66,.18), rgba(255,255,255,.035));
  display: grid;
  place-items: center;
  text-align: center;
  padding: .8rem;
}
.hr-hero-score strong { color: var(--hr-gold-2); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; }
.hr-hero-score span { color: var(--hr-muted); }
.hr-metric-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .65rem;
}
.hr-metric-card {
  border: 1px solid var(--hr-line);
  border-radius: 18px;
  background: rgba(31, 43, 64, .84);
  padding: .72rem .8rem;
  box-shadow: var(--hr-shadow);
  position: relative;
  overflow: hidden;
}
.hr-metric-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--accent-color, var(--hr-gold));
}
.hr-metric-card--gold { --accent-color: var(--hr-gold); }
.hr-metric-card--green { --accent-color: var(--hr-green); }
.hr-metric-card--red { --accent-color: var(--hr-red); }
.hr-metric-card--amber { --accent-color: var(--hr-amber); }
.hr-metric-card--blue { --accent-color: var(--hr-blue); }
.hr-metric-card span { color: var(--hr-muted-2); font-weight: 850; font-size: .8rem; }
.hr-metric-card strong { display: block; color: var(--accent-color); font-size: clamp(1.75rem, 3vw, 2.55rem); line-height: 1.05; margin: .24rem 0 .08rem; }
.hr-metric-card small { color: var(--hr-muted); }
.hr-visual-grid {
  display: grid;
  grid-template-columns: 1.35fr .75fr;
  gap: .72rem;
}
.hr-visual-card {
  padding: .9rem;
  border-radius: 20px;
  min-width: 0;
}
.hr-visual-card--wide { min-height: 270px; }
.hr-visual-card header { margin-bottom: .72rem; }
.hr-visual-card h3 { font-size: 1.08rem; margin: .05rem 0 .12rem; }
.hr-axis-bars { display: grid; gap: .65rem; }
.hr-axis-row {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr) 3.2rem;
  align-items: center;
  gap: .65rem;
}
.hr-axis-row strong { color: #353535; font-size: .9rem;    padding-inline-end: 10px;
    padding-inline-start: 10px; }
.hr-axis-row small { display: block; color: var(--hr-muted); font-size: .7rem;padding-inline-start:10px; }
.hr-axis-row b { color: var(--hr-gold-2); text-align: left; }
.hr-axis-track,
.hr-profile-track {
  height: .64rem;
  border-radius: 999px;
  background: rgba(255,255,255,.075);
  overflow: hidden;
}
.hr-axis-track span,
.hr-profile-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--hr-gold), #fff0a3);
  box-shadow: 0 0 18px rgba(230,189,66,.22);
}
.hr-risk-visual { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: .75rem; align-items: center; }
.hr-risk-donut {
  width: 142px;
  height: 142px;
  border-radius: 999px;
  background: conic-gradient(var(--hr-red) 0 var(--high), var(--hr-amber) var(--high) var(--medium), var(--hr-green) var(--medium) 360deg);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 14px rgba(255,255,255,.04), 0 18px 40px rgba(0,0,0,.18);
}
.hr-risk-donut span {
  width: 86px;
  height: 86px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #192338;
  color: #fff;
  font-size: 1.85rem;
  font-weight: 950;
}
.hr-risk-legend { display: grid; gap: .45rem; }
.hr-risk-legend div { display: grid; grid-template-columns: auto 2.5rem 1fr; gap: .42rem; align-items: center; }
.legend-dot { width: .66rem; height: .66rem; border-radius: 999px; }
.legend-dot--red { background: var(--hr-red); }
.legend-dot--amber { background: var(--hr-amber); }
.legend-dot--green { background: var(--hr-green); }
.hr-profile-chart { display: grid; gap: .5rem; }
.hr-profile-row { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(7rem, 1.2fr) 2rem; gap: .45rem; align-items: center; }
.hr-profile-row span { color: #353535; font-weight: 760;padding-inline-start:10px; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-profile-row strong { color: var(--hr-gold-2); }
.hr-action-list { display: grid; gap: .55rem; }
.hr-action-list article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  padding: .62rem;
  border-radius: 14px;
  background: rgba(255,255,255,.052);
  border: 1px solid rgba(255,255,255,.085);
}
.hr-action-list b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; background: var(--hr-gold); color: #152033; }
.hr-action-list p { margin: .08rem 0 0; font-size: .8rem; }
.hr-action-list span { color: var(--hr-gold-2); font-weight: 950; font-size: 1.2rem; }

/* Filters and tables */
body[data-page="admin"] .candidate-filters,
body[data-page="admin"] .config-filters {
  padding: .65rem;
  border-radius: 18px;
}
body[data-page="admin"] .btn-primary,
body[data-page="admin"] .btn {
  background: linear-gradient(135deg, #e6bd42, #b98e24);
  color: #172033;
  border-color: rgba(255, 232, 150, .35);
  box-shadow: 0 12px 28px rgba(230, 189, 66, .15);
}
body[data-page="admin"] .btn-secondary,
body[data-page="admin"] .btn-ghost {
  background: rgba(255,255,255,.07);
  border-color: var(--hr-line-strong);
  color: #f7fbff;
  box-shadow: none;
}
body[data-page="admin"] .btn-secondary:hover,
body[data-page="admin"] .btn-ghost:hover { background: rgba(255,255,255,.12); }
.hr-results-card { padding: .7rem; border-radius: 20px; }
.hr-table-header { display: flex; align-items: end; justify-content: space-between; gap: .7rem; padding: .05rem .1rem .62rem; }
.hr-table-header h3 { font-size: 1.05rem; }
body[data-page="admin"] .table-scroll {
  background: rgba(12, 20, 33, .44);
  border-color: var(--hr-line);
  border-radius: 16px;
  max-height: calc(100dvh - 330px);
}
body[data-page="admin"] .admin-table {
  color: #f8fbff;
  border-spacing: 0 .34rem;
  border-collapse: separate;
}
body[data-page="admin"] .admin-table th {
  background: rgba(255,255,255,.045);
  color: var(--hr-muted);
  border: 0;
  padding: .48rem .58rem;
}
body[data-page="admin"] .admin-table td {
  background: rgba(255,255,255,.035);
  border-top: 1px solid rgba(255,255,255,.055);
  border-bottom: 1px solid rgba(255,255,255,.055);
  padding: .52rem .58rem;
}
body[data-page="admin"] .admin-table td:first-child { border-radius: 0 14px 14px 0; border-inline-start: 1px solid rgba(255,255,255,.055); }
body[data-page="admin"] .admin-table td:last-child { border-radius: 14px 0 0 14px; border-inline-end: 1px solid rgba(255,255,255,.055); }
body[data-page="admin"] .admin-table tbody tr:hover td { background: rgba(230,189,66,.075); }
.candidate-person-cell--visual { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: .55rem; }
.candidate-avatar {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: .78rem;
  color: #182033;
  font-weight: 950;
  background: linear-gradient(135deg, #e6bd42, #fff2a8);
  box-shadow: 0 10px 22px rgba(230,189,66,.16);
}
body[data-page="admin"] .candidate-person-cell strong,
body[data-page="admin"] .candidate-fit-cell strong { color: #fff; }
body[data-page="admin"] .candidate-person-cell span,
body[data-page="admin"] .candidate-fit-cell span { color: var(--hr-muted); }
.candidate-score-strip { display: grid; grid-template-columns: repeat(5, minmax(50px, 1fr)); gap: .28rem; min-width: 330px; }
.candidate-score-strip span {
  position: relative;
  display: grid;
  gap: .08rem;
  padding: .35rem .34rem .42rem;
  border-radius: 11px;
  overflow: hidden;
  background: rgba(255,255,255,.058);
  border: 1px solid rgba(255,255,255,.07);
}
.candidate-score-strip i {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  height: 3px;
  background: var(--hr-gold);
}
.candidate-score-strip small { font-size: .64rem; color: var(--hr-muted); }
.candidate-score-strip strong { font-size: .78rem; color: #fff; }
body[data-page="admin"] .risk-badge,
body[data-page="admin"] .status-badge { border-color: rgba(255,255,255,.16); }
body[data-page="admin"] .risk-badge--high { background: rgba(255,101,117,.16); color: #ffc4cb; }
body[data-page="admin"] .risk-badge--medium { background: rgba(245,158,11,.17); color: #ffd892; }
body[data-page="admin"] .risk-badge--low { background: rgba(49,221,124,.14); color: #bbf7d0; }
body[data-page="admin"] .status-badge { background: rgba(255,255,255,.065); color: #e8eef8; }

/* Candidate side report drawer */
.candidate-report-drawer[hidden] { display: none !important; }
.candidate-report-drawer {
  position: fixed;
  top: 72px;
  inset-inline-end: 16px;
  bottom: 16px;
  z-index: 1200;
  width: min(780px, calc(100vw - 32px));
  border-radius: 24px;
  border: 1px solid rgba(230, 189, 66, .24);
  background: rgba(18, 27, 43, .97);
  box-shadow: -28px 0 90px rgba(2,8,23,.42), 0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter: blur(18px);
  overflow: hidden;
  transform: translateX(-18px);
  opacity: 0;
  transition: transform .16s ease, opacity .16s ease;
}
.candidate-report-drawer.is-open { transform: translateX(0); opacity: 1; }
.candidate-report-drawer__chrome {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .58rem .7rem;
  border-bottom: 1px solid var(--hr-line);
  background: rgba(255,255,255,.045);
}
.candidate-report-drawer__body {
  height: calc(100% - 52px);
  overflow: auto;
  padding: .75rem;
}
.candidate-report-drawer .candidate-detail-panel { gap: .56rem; }
.candidate-report-drawer .candidate-detail-hero,
.candidate-report-drawer .candidate-decision-guide,
.candidate-report-drawer .detail-section { box-shadow: none; }
.candidate-report-drawer .candidate-detail-actions { flex-wrap: wrap; }
.candidate-report-drawer .candidate-detail-actions .btn { min-height: 31px; padding: .42rem .55rem; }
body[data-page="admin"] .candidate-meta-grid div,
body[data-page="admin"] .profile-summary-card,
body[data-page="admin"] .insight-card,
body[data-page="admin"] .axis-detail-card,
body[data-page="admin"] .score-chip,
body[data-page="admin"] .answer-audit-card,
body[data-page="admin"] .interview-question-card,
body[data-page="admin"] .risk-pattern-card,
body[data-page="admin"] .safe-state,
body[data-page="admin"] .answer-selected-box,
body[data-page="admin"] .answer-diagnostic-grid div,
body[data-page="admin"] .axis-mini-metrics div,
body[data-page="admin"] .mini-subprofiles div {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.09);
  color: #fff;
}
body[data-page="admin"] .detail-progress { background: rgba(255,255,255,.09); }
body[data-page="admin"] .detail-progress span { background: linear-gradient(90deg, var(--hr-gold), #fff1a8); }
body[data-page="admin"] .detail-progress--risk span { background: linear-gradient(90deg, var(--hr-red), var(--hr-amber)); }
body[data-page="admin"] dt { color: var(--hr-muted); }
body[data-page="admin"] dd { color: #4f4f4f; }

/* Config drawer keeps information beside the table, never at page bottom. */
body[data-page="admin"] .config-row-detail {
  background: rgba(19, 29, 45, .985) !important;
  color: #3e3e3e;
  border-color: rgba(230,189,66,.22) !important;
}
body[data-page="admin"] .config-row-detail__header,
body[data-page="admin"] .config-detail-list,
body[data-page="admin"] .config-detail-list div,
body[data-page="admin"] .config-row-primary-detail__block,
body[data-page="admin"] .question-open-option,
body[data-page="admin"] .scoring-impact-grid div,
body[data-page="admin"] .config-technical-details {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #fff;
}
body[data-page="admin"] .config-row-explainer {
  background: linear-gradient(135deg, rgba(230,189,66,.14), rgba(255,255,255,.045)) !important;
  border-color: rgba(230,189,66,.22) !important;
}
body[data-page="admin"] .config-detail-list dd,
body[data-page="admin"] .config-row-primary-detail__block p { color: #f8fbff !important; }

/* Candidate form/result also receive the new smoother visual language, but stay bright enough for candidates. */
body[data-page="questionnaire"],
body[data-page="result"] {
  background:
    radial-gradient(circle at 85% -10%, rgba(230,189,66,.18), transparent 30rem),
    radial-gradient(circle at 10% 10%, rgba(79,112,160,.16), transparent 24rem),
    linear-gradient(135deg, #eef3fb 0%, #f8fbff 100%);
}
body[data-page="questionnaire"] .lead-card,
body[data-page="result"] .result-card {
  box-shadow: 0 20px 70px rgba(20, 31, 50, .12);
  border-color: rgba(183, 196, 217, .7);
}
body[data-page="questionnaire"] .brand-mark::before,
body[data-page="result"] .brand-mark::before { content: "HR"; font-size: .9rem; }
body[data-page="questionnaire"] .option-button { transition: transform .12s ease, border-color .12s ease, background .12s ease; }
body[data-page="questionnaire"] .option-button:hover { transform: translateY(-1px); }
body[data-page="questionnaire"] .option-button.is-selected { border-color: rgba(230,189,66,.85); background: #fff9db; }

@media (max-width: 1280px) {
  .hr-metric-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hr-visual-grid { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  body[data-page="admin"] .admin-dashboard-main {
    display: block;
    width: min(100% - .75rem, 100%);
  }
  body[data-page="admin"] #admin-tabs-slot { position: sticky; top: 0; z-index: 45; margin-bottom: .6rem; }
  body[data-page="admin"] .admin-tabs {
    min-height: 0;
    display: flex;
    overflow-x: auto;
    border-radius: 16px;
  }
  body[data-page="admin"] .admin-tab { min-width: 46px; }
  body[data-page="admin"] .admin-tab__label { display: none; }
  body[data-page="admin"] .admin-toolbar { position: static; margin-bottom: .6rem; }
  body[data-page="admin"] .questionnaire-context-bar { display: grid; margin-bottom: .6rem; }
  .hr-hero-panel { grid-template-columns: 1fr; }
  .hr-metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-axis-row { grid-template-columns: 1fr; gap: .3rem; }
  .hr-risk-visual { grid-template-columns: 1fr; place-items: center; }
  .candidate-report-drawer { top: 58px; inset-inline-start: .55rem; inset-inline-end: .55rem; bottom: .55rem; width: auto; border-radius: 20px; }
}
@media (max-width: 560px) {
  .hr-metric-strip { grid-template-columns: 1fr; }
  .hr-profile-row { grid-template-columns: 1fr 2rem; }
  .hr-profile-track { grid-column: 1 / -1; }
  .candidate-score-strip { min-width: 280px; }
}

/* Stage 14 - HR usability correction: calmer contrast, real hover states, RTL-first expandable rail, and recruiter workflow order. */
:root {
  --hr-bg-0: #1a2434;
  --hr-bg-1: #202c3f;
  --hr-bg-2: #2a3750;
  --hr-panel: rgba(37, 49, 70, .88);
  --hr-panel-strong: rgba(45, 58, 82, .95);
  --hr-panel-soft: rgba(255, 255, 255, .075);
  --hr-line: rgba(214, 224, 239, .16);
  --hr-line-strong: rgba(226, 235, 248, .26);
  --hr-text: #e8eef8;
  --hr-muted: #bac5d6;
  --hr-muted-2: #d4dceb;
  --hr-gold: #ddb348;
  --hr-gold-2: #f0d47a;
  --hr-hover: rgba(221, 179, 72, .13);
  --hr-hover-strong: rgba(221, 179, 72, .21);
  --hr-focus: rgba(240, 212, 122, .36);
}

body[data-page="admin"] {
  background:
    radial-gradient(circle at 82% 0%, rgba(130, 151, 184, .20), transparent 31rem),
    radial-gradient(circle at 12% 10%, rgba(221, 179, 72, .10), transparent 26rem),
    linear-gradient(135deg, #1a2434 0%, #202b3e 52%, #243149 100%);
}
body[data-page="admin"] h1,
body[data-page="admin"] h2,
body[data-page="admin"] h3,
body[data-page="admin"] h4 { color: var(--hr-text); }
body[data-page="admin"] p,
body[data-page="admin"] small,
body[data-page="admin"] .muted { color: var(--hr-muted); }
body[data-page="admin"] .eyebrow { color: var(--hr-gold-2); }
body[data-page="admin"] .card,
body[data-page="admin"] .lead-card,
body[data-page="admin"] .admin-toolbar,
body[data-page="admin"] .results-table-wrap,
body[data-page="admin"] .detail-section,
body[data-page="admin"] .candidate-detail-hero,
body[data-page="admin"] .candidate-decision-guide,
body[data-page="admin"] .config-table-card,
body[data-page="admin"] .questionnaire-context-bar,
body[data-page="admin"] .candidate-filters,
body[data-page="admin"] .config-filters,
body[data-page="admin"] .export-card,
body[data-page="admin"] .questionnaire-card,
body[data-page="admin"] .questionnaire-form-card,
body[data-page="admin"] .questionnaire-help-card {
  background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.025)), var(--hr-panel);
  border-color: var(--hr-line);
}

body[data-page="admin"] .btn-primary,
body[data-page="admin"] .btn {
  background: linear-gradient(135deg, #edcf7d, var(--hr-gold));
  color: #172033;
  border-color: rgba(255, 233, 162, .46);
  box-shadow: 0 12px 28px rgba(221, 179, 72, .13);
}
body[data-page="admin"] .btn:hover,
body[data-page="admin"] .btn-primary:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #f4dc92, #e6bf55);
  border-color: rgba(255, 239, 180, .62);
  box-shadow: 0 14px 32px rgba(221, 179, 72, .18);
}
body[data-page="admin"] .btn-secondary,
body[data-page="admin"] .btn-ghost {
  background: rgba(255,255,255,.075);
  border-color: var(--hr-line-strong);
  color: var(--hr-text);
  box-shadow: none;
}
body[data-page="admin"] .btn-secondary:hover,
body[data-page="admin"] .btn-ghost:hover {
  background: var(--hr-hover);
  border-color: rgba(240, 212, 122, .42);
  color: #fff6d4;
}
body[data-page="admin"] .btn:focus-visible,
body[data-page="admin"] .password-toggle:focus-visible,
body[data-page="admin"] .admin-tab:focus-visible,
body[data-page="admin"] .config-summary-card:focus-visible,
body[data-page="admin"] .brand:focus-visible,
body[data-page="admin"] input:focus-visible,
body[data-page="admin"] select:focus-visible,
body[data-page="admin"] textarea:focus-visible,
body[data-page="admin"] a:focus-visible {
  outline: 3px solid var(--hr-focus);
  outline-offset: 3px;
}
body[data-page="admin"] input:hover,
body[data-page="admin"] select:hover,
body[data-page="admin"] textarea:hover {
  border-color: rgba(240, 212, 122, .34);
  background: rgba(20, 30, 46, .76);
}
body[data-page="admin"] .config-summary-card:hover,
body[data-page="admin"] .questionnaire-card:hover,
body[data-page="admin"] .export-card:hover {
  border-color: rgba(240, 212, 122, .34);
  background: linear-gradient(135deg, var(--hr-hover), rgba(255,255,255,.035)), var(--hr-panel);
}
body[data-page="admin"] .export-selection-block {
  display: grid;
  gap: .55rem;
  padding: .72rem .78rem;
  border: 1px solid var(--hr-line);
  border-radius: 16px;
  background: rgba(15, 24, 38, .46);
}
body[data-page="admin"] .export-selection-block__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}
body[data-page="admin"] .export-selection-block__header strong {
  color: var(--hr-text);
  font-size: .92rem;
}
body[data-page="admin"] .export-selection-block__header span,
body[data-page="admin"] .export-selection-empty {
  color: var(--hr-muted);
  font-size: .8rem;
  line-height: 1.5;
}
body[data-page="admin"] .export-selection-list {
  display: grid;
  gap: .42rem;
  max-height: 220px;
  overflow: auto;
  padding-inline-end: .1rem;
}
body[data-page="admin"] .export-selection-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: .65rem;
  padding: .56rem .62rem;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  cursor: pointer;
}
body[data-page="admin"] .export-selection-item:hover {
  border-color: rgba(240, 212, 122, .24);
  background: rgba(255,255,255,.05);
}
body[data-page="admin"] .export-selection-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--hr-gold);
}
body[data-page="admin"] .export-selection-item__body {
  display: grid;
  gap: .12rem;
  min-width: 0;
}
body[data-page="admin"] .export-selection-item__body strong {
  color: var(--hr-text);
  font-size: .9rem;
  line-height: 1.35;
}
body[data-page="admin"] .export-selection-item__body small {
  color: var(--hr-muted);
  font-size: .76rem;
  line-height: 1.3;
}
body[data-page="admin"] .export-selection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
body[data-page="admin"] .admin-table tbody tr:hover td {
  background: var(--hr-hover);
  border-color: rgba(240, 212, 122, .22);
}

/* Expandable RTL rail: compact by default, readable on hover, closes after click. */
body[data-page="admin"] #admin-tabs-slot {
  width: 74px;
  justify-self: start;
  overflow: visible;
}
body[data-page="admin"] .admin-tabs {
  width: 60px;
  transition: width .18s ease, background .18s ease, box-shadow .18s ease;
  overflow-x: hidden;
}
body[data-page="admin"] #admin-tabs-slot:not(.is-click-collapsed):hover .admin-tabs,
body[data-page="admin"] #admin-tabs-slot:not(.is-click-collapsed):focus-within .admin-tabs {
  width: 252px;
  background: rgba(38, 51, 74, .97);
  box-shadow: 0 22px 70px rgba(2, 8, 23, .45);
}
body[data-page="admin"] .admin-tab {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .28rem .31rem;
  text-align: start;
  direction: var(--app-direction, rtl);
}
body[data-page="admin"] .admin-tab__icon {
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
}
body[data-page="admin"] .admin-tab__label {
  position: static;
  inset: auto;
  transform: none;
  opacity: 0;
  min-width: 0;
  max-width: 0;
  overflow: hidden;
  pointer-events: none;
  white-space: nowrap;
  background: transparent;
  color: var(--hr-muted-2);
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  transition: opacity .14s ease, max-width .16s ease;
  font-weight: 850;
}
body[data-page="admin"] #admin-tabs-slot:not(.is-click-collapsed):hover .admin-tab__label,
body[data-page="admin"] #admin-tabs-slot:not(.is-click-collapsed):focus-within .admin-tab__label {
  opacity: 1;
  max-width: 180px;
}
body[data-page="admin"] .admin-tab:hover {
  background: var(--hr-hover);
  border-color: rgba(240, 212, 122, .24);
}
body[data-page="admin"] .admin-tab:hover .admin-tab__icon {
  background: rgba(240, 212, 122, .20);
  color: #fff6d4;
}
body[data-page="admin"] .admin-tab:hover .admin-tab__label,
body[data-page="admin"] .admin-tab:focus-visible .admin-tab__label {
  transform: none;
}
body[data-page="admin"] .admin-tab.is-active {
  background: linear-gradient(135deg, rgba(221,179,72,.25), rgba(221,179,72,.10));
  border-color: rgba(221, 179, 72, .40);
  box-shadow: inset -3px 0 0 var(--hr-gold), 0 10px 22px rgba(221, 179, 72, .10);
}
body[data-page="admin"] .admin-tab.is-active .admin-tab__label { color: #fff3c9; }

/* Recruiter workflow inside candidate report */
body[data-page="admin"] .candidate-detail-panel {
  direction: var(--app-direction, rtl);
  text-align: var(--app-text-align, right);
}
body[data-page="admin"] .detail-section--workflow {
  border-color: rgba(240, 212, 122, .28);
}
body[data-page="admin"] .candidate-workflow-grid {
  display: grid;
  grid-template-columns: minmax(320px, .92fr) minmax(360px, 1.08fr);
  gap: .72rem;
  align-items: start;
}
body[data-page="admin"] .workflow-card {
  display: grid;
  gap: .72rem;
  min-width: 0;
  border: 1px solid var(--hr-line);
  border-radius: 18px;
  background: rgba(17, 27, 43, .42);
  padding: .78rem;
}
body[data-page="admin"] .workflow-card > header {
  display: grid;
  gap: .12rem;
}
body[data-page="admin"] .workflow-card > header strong {
  color: var(--hr-text);
  font-size: 1rem;
}
body[data-page="admin"] .workflow-card > header span {
  color: var(--hr-muted);
  font-size: .84rem;
}
body[data-page="admin"] .workflow-card--notes .admin-notes-form {
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: .65rem;
}
body[data-page="admin"] .workflow-card--notes .admin-note-field,
body[data-page="admin"] .workflow-card--notes .form-message,
body[data-page="admin"] .workflow-card--notes .btn {
  grid-column: 1 / -1;
}
body[data-page="admin"] .workflow-card--notes textarea {
  min-height: 112px;
  resize: vertical;
}
body[data-page="admin"] .workflow-card--interview .interview-question-list {
  max-height: 360px;
  overflow: auto;
  padding-inline-start: .2rem;
}
body[data-page="admin"] .candidate-report-drawer .candidate-workflow-grid {
  grid-template-columns: 1fr;
}
body[data-page="admin"] .candidate-report-drawer .workflow-card--interview .interview-question-list {
  max-height: none;
}
body[data-page="admin"] .raw-answers-disclosure {
  direction: var(--app-direction, rtl);
}
body[data-page="admin"] .raw-answers-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  cursor: pointer;
  list-style: none;
  padding: .35rem .15rem;
  direction: var(--app-direction, rtl);
  text-align: var(--app-text-align, right);
}
body[data-page="admin"] .raw-answers-disclosure > summary::-webkit-details-marker { display: none; }
body[data-page="admin"] .raw-answers-disclosure > summary::after {
  content: "+";
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--hr-line-strong);
  color: var(--hr-gold-2);
  font-weight: 950;
}
body[data-page="admin"] .raw-answers-disclosure[open] > summary::after { content: "−"; }
body[data-page="admin"] .raw-answers-disclosure > summary strong {
  display: block;
  color: var(--hr-text);
  font-size: 1.05rem;
}
body[data-page="admin"] .raw-answers-disclosure > summary small {
  display: block;
  color: var(--hr-muted);
  margin-top: .15rem;
}
body[data-page="admin"] .raw-answers-disclosure .answer-audit-list {
  margin-top: .75rem;
}

body[data-page="admin"] details,
body[data-page="admin"] summary,
body[data-page="admin"] .config-technical-details,
body[data-page="admin"] .config-technical-details summary {
  direction: var(--app-direction, rtl);
  text-align: var(--app-text-align, right);
}
body[data-page="admin"] .config-technical-details summary::before {
  margin-inline-start: 0;
  margin-inline-end: .45rem;
}

@media (max-width: 1180px) {
  body[data-page="admin"] .candidate-workflow-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 860px) {
  body[data-page="admin"] .admin-dashboard-main {
    grid-template-columns: 1fr;
    grid-template-areas:
      "toolbar"
      "context"
      "rail"
      "content";
  }
  body[data-page="admin"] #admin-tabs-slot,
  body[data-page="admin"] .admin-tabs,
  body[data-page="admin"] #admin-tabs-slot:not(.is-click-collapsed):hover .admin-tabs,
  body[data-page="admin"] #admin-tabs-slot:not(.is-click-collapsed):focus-within .admin-tabs {
    width: 100%;
  }
  body[data-page="admin"] .admin-tabs {
    display: flex;
    min-height: auto;
    overflow-x: auto;
  }
  body[data-page="admin"] .admin-tab {
    min-width: max-content;
  }
  body[data-page="admin"] .admin-tab__label {
    opacity: 1;
    max-width: none;
  }
}

/* Stage 15 - production UX hardening: lower glare, stronger workflow hierarchy, consistent RTL interactions. */
:root {
  --hr-text: #edf3fb;
  --hr-muted: #b6c2d2;
  --hr-muted-2: #d7dfec;
  --hr-panel: rgba(34, 47, 68, .82);
  --hr-panel-strong: rgba(39, 54, 78, .93);
  --hr-line: rgba(218, 228, 244, .16);
  --hr-line-strong: rgba(232, 238, 248, .24);
  --hr-hover: rgba(226, 186, 82, .145);
  --hr-hover-strong: rgba(226, 186, 82, .235);
}
body[data-page="admin"] .admin-table,
body[data-page="admin"] .config-table,
body[data-page="admin"] .candidate-detail-panel,
body[data-page="admin"] .candidate-report-drawer,
body[data-page="admin"] .candidate-report-drawer__body,
body[data-page="admin"] .candidate-report-drawer__chrome,
body[data-page="admin"] .config-row-detail,
body[data-page="admin"] .questionnaire-manager,
body[data-page="admin"] .export-backup-panel {
  direction: var(--app-direction, rtl);
  text-align: var(--app-text-align, right);
}
body[data-page="admin"] .admin-table th,
body[data-page="admin"] .admin-table td,
body[data-page="admin"] .config-table th,
body[data-page="admin"] .config-table td {
  text-align: var(--app-text-align, right);
  vertical-align: middle;
}
body[data-page="admin"] .admin-table tbody tr,
body[data-page="admin"] .config-table tbody tr {
  transition: background .14s ease, transform .14s ease, box-shadow .14s ease;
}
body[data-page="admin"] .admin-table tbody tr:hover,
body[data-page="admin"] .config-table tbody tr:hover {
  transform: translateY(-1px);
  box-shadow: inset 3px 0 0 rgba(226, 186, 82, .45);
}
body[data-page="admin"] .admin-table tbody tr:hover td,
body[data-page="admin"] .config-table tbody tr:hover td {
  color: #f7fbff;
}
body[data-page="admin"] input,
body[data-page="admin"] select,
body[data-page="admin"] textarea {
  color: var(--hr-text);
  caret-color: var(--hr-gold-2);
  text-align: var(--app-text-align, right);
  direction: var(--app-direction, rtl);
}
body[data-page="admin"] input::placeholder,
body[data-page="admin"] textarea::placeholder { color: rgba(214, 224, 239, .58); }
body[data-page="admin"] .candidate-report-drawer__chrome {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(135deg, rgba(47, 63, 91, .96), rgba(28, 40, 60, .96));
  box-shadow: 0 10px 26px rgba(2, 8, 23, .22);
}
body[data-page="admin"] .candidate-report-drawer__chrome .btn {
  min-height: 34px;
}
body[data-page="admin"] .candidate-detail-hero__top,
body[data-page="admin"] .candidate-decision-guide,
body[data-page="admin"] .section-header,
body[data-page="admin"] .candidate-detail-actions,
body[data-page="admin"] .toolbar-actions,
body[data-page="admin"] .section-actions {
  direction: var(--app-direction, rtl);
}
body[data-page="admin"] .candidate-detail-actions,
body[data-page="admin"] .toolbar-actions,
body[data-page="admin"] .section-actions {
  justify-content: flex-start;
}
body[data-page="admin"] .candidate-decision-guide {
  border-color: rgba(226, 186, 82, .32);
  background: linear-gradient(135deg, rgba(226, 186, 82, .12), rgba(255,255,255,.035)), var(--hr-panel);
}
body[data-page="admin"] .candidate-next-steps li,
body[data-page="admin"] .workflow-card,
body[data-page="admin"] .profile-summary-card,
body[data-page="admin"] .insight-card,
body[data-page="admin"] .axis-detail-card,
body[data-page="admin"] .score-chip,
body[data-page="admin"] .interview-question-card,
body[data-page="admin"] .risk-pattern-card,
body[data-page="admin"] .answer-audit-card,
body[data-page="admin"] .config-detail-list div {
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
body[data-page="admin"] .workflow-card:hover,
body[data-page="admin"] .profile-summary-card:hover,
body[data-page="admin"] .insight-card:hover,
body[data-page="admin"] .axis-detail-card:hover,
body[data-page="admin"] .score-chip:hover,
body[data-page="admin"] .interview-question-card:hover,
body[data-page="admin"] .risk-pattern-card:hover,
body[data-page="admin"] .answer-audit-card:hover,
body[data-page="admin"] .config-detail-list div:hover {
  transform: translateY(-1px);
  border-color: rgba(226, 186, 82, .34);
  background: linear-gradient(135deg, var(--hr-hover), rgba(255,255,255,.035)), rgba(25, 37, 56, .64);
  box-shadow: 0 14px 30px rgba(2, 8, 23, .16);
}
body[data-page="admin"] .workflow-card--notes {
  border-color: rgba(226, 186, 82, .30);
}
body[data-page="admin"] .workflow-card--notes textarea:focus {
  min-height: 156px;
}
body[data-page="admin"] .interview-question-card p,
body[data-page="admin"] .risk-pattern-card p,
body[data-page="admin"] .answer-audit-card p,
body[data-page="admin"] .answer-selected-box span,
body[data-page="admin"] .answer-diagnostic-grid dd {
  color: var(--hr-muted-2);
}
body[data-page="admin"] .raw-answers-disclosure > summary:hover::after,
body[data-page="admin"] .config-technical-details summary:hover::before {
  background: var(--hr-hover-strong);
  border-color: rgba(226, 186, 82, .42);
  color: #fff7d8;
}
body[data-page="admin"] .raw-answers-disclosure > summary:hover strong,
body[data-page="admin"] details summary:hover {
  color: #fff4ce;
}
body[data-page="admin"] .admin-tab__count {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity .14s ease, max-width .16s ease;
}
body[data-page="admin"] #admin-tabs-slot:not(.is-click-collapsed):hover .admin-tab__count,
body[data-page="admin"] #admin-tabs-slot:not(.is-click-collapsed):focus-within .admin-tab__count {
  opacity: 1;
  max-width: 56px;
}
body[data-page="admin"] .admin-tab.is-active .admin-tab__icon {
  background: rgba(226, 186, 82, .28);
  color: #fff7d8;
}
body[data-page="admin"] .candidate-report-drawer .candidate-detail-hero,
body[data-page="admin"] .candidate-report-drawer .candidate-decision-guide,
body[data-page="admin"] .candidate-report-drawer .detail-section {
  border-radius: 18px;
}
@media (max-width: 860px) {
  body[data-page="admin"] .admin-tab__count {
    opacity: 1;
    max-width: 56px;
  }
  body[data-page="admin"] .candidate-report-drawer__chrome {
    justify-content: flex-start;
    flex-wrap: wrap;
    height: auto;
  }
}