/* ───────────────────────────────────────────────────────────────────────
   FuelRadar design tokens — единый источник дизайн-системы.
   Источник: specs/design_system_for_plan.md + mockups/fuelradar_prototype.html.
   Слой поверх Bootstrap 5. Подключается всегда (см. base.html).
   Заменяет фиолетовую тему Mercury на синюю брендовую семью.
   ─────────────────────────────────────────────────────────────────────── */
:root {
    /* Бренд (синий) */
    --brand: #2F6BED;          /* кнопки, ссылки, активные состояния */
    --brand-hover: #2456C8;
    --brand-50: #EEF3FF;       /* лёгкий фон выделения/hover */
    --hero-from: #3D6BE5;      /* градиент шапки */
    --hero-to: #62A9EF;

    /* Семантика */
    --green: #16A34A;  --green-bg: #F0FDF4;  --green-line: #86EFAC;  /* минимум, снижение, «открыта» */
    --amber: #B45309;  --amber-bg: #FFFBEB;  --amber-line: #FCD34D;  /* устаревшее, предупреждения */
    --red: #DC2626;    --red-bg: #FEF2F2;                            /* «закрыта», рост цены */

    /* Нейтральные */
    --ink: #111827;            /* основной текст */
    --muted: #6B7280;          /* вторичный текст */
    --line: #E5E7EB;           /* границы */
    --bg: #F3F4F6;             /* фон страницы */
    --card: #FFFFFF;           /* карточки */
    --footer-bg: #E7E8EE;

    /* Радиусы */
    --r-sm: 9px;    /* поля, кнопки, мелкие элементы */
    --r-md: 12px;   /* карточки */
    --r-lg: 14px;   /* крупные блоки, шапка */
    --r-pill: 20px; /* бейджи, сегменты */

    /* Тени */
    --sh-pop: 0 6px 18px rgba(17, 24, 39, .08);  /* выпадашки, поповеры */
    --sh-pin: 0 1px 3px rgba(0, 0, 0, .28);      /* метки на карте */

    /* Шрифт */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    /* ── Маппинг на Bootstrap-переменные (чтобы primary/ссылки/радиусы стали брендовыми
          без правки разметки) ── */
    --bs-primary: var(--brand);
    --bs-primary-rgb: 47, 107, 237;
    --bs-link-color: var(--brand);
    --bs-link-color-rgb: 47, 107, 237;
    --bs-link-hover-color: var(--brand-hover);
    --bs-border-color: var(--line);
    --bs-border-radius: var(--r-md);
    --bs-border-radius-sm: var(--r-sm);
    --bs-border-radius-lg: var(--r-lg);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--bg);
    --bs-secondary-color: var(--muted);
}

/* ── Базовая типографика ── */
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.45;
}
h1, h2, h3, h4, h5, h6,
.navbar-brand, .card-header, .fw-bold, .fw-semibold {
    font-weight: 700;
}

/* ── Кнопки ── */
.btn {
    border-radius: var(--r-sm);
    font-weight: 600;
    --bs-btn-border-radius: var(--r-sm);
}
.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-hover);
    --bs-btn-hover-border-color: var(--brand-hover);
    --bs-btn-active-bg: var(--brand-hover);
    --bs-btn-active-border-color: var(--brand-hover);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}
/* Кнопка ghost (контурная брендовая): #fff, граница --line, текст --brand */
.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
}
.btn-outline-secondary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--line);
    --bs-btn-hover-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-50);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand-50);
    --bs-btn-active-border-color: var(--brand);
}

/* ── Ссылки ── */
a { color: var(--brand); }
a:hover { color: var(--brand-hover); }

/* ── Навбар: тёмный ── */
.navbar.bg-dark {
    background: var(--ink) !important;
}
.navbar-brand { letter-spacing: .3px; font-weight: 800; }

/* ── Карточки: плоские, на границе --line, без тени ── */
.card {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: none;
    background: var(--card);
}
.card-header {
    background: var(--card);
    border-bottom: 1px solid var(--line);
    border-radius: var(--r-md) var(--r-md) 0 0 !important;
    font-weight: 700;
}

/* ── Hero на главной (класс mercury-hero оставлен в разметке; перекрашен в синий) ── */
.mercury-hero {
    background: linear-gradient(160deg, var(--hero-from), var(--hero-to)) !important;
    color: #fff;
    border-radius: var(--r-lg) !important;
    box-shadow: none;
}
.mercury-hero h1 { color: #fff; }
.mercury-hero .text-muted { color: rgba(255, 255, 255, .9) !important; }
.mercury-hero .form-control,
.mercury-hero .form-select { border: 0; }
/* Кнопка «Найти» на синем hero — белая с брендовым текстом (как в прототипе) */
.mercury-hero .btn-primary {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-50);
    --bs-btn-hover-border-color: var(--brand-50);
    --bs-btn-hover-color: var(--brand-hover);
    --bs-btn-active-bg: var(--brand-50);
    --bs-btn-active-color: var(--brand-hover);
}

/* ── Формы ── */
.form-control, .form-select {
    border-radius: var(--r-sm);
    border-color: var(--line);
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(47, 107, 237, .15);
}

/* ── Бейджи ── */
.badge { border-radius: var(--r-pill); }
.badge.text-bg-secondary {
    background: var(--brand-50) !important;
    color: var(--brand) !important;
    font-weight: 600;
}
.text-bg-success { background: var(--green) !important; }

/* ── Семантика цвета текста ── */
.text-success { color: var(--green) !important; }
.text-danger { color: var(--red) !important; }
.text-warning { color: var(--amber) !important; }

/* ── Пагинация ── */
.pagination { --bs-pagination-color: var(--brand); gap: .25rem; }
.page-link { border-radius: var(--r-sm); border-color: var(--line); }
.page-item.active .page-link {
    background: var(--brand);
    border-color: var(--brand);
}

/* ── Хлебные крошки / таблицы ── */
.breadcrumb { --bs-breadcrumb-divider-color: #aab; }
.table > :not(caption) > * > * { border-color: var(--line); }

/* ── Подвал ── */
footer.bg-light {
    background: var(--footer-bg) !important;
    border-top: 1px solid var(--line) !important;
}
footer.bg-light a { color: var(--brand); }

/* ── Иконки (инлайн-SVG Lucide): выравнивание и размер по умолчанию ── */
.ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* ── Доступность: видимый focus-ring у кликабельных ── */
a:focus-visible,
.btn:focus-visible,
.page-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Листинг АЗС (home.html, stations/_list_cards.html)
   ═══════════════════════════════════════════════════════════════════════ */

/* Поле локации: прицел «моё местоположение» + очистка внутри поля; адрес — многоточием.
   (Перенесено из инлайн-<style> home.html в единый источник.) */
.loc-field { padding-right: 44px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.loc-field.has-clear { padding-right: 78px; }
.loc-field:focus { text-overflow: clip; }            /* при фокусе — полный текст */
.loc-actions { position: absolute; top: 0; right: 6px; height: 100%;
               display: flex; align-items: center; gap: 2px; }
.loc-btn { border: none; background: transparent; padding: 0; line-height: 1;
           display: flex; align-items: center; justify-content: center; cursor: pointer;
           border-radius: var(--r-sm); color: var(--brand); }
.loc-btn:hover { background: var(--brand-50); }
.loc-geo { width: 34px; height: 34px; }
.loc-clear { width: 28px; height: 28px; display: none; color: var(--muted); font-size: 15px; }
.loc-field.has-clear ~ .loc-actions .loc-clear { display: flex; }

/* Высота карты каталога: высокая sticky-карта на десктопе, ниже на мобиле. */
#catalog-map { height: 560px; }
@media (max-width: 991.98px) { #catalog-map { height: 300px; } }

/* Карточка результата: варианты «минимум» (зелёный) и «устаревшее» (приглушённое). */
.azs-card { transition: box-shadow .15s ease; }
.azs-card:hover { box-shadow: var(--sh-pop); }   /* подсказка кликабельности (stretched-link) */
.azs-card.is-cheap {
    border-color: var(--green-line);
    background: var(--green-bg);
    border-left: 4px solid var(--green);
}
.azs-card.is-stale { background: #FAFAF9; }
/* Критичный статус «по сообщениям» (закрыта / нет топлива) — пометка слева + приглушение цены. */
.azs-card.is-status-critical { border-left: 4px solid var(--red); }
.azs-card.is-status-critical .azs-price { opacity: .5; }

/* Крупная цена выбранного топлива (23px/800), единица — мельче и приглушена. */
.azs-price { font-size: 23px; font-weight: 800; line-height: 1; }
.azs-price.dim { color: var(--muted); }
.azs-price .unit { font-size: 12px; font-weight: 600; color: var(--muted); }

/* --- Прямой эфир (статус АЗС по сообщениям) --- */
.live-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--red);
    box-shadow: 0 0 0 0 rgba(220,38,38,.5); animation: live-p 1.6s infinite; }
@keyframes live-p {
    0% { box-shadow: 0 0 0 0 rgba(220,38,38,.5); }
    70% { box-shadow: 0 0 0 7px rgba(220,38,38,0); }
    100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}
.live-feed li + li .live-item { border-top: 1px solid var(--line); }
.live-item { display: flex; align-items: flex-start; gap: 11px; padding: 13px 16px;
    text-decoration: none; color: var(--ink); }
.live-item:hover { background: var(--brand-50); }
.live-badge { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; }
.live-main { flex: 1; min-width: 0; }
.live-top { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.live-name { font-weight: 600; }
.live-status { font-size: 13px; font-weight: 700; }
.live-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.live-chev { flex: 0 0 auto; color: #C4C8D0; align-self: center; }
.live-empty { padding: 30px 24px; }
.live-empty-ic { color: #B6BCC6; margin-bottom: 12px; }

/* Шторка приёма репорта с пина на карте */
.pin-sheet-backdrop { position: fixed; inset: 0; z-index: 1080;
    background: rgba(17,24,39,.35); display: flex; align-items: flex-end; }
.pin-sheet { background: #fff; width: 100%; max-width: 480px; margin: 0 auto;
    border-radius: 18px 18px 0 0; padding: 12px 16px 20px;
    box-shadow: 0 -4px 20px rgba(17,24,39,.18); }
.pin-sheet-handle { width: 40px; height: 4px; background: #D1D5DB; border-radius: 3px;
    margin: 0 auto 12px; }

/* Метка свежести: иконка-часы (устаревшее — alert-triangle + amber). */
.azs-fresh { display: inline-flex; align-items: center; gap: 5px; }
.azs-fresh .ic svg { width: 13px; height: 13px; }

/* ═══════════════════════════════════════════════════════════════════════
   Состояния: пустое, skeleton (из mockups/fuelradar_prototype.html)
   ═══════════════════════════════════════════════════════════════════════ */

/* Пустое состояние: «АЗС не найдены» + иконка + подсказка. */
.empty {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 28px 18px;
    text-align: center;
    color: var(--muted);
}
.empty .eic { color: #9CA3AF; margin-bottom: 10px; }
.empty .et { color: var(--ink); font-weight: 600; font-size: 15px; margin-bottom: 4px; }

/* Skeleton-плейсхолдеры (серые блоки с шиммером) — на время AJAX-загрузки списка. */
.sk-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px 15px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}
.sk {
    background: #E9EBEF;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}
.sk::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    animation: sk-shimmer 1.3s infinite;
}
@keyframes sk-shimmer { 100% { transform: translateX(100%); } }

/* ═══════════════════════════════════════════════════════════════════════
   График цен + таблица динамики — мобильная адаптация
   (легенда-чипы, адаптивная высота холста, таблица → карточки на телефоне)
   ═══════════════════════════════════════════════════════════════════════ */

/* Холст с фиксированной (адаптивной) высотой — Chart.js с maintainAspectRatio:false */
.trend-chart-wrap { position: relative; height: 300px; }
@media (max-width: 575.98px) { .trend-chart-wrap { height: 230px; } }

/* Кастомная легенда чипами: перенос строк, крупная зона тапа, скрытые линии — приглушены */
.trend-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.trend-legend .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background .12s ease, opacity .12s ease;
}
.trend-legend .chip:hover { background: var(--brand-50); }
.trend-legend .chip .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
}
.trend-legend .chip.is-off {
    opacity: .45;
    background: var(--bg, #F8FAFC);
    text-decoration: line-through;
}

/* % изменения — компактный бейдж вместо мелкого <sup> (рост красный, снижение зелёный) */
.trend-pct {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.trend-pct.up   { color: var(--red);   background: var(--red-bg); }
.trend-pct.down { color: var(--green); background: var(--green-bg); }

/* Таблица динамики → карточки на телефоне (<576px): каждая строка = плитка по виду топлива */
@media (max-width: 575.98px) {
    .trend-cards thead { display: none; }
    .trend-cards, .trend-cards tbody { display: block; width: 100%; }
    .trend-cards tr {
        display: block;
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        background: var(--card);
        padding: 4px 14px 10px;
        margin-bottom: 10px;
    }
    /* отключаем «зебру» — в карточном виде она ни к чему */
    .trend-cards.table-striped > tbody > tr:nth-of-type(odd) > * { background: transparent; }
    .trend-cards td {
        display: flex;
        align-items: baseline;
        border: 0;
        padding: 7px 0;
    }
    /* подпись прижата влево (margin-right:auto), число и %-бейдж — группой справа */
    .trend-cards td::before {
        content: attr(data-label);
        margin-right: auto;
        padding-right: 12px;
        color: var(--muted);
        font-weight: 500;
    }
    /* первая ячейка (вид топлива) — шапка плитки на всю ширину */
    .trend-cards td.trend-name {
        justify-content: flex-start;
        font-size: 16px;
        font-weight: 700;
        padding: 6px 0 4px;
        border-bottom: 1px solid var(--line);
        margin-bottom: 4px;
    }
    .trend-cards td.trend-name::before { content: none; }
    /* «Сегодня» — выделяем крупнее как главную цифру */
    .trend-cards td.trend-today { font-size: 17px; font-weight: 700; }
}