/* Единый стиль табличных строк (отчёты руководителя, списки админа):
   hairline-границы + hover-подсветка. */
.report-row:hover {
    background: var(--color-surface-alt);
}

.admin-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-border-soft);
    padding-bottom: 16px;
}

    .admin-nav button {
        background: var(--color-surface-muted);
        color: var(--color-text);
    }

        .admin-nav button.active {
            background: var(--color-brand);
            color: #fff;
        }

/* Единое оформление таблиц (как во вкладке «Сводная»): бордер + скруглённый
   контейнер (единое тело), шапка на surface-muted со скруглёнными верхними углами. */
.data-table-wrap {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

    .data-table thead tr {
        background: var(--color-surface-muted);
    }

    .data-table th {
        padding: 12px;
        text-align: left;
        font-weight: 600;
        color: var(--color-text);
    }

    .data-table td {
        padding: 12px;
        border-top: 1px solid var(--color-border-soft);
    }

/* Кнопки действий в строке таблицы — по правому краю с отступом между ними. */
.row-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Заголовки карточек — единый вертикальный отступ (выровнены по верхнему краю плашки). */
.card > h3,
.card > .flex-between {
    margin-top: 0;
    margin-bottom: 16px;
}

    .card > .flex-between h3 {
        margin: 0;
    }

/* Вкладка «Пользователи»: карточка во всю высоту экрана, а список заполняет плашку
   и скроллится ВНУТРИ (иначе .search-results с max-height:62vh оставлял пустоту снизу).
   ~130px — топбар + футер + вертикальные паддинги .app-main. */
#tab-users > .card {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 130px);
}

#tab-users #usersContent {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

    #tab-users #usersContent .search-results {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        margin: 0;
    }

/* Строка мероприятия в модалке категории: основная линия (название/норма/документ/
   удаление) + поля имени документа, описания и галочек проверки под ней.
   Все элементы выровнены по левому краю и на всю ширину (без «лесенки»). */
.activity-row {
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    padding: 10px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

/* Каждая строка/поле — на всю ширину, единый box-sizing, без внешних отступов. */
.activity-row > .act-line,
.activity-row > .act-docname,
.activity-row > .act-desc,
.activity-row > .act-checks {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.activity-row .act-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Поля имени документа/описания — обычная высота, на всю ширину. */
.activity-row .act-docname,
.activity-row .act-desc {
    height: 34px;
    box-sizing: border-box;
}

/* Чекбоксы: глобальное .form-group input {width:100%;height:38px} раздувает их —
   приводим к нормальному размеру. Фон становится тёмным через color-scheme:dark. */
.activity-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    accent-color: var(--color-accent);
    cursor: pointer;
}

    .activity-row .act-line .act-name {
        flex: 1 1 auto;
        min-width: 0;
    }

    .activity-row .act-line .act-count {
        width: 64px;
        flex: 0 0 auto;
    }

.activity-row .act-doc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* Галочки назначения проверки — прижаты к левому краю, в одну линию. */
.activity-row .act-checks {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 16px;
    padding-left: 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}

    .activity-row .act-checks label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0;
    }

.category-card {
    transition: all 0.2s;
}

    .category-card:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

.category-checkboxes label {
    display: block;
    margin: 10px 0;
    text-align: left;
}

/* Мобильный: широкие JS-таблицы (отчёты, списки) прокручиваются по горизонтали. */
@media (max-width: 768px) {
    #reportContent,
    #usersContent,
    #categoriesContent,
    #paymentsContent,
    #periodsContent {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Форма добавления периода: на узком экране поля в столбец во всю ширину,
       чтобы date-инпуты и кнопка не выпирали за край. */
    .period-form {
        flex-direction: column;
        align-items: stretch;
    }

        .period-form > div {
            width: 100%;
        }

        .period-form input,
        .period-form .btn-primary {
            width: 100%;
            box-sizing: border-box;
        }

    /* Таблица периодов: компактнее — меньше паддинги и шрифт. */
    #periodsContent table {
        font-size: 13px;
    }

        #periodsContent th,
        #periodsContent td {
            padding: 6px 4px !important;
        }
}