/* Клиенты клуба «Танден» — оформление.
   Красный #DA251D — фирменный цвет клуба. Состояния оплаты подсвечиваются
   заливкой строки и полосой слева, а не кружком: тишина = всё оплачено. */

/* Спрятанное должно быть спрятано. Без этого правила «display: grid» у страницы
   входа перебивал команду спрятать её, и программа открывалась под ней. */
[hidden] { display: none !important; }

:root {
  --accent: #DA251D;
  --accent-dark: #B81E17;
  --ink: #1D1A17;
  --ink-soft: #6B7078;
  --bg: #F4F5F6;
  --card: #FFFFFF;
  --line: #E2E5E8;
  --line-soft: #EEF0F2;

  --overdue-bg: #FDECEA;  --overdue-bar: #A81C16;  --overdue-ink: #8E1712;
  --soon-bg: #FEF6E7;     --soon-bar: #E8A33D;     --soon-ink: #8A5B12;
  --none-bg: #F2F3F4;     --none-bar: #A8AEB5;     --none-ink: #61686F;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(29,26,23,.06), 0 4px 14px rgba(29,26,23,.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body.has-bg::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--work-bg) center/cover no-repeat;
  opacity: .12; filter: saturate(.5);
}

h1, h2, h3 { margin: 0 0 .6em; font-weight: 700; line-height: 1.2; }
h1 { font-size: 22px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
a { color: var(--accent); }

/* ── Кнопки ─────────────────────────────────────────────────────────────── */

.btn {
  font: inherit; font-weight: 600;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); color: var(--ink);
  cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: #FAFAFB; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid rgba(218,37,29,.35); outline-offset: 2px; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn-quiet { border-color: transparent; background: transparent; color: var(--ink-soft); }
.btn-quiet:hover { background: rgba(29,26,23,.05); }

.btn-danger { border-color: #E6BDBA; color: var(--overdue-ink); }
.btn-danger:hover { background: var(--overdue-bg); }

.btn-small { min-height: 34px; padding: 0 11px; font-size: 14px; font-weight: 500; }
.btn-wide { width: 100%; }

input, select, textarea {
  font: inherit; color: var(--ink);
  min-height: 44px; padding: 8px 11px; width: 100%;
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(218,37,29,.13);
}
input.bad { border-color: var(--accent); background: #FFF8F8; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 12px; }
label > input, label > select, label > textarea { margin-top: 4px; font-weight: 400; color: var(--ink); }

/* ── Вход ───────────────────────────────────────────────────────────────── */

.login {
  min-height: 100dvh; display: grid; place-items: center; padding: 20px;
  background: var(--login-bg, linear-gradient(160deg, #FFF 0%, #F1F2F3 100%)) center/cover;
}
.login-box {
  width: min(380px, 100%); padding: 32px 28px 28px;
  background: var(--card); border-radius: 16px; box-shadow: var(--shadow);
  text-align: center;
}
.login-logo { width: 200px; max-width: 70%; height: auto; margin-bottom: 14px; }
.login-box h1 { font-size: 17px; color: var(--ink-soft); font-weight: 600; margin-bottom: 22px; }
.login-box label { text-align: left; }
.login-box .btn { margin-top: 6px; }
.error {
  background: var(--overdue-bg); color: var(--overdue-ink);
  padding: 9px 12px; border-radius: var(--radius); font-size: 14px; margin-bottom: 12px;
}

/* ── Шапка ──────────────────────────────────────────────────────────────── */

.head {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  padding: 10px max(16px, env(safe-area-inset-left)) 10px max(16px, env(safe-area-inset-right));
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--card); border-bottom: 1px solid var(--line);
}
.head-logo { height: 34px; width: auto; flex: none; }
.head-user { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }

.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  font: inherit; font-weight: 600; font-size: 15px;
  min-height: 40px; padding: 0 14px;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft);
  cursor: pointer; white-space: nowrap;
}
.tab:hover { background: rgba(29,26,23,.05); color: var(--ink); }
.tab[aria-current="page"] { background: var(--accent); color: #fff; }

.banner {
  margin: 12px 16px 0; padding: 11px 14px; border-radius: var(--radius);
  background: var(--soon-bg); border: 1px solid #F1DCB4; color: var(--soon-ink); font-size: 14px;
}

main { padding: 16px max(16px, env(safe-area-inset-left)) 40px max(16px, env(safe-area-inset-right)); }

/* ── Панель инструментов ────────────────────────────────────────────────── */

.bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.bar .grow { flex: 1 1 220px; min-width: 180px; }
.bar select { width: auto; min-width: 150px; }
.spacer { flex: 1 1 auto; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
  font: inherit; font-size: 14px; font-weight: 600;
  min-height: 34px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
}
.chip:hover { border-color: #C9CED3; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-overdue { background: var(--overdue-bg); border-color: #EFC9C6; color: var(--overdue-ink); }
.chip-overdue[aria-pressed="true"] { background: var(--overdue-bar); border-color: var(--overdue-bar); color: #fff; }
.chip-soon { background: var(--soon-bg); border-color: #F1DCB4; color: var(--soon-ink); }
.chip-soon[aria-pressed="true"] { background: var(--soon-bar); border-color: var(--soon-bar); color: #fff; }

.count { color: var(--ink-soft); font-size: 14px; }

/* ── Таблица клиентов ───────────────────────────────────────────────────── */

.card { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); overflow: clip; }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 13px; font-weight: 600; color: var(--ink-soft);
  padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
  background: var(--card); position: sticky; top: var(--head-h, 61px); z-index: 5;
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr { cursor: pointer; }
tbody tr:hover td { background: rgba(29,26,23,.025); }
tbody tr:last-child td { border-bottom: 0; }

/* Состояния оплаты: заливка строки + полоса слева. */
tr.st-ok td:first-child { box-shadow: inset 3px 0 0 transparent; }
tr.st-overdue td { background: var(--overdue-bg); }
tr.st-overdue:hover td { background: #FBE2DF; }
tr.st-overdue td:first-child { box-shadow: inset 4px 0 0 var(--overdue-bar); }
tr.st-soon td { background: var(--soon-bg); }
tr.st-soon:hover td { background: #FCEFD8; }
tr.st-soon td:first-child { box-shadow: inset 4px 0 0 var(--soon-bar); }
tr.st-none td { background: var(--none-bg); }
tr.st-none:hover td { background: #EBEDEF; }
tr.st-none td:first-child { box-shadow: inset 4px 0 0 var(--none-bar); }

.who { font-weight: 600; }
.sub { color: var(--ink-soft); font-size: 13px; }
.kind { font-size: 15px; margin-right: 7px; }

.tag {
  display: inline-block; font-size: 12.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.tag-overdue { background: var(--overdue-bar); color: #fff; }
.tag-soon { background: var(--soon-bar); color: #4A3106; }
.tag-none { background: var(--none-bar); color: #fff; }
.tag-ok { background: #EAF1EA; color: #3D6B45; }

.empty { padding: 56px 20px; text-align: center; color: var(--ink-soft); }
.empty b { display: block; font-size: 18px; color: var(--ink); margin-bottom: 6px; }

/* ── Окна ───────────────────────────────────────────────────────────────── */

.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(29,26,23,.42);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.modal {
  width: min(620px, 100%); background: var(--card);
  border-radius: 16px; box-shadow: 0 12px 40px rgba(29,26,23,.28);
  margin: auto;
}
.modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--card); border-radius: 16px 16px 0 0; z-index: 2;
}
.modal-head h2 { margin: 0; flex: 1; }
.modal-body { padding: 20px; }
.modal-foot {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--line);
  position: sticky; bottom: 0; background: var(--card); border-radius: 0 0 16px 16px;
}
/* Кнопок внизу анкеты много («Удалить» вылезала за край, её слова 30.08):
   если в строку не влезают — переносятся, а распорка не занимает целую строку. */
.modal-foot .spacer { flex: 1 1 0; min-width: 0; }
.modal-foot .btn { white-space: nowrap; }
.foot-group { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
/* Связка «В архив · Удалить» всегда у правого края — и в одну строку,
   и когда переносится на вторую. */
.foot-right { margin-left: auto; }

/* Точки посередине низа анкеты: под ними прячутся «История платежей»
   и «В архив», чтобы внизу осталось три кнопки (её слова 30.08). */
.foot-more { position: relative; margin: 0 auto; }
.foot-more .btn { font-size: 20px; line-height: 1; padding: 0 14px; letter-spacing: 2px; }
.foot-menu {
  position: absolute; bottom: calc(100% + 8px); right: 0;
  display: flex; flex-direction: column; min-width: 200px; padding: 6px; gap: 2px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(29,26,23,.18); z-index: 5;
}
.menu-item {
  border: 0; background: transparent; text-align: left; white-space: nowrap;
  padding: 10px 12px; border-radius: 8px; font: inherit; color: var(--ink); cursor: pointer;
}
.menu-item:hover { background: rgba(29,26,23,.06); }
.menu-danger { color: var(--overdue-ink); }
.close { font-size: 22px; line-height: 1; min-height: 36px; padding: 0 10px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid .full { grid-column: 1 / -1; }

fieldset {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 14px 2px; margin: 0 0 16px;
}
legend { font-size: 13px; font-weight: 700; color: var(--ink-soft); padding: 0 6px; }

.hidden-note {
  background: var(--none-bg); border: 1px dashed var(--line);
  border-radius: var(--radius); padding: 14px; text-align: center;
  color: var(--ink-soft); font-size: 14px; margin-bottom: 16px;
}

.seg { display: flex; gap: 8px; margin-bottom: 18px; }
.seg button {
  flex: 1; font: inherit; font-weight: 600; min-height: 46px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); color: var(--ink-soft); cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Пробное занятие бывает один раз: если оно уже было, кнопка гаснет (30.08). */
.seg button[disabled] { opacity: .4; cursor: not-allowed; }

/* ── Отметка занятия ────────────────────────────────────────────────────── */

.marks { display: flex; flex-direction: column; }
/* Строка списка — и в «Посещаемости» (div), и в «Уборке» (button).
   У кнопки браузер рисует свою рамку: она прямоугольная, а карточка со
   скруглениями — уголки торчали наружу. Гасим рамку и приводим кнопку
   к обычной строке (правка 1 от 30.08). */
.mark {
  display: flex; align-items: center; gap: 14px; text-align: left;
  width: 100%; font: inherit; color: inherit; appearance: none; -webkit-appearance: none;
  border: 0; border-bottom: 1px solid var(--line-soft);
  padding: 14px 16px;
  cursor: pointer; user-select: none; background: var(--card);
}
.mark:last-child { border-bottom: 0; }
.mark:hover { background: #FAFAFB; }
.mark-name { flex: 1; font-weight: 600; text-align: left; font-size: 16px; }
.mark-box {
  width: 32px; height: 32px; flex: none; border-radius: 8px;
  border: 2px solid var(--line); display: grid; place-items: center;
  font-size: 19px; color: transparent;
}
.mark[aria-pressed="true"] .mark-box { background: #2E7D46; border-color: #2E7D46; color: #fff; }
.mark[aria-pressed="true"] .mark-name { color: var(--ink); }

/* ── Списки групп и пользователей ───────────────────────────────────────── */

.row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--line-soft);
}
.row:last-child { border-bottom: 0; }
.row-main { flex: 1 1 220px; min-width: 0; }
.row-title { font-weight: 600; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.perm { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.perm:last-child { border-bottom: 0; }
.perm input { width: 22px; height: 22px; min-height: 0; flex: none; accent-color: var(--accent); }
.perm span { font-size: 15px; }
.perm.off span { color: var(--ink-soft); }


.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 90; padding: 12px 20px; border-radius: var(--radius);
  background: var(--ink); color: #fff; font-size: 14.5px; font-weight: 500;
  box-shadow: 0 6px 24px rgba(29,26,23,.3); max-width: 90vw;
}
.toast.bad { background: var(--overdue-bar); }

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

@media (max-width: 720px) {
  .head { flex-wrap: wrap; gap: 10px 12px; }
  .head-logo { height: 28px; }
  .tabs { order: 3; width: 100%; }
  .head-user { font-size: 13px; }
  /* Обычные таблицы на телефоне разворачиваются карточками: заголовки прячутся,
     а подпись каждого поля печатается над значением (её проставляет app.js). */
  table:not(.journal) th { display: none; }
  table:not(.journal), table:not(.journal) tbody,
  table:not(.journal) tr, table:not(.journal) td { display: block; width: 100%; }
  table:not(.journal) tbody tr { border-bottom: 1px solid var(--line); padding: 4px 0; }
  table:not(.journal) tbody tr:last-child { border-bottom: 0; }
  table:not(.journal) td { border: 0; padding: 3px 14px; }
  table:not(.journal) td:first-child { padding-top: 11px; }
  table:not(.journal) td:last-child { padding-bottom: 12px; }
  table:not(.journal) td.right { text-align: left; }
  table:not(.journal) td[data-label] { display: flex; gap: 10px; align-items: baseline; }
  table:not(.journal) td[data-label]::before {
    content: attr(data-label);
    flex: none; width: 92px;
    font-size: 12px; font-weight: 600; color: var(--ink-soft);
  }
  /* Журнал остаётся таблицей — иначе не видно, за какое число отметка.
     Листается вбок внутри своей обёртки .jwrap. */
  table.journal th.jname, table.journal td.jname { min-width: 128px; max-width: 128px; }
  table.journal th.jd, table.journal td.jc { min-width: 40px; }
  /* Графа оплаты на телефоне ужимается до самой метки — иначе на экран
     не влезает ни одного дня. Подробности видно на компьютере. */
  table.journal th.jpay-cell, table.journal td.jpay-cell { max-width: 92px; padding: 4px 6px; }
  table.journal td.jpay-cell div.sub { display: none; }  /* прячем «за месяц · платил…», сама метка остаётся */
  table.journal td.jpay-cell .tag { font-size: 11px; padding: 2px 7px; white-space: normal; }
  .jnav { margin-left: auto; }  tr.st-overdue td:first-child, tr.st-soon td:first-child, tr.st-none td:first-child { box-shadow: none; }
  tr.st-overdue { box-shadow: inset 4px 0 0 var(--overdue-bar); }
  tr.st-soon { box-shadow: inset 4px 0 0 var(--soon-bar); }
  tr.st-none { box-shadow: inset 4px 0 0 var(--none-bar); }
  .grid { grid-template-columns: 1fr; }
  .modal { border-radius: 14px; }
  .overlay { padding: 10px; }
}

/* Метка версии на странице входа: по ней сразу видно, свежая ли открыта программа. */
.login-version {
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  color: #9A938C;
}

/* Возраст рядом с датой рождения (правка 8) */
.age-hint:not(:empty) {
  display: inline-block; margin-top: 6px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--line-soft, #F1F0EE); color: var(--ink-soft);
  font-size: 13px; font-weight: 600;
}

/* ── Свои выпадающие списки (правка 2) ──────────────────────────────────────
   Настоящий <select> остаётся в разметке, но не виден: по нему работает
   остальной код. Поверх рисуется своя кнопка и свой список. */

.picker { position: relative; width: 100%; }
.picker > select {
  position: absolute; opacity: 0; pointer-events: none;
  width: 100%; height: 100%; left: 0; top: 0; margin: 0;
}
.picker-btn {
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  min-height: 44px; padding: 8px 34px 8px 11px; width: 100%;
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; align-items: center;
}
.picker-btn:hover:not(:disabled) { border-color: var(--ink-soft); }
.picker-btn:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(218,37,29,.13);
}
.picker-btn:disabled { color: var(--ink-soft); background: #F7F6F5; cursor: default; }
.picker-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-arrow {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); font-size: 12px; pointer-events: none;
}
/* Раскрытый список висит прямо в <body> и стоит поверх всего: карточек,
   шапки с вкладками и открытых окошек. Внутри карточки его резало —
   у .card стоит overflow: clip, на нём держатся скругления (правка 2
   от 30.08). Место списку на экране считает enhanceSelect(). */
.picker-list {
  position: fixed; z-index: 80;
  width: max-content; max-width: min(420px, 88vw);
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(29,26,23,.16);
  padding: 5px; max-height: 260px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.picker-item {
  min-height: 42px; display: flex; align-items: center; white-space: nowrap;
  padding: 8px 11px 8px 30px; border-radius: 9px;
  font-size: 15px; cursor: pointer; position: relative;
}
.picker-item:hover, .picker-item.here { background: var(--line-soft, #F3F2F1); }
.picker-item[aria-selected="true"] { font-weight: 600; }
.picker-item[aria-selected="true"]::before {
  content: '✓'; position: absolute; left: 10px; color: var(--accent); font-size: 13px;
}
.bar .picker { width: auto; min-width: 150px; }

/* ── Расписание группы: галочки дней и время «с — до» (правка 20) ────────── */
.sched-row {
  display: block; padding: 12px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.sched-row .days { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sched-row .day {
  margin: 0; cursor: pointer; user-select: none;
  min-height: 38px; min-width: 46px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ink-soft); background: var(--card);
}
.sched-row .day input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.sched-row .day.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.sched-time { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sched-time .sub { font-size: 13px; color: var(--ink-soft); }
.sched-time input[type=time] { width: 120px; flex: none; }
.sched-time .btn { margin-left: auto; }

/* ── Журнал посещаемости за месяц (правка 4) ─────────────────────────────── */
.jmonth { font-weight: 700; font-size: 15px; min-width: 130px; text-align: center; }
/* Стрелки месяцев и сам месяц держатся вместе и на узком экране не разрываются. */
.jnav { display: inline-flex; align-items: center; gap: 8px; }
.jwrap { overflow-x: auto; overflow-y: visible; }
table.journal { min-width: max-content; }
table.journal th, table.journal td { border-bottom: 1px solid var(--line-soft); }
table.journal th.jname, table.journal td.jname {
  position: sticky; left: 0; z-index: 4; background: var(--card);
  text-align: left; white-space: nowrap; font-weight: 600;
  padding: 8px 14px; box-shadow: 1px 0 0 var(--line);
}
/* Общее правило прилипающих заголовков для журнала не годится: он лежит
   в своей области прокрутки, и заголовки наезжали на первую строку. */
table.journal th { position: static; top: auto; }
table.journal th.jname, table.journal td.jname { position: sticky; left: 0; }
table.journal th.jd {
  padding: 6px 4px; min-width: 42px; text-align: center; vertical-align: bottom;
}
table.journal th.jd span { display: block; font-size: 15px; color: var(--ink); }
table.journal th.jd small { display: block; font-size: 11px; color: var(--ink-soft); font-weight: 500; }
table.journal th.jd.now { background: #FFF4E5; border-radius: 8px 8px 0 0; }
table.journal th.jd.future span, table.journal th.jd.future small { opacity: .45; }
table.journal td.jc { padding: 3px; text-align: center; }
table.journal td.jc.future { background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(29,26,23,.03) 5px, rgba(29,26,23,.03) 10px); }
.jbox {
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  border: 2px solid var(--line); background: var(--card);
  font-size: 15px; font-weight: 700; color: transparent; line-height: 1;
}
.jbox:hover:not(:disabled) { border-color: var(--ink-soft); }
.jbox.on { background: #2E7D46; border-color: #2E7D46; color: #fff; }
.jbox:disabled { cursor: default; opacity: .55; }
/* Окно «Посещаемость» одного человека: тот же вид, что в журнале, но только
   смотрим — галочки не кнопки, месяцы идут один под другим (её слова 30.08). */
span.jbox { display: inline-grid; place-items: center; cursor: default; }
.am-month { margin-bottom: 18px; }
.am-month .bar { margin-bottom: 6px; }
/* Отбор во вкладке «Запись» (её просьба 30.08). */
.sg-filter { padding: 12px 14px; margin-bottom: 14px; }
.sg-filter .bar { margin-bottom: 8px; }
.sg-filter .bar:last-child { margin-bottom: 0; }
table.journal th.jtot, table.journal td.jtot {
  padding: 8px 14px; white-space: nowrap; text-align: right; font-size: 14px;
}
table.journal tfoot td {
  font-size: 13px; color: var(--ink-soft); font-weight: 600;
  border-top: 2px solid var(--line); border-bottom: 0; padding-top: 8px;
}
table.journal tbody tr:hover td:not(.jname) { background: rgba(29,26,23,.02); }

/* ── Оплата и настройки (правки 6, 14, 16, 17, 18) ───────────────────────── */
.tab-gear { font-size: 19px; padding: 0 12px; }
.seg-parts { max-width: 560px; margin-bottom: 18px; }
td.right, th.right { text-align: right; }
.pay-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.pay-table th {
  position: static; top: auto;
  text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-soft);
  padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.pay-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.pay-table tr.sold-row td:first-child, .pay-table tr.sold-row td:nth-child(2) {
  text-decoration: line-through; color: var(--ink-soft);
}
.report-sum { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.report-sum .rs {
  flex: 1 1 140px; padding: 12px 14px; border-radius: 12px;
  background: var(--line-soft, #F3F2F1);
}
.report-sum .rs span { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 3px; }
.report-sum .rs b { font-size: 20px; }
.report-kinds { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); }
.stock-stats { margin-top: 14px; font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
.line { font-size: 14px; padding: 3px 0; }
/* Графа оплаты в журнале группы (правка 15) */
table.journal th.jpay-cell, table.journal td.jpay-cell {
  padding: 6px 12px; white-space: nowrap; text-align: left;
  border-right: 1px solid var(--line);
}
.jpay .sub { font-size: 11px; margin-top: 2px; }
.jpay .tag { font-size: 11px; }

/* ── Расписание: подбор и недельная сетка (правки 13, 13а) ───────────────── */
.sc-block { margin-bottom: 20px; }
.sc-days {
  font-weight: 700; font-size: 13px; letter-spacing: .03em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 2px;
}
.week-wrap { overflow-x: auto; padding-bottom: 6px; }
.week { display: flex; gap: 8px; min-width: max-content; position: relative; }
.week-hours { position: relative; width: 46px; flex: none; margin-top: 34px; }
.week-hours .wh {
  position: absolute; right: 4px; transform: translateY(-50%);
  font-size: 11px; color: var(--ink-soft);
}
.week-col { flex: 1 1 150px; min-width: 150px; }
.week-day {
  height: 30px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  color: var(--ink-soft); letter-spacing: .03em;
}
.week-body {
  position: relative; border-left: 1px solid var(--line);
  background: var(--card); border-radius: 10px;
}
.wline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line-soft); }
.wev {
  position: absolute; left: 4px; right: 4px; overflow: hidden;
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  border-left: 3px solid var(--accent); border-radius: 8px;
  padding: 4px 7px; font-size: 12px; line-height: 1.25;
}
.wev b { display: block; font-size: 12px; line-height: 1.2; }
.wev span { display: block; color: var(--ink-soft); font-size: 11px; }
/* В узкой колонке (когда занятия идут парой) подписи мельче — чтобы влезали. */
.wev.narrow { padding: 3px 5px; }
.wev.narrow b { font-size: 11px; }
.wev.narrow span { font-size: 10px; }
.modal.modal-wide { max-width: min(1180px, 96vw); width: min(1180px, 96vw); }

/* Правка 8: разделы склада сворачиваются щелчком по заголовку. */
.stock-sec > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
.stock-sec > summary::-webkit-details-marker { display: none; }
.stock-sec > summary h2::before {
  content: '▸'; display: inline-block; width: 18px;
  color: var(--ink-soft); font-size: 14px; transition: transform .15s;
}
.stock-sec[open] > summary h2::before { transform: rotate(90deg); }
.stock-sec[open] > summary { margin-bottom: 14px; }

/* Правка 14: фамилия в списках — нажимаемая, открывает карточку клиента. */
.link-name {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: left; border-bottom: 1px dashed var(--line);
}
.link-name:hover { color: var(--accent); border-bottom-color: currentColor; }
.link-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* Правка 19: подсказка суммы лежит поверх пустого поля и вставляется нажатием. */
.hint-field { position: relative; display: block; }
.price-hint {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--ink-soft); opacity: .65; cursor: pointer;
}
.price-hint:hover { opacity: 1; color: var(--accent); }

/* Правка 21: пометка скидки рядом с суммой платежа. */
.tag-discount {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--soon-bg); color: var(--soon-ink); font-size: 12px; white-space: nowrap;
}

/* Правка 19: цены всех групп правятся прямо в таблице. */
.price-table input.price-input { max-width: 150px; margin: 0; }
.price-table td { vertical-align: middle; }

/* Правки 4 и 6 от 29.08: запись — карточка в две строки, без прокрутки вбок.
   Сверху то, что вносят руками, снизу воронка и кнопки. */
.signups { display: flex; flex-direction: column; gap: 10px; }
.sg-card { padding: 14px 16px; cursor: pointer; }
.sg-card:hover { box-shadow: 0 1px 2px rgba(29,26,23,.08), 0 6px 18px rgba(29,26,23,.10); }
.sg-top, .sg-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sg-top { margin-bottom: 10px; }
.sg-bottom { border-top: 1px solid var(--line-soft); padding-top: 10px; }
.sg-date { color: var(--ink-soft); font-size: 13px; }
.sg-fio { font-weight: 600; }
.sg-phone { font-variant-numeric: tabular-nums; }
.fun-cell { display: inline-flex; align-items: center; gap: 6px; }
.fun-cell .sub { font-size: 12px; }

/* Правки 2-4: журнал новых клиентов — таблица широкая, листается вбок. */
.table-wrap { overflow-x: auto; padding: 4px; }
.signup-table { width: 100%; border-collapse: collapse; white-space: nowrap; }
.signup-table th, .signup-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.signup-table th {
  font-size: 13px; color: var(--ink-soft); font-weight: 600;
  /* Внутри прокручиваемой вбок обёртки липкая шапка съезжает и накрывает строки. */
  position: static; top: auto;
}
.signup-table td.fun { text-align: center; }
.signup-table .nowrap { white-space: nowrap; }
.fun-yes { color: #1E7A3C; font-weight: 700; display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; }
.fun-yes .sub { font-size: 11px; font-weight: 400; }
.fun-no { color: var(--line); }

/* Правки 6-7: справка от врача — подсветка в карточке и значок в журнале. */
.med-overdue { color: var(--overdue-ink); font-weight: 600; }
.med-soon { color: var(--soon-ink); font-weight: 600; }
.med-mark {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
  padding: 1px 7px; border-radius: 999px; font-size: 12px; white-space: nowrap;
}
.med-mark.med-overdue { background: var(--overdue-bg); color: var(--overdue-ink); }
.med-mark.med-soon { background: var(--soon-bg); color: var(--soon-ink); }
.med-cap { font-size: 11px; }

/* Правка 11: итоговая строка отчёта по группам. */
.gr-total td { border-top: 2px solid var(--line); background: var(--bg); }

/* Правки 7-8 от 29.08: два зала рядом и оплата прямо в посещаемости. */
.halls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.hall { min-width: 0; }
.hall .bar { margin-bottom: 8px; }
.hall .marks { overflow: hidden; }
.hall-name { font-size: 17px; }
.hall-group { margin-bottom: 10px; }
/* Плашка «занятий нет» внутри колонки зала (правка 3 от 30.08): отступы
   у .banner рассчитаны на верх страницы, здесь она вставала уже колонки
   и упиралась в список. В колонке — во всю ширину и с просветом снизу. */
.hall .banner { margin: 0 0 10px; }
.mark-row {
  display: flex; align-items: center; gap: 8px; width: 100%; max-width: 100%;
  box-sizing: border-box; border-bottom: 1px solid var(--line-soft); padding-right: 14px;
}
.mark-row:last-child { border-bottom: 0; }
.mark-row .mark { flex: 1 1 auto; width: auto; min-width: 0; border-bottom: 0; background: transparent; }
.mark-row .pay-now { flex: 0 0 auto; white-space: nowrap; }
/* Должник (правка 4 от 30.08): строка обычная, белая. Красная заливка
   и полоса слева убраны — долг видно по метке «не оплачено» под фамилией
   и по красной кнопке «Оплата» справа. */
.mark-name .sub { display: block; font-weight: 400; margin-top: 2px; }

/* На телефоне залы идут один под другим — вбок ничего не уезжает. */
@media (max-width: 860px) {
  .halls { grid-template-columns: 1fr; }
}

/* Уборка (правка 11 от 29.08): галочка «разовое дело» в окне дела. */
label.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
label.check input { width: auto; margin: 0; }

/* Бесплатные (30.08): спокойная серая метка, без тревоги. */
.tag-free { background: #EDF3FF; color: #2C4A7C; }