/* ==========================================================================
   Train & Hire — Application Stylesheet
   Central design system: tokens, shared panel layout, merged modules
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand Font
   Plus Jakarta Sans (SIL OFL, see app/assets/fonts/OFL.txt), self-hosted as
   variable woff2 covering weights 400-800. Subsets and unicode-ranges mirror
   Google Fonts, so only the latin file downloads for English pages. The
   layouts preload the latin file.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/plus-jakarta-sans-cyrillic-ext-a89ea790.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/plus-jakarta-sans-vietnamese-051f75b6.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/plus-jakarta-sans-latin-ext-2c85400d.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/plus-jakarta-sans-latin-934c3eee.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Design Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Typography */
  --th-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Text */
  --th-text: #1a1d23;
  --th-text-secondary: #5f6368;
  --th-text-muted: #646b79;

  /* Brand */
  /* --th-accent aliases the Tailwind @theme primary-600 token (defined in
     app/assets/tailwind/application.css) so blue stays defined in one place.
     Tailwind v4 emits used @theme values as :root custom props in the
     compiled tailwind.css, which loads before this file. */
  --th-accent: var(--color-primary-600);
  --th-accent-hover: #0b5ed7; /* = Tailwind primary-700 */

  /* Surfaces */
  --th-bg: #f6f7f9;
  --th-bg-card: #ffffff;
  --th-bg-subtle: #f9fafb;
  --th-sidebar-bg: #1a1d23;

  /* Borders */
  --th-border: #e4e7eb;
  --th-border-light: #f0f1f3;

  /* Shadows */
  --th-shadow-hover:
    0 4px 16px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04);

  /* Backward-compat aliases (referenced by page-specific CSS) */
  --jobs-font: var(--th-font);
  --jobs-sidebar-bg: var(--th-bg);
  --jobs-card-bg: var(--th-bg-card);
  --jobs-card-border: var(--th-border);
  --jobs-card-hover-shadow: var(--th-shadow-hover);
  --jobs-card-active-border: var(--th-accent);
  --jobs-detail-bg: var(--th-bg-card);
  --jobs-text-primary: var(--th-text);
  --jobs-text-secondary: var(--th-text-secondary);
  --jobs-text-muted: var(--th-text-muted);
  --jobs-accent: var(--th-accent);

  --at-text-primary: var(--th-text);
  --at-text-secondary: var(--th-text-secondary);
  --at-text-muted: var(--th-text-muted);
  --at-border: var(--th-border);
  --at-accent: var(--th-accent);
  --at-bg-subtle: var(--th-bg-subtle);
  --at-bg-page: var(--th-bg);

  --edu-font: var(--th-font);
  --we-font: var(--th-font);
  --skill-font: var(--th-font);
  --cred-font: var(--th-font);

  --learning-font: var(--th-font);
  --learning-text-primary: var(--th-text);
  --learning-text-secondary: var(--th-text-secondary);
  --learning-text-muted: var(--th-text-muted);
  --learning-border: var(--th-border);
  --learning-card-bg: var(--th-bg-card);
  --learning-accent: var(--th-accent);
}

/* --------------------------------------------------------------------------
   App Shell — body contract for layouts that use the inner scroll pane
   Applied via <body class="app-shell ..."> on application.html.erb and
   admin.html.erb. Pages NOT under these layouts default to normal browser
   scrolling, so a marketing or auth layout can opt out simply by omitting
   the class.
   -------------------------------------------------------------------------- */

@media print {
  #main-nav,
  footer,
  .flash-messages-container,
  .guide-progress-bar,
  .guide-toc,
  .guide-toc-mobile,
  .dash-sidebar,
  .co-sidebar,
  .mobile-copyright,
  .turbo-progress-bar,
  .at-taking-timer,
  .jobs-browser-header,
  .jobs-list-toolbar {
    display: none !important;
  }

  body,
  .app-shell,
  body.app-shell > div.bg-white {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
  }

  .guide-show,
  .cert-verify-page,
  .cert-verify-card {
    box-shadow: none !important;
    border: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .turbo-progress-bar,
  .flash-toast,
  .nav-notifications-count {
    animation: none !important;
    transition: none !important;
  }
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 2.75rem;
}

.password-field-toggle {
  position: absolute;
  right: 0.4rem;
  top: 0;
  bottom: 0;
  width: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  border-radius: 0.4rem;
}

.password-field-toggle:hover,
.password-field-toggle:focus-visible {
  color: #111827;
}

.password-field-toggle:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 1px;
}

.password-field-icon {
  width: 1.05rem;
  height: 1.05rem;
}

/* "(required)" after a field label (required_label_text) */
.field-required {
  font-weight: 500;
  color: var(--th-text-muted);
}

.skip-to-content {
  position: absolute;
  left: 0.75rem;
  top: -100px;
  z-index: 100;
  padding: 0.5rem 0.85rem;
  background: #fff;
  color: #0d6efd;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 0.4rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.skip-to-content:focus {
  top: 0.75rem;
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

.app-shell {
  background-color: #fff;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (max-width: 991.98px) {
  /* On iOS 100vh is taller than the visible viewport, which pushed the bottom
     of the inner scroll pane under the browser toolbar. Pin the shell to the
     visible viewport instead (the same fix jobs.css applies to the jobs page;
     100dvh would resize as the toolbar hides and jump the scroll). */
  .app-shell {
    position: fixed;
    inset: 0;
    height: auto;
  }

  body.app-shell > div.bg-white {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* --------------------------------------------------------------------------
   Turbo Progress Bar
   -------------------------------------------------------------------------- */

.turbo-progress-bar {
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #60a5fa, #3b82f6);
  background-size: 200% 100%;
  animation: turbo-progress-shimmer 1.5s linear infinite;
}

@keyframes turbo-progress-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* --------------------------------------------------------------------------
   Shared Animations
   -------------------------------------------------------------------------- */

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Navbar — hardcode critical styles so they render before Tailwind CDN
   initializes, preventing a flash of unstyled blue-link content on first load.
   ========================================================================== */

#main-nav {
  background-color: #0d6efd;
}

#main-nav a,
#main-nav button {
  color: #fff;
  text-decoration: none;
}

#main-nav a:hover,
#main-nav button:hover {
  color: #fff;
}

/* ==========================================================================
   Panel Layout — shared by Dashboard, Company, Admin
   ========================================================================== */

.dash,
.co-dashboard {
  font-family: var(--th-font);
  margin-top: -1.5rem;
  display: flex;
  min-height: calc(100vh - 56px - var(--view-as-banner-h, 0px));
}

/* Hide shared footer where copyright lives in sidebar */
body:has(.dash) footer,
body:has(.co-dashboard) footer,
body:has(.jobs-browser) footer {
  display: none;
}

@media (min-width: 992px) {
  body:has(.dash) > div.bg-white,
  body:has(.co-dashboard) > div.bg-white {
    overflow: hidden !important;
  }

  .dash,
  .co-dashboard {
    height: calc(100vh - 56px - var(--view-as-banner-h, 0px));
  }
}

/* --------------------------------------------------------------------------
   Panel Sidebar
   -------------------------------------------------------------------------- */

.dash-sidebar,
.co-sidebar {
  width: 240px;
  min-width: 240px;
  background: var(--th-sidebar-bg);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.dash-sidebar::-webkit-scrollbar,
.co-sidebar::-webkit-scrollbar {
  display: none;
}

.dash-sidebar-header,
.co-sidebar-header {
  padding: 1.5rem 1.25rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dash-sidebar-user,
.co-sidebar-company {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: #fff;
}

.dash-sidebar-user:hover,
.co-sidebar-company:hover {
  color: #fff;
}

.dash-sidebar-avatar,
.co-sidebar-logo {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.dash-sidebar-avatar {
  border-radius: 50%;
}
.co-sidebar-logo {
  border-radius: 8px;
}

.dash-sidebar-avatar-placeholder,
.co-sidebar-logo-placeholder {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, #3d5a80, #5b8fb9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.dash-sidebar-avatar-placeholder {
  border-radius: 50%;
}
.co-sidebar-logo-placeholder {
  border-radius: 8px;
}

.dash-sidebar-name,
.co-sidebar-company-name {
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Switcher for a user on more than one company team */
.co-company-switcher {
  margin-top: 0.75rem;
  font-size: 0.75rem;
}

.co-company-switcher > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.co-company-switcher > summary::-webkit-details-marker {
  display: none;
}

.co-company-switcher > summary::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.co-company-switcher[open] > summary::after {
  transform: rotate(-135deg) translateY(-1px);
}

.co-company-switcher > summary:hover {
  color: #fff;
}

.co-company-switcher ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.co-company-switcher a {
  display: block;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.co-company-switcher a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.dash-sidebar-role {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* --------------------------------------------------------------------------
   Panel Navigation
   -------------------------------------------------------------------------- */

.dash-sidebar-nav,
.co-sidebar-nav {
  padding: 0.75rem 0;
  flex: 1;
}

.dash-nav-section,
.co-nav-section {
  padding: 0 0.75rem;
  margin-bottom: 0.5rem;
}

.dash-nav-label,
.co-nav-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  padding: 0 0.5rem;
  margin-bottom: 0.35rem;
}

.dash-nav-link,
.co-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: all 0.15s ease;
  margin-bottom: 1px;
  letter-spacing: -0.005em;
}

.dash-nav-link:hover,
.co-nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.dash-nav-link.active,
.co-nav-link.active {
  color: #fff;
  background: rgba(13, 110, 253, 0.2);
  font-weight: 600;
}

.dash-nav-link svg,
.co-nav-link svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  flex-shrink: 0;
  opacity: 0.7;
}

.dash-nav-link.active svg,
.co-nav-link.active svg {
  opacity: 1;
}

.dash-nav-badge,
.co-nav-badge {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  padding: 0.1rem 0.45rem;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.dash-nav-badge-alert {
  background: #dc3545 !important;
  color: #fff !important;
}

.co-sidebar-footer {
  padding: 0.25rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: auto;
  text-align: center;
}

.co-sidebar-footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.15s ease;
}

.co-sidebar-footer a:hover {
  color: rgba(255, 255, 255, 0.8);
}

.co-sidebar-footer a svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
}

.co-sidebar-copyright {
  margin: 0.15rem 0 0;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.01em;
}

.co-sidebar-copyright a {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
}

.co-sidebar-copyright a:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mobile-copyright {
  display: none;
}

/* --------------------------------------------------------------------------
   Panel Main Content
   -------------------------------------------------------------------------- */

.dash-main,
.co-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--th-bg);
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: #c4c8cc transparent;
}

.dash-main::-webkit-scrollbar,
.co-main::-webkit-scrollbar {
  width: 5px;
}

.dash-main::-webkit-scrollbar-track,
.co-main::-webkit-scrollbar-track {
  background: transparent;
}

.dash-main::-webkit-scrollbar-thumb,
.co-main::-webkit-scrollbar-thumb {
  background: #c4c8cc;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Panel Page Header
   -------------------------------------------------------------------------- */

.dash-page-header,
.co-page-header {
  padding: 1.75rem 2.5rem 1.25rem;
  background: #fff;
  border-bottom: 1px solid var(--th-border);
}

.dash-page-header-inner,
.co-page-header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  /* The page body is 1100px including its 2.5rem side padding; match its
     content width so header actions end where the content does. */
  max-width: calc(1100px - 5rem);
}

.dash-page-title,
.co-page-title {
  font-family: var(--th-font);
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--th-text);
  letter-spacing: -0.035em;
  margin-bottom: 0.15rem;
  line-height: 1.2;
}

.dash-page-subtitle,
.co-page-subtitle {
  font-size: 0.88rem;
  color: var(--th-text-secondary);
  margin-bottom: 0;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   Panel Breadcrumb
   -------------------------------------------------------------------------- */

.co-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--th-text-muted);
  margin-bottom: 0.65rem;
}

.co-breadcrumb a {
  color: var(--th-text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.co-breadcrumb a:hover {
  color: var(--th-accent);
}

.co-breadcrumb-sep {
  color: #d1d5db;
  font-size: 0.6rem;
}

/* --------------------------------------------------------------------------
   Panel Page Body
   -------------------------------------------------------------------------- */

.dash-page-body,
.co-page-body {
  padding: 2rem 2.5rem 3rem;
  max-width: 1100px;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Panel Cards
   -------------------------------------------------------------------------- */

.dash-card,
.co-card {
  background: var(--th-bg-card);
  border: 1.5px solid var(--th-border);
  border-radius: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  animation: fadeSlideIn 0.25s ease-out;
}

.dash-card {
  margin-bottom: 1.5rem;
}
.dash-card:last-child {
  margin-bottom: 0;
}

.dash-card-header,
.co-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--th-border-light);
}

.dash-card-title,
.co-card-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--th-text-secondary);
  margin-bottom: 0;
}

.dash-card-body,
.co-card-body {
  padding: 1.25rem;
}

/* --------------------------------------------------------------------------
   Panel Detail Rows: label/value rows for any details block. Seeker pages
   (.dash-detail-*) and employer and admin pages (.co-info-*) share one rule
   (DES-F1). A long value (an email, a URL) wraps instead of widening a
   sidebar, and the label stays on the value's first line.
   -------------------------------------------------------------------------- */

.dash-detail-row,
.co-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.82rem;
}

.dash-detail-row:last-child,
.co-info-row:last-child {
  border-bottom: none;
}

.dash-detail-label,
.co-info-label {
  color: var(--jobs-text-muted);
  font-weight: 500;
  flex-shrink: 0;
}

.dash-detail-value,
.co-info-value {
  color: var(--jobs-text-primary);
  font-weight: 600;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* "Not set" in place of a value */
.dash-detail-empty,
.co-info-none {
  color: var(--jobs-text-muted);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Panel Empty States: an empty list or section on seeker, employer and admin
   pages (DES-F1). A grey icon by default; the -blue / -amber / -green /
   -purple / -rose modifiers tint it. Then a title, a line of text and,
   optionally, a shared button.
   -------------------------------------------------------------------------- */

.dash-empty-state,
.co-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
}

/* Inside a card section rather than filling the page */
.dash-empty-state-compact,
.co-empty-state-compact {
  padding: 2rem 1.5rem;
}

.dash-empty-state-icon,
.co-empty-state-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--tone-neutral-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-empty-state-icon svg,
.co-empty-state-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #adb5bd;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dash-empty-state-icon-blue,
.co-empty-state-icon-blue { background: var(--tone-info-bg); }
.dash-empty-state-icon-blue svg,
.co-empty-state-icon-blue svg { stroke: #3b82f6; }
.dash-empty-state-icon-amber,
.co-empty-state-icon-amber { background: var(--tone-warning-bg); }
.dash-empty-state-icon-amber svg,
.co-empty-state-icon-amber svg { stroke: #d97706; }
.dash-empty-state-icon-green,
.co-empty-state-icon-green { background: var(--tone-success-bg); }
.dash-empty-state-icon-green svg,
.co-empty-state-icon-green svg { stroke: #059669; }
.dash-empty-state-icon-purple,
.co-empty-state-icon-purple { background: #e0e7ff; }
.dash-empty-state-icon-purple svg,
.co-empty-state-icon-purple svg { stroke: #6366f1; }
.dash-empty-state-icon-rose,
.co-empty-state-icon-rose { background: var(--tone-danger-bg); }
.dash-empty-state-icon-rose svg,
.co-empty-state-icon-rose svg { stroke: #dc2626; }

.dash-empty-state-title,
.co-empty-state-title {
  font-family: var(--jobs-font);
  font-size: 1rem;
  font-weight: 700;
  color: var(--jobs-text-primary);
  margin: 0 0 0.3rem;
}

.dash-empty-state-text,
.co-empty-state-text {
  font-size: 0.85rem;
  color: var(--jobs-text-secondary);
  max-width: 400px;
  margin: 0 auto 1.25rem;
  line-height: 1.6;
}

.dash-empty-state-text:last-child,
.co-empty-state-text:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Panel Buttons
   One button system for the seeker dashboard (dash-btn) and the company and
   admin panels (co-btn). Pair the base class with a size (-sm, -xs) and a
   colour (-primary, -outline, -ghost, -danger, -danger-outline). These rules
   are unlayered, so Tailwind utilities on the same element that set the same
   property are ignored: don't stack them.
   -------------------------------------------------------------------------- */

.dash-btn,
.co-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-family: var(--jobs-font);
  font-weight: 700;
  font-size: 0.82rem;
  border-radius: 8px;
  padding: 0.55rem 1.25rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.dash-btn svg,
.co-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  flex-shrink: 0;
}

.dash-btn-sm,
.co-btn-sm {
  font-size: 0.78rem;
  padding: 0.35rem 0.85rem;
}

.dash-btn-sm svg,
.co-btn-sm svg {
  width: 13px;
  height: 13px;
}

/* Compact row controls (reorder arrows, per-row Edit / Delete) */
.dash-btn-xs,
.co-btn-xs {
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
}

.dash-btn-primary,
.co-btn-primary {
  background: var(--th-accent);
  color: #fff;
  border-color: var(--th-accent);
}

.dash-btn-primary:hover,
.co-btn-primary:hover {
  background: var(--th-accent-hover);
  border-color: var(--th-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(13, 110, 253, 0.25);
  color: #fff;
}

.dash-btn-primary:active,
.co-btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.dash-btn-outline,
.co-btn-outline {
  background: #fff;
  color: var(--jobs-text-secondary);
  border-color: var(--jobs-card-border);
}

.dash-btn-outline:hover,
.co-btn-outline:hover {
  background: #f9fafb;
  color: var(--jobs-text-primary);
  border-color: #d1d5db;
}

/* Solid red: the one irreversible action in a Danger Zone */
.dash-btn-danger,
.co-btn-danger {
  background: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

.dash-btn-danger:hover,
.co-btn-danger:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}

.dash-btn-danger-outline,
.co-btn-danger-outline {
  background: #fff;
  color: #dc3545;
  border-color: #fecaca;
}

.dash-btn-danger-outline:hover,
.co-btn-danger-outline:hover {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #dc3545;
}

.dash-btn-ghost,
.co-btn-ghost {
  background: transparent;
  color: var(--jobs-text-secondary);
  border-color: transparent;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.dash-btn-ghost:hover,
.co-btn-ghost:hover {
  color: var(--jobs-text-primary);
  background: #f3f4f6;
}

/* --------------------------------------------------------------------------
   Panel Select Dropdowns
   Custom-styled selects with chevron indicator for admin/company dashboards
   -------------------------------------------------------------------------- */

.co-dashboard select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1rem;
  padding-right: 2.25rem;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* A multi-select is a list, not a dropdown: no chevron. */
.co-dashboard select[multiple] {
  background-image: none;
  padding-right: 0.5rem;
}

.co-dashboard select:hover:not(:focus) {
  border-color: #9ca3af;
  background-color: #f9fafb;
}

.co-dashboard select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Panel Stats
   -------------------------------------------------------------------------- */

.dash-stats,
.co-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Column-count variants. Kept before the responsive rules below so stat rows
   still drop to 2 and then 1 column on smaller screens (an inline
   grid-template-columns would override those). */
.co-stats-2 {
  grid-template-columns: repeat(2, 1fr);
}

.co-stats-4 {
  grid-template-columns: repeat(4, 1fr);
}

.dash-stat-card,
.co-stat-card {
  background: var(--th-bg-card);
  border: 1.5px solid var(--th-border);
  border-radius: 10px;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
  animation: fadeSlideIn 0.25s ease-out both;
}

.dash-stat-card {
  padding: 1.25rem 1.35rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.co-stat-card {
  padding: 1.15rem 1.25rem;
}

/* Only stat cards that are links react to hover; most are static <div>s. */
.co-stat-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

a.dash-stat-card:hover,
a.co-stat-card:hover {
  color: inherit;
  text-decoration: none;
  box-shadow: var(--th-shadow-hover);
  transform: translateY(-1px);
}

.dash-stat-card::before,
.co-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 10px 10px 0 0;
  opacity: 0;
  transition: opacity 0.18s ease;
}

a.dash-stat-card:hover::before,
a.co-stat-card:hover::before {
  opacity: 1;
}

.dash-stat-card:nth-child(1)::before {
  background: #2563eb;
}
.dash-stat-card:nth-child(2)::before {
  background: #d97706;
}
.dash-stat-card:nth-child(3)::before {
  background: #059669;
}
.dash-stat-card:nth-child(4)::before {
  background: #6366f1;
}
.dash-stat-card:nth-child(5)::before {
  background: #dc2626;
}
.dash-stat-card:nth-child(6)::before {
  background: #0d9488;
}

.co-stat-card:nth-child(1)::before {
  background: var(--th-accent);
}
.co-stat-card:nth-child(2)::before {
  background: #f59e0b;
}
.co-stat-card:nth-child(3)::before {
  background: #10b981;
}

.dash-stat-card:nth-child(1) {
  animation-delay: 0.03s;
}
.dash-stat-card:nth-child(2) {
  animation-delay: 0.06s;
}
.dash-stat-card:nth-child(3) {
  animation-delay: 0.09s;
}
.dash-stat-card:nth-child(4) {
  animation-delay: 0.12s;
}
.dash-stat-card:nth-child(5) {
  animation-delay: 0.15s;
}
.dash-stat-card:nth-child(6) {
  animation-delay: 0.18s;
}

/* Stat icon (dashboard variant with colored background) */
.dash-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-stat-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
  fill: none;
}

.dash-stat-icon-blue {
  background: #dbeafe;
  color: #2563eb;
}
.dash-stat-icon-amber {
  background: #fef3c7;
  color: #d97706;
}
.dash-stat-icon-green {
  background: #d1fae5;
  color: #059669;
}
.dash-stat-icon-purple {
  background: #e0e7ff;
  color: #6366f1;
}
.dash-stat-icon-rose {
  background: #fee2e2;
  color: #dc2626;
}
.dash-stat-icon-teal {
  background: #ccfbf1;
  color: #0d9488;
}

.dash-stat-info {
  min-width: 0;
}

.dash-stat-value,
.co-stat-value {
  font-weight: 800;
  color: var(--th-text);
  letter-spacing: -0.03em;
  line-height: 1;
}

.dash-stat-value {
  font-size: 1.65rem;
  margin-bottom: 0.25rem;
}
.co-stat-value {
  font-size: 1.85rem;
}

/* Hired emerald, shared with the kanban column and funnel segment. */
.co-stat-value-hired {
  color: #059669;
}

/* A one-line breakdown under a stat's value. */
.co-stat-note {
  margin-top: 0.45rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--th-text-muted);
}

.dash-stat-label,
.co-stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--th-text-secondary);
}

.dash-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.co-stat-label {
  margin-bottom: 0.45rem;
}

/* --------------------------------------------------------------------------
   Panel Tables
   -------------------------------------------------------------------------- */

.co-table {
  width: 100%;
  font-size: 0.85rem;
  border-collapse: separate;
  border-spacing: 0;
}

.co-table thead th {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--th-text-secondary);
  padding: 0.65rem 1rem;
  border-bottom: 1.5px solid var(--th-border);
  background: #fafbfc;
  white-space: nowrap;
  text-align: left;
}

.co-table thead th:first-child {
  padding-left: 1.25rem;
}
.co-table thead th:last-child {
  padding-right: 1.25rem;
}

.co-table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  color: var(--th-text);
  vertical-align: middle;
}

.co-table tbody td:first-child {
  padding-left: 1.25rem;
}
.co-table tbody td:last-child {
  padding-right: 1.25rem;
}

.co-table tbody tr {
  transition: background 0.12s ease;
}

.co-table tbody tr:hover {
  background: var(--th-bg-subtle);
}
.co-table tbody tr:last-child td {
  border-bottom: none;
}

.co-table .cell-title {
  font-weight: 600;
  color: var(--th-text);
  letter-spacing: -0.01em;
}

.co-table .cell-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.co-table .cell-title a:hover {
  color: var(--th-accent);
}

.co-table .cell-muted {
  color: var(--th-text-muted);
  font-size: 0.8rem;
}

.co-table .cell-actions {
  white-space: nowrap;
  text-align: right;
}

.co-table .cell-actions a,
.co-table .cell-actions button {
  font-size: 0.78rem;
  font-weight: 600;
  margin-left: 0.75rem;
}

/* Compact icon-style row actions for admin index tables.
   Edit reads as the primary action; Delete is muted by default
   and only turns red on hover so a long table does not look like
   a wall of warnings. */
.co-table .cell-actions .co-row-action,
.co-table .cell-actions .co-row-action-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  margin-left: 0.375rem;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
  text-decoration: none;
}

.co-table .cell-actions .co-row-action svg,
.co-table .cell-actions .co-row-action-danger svg {
  width: 1rem;
  height: 1rem;
  stroke-width: 1.75;
}

.co-table .cell-actions .co-row-action {
  color: #2563eb;
  border-color: #dbeafe;
}

.co-table .cell-actions .co-row-action:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.co-table .cell-actions .co-row-action-danger {
  color: #6b7280;
  border-color: #e5e7eb;
}

.co-table .cell-actions .co-row-action-danger:hover {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}

/* button_to wraps the button in a form; keep the form inline so
   the action chips sit next to each other. */
.co-table .cell-actions form.button_to {
  display: inline-block;
  margin: 0 0 0 0.375rem;
}

.co-table .cell-actions form.button_to .co-row-action-danger {
  margin-left: 0;
}

/* Grouped table (category / skill header rows) */
.co-table-grouped tbody tr.co-table-group-category > th,
.co-table-grouped tbody tr.co-table-group-skill > th {
  padding: 0.5rem 1.25rem;
  text-align: left;
  font-weight: 700;
  color: var(--th-text);
  background: var(--th-bg-subtle);
  border-top: 1px solid var(--th-border);
  border-bottom: 1px solid #eef0f3;
}

.co-table-grouped tbody tr.co-table-group-category > th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--th-text-secondary);
  background: #eef2f7;
  border-top: 2px solid var(--th-border);
}

.co-table-grouped tbody tr.co-table-group-category:first-child > th {
  border-top: none;
}

.co-table-grouped tbody tr.co-table-group-skill > th {
  font-size: 0.82rem;
  letter-spacing: -0.005em;
  background: #f8fafc;
}

.co-table-grouped .co-table-group-count {
  margin-left: 0.6rem;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--th-text-muted);
  letter-spacing: 0;
  text-transform: none;
}

.co-table-grouped tbody tr.co-table-group-category:hover,
.co-table-grouped tbody tr.co-table-group-skill:hover {
  background: inherit;
}

/* --------------------------------------------------------------------------
   Panel Badges
   -------------------------------------------------------------------------- */

.co-badge {
  font-family: var(--th-font);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  letter-spacing: 0.01em;
  display: inline-block;
  line-height: 1.4;
}

.co-badge-draft {
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
}
.co-badge-published,
.co-badge-verified {
  background: var(--tone-success-bg);
  color: var(--tone-success-fg);
}
.co-badge-unverified {
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
}
/* Out of circulation, not unfinished: a warmer grey than draft. */
.co-badge-archived {
  background: #efebe7;
  color: #5c4a3d;
}
.co-badge-closed {
  background: var(--tone-danger-bg);
  color: var(--tone-danger-fg);
}
.co-badge-suspended {
  background: var(--tone-danger-bg);
  color: var(--tone-danger-fg);
}
/* Waiting on an admin: an extra time request. */
.co-badge-requested {
  background: var(--tone-warning-bg);
  color: var(--tone-warning-fg);
}
/* Tones (DES-F1): the tinted background and text pairs every badge, pill,
   chip, status flag and tier uses, on every surface. A tint means the same
   thing wherever it appears: info is blue, progress violet, success green,
   warning amber, danger red and neutral grey. Use these instead of spelling
   the colours (test/assets/panel_kit_test.rb). */
:root {
  --tone-info-bg: #dbeafe;
  --tone-info-fg: #1e40af;
  --tone-progress-bg: #ede9fe;
  --tone-progress-fg: #5b21b6;
  --tone-success-bg: #d1fae5;
  --tone-success-fg: #065f46;
  --tone-warning-bg: #fef3c7;
  --tone-warning-fg: #92400e;
  --tone-danger-bg: #fee2e2;
  --tone-danger-fg: #991b1b;
  --tone-neutral-bg: #f1f3f5;
  --tone-neutral-fg: #495057;
}

/* Application status palette (DES-6). One hue per status: -bg / -fg for
   badges, -accent for markers, kanban headers, funnel segments, dots and
   tabs. Hired is the solid deep emerald on both employer and seeker sides. */
:root {
  --status-submitted-bg: var(--tone-info-bg);
  --status-submitted-fg: var(--tone-info-fg);
  --status-submitted-accent: #3b82f6;
  --status-reviewing-bg: var(--tone-warning-bg);
  --status-reviewing-fg: var(--tone-warning-fg);
  --status-reviewing-accent: #f59e0b;
  --status-interviewed-bg: var(--tone-progress-bg);
  --status-interviewed-fg: var(--tone-progress-fg);
  --status-interviewed-accent: #8b5cf6;
  --status-offered-bg: var(--tone-success-bg);
  --status-offered-fg: var(--tone-success-fg);
  --status-offered-accent: #10b981;
  --status-hired-bg: #047857;
  --status-hired-fg: #ffffff;
  --status-hired-accent: #059669;
  --status-hired-text: #064e3b; /* hired on a white surface (tab labels) */
  --status-rejected-bg: var(--tone-danger-bg);
  --status-rejected-fg: var(--tone-danger-fg);
  --status-rejected-accent: #ef4444;
  --status-withdrawn-bg: var(--tone-neutral-bg);
  --status-withdrawn-fg: var(--tone-neutral-fg);
  --status-withdrawn-accent: #9aa0a6;
}

.co-badge-submitted {
  background: var(--status-submitted-bg);
  color: var(--status-submitted-fg);
}
.co-badge-reviewing {
  background: var(--status-reviewing-bg);
  color: var(--status-reviewing-fg);
}
.co-badge-interviewed {
  background: var(--status-interviewed-bg);
  color: var(--status-interviewed-fg);
}
.co-badge-offered {
  background: var(--status-offered-bg);
  color: var(--status-offered-fg);
}
.co-badge-hired {
  background: var(--status-hired-bg);
  color: var(--status-hired-fg);
}
.co-badge-rejected {
  background: var(--status-rejected-bg);
  color: var(--status-rejected-fg);
}
.co-badge-withdrawn {
  background: var(--status-withdrawn-bg);
  color: var(--status-withdrawn-fg);
}
.co-badge-admin {
  background: var(--tone-warning-bg);
  color: var(--tone-warning-fg);
}
.co-badge-member {
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
}

/* Admin badge extensions */
.co-badge-beginner {
  background: var(--tone-success-bg);
  color: var(--tone-success-fg);
}
.co-badge-intermediate {
  background: var(--tone-info-bg);
  color: var(--tone-info-fg);
}
.co-badge-advanced {
  background: var(--tone-warning-bg);
  color: var(--tone-warning-fg);
}
.co-badge-expert {
  background: var(--tone-danger-bg);
  color: var(--tone-danger-fg);
}
.co-badge-seeker {
  background: var(--tone-info-bg);
  color: var(--tone-info-fg);
}
.co-badge-employer {
  background: #e0e7ff;
  color: #3730a3;
}
.co-badge-open {
  background: var(--tone-success-bg);
  color: var(--tone-success-fg);
}
.co-badge-filled {
  background: var(--tone-success-bg);
  color: var(--tone-success-fg);
}
/* Interview status badges */
.co-badge-proposed {
  background: var(--tone-warning-bg);
  color: var(--tone-warning-fg);
}
.co-badge-confirmed {
  background: var(--tone-info-bg);
  color: var(--tone-info-fg);
}
.co-badge-completed {
  background: var(--tone-success-bg);
  color: var(--tone-success-fg);
}
.co-badge-cancelled {
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
}

/* Hire status badges */
.co-badge-extended {
  background: var(--tone-info-bg);
  color: var(--tone-info-fg);
}
.co-badge-pending_start {
  background: var(--tone-progress-bg);
  color: var(--tone-progress-fg);
}
.co-badge-started {
  background: var(--tone-success-bg);
  color: var(--tone-success-fg);
}
.co-badge-declined {
  background: var(--tone-danger-bg);
  color: var(--tone-danger-fg);
}
.co-badge-rescinded {
  background: var(--tone-danger-bg);
  color: var(--tone-danger-fg);
}
.co-badge-expired {
  background: var(--tone-danger-bg);
  color: var(--tone-danger-fg);
}
.co-badge-no_show {
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
}
.co-badge-withdrew {
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-fg);
}
.co-badge-terminated {
  background: var(--tone-danger-bg);
  color: var(--tone-danger-fg);
}

/* Question pool badges */
.co-badge-required {
  background: var(--tone-info-bg);
  color: var(--tone-info-fg);
}
.co-badge-optional {
  background: #f3e8ff;
  color: #6b21a8;
}

/* --------------------------------------------------------------------------
   Panel Section Headings
   -------------------------------------------------------------------------- */

.dash-section-heading,
.co-section-heading {
  font-family: var(--th-font);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--th-text-secondary);
  margin-top: 0;
  margin-bottom: 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--th-border-light);
}

/* --------------------------------------------------------------------------
   Panel Flash Messages
   -------------------------------------------------------------------------- */

.dash-flash {
  padding: 0.75rem 2.5rem 0;
  max-width: 1100px;
}

.dash-flash-notice,
.dash-flash-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.5;
  font-weight: 500;
}

.dash-flash-notice {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.dash-flash-alert {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.dash-flash-dismiss {
  margin-left: 0.75rem;
  background: transparent;
  border: 0;
  padding: 0.15rem;
  cursor: pointer;
  color: inherit;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.dash-flash-dismiss:hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Long user text: a pasted URL or email is one unbreakable word (DES-8).
   Card bodies use break-word, which only splits a word that would overflow
   its line and leaves flex/table sizing alone. The boxes that hold
   free-form user text use anywhere, so they can also shrink inside a
   bubble or sidebar row.
   -------------------------------------------------------------------------- */

.dash-card-body,
.co-card-body {
  overflow-wrap: break-word;
}

.co-message-body,
.dash-message-body,
.co-note-body,
.dash-application-cover-letter {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Panel Errors: validation summaries. The seeker .dash-errors box and the
   employer/admin .co-alert.co-alert-danger box are the same red (DES-7);
   .co-alert-warning stays for notices that aren't errors.
   -------------------------------------------------------------------------- */

.dash-errors,
.co-alert-danger {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  font-size: 0.82rem;
  margin-bottom: 1.25rem;
  line-height: 1.5;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.dash-errors svg,
.co-alert-danger svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 0.1rem;
  stroke: #ef4444;
  stroke-width: 1.75;
  fill: none;
}

.dash-errors ul,
.co-alert-danger ul {
  margin: 0.25rem 0 0 0;
  padding-left: 1rem;
  font-size: 0.8rem;
}

/* --------------------------------------------------------------------------
   Answer rows: the divided list on the admin question pages and the
   employer question editor. Named apart from company.css's
   .co-answer-option cards so the two designs don't merge.
   -------------------------------------------------------------------------- */

.co-answer-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid #f3f4f6;
  font-size: 0.85rem;
  transition: background 0.12s ease;
}

.co-answer-row:last-child {
  border-bottom: none;
}
.co-answer-row:hover {
  background: #fafbfc;
}
.co-answer-row-correct {
  background: #f0fdf4;
}
.co-answer-row-correct:hover {
  background: #ecfdf5;
}

.co-answer-row-indicator {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.co-answer-row-correct .co-answer-row-indicator {
  border-color: #10b981;
  background: #10b981;
}

.co-answer-row-correct .co-answer-row-indicator::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.co-answer-row-body {
  flex: 1;
  font-weight: 500;
  color: var(--th-text);
}

.co-answer-row-correct .co-answer-row-body {
  color: #065f46;
  font-weight: 600;
}

.co-answer-row-actions {
  display: flex;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.co-answer-row:hover .co-answer-row-actions,
.co-answer-row:focus-within .co-answer-row-actions {
  opacity: 1;
}

.co-answer-row-actions a,
.co-answer-row-actions button {
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  border: none;
  background: none;
  cursor: pointer;
  transition: background 0.12s ease;
}

.co-answer-row-actions .btn-remove {
  color: #dc3545;
}
.co-answer-row-actions .btn-remove:hover {
  background: #fee2e2;
}

/* --------------------------------------------------------------------------
   Panel Responsive — sidebar collapses to horizontal nav
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  /* Keep a focused or scrolled-to target clear of the sticky nav strip. */
  [data-scroll-restore="main"]:has(.dash-sidebar, .co-sidebar) {
    scroll-padding-top: 3.5rem;
  }

  .dash,
  .co-dashboard {
    flex-direction: column;
    min-height: auto;
  }

  .dash-sidebar,
  .co-sidebar {
    width: 100%;
    min-width: 100%;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .dash-sidebar-header,
  .co-sidebar-header {
    display: none;
  }

  .dash-sidebar-nav,
  .co-sidebar-nav {
    display: flex;
    padding: 0;
    gap: 0;
  }

  .dash-nav-section,
  .co-nav-section {
    display: flex;
    padding: 0 0.5rem;
    margin-bottom: 0;
    gap: 0;
  }

  .dash-nav-label,
  .co-nav-label {
    display: none;
  }

  .dash-nav-link,
  .co-nav-link {
    white-space: nowrap;
    padding: 0.9rem 0.85rem;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: 0;
    background: transparent;
  }

  .dash-nav-link.active,
  .co-nav-link.active {
    background: transparent;
    border-bottom-color: var(--th-accent);
    color: #fff;
  }

  .dash-nav-link:not(.active),
  .co-nav-link:not(.active) {
    color: rgba(255, 255, 255, 0.55);
  }

  .dash-sidebar-footer,
  .co-sidebar-footer {
    display: none;
  }

  /* Stands in for the site footer, which is hidden only inside the
     dashboard and company shells. Token pages like the email-change undo
     live under dashboard/ without the shell and keep the site footer. */
  body:has(.dash) .mobile-copyright,
  body:has(.co-dashboard) .mobile-copyright {
    display: block;
  }

  .mobile-copyright {
    text-align: center;
    padding: 1.5rem 1rem;
    border-top: 1px solid #e5e7eb;
  }

  .mobile-copyright a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--th-accent);
    text-decoration: none;
    font-weight: 500;
  }

  .mobile-copyright a svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
  }

  .mobile-copyright a:hover {
    opacity: 0.8;
  }

  .mobile-copyright p {
    margin-top: 0.35rem;
    font-size: 0.65rem;
    color: #6b7280;
    letter-spacing: 0.01em;
  }

  .mobile-copyright p a {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    text-decoration: none;
  }

  .mobile-copyright p a:hover {
    color: #6b7280;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .dash-page-body,
  .co-page-body {
    padding: 1.5rem;
  }

  .dash-page-header,
  .co-page-header {
    padding: 1.25rem 1.5rem;
  }

  .dash-stats,
  .co-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .dash-flash {
    padding: 0.75rem 1.5rem 0;
  }
}

@media (max-width: 575.98px) {
  .dash-page-title,
  .co-page-title {
    font-size: 1.3rem;
  }

  .dash-page-body,
  .co-page-body {
    padding: 1rem;
  }

  .dash-page-header,
  .co-page-header {
    padding: 1rem;
  }

  /* Stack the title block and the header actions on phones so the actions
     wrap below the title instead of running off-screen. */
  .dash-page-header-inner,
  .co-page-header-inner {
    flex-wrap: wrap;
  }

  .dash-page-header-inner > :first-child,
  .co-page-header-inner > :first-child {
    flex: 1 1 100%;
    min-width: 0;
  }

  .co-breadcrumb {
    flex-wrap: wrap;
    row-gap: 0.15rem;
  }

  .co-breadcrumb a,
  .co-breadcrumb span:not(.co-breadcrumb-sep) {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dash-stats,
  .co-stats {
    grid-template-columns: 1fr;
  }

  .dash-stat-card,
  .co-stat-card {
    padding: 1rem;
  }

  .dash-flash {
    padding: 0.5rem 1rem 0;
  }
}

/* ==========================================================================
   Navbar Active Link (client-side via JS for turbo-permanent nav)
   ========================================================================== */

[data-nav-active="true"] {
  color: #fff !important;
  background: rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================================================
   Navbar User Group (merged from navbar.css)
   ========================================================================== */

.nav-user-group {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 14rem;
  min-width: 0;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  color: #fff;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  line-height: 1;
}

.nav-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.nav-user-group:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
  text-decoration: none;
}

.nav-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

.nav-avatar-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.75rem;
  flex-shrink: 0;
  line-height: 1;
}

@media (max-width: 767px) {
  .nav-user-group {
    padding: 0.375rem 0.5rem;
    gap: 0.625rem;
  }

  .nav-avatar {
    width: 32px;
    height: 32px;
  }

  .nav-avatar-placeholder {
    width: 32px;
    height: 32px;
    font-size: 0.825rem;
  }
}


/* ==========================================================================
   Notification Bell (merged from notifications.css - navbar portion)
   ========================================================================== */

.nav-notifications-bell {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.nav-notifications-bell svg {
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.nav-notifications-bell:hover svg {
  opacity: 1;
}

#mobile-nav .nav-notifications-count {
  position: static;
  animation: none;
}

.nav-notifications-count {
  position: absolute;
  top: 2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: #fff;
  background: #dc3545;
  border-radius: 10px;
  animation: nav-badge-pulse 2s ease-in-out infinite;
}

@keyframes nav-badge-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* ==========================================================================
   Skill Badges (merged from user_skills.css)
   ========================================================================== */

:root {
  --prof-beginner-bg: #e0f2fe;
  --prof-beginner-text: #0c4a6e;
  --prof-beginner-border: #7dd3fc;
  --prof-beginner-icon: #38bdf8;
  --prof-intermediate-bg: #dbeafe;
  --prof-intermediate-text: #1e3a8a;
  --prof-intermediate-border: #93c5fd;
  --prof-intermediate-icon: #3b82f6;
  --prof-advanced-bg: #fef3c7;
  --prof-advanced-text: #78350f;
  --prof-advanced-border: #fcd34d;
  --prof-advanced-icon: #f59e0b;
  --prof-expert-bg: #fee2e2;
  --prof-expert-text: #7f1d1d;
  --prof-expert-border: #fca5a5;
  --prof-expert-icon: #ef4444;
  --verified-color: #059669;
  --verified-bg: #d1fae5;
}

.skill-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border-radius: 8px;
  font-family: var(--th-font);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
  border: 1px solid transparent;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.skill-badge-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.skill-badge-name {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.skill-badge-level {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.proficiency-beginner {
  background: var(--prof-beginner-bg);
  color: var(--prof-beginner-text);
  border-color: var(--prof-beginner-border);
}
.proficiency-intermediate {
  background: var(--prof-intermediate-bg);
  color: var(--prof-intermediate-text);
  border-color: var(--prof-intermediate-border);
}
.proficiency-advanced {
  background: var(--prof-advanced-bg);
  color: var(--prof-advanced-text);
  border-color: var(--prof-advanced-border);
}
.proficiency-expert {
  background: var(--prof-expert-bg);
  color: var(--prof-expert-text);
  border-color: var(--prof-expert-border);
}

.skill-badge-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--verified-bg);
  color: var(--verified-color);
  flex-shrink: 0;
  margin-left: 0.1rem;
}

.skill-badge-verified svg {
  width: 10px;
  height: 10px;
}

.user-skills-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.user-skill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  transition: background 0.15s ease;
  animation: fadeIn 0.2s ease-out both;
}

.user-skill-row:hover {
  background: #f8f9fb;
}

.user-skill-row:nth-child(1) {
  animation-delay: 0.02s;
}
.user-skill-row:nth-child(2) {
  animation-delay: 0.04s;
}
.user-skill-row:nth-child(3) {
  animation-delay: 0.06s;
}
.user-skill-row:nth-child(4) {
  animation-delay: 0.06s;
}
.user-skill-row:nth-child(5) {
  animation-delay: 0.08s;
}
.user-skill-row:nth-child(6) {
  animation-delay: 0.1s;
}
.user-skill-row:nth-child(7) {
  animation-delay: 0.12s;
}
.user-skill-row:nth-child(8) {
  animation-delay: 0.14s;
}
.user-skill-row:nth-child(9) {
  animation-delay: 0.16s;
}
.user-skill-row:nth-child(10) {
  animation-delay: 0.18s;
}

.user-skill-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.user-skill-experience {
  font-family: var(--th-font);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tone-neutral-fg);
  white-space: nowrap;
  padding: 0.15rem 0.5rem;
  background: var(--tone-neutral-bg);
  border-radius: 4px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.user-skills-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1rem;
  color: var(--th-text-muted);
}

.user-skills-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #f1f3f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.user-skills-empty-icon svg {
  width: 22px;
  height: 22px;
  stroke: #adb5bd;
}

.user-skills-empty p {
  font-family: var(--th-font);
  font-size: 0.85rem;
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .skill-badge-pill {
    font-size: 0.78rem;
    padding: 0.25rem 0.55rem;
  }
  .skill-badge-level {
    font-size: 0.58rem;
  }
  .user-skill-row {
    padding: 0.35rem 0.4rem;
  }
}

/* ==========================================================================
   User Credentials List (merged from user_credentials.css)
   ========================================================================== */

:root {
  --cred-active-bg: #d1fae5;
  --cred-active-text: #065f46;
  --cred-active-border: #6ee7b7;
  --cred-expired-bg: #fee2e2;
  --cred-expired-text: #991b1b;
  --cred-expired-border: #fca5a5;
  --cred-no-expiry-bg: #f3f4f6;
  --cred-no-expiry-text: #4b5563;
  --cred-no-expiry-border: #d1d5db;
}

.user-credentials-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.user-credential-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.6rem;
  border-radius: 8px;
  transition: background 0.15s ease;
  gap: 0.75rem;
  animation: fadeIn 0.2s ease-out both;
}

.user-credential-row:hover {
  background: #f8f9fb;
}

.user-credential-row:nth-child(1) {
  animation-delay: 0.02s;
}
.user-credential-row:nth-child(2) {
  animation-delay: 0.04s;
}
.user-credential-row:nth-child(3) {
  animation-delay: 0.06s;
}
.user-credential-row:nth-child(4) {
  animation-delay: 0.08s;
}
.user-credential-row:nth-child(5) {
  animation-delay: 0.1s;
}
.user-credential-row:nth-child(6) {
  animation-delay: 0.12s;
}
.user-credential-row:nth-child(7) {
  animation-delay: 0.14s;
}
.user-credential-row:nth-child(8) {
  animation-delay: 0.16s;
}
.user-credential-row:nth-child(9) {
  animation-delay: 0.18s;
}
.user-credential-row:nth-child(10) {
  animation-delay: 0.2s;
}

.user-credential-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.user-credential-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.user-credential-name {
  font-family: var(--th-font);
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.01em;
}

.user-credential-issuer {
  font-family: var(--th-font);
  font-size: 0.78rem;
  font-weight: 500;
  color: #6b7280;
}

.user-credential-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.user-credential-date {
  font-family: var(--th-font);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tone-neutral-fg);
  white-space: nowrap;
  padding: 0.15rem 0.5rem;
  background: var(--tone-neutral-bg);
  border-radius: 4px;
  letter-spacing: -0.01em;
}

.user-credential-status {
  font-family: var(--th-font);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  border: 1px solid transparent;
}

.user-credential-status-active {
  background: var(--cred-active-bg);
  color: var(--cred-active-text);
  border-color: var(--cred-active-border);
}
.user-credential-status-expired {
  background: var(--cred-expired-bg);
  color: var(--cred-expired-text);
  border-color: var(--cred-expired-border);
}
.user-credential-status-no-expiry {
  background: var(--cred-no-expiry-bg);
  color: var(--cred-no-expiry-text);
  border-color: var(--cred-no-expiry-border);
}

.user-credential-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: #6b7280;
  transition:
    color 0.15s ease,
    background 0.15s ease;
  flex-shrink: 0;
}

.user-credential-link:hover {
  color: #3b82f6;
  background: #eff6ff;
}
.user-credential-link svg {
  width: 14px;
  height: 14px;
}

.user-credentials-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1rem;
  color: var(--th-text-muted);
}

.user-credentials-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #f1f3f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.user-credentials-empty-icon svg {
  width: 22px;
  height: 22px;
  stroke: #adb5bd;
}

.user-credentials-empty p {
  font-family: var(--th-font);
  font-size: 0.85rem;
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .user-credential-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.5rem 0.4rem;
    gap: 0.4rem;
  }
  .user-credential-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  .user-credential-name {
    font-size: 0.84rem;
  }
  .user-credential-issuer {
    font-size: 0.74rem;
  }
  .user-credential-date {
    font-size: 0.68rem;
  }
  .user-credential-status {
    font-size: 0.64rem;
  }
  .user-credential-link {
    align-self: flex-end;
  }
}

/* ==========================================================================
   Work Experience Timeline (merged from work_experience.css)
   ========================================================================== */

:root {
  --we-border-color: #e2e5ea;
  --we-marker-color: #3b82f6;
  --we-marker-active: #2563eb;
}

.work-experience-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--we-border-color);
}

.work-experience-entry {
  position: relative;
  padding: 0.75rem 0 1.25rem 1rem;
  animation: fadeIn 0.2s ease-out both;
}

.work-experience-entry:last-child {
  padding-bottom: 0.25rem;
}

.work-experience-entry:nth-child(1) {
  animation-delay: 0.02s;
}
.work-experience-entry:nth-child(2) {
  animation-delay: 0.04s;
}
.work-experience-entry:nth-child(3) {
  animation-delay: 0.06s;
}
.work-experience-entry:nth-child(4) {
  animation-delay: 0.08s;
}
.work-experience-entry:nth-child(5) {
  animation-delay: 0.1s;
}
.work-experience-entry:nth-child(6) {
  animation-delay: 0.12s;
}
.work-experience-entry:nth-child(7) {
  animation-delay: 0.14s;
}
.work-experience-entry:nth-child(8) {
  animation-delay: 0.16s;
}
.work-experience-entry:nth-child(9) {
  animation-delay: 0.18s;
}
.work-experience-entry:nth-child(10) {
  animation-delay: 0.2s;
}

.work-experience-marker {
  position: absolute;
  left: -1.25rem;
  top: 1rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--we-marker-color);
  transform: translateX(-50%);
  z-index: 1;
}

.work-experience-entry:first-child .work-experience-marker {
  background: var(--we-marker-active);
  border-color: var(--we-marker-active);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.work-experience-content {
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.work-experience-content:hover {
  background: #f8f9fb;
}

.work-experience-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.15rem;
}

.work-experience-company {
  font-family: var(--th-font);
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.01em;
}

.work-experience-dates {
  font-family: var(--th-font);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tone-neutral-fg);
  white-space: nowrap;
  padding: 0.15rem 0.5rem;
  background: var(--tone-neutral-bg);
  border-radius: 4px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.work-experience-title {
  font-family: var(--th-font);
  font-size: 0.84rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.3rem;
}

.work-experience-location {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--th-font);
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.35rem;
}

.work-experience-location svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.work-experience-description {
  font-family: var(--th-font);
  font-size: 0.8rem;
  line-height: 1.55;
  color: #6b7280;
  margin-top: 0.25rem;
}

.work-experience-description span {
  display: block;
}
.work-experience-description span + span {
  margin-top: 0.3rem;
}

.work-experience-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1rem;
  color: var(--th-text-muted);
}

.work-experience-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #f1f3f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.work-experience-empty-icon svg {
  width: 22px;
  height: 22px;
  stroke: #adb5bd;
}

.work-experience-empty p {
  font-family: var(--th-font);
  font-size: 0.85rem;
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .work-experience-timeline {
    padding-left: 1rem;
  }
  .work-experience-entry {
    padding-left: 0.75rem;
  }
  .work-experience-marker {
    left: -1rem;
    width: 8px;
    height: 8px;
  }
  .work-experience-company {
    font-size: 0.84rem;
  }
  .work-experience-dates {
    font-size: 0.68rem;
  }
  .work-experience-header {
    flex-direction: column;
    gap: 0.25rem;
  }
  .work-experience-content {
    padding: 0.4rem 0.5rem;
  }
}

/* ==========================================================================
   Education Timeline (merged from education.css)
   ========================================================================== */

:root {
  --edu-border-color: #e2e5ea;
  --edu-marker-color: #8b5cf6;
  --edu-marker-active: #7c3aed;
}

.education-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--edu-border-color);
}

.education-entry {
  position: relative;
  padding: 0.75rem 0 1.25rem 1rem;
  animation: fadeIn 0.2s ease-out both;
}

.education-entry:last-child {
  padding-bottom: 0.25rem;
}

.education-entry:nth-child(1) {
  animation-delay: 0.02s;
}
.education-entry:nth-child(2) {
  animation-delay: 0.04s;
}
.education-entry:nth-child(3) {
  animation-delay: 0.06s;
}
.education-entry:nth-child(4) {
  animation-delay: 0.08s;
}
.education-entry:nth-child(5) {
  animation-delay: 0.1s;
}

.education-marker {
  position: absolute;
  left: -1.25rem;
  top: 1rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--edu-marker-color);
  transform: translateX(-50%);
  z-index: 1;
}

.education-entry:first-child .education-marker {
  background: var(--edu-marker-active);
  border-color: var(--edu-marker-active);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.education-content {
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.education-content:hover {
  background: #f8f9fb;
}

.education-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.15rem;
}

.education-degree {
  font-family: var(--th-font);
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.01em;
}

.education-year {
  font-family: var(--th-font);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tone-neutral-fg);
  white-space: nowrap;
  padding: 0.15rem 0.5rem;
  background: var(--tone-neutral-bg);
  border-radius: 4px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.education-institution {
  font-family: var(--th-font);
  font-size: 0.84rem;
  font-weight: 500;
  color: #374151;
}

.education-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1rem;
  color: var(--th-text-muted);
}

.education-empty-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #f1f3f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.education-empty-icon svg {
  width: 22px;
  height: 22px;
  stroke: #adb5bd;
}

.education-empty p {
  font-family: var(--th-font);
  font-size: 0.85rem;
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .education-list {
    padding-left: 1rem;
  }
  .education-entry {
    padding-left: 0.75rem;
  }
  .education-marker {
    left: -1rem;
    width: 8px;
    height: 8px;
  }
  .education-degree {
    font-size: 0.84rem;
  }
  .education-year {
    font-size: 0.68rem;
  }
  .education-header {
    flex-direction: column;
    gap: 0.25rem;
  }
  .education-content {
    padding: 0.4rem 0.5rem;
  }
}

/* Touch screens have no hover, so keep row actions visible there.
   (Keyboard users get them through :focus-within above.) */
@media (hover: none) {
  .co-answer-row .co-answer-row-actions {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Full-bleed panels (.dash, .co-dashboard)
   They used to break out of main.container with 100vw negative margins, which
   overshoot by the scroll pane's scrollbar width and scroll sideways. Let
   main span the pane instead.
   -------------------------------------------------------------------------- */

main.container:has(.dash, .co-dashboard) {
  max-width: none;
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   Rich text toolbar on narrow screens
   Trix keeps its button groups on one non-wrapping row, which clips the
   undo/redo group on phones. Let the groups wrap.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  trix-toolbar .trix-button-row {
    flex-wrap: wrap;
    column-gap: 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   Form errors
   A failed submit re-renders the form with an error summary that takes focus
   (focus_on_connect) so screen readers read it out; it isn't interactive.
   field_error_proc marks each rejected control with aria-invalid.
   -------------------------------------------------------------------------- */

[role="alert"][data-controller~="focus-on-connect"]:focus {
  outline: none;
}

:is(input, select, textarea)[aria-invalid="true"]:not([type="checkbox"], [type="radio"]) {
  border-color: #dc3545;
}

/* --------------------------------------------------------------------------
   View as: the strip under the navbar while an admin views the site as
   someone. Amber so it never reads as part of the user's own page.
   -------------------------------------------------------------------------- */

.view-as-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 1.25rem;
  background: #fbbf24;
  color: #422006;
  border-bottom: 1px solid #d97706;
  flex-shrink: 0;
}

.view-as-banner-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.view-as-banner-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.85rem;
}

.view-as-banner-role {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  background: rgba(66, 32, 6, 0.12);
}

.view-as-banner-exit {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  border: 0;
  background: #422006;
  color: #fff;
  cursor: pointer;
}

.view-as-banner-exit:hover {
  background: #713f12;
}

.view-as-banner-exit:focus-visible {
  outline: 2px solid #422006;
  outline-offset: 2px;
}

/* On a phone the name and the exit button say enough. */
@media (max-width: 640px) {
  .view-as-banner {
    padding: 0.5rem 1rem;
  }

  .view-as-banner-detail {
    display: none;
  }
}

/* The panels are sized to the viewport on desktop (.dash height), so the
   banner keeps one known height there and the panels subtract it. */
@media (min-width: 992px) {
  body:has(.view-as-banner) {
    --view-as-banner-h: 44px;
  }

  .view-as-banner {
    height: var(--view-as-banner-h);
    padding-top: 0;
    padding-bottom: 0;
  }

  .view-as-banner-text {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
  }

  .view-as-banner-detail {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* --------------------------------------------------------------------------
   Offer history: each step of an offer's negotiation, oldest first, on both
   offer pages (company/hires#show and dashboard/hires#show). One pattern for
   both sides, like the hired emerald, so the record reads the same to each.
   -------------------------------------------------------------------------- */

.offer-history {
  list-style: none;
  margin: 0;
  padding: 0;
}

.offer-history-entry {
  --offer-history-tone: #3b82f6;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 1rem;
  padding: 0 0 1.15rem 1.6rem;
}

.offer-history-entry:last-child {
  padding-bottom: 0;
}

/* The rail from each marker down to the next one. */
.offer-history-entry::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: 0;
  width: 2px;
  background: var(--th-border-light, #e5e7eb);
}

.offer-history-entry:last-child::before {
  display: none;
}

.offer-history-marker {
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--th-bg-card, #fff);
  border: 2.5px solid var(--offer-history-tone);
}

.offer-history-entry-counter {
  --offer-history-tone: #d97706;
}

/* Hired emerald, shared with the kanban column and funnel segment. */
.offer-history-entry-hired {
  --offer-history-tone: #059669;
}

.offer-history-entry-hired .offer-history-marker {
  background: #059669;
}

.offer-history-entry-neutral,
.offer-history-entry-closed {
  --offer-history-tone: #9ca3af;
}

.offer-history-main {
  min-width: 0;
}

.offer-history-title {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--jobs-text-primary);
}

.offer-history-lines {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--jobs-text-secondary, #4b5563);
  overflow-wrap: anywhere;
}

.offer-history-note {
  margin: 0.45rem 0 0;
  padding: 0.45rem 0.75rem;
  border-left: 3px solid #fcd34d;
  border-radius: 0 6px 6px 0;
  background: #fffbeb;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #374151;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.offer-history-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--jobs-text-muted);
  text-align: right;
}

.offer-history-actor {
  font-weight: 600;
  color: var(--jobs-text-secondary, #4b5563);
}

@media (max-width: 640px) {
  .offer-history-entry {
    grid-template-columns: minmax(0, 1fr);
  }

  .offer-history-meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 0.6rem;
    align-items: baseline;
    text-align: left;
  }
}