/* ═══════════════════════════════════════════════════════════════════════════
   KRAKEN PILL SYSTEM — Single Source of Truth
   ═══════════════════════════════════════════════════════════════════════════
   5 sizes (1=xl → 5=xs) × 12 colors. Used across dashboard, crawler, database-pro.

   USAGE:
     <span class="pill pill-green">Active</span>          → default size (3/md)
     <span class="pill pill-1 pill-ember">Feature</span>  → size 1 (xl)
     <span class="pill pill-5 pill-muted">tag</span>      → size 5 (xs/mini)

   COLOR MAP (semantic):
     pill-ember    → warnings, in-progress, highlights
     pill-green    → success, active, live, new
     pill-red      → danger, failed, deleted
     pill-muted    → neutral, inactive, planned
     pill-sky      → dealer type, info
     pill-teal     → inventory type, petrol
     pill-purple   → restarting, auth-clickup
     pill-indigo   → UI changes, tech
     pill-pink     → decorative
     pill-yellow   → medium priority, partial
     pill-blue     → scheduled, links
     pill-hubspot  → HubSpot orange (#ff4800)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base ──────────────────────────────────────────────────────────────── */

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    /* Default = size 3 (md) */
    font-size: 0.6875rem;  /* 11px */
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: var(--pill-bg, rgba(148, 163, 184, 0.15));
    color: var(--pill-color, var(--muted, #94a3b8));
}

/* ── 5 Sizes ──────────────────────────────────────────────────────────── */

/* Size 1 — XL: changelog headers, large status badges */
.pill-1 {
    font-size: 0.8125rem;  /* 13px */
    padding: 0.375rem 0.75rem;
    border-radius: 5px;
}

/* Size 2 — LG: table badges, project tags */
.pill-2 {
    font-size: 0.75rem;    /* 12px */
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
}

/* Size 3 — MD (default, no extra class needed) */
.pill-3 {
    font-size: 0.6875rem;  /* 11px */
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* Size 4 — SM: inline tags, status badges in tables */
.pill-4 {
    font-size: 0.625rem;   /* 10px */
    padding: 0.1875rem 0.375rem;
    border-radius: 3px;
}

/* Size 5 — XS: mini counters, tiny indicators */
.pill-5 {
    font-size: 0.5625rem;  /* 9px */
    padding: 0.125rem 0.3125rem;
    border-radius: 3px;
    letter-spacing: 0.08em;
}

/* ── 12 Colors — Dark Theme ───────────────────────────────────────────── */

.pill-ember   { --pill-bg: rgba(249, 115, 22, 0.35); --pill-color: #ffb86c; background: var(--pill-bg); color: var(--pill-color); }
.pill-green   { --pill-bg: rgba(52, 211, 153, 0.3);  --pill-color: #6ee7b7; background: var(--pill-bg); color: var(--pill-color); }
.pill-red     { --pill-bg: rgba(248, 113, 113, 0.3); --pill-color: #fca5a5; background: var(--pill-bg); color: var(--pill-color); }
.pill-muted   { --pill-bg: rgba(148, 163, 184, 0.2); --pill-color: #94a3b8; background: var(--pill-bg); color: var(--pill-color); }
.pill-sky     { --pill-bg: rgba(56, 189, 248, 0.3);  --pill-color: #7dd3fc; background: var(--pill-bg); color: var(--pill-color); }
.pill-teal    { --pill-bg: rgba(45, 212, 191, 0.3);  --pill-color: #5eead4; background: var(--pill-bg); color: var(--pill-color); }
.pill-purple  { --pill-bg: rgba(167, 139, 250, 0.3); --pill-color: #c4b5fd; background: var(--pill-bg); color: var(--pill-color); }
.pill-indigo  { --pill-bg: rgba(129, 140, 248, 0.3); --pill-color: #a5b4fc; background: var(--pill-bg); color: var(--pill-color); }
.pill-pink    { --pill-bg: rgba(244, 114, 182, 0.3); --pill-color: #f9a8d4; background: var(--pill-bg); color: var(--pill-color); }
.pill-yellow  { --pill-bg: rgba(250, 204, 21, 0.3);  --pill-color: #fde047; background: var(--pill-bg); color: var(--pill-color); }
.pill-blue    { --pill-bg: rgba(59, 130, 246, 0.3);  --pill-color: #93c5fd; background: var(--pill-bg); color: var(--pill-color); }
.pill-hubspot { --pill-bg: rgba(255, 72, 0, 0.3);    --pill-color: #ff8c5a; background: var(--pill-bg); color: var(--pill-color); }

/* ── 12 Colors — Light Theme ─────────────────────────────────────────── */

html[data-theme="light"] .pill-ember   { --pill-bg: rgba(249, 115, 22, 0.15); --pill-color: #c2410c; background: var(--pill-bg); color: var(--pill-color); }
html[data-theme="light"] .pill-green   { --pill-bg: rgba(34, 197, 94, 0.15);  --pill-color: #15803d; background: var(--pill-bg); color: var(--pill-color); }
html[data-theme="light"] .pill-red     { --pill-bg: rgba(239, 68, 68, 0.15);  --pill-color: #b91c1c; background: var(--pill-bg); color: var(--pill-color); }
html[data-theme="light"] .pill-muted   { --pill-bg: rgba(100, 116, 139, 0.12); --pill-color: #475569; background: var(--pill-bg); color: var(--pill-color); }
html[data-theme="light"] .pill-sky     { --pill-bg: rgba(14, 165, 233, 0.15); --pill-color: #0369a1; background: var(--pill-bg); color: var(--pill-color); }
html[data-theme="light"] .pill-teal    { --pill-bg: rgba(20, 184, 166, 0.15); --pill-color: #0f766e; background: var(--pill-bg); color: var(--pill-color); }
html[data-theme="light"] .pill-purple  { --pill-bg: rgba(139, 92, 246, 0.15); --pill-color: #6d28d9; background: var(--pill-bg); color: var(--pill-color); }
html[data-theme="light"] .pill-indigo  { --pill-bg: rgba(99, 102, 241, 0.15); --pill-color: #4338ca; background: var(--pill-bg); color: var(--pill-color); }
html[data-theme="light"] .pill-pink    { --pill-bg: rgba(236, 72, 153, 0.15); --pill-color: #be185d; background: var(--pill-bg); color: var(--pill-color); }
html[data-theme="light"] .pill-yellow  { --pill-bg: rgba(234, 179, 8, 0.15);  --pill-color: #a16207; background: var(--pill-bg); color: var(--pill-color); }
html[data-theme="light"] .pill-blue    { --pill-bg: rgba(37, 99, 235, 0.15);  --pill-color: #1d4ed8; background: var(--pill-bg); color: var(--pill-color); }
html[data-theme="light"] .pill-hubspot { --pill-bg: rgba(255, 72, 0, 0.15);   --pill-color: #cc3a00; background: var(--pill-bg); color: var(--pill-color); }

/* ── Semantic Pill: .pill (base needed) ───────────────────────────────── */
html[data-theme="light"] .pill {
    --pill-bg: rgba(100, 116, 139, 0.1);
    --pill-color: #475569;
    background: var(--pill-bg);
    color: var(--pill-color);
}

/* ── Dealer Status Pills ──────────────────────────────────────────────── */
/* Used in database-pro and crawler dealer tables.
   Relies on --status-* CSS vars from base.css :root */

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 0.625rem;   /* 10px — size 4 */
    padding: 0.1875rem 0.375rem;
    border-radius: 3px;
}

.status-pill.new         { background: var(--status-new-bg);        color: var(--status-new); }
.status-pill.initial     { background: var(--status-initial-bg);    color: var(--status-initial); }
.status-pill.in_hubspot  { background: var(--status-in_hubspot-bg); color: var(--status-in_hubspot); }
.status-pill.outdated    { background: var(--status-outdated-bg);   color: var(--status-outdated); }
.status-pill.deleted     { background: var(--status-deleted-bg);    color: var(--status-deleted); }
.status-pill.disqualified { background: var(--status-disqualified-bg); color: var(--status-disqualified); }
.status-pill.reviewed    { background: var(--status-reviewed-bg);   color: var(--status-reviewed); }

/* ── Schedule Panel Badge ─────────────────────────────────────────────── */
/* Used in crawler schedule panels for batch status */

.schedule-panel-badge {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    font-size: 0.625rem;   /* 10px */
    padding: 0.1875rem 0.375rem;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.schedule-panel-badge.running   { background: rgba(245, 158, 11, 0.15); color: #fbbf24; animation: pulse-badge 2s ease-in-out infinite; }
.schedule-panel-badge.completed { background: rgba(34, 197, 94, 0.15);  color: #34d399; }
.schedule-panel-badge.pending   { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }
.schedule-panel-badge.partial   { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.schedule-panel-badge.failed    { background: rgba(239, 68, 68, 0.15);  color: #f87171; }
.schedule-panel-badge.scheduled { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }

html[data-theme="light"] .schedule-panel-badge.running   { background: rgba(245, 158, 11, 0.12); color: #d97706; }
html[data-theme="light"] .schedule-panel-badge.completed { background: rgba(34, 197, 94, 0.12);  color: #15803d; }
html[data-theme="light"] .schedule-panel-badge.pending   { background: rgba(107, 114, 128, 0.1); color: #6b7280; }
html[data-theme="light"] .schedule-panel-badge.partial   { background: rgba(245, 158, 11, 0.12); color: #d97706; }
html[data-theme="light"] .schedule-panel-badge.failed    { background: rgba(239, 68, 68, 0.1);   color: #dc2626; }
html[data-theme="light"] .schedule-panel-badge.scheduled { background: rgba(37, 99, 235, 0.12);  color: #1d4ed8; }

@keyframes pulse-badge { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ── Confidence Pill (HubSpot duplicate detection) ────────────────────── */

.confidence-pill {
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    font-size: 0.625rem;
    padding: 0.1875rem 0.375rem;
    border-radius: 3px;
}

.confidence-pill.high   { background: rgba(239, 68, 68, 0.15);  color: #f87171; }
.confidence-pill.medium { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.confidence-pill.low    { background: rgba(107, 114, 128, 0.15); color: #9ca3af; }

html[data-theme="light"] .confidence-pill.high   { background: rgba(239, 68, 68, 0.1);   color: #dc2626; }
html[data-theme="light"] .confidence-pill.medium  { background: rgba(245, 158, 11, 0.1);  color: #d97706; }
html[data-theme="light"] .confidence-pill.low    { background: rgba(107, 114, 128, 0.1); color: #6b7280; }

/* ── Status Dot (inline status indicator with dot) ────────────────────── */

.status-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.status-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.s-running::before   { background: var(--ember, #f59e0b); box-shadow: 0 0 6px rgba(245, 158, 11, 0.6); animation: pulse-dot 1.5s ease-in-out infinite; }
.status-dot.s-active::before    { background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, 0.6); animation: pulse-dot 1.5s ease-in-out infinite; }
.status-dot.s-waiting::before   { background: var(--ember, #f59e0b); box-shadow: 0 0 6px rgba(245, 158, 11, 0.4); }
.status-dot.s-completed::before { background: #34d399; }
.status-dot.s-failed::before    { background: #f87171; box-shadow: 0 0 6px rgba(248, 113, 113, 0.5); }
.status-dot.s-pending::before   { background: var(--muted, #94a3b8); opacity: 0.5; }
.status-dot.s-partial::before   { background: #fbbf24; }

@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.75); } }

/* ── User Badge System (dashboard user tables + profile) ──────────────── */

.users-table-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.625rem;
    padding: 0.1875rem 0.375rem;
    border-radius: 3px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.users-table-badge.role-admin   { background: var(--bg-ember-subtle, rgba(249, 115, 22, 0.15)); color: var(--ember, #f59e0b); }
.users-table-badge.role-user    { background: var(--hover-muted, rgba(148, 163, 184, 0.1)); color: var(--muted, #94a3b8); }
.users-table-badge.auth-clickup { background: var(--bg-purple-subtle, rgba(139, 92, 246, 0.15)); color: #c4b5fd; }
.users-table-badge.auth-local   { background: var(--hover-muted, rgba(148, 163, 184, 0.1)); color: var(--muted, #94a3b8); }

.badge-role     { background: var(--badge-ember, rgba(249, 115, 22, 0.15)); }
.badge-provider { background: var(--bg-indigo-subtle, rgba(99, 102, 241, 0.15)); }
.badge-provider.clickup { background: var(--bg-purple-subtle, rgba(139, 92, 246, 0.15)); }