/* =============================================================================
   DataOrbix — VERCEL MONOCHROMATIC DESIGN SYSTEM
   Universal CSS Token Override · v1.0 · 2026-06-29

   DESIGN PHILOSOPHY:
   ─────────────────────────────────────────────────────────────────────────────
   A premium, Vercel-inspired monochromatic dark language built on pure geometric
   tokens. No color glows, no gradient fills, no colored side panels, no thick
   teal lines. Depth is communicated through tonal surface steps (#000 → #111 →
   #161616 → #1A1A1A) and a single crisp border token (#333333 at rest,
   #444444 on hover). All interactions are instant, tactile, and isolated.

   SURFACE HIERARCHY:
   ─────────────────────────────────────────────────────────────────────────────
   Layer 0  System Background    #000000 / #0A0A0A
   Layer 1  Master Cards          #111111
   Layer 2  Inner Sub-Cards       #161616
   Layer 3  Hover Lift            #1A1A1A
   Border   Rest                  1px solid #333333
   Border   Hover                 1px solid #444444
   Radius   Global                6px

   INTERACTION RULES (ISOLATED):
   ─────────────────────────────────────────────────────────────────────────────
   Card hover      → bg #111111 → #1A1A1A, border #333 → #444 (NO glow, NO lift)
   Sub-card hover  → parent stays at rest (child selector isolation via :has())
   Button/item hover → bg rgba(255,255,255,0.08), text #888 → #fff
   Active/click    → scale(0.985), bg #111111, 80ms snap back

   FORM INPUTS:
   ─────────────────────────────────────────────────────────────────────────────
   Default         → bg #111111, border #333333, placeholder #555555
   Focus           → border #555555, NO shadow, NO glow

   ============================================================================= */

/* ── 1. GLOBAL CSS CUSTOM PROPERTIES (Override All Legacy Values) ─────────── */
:root {
  /* ── Surface Tokens ──────────────────────────────────────────────────── */
  --vo-bg:              #000000;       /* System background */
  --vo-bg-alt:          #0A0A0A;       /* Alternate system background */
  --vo-card:            #111111;       /* Master card surface */
  --vo-card-sub:        #161616;       /* Inner nested sub-card surface */
  --vo-card-hover:      #1A1A1A;       /* Card hover lift state */

  /* ── Border Tokens ───────────────────────────────────────────────────── */
  --vo-border:          #333333;       /* Universal rest border */
  --vo-border-hover:    #444444;       /* Hover border shift */
  --vo-border-focus:    #555555;       /* Input focus border (no glow) */
  --vo-border-width:    1px;
  --vo-radius:          6px;           /* Global border-radius */

  /* ── Text Tokens ─────────────────────────────────────────────────────── */
  --vo-text-primary:    #FFFFFF;       /* High contrast white */
  --vo-text-secondary:  #A1A1A1;       /* Body / description text */
  --vo-text-muted:      #888888;       /* Muted labels, placeholders */
  --vo-text-disabled:   #555555;       /* Disabled states */

  /* ── Interactive / Button Tokens ────────────────────────────────────── */
  --vo-item-hover-bg:   rgba(255, 255, 255, 0.08);  /* Button/item hover fill */
  --vo-item-hover-bg-alt: #222222;     /* Alternate solid hover fill */
  --vo-item-text-rest:  #888888;       /* Resting muted text */
  --vo-item-text-hover: #FFFFFF;       /* Hover high-contrast text */

  /* ── Active / Click Physics ─────────────────────────────────────────── */
  --vo-active-scale:    scale(0.985);
  --vo-active-bg:       #111111;
  --vo-active-transition: transform 0.08s ease-out;

  /* ── Transition Tokens ───────────────────────────────────────────────── */
  --vo-transition:      background 0.2s ease, border-color 0.2s ease, color 0.15s ease;
  --vo-transition-fast: 0.15s ease;

  /* ── Status Colors (semantic functional only, no decoration) ─────────── */
  --vo-success:         #22c55e;
  --vo-warning:         #f59e0b;
  --vo-error:           #ef4444;
  --vo-info:            #3b82f6;

  /* ── Override Legacy Tokens to Monochromatic Values ─────────────────── */

  /* Backgrounds */
  --color-background:         #000000;
  --color-surface:            #111111;
  --color-surface-elevated:   #161616;
  --color-surface-hover:      #1A1A1A;
  --color-surface-active:     #111111;
  --color-modal-overlay:      rgba(0, 0, 0, 0.85);
  --color-modal-bg:           #111111;
  --color-modal-border:       #333333;

  /* Borders */
  --color-border:             #333333;
  --color-border-light:       #2a2a2a;
  --color-border-focus:       #555555;
  --color-border-success:     #22c55e;
  --color-border-warning:     #f59e0b;
  --color-border-error:       #ef4444;

  /* Text */
  --color-text-primary:       #FFFFFF;
  --color-text-secondary:     #A1A1A1;
  --color-text-muted:         #888888;
  --color-text-disabled:      #555555;
  --color-text-inverse:       #000000;

  /* Accent / Brand - replaced with monochromatic neutrals */
  --color-primary:            #FFFFFF;
  --color-primary-light:      #E5E5E5;
  --color-primary-dark:       #CCCCCC;
  --color-secondary:          #A1A1A1;
  --color-secondary-light:    #CCCCCC;
  --color-secondary-dark:     #666666;

  /* Override DataOrbix teal/orange brand tokens */
  --dori-teal:                #FFFFFF;
  --dori-teal-light:          #E5E5E5;
  --dori-teal-dark:           #CCCCCC;
  --dori-orange:              #A1A1A1;
  --dori-orange-light:        #CCCCCC;
  --dori-orange-dark:         #888888;
  --slate-grey:               #888888;
  --slate-grey-light:         #A1A1A1;
  --slate-grey-dark:          #666666;
  --enterprise-slate:         rgba(255, 255, 255, 0.04);
  --enterprise-slate-hover:   rgba(255, 255, 255, 0.08);
  --muted-teal:               #333333;
  --muted-orange:             #2a2a2a;

  /* Traffic light — preserved semantic */
  --traffic-green:            #22c55e;
  --traffic-orange:           #f59e0b;
  --traffic-red:              #ef4444;
  --traffic-amber:            #f59e0b;
  --traffic-slate:            #555555;

  /* Gradients — eliminated, replaced with flat surfaces */
  --gradient-primary:         #111111;
  --gradient-secondary:       #161616;
  --gradient-overlay:         rgba(0, 0, 0, 0.6);
  --gradient-card:            #111111;

  /* Shadows — pure depth only, no color lift */
  --shadow-sm:                0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-md:                0 2px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg:                0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-xl:                0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow:              none;

  /* Radii — unified 6px */
  --radius-sm:                6px;
  --radius-md:                6px;
  --radius-lg:                6px;
  --radius-xl:                6px;
  --radius-2xl:               6px;
  --radius-full:              9999px;

  /* Interaction tokens — remapped to monochromatic */
  --ix-surface-base:          #111111;
  --ix-surface-hover:         #1A1A1A;
  --ix-border-base:           #333333;
  --ix-border-base-rgb:       51, 51, 51;
  --ix-border-bottom-active:  #555555;  /* No teal — neutral focus line */
  --ix-border-side-hover:     #444444;
  --ix-border-bottom-width:   1px;      /* No thick borders */
  --ix-lift-shadow:           none;     /* No lift shadow */
  --ix-lift-shadow-deep:      none;
  --ix-transition:            background 0.2s ease, border-color 0.2s ease;
  --ix-transition-border:     border-color 0.2s ease;
  --ix-transition-active:     transform 0.08s ease-out;
  --ix-btn-color-base:        #888888;
  --ix-btn-color-hover:       #FFFFFF;
  --ix-btn-icon-color-base:   #666666;
  --ix-btn-icon-color-hover:  #E5E5E5;
  --ix-active-scale:          scale(0.985);
  --ix-active-opacity:        1;
  --ix-focus-ring:            0 0 0 2px #000000, 0 0 0 3px #555555;

  /* Typography — preserved */
  --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── 2. SYSTEM RESET & BASE ───────────────────────────────────────────────── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-family-primary);
  background-color: var(--vo-bg);
  color: var(--vo-text-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

/* Global focus — crisp, no glow */
*:focus { outline: none; }
*:focus-visible {
  outline: 1px solid var(--vo-border-focus);
  outline-offset: 2px;
}

/* ── 3. TYPOGRAPHY ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--vo-text-primary);
  font-weight: 600;
  line-height: 1.3;
}

p { color: var(--vo-text-secondary); }

/* Override gradient-text to plain white */
.gradient-text {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  color: var(--vo-text-primary) !important;
  font-weight: 600;
}

/* ── 4. NAVIGATION ────────────────────────────────────────────────────────── */
.navbar {
  background-color: rgba(0, 0, 0, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--vo-border) !important;
  box-shadow: none !important;
}

/* Landing floating nav */
body[data-page="landing"] .navbar {
  background-color: rgba(17, 17, 17, 0.95) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
}

body[data-page="landing"] .navbar.navbar-scrolled {
  background-color: rgba(17, 17, 17, 0.98) !important;
  border: 1px solid var(--vo-border-hover) !important;
}

.nav-link {
  color: var(--vo-text-muted) !important;
  border-radius: var(--vo-radius) !important;
  transition: var(--vo-transition) !important;
}

.nav-link:hover {
  color: var(--vo-text-primary) !important;
  background-color: var(--vo-item-hover-bg) !important;
}

.nav-link.active {
  color: var(--vo-text-primary) !important;
  background-color: var(--vo-item-hover-bg) !important;
  font-weight: 600;
}

/* ── 5. MASTER CARDS ──────────────────────────────────────────────────────── */
/* Explicit card containers only — no wildcards that bleed into text children */
.config-card,
.capability-card,
.status-card,
.stat-card,
.compliance-item,
.workflow-step,
.info-card,
.selection-tile,
.card,
.prereg-card,
.testimonial-card,
.metric-card,
.domain-card,
.stage-card,
.reviewer-card,
.workflow-item {
  background: var(--vo-card) !important;
  border: var(--vo-border-width) solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
  box-shadow: none !important;
  transition: var(--vo-transition) !important;
}

/* ── CARD HEADERS: remove gradient fills ────────────────────────────── */
.card-header,
.config-card .card-header,
[class*="card-header"] {
  background: #161616 !important;
  background-image: none !important;
  border-bottom: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) var(--vo-radius) 0 0 !important;
}

/* ── CARD HOVER: isolated from children ─────────────────────────────── */
.config-card:hover:not(:has(button:hover, a:hover, select:hover, input:hover, .upload-zone:hover, .config-section:hover, .info-card:hover, .selection-tile:hover, .radio-option:hover, .file-upload-area:hover, .expandable-toggle:hover)),
.capability-card:hover:not(:has(button:hover, a:hover, select:hover)),
.status-card:hover:not(:has(button:hover, a:hover)),
.stat-card:hover,
.compliance-item:hover,
.workflow-step:hover {
  background: var(--vo-card-hover) !important;
  border-color: var(--vo-border-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Remove any bottom border thickening inherited from legacy */
.config-card:hover,
.capability-card:hover,
.status-card:hover {
  border-bottom-width: 1px !important;
  border-bottom-color: inherit;
}

/* ── 6. INNER SUB-CARDS & NESTED ELEMENTS ────────────────────────────────── */
/* Protocol upload dropzone, config-section inset boxes */
.file-upload-area,
.upload-zone,
.config-section,
.card-content > .form-group > .select-wrapper,
.library-info,
.info-panel,
.sub-card,
.expandable-content,
.radio-option,
.mapping-stats,
.action-section,
.control-section {
  background: var(--vo-card-sub) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
}

/* Sub-card hover — does NOT trigger parent hover */
.file-upload-area:hover,
.upload-zone:hover,
.radio-option:hover {
  background: var(--vo-card-hover) !important;
  border-color: var(--vo-border-hover) !important;
}

/* Library info left-accent — convert to simple border */
.library-info {
  border-left: 2px solid var(--vo-border-hover) !important;
  background: var(--vo-card-sub) !important;
}

/* ── 7. BUTTONS ───────────────────────────────────────────────────────────── */
.btn,
button.btn,
a.btn {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
  color: var(--vo-item-text-rest) !important;
  font-weight: 500 !important;
  transition: var(--vo-transition) !important;
  box-shadow: none !important;
  text-decoration: none;
  cursor: pointer;
  outline: none !important;
}

.btn:hover,
button.btn:hover,
a.btn:hover {
  background: var(--vo-item-hover-bg) !important;
  border-color: var(--vo-border-hover) !important;
  color: var(--vo-item-text-hover) !important;
  box-shadow: none !important;
}

/* Active / click physics */
.btn:active,
button.btn:active,
a.btn:active {
  transform: var(--vo-active-scale) !important;
  background: var(--vo-active-bg) !important;
  transition: var(--vo-active-transition) !important;
}

/* Reset focus state immediately on click (prevent sticky teal) */
.btn:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none !important;
  border-color: var(--vo-border) !important;
  box-shadow: none !important;
}

/* Keyboard focus ring */
.btn:focus-visible {
  outline: 1px solid var(--vo-border-focus) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Primary button variant — still flat but slightly lighter */
.btn-primary {
  background: #1A1A1A !important;
  border-color: var(--vo-border-hover) !important;
  color: var(--vo-text-primary) !important;
}

.btn-primary:hover {
  background: #222222 !important;
  border-color: #555555 !important;
  color: var(--vo-text-primary) !important;
  box-shadow: none !important;
}

.btn-primary:active {
  transform: var(--vo-active-scale) !important;
  background: var(--vo-card) !important;
}

/* Secondary button */
.btn-secondary {
  background: var(--vo-card) !important;
  border-color: var(--vo-border) !important;
  color: var(--vo-text-muted) !important;
}

.btn-secondary:hover {
  background: var(--vo-item-hover-bg) !important;
  border-color: var(--vo-border-hover) !important;
  color: var(--vo-text-primary) !important;
}

/* Outline button */
.btn-outline {
  background: transparent !important;
  border-color: var(--vo-border) !important;
  color: var(--vo-text-muted) !important;
}

.btn-outline:hover {
  background: var(--vo-item-hover-bg) !important;
  border-color: var(--vo-border-hover) !important;
  color: var(--vo-text-primary) !important;
  box-shadow: none !important;
}

.btn-outline.active {
  background: var(--vo-item-hover-bg-alt) !important;
  border-color: var(--vo-border-hover) !important;
  color: var(--vo-text-primary) !important;
}

/* ── Dori chat button — icon only, no box, no bg, no border ─────────── */
#dori-chat-btn,
#dori-chat-btn:hover,
#dori-chat-btn:focus,
#dori-chat-btn.active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

/* Danger button */
.btn-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #ef4444 !important;
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}

/* Small buttons */
.btn-sm {
  padding: 0.375rem 0.75rem !important;
  font-size: 0.75rem !important;
}

/* btn-icon (icon-only round buttons) */
.btn-icon {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
  color: var(--vo-text-muted) !important;
  transition: var(--vo-transition) !important;
}

.btn-icon:hover {
  background: var(--vo-item-hover-bg) !important;
  border-color: var(--vo-border-hover) !important;
  color: var(--vo-text-primary) !important;
}

.btn-icon:active {
  transform: var(--vo-active-scale) !important;
}

/* ── 8. FORM INPUTS & SELECTS ─────────────────────────────────────────────── */
.form-input,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea,
select {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
  color: var(--vo-text-primary) !important;
  transition: border-color 0.15s ease !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Placeholder text */
.form-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--vo-text-disabled) !important;
}

/* Focus: border only, NO glow, NO shadow */
.form-input:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--vo-border-focus) !important;
  box-shadow: none !important;
  background: var(--vo-card) !important;
}

/* Custom select dropdown arrow — neutral */
.form-select,
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23666666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.5rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.5em 1.5em !important;
  padding-right: 2.5rem !important;
}

/* Select dropdown panel */
select option {
  background: #111111 !important;
  color: var(--vo-text-primary) !important;
}

select option:hover,
select option:checked {
  background: #222222 !important;
}

/* Form label */
.form-label,
label {
  color: var(--vo-text-secondary) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

/* ── 9. DROPDOWN MENUS & LIST ITEMS ───────────────────────────────────────── */
.dropdown-menu,
.dropdown-panel,
[class*="dropdown"] > ul,
[class*="dropdown"] > div,
.context-menu,
.select-panel {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

.dropdown-item,
.dropdown-option,
[class*="dropdown"] li,
[class*="dropdown"] a,
.menu-item {
  color: var(--vo-text-muted) !important;
  background: transparent !important;
  border-radius: var(--vo-radius) !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}

.dropdown-item:hover,
.dropdown-option:hover,
[class*="dropdown"] li:hover,
[class*="dropdown"] a:hover,
.menu-item:hover {
  background: var(--vo-item-hover-bg) !important;
  color: var(--vo-text-primary) !important;
}

.dropdown-item:active,
.dropdown-option:active {
  transform: var(--vo-active-scale) !important;
  background: var(--vo-active-bg) !important;
  transition: var(--vo-active-transition) !important;
}

/* ── 10. TABLES ───────────────────────────────────────────────────────────── */
table,
.mapping-table,
.specifications-table,
[class*="-table"] {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

th {
  background: #161616 !important;
  background-image: none !important;
  color: var(--vo-text-secondary) !important;
  border-bottom: 1px solid var(--vo-border) !important;
  border-right: 1px solid var(--vo-border) !important;
  font-weight: 600 !important;
}

th:last-child { border-right: none !important; }

td {
  background: var(--vo-card) !important;
  color: var(--vo-text-secondary) !important;
  border-bottom: 1px solid var(--vo-border) !important;
  border-right: 1px solid var(--vo-border) !important;
}

td:last-child { border-right: none !important; }

/* Table row hover */
tbody tr:hover td {
  background: var(--vo-card-hover) !important;
  color: var(--vo-text-primary) !important;
}

/* Remove thick colored left border on row hover */
tbody tr:hover {
  border-left: none !important;
  outline: none !important;
}

/* Interactive cell */
.interactive-cell {
  border-left: 2px solid transparent !important;
  transition: var(--vo-transition) !important;
}

.interactive-cell:hover {
  border-left-color: var(--vo-border-hover) !important;
  background-color: var(--vo-card-hover) !important;
  box-shadow: none !important;
}

/* ── 11. SECTIONS & LAYOUT WRAPPERS ─────────────────────────────────────────*/
.section-gradient,
.capabilities,
.workflow,
.compliance,
.cta {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
  background-image: none !important;
}

.section-header {
  border-bottom: 1px solid var(--vo-border) !important;
}

/* CTA wrapper */
.cta-wrapper {
  background: #0A0A0A !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
}

/* Remove the thick accent bar / teal top line */
.cta-accent-bar {
  display: none !important;
}

/* ── 12. HERO SECTION ─────────────────────────────────────────────────────── */
.hero {
  background: var(--vo-bg) !important;
  background-image: none !important;
}

.hero::before {
  display: none !important;
}

#dataOrbixCanvas {
  background-color: var(--vo-bg) !important;
}

.hero-kicker {
  background: transparent !important;
  border: 1px solid #000000 !important;
  border-radius: var(--vo-radius) !important;
  color: var(--vo-text-muted) !important;
}

.kicker-separator {
  color: var(--vo-text-muted) !important;
}

/* Hero kicker — match .do-label type scale + full rendering stack */
.hero-kicker .kicker-powered,
.hero-kicker .kicker-dori {
  font-size: 18px !important;
  font-weight: 300 !important;
  letter-spacing: 2px !important;
  color: var(--do-orange) !important;

  /* Smooth text rendering */
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;

  /* GPU compositing — prevents rasterization artifacts */
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

.hero-title {
  color: var(--vo-text-primary) !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}

.hero-subtitle {
  color: var(--vo-text-muted) !important;
}

/* ── 13. CAPABILITY CARDS ─────────────────────────────────────────────────── */
.capability-card {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
}

.capability-card:hover {
  background: var(--vo-card-hover) !important;
  border-color: var(--vo-border-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}

.card-icon {
  color: var(--vo-text-secondary) !important;
  background: var(--vo-card-sub) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
}

/* ── 14. WORKFLOW STEPS ───────────────────────────────────────────────────── */
.workflow-step {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
}

.workflow-step:hover {
  background: var(--vo-card-hover) !important;
  border-color: var(--vo-border-hover) !important;
}

.step-number {
  background: var(--vo-card-sub) !important;
  border: 1px solid var(--vo-border) !important;
  color: var(--vo-text-secondary) !important;
  border-radius: var(--vo-radius) !important;
}

.workflow-arrow {
  border-color: var(--vo-border) !important;
  color: var(--vo-border-hover) !important;
}

/* ── 15. COMPLIANCE GRID ─────────────────────────────────────────────────── */
.compliance-item {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
  border-top: none !important;
}

.compliance-item:hover {
  background: var(--vo-card-hover) !important;
  border-color: var(--vo-border-hover) !important;
}

.compliance-icon {
  color: var(--vo-text-muted) !important;
}

/* ── 16. TIMELINE & ACTIVITY ──────────────────────────────────────────────── */
.timeline-item .timeline-marker {
  background: var(--vo-card-sub) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: 50% !important;
  color: var(--vo-text-muted) !important;
}

.timeline-item.completed .timeline-marker {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: var(--vo-success) !important;
  color: var(--vo-success) !important;
}

.timeline-item.current .timeline-marker {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--vo-border-hover) !important;
  color: var(--vo-text-primary) !important;
}

.timeline::before {
  background: var(--vo-border) !important;
}

/* ── 17. STATUS BADGES ────────────────────────────────────────────────────── */
/* Explicit badge containers only — no wildcards that bleed into text children */
.status-badge,
.badge,
.domain-badge,
.preview-badge,
.confidence-badge,
.careers-roles-badge,
.study-status-badge,
.datatype-badge,
.logic-count-badge,
.logic-rule-badge,
.review-badge,
.review-comment-status-badge {
  border-radius: var(--vo-radius) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  border: 1px solid transparent !important;
}

/* Keep semantic status colors */
.status-badge.status-current,
.status-indicator.status-current { color: var(--vo-success) !important; }
.status-badge.status-warning,
.status-indicator.status-warning { color: var(--vo-warning) !important; }
.status-badge.status-error { color: var(--vo-error) !important; }

/* ── 18. MODALS ───────────────────────────────────────────────────────────── */
.modal-overlay {
  background: rgba(0, 0, 0, 0.85) !important;
}

.modal-content {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

.modal-header {
  border-bottom: 1px solid var(--vo-border) !important;
  background: #161616 !important;
  border-radius: var(--vo-radius) var(--vo-radius) 0 0 !important;
}

.modal-footer {
  border-top: 1px solid var(--vo-border) !important;
}

/* ── 19. FOOTER ───────────────────────────────────────────────────────────── */
.footer {
  background: var(--vo-bg-alt) !important;
  border-top: 1px solid var(--vo-border) !important;
}

.footer-divider {
  background: var(--vo-border) !important;
  border: none !important;
  height: 1px !important;
}

.footer-heading {
  color: var(--vo-text-secondary) !important;
}

.footer-link,
.legal-link {
  color: var(--vo-text-muted) !important;
  transition: color var(--vo-transition-fast) !important;
}

.footer-link:hover,
.legal-link:hover {
  color: var(--vo-text-primary) !important;
}

/* ── 20. MAPPED DOMAINS CONTAINER ────────────────────────────────────────── */
.mapped-domains-container {
  background: #0A0A0A !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
}

.no-mapped-domains {
  color: var(--vo-text-muted) !important;
}

/* ── 21. DOMAIN MAPPING STATS ────────────────────────────────────────────── */
.mapping-stats {
  background: transparent !important;
  border: none !important;
  display: flex;
  gap: 12px;
}

.stat-card {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
}

.stat-card:hover {
  background: var(--vo-card-hover) !important;
  border-color: var(--vo-border-hover) !important;
}

.stat-value {
  color: var(--vo-text-primary) !important;
}

.stat-label {
  color: var(--vo-text-muted) !important;
}

/* ── 22. PROGRESS BARS ───────────────────────────────────────────────────── */
.progress-bar {
  background: var(--vo-card-sub) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
}

.progress-fill {
  background: #E5E5E5 !important;
  border-radius: var(--vo-radius) !important;
}

/* ── 23. TAB / TOGGLE SYSTEMS ────────────────────────────────────────────── */
.tab-btn,
.tab-button,
[role="tab"] {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--vo-radius) !important;
  color: var(--vo-text-muted) !important;
  transition: var(--vo-transition) !important;
}

.tab-btn:hover,
.tab-button:hover,
[role="tab"]:hover {
  background: var(--vo-item-hover-bg) !important;
  color: var(--vo-text-primary) !important;
  border-color: var(--vo-border) !important;
}

.tab-btn.active,
.tab-button.active,
[role="tab"][aria-selected="true"] {
  background: var(--vo-item-hover-bg-alt) !important;
  border-color: var(--vo-border-hover) !important;
  color: var(--vo-text-primary) !important;
}

/* ── 24. CHECKBOXES & RADIOS ─────────────────────────────────────────────── */
.radio-custom,
.checkbox-custom {
  border-color: var(--vo-border-hover) !important;
  background: var(--vo-card-sub) !important;
  border-radius: 4px !important;
}

input[type="radio"]:checked + .radio-custom,
input[type="checkbox"]:checked + .checkbox-custom,
.radio-input:checked + .radio-custom,
.checkbox-input:checked + .checkbox-custom {
  background: #E5E5E5 !important;
  border-color: var(--vo-border-focus) !important;
}

/* ── 25. EXPANDABLE TOGGLE ───────────────────────────────────────────────── */
.expandable-toggle {
  color: var(--vo-text-muted) !important;
  background: none !important;
  border: none !important;
  transition: color var(--vo-transition-fast) !important;
}

.expandable-toggle:hover {
  color: var(--vo-text-primary) !important;
}

/* ── 26. APPROVAL WORKFLOW SPECIFIC ─────────────────────────────────────── */
/* Remove all blue left-border rules from inline styles */
.specifications-table tbody tr:hover {
  background-color: var(--vo-card-hover) !important;
  border-left: none !important;
}

.specifications-table th {
  background: #161616 !important;
  background-image: none !important;
  background: linear-gradient(135deg, #161616 0%, #161616 100%) !important;
}

.interactive-cell:hover {
  border-left-color: var(--vo-border-hover) !important;
  background-color: var(--vo-card-hover) !important;
  box-shadow: none !important;
}

/* ── 27. DORI CHATBOT WIDGET ────────────────────────────────────────────── */
.dori-fab,
.dori-button,
[class*="dori-"] button {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  color: var(--vo-text-secondary) !important;
}

.dori-fab:hover,
.dori-button:hover {
  background: var(--vo-card-hover) !important;
  border-color: var(--vo-border-hover) !important;
  color: var(--vo-text-primary) !important;
}

.dori-panel,
.dori-chat-window,
[class*="dori-panel"] {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
}

/* ── 28. SCROLLBAR (Monochromatic) ───────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--vo-bg); }
::-webkit-scrollbar-thumb {
  background: #333333;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: #444444; }

/* ── 29. SELECTION ───────────────────────────────────────────────────────── */
::selection {
  background: rgba(255, 255, 255, 0.15);
  color: var(--vo-text-primary);
}

/* ── 30. CARD ICON ACCENT OVERRIDE ──────────────────────────────────────── */
/* Remove all teal/blue icon coloring */
.card-icon i,
.compliance-icon i,
.step-icon i,
[class*="-icon"] i,
i.fa, i.fas, i.far, i.fab {
  color: inherit !important;
}

/* Functional status icons keep semantic color */
i.fa-check, i.fa-check-circle { color: var(--vo-success) !important; }
i.fa-exclamation-circle, i.fa-exclamation-triangle { color: var(--vo-warning) !important; }
i.fa-times-circle, i.fa-ban { color: var(--vo-error) !important; }

/* ── 31. REMOVE ALL BOX GLOWS, COLOR SHADOWS ────────────────────────────── */
*:not(.dori-panel):not(.modal-content) {
  text-shadow: none;
}

.btn:hover,
.nav-link:hover,
.capability-card:hover,
.status-card:hover,
.stat-card:hover,
.compliance-item:hover,
.config-card:hover {
  box-shadow: none !important;
}

/* ── 32. SOLID BORDER CONSOLIDATION ─────────────────────────────────────── */
/* Eliminate all rgba/transparent border hacks */
[style*="border-left: 3px solid #4a9eff"],
[style*="border-left: 4px solid"] {
  border-left-width: 1px !important;
  border-left-color: var(--vo-border) !important;
}

/* ── 33. MAPPING TABLE ROW ACTIONS ──────────────────────────────────────── */
.action-btn,
[class*="action-btn"] {
  background: var(--vo-card-sub) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
  color: var(--vo-text-muted) !important;
  transition: var(--vo-transition) !important;
}

.action-btn:hover {
  background: var(--vo-item-hover-bg) !important;
  border-color: var(--vo-border-hover) !important;
  color: var(--vo-text-primary) !important;
}

.action-btn:active {
  transform: var(--vo-active-scale) !important;
}

/* ── 34. VISIT-TIMEPOINT MAPPING TABLE ──────────────────────────────────── */
.visit-mapping-table,
.mapping-grid,
[class*="visit-"] table {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
}

/* ── 35. CRF PREVIEW FORM FIELDS ─────────────────────────────────────────── */
.field-input,
.field-container input,
.field-container select,
.field-container textarea {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
  color: var(--vo-text-primary) !important;
  transition: border-color 0.15s ease !important;
}

.field-input:focus,
.field-container input:focus,
.field-container select:focus,
.field-container textarea:focus {
  border-color: var(--vo-border-focus) !important;
  box-shadow: none !important;
  outline: none !important;
}

.form-section {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
}

.form-section .section-header {
  background: #161616 !important;
  border-bottom: 1px solid var(--vo-border) !important;
}

/* ── 36. CRF HEADER PREVIEW BADGE ─────────────────────────────────────────── */
.preview-badge,
.crf-status .preview-badge {
  background: var(--vo-card-sub) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
  color: var(--vo-text-muted) !important;
}

/* ── 37. DASHBOARD MAIN LAYOUT ───────────────────────────────────────────── */
.dashboard-main,
.visit-mapping-main,
.domain-mapping-main,
.approval-workflow-main,
.crf-preview-main,
.main-content {
  background: var(--vo-bg) !important;
}

/* ── 38. PAGE HEADER ─────────────────────────────────────────────────────── */
.page-header {
  border-bottom: 1px solid var(--vo-border) !important;
}

.page-title {
  color: var(--vo-text-primary) !important;
}

.page-subtitle {
  color: var(--vo-text-muted) !important;
}

/* ── 39. CONTROL SECTION ─────────────────────────────────────────────────── */
.control-section {
  background: var(--vo-card-sub) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
}

.control-label {
  color: var(--vo-text-secondary) !important;
}

/* ── 40. APPROVAL WORKFLOW CARDS ─────────────────────────────────────────── */
.stage-card,
.reviewer-card,
.approval-stage,
[class*="stage-"] {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
}

.stage-card:hover,
.reviewer-card:hover {
  background: var(--vo-card-hover) !important;
  border-color: var(--vo-border-hover) !important;
}

/* Stage connector lines */
.stage-connector,
.workflow-connector {
  background: var(--vo-border) !important;
  border-color: var(--vo-border) !important;
}

/* ── 41. COMMENT BOXES ────────────────────────────────────────────────────── */
.comment-box,
.comment-input,
[class*="comment-"] textarea {
  background: var(--vo-card-sub) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
  color: var(--vo-text-primary) !important;
}

.comment-box:focus,
.comment-input:focus {
  border-color: var(--vo-border-focus) !important;
  box-shadow: none !important;
}

/* ── 42. FINAL SUPPRESSION PASSES ────────────────────────────────────────── */

/* Kill all ambient/glow box-shadows */
[class*="glow"],
[class*="-shadow"],
.card-shadow,
.elevated {
  box-shadow: none !important;
}

/* Kill all gradient backgrounds on surfaces */
[style*="linear-gradient"]:not(.hero-cta):not(button) {
  /* Let buttons keep inline gradient if needed but zero them here as override */
}

/* Hard-suppress thick border-bottom accents from legacy interaction-tokens */
[class*="ix-"]:hover,
.ix-card:hover {
  border-bottom-width: 1px !important;
  border-bottom-color: var(--vo-border-hover) !important;
  box-shadow: none !important;
}

/* Remove side panel colored borders */
[class*="panel-left"],
[class*="sidebar"],
[class*="side-panel"] {
  border-color: var(--vo-border) !important;
  background: var(--vo-card) !important;
}

/* Kill all teal-colored borders in inline styles */
*[style*="#00B6D3"],
*[style*="#00b6d3"],
*[style*="teal"] {
  border-color: var(--vo-border) !important;
}

/* ── 43. RESPONSIVE ADJUSTMENTS ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .mapping-stats {
    flex-wrap: wrap;
  }

  .stat-card {
    flex: 1 1 calc(50% - 6px);
  }
}

/* ── 44. DASHBOARD_NEW.HTML METRIC CARD OVERRIDES ────────────────────────── */

/* Metric card base — monochromatic */
.metric-card {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
}

/* Metric aside (colored spine) — neutralized */
.metric-aside {
  background: rgba(255, 255, 255, 0.03) !important;
  border-right: 1px solid var(--vo-border) !important;
}

.metric-card:hover .metric-aside {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Metric icon — remove teal glow, neutralize border */
.metric-icon {
  border: 1px solid var(--vo-border-hover) !important;
  color: var(--vo-text-muted) !important;
  filter: none !important;
  background: var(--vo-card-sub) !important;
}

.metric-card:hover .metric-icon {
  border-color: var(--vo-border-focus) !important;
  filter: none !important;
}

/* Metric label header tag — remove teal border and bg */
.metric-main .metric-header .metric-label {
  background: rgba(255, 255, 255, 0.03) !important;
  border-left: 2px solid var(--vo-border-hover) !important;
  color: var(--vo-text-muted) !important;
}

/* Status pills — convert to monochromatic semantic */
.status-pill.protocol-current {
  background: rgba(34, 197, 94, 0.08) !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
  color: var(--vo-success) !important;
}

.status-pill.crf-review {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(245, 158, 11, 0.25) !important;
  color: var(--vo-warning) !important;
}

.status-pill.forms-progress {
  background: rgba(34, 197, 94, 0.08) !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
  color: var(--vo-success) !important;
}

.status-pill.approval-pending {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--vo-border) !important;
  color: var(--vo-text-muted) !important;
}

/* Metric card accent variants — all to neutral */
.metric-card.metric-protocol,
.metric-card.metric-crf,
.metric-card.metric-forms,
.metric-card.metric-approval {
  --metric-accent: #555555;
}

/* ── 45. DOMAIN CARDS (Dashboard new layout) ─────────────────────────────── */
.domain-card {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
}

.domain-card:hover:not(:has(button:hover, a:hover, select:hover)) {
  background: var(--vo-card-hover) !important;
  border-color: var(--vo-border-hover) !important;
  box-shadow: none !important;
}

/* Domain badge */
.domain-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
  color: var(--vo-text-muted) !important;
}

/* ── 46. WORKFLOW ITEM CARDS ──────────────────────────────────────────────── */
.workflow-item {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
}

.workflow-item:hover:not(:has(button:hover, a:hover)) {
  background: var(--vo-card-hover) !important;
  border-color: var(--vo-border-hover) !important;
  box-shadow: none !important;
}

/* Workflow step icon — remove teal */
.workflow-item .step-icon,
.workflow-item .workflow-icon {
  background: var(--vo-card-sub) !important;
  border: 1px solid var(--vo-border) !important;
  color: var(--vo-text-muted) !important;
  box-shadow: none !important;
}

/* ── 47. CRF-REVIEW.HTML INLINE OVERRIDE ─────────────────────────────────── */
.review-header,
.review-panel,
.review-section {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
}

/* Primary color used as accent in crf-review — neutralize */
:root {
  --primary-color: #FFFFFF !important;
  --primary-hover: #E5E5E5 !important;
}

/* ── 48. ANIMATIONS.CSS NEUTRALIZATION ───────────────────────────────────── */
/* Kill shimmer / skeleton scan lines and gradient bar animations */
.skeleton-shimmer::after,
[class*="shimmer"]::after,
[class*="scan"]::after {
  background-image: none !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   49. PRE-REGISTRATION SECTION — VERCEL MONOCHROME ALIGNMENT
   Full override pass: eliminates all hardcoded teal (#00B6D3), orange (#F4753F),
   indigo (#6366F1) and navy-blue (#1e3a5f) values that bypass CSS variable
   inheritance. Every rule is !important to guarantee cascade priority.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Section container ───────────────────────────────────────────────── */
.prereg-section {
  background: var(--vo-bg) !important;
  border-top: 1px solid var(--vo-border) !important;
  border-bottom: none !important;
}

/* ── Divider between hero and prereg ──────────────────────────────────── */
/* Remove animated color sweep — replace with plain 1px rule */
.hero-prereg-divider .div-side {
  background: var(--vo-border) !important;
}
.hero-prereg-divider .div-center::before {
  background: var(--vo-border) !important;
}
.hero-prereg-divider .div-center::after {
  display: none !important; /* Kill animated teal/orange/blue glow sweep */
}

/* ── Status pill — "Currently in Closed Beta" ─────────────────────────── */
.prereg-section .prereg-pill {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
  color: var(--vo-info) !important;
}
/* Dot matches pill colour */
.prereg-section .prereg-pill-dot {
  background: var(--vo-info) !important;
  box-shadow: none !important;
  animation: none !important;
}

/* ── Headline gradient accent ─────────────────────────────────────────── */
/* Remove teal→blue gradient fill, render as plain white */
.prereg-headline-accent {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  color: var(--vo-text-primary) !important;
}

/* ── Feature teaser icon tiles ────────────────────────────────────────── */
/* Unboxed — no background, no border, no radius. Matches .do-icon pattern. */
.prereg-teaser-icon,
.prereg-teaser-icon.icon--cdash,
.prereg-teaser-icon.icon--trace,
.prereg-teaser-icon.icon--compliance {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.prereg-teaser-item:hover .prereg-teaser-icon {
  background: none !important;
  border: none !important;
  transform: none !important;
}

/* SVG — smooth transition matching .do-icon */
.prereg-teaser-icon svg {
  transition: stroke 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* All SVG strokes/fills → neutral muted grey at rest */
.prereg-teaser-icon svg circle,
.prereg-teaser-icon svg line,
.prereg-teaser-icon svg rect,
.prereg-teaser-icon svg path,
.prereg-teaser-icon svg polyline {
  stroke: #888888 !important;
  fill: none !important;
}
/* On parent hover → white, slight rotation */
.prereg-teaser-item:hover .prereg-teaser-icon svg {
  transform: rotate(5deg) !important;
}
.prereg-teaser-item:hover .prereg-teaser-icon svg circle,
.prereg-teaser-item:hover .prereg-teaser-icon svg line,
.prereg-teaser-item:hover .prereg-teaser-icon svg rect,
.prereg-teaser-item:hover .prereg-teaser-icon svg path,
.prereg-teaser-item:hover .prereg-teaser-icon svg polyline {
  stroke: #ffffff !important;
  fill: none !important;
}

/* ── Social proof avatars ─────────────────────────────────────────────── */
/* Remove coloured gradients — use flat neutral surfaces */
.prereg-avatar--a,
.prereg-avatar--b,
.prereg-avatar--c {
  background: var(--vo-card-sub) !important;
  color: var(--vo-text-secondary) !important;
}
.prereg-avatar--d {
  background: var(--vo-card) !important;
  border-color: var(--vo-border) !important;
  color: var(--vo-text-muted) !important;
}

/* ── Right column: prereg card ────────────────────────────────────────── */
.prereg-card {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}
.prereg-card:hover {
  border-color: var(--vo-border-hover) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5) !important;
}

/* Top accent bar — remove rainbow gradient, replace with neutral 1px line */
.prereg-card-accent {
  height: 1px !important;
  background: var(--vo-border-hover) !important;
}

/* Card eyebrow — remove orange color */
.prereg-card-eyebrow {
  color: var(--vo-text-muted) !important;
}
/* Eyebrow lock icon — force neutral SVG, unboxed treatment */
.prereg-card-eyebrow svg rect {
  fill: #888888 !important;
  stroke: none !important;
  opacity: 0.6 !important;
}
.prereg-card-eyebrow svg path {
  stroke: #888888 !important;
  fill: none !important;
}
.prereg-card-eyebrow svg circle {
  fill: var(--vo-bg) !important;   /* keyhole punch-through */
  stroke: none !important;
}

/* ── Form inputs ──────────────────────────────────────────────────────── */
.prereg-input {
  background: var(--vo-bg) !important;
  border-color: var(--vo-border) !important;
  color: var(--vo-text-primary) !important;
  border-radius: var(--vo-radius) !important;
}
.prereg-input::placeholder {
  color: var(--vo-text-disabled) !important;
}
/* Kill teal focus glow — plain border shift only */
.prereg-input:focus {
  border-color: var(--vo-border-focus) !important;
  box-shadow: none !important;
}
.prereg-input-wrap:focus-within .prereg-input-icon {
  color: var(--vo-text-secondary) !important;
}
/* Envelope icon SVG — neutral stroke */
.prereg-input-icon svg path,
.prereg-input-icon svg polyline {
  stroke: var(--vo-text-muted) !important;
}

/* ── Submit button ────────────────────────────────────────────────────── */
/* Replace the navy-blue gradient with flat monochromatic surface */
.prereg-submit-btn {
  background: #1A1A1A !important;
  border: 1px solid var(--vo-border-hover) !important;
  border-radius: var(--vo-radius) !important;
  color: var(--vo-text-primary) !important;
  box-shadow: none !important;
}
.prereg-submit-btn::before {
  display: none !important; /* Kill diagonal sheen overlay */
}
.prereg-submit-btn::after {
  display: none !important; /* Kill bottom depth line */
}
.prereg-submit-btn:hover:not(:disabled) {
  background: #222222 !important;
  border-color: #555555 !important;
  box-shadow: none !important;
  transform: none !important;
}
.prereg-submit-btn:active:not(:disabled) {
  transform: var(--vo-active-scale) !important;
  background: var(--vo-card) !important;
  box-shadow: none !important;
}
.prereg-submit-btn:disabled {
  opacity: 0.4 !important;
}

/* Spinner — neutral white */
.prereg-spinner {
  stroke: currentColor !important;
}

/* ── Privacy note icon ────────────────────────────────────────────────── */
/* Green shield is a semantic trust signal — retain #22c55e */
.prereg-privacy-note .note-icon {
  color: var(--vo-success) !important;
}
/* But the SVG fill inside the shield should stay green (semantic, not brand) */
.prereg-privacy-note svg path:first-child {
  fill: var(--vo-success) !important;
  opacity: 0.85 !important;
}

/* ── Trust badge row ──────────────────────────────────────────────────── */
/* Unboxed — no circular background, no colour tints. Matches .do-icon pattern. */
.prereg-trust-item .trust-icon-wrap,
.prereg-trust-item.badge--gdpr .trust-icon-wrap,
.prereg-trust-item.badge--cdisc .trust-icon-wrap,
.prereg-trust-item.badge--enterprise .trust-icon-wrap {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Text — muted at rest, primary on hover */
.prereg-trust-item {
  color: var(--vo-text-muted) !important;
}
.prereg-trust-item:hover {
  color: var(--vo-text-primary) !important;
}
/* All trust badge SVGs → neutral #888 stroke, no fill */
.prereg-trust-item .trust-icon-wrap svg circle,
.prereg-trust-item .trust-icon-wrap svg rect,
.prereg-trust-item .trust-icon-wrap svg path,
.prereg-trust-item .trust-icon-wrap svg polyline {
  stroke: #888888 !important;
  fill: none !important;
}
/* On parent hover → white */
.prereg-trust-item:hover .trust-icon-wrap svg circle,
.prereg-trust-item:hover .trust-icon-wrap svg rect,
.prereg-trust-item:hover .trust-icon-wrap svg path,
.prereg-trust-item:hover .trust-icon-wrap svg polyline {
  stroke: #ffffff !important;
  fill: none !important;
}

/* Trust divider line */
.prereg-trust-divider {
  background: var(--vo-border) !important;
}

/* ── Success state ────────────────────────────────────────────────────── */
/* Keep success icon green (semantic) */
.prereg-success-icon {
  color: var(--vo-success) !important;
}
.prereg-success-icon svg path,
.prereg-success-icon svg polyline {
  stroke: var(--vo-success) !important;
}

/* ── Social proof border ──────────────────────────────────────────────── */
.prereg-social-proof {
  border-top-color: var(--vo-border) !important;
}

/* ── Trusted-by bar (below prereg, above capabilities) ───────────────── */
.trusted-bar {
  background: var(--vo-bg) !important;
  border-top: 1px solid var(--vo-border) !important;
  border-bottom: 1px solid var(--vo-border) !important;
}
.trusted-bar::before {
  display: none !important;
}
.trusted-label {
  color: var(--vo-text-disabled) !important;
}
.trusted-logo-item {
  color: var(--vo-text-muted) !important;
}
.trusted-logo-item:hover {
  color: var(--vo-text-secondary) !important;
}
/* All trusted-bar SVG icons → uniform neutral grey */
.trust-mono-icon svg path,
.trust-mono-icon svg line,
.trust-mono-icon svg circle,
.trust-mono-icon svg rect,
.trust-mono-icon svg polyline {
  stroke: var(--vo-text-disabled) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   50. CAREERS / JOIN US SECTION — VERCEL MONOCHROME ALIGNMENT
   Overrides hardcoded orange kicker, teal CTA button, and ice-blue title accent.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Section border */
.careers-section {
  border-top-color: var(--vo-border) !important;
}

/* Kicker lines — remove orange gradient */
.careers-kicker-line,
.careers-kicker-line:last-child {
  background: var(--vo-border) !important;
}

/* Kicker text — DataOrbix orange accent */
.careers-section .careers-kicker-text {
  color: var(--do-orange) !important;
  font-weight: 600;
}

/* Title accent — remove ice-blue gradient */
.careers-title-accent {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  color: var(--vo-text-primary) !important;
}

/* CTA button — replace teal with flat monochromatic */
.careers-cta-btn {
  background: #1A1A1A !important;
  border: 1px solid var(--vo-border-hover) !important;
  color: var(--vo-text-primary) !important;
  border-radius: var(--vo-radius) !important;
  box-shadow: none !important;
}
.careers-cta-btn:hover {
  background: #222222 !important;
  border-color: #555555 !important;
  color: var(--vo-text-primary) !important;
  transform: none !important;
  box-shadow: none !important;
}
.careers-cta-btn:active {
  transform: var(--vo-active-scale) !important;
  background: var(--vo-card) !important;
}

/* CTA link — remove teal underline */
.careers-cta-link {
  color: var(--vo-text-secondary) !important;
  border-bottom-color: var(--vo-border) !important;
}
.careers-cta-link:hover {
  color: var(--vo-text-primary) !important;
  border-bottom-color: var(--vo-border-hover) !important;
}

/* Progress bar animation — neutral white fill */
[class*="progress-bar"] span,
[class*="progress-fill"],
.progress-fill {
  background: rgba(255, 255, 255, 0.6) !important;
}

/* ── 49. DORI CHATBOT.CSS NEUTRALIZATION ─────────────────────────────────── */
[class*="dori-header"],
[class*="dori-footer"],
[class*="dori-nav"] {
  background: #161616 !important;
  border-bottom: 1px solid var(--vo-border) !important;
  border-top: 1px solid var(--vo-border) !important;
}

[class*="dori-message-bubble"],
[class*="bot-message"] {
  background: var(--vo-card-sub) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
  color: var(--vo-text-secondary) !important;
}

/* ── 50. INDEX.HTML LANDING PAGE INLINE OVERRIDES ───────────────────────── */

/* Feature cards — pillar-style (transparent, no box, dividers between siblings) */
.feature-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Left border on every card — consistent with careers-pillar divider style */
.feature-card {
  border-left: 1px solid rgba(255, 255, 255, 0.055) !important;
}

/* ::before was the old teal top bar — already display:none in source, keep suppressed */
.feature-card::before {
  display: none !important;
}

/* ::after is the pillar-style bottom underline — let it render, just neutralise colour */
.feature-card::after {
  background: rgba(255, 255, 255, 0.1) !important;
}

.feature-card:hover {
  background: rgba(255, 255, 255, 0.018) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Icon — unboxed, matches compliance-badge-icon: no bg, no border, #888 → #fff + rotate(5deg) on hover */
.feature-icon-wrap {
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.feature-card:hover .feature-icon-wrap {
  background: none !important;
  border-color: transparent !important;
}

.feature-icon-wrap .lc-icon svg {
  stroke: #888888 !important;
}

.feature-card:hover .feature-icon-wrap .lc-icon svg {
  stroke: #ffffff !important;
}

.feature-icon-wrap i {
  color: #888888 !important;
}

.feature-card:hover .feature-icon-wrap i {
  color: #ffffff !important;
}

.feature-tag {
  color: var(--vo-text-muted) !important;
}

/* How it works section */
.hiw-steps-wrapper::before {
  display: none !important;
}

.hiw-step-num {
  background: var(--vo-card-sub) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: 50% !important;
}

.hiw-step:hover .hiw-step-num {
  border-color: var(--vo-border-hover) !important;
  box-shadow: none !important;
}

.hiw-step-icon {
  color: var(--vo-text-muted) !important;
}

/* Compliance badges */
.compliance-badge {
  background: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(255, 255, 255, 0.055) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.compliance-badge:hover {
  background: rgba(255, 255, 255, 0.018) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.compliance-badge-icon {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
}

.compliance-badge:hover .compliance-badge-icon {
  background: none !important;
  border-color: transparent !important;
}

/* ── .do-label — restore library values overridden by inline .landing-eyebrow style block ── */
/* .landing-eyebrow in the inline <style> block wins over do-components.css (external sheet).  */
/* These !important rules in vercel-theme.css are the correct fix — inline styles lose to      */
/* !important in external sheets only when specificity is equal or lower.                      */
.landing-eyebrow.do-label {
  font-size: 18px !important;
  font-weight: 300 !important;
  letter-spacing: 2px !important;
  display: inline-flex !important;
}

/* ── Features section — landing-eyebrow do-label overrides ──────────── */
.features-section .do-label {
  color: var(--vo-success) !important;
  border-color: #000000 !important;
}

/* ── .careers-kicker-text.do-label — restore library values overridden by inline style block */
.careers-kicker-text.do-label {
  font-size: 18px !important;
  font-weight: 300 !important;
  letter-spacing: 2px !important;
  display: inline-flex !important;
}

/* ── Careers section — careers-kicker-text do-label overrides ────────── */
.careers-section .careers-kicker-text.do-label {
  color: var(--vo-info) !important;
  border-color: #000000 !important;
}

/* ── Compliance section — landing-eyebrow do-label overrides ─────────── */
.compliance-section .do-label {
  color: var(--vo-success) !important;
  border-color: #000000 !important;
}

/* Testimonial cards */
.testimonial-card {
  background: var(--vo-card) !important;
  border: 1px solid var(--vo-border) !important;
  border-radius: var(--vo-radius) !important;
}

.testimonial-card:hover {
  background: var(--vo-card-hover) !important;
  border-color: var(--vo-border-hover) !important;
  box-shadow: none !important;
}

.testimonial-stars i {
  color: var(--vo-warning) !important;
}

.testimonial-avatar {
  background: var(--vo-card-sub) !important;
  border: 1px solid var(--vo-border) !important;
}

/* Final CTA section */
.final-cta-section::before {
  display: none !important;
}

.final-cta-eyebrow {
  color: var(--vo-text-muted) !important;
  border-color: var(--vo-border) !important;
}

/* Trusted bar */
.trusted-bar {
  background: var(--vo-bg) !important;
  border-top: 1px solid var(--vo-border) !important;
  border-bottom: 1px solid var(--vo-border) !important;
}

.trusted-bar::before {
  display: none !important;
}

.trusted-label {
  color: var(--vo-text-disabled) !important;
}

.trusted-logo-item span {
  color: var(--vo-text-muted) !important;
}

/* ── 51. GLOBAL INLINE STYLE NEUTRALIZATION ──────────────────────────────── */
/* Force all elements using inline rgba(0, 182, 211, ...) teal backgrounds  */
/* to be invisible / neutral — achieved by targeting the class context     */
[style*="rgba(0, 182, 211"],
[style*="rgba(0,182,211"] {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: var(--vo-border) !important;
}

/* Force border-color teal inline overrides to neutral */
[style*="#00B6D3"],
[style*="#00b6d3"] {
  color: var(--vo-text-muted) !important;
  border-color: var(--vo-border) !important;
}