/* Shared tab appearance. Panels retain the surface of their containing page/card. */
.mud-tabs { min-width: 0; max-width: 100%; }
.mud-tabs > .mud-tabs-panels { min-width: 0; }
.mud-tabs > .mud-tabs-tabbar {
    background: transparent;
    color: var(--cc-muted);
    box-shadow: none;
    border-radius: 0;
    border-bottom: 1px solid var(--cc-line);
}
.mud-tabs .mud-tab {
    min-height: 48px;
    color: var(--cc-muted);
    background: transparent;
    font-weight: 600;
    text-transform: none;
}
.mud-tabs .mud-tab.mud-tab-active { color: var(--cc-green); background: transparent; }
.mud-tabs .mud-tab:not(.mud-disabled):hover { color: var(--cc-green); background: var(--cc-accent-soft); }
.mud-tabs .mud-tab:focus-visible { outline: 2px solid var(--cc-green); outline-offset: -3px; }
.mud-tabs .mud-tab-slider { background: var(--cc-green); }
.mud-tabs .mud-tab-slider.mud-tab-slider-horizontal { height: 3px; }
.mud-tabs .mud-tab.mud-disabled { color: var(--mud-palette-action-disabled); background: transparent; }
.mud-tabs .mud-tabs-scroll-button { background: transparent; color: var(--cc-muted); }
.workspace-tab-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 0; color: inherit; text-decoration: none; line-height: inherit; }
.organizer-workspace-tabs > .mud-tabs-tabbar .mud-tab { min-height: 48px; padding: .75rem 1rem; line-height: 1.25; font-size: .875rem; }
.organizer-workspace-tabs > .mud-tabs-tabbar .mud-tab .mud-icon-root { width: 20px; height: 20px; font-size: 20px; }
.organizer-workspace-tabs > .mud-tabs-panels { padding-top: 1rem; }
.workspace-tab-link:focus-visible { outline: 2px solid var(--cc-green); outline-offset: 2px; }
.workspace-tab-link small { font-size: .7rem; }

/* Tabs which navigate to another URL remain links, with the same visual states. */
:is(.organizer-editor-tabs, .admin-section-tabs) {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 0;
    background: transparent;
    border-bottom: 1px solid var(--cc-line);
}
:is(.organizer-editor-tabs, .admin-section-tabs) > :is(a, span) {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 48px;
    padding: .75rem 1rem;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--cc-muted);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
}
:is(.organizer-editor-tabs, .admin-section-tabs) > a:is(.active, [aria-current='page']) { color: var(--cc-green); border-bottom-color: var(--cc-green); }
:is(.organizer-editor-tabs, .admin-section-tabs) > a:hover { color: var(--cc-green); background: var(--cc-accent-soft); }
:is(.organizer-editor-tabs, .admin-section-tabs) > :focus-visible { outline: 2px solid var(--cc-green); outline-offset: -3px; }
:is(.organizer-editor-tabs, .admin-section-tabs) > [aria-disabled='true'] { color: var(--mud-palette-action-disabled); }

.settings-tabs { margin: 1rem 0 1.5rem; }
.settings-tabs > .mud-tabs-panels { padding-top: 1.25rem; }
@media (max-width: 600px) {
    .settings-tabs > .mud-tabs-tabbar .mud-tabs-tabbar-wrapper { width: 100%; }
    .settings-tabs > .mud-tabs-tabbar .mud-tabs-tabbar-wrapper > .mud-tooltip-root { flex: 1; min-width: 0; }
    .settings-tabs > .mud-tabs-tabbar .mud-tab { padding-inline: .5rem; font-size: .8rem; letter-spacing: 0; white-space: normal; line-height: 1.25; }
    .organizer-workspace-tabs > .mud-tabs-tabbar .mud-tab { padding-inline: .75rem; font-size: .8rem; }
    .organizer-workspace-tabs > .mud-tabs-tabbar .mud-tab-icon-text { display: none; }
    :is(.organizer-editor-tabs, .admin-section-tabs) > :is(a, span) { padding-inline: .75rem; font-size: .8rem; white-space: normal; }
}