/* ============================================================
   Onesown Blazor Components – Tabs
   Abhängigkeit: main.css
   ============================================================ */

/* ── Rahmen ── */
.oo-tabs {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ── Kopfleiste ── */
.oo-tabs__header {
    min-width: 0;
}

/* Die Linie unter den Laschen setzt sich aus Stücken zusammen: Unterkante der inaktiven Tabs, Abstandsstück nach
   jedem Tab und Füllstück bis zum rechten Rand. Nur der aktive Tab hat keine Unterkante und öffnet sich so zum Inhalt –
   ohne eigenen Hintergrund, damit Tabs auf jeder Fläche transparent bleiben. Die Liste scrollt bei schmaler Breite. */
.oo-tabs__list {
    display: flex;
    align-items: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.oo-tabs__list::after {
    content: "";
    flex: 1 0 0;
    align-self: stretch;
    border-bottom: var(--oo-border-width) solid var(--oo-color-border-strong);
}

.oo-tabs__list::-webkit-scrollbar {
    display: none;
}

/* ── Tab-Element ── */
.oo-tabs__tab {
    display: flex;
    align-items: flex-end;
    align-self: stretch;
}

/* Abstandsstück zwischen den Tabs, trägt die Linie weiter */
.oo-tabs__tab::after {
    content: "";
    width: var(--oo-space-1);
    align-self: stretch;
    border-bottom: var(--oo-border-width) solid var(--oo-color-border-strong);
}

/* Ausgegraut über die Schriftfarbe statt opacity – sonst würde auch das Linienstück unter dem Tab blasser. */
.oo-tabs__tab--disabled .oo-tabs__button,
.oo-tabs__tab--disabled .oo-tabs__icon {
    color: var(--oo-color-text-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Tab-Button ── */
.oo-tabs__button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: transparent;
    border: var(--oo-border-width) solid var(--oo-color-border-strong);
    border-radius: var(--oo-radius-md) var(--oo-radius-md) 0 0;
    color: var(--oo-color-text-subtle);
    cursor: pointer;
    font-size: var(--oo-font-size-md);
    padding: var(--oo-space-2) var(--oo-space-4);
    position: relative;
    transition: box-shadow var(--oo-transition), color var(--oo-transition);
    white-space: nowrap;
}

/* Hover ohne Hintergrundwechsel: dunklere Schrift und eine neutrale Linie oben, die beim aktiven Tab primärfarben ist. */
.oo-tabs__button:hover:not(:disabled) {
    box-shadow: inset 0 2px 0 var(--oo-color-border-strong);
    color: var(--oo-color-text);
}

.oo-tabs__button:hover:not(:disabled) .oo-tabs__icon {
    color: var(--oo-color-text);
}

/* ── Aktiver Tab ── */
/* Ohne Unterkante geht der aktive Tab nahtlos in den Inhalt über. Die Akzentlinie oben markiert ihn zusätzlich. */
.oo-tabs__button--active,
.oo-tabs__button--active:hover:not(:disabled) {
    border-bottom-color: transparent;
    box-shadow: inset 0 2px 0 var(--oo-primary);
    color: var(--oo-primary);
    font-weight: 600;
}

.oo-tabs__button--active .oo-tabs__icon {
    color: var(--oo-primary);
}

/* ── Icon ── */
.oo-tabs__icon {
    font-size: 1.1rem;
    color: var(--oo-color-text-subtle);
    transition: color var(--oo-transition);
    user-select: none;
}

/* ── Inhalt ── */
/* Oben schließt die Linie der Laschenleiste ab, deshalb hier kein oberer Rand. */
.oo-tabs__content {
    min-height: 2rem;
    border: var(--oo-border-width) solid var(--oo-color-border-strong);
    border-top: none;
    border-radius: 0 0 var(--oo-radius-md) var(--oo-radius-md);
    padding: var(--oo-space-4);
}