/* Отчёты и оплата.
   Панель персонала: строка списка 72 px, один главный статус, раскрытие
   с тремя полями оплаты и читаемой колонкой текста.
   Кабинет семьи: сегменты, блок оплаты и отчёты на тех же токенах.
   Все значения — из tokens.css: цвет, шкала отступов, радиусы, типографика. */

/* ==========================================================================
   Панель персонала
   ========================================================================== */

.rp-wrap {
    color: var(--text-main);
}

.rp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s-3);
    padding: var(--s-5) var(--s-6) var(--s-2);
}

.rp-title {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--fw-semi);
    line-height: var(--lh-tight);
}

.rp-sub {
    margin-top: var(--s-1);
    font-size: var(--text-sm);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

.rp-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin-left: auto;
}

.rp-head-actions .rp-icon-btn {
    width: var(--control-h);
    height: var(--control-h);
}

/* ——— кнопки ——— */

.rp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--control-h);
    padding: 0 var(--s-3);
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-main);
    font-size: var(--text-sm);
    font-weight: var(--fw-semi);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease);
}

.rp-btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.rp-btn--primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-contrast);
}

.rp-btn--primary:disabled,
.rp-btn--primary.is-disabled {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text-dim);
    cursor: default;
}

.rp-btn--secondary {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-main);
}

.rp-btn--secondary:hover {
    background: var(--surface-2);
    color: var(--text-main);
}

.rp-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
}

.rp-btn--ghost:hover {
    background: var(--surface-2);
    color: var(--text-main);
}

.rp-btn--warn {
    color: var(--warn);
    border-color: var(--warn-bd);
}

.rp-btn--warn:hover {
    background: var(--warn-bg);
    color: var(--warn);
}

.rp-btn--danger {
    color: var(--danger);
    border-color: var(--danger-bd);
}

.rp-btn--danger:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

.rp-btn--sm {
    min-height: var(--control-h-sm);
    padding: 0 var(--s-2);
    font-size: var(--text-xs);
}

.rp-icon-btn {
    display: inline-grid;
    place-items: center;
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-md);
    line-height: 1;
    cursor: pointer;
}

.rp-icon-btn:hover {
    background: var(--surface-2);
    color: var(--text-main);
}

.rp-btn:focus-visible,
.rp-icon-btn:focus-visible,
.rp-chip:focus-visible,
.rp-search input:focus-visible,
.rp-chev:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ——— фильтры и поиск ——— */

.rp-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-6) var(--s-3);
}

.rp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.rp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: var(--fw-semi);
    white-space: nowrap;
    cursor: pointer;
}

.rp-chip:hover {
    border-color: var(--border-hover);
    color: var(--text-main);
}

.rp-chip.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

.rp-chip .rp-n {
    font-size: var(--text-2xs);
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

.rp-chip.is-active .rp-n {
    opacity: 0.85;
}

.rp-search {
    position: relative;
    width: min(100%, 300px);
    margin-left: auto;
}

.rp-search .sr-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    color: var(--text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.rp-search input {
    width: 100%;
    height: var(--control-h-sm);
    padding: 0 var(--s-3) 0 var(--s-8);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--bg-subtle);
    color: var(--text-main);
    font-size: var(--text-xs);
}

.rp-search input::placeholder {
    color: var(--text-dim);
}

/* ——— служебные плашки ——— */

.rp-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin: 0 var(--s-6) var(--s-3);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: var(--text-xs);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

.rp-note--danger {
    border-color: var(--danger-bd);
    background: var(--danger-bg);
    color: var(--danger);
}

.rp-note--danger strong {
    color: var(--text-main);
    font-weight: var(--fw-semi);
}

.rp-claims {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin: 0 var(--s-6) var(--s-3);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--warn-bd);
    border-radius: var(--r-sm);
    background: var(--warn-bg);
    font-size: var(--text-xs);
}

.rp-claims-title {
    font-weight: var(--fw-semi);
    color: var(--warn);
}

.rp-claim-link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 3px var(--s-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    color: var(--text-main);
    font-size: var(--text-xs);
    text-decoration: none;
}

.rp-claim-link:hover {
    border-color: var(--warn);
    color: var(--text-main);
}

.rp-claim-name {
    font-weight: var(--fw-semi);
}

.rp-claim-muted {
    color: var(--text-muted);
}

/* ——— список отчётов ——— */

.rp-rows {
    margin: 0 var(--s-6) var(--s-6);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
}

.rp-item {
    border-bottom: 1px solid var(--border);
}

.rp-item:last-child {
    border-bottom: 0;
}

.rp-item > summary {
    list-style: none;
    cursor: pointer;
}

.rp-item > summary::-webkit-details-marker {
    display: none;
}

.rp-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-4);
    min-height: 72px;
    padding: var(--s-3) var(--s-4);
}

.rp-row:hover {
    background: var(--surface-2);
}

.rp-item[open] > .rp-row {
    background: var(--surface-2);
}

/* Готовый отчёт репетитора: спокойная зелёная подложка строки и полоса
   слева. Подложка — существующий --ok-bg (10 % зелёного), поэтому текст
   остаётся на своей поверхности и контраст не меняется; в светлой теме
   токен уже переопределён на тёмно-зелёный. Полоса — inset-тень, чтобы не
   сдвигать сетку строки. Смысл дублируется словами «Отчёт сдан» в статусе,
   то есть цвет здесь не единственный носитель. */
.rp-item--filled > .rp-row,
.rp-item--filled[open] > .rp-row {
    background: var(--ok-bg);
    box-shadow: inset 3px 0 0 var(--ok);
}

.rp-item--filled > .rp-row:hover,
.rp-item--filled[open] > .rp-row:hover {
    background: linear-gradient(var(--ok-bg), var(--ok-bg)), var(--surface-2);
}

.rp-who-col {
    display: block;
    min-width: 0;
}

.rp-who {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--s-2);
    min-width: 0;
}

.rp-name {
    overflow: hidden;
    font-size: var(--text-md);
    font-weight: var(--fw-semi);
    color: var(--text-main);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-class {
    font-size: var(--text-xs);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
    white-space: nowrap;
}

.rp-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-top: 3px;
    font-size: var(--text-xs);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

.rp-subj-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--subj-other);
}

.rp-subj-dot--math {
    background: var(--subj-math);
}

.rp-subj-dot--physics {
    background: var(--subj-physics);
}

.rp-subj-dot--it {
    background: var(--subj-it);
}

.rp-subj-dot--chem {
    background: var(--subj-chem);
}

.rp-subj-dot--eng {
    background: var(--subj-eng);
}

.rp-meta-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-lessons {
    margin-bottom: var(--s-2);
    font-size: var(--text-xs);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

.rp-status-col {
    display: block;
    min-width: 0;
}

.rp-status {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--text-sm);
    font-weight: var(--fw-semi);
    line-height: var(--lh-snug);
}

.rp-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--text-muted);
}

.rp-status--danger {
    color: var(--danger);
}

.rp-status--danger .rp-dot {
    background: var(--danger);
}

.rp-status--warn {
    color: var(--warn);
}

.rp-status--warn .rp-dot {
    background: var(--warn);
}

.rp-status--ok {
    color: var(--ok);
}

.rp-status--ok .rp-dot {
    background: var(--ok);
}

.rp-status--info {
    color: var(--accent-text);
}

.rp-status--info .rp-dot {
    background: var(--accent);
}

.rp-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    margin-top: 3px;
    font-size: var(--text-xs);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

.rp-facts > span:not(:empty) + span:not(:empty)::before {
    content: "· ";
    color: var(--text-dim);
}

.rp-factlog {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    margin-bottom: var(--s-3);
    font-size: var(--text-xs);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

.rp-factlog-label {
    font-weight: var(--fw-semi);
    color: var(--text-muted);
}

.rp-factlog > span + span::before {
    content: "· ";
    color: var(--text-dim);
}

.rp-money {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-3);
}

.rp-sum {
    display: block;
    font-size: var(--text-md);
    font-weight: var(--fw-semi);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.rp-sum small {
    display: block;
    margin-top: 2px;
    font-size: var(--text-2xs);
    font-weight: var(--fw-regular);
    color: var(--text-muted);
}

.rp-chev {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-muted);
    transition:
        transform var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease);
}

.rp-chev svg {
    width: 16px;
    height: 16px;
}

.rp-item[open] .rp-chev {
    color: var(--text-main);
    transform: rotate(180deg);
}

/* ——— раскрытие ——— */

.rp-panel {
    padding: var(--s-4);
    border-top: 1px solid var(--border);
    background: var(--bg-subtle);
}

.rp-pay-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-2);
    max-width: 560px;
    margin-bottom: var(--s-4);
}

.rp-pay-cell {
    padding: 9px var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
}

.rp-pay-cell--due {
    border-color: var(--warn-bd);
}

.rp-pay-label {
    font-size: var(--text-2xs);
    font-weight: var(--fw-semi);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.rp-pay-value {
    margin-top: 2px;
    font-size: var(--text-xl);
    font-weight: var(--fw-semi);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rp-pay-cell--due .rp-pay-value {
    color: var(--warn);
}

.rp-grid {
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) 190px;
    align-items: start;
    gap: var(--s-6);
}

.rp-text {
    max-width: var(--measure);
    font-size: 15px;
    line-height: var(--lh-read);
    color: var(--text-main);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.rp-text--empty {
    font-size: var(--text-sm);
    color: var(--text-muted);
    white-space: normal;
}

.rp-read {
    min-width: 0;
}

.rp-copy-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-3);
}

.rp-boards {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: var(--s-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.rp-board {
    padding: 2px var(--s-2);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    color: var(--accent-text);
    text-decoration: none;
    white-space: nowrap;
}

.rp-board:hover {
    border-color: var(--accent);
    color: var(--accent-text);
}

.rp-actions {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    width: 190px;
}

.rp-actions .rp-btn {
    width: 100%;
}

.rp-hint {
    margin-top: var(--s-1);
    font-size: var(--text-xs);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

/* ——— оплата внутри раскрытия ——— */

.rp-journal {
    margin-top: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px solid var(--border);
}

.rp-journal > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-2);
    min-height: var(--control-h-sm);
    list-style: none;
    color: var(--text-muted);
    cursor: pointer;
}

.rp-journal > summary::-webkit-details-marker {
    display: none;
}

.rp-journal-title {
    font-size: var(--text-sm);
    font-weight: var(--fw-semi);
    color: var(--text-main);
}

.rp-journal[open] > summary .rp-journal-title {
    color: var(--text-main);
}

.rp-team-pay {
    padding: var(--s-3) 0;
    border-top: 1px solid var(--border);
}

.rp-team-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-2);
}

.rp-team-name {
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
}

.rp-team-sep {
    font-size: var(--text-xs);
    color: var(--text-dim);
}

.rp-team-left {
    font-size: var(--text-xs);
    font-weight: var(--fw-semi);
    color: var(--warn);
    white-space: nowrap;
}

.rp-team-left::before {
    content: "· ";
    color: var(--text-dim);
}

.rp-team-left--wait {
    color: var(--warn);
}

.rp-team-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.rp-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

/* Компактная метка состояния. Текст — основным цветом (контраст не зависит
   от оттенка подложки), цвет состояния несут точка и рамка: смысл остаётся
   и без цвета, потому что он же написан словами. */
.rp-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 2px var(--s-2);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    color: var(--text-main);
    font-size: var(--text-2xs);
    font-weight: var(--fw-semi);
    line-height: var(--lh-snug);
    white-space: nowrap;
}

.rp-tag-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--text-muted);
}

.rp-tag--ok {
    border-color: var(--ok-bd);
    background: var(--ok-bg);
}

.rp-tag--ok .rp-tag-dot {
    background: var(--ok);
}

.rp-tag--warn {
    border-color: var(--warn-bd);
    background: var(--warn-bg);
}

.rp-tag--warn .rp-tag-dot {
    background: var(--warn);
}

.rp-tag--danger {
    border-color: var(--danger-bd);
    background: var(--danger-bg);
}

.rp-tag--danger .rp-tag-dot {
    background: var(--danger);
}

.report-pay-bar,
.rp-bar {
    height: 6px;
    margin-top: var(--s-2);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    overflow: hidden;
}

.report-pay-bar > span,
.rp-bar > span {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--accent);
}

.rp-claim {
    margin-top: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--warn-bd);
    border-radius: var(--r-sm);
    background: var(--warn-bg);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.rp-claim-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    font-weight: var(--fw-semi);
    color: var(--warn);
}

.rp-claim-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1);
    margin-left: auto;
}

.rp-pay-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.rp-pay-row strong {
    font-weight: var(--fw-semi);
    color: var(--text-main);
}

.rp-pay-row-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    margin-left: auto;
}

.rp-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-2);
}

.rp-field {
    height: var(--control-h-sm);
    min-width: 0;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-main);
    font-size: var(--text-sm);
}

.rp-field:focus {
    border-color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.rp-field--amount {
    width: 7.5rem;
}

.rp-field--amount-sm {
    width: 6rem;
}

.rp-field--note {
    width: 11rem;
}

.rp-form .sr-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--control-h-sm);
    padding: 0 var(--s-2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: pointer;
}

.rp-form .sr-file:hover {
    border-color: var(--accent);
}

.rp-form .sr-file-btn {
    font-size: var(--text-xs);
    font-weight: var(--fw-semi);
    color: var(--accent-text);
    white-space: nowrap;
}

.rp-form .sr-file-name {
    overflow: hidden;
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-journal .rp-form {
    flex-wrap: nowrap;
}

.rp-journal .rp-field {
    height: var(--control-h);
}

.rp-journal .rp-field--amount {
    width: 6.5rem;
}

.rp-journal .rp-field--note {
    width: 10rem;
}

.rp-journal .rp-form .sr-file {
    min-height: var(--control-h);
    border: 1px solid transparent;
    background: transparent;
}

.rp-journal .rp-form .sr-file:hover {
    border-color: var(--border);
    background: var(--surface-2);
}

.rp-journal .rp-form .sr-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
}

.rp-journal .rp-form .sr-file-name {
    color: var(--text-muted);
}

.rp-req {
    margin-top: var(--s-2);
}

.rp-req > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    font-size: var(--text-xs);
    font-weight: var(--fw-semi);
    color: var(--text-muted);
    list-style: none;
    cursor: pointer;
}

.rp-req > summary::-webkit-details-marker {
    display: none;
}

.rp-req > summary:hover {
    color: var(--text-main);
}

.rp-req-body {
    margin-top: var(--s-2);
    padding: var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: var(--text-xs);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

.rp-req-row {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: 4px 0;
}

.rp-req-marker {
    flex: 0 0 auto;
    color: var(--text-dim);
}

.rp-req-text {
    min-width: 0;
    overflow-wrap: break-word;
}

.rp-req-link {
    color: var(--accent-text);
}

.rp-req-copy {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.rp-req-copy:hover {
    color: var(--text-main);
}

.rp-req-gap {
    height: var(--s-2);
}

/* ——— форма репетитора ——— */

.rp-fields {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    max-width: var(--measure);
}

.rp-label {
    display: block;
    margin-bottom: 4px;
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
}

.rp-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-2);
}

/* ——— пустое состояние и пагинация ——— */

.rp-empty {
    margin: 0 var(--s-6) var(--s-6);
    padding: var(--s-10) var(--s-4);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-md);
    text-align: center;
}

.rp-empty-title {
    font-size: var(--text-md);
    font-weight: var(--fw-semi);
    color: var(--text-main);
}

.rp-empty .rp-hint {
    margin: var(--s-1) auto var(--s-3);
    max-width: 52ch;
}

.rp-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    margin: 0 var(--s-6) var(--s-6);
}

.rp-pager-info {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ==========================================================================
   Кабинет семьи
   ========================================================================== */

.cab-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
}

.cab-page-title {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: var(--fw-semi);
    line-height: var(--lh-tight);
    color: var(--text-main);
}

.cab-page-sub {
    margin-top: var(--s-1);
    font-size: var(--text-sm);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

.cab-page-head .btn {
    margin-left: auto;
}

/* ——— сегменты: общая рамка, активный — surface-2, без акцента ——— */

.cab-tabs {
    display: inline-flex;
    gap: 0;
    max-width: 100%;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--bg-subtle);
    overflow-x: auto;
}

.cab-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 var(--s-4);
    border: 0;
    border-radius: calc(var(--r-sm) - 2px);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--fw-semi);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.cab-tab:hover {
    color: var(--text-main);
}

.cab-tab.active {
    background: var(--surface-2);
    border: 0;
    color: var(--text-main);
}

/* ——— блок «К оплате» ——— */

.cab-pay-hero {
    margin-bottom: var(--s-3);
    padding: var(--s-5);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}

.cab-pay-hero-label {
    font-size: var(--text-2xs);
    font-weight: var(--fw-semi);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cab-pay-hero-value {
    margin-top: var(--s-1);
    font-size: var(--text-4xl);
    font-weight: var(--fw-semi);
    line-height: var(--lh-tight);
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.cab-pay-hero-zero {
    font-size: var(--text-xl);
    font-weight: var(--fw-semi);
    color: var(--text-main);
}

.cab-pay-hero-meta {
    margin-top: var(--s-2);
    font-size: var(--text-sm);
    line-height: var(--lh-snug);
    color: var(--text-muted);
}

.cab-section {
    padding: var(--s-4);
    border-radius: var(--r-md);
}

.cab-nowrap {
    white-space: nowrap;
}

.cab-hint {
    font-size: var(--text-xs);
    line-height: var(--lh-snug);
}

.cab-card-title {
    font-weight: var(--fw-semi);
}

/* ——— недели и три поля оплаты ——— */

.cab-pay {
    margin-top: var(--s-3);
}

.cab-pay-week {
    border-color: var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}

.cab-pay-week-summary {
    min-height: var(--tap);
    padding: var(--s-2) var(--s-4);
}

.cab-pay-week-main {
    font-size: var(--text-sm);
}

.cab-pay-week-body {
    padding: 0 var(--s-4) var(--s-3);
}

.cab-pay-week-toggle {
    color: var(--text-muted);
}

.cab-pay-chip {
    padding: 2px var(--s-2);
    font-size: var(--text-2xs);
    font-weight: var(--fw-semi);
}

.cab-pay-chip-debt {
    border-color: var(--warn-bd);
    background: var(--warn-bg);
    color: var(--warn);
}

.cab-pay-chip-wait {
    border-color: var(--warn-bd);
    background: var(--warn-bg);
    color: var(--warn);
}

.cab-pay-chip-ok {
    border-color: var(--ok-bd);
    background: var(--ok-bg);
    color: var(--ok);
}

.cab-team-pay + .cab-team-pay {
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--border);
}

.cab-team-pay-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
}

.cab-team-pay-name {
    font-size: var(--text-sm);
    font-weight: var(--fw-semi);
    color: var(--text-main);
}

.cab-pay .sr-pay-grid {
    gap: var(--s-2);
    margin-top: var(--s-2);
}

.cab-pay .sr-pay-cell {
    gap: 2px;
    padding: 9px var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
}

.cab-pay .sr-pay-label {
    font-size: var(--text-2xs);
    font-weight: var(--fw-semi);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cab-pay .sr-pay-value {
    font-size: var(--text-xl);
    font-weight: var(--fw-semi);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cab-pay .sr-pay-cell--left {
    border-color: var(--warn-bd);
    background: var(--surface);
}

.cab-pay .sr-pay-cell--left .sr-pay-value {
    font-size: var(--text-lg);
    color: var(--warn);
}

.cab-pay-form {
    gap: var(--s-2);
    align-items: center;
    margin-top: var(--s-2);
}

.cab-pay-form .btn {
    min-height: var(--control-h);
    padding: 0 var(--s-3);
    font-size: var(--text-sm);
}

.btn-cab-primary {
    border: 1px solid var(--accent);
    border-radius: var(--r-sm);
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: var(--text-sm);
    font-weight: var(--fw-semi);
}

.btn-cab-primary:hover {
    background: var(--accent-hover);
    color: var(--accent-contrast);
}

.btn-cab-ghost {
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text-main);
    font-size: var(--text-sm);
    font-weight: var(--fw-semi);
}

.btn-cab-ghost:hover {
    background: var(--surface-2);
    color: var(--text-main);
}

.cab-pay-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--s-2);
    padding: 2px var(--s-2);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    font-size: var(--text-2xs);
    font-weight: var(--fw-semi);
}

.cab-pay-note--wait {
    border-color: var(--warn-bd);
    background: var(--warn-bg);
    color: var(--warn);
}

.cab-pay-note--ok {
    border-color: var(--ok-bd);
    background: var(--ok-bg);
    color: var(--ok);
}

.cab-team-pay-rows {
    margin-top: var(--s-2);
}

.cab-team-pay-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    min-height: var(--tap);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.cab-team-pay-row:last-child {
    border-bottom: 0;
}

/* ——— реквизиты и квитанции ——— */

.cab-pay-card {
    padding: var(--s-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.cab-pay-row {
    padding: 3px 0;
    font-size: var(--text-xs);
}

.cab-pay-link {
    color: var(--accent-text);
}

.cab-copy {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
}

.cab-copy:hover {
    color: var(--text-main);
}

.cab-receipts {
    margin-top: var(--s-2);
    padding-top: var(--s-2);
    border-top: 1px solid var(--border);
}

.cab-receipts-summary {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: var(--tap);
    font-size: var(--text-sm);
    font-weight: var(--fw-semi);
    color: var(--text-main);
    list-style: none;
    cursor: pointer;
}

.cab-receipts-summary::-webkit-details-marker {
    display: none;
}

.cab-receipt-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: var(--s-2);
    min-height: var(--tap);
    border-top: 1px solid var(--border);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.cab-file-type {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 8px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.cab-receipt-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ——— история оплат ——— */

.cab-history-month-label {
    margin-bottom: 6px;
    font-size: var(--text-2xs);
    font-weight: var(--fw-semi);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cab-history-row {
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--border);
}

.cab-history-main {
    font-size: var(--text-sm);
}

.cab-history-week {
    font-weight: var(--fw-semi);
}

.cab-history-sums,
.cab-history-payments {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.cab-status {
    padding: 2px var(--s-2);
    border-radius: var(--r-pill);
    font-size: var(--text-2xs);
    font-weight: var(--fw-semi);
}

.cab-status-paid {
    border: 1px solid var(--ok-bd);
    background: var(--ok-bg);
    color: var(--ok);
}

.cab-status-debt {
    border: 1px solid var(--warn-bd);
    background: var(--warn-bg);
    color: var(--warn);
}

.cab-status-pending {
    border: 1px solid var(--warn-bd);
    background: var(--warn-bg);
    color: var(--warn);
}

.cab-status-empty {
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
}

/* ——— отчёты в кабинете ——— */

.cab-report {
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
}

.cab-report-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}

.cab-report-title {
    font-size: var(--text-md);
    font-weight: var(--fw-semi);
    color: var(--text-main);
}

.cab-report-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.cab-report-section + .cab-report-section {
    margin-top: var(--s-3);
}

.cab-label {
    margin-bottom: 4px;
    font-size: var(--text-2xs);
    font-weight: var(--fw-semi);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cab-report-text {
    max-width: var(--measure);
    font-size: var(--text-lg);
    line-height: var(--lh-read);
    color: var(--text-main);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.cab-reports {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.cab-more-reports > summary {
    list-style: none;
    cursor: pointer;
}

.cab-more-reports > summary::-webkit-details-marker {
    display: none;
}

/* ——— адаптив ——— */

@media (max-width: 1100px) {
    .rp-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .rp-actions {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .rp-actions .rp-btn {
        width: auto;
        flex: 1 1 auto;
    }
}

@media (max-width: 767.98px) {
    .rp-head {
        padding: var(--s-4) var(--s-4) var(--s-2);
    }

    .rp-sub {
        font-size: var(--text-xs);
    }

    .rp-head-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .rp-filters {
        padding: var(--s-2) var(--s-4) var(--s-3);
    }

    .rp-search {
        width: 100%;
        margin-left: 0;
    }

    .rp-note,
    .rp-claims {
        margin-right: var(--s-4);
        margin-left: var(--s-4);
    }

    .rp-rows {
        margin: 0 var(--s-4) var(--s-4);
    }

    .rp-row {
        grid-template-areas:
            "who money"
            "status money";
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--s-2) var(--s-3);
        min-height: 0;
        padding: var(--s-3);
    }

    .rp-who-col {
        grid-area: who;
    }

    /* У персонала в статусе две метки — им нужна вся ширина строки,
       иначе на 390 px «Отчёт: …» и «Оплата: …» разъезжаются на две строки. */
    .rp-item--staff > .rp-row {
        grid-template-areas:
            "who money"
            "status status";
    }

    .rp-status-col {
        grid-area: status;
    }

    .rp-money {
        grid-area: money;
        align-self: center;
    }

    .rp-panel {
        padding: var(--s-3);
    }

    .rp-pay-grid {
        max-width: none;
        gap: 6px;
    }

    .rp-pay-cell {
        padding: 7px var(--s-2);
    }

    .rp-pay-value {
        font-size: var(--text-lg);
    }

    .rp-actions {
        flex-direction: column;
    }

    .rp-actions .rp-btn {
        width: 100%;
    }

    .rp-journal .rp-form {
        flex-wrap: wrap;
    }

    .rp-journal .rp-field--amount,
    .rp-journal .rp-field--note {
        width: 100%;
    }

    .rp-empty {
        margin-right: var(--s-4);
        margin-left: var(--s-4);
    }

    .rp-pager {
        margin-right: var(--s-4);
        margin-left: var(--s-4);
    }

    .cab-pay-hero {
        padding: var(--s-4);
    }

    .cab-pay-hero-value {
        font-size: var(--text-3xl);
    }

    .cab-report {
        padding: var(--s-4);
    }

    .cab-pay .sr-pay-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cab-pay .sr-pay-cell {
        padding: 7px var(--s-2);
    }

    .cab-pay .sr-pay-value {
        font-size: var(--text-md);
    }

    .cab-pay .sr-pay-cell--left .sr-pay-value {
        font-size: var(--text-sm);
    }
}


/* Подсказка о второй странице списка отчётов. */
.rp-page-hint {
    margin: var(--s-2) 0 var(--s-3);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--accent-border);
    border-radius: var(--r-sm);
    background: var(--accent-soft-bg);
    font-size: var(--text-sm);
    color: var(--text-main);
}

.rp-page-hint-link {
    margin-left: var(--s-2);
    color: var(--accent-text);
    font-weight: var(--fw-semi);
    text-decoration: none;
}

.rp-page-hint-link:hover {
    text-decoration: underline;
}