/* ==========================================================================
   RecruitAbility AI — Refined Teal Theme (v1)
   --------------------------------------------------------------------------
   Loads after Bootstrap and Bootstrap Icons, before each page's inline
   <style> block. Where we need to override pre-existing inline rules we use
   slightly elevated specificity (`body .x`) so the theme wins predictably
   without resorting to !important everywhere.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Canvas & surfaces */
  --ra-canvas:        #FAFAF9;
  --ra-surface:       #FFFFFF;
  --ra-surface-2:     #F4F4F2;
  --ra-border:        #E7E5E4;
  --ra-border-strong: #D6D3D1;

  /* Ink */
  --ra-ink:    #0C0A09;
  --ra-ink-2:  #44403C;
  --ra-ink-3:  #78716C;

  /* Brand teal */
  --ra-teal-50:  #F0FDFA;
  --ra-teal-100: #CCFBF1;
  --ra-teal-200: #99F6E4;
  --ra-teal-500: #0D9488;
  --ra-teal-600: #0F766E;
  --ra-teal-700: #115E59;
  --ra-teal-900: #042F2E;

  /* Feedback */
  --ra-emerald:    #059669;
  --ra-emerald-50: #ECFDF5;
  --ra-emerald-100:#A7F3D0;
  --ra-amber:      #D97706;
  --ra-amber-50:   #FFFBEB;
  --ra-amber-100:  #FDE68A;
  --ra-rose:       #E11D48;
  --ra-rose-50:    #FFF1F2;
  --ra-rose-100:   #FECACA;
  --ra-sky:        #0284C7;
  --ra-sky-50:     #F0F9FF;
  --ra-sky-100:    #BAE6FD;
  --ra-violet:     #7C3AED;
  --ra-violet-50:  #F5F3FF;

  /* Type */
  --ra-font: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --ra-font-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Shape */
  --ra-radius-sm:   8px;
  --ra-radius:      12px;
  --ra-radius-lg:   18px;
  --ra-radius-xl:   24px;
  --ra-radius-pill: 999px;

  /* Shadow (Stripe-style layered) */
  --ra-shadow-xs: 0 1px 2px rgb(15 23 42 / 0.04);
  --ra-shadow-sm: 0 1px 3px rgb(15 23 42 / 0.06), 0 1px 2px rgb(15 23 42 / 0.04);
  --ra-shadow-md: 0 4px 12px rgb(15 23 42 / 0.06), 0 2px 4px rgb(15 23 42 / 0.04);
  --ra-shadow-lg: 0 12px 32px rgb(15 23 42 / 0.08), 0 4px 8px rgb(15 23 42 / 0.04);

  /* Motion */
  --ra-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ra-fast: 150ms;
  --ra-base: 220ms;

  /* Remap Bootstrap CSS vars to our palette */
  --bs-primary:           var(--ra-teal-500);
  --bs-primary-rgb:       13, 148, 136;
  --bs-link-color:        var(--ra-teal-600);
  --bs-link-hover-color:  var(--ra-teal-700);
  --bs-body-color:        var(--ra-ink-2);
  --bs-body-bg:           var(--ra-canvas);
  --bs-border-color:      var(--ra-border);
  --bs-border-radius:     var(--ra-radius);
  --bs-border-radius-sm:  var(--ra-radius-sm);
  --bs-border-radius-lg:  var(--ra-radius-lg);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body {
  font-family: var(--ra-font);
  background: var(--ra-canvas);
  color: var(--ra-ink-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv11", "ss01", "ss02";
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ra-font);
  color: var(--ra-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
}

body .text-muted,
body .text-secondary { color: var(--ra-ink-3) !important; }

a { color: var(--ra-teal-600); text-decoration: none; transition: color var(--ra-fast) var(--ra-ease); }
a:hover { color: var(--ra-teal-700); text-decoration: underline; }

hr { border-color: var(--ra-border); opacity: 1; }

/* RA display + supporting type utilities */
.ra-display    { font-size: clamp(2.5rem, 5vw, 4rem);   line-height: 1.05; letter-spacing: -0.035em; font-weight: 800; color: var(--ra-ink); }
.ra-display-sm { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; color: var(--ra-ink); }
.ra-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ra-teal-600);
}
.ra-lede { font-size: 1.125rem; line-height: 1.65; color: var(--ra-ink-2); }
.ra-mono { font-family: var(--ra-font-mono); font-size: 0.85em; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
body .btn {
  border-radius: var(--ra-radius);
  font-weight: 500;
  padding: 0.55rem 1.1rem;
  border-width: 1px;
  transition: transform var(--ra-fast) var(--ra-ease),
              box-shadow var(--ra-fast) var(--ra-ease),
              background-color var(--ra-fast) var(--ra-ease),
              border-color var(--ra-fast) var(--ra-ease),
              color var(--ra-fast) var(--ra-ease);
}
body .btn-sm { padding: 0.35rem 0.75rem; border-radius: var(--ra-radius-sm); font-size: 0.875rem; }
body .btn-lg { padding: 0.8rem 1.5rem;   border-radius: var(--ra-radius);    font-size: 1rem; }

body .btn-primary {
  background: linear-gradient(180deg, var(--ra-teal-500) 0%, var(--ra-teal-600) 100%);
  border-color: var(--ra-teal-600);
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), var(--ra-shadow-xs);
}
body .btn-primary:hover,
body .btn-primary:focus-visible {
  background: linear-gradient(180deg, var(--ra-teal-600) 0%, var(--ra-teal-700) 100%);
  border-color: var(--ra-teal-700);
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), var(--ra-shadow-sm);
  transform: translateY(-1px);
}
body .btn-primary:active { transform: translateY(0); box-shadow: var(--ra-shadow-xs); }
body .btn-primary:disabled,
body .btn-primary.disabled { background: var(--ra-teal-500); border-color: var(--ra-teal-500); opacity: 0.5; }

body .btn-outline-primary {
  color: var(--ra-teal-600);
  border-color: var(--ra-border-strong);
  background: var(--ra-surface);
}
body .btn-outline-primary:hover,
body .btn-outline-primary:focus-visible {
  background: var(--ra-teal-50);
  border-color: var(--ra-teal-200);
  color: var(--ra-teal-700);
}

body .btn-secondary {
  background: var(--ra-surface);
  color: var(--ra-ink-2);
  border-color: var(--ra-border-strong);
}
body .btn-secondary:hover { background: var(--ra-surface-2); color: var(--ra-ink); border-color: var(--ra-border-strong); }

body .btn-success { background: var(--ra-emerald); border-color: var(--ra-emerald); color: #fff; }
body .btn-success:hover { background: #047857; border-color: #047857; color: #fff; }
body .btn-warning { background: var(--ra-amber);   border-color: var(--ra-amber);   color: #fff; }
body .btn-warning:hover { background: #B45309; border-color: #B45309; color: #fff; }
body .btn-danger  { background: var(--ra-rose);    border-color: var(--ra-rose);    color: #fff; }
body .btn-danger:hover  { background: #BE123C; border-color: #BE123C; color: #fff; }

body .btn-light { background: var(--ra-surface); border-color: var(--ra-border); color: var(--ra-ink-2); }
body .btn-light:hover { background: var(--ra-surface-2); color: var(--ra-ink); }

body .btn-outline-secondary {
  border-color: var(--ra-border-strong);
  color: var(--ra-ink-2);
  background: var(--ra-surface);
}
body .btn-outline-secondary:hover {
  background: var(--ra-surface-2);
  color: var(--ra-ink);
  border-color: var(--ra-border-strong);
}
body .btn-outline-danger { color: var(--ra-rose); border-color: var(--ra-rose-100); background: var(--ra-surface); }
body .btn-outline-danger:hover { background: var(--ra-rose-50); border-color: var(--ra-rose); color: var(--ra-rose); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
body .card {
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-lg);
  box-shadow: var(--ra-shadow-xs);
  transition: box-shadow var(--ra-base) var(--ra-ease),
              transform var(--ra-base) var(--ra-ease);
}
body .card-header,
body .card-footer {
  background: transparent;
  border-color: var(--ra-border);
  padding: 1rem 1.25rem;
}
body .card-header { font-weight: 600; color: var(--ra-ink); }
body .card-body { padding: 1.25rem; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
body .form-control,
body .form-select {
  border: 1px solid var(--ra-border-strong);
  border-radius: var(--ra-radius);
  padding: 0.55rem 0.85rem;
  font-size: 0.95rem;
  color: var(--ra-ink);
  background-color: var(--ra-surface);
  transition: border-color var(--ra-fast) var(--ra-ease),
              box-shadow var(--ra-fast) var(--ra-ease);
}
body .form-control:focus,
body .form-select:focus {
  border-color: var(--ra-teal-500);
  box-shadow: 0 0 0 3px var(--ra-teal-100);
  outline: none;
}
body .form-control::placeholder { color: var(--ra-ink-3); }
body .form-label { font-size: 0.875rem; font-weight: 500; color: var(--ra-ink-2); margin-bottom: 0.4rem; }
body .form-check-input:checked {
  background-color: var(--ra-teal-500);
  border-color: var(--ra-teal-500);
}
body .form-check-input:focus {
  box-shadow: 0 0 0 3px var(--ra-teal-100);
  border-color: var(--ra-teal-500);
}
body .input-group-text {
  background: var(--ra-surface-2);
  border: 1px solid var(--ra-border-strong);
  color: var(--ra-ink-3);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
body .table {
  --bs-table-bg: transparent;
  color: var(--ra-ink);
  margin-bottom: 0;
  vertical-align: middle;
}
body .table > :not(caption) > * > * {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--ra-border);
}
body .table > thead { background: var(--ra-surface-2); }
body .table > thead > tr > th,
body .table-light > tr > th,
body .table-light > tr > td {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ra-ink-3);
  border-bottom: 1px solid var(--ra-border);
}
body .table-hover > tbody > tr:hover > * { background-color: var(--ra-surface-2); }
body .table tr.selected,
body .table > tbody > tr.selected > * { background-color: var(--ra-teal-50) !important; }

/* --------------------------------------------------------------------------
   Navbar (white, hairline)
   -------------------------------------------------------------------------- */
body .navbar {
  background: var(--ra-surface) !important;
  box-shadow: none;
  border-bottom: 1px solid var(--ra-border);
  padding: 0.85rem 0;
}
body .navbar-brand {
  font-weight: 700;
  color: var(--ra-ink) !important;
  letter-spacing: -0.01em;
}
body .navbar-nav .nav-link {
  color: var(--ra-ink-2);
  font-weight: 500;
  font-size: 0.95rem;
}
body .navbar-nav .nav-link:hover { color: var(--ra-teal-600); }

/* Dark navbar variant (used by some admin top-nav) → light treatment */
body .navbar.bg-dark,
body nav.navbar.bg-dark {
  background: var(--ra-surface) !important;
  border-bottom: 1px solid var(--ra-border);
}
body .navbar.bg-dark .navbar-brand,
body .navbar.bg-dark .nav-link { color: var(--ra-ink) !important; }
body .navbar.bg-dark .nav-link:hover { color: var(--ra-teal-600) !important; }
body .navbar.bg-dark .navbar-toggler-icon {
  filter: invert(0.6);
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
body .badge {
  font-weight: 500;
  font-size: 0.75rem;
  padding: 0.35em 0.6em;
  border-radius: var(--ra-radius-sm);
  letter-spacing: 0.01em;
}

/* Soft / tinted badge utilities */
.ra-badge-soft-teal    { background: var(--ra-teal-50);    color: var(--ra-teal-700); border: 1px solid var(--ra-teal-100); }
.ra-badge-soft-emerald { background: var(--ra-emerald-50); color: var(--ra-emerald);  border: 1px solid var(--ra-emerald-100); }
.ra-badge-soft-amber   { background: var(--ra-amber-50);   color: var(--ra-amber);    border: 1px solid var(--ra-amber-100); }
.ra-badge-soft-rose    { background: var(--ra-rose-50);    color: var(--ra-rose);     border: 1px solid var(--ra-rose-100); }
.ra-badge-soft-sky     { background: var(--ra-sky-50);     color: var(--ra-sky);      border: 1px solid var(--ra-sky-100); }
.ra-badge-soft-ink     { background: var(--ra-surface-2);  color: var(--ra-ink-2);    border: 1px solid var(--ra-border); }

/* --------------------------------------------------------------------------
   Bootstrap color utility re-maps (so existing pages inherit the palette)
   -------------------------------------------------------------------------- */
body .bg-primary { background-color: var(--ra-teal-500) !important; }
body .bg-success { background-color: var(--ra-emerald)  !important; }
body .bg-warning { background-color: var(--ra-amber)    !important; }
body .bg-danger  { background-color: var(--ra-rose)     !important; }
body .bg-info    { background-color: var(--ra-sky)      !important; }
body .bg-light   { background-color: var(--ra-surface-2)!important; }
body .bg-dark    { background-color: var(--ra-ink)      !important; }

body .text-primary { color: var(--ra-teal-600) !important; }
body .text-success { color: var(--ra-emerald)  !important; }
body .text-warning { color: var(--ra-amber)    !important; }
body .text-danger  { color: var(--ra-rose)     !important; }
body .text-info    { color: var(--ra-sky)      !important; }

body .border          { border-color: var(--ra-border) !important; }
body .border-primary  { border-color: var(--ra-teal-200) !important; }

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
body .alert { border-radius: var(--ra-radius); border-width: 1px; padding: 0.85rem 1rem; }
body .alert-primary { background: var(--ra-teal-50);    border-color: var(--ra-teal-100);    color: var(--ra-teal-700); }
body .alert-success { background: var(--ra-emerald-50); border-color: var(--ra-emerald-100); color: var(--ra-emerald); }
body .alert-warning { background: var(--ra-amber-50);   border-color: var(--ra-amber-100);   color: var(--ra-amber); }
body .alert-danger  { background: var(--ra-rose-50);    border-color: var(--ra-rose-100);    color: var(--ra-rose); }
body .alert-info    { background: var(--ra-sky-50);     border-color: var(--ra-sky-100);     color: var(--ra-sky); }

/* --------------------------------------------------------------------------
   Inverted admin sidebar (white with teal accent)
   Wins over per-page inline `.sidebar { background: var(--sidebar-bg) }`.
   -------------------------------------------------------------------------- */
body .sidebar {
  background: var(--ra-surface) !important;
  border-right: 1px solid var(--ra-border);
}
body .sidebar .nav-link {
  color: var(--ra-ink-2) !important;
  padding: 0.5rem 0.85rem !important;
  margin: 1px 0.5rem;
  border-radius: var(--ra-radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  position: relative;
  transition: background-color var(--ra-fast) var(--ra-ease),
              color var(--ra-fast) var(--ra-ease);
}
body .sidebar .nav-link:hover {
  background: var(--ra-surface-2) !important;
  color: var(--ra-ink) !important;
}
body .sidebar .nav-link.active {
  background: var(--ra-teal-50) !important;
  color: var(--ra-teal-700) !important;
  font-weight: 600;
}
body .sidebar .nav-link.active::before {
  content: '';
  position: absolute;
  left: -0.5rem;
  top: 0.3rem;
  bottom: 0.3rem;
  width: 3px;
  background: var(--ra-teal-500);
  border-radius: 0 var(--ra-radius-sm) var(--ra-radius-sm) 0;
}
body .sidebar .nav-link i { color: var(--ra-ink-3); width: 1.2em; }
body .sidebar .nav-link.active i,
body .sidebar .nav-link:hover i { color: var(--ra-teal-600); }
body .sidebar .nav-divider {
  border-top: 1px solid var(--ra-border) !important;
  margin: 0.5rem 0.75rem;
}
body .sidebar .nav-section {
  color: var(--ra-ink-3) !important;
  font-size: 0.7rem !important;
  font-weight: 600;
  padding: 0.85rem 0.9rem 0.3rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Sidebar scrollbar */
body .sidebar::-webkit-scrollbar { width: 6px !important; }
body .sidebar::-webkit-scrollbar-track { background: transparent !important; }
body .sidebar::-webkit-scrollbar-thumb { background: var(--ra-border-strong) !important; border-radius: 3px; min-height: 30px; }
body .sidebar::-webkit-scrollbar-thumb:hover { background: var(--ra-ink-3) !important; }
body .sidebar { scrollbar-width: thin !important; scrollbar-color: var(--ra-border-strong) transparent !important; }

/* Main content canvas */
body .main-content { background: var(--ra-canvas) !important; }

/* --------------------------------------------------------------------------
   Stat cards (admin pages currently use `.card.stat-card.bg-primary text-white`)
   Inverted: white surface, tinted icon chip, large dark number.
   -------------------------------------------------------------------------- */
body .card.stat-card {
  background: var(--ra-surface) !important;
  color: var(--ra-ink) !important;
  border: 1px solid var(--ra-border) !important;
  border-radius: var(--ra-radius-lg) !important;
  box-shadow: var(--ra-shadow-xs);
  overflow: hidden;
}
body .card.stat-card:hover { box-shadow: var(--ra-shadow-md); }
body .card.stat-card.bg-primary,
body .card.stat-card.bg-success,
body .card.stat-card.bg-warning,
body .card.stat-card.bg-danger,
body .card.stat-card.bg-info,
body .card.stat-card.text-white,
body .card.stat-card.text-dark {
  background: var(--ra-surface) !important;
  color: var(--ra-ink) !important;
}
body .card.stat-card .stat-value {
  color: var(--ra-ink) !important;
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
body .card.stat-card .card-body > div:not(.stat-icon):not([class*='stat-value']) {
  color: var(--ra-ink-3) !important;
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 0.25rem;
}
body .card.stat-card .stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--ra-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem !important;
  opacity: 1 !important;
  background: var(--ra-teal-50);
  color: var(--ra-teal-600) !important;
  flex-shrink: 0;
}
body .card.stat-card.bg-primary .stat-icon { background: var(--ra-teal-50);    color: var(--ra-teal-600) !important; }
body .card.stat-card.bg-success .stat-icon { background: var(--ra-emerald-50); color: var(--ra-emerald)  !important; }
body .card.stat-card.bg-warning .stat-icon { background: var(--ra-amber-50);   color: var(--ra-amber)    !important; }
body .card.stat-card.bg-danger  .stat-icon { background: var(--ra-rose-50);    color: var(--ra-rose)     !important; }
body .card.stat-card.bg-info    .stat-icon { background: var(--ra-sky-50);     color: var(--ra-sky)      !important; }

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
body .modal-content {
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius-lg);
  box-shadow: var(--ra-shadow-lg);
}
body .modal-header,
body .modal-footer { border-color: var(--ra-border); }

/* --------------------------------------------------------------------------
   Dropdown
   -------------------------------------------------------------------------- */
body .dropdown-menu {
  border: 1px solid var(--ra-border);
  border-radius: var(--ra-radius);
  box-shadow: var(--ra-shadow-md);
  padding: 0.4rem;
}
body .dropdown-item {
  border-radius: var(--ra-radius-sm);
  padding: 0.4rem 0.65rem;
  font-size: 0.9rem;
  color: var(--ra-ink-2);
}
body .dropdown-item:hover,
body .dropdown-item:focus { background: var(--ra-surface-2); color: var(--ra-ink); }
body .dropdown-divider { border-top: 1px solid var(--ra-border); }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
body .pagination .page-link {
  border: 1px solid var(--ra-border);
  color: var(--ra-ink-2);
  border-radius: var(--ra-radius-sm) !important;
  margin: 0 2px;
  padding: 0.4rem 0.75rem;
}
body .pagination .page-link:hover { background: var(--ra-surface-2); color: var(--ra-teal-600); }
body .pagination .page-item.active .page-link {
  background: var(--ra-teal-500);
  border-color: var(--ra-teal-500);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Progress / Tooltips / List groups
   -------------------------------------------------------------------------- */
body .progress { background: var(--ra-border); border-radius: var(--ra-radius-pill); height: 8px; }
body .progress-bar { background: linear-gradient(90deg, var(--ra-teal-500), var(--ra-teal-600)); }

body .tooltip-inner {
  background: var(--ra-ink);
  border-radius: var(--ra-radius-sm);
  font-weight: 500;
  font-size: 0.8rem;
  padding: 0.45rem 0.7rem;
}

body .list-group-item {
  background: var(--ra-surface);
  border-color: var(--ra-border);
  color: var(--ra-ink-2);
}
body .list-group-item.active {
  background: var(--ra-teal-50);
  border-color: var(--ra-teal-100);
  color: var(--ra-teal-700);
}

/* Existing pages use `.bulk-actions` for the table selection toolbar. */
body .bulk-actions {
  background: var(--ra-teal-50);
  border: 1px solid var(--ra-teal-100);
  border-radius: var(--ra-radius);
  padding: 0.6rem 0.9rem;
}

/* --------------------------------------------------------------------------
   New RA-prefixed components
   -------------------------------------------------------------------------- */
.ra-glass {
  background: rgb(255 255 255 / 0.75);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgb(255 255 255 / 0.4);
}

.ra-icon-chip {
  width: 44px;
  height: 44px;
  border-radius: var(--ra-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ra-teal-50);
  color: var(--ra-teal-600);
  font-size: 1.4rem;
}
.ra-icon-chip-lg { width: 56px; height: 56px; font-size: 1.75rem; border-radius: var(--ra-radius-lg); }
.ra-icon-chip.is-emerald { background: var(--ra-emerald-50); color: var(--ra-emerald); }
.ra-icon-chip.is-amber   { background: var(--ra-amber-50);   color: var(--ra-amber); }
.ra-icon-chip.is-rose    { background: var(--ra-rose-50);    color: var(--ra-rose); }
.ra-icon-chip.is-sky     { background: var(--ra-sky-50);     color: var(--ra-sky); }
.ra-icon-chip.is-violet  { background: var(--ra-violet-50);  color: var(--ra-violet); }

.ra-section       { padding: clamp(3rem, 8vw, 6rem) 0; }
.ra-section-tight { padding: clamp(2rem, 4vw, 3rem) 0; }

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

.ra-card-hover { transition: transform var(--ra-base) var(--ra-ease), box-shadow var(--ra-base) var(--ra-ease); }
.ra-card-hover:hover { transform: translateY(-2px); box-shadow: var(--ra-shadow-md); }

/* Subtle dotted-grid hero background (used by hand-tuned landing) */
.ra-bg-grid {
  background-image:
    radial-gradient(circle at 1px 1px, var(--ra-border) 1px, transparent 0);
  background-size: 24px 24px;
}

/* --------------------------------------------------------------------------
   Focus visibility
   -------------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--ra-teal-500); outline-offset: 2px; }
button:focus-visible, a:focus-visible, .btn:focus-visible { outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Dark "GGV" theme repair — 8 verification pages + a few AI config pages
   originally shipped with a slate-900 / slate-800 surface. We re-light them
   so headings get the same bold ink treatment as the rest of the app.
   -------------------------------------------------------------------------- */
body main.main-content { background: var(--ra-canvas) !important; color: var(--ra-ink-2) !important; }

/* The verify-dashboard h1 carries an inline color:#f1f5f9 — beat it with !important */
body main.main-content > div > h1[style],
body main.main-content > div > h2[style] {
  color: var(--ra-ink) !important;
}
body main.main-content > div > p[style] { color: var(--ra-ink-3) !important; }

/* GGV stat cards → light surface, tinted icon chip, ink-colored value */
body .ggv-stat-card {
  background: var(--ra-surface) !important;
  border: 1px solid var(--ra-border) !important;
  border-radius: var(--ra-radius-lg);
  padding: 1rem 1.1rem;
  box-shadow: var(--ra-shadow-xs);
  transition: box-shadow var(--ra-base) var(--ra-ease);
}
body .ggv-stat-card:hover { box-shadow: var(--ra-shadow-sm); }
body .ggv-stat-card .ggv-stat-value { color: var(--ra-ink) !important; letter-spacing: -0.02em; }
/* Per-stat colored values (verified=emerald, rejected=rose, etc.) carry an
   inline `style="color:#10b981"` — those are semantic and should survive,
   but normalize them onto our palette for consistency. */
body .ggv-stat-card .ggv-stat-value[style*="#10b981"] { color: var(--ra-emerald) !important; }
body .ggv-stat-card .ggv-stat-value[style*="#ef4444"] { color: var(--ra-rose) !important; }
body .ggv-stat-card .ggv-stat-value[style*="#06b6d4"] { color: var(--ra-sky) !important; }
body .ggv-stat-card .ggv-stat-value[style*="#f59e0b"] { color: var(--ra-amber) !important; }
body .ggv-stat-card .ggv-stat-label { color: var(--ra-ink-3) !important; font-size: 0.82rem; font-weight: 500; }
/* Icon chip: tint instead of opaque dark fill */
body .ggv-stat-card .ggv-stat-icon[style*="#0d9488"] { background: var(--ra-teal-50) !important; color: var(--ra-teal-600) !important; }
body .ggv-stat-card .ggv-stat-icon[style*="#10b981"] { background: var(--ra-emerald-50) !important; color: var(--ra-emerald) !important; }
body .ggv-stat-card .ggv-stat-icon[style*="#ef4444"] { background: var(--ra-rose-50) !important;    color: var(--ra-rose) !important; }
body .ggv-stat-card .ggv-stat-icon[style*="#06b6d4"] { background: var(--ra-sky-50) !important;     color: var(--ra-sky) !important; }
body .ggv-stat-card .ggv-stat-icon[style*="#8b5cf6"] { background: var(--ra-violet-50) !important;  color: var(--ra-violet) !important; }
body .ggv-stat-card .ggv-stat-icon[style*="#f59e0b"] { background: var(--ra-amber-50) !important;   color: var(--ra-amber) !important; }

/* GGV activity card → light surface */
body .ggv-activity-card {
  background: var(--ra-surface) !important;
  border: 1px solid var(--ra-border) !important;
  border-radius: var(--ra-radius-lg);
  box-shadow: var(--ra-shadow-xs);
}
body .ggv-activity-header {
  border-bottom: 1px solid var(--ra-border) !important;
  padding: 0.85rem 1.1rem;
}
body .ggv-activity-header h2 {
  color: var(--ra-ink) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
body .ggv-view-all-btn {
  background: var(--ra-surface) !important;
  border: 1px solid var(--ra-border) !important;
  color: var(--ra-ink-2) !important;
  border-radius: var(--ra-radius-sm) !important;
  padding: 0.25rem 0.6rem !important;
  font-size: 0.72rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body .ggv-view-all-btn:hover { background: var(--ra-surface-2) !important; color: var(--ra-teal-600) !important; }

body .ggv-activity-row {
  border-bottom: 1px solid var(--ra-border) !important;
  padding: 0.7rem 1.1rem;
}
body .ggv-activity-row:hover { background: var(--ra-surface-2) !important; }
/* The activity row's primary name is rendered via JS as inline color:#f1f5f9 */
body .ggv-activity-row div[style*="#f1f5f9"] { color: var(--ra-ink) !important; }
body .ggv-activity-row div[style*="#64748b"],
body .ggv-activity-row div[style*="#475569"] { color: var(--ra-ink-3) !important; }

body .ggv-empty { color: var(--ra-ink-3) !important; padding: 3rem 1rem; }
body .ggv-empty i { color: var(--ra-ink-3) !important; opacity: 0.5; }

/* GGV badge — keep the colored tint but use our palette */
body .ggv-badge { border-radius: var(--ra-radius-pill); font-weight: 600; padding: 0.18rem 0.55rem; font-size: 0.7rem; letter-spacing: 0.02em; }

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .sidebar, .navbar, .ra-glass { display: none !important; }
  body { background: #fff; }
}