/*
 * Theme "warm editorial minimalism" — adapted from the site.html design concept.
 * Fonts: Spectral (headings, serif) + Manrope (body). Palette: warm cream + terracotta accent.
 * Bootstrap 5 stays for grid/components; this file only themes it via design tokens.
 */

:root {
    /* Design tokens */
    --paper: #e9e7e2;
    --surface: #f7f4ee;
    --card: #fffdf8;
    --line: #ece3d2;
    --line-strong: #e2d9c8;
    --chip-bg: #f4ede0;
    --ink: #1a1a1a;
    --ink-soft: #5a554c;
    --muted: #8a8276;
    --accent: #c8553d;
    --accent-hover: #b0462f;
    --accent-soft: #e0795f;
    --dark: #1a1a1a;
    --dark-2: #2a2825;
    --footer-bg: #141413;

    /* Bootstrap overrides */
    --bs-body-font-family: Manrope, system-ui, -apple-system, sans-serif;
    --bs-body-bg: var(--surface);
    --bs-body-color: var(--ink);
    --bs-link-color-rgb: 200, 85, 61;
    --bs-link-hover-color-rgb: 176, 70, 47;
}

body {
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--accent);
    color: #fff;
}

h1, h2, h3, h4, .font-serif, .display-4, .display-6 {
    font-family: Spectral, Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.text-soft { color: var(--ink-soft); }
.text-muted-warm { color: var(--muted); }

/* Small uppercase section label */
.eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}

.eyebrow-light { color: var(--accent-soft); }

/* Section headings */
.section-title {
    font-size: 38px;
    line-height: 1.1;
}

.section-title-lg {
    font-size: 42px;
    line-height: 1.06;
    letter-spacing: -0.02em;
}

.tracking-tight { letter-spacing: -0.02em; }

.section-dark h1 { color: var(--surface); }

@media (max-width: 575.98px) {
    .section-title { font-size: 30px; }
    .section-title-lg { font-size: 34px; }
}

/* ---------- Header / nav ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: rgba(247, 244, 238, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

.brand {
    font-family: Spectral, Georgia, serif;
    font-size: 23px;
    font-weight: 600;
    color: var(--ink);
}

.brand:hover { color: var(--ink); }
.brand .brand-dot { color: var(--accent); }

.brand .brand-sub {
    font-family: Manrope, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.site-header .nav-link {
    font-size: 14px;
    font-weight: 500;
    color: #4a463f;
}

.site-header .nav-link:hover { color: var(--accent); }

/* The logout control is a form button styled as a nav link */
.site-header button.nav-link {
    background: none;
    border: 0;
}

/* ---------- Buttons ---------- */

.btn-accent {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    padding: 0.8rem 1.7rem;
}

.btn-accent:hover, .btn-accent:focus-visible {
    background: var(--accent-hover);
    color: #fff;
}

.btn-outline-ink {
    background: transparent;
    color: var(--ink);
    border: 1px solid #c9bfac;
    border-radius: 999px;
    font-weight: 600;
    padding: 0.8rem 1.6rem;
}

.btn-outline-ink:hover, .btn-outline-ink:focus-visible {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

.btn-outline-accent {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    font-weight: 600;
}

.btn-outline-accent:hover, .btn-outline-accent:focus-visible {
    background: var(--accent);
    color: #fff;
}

.btn-accent.btn-sm, .btn-outline-ink.btn-sm, .btn-outline-accent.btn-sm {
    padding: 0.35rem 0.9rem;
    font-size: 13px;
}

/* ---------- Landing sections ---------- */

.section {
    padding: 88px 0;
    border-bottom: 1px solid var(--line);
}

.section-alt { background: var(--card); }

.section-dark {
    background: var(--dark);
    border-bottom: none;
}

.section-dark h2, .section-dark h3 { color: var(--surface); }
.section-dark p { color: #b8b2a6; }

@media (max-width: 767.98px) {
    .section { padding: 56px 0; }
}

/* Striped photo placeholder until real photos arrive */
.photo-placeholder {
    background: repeating-linear-gradient(45deg, #efe7d8, #efe7d8 11px, #e8dfcd 11px, #e8dfcd 22px);
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-placeholder-label {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #9a8f78;
    background: rgba(247, 244, 238, 0.85);
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #d8cdb8;
}

.hero-stat .stat-value {
    font-family: Spectral, Georgia, serif;
    font-size: 30px;
    color: var(--ink);
}

.hero-stat .stat-label {
    font-size: 13px;
    color: var(--muted);
}

.floating-card {
    position: absolute;
    left: 32px;
    bottom: 32px;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: 0 12px 30px -18px rgba(40, 30, 15, 0.5);
}

.chip {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: #3a362f;
    background: var(--chip-bg);
    border: 1px solid var(--line-strong);
    padding: 9px 15px;
    border-radius: 999px;
}

.chip-outline { background: var(--card); }

/* Format cards */
.format-card {
    background: var(--card);
    border: 1px solid #e7dfce;
    border-radius: 18px;
    padding: 28px 24px;
    height: 100%;
    transition: transform 0.2s, border-color 0.2s;
}

.format-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
    .format-card, .price-card { transition: none; }
    .format-card:hover, .price-card:hover { transform: none; }
}

.format-card .format-num {
    font-family: Spectral, Georgia, serif;
    font-size: 18px;
    color: var(--accent);
}

/* Price cards: hover lifts like .format-card, click selects (dark, like the "popular" card) */
.price-card {
    background: var(--card);
    border: 1px solid #e7dfce;
    border-radius: 20px;
    padding: 34px 30px;
    height: 100%;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.price-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
}

.price-card .price-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
}

.price-card .price-value {
    font-family: Spectral, Georgia, serif;
    font-size: 42px;
    color: var(--ink);
}

.price-card .price-sub {
    font-size: 13px;
    color: var(--muted);
}

.price-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-size: 14px;
    color: var(--ink-soft);
}

.price-card ul li::before {
    content: "·";
    color: var(--accent);
    font-weight: 700;
    margin-right: 9px;
}

.price-card .price-badge {
    position: absolute;
    top: -12px;
    left: 30px;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 6px 13px;
    border-radius: 999px;
}

.price-card .price-cta {
    display: block;
    width: 100%;
    margin-top: 28px;
    background: transparent;
    color: var(--ink);
    border: 1px solid #c9bfac;
    border-radius: 999px;
    font-weight: 600;
    padding: 14px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.price-card .price-cta:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

.price-card-selected {
    background: var(--dark);
    border-color: var(--dark);
    box-shadow: 0 22px 50px -26px rgba(40, 30, 15, 0.6);
}

.price-card-selected:hover { border-color: var(--accent-soft); }
.price-card-selected .price-label { color: #b8b2a6; }
.price-card-selected .price-value { color: var(--surface); }
.price-card-selected .price-sub { color: #9a948a; }
.price-card-selected ul { color: #cfc9bd; }
.price-card-selected ul li::before { color: var(--accent-soft); }

.price-card-selected .price-cta {
    background: var(--accent-soft);
    border-color: var(--accent-soft);
    color: var(--ink);
    font-weight: 700;
}

.price-card-selected .price-cta:hover { background: #ec8a71; border-color: #ec8a71; }

/* Credentials timeline */
.cred {
    border-top: 2px solid var(--accent);
    padding-top: 20px;
    height: 100%;
}

.cred .cred-year {
    font-family: Spectral, Georgia, serif;
    font-size: 15px;
    color: var(--accent);
}

/* Contact rows in dark sections */
.contact-row {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--surface);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

a.contact-row:hover { color: var(--accent-soft); }

.contact-row .contact-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--dark-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-soft);
    font-family: Spectral, Georgia, serif;
}

/* ---------- Cards, forms, tables (cabinets) ---------- */

.card {
    --bs-card-bg: var(--card);
    --bs-card-border-color: #e7dfce;
    --bs-card-border-radius: 18px;
}

.form-card {
    background: var(--card);
    border-radius: 20px;
    padding: 34px 32px;
}

.form-label {
    font-size: 13px;
    font-weight: 600;
    color: #3a362f;
}

.form-control, .form-select {
    border: 1px solid #ddd3c2;
    background: var(--surface);
    border-radius: 11px;
    padding: 13px 15px;
    font-weight: 500;
    color: var(--ink);
}

.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    background: #fff;
    box-shadow: none;
}

.form-control::placeholder { color: var(--muted); }

/* Form-level error message (e.g. failed login) */
.form-error {
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
}

.table {
    --bs-table-bg: var(--card);
    --bs-table-striped-bg: var(--surface);
    --bs-table-color: var(--ink);
    border-color: var(--line);
}

/* Clickable table rows (e.g. student list -> student card) */
.row-link { cursor: pointer; }
.row-link:hover td { background: var(--chip-bg); }

/* Status badges */
.badge-accent, .badge-ok, .badge-plan, .badge-muted {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
}

.badge-accent { background: var(--accent); color: #fff; }
.badge-plan { background: var(--chip-bg); border: 1px solid var(--line-strong); color: #3a362f; }
.badge-ok { background: var(--dark); color: var(--surface); }
.badge-muted { background: var(--line); color: var(--muted); }

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--muted);
    font-size: 14px;
}

/* ---------- Trial modal ---------- */

/* Blur the page behind the open modal */
.modal-backdrop.show {
    background: rgba(20, 20, 19, 0.45);
    opacity: 1;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#trialModal .modal-content {
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 20px;
}

#trialModal .modal-header {
    border-bottom: none;
    padding: 28px 32px 0;
    align-items: flex-start;
}

#trialModal .modal-body { padding: 20px 32px 32px; }

/* ---------- FullCalendar theming ---------- */

#calendar {
    max-width: 1100px;
    margin: 0 auto;
    --fc-border-color: var(--line);
    --fc-page-bg-color: var(--card);
    --fc-neutral-bg-color: var(--surface);
    --fc-today-bg-color: rgba(200, 85, 61, 0.06);
    --fc-event-bg-color: var(--accent);
    --fc-event-border-color: var(--accent);
    background: var(--card);
    border-radius: 18px;
    padding: 16px;
    border: 1px solid #e7dfce;
}

/* Статусы занятий (классы lesson-* ставит eventClassNames в JS) */

/* Своё занятие ученика — выделено фирменным акцентом */
#calendar .lesson-own {
    background: var(--accent);
    border-color: var(--accent-hover);
    font-weight: 600;
}

/* Чужое «Занято» — приглушённый нейтральный слот */
#calendar .lesson-busy {
    background: var(--chip-bg);
    border-color: var(--line-strong);
}

#calendar .lesson-busy .fc-event-main,
#calendar .lesson-busy .fc-event-time,
#calendar .lesson-busy .fc-event-title {
    color: var(--muted);
}

/* Произвольное событие у учителя — тёмный, чтобы отличать от занятий */
#calendar .lesson-event {
    background: var(--dark-2);
    border-color: var(--ink);
}

#calendar .lesson-done {
    background: var(--muted);
    border-color: var(--muted);
    opacity: .75;
}

#calendar .lesson-cancelled {
    background: var(--card);
    border: 1px dashed var(--muted);
    opacity: .8;
}

#calendar .lesson-cancelled .fc-event-main {
    color: var(--muted);
    text-decoration: line-through;
}

.fc .fc-button-primary {
    background: var(--ink);
    border: none;
    border-radius: 999px;
    font-weight: 600;
    text-transform: capitalize;
}

.fc .fc-button-primary:not(:disabled):hover,
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--accent);
}

.fc .fc-toolbar-title {
    font-family: Spectral, Georgia, serif;
    font-weight: 600;
}

/* List view (мобильный календарь) в тёплой теме */
.fc .fc-list-day-cushion { background: var(--chip-bg); }
.fc-theme-standard .fc-list { border-color: var(--line); }
.fc .fc-list-event:hover td { background: var(--chip-bg); }
.fc .fc-list-event-dot { border-color: var(--accent); }

/* Мобильный календарь: тулбар переносится, кнопки и заголовок компактнее */
@media (max-width: 767.98px) {
    #calendar { padding: 10px; }

    .fc .fc-toolbar.fc-header-toolbar {
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 1rem;
    }

    .fc .fc-toolbar-title { font-size: 1.15rem; }

    .fc .fc-button {
        padding: 0.3rem 0.65rem;
        font-size: 0.85rem;
    }
}

/* ---------- Footer ---------- */

.site-footer {
    background: var(--footer-bg);
    color: var(--muted);
    font-size: 13px;
}

.site-footer .footer-brand {
    font-family: Spectral, Georgia, serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--surface);
}

.site-footer .footer-brand .brand-dot { color: var(--accent-soft); }

.site-footer a {
    color: var(--muted);
    text-decoration: none;
}

.site-footer a:hover { color: var(--surface); }