/* ============================================
   Tags & Status Indicators
   ============================================
   Status dots (ampel), role badges, state labels
   ============================================ */

/* ── Status dots (ampel) ── */
span.green {
    width: 10px;
    height: 10px;
    display: block;
    background: var(--pico-background-success);
    border-radius: 999px;
}

span.yellow {
    width: 10px;
    height: 10px;
    display: block;
    background: var(--pico-background-warning);
    border-radius: 999px;
}

span.red {
    width: 10px;
    height: 10px;
    display: block;
    background: var(--pico-background-error);
    border-radius: 999px;
}

span.grey {
    width: 10px;
    height: 10px;
    display: block;
    background: var(--hb-status-grey);
    border-radius: 999px;
}

/* ── System links ampel colors ── */
.system_links .red {
    color: var(--pico-background-error);
}

.system_links .yellow {
    color: var(--pico-background-warning);
}

.system_links .green {
    color: var(--pico-background-success);
}

/* ── Role badges ── */
span.role_span {
    background: var(--pico-mark-background-color);
    padding: 2px 8px;
    border-radius: 8px;
    display: inline-block;
    margin-right: 3px;
    font-size: var(--hb-font-size-sm);
}

span.role_span.role_1 {
    background: #416985;
    color: white;
}

span.role_span.role_2 {
    background: #418565;
    color: white;
}

span.role_span.role_3 {
    background: #854f41;
    color: white;
}

span.role_span.role_4 {
    background: #85416b;
    color: white;
}

span.role_span.role_5 {
    background: #554185;
    color: white;
}

span.role_span.role_6 {
    background: #196b32;
    color: white;
}

span.role_span.role_7 {
    background: #6b6a19;
    color: white;
}

span.role_span.role_8 {
    background: #414141;
    color: white;
}

span.role_span.role_9 {
    background: #4e1188;
    color: white;
}