/* Unified status pill badge used in entity grids (Kunde, Produkt, Zeiterfassung, Dokument).
   Visually matches the active state of .ef-status-filter-btn so that grid cells
   and filter bar read 1:1 (layout, colour, text). */

.ef-status-badge {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    border: 1px solid transparent;
    border-radius: var(--ef-radius-md);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--ef-text-light);
    min-width: 4rem;
    text-align: center;
}

.ef-status-badge--green {
    background-color: var(--ef-status-green);
    border-color: var(--ef-status-green);
}

.ef-status-badge--yellow {
    background-color: var(--ef-status-yellow);
    border-color: var(--ef-status-yellow);
    color: var(--ef-primary-darker);
}

.ef-status-badge--orange {
    background-color: var(--ef-warning);
    border-color: var(--ef-warning);
}

.ef-status-badge--red {
    background-color: var(--ef-error);
    border-color: var(--ef-error);
}

.ef-status-badge--archiv {
    background-color: var(--ef-status-archiv-surface);
    border-color: var(--ef-status-archiv);
    color: var(--ef-status-archiv);
}

.ef-status-badge--deleted {
    background-color: var(--ef-status-default);
}

.ef-status-badge--default {
    background-color: var(--ef-status-default);
    opacity: 0.6;
}

.ef-status-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* ── Customer type badge (Privat / Firma / Lieferant) ───────── */

.ef-typ-badge {
    display: inline-block;
    padding: 0.2em 0.65em;
    border-radius: var(--ef-radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
    text-align: center;
}

.ef-typ-badge--privat {
    background-color: var(--ef-badge-privat-bg);
    border: none;
    color: var(--ef-badge-privat-fg);
}

.ef-typ-badge--firma {
    background-color: var(--ef-badge-firma-bg);
    border: none;
    color: var(--ef-badge-firma-fg);
}

.ef-typ-badge--lieferant {
    background-color: var(--ef-badge-lieferant-bg);
    border: none;
    color: var(--ef-badge-lieferant-fg);
}

/* ── Unified status filter bar (used in Kunden, Produkte, Zeiterfassung, Dokumente) ── */

.ef-status-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

/* ── Status filter group — pills grouped in a single bordered container ── */

.ef-status-filter-group {
    display: inline-flex;
    border: none;
    border-radius: 0.5rem;
    overflow: hidden;
    flex-shrink: 0;
}

/* Base pill */
.ef-status-filter-btn {
    background: color-mix(in srgb, var(--ef-primary) 15%, transparent);
    border: none;
    border-radius: 0;
    padding: 0.28rem 1rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ef-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease;
}

/* Inactive tint: light wash of each button's semantic color */
.ef-status-filter-btn--green     { background: color-mix(in srgb, var(--ef-status-green)       15%, transparent); }
.ef-status-filter-btn--yellow    { background: color-mix(in srgb, var(--ef-status-yellow)      15%, transparent); }
.ef-status-filter-btn--orange    { background: color-mix(in srgb, var(--ef-warning)            15%, transparent); }
.ef-status-filter-btn--red       { background: color-mix(in srgb, var(--ef-error)              15%, transparent); }
.ef-status-filter-btn--archiv    { background: color-mix(in srgb, var(--ef-status-archiv)      15%, transparent); }
.ef-status-filter-btn--privat    { background: color-mix(in srgb, var(--ef-badge-privat-bg)    15%, transparent); }
.ef-status-filter-btn--firma     { background: color-mix(in srgb, var(--ef-badge-firma-bg)     15%, transparent); }
.ef-status-filter-btn--lieferant { background: color-mix(in srgb, var(--ef-badge-lieferant-bg) 15%, transparent); }
.ef-filter--open                 { background: color-mix(in srgb, var(--ef-status-yellow)      15%, transparent); }
.ef-filter--invoiced             { background: color-mix(in srgb, var(--ef-status-green)       15%, transparent); }

/* Hover: full semantic color (same as active, no opacity) */
.ef-status-filter-btn:hover:not(.active)                    { background: var(--ef-primary);            color: var(--ef-text-light); }
.ef-status-filter-btn--green:hover:not(.active)             { background: var(--ef-status-green);       color: var(--ef-text-light); }
.ef-status-filter-btn--yellow:hover:not(.active)            { background: var(--ef-status-yellow);      color: var(--ef-primary-darker); }
.ef-status-filter-btn--orange:hover:not(.active)            { background: var(--ef-warning);            color: var(--ef-text-light); }
.ef-status-filter-btn--red:hover:not(.active)               { background: var(--ef-error);              color: var(--ef-text-light); }
.ef-status-filter-btn--archiv:hover:not(.active)            { background: var(--ef-status-archiv);      color: var(--ef-text-light); }
.ef-status-filter-btn--privat:hover:not(.active)            { background: var(--ef-badge-privat-bg);    color: var(--ef-badge-privat-fg); }
.ef-status-filter-btn--firma:hover:not(.active)             { background: var(--ef-badge-firma-bg);     color: var(--ef-badge-firma-fg); }
.ef-status-filter-btn--lieferant:hover:not(.active)         { background: var(--ef-badge-lieferant-bg); color: var(--ef-badge-lieferant-fg); }
.ef-filter--open:hover:not(.active)                         { background: var(--ef-status-yellow);      color: var(--ef-primary-darker); }
.ef-filter--invoiced:hover:not(.active)                     { background: var(--ef-status-green);       color: var(--ef-text-light); }

/* Active: full solid color per semantic meaning */
.ef-status-filter-btn.active               { background: var(--ef-primary);            color: var(--ef-text-light);        font-weight: 600; }
.ef-status-filter-btn--green.active        { background: var(--ef-status-green);       color: var(--ef-text-light);        font-weight: 600; }
.ef-status-filter-btn--yellow.active       { background: var(--ef-status-yellow);      color: var(--ef-primary-darker);    font-weight: 600; }
.ef-status-filter-btn--orange.active       { background: var(--ef-warning);            color: var(--ef-text-light);        font-weight: 600; }
.ef-status-filter-btn--red.active          { background: var(--ef-error);              color: var(--ef-text-light);        font-weight: 600; }
.ef-status-filter-btn--archiv.active       { background: var(--ef-status-archiv);      color: var(--ef-text-light);        font-weight: 600; }
.ef-status-filter-btn--privat.active       { background: var(--ef-badge-privat-bg);    color: var(--ef-badge-privat-fg);   font-weight: 600; }
.ef-status-filter-btn--firma.active        { background: var(--ef-badge-firma-bg);     color: var(--ef-badge-firma-fg);    font-weight: 600; }
.ef-status-filter-btn--lieferant.active    { background: var(--ef-badge-lieferant-bg); color: var(--ef-badge-lieferant-fg);font-weight: 600; }

/* Invoiced filter variants */
.ef-filter--open.active     { background: var(--ef-status-yellow); color: var(--ef-primary-darker); font-weight: 600; }
.ef-filter--invoiced.active { background: var(--ef-status-green);  color: var(--ef-text-light);     font-weight: 600; }

.ef-badge-invoiced {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: 3.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.3;
    text-decoration: none;
    background-color: var(--ef-status-green);
    color: var(--ef-text-light);
    transition: opacity 120ms ease;
}

.ef-badge-invoiced:hover {
    background-color: color-mix(in srgb, var(--ef-status-green) 82%, #000000);
    color: var(--ef-text-light);
    text-decoration: none;
}

.ef-badge-invoiced i {
    font-size: 0.8rem;
}

/* ── Invoiced filter buttons (Zeiterfassung) ──────────────────── */

.ef-invoiced-filter-bar {
    margin-left: 0.6rem;
}