/**
 * Buttons, cards, badges, alerts, empty states — requires tokens.css first.
 */

/* —— Buttons —— */
.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tb-space-2);
  min-height: 2.5rem;
  padding: var(--tb-space-2) var(--tb-space-5);
  border-radius: var(--tb-radius-md);
  border: 1px solid transparent;
  font-size: var(--tb-text-sm);
  font-weight: var(--tb-font-bold);
  line-height: var(--tb-leading-tight);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tb-btn--primary {
  background: linear-gradient(135deg, var(--tb-color-accent-strong), var(--tb-color-accent));
  color: var(--tb-color-text-inverse);
  border-color: rgba(45, 212, 191, 0.35);
  box-shadow: var(--tb-shadow-sm), var(--tb-shadow-inset-glow);
}

.tb-btn--primary:hover {
  filter: brightness(1.06);
}

.tb-btn--secondary {
  background: var(--tb-color-bg-panel);
  color: var(--tb-color-text-primary);
  border-color: var(--tb-color-border-subtle);
}

.tb-btn--secondary:hover {
  background: var(--tb-color-bg-panel-hover);
  border-color: var(--tb-color-border-strong);
}

.tb-btn--ghost {
  background: transparent;
  color: var(--tb-color-text-secondary);
  border-color: transparent;
}

.tb-btn--ghost:hover {
  color: var(--tb-color-text-primary);
  background: var(--tb-color-accent-dim);
}

.tb-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tb-btn--sm {
  min-height: 2.125rem;
  padding: var(--tb-space-1) var(--tb-space-4);
  font-size: var(--tb-text-xs);
}

/* —— OCC sidebar navigation —— */
.tb-occ-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tb-space-1);
}

.tb-occ-nav__link {
  display: block;
  padding: var(--tb-space-2) var(--tb-space-3);
  border-radius: var(--tb-radius-md);
  border: 1px solid transparent;
  color: var(--tb-color-text-primary);
  text-decoration: none;
  font-size: var(--tb-text-sm);
  font-weight: var(--tb-font-medium);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.tb-occ-nav__link:hover {
  background: var(--tb-color-accent-dim);
  border-color: rgba(45, 212, 191, 0.12);
}

.tb-occ-nav__link.is-active {
  background: rgba(45, 212, 191, 0.14);
  border-color: rgba(45, 212, 191, 0.22);
  color: var(--tb-color-accent);
  font-weight: var(--tb-font-bold);
}

/* —— OCC module card title —— */
.tb-occ-module__title {
  margin: 0 0 var(--tb-space-1);
  font-size: var(--tb-text-sm);
  font-weight: var(--tb-font-heavy);
  color: var(--tb-color-text-primary);
}

.tb-occ-module__status {
  margin: 0 0 var(--tb-space-2);
  font-size: var(--tb-text-xs);
  font-weight: var(--tb-font-bold);
  color: var(--tb-color-accent);
}

/* —— Cards —— */
.tb-card {
  background: linear-gradient(165deg, var(--tb-color-bg-panel) 0%, var(--tb-color-bg-raised) 100%);
  border: var(--tb-dash-card-border);
  border-radius: var(--tb-dash-card-radius);
  padding: var(--tb-dash-card-pad);
  box-shadow: var(--tb-shadow-md), var(--tb-shadow-inset-glow);
}

.tb-card__title {
  margin: 0 0 var(--tb-space-2);
  font-size: var(--tb-text-lg);
  font-weight: var(--tb-font-heavy);
  letter-spacing: var(--tb-tracking-tight);
  color: var(--tb-color-text-primary);
}

.tb-card__meta {
  margin: 0;
  font-size: var(--tb-text-sm);
  color: var(--tb-color-text-secondary);
  line-height: var(--tb-leading-snug);
}

/* —— Badges —— */
.tb-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--tb-space-1) var(--tb-space-3);
  border-radius: var(--tb-radius-pill);
  font-size: var(--tb-text-xs);
  font-weight: var(--tb-font-bold);
  letter-spacing: var(--tb-tracking-wide);
  text-transform: uppercase;
}

.tb-badge--neutral {
  background: var(--tb-color-status-neutral-bg);
  color: var(--tb-color-status-neutral);
  border: 1px solid var(--tb-color-border-subtle);
}

.tb-badge--red {
  background: var(--tb-color-status-red-bg);
  color: var(--tb-color-status-red);
}

.tb-badge--amber {
  background: var(--tb-color-status-amber-bg);
  color: var(--tb-color-status-amber);
}

.tb-badge--green {
  background: var(--tb-color-status-green-bg);
  color: var(--tb-color-status-green);
}

.tb-badge--blue {
  background: var(--tb-color-status-blue-bg);
  color: var(--tb-color-status-blue);
}

/* —— Alerts —— */
.tb-alert {
  padding: var(--tb-space-4);
  border-radius: var(--tb-radius-md);
  border: 1px solid var(--tb-color-border-subtle);
  font-size: var(--tb-text-sm);
  line-height: var(--tb-leading-relaxed);
}

.tb-alert--info {
  background: var(--tb-color-status-blue-bg);
  border-color: rgba(96, 165, 250, 0.25);
  color: var(--tb-color-text-primary);
}

.tb-alert--success {
  background: var(--tb-color-status-green-bg);
  border-color: rgba(52, 211, 153, 0.25);
}

.tb-alert--warning {
  background: var(--tb-color-status-amber-bg);
  border-color: rgba(251, 191, 36, 0.28);
}

.tb-alert--danger {
  background: var(--tb-color-status-red-bg);
  border-color: rgba(251, 113, 133, 0.28);
}

/* —— Empty states —— */
.tb-empty {
  text-align: center;
  padding: var(--tb-space-10) var(--tb-space-6);
  border-radius: var(--tb-radius-lg);
  border: 1px dashed var(--tb-color-border-strong);
  background: var(--tb-color-bg-inset);
  color: var(--tb-color-text-secondary);
  font-size: var(--tb-text-sm);
}

.tb-empty__title {
  margin: 0 0 var(--tb-space-2);
  font-size: var(--tb-text-md);
  font-weight: var(--tb-font-bold);
  color: var(--tb-color-text-primary);
}