/* Подсветка строк с невалидным email (ExcelGrid RowClass) */
.eg-row-error {
    background-color: rgba(244, 67, 54, 0.08) !important;
}

.eg-row-error:hover {
    background-color: rgba(244, 67, 54, 0.12) !important;
}

/* Корень страницы /mailing: точную высоту до низа окна задаёт JS
   (mailingCommon.fitViewport.attach с fullBleed=true): страница фиксируется
   в области от контейнера хоста до края окна; padding 16px — гуттеры. */
.mailing-page-root {
    height: calc(100vh - 64px);
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

@supports (height: 1dvh) {
    .mailing-page-root {
        height: calc(100dvh - 64px);
    }
}

/* ==================== Десктопная раскладка: история | письмо | получатели ==================== */

.mailing-desktop {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.mailing-history-wrap {
    flex: 0 0 260px;
    min-width: 0;
    overflow: hidden;
    border-right: 2px solid var(--mud-palette-divider);
}

.mailing-editor-wrap {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.mailing-recipients-wrap {
    flex: 0 0 42%;
    min-width: 0;
    overflow: hidden;
    border-left: 2px solid var(--mud-palette-divider);
}

/* ==================== Перетаскиваемые сплиттеры ==================== */

.mailing-splitter {
    flex: 0 0 6px;
    cursor: col-resize;
    background: transparent;
    position: relative;
    z-index: 2;
}

.mailing-splitter:hover,
.mailing-splitter:active {
    background: var(--mud-palette-primary-lighten);
}

body.mailing-col-resizing,
body.mailing-col-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* ==================== Свернутая вертикальная панель (рейка) ==================== */

.mailing-rail {
    flex: 0 0 38px;
    width: 38px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    background: var(--mud-palette-background-default);
    border-right: 2px solid var(--mud-palette-divider);
    user-select: none;
}

.mailing-rail-right {
    border-right: none;
    border-left: 2px solid var(--mud-palette-divider);
}

.mailing-rail:hover {
    background: var(--mud-palette-action-default-hover);
}

/* Вертикальная надпись: читается сверху вниз */
.mailing-rail-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* ==================== История ==================== */

/* Номер батча в элементе истории */
.mailing-history-batchnum {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    flex: none;
}

/* Подсветка найденного при поиске */
mark.mailing-mark {
    background: rgba(255, 213, 79, 0.55);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* Строка «где найдено» в элементе истории */
.mailing-history-match {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}

/* ==================== Мобильная раскладка (вкладки) ==================== */

.mailing-mobile-tabs {
    height: 100%;
}

/* Панели вкладок должны занимать ровно остаток высоты окна:
   по умолчанию .mud-tabs-panels как flex-элемент имеет min-height:auto
   и растягивается по содержимому вместо сжатия до остатка контейнера. */
.mailing-mobile-tabs > .mud-tabs-panels {
    min-height: 0;
    overflow: hidden;
    flex: 1 1 auto;
}

/* Контент вкладки — ограниченная высота, иначе height:100% внутренних панелей
   (грид получателей на flex) схлопывается в ноль и грид не виден. */
.mailing-mobile-tabs .mud-tab-panel {
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* ==================== Диалог шаблона ==================== */

/* Контент диалога шаблона: прокручивается, редактор можно растянуть по высоте */
.mailing-template-dialog-content {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* ==================== Страница шаблонов: категории | шаблоны ==================== */

.mailing-templates-page {
    display: flex;
    height: calc(100vh - 96px);
    overflow: hidden;
}

.mailing-templates-cats {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 2px solid var(--mud-palette-divider);
}

.mailing-cats-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 8px;
}

.mailing-cat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    user-select: none;
    color: var(--mud-palette-text-primary);
}

.mailing-cat-item:hover {
    background: var(--mud-palette-action-default-hover);
}

.mailing-cat-item-active {
    background: var(--mud-palette-primary-hover);
    font-weight: 600;
}

.mailing-cat-count {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.mailing-templates-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mailing-templates-grid-wrap {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    padding: 0 8px 8px;
}