/* design_system/badges.css — Badge variants */

/* Badges — radius aligned with inputs/controls, not pill-shaped */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.2rem 0.5rem;
    font-size: var(--text-caption);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border-radius: var(--radius-input);
    border: 1px solid transparent;
    vertical-align: middle;
}
.badge-green {
    background: var(--green-soft);
    color: var(--green);
    border-color: var(--green-border);
}
.badge-amber {
    background: var(--amber-soft);
    color: var(--amber);
    border-color: var(--amber-border);
}
.badge-red {
    background: var(--red-soft);
    color: var(--red);
    border-color: var(--red-border);
}
.badge-slate {
    background: var(--slate-soft);
    color: var(--slate);
    border-color: var(--slate-border);
}
.badge-blue {
    background: var(--blue-soft);
    color: var(--blue);
    border-color: var(--blue-border);
}
.badge-gray {
    background: var(--slate-soft);
    color: var(--slate);
    border-color: var(--slate-border);
}

/* Colored status select — badge trigger + badge-colored options */
.colored-select {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    vertical-align: middle;
}
.colored-select__trigger {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    line-height: 1;
}
.colored-select__trigger:disabled {
    cursor: wait;
    opacity: 0.7;
}
.colored-select__badge {
    pointer-events: none;
}
.colored-select__trigger:hover .colored-select__badge {
    filter: brightness(0.97);
}
.colored-select__trigger:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-input);
}
.colored-select__panel {
    position: absolute;
    z-index: 60;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: max(100%, 11rem);
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    box-shadow: 0 8px 24px rgba(32, 33, 36, 0.12);
}
/* Floating copy while open — escapes overflow:hidden ancestors (tables). */
.colored-select__panel--floating {
    position: fixed;
    z-index: 1200;
    top: auto;
    left: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.colored-select__option {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0.35rem 0.4rem;
    border: 0;
    border-radius: calc(var(--radius-input) - 0.125rem);
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.colored-select__option:hover,
.colored-select__option:focus-visible {
    background: var(--color-bg-alt);
    outline: none;
}
.colored-select__option:disabled {
    cursor: wait;
    opacity: 0.7;
}

/* Selected option: soft tint of that status badge color (not accent blue) */
.colored-select__option--green.is-selected {
    background: var(--green-soft);
}
.colored-select__option--amber.is-selected {
    background: var(--amber-soft);
}
.colored-select__option--red.is-selected {
    background: var(--red-soft);
}
.colored-select__option--blue.is-selected {
    background: var(--blue-soft);
}
.colored-select__option--slate.is-selected,
.colored-select__option--gray.is-selected {
    background: var(--slate-soft);
}

.colored-select__option--green.is-selected:hover,
.colored-select__option--green.is-selected:focus-visible {
    background: color-mix(in srgb, var(--green) 18%, var(--color-bg-alt));
}
.colored-select__option--amber.is-selected:hover,
.colored-select__option--amber.is-selected:focus-visible {
    background: color-mix(in srgb, var(--amber) 18%, var(--color-bg-alt));
}
.colored-select__option--red.is-selected:hover,
.colored-select__option--red.is-selected:focus-visible {
    background: color-mix(in srgb, var(--red) 18%, var(--color-bg-alt));
}
.colored-select__option--blue.is-selected:hover,
.colored-select__option--blue.is-selected:focus-visible {
    background: color-mix(in srgb, var(--blue) 18%, var(--color-bg-alt));
}
.colored-select__option--slate.is-selected:hover,
.colored-select__option--slate.is-selected:focus-visible,
.colored-select__option--gray.is-selected:hover,
.colored-select__option--gray.is-selected:focus-visible {
    background: color-mix(in srgb, var(--slate) 18%, var(--color-bg-alt));
}