:root {
  /* BlueCloudHR brand palette - Logo Blue */
  --bc-primary: #2196F3;
  /* Blue 500: vibrant, matches logo */
  --bc-primary-soft: #64B5F6;
  /* Blue 400: lighter accent */
  --bc-navy: #1565C0;
  /* Blue 800: deep professional blue */
  --bc-accent: #FF9800;
  /* Orange 500: warm contrast */
  --bc-gray: #64748B;
  /* Slate 500: neutral balance */
  --bc-white: #FFFFFF;
  /* White: clarity */

  /* Semantic tokens wired to brand palette */
  --bc-bg-page: var(--bc-white);
  --bc-bg-surface: #F8FAFC;
  --bc-text-main: #0F172A;
  --bc-text-muted: var(--bc-gray);
  --bc-border-subtle: #E5E7EB;

  /* Global utility tokens mapped to brand + neutrals */
  --brand: var(--bc-primary);
  --brand-light: var(--bc-primary-soft);

  --gray-900: #0F172A;
  --gray-700: #374151;
  --gray-500: #6B7280;
  --gray-300: #D1D5DB;
  --gray-200: #E5E7EB;
  --gray-100: #F3F4F6;

  --danger: #DC2626;
  --danger-light: #FEE2E2;

  --bg: var(--bc-bg-surface);
  --panel: var(--bc-white);
  --text: var(--bc-text-main);
  --muted: var(--bc-text-muted);
  --border: #E5E7EB;
  --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.03), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --radius: 16px;
  --cardhead-bg: #EFF6FF;
  /* light blue header background */
  --cardhead-border: #DBEAFE;
  /* matching light blue border */
  --card-border: var(--bc-border-subtle);
  /* stronger card outline */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --topbar-h: 64px;
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 52px;
  --z-topbar: 1000;
  --z-sidebar: 990;
  --z-backdrop: 980;
  --min-app-width: 1120px;
  /* enforce a sane minimum desktop width */

  /* Extended Color Palette */
  /* Success */
  --success: #10b981;
  --success-light: #d1fae5;
  --success-dark: #047857;

  /* Warning */
  --warning: #f59e0b;
  --warning-light: #fef3c7;
  --warning-dark: #d97706;

  /* Info */
  --info: #06b6d4;
  --info-light: #cffafe;
  --info-dark: #0891b2;

  /* Purple */
  --purple: #8b5cf6;
  --purple-light: #ede9fe;
  --purple-dark: #6d28d9;

  /* Indigo */
  --indigo: #6366f1;
  --indigo-light: #e0e7ff;
  --indigo-dark: #4f46e5;

  /* Pink */
  --pink: #ec4899;
  --pink-light: #fce7f3;
  --pink-dark: #db2777;
}

/* Reset / base */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  overflow-x: auto;
}

/* enable horizontal scroll when below min width */
body.layout {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  min-width: var(--min-app-width);
}

/* Global link styles */
a {
  color: var(--brand);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--bc-navy);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Keep top-level wrappers at least the minimum app width */
.topbar,
.app-shell,
main.container {
  min-width: var(--min-app-width);
}

@media (max-width: 1120px) {

  body.layout,
  .topbar,
  .app-shell,
  main.container {
    min-width: 100%;
  }
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  /* scrolls with page */
  display: grid;
  grid-template-columns: 44px 240px 1fr auto;
  align-items: center;
  gap: 12px;
  height: var(--topbar-h);
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.brand-name {
  font-weight: 600;
}

.topbar .topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.topbar .notif {
  position: relative;
}

.topbar .notif-dot {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px #fff;
}

.topbar .user-chip {
  padding: 6px 10px;
}

.topbar .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e5e7eb;
  display: inline-block;
}

.topbar .global-search {
  display: flex;
}

.topbar .global-search input {
  width: 100%;
  max-width: 720px;
}

.icon-btn,
.user-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  background: #e0f2fe;
  /* Sky 100 - light sky background */
  color: #075985;
  /* Sky 800 - deep sky text */
  border: 1px solid #bae6fd;
  /* Sky 200 - soft border */
  text-transform: capitalize;
}

.global-search input {
  width: 100%;
  max-width: 560px;
  padding: 10px 32px 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Search wrapper positioning for autocomplete */
.search-wrapper {
  position: relative;
  width: 100%;
}

/* Autocomplete dropdown */
.search-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 400px;
  overflow-y: auto;
  z-index: 1000;
}

.autocomplete-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s ease;
}

.autocomplete-item:hover,
.autocomplete-item.active {
  background-color: #f9fafb;
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-name {
  font-weight: 600;
  color: var(--bc-text-main);
  margin-bottom: 2px;
}

.autocomplete-meta {
  font-size: 0.875rem;
  color: var(--bc-text-muted);
}


/* Hide native WebKit search clear button (so we use our custom one) */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* --- Topbar polish --- */
.topbar {
  gap: 14px;
}

.topbar .brand {
  min-width: 0;
}

.topbar .brand img {
  display: block;
}

.topbar .brand-name {
  font-weight: 700;
  letter-spacing: .2px;
}

.topbar-center {
  display: flex;
  align-items: center;
}

.topbar .global-search {
  width: 100%;
}

.topbar .global-search input {
  width: 100%;
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .15);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.topbar .global-search input:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .1);
}

/* --- Search bar: center in topbar and set fixed width --- */
.topbar .global-search {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  transform: translateX(-24px);
}

.topbar .global-search input {
  width: 420px !important;
  max-width: 420px !important;
  padding: 10px 40px 10px 16px;
  font-size: 16px;
  /* larger input text */
  line-height: 1.2;
}

.topbar-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.topbar .icon-btn {
  height: 34px;
}

.topbar .sidebar-toggle.icon-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
  justify-content: center;
  background: transparent;
  border: none;
  transition: background 0.15s;
}

.topbar .sidebar-toggle.icon-btn:hover {
  background: #f1f5f9;
}

.topbar .icon-btn svg {
  display: block;
  color: #3b82f6;
}

/* Ensure the hamburger/close icon matches side-nav icon sizing */
.topbar .sidebar-toggle svg {
  width: 20px;
  height: 20px;
}

/* Brand link styling */
.brand-link {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.15s;
}

.brand-link:hover {
  opacity: 0.8;
}

/* Notifications badge + panel */
.topbar .notif-menu {
  position: relative;
}

.topbar .notif-btn {
  position: relative;
}

.topbar .notif-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  color: #fff;
  background: #ef4444;
  box-shadow: none;
  text-align: center;
}

/* Panel mirrors user-menu styling */
.topbar .notif-menu .menu {
  list-style: none;
  margin: 8px 0 0;
  padding: 6px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  min-width: 320px;
  max-height: 420px;
  overflow: auto;
  display: none;
  z-index: 120;
}

.topbar .notif-menu.open .menu {
  display: block;
}

.topbar .notif-menu .menu-empty {
  padding: 10px 12px;
  color: var(--muted);
}

/* Optional: borderless bell if you prefer ghost style in popover mode */
.icon-btn.borderless {
  border-color: transparent;
  box-shadow: none;
}

/* User menu dropdown */
.user-menu {
  position: relative;
}

.user-chip {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
}

.user-chip .avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-weight: 600;
  color: #111827;
  background: #e5e7eb;
}

.user-chip .user-name {
  margin: 0 4px;
  color: var(--text);
}

.user-menu .menu,
.topbar-action .menu {
  list-style: none;
  padding: 8px;
  position: fixed;
  right: 16px;
  /* align with topbar horizontal padding */
  top: calc(var(--topbar-h) + 6px);
  /* appear just below the 64px topbar */
  margin: 0;
  /* fixed positioned; use explicit top spacing */
  z-index: 120;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  min-width: 180px;
  display: none;
  overflow: hidden;
}

.user-menu.open .menu,
.topbar-action.open .menu {
  display: block;
}

.user-menu .menu li {
  margin: 4px 0;
}

.user-menu .menu a {
  display: block;
  padding: 12px 16px;
  color: var(--text);
  text-decoration: none;
}

.user-menu .menu a:hover {
  background: #f1f5f9;
}

/* Notification bell */
.notif {
  position: relative;
}

.notif .notif-dot {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px #fff;
}

/* Shell / Sidebar (PERMANENT OVERLAY) */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
  height: calc(100vh - var(--topbar-h));
  overflow: hidden;
}



.internal-page .container,
.internal-page .page-content {
  padding-bottom: 48px !important;
}

.internal-page main.container {
  align-self: start;
}

/* Lock grid placement so content never shifts when sidebar overlays */
.app-shell>.sidebar {
  grid-column: 1;
}

.app-shell>main.container {
  grid-column: 2;
}

/* Keep main above the page background and unaffected by overlay math */
main.container {
  position: relative;
  z-index: 1;
  overflow-y: auto;
  height: 100%;
}

/* Ensure the backdrop (if ever re-enabled) spans both columns */
.app-shell>.sidebar+.sidebar-backdrop {
  grid-column: 1 / span 2;
}

.sidebar {
  background: var(--brand);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px;
  position: sticky;
  /* in the flow of the grid column */
  top: 0;
  height: 100vh;
  /* Keep the element full width but show only the rail using a translate.
     This avoids reflow and eliminates the "jerk" on collapse. */
  width: var(--sidebar-w);
  z-index: var(--z-sidebar);
  transform: translateX(calc(var(--sidebar-w-collapsed) - var(--sidebar-w)));
  transition: transform 180ms cubic-bezier(.2, .6, .2, 1);
  will-change: transform;
  overflow: visible;
}

.sidebar.is-open {
  transform: translateX(0);
  box-shadow: var(--shadow);
}

.sidebar,
.sidebar .side-nav,
.sidebar .nav-item,
.sidebar .nav-label {
  color: #ffffff;
}

/* Hover effects for inactive items only */
.sidebar .nav-item:not(.active):hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* Collapsed hover: only the icon gets a subtle background; not full-width */
.sidebar:not(.is-open) .nav-item:not(.active):hover {
  background: transparent;
}

.sidebar:not(.is-open) .nav-item:not(.active):hover .nav-icon {
  position: relative;
  height: 22px;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar:not(.is-open) .nav-item:not(.active):hover .nav-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  pointer-events: none;
}

/* Collapsed rail: active page indicator is a rounded square around the icon only */
.sidebar:not(.is-open) .nav-item.active {
  background: transparent;
  /* no full-width highlight */
  /* keep the same padding as other items so height never changes */
}

.sidebar:not(.is-open) .nav-item.active .nav-label {
  display: none;
}

.sidebar:not(.is-open) .nav-item.active .nav-icon {
  position: relative;
  height: 22px;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar:not(.is-open) .nav-item.active .nav-icon {
  z-index: 1;
}

.sidebar:not(.is-open) .nav-item.active .nav-icon::before {
  z-index: 0;
}

.sidebar:not(.is-open) .nav-item.active .nav-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  /* square footprint for parity with expanded pill */
  height: 36px;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  /* rounded square */
  pointer-events: none;
}

.sidebar:not(.is-open) .nav-item.active .nav-icon {
  background: transparent !important;
  padding: 0 !important;
}

/* Collapsed: center icons in the visible rail */
.sidebar:not(.is-open) .nav-item {
  justify-content: center;
  padding: 0;
}

/* Active item styling (expanded only) */
.sidebar.is-open .nav-item.active,
.sidebar.is-open .nav-item.active:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Collapsed: never draw a full-width active background (use icon badge instead) */
.sidebar:not(.is-open) .nav-item.active {
  background: transparent !important;
}

/* Remove left rail on active */
.sidebar .nav-item.active::before {
  content: none !important;
}

.nav-icon svg {
  stroke: #ffffff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-icon svg * {
  fill: none !important;
  stroke: inherit !important;
}

.sidebar .nav-item.active .nav-icon svg,
.sidebar .nav-item.active .nav-icon svg * {
  stroke-width: 2.2;
}

.nav-label {
  color: #ffffff;
}

.side-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.side-nav {
  display: grid;
  gap: 4px;
}

.side-nav .nav-item {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  position: relative;
  line-height: 1.2;
  width: 100%;
}

/* ===== Sidebar divider and bottom cluster (Settings/Admin) ===== */
.nav-divider {
  height: 1px;
  margin: 8px 10px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 1px;
}

.nav-bottom {
  margin-top: auto;
  /* push to bottom */
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-bottom .nav-item {
  padding: 10px 14px;
}

/* =====================
   Table Styles
   ===================== */
.table,
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.table th,
.table td,
.data-table th,
.data-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.table th,
.data-table th {
  font-weight: 600;
  color: var(--bc-text-muted);
  text-transform: none;
}

.table-hover tbody tr:hover,
.data-table tbody tr:hover {
  background-color: var(--bc-bg-surface);
}

.table-empty td {
  text-align: center;
  color: var(--bc-text-muted);
  padding: 2rem;
}

/* Utilities */
.w-full {
  width: 100%;
}


.side-nav .nav-item {
  min-width: 0;
}

.sidebar:not(.is-open) .nav-label {
  display: none;
}

.sidebar.is-open .nav-label {
  display: inline-flex;
}

.side-nav .nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 22px;
  flex-shrink: 0;
  line-height: 0;
}

.side-nav .nav-icon svg {
  width: 20px !important;
  height: 20px !important;
  display: block;
}

.side-nav .nav-label {
  display: inline-flex;
  align-items: center;
  height: 20px;
}

/* Submenu Navigation */
.nav-item.has-submenu {
  display: flex;
  flex-direction: column;
}

.nav-item-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: none;
  background: none;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.nav-item-btn:hover {
  background: var(--hover);
  color: var(--bc-primary);
}

.nav-item.has-submenu.active>.nav-item-btn {
  background: var(--bc-primary-light);
  color: var(--bc-primary);
}

.nav-arrow {
  margin-left: auto;
  display: flex;
  align-items: center;
  transition: transform 0.2s;
}

.nav-item-btn[aria-expanded="true"] .nav-arrow {
  transform: rotate(180deg);
}

.sidebar:not(.is-open) .nav-arrow {
  display: none;
}

.nav-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.nav-submenu.is-open {
  max-height: 200px;
}

.sidebar:not(.is-open) .nav-submenu {
  display: none;
}

.nav-subitem {
  display: flex;
  align-items: center;
  padding: 10px 16px 10px 48px;
  color: var(--muted);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s;
  font-size: 0.9rem;
}

.nav-subitem:hover {
  background: var(--hover);
  color: var(--text);
}

.nav-subitem.active {
  background: var(--bc-primary-light);
  color: var(--bc-primary);
  font-weight: 600;
}

.side-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.collapse-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
}

/* Backdrop disabled (no page dim when nav opens) */
.sidebar-backdrop {
  display: none !important;
}

/* Nav sections and headings (scoped to sidebar) */
.nav-section {
  margin: 8px 0;
}

.side-nav .nav-heading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, 0.7);
  padding: 10px 12px;
  text-transform: uppercase;
}

/* Compact badges on nav items (e.g., counts) */
.nav-badge {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  background: #E3F2FD;
  /* Blue 50 - light blue background */
  color: #1565C0;
  /* Blue 800 - deep blue text */
  border: 1px solid #BBDEFB;
  /* Blue 100 - soft border */
}

/* Keyboard focus styles for accessibility */
.nav-item:focus {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.container {
  padding: 16px 24px 12px;
}

/* Control page bottom breathing room without huge gaps */
.page-content {
  padding-bottom: 48px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.page-title {
  margin: 0;
  font-size: 22px;
}

.page-subtitle {
  margin: 4px 0 0 0;
  color: var(--muted);
}

/* Breadcrumbs / back links */
.crumbs {
  color: var(--muted);
  font-size: 13px;
  margin: 2px 0 10px;
}

/* Shared visual style for breadcrumb links and page "back" links */
.crumbs a,
.link-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #4c1d95;
  /* rich link purple to match style guide */
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}


/* Alerts (flash) */
.alerts {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.alert {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
}

.alert-success {
  border-color: #bbf7d0;
  background: #ecfdf5;
}

.alert-warning {
  border-color: #fde68a;
  background: #fffbeb;
}

.alert-error,
.alert-danger {
  border-color: #fecaca;
  background: #fef2f2;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--gray-700);
  font-size: 0.9rem;
  /* slightly larger, more readable */
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;
}

.btn-group {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}


.btn:hover {
  background-color: #f8fafc;
}

.btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

.btn:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

/* Size modifiers */
.btn-sm {
  padding: 4px 10px;
  font-size: 0.8rem;
  border-radius: 6px;
}

.btn-lg {
  padding: 10px 18px;
  font-size: 1rem;
  border-radius: 10px;
}

/* Primary (brand) buttons */
.btn-primary,
.btn.btn--primary,
.btn.primary {
  background-color: var(--bc-primary);
  border-color: var(--bc-primary);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
}

.btn-primary:hover,
.btn.btn--primary:hover,
.btn.primary:hover {
  background-color: #1d4ed8;
  /* slightly deeper blue */
  border-color: #1d4ed8;
}

.btn-primary:active,
.btn.btn--primary:active,
.btn.primary:active {
  background-color: #1e40af;
  border-color: #1e40af;
}

/* Ghost buttons (minimal chrome, used in headers, modals, etc.) */
.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--gray-700);
  border-radius: 8px;
}

.btn-ghost:hover {
  background-color: #f3f4f6;
  border-color: #e5e7eb;
}

/* Back button - consistent navigation style */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 14px;
  background-color: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--bc-text-main);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}

.btn-back:hover {
  background-color: #f9fafb;
  border-color: var(--gray-300);
  color: var(--bc-primary);
}

.btn-back svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Outline buttons (subtle secondary actions) */
.btn-outline {
  background-color: #ffffff;
  border-color: var(--border);
  color: var(--gray-700);
  border-radius: 8px;
}

.btn-outline:hover {
  background-color: #f9fafb;
}

/* Danger buttons (destructive actions) */
.btn-danger {
  background-color: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}

.btn-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
}

.btn-danger:active {
  background-color: #991b1b;
  border-color: #991b1b;
}

/* Cards / grids */
.cards {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(12, 1fr);
}

.card {
  grid-column: span 12;
  background: var(--panel);
  border: 1px solid var(--bc-border-subtle);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.panel {
  background: var(--bc-white);
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid transparent;
  /* Optional: keeps box model consistent */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  /* Subtle lift */
}

.card-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1.5rem 1.5rem 0.75rem;
  min-height: 72px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.card-head::after {
  content: none;
}

.card-head h1,
.card-head h2,
.card-head h3 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--bc-text-main);
}

/* Even tighter headers in compact grids */
.cards.cards--compact .card-head {
  padding: 8px 12px 8px 16px;
  min-height: 40px;
  background: #fff;
  border-bottom-color: var(--border);
}

.cards.cards--compact .card-head::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--brand);
  /* match sidenav color exactly */
  opacity: 1;
  border-top-left-radius: var(--radius);
}

.cards.cards--compact .card-head h1,
.cards.cards--compact .card-head h2,
.cards.cards--compact .card-head h3 {
  font-size: 15px;
}

/* --- Card header color themes (opt-in) --- */
/* Subtle brand-tinted header */
.card.card--brandhead .card-head {
  background: rgba(37, 99, 235, 0.06);
  /* brand 6% */
  border-bottom-color: rgba(37, 99, 235, 0.22);
  /* brand 22% */
}

.card.card--brandhead .card-head h1,
.card.card--brandhead .card-head h2,
.card.card--brandhead .card-head h3 {
  color: var(--text);
}

/* Neutral gray header to match app palette */
.card.card--grayhead .card-head {
  background: #F3F4F6;
  /* Tailwind-ish gray-100 */
  border-bottom-color: #E5E7EB;
  /* matches --border */
}

.card.card--grayhead .card-head h1,
.card.card--grayhead .card-head h2,
.card.card--grayhead .card-head h3 {
  color: var(--text);
}

/* Compact mode keeps the slimmer padding regardless of theme */
.cards.cards--compact .card.card--brandhead .card-head,
.cards.cards--compact .card.card--grayhead .card-head {
  padding: 8px 12px;
  min-height: 40px;
}

.card-body {
  padding: 24px 1.5rem 1.5rem;
  /* Consistent top padding for all card bodies */
}

/* Removed conditional padding rule - was causing inconsistent spacing
.card-body:not(:has(.table-wrapper)):not(:has(table.data-table)) {
  padding-top: 24px;
}
*/

/* Tighten the first line of content below the header divider */
.card-body h1:first-child,
.card-body h2:first-child,
.card-body h3:first-child,
.card-body h4:first-child,
.card-body p:first-child {
  margin-top: 2px;
}

/* Make tables span full card width inside card bodies */
.card-body .table-wrapper {
  margin-left: -24px;
  margin-right: -24px;
}

/* When a table (or table wrapper) is the first element in the card body,
   pull it up to sit directly against the card header divider so there is
   no extra white band above the header row. */
.card-body>.table-wrapper:first-child,
.card-body>table.data-table:first-child {
  margin-top: 0;
  margin-left: -24px;
  margin-right: -24px;
  /* Extend full width of card */
}

/* When a table is the last element in the card body, pull it down slightly
   so the content sits closer to the rounded card edge without a tall gap. */
.card-body>.table-wrapper:last-child,
.card-body>table.data-table:last-child {
  margin-bottom: -24px;
  margin-left: -24px;
  margin-right: -24px;
  /* Extend full width of card */
}

.card-list {
  list-style: none;
  margin: 0;
  padding: 12px 16px;
  display: grid;
  gap: 8px;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.kpi {
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 88px;
  text-align: center;
}

.kpi-value {
  font-size: 20px;
  font-weight: 700;
}

.kpi-label {
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

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

/* --- Status Indicators (Dots) --- */
.status-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--bc-gray);
  position: relative;
  cursor: help;
  display: inline-block;
}

.status-indicator-dot.status-active {
  background-color: #22c55e;
  /* Green */
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

.status-indicator-dot.status-inactive {
  background-color: var(--bc-gray);
}

/* Tooltip for status dots */
.status-indicator-dot::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 0.75rem;
  background: #1e293b;
  color: white;
  font-size: 0.75rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
  pointer-events: none;
  margin-bottom: 8px;
  z-index: 10;
}

.status-indicator-dot::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1e293b;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
  margin-bottom: 0px;
  z-index: 10;
}

.status-indicator-dot:hover::before,
.status-indicator-dot:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-2px);
}

.action {
  display: block;
  text-decoration: none;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.side-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Footer */
.footer {
  padding: 16px 24px;
  color: var(--muted);
  text-align: center;
}

/* Responsive */
@media (max-width: 1200px) {
  .topbar {
    grid-template-columns: 44px 200px 1fr auto;
  }

  .global-search input {
    max-width: 560px;
  }
}

@media (max-width: 1024px) {
  :root {
    --sidebar-w: 300px;
  }
}

@media (max-width: 900px) {
  :root {
    --sidebar-w: 280px;
  }
}

@media (max-width: 640px) {
  :root {
    --sidebar-w: 260px;
  }
}

@media (max-width: 640px) {
  .topbar {
    grid-template-columns: 44px 1fr auto;
  }

  .brand-name {
    display: none;
  }

  .global-search input {
    max-width: 100%;
  }

  .cards {
    grid-template-columns: 1fr;
  }
}

.search-wrapper {
  position: relative;
  display: inline-block;
  width: 420px;
  /* matches centered search width */
}

.clear-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  /* keep close to the edge */
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
  border-radius: 50%;
  width: 20px;
  /* bigger circle-x */
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.clear-btn svg {
  width: 20px;
  height: 20px;
}

.clear-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.clear-btn[hidden] {
  display: none !important;
}

/* ===== Global table styling (shared across app) ===== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

/* Header row: light band, uppercase labels, subtle dividers */
.data-table thead th:not(.checkbox-cell) {
  text-align: left;
  font-weight: 600;
  padding: 0.65rem 0.85rem;
  color: #6b7280;
  background-color: #f7f8fc;
  /* light header band */
  border-bottom: 1px solid var(--card-border);
  /* tie into card border */
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Body rows: single-line grid with soft separators */
.data-table tbody tr {
  border-top: 1px solid #eef0f7;
}

.data-table tbody tr:hover {
  background-color: #fafbff;
  /* very subtle hover */
}

/* Clickable rows */
.data-table tbody tr.clickable-row {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.data-table tbody tr.clickable-row:hover {
  background-color: #f3f4f6;
}

.data-table td {
  padding: 0.65rem 0.85rem;
  vertical-align: middle;
  color: #111827;
}

/* Empty-state row inside a card table (e.g., "No absence requests...") */
.data-table tr.table-empty-row td {
  padding: 1rem 0.85rem;
  color: var(--muted);
}

.data-table tr.table-empty-row:hover {
  background-color: transparent;
  /* keep empty message neutral */
}

/* ===== Dashboard layout polish ===== */
/* Keep cards stretching to equal height within the grid */
.cards,
.cards.cards--compact {
  align-items: stretch;
}

/* Ensure the compact grid has comfortable spacing below the full-width Action Items card */
.cards.cards--compact {
  margin-top: 16px;
  grid-template-columns: repeat(12, 1fr);
}

/* Override older nth-child spans with compact-specific layout:
   2-column: At a glance (8 cols) + Recent activity (4 cols) */
@media (min-width: 900px) {
  .cards.cards--compact .card:nth-child(1) {
    grid-column: span 8;
  }

  .cards.cards--compact .card:nth-child(2) {
    grid-column: span 4;
  }
}

/* Stack on small screens */
@media (max-width: 899px) {
  .cards.cards--compact .card {
    grid-column: span 12;
  }
}

/* Card internals: prevent odd header/body spacing and clipping */
.card {
  overflow: hidden;
}

/* ===== Hero row: Task Center + Upcoming Dates ===== */
.cards.cards--hero {
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
  align-items: stretch;
  margin-bottom: var(--space-4);
}

@media (min-width: 900px) {
  .cards.cards--hero .card:nth-child(1) {
    grid-column: span 8;
  }

  .cards.cards--hero .card:nth-child(2) {
    grid-column: span 4;
  }
}

@media (max-width: 899px) {
  .cards.cards--hero .card {
    grid-column: span 12;
  }
}

/* Standalone card spacing */
section.card {
  margin-bottom: 0;
}

/* ===== Masthead footer (below topbar) ===== */
.mastfoot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 12px;
  padding: 6px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.75));
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(4px);
  font-size: 13px;
  color: var(--muted);
  min-width: var(--min-app-width);
}

.mastfoot-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mastfoot-center {
  justify-self: center;
  color: var(--text);
}

.mastfoot-right {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.mastfoot .link {
  color: var(--text);
  text-decoration: none;
}

.mastfoot .link:hover {
  text-decoration: underline;
}

.mastfoot .sep {
  opacity: .6;
}

.mastfoot .version {
  color: var(--muted);
}

/* Environment badges */
.env-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid transparent;
}

.env-badge.prod {
  background: #eef7ff;
  color: #1857d1;
  border-color: rgba(24, 87, 209, .15);
}

/* Blue: production */
.env-badge.staging,
.env-badge.stage,
.env-badge.test {
  background: #fff7e6;
  color: #a86b00;
  border-color: rgba(168, 107, 0, .2);
}

/* Amber: staging */
.env-badge.dev,
.env-badge.development {
  background: #eaf9f0;
  color: #147a4b;
  border-color: rgba(20, 122, 75, .2);
}

/* Green: dev */
.env-badge.qa {
  background: #f4eaff;
  color: #5a34a3;
  border-color: rgba(90, 52, 163, .2);
}

/* Purple: QA */

@media (max-width: 900px) {
  .mastfoot {
    grid-template-columns: 1fr;
    row-gap: 6px;
    text-align: left;
  }

  .mastfoot-center {
    justify-self: start;
  }

  .mastfoot-right {
    justify-self: start;
  }
}

/* ===== Footer-only meta bar ===== */
.footer {
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(3px);
}

.footer-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 13px;
}

.footer-left,
.footer-center,
.footer-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.footer-center {
  justify-content: center;
  text-align: center;
  color: var(--text);
}

.footer-right {
  justify-content: end;
}

.footer .link {
  color: var(--text);
  text-decoration: none;
}

.footer .link:hover {
  text-decoration: underline;
}

.footer .version {
  color: var(--muted);
}

.footer-copy {
  padding: 10px 16px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

/* Reuse env-badge tokens in footer context */
.footer .env-badge {
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid transparent;
}

@media (max-width: 900px) {
  .footer-meta {
    grid-template-columns: 1fr;
    row-gap: 6px;
    text-align: left;
  }

  .footer-center {
    justify-content: start;
    text-align: left;
  }

  .footer-right {
    justify-content: start;
  }
}

/* Footer aligned with content column (not full page width) */
.app-shell>.footer {
  grid-column: 2;
  /* occupy main content column */
  width: 100%;
}

/* ===== Content chips (dates, priorities, etc. inside cards) ===== */
.chip {
  font-size: 12px;
  line-height: 18px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #E3F2FD;
  /* Blue 50 - light blue background */
  color: #1565C0;
  /* Blue 800 - deep blue text */
  border: 1px solid #BBDEFB;
  /* Blue 100 - soft border */
  box-shadow: none;
  white-space: nowrap;
  vertical-align: middle;
}

.chip+.chip {
  margin-left: 6px;
}

/* Card list items use default block flow; date chips are styled separately */
.card-list>li {
  display: block;
}

/* ===== Avatar-only user menu + borderless notification (topbar) ===== */
/* Make the user chip display only the avatar (no name, no caret, no pill border) */
.topbar .user-chip {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  /* remove pill shape */
}

/* Hide any username text and caret/chevron inside the chip */
.topbar .user-chip .user-name,
.topbar .user-chip .caret,
.topbar .user-chip .chev,
.topbar .user-chip .label {
  display: none !important;
}

/* Slightly larger avatar for better tap target */
.topbar .user-chip .avatar,
.topbar .avatar {
  width: 36px !important;
  height: 36px !important;
  background: #dbeafe !important;
  color: #3b82f6 !important;
  border: 2px solid #3b82f6 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Unified wrapper for all topbar action items */
.topbar .topbar-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  position: relative;
  flex-shrink: 0;
}

/* Add extra space before the user avatar */
.topbar .topbar-action:last-child {
  margin-left: 8px;
}

/* Remove the border/pill look from all header icon buttons */
.topbar .alerts-btn,
.topbar .actions-btn,
.topbar .notif-btn,
.topbar .notif .icon-btn {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: 36px !important;
  width: 36px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.topbar .alerts-btn svg,
.topbar .actions-btn svg,
.topbar .notif-btn svg {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  color: #3b82f6;
  flex-shrink: 0;
}

/* Unified badge styling for all header icon buttons */
.topbar .alerts-btn .nav-badge,
.topbar .actions-btn .nav-badge,
.topbar .notif-btn .nav-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 18px;
  font-weight: 600;
  color: #fff;
  background: #3b82f6;
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Slight adjustment for alerts badge to align with others */
.topbar .alerts-btn .nav-badge {
  top: -5px;
}

/* Keyboard focus ring for accessibility on avatar and bell */
.topbar .user-chip:focus-visible,
.topbar .notif-btn:focus-visible,
.topbar .notif .icon-btn:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Extra spacing between notification icon and avatar */
.topbar .notif-menu {
  margin-right: 16px;
}

@media (max-width: 600px) {
  .topbar .notif-menu {
    margin-right: 10px;
  }
}

/* ===== Avatar tweaks: add border; hide any residual down arrow in user menu ===== */
/* Add a subtle border around the circular avatar */
.topbar .user-chip .avatar {
  border: 2px solid #e2e8f0;
  /* slate-200 */
  background: #fff;
  /* crisp against the border */
}

/* Belt-and-suspenders: remove any chevron/down-arrow that might still render */
.topbar .user-chip .chevron,
.topbar .user-chip .chevron-down,
.topbar .user-chip .dropdown-icon,
.topbar .user-chip .dropdown-caret,
.topbar .user-chip svg.chevron,
.topbar .user-chip svg.chevron-down {
  display: none !important;
}

/* ===== Topbar Team Alerts (actionable) ===== */
.topbar .alerts-btn {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: 32px !important;
  width: 32px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.topbar .alerts-menu {
  margin-right: 12px;
}

.topbar .alerts-menu .nav-badge {
  right: -6px;
  top: -6px;
  position: absolute;
}

/* Dropdown panel for alerts (fixed below top bar, left of bell) */
.alerts-menu {
  position: relative;
}

.alerts-menu .menu {
  list-style: none;
  padding: 6px;
  margin: 0;
  position: fixed;
  z-index: 120;
  min-width: 220px;
  right: 100px;
  /* align right edge with Team Alerts icon */
  top: calc(var(--topbar-h) + 6px);
  /* align with user menu offset */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  display: none;
}

.alerts-menu .menu[hidden] {
  display: none;
}

.alerts-menu.open .menu,
.alerts-menu .menu:not([hidden]) {
  display: block;
}

.alerts-menu .menu li {
  padding: 0;
}

.alerts-menu .menu li a {
  text-decoration: none;
  color: inherit;
}

.alerts-menu .menu li a:hover {
  background: var(--bg-muted, #f1f5f9);
  border-radius: 6px;
}

.alerts-menu .menu li.muted {
  color: var(--muted);
}

/* Focus visibility */
.topbar .alerts-btn:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
  border-radius: 8px;
}

/* ===== Team Alerts dropdown presentation ===== */
/* Button badge (differentiate from red notif badge) */
.topbar .alerts-menu .nav-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  /* blue to distinguish from bell */
  box-shadow: none;
  text-align: center;
}

/* Panel container: size & scrolling */
.alerts-menu .menu {
  min-width: 300px;
  /* a bit wider for readable rows */
  max-height: 420px;
  /* same vertical rhythm as notifications */
  overflow: auto;
}

/* Header row */
.alerts-menu .menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  color: var(--text);
}

.alerts-menu .menu-title {
  font-weight: 700;
}

.alerts-menu .menu-count {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: #eef2ff;
  /* soft blue */
  color: #3730a3;
  border: 1px solid #e0e7ff;
}

/* Divider rule */
.alerts-menu .menu-divider {
  height: 1px;
  margin: 6px 6px;
  background: var(--border);
  border-radius: 1px;
}

/* Footer CTA */
.alerts-menu .menu-footer a {
  display: block;
  padding: 8px 8px;
  text-align: center;
  text-decoration: none;
  color: var(--brand);
  font-weight: 600;
}

.alerts-menu .menu-footer a:hover {
  background: #f1f5f9;
  border-radius: 6px;
}

/* Items */
.alerts-menu .menu li[role="menuitem"] a,
.alerts-menu .menu li[role="menuitem"] span {
  font-size: 14px;
}

/* ===== Team Alerts: line-item layout + count badges ===== */
.alerts-menu .alert-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

.alerts-menu .alert-item:hover {
  background: var(--bg-muted, #f1f5f9);
  border-radius: 6px;
}

.alerts-menu .item-label {
  flex: 1 1 auto;
  min-width: 0;
}

.alerts-menu .count-badge {
  flex: 0 0 auto;
  margin-left: 12px;
  min-width: 28px;
  /* fixed column for 1–3 digits */
  text-align: center;
  font-variant-numeric: tabular-nums;
  /* align digits consistently */
  height: 20px;
  line-height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #475569;
  /* neutral slate distinct from blue top-badge */
}

/* Ensure alert rows use flex and fill the menu width */
.alerts-menu .menu li a.alert-item {
  display: flex !important;
  width: 100%;
}

.alerts-menu .menu li span.alert-item {
  display: flex;
  width: 100%;
}

/* ===== New Dropdown Panel Styles ===== */
.dropdown-panel {
  position: fixed;
  top: calc(var(--topbar-h) + 6px);
  right: auto;
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  z-index: 120;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.dropdown-panel:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e2e8f0;
}

.dropdown-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.01em;
}

.dropdown-action {
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: #3b82f6;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s;
}

.dropdown-action:hover {
  background: #eff6ff;
}

.dropdown-body {
  padding: 0.25rem 0;
  max-height: 320px;
  overflow-y: auto;
}

.dropdown-section-label {
  padding: 0.5rem 1rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
  border-radius: 0;
  justify-content: space-between;
}

.dropdown-item:hover {
  background: #f1f5f9;
}

.dropdown-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dropdown-item-content {
  flex: 1;
  min-width: 0;
}

.dropdown-item-text {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: #1e293b;
}

.dropdown-item-meta {
  display: block;
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.125rem;
}

.dropdown-item-badge {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #3b82f6;
  color: white;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
  flex-shrink: 0;
}

.dropdown-item.read .dropdown-item-dot {
  background: transparent;
}

.dropdown-footer {
  padding: 0.625rem 1rem;
  border-top: 1px solid #e2e8f0;
  text-align: center;
  background: #f8fafc;
}

.dropdown-footer a {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #3b82f6;
  text-decoration: none;
  display: inline-block;
}

.dropdown-footer a:hover {
  color: #2563eb;
}

/* Actions Menu positioning */
.actions-menu {
  position: relative;
}

.actions-menu .nav-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #3b82f6;
  color: white;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ===== Compact header action links on cards ===== */


.card-head .head-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.head-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
}

.head-link:hover {
  background: #f8fafc;
}

/* When a card has a header action, hide its old bottom View all area */
.card.has-head-action .viewall-footer {
  display: none !important;
}

/* ===== Card header icons (monochrome) ===== */


.card-head h2 svg {
  flex-shrink: 0;
  color: var(--text);
  opacity: 0.85;
}

.cards+.cards {
  margin-top: var(--space-4);
}

/* Restore spacing when a standalone card is followed by a cards grid */
section.card+.cards {
  margin-top: var(--space-4);
}

/* ===== Bottom brand mark above footer (index only) ===== */
.brand-stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-5) 0 var(--space-4);
  /* tighten space above footer */
  padding: 0;
  /* remove extra padding that offset centering */
}

.brand-stamp img {
  height: 34px;
  /* subtle, not shouting */
  opacity: .75;
  /* quiet monochrome look */
  filter: grayscale(1);
  /* keep it monochrome */
}

/* ===== Notifications dropdown: structured header, sections, and items ===== */
.topbar .notif-menu .menu .menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  color: var(--text);
}

.topbar .notif-menu .menu .menu-title {
  font-weight: 700;
}

.topbar .notif-menu .menu .menu-action {
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.topbar .notif-menu .menu .menu-action:hover {
  background: #f8fafc;
}

.topbar .notif-menu .menu .menu-divider {
  height: 1px;
  margin: 6px 6px;
  background: var(--border);
  border-radius: 1px;
}

.topbar .notif-menu .menu .menu-section {
  padding: 6px 8px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.topbar .notif-menu .menu .notif-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  text-decoration: none;
  color: inherit;
}

.topbar .notif-menu .menu .notif-item:hover {
  background: #f1f5f9;
  border-radius: 6px;
}

.topbar .notif-menu .menu .notif-item.read {
  opacity: .7;
}

.topbar .notif-menu .menu .item-label {
  flex: 1 1 auto;
  min-width: 0;
}

.topbar .notif-menu .menu .item-time {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--muted);
}

/* ===== Profile Tabs (Soft Pill Style) ===== */
.profile-tabs {
  display: flex;
  align-items: center;
  height: 80px;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  /* Handle overflow on small screens */
}

.profile-tab {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 12px;
  border: none;
  color: var(--bc-text-muted);
  font-weight: 500;
  font-size: 1.1rem;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.profile-tab:hover {
  color: var(--bc-text-main);
  background-color: rgba(0, 0, 0, 0.03);
}

.profile-tab.is-active {
  color: var(--brand);
  background-color: rgba(33, 150, 243, 0.08);
  /* Soft blue background */
}

.profile-avatar {
  width: 5rem;
  height: 5rem;
  font-size: 1.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  color: #ffffff;
  transform: translateY(1.5rem);
}


.pill-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  background-color: #f1f5f9;
  /* Slate 100 */
  padding: 4px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  /* Slate 200 */
}

.pill-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.85rem;
  border-radius: 6px;
  border: none;
  background-color: transparent;
  color: #64748b;
  /* Slate 500 */
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pill-tab:hover {
  background-color: rgba(255, 255, 255, 0.6);
  color: #0f172a;
}

.pill-tab.is-active {
  background-color: #ffffff;
  color: var(--brand);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.1);
}

/* Spacing between pill label and inner badge/chip */

.pill-tab .chip,
.pill-tab .status-chip {
  margin-left: 0.4rem;
  /* slight gap between text and count */
}

/* ===== Card tables with pill-tab filters (e.g., Evaluations index) ===== */
/* Treat the pill row as its own segment with a separator above the table header */
.card-body .pill-tabs,
.section-card__body .pill-tabs {
  margin: 0 0 8px;
  /* consistent spacing, small gap before table */
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7f0;
  /* clear divider between filters and table */
}

/* When a table follows pill tabs, keep the header tight to the divider */
.card-body .pill-tabs+.table-wrapper {
  margin-top: 0;
  /* remove any extra vertical gap before header row */
}

/* Slightly soften the header background in tabbed tables so it feels distinct
   from the plain card-table variant used in Absences/Discipline. */
.card-body .pill-tabs+.table-wrapper .data-table thead th {
  background-color: #f9fafb;
}

/* ===== Tab Panels (Global) ===== */
.tab-panels {
  position: relative;
}

.tab-panel,
.abs-panel {
  display: block;
}

.tab-panel[hidden],
.abs-panel[hidden] {
  display: none !important;
}

/* ===== Segmented controls (for short-range toggles) ===== */
.segmented {
  display: inline-flex;
  border-radius: 8px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: #ffffff;
}

.segmented button {
  border: none;
  background: transparent;
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
}

.segmented button+button {
  border-left: 1px solid var(--border);
}

.segmented button.is-active {
  background: #eef2ff;
  color: var(--brand);
  font-weight: 600;
}

.segmented button:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

/* ===== Global critical status chips (Overdue / Late) ===== */
.chip.status-overdue,
.chip.status-late {
  background: #fef2f2;
  /* soft red background */
  color: #b91c1c;
  /* red-700 text */
  border-color: #fecaca;
  /* light red border */
}

/* Ensure they stay red when used inside pill tabs */
.pill-tab .chip.status-overdue,
.pill-tab .chip.status-late {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}

/* ===== Global employee/status pills ===== */
/* Standard pill shape (all variants share size/typography; only colors change) */

/* ===== Detail Lists & Key-Value Pairs ===== */
.detail-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.25rem 0;
  flex-wrap: wrap;
}

.detail-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  flex-shrink: 0;
}

.detail-value {
  font-size: 0.9rem;
  color: var(--text);
  text-align: right;
  font-weight: 400;
}

.detail-value.strong {
  font-weight: 600;
  color: var(--text-main);
}

/* ===== Card Meta (Header) ===== */
.card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.meta-label {
  font-weight: 500;
  color: var(--text-light);
}

.meta-divider {
  color: var(--border);
}

.status-pill {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
}

.status-pill.active {
  background: rgba(37, 99, 235, 0.1);
  /* faint brand blue */
  color: var(--brand);
  border-color: rgba(37, 99, 235, 0.25);
}

.status-pill.inactive {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.status-pill.pending-hire {
  background: #dbeafe;
  color: #1e3a8a;
  border: 1px solid #bfdbfe;
}

.status-pill.pending-vacate {
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fde68a;
}

.status-pill.resigned {
  background: #fee2e2;
  color: #7f1d1d;
  border: 1px solid #fecaca;
}

.status-pill.discharged {
  background: #fecdd3;
  color: #7f1d1d;
  border: 1px solid #fda4af;
}

.status-pill.on-leave {
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #ddd6fe;
}

.status-pill.transferred {
  background: #cffafe;
  color: #155e75;
  border: 1px solid #a5f3fc;
}


.status-pill.retired {
  background: #e5e7eb;
  color: #374151;
  border: 1px solid #d1d5db;
}

/* ===== Global form controls ===== */

/* ===== Global checkbox styling ===== */
.field-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--text);
}

.field-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  background-color: #ffffff;
  cursor: pointer;
  accent-color: var(--brand);
}

.field-check label,
.field-check .check-label {
  cursor: pointer;
  color: var(--text);
}

.field-check input[type="checkbox"]:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.field-check input[type="checkbox"]:disabled {
  cursor: not-allowed;
  border-color: #e5e7eb;
  background-color: #f9fafb;
}

.field-check input[type="checkbox"]:disabled+label,
.field-check input[type="checkbox"]:disabled+.check-label {
  color: var(--muted);
  cursor: not-allowed;
}

.field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--muted);
}

/* ===== Global form controls ===== */
.field-input {
  display: block;
  width: 100%;
  height: 44px;
  /* slightly larger unified control height for better tap targets */
  padding: 10px 14px;
  /* a bit more interior spacing */
  border-radius: 10px;
  /* slightly rounder corners to match cards */
  border: 1px solid var(--border);
  background: #ffffff;
  font: inherit;
  color: var(--text);
}

/* Normalize native selects and date inputs that use the field-input class */
select.field-input,
input[type="date"].field-input,
input[type="time"].field-input,
input[type="datetime-local"].field-input,
input[type="month"].field-input,
input[type="week"].field-input {
  height: 44px;
  /* lock to the same control height */
  padding-right: 32px;
  /* leave room for native icons */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

textarea.field-input {
  height: auto;
  /* let content/rows control height */
  min-height: 80px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.field-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.field-input[disabled] {
  background: #f9fafb;
  color: var(--muted);
  cursor: not-allowed;
}

.field-error {
  border-color: #fecaca !important;
  background: #fef2f2;
}

.field-error-message {
  margin-top: 4px;
  font-size: 0.78rem;
  color: #b91c1c;
}

/* ===== Lined tabs (used in style guide & detail views) ===== */
.tabs-lined {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.tabs-lined .tab {
  border: none;
  background: transparent;
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tabs-lined .tab.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.tabs-lined .tab:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

/* ===== Accordions ===== */
.accordion {
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #ffffff;
}

.accordion-item+.accordion-item {
  border-top: 1px solid var(--border);
}

.accordion-header {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0.6rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font: inherit;
  color: var(--text);
}

.accordion-body {
  padding: 0.6rem 0.85rem 0.75rem;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

/* ===== Skeleton loaders ===== */
.skeleton-line {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e5e7eb, #f3f4f6, #e5e7eb);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-pill {
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e5e7eb, #f3f4f6, #e5e7eb);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 0% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ===== Spinner ===== */
.spinner {
  border-radius: 999px;
  border: 2px solid #e5e7eb;
  border-top-color: var(--brand);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== Modal close button ===== */
.modal-close {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  /* larger X glyph inside small button */
  line-height: 1;
}

/* ===== Global dropdown items: borderless interior options ===== */
/* Any dropdown implemented as a menu-panel should render each option
   as a flat row without its own border, so only the outer panel box
   defines the shape. */
/* ===== Global dropdown items: borderless interior options ===== */
/* Any dropdown implemented as a menu-panel should render each option
   as a flat row without its own border, so only the outer panel box
   defines the shape. */
.menu-panel li,
.menu-panel a,
.menu-panel button {
  border: none !important;
  box-shadow: none !important;
  font-size: 0.9rem;
  /* slightly larger text for readability */
  padding: 0.55rem 0.85rem;
  /* consistent interior padding */
  background: none;
  width: 100%;
  text-align: left;
}

/* Hover interactions for dropdown options */
.menu-panel a:hover,
.menu-panel button:hover {
  background: #f1f5f9 !important;
  /* subtle gray hover, override inline background */
  color: var(--text);
  cursor: pointer;
}

/* =========================================
   Recent Activity Styles (Dashboard)
   ========================================= */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
}

.activity-list .activity-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
  background: transparent;
  border-radius: 0;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-item:hover {
  background: transparent;
  border-color: var(--border-light);
}

.activity-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  color: var(--bc-text-muted);
  flex-shrink: 0;
}

.activity-icon svg {
  width: 14px;
  height: 14px;
}

.activity-text {
  flex: 1;
  font-size: 0.9rem;
  color: var(--bc-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}

.activity-link {
  color: var(--bc-text-main);
  text-decoration: none;
  transition: color 0.2s;
  cursor: pointer;
}

.activity-link:hover {
  color: var(--brand);
  text-decoration: underline;
}

.activity-time {
  font-size: 0.75rem;
  color: var(--bc-text-muted);
  white-space: nowrap;
  background: transparent;
  padding: 0;
}

/* Icon specific colors */
.icon-user-plus {
  color: var(--brand);
  background: transparent;
}

.icon-alert-triangle {
  color: var(--warning);
  background: transparent;
}

.icon-check-circle {
  color: var(--success);
  background: transparent;
}

.icon-heart {
  color: #ec4899;
  background: transparent;
}

.icon-briefcase {
  color: #8b5cf6;
  background: transparent;
}

.icon-star {
  color: #f59e0b;
  background: transparent;
}

/* =========================================
   Overview Section Layout
   ========================================= */
.overview-split {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: stretch;
  padding-top: 24px;
}

.overview-left {
  flex: 0 0 auto;
  min-width: 0;
}

.overview-right {
  flex: 0 0 auto;
  min-width: 0;
  border-left: none;
  border-top: 1px solid var(--border-light);
  padding-left: 0;
  padding-top: 5px;
}

/* When right column is hidden, left column naturally expands due to flex: 1 */

/* =========================================
   Search Results Page Styles
   ========================================= */
.search-sections {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}

.search-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 24px;
}

.rail-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--bc-text-main);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
}

.rail-link:hover {
  background: #f1f5f9;
}

.rail-link.active {
  background: var(--brand);
  color: #ffffff;
}

.rail-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 0.5rem;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.rail-link.active .rail-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.search-sections-content {
  min-width: 0;
}

.search-results-section {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.results-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bc-text-main);
  margin: 0 0 1rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border);
}

.results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.results-item {
  border-bottom: 1px solid var(--border-light);
}

.results-item:last-child {
  border-bottom: none;
}

.results-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.875rem 0;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}

.results-link:hover {
  background: #f8fafc;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  border-radius: 4px;
}

.results-link:hover .results-name {
  color: var(--brand);
}

.results-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bc-text-main);
}

/* Search History Dropdown */
.search-history-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 320px;
  overflow: hidden;
  z-index: 1000;
}

.search-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}

.search-history-list li {
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.9375rem;
  color: var(--bc-text-main);
}

.search-history-list li:last-child {
  border-bottom: none;
}

.search-history-list li:hover {
  background: #f8fafc;
  color: var(--brand);
}

.clear-history-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--bc-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.15s ease;
}

.clear-history-btn:hover {
  background: #f8fafc;
  color: #ef4444;
}

.clear-history-btn svg {
  flex-shrink: 0;
}

.results-meta {
  font-size: 0.875rem;
  color: var(--bc-text-muted);
}

.results-empty {
  padding: 2rem 0;
  text-align: center;
  color: var(--bc-text-muted);
  font-size: 0.9375rem;
}

.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--bc-text-muted);
}

.empty-state-icon {
  margin-bottom: 1rem;
  color: var(--border);
}

.timeline-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--bc-text-main);
  margin-bottom: 0.25rem;
}

/* Topbar Left Utility */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Vertical Timeline (Candidate Profile) */
.vertical-timeline {
  position: relative;
  padding: 0;
  list-style: none;
  margin-top: 0.5rem;
}

.v-timeline-item {
  position: relative;
  padding-left: 2rem;
  padding-bottom: 2rem;
}

.v-timeline-item:last-child {
  padding-bottom: 0;
}

.v-timeline-item::before {
  /* The Line */
  content: '';
  position: absolute;
  left: 6px;
  /* Center of marker (14px/2 - 1px) */
  top: 14px;
  bottom: -14px;
  /* Extend to next item */
  width: 2px;
  background: var(--bc-border-subtle);
}

.v-timeline-item:last-child::before {
  display: none;
}

.v-timeline-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--brand);
  z-index: 1;
  box-shadow: 0 0 0 2px white;
  /* Spacing from line */
}

.v-timeline-content {
  position: relative;
  top: -4px;
  /* Align with marker */
}

.v-timeline-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bc-text-main);
  margin: 0;
}

.v-timeline-date {
  font-size: 0.85rem;
  color: var(--bc-text-muted);
  margin-bottom: 0.25rem;
  display: block;
}

.v-timeline-subtitle {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--bc-text-secondary);
  margin-bottom: 0.5rem;
}

.v-timeline-text {
  font-size: 0.9rem;
  color: var(--bc-text-secondary);
  line-height: 1.5;
}

/* Candidate Profile Components */
.avatar-large {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
}

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

.avatar-placeholder {
  font-size: 24px;
  font-weight: 600;
  color: var(--brand);
}

.page-header-main {
  display: flex;
  align-items: center;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bc-text-muted);
  margin-bottom: 4px;
}

.info-value {
  font-size: 0.95rem;
  color: var(--bc-text-main);
  word-break: break-word;
}

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

.file-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--bc-border-subtle);
  border-radius: 6px;
  background: white;
  transition: border-color 0.2s;
}

.file-item:hover {
  border-color: var(--brand-light);
}

.file-icon {
  color: var(--bc-text-muted);
  margin-right: 12px;
  display: flex;
  align-items: center;
}

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

.file-name {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--bc-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-meta {
  font-size: 0.8rem;
  color: var(--bc-text-muted);
}

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

.social-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.social-link {
  color: var(--brand);
  text-decoration: none;
  font-size: 0.9rem;
}

.social-link:hover {
  text-decoration: underline;
}

/* Spacing Utilities */
.mb-4 {
  margin-bottom: 1rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.mr-2 {
  margin-right: 0.5rem;
}


.empty-state p {
  font-size: 0.9375rem;
  color: var(--bc-text-muted);
}

/* ==========================================================================
   Tab System & Requisition Detail Styles
   ========================================================================== */

/* Line Tabs (Top Level) */
.line-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--bc-border-subtle);
  margin-bottom: 1.5rem;
}

.line-tab {
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bc-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s;
  cursor: pointer;
}

.line-tab:hover {
  color: var(--brand);
}

.line-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* Sidebar Tabs */
.sidebar-tabs {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sidebar-tab {
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bc-text-muted);
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s;
  white-space: nowrap;
  cursor: pointer;
}

.sidebar-tab:hover {
  background: var(--bc-bg-surface);
  color: var(--brand);
}

.sidebar-tab.active {
  background: var(--brand);
  color: white;
}

/* Tab Panels (Generic) */
.tab-panel,
.info-panel,
.stage-panel,
.sidebar-panel {
  display: none;
}

.tab-panel.active,
.info-panel.active,
.stage-panel.active,
.sidebar-panel.active {
  display: block;
}

/* Requisition Detail Specifics */
.job-info-split {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 1024px) {
  .job-info-split {
    grid-template-columns: 1fr;
  }
}

.info-grid-compact {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.info-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--bc-text-muted);
}

.info-value {
  font-size: 0.9375rem;
  color: var(--bc-text-main);
  font-weight: 500;
  line-height: 1.4;
}

/* Recruiters Grid */
.recruiters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.recruiter-card {
  padding: 1rem;
  border: 1px solid var(--bc-border-subtle);
  border-radius: 8px;
  background: var(--bc-bg-surface);
}

.recruiter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.recruiter-name {
  font-weight: 600;
  color: var(--bc-text-main);
  font-size: 0.9375rem;
}

.recruiter-contacts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--bc-text-muted);
  text-decoration: none;
}

.contact-link:hover {
  color: var(--brand);
}

.recruiter-meta {
  font-size: 0.75rem;
  color: var(--bc-text-muted);
  margin-top: 0.5rem;
}

/* Boards Grid */
.boards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.board-card {
  padding: 1rem;
  border: 1px solid var(--bc-border-subtle);
  border-radius: 8px;
  background: var(--bc-bg-surface);
}

.board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.board-name {
  font-weight: 600;
  color: var(--bc-text-main);
  font-size: 0.875rem;
}

.board-link {
  color: var(--brand);
  display: flex;
  align-items: center;
}

.board-link:hover {
  color: var(--bc-navy);
}

.board-meta {
  font-size: 0.75rem;
  color: var(--bc-text-muted);
}

/* Activity List */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
}

.activity-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 20px;
  bottom: -16px;
  width: 1px;
  background: var(--bc-border-subtle);
}

.activity-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  margin-top: 4px;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
}

.activity-action {
  font-size: 0.875rem;
  color: var(--bc-text-main);
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.activity-meta {
  font-size: 0.75rem;
  color: var(--bc-text-muted);
}

.activity-user {
  font-weight: 600;
}

.view-all-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
}

.view-all-link:hover {
  color: var(--bc-navy);
  text-decoration: underline;
}

/* Notes Grid */
.notes-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

.note-card {
  padding: 1rem;
  border: 1px solid var(--bc-border-subtle);
  border-radius: 8px;
  background: var(--bc-bg-surface);
}

.note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.note-author {
  font-weight: 600;
  color: var(--bc-text-main);
  font-size: 0.8125rem;
}

.note-date {
  font-size: 0.75rem;
  color: var(--bc-text-muted);
}

.note-content {
  font-size: 0.875rem;
  color: var(--bc-text-main);
  line-height: 1.5;
}

/* Add Button */
.btn-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem;
  background: none;
  border: 1px dashed var(--bc-border-subtle);
  border-radius: 6px;
  color: var(--bc-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-add:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--bc-bg-surface);
}

/* Badges */
.badge-primary {
  background: var(--brand);
  color: white;
  font-size: 0.625rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.badge-evergreen {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  background-color: #e8f5e9;
  color: #2e7d32;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.header-status {
  font-size: 0.75rem;
  vertical-align: middle;
  padding: 0.25rem 0.75rem;
  border-radius: 16px;
  margin-left: 0;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.header-status.status-open {
  background-color: #e3f2fd;
  color: #1976d2;
}

.req-id-large {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bc-text-muted);
  font-family: monospace;
}

/* Sidebar Recruiters */
.sidebar-recruiters {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sidebar-recruiter {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bc-bg-surface);
  border: 1px solid var(--bc-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bc-text-muted);
}

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

.recruiter-name-sidebar {
  font-size: 0.875rem;
  color: var(--bc-text-main);
  font-weight: 500;
}

/* Card Footer */
.card-foot {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

.bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== Pipeline Table (Candidate tables with checkboxes) ===== */
.pipeline-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  table-layout: fixed;
}

/* Column Widths - Candidate Pipeline Only */
.candidate-pipeline-card .pipeline-table th:nth-child(2),
.candidate-pipeline-card .pipeline-table td:nth-child(2) {
  width: 25%;
}

/* Candidate */
.candidate-pipeline-card .pipeline-table th:nth-child(3),
.candidate-pipeline-card .pipeline-table td:nth-child(3) {
  width: 15%;
}

/* Applied */
.candidate-pipeline-card .pipeline-table th:nth-child(4),
.candidate-pipeline-card .pipeline-table td:nth-child(4) {
  width: 15%;
}

/* Source */
.candidate-pipeline-card .pipeline-table th:nth-child(5),
.candidate-pipeline-card .pipeline-table td:nth-child(5) {
  width: 20%;
}

/* Status */
.candidate-pipeline-card .pipeline-table th:nth-child(6),
.candidate-pipeline-card .pipeline-table td:nth-child(6) {
  width: 15%;
}

/* Days in Stage */

/* Header row */
.pipeline-table thead th {
  text-align: left;
  font-weight: 600;
  padding: 0.65rem 0.85rem;
  color: #6b7280;
  background-color: #f7f8fc;
  border-bottom: 1px solid var(--card-border);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Checkbox column header - minimal padding */
.pipeline-table thead th.checkbox-cell {
  width: 72px;
  padding: 0.65rem 0.5rem 0.65rem 2rem;
  text-align: center;
}

/* Body rows */
.pipeline-table tbody tr {
  border-top: 1px solid #eef0f7;
}

.pipeline-table tbody tr:hover {
  background-color: #fafbff;
}

.pipeline-table td {
  padding: 0.65rem 0.85rem;
  vertical-align: middle;
  color: #111827;
}

/* Checkbox column cells - minimal padding, centered */
.pipeline-table td.checkbox-cell {
  width: 72px;
  padding: 0.65rem 0.5rem 0.65rem 2rem;
  text-align: center;
}

.pipeline-table .checkbox-cell input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  width: 16px;
  height: 16px;
}

/* Empty state */
.pipeline-table .empty-state {
  padding: 1rem 0.85rem;
  color: var(--muted);
  text-align: center;
}

/* Remove bottom padding from pipeline card body */
.card .card-body[style*="overflow-y: auto"] {
  padding-bottom: 0;
}

/* Requisition Detail Page - Minimum Width */
.job-info-split {
  min-width: 1000px;
}

/* Requisition Detail Page Layout */
.req-detail-page {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  min-width: 1000px;
  padding: 0;
}

.req-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
}

.req-content {
  min-width: 0;
  /* Allow grid item to shrink */
}

/* Candidate Pipeline - Fixed Height */
.candidate-pipeline-card {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
}

.candidate-pipeline-card .card-body {
  /* Fixed height for ~10 rows: 550px */
  height: 550px;
  min-height: 550px;
  overflow-y: auto;
  padding: 0 !important;
}

/* Info Cards Grid */
.info-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.info-card {
  height: 200px;
  /* Reduced from 280px for more compact display */
  display: flex;
  flex-direction: column;
}

.info-card .card-body {
  flex: 1;
  overflow-y: auto;
}

/* Expandable Section */
.expandable-section {
  background: var(--bc-white);
  border: 1px solid var(--bc-border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
}

.expandable-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--bc-text-main);
  transition: background-color 0.15s ease;
}

.expandable-header:hover {
  background: var(--bc-gray-50);
}

.expandable-header .expand-icon {
  transition: transform 0.2s ease;
}

.expandable-section.expanded .expand-icon {
  transform: rotate(180deg);
}

.expandable-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.expandable-section.expanded .expandable-content {
  max-height: 500px;
  padding: 0 1.5rem 1.5rem;
}

/* Notes List */
.notes-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.note-item {
  padding: 1rem;
  background: var(--bc-gray-50);
  border-radius: var(--radius);
  border: 1px solid var(--bc-border-subtle);
}

.note-item .note-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.note-item .note-author {
  font-weight: 600;
  color: var(--bc-text-main);
}

.note-item .note-date {
  font-size: 0.875rem;
  color: var(--bc-text-muted);
}

.note-item .note-content {
  color: var(--bc-text-main);
  line-height: 1.5;
}

/* Collapsible Card */
.collapsible-card .card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Toggle Button */
.collapsible-card .card-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin: -0.5rem -0.5rem -0.5rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bc-text-muted);
  transition: color 0.2s ease, background-color 0.2s ease;
  border-radius: 6px;
}

.collapsible-card .card-toggle:hover {
  color: var(--bc-text-main);
  background-color: var(--bc-bg-subtle);
}

.collapsible-card .card-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

/* Rotate chevron when expanded */
.collapsible-card:not(.collapsed) .card-toggle svg {
  transform: rotate(180deg);
}

/* Legacy support for collapse-icon class */
.collapsible-card .collapse-icon {
  transition: transform 0.2s ease;
}

.collapsible-card.collapsed .collapse-icon {
  transform: rotate(-90deg);
}

/* Collapsible Content */
.collapsible-card .collapsible-content {
  max-height: 2000px;
  /* Increased to handle larger content */
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    padding 0.3s ease;
  opacity: 1;
}

.collapsible-card.collapsed .collapsible-content {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

/* Summary Content - Always Visible */
.collapsible-card .collapsible-summary {
  /* This content remains visible when collapsed */
  opacity: 1;
}

/* Notes Card Spacing */
.collapsible-card .card-body {
  padding-top: 1.5rem;
}

/* Stats Grid - for dashboard KPI cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: white;
  border: 1px solid var(--bc-border-subtle);
  border-radius: 12px;
  transition: all 0.2s;
}

.stat-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.stat-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--bc-text-main);
  margin-top: 0.25rem;
}

/* Mobile Responsive Overrides */
@media (max-width: 768px) {

  /* Fix Topbar Grid */
  .topbar {
    grid-template-columns: 44px auto 1fr auto;
    gap: 8px;
    padding: 0 8px;
  }

  /* Hide Brand Name on mobile to save space */
  .topbar .brand-name {
    display: none;
  }

  /* Fix Search Input Width */
  .topbar .global-search {
    transform: none;
    width: auto;
  }

  .topbar .global-search input {
    width: 100% !important;
    max-width: 200px !important;
    /* Limit width on mobile */
    padding: 8px 12px;
    font-size: 14px;
  }

  /* Fix App Shell Grid */
  .app-shell {
    grid-template-columns: 1fr;
    /* Stack sidebar or hide rail */
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    transform: translateX(-100%);
    /* Hidden by default on mobile */
    width: 260px;
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .app-shell>main.container {
    grid-column: 1;
    padding: 16px;
    width: 100%;
    max-width: 100vw;
    /* Ensure no overflow */
    overflow-x: hidden;
  }
}

@media (max-width: 480px) {

  /* Hide search completely on very small screens if needed, or just icon */
  .topbar .global-search {
    display: none;
  }

  .topbar {
    grid-template-columns: 44px 1fr auto;
  }
}

/* --- Dashboard Grid Layout --- */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 1.5rem;
  align-items: start;
}

.dashboard-main,
.dashboard-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

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

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

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


/* --- Timeline List (Upcoming Dates) --- */
.timeline-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline-item {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--bc-border-subtle);
}

.timeline-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.timeline-item:first-child {
  padding-top: 0;
}

.timeline-date {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bc-text-muted);
  width: 60px;
  flex-shrink: 0;
  padding-top: 0.1rem;
}

.timeline-content {
  flex: 1;
}

.timeline-title {
  font-weight: 600;
  color: var(--bc-text-main);
  font-size: 0.9rem;
}

.timeline-subtitle {
  font-size: 0.85rem;
  color: var(--bc-text-muted);
  margin-top: 0.1rem;
}

/* --- Activity Feed --- */
.activity-feed {
  display: flex;
  flex-direction: column;
}

.activity-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--bc-border-subtle);
  align-items: flex-start;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bc-bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bc-text-muted);
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-text {
  font-size: 0.9rem;
  color: var(--bc-text-main);
  line-height: 1.4;
}

.activity-link {
  font-weight: 500;
  color: var(--brand);
  text-decoration: none;
}

.activity-link:hover {
  text-decoration: underline;
}

.activity-meta {
  font-size: 0.8rem;
  color: var(--bc-text-muted);
  margin-top: 0.25rem;
}

/* Icon colors for activity feed */
.icon-user-plus {
  background: #dbeafe;
  color: #2563eb;
}

.icon-file-text {
  background: #f3f4f6;
  color: #4b5563;
}

.icon-alert-circle {
  background: #fee2e2;
  color: #dc2626;
}

.icon-clock {
  background: #ffedd5;
  color: #ea580c;
}

.icon-check-circle {
  background: #dcfce7;
  color: #16a34a;
}

.icon-alert-triangle {
  background: #fef3c7;
  color: #d97706;
}

.icon-star {
  background: #fef9c3;
  color: #ca8a04;
}

/* =========================================
   Modern Design System Components (v2.0)
   ========================================= */

/* --- Page Headers --- */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  gap: 1rem;
}

.page-titles {
  flex: 1;
}

.page-title {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--bc-text-main);
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.page-subtitle {
  font-size: 1rem;
  color: var(--bc-text-muted);
  margin: 0;
  max-width: 600px;
  line-height: 1.5;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* --- Stats Grid --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--bc-border-subtle);
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #f3f4f6;
  /* Default bg */
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.25rem;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--bc-text-main);
  line-height: 1.2;
}

/* --- Cards --- */
/* Duplicate card styles - commented out to use global styles */
.card {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--bc-border-subtle);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

/* Card header typography is defined above around line 1249 */
.card-head {
  position: relative;
  /* Restore position context */
  padding: 0 1.5rem;
  min-height: 56px;
  /* Use min-height for flexibility */
  height: 56px;
  /* Keep height for consistency, but allow override if needed */
  border-bottom: 1px solid var(--bc-border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
}

.card-footer {
  padding: 16px;
  border-top: 1px solid var(--bc-border-subtle);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: #f8fafc;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.justify-between {
  justify-content: space-between !important;
}

.p-6 {
  padding: 1.5rem !important;
}

/* --- Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.badge-success {
  background: #dcfce7;
  color: #166534;
}

.badge-warning {
  background: #fef3c7;
  color: #92400e;
}

.badge-danger {
  background: #fee2e2;
  color: #991b1b;
}

.badge-secondary {
  background: #f3f4f6;
  color: #4b5563;
}

.badge-primary {
  background: #dbeafe;
  color: #1e40af;
}

.badge-draft {
  background: #f3f4f6;
  color: #4b5563;
}

.badge-in-progress {
  background: #fef3c7;
  color: #92400e;
}

.badge-submitted {
  background: #dbeafe;
  color: #1e40af;
}

.badge-approved {
  background: #dcfce7;
  color: #166534;
}

/* Skill Tags */
.skill-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--bc-primary);
  color: white;
  border: none;
  box-shadow: 0 2px 4px rgba(33, 150, 243, 0.2);
  transition: all 0.2s ease;
}

.skill-tag:hover {
  background: var(--bc-navy);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(33, 150, 243, 0.3);
}

/* Extended Badge Variants */
.badge-green,
.badge-success {
  background: var(--success-light);
  color: var(--success-dark);
}

.badge-yellow,
.badge-warning {
  background: var(--warning-light);
  color: var(--warning-dark);
}

.badge-red,
.badge-error {
  background: #fee2e2;
  color: #991b1b;
}

.badge-info {
  background: var(--info-light);
  color: var(--info-dark);
}

.badge-purple {
  background: var(--purple-light);
  color: var(--purple-dark);
}

.badge-indigo {
  background: var(--indigo-light);
  color: var(--indigo-dark);
}

.badge-pink {
  background: var(--pink-light);
  color: var(--pink-dark);
}

/* Alert Components */
.alert {
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1px solid;
}

.alert-success {
  background: var(--success-light);
  border-color: var(--success);
  color: var(--success-dark);
}

.alert-warning {
  background: var(--warning-light);
  border-color: var(--warning);
  color: var(--warning-dark);
}

.alert-error {
  background: #fee2e2;
  border-color: #dc2626;
  color: #991b1b;
}

.alert-info {
  background: var(--info-light);
  border-color: var(--info);
  color: var(--info-dark);
}

.alert-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* Progress Bars */
.progress {
  width: 100%;
  height: 8px;
  background: var(--gray-200);
  border-radius: 9999px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: var(--bc-primary);
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.progress-bar.success {
  background: var(--success);
}

.progress-bar.warning {
  background: var(--warning);
}

.progress-bar.error {
  background: var(--danger);
}

.progress-sm {
  height: 4px;
}

.progress-lg {
  height: 12px;
}

/* Stat Cards */
.stat-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--border);
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.stat-trend.up {
  color: var(--success);
}

.stat-trend.down {
  color: var(--danger);
}

/* Timeline Component */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--gray-200);
}

.timeline-item {
  position: relative;
  padding-bottom: 1.5rem;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -1.5rem;
  top: 0.25rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--bc-primary);
}

.timeline-dot.success {
  border-color: var(--success);
}

.timeline-dot.warning {
  border-color: var(--warning);
}

.timeline-dot.error {
  border-color: var(--danger);
}

.timeline-content {
  background: var(--gray-100);
  padding: 0.75rem 1rem;
  border-radius: 8px;
}

.timeline-time {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.timeline-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* --- Tables --- */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table thead th:not(.checkbox-cell) {
  background: #f8fafc;
  padding: 0.75rem 1.5rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bc-text-muted);
  border-bottom: 1px solid var(--bc-border-subtle);
}

.data-table thead th:first-child,
.data-table tbody td:first-child {
  padding-left: 1.5rem;
}

.data-table td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--bc-border-subtle);
  font-size: 0.9rem;
  color: var(--bc-text-main);
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background: #f8fafc;
}

/* --- Responsive Helpers --- */
@media (max-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .page-header {
    flex-direction: column;
  }

  .page-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* =========================================
   Right Activity Sidebar (HR Only)
   ========================================= */

.activity-sidebar {
  position: fixed;
  right: 0;
  top: 64px;
  bottom: 0;
  width: 56px;
  background: #f9fafb;
  border-left: 1px solid var(--bc-border-subtle);
  transition: width 0.3s ease;
  z-index: 90;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.activity-sidebar.is-expanded {
  width: 340px;
}

.activity-sidebar-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bc-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.activity-sidebar.is-expanded .activity-sidebar-label {
  opacity: 0;
}

.activity-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: none;
}

.activity-sidebar.is-expanded .activity-sidebar-content {
  opacity: 1;
  display: block;
}

.activity-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 1rem 1rem 0.75rem 0.75rem;
  border-bottom: 1px solid var(--bc-border-subtle);
}

.activity-sidebar-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bc-text-main);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.activity-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #10b981;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.activity-live-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse-green 2s ease-in-out infinite;
}

@keyframes pulse-green {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }

  50% {
    opacity: 0.7;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
  }
}


/* Activity feed items in sidebar */
.activity-sidebar .activity-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.activity-sidebar .activity-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem 0.75rem 0.5rem;
  border-bottom: 1px solid var(--bc-border-subtle);
}

.activity-sidebar .activity-item:last-child {
  border-bottom: none;
}

.activity-sidebar .activity-icon {
  flex-shrink: 0;
  margin: 0;
}

.activity-sidebar .activity-content {
  flex: 1;
  min-width: 0;
  padding: 0;
  border-left: none;
}

.activity-sidebar .activity-text {
  border-left: none;
}

.activity-sidebar .activity-meta {
  border-left: none;
}

.activity-sidebar .activity-item::after {
  display: none;
}


.activity-sidebar-toggle {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--bc-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.activity-sidebar-toggle:hover {
  background: var(--bc-bg-subtle);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.activity-sidebar-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.activity-sidebar.is-expanded .activity-sidebar-toggle svg {
  transform: rotate(180deg);
}

@media (max-width: 1024px) {
  .activity-sidebar {
    display: none;
  }
}

.has-activity-sidebar .app-shell>main.container {
  margin-right: 56px;
}

.has-activity-sidebar.activity-sidebar-expanded .app-shell>main.container {
  margin-right: 340px;
}

@media (max-width: 1024px) {

  .has-activity-sidebar .app-shell>main.container,
  .has-activity-sidebar.activity-sidebar-expanded .app-shell>main.container {
    margin-right: 0;
  }
}

/* Action Bar */
.action-bar {
  position: sticky;
  bottom: 48px;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid var(--border);
  padding: 1.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  z-index: 100;
  margin: 0 -24px 0 -24px;
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* =========================================
   Global Design Patterns
   Score & Rating, Workflow Columns, Compact Cards
   ========================================= */

/* ===== Score & Rating Components ===== */

/* Circular Score */
.score-circle {
  position: relative;
  width: 120px;
  height: 120px;
  display: inline-block;
}

.score-circle svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.score-circle-bg {
  fill: none;
  stroke: var(--bc-border-subtle);
  stroke-width: 8;
}

.score-circle-progress {
  fill: none;
  stroke: var(--brand-primary);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease;
}

.score-circle-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.score-circle-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--brand-primary);
  line-height: 1;
}

.score-circle-label {
  font-size: 0.75rem;
  color: var(--bc-text-muted);
  margin-top: 0.25rem;
}

/* Star Rating */
.star-rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.star {
  color: #e5e7eb;
  font-size: 1.25rem;
}

.star.filled {
  color: #f59e0b;
}

.rating-value {
  margin-left: 0.5rem;
  font-weight: 600;
  color: var(--bc-text-main);
  font-size: 0.95rem;
}

/* Score Badges */
.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 32px;
  padding: 0 0.75rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
}

.score-badge.score-high {
  background: #dcfce7;
  color: #166534;
}

.score-badge.score-medium {
  background: #fef3c7;
  color: #92400e;
}

.score-badge.score-low {
  background: #fee2e2;
  color: #991b1b;
}

/* ===== Workflow/Pipeline Columns ===== */

.workflow-container {
  display: flex;
  width: 100%;
  padding-bottom: 1rem;
  gap: 1rem;
  /* Added gap */
  /* Space for scrollbar */
}

/* ... existing code ... */

/* Card Accent Variants */
.card-accent-left {
  border-left: 4px solid var(--brand);
  overflow: hidden;
  /* Ensure rounded corners */
}

/* Hide default card-head rail when using card-accent-left */
.card-accent-left .card-head::after {
  display: none;
}

/* Add spacing between header and content for accented cards */
.card-accent-left .card-head {
  border-bottom: none;
  /* Keep border removal as it looks better with accent */
}

/* New dedicated style for evaluation widgets to reduce gap */
.card-eval-widget .card-head {
  padding: 10px 12px 10px 16px;
  /* Match standard card-head padding */
  margin-bottom: 0;
  border-bottom: none;
}

.card-eval-widget .card-body {
  padding: 0 !important;
  /* Force zero padding to eliminate gap */
}

.card-eval-widget .list-group-item:first-child {
  padding-top: 1rem;
  /* Match standard list-group-item padding */
  /* No gap between header and first item */
  border-top: none;
}

/* =============================
   Tab Navigation
   ============================= */
.tab-view {
  min-height: 400px !important;
  position: relative;
}

.tab-nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #e5e7eb;
}

.tab-item {
  padding: 0.75rem 1.5rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--bc-text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: -2px;
}

.tab-item:hover {
  color: var(--brand);
}

.tab-item.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.card-accent-left.accent-red {
  border-left-color: var(--danger);
}

/* ... rest of accents ... */

.workflow-column {
  background: var(--bc-bg-surface);
  border-radius: 12px;
  border: 1px solid var(--bc-border-subtle);
  overflow: visible;
  min-width: 200px;
  flex: 1;
  position: relative;
}

.process-connector {
  position: relative;
  width: 40px;
  /* space between cards */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* vertical line */
.process-connector::before {
  content: "";
  width: 2px;
  height: 70%;
  /* tweak as needed */
  background-color: var(--bc-border-subtle);
}

/* right-facing arrow in the middle */
.process-connector::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 6px;
  /* how far the arrow sits from the right edge */
  transform: translateY(-50%);

  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid var(--brand);
}

.column-header {
  padding: 1rem 1.25rem;
  background: white;
  border-bottom: 1px solid var(--bc-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
}

.column-header h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  color: var(--bc-text-main);
}

.column-count {
  background: var(--bc-bg-surface);
  color: var(--bc-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
}

.column-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: calc(55vh - 100px);
  overflow-y: auto;
}

/* ===== Compact Cards ===== */

.compact-card {
  background: white;
  border: 1px solid var(--bc-border-subtle);
  border-radius: 8px;
  padding: 0.875rem;
  transition: all 0.2s;
}

.compact-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-color: var(--brand-light);
  transform: translateY(-1px);
}

.compact-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}

.compact-card-header h4 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  color: var(--bc-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Detail List (Sidebar) ===== */
.detail-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.detail-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  align-items: baseline;
  font-size: 0.875rem;
}

.detail-label {
  color: var(--bc-text-muted);
  font-weight: 500;
}

.detail-value {
  color: var(--bc-text-main);
  font-weight: 600;
  text-align: left;
}

.compact-card-body {
  font-size: 0.85rem;
  color: var(--bc-text-muted);
}

.card-fixed-width {
  width: 260px;
  flex-shrink: 0;
}

/* =============================
   Utility Classes
   ============================= */
.d-flex {
  display: flex !important;
}

.align-items-center {
  align-items: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.flex-column {
  flex-direction: column !important;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 1rem;
}

.gap-4 {
  gap: 1.5rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mr-4 {
  margin-right: 1rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.ml-4 {
  margin-left: 1rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.p-4 {
  padding: 1rem;
}

.p-0 {
  padding: 0;
}

.cursor-pointer {
  cursor: pointer;
}

.text-sm {
  font-size: 0.875rem;
}

.text-base {
  font-size: 1rem;
}

.font-weight-600 {
  font-weight: 600;
}

.m-0 {
  margin: 0;
}

/* =============================
   Accordion List Pattern
   ============================= */
.accordion-group {
  border-bottom: 1px solid var(--border);
}

.accordion-group:last-child {
  border-bottom: none;
}

.accordion-summary {
  list-style: none;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: #fff;
  transition: background-color 0.15s ease;
}

.accordion-summary:hover {
  background-color: #f9fafb;
}

.accordion-summary::-webkit-details-marker {
  display: none;
}



.accordion-chevron {
  transition: transform 0.2s ease;
  color: var(--muted);
}

details[open] .accordion-summary .accordion-chevron {
  transform: rotate(180deg);
}

/* Avatar Circle */
.avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f4f6;
  color: #4b5563;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}

/* =============================
   List Group Pattern
   ============================= */
.list-group {
  display: flex;
  flex-direction: column;
}

.list-group-item {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  background-color: #fff;
}

.list-group-item:last-child {
  border-bottom: none;
}

/* Clickable list items */
.list-group-item.clickable-item {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.list-group-item.clickable-item:hover {
  background-color: #f3f4f6;
}

.list-group-item:hover {
  background-color: #f9fafb;
}

.accordion-content {
  padding: 0;
  /* Removed padding for flush tables */
  background-color: #f9fafb;
  border-top: 1px solid var(--border);
}

/* =============================
   Grid Utilities
   ============================= */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Hover Card Utility */
.hover-card {
  transition: all 0.2s ease;
  cursor: pointer;
}

.hover-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-color: var(--bc-primary-soft);
}



/* =========================================
   Linear Layout (Floating Card)
   ========================================= */

/* Linear Layout Grid */
.linear-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  height: calc(100vh - 64px - 3rem - 50px);
  margin: 1.5rem auto;
  max-width: 1600px;
  overflow: hidden;
  background: var(--bc-white);
  border-radius: var(--radius);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--bc-border-subtle);
}

/* Main Content Area */
.linear-main {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--bc-border-subtle);
  min-width: 0;
  background: var(--bc-white);
  z-index: 10;
  position: relative;
}

/* Footer */
.linear-footer {
  height: 60px;
  border-top: 1px solid var(--bc-border-subtle);
  background: var(--bc-bg-surface);
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.footer-section {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.footer-section.active {
  display: flex;
}

.footer-count {
  font-size: 0.85rem;
  color: var(--bc-text-muted);
  font-weight: 500;
}

.footer-actions {
  display: flex;
  gap: 0.75rem;
}

/* Tab Content */
.linear-content {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bc-white);
}

/* Header */
.linear-header {
  padding: 1.5rem 2.5rem 0;
  flex-shrink: 0;
  background: var(--bc-white);
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--bc-text-muted);
  font-weight: 500;
}

.link-back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}

.link-back:hover {
  color: var(--bc-text-main);
}

.crumb-sep {
  color: var(--bc-border-subtle);
}

.crumb-current {
  font-family: 'SF Mono', 'Roboto Mono', monospace;
  color: var(--bc-text-main);
  background: var(--bc-bg-surface);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.header-title-row {
  margin-bottom: 0.25rem;
}

.page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--bc-text-main);
  margin: 0;
  letter-spacing: -0.02em;
}

/* Linear Tabs */
.linear-tabs {
  display: flex;
  gap: 2.5rem;
  border-bottom: 1px solid var(--bc-border-subtle);
}

.linear-tab {
  padding-bottom: 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--bc-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: -1px;
}

.linear-tab:hover {
  color: var(--bc-text-main);
}

.linear-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

.tab-count {
  background: var(--bc-bg-surface);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--bc-text-muted);
  font-weight: 600;
}

.linear-tab.active .tab-count {
  background: var(--brand);
  color: white;
}

/* Tab Pane */
.tab-pane {
  display: none;
  flex-direction: column;
  height: 100%;
}

.tab-pane.active {
  display: flex;
}

/* Linear List Items */
.linear-list {
  display: flex;
  flex-direction: column;
}

.linear-item {
  display: flex;
  align-items: center;
  padding: 1rem 2.5rem;
  border-bottom: 1px solid var(--bc-border-subtle);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.linear-item:hover {
  background: var(--bc-bg-surface);
}

.linear-item.selected {
  background: var(--brand-light);
}

.linear-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand);
  opacity: 0;
  transition: opacity 0.2s;
}

.linear-item:hover::before,
.linear-item.selected::before {
  opacity: 1;
}

.item-checkbox {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  margin-right: 1rem;
  border: 1px solid var(--bc-border-subtle);
  border-radius: 4px;
  background: var(--bc-white);
  color: var(--brand);
}

.linear-item:hover .item-checkbox,
.linear-item.selected .item-checkbox {
  opacity: 1;
}

.linear-item.selected .item-checkbox {
  border-color: var(--brand);
  background: var(--bc-white);
}

.item-avatar {
  margin-right: 1.25rem;
}

.item-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
}

.item-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bc-text-main);
}

.item-subtitle {
  font-size: 0.85rem;
  color: var(--bc-text-muted);
}

.item-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.85rem;
  color: var(--bc-text-muted);
}

.meta-tag {
  background: var(--bc-bg-surface);
  border: 1px solid var(--bc-border-subtle);
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--bc-text-main);
}

/* Sidebar */
.linear-sidebar {
  background: #F8FAFC;
  padding: 2.5rem 2rem;
  overflow: hidden;
  border-left: 1px solid var(--bc-border-subtle);
}

.sidebar-section {
  margin-bottom: 3rem;
}

.sidebar-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bc-text-muted);
  margin-bottom: 1.25rem;
}

.sidebar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.sidebar-row.vertical {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.sidebar-row .label {
  color: var(--bc-text-muted);
  font-weight: 500;
}

.sidebar-row .value {
  color: var(--bc-text-main);
  font-weight: 600;
  text-align: right;
}

@media (max-width: 1024px) {
  .linear-layout {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  .linear-main {
    border-right: none;
  }

  .linear-sidebar {
    border-left: none;
    border-top: 1px solid var(--bc-border-subtle);
    padding: 1.5rem;
  }

  .linear-header {
    padding: 1.5rem 1.5rem 0;
  }

  .linear-content {
    overflow: visible;
  }

  .linear-footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    padding: 0 1.5rem;
  }

  /* Mobile Utilities */
  .mobile-only {
    display: inline-flex !important;
  }

  /* Drawer Sidebar */
  .linear-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: 85vw;
    background: var(--bc-white);
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
    border-left: 1px solid var(--bc-border-subtle);
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .linear-sidebar.active {
    transform: translateX(0);
  }

  .sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--bc-border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bc-white);
  }

  .sidebar-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bc-text-main);
    margin: 0;
  }

  .sidebar-section {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--bc-border-subtle);
    margin-bottom: 0;
  }
}

/* Desktop Utilities */
.mobile-only {
  display: none !important;
}

/* Drawer Backdrop */
.drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.5);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(2px);
}

.drawer-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* --- Fresh Design Utilities --- */

.btn-glass {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  color: white;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.2s ease;
  backdrop-filter: blur(4px);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  transform: translateY(-1px);
}

/* Glass button variant for light backgrounds */
.btn-glass-light {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 14px;
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 100px;
  color: var(--bc-primary);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-glass-light:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.4);
  color: var(--bc-primary);
  transform: translateY(-1px);
}

/* Section: Global Back Button Utility */
.btn-back {
  margin-bottom: 1rem;
}

.badge-glass {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
}

/* Section: Page Hero (Shared across modules) */
.page-hero {
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
    radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
    linear-gradient(135deg, var(--bc-primary) 0%, var(--bc-primary-soft) 100%);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-hero__content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.page-hero__icon {
  opacity: 0.9;
}

.page-hero__title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.page-hero__title {
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.page-hero__subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
  margin: 0.25rem 0 0 0;
}

.page-hero__id-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.75rem;
  color: white;
}

.page-hero__actions {
  display: flex;
  gap: 0.75rem;
}

/* Section: Card Margin Utilities */
.card--mb {
  margin-bottom: 24px;
}

.card--mt {
  margin-top: 24px;
}

/* Section: Stats Row Grid */
.stats-row-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

/* Section: Net Value (Green) */
.value--success {
  color: #10b981;
}

/* Hero Floating Layout */
.hero-floating {
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
    radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
    linear-gradient(135deg, var(--bc-primary) 0%, var(--bc-primary-soft) 100%);
  padding: 2rem 2rem 3rem;
  color: white;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  margin-bottom: 2rem;
}

@media (min-width: 1024px) {
  .hero-floating {
    padding-bottom: 7rem;
  }
}

.hero-floating-content {
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* --- Fresh Design Utilities (Tailwind-ish) --- */
.mb-0 {
  margin-bottom: 0;
}

.mt-8 {
  margin-top: 2rem;
}

.space-y-8>*+* {
  margin-top: 2rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.text-white {
  color: white;
}

.text-gray-900 {
  color: #111827;
}

.text-gray-600 {
  color: #4b5563;
}

.text-gray-500 {
  color: #6b7280;
}

.text-gray-400 {
  color: #9ca3af;
}

.bg-white {
  background-color: white;
}

.bg-gray-50 {
  background-color: #f9fafb;
}

.bg-blue-100 {
  background-color: #dbeafe;
}

.text-blue-600 {
  color: #2563eb;
}

.opacity-80 {
  opacity: 0.8;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-t-xl {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.rounded-b-xl {
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

.rounded-circle {
  border-radius: 50%;
}

.rounded-pill {
  border-radius: 9999px;
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.border-b {
  border-bottom-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-gray-200 {
  border-color: #e5e7eb;
}

.border-gray-100 {
  border-color: #f3f4f6;
}

.divide-y>*+* {
  border-top-width: 1px;
  border-top-color: #f3f4f6;
}

/* Upload Component Utilities */
.border-dashed {
  border-style: dashed !important;
}

.border-2 {
  border-width: 2px !important;
}

.border-gray-300 {
  border-color: #d1d5db !important;
}

.p-8 {
  padding: 2rem !important;
}

.w-12 {
  width: 3rem !important;
}

.h-12 {
  height: 3rem !important;
}

.bg-blue-50 {
  background-color: #eff6ff !important;
}

.text-blue-600 {
  color: #2563eb !important;
}

.rounded-full {
  border-radius: 9999px !important;
}

.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.hover\:bg-gray-50:hover {
  background-color: #f9fafb !important;
}

.hover\:border-blue-400:hover {
  border-color: #60a5fa !important;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.group:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}

/* Tag Utilities */
.rounded-lg {
  border-radius: 0.5rem !important;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.text-gray-700 {
  color: #374151 !important;
}

.text-gray-400 {
  color: #9ca3af !important;
}

.hover\:text-red-500:hover {
  color: #ef4444 !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.min-h-\[42px\] {
  min-height: 42px !important;
}

.bg-white {
  background-color: white !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.ml-2 {
  margin-left: 0.5rem !important;
}

.ml-1 {
  margin-left: 0.25rem !important;
}

.flex-grow {
  flex-grow: 1 !important;
}

.border-none {
  border: none !important;
}

.outline-none {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
}

.inline-flex {
  display: inline-flex !important;
}

.items-center {
  align-items: center !important;
}

.border {
  border-width: 1px !important;
}

.p-4 {
  padding: 1rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.ps-5 {
  padding-left: 1.25rem;
}

.m-0 {
  margin: 0;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.w-100 {
  width: 100%;
}

.w-8 {
  width: 2rem;
}

.h-8 {
  height: 2rem;
}

.w-10 {
  width: 2.5rem;
}

.max-w-lg {
  max-width: 32rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.top-50 {
  top: 50%;
}

.start-3 {
  left: 0.75rem;
}

.translate-middle-y {
  transform: translateY(-50%);
}

.hover\:bg-gray-50:hover {
  background-color: #f9fafb;
}

.hover\:text-gray-600:hover {
  color: #4b5563;
}

.transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.uppercase {
  text-transform: uppercase;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.btn-ghost {
  background: transparent;
  border: none;
  color: inherit;
}

.btn-ghost:hover {
  background: rgba(0, 0, 0, 0.05);
}

.btn-white {
  background: white;
  border: 1px solid #e5e7eb;
  color: #374151;
}

.btn-white:hover {
  background: #f9fafb;
}

/* Compact Hero for List Views */
.hero-floating--compact {
  padding: 1rem 2rem 3.5rem;
  /* Further reduced padding */
  border-radius: 16px;
}

@media (min-width: 1024px) {
  .hero-floating--compact {
    padding-bottom: 4.5rem;
    /* Reduced overlap padding */
  }
}

.hero-title {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

/* Universal Layout Grid */
.layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
  max-width: 1600px;
  margin: 0 auto 4rem;
  padding: 0 2rem;
  position: relative;
  z-index: 10;
}

@media (min-width: 1024px) {
  .layout-grid {
    grid-template-columns: minmax(0, 2fr) 360px;
    gap: 3rem;
    margin-top: -6rem;
  }

  .layout-grid--full {
    grid-template-columns: 1fr;
  }
}

/* Universal Tabs (Pill Style) */
.tabs-pill {
  display: inline-flex;
  background: #E2E8F0;
  padding: 4px;
  border-radius: 10px;
}

.tab-pill {
  padding: 6px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--bc-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-pill.active {
  background: white;
  color: var(--bc-text-main);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Universal Timeline */
.timeline-item {
  position: relative;
  padding-left: 2rem;
  padding-bottom: 2rem;
  border-left: 2px solid var(--bc-bg-surface);
}

.timeline-item:last-child {
  border-left-color: transparent;
}

.timeline-dot {
  position: absolute;
  left: -9px;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--bc-primary);
}

.timeline-content {
  margin-top: -4px;
}

/* Universal Label/Value */
.label-uppercase {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bc-text-muted);
  font-weight: 600;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.value-text {
  font-size: 1rem;
  font-weight: 500;
  color: var(--bc-text-main);
}

/* Tag Style */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background-color: var(--bc-bg-surface);
  border: 1px solid var(--bc-primary-soft);
  border-radius: 4px;
  color: var(--bc-text-main);
  font-size: 13px;
  font-weight: 500;
}

/* Utilities needed for Wizard (and others) */
.w-12 {
  width: 3rem;
}

.h-12 {
  height: 3rem;
}

.rounded-full {
  border-radius: 9999px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.text-center {
  text-align: center;
}

/* Missing Tailwind Utilities */
.bg-white\/20 {
  background-color: rgba(255, 255, 255, 0.2);
}

.bg-white\/10 {
  background-color: rgba(255, 255, 255, 0.1);
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.gap-1 {
  gap: 0.25rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.hover\:bg-white\/10:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.cursor-pointer {
  cursor: pointer;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.group:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}

.bg-blue-50 {
  background-color: #eff6ff;
}

.text-blue-600 {
  color: #2563eb;
}

.border-dashed {
  border-style: dashed;
}

.border-2 {
  border-width: 2px;
}

.border-gray-300 {
  border-color: #d1d5db;
}

.hover\:bg-gray-50:hover {
  background-color: #f9fafb;
}

.hover\:border-blue-400:hover {
  border-color: #60a5fa;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

/* Grid Utilities */
.grid {
  display: grid;
}

.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

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

@media (min-width: 768px) {
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }
}

.auto-rows-fr {
  grid-auto-rows: minmax(0, 1fr);
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-col {
  flex-direction: column;
}

.overflow-hidden {
  overflow: hidden;
}

.border-b {
  border-bottom-width: 1px;
}

.border-gray-200 {
  border-color: #e5e7eb;
}

.bg-gray-50 {
  background-color: #f9fafb;
}

.bg-white {
  background-color: #ffffff;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.uppercase {
  text-transform: uppercase;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.text-gray-500 {
  color: #6b7280;
}

.text-gray-300 {
  color: #d1d5db;
}

.text-gray-800 {
  color: #1f2937;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.font-bold {
  font-weight: 700;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-2 {
  gap: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-2 {
  padding: 0.5rem;
}

.space-y-4> :not([hidden])~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.space-y-6> :not([hidden])~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.space-y-8> :not([hidden])~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.p-1 {
  padding: 0.25rem;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.flex-force-row {
  display: flex !important;
  flex-direction: row !important;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.mt-4 {
  margin-top: 1rem !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mt-3 {
  margin-top: 0.75rem !important;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.bg-transparent {
  background-color: transparent;
}

.border-none {
  border-style: none;
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.flex-grow {
  flex-grow: 1;
}

.min-h-\[42px\] {
  min-height: 42px;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* Profile Tabs (Floating Bar Style) - Matched to timesheet-control-panel */
.profile-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem;
  background: white;
  border: 1px solid #E5E7EB;
  /* var(--bc-border-subtle) */
  border-radius: 12px;
  overflow-x: auto;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.profile-tab {
  display: flex;
  align-items: center;
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #64748B;
  /* var(--bc-text-muted) */
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.profile-tab:hover {
  background-color: #F8FAFC;
  /* var(--bc-bg-surface) */
  color: #0F172A;
  /* var(--bc-text-main) */
}

.profile-tab.is-active {
  background-color: #EFF6FF;
  /* var(--brand-light) tint */
  color: #2196F3;
  /* var(--brand) */
  box-shadow: none;
}

.profile-tab svg {
  margin-right: 0.5rem;
  color: inherit;
}

.profile-avatar {
  width: 5rem;
  height: 5rem;
  font-size: 1.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  color: #ffffff;
  transform: translateY(1.5rem);
}

/* ===== Detail Lists & Key-Value Pairs ===== */
.detail-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.25rem 0;
  flex-wrap: wrap;
}

.detail-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  flex-shrink: 0;
}

.detail-value {
  font-size: 0.9rem;
  color: var(--text);
  text-align: right;
  font-weight: 400;
}

.detail-value.strong {
  font-weight: 600;
  color: var(--text-main);
}

/* Requisition Detail Specifics (reused for Employee Detail) */
.job-info-split {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 1024px) {
  .job-info-split {
    grid-template-columns: 1fr;
  }
}

.info-grid-compact {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.info-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--bc-text-muted);
}

.info-value {
  font-size: 0.9375rem;
  color: var(--bc-text-main);
  font-weight: 500;
  line-height: 1.4;
}

/* Recruiters Grid */
.recruiters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.recruiter-card {
  padding: 1rem;
  border: 1px solid var(--bc-border-subtle);
  border-radius: 8px;
  background: var(--bc-bg-surface);
}

.recruiter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.recruiter-name {
  font-weight: 600;
  color: var(--bc-text-main);
  font-size: 0.9375rem;
}

.recruiter-contacts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--bc-text-muted);
  text-decoration: none;
}

.contact-link:hover {
  color: var(--brand);
}

.recruiter-meta {
  font-size: 0.75rem;
  color: var(--bc-text-muted);
  margin-top: 0.5rem;
}

/* Boards Grid */
.boards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.board-card {
  padding: 1rem;
  border: 1px solid var(--bc-border-subtle);
  border-radius: 8px;
  background: var(--bc-bg-surface);
}

.board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.board-name {
  font-weight: 600;
  color: var(--bc-text-main);
  font-size: 0.875rem;
}

.board-link {
  color: var(--brand);
  display: flex;
  align-items: center;
}

.board-link:hover {
  color: var(--bc-navy);
}

.board-meta {
  font-size: 0.75rem;
  color: var(--bc-text-muted);
}

/* Activity List */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.activity-item {
  display: flex;
  gap: 0.75rem;
  position: relative;
}

.activity-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 20px;
  bottom: -16px;
  width: 1px;
  background: var(--bc-border-subtle);
}

.activity-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  margin-top: 4px;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
}

.activity-action {
  font-size: 0.875rem;
  color: var(--bc-text-main);
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.activity-meta {
  font-size: 0.75rem;
  color: var(--bc-text-muted);
}

.activity-user {
  font-weight: 600;
}

.view-all-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
}

.view-all-link:hover {
  color: var(--bc-navy);
  text-decoration: underline;
}

/* Notes Grid */
.notes-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

.note-card {
  padding: 1rem;
  border: 1px solid var(--bc-border-subtle);
  border-radius: 8px;
  background: var(--bc-bg-surface);
}

.note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.note-author {
  font-weight: 600;
  color: var(--bc-text-main);
  font-size: 0.8125rem;
}

.note-date {
  font-size: 0.75rem;
  color: var(--bc-text-muted);
}

.note-content {
  font-size: 0.875rem;
  color: var(--bc-text-main);
  line-height: 1.5;
}

/* Add Button */
.btn-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem;
  background: none;
  border: 1px dashed var(--bc-border-subtle);
  border-radius: 6px;
  color: var(--bc-text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-add:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--bc-bg-surface);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.badge-blue {
  background-color: #dbeafe;
  color: #1e40af;
}

.badge-green {
  background-color: #dcfce7;
  color: #166534;
}

.badge-yellow {
  background-color: #fef9c3;
  color: #854d0e;
}

.badge-red {
  background-color: #fee2e2;
  color: #991b1b;
}

.badge-gray {
  background-color: #f3f4f6;
  color: #374151;
}

/* Missing Tailwind Utilities for Action Items */
.bg-red-50 {
  background-color: #fef2f2;
}

.bg-orange-50 {
  background-color: #fff7ed;
}

.bg-blue-50 {
  background-color: #eff6ff;
}

.text-red-600 {
  color: #dc2626;
}

.text-orange-600 {
  color: #ea580c;
}

.text-blue-600 {
  color: #2563eb;
}

.text-red-700 {
  color: #b91c1c;
}

.text-orange-700 {
  color: #c2410c;
}

.border-red-100 {
  border-color: #fee2e2;
}

.border-orange-100 {
  border-color: #ffedd5;
}