/* ==========================================================================
   DynamicTabs (вкладки заявок) на телефонах (< 600px)
     строка 1: «История заявок» (слева) · «Закрыть все» (справа)
     строка 2: вкладки-«таблетки», прокрутка свайпом
   Правила намеренно не зависят от глубины вложенности блока .dynamic-tabs-header.
   Подключается после style.css и переопределяет его прежнее правило (< 500px).
   ========================================================================== */
@media (max-width: 599px) {
    .mud-tabs-tabbar-inner:has(.dynamic-tabs-header) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 0;
        padding-bottom: 6px;
    }

    /* Строка 1: блок с кнопками всегда первый и на всю ширину */
    .mud-tabs-tabbar-inner > :has(.dynamic-tabs-header) {
        order: -1 !important;
        flex: 1 0 100% !important;
        min-width: 0;
    }

    .mud-tabs-tabbar-inner .dynamic-tabs-header {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        margin: 0 !important;
        padding: 10px 12px 6px;
        box-sizing: border-box;
        width: 100%;
    }

    .mud-tabs-tabbar-inner .dynamic-tabs-header .mud-button-root {
        min-width: 0;
        border-radius: 999px;
        text-transform: none;
        letter-spacing: 0;
        font-weight: 500;
        font-size: .8125rem;
        padding: 4px 12px;
        white-space: nowrap;
    }

    /* «История заявок» — мягкая плашка цвета темы */
    .mud-tabs-tabbar-inner .dynamic-tabs-header .mud-button-text-primary {
        background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    }

    /* «Закрыть все» — вторичная, без заливки */
    .mud-tabs-tabbar-inner .dynamic-tabs-header .mud-button-text-default {
        color: var(--mud-palette-text-secondary);
    }

    /* Строка 2: вкладки на всю ширину с нативной прокруткой пальцем (свайп).
       Собственную прокрутку MudBlazor (стрелки + сдвиг обёртки через JS) отключаем:
       она меряет ширины вкладок и при изменённых отступах зацикливалась —
       вкладки «ездили» и строка мигала. */
    .mud-tabs-tabbar-inner > .mud-tabs-scroll-button {
        display: none !important;
    }

    .mud-tabs-tabbar-inner > .mud-tabs-tabbar-content {
        order: 0 !important;
        flex: 1 1 100% !important;
        min-width: 0;
        overflow-x: auto !important;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mud-tabs-tabbar-inner > .mud-tabs-tabbar-content::-webkit-scrollbar {
        display: none;
    }

    .mud-tabs-tabbar-inner > .mud-tabs-tabbar-content .mud-tabs-tabbar-wrapper {
        transform: none !important;
        transition: none !important;
        padding: 0 8px;
    }

    /* Вкладки-«таблетки» */
    .mud-tabs-tabbar-inner:has(.dynamic-tabs-header) .mud-tab {
        flex: 0 0 auto;
        width: auto;
        min-width: auto;
        max-width: none;
        min-height: 36px;
        margin: 2px 4px;
        padding: 4px 6px 4px 14px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 999px;
        font-size: .75rem;
        font-weight: 500;
        letter-spacing: .02em;
        white-space: nowrap;
        opacity: 1;
        color: var(--mud-palette-text-secondary);
        transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    }

    .mud-tabs-tabbar-inner:has(.dynamic-tabs-header) .mud-tab.mud-tab-active {
        color: var(--mud-palette-primary);
        border-color: var(--mud-palette-primary);
        background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    }

    /* Подчёркивание активной вкладки не нужно — активная видна по заливке */
    .mud-tabs-tabbar-inner:has(.dynamic-tabs-header) .mud-tab-slider {
        display: none !important;
    }

    /* Крестик закрытия: компактный, но с нормальной зоной нажатия */
    /* (общее правило телефонов задаёт .mud-icon-button min 44px — здесь сбрасываем) */
    .mud-tabs-tabbar-inner:has(.dynamic-tabs-header) .mud-tab .mud-icon-button {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        padding: 4px;
        margin-left: 2px;
    }

    .mud-tabs-tabbar-inner:has(.dynamic-tabs-header) .mud-tab .mud-icon-button .mud-icon-root {
        font-size: 1.1rem;
    }
}