/* Спільні стилі застосунку. Основа — Bootstrap 5, тут тільки те, чого в ньому немає. */

:root {
    --app-bg: #f4f6fb;
    --app-surface: #ffffff;
    --app-border: #e5e8ef;
    --app-text-muted: #6b7280;
    --app-primary: #4f46e5;
    --app-primary-soft: #eef0ff;
    --app-sidebar-width: 250px;

    /* основний колір Bootstrap — у тон меню */
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4f46e5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #4338ca;
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body {
    background: var(--app-bg);
    min-height: 100vh;
}

.btn-primary {
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: #4338ca;
    --bs-btn-hover-border-color: #4338ca;
    --bs-btn-active-bg: #3730a3;
    --bs-btn-active-border-color: #3730a3;
}

/* ---------- каркас: меню зліва + вміст ---------- */

.app {
    display: flex;
    min-height: 100vh;
}

.app-main {
    flex: 1;
    min-width: 0;          /* щоб широкі таблиці не розпирали сторінку */
    padding: 28px 32px;
    max-width: 1400px;
}

@media (max-width: 991.98px) {
    .app { flex-direction: column; }
    .app-main { padding: 16px; }
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 1.15rem;
    color: #111827;
    text-decoration: none;
}
.app-brand i { color: var(--app-primary); font-size: 1.4rem; }

/* верхня смужка (тільки телефон) */
.app-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* бічне меню (комп'ютер) */
@media (min-width: 992px) {
    .app-sidebar {
        width: var(--app-sidebar-width);
        flex-shrink: 0;
        background: var(--app-surface);
        border-right: 1px solid var(--app-border);
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}

.sidebar-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 20px 14px;
    width: 100%;
    min-height: 100%;
}
.sidebar-inner > .app-brand { padding: 0 10px 14px; }

.nav-section {
    margin: 16px 10px 6px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9ca3af;
}
/* логін у меню — як є (Geromi і geromi — різні користувачі) */
.nav-section.text-transform-none {
    text-transform: none;
    letter-spacing: normal;
    font-size: .8rem;
}

.nav-item-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #374151;
    text-decoration: none;
    font-size: .95rem;
}
.nav-item-link i { font-size: 1.05rem; color: #9ca3af; }
.nav-item-link:hover { background: #f3f4f6; color: #111827; }
.nav-item-link.active { background: var(--app-primary-soft); color: var(--app-primary); font-weight: 600; }
.nav-item-link.active i { color: var(--app-primary); }

/* ---------- заголовок сторінки ---------- */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}
.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: #111827;
}
.page-subtitle {
    color: var(--app-text-muted);
    font-size: .9rem;
    margin-top: 2px;
}
/* головна: картинка-фон на всю область праворуч від бічної панелі (заголовок і картки — поверх неї) */
.app-main.page-home {
    max-width: none;       /* фон до правого краю екрана, а не до 1400px */
    background: #f1effb url("../smartum-3.jpg") center / cover no-repeat;
}
.page-hero {
    padding: 24px 0 16px;
}
.page-hero .page-title {
    font-size: 2rem;
}
.page-hero .page-subtitle {
    font-size: 1rem;
}
.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ---------- картки й таблиці ---------- */

.card {
    border: 1px solid var(--app-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.table-app {
    margin-bottom: 0;
}
.table-app thead th {
    background: #f9fafb;
    color: var(--app-text-muted);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--app-border);
    white-space: nowrap;
    padding: 12px 16px;
}
.table-app tbody td {
    padding: 12px 16px;
    vertical-align: middle;
}
.table-app tbody tr:last-child td { border-bottom: 0; }
.table-app tfoot td { padding: 12px 16px; border-top: 1px solid var(--app-border); border-bottom: 0; }

/* щільна таблиця для широких звітів (виписка учня — 10 колонок): менші відступи і шрифт */
.table-app.table-compact { font-size: .875rem; }
.table-app.table-compact thead th,
.table-app.table-compact tbody td,
.table-app.table-compact tfoot td { padding: 10px 8px; }

/* колонка з кнопками дій — притиснута праворуч */
.col-actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}
.col-actions form { display: inline; }

/* маленька квадратна кнопка з іконкою */
.btn-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

/* сторнований запис (урок, оплата): лишається в історії, але приглушений */
.row-storned td { color: #9ca3af; }
.row-storned td.fw-medium { text-decoration: line-through; }

.empty-state {
    text-align: center;
    color: var(--app-text-muted);
    padding: 40px 16px;
}
.empty-state i { font-size: 2rem; display: block; margin-bottom: 8px; color: #c7cbd4; }

/* іконка на картці звіту */
.report-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-primary-soft);
    color: var(--app-primary);
    font-size: 1.3rem;
}

/* плитка швидкої дії на головній */
.quick-action { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.quick-action:hover { border-color: var(--app-primary); box-shadow: 0 4px 14px rgba(79, 70, 229, .12); }

/* сторінка входу */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.login-card { width: 100%; max-width: 400px; }

/* сторінки помилок */
.error-page { text-align: center; max-width: 520px; margin: 10vh auto 0; }
.error-code { font-size: 5.5rem; font-weight: 800; line-height: 1; letter-spacing: -2px; margin-bottom: 12px; }

/* друк звіту: без меню й кнопок */
@media print {
    .app-sidebar, .app-topbar, .page-actions { display: none !important; }
    .app-main { padding: 0; }
    body { background: #fff; }
}

/* ---------- форми ---------- */

.form-card { max-width: 900px; }
.form-label { font-weight: 500; font-size: .9rem; color: #374151; }
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.form-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* ===== тижневий календар розкладу (scheduleWeek.html) =====
   Позиції занять приходять з сервера у ХВИЛИНАХ (--start, --len від початку сітки);
   --ppm (пікселів на хвилину) — єдиний масштаб сітки. 30 хв = одна клітинка. */
.week-scroll { overflow-x: auto; }
.week {
    --ppm: 1.4px;
    --time-col: 56px;
    --day-min: 120px;     /* найвужча колонка дня */
    --lane-min: 70px;     /* найвужчий блок заняття: колонка, де N занять одночасно, — не вужча за N × 70px */
    /* сума найменших ширин колонок: вміщається — календар на всю ширину картки (вільне місце ділять дні порівну),
       ні — прокрутка вбік усередині картки (сторінка не їде).
       Не width: max-content — тоді браузер робить УСІ колонки 1fr рівними найширшій */
    min-width: calc(var(--time-col)
        + max(var(--day-min), calc(var(--l1) * var(--lane-min)))
        + max(var(--day-min), calc(var(--l2) * var(--lane-min)))
        + max(var(--day-min), calc(var(--l3) * var(--lane-min)))
        + max(var(--day-min), calc(var(--l4) * var(--lane-min)))
        + max(var(--day-min), calc(var(--l5) * var(--lane-min)))
        + max(var(--day-min), calc(var(--l6) * var(--lane-min)))
        + max(var(--day-min), calc(var(--l7) * var(--lane-min))));
}
.week-head, .week-body {
    display: grid;
    /* --l1…--l7 — найбільше занять одночасно в Пн…Нд (з сервера, WeekCalendar.Day.maxLanes) */
    grid-template-columns: var(--time-col)
        minmax(max(var(--day-min), calc(var(--l1) * var(--lane-min))), 1fr)
        minmax(max(var(--day-min), calc(var(--l2) * var(--lane-min))), 1fr)
        minmax(max(var(--day-min), calc(var(--l3) * var(--lane-min))), 1fr)
        minmax(max(var(--day-min), calc(var(--l4) * var(--lane-min))), 1fr)
        minmax(max(var(--day-min), calc(var(--l5) * var(--lane-min))), 1fr)
        minmax(max(var(--day-min), calc(var(--l6) * var(--lane-min))), 1fr)
        minmax(max(var(--day-min), calc(var(--l7) * var(--lane-min))), 1fr);
}
/* колонка часу й кут шапки лишаються на місці при прокрутці вбік */
.week-corner, .week-times {
    position: sticky;
    left: 0;
    z-index: 3;
}
.week-corner { background: #f9fafb; }
.week-times { background: var(--app-surface); }
.week-head {
    border-bottom: 1px solid var(--app-border);
    background: #f9fafb;
}
.week-day-head {
    padding: 10px 8px;
    text-align: center;
    font-weight: 600;
    font-size: .85rem;
    color: var(--app-text-muted);
    border-left: 1px solid var(--app-border);
}
.week-time {
    height: calc(30 * var(--ppm));
    padding: 2px 8px 0 0;
    text-align: right;
    font-size: .72rem;
    color: var(--app-text-muted);
}
.week-time:nth-child(even) { visibility: hidden; }          /* підпис тільки на цілих годинах */
.week-col {
    position: relative;
    height: calc(var(--total) * var(--ppm));
    border-left: 1px solid var(--app-border);
}
.week-cell {
    display: block;
    width: 100%;
    height: calc(30 * var(--ppm));
    padding: 0;
    border: 0;
    border-top: 1px solid var(--app-border);
    background: transparent;
    cursor: pointer;
}
.week-cell:nth-child(even) { border-top-style: dashed; }   /* пів години — пунктир */
.week-cell:hover { background: var(--app-primary-soft); }
.week-cell:hover::after { content: "+"; color: var(--app-primary); font-weight: 600; }
.week-event {
    position: absolute;
    top: calc(var(--start) * var(--ppm) + 1px);
    height: calc(var(--len) * var(--ppm) - 2px);
    left: calc(100% / var(--lanes) * var(--lane) + 2px);
    width: calc(100% / var(--lanes) - 4px);
    overflow: hidden;
    padding: 4px 6px;
    border-radius: 6px;
    border-left: 4px solid var(--ev-border);
    background: var(--ev-bg);
    color: #1f2937;
    font-size: .75rem;
    line-height: 1.25;
    text-decoration: none;
    z-index: 1;
}
/* кожен рядок блоку — без переносу посеред слова; що не влізло — "…" (повністю — у підказці title) */
.week-event > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.week-event:hover { color: #1f2937; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); z-index: 2; }
.week-event.is-dimmed { opacity: .3; }
/* кольори груп: gangId % 6 */
.ev-c0 { --ev-bg: #eef0ff; --ev-border: #4f46e5; }
.ev-c1 { --ev-bg: #e6f6ee; --ev-border: #15803d; }
.ev-c2 { --ev-bg: #fff4e5; --ev-border: #c2410c; }
.ev-c3 { --ev-bg: #fde8f1; --ev-border: #be185d; }
.ev-c4 { --ev-bg: #e5f4fb; --ev-border: #0369a1; }
.ev-c5 { --ev-bg: #f3ecfd; --ev-border: #7e22ce; }