/*
 * Badge component
 * Self-contained semantic badges that do not depend on Tailwind utility
 * classes being present in the compiled app.css. Light styles are the base;
 * dark variants live under html[data-mode=dark] so the same markup works in
 * both modes.
 *
 * Usage (template): {% include "catalog/partials/badge.html" with color="info" label="Under Review" %}
 * Available color keys: default, info, success, warning, danger, neutral,
 *                       muted, accent, purple.
 * Size variants: add the "badge--count" class for compact tab counters.
 */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem; /* 4px 12px – generous horizontal space */
  border-radius: 9999px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Compact variant for inline counts (e.g. tab counters). Keeps horizontal
   breathing room even with single-digit numbers. */
.badge--count {
  min-width: 1.75rem;
  padding: 0.125rem 0.625rem; /* 2px 10px */
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}

/* Clickable badge (rendered as an <a>). Keeps the badge's own text color (set
   by the .badge--<key> rules below) so contrast against the badge background is
   guaranteed, and adds an underline to signal it is a link. The global dark-mode
   link color rule excludes .badge--link so it does not repaint these. */
.badge--link {
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: filter 0.12s ease, box-shadow 0.12s ease;
}

.badge--link:hover {
  filter: brightness(0.96);
  text-decoration: underline;
}

.badge--link:focus-visible {
  outline: 2px solid #3b82f6; /* blue-500 */
  outline-offset: 2px;
}

html[data-mode=dark] .badge--link:hover {
  filter: brightness(1.15);
}

/* ==========================================================================
   Light mode color keys
   ========================================================================== */

.badge--default {
  background-color: #dbeafe; /* blue-100 */
  color: #1d4ed8;            /* blue-700 */
  border-color: #93c5fd;     /* blue-300 */
}

.badge--info {
  background-color: #cffafe; /* cyan-100 */
  color: #155e75;            /* cyan-800 */
  border-color: #67e8f9;     /* cyan-300 */
}

.badge--success {
  background-color: #dcfce7; /* green-100 */
  color: #166534;            /* green-800 */
  border-color: #86efac;     /* green-300 */
}

.badge--warning {
  background-color: #fef9c3; /* yellow-100 */
  color: #854d0e;            /* yellow-800 */
  border-color: #fde047;     /* yellow-300 */
}

.badge--danger {
  background-color: #fee2e2; /* red-100 */
  color: #991b1b;            /* red-800 */
  border-color: #fca5a5;     /* red-300 */
}

.badge--neutral {
  background-color: #f3f4f6; /* gray-100 */
  color: #374151;            /* gray-700 */
  border-color: #d1d5db;     /* gray-300 */
}

.badge--muted {
  background-color: #e5e7eb; /* gray-200 */
  color: #4b5563;            /* gray-600 */
  border-color: #9ca3af;     /* gray-400 */
}

.badge--accent {
  background-color: #e0e7ff; /* indigo-100 */
  color: #3730a3;            /* indigo-800 */
  border-color: #a5b4fc;     /* indigo-300 */
}

.badge--purple {
  background-color: #f3e8ff; /* purple-100 */
  color: #6b21a8;            /* purple-800 */
  border-color: #d8b4fe;     /* purple-300 */
}

/* ==========================================================================
   Dark mode color keys
   ========================================================================== */

html[data-mode=dark] .badge--default {
  background-color: #1e3a8a; /* blue-900 */
  color: #bfdbfe;            /* blue-200 */
  border-color: #3b82f6;     /* blue-500 */
}

html[data-mode=dark] .badge--info {
  background-color: #155e75; /* cyan-800 */
  color: #cffafe;            /* cyan-100 */
  border-color: #22d3ee;     /* cyan-400 */
}

html[data-mode=dark] .badge--success {
  background-color: #166534; /* green-800 */
  color: #dcfce7;            /* green-100 */
  border-color: #4ade80;     /* green-400 */
}

html[data-mode=dark] .badge--warning {
  background-color: #854d0e; /* yellow-800 */
  color: #fef9c3;            /* yellow-100 */
  border-color: #facc15;     /* yellow-400 */
}

html[data-mode=dark] .badge--danger {
  background-color: #991b1b; /* red-800 */
  color: #fee2e2;            /* red-100 */
  border-color: #f87171;     /* red-400 */
}

html[data-mode=dark] .badge--neutral {
  background-color: #374151; /* gray-700 */
  color: #e5e7eb;            /* gray-200 */
  border-color: #6b7280;     /* gray-500 */
}

html[data-mode=dark] .badge--muted {
  background-color: #4b5563; /* gray-600 */
  color: #e5e7eb;            /* gray-200 */
  border-color: #9ca3af;     /* gray-400 */
}

html[data-mode=dark] .badge--accent {
  background-color: #3730a3; /* indigo-800 */
  color: #e0e7ff;            /* indigo-100 */
  border-color: #818cf8;     /* indigo-400 */
}

html[data-mode=dark] .badge--purple {
  background-color: #6b21a8; /* purple-800 */
  color: #f3e8ff;            /* purple-100 */
  border-color: #c084fc;     /* purple-400 */
}

/* ==========================================================================
   Leading icon + size variants
   ========================================================================== */

/* Leading MingCute glyph. Sits before the label with a small gap; sized to the
   badge text so it scales with the size variant. */
.badge__icon {
  margin-right: 0.375rem; /* 6px – matches the label gap */
  font-size: 1rem;        /* 16px glyph for the default badge */
  line-height: 1;
}

/* Compact secondary-hint variant (smaller text and icon). */
.badge--xs {
  padding: 0.25rem 0.5rem; /* 4px 8px */
  font-size: 0.75rem;      /* 12px */
  line-height: 1rem;
}

.badge--xs .badge__icon {
  margin-right: 0.25rem;   /* 4px */
  font-size: 0.75rem;      /* 12px glyph to match xs text */
}

/* ==========================================================================
   Source-detail title row ordering
   ==========================================================================
   The header mixes access/status badges and action controls (Manage Keys,
   Generate Key, Request to Purchase, etc.) in a single wrapping flex row. Their
   natural document order interleaves them; flex `order` groups all badges ahead
   of all interactive controls without restructuring the template's conditional
   branches. The title (order 0) stays first; badges (order 1) follow; buttons,
   links, and forms (order 2) come last. */
.source-title-row > .badge {
  order: 1;
}

.source-title-row > button,
.source-title-row > a:not(.badge),
.source-title-row > form,
.source-title-row > span:not(.badge):not(.sr-only) {
  order: 2;
}