/* OpsDrawer — shared drawer component top-up styles
 *
 * The heavy lifting (right-side panel, overlay, animations, tabs, blue
 * gradient header) lives in `side-panel.css` (`.panel-*` + `.profile-panel-theme`).
 * This file adds:
 *   - `.ops-drawer-badge.ops-drawer-badge-<kind>` — pill variants for
 *     `badges: [{ label, kind }]` passed to OpsDrawer.open().
 *   - `.ops-drawer-tab-content` — per-tab content host (inherits panel-body
 *     padding; included here so future drawer adopters don't depend on
 *     profile-specific CSS).
 *
 * Include `side-panel.css` BEFORE this file.
 */

/* Tab content host (matches existing .panel-body-padded convention) */
.ops-drawer-tab-content {
  min-height: 0;
}

/* Ensure badges track the existing profile-panel-badges layout */
.ops-drawer-badges {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.ops-drawer-badge {
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* Semantic kinds — readable on the blue gradient header */
.ops-drawer-badge-info {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.ops-drawer-badge-success {
  background: rgba(209, 250, 229, 0.25);
  color: #a7f3d0;
}

.ops-drawer-badge-warning {
  background: rgba(254, 243, 199, 0.25);
  color: #fde68a;
}

.ops-drawer-badge-danger {
  background: rgba(254, 226, 226, 0.25);
  color: #fecaca;
}

.ops-drawer-badge-neutral {
  background: rgba(226, 232, 240, 0.25);
  color: #e2e8f0;
}

.ops-drawer-badge-agent {
  background: rgba(219, 234, 254, 0.25);
  color: #bfdbfe;
}

.ops-drawer-badge-rewards {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.ops-drawer-badge-b2b {
  background: rgba(254, 243, 199, 0.25);
  color: #fde68a;
}

.ops-drawer-badge-staff {
  background: rgba(209, 250, 229, 0.25);
  color: #a7f3d0;
}