/* golos-online-2026.ru — dashboard «Карта РО + ДЭГ + тикер ЦИК»
   Фирменный бирюзовый и переменные берём из colors.css.
   Экран рассчитан на 1920×1080 (16:9), но масштабируется через clamp()/%. */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;
    background: #fff;
    color: var(--color-black, #262932);
    font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ */
/* Каркас 16:9                                                         */
/* ------------------------------------------------------------------ */

.dash {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header"
        "main"
        "ticker";
    gap: clamp(8px, 1vw, 20px);
    padding: clamp(12px, 1.6vw, 32px);
}

/* --- Шапка: лого + заголовок + часы --- */
.dash__header {
    grid-area: header;
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.5vw, 28px);
}

.brand__logo {
    height: clamp(28px, 3vw, 56px);
    width: auto;
    display: block;
}

.dash__title {
    font-size: clamp(14px, 1.3vw, 24px);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.18;
    color: var(--color-main-block, #0ba8a2);
}
.dash__title-year { color: var(--color-red, #e64452); }

.dash__clock {
    margin-left: auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.dash__date { font-size: clamp(12px, 1vw, 18px); color: #7a8785; }
.dash__time {
    font-size: clamp(18px, 1.8vw, 34px);
    font-weight: 700;
    color: var(--color-main-dark, #0ba7a1);
}

/* ------------------------------------------------------------------ */
/* Основная область: карта | панель ДЭГ                                */
/* ------------------------------------------------------------------ */

.dash__main {
    grid-area: main;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: clamp(12px, 1.4vw, 28px);
    min-height: 0;
}

/* --- Левая колонка: карта --- */
.map-col {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr;
    min-height: 0;
    background: var(--color-grey, #f6f6f6);
    border-radius: clamp(10px, 0.8vw, 18px);
    padding: clamp(12px, 1.2vw, 26px);
}

.map-col__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(6px, 0.6vw, 14px);
}

.map-col__title {
    font-size: clamp(15px, 1.5vw, 30px);
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--color-main-black, #225a57);
    max-width: 60%;
}

.regions-counter { text-align: right; line-height: 1; }
.regions-counter strong {
    display: block;
    font-size: clamp(40px, 5.5vw, 120px);
    font-weight: 900;
    color: var(--color-main-dark, #0ba7a1);
}
.regions-counter span {
    display: block;
    font-size: clamp(10px, 0.85vw, 16px);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b7876;
}

.region-selector { margin-bottom: clamp(6px, 0.6vw, 12px); }
.region-selector select {
    width: min(340px, 100%);
    padding: 10px 14px;
    font-size: clamp(13px, 0.95vw, 17px);
    border: 2px solid var(--color-main, #5cbec0);
    border-radius: 10px;
    background: #fff;
    color: var(--color-black, #262932);
    cursor: pointer;
    outline: none;
}
.region-selector select:focus { border-color: var(--color-main-dark, #0ba7a1); }

/* --- Контейнер SVG --- */
.map-box {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#map_russia {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
}

/* Регионы карты. Раскраска задаётся ДАННЫМИ, а не вручную в SVG. */
#map_russia path,
#map_russia circle {
    fill: var(--color-grey-dark, #d2d2d2);
    stroke: #ffffff;
    stroke-width: 0.8px;
    transition: fill 0.2s ease;
}
#map_russia .st0,
#map_russia .st00,
#map_russia .st000 {
    fill: #e6eef0;      /* озёра */
    stroke: #d7e2e3;
}
/* есть РО → фирменный бирюзовый */
#map_russia .has-office { fill: var(--color-main-block, #0ba8a2); }
#map_russia .has-office:hover { fill: var(--color-main-dark, #0ba7a1); cursor: pointer; }
/* выбранный регион */
#map_russia .is-selected { fill: var(--color-red, #e64452) !important; }

/* Подсказка при наведении */
.map-hint {
    position: fixed;
    z-index: 20;
    display: none;
    padding: 6px 12px;
    background: rgba(34, 90, 87, 0.95);
    color: #fff;
    font-size: 14px;
    border-radius: 8px;
    pointer-events: none;
    white-space: nowrap;
}

/* --- Правая колонка: ДЭГ --- */
.deg-col {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1vw, 22px);
    min-height: 0;
    background: var(--color-main-block, #0ba8a2);
    background: linear-gradient(160deg, var(--color-main-dark, #0ba7a1), var(--color-main-black, #225a57));
    color: #fff;
    border-radius: clamp(10px, 0.8vw, 18px);
    padding: clamp(16px, 1.6vw, 34px);
}
.deg-col__title {
    font-size: clamp(16px, 1.6vw, 30px);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.deg-stat { border-top: 1px solid rgba(255, 255, 255, 0.22); padding-top: clamp(6px, 0.7vw, 14px); }
.deg-stat:first-of-type { border-top: none; padding-top: 0; }
.deg-stat__label {
    font-size: clamp(11px, 0.9vw, 16px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
}
.deg-stat__value {
    font-size: clamp(30px, 4vw, 76px);
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.deg-stat--turnout .deg-stat__value { color: #fff5a9; }

.deg-col__foot {
    margin-top: auto;
    font-size: clamp(10px, 0.8vw, 14px);
    opacity: 0.8;
}
.deg-col__foot .badge-stale {
    display: none;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255, 245, 169, 0.25);
    color: #fff5a9;
}
.deg-col.is-stale .badge-stale { display: inline-block; }

/* ------------------------------------------------------------------ */
/* Тикер ЦИК                                                           */
/* ------------------------------------------------------------------ */

.dash__ticker {
    grid-area: ticker;
    display: flex;
    align-items: center;
    gap: 16px;
    height: clamp(34px, 3.4vh, 56px);
    background: var(--color-main-black, #225a57);
    color: #fff;
    border-radius: 10px;
    overflow: hidden;
    padding-left: clamp(12px, 1vw, 22px);
}
.dash__ticker-label {
    flex: none;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff5a9;
    font-size: clamp(12px, 1vw, 18px);
}
.ticker-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    animation: ticker-scroll 40s linear infinite;
}
.ticker-track span { padding: 0 clamp(24px, 3vw, 60px); font-size: clamp(12px, 1vw, 18px); }
.ticker-track span::before { content: "•"; margin-right: clamp(24px, 3vw, 60px); color: var(--color-main, #5cbec0); }
.dash__ticker:hover .ticker-track { animation-play-state: paused; }

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Узкие/вертикальные экраны — не ломаемся */
@media (max-aspect-ratio: 4/3) {
    .dash__main { grid-template-columns: 1fr; grid-template-rows: 1.4fr 1fr; }
}