/* =====================================================================
   Тема нового дизайну: МОЇ КЛАСИ (views/beta-theme/classes/index.php, _manage_classes, _manage_students, _modals)
   Голова сторінки, сітка «список класів | картка учнів», таблиця учнів, модалки.
   Компоненти — з beta.css (.tb-catalog-head, .tb-lib-item, .tb-card, .tb-table, .tb-note, .tb-empty, .tb-modal-*);
   тут лише розкладка з префіксом tb-classes-. Шкала відступів 4/8/12/16/24/32, проміжок карток 14px.
   ===================================================================== */

/* ---------- голова ---------- */
/* голова — у обгортці ng-app, а не прямо в .tb-page: ті самі відступи, що й _layout.css дає .tb-page > .tb-catalog-head
   (старт на лінії верху бічного меню, 16px до змісту) */
.tb-classes-app > .tb-catalog-head { margin-top: 0; margin-bottom: var(--s-4); }
.tb-classes .tb-catalog-head-row .tb-btn { flex: none; }
.tb-classes .tb-btn svg { width: 18px; height: 18px; flex: none; }
.tb-classes .tb-btn-sm svg { width: 16px; height: 16px; }

/* ---------- завантаження ---------- */
.tb-classes-loading { min-height: 160px; }
.tb-classes-main-loading { min-height: 240px; }

/* ---------- сітка: список класів | учні ---------- */
.tb-classes-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.tb-classes-side, .tb-classes-content { min-width: 0; }
.tb-classes-side { display: grid; gap: var(--s-3); }
.tb-classes-side-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 36px; }
.tb-classes-side-head .tb-label { margin: 0; }
.tb-classes-side-head .tb-chip-btn svg { width: 16px; height: 16px; }

/* ---------- клас у списку (.tb-lib-item) ---------- */
.tb-classes-item.tb-lib-item { grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-2) var(--s-3) 14px; }
.tb-classes-item .tb-lib-body { gap: 2px; }
.tb-classes-item-cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tb-classes-item-cover:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.tb-classes-grade { font: 800 15px/1 var(--f-display); }
.tb-classes-name { font-size: 16px; overflow-wrap: anywhere; }
.tb-classes-name small { font: 600 13px/1.2 var(--f-body); color: var(--ink-3); }
.tb-classes-menu { position: relative; z-index: 2; }
.tb-classes-menu .tb-btn-icon { color: var(--ink-3); }
.tb-classes-menu.open .tb-btn-icon, .tb-classes-menu .tb-btn-icon:hover { color: var(--ink); }
.tb-classes-menu .dropdown-menu { min-width: 200px; }

/* ---------- картка учнів ---------- */
.tb-classes-main-head { flex-wrap: wrap; }
.tb-classes-main-head .tb-card-head-text { flex: 1 1 160px; }
.tb-classes-main-head .tb-card-head-text b { font-size: 18px; overflow-wrap: anywhere; }
.tb-classes-main-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-left: auto; }
.tb-classes-main > .tb-note { margin: 0 0 var(--s-3); }

/* заявки класу на події */
.tb-classes-bids { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-2) var(--s-4); }
.tb-classes-bids p { margin: 0 0 var(--s-1); }
.tb-classes-bids ul { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.tb-classes-bids li { display: flex; align-items: center; gap: 6px; color: var(--ink); }
.tb-classes-bids-none { grid-column: 1 / -1; }
.tb-classes-bids-link { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; color: var(--ink-2) !important; }
.tb-classes-bids-link:hover { background: rgba(255, 255, 255, .7); color: var(--ink) !important; }
.tb-classes-bids .tb-classes-bids-link svg { width: 14px; height: 14px; vertical-align: 0; color: currentColor; }

/* рік навчання */
.tb-classes-grade-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.tb-classes-grade-row .tb-select { flex: 1 1 180px; width: auto; }

/* «обрати всіх» і масові дії */
.tb-classes-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); min-height: 50px; margin: 0 0 var(--s-1); padding: 6px var(--s-2) 6px 14px; border: 2px solid transparent; border-radius: 12px; background: var(--paper); }
.tb-classes-toolbar.is-on { border-color: var(--go); background: var(--paper-2); }
.tb-classes-check { display: inline-flex; align-items: center; gap: 10px; min-height: 34px; margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.tb-classes-check input[type="checkbox"] { margin: 0; }
.tb-classes-check b { font-weight: 800; color: var(--ink); }
.tb-classes-bulk { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* таблиця учнів (.tb-table без обгортки — меню дій не обрізається) */
.tb-classes-table { min-width: 0; }
.tb-classes-table .tb-classes-col-check { width: 44px; padding-right: 0; }
.tb-classes-table .tb-classes-col-check input { display: block; margin: 0; }
.tb-classes-table .tb-classes-col-act { width: 52px; padding: 6px var(--s-2); text-align: right; }
.tb-classes-table td { font-size: 15px; }
.tb-classes-student { margin-right: 6px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.tb-classes-code { display: inline-block; padding: var(--s-1) 10px; border-radius: 8px; background: var(--paper); color: var(--ink); font: 700 14px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; white-space: nowrap; }
.tb-classes-table tr.is-selected .tb-classes-code { background: #fff; }
.tb-classes-empty { margin: 0; }

/* ---------- модалки (bootstrap-каркас, вміст — .tb-modal-*) ---------- */
.tb-classes-modal .modal-dialog.tb-classes-modal-sm { width: 460px; max-width: calc(100% - 32px); margin: 8vh auto 32px; }
.tb-classes-modal .modal-dialog.tb-classes-modal-wide { width: 780px; max-width: calc(100% - 32px); margin: 8vh auto 32px; }
.tb-classes-modal .modal-body { padding: 26px; }
.tb-classes-modal .tb-modal-head { margin-bottom: var(--s-4); }
.tb-classes-modal .tb-modal-head .tb-modal-title { color: var(--ink); }
.tb-classes-modal .tb-x { display: grid; place-items: center; padding: 0; margin: -6px -6px 0 0; }
.tb-classes-modal .tb-x:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.tb-classes-modal-sub { margin: 0 0 var(--s-4); font-size: 14px; }
.tb-classes-modal .tb-input, .tb-classes-modal .tb-select { width: 100%; }
.tb-classes-modal .tb-field:last-of-type { margin-bottom: 0; }
.tb-classes-modal .tb-modal-foot { margin-top: var(--s-5); }
.tb-classes-modal-loading { display: flex; justify-content: center; padding: 0 0 var(--s-3); color: var(--ink-3); }
.tb-classes-pick { display: grid; gap: var(--s-2); }
.tb-classes-pick .tb-toggle-chip { width: 100%; margin: 0; }

/* «додати учнів»: дві картки з «або» між ними */
.tb-classes-invite { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-3); align-items: stretch; }
.tb-classes-invite-col { display: flex; flex-direction: column; }
.tb-classes-invite-col .tb-modal-foot { margin-top: auto; padding-top: var(--s-4); }
.tb-classes-invite-hint { margin: 0 0 var(--s-4); }
.tb-classes-invite-or { align-self: center; font: 800 13px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tb-classes-invite-code-col { align-items: center; text-align: center; }
.tb-classes-invite-code { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 64px; margin: 0 0 var(--s-3); padding: var(--s-3); border-radius: 12px; background: var(--paper); color: var(--ink); font: 800 26px/1.1 var(--f-display); letter-spacing: .06em; overflow-wrap: anywhere; }
.tb-classes-invite-update { margin: var(--s-3) 0 0; }
.tb-classes-invite-update a { color: var(--ink); font-weight: 700; }

/* ---------- адаптив ---------- */
@media (max-width: 1199px) {
    .tb-classes-grid { grid-template-columns: 260px minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .tb-classes-grid { grid-template-columns: minmax(0, 1fr); }
    .tb-classes-invite { grid-template-columns: minmax(0, 1fr); }
    .tb-classes-invite-or { justify-self: center; }
}
@media (max-width: 640px) {
    .tb-classes-main-actions { width: 100%; margin-left: 0; }
    .tb-classes-main-actions .tb-btn { flex: 1 1 0; justify-content: center; }
    .tb-classes-toolbar { padding: var(--s-2) var(--s-3); }
    .tb-classes-bulk, .tb-classes-bulk .tb-btn { width: 100%; }
    .tb-classes-bulk .tb-btn { justify-content: center; }
    .tb-classes-grade-row .tb-btn { width: 100%; justify-content: center; }
    /* .tb-table рядком-карткою: 1 — вибір, 2 — учень, 4 — меню; 3 (пароль) — другим рядком */
    .tb-classes-table tr { grid-template-columns: 26px minmax(0, 1fr) auto; }
    .tb-classes-table td:nth-child(4) { font-size: inherit; }
    .tb-classes-table .tb-classes-col-act { width: auto; padding: 0; }
    .tb-classes-modal .modal-body { padding: 20px 16px; }
    .tb-classes-modal .modal-dialog.tb-classes-modal-sm, .tb-classes-modal .modal-dialog.tb-classes-modal-wide { margin: 16px auto; }
}