/* ==========================================
   СТИЛИ КАРТЫ КОЛЛЕДЖА МГКЦТ (2D / 3D MAP)
   ОПТИМИЗИРОВАНО ДЛЯ СМАРТФОНОВ И ДЕСКТОПА
   ========================================== */

:root {
    --vvh: 100dvh;
    --vvo: 0px;
    --bg-dark: #0b0f17;
    --panel-bg: rgba(17, 24, 39, 0.90);
    --panel-border: rgba(51, 65, 85, 0.75);
    --panel-border-hover: #475569;
    --accent-primary: #0284c7;
    --accent-sky: #0284c7;
    --accent-sky-light: #38bdf8;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #eef2f6;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #0f172a;
    user-select: none;
    -webkit-user-select: none;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
}

#canvas-container {
    width: 100vw;
    height: 100vh;
    display: block;
    cursor: grab;
    touch-action: none;
}

#canvas-container:active {
    cursor: grabbing;
}

#labels-overlay-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 15;
    pointer-events: none;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Базовые стеклянные панели */
.glass-panel {
    background: rgba(17, 24, 39, 0.90);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(51, 65, 85, 0.75);
    border-radius: 14px;
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.6);
}

/* Стилизация скроллбара */
.custom-scroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scroll::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 999px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.55);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Кнопки */
.btn-interactive {
    position: relative;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}
.btn-interactive:active {
    transform: scale(0.96);
}

/* Селектор этажей (Floor switcher как в картах 2GIS / Google Maps) */
.floor-switcher-bar {
    position: fixed;
    right: 12px;
    top: 46%;
    transform: translateY(-50%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 5px;
    border-radius: 14px;
}

.floor-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Inter', system-ui, sans-serif;
    color: #94a3b8;
    background: #1e293b;
    border: 1px solid #334155;
    transition: all 0.16s ease;
    cursor: pointer;
}

.floor-btn:hover {
    background: #283548;
    color: #f8fafc;
}

.floor-btn.active {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.35) !important;
}

.floor-btn.disabled {
    opacity: 0.25;
    pointer-events: none;
}

/* Плавающие действия карты (Территория, 2D/3D, зум на ПК) */
.map-fab-bar {
    position: fixed;
    right: 12px;
    bottom: 24px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* На мобильных устройствах поднимаем кнопки выше плавающего поиска и скрываем зум */
@media (max-width: 639px) {
    .map-fab-bar {
        bottom: calc(max(12px, env(safe-area-inset-bottom, 12px)) + 64px);
    }
    .zoom-controls-group {
        display: none !important;
    }
}

@media (pointer: coarse) {
    .zoom-controls-group {
        display: none !important;
    }
}

.map-fab-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #cbd5e1;
    background: rgba(17, 24, 39, 0.90);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(51, 65, 85, 0.75);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
    transition: all 0.16s ease;
}

.map-fab-btn:hover {
    background: #1e293b;
    border-color: #475569;
    color: #ffffff;
}

.map-fab-btn:active {
    transform: scale(0.94);
}

.map-fab-btn.mode-active {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4) !important;
}

/* Чипсы выбора корпусов */
.bldg-chip {
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    color: #cbd5e1;
    background: #1e293b;
    border: 1px solid #334155;
    transition: all 0.15s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bldg-chip:hover {
    background: #283548;
    color: #ffffff;
}

.bldg-chip.active {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.32) !important;
}

/* Фон перекрытия модальных окон */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.drawer-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* ============================================================================
   ПОИСКОВОЕ ОКНО И НАВИГАТОР (ЗАЩИТА ОТ ПЕРЕКРЫТИЯ ЭКРАННОЙ КЛАВИАТУРОЙ)
   ============================================================================ */

/* На ПК: сверху под строкой поиска */
.search-modal {
    position: fixed;
    top: 66px;
    left: 16px;
    bottom: auto;
    width: 440px;
    max-width: calc(100vw - 32px);
    max-height: min(520px, calc(var(--vvh, 100dvh) - 84px));
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease;
    border-radius: 20px;
}

.search-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.search-results-list {
    max-height: 300px;
}

/* На смартфонах: закрепляем окно поиска ВВЕРХУ экрана над клавиатурой,
   чтобы при открытии клавиатуры поле ввода и результаты всегда были на виду! */
@media (max-width: 639px) {
    .search-modal {
        top: calc(var(--vvo, 0px) + max(8px, env(safe-area-inset-top, 8px))) !important;
        bottom: auto !important;
        left: 8px !important;
        right: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(var(--vvh, 100dvh) - max(16px, env(safe-area-inset-top, 16px))) !important;
        border-radius: 20px !important;
        transform: translateY(-12px);
    }
    .search-modal.active {
        transform: translateY(0);
    }
    .search-results-list {
        max-height: calc(var(--vvh, 100dvh) - 168px) !important;
    }
}

/* Нижняя плавающая панель поиска */
#bottom-search-bar {
    transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (max-width: 639px) {
    #bottom-search-bar.route-active {
        opacity: 0;
        pointer-events: none;
        transform: translateY(20px);
        display: none !important;
    }
}

/* Скрытие UI по клавише H */
body.ui-hidden .ui-overlay {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: scale(0.97);
}

/* ==========================================
   СВЕТЛАЯ И ТЁМНАЯ ТЕМЫ (LIGHT / DARK MODES)
   ========================================== */

/* 1. Тёмная тема (Глубокий графитово-синий сланец) */
body[data-theme="dark"] {
    background-color: #0b0f17;
    color: #f1f5f9;
}

body[data-theme="dark"] .glass-panel {
    background: rgba(17, 24, 39, 0.90);
    border-color: rgba(51, 65, 85, 0.78);
    color: #f1f5f9;
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.68);
}

body[data-theme="dark"] .floor-switcher-label {
    color: #94a3b8;
}

body[data-theme="dark"] .bldg-chip,
body[data-theme="dark"] .floor-btn,
body[data-theme="dark"] .map-fab-btn,
body[data-theme="dark"] .search-tag-chip,
body[data-theme="dark"] .theme-toggle-btn,
body[data-theme="dark"] .nav-swap-btn,
body[data-theme="dark"] .nav-pick-btn,
body[data-theme="dark"] .nav-quick-chip {
    background: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
}

body[data-theme="dark"] .bldg-chip:hover,
body[data-theme="dark"] .floor-btn:hover,
body[data-theme="dark"] .map-fab-btn:hover,
body[data-theme="dark"] .search-tag-chip:hover,
body[data-theme="dark"] .theme-toggle-btn:hover,
body[data-theme="dark"] .nav-swap-btn:hover,
body[data-theme="dark"] .nav-pick-btn:hover,
body[data-theme="dark"] .nav-quick-chip:hover {
    background: #283548;
    border-color: #475569;
    color: #ffffff;
}

body[data-theme="dark"] .bldg-chip.active,
body[data-theme="dark"] .floor-btn.active,
body[data-theme="dark"] .map-fab-btn.mode-active {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.40) !important;
}

body[data-theme="dark"] .zoom-divider {
    background-color: rgba(51, 65, 85, 0.7);
}

body[data-theme="dark"] #btn-open-search {
    background: #0f172a;
    border: 1px solid #334155;
    color: #cbd5e1;
}
body[data-theme="dark"] #btn-open-search:hover {
    background: #1e293b;
    border-color: #475569;
}
body[data-theme="dark"] #search-widget-text {
    color: #cbd5e1;
}

/* 2. Светлая тема (Воздушная современная картографическая палитра) */
body[data-theme="light"] {
    background-color: #eef2f6;
    color: #0f172a;
}

body[data-theme="light"] .glass-panel {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(203, 213, 225, 0.90);
    color: #0f172a;
    box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.09), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
}

body[data-theme="light"] .floor-switcher-label {
    color: #64748b;
}

body[data-theme="light"] .bldg-chip,
body[data-theme="light"] .floor-btn,
body[data-theme="light"] .map-fab-btn,
body[data-theme="light"] .search-tag-chip,
body[data-theme="light"] .theme-toggle-btn,
body[data-theme="light"] .nav-swap-btn,
body[data-theme="light"] .nav-pick-btn,
body[data-theme="light"] .nav-quick-chip {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
}

body[data-theme="light"] .map-fab-btn {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(203, 213, 225, 0.95);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
    color: #1e293b;
}

body[data-theme="light"] .bldg-chip:hover,
body[data-theme="light"] .floor-btn:hover,
body[data-theme="light"] .map-fab-btn:hover,
body[data-theme="light"] .search-tag-chip:hover,
body[data-theme="light"] .theme-toggle-btn:hover,
body[data-theme="light"] .nav-swap-btn:hover,
body[data-theme="light"] .nav-pick-btn:hover,
body[data-theme="light"] .nav-quick-chip:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #0f172a;
}

body[data-theme="light"] .bldg-chip.active,
body[data-theme="light"] .floor-btn.active,
body[data-theme="light"] .map-fab-btn.mode-active {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.30) !important;
}

body[data-theme="light"] .zoom-divider {
    background-color: #e2e8f0;
}

body[data-theme="light"] .text-slate-100,
body[data-theme="light"] .text-slate-200,
body[data-theme="light"] .text-slate-300 {
    color: #0f172a !important;
}
body[data-theme="light"] .text-slate-400,
body[data-theme="light"] .text-slate-500 {
    color: #64748b !important;
}
body[data-theme="light"] .bg-slate-800,
body[data-theme="light"] .bg-slate-800\/40,
body[data-theme="light"] .bg-slate-800\/80,
body[data-theme="light"] .bg-slate-800\/90,
body[data-theme="light"] .bg-slate-900\/60,
body[data-theme="light"] .bg-slate-900\/90 {
    background-color: #f1f5f9 !important;
}
body[data-theme="light"] .border-slate-700,
body[data-theme="light"] .border-slate-700\/40,
body[data-theme="light"] .border-slate-700\/50,
body[data-theme="light"] .border-slate-700\/60,
body[data-theme="light"] .border-slate-700\/80,
body[data-theme="light"] .border-slate-700\/90 {
    border-color: #e2e8f0 !important;
}
body[data-theme="light"] input[type="text"] {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}
body[data-theme="light"] input[type="text"]:focus {
    background-color: #ffffff !important;
    border-color: #0284c7 !important;
}
body[data-theme="light"] input[type="text"]::placeholder {
    color: #94a3b8 !important;
}

/* Виджет поиска на главной панели */
#btn-open-search {
    cursor: pointer;
}
body[data-theme="light"] #btn-open-search {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
}
body[data-theme="light"] #btn-open-search:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
}
body[data-theme="light"] #search-widget-text {
    color: #475569;
}

/* Акцентные цвета для кнопок 2D/3D и территории */
body[data-theme="light"] #btn-toggle-2d,
body[data-theme="light"] #btn-toggle-territory {
    color: #0284c7;
}
body[data-theme="dark"] #btn-toggle-2d,
body[data-theme="dark"] #btn-toggle-territory {
    color: #38bdf8;
}
body[data-theme="light"] #btn-toggle-2d.mode-active,
body[data-theme="dark"] #btn-toggle-2d.mode-active,
body[data-theme="light"] #btn-toggle-territory.mode-active,
body[data-theme="dark"] #btn-toggle-territory.mode-active {
    color: #ffffff !important;
}

/* Элементы списка результатов поиска */
body[data-theme="light"] .room-search-item:hover {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}
body[data-theme="light"] .room-search-badge {
    background-color: #e0f2fe !important;
    border-color: #bae6fd !important;
    color: #0369a1 !important;
}
body[data-theme="dark"] .room-search-badge {
    background-color: rgba(12, 74, 110, 0.55);
    border-color: rgba(14, 116, 144, 0.65);
    color: #38bdf8;
}

/* ============================================================================
   СТИЛИ НАВИГАТОРА И МАРШРУТИЗАЦИИ (NAVIGATOR & ROUTING STYLES)
   ============================================================================ */

/* Модальное окно навигатора: на десктопе по центру, на телефоне сверху над клавиатурой */
#navigator-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: calc(100vw - 24px);
    max-width: 460px;
    max-height: calc(var(--vvh, 100dvh) - 24px);
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease;
    border-radius: 20px;
}

#navigator-modal.open,
#navigator-modal.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

@media (max-width: 639px) {
    #navigator-modal {
        top: calc(var(--vvo, 0px) + max(8px, env(safe-area-inset-top, 8px))) !important;
        left: 8px !important;
        right: 8px !important;
        bottom: auto !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(var(--vvh, 100dvh) - max(16px, env(safe-area-inset-top, 16px))) !important;
        transform: translateY(-10px) scale(0.98) !important;
        overflow-y: visible;
    }
    #navigator-modal.open,
    #navigator-modal.active {
        transform: translateY(0) scale(1) !important;
    }
}

#navigator-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 55;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

#navigator-backdrop.open,
#navigator-backdrop.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Выпадающие списки автодополнения в навигаторе */
.nav-autocomplete-dropdown {
    background: #111827;
    border: 1px solid #334155;
}
body[data-theme="light"] .nav-autocomplete-dropdown {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}
body[data-theme="light"] .nav-autocomplete-dropdown > div {
    border-color: #f1f5f9 !important;
    color: #0f172a !important;
}
body[data-theme="light"] .nav-autocomplete-dropdown > div:hover {
    background: #f1f5f9 !important;
}

/* Переключатель лифтов (Toggle Switch) */
.switch-control {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
}

.switch-control input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #334155;
    transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 9999px;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: #f8fafc;
    transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.switch-control input:checked + .switch-slider {
    background-color: #0284c7;
    border-color: #38bdf8;
}

.switch-control input:checked + .switch-slider:before {
    transform: translateX(16px);
    background-color: #ffffff;
}

/* Карточка активного маршрута */
#navigator-route-card {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Всплывающий контекстный виджет кабинета */
#room-context-popup {
    transition: opacity 0.14s ease;
}

/* Светлая тема для элементов навигатора */
body[data-theme="light"] #navigator-modal,
body[data-theme="light"] #navigator-route-card,
body[data-theme="light"] #room-context-popup {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(203, 213, 225, 0.95);
    color: #0f172a;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
}

body[data-theme="light"] #nav-card-title {
    color: #0284c7;
}

body[data-theme="light"] #nav-card-time {
    color: #0f172a;
}

body[data-theme="light"] #nav-card-dist {
    color: #475569;
}

body[data-theme="light"] #popup-room-name {
    color: #0f172a;
}

body[data-theme="light"] #btn-quick-toilet {
    background: #f0f9ff;
    color: #0369a1;
    border-color: #bae6fd;
}
body[data-theme="light"] #btn-quick-toilet:hover {
    background: #e0f2fe;
}

body[data-theme="light"] #btn-clear-start,
body[data-theme="light"] #btn-clear-dest {
    color: #64748b;
}

body[data-theme="light"] #btn-clear-start:hover,
body[data-theme="light"] #btn-clear-dest:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* Кнопка-переключатель лифтов в светлой теме */
body[data-theme="light"] #elevators-switch-label {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

body[data-theme="light"] #elevators-switch-label:hover {
    border-color: #0284c7 !important;
}

body[data-theme="light"] #elevators-switch-label .switch-slider {
    background-color: #cbd5e1;
    border-color: #94a3b8;
}

body[data-theme="light"] #elevators-switch-label input:checked + .switch-slider {
    background-color: #0284c7;
    border-color: #0284c7;
}