/* =========================================================================
   Детский клуб — дополнения к стандартной теме админки Django.
   Цвета берутся из переменных админки (--body-bg, --body-fg, ...),
   поэтому работают и в светлой, и в тёмной теме.
   ========================================================================= */

:root {
  --club-income: #2a78d6;
  --club-expense: #eb6834;
  --club-income-track: #e3eefb;
  --club-expense-track: #fcebe3;
  --club-pos: #2c6b1f;
  --club-neg: #a11d1d;

  --club-ok-bg: #e2f2dc;      --club-ok-fg: #24581a;
  --club-warn-bg: #fff1cc;    --club-warn-fg: #5f4500;
  --club-bad-bg: #fde3e1;     --club-bad-fg: #96191a;
  --club-info-bg: #e4edf2;    --club-info-fg: #1d3e4f;
  --club-neutral-bg: #eceff1; --club-neutral-fg: #3d4850;
  --club-exp-bg: #fbe7d6;     --club-exp-fg: #7a3d0e;

  --club-card-radius: 6px;
  --club-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --club-tile-bg: var(--body-bg);
  --club-now: #d03b3b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --club-income: #3987e5;
    --club-expense: #d95926;
    --club-income-track: #1d2a3a;
    --club-expense-track: #35231b;
    --club-pos: #8fd18a;
    --club-neg: #ff8f8a;
    --club-ok-bg: #183a1b;      --club-ok-fg: #a6e0a1;
    --club-warn-bg: #3d2f05;    --club-warn-fg: #f3cf6b;
    --club-bad-bg: #4a1616;     --club-bad-fg: #ffb0ab;
    --club-info-bg: #1c3240;    --club-info-fg: #a9cfe6;
    --club-neutral-bg: #2a2d30; --club-neutral-fg: #c9ced3;
    --club-exp-bg: #3d2414;     --club-exp-fg: #f2b48a;
    --club-shadow: none;
    --club-tile-bg: #181818;
    --club-now: #ff6b6b;
  }
}

html[data-theme="dark"] {
  --club-income: #3987e5;
  --club-expense: #d95926;
  --club-income-track: #1d2a3a;
  --club-expense-track: #35231b;
  --club-pos: #8fd18a;
  --club-neg: #ff8f8a;
  --club-ok-bg: #183a1b;      --club-ok-fg: #a6e0a1;
  --club-warn-bg: #3d2f05;    --club-warn-fg: #f3cf6b;
  --club-bad-bg: #4a1616;     --club-bad-fg: #ffb0ab;
  --club-info-bg: #1c3240;    --club-info-fg: #a9cfe6;
  --club-neutral-bg: #2a2d30; --club-neutral-fg: #c9ced3;
  --club-exp-bg: #3d2414;     --club-exp-fg: #f2b48a;
  --club-shadow: none;
  --club-tile-bg: #181818;
  --club-now: #ff6b6b;
}

/* --- Шапка ------------------------------------------------------------- */

.club-brand { display: inline-flex; align-items: center; gap: 10px; }
.club-brand__mark {
  flex: none; padding: 5px; border-radius: 8px;
  background: var(--accent); color: #264b5d;
}
#site-name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.club-demo-pill {
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 10px; background: rgba(255, 255, 255, .18); color: #fff;
}
.club-role {
  display: inline-block; margin: 0 6px 0 2px; padding: 1px 8px; border-radius: 10px;
  background: #264b5d; color: #fff; font-weight: 600; letter-spacing: .03em;
}

/* --- Общие элементы ------------------------------------------------------ */

.quiet { color: var(--body-quiet-color); }
.nowrap { white-space: nowrap; }
.club-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.club-pos { color: var(--club-pos); }
.club-neg, .club-num.warn { color: var(--club-neg); }

.club-badge {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: .75rem; line-height: 1.5; white-space: nowrap;
  background: var(--club-neutral-bg); color: var(--club-neutral-fg);
}
.club-badge--ok { background: var(--club-ok-bg); color: var(--club-ok-fg); }
.club-badge--warn { background: var(--club-warn-bg); color: var(--club-warn-fg); }
.club-badge--bad { background: var(--club-bad-bg); color: var(--club-bad-fg); }
.club-badge--info { background: var(--club-info-bg); color: var(--club-info-fg); }
.club-badge--exp { background: var(--club-exp-bg); color: var(--club-exp-fg); }

.club-dot {
  display: inline-block; flex: none; width: 9px; height: 9px; margin-right: 7px;
  border-radius: 50%; background: var(--dot); vertical-align: 0;
}

.club-key {
  display: inline-block; width: 10px; height: 10px; margin-right: 6px;
  border-radius: 2px; vertical-align: -1px;
}
.club-key--inc { background: var(--club-income); }
.club-key--exp { background: var(--club-expense); }

.club-pagehead {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 12px 24px; margin-bottom: 18px;
}
.club-pagehead h1 { margin: 0; }
.club-pagehead__sub { margin: 4px 0 0; color: var(--body-quiet-color); font-size: .9375rem; }

.club-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.club-btn, a.club-btn:link, a.club-btn:visited {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; box-sizing: border-box;
  padding: 0 14px; border: 0; border-radius: 18px; cursor: pointer;
  background: var(--object-tools-bg); color: var(--object-tools-fg);
  font-size: .75rem; font-weight: 400; letter-spacing: .5px; text-transform: uppercase; text-decoration: none;
}
a.club-btn:hover, .club-btn:hover { background: var(--object-tools-hover-bg); color: var(--object-tools-fg); }
.club-btn--primary, a.club-btn--primary:link, a.club-btn--primary:visited { background: var(--secondary); }
a.club-btn--primary:hover { background: var(--button-hover-bg); }
.club-btn--accent, a.club-btn--accent:link, a.club-btn--accent:visited { background: #9a4f12; }
a.club-btn--accent:hover { background: #7a3d0e; }
.club-btn--ghost, a.club-btn--ghost:link, a.club-btn--ghost:visited {
  background: transparent; color: var(--link-fg); border: 1px solid var(--border-color);
}
a.club-btn--ghost:hover { background: var(--darkened-bg); color: var(--link-hover-color); }
a.club-btn--ghost.is-current { color: var(--body-quiet-color); }

.club-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid var(--border-color); border-radius: 50%;
  color: var(--body-fg) !important; background: var(--body-bg);
}
.club-iconbtn:hover { background: var(--darkened-bg); }

.club-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 10px 12px; margin-bottom: 14px;
  border: 1px solid var(--hairline-color); border-radius: var(--club-card-radius); background: var(--darkened-bg);
}
.club-weeknav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.club-weeknav__label { margin-left: 8px; font-size: 1rem; color: var(--body-loud-color); }

.club-filters { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-left: auto; }
.club-filters label { display: inline-flex; align-items: center; gap: 6px; color: var(--body-quiet-color); }
.club-filters select { min-height: 34px; }

.club-seg { display: inline-flex; border: 1px solid var(--border-color); border-radius: 18px; overflow: hidden; }
.club-seg__btn, a.club-seg__btn:link, a.club-seg__btn:visited {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px;
  color: var(--link-fg); background: var(--body-bg); font-weight: 600; text-decoration: none;
}
.club-seg__btn + .club-seg__btn { border-left: 1px solid var(--border-color); }
a.club-seg__btn.is-on { background: var(--secondary); color: #fff; }

.club-filter-note { margin: -6px 0 12px; padding: 8px 12px; border-radius: 4px; background: var(--message-warning-bg); }
.club-hint { margin: 10px 0 0; color: var(--body-quiet-color); font-size: .8125rem; }
.club-empty { margin: 0; padding: 14px 12px; color: var(--body-quiet-color); }

.club-total {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 0 0 10px;
  padding: 10px 12px; border-radius: 4px; background: var(--darkened-bg); font-size: .875rem;
}
.club-total strong { font-size: 1rem; color: var(--body-loud-color); }

/* --- Карточки и таблицы ---------------------------------------------- */

.club-card { margin-bottom: 20px; border: 1px solid var(--hairline-color); border-radius: var(--club-card-radius); overflow: hidden; }
.club-card h2.club-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.club-card h2.club-card__head a { color: var(--header-link-color); font-weight: 400; text-transform: none; letter-spacing: 0; }
.club-card h2.club-card__head .quiet { color: var(--header-color); font-weight: 400; text-transform: none; letter-spacing: 0; }
.club-card h2.club-card__head .club-legend { color: var(--header-link-color); text-transform: none; letter-spacing: 0; font-weight: 400; }
.club-links { display: inline-flex; gap: 16px; flex-wrap: wrap; }

.club-scroll { overflow-x: auto; }
.club-table { width: 100%; border-collapse: collapse; }
.club-table th { white-space: nowrap; }
.club-table td, .club-table th { padding: 9px 12px; vertical-align: middle; }
.club-table .num { text-align: right; }
.club-cancelled td { color: var(--body-quiet-color); }
.club-cancelled a { text-decoration: line-through; }

.club-list, .module ul.club-list { margin: 0; padding: 0; list-style: none; }
.club-list li, .module .club-list li {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-top: 1px solid var(--hairline-color);
}
.club-list li:first-child { border-top: 0; }
.club-list li > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.club-list .quiet { font-size: .75rem; }

/* --- Плитки показателей -------------------------------------------------- */

.club-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 20px;
}
.club-tiles--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1700px) { .club-tiles--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 767px) { .club-tiles--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.club-tile, a.club-tile:link, a.club-tile:visited {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  border: 1px solid var(--hairline-color); border-radius: var(--club-card-radius);
  background: var(--club-tile-bg); box-shadow: var(--club-shadow);
  color: var(--body-fg); text-decoration: none;
}
a.club-tile:hover { border-color: var(--border-color); background: var(--darkened-bg); }
.club-tile__label {
  font-size: .6875rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--body-quiet-color);
}
.club-tile__value { font-size: 1.75rem; font-weight: 300; line-height: 1.15; color: var(--body-loud-color); }
.club-tile__hint { font-size: .8125rem; color: var(--body-quiet-color); }
.club-tile--warn { border-color: #e9cf7f; background: var(--club-warn-bg); }
.club-tile--warn .club-tile__label, .club-tile--warn .club-tile__hint, .club-tile--warn .club-tile__value { color: var(--club-warn-fg); }
.club-tile--good { border-color: color-mix(in srgb, var(--club-pos) 35%, transparent); }
.club-tile--bad { border-color: color-mix(in srgb, var(--club-neg) 45%, transparent); }
.club-tile--bad .club-tile__value { color: var(--club-neg); }

.club-delta { font-weight: 600; white-space: nowrap; }
.club-delta--up { color: var(--club-pos); }
.club-delta--down { color: var(--club-neg); }

/* --- Дашборд ------------------------------------------------------------ */

.dashboard #content { width: auto; max-width: 1560px; }
.dashboard .colMS { margin-right: 420px; }
.dashboard #content-related { width: 380px; margin-right: -420px; }
.club-dash__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 20px; }
.club-dash__side .module { margin-bottom: 20px; }

/* --- Календарь ---------------------------------------------------------- */

.club-legend, ul.club-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; padding: 0; list-style: none; font-size: .8125rem; }
.club-legend li { display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.club-legend--inline { display: inline-flex; margin: 0; font-size: .8125rem; }
.club-legend--inline > span { display: inline-flex; align-items: center; }
.club-legend__sw {
  width: 12px; height: 12px; border-radius: 3px;
  background: color-mix(in srgb, var(--ev) 22%, var(--body-bg)); border-left: 3px solid var(--ev);
}
.club-legend__sw--cancelled {
  border-left: 3px solid var(--border-color);
  background: repeating-linear-gradient(135deg, var(--darkened-bg) 0 3px, var(--hairline-color) 3px 5px);
}

.club-cal { border: 1px solid var(--border-color); border-radius: var(--club-card-radius); overflow: hidden; background: var(--body-bg); }
.club-cal__scroll { overflow-x: auto; }
.club-cal__grid { min-width: 880px; }
.club-cal__head, .club-cal__body { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.club-cal__head { background: var(--darkened-bg); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 3; }
.club-cal__dayhead {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px;
  border-left: 1px solid var(--hairline-color); color: var(--body-fg);
}
.club-cal__dow { font-size: .6875rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.club-cal__num { font-size: 1.375rem; font-weight: 300; line-height: 1.2; }
.club-cal__cnt { font-size: .6875rem; color: var(--body-quiet-color); }
.club-cal__dayhead.is-today { background: var(--breadcrumbs-bg); color: #fff; }
.club-cal__dayhead.is-today .club-cal__cnt { color: #d6e6ef; }

.club-cal__body { position: relative; }
.club-cal__hours { position: relative; }
.club-cal__hour {
  position: absolute; right: 8px; transform: translateY(-50%);
  font-size: .6875rem; color: var(--body-quiet-color); font-variant-numeric: tabular-nums;
}
.club-cal__hour.first { transform: translateY(2px); }
.club-cal__hour.last { transform: translateY(-100%); }

.club-cal__day { position: relative; border-left: 1px solid var(--hairline-color); }
.club-cal[data-add-url] .club-cal__day { cursor: copy; }
.club-cal__day.is-weekend { background: color-mix(in srgb, var(--darkened-bg) 60%, transparent); }
.club-cal__day.is-today { background: color-mix(in srgb, var(--accent) 8%, var(--body-bg)); }
.club-cal__line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--hairline-color); pointer-events: none; }
.club-cal__line.is-half { border-top-color: color-mix(in srgb, var(--hairline-color) 50%, transparent); }
.club-cal__now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--club-now); z-index: 2; pointer-events: none; }
.club-cal__now::before {
  content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--club-now);
}

.club-cal__ghost {
  position: absolute; left: 3px; right: 3px; box-sizing: border-box; padding: 3px 6px;
  border: 1px dashed var(--link-fg); border-radius: 5px; color: var(--link-fg);
  font-size: .75rem; pointer-events: none; background: color-mix(in srgb, var(--link-fg) 8%, transparent);
}

.club-ev, a.club-ev:link, a.club-ev:visited {
  position: absolute; box-sizing: border-box; z-index: 1;
  display: flex; flex-direction: column; gap: 1px; overflow: hidden;
  padding: 4px 6px 4px 8px; border-radius: 5px;
  border-left: 3px solid var(--ev);
  background: color-mix(in srgb, var(--ev) 18%, var(--body-bg));
  color: var(--body-fg); text-decoration: none; font-size: .75rem; line-height: 1.25;
  cursor: pointer;
}
a.club-ev:hover, a.club-ev:focus-visible {
  z-index: 4; background: color-mix(in srgb, var(--ev) 30%, var(--body-bg));
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18); color: var(--body-loud-color);
}
.club-ev__time { color: var(--body-quiet-color); font-variant-numeric: tabular-nums; }
.club-ev__title { font-weight: 600; }
.club-ev__meta { color: var(--body-quiet-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.club-ev__time, .club-ev__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.club-ev > span { flex: none; min-width: 0; }
a.club-ev.is-compact { flex-direction: row; align-items: center; gap: 6px; padding-top: 2px; padding-bottom: 2px; }
a.club-ev.is-compact > span { flex: 0 1 auto; }
a.club-ev.is-compact .club-ev__time { flex: none; }
a.club-ev.is-compact .club-ev__meta { display: none; }
a.club-ev.is-medium .club-ev__meta + .club-ev__meta { display: none; }
.club-ev.is-own { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ev) 60%, transparent); }
.club-ev--cancelled, a.club-ev--cancelled:link, a.club-ev--cancelled:visited {
  border-left-color: var(--border-color);
  background: repeating-linear-gradient(135deg, var(--darkened-bg) 0 6px, var(--body-bg) 6px 12px);
  color: var(--body-quiet-color);
}
.club-ev--cancelled .club-ev__title { text-decoration: line-through; font-weight: 400; }

/* --- Графики (отчёты) ---------------------------------------------------- */

.club-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.club-span2 { grid-column: 1 / -1; }

.club-chart-wrap { padding: 16px 16px 8px; }
.club-chart { --h: 220px; display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.club-chart__y { position: relative; height: var(--h); min-width: 52px; }
.club-chart__y span {
  position: absolute; right: 0; transform: translateY(-50%);
  font-size: .6875rem; color: var(--body-quiet-color); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.club-chart__main { position: relative; overflow-x: auto; }
.club-chart__grid { position: absolute; left: 0; right: 0; top: 0; height: var(--h); pointer-events: none; }
.club-chart__grid span { position: absolute; left: 0; right: 0; border-top: 1px solid var(--hairline-color); }
.club-chart__grid span:last-child { border-top-color: var(--border-color); }
.club-chart__cols {
  position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(56px, 1fr));
  min-width: calc(var(--n) * 56px);
}
.club-chart__col { position: relative; display: flex; flex-direction: column; align-items: center; outline: none; }
.club-chart__bars {
  display: flex; align-items: flex-end; justify-content: center; gap: 2px;
  height: var(--h); width: 100%;
}
.club-bar { display: block; width: min(24px, 32%); min-height: 0; border-radius: 4px 4px 0 0; }
.club-bar--inc { background: var(--club-income); }
.club-bar--exp { background: var(--club-expense); }
.club-chart__x { margin-top: 6px; font-size: .75rem; color: var(--body-quiet-color); white-space: nowrap; }
.club-chart__col.is-future .club-chart__x { opacity: .55; }
.club-chart__col.is-current .club-chart__x { color: var(--body-loud-color); font-weight: 600; }
.club-chart__col:hover .club-chart__bars, .club-chart__col:focus-visible .club-chart__bars {
  background: color-mix(in srgb, var(--body-fg) 5%, transparent); border-radius: 4px 4px 0 0;
}
.club-chart__tip {
  position: absolute; bottom: calc(100% - var(--h) + 8px); left: 50%; transform: translateX(-50%);
  z-index: 5; display: none; flex-direction: column; gap: 3px; min-width: 170px;
  padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 6px;
  background: var(--body-bg); color: var(--body-fg); box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  font-size: .75rem; white-space: nowrap; pointer-events: none;
}
.club-chart__col:hover .club-chart__tip, .club-chart__col:focus-visible .club-chart__tip { display: flex; }
.club-chart__tip b { float: right; margin-left: 12px; font-variant-numeric: tabular-nums; }
.club-chart__tip-total { padding-top: 3px; border-top: 1px solid var(--hairline-color); }

.club-tableview { margin-top: 10px; }
.club-tableview summary { cursor: pointer; color: var(--link-fg); font-size: .8125rem; }
.club-tableview .club-table { margin-top: 8px; }

.club-hbars, .module ul.club-hbars { margin: 0; padding: 6px 12px 14px; list-style: none; }
.club-hbars li { list-style: none; padding: 7px 0; }
.club-hbars__row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.club-hbars__row > span:first-child, .club-hbars__row > a:first-child { display: inline-flex; align-items: center; }
.club-hbars__track { height: 8px; border-radius: 4px; overflow: hidden; }
.club-hbars__track span { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.club-hbars__track--inc { background: var(--club-income-track); }
.club-hbars__track--inc span { background: var(--club-income); }
.club-hbars__track--exp { background: var(--club-expense-track); }
.club-hbars__track--exp span { background: var(--club-expense); }

/* --- Вход --------------------------------------------------------------- */

.login #container { width: 32em; }
.club-login-demo { clear: both; margin: 0 20px 24px; padding: 14px 16px; border: 1px dashed var(--border-color); border-radius: 6px; }
.club-login-demo h2 { margin: 0 0 4px; font-size: 1rem; }
.club-login-demo p { margin: 0 0 10px; padding: 0; color: var(--body-quiet-color); font-size: .8125rem; }
.club-login-demo table { width: 100%; }
.club-login-demo td, .club-login-demo th { padding: 4px 6px; }
.club-login-fill {
  padding: 3px 8px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--body-bg);
  color: var(--link-fg); font-family: var(--font-family-monospace); font-size: .8125rem; cursor: pointer;
}
.club-login-fill:hover { background: var(--darkened-bg); }
.club-login-demo__hint { margin-top: 10px !important; color: var(--body-fg) !important; }

/* --- Формы админки -------------------------------------------------------- */

/* Строка str(объект) над каждой строкой табличного инлайна — дублирует колонки */
.inline-group .tabular td.original p { display: none; }
.inline-group .tabular table tr.has_original td { padding-top: 8px; }

.field-directions ul, .field-directions div > div { columns: 2; }
.field-directions label { white-space: nowrap; }

/* --- Мелочи ------------------------------------------------------------ */

.club-pad { padding: 10px 12px; }
.club-narrow { max-width: 760px; }
.club-inline { display: inline; margin: 0; }
.club-linkbtn { padding: 0; border: 0; background: none; color: var(--link-fg); cursor: pointer; text-decoration: underline; font: inherit; }
.club-copy { font-family: var(--font-family-monospace); font-size: .8125rem; word-break: break-all; }
input.club-copy { width: 100%; max-width: 32em; }
.club-actions { margin: 0 0 14px; }
.club-actions .club-btn[disabled] { opacity: .5; cursor: not-allowed; }
.club-actions label select { min-height: 34px; }
.club-card--warn { border-color: #e9cf7f; }
.club-card--warn h2 { background: var(--club-warn-bg); color: var(--club-warn-fg); }
.club-dash__alerts { margin-bottom: 16px; }
.club-steps ol { margin: 10px 12px 0 32px; padding: 0; }
.club-steps li { padding: 2px 0; list-style: decimal; }
.club-table.club-mini td, .club-table.club-mini th { padding: 6px 8px; font-size: .8125rem; }
.club-cal__special { display: inline-block; padding: 0 6px; border-radius: 8px; background: var(--club-info-bg); color: var(--club-info-fg); }
.club-cal__special.is-off { background: var(--club-bad-bg); color: var(--club-bad-fg); }
.club-cal__dayhead.is-today .club-cal__special { color: var(--club-info-fg); }

/* Telegram: QR-код и ссылка в карточке родителя / учителя */
.club-tg { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-start; }
.club-tg__qr svg { display: block; width: 132px; height: 132px; padding: 6px; border-radius: 6px; background: #fff; }
.club-tg__text { flex: 1 1 260px; min-width: 0; }
.club-tg__text p { margin: 0 0 8px; padding: 0; }

/* --- Ведомость посещения ------------------------------------------------- */

.club-att { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .8125rem; }
.club-att th, .club-att td { padding: 4px 4px; border-bottom: 1px solid var(--hairline-color); text-align: center; vertical-align: middle; }
.club-att thead th { position: sticky; top: 0; z-index: 2; background: var(--darkened-bg); font-weight: 600; }
.club-att__name { position: sticky; left: 0; z-index: 1; min-width: 150px; max-width: 220px; padding-left: 10px !important;
  text-align: left !important; background: var(--body-bg); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.club-att thead .club-att__name { z-index: 3; background: var(--darkened-bg); }
.club-att__day { min-width: 58px; }
.club-att__day a { display: flex; flex-direction: column; color: var(--body-fg); text-decoration: none; line-height: 1.2; }
.club-att__day.is-today { box-shadow: inset 0 -3px 0 var(--club-income); }
.club-att__day.is-cancelled { opacity: .5; text-decoration: line-through; }
.club-att__all { margin-top: 3px; padding: 1px 5px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--body-bg);
  color: var(--link-fg); font-size: .6875rem; cursor: pointer; }
.club-att__cell { min-width: 58px; }
.club-att__cell.is-none { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--hairline-color) 4px 5px); }
.club-att__cell.is-cancelled { opacity: .45; }
.club-att__cell.m-present { background: color-mix(in srgb, var(--club-ok-bg) 70%, transparent); }
.club-att__cell.m-sick, .club-att__cell.m-warned { background: color-mix(in srgb, var(--club-warn-bg) 80%, transparent); }
.club-att__cell.m-absent { background: color-mix(in srgb, var(--club-bad-bg) 75%, transparent); }
.club-att__cell.is-makeup { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--club-income) 55%, transparent); }
.club-att__cell.is-future:not(.m-sick):not(.m-warned) { background: transparent; }
.club-att select { width: 100%; min-width: 52px; min-height: 28px; padding: 1px 2px; font-size: .8125rem; text-align: center; }
.club-att__mark.is-suggested { border-color: var(--club-warn-fg); }
.club-att__dec { margin-top: 2px; font-size: .75rem !important; }
.club-att__dec.is-hidden { display: none; }
.club-att__dec.is-need { border-color: var(--club-neg); color: var(--club-neg); }
.club-att__code { font-weight: 600; }
.club-att__sub { display: block; color: var(--body-quiet-color); font-size: .6875rem; }
.club-sticky-save {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--hairline-color); border-radius: var(--club-card-radius);
  background: var(--body-bg); box-shadow: 0 -2px 8px rgba(0, 0, 0, .06); font-size: .8125rem;
}

/* --- Отработки, ведомость на оплату ------------------------------------- */

.club-mkform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.club-mkform__sel { max-width: 260px; min-height: 32px; }
.club-mkform__new { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.club-mkform .club-btn { min-height: 32px; }
.club-sheet__n { width: 4.5em; text-align: right; }
.club-sheet__n.is-changed { border-color: var(--club-warn-fg); background: var(--club-warn-bg); color: var(--club-warn-fg); }
.club-sheet__c { width: 100%; min-width: 140px; box-sizing: border-box; }
.club-sheet th { white-space: normal; }
.club-sheet__why { display: inline-block; max-width: 180px; white-space: normal; text-align: right; }
.club-sheet tfoot th, .club-sheet tfoot td, .club-matrix tfoot th, .club-matrix tfoot td { background: var(--darkened-bg); }
.club-return__body { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; padding: 10px 12px; }
.club-return__body textarea { flex: 1 1 320px; min-height: 44px; }
.club-matrix th[scope="row"] { text-align: left; white-space: nowrap; }
.club-matrix .is-current { background: var(--breadcrumbs-bg); color: #fff; }
.club-matrix td, .club-matrix th { padding: 7px 8px; }

.club-exports { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 20px; }
.club-exports__name { font-size: 1.125rem; color: var(--link-fg); }

/* --- Адаптив ------------------------------------------------------------- */

@media (max-width: 1024px) {
  .dashboard .colMS { margin-right: 0; }
  .dashboard #content-related { width: auto; margin-right: 0; }
  .club-grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .club-filters { margin-left: 0; }
  .club-att__name { min-width: 110px; max-width: 130px; }
  .club-att__day, .club-att__cell { min-width: 50px; }
  .club-table td, .club-table th { padding: 7px 8px; }
  .club-mkform__sel { max-width: 100%; }
  .club-sticky-save__hint { display: none; }
  .club-sticky-save { justify-content: flex-end; }
  .club-tile__value { font-size: 1.5rem; }
  .club-pagehead { align-items: flex-start; }
}