/* Личный кабинет автошколы — тема поверх Bootstrap 5 */
:root {
  --as-bg: #F4F2EC;
  --as-ink: #16181A;
  --as-ink-2: #24272B;
  --as-muted: #5B5F66;
  --as-line: #E4E0D6;
  --as-line-2: #DAD6CC;
  --as-accent: #E8B400;
  --as-accent-soft: #FFF6D6;
  --as-drive: #FFF1BF;
  --as-drive-ink: #3D2F00;
  --as-theory: #E3ECF5;
  --as-theory-ink: #16233A;
  --as-blue: #2C5F8A;
  --as-radius: 18px;
  --as-sidebar: 264px;

  --bs-body-font-family: 'Open Sans', system-ui, sans-serif;
  --bs-body-bg: var(--as-bg);
  --bs-body-color: var(--as-ink);
  --bs-secondary-color: var(--as-muted);
  --bs-border-color: var(--as-line);
  --bs-link-color: var(--as-ink);
  --bs-link-color-rgb: 22, 24, 26;
  --bs-link-hover-color: #3A3D42;
  --bs-link-hover-color-rgb: 58, 61, 66;
}

.font-display { font-family: 'Open Sans', sans-serif; letter-spacing: -0.01em; }
.text-muted-2 { color: var(--as-muted) !important; }
a { text-underline-offset: 3px; }

/* ---------- Кнопки ---------- */
.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: 12px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-accent { --bs-btn-bg: var(--as-accent); --bs-btn-color: var(--as-ink); --bs-btn-border-color: var(--as-accent);
  --bs-btn-hover-bg: #D6A600; --bs-btn-hover-color: var(--as-ink); --bs-btn-hover-border-color: #D6A600;
  --bs-btn-active-bg: #C49800; --bs-btn-active-color: var(--as-ink); --bs-btn-active-border-color: #C49800;
  --bs-btn-disabled-bg: var(--as-line); --bs-btn-disabled-color: var(--as-muted); --bs-btn-disabled-border-color: var(--as-line); }
.btn-ink { --bs-btn-bg: var(--as-ink); --bs-btn-color: #fff; --bs-btn-border-color: var(--as-ink);
  --bs-btn-hover-bg: #2E3136; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #2E3136; }
.btn-outline-ink { --bs-btn-color: var(--as-ink); --bs-btn-border-color: var(--as-ink); --bs-btn-border-width: 1.5px;
  --bs-btn-hover-bg: var(--as-ink); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--as-ink);
  --bs-btn-active-bg: var(--as-ink); --bs-btn-active-color: #fff; }
.btn-light-line { --bs-btn-bg: #fff; --bs-btn-color: var(--as-ink); --bs-btn-border-color: var(--as-line-2);
  --bs-btn-hover-bg: #F9F8F4; --bs-btn-hover-border-color: #C5C0B4; --bs-btn-hover-color: var(--as-ink); font-weight: 500; }
.btn-ghost-dark { --bs-btn-color: #fff; --bs-btn-border-color: #55585E; --bs-btn-hover-bg: #2E3136; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #6B6E73; font-weight: 500; }
.btn-icon { width: 48px; height: 48px; padding: 0; }
.btn:focus-visible, .btn-check:focus-visible + .btn, .choice:focus-visible { outline: 3px solid var(--as-blue); outline-offset: 2px; box-shadow: none; }

/* ---------- Каркас ---------- */
.app-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--as-sidebar);
  background: var(--as-ink); padding: 32px 20px; display: flex; flex-direction: column; gap: 40px; z-index: 1030;
  overflow-y: auto;
}
/* Раздел админ-меню — в исходном макете было 5 ссылок без группировки,
   в реальном приложении админ-раздел заметно больше, поэтому добавлена
   секция с подписью поверх стилей макета. */
.side-nav .nav-section { padding: 16px 16px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A8D93; }
.side-nav .nav-link.sub { height: 40px; font-size: 14px; }
.app-main { padding: 40px 48px; }
@media (min-width: 992px) { .app-main { margin-left: var(--as-sidebar); } }
@media (max-width: 991.98px) { .app-main { padding: 24px 16px 40px; } }
/* Гостевые страницы (вход/регистрация) не показывают боковое меню —
   в исходном макете таких страниц не было, поэтому добавлено здесь. */
@media (min-width: 992px) { body:not(.has-sidebar) .app-main { margin-left: 0; } }
body:not(.has-sidebar) .app-main { max-width: 720px; margin-inline: auto; padding-top: 64px; }

.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; text-decoration: none; }
.brand-mark { width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px; background: var(--as-accent); color: var(--as-ink);
  display: flex; align-items: center; justify-content: center; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 18px; }
.brand-name { font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 600; color: #fff; line-height: 1.35; }

.side-nav .nav-link { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-radius: 10px;
  color: #C9C6BD; font-size: 15px; font-weight: 500; }
.side-nav .nav-link:hover { color: #fff; background: #24272B; }
.side-nav .nav-link.active { background: var(--as-accent); color: var(--as-ink); font-weight: 600; }
.side-nav .nav-link svg { flex-shrink: 0; }

.student-card { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 12px; background: var(--as-ink-2); }
.avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: #3A3D42; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.avatar-lg { width: 52px; height: 52px; font-size: 17px; font-weight: 700; background: #FFF1BF; color: var(--as-ink); }

.topbar { background: var(--as-ink); }
.offcanvas.app-offcanvas { background: var(--as-ink); width: 288px; }
.offcanvas.app-offcanvas .offcanvas-body { display: flex; flex-direction: column; gap: 32px; padding: 24px 20px; }

/* ---------- Карточки ---------- */
.card-as { background: #fff; border: 1px solid var(--as-line); border-radius: var(--as-radius); padding: 24px; }
.card-dark { background: var(--as-ink); color: #fff; border-radius: var(--as-radius); padding: 24px; }
.card-dark .text-soft { color: #C9C6BD; }
.card-theory { background: var(--as-theory); border-radius: var(--as-radius); padding: 24px; color: var(--as-theory-ink); }
.card-theory .text-soft { color: #2A4A6B; }
.btn-blue { --bs-btn-bg: var(--as-blue); --bs-btn-color: #fff; --bs-btn-border-color: var(--as-blue); --bs-btn-hover-bg: #234C6F; --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #234C6F; }

.stat-big { font-family: 'Open Sans', sans-serif; font-size: 56px; font-weight: 600; line-height: 1.1; }
.progress { --bs-progress-height: 10px; --bs-progress-bg: #EFECE4; --bs-progress-border-radius: 999px; }
.progress-bar.bg-accent { background: var(--as-accent); }
.progress-bar.bg-blue { background: var(--as-blue); }

.pill { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill-drive { background: var(--as-drive); color: #5A4500; }
.pill-theory { background: var(--as-theory); color: #1F4468; }
.pill-accent { background: var(--as-accent); color: var(--as-ink); }
.pill-soft { background: #EFECE4; color: #3A3D42; }
.pill-ink { background: var(--as-ink); color: #fff; }

.lesson-row { display: flex; align-items: center; gap: 20px; min-height: 64px; border-top: 1px solid #EFECE4; padding: 8px 0; }
.lesson-date { width: 56px; flex-shrink: 0; }
.lesson-time { width: 112px; flex-shrink: 0; font-weight: 500; }
@media (max-width: 575.98px) { .lesson-row { flex-wrap: wrap; gap: 4px 14px; } .lesson-time { width: auto; } }

/* ---------- Плитки курсов ---------- */
.course-tile { width: 100%; min-height: 128px; border: 2px solid var(--as-line); background: #fff; color: var(--as-ink);
  border-radius: var(--as-radius); padding: 12px 20px 12px 8px; display: flex; align-items: center; gap: 8px; text-align: left; transition: background .15s, border-color .15s; }
.course-tile img { width: 176px; max-width: 48%; height: 110px; object-fit: contain; flex-shrink: 0; }
.course-tile .sub { color: var(--as-muted); font-size: 14px; }
.course-tile:hover { border-color: #B9B5AB; }
.course-tile.is-selected { background: var(--as-ink); border-color: var(--as-ink); color: #fff; }
.course-tile.is-selected .sub { color: #C9C6BD; }
.course-tile.is-selected .pill-soft { background: #3A3D42; color: #fff; }

.course-card { background: #fff; border: 1px solid var(--as-line); border-radius: 22px; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.course-card.is-current { border: 2px solid var(--as-ink); }
.course-stage { position: relative; height: 300px; display: flex; align-items: center; justify-content: center; }
.course-stage img { width: 340px; max-width: 86%; height: 212px; object-fit: contain; margin-top: 40px; }
.course-stage .cat-badge { position: absolute; top: 20px; left: 20px; width: 64px; height: 64px; border-radius: 16px; background: var(--as-ink); color: #fff;
  display: flex; align-items: center; justify-content: center; font-family: 'Open Sans', sans-serif; font-size: 30px; font-weight: 700; }
.course-stage .pill-ink { position: absolute; top: 20px; right: 20px; }
.stage-a { background: radial-gradient(ellipse at 50% 85%, #fff 0%, #FBE3D9 60%); }
.stage-b { background: radial-gradient(ellipse at 50% 85%, #fff 0%, #FFF1BF 60%); }
.stage-c { background: radial-gradient(ellipse at 50% 85%, #fff 0%, #E3ECF5 60%); }

/* ---------- Расписание ---------- */
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: #E9E6DD; }
.seg .btn { min-height: 40px; border-radius: 9px; border: 0; padding: 0 18px; font-size: 14px; --bs-btn-color: var(--as-ink); --bs-btn-hover-bg: #DDD9CE; }
.seg .btn-check:checked + .btn { background: var(--as-ink); color: #fff; }

.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1199.98px) { .week-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .week-grid { grid-template-columns: minmax(0, 1fr); } }
.day-col { background: #fff; border: 1px solid var(--as-line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 180px; }
.day-col.is-today { border: 2px solid var(--as-ink); }
.day-head { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 4px 8px; }
.day-head .dow { font-size: 14px; font-weight: 600; color: var(--as-muted); }
.day-head .num { font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 600; }
.event { border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.event .kind { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.event.theory { background: var(--as-theory); color: var(--as-theory-ink); }
.event.drive { background: var(--as-drive); color: var(--as-drive-ink); }
.event.is-past { opacity: .55; }
/* Дополнения для месячного календаря личного кабинета (в исходном макете
   был только вид на неделю) — пустые ячейки до/после дней месяца и статус «ожидает». */
.day-col.is-blank { visibility: hidden; }
.event.is-pending { border: 1px dashed var(--as-muted); }
.day-empty { padding: 8px 4px; font-size: 13px; color: var(--as-muted); display: none; }
.day-col.is-empty .day-empty { display: block; }
.legend-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; vertical-align: -2px; margin-right: 6px; }

/* ---------- Выбор (radio / checkbox карточки) ---------- */
.choice { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border-radius: 14px; border: 2px solid var(--as-line); background: #fff; cursor: pointer; transition: border-color .15s, background .15s; margin: 0; }
.choice:hover { border-color: #B9B5AB; }
.btn-check:checked + .choice { border-color: var(--as-ink); background: var(--as-accent-soft); }
.chip { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--as-line-2); background: #fff; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; cursor: pointer; }
.btn-check:checked + .chip { background: var(--as-ink); color: #fff; border-color: var(--as-ink); }
.date-btn { height: 72px; width: 100%; border-radius: 12px; border: 1px solid var(--as-line-2); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
.date-btn .d { font-size: 20px; font-weight: 700; line-height: 1.1; }
.date-btn .w { font-size: 13px; font-weight: 500; }
.btn-check:checked + .date-btn { background: var(--as-ink); color: #fff; border-color: var(--as-ink); }
.btn-check:disabled + .date-btn { border-style: dashed; background: transparent; color: #8A8D93; cursor: not-allowed; }
.slot-btn { height: 48px; width: 100%; border-radius: 10px; border: 1px solid var(--as-line-2); background: #fff; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-check:checked + .slot-btn { background: var(--as-accent); border: 2px solid var(--as-ink); }
.btn-check:disabled + .slot-btn { background: #EFECE4; color: #8A8D93; text-decoration: line-through; cursor: not-allowed; }

.pack { display: flex; flex-direction: column; gap: 10px; min-height: 232px; padding: 22px; border-radius: var(--as-radius); border: 2px solid var(--as-line); background: #fff; cursor: pointer; height: 100%; }
.btn-check:checked + .pack { border-color: var(--as-ink); background: var(--as-accent-soft); }
.pack .count { font-family: 'Open Sans', sans-serif; font-size: 44px; font-weight: 600; line-height: 1.05; }
.extra { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 14px 20px; border-radius: 14px; border: 2px solid var(--as-line); background: #fff; cursor: pointer; margin: 0; }
.extra:has(input:checked) { border-color: var(--as-ink); }
.extra .form-check-input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; border-color: #8A8D93; }
.extra .form-check-input:checked { background-color: var(--as-ink); border-color: var(--as-ink); }
.pay-opt { min-height: 48px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--as-line-2); background: #fff; display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 500; margin: 0; }
.pay-opt .dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #8A8D93; flex-shrink: 0; }
.btn-check:checked + .pay-opt { border: 2px solid var(--as-ink); }
.btn-check:checked + .pay-opt .dot { border: 6px solid var(--as-ink); }

.summary { position: sticky; top: 24px; background: #fff; border: 1px solid var(--as-line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.summary dt { font-size: 13px; font-weight: 400; color: var(--as-muted); }
.summary dd { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.note { padding: 14px 16px; border-radius: 12px; background: var(--as-accent-soft); color: var(--as-drive-ink); font-size: 14px; line-height: 1.45; }
.done-mark { width: 56px; height: 56px; border-radius: 50%; background: var(--as-accent); display: flex; align-items: center; justify-content: center; }

.visually-hidden-focusable:focus { position: static !important; }

.date-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 575.98px) { .date-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }