/*
  Дашборд DGRP. Палитра под «Небеса»: небо и золото восемнадцатой ленты.
  Продукт клиентский, поэтому ни брендинга Wexeros, ни внешних шрифтов —
  сервер клиента может не иметь выхода к сторонним хранилищам, а в рамке
  Битрикса системный шрифт выглядит роднее.
*/
:root {
  --небо-900: #0d2a46;
  --небо-700: #17548c;
  --небо-500: #2f80ed;
  --небо-300: #8fc0f7;
  --небо-100: #e8f2fe;

  --золото: #d9a326;
  --золото-фон: #fdf4e0;
  --успех: #1f9254;
  --успех-фон: #e8f6ee;
  --забота: #c2670f;
  --забота-фон: #fdf0e2;
  --тревога: #c0392b;

  --серый-0: #ffffff;
  --серый-50: #f6f8fa;
  --серый-100: #eceff3;
  --серый-200: #dde2e9;
  --серый-400: #9aa4b2;
  --серый-600: #5b6675;
  --серый-800: #2a3340;

  --фон: var(--серый-50);
  --карточка: var(--серый-0);
  --текст: var(--серый-800);
  --текст-тихий: var(--серый-600);
  --граница: var(--серый-200);

  --шаг: 4px;
  --радиус: 12px;
  --радиус-мелкий: 8px;
  --тень: 0 1px 2px rgba(13, 42, 70, .06), 0 8px 24px rgba(13, 42, 70, .06);
  --тень-липкая: 0 -2px 12px rgba(13, 42, 70, .08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --фон: #10161f;
    --карточка: #171f2b;
    --текст: #e7ecf3;
    --текст-тихий: #9aa7b8;
    --граница: #26303f;
    --серый-50: #141b25;
    --серый-100: #1c2531;
    --небо-100: #17293f;
    --успех-фон: #14291e;
    --забота-фон: #2a1f12;
    --золото-фон: #2a2313;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--текст);
  background: var(--фон);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
button, input, select { font: inherit; color: inherit; }

/* ── каркас ──────────────────────────────────────────────────────────── */

.каркас { display: flex; min-height: 100vh; }

.меню {
  width: 264px; flex: none; padding: 20px 12px;
  background: var(--карточка); border-right: 1px solid var(--граница);
  display: flex; flex-direction: column; gap: 18px;
}
.меню__шапка { padding: 0 8px 4px; }
.меню__кто { font-size: 13px; color: var(--текст-тихий); margin-top: 2px; }
.меню__раздел-имя {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--текст-тихий); padding: 0 8px 6px;
}
.меню__пункт {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 11px 12px; border-radius: var(--радиус-мелкий); cursor: pointer;
  min-height: 44px; color: var(--текст);
}
.меню__пункт:hover { background: var(--серый-100); }
.меню__пункт[aria-current="true"] { background: var(--небо-100); color: var(--небо-700); font-weight: 600; }
.меню__пункт:focus-visible { outline: 2px solid var(--небо-500); outline-offset: 2px; }
.меню__подпись { display: block; font-size: 12px; color: var(--текст-тихий); font-weight: 400; }
.меню__низ { margin-top: auto; padding: 0 8px; }

.холст { flex: 1; min-width: 0; padding: 20px 24px 96px; }
.шапка {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.шапка__пусто { flex: 1; }

/* ── общие элементы ──────────────────────────────────────────────────── */

.кнопка {
  min-height: 44px; padding: 10px 16px; border-radius: var(--радиус-мелкий);
  border: 1px solid var(--граница); background: var(--карточка); cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.кнопка:hover { background: var(--серый-100); }
.кнопка:active { transform: translateY(1px); }
.кнопка:focus-visible { outline: 2px solid var(--небо-500); outline-offset: 2px; }
.кнопка--главная { background: var(--небо-500); border-color: var(--небо-500); color: #fff; font-weight: 600; }
.кнопка--главная:hover { background: var(--небо-700); }
.кнопка[disabled] { opacity: .5; cursor: default; }

.поле {
  min-height: 44px; padding: 9px 12px; border-radius: var(--радиус-мелкий);
  border: 1px solid var(--граница); background: var(--карточка);
}

.карточка {
  background: var(--карточка); border: 1px solid var(--граница);
  border-radius: var(--радиус); box-shadow: var(--тень); overflow: hidden;
}

.плитки { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.плитка {
  background: var(--карточка); border: 1px solid var(--граница);
  border-radius: var(--радиус); padding: 12px 16px; min-width: 132px;
}
.плитка__число { font-size: 26px; font-weight: 680; line-height: 1.1; }
.плитка__имя { font-size: 13px; color: var(--текст-тихий); }

.сообщение {
  padding: 14px 16px; border-radius: var(--радиус); border: 1px solid var(--граница);
  background: var(--карточка); color: var(--текст-тихий);
}
.сообщение--беда { border-color: var(--тревога); color: var(--тревога); background: var(--карточка); }
.сообщение--устарело { border-color: var(--забота); color: var(--забота); background: var(--забота-фон); }

/* ── занятие и дети ──────────────────────────────────────────────────── */

.занятие { margin-bottom: 14px; }
.занятие__шапка {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--серый-100); border-bottom: 1px solid var(--граница);
}
.занятие__время { font-weight: 680; font-variant-numeric: tabular-nums; }
.занятие__счёт { margin-left: auto; font-size: 13px; color: var(--текст-тихий); }

.ребёнок {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--граница);
}
.ребёнок:last-child { border-bottom: 0; }
.ребёнок--готово { background: var(--успех-фон); }
.ребёнок--золото .лента { background: var(--золото-фон); border-color: var(--золото); color: var(--золото); }

.лента {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 19px;
  background: var(--небо-100); border: 2px solid var(--небо-300); color: var(--небо-700);
  font-variant-numeric: tabular-nums;
}
.лента__всего { font-size: 10px; font-weight: 500; opacity: .75; display: block; margin-top: -4px; }

.ребёнок__имя { font-weight: 600; }
.ребёнок__что { font-size: 13px; color: var(--текст-тихий); }
.ребёнок__метка {
  display: inline-block; margin-top: 2px; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; background: var(--забота-фон); color: var(--забота);
}
.ребёнок__метка--золото { background: var(--золото-фон); color: var(--золото); }
.ребёнок__тело { flex: 1; min-width: 0; }

/* Переключатель «повесил» — главное действие в зале, поэтому крупный. */
.отметка {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 8px 14px; cursor: pointer;
  border-radius: 999px; border: 2px solid var(--граница); background: var(--карточка);
  font-size: 14px; font-weight: 600; color: var(--текст-тихий);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.отметка[aria-pressed="true"] {
  background: var(--успех); border-color: var(--успех); color: #fff;
}
.отметка:focus-visible { outline: 2px solid var(--небо-500); outline-offset: 2px; }
.отметка[disabled] { opacity: .6; cursor: wait; }
.отметка__птица { font-size: 17px; line-height: 1; }

/* ── таблица набора данных ───────────────────────────────────────────── */

.таблица-обёртка { overflow-x: auto; }
table.таблица { width: 100%; border-collapse: collapse; font-size: 14px; }
table.таблица th, table.таблица td {
  padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--граница); white-space: nowrap;
}
table.таблица th { background: var(--серый-100); font-weight: 600; position: sticky; top: 0; }

/* ── экраны входа ────────────────────────────────────────────────────── */

.середина {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
}
.середина .карточка { max-width: 460px; padding: 28px; text-align: center; }
.середина p { color: var(--текст-тихий); }

/* ── телефон ─────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .каркас { flex-direction: column; }
  .меню {
    width: auto; flex-direction: row; overflow-x: auto; gap: 8px;
    padding: 10px; border-right: 0; border-bottom: 1px solid var(--граница);
    position: sticky; top: 0; z-index: 5;
  }
  .меню__шапка, .меню__раздел-имя, .меню__подпись, .меню__низ { display: none; }
  .меню__пункт { white-space: nowrap; width: auto; }
  .холст { padding: 14px 12px 90px; }
  .ребёнок { gap: 10px; padding: 12px 12px; }
  .лента { width: 46px; height: 46px; font-size: 17px; }
  .плитка { flex: 1 1 42%; min-width: 0; }
}

.скрыто { display: none !important; }