/* =====================================================
   MODULE: BADGES
   Status badges, glow badges, capacity cells, tag pills.
   Badge colors adapt per-theme via --badge-*-text vars.
   Per-theme overrides for all 5 themes.
   Toggle: modules.badges in theme-config.json
   ===================================================== */

/* ============= BASE BADGE ============= */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* ============= COLOR VARIANTS (glow style) ============= */
.badge-blue { background: var(--badge-blue-bg); border-color: var(--badge-blue-border); color: var(--badge-blue-text); box-shadow: var(--badge-blue-shadow); }
.badge-blue:hover { box-shadow: var(--badge-blue-shadow-hover); }

.badge-green { background: var(--badge-green-bg); border-color: var(--badge-green-border); color: var(--badge-green-text); box-shadow: var(--badge-green-shadow); }
.badge-green:hover { box-shadow: var(--badge-green-shadow-hover); }

.badge-red { background: var(--badge-red-bg); border-color: var(--badge-red-border); color: var(--badge-red-text); box-shadow: var(--badge-red-shadow); }
.badge-red:hover { box-shadow: var(--badge-red-shadow-hover); }

.badge-yellow { background: var(--badge-yellow-bg); border-color: var(--badge-yellow-border); color: var(--badge-yellow-text); box-shadow: var(--badge-yellow-shadow); }
.badge-yellow:hover { box-shadow: var(--badge-yellow-shadow-hover); }

.badge-purple { background: var(--badge-purple-bg); border-color: var(--badge-purple-border); color: var(--badge-purple-text); box-shadow: var(--badge-purple-shadow); }
.badge-purple:hover { box-shadow: var(--badge-purple-shadow-hover); }

.badge-pink { background: var(--badge-pink-bg); border-color: var(--badge-pink-border); color: var(--badge-pink-text); box-shadow: var(--badge-pink-shadow); }
.badge-pink:hover { box-shadow: var(--badge-pink-shadow-hover); }

/* ============= SOLID BADGES ============= */
.badge-solid { border: none; }
.badge-solid.hot { background: #ff4444; color: #ffffff; }
.badge-solid.popular { background: #ffd700; color: #333333; }
.badge-solid.bestseller { background: #00c853; color: #ffffff; }
.badge-solid.new { background: #ff9800; color: #ffffff; }
.badge-solid.accent { background: var(--accent); color: #ffffff; }

/* ============= BADGE BUTTONS ============= */
.badge-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
}
.badge-btn-primary { background: var(--badge-btn-primary-bg); border-color: var(--badge-btn-primary-border); color: var(--badge-btn-primary-text); }
.badge-btn-primary:hover { box-shadow: var(--badge-btn-primary-glow); }
.badge-btn-success { background: var(--badge-btn-success-bg); border-color: var(--badge-btn-success-border); color: var(--badge-btn-success-text); }
.badge-btn-success:hover { box-shadow: var(--badge-btn-success-glow); }
.badge-btn-info { background: var(--badge-btn-info-bg); border-color: var(--badge-btn-info-border); color: var(--badge-btn-info-text); }
.badge-btn-info:hover { box-shadow: var(--badge-btn-info-glow); }
.badge-btn-danger { background: var(--badge-btn-danger-bg); border-color: var(--badge-btn-danger-border); color: var(--badge-btn-danger-text); }
.badge-btn-danger:hover { box-shadow: var(--badge-btn-danger-glow); }
.badge-btn-warning { background: var(--badge-btn-warning-bg); border-color: var(--badge-btn-warning-border); color: var(--badge-btn-warning-text); }
.badge-btn-warning:hover { box-shadow: var(--badge-btn-warning-glow); }
.badge-btn-orange { background: var(--badge-btn-orange-bg); border-color: var(--badge-btn-orange-border); color: var(--badge-btn-orange-text); }
.badge-btn-orange:hover { box-shadow: var(--badge-btn-orange-glow); }
.badge-btn-pink { background: var(--badge-btn-pink-bg); border-color: var(--badge-btn-pink-border); color: var(--badge-btn-pink-text); }
.badge-btn-pink:hover { box-shadow: var(--badge-btn-pink-glow); }

/* ============= CAPACITY CELL (Print OS v4) ============= */
.capacity-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 700;
    border-radius: var(--radius-md, 0.5rem);
}
.capacity-cell.avail { background: rgba(34, 197, 94, 0.15); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.3); }
.capacity-cell.tight { background: rgba(234, 179, 8, 0.15); color: #eab308; border: 1px solid rgba(234, 179, 8, 0.3); }
.capacity-cell.full { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }
.capacity-cell.off { background: rgba(100, 116, 139, 0.15); color: #64748b; border: 1px solid rgba(100, 116, 139, 0.3); }

/* ============= STATUS DOT ============= */
.status-dot {
    display: inline-block;
    width: 0.5rem; height: 0.5rem;
    border-radius: 50%;
    background: var(--text-tertiary);
}
.status-dot.active { background: var(--color-success); }
.status-dot.pending { background: var(--color-warning); }
.status-dot.error { background: var(--color-danger); }
.status-dot.info { background: var(--color-info); }

/* ============= COLOR DOT ============= */
.color-dot {
    display: inline-block;
    width: 1.375rem; height: 1.375rem;
    border-radius: 50%;
    border: 2px solid var(--border-primary);
    cursor: pointer;
    transition: transform 0.2s ease;
}
.color-dot:hover { transform: scale(1.15); }
.color-dot.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* ============= TAG ============= */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--bg-hover);
    color: var(--text-secondary);
    border-radius: var(--radius-sm, 0.25rem);
}
.tag-accent { background: var(--bg-accent-subtle); color: var(--accent); }
.tag-removable { cursor: pointer; }
.tag-removable .tag-x { opacity: 0.5; margin-left: 0.125rem; font-size: 0.875em; }
.tag-removable:hover .tag-x { opacity: 1; }

/* ============= BADGE COUNTER ============= */
.badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem; height: 1.25rem;
    padding: 0 0.375rem;
    font-size: 0.625rem;
    font-weight: 700;
    background: var(--accent);
    color: #ffffff;
    border-radius: var(--radius-full);
}

/* ============= LIGHT THEME — solid fills ============= */
[data-theme="white-glass"] .badge { box-shadow: none; border: none; }
[data-theme="white-glass"] .badge-blue { background: #2563eb; color: #fff; }
[data-theme="white-glass"] .badge-green { background: #16a34a; color: #fff; }
[data-theme="white-glass"] .badge-red { background: #dc2626; color: #fff; }
[data-theme="white-glass"] .badge-yellow { background: #f59e0b; color: #fff; }
[data-theme="white-glass"] .badge-purple { background: #7c3aed; color: #fff; }
[data-theme="white-glass"] .badge-pink { background: #db2777; color: #fff; }
[data-theme="white-glass"] .capacity-cell.avail { background: rgba(22, 163, 74, 0.1); color: #15803d; }
[data-theme="white-glass"] .capacity-cell.tight { background: rgba(202, 138, 4, 0.1); color: #a16207; }
[data-theme="white-glass"] .capacity-cell.full { background: rgba(220, 38, 38, 0.1); color: #b91c1c; }

/* ============= RETRO THEME — flat badges ============= */
[data-theme="retro"] .badge {
    border-radius: 0 !important;
    box-shadow: none;
    border: 1px solid #808080;
}
[data-theme="retro"] .badge-blue { background: #000080; color: #fff; }
[data-theme="retro"] .badge-green { background: #008000; color: #fff; }
[data-theme="retro"] .badge-red { background: #800000; color: #fff; }
[data-theme="retro"] .badge-yellow { background: #808000; color: #fff; }
[data-theme="retro"] .badge-purple { background: #800080; color: #fff; }
[data-theme="retro"] .badge-pink { background: #800080; color: #fff; }
[data-theme="retro"] .badge-btn { border-radius: 0 !important; }
[data-theme="retro"] .badge-count { border-radius: 0 !important; }
[data-theme="retro"] .tag { border-radius: 0 !important; }
[data-theme="retro"] .capacity-cell { border-radius: 0 !important; }
[data-theme="retro"] .status-dot { border-radius: 0 !important; }

/* ============= HOMEBREW THEME — green monochrome badges ============= */
[data-theme="homebrew"] .badge {
    border-radius: 0 !important;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 255, 0, 0.2);
    color: #00ff00;
}
[data-theme="homebrew"] .badge-blue { border-color: rgba(0, 204, 0, 0.4); color: #00cc00; }
[data-theme="homebrew"] .badge-green { border-color: rgba(0, 255, 0, 0.4); color: #00ff00; }
[data-theme="homebrew"] .badge-red { border-color: rgba(255, 0, 0, 0.3); color: #ff4444; }
[data-theme="homebrew"] .badge-yellow { border-color: rgba(0, 204, 0, 0.3); color: #00cc00; }
[data-theme="homebrew"] .badge-purple { border-color: rgba(0, 255, 0, 0.3); color: #00ff00; }
[data-theme="homebrew"] .badge-pink { border-color: rgba(0, 170, 0, 0.3); color: #00aa00; }
[data-theme="homebrew"] .badge-btn { border-radius: 0 !important; }
[data-theme="homebrew"] .badge-count { border-radius: 0 !important; background: rgba(0, 255, 0, 0.2); color: #00ff00; }
[data-theme="homebrew"] .tag { border-radius: 0 !important; color: rgba(0, 255, 0, 0.6); }
[data-theme="homebrew"] .capacity-cell { border-radius: 0 !important; }

/* ============= SKEUOMORPHIC THEME — raised badge pills ============= */
[data-theme="skeuomorphic"] .badge {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.4);
    border: 1px solid rgba(0,0,0,0.06);
}