/**
 * Phase 8I.3 — Typography / color / contrast (dark inheritance fixes).
 * Light mode appearance is frozen; rules target dark theme + layout wrap only.
 */

/* ---------- Engine badge + descriptor (home Math/Physics) ---------- */
.cn-engine-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  max-width: 100%;
}

.cn-engine-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  max-width: 100%;
  white-space: normal;
  text-align: left;
  line-height: 1.25;
  font-weight: 700;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
}

.cn-engine-badge--math {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fecaca;
}

.cn-engine-badge--physics {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border: 1px solid #6ee7b7;
}

.cn-engine-desc {
  flex: 1 1 12rem;
  min-width: 0;
  line-height: 1.4;
  color: var(--text-muted, #6b7280);
}

@media (max-width: 414px) {
  .cn-engine-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .cn-engine-desc {
    flex-basis: auto;
    width: 100%;
  }
}

[data-theme="dark"] .cn-engine-badge--math {
  /* Opaque enough for AA on dark page; keep math red family */
  background: #7f1d1d !important;
  color: #fff1f2 !important;
  border-color: rgba(252, 165, 165, 0.55) !important;
}

[data-theme="dark"] .cn-engine-badge--physics {
  /* Opaque enough for AA; keep physics/mint green family */
  background: #065f46 !important;
  color: #ecfdf5 !important;
  border-color: rgba(110, 231, 183, 0.5) !important;
}

[data-theme="dark"] .cn-engine-desc,
[data-theme="dark"] .cn-engine-meta .text-muted {
  color: var(--text-muted, #A8B3C0) !important;
}

/* ---------- Search inputs (home / nav / calculator) ---------- */
.search-container .form-control,
.hero-search-box .form-control,
.search-bar .form-control,
[data-search-input].form-control,
.sidebar-search .form-control {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-color: var(--border-visible, var(--border-color));
}

.search-container .form-control::placeholder,
.hero-search-box .form-control::placeholder,
.search-bar .form-control::placeholder,
[data-search-input].form-control::placeholder,
.sidebar-search .form-control::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

[data-theme="dark"] .search-container .form-control,
[data-theme="dark"] .hero-search-box .form-control,
[data-theme="dark"] .search-bar .form-control,
[data-theme="dark"] [data-search-input].form-control,
[data-theme="dark"] .sidebar-search .form-control,
[data-theme="dark"] input[type="text"].form-control,
[data-theme="dark"] input[type="search"].form-control,
[data-theme="dark"] input[type="number"].form-control,
[data-theme="dark"] textarea.form-control,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] select {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--border-visible) !important;
  caret-color: var(--text-accent, #00E5FF);
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .form-control::-webkit-input-placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--input-placeholder) !important;
  opacity: 1 !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] [data-search-input].form-control:focus {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.28) !important;
}

/* Math lab native search input */
[data-theme="dark"] .math-search input {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--border-visible) !important;
}

[data-theme="dark"] .math-search input::placeholder {
  color: var(--input-placeholder) !important;
  opacity: 1 !important;
}

[data-theme="dark"] #physicsSearch {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--border-visible) !important;
}

[data-theme="dark"] #physicsSearch::placeholder {
  color: var(--input-placeholder) !important;
  opacity: 1 !important;
}

/* ---------- Autocomplete / suggestions dropdown ---------- */
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1050;
  margin-top: 4px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--dropdown-bg) !important;
  color: var(--dropdown-text) !important;
  border: 1px solid var(--dropdown-border) !important;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.search-suggestions .list-group,
.search-suggestions .list-group-flush {
  background: transparent !important;
}

.search-suggestion-item {
  cursor: pointer;
  padding: 10px 15px !important;
  border: none !important;
  border-bottom: 1px solid var(--dropdown-border) !important;
  background: var(--dropdown-bg) !important;
  color: var(--dropdown-text) !important;
}

.search-suggestion-item:last-child {
  border-bottom: none !important;
}

.search-suggestion-item span,
.search-suggestion-item .bi {
  color: var(--dropdown-text) !important;
}

.search-suggestion-item .text-muted,
.search-suggestion-item small {
  color: var(--dropdown-muted) !important;
}

.search-suggestion-item .text-primary,
.search-suggestion-item .bi-calculator,
.search-suggestion-item .bi-folder,
.search-suggestion-item .bi-file-text {
  color: var(--text-link, #2962FF) !important;
}

.search-suggestion-item.is-active,
.search-suggestion-item:hover {
  background: var(--dropdown-hover) !important;
}

[data-theme="dark"] .search-suggestions,
[data-theme="dark"] .search-suggestions.list-group,
[data-theme="dark"] div.search-suggestions {
  background: var(--dropdown-bg) !important;
  color: var(--dropdown-text) !important;
  border-color: var(--dropdown-border) !important;
}

[data-theme="dark"] .search-suggestion-item {
  background: var(--dropdown-bg) !important;
  color: var(--dropdown-text) !important;
  border-bottom-color: var(--dropdown-border) !important;
}

[data-theme="dark"] .search-suggestion-item span,
[data-theme="dark"] .search-suggestion-item i,
[data-theme="dark"] .search-suggestion-item .bi {
  color: var(--dropdown-text) !important;
}

[data-theme="dark"] .search-suggestion-item .text-muted,
[data-theme="dark"] .search-suggestion-item small {
  color: #CBD5E1 !important;
}

[data-theme="dark"] .search-suggestion-item .text-primary {
  color: #93c5fd !important;
}

[data-theme="dark"] .search-suggestion-item.is-active,
[data-theme="dark"] .search-suggestion-item:hover {
  background: var(--dropdown-hover) !important;
}

/* ---------- Badges / pills (preserve domain hues, fix contrast) ---------- */
[data-theme="dark"] .badge:not(.cn-engine-badge):not(.math-topic-badge):not(.hero-badge) {
  border: 1px solid var(--border-subtle);
}

[data-theme="dark"] .badge.text-bg-success,
[data-theme="dark"] .badge.bg-success {
  background: rgba(16, 185, 129, 0.28) !important;
  color: #a7f3d0 !important;
  border-color: rgba(110, 231, 183, 0.4) !important;
}

[data-theme="dark"] .badge.text-bg-primary,
[data-theme="dark"] .badge.bg-primary {
  background: rgba(41, 98, 255, 0.28) !important;
  color: #bfdbfe !important;
}

[data-theme="dark"] .badge.text-bg-warning,
[data-theme="dark"] .badge.bg-warning {
  background: rgba(245, 158, 11, 0.28) !important;
  color: #fde68a !important;
}

[data-theme="dark"] .badge.text-bg-info,
[data-theme="dark"] .badge.bg-info {
  background: rgba(6, 182, 212, 0.28) !important;
  color: #a5f3fc !important;
}

[data-theme="dark"] .badge.text-bg-secondary,
[data-theme="dark"] .badge.bg-secondary,
[data-theme="dark"] .badge.text-bg-light,
[data-theme="dark"] .badge.bg-light {
  background: rgba(148, 163, 184, 0.22) !important;
  color: #e2e8f0 !important;
}

[data-theme="dark"] .hero-badge {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
}

[data-theme="dark"] .math-badge {
  background: rgba(220, 38, 38, 0.28) !important;
  color: #fecaca !important;
  border: 1px solid rgba(252, 165, 165, 0.45) !important;
}

/* ---------- Category / card labels ---------- */
[data-theme="dark"] .category-card,
[data-theme="dark"] .calculator-card-home,
[data-theme="dark"] .domain-card {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .category-card .text-muted,
[data-theme="dark"] .calculator-card-home .text-muted,
[data-theme="dark"] .domain-card .text-muted {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .category-badge,
[data-theme="dark"] .calculator-card-home .category-badge {
  background: var(--badge-bg) !important;
  color: var(--badge-text) !important;
  border: 1px solid var(--border-subtle) !important;
}

/* ---------- Nav / footer already dark; reinforce muted links ---------- */
[data-theme="dark"] .nav-link {
  color: #ffffff !important;
}

[data-theme="dark"] footer,
[data-theme="dark"] footer p,
[data-theme="dark"] footer span,
[data-theme="dark"] footer li {
  color: #e5e7eb !important;
}

[data-theme="dark"] footer a {
  color: #93c5fd !important;
}

/* ---------- Selects already handled in header; reinforce options ---------- */
[data-theme="dark"] .form-select option,
[data-theme="dark"] select option {
  background-color: var(--dropdown-bg) !important;
  color: var(--dropdown-text) !important;
}

/* ---------- Calculator UI text (no logic changes) ---------- */
[data-theme="dark"] .calculator-card label,
[data-theme="dark"] .card label,
[data-theme="dark"] .universal-calculator label,
[data-theme="dark"] #calc-form .form-label {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .calculator-card .form-text,
[data-theme="dark"] .card .form-text,
[data-theme="dark"] .help-text {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .result-box,
[data-theme="dark"] .result-value,
[data-theme="dark"] .calculator-result {
  color: var(--text-primary) !important;
}

/*
 * Phase 8I.3 hotfix: result metric/cards keep light-locked #1f2937 / #6b7280
 * while dark-mode elevates parent panels (or transparent-div rule clears card bg)
 * → near-black text on dark RESULTS. Restore readable labels/values; keep mint/cyan accents.
 */
[data-theme="dark"] .result-metric-card,
[data-theme="dark"] .result-card {
  background-color: var(--surface-elevated, #1c2330) !important;
  color: var(--text-primary, #E6E8EB) !important;
  border-color: var(--border-subtle, rgba(0, 229, 255, 0.22)) !important;
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.06), 0 8px 18px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .result-metric-label,
[data-theme="dark"] .result-card-label {
  color: #E2E8F0 !important;
}

[data-theme="dark"] .result-metric-value,
[data-theme="dark"] .result-card-value {
  color: var(--text-primary, #F3F4F6) !important;
}

[data-theme="dark"] .result-metric-positive .result-metric-value,
[data-theme="dark"] .result-card.card-returns .result-card-value,
[data-theme="dark"] .result-card.card-final .result-card-value {
  color: #2dd4bf !important; /* intentional mint/cyan accent */
}

[data-theme="dark"] .result-card.card-interest .result-card-value {
  color: #fbbf24 !important;
}

[data-theme="dark"] .result-card.card-emi .result-card-value {
  color: #60a5fa !important;
}

[data-theme="dark"] .result-metric-copy-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-muted, #A8B3C0) !important;
}

[data-theme="dark"] .result-panel {
  background: var(--surface-elevated, #1c2330) !important;
  color: var(--text-primary, #E6E8EB) !important;
}

[data-theme="dark"] .result-primary-card .result-label,
[data-theme="dark"] .result-primary-card .result-value {
  color: #ffffff !important;
}

/*
 * Phase 8I.3 critical: light-locked surfaces were keeping #F8FAFC / white
 * while global dark text flipped to pale/white → invisible content.
 * Elevate those surfaces to dark tokens; keep brand accents elsewhere.
 */
[data-theme="dark"] .card,
[data-theme="dark"] .card-body,
[data-theme="dark"] .calc-content-card,
[data-theme="dark"] .calc-input-panel,
[data-theme="dark"] .calc-output-panel,
[data-theme="dark"] .publisher-content-panel .card,
[data-theme="dark"] .publisher-content-panel .card-body,
[data-theme="dark"] .calculator-secondary-content .card,
[data-theme="dark"] .calculator-secondary-content .card-body,
[data-theme="dark"] .collapsible-content .card,
[data-theme="dark"] .collapsible-content .card-body,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
  background-color: var(--surface-elevated, #1c2330) !important;
  color: var(--text-primary, #E6E8EB) !important;
  border-color: var(--border-subtle, rgba(0, 229, 255, 0.22)) !important;
}

[data-theme="dark"] .publisher-content-panel h2,
[data-theme="dark"] .publisher-content-panel h3,
[data-theme="dark"] .publisher-content-panel .h4,
[data-theme="dark"] .publisher-content-panel .h6,
[data-theme="dark"] .publisher-content-panel .card-body h3,
[data-theme="dark"] .publisher-content-panel .card-body .h6,
[data-theme="dark"] .calc-content-card .calc-content-title,
[data-theme="dark"] .panel-title,
[data-theme="dark"] .calculator-secondary-content .card-body h6,
[data-theme="dark"] .calculator-secondary-content .card-body strong {
  color: var(--text-primary, #F3F4F6) !important;
}

[data-theme="dark"] .publisher-content-panel .card-body p,
[data-theme="dark"] .publisher-content-panel .card-body li,
[data-theme="dark"] .calc-content-card p,
[data-theme="dark"] .calc-content-card li,
[data-theme="dark"] .calculator-secondary-content .card-body p,
[data-theme="dark"] .calculator-secondary-content .card-body li,
[data-theme="dark"] .collapsible-content .card .card-body p,
[data-theme="dark"] .collapsible-content .card .card-body li {
  color: var(--text-secondary, #C5CDD8) !important;
}

[data-theme="dark"] .calc-content-card .calc-content-icon {
  background: rgba(124, 58, 237, 0.22) !important;
  color: #c4b5fd !important;
}

[data-theme="dark"] .result-pill {
  background: rgba(99, 102, 241, 0.28) !important;
  color: #c7d2fe !important;
}

/* Accordion / FAQ panels on calculator pages */
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .accordion-button,
[data-theme="dark"] .accordion-body {
  background-color: var(--surface-elevated, #1c2330) !important;
  color: var(--text-primary, #E6E8EB) !important;
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: #243044 !important;
  color: var(--text-primary, #F3F4F6) !important;
}

[data-theme="dark"] .accordion-button::after {
  filter: invert(1) grayscale(1);
}

/* Safety: Bootstrap white / light utility leftovers */
[data-theme="dark"] .text-bg-light {
  background-color: var(--surface-elevated, #1c2330) !important;
  color: var(--text-primary, #E6E8EB) !important;
}