/* ============================================================
   Slovo — Запись на занятия (Slovo Booking, задача 5.1, v2.44+)
   Все селекторы — с префиксом body.slovo-lms-body (см. .clinerules).
   Палитра — #00bcd4 (акцент модуля), как в slovo-competencies.css.
   ============================================================ */

/* Обёртка секции */
body.slovo-lms-body .slovo-booking {
    margin-bottom: 32px;
}

body.slovo-lms-body .slovo-booking-title {
    margin: 0 0 16px 0;
    font-size: 20px;
    font-weight: 700;
    color: #23282d;
}

/* Статусная строка (успех/ошибка) */
body.slovo-lms-body .slovo-booking-status {
    display: none;
    margin-bottom: 16px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
}

body.slovo-lms-body .slovo-booking-status.is-ok,
body.slovo-lms-body .slovo-booking-status.is-error {
    display: block;
}

body.slovo-lms-body .slovo-booking-status.is-ok {
    background: #e0f7fa;
    border-left: 4px solid #00bcd4;
    color: #006064;
}

body.slovo-lms-body .slovo-booking-status.is-error {
    background: #fdecea;
    border-left: 4px solid #d32f2f;
    color: #b71c1c;
}

body.slovo-lms-body .slovo-booking-empty {
    margin: 0;
    padding: 16px;
    background: #fff;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    color: #6b7280;
}

/* ---------------- Список слотов (ученик) ---------------- */

body.slovo-lms-body .slovo-booking-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

body.slovo-lms-body .slovo-booking-item {
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e0e6ed;
    border-left: 4px solid #00bcd4;
    border-radius: 8px;
}

body.slovo-lms-body .slovo-booking-item.is-full {
    border-left-color: #9e9e9e;
    opacity: 0.85;
}

body.slovo-lms-body .slovo-booking-item-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
}

body.slovo-lms-body .slovo-booking-item-time {
    font-weight: 700;
    color: #23282d;
}

body.slovo-lms-body .slovo-booking-item-course {
    color: #006064;
}

body.slovo-lms-body .slovo-booking-item-places {
    color: #6b7280;
    font-size: 13px;
}

body.slovo-lms-body .slovo-booking-item-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* ---------------- Кнопки ---------------- */

body.slovo-lms-body .slovo-booking-btn {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid #00bcd4;
    border-radius: 6px;
    background: #00bcd4;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
}

body.slovo-lms-body .slovo-booking-btn:hover:not(:disabled) {
    background: #0097a7;
    border-color: #0097a7;
}

body.slovo-lms-body .slovo-booking-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

body.slovo-lms-body .slovo-booking-btn.is-ghost {
    background: #fff;
    color: #006064;
}

body.slovo-lms-body .slovo-booking-btn.is-ghost:hover:not(:disabled) {
    background: #e0f7fa;
}

/* ---------------- Форма записи ---------------- */

body.slovo-lms-body .slovo-booking-form {
    display: none;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #cfd8dc;
}

body.slovo-lms-body .slovo-booking-form.is-open {
    display: block;
}

body.slovo-lms-body .slovo-booking-form-label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #37474f;
}

body.slovo-lms-body .slovo-booking-comment {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid #cfd8dc;
    border-radius: 6px;
    font: inherit;
    resize: vertical;
}

body.slovo-lms-body .slovo-booking-form-actions {
    display: flex;
    gap: 10px;
}

/* ---------------- Бейджи статусов ---------------- */

body.slovo-lms-body .slovo-booking-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

body.slovo-lms-body .slovo-booking-badge-pending {
    background: #fff8e1;
    color: #8d6e00;
}

body.slovo-lms-body .slovo-booking-badge-confirmed {
    background: #e8f5e9;
    color: #2e7d32;
}

body.slovo-lms-body .slovo-booking-badge-cancelled,
body.slovo-lms-body .slovo-booking-badge.is-muted {
    background: #eceff1;
    color: #607d8b;
}

/* ---------------- «Мои заявки» (ученик) ---------------- */

body.slovo-lms-body .slovo-booking-my {
    margin-top: 8px;
}

body.slovo-lms-body .slovo-booking-my-title {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 700;
    color: #23282d;
}

body.slovo-lms-body .slovo-booking-my-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.slovo-lms-body .slovo-booking-my-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
}

body.slovo-lms-body .slovo-booking-my-time {
    font-weight: 600;
    color: #23282d;
}

body.slovo-lms-body .slovo-booking-my-course {
    color: #006064;
}

/* ---------------- Таблица заявок (учитель) ---------------- */

body.slovo-lms-body .slovo-booking-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    overflow: hidden;
}

body.slovo-lms-body .slovo-booking-table th,
body.slovo-lms-body .slovo-booking-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #eceff1;
    text-align: left;
    font-size: 14px;
    vertical-align: top;
}

body.slovo-lms-body .slovo-booking-table th {
    background: #e0f7fa;
    color: #006064;
    font-weight: 700;
}

body.slovo-lms-body .slovo-booking-table tr:last-child td {
    border-bottom: none;
}

body.slovo-lms-body .slovo-booking-cell-time {
    font-weight: 600;
    color: #23282d;
}

body.slovo-lms-body .slovo-booking-cell-course {
    display: block;
    font-weight: 400;
    font-size: 13px;
    color: #006064;
}

body.slovo-lms-body .slovo-booking-cell-comment {
    max-width: 320px;
    color: #546e7a;
}

body.slovo-lms-body .slovo-booking-cell-actions {
    white-space: nowrap;
}

body.slovo-lms-body .slovo-booking-cell-actions .slovo-booking-btn {
    padding: 6px 14px;
    font-size: 13px;
}

/* ============================================================
   BOOKING-1d-1: рабочие часы учителя (вкладка «Расписание»)
   Разметка — каноническая (.slovo-lms-section / .slovo-lms-matrix /
   .slovo-lms-add-material-form). Здесь остаётся только то, чего нет
   в каноне: типы контролов time/number и стек двух кнопок в
   ячейке «Действия».
   ============================================================ */

/* Поля time/number — значения 1:1 с .slovo-lms-add-material-form .slovo-lms-field */

body.slovo-lms-body .slovo-booking-availability-form .slovo-lms-field input[type="time"],
body.slovo-lms-body .slovo-booking-availability-form .slovo-lms-field input[type="number"] {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.4;
    color: #23282d;
    background: #fff;
    border: 1.5px solid #d0d8e0;
    border-radius: 10px;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    height: 48px;
    outline: none;
    box-shadow: none;
}

body.slovo-lms-body .slovo-booking-availability-form .slovo-lms-field input[type="time"]:hover,
body.slovo-lms-body .slovo-booking-availability-form .slovo-lms-field input[type="number"]:hover {
    border-color: #b8c4d0;
}

body.slovo-lms-body .slovo-booking-availability-form .slovo-lms-field input[type="time"]:focus,
body.slovo-lms-body .slovo-booking-availability-form .slovo-lms-field input[type="number"]:focus {
    border-color: #007cba;
    box-shadow: 0 0 0 4px rgba(0,124,186,0.12);
}

/* Чекбокс «Правило активно» — строка вместо колонки */

body.slovo-lms-body .slovo-booking-availability-form .slovo-booking-availability-check label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    cursor: pointer;
}

/* display у .slovo-lms-btn перекрывает браузерный [hidden]
   (образец — .slovo-subject-picker__edit[hidden]) */

body.slovo-lms-body .slovo-booking-availability-form .slovo-lms-btn[hidden] {
    display: none;
}

/* Статус секции отделён от формы (в «Материалах» отступ задан формой) */

body.slovo-lms-body .slovo-booking-availability-section > .slovo-lms-status {
    margin: 0 0 16px 0;
}

/* Ячейка «Действия»: две текстовые кнопки в узкой колонке */

body.slovo-lms-body .slovo-booking-availability-section .slovo-lms-matrix .slovo-lms-matrix-actions-col {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    white-space: normal;
}

body.slovo-lms-body .slovo-booking-availability-section .slovo-lms-matrix td.slovo-lms-matrix-actions-col .slovo-lms-btn {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 3px 0;
}

/* ============================================================
   BOOKING-1d-3: единый вид полей .slovo-lms-field на «Расписании»
   ------------------------------------------------------------
   Причина расхождения: каноническое правило в slovo-lms.css
   (`.slovo-lms-add-material-form .slovo-lms-field select,
    … input[type="text"]`) покрывает только select и text, а
   time/number стилизованы отдельно — только для формы
   «Рабочие часы» (блок выше, ~строка 308). В итоге:
     • input[type="date"] в «Исключениях»;
     • input[type="number"] в «Генерации слотов» и «Отмене записи»
   не получали ни одного правила и падали на нативные стили
   браузера (border 2px inset, padding 1px, системный шрифт,
   высота по контенту).
   Значения ниже — 1:1 с правилом для time/number, чтобы все
   контролы вкладки выглядели одинаково.
   ============================================================ */

body.slovo-lms-body .slovo-booking-schedule-form .slovo-lms-field input[type="date"],
body.slovo-lms-body .slovo-booking-schedule-form .slovo-lms-field input[type="text"],
body.slovo-lms-body .slovo-booking-schedule-form .slovo-lms-field input[type="time"],
body.slovo-lms-body .slovo-booking-schedule-form .slovo-lms-field input[type="number"] {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.4;
    color: #23282d;
    background: #fff;
    border: 1.5px solid #d0d8e0;
    border-radius: 10px;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    height: 48px;
    outline: none;
    box-shadow: none;
}

body.slovo-lms-body .slovo-booking-schedule-form .slovo-lms-field input[type="date"]:hover,
body.slovo-lms-body .slovo-booking-schedule-form .slovo-lms-field input[type="text"]:hover,
body.slovo-lms-body .slovo-booking-schedule-form .slovo-lms-field input[type="time"]:hover,
body.slovo-lms-body .slovo-booking-schedule-form .slovo-lms-field input[type="number"]:hover {
    border-color: #b8c4d0;
}

body.slovo-lms-body .slovo-booking-schedule-form .slovo-lms-field input[type="date"]:focus,
body.slovo-lms-body .slovo-booking-schedule-form .slovo-lms-field input[type="text"]:focus,
body.slovo-lms-body .slovo-booking-schedule-form .slovo-lms-field input[type="time"]:focus,
body.slovo-lms-body .slovo-booking-schedule-form .slovo-lms-field input[type="number"]:focus {
    border-color: #007cba;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0,124,186,0.12);
}

/* Нативный виджет даты оставляем (календарь нужен), но курсор —
   как у кликабельных контролов, по образцу .slovo-form-row в slovo-lms.css.
   У текстового поля, наоборот, снимаем cursor:pointer, который приходит
   из общего правила `select, input[type="text"]` в slovo-lms.css. */

body.slovo-lms-body .slovo-booking-schedule-form .slovo-lms-field input[type="date"] {
    cursor: pointer;
}

body.slovo-lms-body .slovo-booking-schedule-form .slovo-lms-field input[type="text"] {
    cursor: text;
}

body.slovo-lms-body .slovo-booking-schedule-form .slovo-lms-field input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s;
}

body.slovo-lms-body .slovo-booking-schedule-form .slovo-lms-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Навигация по вкладкам — в slovo-lms.css (нужна и на «Обзор»). */

/* ============================================================
   BOOKING-1e-1: вкладка ученика «📅 Записи на урок»
   ------------------------------------------------------------
   Вкладка живёт в кабинете ученика (?slovo_tab=booking) и
   переиспользует канон: .slovo-lms-section / -section-header /
   -matrix / -status-badge / -btn. Здесь — только то, чего в
   каноне нет: подписи внутри ячеек матрицы.
   ============================================================ */

body.slovo-lms-body .slovo-booking-student-time {
    font-weight: 600;
    color: #23282d;
}

body.slovo-lms-body .slovo-booking-student-teacher {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
}

/* Канон `body.slovo-lms-body .slovo-lms-matrix td` задаёт
   white-space: nowrap и text-align: center. Комментарий — свободный
   текст, поэтому селектор усилен до td.класс, иначе правило
   канона выигрывает по специфичности. */
body.slovo-lms-body .slovo-lms-matrix td.slovo-booking-student-comment {
    max-width: 320px;
    white-space: normal;
    color: #546e7a;
    text-align: left;
}

/* CTA внутри пустого состояния: .slovo-lms-empty — просто блок
   с текстом, кнопку нужно отделить отступом. */
body.slovo-lms-body .slovo-booking-student-tab-cta {
    margin-top: 14px;
}

/* BOOKING-1f-2: пустое состояние экрана записи (?slovo_booking=1).
   .slovo-lms-empty даёт рамку и центрирование, .slovo-booking-empty
   внутри — уже карточку (свои поля/рамка), поэтому вложенную рамку
   снимаем, чтобы не было «двойной коробки». */
body.slovo-lms-body .slovo-booking-empty-state {
    background: #fafbfc;
}

body.slovo-lms-body .slovo-booking-empty-state .slovo-booking-empty {
    padding: 0;
    background: none;
    border: 0;
    margin: 0;
}

body.slovo-lms-body .slovo-booking-empty-state .slovo-booking-empty-actions {
    margin: 14px 0 0 0;
}

/* В шапке секции кнопка-ссылка выравнивается по правому краю
   (канон .slovo-lms-section-header — flex + space-between). */
body.slovo-lms-body .slovo-booking-student-tab .slovo-lms-section-header > .slovo-lms-btn {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    body.slovo-lms-body .slovo-lms-matrix td.slovo-booking-student-comment {
        max-width: none;
    }
}