/* ===================================================
   GROUP BADGES - STUDENT GROUP INFO DISPLAY
   ===================================================
   Used across analytics tables and student lists to display group membership.
*/

:root {
    /* Group color palette - deterministic colors for groups 0-7 */
    --group-color-0-bg: #e3f2fd;
    --group-color-0-text: #1976d2;
    --group-color-1-bg: #e8f5e9;
    --group-color-1-text: #2e7d32;
    --group-color-2-bg: #fff3e0;
    --group-color-2-text: #ef6c00;
    --group-color-3-bg: #f3e5f5;
    --group-color-3-text: #6a1b9a;
    --group-color-4-bg: #e1f5fe;
    --group-color-4-text: #0277bd;
    --group-color-5-bg: #fce4ec;
    --group-color-5-text: #ad1457;
    --group-color-6-bg: #ede7f6;
    --group-color-6-text: #5e35b1;
    --group-color-7-bg: #f1f8e9;
    --group-color-7-text: #558b2f;
}

.group-info {
    font-size: var(--text-sm);
}

.group-info.has-group {
    background-color: var(--group-color-0-bg);
    color: var(--group-color-0-text);
    padding: 2px 8px;
    border-radius: var(--radius-xl);
    font-weight: var(--font-medium);
}

.group-info.no-group {
    color: var(--color-muted);
    font-style: italic;
}

/* Deterministic per-group colors (override base has-group colors).
   Targeted at .group-badge so class badges (class-info group-badge) get
   their per-class color too. */
.group-badge.has-group.group-color-0 { background-color: var(--group-color-0-bg); color: var(--group-color-0-text); }
.group-badge.has-group.group-color-1 { background-color: var(--group-color-1-bg); color: var(--group-color-1-text); }
.group-badge.has-group.group-color-2 { background-color: var(--group-color-2-bg); color: var(--group-color-2-text); }
.group-badge.has-group.group-color-3 { background-color: var(--group-color-3-bg); color: var(--group-color-3-text); }
.group-badge.has-group.group-color-4 { background-color: var(--group-color-4-bg); color: var(--group-color-4-text); }
.group-badge.has-group.group-color-5 { background-color: var(--group-color-5-bg); color: var(--group-color-5-text); }
.group-badge.has-group.group-color-6 { background-color: var(--group-color-6-bg); color: var(--group-color-6-text); }
.group-badge.has-group.group-color-7 { background-color: var(--group-color-7-bg); color: var(--group-color-7-text); }

/* Dark mode group color overrides */
[data-bs-theme="dark"] {
    --group-color-0-bg: #1a2d44;
    --group-color-0-text: #90caf9;
    --group-color-1-bg: #1a3a2a;
    --group-color-1-text: #81c784;
    --group-color-2-bg: #3a2a14;
    --group-color-2-text: #ffb74d;
    --group-color-3-bg: #2d1a3a;
    --group-color-3-text: #ce93d8;
    --group-color-4-bg: #142d3a;
    --group-color-4-text: #4fc3f7;
    --group-color-5-bg: #3a1a24;
    --group-color-5-text: #f48fb1;
    --group-color-6-bg: #251a3a;
    --group-color-6-text: #b39ddb;
    --group-color-7-bg: #243a1a;
    --group-color-7-text: #aed581;
}