/**
 * Админка: нейтральный чёрный фон + акцентные кнопки.
 * Подключать ПОСЛЕ inline <style>.
 */

html {
    min-height: 100%;
}

body {
    background: #0a0a0a !important;
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    /* Не 0: иначе слой оказывается НАД обычным контентом (вкладки/формы «пропадают») */
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 100% 55% at 50% -30%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 70% 45% at 100% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 45%),
        radial-gradient(ellipse 60% 40% at 0% 90%, rgba(0, 0, 0, 0.45) 0%, transparent 50%),
        linear-gradient(180deg, #121212 0%, #0a0a0a 45%, #050505 100%);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 65% at 50% 40%, black 30%, transparent 100%);
}

/* Шапка ВЫШЕ контента — иначе выпадающий поиск оказывается под .main-layout */
body > header {
    position: relative;
    z-index: 200;
}

body > .main-layout {
    position: relative;
    z-index: 1;
}

body > .modal {
    z-index: 10000;
}

/* Шапка */
header {
    background: linear-gradient(180deg, rgba(18, 18, 18, 0.97) 0%, rgba(8, 8, 8, 0.95) 100%) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px);
}

/* Поиск поверх слотов (выпадающий список выше .main-layout) */
.search-box {
    position: relative;
    z-index: 1;
}

/* Панели — нейтральное стекло */
.panel {
    background: linear-gradient(165deg, rgba(22, 22, 22, 0.92) 0%, rgba(12, 12, 12, 0.88) 100%) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.panel-header {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* Навигация — красные акцентные кнопки */
.heat-btn {
    background: linear-gradient(145deg, rgba(28, 28, 28, 0.95) 0%, rgba(14, 14, 14, 0.98) 100%) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(248, 250, 252, 0.92) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

a.heat-btn:hover {
    border-color: rgba(248, 113, 113, 0.5) !important;
    color: #fff !important;
}

button.heat-btn:hover {
    border-color: rgba(248, 113, 113, 0.5) !important;
    color: #fff !important;
}

.heat-btn.active {
    background: linear-gradient(145deg, #dc2626 0%, #991b1b 100%) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.search-input {
    background: rgba(0, 0, 0, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.search-results {
    z-index: 30000 !important;
    background: rgba(16, 16, 16, 0.98) !important;
    border-color: rgba(229, 9, 20, 0.45) !important;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.65);
}

.notif-bell-btn {
    background: rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.notif-bell-btn:hover {
    border-color: rgba(248, 113, 113, 0.5) !important;
}

#notif-panel {
    background: rgba(16, 16, 16, 0.98) !important;
    border-color: rgba(229, 9, 20, 0.35) !important;
}

.race-control {
    background: linear-gradient(165deg, rgba(24, 24, 24, 0.9) 0%, rgba(10, 10, 10, 0.92) 100%) !important;
    border-color: rgba(229, 9, 20, 0.4) !important;
}

.time-btn {
    background: rgba(0, 0, 0, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.archive-heat-card {
    background: rgba(229, 9, 20, 0.06) !important;
    border-color: rgba(229, 9, 20, 0.32) !important;
}

.archive-heat-card:hover {
    background: rgba(229, 9, 20, 0.12) !important;
    border-color: rgba(229, 9, 20, 0.5) !important;
}

.telemetry-panel {
    background: rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.telemetry-table th {
    background: rgba(8, 8, 8, 0.95) !important;
}

.modal-content {
    background: linear-gradient(165deg, #141414 0%, #0a0a0a 100%) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
}

/* Подстраницы */
a.btn,
button.btn {
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.95) 0%, rgba(12, 12, 12, 0.98) 100%) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

a.btn:hover,
button.btn:hover {
    border-color: rgba(248, 113, 113, 0.45) !important;
    color: #fff !important;
}

a.btn[style*="linear-gradient"],
button.btn[style*="linear-gradient"] {
    box-shadow: 0 4px 18px rgba(220, 38, 38, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.btn-active {
    border-color: rgba(252, 165, 165, 0.4) !important;
    background: linear-gradient(145deg, rgba(185, 28, 28, 0.5) 0%, rgba(127, 29, 29, 0.38) 100%) !important;
    color: #fff !important;
}

.filter-panel,
.section {
    background: linear-gradient(165deg, rgba(22, 22, 22, 0.94) 0%, rgba(12, 12, 12, 0.9) 100%) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.kpi {
    background: linear-gradient(165deg, rgba(20, 20, 20, 0.92) 0%, rgba(10, 10, 10, 0.9) 100%) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.filter-row input[type="date"],
.filter-row input[type="number"],
.refund-form input,
input,
select {
    background: rgba(0, 0, 0, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.filter-row button[type="submit"],
.refund-form button {
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.28);
}

.hex-box {
    background: rgba(0, 0, 0, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
}

/* Карточки пилотов (ресепшн / очередь) — как панели админки */
.pilot-card-ui {
    background: linear-gradient(165deg, rgba(22, 22, 22, 0.88) 0%, rgba(12, 12, 12, 0.85) 100%) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(10px);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pilot-card-ui:hover {
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.pilot-card-ui.adult-waiting {
    border-color: rgba(220, 38, 38, 0.38) !important;
    background:
        linear-gradient(90deg, rgba(220, 38, 38, 0.1) 0%, transparent 52%),
        linear-gradient(165deg, rgba(24, 22, 22, 0.9) 0%, rgba(12, 10, 10, 0.82) 100%) !important;
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 28px rgba(220, 38, 38, 0.06) !important;
}

.pilot-card-ui.adult-waiting:hover {
    border-color: rgba(248, 113, 113, 0.5) !important;
}

.pilot-card-ui.child-waiting {
    border-color: rgba(59, 130, 246, 0.35) !important;
    background:
        linear-gradient(90deg, rgba(37, 99, 235, 0.09) 0%, transparent 52%),
        linear-gradient(165deg, rgba(20, 22, 28, 0.9) 0%, rgba(10, 14, 22, 0.82) 100%) !important;
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 28px rgba(37, 99, 235, 0.06) !important;
}

.pilot-card-ui.child-waiting:hover {
    border-color: rgba(147, 197, 253, 0.42) !important;
}

.pilot-card-ui .avatar-ui:not(.avatar-license) {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.pilot-card-ui .btn-delete-pilot {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(248, 113, 113, 0.38) !important;
    color: #f87171 !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pilot-card-ui .btn-delete-pilot:hover {
    background: linear-gradient(145deg, #dc2626 0%, #991b1b 100%) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}