/* ============================================================
   group-page.css — стили только для group-СПЕЦИФИЧНЫХ блоков
   страницы /groups/:id.

   Всё общее с ЛК ученика (hero, sidebar cards, sections, tabs,
   tables, notes, balance card, next lesson card) — переиспользуем
   КЛАССЫ ИЗ client-page.css (.cp-*). Этот файл только дополняет:
     - аватар группы (иконка вместо буквы)
     - mini-roster в сайдбаре (3 ученика)
     - таблица состава (4 колонки)
     - матрица посещаемости
     - таблица платежей (4 колонки)
     - period-tabs (мини-сегменты)
   ============================================================ */

/* ===== Hero: аватар-иконка вместо буквы ===== */
.cp-hero-avatar.gp-hero-avatar-group {
    background: linear-gradient(135deg, #7c5cff, #a78bfa);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.cp-hero-avatar.gp-hero-avatar-group svg { width: 28px; height: 28px; }

/* ===== Финансы группы: дополнения к стандартному cp-balance ===== */
.gp-balance-aux {
    margin-top: 6px;
    font-size: 12px;
    color: var(--green, #00d4a8);
    font-weight: 600;
}
.gp-debtors-list {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    display: flex; flex-direction: column; gap: 4px;
}
.gp-debtors-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
    font-size: 13px;
}
.gp-debtors-row:hover { background: var(--red-bg); }
.gp-debtors-name {
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0; flex: 1;
}
.gp-debtors-amt { color: var(--red); font-weight: 700; }
.gp-debtors-more { font-size: 11px; color: var(--text-dim); padding: 2px 6px; }

/* ===== Mini-roster в сайдбаре (аналог блока «УЧЕНИК / РОДИТЕЛЬ» у клиента) ===== */
.gp-roster-card {
    display: flex; flex-direction: column; gap: 8px;
}
.gp-roster-cap {
    margin-bottom: 4px;
}
.gp-roster-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.1s;
}
.gp-roster-row:hover { background: var(--bg-soft); }
.gp-roster-av {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #7c5cff, #a78bfa);
    color: #fff; font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.gp-roster-mid { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gp-roster-name {
    font-size: 13px; font-weight: 500; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gp-roster-sub { font-size: 11px; color: var(--text-dim); }
.gp-roster-bal { font-size: 13px; font-weight: 700; }
.gp-roster-bal.is-neg  { color: var(--red); }
.gp-roster-bal.is-pos  { color: var(--green); }
.gp-roster-bal.is-zero { color: var(--text-faint); }
.gp-roster-more {
    margin-top: 4px;
    align-self: flex-start;
}

/* ===== Состав группы — cp-table с 4 колонками ===== */
.gp-members-head,
.gp-members-row {
    grid-template-columns: 36px minmax(160px, 1fr) 130px 110px;
    align-items: center;
    gap: 12px;
}
.gp-members-row { cursor: pointer; }
.gp-members-row:hover { background: var(--bg-soft); }
.gp-members-head { color: var(--text-dim); }
.gp-members-head > span:nth-child(3),
.gp-members-head > span:nth-child(4) { text-align: right; }
.gp-mem-av {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #7c5cff, #a78bfa);
    color: #fff; font-weight: 700; font-size: 13px;
    display: inline-flex; align-items: center; justify-content: center;
}
.gp-mem-name {
    color: var(--text); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
    display: flex; align-items: center; gap: 6px;
}
.gp-mem-price {
    text-align: right;
    color: var(--text);
    display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px;
}
.gp-mem-tag {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--text-dim); font-weight: 600;
}
.gp-mem-bal {
    text-align: right;
    font-weight: 700;
}
.gp-mem-bal.is-neg  { color: var(--red); }
.gp-mem-bal.is-pos  { color: var(--green); }
.gp-mem-bal.is-zero { color: var(--text-faint); }

/* ===== Платежи — таблица с 4 колонками ===== */
.gp-pay-head,
.gp-pay-row {
    grid-template-columns: 80px minmax(160px, 1fr) 110px 130px;
    align-items: center;
    gap: 12px;
}
.gp-pay-row { cursor: pointer; }
.gp-pay-row:hover { background: var(--bg-soft); }
.gp-pay-head { color: var(--text-dim); }
.gp-pay-name {
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gp-pay-amount { font-weight: 700; color: var(--text); text-align: right; }
.gp-pay-totals {
    font-size: 12px; color: var(--text-dim);
    display: flex; gap: 14px;
}
.gp-pay-totals strong { color: var(--text); font-weight: 700; }

/* ===== Period segmented (мини-табы «2 месяца / Всё время») ===== */
.gp-period-tabs {
    display: inline-flex; gap: 2px;
    background: var(--bg-soft);
    border-radius: 8px;
    padding: 2px;
}
.gp-period-tab {
    padding: 4px 10px; border: none; background: transparent;
    border-radius: 6px;
    font-size: 12px; font-weight: 600; color: var(--text-dim);
    cursor: pointer; font-family: inherit;
}
.gp-period-tab:hover { color: var(--text); }
.gp-period-tab.is-active {
    background: var(--bg-card); color: var(--text);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* ===== Матрица посещаемости (уникально для группы) ===== */
.gp-att-card { padding: 12px; }
.gp-att-grid {
    display: grid;
    grid-template-columns: 88px repeat(var(--gp-att-cols, 1), minmax(70px, 1fr));
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.gp-att-row { display: contents; }
.gp-att-head .gp-att-th,
.gp-att-head .gp-att-th-corner {
    position: sticky; top: 0; z-index: 2;
    background: var(--bg-soft);
}
.gp-att-th {
    padding: 8px 6px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
    color: var(--text-dim);
    text-align: center;
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
    cursor: pointer;
}
.gp-att-th-corner { border-bottom: 1px solid var(--border); }
.gp-att-th-name:hover { color: var(--brand); }

.gp-att-date {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    position: sticky; left: 0; z-index: 1;
}
.gp-att-date:hover { background: var(--bg-soft); }
.gp-att-date-d { font-size: 13px; font-weight: 700; color: var(--text); }
.gp-att-date-t { font-size: 11px; color: var(--text-dim); }

.gp-att-cell {
    display: flex; align-items: center; justify-content: center;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
    font-size: 16px; font-weight: 700;
    cursor: pointer;
    transition: filter 0.1s;
}
.gp-att-cell:hover { filter: brightness(0.96); }
.gp-att-cell.is-paid    { background: var(--green-bg, rgba(0,212,168,0.18)); color: var(--green, #00d4a8); }
.gp-att-cell.is-unpaid  { background: var(--amber-bg, rgba(255,184,84,0.18)); color: var(--amber, #ffb854); }
.gp-att-cell.is-missed  { background: var(--red-bg, rgba(255,92,122,0.16)); color: var(--red, #ff5c7a); }
.gp-att-cell.is-cancel  { background: rgba(0,0,0,0.04); color: var(--text-faint); }
.gp-att-cell.is-scheduled { background: var(--bg-card); color: var(--text-dim); }
.gp-att-cell.gp-att-empty { background: var(--bg-soft); color: var(--text-faint); cursor: default; font-size: 12px; }

.gp-att-row.is-cancelled .gp-att-date,
.gp-att-row.is-cancelled .gp-att-cell { opacity: 0.6; }

.gp-att-legend {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin-top: 12px;
    font-size: 11px; color: var(--text-dim);
}
.gp-att-leg { font-weight: 700; margin-right: 2px; }
.gp-att-leg-paid   { color: var(--green); }
.gp-att-leg-unpaid { color: var(--amber); }
.gp-att-leg-missed { color: var(--red); }
.gp-att-leg-cancel { color: var(--text-faint); }

/* ===== Доп. для заметок (kind-badge внутри cp-note) ===== */
.gp-note-kind {
    margin-left: auto;
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
    font-weight: 700; color: var(--brand);
}
.gp-note-topic {
    font-size: 13px; font-weight: 700; color: var(--text);
    margin-bottom: 4px;
}

/* ===== Sidebar: общая обёртка карточки повторяет cp-card ===== */
#gp-root .cp-card { padding: 14px 16px; }

/* ===== Mobile ===== */
@media (max-width: 1000px) {
    .gp-att-grid {
        grid-template-columns: 72px repeat(var(--gp-att-cols, 1), minmax(56px, 1fr));
    }
}