* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: #f4f5f7;
    color: #222;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: #1f3b73;
}
header a { color: #fff; text-decoration: none; margin-left: 16px; }
header .logo { margin-left: 0; font-weight: 600; font-size: 18px; }

main { max-width: 1400px; margin: 0 auto; padding: 20px; }

h1 { font-size: 20px; margin: 24px 0 12px; }

/* ---------- Кнопки ---------- */
.btn {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #c7ccd6;
    border-radius: 6px;
    background: #fff;
    color: #222;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}
.btn:hover { background: #eef1f6; }
.btn.primary { background: #1f3b73; color: #fff; border-color: #1f3b73; }
.btn.small { padding: 2px 8px; }
.btn.danger { color: #b3261e; }

/* ---------- Неделя ---------- */
.week-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.week-title { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.week-title span { color: #666; font-size: 14px; }
.week-title a { font-size: 13px; color: #1f3b73; }

.week {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.day {
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #e1e4ea;
}
.day.today { border: 2px solid #1f3b73; }
.day h2 { font-size: 16px; margin: 0 0 10px; }
.day h2 span { color: #888; font-weight: normal; font-size: 14px; }

.lesson {
    border-left: 4px solid #999;
    background: #f9fafb;
    padding: 8px 10px;
    margin-bottom: 8px;
    border-radius: 4px;
}
.lesson.type-lecture { border-left-color: #2e7d32; }
.lesson.type-seminar { border-left-color: #1565c0; }
.lesson.type-lab     { border-left-color: #ef6c00; }

.lesson .time { font-size: 13px; color: #555; }
.lesson .subject { font-weight: 600; margin: 2px 0; }
.lesson .meta { font-size: 13px; color: #666; }

.empty { color: #999; font-size: 14px; }

/* ---------- ДЗ у пары ---------- */
.hw {
    margin-top: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 13px;
    background: #fff8e1;
    border: 1px solid #ffe082;
}
.hw.kind-info { background: #f1f3f6; border-color: #dde1e8; }
.hw.done { opacity: 0.55; }
.hw.done .hw-title { text-decoration: line-through; }
.hw-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.hw-title { font-weight: 600; }
.hw-text { margin-top: 4px; white-space: pre-line; line-height: 1.4; }
.hw-text summary { cursor: pointer; list-style: none; }
.hw-text summary::-webkit-details-marker { display: none; }
.hw-text summary em { color: #1f3b73; font-style: normal; }
.hw-text summary em::after { content: "показать полностью"; }
details[open].hw-text summary .preview { display: none; }
details[open].hw-text summary em::after { content: "свернуть"; }
.hw-files { margin-top: 4px; color: #666; font-style: italic; }
.hw-date { margin-top: 4px; color: #999; font-size: 12px; }

.week-actions { display: flex; gap: 8px; align-items: center; }
.week-actions form { margin: 0; }

.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; font-size: 14px; }
.flash a { color: #1f3b73; }

/* ---------- Отчёт ---------- */
.hint { color: #666; font-size: 14px; max-width: 900px; }
.row-bad td { background: #fff4e5; }
.row-old td { color: #999; }
.lessons-table small { color: #888; }
.flash.ok { background: #e8f5e9; border: 1px solid #a5d6a7; }
.flash.err { background: #fdecea; border: 1px solid #f5a8a3; }

/* ---------- Форма ---------- */
.lesson-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    align-items: end;
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e1e4ea;
}
.lesson-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #555; }
.lesson-form .wide { grid-column: span 2; }
.lesson-form input, .lesson-form select {
    padding: 7px 8px;
    border: 1px solid #c7ccd6;
    border-radius: 6px;
    font-size: 14px;
}

/* ---------- Таблица ---------- */
.lessons-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 14px;
}
.lessons-table th, .lessons-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e1e4ea;
    text-align: left;
}
.lessons-table th { background: #eef1f6; }

/* ---------- Группа и моё расписание ---------- */
.muted { color: #777; font-size: 14px; }
.flash.info { background: #e8eefb; border: 1px solid #b3c5ee; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.group-bar {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    background: #fff; border: 1px solid #e1e4ea; border-radius: 8px; padding: 12px 16px; margin-bottom: 8px;
}
.group-actions { display: flex; gap: 8px; }
.group-actions form, .actions form { margin: 0; display: inline; }
.actions { white-space: nowrap; }
.actions .btn.small { padding: 2px 7px; }

.badge { font-size: 12px; padding: 2px 6px; border-radius: 10px; background: #eceff3; color: #555; white-space: nowrap; }
.badge.lks { background: #e3f2fd; color: #1565c0; }
.badge.edited { background: #fff3e0; color: #e65100; }
.badge.own { background: #e8f5e9; color: #2e7d32; }
.row-hidden td { color: #aaa; text-decoration: line-through; }
.row-hidden td.actions, .row-hidden td:nth-last-child(2) { text-decoration: none; }

.lesson.type-other { border-left-color: #8e24aa; }

.group-form {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; align-items: end;
    background: #fff; padding: 16px; border-radius: 8px; border: 1px solid #e1e4ea;
}
.group-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #555; }
.group-form .wide { grid-column: 1 / -1; }
.group-form input, .group-form select { padding: 7px 8px; border: 1px solid #c7ccd6; border-radius: 6px; font-size: 14px; }
.lesson-form a.btn { text-align: center; }

/* ---------- Вход ---------- */
header nav { display: flex; align-items: center; flex-wrap: wrap; }
.user-login { color: #c9d6f2; margin-left: 20px; font-size: 14px; }
.logout-form { margin: 0 0 0 10px; }
.logout-form button {
    background: none; border: 1px solid #6f86b8; color: #fff; border-radius: 6px;
    padding: 4px 10px; cursor: pointer; font-size: 13px;
}
.logout-form button:hover { background: #2c4d8f; }

.login-box { max-width: 420px; margin: 40px auto; }
.login-form {
    display: flex; flex-direction: column; gap: 14px;
    background: #fff; padding: 20px; border-radius: 8px; border: 1px solid #e1e4ea;
}
.login-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #555; }
.login-form input[type=text], .login-form input[type=password] {
    padding: 9px 10px; border: 1px solid #c7ccd6; border-radius: 6px; font-size: 15px;
}
label.check { flex-direction: row !important; align-items: flex-start; gap: 8px !important; font-size: 13px; color: #444; }
.hint.small { font-size: 12px; }

.password-box {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    background: #fff8e1; border: 1px solid #ffe082; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px;
}
.password-box > div { flex-basis: 100%; }
.password-box input[type=password] { padding: 7px 8px; border: 1px solid #c7ccd6; border-radius: 6px; font-size: 14px; min-width: 220px; }

.inline-form { display: inline; margin: 0; }
.link-button { background: none; border: none; padding: 0; color: #1f3b73; text-decoration: underline; cursor: pointer; font-size: inherit; }

/* ---------- Вкладки дней (по умолчанию скрыты — видны только на телефоне) ---------- */
.day-tabs { display: none; }

/* ======================================================================
   ТЕЛЕФОН (экран уже 700px)
   ====================================================================== */
@media (max-width: 700px) {
    .hide-mobile { display: none; }

    /* Шапка: логотип сверху, меню — строкой, которую можно прокрутить пальцем */
    header { flex-wrap: wrap; padding: 10px 12px; gap: 6px; }
    header .logo { font-size: 16px; }
    header nav {
        width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 4px;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    header nav::-webkit-scrollbar { display: none; }
    header nav a { margin-left: 0; padding: 6px 10px; border-radius: 6px; white-space: nowrap; font-size: 14px; background: #2c4d8f; }
    .user-login { display: none; }
    .logout-form { margin-left: auto; }

    main { padding: 12px; }
    h1 { font-size: 18px; margin: 18px 0 10px; }

    /* Кнопки крупнее — под палец */
    .btn { padding: 10px 14px; font-size: 15px; }
    .btn.small { padding: 6px 12px; font-size: 15px; }

    /* Заголовок недели: название на всю ширину, под ним кнопки */
    .week-header { flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
    .week-title { order: -1; width: 100%; }
    .week-title strong { font-size: 15px; }
    .week-header > .btn { flex: 0 0 auto; }
    .week-actions { flex: 1; justify-content: flex-end; }
    .week-actions form { flex: 1; }
    .week-actions form .btn { width: 100%; }

    /* Вкладки дней */
    .day-tabs {
        display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
        position: sticky; top: 0; z-index: 5;
        background: #f4f5f7; padding: 6px 0; margin-bottom: 8px;
    }
    .day-tab {
        position: relative; display: flex; flex-direction: column; align-items: center;
        padding: 6px 0; border: 1px solid #d5dae3; border-radius: 8px; background: #fff;
        font: inherit; color: #333; cursor: pointer;
    }
    .day-tab .dt-name { font-size: 13px; font-weight: 600; }
    .day-tab .dt-date { font-size: 12px; color: #888; }
    .day-tab.today { border-color: #1f3b73; }
    .day-tab.active { background: #1f3b73; border-color: #1f3b73; color: #fff; }
    .day-tab.active .dt-date { color: #c9d6f2; }
    .dt-dot {
        position: absolute; top: 4px; right: 6px; width: 7px; height: 7px;
        border-radius: 50%; background: #ef6c00;
    }

    /* Показываем только выбранный день */
    .week { display: block; }
    .day { display: none; padding: 10px; border: none; }
    .day.active { display: block; }
    .day.today { border: none; }
    .day h2 { font-size: 17px; }

    .lesson { padding: 10px 12px; }
    .lesson .subject { font-size: 16px; }
    .lesson .meta, .lesson .time { font-size: 14px; }
    .hw { font-size: 14px; padding: 8px 10px; }

    /* Формы: всё в одну колонку */
    .lesson-form, .group-form { grid-template-columns: 1fr; padding: 12px; }
    .lesson-form .wide, .group-form .wide { grid-column: 1 / -1; }
    .lesson-form input, .lesson-form select,
    .group-form input, .group-form select { font-size: 16px; padding: 9px 10px; } /* 16px — чтобы iPhone не увеличивал страницу */
    .password-box input[type=password] { min-width: 0; width: 100%; font-size: 16px; }
    .login-box { margin: 16px auto; }
    .login-form input[type=text], .login-form input[type=password] { font-size: 16px; }

    .flash.info { flex-direction: column; align-items: flex-start; }
    .group-bar { padding: 10px 12px; }
    .group-actions { width: 100%; }
    .group-actions form, .group-actions a { flex: 1; }
    .group-actions .btn { width: 100%; text-align: center; }

    /* Таблицы → карточки */
    table.cards-on-mobile, .cards-on-mobile tbody, .cards-on-mobile tr, .cards-on-mobile td { display: block; width: 100%; }
    .cards-on-mobile thead { display: none; }
    .cards-on-mobile { background: none; }
    .cards-on-mobile tr {
        background: #fff; border: 1px solid #e1e4ea; border-radius: 8px;
        padding: 8px 12px; margin-bottom: 10px; position: relative;
    }
    .cards-on-mobile td { border: none; padding: 3px 0; display: flex; gap: 8px; }
    .cards-on-mobile td[data-label]::before {
        content: attr(data-label); color: #888; font-size: 13px; min-width: 110px; flex-shrink: 0;
    }
    .cards-on-mobile td.cell-subject { font-weight: 600; }
    .cards-on-mobile td.cell-badge { position: absolute; top: 8px; right: 12px; width: auto; padding: 0; }
    .cards-on-mobile td.actions { padding-top: 8px; gap: 8px; }
    .row-hidden td { text-decoration: none; }
    .row-hidden { opacity: 0.55; }
}

/* Компактная карточка пары в «Моём расписании» (только телефон) */
.mobile-summary { display: none; }
@media (max-width: 700px) {
    .cards-on-mobile td.mobile-summary { display: block; padding: 0 60px 0 0; font-size: 15px; line-height: 1.45; }
    .ms-subject { font-weight: 600; font-size: 16px; }
    .cards-on-mobile td.mobile-summary ~ td[data-label] { display: none; }
}
@media (max-width: 700px) {
    header { position: relative; }
    .logout-form { position: absolute; top: 12px; right: 12px; margin: 0; }
}

footer {
    max-width: 1400px; margin: 30px auto 20px; padding: 0 20px;
    color: #999; font-size: 12px; text-align: center; line-height: 1.5;
}