/*
 * STOP SMOKE — клиентский личный кабинет.
 * Сохраняет визуальный стиль лэндинга: тёмно-синий фон, красный акцент, шрифт Ruberoid.
 * Подключается из 'self' (assets/), совместимо со строгой CSP клиентской зоны.
 */

@font-face {
    font-family: 'Ruberoid';
    src: url('/fonts/Ruberoid-Regular.woff2') format('woff2'),
         url('/fonts/Ruberoid-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ruberoid';
    src: url('/fonts/Ruberoid-Medium.woff2') format('woff2'),
         url('/fonts/Ruberoid-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ruberoid';
    src: url('/fonts/Ruberoid-SemiBold.woff2') format('woff2'),
         url('/fonts/Ruberoid-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ruberoid';
    src: url('/fonts/Ruberoid-Bold.woff2') format('woff2'),
         url('/fonts/Ruberoid-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --brand-navy: #071222;
    --brand-navy-600: #0e1c30;
    --brand-navy-500: #16273e;
    --brand-red: #f14a41;
    --brand-red-600: #d83a31;
    --brand-muted: #c3c9d1;
}

/*
 * Полифилл .vstack/.hstack — появились только в Bootstrap 5.1, а проект на 5.0.2.
 * Без них форма остаётся блочной и `gap-*` не действует (кнопка «прижимается» к полю).
 */
.hstack {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: stretch;
}
.vstack {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-self: stretch;
}

body.client-body {
    background: radial-gradient(1200px 600px at 80% -10%, #12243d 0%, var(--brand-navy) 55%) fixed, var(--brand-navy);
    color: #eef2f7;
    font-family: 'Ruberoid', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Навигация ---------- */
.client-navbar {
    background: rgba(7, 18, 34, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.client-navbar .navbar-brand img {
    height: 30px;
    width: auto;
    display: block;
}

.client-navbar .nav-link {
    color: #c3ccd8;
    font-weight: 500;
    padding-inline: .9rem;
    position: relative;
}

.client-navbar .nav-link:hover,
.client-navbar .nav-link:focus-visible {
    color: #fff;
}

.client-navbar .nav-link.active {
    color: #fff;
}

.client-navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: .9rem;
    right: .9rem;
    bottom: .1rem;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-red);
}

/* ---------- Карточки ---------- */
.client-body .card {
    border: 0;
    border-radius: .8rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

/* Герой на главной */
.client-hero {
    background: linear-gradient(135deg, var(--brand-red) 0%, #b52f28 100%);
    color: #fff;
    border-radius: 1rem;
    box-shadow: 0 16px 40px rgba(241, 74, 65, .25);
}

/* ---------- Брендовые перекрытия Bootstrap (красный = фирменный) ---------- */
.client-body .btn-danger {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
}

.client-body .btn-danger:hover,
.client-body .btn-danger:focus-visible,
.client-body .btn-danger:active,
.client-body .btn-danger:first-child:active {
    background-color: var(--brand-red-600);
    border-color: var(--brand-red-600);
    color: #fff;
}

.client-body .btn-danger:focus,
.client-body .btn-danger:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(241, 74, 65, .4);
}

.client-body .bg-danger {
    background-color: var(--brand-red) !important;
}

.client-body .text-danger {
    color: var(--brand-red) !important;
}

.client-body .badge.bg-danger {
    background-color: var(--brand-red) !important;
}

.client-body .btn-outline-dark {
    color: var(--brand-navy);
    border-color: #c9d0da;
}

.client-body .btn-outline-dark:hover,
.client-body .btn-outline-dark:active,
.client-body .btn-outline-dark:first-child:active {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
}

.client-body a {
    color: var(--brand-red);
}

.client-body .card a:not(.btn):hover {
    color: var(--brand-red-600);
}

/* ---------- Прогресс ---------- */
.client-body progress {
    -webkit-appearance: none;
    appearance: none;
    height: 12px;
    border: 0;
    border-radius: 999px;
    background: #e9edf2;
    overflow: hidden;
}

.client-body progress::-webkit-progress-bar {
    background: #e9edf2;
    border-radius: 999px;
}

.client-body progress::-webkit-progress-value {
    background: linear-gradient(90deg, var(--brand-red) 0%, #ff7a5c 100%);
    border-radius: 999px;
}

.client-body progress::-moz-progress-bar {
    background: var(--brand-red);
    border-radius: 999px;
}

/* Списки условий/материалов */
.client-body .list-group-item-action:hover {
    background: #fff5f4;
}

/* Заголовки — жирный брендовый шрифт */
.client-body h1,
.client-body h2,
.client-body .navbar-brand {
    font-weight: 700;
    letter-spacing: -.01em;
}

/* ---------- Единая пагинация ---------- */
.client-body .pagination-bar {
    row-gap: .5rem;
}

.client-body .pagination-bar .page-link {
    color: var(--brand-navy);
}

.client-body .pagination-bar .page-item.active .page-link {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
}

.client-body .pagination-bar .page-link:focus {
    box-shadow: 0 0 0 .2rem rgba(241, 74, 65, .25);
}

.client-body .btn.is-loading {
    opacity: .65;
    pointer-events: none;
    cursor: progress;
}

/* ---------- Просмотрщик материалов ---------- */
.material-doc {
    width: 100%;
    height: 70vh;
    border: 0;
    border-radius: .5rem;
    background: #f1f3f5;
}

.material-scroll video {
    max-height: 62vh;
    background: #000;
}

.material-media {
    user-select: none;
    -webkit-user-drag: none;
}

/* Карточка «скачать документ» (DOCX и прочие не-просматриваемые в браузере файлы) */
.material-download {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    background: #f8fafc;
}
.material-download-icon { color: #1f5fb0; flex: 0 0 auto; }

.material-text {
    white-space: normal;
    line-height: 1.6;
}

.material-sentinel {
    height: 1px;
}

/* Формы выбора языка внутри выпадающего меню */
.client-navbar .dropdown-menu form {
    margin: 0;
}

.client-navbar .dropdown-item.active {
    background-color: var(--brand-red);
}

/* Непрочитанное уведомление — брендовый акцент слева */
.client-body .notif-unread {
    border-left: 4px solid var(--brand-red);
}

/* ==========================================================================
   Кабинет: брендовый sidebar (тёмная тема) + SPA-навигация. Заменяет верхний navbar.
   ========================================================================== */
.client-shell { min-height: 100vh; }

.client-sidebar {
    background: rgba(4, 11, 22, .96);
    color: #aeb8c7;
    width: 258px;
    max-width: 85vw;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, .06);
}
.client-sidebar .offcanvas-body { display: flex; flex-direction: column; padding: 0; }
.client-sidebar .offcanvas-header { border-bottom: 1px solid rgba(255, 255, 255, .08); }

.client-brand { display: flex; align-items: center; gap: .5rem; padding: 1.1rem 1.2rem; text-decoration: none; }
.client-brand img { height: 30px; width: auto; display: block; }
.client-brand-row { align-items: center; justify-content: space-between; padding-right: .6rem; }
.client-collapse-btn { color: #8b97a8; border: 0; padding: .3rem .45rem; }
.client-collapse-btn:hover { color: #fff; }

.client-nav { padding: .5rem .7rem; gap: .1rem; }
.client-nav .nav-link {
    display: flex; align-items: center; gap: .75rem; color: #c3ccd8;
    border-radius: .55rem; padding: .62rem .8rem; font-weight: 500; line-height: 1.2; white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.client-nav .nav-link:hover, .client-nav .nav-link:focus-visible { background: rgba(255, 255, 255, .07); color: #fff; }
.client-nav .nav-link.active { background: rgba(241, 74, 65, .18); color: #fff; box-shadow: inset 3px 0 0 var(--brand-red); }
.client-nav .nav-link svg { width: 19px; height: 19px; flex: 0 0 19px; opacity: .85; }
.client-nav .nav-link.active svg { color: var(--brand-red); opacity: 1; }

.client-sidebar-footer { margin-top: auto; padding: 1rem 1rem 1.2rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.client-sidebar-footer .btn-outline-light { border-color: rgba(255, 255, 255, .28); }

.client-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.client-content { padding: 1.1rem; }
#cabinet-content { transition: opacity .12s ease; }
#cabinet-content.is-loading { opacity: .45; pointer-events: none; }

.client-topbar {
    display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem;
    background: rgba(4, 11, 22, .96); position: sticky; top: 0; z-index: 1030;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.client-topbar img { height: 26px; width: auto; }
.client-topbar .btn-outline-light { color: #fff; border-color: rgba(255, 255, 255, .3); }

/* Десктоп: offcanvas → постоянный статичный sidebar */
@media (min-width: 992px) {
    .client-shell { display: flex; align-items: stretch; }
    .client-sidebar.offcanvas-start { visibility: visible !important; transform: none !important; position: sticky; top: 0; height: 100vh; z-index: 1; }
    .client-sidebar .offcanvas-header { display: none; }
    .client-topbar { display: none; }
    .client-content { padding: 1.6rem 2rem; }

    /* Свёрнутый режим — только иконки */
    .client-shell.sidebar-collapsed .client-sidebar { width: 76px; }
    .client-shell.sidebar-collapsed .client-nav-label,
    .client-shell.sidebar-collapsed .client-brand img,
    .client-shell.sidebar-collapsed .client-sidebar-footer { display: none; }
    .client-shell.sidebar-collapsed .client-nav .nav-link { justify-content: center; padding-inline: .5rem; }
    .client-shell.sidebar-collapsed .client-brand-row { justify-content: center; }
    .client-shell.sidebar-collapsed .client-nav .nav-link [data-unread-holder] { position: absolute; top: .3rem; right: .5rem; margin: 0 !important; }
    .client-shell.sidebar-collapsed .client-nav .nav-link { position: relative; }
}

/* ==================== Страницы входа/регистрации ==================== */
.auth-topbar {
    background: rgba(4, 11, 22, .92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.auth-topbar .btn-outline-light { border-color: rgba(255, 255, 255, .35); }
.auth-card { border-radius: 1rem; }
.auth-back { color: var(--brand-muted); text-decoration: none; }
.auth-back:hover { color: #fff; }
/* Подсказка-блок «Код из книги» на форме регистрации */
.code-hint {
    background: #f6f8fb;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--brand-red);
    border-radius: .6rem;
    padding: 1rem 1.1rem;
}

/* Запертый пункт навигации (нет кода книги) */
.client-nav .nav-link.client-nav-locked { color: #7a8698; cursor: not-allowed; }
.client-nav .nav-link.client-nav-locked:hover { background: transparent; color: #7a8698; }
.client-nav .nav-link.client-nav-locked svg { opacity: .5; }
/* Блок «нужен код книги» на главной кабинета */
.code-lock-card { background: linear-gradient(135deg, rgba(241,74,65,.12), rgba(7,18,34,.2)); border: 1px solid rgba(241,74,65,.35); border-radius: 1rem; }

/* Полировка форм входа/регистрации */
.auth-card { box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.auth-card .card-body { padding: 2rem 2.25rem; }
.auth-card h1 { font-weight: 700; letter-spacing: -.01em; }
.auth-card .form-label { font-weight: 500; font-size: .9rem; margin-bottom: .3rem; }
.auth-card .form-control, .auth-card .form-select { padding: .6rem .85rem; }
.auth-card .btn-lg { padding: .7rem 1rem; font-weight: 600; }
.auth-logo { display:block; text-align:center; margin-bottom: 1.25rem; }
.auth-logo img { height: 40px; }
@media (max-width: 575.98px){ .auth-card .card-body { padding: 1.5rem 1.25rem; } }