/* ================================================================
   ANI WorkforceOS — Design System v4
   Enterprise HR & Recruitment Platform
   ================================================================ */

/* ── Font Import ─────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@300;400;500;600;700;800&display=swap");
/* ── Spotify Mix — Local Webfont (all weights) ───────────────── */
:root {
  --font:
    "Instrument Sans", "Inter",
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size: 15px;

  /* Brand — ANI TalentOS indigo */
  --brand: #6366f1;
  --brand-hover: #4f46e5;
  --brand-light: #eef2ff;
  --brand-ring: #a5b4fc;

  /* Semantic colors */
  --green: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;
  --blue: #3b82f6;
  --purple: #8b5cf6;

  /* Gray scale */
  --g-50: #f9fafb;
  --g-100: #f3f4f6;
  --g-200: #e5e7eb;
  --g-300: #d1d5db;
  --g-400: #9ca3af;
  --g-500: #6b7280;
  --g-600: #4b5563;
  --g-700: #374151;
  --g-800: #1f2937;
  --g-900: #111827;

  /* Surfaces */
  --surface: #ffffff;
  --surface-1: #f9fafb;
  --surface-2: #f3f4f6;

  /* Text */
  --text-hi: #111827;
  --text-mid: #4b5563;
  --text-lo: #9ca3af;

  /* Border */
  --border: #e5e7eb;
  --border-hi: #d1d5db;

  /* Shadow */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  /* Radii */
  --r-sm: 0.375rem;
  --r: 0.5rem;
  --r-lg: 0.75rem;
  --r-xl: 0.5rem;

  /* Layout */
  --sidebar-w: 240px;
  --sidebar-col: 64px;
  --navbar-h: 60px;
}

@font-face {
  font-family: "Spotify Mix";
  src:
    url("/assets/custom-font-family/SpotifyMix-Thin-16ba580b.woff2") format("woff2"),
    url("/assets/custom-font-family/SpotifyMix-Thin-80c20595.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spotify Mix";
  src:
    url("/assets/custom-font-family/SpotifyMix-ThinItalic-ca1d4bf6.woff2") format("woff2"),
    url("/assets/custom-font-family/SpotifyMix-ThinItalic-3c15b6c2.woff") format("woff");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Spotify Mix";
  src:
    url("/assets/custom-font-family/SpotifyMix-Light-85fa2dcb.woff2") format("woff2"),
    url("/assets/custom-font-family/SpotifyMix-Light-2ba58f7e.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spotify Mix";
  src:
    url("/assets/custom-font-family/SpotifyMix-LightItalic-cb3c9eca.woff2") format("woff2"),
    url("/assets/custom-font-family/SpotifyMix-LightItalic-34c66554.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Spotify Mix";
  src:
    url("/assets/custom-font-family/SpotifyMix-Regular-20d765d7.woff2") format("woff2"),
    url("/assets/custom-font-family/SpotifyMix-Regular-50fb8e32.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spotify Mix";
  src:
    url("/assets/custom-font-family/SpotifyMix-RegularItalic-cca00344.woff2") format("woff2"),
    url("/assets/custom-font-family/SpotifyMix-RegularItalic-14fec77e.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Spotify Mix";
  src:
    url("/assets/custom-font-family/SpotifyMix-Medium-8ecb2686.woff2") format("woff2"),
    url("/assets/custom-font-family/SpotifyMix-Medium-f0f29293.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spotify Mix";
  src:
    url("/assets/custom-font-family/SpotifyMix-MediumItalic-4f6d9989.woff2") format("woff2"),
    url("/assets/custom-font-family/SpotifyMix-MediumItalic-b07151a6.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Spotify Mix";
  src:
    url("/assets/custom-font-family/SpotifyMix-Bold-0474135a.woff2") format("woff2"),
    url("/assets/custom-font-family/SpotifyMix-Bold-dfd416a3.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spotify Mix";
  src:
    url("/assets/custom-font-family/SpotifyMix-BoldItalic-ca43018c.woff2") format("woff2"),
    url("/assets/custom-font-family/SpotifyMix-BoldItalic-a73b7621.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Spotify Mix";
  src:
    url("/assets/custom-font-family/SpotifyMix-Extrabold-ddc3397c.woff2") format("woff2"),
    url("/assets/custom-font-family/SpotifyMix-Extrabold-d741960e.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spotify Mix";
  src:
    url("/assets/custom-font-family/SpotifyMix-ExtraboldItalic-1dd450bd.woff2") format("woff2"),
    url("/assets/custom-font-family/SpotifyMix-ExtraboldItalic-0108e524.woff") format("woff");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Spotify Mix";
  src:
    url("/assets/custom-font-family/SpotifyMix-Black-7db59cbf.woff2") format("woff2"),
    url("/assets/custom-font-family/SpotifyMix-Black-b2e7d12b.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spotify Mix";
  src:
    url("/assets/custom-font-family/SpotifyMix-BlackItalic-966e06aa.woff2") format("woff2"),
    url("/assets/custom-font-family/SpotifyMix-BlackItalic-6906a9fe.woff") format("woff");
  /* font-weight: 900; */
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Spotify Mix Ultra";
  src:
    url("/assets/custom-font-family/SpotifyMix-Ultra-8eb091ff.woff2") format("woff2"),
    url("/assets/custom-font-family/SpotifyMix-Ultra-9db1008f.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spotify Mix Ultra";
  src:
    url("/assets/custom-font-family/SpotifyMix-UltraItalic-b34afdd4.woff2") format("woff2"),
    url("/assets/custom-font-family/SpotifyMix-UltraItalic-b6b6a83e.woff") format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}



/* ── Dark mode ──────────────────────────────────────────────── */
[data-theme="dark"] {
  --brand-light: rgba(99, 102, 241, 0.15);

  --surface: #111113;
  --surface-1: #18181b;
  --surface-2: #1f1f23;

  --text-hi: #f4f4f5;
  --text-mid: #a1a1aa;
  --text-lo: #52525b;

  --border: #27272a;
  --border-hi: #3f3f46;

  --g-50: #18181b;
  --g-100: #27272a;
  --g-700: #d4d4d8;
  --g-800: #e4e4e7;
  --g-900: #fafafa;
}

/* ── Reset / Base ───────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size);
}

body {
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-hi);
  background: var(--surface-1);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font-weight: 600;
  /* letter-spacing: 0.5px; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Shell ──────────────────────────────────────────────────── */
.admin-shell {
  display: flex;
  min-height: 100vh;
}

/* ================================================================
   SIDEBAR
   ================================================================ */
.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition:
    width 0.2s ease,
    transform 0.2s ease;
  overflow: hidden;
}

/* Collapsed */
.admin-shell.sidebar-collapsed .admin-sidebar {
  width: var(--sidebar-col);
}

.dtf-trix-wrap trix-editor {
  font-family: var(--font) !important;
}

/* ── Sidebar brand ─── */
.sb-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  min-height: var(--navbar-h);
  flex-shrink: 0;
}

.sb-logo {
  width: 34px;
  height: 34px;
  background: var(--brand);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
}

a {
  text-decoration: none !important;
}

.sb-name {
  overflow: hidden;
  transition:
    opacity 0.15s,
    width 0.2s;
}
.sb-name .name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text-hi);
  white-space: nowrap;
}
.sb-name .role {
  font-size: 0.75rem;
  color: var(--text-lo);
  white-space: nowrap;
}

.admin-shell.sidebar-collapsed .sb-name {
  opacity: 0;
  width: 0;
}

/* ── Sidebar nav ─── */
.sb-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.75rem 0.75rem;
  scrollbar-width: none;
  /* background-image:
    linear-gradient(rgba(99,102,241,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.045) 1px, transparent 1px); */
  background-size: 32px 32px;
}
.sb-nav::-webkit-scrollbar {
  display: none;
}

.sb-section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-lo);
  padding: 0.5rem 0.5rem 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.15s;
}
.admin-shell.sidebar-collapsed .sb-section-label {
  opacity: 0;
}

.sb-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--r-sm);
  color: var(--text-mid);
  text-decoration: none;
  font-weight: 500;
  transition:
    background 0.12s,
    color 0.12s;
  white-space: nowrap;
  margin-bottom: 2px;
}
.sb-link:hover {
  background: var(--surface-2);
  color: var(--text-hi);
}
.sb-link.active {
  background: var(--brand-light);
  color: var(--brand);
}
.sb-link.active .sb-icon {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
  filter: saturate(1.05);
}

.sb-icon {
  /* icon chip */
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 1rem;
  background: var(--sb-ico-bg, rgba(148, 163, 184, 0.16));
  color: var(--sb-ico-fg, #475569);
}

.sb-text {
  overflow: hidden;
  transition:
    opacity 0.15s,
    width 0.2s;
  font-weight: 600;
}
.admin-shell.sidebar-collapsed .sb-text {
  opacity: 0;
  width: 0;
}

/* Per-item colors (kept professional; background is soft, icon is saturated) */
.sb-icon--dashboard {
  --sb-ico-bg: rgba(37, 99, 235, 0.14);
  --sb-ico-fg: #1d4ed8;
}
.sb-icon--reports {
  --sb-ico-bg: rgba(2, 132, 199, 0.14);
  --sb-ico-fg: #0369a1;
}
.sb-icon--employees {
  --sb-ico-bg: rgba(79, 70, 229, 0.14);
  --sb-ico-fg: #4338ca;
}
.sb-icon--payroll-runs {
  --sb-ico-bg: rgba(13, 148, 136, 0.14);
  --sb-ico-fg: #0f766e;
}
.sb-icon--leave-types {
  --sb-ico-bg: rgba(217, 119, 6, 0.14);
  --sb-ico-fg: #b45309;
}
.sb-icon--clients {
  --sb-ico-bg: rgba(14, 116, 144, 0.14);
  --sb-ico-fg: #0e7490;
}
.sb-icon--projects {
  --sb-ico-bg: rgba(124, 58, 237, 0.14);
  --sb-ico-fg: #6d28d9;
}
.sb-icon--purchase-orders {
  --sb-ico-bg: rgba(100, 116, 139, 0.16);
  --sb-ico-fg: #475569;
}
.sb-icon--assignments {
  --sb-ico-bg: rgba(99, 102, 241, 0.14);
  --sb-ico-fg: #4f46e5;
}
.sb-icon--cv-bank {
  --sb-ico-bg: rgba(236, 72, 153, 0.12);
  --sb-ico-fg: #db2777;
}
.sb-icon--resume-bank {
  --sb-ico-bg: rgba(71, 85, 105, 0.14);
  --sb-ico-fg: #334155;
}
.sb-icon--hr-pipeline {
  --sb-ico-bg: rgba(245, 158, 11, 0.14);
  --sb-ico-fg: #b45309;
}
.sb-icon--offer-letters {
  --sb-ico-bg: rgba(34, 197, 94, 0.12);
  --sb-ico-fg: #15803d;
}
.sb-icon--deployed {
  --sb-ico-bg: rgba(16, 185, 129, 0.12);
  --sb-ico-fg: #059669;
}
.sb-icon--interviews {
  --sb-ico-bg: rgba(168, 85, 247, 0.12);
  --sb-ico-fg: #7c3aed;
}
.sb-icon--interview-results {
  --sb-ico-bg: rgba(59, 130, 246, 0.14);
  --sb-ico-fg: #1d4ed8;
}
.sb-icon--new-interview {
  --sb-ico-bg: rgba(34, 197, 94, 0.12);
  --sb-ico-fg: #15803d;
}
.sb-icon--users {
  --sb-ico-bg: rgba(100, 116, 139, 0.16);
  --sb-ico-fg: #475569;
}
.sb-icon--roles {
  --sb-ico-bg: rgba(124, 58, 237, 0.12);
  --sb-ico-fg: #7c3aed;
}
.sb-icon--settings {
  --sb-ico-bg: rgba(148, 163, 184, 0.16);
  --sb-ico-fg: #475569;
}
.sb-icon--departments {
  --sb-ico-bg: rgba(8, 145, 178, 0.14);
  --sb-ico-fg: #0e7490;
}
.sb-icon--job-postings {
  --sb-ico-bg: rgba(220, 38, 38, 0.12);
  --sb-ico-fg: #dc2626;
}
.sb-icon--applications {
  --sb-ico-bg: rgba(234, 88, 12, 0.14);
  --sb-ico-fg: #ea580c;
}
.sb-icon--ai-interviews {
  --sb-ico-bg: rgba(168, 85, 247, 0.12);
  --sb-ico-fg: #7c3aed;
}
.sb-icon--pipeline {
  --sb-ico-bg: rgba(245, 158, 11, 0.14);
  --sb-ico-fg: #b45309;
}

.sb-badge {
  margin-left: auto;
  font-size: 0.625rem;
  font-weight: 700;
  background: var(--brand);
  color: #fff;
  padding: 0.1em 0.48em;
  border-radius: 9999px;
  transition: opacity 0.15s;
  min-width: 18px;
  text-align: center;
}
.sb-badge--amber {
  background: var(--amber);
}
.sb-badge--green {
  background: var(--green);
}
.sb-badge--red {
  background: var(--red);
}
.admin-shell.sidebar-collapsed .sb-badge {
  opacity: 0;
}

.sb-divider {
  height: 1px;
  background: var(--border);
  margin: 0.625rem 0;
}

/* ── Sidebar collapsible group ─── */
.sb-group-toggle {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.sb-group-toggle .sb-chevron {
  font-size: 0.625rem;
  margin-left: auto;
  transition: transform 0.2s;
}
.sb-group-toggle[aria-expanded="true"] .sb-chevron {
  transform: rotate(-180deg);
}
.sb-sub-group {
  padding-left: 0.5rem;
}
.sb-link.sb-sub {
  padding-left: 1.25rem;
  font-size: 0.8125rem;
}
.sb-link.sb-sub .sb-icon {
  font-size: 0.875rem;
}

/* Badge in collapsed state */
.admin-shell.sidebar-collapsed .sb-badge {
  display: none;
}
.admin-shell.sidebar-collapsed .sb-chevron {
  display: none;
}
.admin-shell.sidebar-collapsed .sb-sub-group {
  display: none !important;
}

/* ── Sidebar footer ─── */
.sb-footer {
  padding: 0.75rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
}

.sb-footer-inner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.375rem;
  border-radius: var(--r-sm);
}

.sb-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sb-user-info {
  overflow: hidden;
  transition:
    opacity 0.15s,
    width 0.2s;
}
.sb-user-info .sb-user-email {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.sb-user-info .sb-user-role {
  font-size: 0.6875rem;
  color: var(--text-lo);
}
.admin-shell.sidebar-collapsed .sb-user-info {
  opacity: 0;
  width: 0;
}

/* ================================================================
   MAIN
   ================================================================ */
.admin-main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left 0.2s ease;
}
.admin-shell.sidebar-collapsed .admin-main {
  margin-left: var(--sidebar-col);
}

/* Sidebar removed entirely for a page (content_for :hide_sidebar, true) —
   main content takes the full viewport width instead of just collapsing. */
.admin-shell--no-sidebar .admin-main {
  margin-left: 0;
}

/* ================================================================
   NAVBAR
   ================================================================ */
.admin-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--navbar-h);
  background: var(--surface);
  border-bottom: 1px solid rgba(99, 102, 241, 0.12);
  box-shadow:
    0 1px 0 rgba(99, 102, 241, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
}
/* Brand accent line at bottom of navbar */
.admin-navbar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    #312e81,
    #6366f1 40%,
    #a5b4fc 70%,
    transparent
  );
  opacity: 0.6;
}

.nb-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mid);
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
  flex-shrink: 0;
}
.nb-toggle:hover {
  background: var(--surface-2);
  color: var(--text-hi);
}

.nb-search {
  position: relative;
  flex: 1;
  max-width: 320px;
}
.nb-search i {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-lo);
  font-size: 0.8125rem;
  pointer-events: none;
}
.nb-search input {
  width: 100%;
  height: 34px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0 0.75rem 0 2.125rem;
  font-size: 0.8125rem;
  color: var(--text-hi);
  font-family: var(--font);
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.nb-search input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.nb-search input::placeholder {
  color: var(--text-lo);
}

/* ── Navbar breadcrumb ─── */
.nb-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
}
.nb-bc-section {
  color: var(--text-lo);
  font-weight: 500;
}
.nb-bc-sep {
  font-size: 0.5rem;
  color: var(--text-lo);
}
.nb-bc-page {
  color: var(--text-hi);
  font-weight: 600;
}
@media (max-width: 640px) {
  .nb-breadcrumb {
    display: none;
  }
}

.nb-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-soft, #f8fafc);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  margin-left: 1rem;
  width: 100%;
  max-width: 340px;
  transition: border-color .12s, box-shadow .12s;
}
.nb-search:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .1);
  background: #fff;
}
.nb-search i {
  color: var(--text-lo, #94a3b8);
  font-size: 0.78rem;
  flex-shrink: 0;
}
.nb-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 0.8rem;
  color: var(--text-hi, #0f172a);
}
.nb-search input::placeholder { color: var(--text-lo, #94a3b8); }
@media (max-width: 900px) {
  .nb-search { display: none; }
}

.nb-spacer {
  flex: 1;
}

.nb-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nb-btn {
  background: none;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-mid);
  cursor: pointer;
  position: relative;
  transition:
    background 0.12s,
    color 0.12s;
}
.nb-btn:hover {
  background: var(--surface-2);
  color: var(--text-hi);
}

.nb-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  background: var(--red);
  border-radius: 50%;
  border: 1.5px solid var(--surface);
}

/* ── Notification Bell – count badge ── */
.nb-bell-btn {
  position: relative;
}
.nb-bell-icon {
  font-size: 1rem;
  color: var(--text-mid);
  transition: color 0.12s;
}
.nb-bell-btn:hover .nb-bell-icon {
  color: var(--brand);
}
.nb-count-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #ef4444;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  border-radius: 999px;
  border: 1.5px solid var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
}

/* ── Notification Panel ── */
.nb-panel {
  width: 360px !important;
  max-width: calc(100vw - 24px);
  padding: 0 !important;
  border-radius: 14px !important;
  overflow: hidden;
  border: 1px solid var(--border) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14) !important;
}

/* Panel header */
.nb-panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.nb-panel-hd-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nb-panel-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.nb-panel-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-hi);
  line-height: 1.2;
}
.nb-panel-sub {
  font-size: 0.68rem;
  color: var(--text-lo);
  margin-top: 1px;
}
.nb-panel-counts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.nb-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.635rem;
  font-weight: 700;
  line-height: 1.4;
}
.nb-count-total {
  background: #ede9fe;
  color: #4f46e5;
}
.nb-count-overdue {
  background: #fee2e2;
  color: #dc2626;
}

/* Task list */
.nb-list {
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nb-list::-webkit-scrollbar {
  width: 4px;
}
.nb-list::-webkit-scrollbar-track {
  background: transparent;
}
.nb-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.nb-task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background 0.1s;
  overflow: hidden;
}
.nb-task-item:last-child {
  border-bottom: none;
}
.nb-task-item:hover {
  background: var(--surface-2);
  text-decoration: none;
  color: inherit;
}

/* Red left bar for overdue items */
.nb-overdue-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #ef4444;
  border-radius: 0 2px 2px 0;
}
.nb-task-overdue {
  background: rgba(239, 68, 68, 0.035);
}
.nb-task-overdue:hover {
  background: rgba(239, 68, 68, 0.07);
}

.nb-task-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.nb-task-body {
  flex: 1;
  min-width: 0;
}
.nb-task-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.nb-task-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.nb-type-chip {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  line-height: 1.6;
  opacity: 0.85;
}
.nb-due {
  font-size: 0.63rem;
  color: var(--text-lo);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.nb-due-overdue {
  color: #dc2626;
  font-weight: 600;
}
.nb-task-arrow {
  font-size: 0.6rem;
  color: var(--text-lo);
  flex-shrink: 0;
  transition:
    transform 0.1s,
    color 0.1s;
}
.nb-task-item:hover .nb-task-arrow {
  transform: translateX(2px);
  color: var(--brand);
}

/* Empty state */
.nb-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-lo);
}
.nb-empty-icon {
  font-size: 1.8rem;
  color: #10b981;
  margin-bottom: 8px;
}
.nb-empty-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-hi);
  margin-bottom: 4px;
}
.nb-empty-sub {
  font-size: 0.72rem;
  color: var(--text-lo);
}

/* Panel footer */
.nb-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--brand);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  text-decoration: none;
  transition:
    background 0.1s,
    color 0.1s;
}
.nb-footer:hover {
  background: var(--surface-3, var(--surface-2));
  color: var(--brand);
  text-decoration: none;
}
.nb-footer i {
  transition: transform 0.15s;
}
.nb-footer:hover i {
  transform: translateX(3px);
}

/* Dark mode adjustments */
[data-theme="dark"] .nb-count-total {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}
[data-theme="dark"] .nb-count-overdue {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}
[data-theme="dark"] .nb-task-overdue {
  background: rgba(239, 68, 68, 0.06);
}
[data-theme="dark"] .nb-task-overdue:hover {
  background: rgba(239, 68, 68, 0.1);
}
[data-theme="dark"] .nb-empty-icon {
  color: #34d399;
}

.nb-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 0.375rem;
}

.nb-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.12s;
  text-decoration: none;
  color: inherit;
}
.nb-user:hover {
  background: var(--surface-2);
}

.nb-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nb-user-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-hi);
  line-height: 1.2;
}
.nb-user-role {
  font-size: 0.6875rem;
  color: var(--text-lo);
}

/* Dropdown overrides */
.dropdown-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 0.375rem;
  font-size: 0.8125rem;
}
.dropdown-item {
  border-radius: var(--r-sm);
  padding: 0.5rem 0.75rem;
  color: var(--text-hi);
  transition: background 0.1s;
}
.dropdown-item:hover {
  background: var(--surface-2);
  color: var(--text-hi);
}
.dropdown-divider {
  border-color: var(--border);
  margin: 0.25rem 0;
}
.dropdown-header {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-lo);
  padding: 0.375rem 0.75rem;
}

/* Notification items */
.notif-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--r-sm);
  transition: background 0.1s;
  cursor: pointer;
}
.notif-item:hover {
  background: var(--surface-2);
}
.notif-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.875rem;
}
.notif-icon.yellow {
  background: #fef3c7;
  color: var(--amber);
}
.notif-icon.green {
  background: #d1fae5;
  color: var(--green);
}
.notif-icon.blue {
  background: #dbeafe;
  color: var(--blue);
}
[data-theme="dark"] .notif-icon.yellow {
  background: rgba(245, 158, 11, 0.15);
}
[data-theme="dark"] .notif-icon.green {
  background: rgba(16, 185, 129, 0.15);
}
[data-theme="dark"] .notif-icon.blue {
  background: rgba(59, 130, 246, 0.15);
}

/* ================================================================
   CONTENT
   ================================================================ */
.admin-content {
  flex: 1;
  min-width: 0;
  padding: 2rem 1rem;
  background: var(--surface-1);
}

/* ── Page header ─── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
  padding: 20px;
  border-radius: 7px;
}

.page-header-left {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.page-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-lg);
  background: var(--brand-light);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.page-title {
  font-size: 2rem;
  font-weight: 900;
  color: var(--text-hi);
  line-height: 1.2;
  margin: 0;
}
.page-sub {
  color: var(--text-mid);
  margin-top: 0.125rem;
}

.page-header-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ── Cards ─── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  /* border-radius: var(--r-lg); */
  box-shadow: var(--shadow-xs);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-hi);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card-title i {
  color: var(--text-lo);
}

.card-body {
  padding: 1.25rem;
}

/* ── Stat cards (old grid — Bootstrap row now used instead) ─── */
.stats-grid {
  /* intentionally empty — layout handled by Bootstrap row/col */
}

/* New .stat-card styles live in the DASHBOARD section below */
/* This rule kept for backward compat with non-dashboard pages */
.stat-card-legacy {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.15s;
}
.stat-card:hover {
  box-shadow: var(--shadow-sm);
}

.stat-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.875rem;
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-lo);
}

.stat-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--brand-light);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
}
.stat-icon.green {
  background: #d1fae5;
  color: var(--green);
}
.stat-icon.amber {
  background: #fef3c7;
  color: var(--amber);
}
.stat-icon.blue {
  background: #dbeafe;
  color: var(--blue);
}
.stat-icon.purple {
  background: #ede9fe;
  color: var(--purple);
}
[data-theme="dark"] .stat-icon {
  background: rgba(99, 102, 241, 0.15);
}
[data-theme="dark"] .stat-icon.green {
  background: rgba(16, 185, 129, 0.15);
}
[data-theme="dark"] .stat-icon.amber {
  background: rgba(245, 158, 11, 0.15);
}
[data-theme="dark"] .stat-icon.blue {
  background: rgba(59, 130, 246, 0.15);
}
[data-theme="dark"] .stat-icon.purple {
  background: rgba(139, 92, 246, 0.15);
}

.stat-number {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--text-hi);
  line-height: 1;
  margin-bottom: 0.375rem;
}

.stat-trend {
  font-size: 0.75rem;
  color: var(--green);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.stat-bar {
  height: 3px;
  background: var(--surface-2);
  border-radius: 9999px;
  margin-top: 0.75rem;
  overflow: hidden;
}
.stat-bar-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 9999px;
  transition: width 0.4s ease;
}
.stat-bar-fill.green {
  background: var(--green);
}
.stat-bar-fill.amber {
  background: var(--amber);
}
.stat-bar-fill.blue {
  background: var(--blue);
}
.stat-bar-fill.purple {
  background: var(--purple);
}

/* ── Bottom grid ─── */
.bottom-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .bottom-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Upload card ─── */
.upload-card {
  margin-bottom: 1.5rem;
}

.upload-zone {
  border: 2px dashed var(--border-hi);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  background: var(--surface);
  transition:
    border-color 0.15s,
    background 0.15s;
}
.upload-zone:hover {
  border-color: var(--brand-ring);
  background: var(--brand-light);
}

/* ── Tables ─── */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  /* font-size: .8125rem; */
}
.admin-table thead tr {
  border-bottom: 1px solid var(--border);
}
.admin-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-lo);
  white-space: nowrap;
}
.admin-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-hi);
}
.admin-table tbody tr:last-child td {
  border-bottom: none;
}
.admin-table tbody tr {
  transition: background 0.1s;
}
.admin-table tbody tr:hover {
  background: var(--surface-1);
}

/* ── Badges ─── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.2em 0.6em;
  border-radius: 9999px;
  line-height: 1.4;
}
.badge-purple {
  background: #ede9fe;
  color: #7c3aed;
}
.badge-green {
  background: #d1fae5;
  color: #065f46;
}
.badge-amber {
  background: #fef3c7;
  color: #92400e;
}
.badge-blue {
  background: #dbeafe;
  color: #1e40af;
}
.badge-gray {
  background: var(--surface-2);
  color: var(--text-mid);
}
.badge-red {
  background: #fee2e2;
  color: #991b1b;
}
[data-theme="dark"] .badge-purple {
  background: rgba(139, 92, 246, 0.15);
  color: #c4b5fd;
}
[data-theme="dark"] .badge-green {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}
[data-theme="dark"] .badge-amber {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}
[data-theme="dark"] .badge-blue {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}
[data-theme="dark"] .badge-gray {
  background: var(--surface-2);
  color: var(--text-mid);
}
[data-theme="dark"] .badge-red {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

/* ── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.12s,
    border-color 0.12s,
    box-shadow 0.12s,
    color 0.12s;
  white-space: nowrap;
  line-height: 1.4;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.btn-primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: #fff;
}

.btn-secondary {
  background: var(--surface);
  color: var(--text-hi);
  border-color: var(--border-hi);
}
.btn-secondary:hover {
  background: var(--surface-2);
  border-color: var(--border-hi);
  color: var(--text-hi);
}

.btn-ghost {
  background: transparent;
  color: var(--text-mid);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--surface-2);
  color: var(--text-hi);
}

.btn-danger {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn-danger:hover {
  background: #dc2626;
  color: #fff;
}

.btn-sm {
  font-size: 0.75rem;
  padding: 0.3125rem 0.625rem;
}
.btn-lg {
  font-size: 0.9375rem;
  padding: 0.5625rem 1.25rem;
}

.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
}

/* ── Form controls ─── */
.form-label {
  /* font-size: .8125rem; */
  font-weight: 500;
  color: var(--text-hi);
  margin-bottom: 0.375rem;
  display: block;
}
.form-control {
  width: 100%;
  height: 36px;
  padding: 0 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-sm);
  font-family: var(--font);
  /* font-size: .8125rem; */
  color: var(--text-hi);
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.form-control:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.form-control::placeholder {
  color: var(--text-lo);
}
.form-text {
  font-size: 0.75rem;
  color: var(--text-lo);
  margin-top: 0.25rem;
}
.form-control[type="file"] {
  height: auto;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
}

/* ── Alert ─── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--r-lg);
  font-size: 0.8125rem;
  margin-bottom: 1rem;
  border: 1px solid;
}
.alert-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}
.alert-success {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.alert-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.alert-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
[data-theme="dark"] .alert-info {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}
[data-theme="dark"] .alert-success {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}
[data-theme="dark"] .alert-warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}
[data-theme="dark"] .alert-danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

/* ── CV items ─── */
.cv-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.cv-item:last-child {
  border-bottom: none;
}

.cv-file-icon {
  width: 36px;
  height: 36px;
  background: #fee2e2;
  color: var(--red);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
[data-theme="dark"] .cv-file-icon {
  background: rgba(239, 68, 68, 0.15);
}

.cv-name {
  /* font-size: .8125rem; */
  font-weight: 600;
  color: var(--text-hi);
  text-decoration: none;
}
.cv-name:hover {
  color: var(--brand);
}

.cv-meta {
  font-size: 0.75rem;
  color: var(--text-lo);
  margin-top: 0.125rem;
}

/* ── Footer ─── */
.admin-footer {
  border-top: 1px solid var(--border);
  padding: 0.875rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--text-lo);
  background: var(--surface);
  flex-wrap: wrap;
}

/* ── Empty state ─── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-lo);
}
.empty-state i {
  font-size: 1.5rem;
  opacity: 0.4;
  display: block;
}
.empty-state h6 {
  color: var(--text-mid);
  font-weight: 600;
  margin-bottom: 0.375rem;
}
.empty-state p {
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}

/* ── Link util ─── */
.link-primary {
  color: var(--brand);
  text-decoration: none;
  font-weight: 500;
}
.link-primary:hover {
  color: var(--brand-hover);
  text-decoration: underline;
}

/* ── Mobile overlay ─── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 150;
}
.sidebar-overlay.active {
  display: block;
}

/* ── Responsive ─── */
@media (max-width: 991px) {
  .admin-sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-w) !important;
  }
  .admin-sidebar.mobile-open {
    transform: translateX(0);
  }
  .admin-main {
    margin-left: 0 !important;
  }
  .admin-content {
    padding: 1.25rem;
  }
  .bottom-grid {
    grid-template-columns: 1fr;
  }
  .nb-search {
    max-width: 180px;
  }
}

@media (max-width: 640px) {
  .admin-content {
    padding: 1rem;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
  .page-header {
    gap: 0.75rem;
  }
  .nb-search {
    display: none;
  }
}

/* ── Misc utility ─── */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Markdown */
.markdown-content {
  font-size: 0.875rem;
  line-height: 1.6;
}
.markdown-content h1 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 1rem 0 0.5rem;
}
.markdown-content h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 1rem 0 0.5rem;
}
.markdown-content h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.875rem 0 0.375rem;
}
.markdown-content p {
  margin: 0 0 0.75rem;
}
.markdown-content ul,
.markdown-content ol {
  padding-left: 1.25rem;
  margin: 0.5rem 0;
}
.markdown-content li {
  margin: 0.25rem 0;
}
.markdown-content strong {
  font-weight: 600;
}
.markdown-content code {
  background: var(--surface-2);
  padding: 0.125rem 0.375rem;
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
}
.markdown-content blockquote {
  border-left: 3px solid var(--border-hi);
  padding-left: 1rem;
  margin: 1rem 0;
  color: var(--text-mid);
  font-style: italic;
}

.mono {
  font-family: ui-monospace, "SFMono-Regular", monospace;
}
.text-hi {
  color: var(--text-hi);
}
.text-mid {
  color: var(--text-mid);
}
.text-lo {
  color: var(--text-lo);
}
.fw-500 {
  font-weight: 500;
}
.fw-600 {
  font-weight: 600;
}
.fw-700 {
  font-weight: 700;
}

/* ================================================================
   DASHBOARD — Modern Hero & Tabs (defined in template <style>)
   ================================================================ */
/* Dashboard styles moved to inline <style> in template for easier maintenance */

/* ================================================================
   DASHBOARD — Modern Stat Cards (defined in template <style>)
   ================================================================ */
/* Stat card styles moved to inline <style> in template for easier maintenance */

.stat-badge {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  padding: 0.25em 0.625em;
  border-radius: 9999px;
  opacity: 0.9;
}

.stat-num {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--g-900);
  line-height: 1;
  margin-bottom: 0.25rem;
  letter-spacing: -0.02em;
}

.stat-lbl {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--g-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.875rem;
}

.stat-bar-track {
  height: 4px;
  border-radius: 9999px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.stat-bar-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.5s ease;
}

.stat-foot {
}

.stat-trend-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.stat-arrow {
  font-size: 0.875rem;
}

/* ── Table card accent ─── */
.dash-table-card .card-header {
  border-left-width: 3px;
  border-left-style: solid;
}

/* ================================================================
   INTERVIEW CARDS  (chats/index)
   ================================================================ */
.interview-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow 0.15s,
    transform 0.15s;
  position: relative;
  overflow: hidden;
}
.interview-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, #a5b4fc 100%);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.interview-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.interview-card--blue::before {
  background: linear-gradient(90deg, #3b82f6, #93c5fd);
}
.interview-card--green::before {
  background: linear-gradient(90deg, #10b981, #6ee7b7);
}
.interview-card--amber::before {
  background: linear-gradient(90deg, #f59e0b, #fcd34d);
}
.interview-card--red::before {
  background: linear-gradient(90deg, #ef4444, #fca5a5);
}
.interview-card--purple::before {
  background: linear-gradient(90deg, #8b5cf6, #c4b5fd);
}

.ic-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}
.ic-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-hi);
  text-decoration: none;
  line-height: 1.3;
  display: block;
}
.ic-title:hover {
  color: var(--brand);
}
.ic-model {
  font-size: 0.75rem;
  color: var(--text-lo);
  margin-top: 0.125rem;
}

.ic-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.875rem;
}
.ic-meta-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-lo);
  font-weight: 600;
}
.ic-meta-value {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-hi);
  margin-top: 0.125rem;
}

.ic-time {
  font-size: 0.75rem;
  color: var(--text-lo);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 1rem;
}

.ic-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border);
}

/* ── Score + skill bars (completed interviews) ── */
.ic-score {
  margin-bottom: 0.875rem;
  padding: 0.75rem 0.875rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.ic-score-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.ic-score-num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  flex-shrink: 0;
}
.ic-score-scale {
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0.55;
  letter-spacing: 0;
}
.ic-score-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  min-width: 0;
}
.ic-score-rec {
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  text-align: right;
}
.ic-score-conf {
  font-size: 0.6875rem;
  color: var(--text-lo);
}

.ic-skill-bars {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}
.ic-skill-row {
  display: grid;
  grid-template-columns: 6rem 1fr 2rem;
  align-items: center;
  gap: 0.4rem;
}
.ic-skill-label {
  font-size: 0.6875rem;
  color: var(--text-lo);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ic-skill-track {
  height: 5px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.ic-skill-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.ic-skill-val {
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: right;
}
.ic-chart-box {
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
  padding-top: 0.375rem;
  width: 100% !important;
}
.ic-chart-box > div {
  width: 100% !important;
}

/* ================================================================
   MESSAGE BUBBLES  (messages partials)
   ================================================================ */
.msg-bubble {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.msg-avatar--ai {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.msg-avatar--user {
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
}
.msg-avatar--system {
  background: var(--g-400);
}

.msg-body {
  flex: 1;
  min-width: 0;
}

.msg-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}
.msg-role {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.msg-role--ai {
  color: var(--brand);
}
.msg-role--user {
  color: var(--blue);
}
.msg-role--system {
  color: var(--text-lo);
}
.msg-time {
  font-size: 0.6875rem;
  color: var(--text-lo);
}

.msg-content {
  padding: 0.75rem 1rem;
  border-radius: 0 var(--r-lg) var(--r-lg) var(--r-lg);
  font-size: 0.875rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg-content--ai {
  background: var(--brand-light);
  border: 1px solid var(--brand-ring);
  color: var(--text-hi);
}
.msg-content--user {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: var(--text-hi);
  border-radius: var(--r-lg) 0 var(--r-lg) var(--r-lg);
}
.msg-content--system {
  background: #fefce8;
  border: 1px solid #fde68a;
  color: #713f12;
  border-radius: var(--r-lg);
}
[data-theme="dark"] .msg-content--ai {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
}
[data-theme="dark"] .msg-content--user {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.2);
  color: var(--text-hi);
}
[data-theme="dark"] .msg-content--system {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}

.msg-audio {
  margin-top: 0.625rem;
}
.msg-audio audio {
  height: 32px;
  border-radius: var(--r-sm);
}

/* ── Message input bar ─── */
.msg-input-bar {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: 0.5rem;
}

.msg-input-wrap {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.msg-input-field {
  flex: 1;
  min-height: 42px;
  max-height: 160px;
  resize: none;
  background: var(--surface-1);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-lg);
  padding: 0.625rem 0.875rem;
  font-family: var(--font);
  font-size: 0.875rem;
  color: var(--text-hi);
  line-height: 1.5;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.msg-input-field:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
  background: var(--surface);
}
.msg-input-field::placeholder {
  color: var(--text-lo);
}

.msg-input-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1rem;
  transition:
    background 0.12s,
    transform 0.1s;
}
.msg-input-btn--send {
  background: var(--brand);
  color: #fff;
}
.msg-input-btn--send:hover {
  background: var(--brand-hover);
  transform: scale(1.05);
}
.msg-input-btn--mic {
  background: var(--surface-2);
  color: var(--text-mid);
  border: 1px solid var(--border);
}
.msg-input-btn--mic:hover {
  background: var(--surface-3);
  color: var(--text-hi);
}
.msg-input-btn--mic.recording {
  background: #fee2e2;
  color: var(--red);
  border-color: #fca5a5;
}

.msg-input-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.625rem;
  flex-wrap: wrap;
}

.msg-select {
  height: 30px;
  padding: 0 0.5rem;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 0.75rem;
  color: var(--text-hi);
}
.msg-select:focus {
  outline: none;
  border-color: var(--brand);
}

/* ================================================================
   VOICE CARD  (voice_turns/_voice_turn)
   ================================================================ */
.voice-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 0.625rem;
  overflow: hidden;
}
.voice-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
}
.voice-card-body {
  padding: 0.75rem 0.875rem;
}
.voice-transcript {
  font-size: 0.8125rem;
  color: var(--text-hi);
  white-space: pre-wrap;
  line-height: 1.6;
}
.voice-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--text-lo);
  margin-bottom: 0.25rem;
}
.voice-card audio {
  width: 100%;
  height: 32px;
  border-radius: var(--r-sm);
}

/* ── Voice controls panel ─── */
.voice-panel .card-header {
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  border-bottom-color: #c4b5fd;
}
[data-theme="dark"] .voice-panel .card-header {
  background: rgba(139, 92, 246, 0.12);
  border-bottom-color: rgba(139, 92, 246, 0.2);
}

.voice-btn-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ================================================================
   CANDIDATE CARD  (chats/_candidate_card)
   ================================================================ */
.candidate-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.candidate-card-hero {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
}

.candidate-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.candidate-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.candidate-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-hi);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.candidate-card-role {
  font-size: 0.75rem;
  color: var(--text-mid);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.candidate-card-role .bi {
  font-size: 0.7rem;
  opacity: 0.7;
}

.candidate-stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--stage-color, #6b7280);
  background: color-mix(in srgb, var(--stage-color, #6b7280) 10%, transparent);
  border: 1px solid
    color-mix(in srgb, var(--stage-color, #6b7280) 25%, transparent);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  margin-top: 0.2rem;
  width: fit-content;
}
.candidate-stage-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--stage-color, #6b7280);
  flex-shrink: 0;
}

.candidate-edit-btn {
  background: none;
  border: none;
  padding: 0.25rem 0.375rem;
  border-radius: var(--r-md);
  color: var(--text-lo);
  cursor: pointer;
  line-height: 1;
  transition:
    color 0.15s,
    background 0.15s;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.candidate-edit-btn:hover {
  color: var(--brand);
  background: var(--surface-2);
}
.candidate-edit-btn .bi {
  font-size: 0.85rem;
}

.candidate-contacts {
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.candidate-contact-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.55rem 1.25rem;
  border-bottom: 1px solid var(--border);
  min-height: 2.25rem;
}
.candidate-contact-row:last-child {
  border-bottom: none;
}

.candidate-contact-icon {
  width: 1.5rem;
  text-align: center;
  color: var(--brand);
  flex-shrink: 0;
  font-size: 0.85rem;
}
.candidate-contact-row--empty .candidate-contact-icon {
  color: var(--text-lo);
}

.candidate-contact-value {
  font-size: 0.8125rem;
  color: var(--text-hi);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.candidate-contact-value:hover {
  color: var(--brand);
  text-decoration: underline;
}
.candidate-contact-row--empty .candidate-contact-value {
  color: var(--text-lo);
}

.candidate-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.candidate-edit-body {
  padding: 0.875rem 1.25rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.candidate-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 480px) {
  .candidate-edit-grid {
    grid-template-columns: 1fr;
  }
}

.candidate-edit-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-mid);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.candidate-edit-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  color: var(--text-hi);
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  font-family: var(--font);
}
.candidate-edit-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.candidate-edit-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* ================================================================
   SCORECARD  (chats/_scorecard_card)
   ================================================================ */
.scorecard-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.scorecard-hero {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-bottom: 1px solid #c7d2fe;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
[data-theme="dark"] .scorecard-hero {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.15) 0%,
    rgba(139, 92, 246, 0.12) 100%
  );
  border-bottom-color: rgba(99, 102, 241, 0.25);
}

.scorecard-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  margin-bottom: 0.375rem;
}
.scorecard-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-hi);
  margin: 0;
}
.scorecard-summary {
  font-size: 0.8125rem;
  color: var(--text-mid);
  margin-top: 0.5rem;
  max-width: 48rem;
  white-space: pre-wrap;
}

.scorecard-score-box {
  text-align: left;
}
.scorecard-number {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand);
  letter-spacing: -0.03em;
}
.scorecard-rec {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-mid);
  margin-top: 0.25rem;
}
.scorecard-conf {
  font-size: 0.75rem;
  color: var(--text-lo);
}

.scorecard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
}
.scorecard-section {
  padding: 1rem 1.25rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.scorecard-section:last-child {
  border-right: none;
}
@media (max-width: 640px) {
  .scorecard-section {
    border-right: none;
  }
}

.scorecard-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.625rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.scorecard-section-title--green {
  color: var(--green);
}
.scorecard-section-title--amber {
  color: var(--amber);
}
.scorecard-section-title--red {
  color: var(--red);
}
.scorecard-section-title--blue {
  color: var(--blue);
}

.scorecard-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.scorecard-list li {
  font-size: 0.8125rem;
  color: var(--text-hi);
  padding-left: 0.875rem;
  position: relative;
  line-height: 1.5;
}
.scorecard-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--text-lo);
}

.scorecard-json-toggle {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border);
}
.scorecard-json-toggle summary {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-mid);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.scorecard-json-toggle summary::-webkit-details-marker {
  display: none;
}
.scorecard-json-toggle summary::before {
  content: "›";
  font-size: 1rem;
  transition: transform 0.2s;
}
.scorecard-json-toggle[open] summary::before {
  transform: rotate(90deg);
}
.scorecard-json-pre {
  margin-top: 0.625rem;
  padding: 0.875rem;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: var(--r-lg);
  font-size: 0.75rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.scorecard-charts-section {
  border-top: 1px solid var(--border);
  padding: 1rem 1.25rem;
}
.scorecard-charts-header {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.scorecard-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.scorecard-chart-box {
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 230px;
}
@media (max-width: 640px) {
  .scorecard-charts-row {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   INTERVIEW ANALYTICS  (chats/_interview_charts)
   ================================================================ */

.ia-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.ia-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.ia-header-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--brand-light), #e0e7ff);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
[data-theme="dark"] .ia-header-icon {
  background: rgba(99, 102, 241, 0.18);
}
.ia-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-hi);
  margin: 0;
}
.ia-sub {
  font-size: 0.75rem;
  color: var(--text-lo);
  margin: 0.125rem 0 0;
}
.ia-chart-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0.875rem 1rem 1rem;
  height: 100%;
}
[data-theme="dark"] .ia-chart-card {
  background: var(--surface-2);
}
.ia-chart-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mid);
  margin-bottom: 0.5rem;
}
.ia-chart-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.ia-chart-box {
  margin: 0 -0.25rem;
}
.ia-chart-box > div {
  width: 100% !important;
}
.ia-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  color: var(--text-lo);
  font-size: 0.8125rem;
  text-align: center;
  padding: 1rem;
}
.ia-token-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
}
[data-theme="dark"] .ia-token-strip {
  background: var(--surface-2);
}
.ia-token-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.25rem 0.875rem;
}
.ia-token-val {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
}
.ia-token-val--total {
  color: var(--brand);
}
.ia-token-key {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-lo);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.1rem;
}
.ia-token-divider {
  width: 1px;
  height: 2rem;
  background: var(--border);
  flex-shrink: 0;
}
@media (max-width: 576px) {
  .ia-token-strip {
    justify-content: center;
  }
  .ia-token-divider {
    display: none;
  }
}

/* ================================================================
   FORM SECTIONS  (chats/_form, new interview)
   ================================================================ */
.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.form-section-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-1);
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.form-section-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
}
.form-section-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-hi);
  margin: 0;
}
.form-section-subtitle {
  font-size: 0.75rem;
  color: var(--text-lo);
  margin: 0;
}
.form-section-body {
  padding: 1.25rem;
}

/* Upload dropzone */
.upload-dropzone {
  border: 2px dashed var(--border-hi);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  text-align: center;
  background: var(--surface-1);
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.upload-dropzone:hover {
  border-color: var(--brand);
  background: var(--brand-light);
}
.upload-dropzone i {
  color: var(--brand);
  font-size: 1.75rem;
  display: block;
  margin-bottom: 0.5rem;
}
.upload-dropzone-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand);
}
.upload-dropzone-sub {
  font-size: 0.75rem;
  color: var(--text-lo);
  margin-top: 0.25rem;
}

/* Form helpers */
.form-group {
  margin-bottom: 1rem;
}
.form-select {
  height: 36px;
  padding: 0 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 0.8125rem;
  color: var(--text-hi);
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
  appearance: auto;
  width: 100%;
}
.form-select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
textarea.form-control {
  height: auto;
  padding: 0.5rem 0.75rem;
  resize: vertical;
}

/* ================================================================
   FLASH / ALERTS  (with icons)
   ================================================================ */
.flash-container {
  margin-bottom: 1.25rem;
}
.flash-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--r-lg);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  border: 1px solid;
  position: relative;
}
.flash-item--success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.flash-item--danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.flash-item--notice {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.flash-item--alert {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.flash-item--info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}
.flash-item--warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
[data-theme="dark"] .flash-item--success {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
}
[data-theme="dark"] .flash-item--danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}
[data-theme="dark"] .flash-item--notice {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
}
[data-theme="dark"] .flash-item--alert {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}
[data-theme="dark"] .flash-item--info {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
}
[data-theme="dark"] .flash-item--warning {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.25);
  color: #fcd34d;
}
.flash-icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}
.flash-text {
  flex: 1;
}
.flash-close {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  padding: 0;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: inherit;
  flex-shrink: 0;
}
.flash-close:hover {
  opacity: 1;
}

/* ================================================================
   MODELS TABLE
   ================================================================ */
.provider-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25em 0.625em;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-mid);
}

/* ================================================================
   MISC / UTILITY
   ================================================================ */
.section-divider {
  height: 1px;
  background: var(--border);
  margin: 1.5rem 0;
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.info-row:last-child {
  border-bottom: none;
}
.info-row-label {
  color: var(--text-lo);
  font-weight: 500;
}
.info-row-value {
  color: var(--text-hi);
  font-weight: 600;
}

.page-sub-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

/* ── Interview stage badges ─── */
.stage-badge-intake {
}
.stage-badge-screening {
}
.stage-badge-technical {
}
.stage-badge-behavioral {
}
.stage-badge-completed {
}

/* ================================================================
   CV BANK PAGE
   ================================================================ */

/* ── Hero banner ─── */
.cvb-hero {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: 2rem 2.25rem;
  margin-bottom: 1.75rem;
  background: linear-gradient(
    135deg,
    #14c905 0%,
    #1b8465 35%,
    #b6a545 65%,
    #fca5a5 100%
  );
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  min-height: 130px;
}

.cvb-hero-bg {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.cvb-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  flex-wrap: wrap;
}

.cvb-hero-left {
}

.cvb-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.5rem;
}

.cvb-hero-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 0.375rem;
  letter-spacing: -0.02em;
}

.cvb-hero-sub {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.cvb-hero-actions {
  display: flex;
  gap: 0.625rem;
  flex-shrink: 0;
}

/* Decorative blobs */
.cvb-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.cvb-blob-1 {
  width: 180px;
  height: 180px;
  background: rgba(252, 165, 165, 0.25);
  top: -60px;
  right: 60px;
  filter: blur(40px);
}
.cvb-blob-2 {
  width: 140px;
  height: 140px;
  background: rgba(248, 113, 113, 0.2);
  bottom: -50px;
  right: 250px;
  filter: blur(35px);
}
.cvb-blob-3 {
  width: 90px;
  height: 90px;
  background: rgba(220, 38, 38, 0.2);
  top: 20px;
  right: 340px;
  filter: blur(20px);
}

/* ── Stats strip ─── */
.cvb-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 900px) {
  .cvb-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .cvb-stats {
    grid-template-columns: 1fr 1fr;
  }
}

.cvb-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1rem 1.125rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: box-shadow 0.15s;
}
.cvb-stat:hover {
  box-shadow: var(--shadow-sm);
}

.cvb-stat-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.cvb-stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-hi);
  line-height: 1;
  letter-spacing: -0.02em;
}
.cvb-stat-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-lo);
  margin-top: 0.125rem;
}

/* ── Upload panel ─── */
.cvb-upload-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.cvb-upload-panel-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #fff5f5, #fff);
}
[data-theme="dark"] .cvb-upload-panel-header {
  background: rgba(239, 68, 68, 0.06);
}

.cvb-upload-panel-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: #fee2e2;
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
}
[data-theme="dark"] .cvb-upload-panel-icon {
  background: rgba(239, 68, 68, 0.15);
}

.cvb-upload-panel-body {
  padding: 1.25rem;
}

.cvb-dropzone {
  border: 2px dashed #fca5a5;
  border-radius: var(--r-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  background: #fff5f5;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
  position: relative;
}
[data-theme="dark"] .cvb-dropzone {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.3);
}

.cvb-dropzone:hover {
  border-color: var(--red);
  background: #fee2e2;
}
[data-theme="dark"] .cvb-dropzone:hover {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.1);
}

.cvb-dropzone-icon {
  width: 56px;
  height: 56px;
  background: #fee2e2;
  color: var(--red);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 0.875rem;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}
[data-theme="dark"] .cvb-dropzone-icon {
  background: rgba(239, 68, 68, 0.15);
}

.cvb-dropzone-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-hi);
  margin-bottom: 0.25rem;
}
.cvb-dropzone-sub {
  font-size: 0.8125rem;
  color: var(--text-lo);
  margin-bottom: 1rem;
}

/* ── CV card ─── */
.cvb-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow 0.15s,
    transform 0.15s;
  position: relative;
}
.cvb-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.cvb-card-top {
  padding: 1.125rem 1.125rem 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.cvb-card-file-icon {
  width: 48px;
  height: 56px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  flex-shrink: 0;
  position: relative;
}
.cvb-card-file-icon--pdf {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: var(--red);
}
.cvb-card-file-icon--docx {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: var(--blue);
}
.cvb-card-file-icon--other {
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
  color: var(--text-mid);
}

.cvb-card-ext {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 4px;
  color: var(--text-mid);
}

.cvb-card-info {
  flex: 1;
  min-width: 0;
}

.cvb-card-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-hi);
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
  margin-bottom: 0.25rem;
}
.cvb-card-name:hover {
  color: var(--brand);
}

.cvb-card-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--text-lo);
  margin-top: 0.25rem;
}

.cvb-card-divider {
  height: 1px;
  background: var(--border);
  margin: 0 1.125rem;
}

.cvb-card-footer {
  padding: 0.75rem 1.125rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.cvb-card-footer .btn {
  flex: 1;
  text-align: center;
  justify-content: center;
}

/* New badge */
.cvb-new-badge {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  font-size: 0.5625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, var(--brand), #8b5cf6);
  color: #fff;
  padding: 0.2em 0.55em;
  border-radius: 9999px;
  z-index: 1;
}

/* Processing status badges on CV cards */
.cvb-status-badge {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.5625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2em 0.55em;
  border-radius: 9999px;
  z-index: 1;
}
.cvb-status-badge--queued {
  background: #ede9fe;
  color: #7c3aed;
}
.cvb-status-badge--processing {
  background: #dbeafe;
  color: #1d4ed8;
}
.cvb-status-badge--failed {
  background: #fee2e2;
  color: var(--red);
}

/* Spinner for "processing" badge */
.cvb-spinner {
  width: 7px;
  height: 7px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: cvb-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes cvb-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Bulk upload dropzone variants ─── */
.cvb-dropzone--bulk {
  padding: 1.5rem;
}
.cvb-dropzone--has-files {
  border-color: var(--brand);
  background: #eef2ff;
}
[data-theme="dark"] .cvb-dropzone--has-files {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.5);
}
.cvb-dropzone--drag {
  border-color: var(--brand) !important;
  background: #eef2ff !important;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

/* ── Selected file list ─── */
.bulk-file-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-mid);
}

.bulk-clear-btn {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: var(--text-lo);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.375rem;
  border-radius: var(--r-sm);
  transition:
    color 0.15s,
    background 0.15s;
}
.bulk-clear-btn:hover {
  color: var(--red);
  background: #fee2e2;
}

.bulk-file-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-height: 220px;
  overflow-y: auto;
}

.bulk-file-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 0.8125rem;
}

.bulk-file-icon {
  color: var(--text-mid);
  font-size: 0.9rem;
  flex-shrink: 0;
}
.bulk-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-hi);
  font-weight: 500;
}
.bulk-file-size {
  color: var(--text-lo);
  font-size: 0.75rem;
  flex-shrink: 0;
}
.bulk-file-remove {
  background: none;
  border: none;
  padding: 0.15rem 0.25rem;
  border-radius: var(--r-sm);
  color: var(--text-lo);
  cursor: pointer;
  line-height: 1;
  transition:
    color 0.15s,
    background 0.15s;
  flex-shrink: 0;
}
.bulk-file-remove:hover {
  color: var(--red);
  background: #fee2e2;
}

/* Per-file status indicators */
.bulk-file-status {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
}
.bfi-pending {
  color: var(--text-lo);
}
.bfi-uploading {
  display: inline-flex;
  align-items: center;
  color: var(--blue);
}
.bfi-done {
  color: var(--green);
}
.bfi-done .bi {
  font-size: 0.8rem;
}
.bfi-failed {
  color: var(--red);
}
.bfi-failed .bi {
  font-size: 0.8rem;
}

/* ── Upload progress bar ─── */
.bulk-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-hi);
  margin-bottom: 0.375rem;
}
.bulk-progress-track {
  height: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.bulk-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), #8b5cf6);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* ── Upload result summary ─── */
.bulk-result-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.625rem 0.875rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: 0.8125rem;
  font-weight: 600;
}
.bfr-queued {
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.bfr-skipped {
  color: var(--text-mid);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.bfr-failed {
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.bfr-refresh {
  margin-left: auto;
  color: var(--brand);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
}
.bfr-refresh:hover {
  text-decoration: underline;
}

/* ================================================================
   ASSIGNMENT MATCHING BANNERS
   ================================================================ */
.assign-matching-banner {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1.25rem;
  background: linear-gradient(135deg, #eef2ff, #ede9fe);
  border: 1px solid #c7d2fe;
  border-radius: var(--r-xl);
  margin-bottom: 1.25rem;
}
[data-theme="dark"] .assign-matching-banner {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.12),
    rgba(139, 92, 246, 0.1)
  );
  border-color: rgba(99, 102, 241, 0.3);
}

.assign-matching-banner-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  flex-shrink: 0;
}

.assign-matching-banner-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 0.15rem;
}

.assign-matching-banner-sub {
  font-size: 0.75rem;
  color: var(--text-mid);
}

.assign-matched-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
  color: var(--text-mid);
  flex-wrap: wrap;
}

/* ── Parse Pending Banner ─── */
.cvb-parse-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 0.875rem 1.125rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
[data-theme="dark"] .cvb-parse-banner {
  background: rgba(253, 230, 138, 0.06);
  border-color: rgba(253, 230, 138, 0.25);
}
.cvb-parse-banner-left {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}
.cvb-parse-banner-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #fde68a;
  color: #92400e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
[data-theme="dark"] .cvb-parse-banner-icon {
  background: rgba(253, 230, 138, 0.2);
  color: #fbbf24;
}
.cvb-parse-banner-title {
  font-size: 0.875rem;
  color: #92400e;
  line-height: 1.4;
}
[data-theme="dark"] .cvb-parse-banner-title {
  color: #fbbf24;
}
.cvb-parse-banner-sub {
  font-size: 0.75rem;
  color: #a16207;
  margin-top: 0.2rem;
  line-height: 1.5;
}
[data-theme="dark"] .cvb-parse-banner-sub {
  color: #ca8a04;
}
.cvb-parse-banner-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.btn-parse-now {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.45rem 0.95rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 6px;
  background: #d97706;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-parse-now:hover {
  background: #b45309;
  color: #fff;
}
.btn-parse-now--lg {
  background: #7c3aed;
}
.btn-parse-now--lg:hover {
  background: #6d28d9;
}

/* ── Toolbar ─── */
.cvb-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.cvb-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.cvb-search {
  position: relative;
  min-width: 220px;
}
.cvb-search i {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-lo);
  font-size: 0.8125rem;
  pointer-events: none;
}
.cvb-search input {
  width: 100%;
  height: 34px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0 0.75rem 0 2rem;
  font-size: 0.8125rem;
  font-family: var(--font);
  color: var(--text-hi);
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.cvb-search input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.cvb-search input::placeholder {
  color: var(--text-lo);
}

/* ── Pagination strip ─── */
.cvb-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.cvb-pagination-info {
  font-size: 0.75rem;
  color: var(--text-lo);
}

/* ── Interview Timer Bar ──────────────────────────────────── */
.interview-timer-bar {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  border: 1px solid #c7d2fe;
  border-radius: var(--radius);
  padding: 0.875rem 1.25rem;
  margin-bottom: 1rem;
}
[data-theme="dark"] .interview-timer-bar {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.15),
    rgba(99, 102, 241, 0.08)
  );
  border-color: rgba(99, 102, 241, 0.3);
}
.interview-timer-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.interview-timer-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-hi);
}
.interview-timer-sub {
  font-size: 0.6875rem;
  color: var(--text-lo);
  margin-top: 0.1rem;
}
.interview-timer-countdown {
  font-size: 1.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
  letter-spacing: -0.02em;
  min-width: 4.5rem;
  text-align: right;
  transition: color 0.3s;
}
.interview-timer-countdown--warning {
  color: #d97706;
}
.interview-timer-countdown--danger {
  color: var(--red);
  animation: timer-pulse 1s infinite;
}
@keyframes timer-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
.interview-timer-status {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
.timer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: dot-blink 1.4s infinite;
}
@keyframes dot-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

/* ================================================================
   ASSIGNMENTS INDEX — REDESIGN
   ================================================================ */

/* ── Summary stat cards ── */
.asgn-stat-card {
  position: relative;
  overflow: hidden;
  background: var(--asgn-bg, var(--surface-1));
  border: 1px solid var(--asgn-border, var(--border));
  border-radius: var(--r-xl);
  padding: 1rem 1.125rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.asgn-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.asgn-stat-glow {
  position: absolute;
  top: -24px;
  right: -24px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(24px);
}
.asgn-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
}
.asgn-stat-body {
  flex: 1;
  min-width: 0;
}
.asgn-stat-num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-hi);
}
.asgn-stat-lbl {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-lo);
  margin-top: 0.1rem;
}
[data-theme="dark"] .asgn-stat-card {
  background: var(--surface-2);
  border-color: var(--border);
}

/* ── Assignment cards ── */
.asgn-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  box-shadow: var(--shadow-xs);
}
.asgn-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
[data-theme="dark"] .asgn-card {
  background: var(--surface-1);
}

.asgn-card-accent {
  height: 4px;
  flex-shrink: 0;
}

.asgn-card-body {
  padding: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  flex: 1;
}

.asgn-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.asgn-card-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.asgn-card-title-group {
  flex: 1;
  min-width: 0;
}
.asgn-card-title {
  /* font-size: .9375rem; */
  font-weight: 700;
  color: var(--text-hi);
  text-decoration: none;
  display: block;
  line-height: 1.35;
  transition: color 0.12s;
}
.asgn-card-title:hover {
  color: var(--brand);
}
.asgn-card-meta {
  font-size: 0.7rem;
  color: var(--text-lo);
  margin-top: 0.15rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Live pulsing dot */
.asgn-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  animation: dot-blink 1.2s infinite;
  flex-shrink: 0;
}

/* Job excerpt */
.asgn-card-excerpt {
  /* font-size: .8rem; */
  color: var(--text-mid);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stats row */
.asgn-stats-row {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}
.asgn-metric {
  flex: 1;
  text-align: center;
  padding: 0 0.5rem;
  border-right: 1px solid var(--border);
}
.asgn-metric:last-child {
  border-right: none;
}
.asgn-metric-num {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--mc, var(--brand));
  line-height: 1.1;
}
.asgn-metric-lbl {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-lo);
  margin-top: 0.1rem;
}

/* Progress bar */
.asgn-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.asgn-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--text-lo);
}
.asgn-progress-track {
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.asgn-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* In-progress inline banner */
.asgn-inprog-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  background: rgba(99, 102, 241, 0.07);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--r-sm);
  font-size: 0.75rem;
  color: var(--brand);
  font-weight: 500;
}
[data-theme="dark"] .asgn-inprog-banner {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.3);
}

/* Actions */
.asgn-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.125rem;
}

/* Empty state */
.asgn-empty {
  text-align: center;
  padding: 4rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.asgn-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eef2ff, #ddd6fe);
  color: #6366f1;
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}
.asgn-empty-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-hi);
  margin: 0 0 0.5rem;
}
.asgn-empty-sub {
  font-size: 0.875rem;
  color: var(--text-lo);
  max-width: 360px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

/* ================================================================
   WORKFORCE MODULE — Hero, stats, toolbar, avatars, badges
   ================================================================ */

/* ── Hero ─────────────────────────────────────────────────────── */
.wf-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: 2rem 2rem 1.75rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: stretch;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
}

.wf-hero--indigo {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}
.wf-hero--blue {
  background: linear-gradient(135deg, #1d4ed8 0%, #0891b2 100%);
}
.wf-hero--green {
  background: linear-gradient(135deg, #059669 0%, #0d9488 100%);
}

.wf-hero-bg {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.wf-hero-content {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  flex-wrap: wrap;
}

.wf-hero-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.wf-hero-title {
  font-size: 1.875rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.375rem;
  line-height: 1.15;
}

.wf-hero-sub {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.wf-hero-actions {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 0.25rem;
}

.wf-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.wf-blob-1 {
  width: 200px;
  height: 200px;
  top: -80px;
  right: 40px;
  filter: blur(50px);
}
.wf-blob-2 {
  width: 150px;
  height: 150px;
  bottom: -60px;
  right: 240px;
  filter: blur(40px);
}
.wf-blob-3 {
  width: 100px;
  height: 100px;
  top: 10px;
  right: 360px;
  filter: blur(25px);
}

/* ── Stats strip ──────────────────────────────────────────────── */
.wf-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 900px) {
  .wf-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .wf-stats {
    grid-template-columns: 1fr 1fr;
  }
}

.wf-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1rem 1.125rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  transition: box-shadow 0.15s;
}
.wf-stat:hover {
  box-shadow: var(--shadow-sm);
}

.wf-stat-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.wf-stat-num {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--text-hi);
  line-height: 1.1;
}

.wf-stat-label {
  font-size: 0.6875rem;
  color: var(--text-lo);
  font-weight: 500;
  white-space: nowrap;
}

/* ── Toolbar ──────────────────────────────────────────────────── */
.wf-toolbar {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.wf-search-form {
  flex-shrink: 0;
}

.wf-search-wrap {
  position: relative;
}
.wf-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-lo);
  font-size: 0.8125rem;
  pointer-events: none;
}
.wf-search-input {
  height: 36px;
  padding-left: 2.125rem;
  padding-right: 0.75rem;
  border: 1px solid var(--border-hi);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text-hi);
  font-size: 0.8125rem;
  width: 240px;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.wf-search-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.wf-search-input::placeholder {
  color: var(--text-lo);
}

/* ── Filter chips ────────────────────────────────────────────── */
.wf-filter-chips {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.wf-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 0.75rem;
  border: 1px solid var(--border-hi);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-mid);
  background: var(--surface);
  text-decoration: none;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
  white-space: nowrap;
}
.wf-chip:hover {
  background: var(--surface-2);
  color: var(--text-hi);
  border-color: var(--border-hi);
}
.wf-chip.active {
  background: var(--brand-light);
  color: var(--brand);
  border-color: var(--brand-ring);
}

/* ── Avatars ──────────────────────────────────────────────────── */
.wf-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
}
.wf-avatar--indigo {
  background: var(--brand-light);
  color: var(--brand);
}
.wf-avatar--green {
  background: #d1fae5;
  color: var(--green);
}
.wf-avatar--blue {
  background: #dbeafe;
  color: var(--blue);
}
.wf-avatar--purple {
  background: #ede9fe;
  color: #7c3aed;
}
.wf-avatar--gray {
  background: var(--surface-2);
  color: var(--text-mid);
}

/* ── Badges ───────────────────────────────────────────────────── */
.wf-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 0.5rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.wf-badge--indigo {
  background: var(--brand-light);
  color: var(--brand);
}
.wf-badge--green {
  background: #d1fae5;
  color: #065f46;
}
.wf-badge--blue {
  background: #dbeafe;
  color: #1e40af;
}
.wf-badge--purple {
  background: #ede9fe;
  color: #5b21b6;
}
.wf-badge--amber {
  background: #fef9c3;
  color: #854d0e;
}
.wf-badge--gray {
  background: var(--surface-2);
  color: var(--text-mid);
  border: 1px solid var(--border);
}

/* ── Department chip ─────────────────────────────────────────── */
.wf-dept-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--text-mid);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}

/* ── Action buttons ──────────────────────────────────────────── */
.wf-action-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-mid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.12s,
    color 0.12s,
    border-color 0.12s;
}
.wf-action-btn:hover {
  background: var(--surface-2);
  color: var(--text-hi);
  border-color: var(--border-hi);
}
.wf-action-btn--danger:hover {
  background: #fef2f2;
  color: var(--red);
  border-color: #fca5a5;
}

/* btn-hero variants */
.btn-hero-solid {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
  backdrop-filter: blur(4px);
}
.btn-hero-solid:hover {
  background: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--r);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s;
}
.btn-hero-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   DEPARTMENT & ROLE CARDS — Index pages
   ═══════════════════════════════════════════════════════════════ */

/* ── Department card grid ───────────────────────────────────── */

.dept-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow 0.15s,
    transform 0.15s;
  position: relative;
}
.dept-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09);
  transform: translateY(-2px);
}

.dept-card-accent {
  height: 4px;
  width: 100%;
  flex-shrink: 0;
}

.dept-card-body {
  padding: 1rem 1.125rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dept-card-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.625rem;
}

.dept-card-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r);
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.dept-card-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.dept-card:hover .dept-card-actions {
  opacity: 1;
}

.dept-card-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-hi);
  text-decoration: none;
  line-height: 1.25;
  display: block;
  margin-bottom: 0.25rem;
}
.dept-card-name:hover {
  color: var(--brand);
}

.dept-card-count {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: 0.375rem;
}
.dept-card-num {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}
.dept-card-label {
  font-size: 0.75rem;
  color: var(--text-lo);
  font-weight: 500;
}
.dept-card-pct {
  font-size: 0.6875rem;
  color: var(--text-lo);
  margin-left: auto;
}

/* ── Shared progress bar ────────────────────────────────────── */
.dept-progress-track {
  height: 5px;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 0.625rem;
}
.dept-progress-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}

/* ── Top roles chips on dept card ───────────────────────────── */
.dept-card-roles {
  margin-top: 0.625rem;
}

.dept-role-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  font-size: 0.6875rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.dept-card-footer {
  margin-top: auto;
  padding-top: 0.875rem;
}

.dept-card-view-link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-mid);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.12s;
}
.dept-card-view-link:hover {
  color: var(--brand);
}

/* ── Role card grid ─────────────────────────────────────────── */
.role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  padding: 1.5rem;
}

.role-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow 0.15s,
    transform 0.15s;
}
.role-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.09);
  transform: translateY(-2px);
}

.role-card-accent {
  height: 4px;
  width: 100%;
  flex-shrink: 0;
}

.role-card-body {
  padding: 1rem 1.125rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.role-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.625rem;
}

.role-card-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r);
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.role-card-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.role-card:hover .role-card-actions {
  opacity: 1;
}

.role-card-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-hi);
  text-decoration: none;
  line-height: 1.3;
  display: block;
  margin-bottom: 0.25rem;
}
.role-card-name:hover {
  color: var(--brand);
}

.role-card-depts {
  margin-top: 0.625rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   DEPARTMENT & ROLE SHOW PAGES
   ═══════════════════════════════════════════════════════════════ */

/* ── Show hero ──────────────────────────────────────────────── */
.dept-show-hero {
  position: relative;
  overflow: hidden;
  padding: 2rem 2rem 1.75rem;
  margin-bottom: 20px;
  border-radius: 5px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
}

.dept-show-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.dept-show-icon {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  color: #fff;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
}

/* ── Two-column show layout ──────────────────────────────────── */
.dept-show-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.25rem;
  padding: 1.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .dept-show-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Section card header ────────────────────────────────────── */
.dept-show-section-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.dept-show-section-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.dept-show-section-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-hi);
  line-height: 1.2;
}
.dept-show-section-sub {
  font-size: 0.75rem;
  color: var(--text-lo);
  margin-top: 0.1rem;
}

/* ── Role/Dept distribution bars ────────────────────────────── */
.dept-role-row {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.dept-role-row:last-child {
  border-bottom: none;
}

.dept-role-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.dept-role-row-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-hi);
}

.dept-role-row-count {
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Employee list (show pages) ──────────────────────────────── */
.dept-emp-list {
  display: flex;
  flex-direction: column;
}

.dept-emp-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1.25rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.dept-emp-row:last-child {
  border-bottom: none;
}
.dept-emp-row:hover {
  background: var(--surface-2);
}

/* .empty-state already defined above — flex override for show pages */
.dept-show-grid .empty-state,
.dept-emp-list + .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── Employee show (beautiful + colorful; max radius 5px) ───────────── */
.emp-show {
  --emp-r: 12px;
  --emp-primary: #6366f1;
  --emp-sidebar-bg: #f8fafc;
  --emp-card-border: rgba(2, 6, 23, 0.08);
}

/* Vertical Layout Container */
.emp-show-layout {
  display: flex;
  gap: 24px;
  min-height: calc(100vh - 100px);
}

/* Sidebar Styling */
.emp-show-sidebar {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.emp-show-profile-card {
  background: white;
  border-radius: var(--emp-r);
  border: 1px solid var(--emp-card-border);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  position: relative;
}

.emp-show-profile-header {
  height: 100px;
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
}

.emp-show-avatar-wrapper {
  margin-top: -50px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.emp-show-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid white;
  background: #f1f5f9;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.emp-show-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.emp-show-profile-info {
  padding: 20px;
  text-align: center;
}

.emp-show-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}

.emp-show-role {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 16px;
}

.emp-show-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 16px;
}

.emp-show-stat-item {
  padding: 12px;
  text-align: center;
}

.emp-show-stat-item:first-child {
  border-right: 1px solid #f1f5f9;
}

.emp-show-stat-label {
  display: block;
  font-size: 0.75rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.emp-show-stat-value {
  display: block;
  font-weight: 700;
  color: #334155;
  font-size: 0.9rem;
}

.emp-show-contact-list {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.emp-show-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #475569;
  font-size: 0.85rem;
  text-decoration: none;
}

.emp-show-contact-item i {
  width: 28px;
  height: 28px;
  background: #f1f5f9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366f1;
}

/* Quick Actions Sidebar Card */
.emp-show-actions-card {
  background: white;
  border-radius: var(--emp-r);
  border: 1px solid var(--emp-card-border);
  padding: 16px;
}

.emp-show-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.emp-show-action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #475569;
  transition: all 0.2s;
  text-decoration: none;
  border: 1px solid transparent;
}

.emp-show-action-btn:hover {
  background: #f8fafc;
  color: #6366f1;
  border-color: #e2e8f0;
}

/* Main Content Area */
.emp-show-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.emp-show-nav-card {
  background: white;
  border-radius: var(--emp-r);
  border: 1px solid var(--emp-card-border);
  padding: 8px;
}

.emp-show-tabs {
  border-bottom: none !important;
  gap: 4px;
}

.emp-show-tabs .nav-link {
  border: none !important;
  border-radius: 8px !important;
  color: #64748b !important;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 10px 16px !important;
  transition: all 0.2s;
}

.emp-show-tabs .nav-link:hover {
  background: #f1f5f9;
  color: #1e293b !important;
}

.emp-show-tabs .nav-link.active {
  background: #6366f1 !important;
  color: white !important;
  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3);
}

.emp-show-content-card {
  background: white;
  border-radius: var(--emp-r);
  border: 1px solid var(--emp-card-border);
  padding: 24px;
  flex-grow: 1;
}

@media (max-width: 1024px) {
  .emp-show-layout {
    flex-direction: column;
  }
  .emp-show-sidebar {
    width: 100%;
  }
}
/* ══════════════════════════════════════════════════════
   Purchase Orders Show Page  (pos-*)
══════════════════════════════════════════════════════ */
/* ── Hero ─────────────────────────────────────────────── */
.pos-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e40af 100%);
  padding: 1.75rem 2rem 1.5rem;
}
.pos-hero-dot-bg {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: radial-gradient(circle, #fff 1px, transparent 1px);
  background-size: 28px 28px;
}
.pos-hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.pos-hero-left {
  display: flex;
  align-items: center;
  gap: 1.125rem;
}
.pos-hero-badge {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.pos-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-bottom: 0.3rem;
}
.pos-bc {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.pos-bc:hover {
  color: #fff;
}
.pos-bc-sep {
  color: rgba(255, 255, 255, 0.35);
  margin: 0 0.2rem;
  font-size: 0.65rem;
}
.pos-bc-here {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.75rem;
}
.pos-hero-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  margin: 0;
  /* font-family: "montserrat", monospace; */
  letter-spacing: -0.01em;
}
.pos-hero-sub {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.2rem;
}
.pos-hero-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pos-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid;
  white-space: nowrap;
}
.pos-hero-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.875rem;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: all 0.15s;
}
.pos-hero-edit-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* ── Metrics strip ────────────────────────────────────── */
.pos-metrics {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}
.pos-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  flex: 1;
  min-width: 90px;
  padding: 0.875rem 0.75rem;
  text-align: center;
}
.pos-metric-lbl {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}
.pos-metric-val {
  font-size: 1.05rem;
  font-weight: 900;
  color: #0f172a;
}
.pos-metric-div {
  width: 1px;
  background: #e2e8f0;
  flex-shrink: 0;
}
.pos-mono {
  font-family: inherit;
}

/* ── Workflow stepper ─────────────────────────────────── */
.pos-workflow-bar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  padding: 0.625rem 2rem;
  background: #fff;
}
.pos-wf-label {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  flex-shrink: 0;
  margin-right: 0.25rem;
}
.pos-wf-step {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #94a3b8;
  transition: all 0.15s;
}
.pos-wf-step--done {
  font-weight: 800;
}
.pos-wf-connector {
  color: #e2e8f0;
  font-size: 0.65rem;
}
.pos-wf-connector--done {
  color: #a5b4fc;
}

/* ── Main body ────────────────────────────────────────── */
.pos-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 1.25rem;
  padding: 1.25rem 2rem 2rem;
  align-items: start;
  background: #fff;
}
@media (max-width: 1100px) {
  .pos-body {
    grid-template-columns: 1fr;
  }
}
.pos-col-left,
.pos-col-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Card ─────────────────────────────────────────────── */
.pos-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.875rem;
  overflow: hidden;
}
.pos-card--danger {
  border-color: #fca5a5;
}
.pos-card-hd {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.625rem 1rem;
  background: #fafbff;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.78rem;
  font-weight: 800;
  color: #1e293b;
}
.pos-card-hd--danger {
  background: #fff5f5;
  border-color: #fca5a5;
  color: #dc2626;
}
.pos-card-hd-btn {
  margin-left: auto;
  background: #ede9fe;
  color: #6366f1;
  border: 1px solid #ddd6fe;
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.pos-card-hd-btn:hover {
  background: #ddd6fe;
}
.pos-card-hd-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ede9fe;
  color: #6366f1;
  border-radius: 10px;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.1rem 0.45rem;
  min-width: 18px;
  margin-left: 0.2rem;
}
.pos-card-bd {
  padding: 0.875rem 1rem;
}
.pos-tabs {
  display: flex;
  gap: 0.3rem;
}
.pos-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border-radius: 7px;
  border: 1px solid transparent;
  background: none;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
}
.pos-tab-btn:hover {
  background: #f1f5f9;
}
.pos-tab-btn--active {
  background: #ede9fe;
  color: #6366f1;
  border-color: #ddd6fe;
}
.pos-tab-btn--active:hover {
  background: #ede9fe;
}
.pos-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem;
  text-align: center;
  font-size: 0.82rem;
  color: #94a3b8;
}

/* ── Timeline ─────────────────────────────────────────── */
.pos-tl-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #64748b;
  margin-bottom: 0.4rem;
  font-weight: 600;
}
.pos-tl-track {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
  position: relative;
}
.pos-tl-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s;
}
/* Timeline-pace marker — where consumption "should" be today if spend were
   even across the PO's start/end dates, so it can be compared at a glance
   against the actual .pos-tl-fill (billed-amount-based) bar. */
.pos-tl-marker {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: #1e293b;
  z-index: 2;
  cursor: help;
}
.pos-tl-caption {
  font-size: 0.72rem;
  color: #64748b;
  margin-top: 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

/* ── PO Details list ──────────────────────────────────── */
.pos-dl-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.575rem 1rem;
  border-bottom: 1px solid #f8fafc;
}
.pos-dl-row:last-child {
  border-bottom: none;
}
.pos-dl-icon {
  width: 18px;
  flex-shrink: 0;
  text-align: center;
  font-size: 0.875rem;
  margin-top: 0.05rem;
}
.pos-dl-lbl {
  font-size: 0.7rem;
  font-weight: 600;
  color: #94a3b8;
  width: 105px;
  flex-shrink: 0;
  padding-top: 0.05rem;
}
.pos-dl-val {
  font-size: 0.8rem;
  color: #1e293b;
  font-weight: 500;
}

/* ── Parties ──────────────────────────────────────────── */
.pos-parties-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
}
.pos-party {
  border-radius: 0.75rem;
  padding: 1rem;
  border: 1px solid;
  position: relative;
  overflow: hidden;
}
.pos-party::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.pos-party--vendor {
  background: #faf5ff;
  border-color: #e9d5ff;
}
.pos-party--vendor::before { background: #a855f7; }
.pos-party--client {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.pos-party--client::before { background: #3b82f6; }

.pos-party-hd {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
}
.pos-party-icon {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.pos-party--vendor .pos-party-icon { background: #a855f7; color: #fff; }
.pos-party--client .pos-party-icon { background: #3b82f6; color: #fff; }
.pos-party-label {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.pos-party--vendor .pos-party-label { color: #7e22ce; }
.pos-party--client .pos-party-label { color: #1d4ed8; }

.pos-party-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.pos-party-gstin {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.4rem;
  padding: 0.2rem 0.55rem;
  margin-bottom: 0.65rem;
}
.pos-party-gstin-lbl {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #94a3b8;
  text-transform: uppercase;
}
.pos-party-gstin-val {
  font-size: 0.72rem;
  font-weight: 700;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  color: #334155;
  letter-spacing: 0.02em;
}

.pos-party-row {
  font-size: 0.76rem;
  color: #475569;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
  line-height: 1.45;
}
.pos-party-row i {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  margin-top: 0.1rem;
  border-radius: 0.3rem;
  background: rgba(15, 23, 42, 0.05);
  color: #64748b;
}
.pos-party-row--address span { white-space: pre-line; }
.pos-party-row a { color: #475569; text-decoration: none; }
.pos-party-row a:hover { color: #1d4ed8; text-decoration: underline; }

.pos-party-contact {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(15, 23, 42, 0.12);
}
.pos-party-contact .pos-party-row:last-child { margin-bottom: 0; }

/* ── Prose / Terms ────────────────────────────────────── */
.pos-prose {
  font-size: 0.82rem;
  color: #374151;
  line-height: 1.6;
  white-space: pre-wrap;
}
.pos-section-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.pos-terms-section {
  margin-bottom: 0.875rem;
}
.pos-terms-section:last-child {
  margin-bottom: 0;
}
.pos-internal-note {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 0.5rem;
  padding: 0.75rem 0.875rem;
  margin-top: 0.5rem;
}

/* ── Line items table ─────────────────────────────────── */
.pos-li-scroll {
  overflow-x: auto;
}
.pos-li-tbl {
  width: 100%;
  border-collapse: collapse;
}
.pos-li-tbl thead tr {
  background: #fafbff;
  border-bottom: 2px solid #e2e8f0;
}
.pos-li-tbl thead th {
  padding: 0.5rem 0.75rem;
  font-size: 0.62rem;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pos-li-tbl tbody tr {
  border-bottom: 1px solid #f1f5f9;
}
.pos-li-tbl tbody tr:last-child {
  border-bottom: none;
}
.pos-li-tbl tbody tr:hover {
  background: #f8f7ff;
}
.pos-li-tbl td {
  padding: 0.55rem 0.75rem;
  vertical-align: middle;
}
.pos-li-idx {
  font-size: 0.7rem;
  font-weight: 700;
  color: #c7d2fe;
  width: 28px;
}
.pos-li-desc {
  font-weight: 700;
  font-size: 0.8rem;
  color: #0f172a;
}
.pos-li-cat {
  font-size: 0.65rem;
  color: #94a3b8;
  margin-top: 0.1rem;
}
.pos-li-badges {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.2rem;
  flex-wrap: wrap;
}
.pos-li-badge {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}
.pos-li-badge--gst {
  background: #ede9fe;
  color: #7c3aed;
}
.pos-li-badge--disc {
  background: #fee2e2;
  color: #dc2626;
}
.pos-li-qty {
  font-size: 0.75rem;
  color: #475569;
}
.pos-li-price {
  font-size: 0.78rem;
  font-weight: 600;
  color: #0f172a;
}
.pos-li-amount {
  font-size: 0.82rem;
  font-weight: 800;
  color: #0f172a;
}
.tar {
  text-align: right !important;
}

/* ── Financials ───────────────────────────────────────── */
.pos-fin {
  padding: 0.875rem 1rem;
  border-top: 2px solid #e2e8f0;
  background: #fafbff;
}
.pos-fin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #475569;
  padding: 0.15rem 0;
}
.pos-fin-val--tax {
  color: #6366f1;
  font-weight: 700;
}
.pos-fin-val--disc {
  color: #dc2626;
}
.pos-fin-row--total {
  font-size: 1rem;
  font-weight: 900;
  color: #0f172a;
  border-top: 1px solid #e2e8f0;
  padding-top: 0.625rem;
  margin-top: 0.375rem;
}

/* ── Approval rows ────────────────────────────────────── */
.pos-appr-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.625rem;
  margin-bottom: 0.625rem;
}
.pos-appr-row--submitted {
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.pos-appr-row--submitted .pos-appr-icon {
  color: #d97706;
}
.pos-appr-row--approved {
  background: #f0fdf4;
  border: 1px solid #a7f3d0;
}
.pos-appr-row--approved .pos-appr-icon {
  color: #059669;
}
.pos-appr-row--rejected {
  background: #fff5f5;
  border: 1px solid #fca5a5;
}
.pos-appr-row--rejected .pos-appr-icon {
  color: #dc2626;
}
.pos-appr-icon {
  font-size: 1.05rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.pos-appr-lbl {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
}
.pos-appr-person {
  font-size: 0.85rem;
  font-weight: 800;
  color: #1e293b;
}
.pos-appr-date {
  font-size: 0.68rem;
  color: #94a3b8;
}
.pos-rejection-reason {
  font-size: 0.75rem;
  color: #dc2626;
  margin-top: 0.25rem;
  font-style: italic;
  background: #fff5f5;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
}
.pos-review-notes {
  background: #f1f5f9;
  border-radius: 0.5rem;
  padding: 0.625rem 0.875rem;
  margin-top: 0.625rem;
}

/* ── Workflow action buttons ──────────────────────────── */
.pos-wf-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.875rem;
}
.pos-wf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.4rem 0.875rem;
  border-radius: 7px;
  border: 1.5px solid;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.12s;
  background: none;
}
.pos-wf-btn--ghost {
  color: #64748b;
  background: #f8fafc;
  border-color: #e2e8f0;
}
.pos-wf-btn--ghost:hover {
  background: #f1f5f9;
}
.pos-wf-btn--submit {
  color: #d97706;
  background: #fef3c7;
  border-color: #fde68a;
}
.pos-wf-btn--submit:hover {
  background: #fde68a;
}
.pos-wf-btn--approve {
  color: #059669;
  background: #d1fae5;
  border-color: #a7f3d0;
}
.pos-wf-btn--approve:hover {
  background: #a7f3d0;
}
.pos-wf-btn--reject {
  color: #dc2626;
  background: #fee2e2;
  border-color: #fca5a5;
}
.pos-wf-btn--reject:hover {
  background: #fca5a5;
}
.pos-wf-btn--view {
  color: #6366f1;
  background: #ede9fe;
  border-color: #ddd6fe;
  font-size: 0.72rem;
}
.pos-wf-btn--view:hover {
  background: #ddd6fe;
}
.pos-wf-btn--delete {
  color: #dc2626;
  background: #fff5f5;
  border-color: #fca5a5;
}
.pos-wf-btn--delete:hover {
  background: #fee2e2;
}

/* ── Documents ────────────────────────────────────────── */
.pos-doc-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  border: 1px solid #f1f5f9;
  margin-bottom: 0.4rem;
  background: #fafbff;
}
.pos-doc-row:last-child {
  margin-bottom: 0;
}
.pos-doc-icon {
  width: 28px;
  flex-shrink: 0;
  text-align: center;
  font-size: 1.25rem;
}
.pos-doc-info {
  flex: 1;
  min-width: 0;
}
.pos-doc-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pos-doc-meta {
  font-size: 0.65rem;
  color: #94a3b8;
}
.pos-doc-btns {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}
.pos-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  text-decoration: none;
  transition: all 0.12s;
}
.pos-icon-btn:hover {
  background: #ede9fe;
  color: #6366f1;
  border-color: #ddd6fe;
}

/* ── Project row ──────────────────────────────────────── */
.pos-project-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.pos-project-title {
  font-size: 0.875rem;
  font-weight: 800;
  color: #1e293b;
}
.pos-project-client {
  font-size: 0.72rem;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.15rem;
}

/* ── Field label (modals) ─────────────────────────────── */
.pos-field-lbl {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  margin-bottom: 0.3rem;
}

/* ── Modals ───────────────────────────────────────────── */
.pos-modal {
  border-radius: 1.125rem;
  overflow: hidden;
  border: none;
}
.pos-modal-hd {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
  background: #fafbff;
}
.pos-modal-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.pos-modal-hd .modal-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: #0f172a;
}

/* ── Professional Tax Master ─────────────────────────── */
.ptm-page {
  /* padding: 28px; */
  color: #0f172a;
  background: #f8fafc;
  min-height: calc(100vh - 72px);
}

.ptm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 560px);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 16px;
}

.ptm-hero--detail {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
}

.ptm-hero-main,
.ptm-toolbar,
.ptm-panel,
.ptm-detail-card,
.ptm-summary-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.ptm-hero-main {
  padding: 22px 24px;
}

.ptm-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ptm-kicker i {
  font-size: 15px;
}

.ptm-hero h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 900;
  color: #0f172a;
}

.ptm-hero p {
  margin: 8px 0 0;
  max-width: 760px;
  color: #64748b;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
}

.ptm-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ptm-summary-grid--detail {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ptm-summary-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 14px;
  min-height: 88px;
}

.ptm-summary-icon {
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: #eff6ff;
  color: #2563eb;
}

.ptm-summary-card strong {
  display: block;
  min-width: 0;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.ptm-summary-card span:last-child {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.ptm-summary-card--green .ptm-summary-icon {
  background: #ecfdf5;
  color: #059669;
}

.ptm-summary-card--amber .ptm-summary-icon {
  background: #fffbeb;
  color: #d97706;
}

.ptm-summary-card--cyan .ptm-summary-icon {
  background: #ecfeff;
  color: #0891b2;
}

.ptm-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  margin-bottom: 14px;
}

.ptm-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.ptm-field {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ptm-field--search {
  min-width: min(360px, 100%);
}

.ptm-field i {
  position: absolute;
  left: 12px;
  color: #94a3b8;
  pointer-events: none;
}

.ptm-input,
.ptm-select {
  height: 40px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 750;
  padding: 0 12px 0 36px;
  outline: none;
}

.ptm-input {
  width: 360px;
  max-width: 100%;
}

.ptm-select {
  min-width: 162px;
}

.ptm-input:focus,
.ptm-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.ptm-btn {
  height: 40px;
  border-radius: 7px;
  border: 1px solid transparent;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.ptm-btn--primary {
  background: #2563eb;
  color: #fff;
}

.ptm-btn--primary:hover {
  background: #1d4ed8;
  color: #fff;
}

.ptm-btn--ghost {
  background: #f8fafc;
  color: #475569;
  border-color: #e2e8f0;
}

.ptm-btn--ghost:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.ptm-filter-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.ptm-filter-chip,
.ptm-panel-count,
.ptm-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.ptm-filter-chip {
  max-width: 240px;
  padding: 5px 9px;
  color: #1d4ed8;
  background: #eff6ff;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ptm-panel {
  overflow: hidden;
}

.ptm-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}

.ptm-panel-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
}

.ptm-panel-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
}

.ptm-panel-count {
  padding: 6px 10px;
  color: #475569;
  background: #f1f5f9;
}

.ptm-table-wrap {
  overflow: auto;
}

.ptm-table {
  width: 100%;
  min-width: 1120px;
  border-collapse: separate;
  border-spacing: 0;
}

.ptm-table--slabs {
  min-width: 860px;
}

.ptm-table th {
  padding: 12px 16px;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
}

.ptm-table td {
  padding: 14px 16px;
  color: #334155;
  border-bottom: 1px solid #eef2f7;
  font-size: 13px;
  font-weight: 650;
  vertical-align: middle;
}

.ptm-table tbody tr:hover {
  background: #f8fafc;
}

.ptm-table tbody tr:last-child td {
  border-bottom: 0;
}

.ptm-table strong {
  color: #0f172a;
  font-weight: 900;
}

.ptm-table-action {
  text-align: right;
}

.ptm-state-cell {
  display: flex;
  align-items: center;
  gap: 11px;
}

.ptm-state-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #eef2ff;
  color: #4338ca;
  font-size: 14px;
  font-weight: 900;
}

.ptm-state-cell span:not(.ptm-state-mark),
.ptm-subline {
  display: block;
  margin-top: 3px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 750;
}

.ptm-muted {
  color: #64748b;
  font-weight: 750;
}

.ptm-status {
  padding: 5px 9px;
}

.ptm-status--active {
  color: #047857;
  background: #ecfdf5;
}

.ptm-status--inactive {
  color: #64748b;
  background: #f1f5f9;
}

.ptm-status--neutral {
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.ptm-status--month {
  color: #92400e;
  background: #fffbeb;
}

.ptm-slab-count {
  min-width: 34px;
  height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1d4ed8;
  background: #eff6ff;
  font-weight: 900;
}

.ptm-icon-link {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  background: #eff6ff;
  text-decoration: none;
  transition: all 0.14s ease;
}

.ptm-icon-link:hover {
  color: #fff;
  background: #2563eb;
}

.ptm-empty {
  padding: 46px 20px;
  text-align: center;
}

.ptm-empty i {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  background: #eff6ff;
  font-size: 22px;
  margin-bottom: 12px;
}

.ptm-empty h3 {
  margin: 0;
  color: #0f172a;
  font-size: 17px;
  font-weight: 900;
}

.ptm-empty p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 650;
}

.ptm-pagination {
  margin-top: 16px;
}

.ptm-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ptm-back-link {
  height: 38px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  color: #475569;
  background: #fff;
  border: 1px solid #e2e8f0;
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
}

.ptm-back-link:hover {
  color: #1d4ed8;
  border-color: #bfdbfe;
  background: #eff6ff;
}

.ptm-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.ptm-detail-card {
  padding: 14px 16px;
}

.ptm-detail-card span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ptm-detail-card strong {
  display: block;
  margin-top: 5px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.ptm-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  font-weight: 800;
}

.ptm-range i {
  color: #94a3b8;
  font-size: 12px;
}

.ptm-amount {
  color: #047857;
  font-size: 14px;
  font-weight: 900;
}

@media (max-width: 1180px) {
  .ptm-hero,
  .ptm-hero--detail {
    grid-template-columns: 1fr;
  }

  .ptm-summary-grid,
  .ptm-summary-grid--detail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ptm-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ptm-page {
    padding: 16px;
  }

  .ptm-hero-main {
    padding: 18px;
  }

  .ptm-hero h1 {
    font-size: 24px;
  }

  .ptm-summary-grid,
  .ptm-summary-grid--detail,
  .ptm-detail-grid {
    grid-template-columns: 1fr;
  }

  .ptm-toolbar,
  .ptm-panel-head,
  .ptm-topline {
    align-items: stretch;
    flex-direction: column;
  }

  .ptm-search,
  .ptm-field,
  .ptm-field--search,
  .ptm-input,
  .ptm-select,
  .ptm-btn,
  .ptm-back-link {
    width: 100%;
  }

  .ptm-filter-meta {
    justify-content: flex-start;
  }
}