/* Пульт pg-stand-sync. Литеральных цветов здесь нет: всё через переменные темы,
   иначе светлая тема рассыпается на первом же захардкоженном #hex. */

Screen {
    background: $background;
    color: $foreground;
}

#topbar {
    height: 2;
    padding: 0 1;
    background: $surface;
    color: $foreground;
}

#board {
    layout: horizontal;
    height: 1fr;
    min-height: 6;
}

#pane-db {
    width: 1fr;
}

#col-right {
    width: 1fr;
}

/* заголовок панели красится в цвет рамки, а $panel тусклый: без явного
   border-title-color подписи невыделенных плиток тонут в фоне */
.panel, #plan, #log {
    border-title-color: $foreground;
    border-title-style: bold;
    border-subtitle-color: $text-muted;
}

.panel {
    border: round $panel;
    background: $surface;
    padding: 0 1;
}

.panel:focus-within {
    border: round $primary;
    border-title-color: $primary;
}

.panel > Input {
    border: none;
    height: 1;
    padding: 0;
    background: $surface;
}

.panel > OptionList {
    height: 1fr;
    background: $surface;
    border: none;
    padding: 0;
    scrollbar-size-vertical: 1;
}

#pane-dump {
    height: 1fr;
}

#bottom {
    height: 20;
    max-height: 60%;
    min-height: 6;
}

#plan {
    width: 36;
    border: round $panel;
    background: $surface;
    padding: 0 1;
}

#log {
    width: 1fr;
    border: round $panel;
    background: $surface;
    padding: 0 1;
    scrollbar-size-vertical: 1;
}

#status {
    height: 1;
    padding: 0 1;
    background: $surface;
}

#op-spin {
    width: 2;
    color: $accent;
}

#op-title {
    width: 1fr;
    content-align: left middle;
}

#op-timer {
    width: 10;
    content-align: right middle;
    color: $text-muted;
}

#op-progress {
    width: 22;
}

/* Во время операции списки заперты: менять выбор посреди restore нечего */
.locked {
    opacity: 0.55;
}

.panel.locked {
    border: round $panel;
}

.pane-error {
    border: round $error;
}

#db-error, #dump-note {
    height: auto;
    padding: 0 1;
    color: $text-error;
    display: none;
}

#db-error.shown, #dump-note.shown {
    display: block;
}

/* --------------------------------------------------------------- модалки */

ModalScreen {
    align: center middle;
    background: $background 60%;
}

.dialog {
    width: 72;
    height: auto;
    max-height: 80%;
    border: round $primary;
    background: $surface;
    padding: 1 2;
    opacity: 1;
    transition: opacity 140ms;
}

.dialog > .title {
    text-style: bold;
    color: $text-primary;
    padding-bottom: 1;
}

.dialog > .subject {
    padding-bottom: 1;
}

.dialog Input {
    margin-bottom: 1;
}

.danger {
    background: $error 25%;
    color: $text-error;
    border-left: thick $error;
    padding: 0 1;
    margin-bottom: 1;
    height: auto;
}

.danger.hidden {
    display: none;
}

.row {
    height: auto;
    align-horizontal: right;
}

.row > Button {
    margin-left: 2;
}

.switch-row {
    height: auto;
    margin-bottom: 1;
}

.switch-row > Label {
    padding: 1 1 0 1;
}

#help-body {
    height: auto;
}

/* Узкое окно: пульт складывается в колонку, обзорность теряется, но ничего не режется */
.narrow #board {
    layout: vertical;
    height: 1fr;
}

.narrow #pane-db {
    width: 1fr;
    height: 1fr;
    min-height: 5;
}

.narrow #col-right {
    width: 1fr;
    height: 12;
}

.narrow.short #col-right {
    height: 7;
}

.narrow #bottom {
    layout: vertical;
}

.narrow #plan {
    width: 1fr;
    height: 35%;
    min-height: 3;
}

/* высота фиксирована, форма забирает остаток: иначе длинная форма выдавливала
   ряд кнопок за нижнюю границу диалога, и «Начать» становилось не видно */
.op-dialog {
    height: 90%;
    max-height: 22;
    min-height: 12;
}

.dialog > .form {
    height: 1fr;
    padding: 0;
}

.check-row, .field {
    height: auto;
    width: 1fr;
}

.check-row > Checkbox {
    margin-right: 2;
}

.dialog .form Label.inline, .dialog .field Label.inline {
    padding: 0 1 0 0;
    height: 1;
}

.dialog .form Input, .dialog .field Input {
    width: 1fr;
    height: 1;
    border: none;
    background: $boost;
    margin: 0 1 0 0;
}

.dialog .form Input.num, .dialog .field Input.num {
    width: 6;
}

.dialog .form Input:focus {
    background: $panel;
}

.dialog .section {
    text-style: bold;
    color: $text-primary;
    padding-top: 1;
}

.dialog Collapsible {
    border: none;
    padding: 0;
    margin-bottom: 1;
}

.dialog #target-block {
    height: auto;
}

.dialog #target-block.hidden {
    display: none;
}

.dialog .form Label {
    color: $text-muted;
}

.dialog Collapsible > CollapsibleTitle {
    color: $text-primary;
}

.row > Button {
    min-width: 14;
}

/* журнал во весь экран: на низком окне списки и лог не помещаются вместе */
.zoom-log #board {
    display: none;
}

.zoom-log #bottom {
    height: 1fr !important;
    max-height: 100% !important;
}

/* низкое окно: фиксированные 20 строк снизу не оставляют места спискам */
.short #bottom {
    height: 35%;
    min-height: 5;
}

.short #plan {
    width: 28;
}

.zoom-log.narrow #plan {
    height: 25%;
    min-height: 3;
}