/* =========================================================================
   redesign.css — modern UI layer (loaded LAST, after responsive.css).
   Слой поверх легаси-стилей: не трогаем старые CSS (часть в CP1251),
   а переопределяем нужное здесь. Токены — в theme.css.
   ========================================================================= */

/* ----- base ----- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  overflow-x: hidden;               /* страховка от гориз. прокрутки */
}

.page-wrapper {
  min-height: 100vh;
  /* >=15px компенсирует отрицательные поля bootstrap .row (margin -15px) → без гориз. overflow */
  padding-left: clamp(15px, 3vw, 28px);
  padding-right: clamp(15px, 3vw, 28px);
}

/* ============================ HEADER ============================ */
.page-wrapper > .row:first-child { align-items: center; }

header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 2px 16px;
}

.project-name {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding-left: 0;
  font-size: 100%;
}

/* logo: inline style width:209px on the <img> → нужен !important */
#logo {
  width: auto !important;
  height: 34px !important;
  margin: 0 !important;
  display: block;
}

/* tagline (h1 внутри .project-name) — переопределяет inline <STYLE> h1{} */
header h1 {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .1px;
  line-height: 1.25;
}

/* ---- nav (всегда инлайн; гамбургер отключён, brk.small=0 в nav-ondemand.js) ---- */
#nav-show-btn { display: none !important; }
.nav-anchor { display: none; }

.nav-wrapper { margin-left: auto; }

.nav-responsive > ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  margin: 0;
}
.nav-responsive > ul > li + li:before { content: none !important; } /* убрать | */
.nav-responsive > ul > li > a {
  display: inline-block;
  padding: 8px 12px !important;
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.nav-responsive > ul > li > a:hover {
  color: var(--primary);
  background: var(--primary-050);
}

/* ============================ CONTENT LAYOUT ============================ */
.content-row { gap: 0; }

/* левая колонка (форма) как «карточка» */
.content-row > .col-sm-5 {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px !important;
  margin-bottom: 16px;
}

/* ============================ ADDRESS INPUT ============================ */
.address { gap: 10px; }
.address > input,
#address-input {
  height: 44px;
  padding: 0 12px !important;
  border: var(--input-border) !important;
  border-color: var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.address > input::placeholder { color: var(--ink-3); }
.address > input:focus,
#address-input:focus {
  outline: 0;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,.15);
}
.width-grow { margin-right: 0; }

/* ============================ BUTTONS ============================ */
.my-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  border-width: 1px;
  font-weight: 600;
  font-size: .95rem;
  text-transform: none;             /* было uppercase — устарело */
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s, border-color .15s, transform .05s;
}
.my-btn:active { transform: translateY(1px); }

/* primary filled */
.btn-regular { box-shadow: 0 1px 2px rgba(79,70,229,.25); }
.btn-regular:hover { box-shadow: 0 4px 14px rgba(79,70,229,.35); }

/* secondary / ghost (Поделиться) */
.btn-link-alike {
  border: 1px solid var(--border) !important;
  background: var(--surface);
}
.btn-link-alike:hover {
  border-color: var(--primary) !important;
  background: var(--primary-050);
}
.btn-link-alike > img { width: 1rem; height: 1rem; }
/* иконка кнопки — SVG на currentColor: красится темой и hover'ом заодно с текстом */
.my-btn > .btn-icon { width: 1rem; height: 1rem; flex: 0 0 auto; }

/* disabled */
.my-btn:disabled, .my-btn.disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* focus-visible ring для доступности */
.my-btn:focus-visible,
.nav-responsive a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.address-list-buttons-wrapper { gap: 10px; margin-top: 14px; }

/* ============================ ADDRESS LIST ============================ */
.address-list { margin-top: 1rem; }
.address-list .header {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink-3);
}
.content-row .separator-h,
.separator-h {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 10px 0;
}
li.address { color: var(--ink-2); border-radius: 8px; padding: .4rem .3rem; }
li.address:hover { background: #f8fafc; }

/* ============================ SUGGESTIONS DROPDOWN ============================ */
.address-suggestions {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-lg);
  padding: 6px !important;
  background: var(--surface) !important;
}
.address-suggestions .suggestion {
  padding: .5rem .6rem;
  border-radius: 7px;
  color: var(--ink);
}
.address-suggestions .suggestion:hover,
.address-suggestions .suggestion[data-is-hovered] {
  background: var(--primary-050) !important;
  color: var(--primary-700);
}

/* ============================ MAP ============================ */
.map-section { padding: 0; }
.map-section .map,
#map.map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* Leaflet controls — modern */
.leaflet-bar, .leaflet-bar a {
  border: 0 !important;
}
.leaflet-bar {
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden;
}
.leaflet-bar a {
  color: var(--ink-2) !important;
  width: 34px; height: 34px; line-height: 34px !important;
}
.leaflet-bar a:hover { background: var(--primary-050) !important; color: var(--primary) !important; }

/* our custom "Моё местоположение" control (создаётся в map-with-marker-list.js) */
.leaflet-control-locate a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-size: 18px; line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
}
.leaflet-control-locate a:hover { background: var(--primary-050); color: var(--primary); }
.leaflet-control-locate.is-busy a { opacity: .6; pointer-events: none; }

/* переключатель светлой/тёмной подложки (создаётся в map-with-marker-list.js) */
.leaflet-control-theme a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  font-size: 17px; line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
}
.leaflet-control-theme a:hover { background: var(--primary-050); color: var(--primary); }

/* --- Перекраска пинов в палитру frontend-24 (без генерации новых PNG) ---
   Пины — готовые нумерованные PNG (blue/yellow); CSS-фильтр сдвигает их в
   перивинкл/амбер. Белые номера (без насыщенности) фильтром почти не затрагиваются. */
.leaflet-marker-icon.mrk-blue   { filter: brightness(1.35) saturate(.6) hue-rotate(18deg); }   /* default -> #99A9FF */
.leaflet-marker-icon.mrk-yellow { filter: hue-rotate(-30deg) saturate(1.15) brightness(1.08); } /* active  -> #FFD277 */

/* --- Тёмная подложка: читаемость атрибуции/масштабной линейки --- */
.map-theme-dark .leaflet-control-attribution {
  background: rgba(20,24,31,.72) !important;
  color: #aeb6c2 !important;
}
.map-theme-dark .leaflet-control-attribution a { color: #c7ccd6 !important; }

/* ============================ POPOVERS / OVERLAYS ============================ */
.overlay { background: rgba(15,23,42,.45); }

/* Поповеры ДОЛЖНЫ лежать выше оверлея.
   .overlay в overlay-and-popover.css имеет z-index:10000, а у .popover z-index не было
   вовсе (auto) — по правилам стекинга оверлей рисовался ПОВЕРХ поповера и перехватывал
   все клики, включая крестик (поповер нельзя было закрыть). Уведомления
   (.notificaitons-wrapper = 10100) остаются самыми верхними. */
.popover.overlaid, .splash.overlaid { z-index: 10050; }

.popover.overlaid, .splash.overlaid, .notificaitons-wrapper .overlaid {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 20px !important;
}
.popover header strong { color: var(--ink); font-size: 1.05rem; }
.about-content, .help-content { color: var(--ink-2); }
.btn-special { min-height: 40px; border-radius: var(--radius-sm); font-weight: 600; }

/* ============================ ПОПОВЕР «ПОДЕЛИТЬСЯ» ============================ */
/* шире стандартного поповера: ссылка вида https://mini.aurama.ru/p/xxxxxxx должна
   влезать в одну строку рядом с кнопкой «Копировать» */
#popover-link-share { max-width: min(34rem, calc(100vw - 24px)); }

.share-explain { display: flex; align-items: center; gap: 14px; }
.share-explain-text { margin: 0; color: var(--ink-2); font-size: .92rem; }

.link-to-share { width: 100%; box-sizing: border-box; align-items: stretch; }
.link-to-share > p {
  background: var(--share-link-url-background-clr);
  border: var(--share-link-url-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--ink);
  /* ссылка должна быть видна ЦЕЛИКОМ (в overlay-and-popover.css она обрезалась
     nowrap + max-width:15rem + overflow:hidden, в responsive.css — max-width:17rem) */
  white-space: normal;
  overflow-wrap: break-word;
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem;
}
.link-to-share > button { flex: 0 0 auto; }

/* подтверждение копирования */
.copy-status {
  margin: 0 0 var(--regular-padding);
  font-size: .88rem;
  font-weight: 600;
}
.copy-status.is-ok   { color: #15803d; }
.copy-status.is-warn { color: #b45309; }

/* --- пояснительная анимация: карточка-ссылка уезжает в телефон курьера,
       на экране проявляется маршрут A→B. Чистый CSS, без картинок. --- */
.share-anim {
  position: relative;
  flex: 0 0 auto;
  width: 84px; height: 66px;
}
.share-anim-phone {
  position: absolute; right: 0; top: 0;
  width: 38px; height: 66px; box-sizing: border-box;
  border: 2px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
}
.share-anim-phone:before {                 /* «динамик» */
  content: ""; position: absolute; left: 50%; top: 4px;
  width: 12px; height: 2px; margin-left: -6px;
  border-radius: 2px; background: var(--border-strong);
}
.share-anim-link {                         /* летящая карточка со ссылкой */
  position: absolute; left: 0; top: 24px;
  width: 34px; height: 14px;
  border-radius: 4px;
  background: var(--primary);
  box-shadow: 0 2px 6px rgba(79,70,229,.35);
  animation: share-fly 3.2s ease-in-out infinite;
}
.share-anim-link:before {                  /* «текст» внутри карточки */
  content: ""; position: absolute; left: 5px; top: 6px;
  width: 20px; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,.85);
}
.share-anim-route {
  position: absolute; left: 8px; top: 12px; right: 8px; bottom: 10px;
  opacity: 0;
  animation: share-route-in 3.2s ease-in-out infinite;
}
.share-anim-dot {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
}
.share-anim-dot-a { left: 0; top: 0; background: #E53935; }
.share-anim-dot-b { right: 0; bottom: 0; background: #1E88E5; }
.share-anim-line {
  position: absolute; left: 4px; top: 4px;
  width: 2px; height: calc(100% - 8px);
  background: repeating-linear-gradient(180deg, #FFA500 0 4px, transparent 4px 7px);
}

/* 50px = от левого края до середины «телефона» (он справа, шириной 38px) */
@keyframes share-fly {
  0%,  8%  { transform: translate(0, 0) scale(1);      opacity: 1; }
  45%      { transform: translate(50px, 0) scale(.72); opacity: 1; }
  55%,100% { transform: translate(50px, 0) scale(.5);  opacity: 0; }
}
@keyframes share-route-in {
  0%,  48%  { opacity: 0; }
  62%, 100% { opacity: 1; }
}

/* уважать системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  .share-anim-link { animation: none; }
  .share-anim-route { animation: none; opacity: 1; }
}

@media (max-width: 420px) {
  .share-explain { gap: 10px; }
  .share-explain-text { font-size: .88rem; }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 575.98px) {
  /* на узком экране прячем длинный тэглайн, оставляем лого + меню */
  header h1 { display: none; }
  header { padding: 12px 2px; gap: 10px; }
  #logo { height: 30px !important; }
  .nav-responsive > ul > li > a { padding: 8px 10px !important; font-size: .88rem; }

  .content-row > .col-sm-5 { padding: 14px !important; }
  .map-section { min-height: 70vh; }
}

/* очень узкие экраны — компактнее */
@media (max-width: 360px) {
  .address { gap: 8px; }
  .my-btn { padding: 0 12px; font-size: .9rem; }
}

/* ============================ МАРКЕРЫ-БЕЙДЖИ (стиль frontend-24) ============================ */
/* divIcon-пузырёк с хвостиком. Точка привязки (iconAnchor [0,0], см. Map_makeBadgeIcon) =
   левый верхний угол обёртки Leaflet, т.е. РОВНО координата адреса.
   Геометрия сделана детерминированной: кончик хвостика приходится точно на координату
   при любом масштабе карты и в любом браузере.
     .mrk-badge  — контейнер строго 0x0 в точке привязки (раньше это был пустой INLINE-бокс,
                   его высота зависела от метрик шрифта);
     .mrk-bubble — bottom:6px => низ пузырька на 6px выше координаты (место под хвостик).
                   Раньше здесь было bottom:0 + translateY(-100%) — двойной сдвиг, из-за
                   которого маркер стоял на ~22px (высоту пузырька) выше координаты;
     .mrk-tail   — CSS-треугольник РОВНО 6px высотой (повёрнутый на 45° квадрат давал
                   дробную вершину 5.66px).
   Роли: старт красный, финиш синий, промежуточные перивинкл, подсветка — амбер. */
.mrk-badge { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.mrk-bubble {
  position: absolute; left: 0; bottom: 6px;
  transform: translateX(-50%);       /* по центру над точкой */
  min-width: 24px; height: 22px; box-sizing: border-box; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; white-space: nowrap;
  font-family: var(--font); font-weight: 700; font-size: 12px; line-height: 1;
  color: #fff; box-shadow: 0 2px 4px rgba(15, 23, 42, .35);
}
.mrk-tail {
  position: absolute; left: 50%; top: 100%;
  width: 0; height: 0; margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid transparent;  /* цвет задаётся ролью ниже */
}
.mrk-start  .mrk-bubble { background: #E53935; }                         /* старт — красный */
.mrk-start  .mrk-tail   { border-top-color: #E53935; }
.mrk-finish .mrk-bubble { background: #1E88E5; }                         /* финиш — синий  */
.mrk-finish .mrk-tail   { border-top-color: #1E88E5; }
.mrk-mid    .mrk-bubble { background: #99A9FF; color: #12203f; }         /* промеж. — перивинкл, тёмный текст */
.mrk-mid    .mrk-tail   { border-top-color: #99A9FF; }
.mrk-active .mrk-bubble { background: #FFD277; color: #3a2a00; }         /* подсветка — амбер */
.mrk-active .mrk-tail   { border-top-color: #FFD277; }

/* ============================ ПОЛЯ СТАРТ / ФИНИШ ============================ */
.role-field { margin-bottom: 6px; }
.role-field .header { margin: 0 0 4px; }
.role-start  .header { color: #E53935; }
.role-finish .header { color: #1E88E5; }
.role-start  .address > input { border-left: 3px solid #E53935 !important; }
.role-finish .address > input { border-left: 3px solid #1E88E5 !important; }

/* После выбора адреса из подсказки поле НЕ подкрашиваем: фон остаётся прежним.
   Класс .value-from-suggestion не снимаем — на нём держится логика состояния поля
   (search-with-suggestons.js), гасим только фон из main.css. */
.role-field .address > input.value-from-suggestion { background-color: var(--surface); }

/* Подсказка «Финиш не заполнен → маршрут кольцевой».
   Видимость — атрибут hidden из optimal-route-app.js; .is-active = точки уже есть,
   расчёт возможен (до этого подсказка приглушена, т.к. считать пока нечего). */
.role-hint {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-3);
}
.role-hint.is-active { color: var(--ink-2); }
.role-hint[hidden] { display: none; }   /* bootstrap-reboot не всегда даёт hidden приоритет */

/* ============================ ПРОБЕГ ПО МАРШРУТУ ============================
   Появляется после успешного расчёта (данные из ответа оптимизатора, доп. запросов
   к API нет) и гаснет при любом изменении маршрута — см. optimal-route-app.js. */
.route-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin: 8px 0 0;
  padding: 8px 12px;
  background: var(--primary-050);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--ink);
}
.route-summary[hidden] { display: none; }   /* bootstrap-reboot не всегда даёт hidden приоритет */
.route-summary-item { white-space: nowrap; }
.route-summary-item[hidden] { display: none; }
.route-summary-label {
  margin-right: 6px;
  font-size: 12px;
  color: var(--ink-3);
}
.route-summary-item b { font-size: 15px; }
.route-summary-note {
  font-size: 12px;
  color: var(--ink-3);
}
.route-summary-note[hidden] { display: none; }

/* ============================ КНОПКА СМЕНЫ ТЕМЫ (шапка) ============================ */
/* парная кнопке ☾/☀ на карте: обе зовут SiteTheme.toggle (assets/theme-switch.js).
   order:99 ставит её последним элементом шапки — правее меню (у .nav-wrapper свой
   margin-left:auto, который и забирает всё свободное место) */
#theme-toggle {
  order: 99;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  padding: 0;
  font-size: 17px; line-height: 1;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
#theme-toggle:hover {
  background: var(--primary-050);
  color: var(--primary);
  border-color: var(--border-strong);
}
#theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ============================ ТЁМНАЯ ТЕМА: точечные правки ============================ */
/* Основную работу делают токены (:root[data-theme="dark"] в theme.css). Здесь — только
   те места, где цвет вшит числом: часть в старых CSS (main.css, CP1251-файлы — их не
   трогаем принципиально), часть в собственном CSS Leaflet. */

/* фон под тайлами: дефолтный #ddd вспыхивал светлым прямоугольником при загрузке */
:root[data-theme="dark"] .leaflet-container { background: #0b0e14; }

/* контролы самого Leaflet (зум, атрибуция) нарисованы белыми в его CSS */
:root[data-theme="dark"] .leaflet-bar a,
:root[data-theme="dark"] .leaflet-bar a:hover {
  background-color: var(--surface);
  color: var(--ink-2);
  border-bottom-color: var(--border);
}
:root[data-theme="dark"] .leaflet-bar a:hover { background-color: var(--regular-hover-bg-clr); }
:root[data-theme="dark"] .leaflet-bar a.leaflet-disabled {
  background-color: var(--surface);
  color: var(--ink-3);
  opacity: .5;
}
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip {
  background: var(--surface);
  color: var(--ink);
}

/* тексты из main.css, вшитые как #565656 (на тёмном фоне — нечитаемо) */
:root[data-theme="dark"] .address > input,
:root[data-theme="dark"] .address-suggestions .suggestion,
:root[data-theme="dark"] li.address { color: var(--ink); }
:root[data-theme="dark"] .address > input::placeholder { color: var(--ink-3); }

/* место под перетаскиваемый адрес + сама «карточка» в полёте (main.css, tre11o style) */
:root[data-theme="dark"] .address-list .placeholder { background-color: rgba(255,255,255,.06); }
:root[data-theme="dark"] .dragged { box-shadow: var(--shadow-lg); }

:root[data-theme="dark"] li.address:hover { background: var(--regular-hover-bg-clr); }
:root[data-theme="dark"] .overlay { background: rgba(0,0,0,.62); }

/* статусы копирования ссылки: зелёный/янтарный в «светлых» оттенках */
:root[data-theme="dark"] .copy-status.is-ok   { color: #4ade80; }
:root[data-theme="dark"] .copy-status.is-warn { color: #fbbf24; }

/*===========================================================================*/
/* Поповер «Загрузка адресов» (эксперимент-зонд, 31.07.2026).
   Три варианта загрузки -> извинение «в разработке». Стили нейтральны к теме:
   всё на переменных, поэтому отдельных dark-правил не нужно. */

/* поповеру нужна ширина больше дефолтных 17rem (responsive.css), иначе
   описания вариантов рвутся на 4 строки */
#popover-bulk-import { max-width: calc(100vw - 2rem); width: 21rem; }

.bulk-import-content { display: flex; flex-direction: column; }
.bulk-import-content > p { margin-bottom: var(--regular-padding); }

.bulk-import-content .bulk-import-option {
  display: block;
  width: 100%;
  text-align: left;
  white-space: normal;      /* описание переносится, кнопка не растягивает поповер */
  margin-bottom: 0.6rem;
  padding: 0.6rem 0.8rem;
  line-height: 1.25;
}
.bulk-import-option > b { display: block; margin-bottom: 0.15rem; }
.bulk-import-option > span { display: block; font-size: 0.85em; font-weight: 400; opacity: 0.9; }

/* flex-контейнер сжимал кнопку и резал слово — фиксируем ширину по тексту */
#bulk-import-ok-btn {
  align-self: flex-end;
  margin-left: 0;
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}