@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&family=PT+Serif:wght@400;700&display=swap');

:root {
  --bg: #F1F3F7;
  --card: #FFFFFF;
  --border: #E2E7EE;
  --text: #1B2434;
  --text2: #6B7686;
  --text3: #8A94A4;
  --accent: #1C4F9C;
  --accent-dark: #123A75;
  --pos: #3E7A4E;
  --neg: #B3402F;
  --neu: #C0C8D4;
  --bar-neg: #C96A5B;
  --bar-neu: #DDE3EB;
  --bar-pos: #7BA386;
  --tile-hi-bg: #D4E4D6; --tile-hi-border: #B9D2BD; --tile-hi-text: #274F31;
  --tile-mid-bg: #EFE3CB; --tile-mid-border: #DECFA9; --tile-mid-text: #5F4712;
  --tile-lo-bg: #E7D5D2; --tile-lo-border: #D6B9B4; --tile-lo-text: #6E2A1F;
  --sev-watch: #A8791C; --sev-watch-bg: #F5EEDD;
  --sev-medium: #B05A1F; --sev-medium-bg: #F7EBDE;
  --sev-high: #B3402F; --sev-high-bg: #F7ECEA;
  --status-new: #8A3B2E; --status-new-bg: #F7ECEA;
  --status-progress: #1C4F9C; --status-progress-bg: #EAF0F9;
  --status-watching: #5A6575; --status-watching-bg: #EDF0F5;
  --select-bg: #EEF2F9; --select-border: #C9D6EA;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'PT Sans', Arial, sans-serif;
}
.heading { font-family: 'PT Serif', 'PT Sans', serif; font-weight: 700; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 20px 22px;
}

#helpPanel summary::-webkit-details-marker { display: none; }
#helpPanel summary::marker { content: ""; }

/* Карта районов без внешней тайловой подложки (см. app.js initDistrictsMap) —
   вместо растровых тайлов стороннего сервиса (был OpenStreetMap, Google/
   Яндекс дают ту же проблему с границами) — собственная тёмная "event map"
   подложка в духе премиальных карт-стилей (тёмно-синий фон, тонкая сетка,
   светлые подписи). Всё генерируется CSS, ни одного внешнего запроса. */
#districtsLeafletMap.leaflet-container {
  background-color: #0F172A;
  background-image:
    linear-gradient(rgba(125,163,255,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,163,255,0.09) 1px, transparent 1px);
  background-size: 44px 44px;
  font-family: 'PT Sans', sans-serif;
}

.district-label, .district-label-muted {
  display: inline-block; position: relative; transform: translate(-50%, -50%);
  white-space: nowrap; pointer-events: none;
}
.district-label {
  font-size: 10.5px; font-weight: 700; color: #FFFFFF;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 4px #000, 0 1px 2px rgba(0,0,0,0.6);
}
.district-label-muted {
  font-size: 10.5px; font-style: italic; color: #8FA3C8; letter-spacing: 0.2px;
  text-shadow: 0 0 3px #0F172A, 0 0 3px #0F172A, 0 0 4px #0F172A;
}
.map-compass { margin: 8px !important; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
.leaflet-control-scale-line {
  background: rgba(15,23,42,0.75); border-color: #4C5C7A !important;
  color: #C7D2E8; font-family: 'PT Sans', sans-serif;
}

/* ===== Login ===== */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
}
.login-card {
  width: 340px; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; padding: 32px 28px; display: flex; flex-direction: column; gap: 16px;
}
.login-logo {
  width: 48px; height: 48px; border-radius: 8px; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; margin: 0 auto;
}
.login-title { text-align: center; font-size: 16px; font-weight: 700; }
.login-sub { text-align: center; font-size: 12px; color: var(--text2); margin-top: -10px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--text2); font-weight: 700; }
.field input {
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  font-size: 14px; font-family: inherit;
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn-primary {
  background: var(--accent); color: #fff; border: none; border-radius: 8px;
  padding: 11px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.btn-primary:hover { background: var(--accent-dark); }
.login-error { color: var(--neg); font-size: 12.5px; text-align: center; }

/* ===== App shell ===== */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 236px; flex: none; background: var(--card); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar-header {
  display: flex; align-items: center; gap: 12px; padding: 20px 20px 18px; border-bottom: 1px solid #EDF0F5;
}
.sidebar-logo {
  width: 42px; height: 42px; border-radius: 8px; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 7px;
  cursor: pointer; font-size: 13.5px; font-weight: 700;
}
.nav-item:hover { background: #F1F4F9; }
.nav-item.active { background: var(--accent); color: #fff; }
.nav-badge {
  margin-left: auto; background: var(--neg); color: #fff; font-size: 10.5px; font-weight: 700;
  border-radius: 9px; padding: 2px 7px;
}
.sidebar-footer {
  margin-top: auto; padding: 16px 20px; border-top: 1px solid #EDF0F5;
  display: flex; flex-direction: column; gap: 6px;
}
.status-line { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--pos); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); }
.status-note { font-size: 11px; color: var(--text3); line-height: 1.4; }
.logout-link { font-size: 11px; color: var(--text2); margin-top: 4px; }

.main { flex: 1; min-width: 0; padding: 24px 30px 40px; }
.topbar { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.screen-title { font-size: 22px; line-height: 1.15; }
.screen-sub { font-size: 12.5px; color: var(--text2); }
.period-tabs { display: flex; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 2px; margin-left: auto; }
.period-tab { padding: 6px 12px; border-radius: 6px; font-size: 12.5px; cursor: pointer; font-weight: 700; color: var(--text2); }
.period-tab:hover { background: #EEF2F8; }
.period-tab.active { background: var(--accent); color: #fff; }

.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.grid-2-1 { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 16px; }
.grid-5-7 { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }

.kpi-label { font-size: 12px; color: var(--text2); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.kpi-value-row { display: flex; align-items: baseline; gap: 10px; }
.kpi-value { font-family: 'PT Serif', serif; font-weight: 700; font-size: clamp(26px,2.6vw,38px); line-height: 1; }
.kpi-bar { height: 6px; border-radius: 3px; background: #EDF0F5; overflow: hidden; }
.kpi-bar-fill { height: 100%; background: var(--accent); }
.delta-up { color: var(--pos); font-size: 13px; font-weight: 700; }
.delta-down { color: var(--neg); font-size: 13px; font-weight: 700; }
.delta-flat { color: var(--text3); font-size: 13px; font-weight: 700; }
.split-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--text2); }
.legend .neg::before { content: '●'; color: var(--neg); margin-right: 4px; }
.legend .neu::before { content: '●'; color: var(--neu); margin-right: 4px; }
.legend .pos::before { content: '●'; color: var(--pos); margin-right: 4px; }

.alert-card-mini {
  display: flex; gap: 10px; padding: 10px 12px; border-radius: 8px;
  background: #FAF6F5; border: 1px solid #F0E2DF; cursor: pointer;
}
.sev-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex: none; }

.topic-row, .district-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 7px; cursor: pointer;
}
.topic-row:hover, .district-row:hover { background: #F4F6FA; }
.topic-row.selected, .district-row.selected { background: var(--select-bg); border: 1px solid var(--select-border); }
.hot-badge { font-size: 9.5px; background: var(--neg); color: #fff; border-radius: 4px; padding: 1px 5px; font-weight: 700; }

.tile-map { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); grid-auto-rows: 60px; gap: 6px; }
.district-tile {
  border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; cursor: pointer;
  border: 1px solid transparent;
}
.district-tile.active { border: 2px solid var(--accent); }
.tile-label { font-size: 9.5px; line-height: 1.15; opacity: .85; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tile-index { font-size: 14px; font-weight: 700; margin-top: auto; }

.quote-card {
  border: 1px solid #E9EDF3; border-radius: 9px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 9px; background: #FBFCFE;
}
.avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px; flex: none; }

.sev-stripe-card { display: flex; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); }
.sev-stripe { width: 5px; flex: none; }
.sev-tag, .status-tag { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 2px 8px; }

.chip { padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--border); background: #fff; color: var(--text2); }
.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.empty-note { color: var(--text3); font-size: 13px; padding: 20px; text-align: center; }

/* ===== Мобильная адаптация ===== */
@media (max-width: 860px) {
  .app { flex-direction: column; }

  .sidebar {
    width: 100%; height: auto; position: sticky; top: 0; z-index: 20;
    flex-direction: row; align-items: center; flex-wrap: nowrap;
    border-right: none; border-bottom: 1px solid var(--border);
  }
  .sidebar-header {
    padding: 8px 10px; border-bottom: none; border-right: 1px solid #EDF0F5; flex: none;
  }
  .sidebar-logo { width: 32px; height: 32px; font-size: 13px; }
  .sidebar-subtitle { display: none; }

  .sidebar-nav {
    flex-direction: row; padding: 6px 6px; gap: 4px; flex: 1;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .nav-item { flex: none; padding: 7px 9px; font-size: 11.5px; white-space: nowrap; }

  .sidebar-footer { display: none; } /* статус сбора данных — второстепенно на мобильном, экономим место */

  .main { padding: 12px 10px 30px; min-width: 0; }
  .topbar { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 14px; }
  #pdfReportBtn { align-self: flex-start; margin-right: 0; }
  .period-tabs { margin-left: 0; flex-wrap: wrap; }

  .grid-4, .grid-2-1, .grid-5-7, .grid-3 { grid-template-columns: 1fr; }
  .tile-map { grid-template-columns: repeat(4, minmax(0,1fr)); }

  .card { padding: 14px 16px; }
  .kpi-value { font-size: 26px; }

  table { display: block; overflow-x: auto; white-space: nowrap; }

  .login-card { width: calc(100vw - 48px); max-width: 340px; }

  #districtsLeafletMap { height: 380px !important; }
}

@media (max-width: 480px) {
  .tile-map { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .nav-item span:first-child { font-size: 13px; }
}