/* ============================================================
   ORBIO · COMPONENT STYLES
   Class-based styling for the React primitives. Shipped to
   consumers via styles.css so the classes resolve everywhere.
   All values reference design tokens.
   ============================================================ */

/* ---------------------------------------------------------------
   Button
   --------------------------------------------------------------- */
.orbio-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  line-height: 1;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  user-select: none;
}
.orbio-btn:active { transform: scale(0.97); }
.orbio-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.4); transform: none; }
.orbio-btn:focus-visible { outline: none; box-shadow: var(--glow-focus); }

/* sizes */
.orbio-btn--sm { height: var(--control-h-sm); padding: 0 var(--space-6); font-size: var(--text-sm); }
.orbio-btn--md { height: var(--control-h-md); padding: 0 var(--space-8); }
.orbio-btn--lg { height: var(--control-h-lg); padding: 0 var(--space-10); font-size: var(--text-lg); }

/* primary — teal→blue gradient, near-black text, teal glow */
.orbio-btn--primary {
  background: var(--grad-accent-btn);
  color: var(--text-on-accent);
  box-shadow: var(--glow-strong);
}
.orbio-btn--primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.5); }

/* secondary — quiet outline that warms to teal on hover */
.orbio-btn--secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
.orbio-btn--secondary:hover:not(:disabled) { border-color: var(--border-accent); color: var(--accent); background: var(--accent-soft); }

/* ghost — text only */
.orbio-btn--ghost {
  background: transparent;
  color: var(--text-dim);
  border-color: var(--border-soft);
}
.orbio-btn--ghost:hover:not(:disabled) { color: var(--accent); border-color: var(--border-accent); }

/* danger */
.orbio-btn--danger {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger-300);
  border-color: rgba(239, 68, 68, 0.3);
}
.orbio-btn--danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.2); border-color: rgba(239,68,68,0.5); }

.orbio-btn__icon { display: inline-flex; width: 1em; height: 1em; font-size: 1.05em; }

/* ---------------------------------------------------------------
   IconButton — square, transparent, hairline border
   --------------------------------------------------------------- */
.orbio-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--control-h-md); height: var(--control-h-md);
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.orbio-iconbtn:hover { color: var(--accent); border-color: var(--border-accent); background: var(--accent-soft); }
.orbio-iconbtn:active { transform: scale(0.94); }
.orbio-iconbtn--sm { width: var(--control-h-sm); height: var(--control-h-sm); }
.orbio-iconbtn--round { border-radius: var(--radius-pill); }
.orbio-iconbtn svg { width: 16px; height: 16px; }

/* Round gradient send button (chat composer) */
.orbio-sendbtn {
  width: var(--send-btn); height: var(--send-btn); border-radius: 50%;
  background: var(--grad-accent-btn); color: var(--text-on-accent);
  border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--glow-strong); transition: transform var(--dur-fast) var(--ease);
}
.orbio-sendbtn:hover:not(:disabled) { transform: scale(1.06); }
.orbio-sendbtn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.5); }
.orbio-sendbtn svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------
   Chip — pill, optional leading dot/icon, selectable
   --------------------------------------------------------------- */
.orbio-chip {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: default;
  transition: all var(--dur-fast) var(--ease);
}
.orbio-chip strong { color: var(--text); font-weight: var(--weight-semibold); }
.orbio-chip--button { cursor: pointer; }
.orbio-chip--button:hover { border-color: var(--border-accent); color: var(--text); background: var(--accent-soft); }
.orbio-chip--active { background: var(--accent-soft); border-color: var(--border-accent); color: var(--accent); }
.orbio-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: var(--glow-dot); flex-shrink: 0; }

/* ---------------------------------------------------------------
   Badge — compact status token
   --------------------------------------------------------------- */
.orbio-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 1px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
}
.orbio-badge--neutral { background: rgba(255,255,255,0.08); color: var(--text-dim); }
.orbio-badge--accent  { background: rgba(var(--accent-rgb), 0.14); color: var(--accent); }
.orbio-badge--info    { background: rgba(var(--blue-rgb), 0.14); color: var(--blue-300); }
.orbio-badge--danger  { background: rgba(239,68,68,0.18); color: var(--danger-300); }
.orbio-badge--warn    { background: rgba(255,159,67,0.15); color: var(--warn-300); }
.orbio-badge--success { background: rgba(52,211,153,0.15); color: var(--success-500); }
.orbio-badge--lab     { background: rgba(178,157,255,0.16); color: var(--violet-400); }
.orbio-badge--count   { padding: 1px var(--space-3); background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }

/* ---------------------------------------------------------------
   Card / Panel
   --------------------------------------------------------------- */
.orbio-card {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-8);
}
.orbio-card--glass {
  background: var(--surface-glass);
  -webkit-backdrop-filter: var(--blur-panel);
  backdrop-filter: var(--blur-panel);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}
.orbio-card--interactive { cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.orbio-card--interactive:hover { border-color: var(--border-accent); background: var(--surface-3); }
.orbio-card__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text); margin: 0 0 var(--space-2); }
.orbio-card__desc { font-size: var(--text-sm); color: var(--text-muted); margin: 0; line-height: var(--leading-snug); }

/* ---------------------------------------------------------------
   Eyebrow label
   --------------------------------------------------------------- */
.orbio-eyebrow-label {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------
   Input / Textarea
   --------------------------------------------------------------- */
.orbio-field { display: flex; flex-direction: column; gap: var(--space-3); }
.orbio-field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-dim); }
.orbio-input {
  width: 100%;
  height: var(--control-h-md);
  padding: 0 var(--space-6);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  outline: none;
}
.orbio-input::placeholder { color: var(--text-faint); }
.orbio-input:focus { border-color: var(--accent); box-shadow: var(--glow-soft); }
textarea.orbio-input { height: auto; min-height: 64px; padding: var(--space-5) var(--space-6); line-height: var(--leading-snug); resize: vertical; }
.orbio-input--invalid { border-color: var(--danger); }

/* Composer input bar — the gradient pill with round send button */
.orbio-composer {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-8);
  border-radius: var(--radius-2xl);
  background: var(--grad-input);
  border: 1px solid var(--accent-line);
  transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.orbio-composer:focus-within { border-color: var(--accent); box-shadow: var(--glow-soft); }
.orbio-composer input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text); font-size: var(--text-lg); font-family: inherit;
}
.orbio-composer input::placeholder { color: var(--text-faint); }

/* ---------------------------------------------------------------
   Toggle / Switch
   --------------------------------------------------------------- */
.orbio-toggle { display: inline-flex; align-items: center; gap: var(--space-5); cursor: pointer; user-select: none; }
.orbio-toggle__track {
  position: relative; width: 40px; height: 22px; border-radius: var(--radius-pill);
  background: var(--surface-3); border: 1px solid var(--border);
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
  flex-shrink: 0;
}
.orbio-toggle__thumb {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-dim); transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.orbio-toggle--on .orbio-toggle__track { background: var(--accent-soft); border-color: var(--border-accent); }
.orbio-toggle--on .orbio-toggle__thumb { transform: translateX(18px); background: var(--accent); box-shadow: var(--glow-dot); }
.orbio-toggle__label { font-size: var(--text-md); color: var(--text); }

/* ---------------------------------------------------------------
   Tabs (segmented)
   --------------------------------------------------------------- */
.orbio-tabs { display: inline-flex; align-items: center; gap: var(--space-3); }
.orbio-tab {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-dim); padding: var(--space-3) var(--space-7);
  border-radius: var(--radius-md); font-size: var(--text-base);
  font-weight: var(--weight-semibold); cursor: pointer; font-family: inherit;
  transition: all var(--dur-fast) var(--ease);
}
.orbio-tab:hover { color: var(--text); background: var(--accent-soft); }
.orbio-tab--active { background: var(--accent-soft); color: var(--accent); border-color: var(--border-accent); }

/* ---------------------------------------------------------------
   StatusBanner
   --------------------------------------------------------------- */
.orbio-banner {
  display: flex; align-items: flex-start; gap: var(--space-5);
  padding: var(--space-6) var(--space-7);
  border-radius: var(--radius-lg);
  border: 1px solid;
  border-left-width: 3px;
  font-size: var(--text-md); line-height: var(--leading-snug);
}
.orbio-banner__icon { flex-shrink: 0; margin-top: 1px; }
.orbio-banner__body { color: var(--text); }
.orbio-banner__title { font-weight: var(--weight-semibold); }
.orbio-banner--ok   { background: var(--accent-soft); border-color: var(--accent-line); }
.orbio-banner--ok .orbio-banner__icon { color: var(--accent); }
.orbio-banner--info { background: rgba(var(--blue-rgb),0.07); border-color: rgba(var(--blue-rgb),0.3); }
.orbio-banner--info .orbio-banner__icon { color: var(--info); }
.orbio-banner--warn { background: rgba(255,159,67,0.06); border-color: rgba(255,159,67,0.3); }
.orbio-banner--warn .orbio-banner__icon { color: var(--warn); }
.orbio-banner--crit { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.3); }
.orbio-banner--crit .orbio-banner__icon { color: var(--danger); }

/* ---------------------------------------------------------------
   ProgressBar (scope/completeness bar)
   --------------------------------------------------------------- */
.orbio-progress { width: 100%; }
.orbio-progress__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.orbio-progress__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--text-muted); }
.orbio-progress__pct { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text); letter-spacing: var(--tracking-wide); }
.orbio-progress__track { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.06); overflow: hidden; }
.orbio-progress__fill { height: 100%; border-radius: 3px; transition: width var(--dur-slow) var(--ease), background-color var(--dur-slow) var(--ease); }
.orbio-progress__fill--low  { background: var(--danger); box-shadow: 0 0 8px rgba(239,68,68,0.4); }
.orbio-progress__fill--mid  { background: var(--warn); box-shadow: 0 0 8px rgba(255,159,67,0.4); }
.orbio-progress__fill--high { background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb),0.5); }

/* ---------------------------------------------------------------
   Spinner
   --------------------------------------------------------------- */
.orbio-spinner {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), 0.2);
  border-top-color: var(--accent);
  animation: orbio-spin 0.8s linear infinite;
}

/* ---------------------------------------------------------------
   PetChip — patient identity pill (avatar + name + species)
   --------------------------------------------------------------- */
.orbio-petchip {
  display: inline-flex; align-items: center; gap: var(--space-4);
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  font-size: var(--text-sm); color: var(--text-dim);
}
.orbio-petchip__avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--grad-brand); color: var(--text-on-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); font-weight: var(--weight-bold); flex-shrink: 0;
}
.orbio-petchip strong { color: var(--text); font-weight: var(--weight-semibold); }
.orbio-petchip__meta { color: var(--text-muted); }

/* ---------------------------------------------------------------
   PredictionChip — AI suggestion chip (clinical sidebar)
   --------------------------------------------------------------- */
.orbio-pred {
  position: relative;
  padding: var(--space-5) var(--space-6);
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--text-muted);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.orbio-pred:hover { background: var(--surface-3); transform: translateX(2px); }
.orbio-pred__hdr { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.orbio-pred__kind { font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-widest); text-transform: uppercase; }
.orbio-pred__prob { margin-left: auto; font-size: var(--text-2xs); font-weight: var(--weight-bold); padding: 2px var(--space-4); border-radius: var(--radius-pill); background: rgba(0,0,0,0.3); color: var(--text); }
.orbio-pred__title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text); margin-bottom: 2px; }
.orbio-pred__rationale { font-size: var(--text-sm); color: var(--text-dim); opacity: 0.85; line-height: var(--leading-snug); }
.orbio-pred--differential { border-left-color: var(--danger); }
.orbio-pred--differential .orbio-pred__kind { color: var(--danger-300); }
.orbio-pred--laboratory { border-left-color: var(--violet-400); }
.orbio-pred--laboratory .orbio-pred__kind { color: var(--violet-400); }
.orbio-pred--imaging { border-left-color: var(--warn); }
.orbio-pred--imaging .orbio-pred__kind { color: var(--warn); }
.orbio-pred--therapy { border-left-color: var(--success); }
.orbio-pred--therapy .orbio-pred__kind { color: var(--success); }

/* ---------------------------------------------------------------
   Light theme ("svetlo") overrides — fix hardcoded dark-canvas values
   --------------------------------------------------------------- */
[data-theme="svetlo"] .orbio-badge--neutral { background: rgba(0, 40, 80, 0.08); color: var(--text-dim); }
[data-theme="svetlo"] .orbio-progress__track { background: rgba(0, 40, 80, 0.08); }
[data-theme="svetlo"] .orbio-pred__prob { background: rgba(0, 40, 80, 0.08); color: var(--text); }
[data-theme="svetlo"] .orbio-btn--danger { color: #b91c1c; border-color: rgba(220, 38, 38, 0.35); background: rgba(220, 38, 38, 0.08); }
[data-theme="svetlo"] .orbio-btn--danger:hover:not(:disabled) { background: rgba(220, 38, 38, 0.14); }
[data-theme="svetlo"] .orbio-badge--danger { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }
[data-theme="svetlo"] .orbio-badge--warn { background: rgba(217, 119, 6, 0.12); color: #b45309; }
[data-theme="svetlo"] .orbio-badge--success { background: rgba(5, 150, 105, 0.12); color: #047857; }
[data-theme="svetlo"] .orbio-badge--info { background: rgba(29, 78, 216, 0.10); color: #1d4ed8; }
[data-theme="svetlo"] .orbio-badge--lab { background: rgba(109, 40, 217, 0.10); color: #6d28d9; }
[data-theme="svetlo"] .orbio-pred--differential .orbio-pred__kind { color: #b91c1c; }
[data-theme="svetlo"] .orbio-pred--laboratory .orbio-pred__kind { color: #6d28d9; }
[data-theme="svetlo"] .orbio-pred--laboratory { border-left-color: #8b5cf6; }
[data-theme="svetlo"] .orbio-pred--imaging .orbio-pred__kind { color: #b45309; }
[data-theme="svetlo"] .orbio-banner--ok .orbio-banner__icon { color: var(--accent); }
[data-theme="svetlo"] .orbio-btn--primary { box-shadow: 0 2px 10px rgba(14, 116, 144, 0.3); }