body {
  background: #f0f2f5;
  font-size: 0.9rem;
}

/* ── Dark mode ── */
[data-bs-theme="dark"] body {
  background: #111318;
}

[data-bs-theme="dark"] .mapping-table thead th,
[data-bs-theme="dark"] thead.table-light th {
  background: #1e2128;
  color: #fff;
}

[data-bs-theme="dark"] kbd {
  color: #ccc;
  background: #2a2d35;
  border-color: #444;
}

[data-bs-theme="dark"] .card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
}

/* ── Views ── */
.view {
  padding: 0 1.5rem;
}

/* ── Stats bar ── */
.stats-bar {
  align-items: center;
}

.stat-pill {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

/* ── Mappings table ── */
.mapping-table {
  font-size: 0.82rem;
}

.mapping-table thead th {
  background: #f8f9fa;
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}

.reasoning-cell {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.actions-cell {
  white-space: nowrap;
}

/* ── Extra-small buttons ── */
.btn-xs {
  padding: 0.1rem 0.45rem;
  font-size: 0.75rem;
  line-height: 1.3;
  border-radius: 0.2rem;
}

/* ── Flag button (muted red — softer than btn-danger) ── */
.btn-flag {
  --bs-btn-color:              #7a1a28;
  --bs-btn-bg:                 #f0c4cc;
  --bs-btn-border-color:       #c06070;
  --bs-btn-hover-color:        #5a1020;
  --bs-btn-hover-bg:           #e8b0bc;
  --bs-btn-hover-border-color: #9b2335;
  --bs-btn-focus-shadow-rgb:   155, 35, 53;
  --bs-btn-active-color:       #5a1020;
  --bs-btn-active-bg:          #dda0aa;
  --bs-btn-active-border-color:#9b2335;
  --bs-btn-disabled-color:     #7a1a28;
  --bs-btn-disabled-bg:        #f0c4cc;
  --bs-btn-disabled-border-color: #c06070;
}

[data-bs-theme="dark"] .btn-flag {
  --bs-btn-color:              #e8909a;
  --bs-btn-bg:                 #2c1418;
  --bs-btn-border-color:       #7a3040;
  --bs-btn-hover-color:        #f0a8b4;
  --bs-btn-hover-bg:           #3a1a20;
  --bs-btn-hover-border-color: #b05060;
  --bs-btn-focus-shadow-rgb:   232, 144, 154;
  --bs-btn-active-color:       #f0a8b4;
  --bs-btn-active-bg:          #3a1a20;
  --bs-btn-active-border-color:#b05060;
  --bs-btn-disabled-color:     #e8909a;
  --bs-btn-disabled-bg:        #2c1418;
  --bs-btn-disabled-border-color: #7a3040;
}

/* ── Monospace ── */
.font-monospace {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.8em;
}

/* ── Project cards ── */
.card {
  transition: box-shadow 0.15s ease;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

/* ── Progress bar ── */
.progress {
  border-radius: 4px;
}

/* ── Keyboard-selected row ── */
#mappings-tbody tr[data-mapping-id] {
  cursor: pointer;
}

#mappings-tbody tr.table-active {
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
}

/* ── Keyboard shortcut badge ── */
kbd {
  display: inline-block;
  padding: 0.1em 0.4em;
  font-size: 0.7rem;
  line-height: 1;
  color: #444;
  background: #f0f2f5;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
  font-family: inherit;
}
.btn-xs svg {
  width: 13px;
  height: 13px;
  vertical-align: middle;
}

/* ── Thinking animation ── */
.thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.thinking-dots span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
  animation: thinking-bounce 1.2s ease-in-out infinite;
}

.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinking-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.6; }
  30%            { transform: translateY(-5px); opacity: 1;   }
}

.thinking-brain {
  animation: thinking-pulse 1.5s ease-in-out infinite;
}

@keyframes thinking-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1);    }
  50%       { opacity: 1;   transform: scale(1.15); }
}

/* Concept-info popover — wider to accommodate 18-char SNOMED conceptIds */
.concept-info-popover {
  min-width: 340px;
  max-width: 420px;
}