/* ==========================================================================
   Calm Clinical Design System: Component Bridge
   Transforms all production component templates into Calm Clinical surfaces,
   borders over shadows, 64ch reading measures, and 44px tap targets.
   ========================================================================== */

/* Global Body & Document */
html, body, .ds-page {
  background: var(--ds-bg) !important;
  color: var(--ds-ink) !important;
  font-family: var(--ds-font-sans) !important;
  -webkit-font-smoothing: antialiased;
}

/* Glass Panels -> Crisp Calm Clinical Surfaces */
.ios-glass,
.ios-glass-elevated,
.ios-glass-subtle,
.ios-glass-card,
.ios-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-panel) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--ds-ink) !important;
}

/* Buttons */
.ios-btn-primary,
.ios-btn-elevated {
  background: var(--ds-brand) !important;
  color: var(--ds-on-brand) !important;
  border: 1px solid transparent !important;
  border-radius: var(--ds-r-control) !important;
  font-family: var(--ds-font-sans) !important;
  font-weight: 600 !important;
  cursor: pointer;
  min-height: var(--ds-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  transition: filter 0.15s ease, transform 0.1s ease;
  box-shadow: none !important;
}
.ios-btn-primary:hover,
.ios-btn-elevated:hover {
  filter: brightness(1.08);
}
.ios-btn-primary:active,
.ios-btn-elevated:active {
  transform: scale(0.98);
}

.ios-btn-secondary,
.ios-btn-ghost {
  background: var(--ds-surface-2) !important;
  color: var(--ds-ink) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-control) !important;
  font-family: var(--ds-font-sans) !important;
  font-weight: 600 !important;
  cursor: pointer;
  min-height: var(--ds-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  transition: background 0.15s ease, border-color 0.15s ease;
  box-shadow: none !important;
}
.ios-btn-secondary:hover,
.ios-btn-ghost:hover {
  background: color-mix(in srgb, var(--ds-surface-2) 80%, var(--ds-brand) 20%) !important;
  border-color: var(--ds-brand) !important;
}

.ios-btn-sm {
  min-height: 36px !important;
  padding: 6px 12px !important;
  font-size: var(--ds-text-xs) !important;
}

@media (max-width: 900px) {
  .ios-btn-sm {
    min-height: var(--ds-tap) !important;
    padding: 8px 14px !important;
  }
}

/* Header & Toolbars */
.ios-toolbar {
  background: color-mix(in srgb, var(--ds-bg) 92%, transparent) !important;
  border-bottom: 1px solid var(--ds-line) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Sidebar & Navigation Links */
.nav-link {
  border-radius: var(--ds-r-control) !important;
  color: var(--ds-ink-2) !important;
  min-height: var(--ds-tap) !important;
  font-family: var(--ds-font-sans) !important;
  transition: all 0.15s ease;
}
.nav-link:hover {
  background: var(--ds-surface-2) !important;
  color: var(--ds-ink) !important;
}
.nav-link.active {
  background: var(--ds-brand-tint) !important;
  color: var(--ds-brand) !important;
  font-weight: 600 !important;
}
.nav-link.active i,
.nav-link.active svg {
  color: var(--ds-brand) !important;
}

/* Form Inputs & Controls */
input[type="text"],
input[type="search"],
input[type="number"],
textarea,
select,
.ios-input,
.ios-select {
  background: var(--ds-surface) !important;
  color: var(--ds-ink) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-control) !important;
  font-family: var(--ds-font-sans) !important;
  font-size: var(--ds-text-sm) !important;
  padding: 8px 12px !important;
  min-height: var(--ds-tap) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--ds-brand) !important;
  outline: 2px solid var(--ds-brand-tint) !important;
}

/* Clinical Stems & Vignettes */
.clinical-stem,
[data-stem],
.ds-stem,
.question-prompt {
  font-family: var(--ds-font-serif) !important;
  max-width: var(--ds-measure) !important;
  line-height: var(--ds-leading-stem) !important;
  font-size: 1.05rem !important;
  color: var(--ds-ink) !important;
}

/* Tailwind Utilities Color Remapping */
.bg-\[\#030407\],
.bg-\[\#070b14\],
.bg-slate-950,
.bg-slate-900,
.bg-black\/40,
.bg-black\/50,
.bg-black\/60 {
  background: var(--ds-bg) !important;
}

.bg-white\/\[0\.02\],
.bg-white\/\[0\.04\],
.bg-white\/\[0\.06\],
.bg-slate-800,
.bg-slate-800\/60,
.bg-slate-800\/80 {
  background: var(--ds-surface-2) !important;
}

.text-white,
.text-slate-100,
.text-slate-200 {
  color: var(--ds-ink) !important;
}

.text-slate-300,
.text-slate-400,
.text-slate-500,
.text-\[\#8e8e93\],
.text-\[\#d1d1d6\] {
  color: var(--ds-ink-2) !important;
}

.border-white\/\[0\.06\],
.border-white\/\[0\.08\],
.border-white\/\[0\.12\],
.border-white\/\[0\.14\],
.border-slate-800,
.border-slate-700 {
  border-color: var(--ds-line) !important;
}

/* Semantic Brand & Status Accents */
.text-\[\#7b99be\],
.text-sky-400,
.text-sky-300,
.text-blue-400 {
  color: var(--ds-brand) !important;
}
.bg-\[\#7b99be\],
.bg-sky-500,
.bg-blue-600 {
  background: var(--ds-brand) !important;
  color: var(--ds-on-brand) !important;
}
.bg-sky-500\/20,
.bg-blue-500\/20 {
  background: var(--ds-brand-tint) !important;
  color: var(--ds-brand) !important;
}

.text-\[\#86ad8b\],
.text-emerald-400,
.text-green-400 {
  color: var(--ds-ok) !important;
}
.bg-\[\#86ad8b\],
.bg-emerald-500,
.bg-green-600 {
  background: var(--ds-ok) !important;
  color: var(--ds-on-ok) !important;
}
.bg-emerald-500\/20,
.bg-green-500\/20 {
  background: var(--ds-ok-tint) !important;
  color: var(--ds-ok) !important;
}

.text-\[\#cca775\],
.text-amber-400,
.text-yellow-400 {
  color: var(--ds-warn) !important;
}
.bg-\[\#cca775\],
.bg-amber-500 {
  background: var(--ds-warn) !important;
  color: var(--ds-on-warn) !important;
}
.bg-amber-500\/20 {
  background: var(--ds-warn-tint) !important;
  color: var(--ds-warn) !important;
}

.text-\[\#c47c7c\],
.text-rose-400,
.text-rose-300,
.text-red-400 {
  color: var(--ds-bad) !important;
}
.bg-\[\#c47c7c\],
.bg-rose-500,
.bg-red-600 {
  background: var(--ds-bad) !important;
  color: var(--ds-on-bad) !important;
}
.bg-rose-500\/20 {
  background: var(--ds-bad-tint) !important;
  color: var(--ds-bad) !important;
}

/* Modals & Dialog Backdrops */
.modal-backdrop,
.app-modal-backdrop {
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Badges */
.badge-status,
.ios-badge {
  border-radius: var(--ds-r-pill) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  border: 1px solid var(--ds-line) !important;
  background: var(--ds-surface-2) !important;
  color: var(--ds-ink) !important;
}
.badge-improving {
  background: var(--ds-ok-tint) !important;
  color: var(--ds-ok) !important;
  border-color: transparent !important;
}
.badge-attention {
  background: var(--ds-bad-tint) !important;
  color: var(--ds-bad) !important;
  border-color: transparent !important;
}
.badge-mixed {
  background: var(--ds-warn-tint) !important;
  color: var(--ds-warn) !important;
  border-color: transparent !important;
}
.badge-stable {
  background: var(--ds-brand-tint) !important;
  color: var(--ds-brand) !important;
  border-color: transparent !important;
}