/* ============================================================
   base.css — кнопки, таблицы, шапка приложения.
   Выжимка из components.css/layout.css проекта ПОДС2: только то,
   что реально использует roster_assembly.js (.btn/.btn-filled/
   .btn-outlined/.btn-sm, .data-table-wrap). Цвета — только токены
   var(--md-*) из tokens.css, иначе ломается тёмная тема.
   ============================================================ */

/* ─── Шапка окна ──────────────────────────────────────────── */
.app-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 20px;
    background: var(--md-surface);
    border-bottom: 1px solid var(--md-outline-variant);
    position: sticky; top: 0; z-index: var(--z-sticky);
}
.app-bar__title { font-weight: 700; font-size: 15px; letter-spacing: .01em; }
.app-bar__sub   { color: var(--md-on-surface-hint); font-size: 12px; }
.app-bar__spacer { flex: 1; }

.app-main { padding: 16px 20px 60px; }

/* ─── Кнопки ──────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 16px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: var(--md-radius-md);
    font-family: var(--md-font-body);
    font-size: 0.835rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s var(--md-motion-standard);
    white-space: nowrap;
    text-decoration: none;
    outline: none;
    letter-spacing: 0.01em;
}
.btn:active   { transform: scale(0.97); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-filled {
    background: var(--md-primary);
    color: #ffffff;
    border-color: var(--md-primary-dark);
    box-shadow: 0 1px 3px rgba(58, 99, 88, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.btn-filled:hover:not(:disabled) {
    background: var(--md-primary-hover);
    box-shadow: 0 3px 8px rgba(58, 99, 88, 0.22);
    transform: translateY(-1px);
}

.btn-outlined {
    background: var(--md-surface);
    color: var(--md-on-surface-variant);
    border-color: var(--md-outline);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.btn-outlined:hover:not(:disabled) {
    background: var(--md-surface-variant);
    color: var(--md-on-surface);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.btn-sm { height: 30px; padding: 0 12px; font-size: 0.78rem; }

/* ─── Таблицы ─────────────────────────────────────────────── */
.data-table-wrap {
    overflow-x: auto;
    border-radius: var(--md-radius-lg);
    border: 1px solid var(--md-outline-variant);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--md-surface);
    font-size: 0.835rem;
}

/* ─── Заголовки ───────────────────────────────────────────── */
h2, h3 { font-family: var(--md-font-display); font-weight: 600; }
h2 { font-size: 1.28rem; }
h3 { font-size: 1.08rem; }