/*
 * Визуальный редактор тела объявления (AnnouncementDialog).
 *
 * Стили ГЛОБАЛЬНЫЕ, а не scoped (.razor.css) намеренно: содержимое .ann-editor создаёт браузер
 * (contenteditable) и наш JS, поэтому Blazor не проставит туда свой scope-атрибут (b-xxxxx) и
 * scoped-правила до <b>/<ul>/<a> внутри просто не долетят.
 *
 * Цвета — через переменные MudBlazor, чтобы редактор жил с тёмной и светлой темой админки. Это НЕ
 * превью: превью рисуется отдельно, в песочнице, красками мобильной карточки.
 */

.ann-editor {
    min-height: 240px;
    max-height: 420px;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    overflow-wrap: break-word; /* длинная ссылка не должна растягивать диалог */
}

.ann-editor:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

/* Плейсхолдер: :empty срабатывает, пока админ не начал печатать (innerHTML === ''). */
.ann-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--mud-palette-text-disabled);
    pointer-events: none;
}

.ann-editor p {
    margin: 0 0 .75em;
}

.ann-editor p:last-child {
    margin-bottom: 0;
}

/* h3 — единственный уровень заголовка, который даёт панель (h1/h2 перекрикивают заголовок карточки). */
.ann-editor h3 {
    font-size: 1.17em;
    font-weight: 700;
    margin: .6em 0 .4em;
}

.ann-editor ul,
.ann-editor ol {
    margin: 0 0 .75em;
    padding-left: 28px;
}

.ann-editor a {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.ann-editor code {
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--mud-palette-background-gray);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: break-word;
}

.ann-editor hr {
    margin: .8em 0;
    border: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Панель кнопок: не даём ей уезжать при узком диалоге. */
.ann-toolbar {
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px 4px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-bottom: 0;
    border-radius: var(--mud-default-borderradius) var(--mud-default-borderradius) 0 0;
    background: var(--mud-palette-background-gray);
}

/* Панель и поле — единый блок. */
.ann-toolbar + .ann-editor {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Превью «как на телефоне» — фон вокруг карточки. */
.ann-preview {
    width: 100%;
    height: 460px;
    border: 0;
    border-radius: 8px;
    background: #0B1220;
}