/**
 * VNK DRIVE — фирменный слой оформления.
 *
 * Подключается последним и перекрывает базовые стили страниц. Всё, что здесь
 * есть, — только внешний вид: разметку и логику не трогаем, поэтому откат
 * сводится к удалению одной строки подключения.
 *
 * Палитра выбрана так, чтобы не пересекаться с исходной: вместо плоского
 * графита с янтарём — глубокая ночная синь, стекло и бирюза. Тёмная база
 * не утомляет глаза в ночную смену, бирюза читается на ней лучше жёлтого.
 */

@import url('/vendor/fonts/manrope.css');

:root {
  --vnk-bg:        #070B18;
  --vnk-bg-2:      #0B1226;
  --vnk-glass:     rgba(255,255,255,.045);
  --vnk-glass-2:   rgba(255,255,255,.07);
  --vnk-line:      rgba(148,163,184,.16);
  --vnk-ink:       #E7ECF7;
  --vnk-dim:       #8A97B4;
  --vnk-accent:    #2DD4BF;   /* бирюза — основной акцент */
  --vnk-accent-2:  #A78BFA;   /* фиолет — второй акцент */
  --vnk-good:      #34D399;
  --vnk-warn:      #FBBF24;
  --vnk-bad:       #FB7185;
  --vnk-r:         16px;
  --vnk-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- основа ---------- */
html, body {
  background: var(--vnk-bg) !important;
  color: var(--vnk-ink) !important;
  font-family: var(--vnk-font) !important;
  letter-spacing: .01em;
}

/* Свечение за контентом: плоский фон читается дёшево, мягкий градиент — нет. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(900px 600px at 12% -5%, rgba(45,212,191,.13), transparent 60%),
    radial-gradient(760px 520px at 88% 0%, rgba(167,139,250,.12), transparent 62%),
    linear-gradient(180deg, var(--vnk-bg-2) 0%, var(--vnk-bg) 55%);
}

/* ---------- шапка и навигация ---------- */
.fl-hdr, .hdr {
  background: rgba(10,15,32,.72) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--vnk-line) !important;
  height: 60px !important;
}

.fl-nav, .nav {
  background: rgba(10,15,32,.55) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--vnk-line) !important;
  padding: 6px 18px !important;
  gap: 2px;
}

.fl-nav a, .nb {
  color: var(--vnk-dim) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 9px 14px !important;
  border-radius: 11px !important;
  border-bottom: none !important;
  position: relative;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}
.fl-nav a:hover, .nb:hover { color: var(--vnk-ink) !important; background: var(--vnk-glass) !important; transform: translateY(-1px); }

.fl-nav a.active, .fl-nav a[aria-current], .nb.on {
  color: #06251F !important;
  background: linear-gradient(135deg, var(--vnk-accent), #5EEAD4) !important;
  box-shadow: 0 6px 20px rgba(45,212,191,.30);
}

/* ---------- карточки ---------- */
.card, .met, .panel, .box, .tile {
  background: var(--vnk-glass) !important;
  border: 1px solid var(--vnk-line) !important;
  border-radius: var(--vnk-r) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(2,6,20,.35);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s, box-shadow .22s;
}
.card:hover, .met:hover {
  transform: translateY(-3px);
  border-color: rgba(45,212,191,.34) !important;
  box-shadow: 0 16px 40px rgba(2,6,20,.5), 0 0 0 1px rgba(45,212,191,.12);
}

.ml, .st { color: var(--vnk-dim) !important; letter-spacing: .1em !important; font-weight: 700 !important; }
.mv { font-weight: 800 !important; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ms { color: var(--vnk-dim) !important; }

/* Акценты перекрашиваем: янтарь и индиго были у прежней системы. */
.amb, .blu { color: var(--vnk-accent) !important; }
.grn { color: var(--vnk-good) !important; }
.red { color: var(--vnk-bad) !important; }

/* ---------- таблицы ---------- */
table { border-collapse: separate !important; border-spacing: 0; }
th {
  color: var(--vnk-dim) !important;
  text-transform: uppercase; letter-spacing: .08em;
  font-size: 10.5px !important; font-weight: 700 !important;
  border-bottom: 1px solid var(--vnk-line) !important;
  background: rgba(255,255,255,.02);
  position: sticky; top: 0; z-index: 2;
}
td { color: var(--vnk-ink) !important; border-bottom: 1px solid rgba(148,163,184,.09) !important; font-variant-numeric: tabular-nums; }
tbody tr { transition: background .15s; }
tbody tr:hover td { background: rgba(45,212,191,.055) !important; }

/* ---------- кнопки ---------- */
button, .btn, .upd-btn {
  font-family: var(--vnk-font) !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  transition: transform .16s, box-shadow .16s, background .16s;
}
button:hover, .btn:hover, .upd-btn:hover { transform: translateY(-1px); }
.upd-btn, .modal-btn.primary {
  background: linear-gradient(135deg, var(--vnk-accent), #22B8A6) !important;
  border: none !important; color: #04231E !important;
  box-shadow: 0 8px 22px rgba(45,212,191,.28);
}

.badge { border-radius: 999px !important; letter-spacing: .04em; }

/* ---------- полосы прокрутки ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,.22); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(45,212,191,.45); background-clip: content-box; }

/* ---------- появление блоков при прокрутке ---------- */
.vnk-reveal { opacity: 0; transform: translateY(14px); }
.vnk-reveal.vnk-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .55s cubic-bezier(.2,.7,.3,1); }

/* ---------- живая карта под главным экраном ---------- */
#vnk-map {
  position: fixed; inset: 0; z-index: -1;
  opacity: .3; filter: saturate(.75) contrast(1.05);
  pointer-events: none;
}
#vnk-map .leaflet-control-container { display: none; }
body.vnk-has-map .w { position: relative; z-index: 1; }

.vnk-dot { border-radius: 50%; box-shadow: 0 0 0 0 rgba(45,212,191,.55); }
.vnk-dot.line { background: var(--vnk-accent); animation: vnkPulse 2.6s infinite; }
.vnk-dot.free { background: var(--vnk-accent-2); }
@keyframes vnkPulse {
  0%   { box-shadow: 0 0 0 0 rgba(45,212,191,.5); }
  70%  { box-shadow: 0 0 0 12px rgba(45,212,191,0); }
  100% { box-shadow: 0 0 0 0 rgba(45,212,191,0); }
}


/* ---------- переход между разделами: оклейка машины ---------- */
#vnk-wipe {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7,11,24,.92);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
}
#vnk-wipe.on { opacity: 1; visibility: visible; }
#vnk-wipe .decal {
  font-family: var(--vnk-font); font-weight: 800; letter-spacing: .28em;
  font-size: 20px; color: var(--vnk-accent); text-transform: uppercase;
  opacity: 0; transform: translateX(-24px);
}
#vnk-wipe.on .decal { animation: vnkDecal .7s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes vnkDecal {
  0%   { opacity: 0; transform: translateX(-26px); letter-spacing: .5em; }
  60%  { opacity: 1; transform: translateX(0);    letter-spacing: .28em; }
  100% { opacity: 1; transform: translateX(0);    letter-spacing: .28em; }
}

@media (prefers-reduced-motion: reduce) {
  .vnk-reveal, .card, .met, button { transition: none !important; animation: none !important; }
  #vnk-kitten, #vnk-wipe { display: none !important; }
}

/* ---------- формы и поля ввода ---------- */
input, select, textarea {
  font-family: var(--vnk-font) !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--vnk-line) !important;
  border-radius: 11px !important;
  color: var(--vnk-ink) !important;
  padding: 10px 12px !important;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: rgba(45,212,191,.55) !important;
  box-shadow: 0 0 0 3px rgba(45,212,191,.14) !important;
  background: rgba(255,255,255,.07) !important;
}
input::placeholder, textarea::placeholder { color: rgba(138,151,180,.65) !important; }
label, .field > span, .ml { color: var(--vnk-dim) !important; }

/* ---------- вход в систему ---------- */
/* Оранжево-красный градиент — визитная карточка прежней системы.
   Меняем везде, где он встречается: кнопки, плашки, иконка логотипа. */
.btn, button[type="submit"], .logo-ico {
  background: linear-gradient(135deg, var(--vnk-accent), #22B8A6) !important;
  color: #04231E !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  box-shadow: 0 10px 26px rgba(45,212,191,.30);
}
.btn:hover, button[type="submit"]:hover { filter: brightness(1.06); transform: translateY(-1px); }

.box {
  background: var(--vnk-glass) !important;
  border: 1px solid var(--vnk-line) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 24px 70px rgba(2,6,20,.55);
}
.foot { color: var(--vnk-dim) !important; }
.err { color: var(--vnk-bad) !important; }

/* ---------- модальные окна и всплывающие панели ---------- */
.modal, .modal-box, .popup, .dropdown, .menu {
  background: rgba(11,18,38,.92) !important;
  border: 1px solid var(--vnk-line) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ---------- логотип в шапке ---------- */
.logo-n { letter-spacing: .12em; text-transform: uppercase; font-weight: 800 !important; }
.logo-s { color: var(--vnk-accent) !important; letter-spacing: .18em; text-transform: uppercase; }

/* ---------- полосы и индикаторы ---------- */
.bf { background: linear-gradient(90deg, var(--vnk-accent), var(--vnk-accent-2)) !important; }
.bk { background: rgba(148,163,184,.14) !important; }

/* Заголовки страниц — крупнее и с разрядкой: сразу видно, где ты находишься. */
h1 { font-weight: 800 !important; letter-spacing: -.02em; }
h2, h3 { font-weight: 700 !important; letter-spacing: -.01em; }

/* ---------- живой парк на экране приветствия ---------- */
.vnk-hud {
  margin: 26px auto 0; max-width: 620px;
  background: rgba(11,18,38,.62);
  border: 1px solid var(--vnk-line);
  border-radius: 18px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 18px 50px rgba(2,6,20,.5);
  padding: 18px 22px;
}
.vnk-hud-row { display: flex; gap: 10px; justify-content: space-around; }
.vnk-hud-row > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vnk-hud b {
  font-size: 26px; font-weight: 800; color: var(--vnk-accent);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.vnk-hud span { font-size: 11px; color: var(--vnk-dim); text-transform: uppercase; letter-spacing: .1em; }

/* На приветствии карта — главный герой, поэтому текст поднимаем над ней. */
#t-welcome { position: relative; z-index: 1; }

/* ---------- котёнок за курсором ---------- */
#vnk-kitten{
  position:fixed;left:0;top:0;z-index:9998;pointer-events:none;
  opacity:0;transition:opacity .6s ease;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.55));
  transform-origin:50% 70%;
}
#vnk-kitten.on{opacity:.92}

/* ============================================================
   Убрано из интерфейса по решению владельца.

   Данные должны приходить из taxiCRM автоматически, а не загружаться
   файлами руками. Элементы не удаляем из разметки, а скрываем: логика
   импорта остаётся на месте и включается снятием этого блока, если
   выгрузка из 1С когда-нибудь понадобится.
   ============================================================ */

/* Ручная загрузка выгрузок 1С — кнопки, поля и окно импорта. */
#uploadModal,
#uploadModal-dialog,
.zone-input,
input[type="file"],
.upd-btn,
#t-welcome button:not([onclick*="logout"]),
#t-welcome label {
  display: none !important;
}

/* Экран приветствия без кнопки загрузки: вместо «загрузи файл» человек
   видит живой парк на карте. */
#t-welcome > div:nth-child(3) { display: none !important; }

/* Геозоны — это функция диспетчерской службы такси. У парка другой бизнес:
   аренда и выкуп автомобилей, поэтому вкладка не нужна. */
[data-tab="geosettings"],
[data-tab="geozones"],
.geozone-panel {
  display: none !important;
}