/* =============================================================================
   DataOrbix — INTERACTION TOKEN SYSTEM
   Monochromatic Geometric Edition · v4.0 · 2026-06-29

   DESIGN LANGUAGE: Vercel-Inspired Monochromatic
   ─────────────────────────────────────────────────────────────────────────────
   All interactive states expressed through tonal surface steps and crisp 1px
   border color shifts. No teal accents, no bottom-border thickening, no lift
   shadows, no color glows.

   TOKEN DEFINITIONS:
   ─────────────────────────────────────────────────────────────────────────────
   --ix-surface-base          #111111  Master card surface
   --ix-surface-hover         #1A1A1A  Card hover lift state
   --ix-border-base           #333333  Universal rest border
   --ix-border-bottom-active  #555555  Neutral active border (no teal)
   --ix-border-bottom-width   1px      No thick borders
   --ix-lift-shadow           none     No elevation shadow
   --ix-transition            background 0.2s ease, border-color 0.2s ease
   --ix-transition-active     transform 0.08s ease-out  (snap click)
   --ix-btn-color-base        #888888  Muted rest text
   --ix-btn-color-hover       #FFFFFF  High contrast hover text
   --ix-focus-ring            keyboard-only accessible ring (neutral)

   CARD ISOLATION RULE:
   ─────────────────────────────────────────────────────────────────────────────
   Parent card hover is BLOCKED when any child interactive element is hovered.
   Uses :has() pseudo-class. Prevents double-activation on nested sub-cards.
   ============================================================================= */

:root {
  /* ── Core Interaction Surfaces ──────────────────────────────────────── */
  --ix-surface-base:          #111111;
  --ix-surface-hover:         #1A1A1A;

  /* ── Border Tokens (MONOCHROMATIC) ──────────────────────────────────── */
  --ix-border-base:           #333333;
  --ix-border-base-rgb:       51, 51, 51;
  --ix-border-bottom-active:  #555555;   /* neutral, NOT teal */
  --ix-border-side-hover:     #444444;
  --ix-border-bottom-width:   1px;       /* NO thick bottom accent */

  /* ── Shadow Tokens — NONE (pure flat design) ────────────────────────── */
  --ix-lift-shadow:           none;
  --ix-lift-shadow-deep:      none;

  /* ── Transition ─────────────────────────────────────────────────────── */
  --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;

  /* ── Button Typography Tokens ───────────────────────────────────────── */
  --ix-btn-color-base:        #888888;
  --ix-btn-color-hover:       #FFFFFF;
  --ix-btn-icon-color-base:   #666666;
  --ix-btn-icon-color-hover:  #E5E5E5;

  /* ── Tactile Active / Click Tokens ─────────────────────────────────── */
  --ix-active-scale:          scale(0.985);
  --ix-active-opacity:        1;

  /* ── Focus Ring (keyboard navigation only) ──────────────────────────── */
  --ix-focus-ring:            0 0 0 2px #000000, 0 0 0 3px #555555;
}


/* =============================================================================
   RULE 1 — CARD COMPONENTS BASE STATE
   ============================================================================= */

.metric-card,
.domain-card,
.workflow-item,
.config-section,
.compliance-item,
.info-card,
.primary-action-card,
.mapping-domain-card,
.card {
  background:     var(--ix-surface-base);
  border:         1px solid var(--ix-border-base);
  border-radius:  6px;
  transition:     var(--ix-transition);
  box-shadow:     none;
}


/* =============================================================================
   RULE 1 — CARD HOVER: ISOLATED
   Extended exclusion list: prevents parent card from activating hover state
   when any child interactive element or nested card is hovered.
   ============================================================================= */

.metric-card:hover:not(:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover, .expandable-toggle:hover
  )),
.domain-card:hover:not(:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover, .expandable-toggle:hover
  )),
.workflow-item:hover:not(:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover
  )),
.compliance-item:hover:not(:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover
  )),
.info-card:hover:not(:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover
  )),
.primary-action-card:hover:not(:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover
  )),
.mapping-domain-card:hover:not(:has(
    button:hover, a:hover, select:hover, [role="button"]:hover
  )),
.card:hover:not(:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover, .expandable-toggle:hover
  )) {
  background:    var(--ix-surface-hover);
  border-color:  #444444;
  box-shadow:    none;
  transform:     none;
}

/* ── Parent card RETREATS when child interactive element is hovered ───── */
.metric-card:hover:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover, .expandable-toggle:hover
  ),
.domain-card:hover:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover, .expandable-toggle:hover
  ),
.workflow-item:hover:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover
  ),
.compliance-item:hover:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover
  ),
.info-card:hover:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover
  ),
.primary-action-card:hover:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover
  ),
.mapping-domain-card:hover:has(
    button:hover, a:hover, select:hover, [role="button"]:hover
  ),
.card:hover:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover, .expandable-toggle:hover
  ) {
  background:    var(--ix-surface-base);
  border-color:  var(--ix-border-base);
  box-shadow:    none;
  transform:     none;
}


/* =============================================================================
   CONFIG SECTION ID OVERRIDES — Base State
   ============================================================================= */

#standard-library-section,
#study-specs-section,
#protocol-section {
  background:    var(--ix-surface-base) !important;
  border:        1px solid var(--ix-border-base) !important;
  border-radius: 6px !important;
  box-shadow:    none !important;
}

/* ── Hover: activates ONLY when no nested child is hovered ─────────── */
#standard-library-section:hover:not(:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover, .expandable-toggle:hover
  )),
#study-specs-section:hover:not(:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover, .expandable-toggle:hover
  )),
#protocol-section:hover:not(:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover, .expandable-toggle:hover
  )) {
  background:    var(--ix-surface-hover) !important;
  border-color:  #444444 !important;
  box-shadow:    none !important;
  transform:     none !important;
}

/* ── Retreat: parent stays at rest when child is hovered ──────────── */
#standard-library-section:hover:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover, .expandable-toggle:hover
  ),
#study-specs-section:hover:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover, .expandable-toggle:hover
  ),
#protocol-section:hover:has(
    button:hover, a:hover, select:hover, [role="button"]:hover,
    .upload-zone:hover, .config-section:hover, .info-card:hover,
    .selection-tile:hover, .radio-option:hover, .expandable-toggle:hover
  ) {
  background:    var(--ix-surface-base) !important;
  border-color:  var(--ix-border-base) !important;
  box-shadow:    none !important;
  transform:     none !important;
}


/* =============================================================================
   RULE 2 — UTILITY ELEMENTS: BUTTONS, DROPDOWNS, TOGGLES
   Base: muted slate-grey (#888) text + #333 border
   Hover: white text + #444 border + rgba(255,255,255,0.08) bg
   Active: scale(0.985), bg #111, 80ms snap
   ============================================================================= */

/* ── Base State ─────────────────────────────────────────────────────── */
.btn,
.btn-utility,
.btn-outline,
.btn-secondary,
.expandable-toggle {
  color:      var(--ix-btn-color-base) !important;
  border:     1px solid var(--ix-border-base) !important;
  outline:    none !important;
  box-shadow: none !important;
  transition: var(--ix-transition) !important;
}

.btn i,
.btn-utility i,
.btn-outline i,
.btn-secondary i,
.expandable-toggle i {
  color:      var(--ix-btn-icon-color-base) !important;
  transition: color 0.15s ease !important;
}

/* ── Hover State ─────────────────────────────────────────────────────── */
.btn:hover:not(:disabled),
.btn-utility:hover:not(:disabled),
.btn-outline:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.expandable-toggle:hover {
  color:       var(--ix-btn-color-hover) !important;
  background:  rgba(255, 255, 255, 0.08) !important;
  border:      1px solid #444444 !important;
  outline:     none !important;
  box-shadow:  none !important;
  transform:   none !important;
}

.btn:hover:not(:disabled) i,
.btn-utility:hover:not(:disabled) i,
.btn-outline:hover:not(:disabled) i,
.btn-secondary:hover:not(:disabled) i,
.expandable-toggle:hover i {
  color: var(--ix-btn-icon-color-hover) !important;
}

/* ── Mouse Focus Reset (prevents sticky border after click) ──────────── */
.btn:focus:not(:focus-visible),
.btn-utility:focus:not(:focus-visible),
.btn-outline:focus:not(:focus-visible),
.btn-secondary:focus:not(:focus-visible),
.expandable-toggle:focus:not(:focus-visible) {
  border:     1px solid var(--ix-border-base) !important;
  outline:    none !important;
  box-shadow: none !important;
  color:      var(--ix-btn-color-base) !important;
  background: transparent !important;
}

.btn:focus:not(:focus-visible) i,
.btn-utility:focus:not(:focus-visible) i,
.btn-outline:focus:not(:focus-visible) i,
.btn-secondary:focus:not(:focus-visible) i {
  color: var(--ix-btn-icon-color-base) !important;
}

/* ── Keyboard Focus Ring (Tab navigation only) ───────────────────────── */
.btn:focus-visible,
.btn-utility:focus-visible,
.btn-outline:focus-visible,
.btn-secondary:focus-visible,
.expandable-toggle:focus-visible {
  border:     1px solid var(--ix-border-base) !important;
  outline:    none !important;
  box-shadow: var(--ix-focus-ring) !important;
  color:      var(--ix-btn-color-hover) !important;
}

/* ── Active / Click — Instant Tactile Compression ────────────────────── */
.btn:active:not(:disabled),
.btn-utility:active:not(:disabled),
.btn-outline:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.expandable-toggle:active {
  transform:   scale(0.985) !important;
  background:  #111111 !important;
  transition:  transform 0.08s ease-out !important;
  border:      1px solid var(--ix-border-base) !important;
  box-shadow:  none !important;
  outline:     none !important;
}


/* =============================================================================
   RULE 2a — LIBRARY UTILITY BUTTON GROUP
   ============================================================================= */

.library-button-group .btn-utility {
  background:  transparent !important;
  color:       var(--ix-btn-color-base) !important;
  border:      1px solid var(--ix-border-base) !important;
  outline:     none !important;
  box-shadow:  none !important;
  transition:  var(--ix-transition) !important;
}

.library-button-group .btn-utility i {
  color:      var(--ix-btn-icon-color-base) !important;
  transition: color 0.15s ease !important;
}

.library-button-group .btn-utility:hover:not(:disabled) {
  color:       var(--ix-btn-color-hover) !important;
  background:  rgba(255, 255, 255, 0.08) !important;
  border:      1px solid #444444 !important;
  outline:     none !important;
  box-shadow:  none !important;
  transform:   none !important;
}

.library-button-group .btn-utility:hover:not(:disabled) i {
  color: var(--ix-btn-icon-color-hover) !important;
}

.library-button-group .btn-utility:focus:not(:focus-visible) {
  border:     1px solid var(--ix-border-base) !important;
  outline:    none !important;
  box-shadow: none !important;
  color:      var(--ix-btn-color-base) !important;
  background: transparent !important;
}

.library-button-group .btn-utility:active:not(:disabled) {
  transform:   scale(0.985) !important;
  background:  #111111 !important;
  transition:  transform 0.08s ease-out !important;
  border:      1px solid var(--ix-border-base) !important;
  outline:     none !important;
  box-shadow:  none !important;
}


/* =============================================================================
   RULE 2b — FORM SELECT / DROPDOWN
   ============================================================================= */

.form-select,
.select-wrapper select,
select.form-control {
  color:       var(--ix-btn-color-base) !important;
  background:  #111111 !important;
  border:      1px solid var(--ix-border-base) !important;
  border-radius: 6px !important;
  outline:     none !important;
  box-shadow:  none !important;
  transition:  var(--ix-transition) !important;
}

.form-select:focus,
.select-wrapper select:focus,
select.form-control:focus {
  border-color: #555555 !important;
  outline:      none !important;
  box-shadow:   none !important;
  color:        #FFFFFF !important;
}

.form-select:focus:not(:focus-visible),
.select-wrapper select:focus:not(:focus-visible) {
  border:     1px solid var(--ix-border-base) !important;
  outline:    none !important;
  box-shadow: none !important;
}


/* =============================================================================
   RULE 3 — DROPDOWN MENU ITEMS (Custom Dropdown Options)
   ============================================================================= */

.dropdown-item,
.dropdown-option,
.select-option,
[class*="dropdown"] li,
.menu-item {
  color:       var(--ix-btn-color-base) !important;
  background:  transparent !important;
  border-radius: 6px !important;
  transition:  background 0.12s ease, color 0.12s ease !important;
}

.dropdown-item:hover,
.dropdown-option:hover,
.select-option:hover,
[class*="dropdown"] li:hover,
.menu-item:hover {
  background:  rgba(255, 255, 255, 0.08) !important;
  color:       #FFFFFF !important;
}

.dropdown-item:active,
.dropdown-option:active {
  transform:   scale(0.985) !important;
  background:  #111111 !important;
  transition:  transform 0.08s ease-out !important;
}


/* =============================================================================
   RULE 4 — UPLOAD ZONE / DRAG AND DROP (Inner sub-card)
   ============================================================================= */

.upload-zone,
.file-upload-area {
  background:  #161616 !important;
  border:      1px dashed #333333 !important;
  border-radius: 6px !important;
  transition:  var(--ix-transition) !important;
}

.upload-zone:hover,
.file-upload-area:hover,
.upload-zone.dragover,
.file-upload-area.dragover {
  background:  #1A1A1A !important;
  border-color: #444444 !important;
  box-shadow:  none !important;
}


/* =============================================================================
   RULE 5 — SELECTION TILES
   ============================================================================= */

.selection-tile {
  background:   #161616 !important;
  border:       1px solid #333333 !important;
  border-radius: 6px !important;
  transition:   var(--ix-transition) !important;
}

.selection-tile:hover {
  background:   #1A1A1A !important;
  border-color: #444444 !important;
}

.selection-tile.selected,
.selection-tile[aria-selected="true"] {
  background:   #222222 !important;
  border-color: #555555 !important;
}


/* =============================================================================
   RULE 6 — MAPPING TABLE ROW HOVER
   ============================================================================= */

.mapping-table tbody tr:hover td,
.specifications-table tbody tr:hover td,
[class*="-table"] tbody tr:hover td {
  background:   #1A1A1A !important;
  color:        #FFFFFF !important;
}

.mapping-table tbody tr:hover,
.specifications-table tbody tr:hover {
  border-left:  none !important;
  outline:      none !important;
}


/* =============================================================================
   RULE 7 — RADIO OPTIONS
   ============================================================================= */

.radio-option {
  background:   #161616 !important;
  border:       1px solid #333333 !important;
  border-radius: 6px !important;
  transition:   var(--ix-transition) !important;
}

.radio-option:hover {
  background:   #1A1A1A !important;
  border-color: #444444 !important;
}


/* =============================================================================
   RULE 8 — EXPANDABLE TOGGLE
   ============================================================================= */

.expandable-toggle {
  color:      var(--ix-btn-color-base) !important;
  background: none !important;
  border:     none !important;
}

.expandable-toggle:hover {
  color: #FFFFFF !important;
  background: none !important;
  border: none !important;
}


/* =============================================================================
   RULE 9 — GLOBAL SUPPRESSION
   Kill ALL legacy teal/color interaction artifacts
   ============================================================================= */

/* No glow, no shadow on ANY hover */
*:hover {
  text-shadow: none;
}

/* Force all border-bottom accent to neutral */
*[style*="#00B6D3"],
*[style*="#00b6d3"],
*[style*="border-bottom: 2px solid"] {
  border-bottom-width: 1px !important;
  border-bottom-color: #333333 !important;
}