body {
    background-color: #f8f9fa;
    font-family: 'Inter', Roboto, sans-serif;
}

/* Gradient Header */
.header-gradient {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: white;
    padding: 1rem 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.header-title {
    font-weight: 600;
    margin: 0;
    font-size: 1.5rem;
}

.header-user {
    font-size: 0.9rem;
    opacity: 0.9;
}

.logout-btn {
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.logout-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* Auth Card */
.auth-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.auth-card {
    background: #fff;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    width: 100%;
    max-width: 400px;
}

.auth-brand {
    text-align: center;
    margin-bottom: 2rem;
    color: #1e3c72;
    font-weight: 700;
}

/* Dashboard Content */
/* Только вертикальные отступы: боковые остаются от .container. При padding: 2rem 0 отрицательные
   поля .row ничем не компенсировались, и на телефоне страница уезжала вбок на ширину гаттера. */
.dashboard-container {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Custom Tabs */
.nav-pills.custom-tabs {
    background: #fff;
    padding: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    margin-bottom: 1.5rem;
}

.nav-pills.custom-tabs .nav-link {
    color: #495057;
    border-radius: 6px;
    padding: 0.6rem 1.2rem;
    font-weight: 500;
    transition: all 0.2s;
}

.nav-pills.custom-tabs .nav-link:hover {
    background: #f8f9fa;
}

.nav-pills.custom-tabs .nav-link.active {
    background: #1e3c72;
    color: #fff;
}

/* Cards */
.card-custom {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    margin-bottom: 1.5rem;
}

.card-custom .card-header {
    background: #fff;
    border-bottom: 1px solid #edf2f9;
    padding: 1.25rem 1.5rem;
    border-radius: 10px 10px 0 0;
    font-weight: 600;
}

.card-custom .card-body {
    padding: 1.5rem;
}

/* Tables */
.table-custom th {
    background: #f8f9fa;
    border-top: none;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.table-custom td {
    vertical-align: middle;
}

/* Badges */
.status-badge {
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 600;
    border-radius: 0.25rem;
}

.status-active {
    background-color: #d1e7dd;
    color: #0f5132;
}

.status-inactive {
    background-color: #f8d7da;
    color: #842029;
}

/* Utilities */
/* Цвета — через переменные .btn Bootstrap 5.3: прямой background-color не менял текст (оставался
   тёмный body-color, контраст ~1.4:1), а в :disabled/:active/:focus-visible фон подменялся прозрачным. */
.btn-primary-custom {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1e3c72;
    --bs-btn-border-color: #1e3c72;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #152b52;
    --bs-btn-hover-border-color: #152b52;
    --bs-btn-focus-shadow-rgb: 30, 60, 114;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #11234a;
    --bs-btn-active-border-color: #11234a;
    /* неактивная — светлее и без полупрозрачности: белый текст остаётся читаемым (~5:1) */
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #5a6f96;
    --bs-btn-disabled-border-color: #5a6f96;
    --bs-btn-disabled-opacity: 1;
}

.action-icon {
    cursor: pointer;
    color: #6c757d;
    transition: color 0.2s;
    margin: 0 0.3rem;
}

.action-icon:hover {
    color: #1e3c72;
}

.action-icon.danger:hover {
    color: #dc3545;
}

#app-loader {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    /* Лоадер — чисто визуальный оверлей. Если Vue не смонтировался (ошибка JS,
       старый браузер, не загрузился vue.js), статичный лоадер оставался поверх
       страницы и «замораживал» форму входа: всё видно, но ничего не кликается.
       Клики он не должен перехватывать никогда, а через 12с прячется даже без JS. */
    pointer-events: none;
    animation: carrier-loader-autohide 0s linear 12s forwards;
}

@keyframes carrier-loader-autohide {
    to { opacity: 0; visibility: hidden; }
}

/* До монтирования Vue (или если оно не удалось) сырой шаблон с {{ }} не показываем */
[v-cloak] { display: none !important; }

/* ---- Конструктор схемы мест: мелкие клетки (как в админке) ---- */
.seat-cell2 {
    width: 52px; flex: 0 0 auto;
    border: 1px solid #d4d9e2; border-radius: 6px;
    background: #fff; padding: 2px; display: flex; flex-direction: column; gap: 2px;
}
.seat-cell2 .sc-type {
    width: 100%; border: none; background: transparent; outline: none;
    font-size: 12px; font-weight: 700; text-align: center; cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 1px 0;
}
.seat-cell2 .sc-num {
    width: 100%; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff;
    text-align: center; font-size: 12px; font-weight: 700; color: #1d4ed8;
    outline: none; padding: 1px 0;
}
.seat-cell2 .sc-num::placeholder { color: #cbd5e1; font-weight: 400; }
.seat-cell2 .sc-num-empty { height: 21px; }

/* Цветовая кодировка типа */
.seat-cell2.sc-seat   { background: #e7f0ff; border-color: #90b4f8; }
.seat-cell2.sc-seat   .sc-type { color: #1d4ed8; }
/* «Другое» = занятое/забронированное место (на витрине рисуется картинкой booked) — серое, с номером */
.seat-cell2.sc-other  { background: #dbe1ea; border-color: #8b98ab; }
.seat-cell2.sc-other  .sc-type { color: #475569; }
.seat-cell2.sc-other  .sc-num { color: #475569; border-color: #8b98ab; background: #eef1f6; }
.seat-cell2.sc-wc     { background: #fef3c7; border-color: #fcd34d; }
.seat-cell2.sc-wc     .sc-type { color: #b45309; }
.seat-cell2.sc-media  { background: #ede9fe; border-color: #c4b5fd; }
.seat-cell2.sc-media  .sc-type { color: #6d28d9; }
.seat-cell2.sc-hidden { background: #f1f5f9; border-style: dashed; opacity: .6; }
.seat-cell2.sc-hidden .sc-type { color: #94a3b8; }

/* ---- Поисковый выпадающий список ---- */
.search-select { position: relative; }
.search-select .ss-control {
    cursor: pointer; min-height: 31px; display: flex; align-items: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-select.disabled .ss-control { background: #e9ecef; pointer-events: none; opacity: .8; }
.ss-dropdown {
    background: #fff; border: 1px solid #cdd4dc; border-radius: 6px;
    box-shadow: 0 8px 22px rgba(0,0,0,.16); overflow: hidden;
}
.ss-dropdown .ss-search { border: none; border-bottom: 1px solid #e5e9ef; border-radius: 0; }
.ss-dropdown .ss-list { max-height: 240px; overflow-y: auto; }
.ss-dropdown .ss-opt { padding: 6px 10px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.ss-dropdown .ss-opt:hover,
.ss-dropdown .ss-opt.hi { background: #eef4ff; }
.ss-dropdown .ss-opt.active { background: #1e3c72; color: #fff; }
/* выбранный вариант под курсором клавиатуры — отличим от просто выбранного */
.ss-dropdown .ss-opt.active.hi { background: #152b52; box-shadow: inset 3px 0 0 #8fb0ea; }
.ss-dropdown .ss-empty { padding: 8px 10px; font-size: 13px; }

/* ---- Календарь автобусов по дням ---- */
.bus-cal { table-layout: fixed; }
.bus-cal td { height: 58px; vertical-align: top; cursor: pointer; padding: 3px; transition: background .1s; }
.bus-cal td:hover:not(.bus-cal-empty) { background: #f4f7ff; }
.bus-cal td.bus-cal-empty { background: #fafbfc; cursor: default; }
.bus-cal td.bus-cal-off { background: repeating-linear-gradient(45deg,#f8f9fa,#f8f9fa 6px,#f1f3f5 6px,#f1f3f5 12px); cursor: default; }
.bus-cal td.bus-cal-off:hover { background: repeating-linear-gradient(45deg,#f8f9fa,#f8f9fa 6px,#f1f3f5 6px,#f1f3f5 12px); }
.bus-cal td.bus-cal-sel { outline: 2px solid #1e3c72; outline-offset: -2px; }
.bus-chip {
    margin-top: 3px; color: #fff; border-radius: 5px; font-size: 10px; font-weight: 600;
    padding: 3px 4px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Легенда */
.seat-legend-chip {
    display: inline-block; min-width: 22px; text-align: center; padding: 0 4px;
    border-radius: 4px; font-weight: 700; font-size: 11px; border: 1px solid #d4d9e2;
}
.seat-legend-chip.sc-seat  { background: #e7f0ff; color: #1d4ed8; border-color: #90b4f8; }
.seat-legend-chip.sc-other { background: #dbe1ea; color: #475569; border-color: #8b98ab; }
.seat-legend-chip.sc-wc    { background: #fef3c7; color: #b45309; border-color: #fcd34d; }
.seat-legend-chip.sc-media { background: #ede9fe; color: #6d28d9; border-color: #c4b5fd; }
.seat-legend-chip.sc-hidden{ background: #f1f5f9; color: #94a3b8; }

/* Логотип перевозчика в профиле: превью фиксированной высоты, пропорции сохраняются */
.carrier-logo-preview {
    width: 180px; height: 72px;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed #cfd8e6; border-radius: 10px; background: #fff; padding: 6px;
}
.carrier-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- Справочная информация (контент из lp/carrier, стили в рамках .help-content) ---------- */
.help-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.help-toc { position: sticky; top: 16px; background: #fff; border: 1px solid #edf2f9; border-radius: 12px;
            padding: 14px 10px; font-size: 14px; max-height: calc(100vh - 32px); overflow: auto; }
.help-toc-group { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6c757d; margin: 12px 8px 6px; }
.help-toc-group:first-child { margin-top: 0; }
.help-toc a { display: block; padding: 5px 8px; border-radius: 7px; color: #495057; text-decoration: none; border-left: 2px solid transparent; }
.help-toc a:hover { background: #eef4ff; }
.help-toc a.on { background: #eef4ff; color: #1e3c72; border-left-color: #1e3c72; font-weight: 600; }
.help-content { min-width: 0; }
.help-content section { background: #fff; border: 1px solid #edf2f9; border-radius: 12px; padding: 22px 26px;
                        margin-bottom: 18px; box-shadow: 0 4px 12px rgba(0,0,0,.03); scroll-margin-top: 16px; }
.help-content h2 { font-size: 22px; margin: 0 0 12px; }
.help-content h3 { font-size: 17px; margin: 18px 0 8px; }
.help-content h2 .num { display: inline-block; min-width: 30px; height: 30px; line-height: 30px; text-align: center;
                        background: #1e3c72; color: #fff; border-radius: 8px; font-size: 14px; margin-right: 10px; vertical-align: 2px; }
.help-content p { margin: 0 0 .9em; }
.help-content p.sub { color: #6c757d; }
.help-content ol.steps { counter-reset: s; list-style: none; margin: 0 0 16px; padding: 0; }
.help-content ol.steps > li { counter-increment: s; position: relative; padding-left: 36px; margin-bottom: 11px; }
.help-content ol.steps > li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 24px; height: 24px;
                        background: #eef4ff; color: #1e3c72; border-radius: 50%; font-size: 12px; font-weight: 700;
                        display: flex; align-items: center; justify-content: center; }
.help-content ul.tight { margin: 0 0 14px; padding-left: 20px; }
.help-content ul.tight li { margin-bottom: 6px; }
.help-content kbd { font-family: inherit; font-size: 13px; font-weight: 600; background: #eef2f9; color: #495057;
                    border: 1px solid #dbe3ef; border-bottom-width: 2px; border-radius: 6px; padding: 1px 7px; box-shadow: none; }
.help-content .note { border-left: 3px solid #1e3c72; background: #f2f6ff; border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 0 0 16px; font-size: 14px; }
.help-content .note.warn { border-left-color: #d97706; background: #fff5e6; }
.help-content .note.ok { border-left-color: #16a34a; background: #e7f7f0; }
/* заголовок заметки — только первый <b> прямо в .note; <b> внутри абзаца (ФИО в строке контактов) остаётся строчным */
.help-content .note > b:first-child { display: block; margin-bottom: 3px; }
.help-content .note p:last-child { margin-bottom: 0; }
.help-content .shot { margin: 16px 0 18px; }
.help-content .shot-frame { border: 1px solid #e3e8ef; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 18px rgba(15,23,42,.08); }
.help-content .shot-frame a { display: block; cursor: zoom-in; }
.help-content .shot img { display: block; width: 100%; height: auto; }
.help-content .shot figcaption { margin-top: 8px; font-size: 13px; color: #6c757d; }
.help-content .tbl-wrap { overflow-x: auto; margin: 0 0 16px; border: 1px solid #e3e8ef; border-radius: 10px; }
.help-content table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 480px; }
.help-content th, .help-content td { text-align: left; padding: 9px 12px; border-bottom: 1px solid #e3e8ef; vertical-align: top; }
.help-content th { background: #f4f7fc; font-weight: 600; font-size: 13px; }
.help-content tr:last-child td { border-bottom: none; }
.help-content details.faq { border: 1px solid #e3e8ef; border-radius: 10px; margin-bottom: 8px; background: #fbfcfe; }
.help-content details.faq summary { padding: 12px 16px; font-weight: 600; cursor: pointer; }
.help-content details.faq .a { padding: 0 16px 14px; font-size: 14px; color: #495057; }
/* top/right/bottom/left вместо inset: inset не понимают Safari < 14.1 и Chrome < 87 — оверлей схлопывался в угол */
.help-lightbox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3000; background: rgba(8,14,30,.88); display: flex;
                 align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.help-lightbox img { max-width: 96vw; max-width: min(1600px, 96vw); max-height: 92vh; border-radius: 10px; }
@media (max-width: 991px) {
    .help-layout { grid-template-columns: 1fr; }
    .help-toc { position: static; max-height: none; }
}

/* ---------- Пассажиры: группы по выездам («Все будущие») ---------- */
/* Заголовок группы красим сами: зебра Bootstrap 5.3 рисует фон ячейки через box-shadow и переменные */
.orders-table > tbody > tr.dep-head > td {
    --bs-table-bg-type: transparent;
    --bs-table-bg-state: transparent;
    background-color: #eef3fb;
    border-bottom-color: #d9e2f1;
    padding: .55rem .75rem;
    cursor: pointer;
}
.orders-table > tbody > tr.dep-head:hover > td { background-color: #e3ebf8; }
.orders-table > tbody > tr.dep-head.open > td { background-color: #dfe8f7; }
/* тело группы визуально отделено от следующего заголовка */
.orders-table > tbody.dep-group + tbody.dep-group > tr.dep-head > td { border-top: 2px solid #fff; }
.orders-table tr.dep-head { outline: none; }
.orders-table > tbody > tr.dep-head:focus > td { box-shadow: inset 0 0 0 2px #1e3c72; }
.orders-table > tbody > tr.dep-head:focus:not(:focus-visible) > td { box-shadow: none; }
.dep-head-inner { display: flex; flex-wrap: wrap; align-items: center; column-gap: .75rem; row-gap: .35rem; }
.dep-chevron { width: 1em; text-align: center; color: #5b6b85; transition: transform .15s ease; }
.dep-head.open .dep-chevron { transform: rotate(90deg); }
/* минимальные ширины и моноширинные цифры: в длинном списке время, код и кнопки стоят ровными колонками,
   а не прыгают от «пт» к «вс» и от «10761» к «10761_» */
.dep-date { font-weight: 600; white-space: nowrap; min-width: 8.6em; font-variant-numeric: tabular-nums; }
.dep-time { color: #495057; white-space: nowrap; min-width: 2.9em; font-variant-numeric: tabular-nums; }
.dep-code { font-weight: 700; font-size: 1.05rem; color: #1e3c72; white-space: nowrap; min-width: 4.2em; }
.dep-actions { display: inline-flex; flex-wrap: wrap; gap: .35rem; cursor: default; }
.dep-actions .btn { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .8rem; white-space: nowrap; }
/* серый #6c757d мелким кеглем на голубом фоне заголовка — ~4.3:1 и выглядит неактивным; темнее — ~7:1 */
.dep-actions .btn-outline-secondary { --bs-btn-color: #495057; --bs-btn-border-color: #8a939b; --bs-btn-disabled-color: #495057; }
.dep-name { color: #495057; font-size: .875rem; }
.dep-count { margin-left: auto; color: #495057; font-size: .875rem; white-space: nowrap; }
/* Таблица пассажиров шире телефона и прокручивается внутри .table-responsive: содержимое заголовка
   прилипает к левому краю и не шире видимой части, иначе кнопки ведомости уезжают за экран */
@media (max-width: 991.98px) {
    .dep-head-inner { position: -webkit-sticky; position: sticky; left: .75rem; }
    .dep-count { margin-left: 0; white-space: normal; }
}
@media (max-width: 575.98px) { .dep-head-inner { max-width: calc(100vw - 3rem); } }
@media (min-width: 576px) and (max-width: 767.98px) { .dep-head-inner { max-width: 492px; } }
@media (min-width: 768px) and (max-width: 991.98px) { .dep-head-inner { max-width: 672px; } }

/* Метки строк пассажира */
.pax-tag { display: inline-block; padding: .1em .5em; border-radius: 1em; font-size: .72rem; font-weight: 600;
           line-height: 1.35; vertical-align: .1em; white-space: nowrap; }
.pax-tag-return { background: #e0ecff; color: #1e3a8a; }
.pax-tag-crew { background: #fef3c7; color: #92400e; }
/* PENDING — нейтральный бейдж, не «ошибка» и не «оплачено» */
.badge.pay-pending { background-color: #e9ecef; color: #495057; }
.crew-del-btn { font-size: .75rem; vertical-align: middle; line-height: 1.3; }