/* Общий вид страниц кабинета SOBLAZN.
 *
 * 🔴 ЦВЕТА ВЗЯТЫ ИЗ ОКНА ПРОГРАММЫ (trenazher/okno.py, строки TEMNYY и
 * SVETLYY), а не подобраны заново: требование владельца 22.09.2026 —
 * интерфейс сайта ТАКОЙ ЖЕ, как интерфейс программы. Те же значения уже
 * стоят в странице разговора; здесь они вынесены в один файл, чтобы не
 * держать две копии (правило 19 свода против дублей).
 *
 * Тема запоминается в браузере под ключом `tema` — так же, как на странице
 * разговора, чтобы переключение не сбрасывалось при переходе между
 * страницами.
 */

/* ── Тёмная тема: TEMNYY из okno.py ──────────────────────────────────── */
:root {
  --fon: #1e1f26; --ramka: #33343d; --tekst: #e8e8ee;
  --tusklo: #9aa0b5; --tihiy: #8a8fa3;
  --pole: #262832; --pole-ramka: #383b47;
  --knopka: #2c2f3a; --knopka-ramka: #3a3d4a; --knopka-navod: #363a47;
  --glavnaya: #4a6fd4; --glavnaya-navod: #5680e8; --opasnaya: #7a3b3b;
  --rost: #5fd47a; --ploho: #e86a6a; --blizost: #7fa0ff;
  --nedostupno-tekst: #5a5d68; --nedostupno-fon: #23252c;
}

/* ── Светлая тема: SVETLYY из okno.py ────────────────────────────────── */
body.svetlaya {
  --fon: #f6f2ea; --ramka: #ded6c8; --tekst: #2c2b28;
  --tusklo: #6b6459; --tihiy: #6f685c;
  --pole: #fffdf8; --pole-ramka: #d9d0c0;
  --knopka: #ebe4d8; --knopka-ramka: #d5cbba; --knopka-navod: #e2d9c9;
  --glavnaya: #3f62c4; --glavnaya-navod: #3355b4; --opasnaya: #b96a6a;
  --rost: #3f8a4a; --ploho: #c05252;
  --nedostupno-tekst: #a9a294; --nedostupno-fon: #f0ebe1;
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--fon); color: var(--tekst);
  font: 14px/1.4 "Segoe UI", -apple-system, Roboto, sans-serif;
}

/* QGroupBox из окна: рамка с подписью, заходящей на неё сверху */
.gruppa {
  border: 1px solid var(--ramka); border-radius: 8px;
  padding: 16px 12px 12px; position: relative; margin-top: 8px;
}
.gruppa > .nazvanie {
  position: absolute; top: -9px; left: 12px; padding: 0 5px;
  background: var(--fon); color: var(--tusklo); font-weight: bold;
}

button {
  font: inherit; color: var(--tekst); background: var(--knopka);
  border: 1px solid var(--knopka-ramka); border-radius: 6px;
  padding: 9px 16px; cursor: pointer;
}
button:hover:not(:disabled) { background: var(--knopka-navod); }
button:disabled { color: var(--nedostupno-tekst);
                  background: var(--nedostupno-fon); cursor: default; }
button.glavnaya { background: var(--glavnaya); border: none; color: #fff;
                  font-weight: bold; font-size: 15px; padding: 12px 20px; }
button.glavnaya:hover:not(:disabled) { background: var(--glavnaya-navod); }
/* 🔴 Недоступная главная кнопка должна выглядеть недоступной. Правило для
 * главной идёт ниже общего правила для недоступных и перекрывало его: кнопка
 * оставалась синей, хотя рядом было написано «сервис недоступен». Замечено
 * глазами на снимке кабинета 22.09.2026.
 *
 * Цвета те же, что в окне программы (okno.py, строка
 * «QPushButton:disabled { color: #5a5d68; background: #23252c; }»), они уже
 * заведены выше как --nedostupno-tekst и --nedostupno-fon. */
button.glavnaya:disabled { background: var(--nedostupno-fon);
                           color: var(--nedostupno-tekst); }
button.opasnaya { background: var(--opasnaya); border: none; color: #fff; }

input[type=text], input[type=email], input[type=password], input[type=number], select {
  font: inherit; color: var(--tekst); background: var(--pole);
  border: 1px solid var(--pole-ramka); border-radius: 6px;
  padding: 8px 10px; width: 100%;
}

a { color: var(--blizost); }
.tihiy { color: var(--tihiy); }
.tusklo { color: var(--tusklo); }

/* ── Страницы входа: узкая колонка посередине ────────────────────────── */
.uzkaya {
  max-width: 420px; margin: 0 auto; padding: 40px 16px 60px;
}
.uzkaya h1 { font-size: 22px; margin: 0 0 4px; }
.uzkaya .podzagolovok { color: var(--tusklo); margin: 0 0 24px; }
.pole { margin-bottom: 14px; }
.pole label { display: block; margin-bottom: 5px; color: var(--tusklo); }
.pole .poyasnenie { margin-top: 4px; font-size: 12px; color: var(--tihiy); }
.soglasie { display: flex; gap: 8px; align-items: flex-start;
            margin-bottom: 10px; font-size: 13px; color: var(--tusklo); }
.soglasie input { margin-top: 2px; flex: 0 0 auto; }
.uzkaya button.glavnaya { width: 100%; margin-top: 8px; }
.pod-formoy { margin-top: 18px; text-align: center; color: var(--tusklo); }

/* Сообщение об ошибке и о состоянии */
.oshibka {
  background: var(--opasnaya); color: #fff; border-radius: 6px;
  padding: 10px 12px; margin-bottom: 16px;
}
.soobshchenie {
  background: var(--pole); border: 1px solid var(--pole-ramka);
  border-radius: 6px; padding: 10px 12px; margin-bottom: 16px;
  color: var(--tusklo);
}

/* ── Верхняя полоса кабинета ─────────────────────────────────────────── */
.shapka {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--ramka);
}
.shapka .imya { font-weight: bold; }
.shapka .rastyanut { flex: 1; }
.shapka button { padding: 5px 12px; font-size: 13px; }

/* Полоса «смотрим глазами пользователя» — чтобы админ не забыл, где он */
.glazami {
  background: var(--opasnaya); color: #fff;
  padding: 8px 16px; text-align: center;
}
.glazami a { color: #fff; }

/* ── Кабинет ─────────────────────────────────────────────────────────── */
.kabinet { max-width: 900px; margin: 0 auto; padding: 20px 16px 60px; }
.ostatok { font-size: 30px; font-weight: bold; }
.ostatok.malo { color: var(--ploho); }
.ryad-knopok { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

table { border-collapse: collapse; width: 100%; margin-top: 8px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--ramka); }
th { color: var(--tusklo); font-weight: normal; font-size: 13px; }
td.chislo, th.chislo { text-align: right; }
tr:last-child td { border-bottom: none; }
.pusto { color: var(--tihiy); padding: 10px 0; }

/* Состояние сервиса: работает или нет */
.sostoyanie { display: flex; align-items: center; gap: 8px; }
.ogonek { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ogonek.zhiv { background: var(--rost); }
.ogonek.mertv { background: var(--ploho); }