/* Редактор текста — split-view 50/50, кнопка снизу. v3 */

/* Те же TTF, что использует серверный GD-рендер. Без них canvas measureText
   считает по системному fallback → wrap, размер и позиция текста расходятся
   с финальным результатом. */
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/ttf/Inter-Variable.ttf') format('truetype-variations');
    font-weight: 100 900; font-style: normal; font-display: block;
}
@font-face {
    font-family: 'Manrope';
    src: url('/assets/fonts/ttf/Manrope-Variable.ttf') format('truetype-variations');
    font-weight: 200 800; font-style: normal; font-display: block;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/ttf/Montserrat-Variable.ttf') format('truetype-variations');
    font-weight: 100 900; font-style: normal; font-display: block;
}
@font-face {
    font-family: 'Roboto';
    src: url('/assets/fonts/ttf/Roboto-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
    font-family: 'Roboto';
    src: url('/assets/fonts/ttf/Roboto-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: block;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('/assets/fonts/ttf/PlayfairDisplay-Variable.ttf') format('truetype-variations');
    font-weight: 400 900; font-style: normal; font-display: block;
}
@font-face {
    font-family: 'Lora';
    src: url('/assets/fonts/ttf/Lora-Variable.ttf') format('truetype-variations');
    font-weight: 400 700; font-style: normal; font-display: block;
}
@font-face {
    font-family: 'Bitter';
    src: url('/assets/fonts/ttf/Bitter-Variable.ttf') format('truetype-variations');
    font-weight: 100 900; font-style: normal; font-display: block;
}
@font-face {
    font-family: 'Merriweather';
    src: url('/assets/fonts/ttf/Merriweather-Variable.ttf') format('truetype-variations');
    font-weight: 300 900; font-style: normal; font-display: block;
}
@font-face {
    font-family: 'Oswald';
    src: url('/assets/fonts/ttf/Oswald-Variable.ttf') format('truetype-variations');
    font-weight: 200 700; font-style: normal; font-display: block;
}
@font-face {
    font-family: 'Rubik';
    src: url('/assets/fonts/ttf/Rubik-Variable.ttf') format('truetype-variations');
    font-weight: 300 900; font-style: normal; font-display: block;
}

.dr-editor-root {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
    padding-bottom: 100px;
}
.dr-editor-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.dr-editor-head h3 { font-size: 1.2rem; }

/* Иконки внутри align-кнопок (Bootstrap btn-group) центрируем — без этого они
   рисуются по baseline и съезжают вверх. */
.dr-editor-section .btn,
.dbe-prop-row .btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1; min-height: 32px; }

.dr-editor-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
    gap: 1rem;
    align-items: start;
}

.dr-editor-sidebar {
    /* min-width: 0 критично — без этого CSS grid даёт колонке размер контента */
    min-width: 0;
    background: var(--bg-card, var(--bg-card));
    border: 1px solid var(--border-color, var(--border-color));
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.dr-editor-section { display: flex; flex-direction: column; gap: .35rem; }
.dr-editor-section .form-label { font-size: .85rem; margin: 0; font-weight: 500; }
.dr-editor-flags { flex-direction: row; gap: 1.25rem; flex-wrap: wrap; }
.dr-editor-flags .form-check { margin: 0; }

.dr-editor-color-row { display: flex; gap: .5rem; }
.dr-editor-color-row select { flex: 1; min-width: 0; }
.dr-editor-color-row input[type="color"] { width: 50px; flex-shrink: 0; padding: 2px; }

.dr-editor-canvas-wrap {
    /* min-width: 0 критично для grid с canvas */
    min-width: 0;
    background: var(--bg-card, var(--bg-card));
    border: 1px solid var(--border-color, var(--border-color));
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    position: relative;
    overflow: hidden;
}
#dre-canvas {
    max-width: 100%;
    max-height: calc(100vh - 240px);
    cursor: grab;
    border: 1px solid var(--border-color, var(--border-color));
    background: #000;
    /* для canvas с заданными атрибутами width/height — обязательно */
    height: auto;
    display: block;
}
#dre-canvas.dragging { cursor: grabbing; }

.dr-editor-loader {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: .5rem;
    border-radius: 12px;
    z-index: 5;
    color: #fff;
}

.dr-editor-bottom {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--bg-dark, var(--bg-dark));
    border-top: 1px solid var(--border-color, var(--border-color));
    padding: .9rem 1.5rem;
    display: flex;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(8px);
}
.dr-editor-bottom .btn {
    min-width: 240px;
    padding: .6rem 1.6rem;
    font-size: 1rem;
}

@media (max-width: 760px) {
    .dr-editor-grid { grid-template-columns: 1fr; }
    .dr-editor-sidebar { max-height: none; }
    #dre-canvas { max-height: 60vh; }
}