/* =====================================================================
   COMPASS CRM — тема CompassOS (body.vx)
   Перекраска компонентов app.css под тёмное стекло. Каркас (статус-строка,
   орнамент, виджеты, поиск, модалки, вход, анимации) — в shell.css.
   Разметка и JS не меняются: чтобы откатить тему, достаточно убрать
   <link vision.css> и vx-разметку из base.html / header.html.
   ===================================================================== */

body.vx {
    /* Перекрашиваем токены app.css под тёмное «стекло» */
    --bg: #1b2440;
    --surface: rgba(255, 255, 255, 0.10);
    --surface-solid: rgba(48, 52, 66, 0.86);
    --surface-hover: rgba(255, 255, 255, 0.16);
    --glass: rgba(255, 255, 255, 0.10);
    --glass-border: rgba(255, 255, 255, 0.16);
    --text: rgba(255, 255, 255, 0.96);
    --text-secondary: rgba(235, 238, 255, 0.62);
    --accent: #ffffff;
    --accent-light: #e9e9ee;
    --accent-hover: #f2f2f6;
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #ff6b6b;
    --info: #7cb4ff;
    --radius: 30px;
    --radius-sm: 18px;
    --radius-xs: 12px;
    --shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 24px 60px rgba(5, 8, 25, .32);
    --shadow-lg: 0 1px 0 rgba(255,255,255,.14) inset, 0 30px 80px rgba(5, 8, 25, .45);
    --blur: blur(40px) saturate(180%);
    /* светлый блик сверху + тёмная подложка: читается и на ярком закате */
    --vx-glass: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05)), rgba(26, 30, 50, .34);
    --vx-glass-strong: linear-gradient(160deg, rgba(70,74,92,.78), rgba(42,45,60,.78));
    --vx-edge: rgba(255, 255, 255, 0.20);
    --vx-recess: rgba(0, 0, 0, 0.22);
    --vx-hover: rgba(255, 255, 255, 0.10);
    --vx-ink: #0d0f17;            /* текст на белых кнопках */
    --vx-ease: cubic-bezier(.2, .8, .2, 1);
    color-scheme: dark;
}

body.vx {
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
}
body.vx ::selection { background: rgba(255,255,255,.35); }
body.vx a { color: inherit; }
body.vx a:hover { opacity: 1; }

/* ---------- Базовое стекло ---------- */
body.vx .card,
body.vx .glass,
body.vx .object-card {
    background: var(--vx-glass);
    border: 1px solid var(--vx-edge);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}
body.vx .card-header { border-bottom: 1px solid rgba(255,255,255,.10); }
body.vx .card-title { color: var(--text); }
body.vx .text-secondary { color: var(--text-secondary); }
body.vx .text-danger { color: var(--danger); }
body.vx mark { background: rgba(255, 214, 102, .35); color: #fff; border-radius: 4px; padding: 0 2px; }

/* ---------- Заголовки страниц ---------- */
body.vx .page-header { padding-top: 26px; }
body.vx .page-header h1 { font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; text-shadow: 0 2px 20px rgba(0,0,0,.25); }
body.vx .page-header .pretitle { color: rgba(255,255,255,.7); letter-spacing: .12em; }

/* ---------- Кнопки ---------- */
body.vx .btn { border-radius: 999px; font-weight: 600; }
body.vx .btn-primary {
    background: rgba(255,255,255,.94); color: var(--vx-ink); border: none;
    box-shadow: 0 8px 22px rgba(0,0,0,.22);
}
body.vx .btn-primary:hover { background: #fff; color: var(--vx-ink); transform: translateY(-1px); }
body.vx .btn-secondary, body.vx .btn-outline {
    background: rgba(255,255,255,.12); color: var(--text); border: 1px solid rgba(255,255,255,.18);
}
body.vx .btn-secondary:hover, body.vx .btn-outline:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.3); color: #fff; }
body.vx .btn-ghost { background: transparent; color: var(--text); }
body.vx .btn-ghost:hover { background: rgba(255,255,255,.12); }
body.vx .btn-danger { background: rgba(255, 107, 107, .9); color: #fff; }

/* ---------- Формы ---------- */
body.vx .form-label { color: rgba(255,255,255,.72); }
body.vx .form-control,
body.vx .form-select,
body.vx textarea.form-control {
    background-color: var(--vx-recess);
    color: var(--text);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.18);
}
body.vx .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23ffffffaa'/%3E%3C/svg%3E");
}
body.vx .form-select option { background: #2b2f3e; color: #fff; }
body.vx .form-control::placeholder { color: rgba(255,255,255,.38); }
body.vx .form-control:focus,
body.vx .form-select:focus {
    border-color: rgba(255,255,255,.5);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.18), 0 0 0 4px rgba(255,255,255,.12);
    background-color: rgba(0,0,0,.28);
}
body.vx .form-hint { color: var(--text-secondary); }
body.vx .form-check-input { background: var(--vx-recess); border-color: rgba(255,255,255,.3); }
body.vx .form-check-input:checked { background: #fff; border-color: #fff; }
body.vx input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px rgba(40,44,60,1) inset; }

/* ---------- Бейджи ---------- */
body.vx .badge { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
body.vx .badge-success { background: rgba(52, 211, 153, .22); color: #86efc0; }
body.vx .badge-warning { background: rgba(251, 191, 36, .22); color: #fcd780; }
body.vx .badge-danger { background: rgba(255, 107, 107, .22); color: #ffaaaa; }
body.vx .badge-info { background: rgba(124, 180, 255, .22); color: #b4d4ff; }
body.vx .badge-dark { background: rgba(255,255,255,.14); color: #fff; }
body.vx .badge-site { background: rgba(196, 181, 253, .24); color: #e0d8ff; }

/* ---------- Выпадающие меню ---------- */
body.vx .dropdown-menu {
    background: var(--vx-glass-strong);
    border: 1px solid var(--vx-edge);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-radius: 22px; padding: 8px;
    box-shadow: var(--shadow-lg);
}
body.vx .dropdown-item { color: var(--text); border-radius: 14px; font-family: inherit; }
body.vx .dropdown-item:hover { background: rgba(255,255,255,.12); }
body.vx .dropdown-item.danger { color: #ff9a9a; }
body.vx .dropdown-item.accent { color: #d4c8ff; }
body.vx .dropdown-divider { background: rgba(255,255,255,.12); }
body.vx .notification-item:hover { background: rgba(255,255,255,.06); }
body.vx .notification-dot.read { background: rgba(255,255,255,.3); }

/* ---------- Таблица объектов ---------- */
body.vx .data-table thead th { color: var(--text-secondary); border-bottom: 1px solid rgba(255,255,255,.12); }
body.vx .data-table tbody td { border-bottom: 1px solid rgba(255,255,255,.07); color: var(--text); }
body.vx .data-table tbody tr:hover { background: rgba(255,255,255,.06); }
body.vx .data-table tbody tr.table-row.row-fresh > td { background: rgba(52, 211, 153, .07); border-color: rgba(52, 211, 153, .45); }
body.vx .data-table tbody tr.table-row.row-recent > td { background: rgba(251, 191, 36, .06); border-color: rgba(251, 191, 36, .4); }
body.vx .table-avatar { border-radius: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
body.vx .row-date { color: var(--text-secondary); }
body.vx .owner-pill { background: rgba(40,44,60,.85); color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.14); }
body.vx .drag-handle { color: rgba(255,255,255,.5); }
body.vx .drag-handle:hover { color: #fff; background: rgba(255,255,255,.1); }
body.vx .map-link { color: inherit; }

/* Поиск, быстрые фильтры, теги, пагинация */
body.vx .search-bar .form-control { border-radius: 999px; background-color: rgba(255,255,255,.12); box-shadow: none; }
body.vx .search-bar-icon { color: rgba(255,255,255,.6); }
body.vx .qchip { background: rgba(255,255,255,.12); color: var(--text); border-color: rgba(255,255,255,.14); }
body.vx .qchip:hover { background: rgba(255,255,255,.2); }
body.vx .qchip.active { background: rgba(255,255,255,.94); color: var(--vx-ink); border-color: transparent; }
body.vx .qchip-site.active { background: #c4b5fd; color: #1b1340; }
body.vx .filter-tag { background: rgba(255,255,255,.12); color: var(--text); border-color: rgba(255,255,255,.14); }
body.vx .filter-tag-remove { color: rgba(255,255,255,.7); }
body.vx .pagination-btn { background: rgba(255,255,255,.1); color: var(--text); border-color: rgba(255,255,255,.12); }
body.vx .pagination-btn:hover:not(:disabled) { background: rgba(255,255,255,.2); }
body.vx .pagination-btn.active { background: rgba(255,255,255,.94); color: var(--vx-ink); border-color: transparent; }
body.vx .pagination-info { color: var(--text-secondary); }

/* Мобильные карточки */
body.vx .mcard { background: var(--vx-glass); border: 1px solid var(--vx-edge); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow); border-radius: 28px; }
body.vx .mcard-media { border-radius: 27px 27px 0 0; }
body.vx .mcard-more { background: rgba(255,255,255,.14); color: #fff; }
body.vx .mcard-title { color: var(--text); }
body.vx .mcard-title span, body.vx .mcard-loc, body.vx .mcard-owner, body.vx .mcard-price small { color: var(--text-secondary); }
body.vx .mcard-specs span { background: rgba(255,255,255,.12); color: var(--text); }
body.vx .mcard-specs .row-date { background: transparent; }
body.vx .mcard.row-fresh { box-shadow: 0 0 0 2px rgba(52, 211, 153, .55), var(--shadow); }
body.vx .mcard.row-recent { box-shadow: 0 0 0 2px rgba(251, 191, 36, .45), var(--shadow); }
body.vx .sheet-mobile .sheet-title { color: var(--text-secondary); border-bottom-color: rgba(255,255,255,.12); }

/* Пустое состояние */
body.vx .empty-state, body.vx .empty-state h3 { color: var(--text); }
body.vx .empty-state p, body.vx .empty-state svg { color: var(--text-secondary); }

/* ---------- Карточка объекта ---------- */
body.vx .detail-table tr td { border-bottom: 1px solid rgba(255,255,255,.08); }
body.vx .detail-table .label { color: var(--text-secondary); }
body.vx .carousel { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
body.vx .carousel-btn { background: rgba(40,44,60,.6); color: #fff; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.18); }
body.vx .carousel-btn:hover { background: rgba(255,255,255,.9); color: var(--vx-ink); }
body.vx .map-frame { border-radius: 0 0 var(--radius) var(--radius); filter: saturate(.85) brightness(.92); }

/* ---------- Фото-менеджер ---------- */
body.vx .photo-dropzone { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.05); border-radius: 26px; }
body.vx .photo-dropzone.dragover { border-color: #fff; background: rgba(255,255,255,.12); }
body.vx .photo-dropzone-message { color: var(--text-secondary); }
body.vx .photo-dropzone-message:hover { color: #fff; }
body.vx .photo-preview { background: rgba(255,255,255,.08); border-radius: 18px; }
body.vx .photo-preview.drag-over { border-color: #fff; }
body.vx .photo-counter, body.vx .photo-actions-bar { color: var(--text-secondary); }

/* ---------- Выбор города/района ---------- */
body.vx .loc-add-chip { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.18); }
body.vx .loc-add-chip:hover { background: #fff; color: var(--vx-ink); border-color: #fff; }
body.vx .loc-region-hint, body.vx .loc-section-label, body.vx .loc-region-group-title, body.vx .loc-empty { color: var(--text-secondary); }
body.vx .loc-modal__backdrop { background: rgba(8, 10, 24, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.vx .loc-modal__dialog {
    background: var(--vx-glass-strong); color: var(--text);
    border: 1px solid var(--vx-edge); border-radius: 30px;
    backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
}
body.vx .loc-modal__header { border-bottom-color: rgba(255,255,255,.1); }
body.vx .loc-modal__eyebrow { color: var(--text-secondary); }
body.vx .loc-modal__title { color: #fff; }
body.vx .loc-modal__close { background: rgba(255,255,255,.12); color: #fff; }
body.vx .loc-modal__close:hover { background: #fff; color: var(--vx-ink); }
body.vx .loc-add-form { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }
body.vx .loc-item { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); }
body.vx .loc-item:hover, body.vx .loc-item[data-editing="1"] { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); }
body.vx .loc-item-name { color: #fff; }
body.vx .loc-item-input { background: var(--vx-recess); color: #fff; border-color: rgba(255,255,255,.2); }
body.vx .loc-icon-btn { color: rgba(255,255,255,.75); }
body.vx .loc-icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
body.vx .loc-error { background: rgba(255,107,107,.15); color: #ffb0b0; }

/* ---------- Модалки ---------- */
body.vx .modal-overlay { background: rgba(8, 10, 24, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.vx .modal-content { background: var(--vx-glass-strong); border: 1px solid var(--vx-edge); border-radius: 30px; backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); color: var(--text); }
body.vx .modal-header { border-bottom-color: rgba(255,255,255,.1); }

/* ---------- Тосты ---------- */
body.vx .toast {
    border-radius: 999px; padding: 14px 22px;
    background: rgba(40, 44, 60, .82) !important; color: #fff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: var(--shadow-lg);
}
body.vx .toast-success { box-shadow: inset 4px 0 0 #34d399, var(--shadow-lg); }
body.vx .toast-danger { box-shadow: inset 4px 0 0 #ff6b6b, var(--shadow-lg); }
body.vx .toast-warning { box-shadow: inset 4px 0 0 #fbbf24, var(--shadow-lg); }
body.vx .toast-info { box-shadow: inset 4px 0 0 #7cb4ff, var(--shadow-lg); }

/* ---------- Профиль, пользователи ---------- */
body.vx .profile-nav-item { color: var(--text); border-radius: 14px; }
body.vx .profile-nav-item:hover { background: rgba(255,255,255,.1); }
body.vx .profile-nav-item.active { background: rgba(255,255,255,.92); color: var(--vx-ink); }
body.vx .profile-nav-item.disabled { color: rgba(255,255,255,.5); }
body.vx .profile-divider { background: rgba(255,255,255,.12); }
body.vx .profile-avatar { box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 10px 30px rgba(0,0,0,.3); background-color: rgba(255,255,255,.2); }
body.vx .role-select { background-color: rgba(255,255,255,.14); color: #fff; }
body.vx .role-select:hover, body.vx .role-select:focus { background-color: rgba(255,255,255,.22); }
body.vx .role-select option { background: #2b2f3e; color: #fff; }

/* ---------- AI-ассистент ---------- */
body.vx .assistant-fab {
    background: rgba(255,255,255,.94); box-shadow: 0 12px 30px rgba(0,0,0,.3);
}
body.vx .assistant-fab img { filter: invert(1); }
body.vx .assistant-panel {
    background: var(--vx-glass-strong);
    border-left: 1px solid var(--vx-edge);
    backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
    color: var(--text);
}
body.vx .assistant-overlay { background: rgba(8, 10, 24, .35); }
body.vx .assistant-header, body.vx .assistant-input { border-color: rgba(255,255,255,.1); background: transparent; }
body.vx .assistant-logo { background: rgba(255,255,255,.9); }
body.vx .chat-msg.assistant .chat-bubble { background: rgba(255,255,255,.12); color: var(--text); }
body.vx .chat-msg.user .chat-bubble { background: rgba(255,255,255,.94); color: var(--vx-ink); }
body.vx .chat-bubble code { background: rgba(0,0,0,.3); color: #fff; }
body.vx .chat-typing span { background: #fff; }
body.vx .assistant-data-btn { border-color: rgba(255,255,255,.2); color: var(--text-secondary); }
body.vx .assistant-data-btn:hover { border-color: #fff; color: #fff; }
body.vx .assistant-data-btn.active { background: rgba(255,255,255,.94); color: var(--vx-ink); border-color: transparent; }
body.vx .assistant-input-wrap { background: var(--vx-recess); border: 1px solid rgba(255,255,255,.1); }
body.vx .assistant-input-wrap .form-control { background: transparent; box-shadow: none; border: none; }
body.vx .assistant-send-btn { background: rgba(255,255,255,.94); color: var(--vx-ink); }
body.vx .assistant-resize:hover, body.vx .assistant-resize:active { background: #fff; }

/* ---------- Футер ---------- */
body.vx .footer { color: rgba(255,255,255,.55); }

/* ---------- Мобильная версия ---------- */
@media (max-width: 768px) {
    body.vx .tabbar {
        background: linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
        border: 1px solid var(--vx-edge);
        backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
        border-radius: 999px;
    }
    body.vx .tabbar-item { color: rgba(255,255,255,.65); }
    body.vx .tabbar-item.active { color: #fff; }
    body.vx .tabbar-item img { filter: invert(1); opacity: .7; }
    body.vx .tabbar-add { background: rgba(255,255,255,.94); color: var(--vx-ink); border-radius: 50%; }
    body.vx .filter-panel:not(.hidden) { background: rgba(8, 10, 24, .45); }
    body.vx .filter-panel:not(.hidden) > .card { background: var(--vx-glass-strong); border-radius: 30px 30px 0 0; }
    body.vx .dropdown-menu.sheet-mobile { background: var(--vx-glass-strong); box-shadow: 0 0 0 100vmax rgba(8, 10, 24, .5), var(--shadow-lg); border-radius: 28px; }
    body.vx .assistant-panel { border-left: 0; }
    body.vx .assistant-input { background: rgba(30, 33, 46, .9); }
    body.vx .page-header h1 { font-size: 1.6rem; }
}