/* ============================================================
   Цветовые темы через CSS-переменные.
   :root = тёмная тема (значения по умолчанию).
   Светлая — либо по явному выбору (:root[data-theme="light"]),
   либо по системной, если юзер не выбирал (prefers-color-scheme).
   ПРАВИЛО: hex-цвета в разметке не хардкодить, только var(--…).
   ============================================================ */
:root {
    /* Поверхности */
    --bg:              #2b3138;   /* фон страницы */
    --surface:         #333843;   /* панели, шапка, попапы, zag-строки */
    --surface-2:       #464f5a;   /* поля ввода, вторичные кнопки */
    --surface-2-hover: #555e69;
    --row-even:        #383f48;
    --row-odd:         #2f353d;
    --border:          #2b3138;   /* границы ячеек таблиц (в тёмной теме = фон) */
    --border-2:        #464f5a;   /* границы попапов/полей */

    /* Текст */
    --text:        #4db6bc;   /* основной текст (в тёмной теме совпадает с акцентом) */
    --text-muted:  #b4b5b6;   /* ссылки, вторичный текст */
    --text-dim:    #6a7078;   /* третичный/подсказки */
    --text-bright: #eeeeee;   /* текст в полях ввода */
    --text-strong: #ffffff;   /* самый яркий текст на поверхности */

    /* Акценты */
    --accent:       #4db6bc;
    --accent-hover: #5cc7cd;
    --on-accent:    #ffffff;   /* текст на кнопках акцентного цвета */
    --danger:       #b64d4d;
    --danger-hover: #c75c5c;
    --ok:           #5cb85c;
    --warn:         #e6a04d;
}

:root[data-theme="light"] {
    --bg:              #f4f5f7;
    --surface:         #ffffff;
    --surface-2:       #e7e9ee;
    --surface-2-hover: #dadde4;
    --row-even:        #eef0f3;
    --row-odd:         #f7f8fa;
    --border:          #e2e4e9;
    --border-2:        #d5d8df;

    --text:        #2b3138;
    --text-muted:  #5a6270;
    --text-dim:    #8a909a;
    --text-bright: #1f2430;
    --text-strong: #000000;

    --accent:       #2e9ba1;
    --accent-hover: #38aeb4;
    --on-accent:    #ffffff;
    --danger:       #c0392b;
    --danger-hover: #d0483a;
    --ok:           #3d9140;
    --warn:         #b9791b;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg:              #f4f5f7;
        --surface:         #ffffff;
        --surface-2:       #e7e9ee;
        --surface-2-hover: #dadde4;
        --row-even:        #eef0f3;
        --row-odd:         #f7f8fa;
        --border:          #e2e4e9;
        --border-2:        #d5d8df;

        --text:        #2b3138;
        --text-muted:  #5a6270;
        --text-dim:    #8a909a;
        --text-bright: #1f2430;
        --text-strong: #000000;

        --accent:       #2e9ba1;
        --accent-hover: #38aeb4;
        --on-accent:    #ffffff;
        --danger:       #c0392b;
        --danger-hover: #d0483a;
        --ok:           #3d9140;
        --warn:         #b9791b;
    }
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: sans-serif;
    margin: 0;
}
h1, h2, h3, h4, p {
    background: transparent;
    color: var(--accent);
}
h2, h3 { padding: 6px 12px; }

A          { color: var(--text-muted); text-decoration: none; }
A:visited  { color: var(--text-muted); }
A:active   { color: var(--text-muted); }
A:hover    { color: var(--accent); }

/* ============ Формы ============ */
form input[type=text],
form input[type=url],
form input[type=email],
form input[type=password],
form input[type=number] {
    background: var(--surface-2);
    color: var(--text-bright);
    border: 1px solid var(--surface-2);
    border-radius: 5px;
    padding: 4px 8px;
}
form input[type=submit] {
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent);
    border-radius: 5px;
    padding: 4px 12px;
    cursor: pointer;
}
form input[type=submit]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

select, form select {
    background: var(--accent);
    color: var(--on-accent);
    border: 1px solid var(--accent);
    border-radius: 5px;
    padding: 3px 6px;
}
form textarea, textarea {
    background: var(--surface-2);
    color: var(--text-bright);
    border: 1px solid var(--surface-2);
    border-radius: 5px;
    padding: 4px 8px;
}
/* Поля формы одинаковой ширины у input и textarea — через класс, не через size/cols */
.field { width: 400px; box-sizing: border-box; }

/* ============ Таблицы ============ */
TR.even   { background: var(--row-even); color: var(--accent); }
TR.noeven { background: var(--row-odd);  color: var(--accent); }
TR.zag    { background: var(--surface);  color: var(--text-muted); font-size: large; font-weight: bold; }

.datalist        { border-collapse: collapse; }
.datalist td     { padding: 4px 10px; border-bottom: 1px solid var(--border); height: 22px; box-sizing: border-box; }
.datalist tr.zag td { font-weight: bold; }

/* ============ Верхнее меню / sidebar ============ */
#gormenutbl {
    background: var(--surface);
    border-bottom: 1px solid var(--bg);
}
#gormenutd    { padding-right: 12px; }
#gormenuul td { padding: 0 6px; }
#gormenuul a  { color: var(--text-muted); padding: 6px 12px; border-radius: 4px; display: inline-block; }
#gormenuul a:hover  { color: var(--accent); }
#gormenuul a.active { color: var(--accent); background: var(--bg); }
/* Разделы в верхнем меню — только иконка, подпись в title.
   Иконки из icons/*.svg тащат инлайновый margin-right для соседства с текстом — здесь он лишний. */
#gormenuul a.navico     { padding: 7px 9px; display: inline-flex; align-items: center; }
#gormenuul a.navico svg { margin: 0 !important; width: 20px; height: 20px; }
#tdname       { color: var(--text-muted); padding-right: 12px; }
#tdexit a     { color: var(--text-muted); }
#tdexit a:hover { color: var(--accent); }

.greyblock0 { padding: 8px 12px; }
.greyblock1 {
    background: var(--surface);
    border-radius: 6px;
    padding: 8px 12px;
}
.greyblock1 h3 { margin: 4px 0; font-size: 15px; }
.greyblock1 h4 { margin: 2px 0; font-size: 14px; font-weight: normal; }

#mainblock    { padding: 10px 20px; }
#mainblockdiv { min-height: 200px; }

/* ============ Кнопки ============ */
.btn { display: inline-block; padding: 6px 14px; border-radius: 5px; cursor: pointer; text-decoration: none; }
.btn-primary   { background: var(--accent); color: var(--on-accent) !important; border: 1px solid var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger    { background: var(--danger); color: var(--on-accent) !important; border: 1px solid var(--danger); }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
.btn-secondary { background: var(--surface-2); color: var(--text-muted) !important; border: 1px solid var(--surface-2); }
.btn-secondary:hover { background: var(--surface-2-hover); border-color: var(--surface-2-hover); color: var(--on-accent) !important; }
.btn:disabled, button.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background: inherit; }
.btn.busy { opacity: 0.7; pointer-events: none; cursor: wait; }
.btn-lg { padding: 8px 16px; font-size: 15px; }
.btn-block { display: block; width: 100%; box-sizing: border-box; }
/* Кнопка с одной иконкой (без текста) — убираем правый отступ у SVG */
.btn-icon      { padding: 4px 8px; }
.btn-icon svg  { margin-right: 0 !important; display: block; }

/* Сегментированный переключатель — кнопки без промежутка */
.seg { display: inline-flex; }
.seg .btn { border-radius: 0; padding: 4px 12px; }
.seg .btn:first-child { border-radius: 5px 0 0 5px; }
.seg .btn:last-child  { border-radius: 0 5px 5px 0; }

/* action-bar — все элементы на одной линии по центру */
.action-bar      { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.action-bar form { margin: 0; }

/* Двухколоночная раскладка: форма слева, список справа. При узком окне колонки перескакивают. */
.two-col      { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.two-col-left { flex: 0 0 auto; }
.two-col-main { flex: 1 1 auto; min-width: 400px; }

/* Спиннер для «идёт долгая операция» — вращающееся кольцо в цвете кнопки */
.spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%; vertical-align: middle;
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ Логин ============ */
body.text-center { text-align: center; }
.form-signin {
    display: inline-block;
    width: 100%;
    max-width: 340px;
    padding: 30px 20px;
    margin-top: 80px;
    background: var(--surface);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    text-align: left;
}
.form-signin h1 {
    text-align: center;
    font-size: 18px;
    color: var(--accent);
    margin-bottom: 20px;
}
.form-control {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 8px 10px;
    background: var(--surface-2) !important;
    color: var(--text-bright) !important;
    border: 1px solid var(--surface-2) !important;
    border-radius: 5px;
    font-size: 14px;
}

/* Flash-уведомление: фиксировано в правом нижнем углу, контент не сдвигает. */
.flash-toast {
    position: fixed;
    bottom: 16px;
    right: 16px;
    padding: 5px 12px;
    background: var(--surface);
    color: var(--accent);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    z-index: 1000;
    transition: opacity 0.5s;
}
.flash-toast.fade-out { opacity: 0; pointer-events: none; }
.flash-toast.err { color: var(--danger-hover); border-left-color: var(--danger-hover); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.text-muted { color: var(--text-dim); text-align: center; font-size: 12px; }
.hint  { color: var(--text-dim); font-size: 12px; }
.mt-5 { margin-top: 24px; }
.mb-3 { margin-bottom: 12px; }