/* ===========================
   Dashboard.css (MudBlazor)
   =========================== */

/* --- Общие утилиты --- */
.h-full {
    height: 100%;
}

.rounded-2xl {
    border-radius: 1rem;
}

/* Отступы между карточками в сетке */
.mud-grid > .mud-item {
    margin-bottom: 1.5rem;
}

/* --- Панель вкладок (Tabs) --- */
.mud-tabs--dashboard .mud-tabs-toolbar {
    /* Используем палитру MudBlazor */
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-contrast);
    border-radius: 1rem;
    padding-inline: .25rem;
    gap: .25rem;
}

/* Делаем всю площадь вкладки кликабельной */
.mud-tabs--dashboard .mud-tab {
    position: relative;
    border-radius: .75rem;
    padding: .5rem .75rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    /* слегка подсветим при фокусе/hover */
    transition: background-color .15s ease, color .15s ease;
}

    /* Если в вашей сборке клик обрабатывается дочерним элементом — 
   принудительно прокидываем клики на родителя .mud-tab */
    .mud-tabs--dashboard .mud-tab * {
        pointer-events: none;
    }

    .mud-tabs--dashboard .mud-tab:hover {
        background-color: rgba(255,255,255,.12);
    }

    .mud-tabs--dashboard .mud-tab.mud-tab-active {
        color: var(--mud-palette-primary-contrast);
        font-weight: 600;
        background-color: rgba(255,255,255,.18);
    }

    /* Текст вкладки и иконки выровнены */
    .mud-tabs--dashboard .mud-tab .mud-icon-root {
        font-size: 20px;
        line-height: 1;
    }

/* Компактный вид вкладок на узких экранах: только иконки */
@media (max-width: 640px) {
    .mud-tabs--dashboard .mud-tab .mud-tab-text {
        display: none;
    }

    .mud-tabs--dashboard .mud-tabs-toolbar {
        justify-content: space-between;
    }

    .mud-tabs--dashboard .mud-tab {
        min-width: 56px;
        justify-content: center;
        padding-inline: .5rem;
    }
}

/* --- Карточки --- */
.mud-card.h-full,
.rounded-2xl.h-full {
    height: 100%;
}

/* Заголовки карточек чуть компактнее на мобильных */
@media (max-width: 640px) {
    .mud-card .mud-card-header {
        padding: .5rem .75rem;
    }

    .mud-card .mud-card-content {
        padding: .75rem;
    }
}

/* --- Баннер подписки (липкий) --- */
.da-subscription-banner {
    position: sticky;
    top: 0;
    z-index: 20;
    border-radius: 1rem;
    border: 1px solid color-mix(in oklab, var(--mud-palette-primary) 20%, transparent);
    background: color-mix(in oklab, var(--mud-palette-primary) 10%, transparent);
    padding: .5rem .75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

/* --- «Ближайшие визиты сегодня» как мини-таблица --- */
/* Контейнер таблицы */
.appointments-mini-table {
    display: grid;
    grid-auto-rows: minmax(42px, auto);
    row-gap: .5rem;
}

    /* Заголовок-строка */
    .appointments-mini-table .mini-header {
        display: grid;
        grid-template-columns: 1fr 160px 96px; /* ФИО | Телефон | Время */
        column-gap: .5rem;
        font-size: .85rem;
        opacity: .7;
        padding: .25rem .25rem .25rem .5rem;
    }

    /* Строка данных */
    .appointments-mini-table .mini-row {
        display: grid;
        grid-template-columns: 1fr 160px 96px;
        align-items: center;
        column-gap: .5rem;
    }

    /* Чипы в ячейках (все данные — MudChip) */
    .appointments-mini-table .mini-cell .mud-chip,
    .appointments-mini-table .mini-cell.mud-chip {
        /* На случай, если вы кладёте сам MudChip или класс на обёртку */
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: 0 .5rem;
        height: 32px;
        border-radius: 999px;
        max-width: 100%;
    }

        .appointments-mini-table .mini-cell .mud-chip .mud-chip-content {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    /* Имя растягивается, телефон и время — фикс ширины */
    .appointments-mini-table .mini-cell--name {
        min-width: 0; /* для ellipsis */
    }

    .appointments-mini-table .mini-cell--phone,
    .appointments-mini-table .mini-cell--time {
        justify-self: end;
    }

    /* Ховер-эффект для строки */
    .appointments-mini-table .mini-row:hover {
        background-color: var(--mud-palette-action-hover, rgba(0,0,0,.04));
        border-radius: .75rem;
        padding: .25rem .25rem .25rem .5rem;
    }

/* Адаптивность мини-таблицы */
@media (max-width: 900px) {
    .appointments-mini-table .mini-header {
        grid-template-columns: 1fr 140px 84px;
    }

    .appointments-mini-table .mini-row {
        grid-template-columns: 1fr 140px 84px;
    }
}

@media (max-width: 640px) {
    /* На самом узком — остаёмся в 3 колонках, но даём перенос чипам */
    .appointments-mini-table .mini-row,
    .appointments-mini-table .mini-header {
        grid-template-columns: 1fr 120px 72px;
    }

    .appointments-mini-table .mini-cell .mud-chip .mud-chip-content {
        white-space: nowrap;
    }
}

/* Пустое состояние (когда нет записей) — рамка штриховая */
.appointments-empty {
    border: 1px dashed var(--mud-palette-lines-default, rgba(0,0,0,.12));
    border-radius: .75rem;
    text-align: center;
    padding: 1rem;
}

/* --- Списки платежей и элементы списков --- */
.mud-list .mud-list-item.rounded-xl {
    border-radius: .75rem;
}

    .mud-list .mud-list-item.rounded-xl:hover {
        background-color: var(--mud-palette-action-hover, rgba(0,0,0,.04));
    }

/* --- Плавающие кнопки на мобильных --- */
@media (max-width: 768px) {
    .da-fab {
        position: fixed;
        right: 1rem;
        bottom: 5.5rem;
        z-index: 30;
    }

    .da-fab-menu {
        position: fixed;
        right: 1rem;
        bottom: 1.5rem;
        z-index: 30;
    }
}

/* --- Текстовые утилиты --- */
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}