/* CityBus ext.css — тёмная тема, адаптив, скелетоны, компоненты аналитики/карты/тревог */
[data-theme="dark"] {
  color-scheme: dark;
  --bg-primary: #0f172a; --bg-card: #111827; --bg-header: rgba(17,24,39,.9); --bg-header-2: #111827; --bg-sidebar: #0f172a;
  --bg-input: #1f2937; --bg-hover: #1e293b; --border: #334155; --accent-light: #064e3b; --accent-subtle: #065f46; --accent-glow: rgba(16,185,129,.2);
  --danger-bg: #3f1d25; --warning-bg: #3b2414; --success-bg: #052e1f; --info-bg: #172554;
  --text-primary: #e5e7eb; --text-secondary: #cbd5e1; --text-muted: #94a3b8;
  --shadow-card: 0 1px 3px rgba(0,0,0,.4); --shadow-card-hover: 0 12px 32px rgba(0,0,0,.5);
}
[data-theme="dark"] body { background: var(--bg-primary); color: var(--text-primary); }
[data-theme="dark"] .card, [data-theme="dark"] .kpi-card, [data-theme="dark"] .modal, [data-theme="dark"] .nav-menu, [data-theme="dark"] .header, [data-theme="dark"] .utility-bar, [data-theme="dark"] .map-legend { background: var(--bg-card) !important; color: var(--text-primary); border-color: var(--border); }
[data-theme="dark"] .input, [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--bg-input); color: var(--text-primary); border-color: var(--border); }
[data-theme="dark"] .table th { background: #1e293b; color: var(--text-secondary); }
[data-theme="dark"] .table td { border-color: var(--border); }
[data-theme="dark"] .table tr:hover td { background: var(--bg-hover); }
[data-theme="dark"] .btn-outline { color: var(--text-primary); border-color: var(--border); background: transparent; }
[data-theme="dark"] .leaflet-tile { filter: brightness(.75) contrast(1.1) saturate(.8); }
[data-theme="dark"] .leaflet-popup-content-wrapper, [data-theme="dark"] .leaflet-popup-tip, [data-theme="dark"] .leaflet-tooltip { background: #1f2937; color: #e5e7eb; }
[data-theme="dark"] .hero { filter: brightness(.85); }
[data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background:white"] { background: var(--bg-card) !important; }

/* скелетоны */
@keyframes cbShimmer { 0% { background-position: -400px 0 } 100% { background-position: 400px 0 } }
.cb-skel { padding: 8px 0 } .cb-skel-line { height: 14px; margin: 10px 0; border-radius: 6px; background: linear-gradient(90deg, var(--bg-hover) 0, var(--border) 40%, var(--bg-hover) 80%); background-size: 800px 100%; animation: cbShimmer 1.2s infinite linear }
.cb-skel-line:nth-child(3n) { width: 70% } .cb-skel-line:nth-child(3n+2) { width: 85% }
.empty-state-hint:has(.fa-spinner) { position: relative; color: transparent !important; min-height: 46px; border-radius: 8px; background: linear-gradient(90deg, var(--bg-hover) 0, var(--border) 40%, var(--bg-hover) 80%); background-size: 800px 100%; animation: cbShimmer 1.2s infinite linear }
.empty-state-hint:has(.fa-spinner) * { visibility: hidden }

/* пустые состояния / ошибки */
.cb-empty { text-align: center; color: var(--text-muted); padding: 28px 12px } .cb-empty i { font-size: 28px; display: block; margin-bottom: 8px; opacity: .6 } .cb-empty small { display: block; margin-top: 4px; opacity: .85 }
.cb-err { color: var(--danger) } .cb-note { font-size: 12px; color: var(--text-muted); background: var(--bg-hover); border-radius: 8px; padding: 6px 10px; margin: 6px 0 }

/* аналитика */
.cb-toolbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center } .cb-period { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center }
.cb-pr.active, .cb-tabs .ops-tab.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important }
.cb-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 12px; overflow-x: auto }
.cb-updated { font-size: 11px; color: var(--text-muted); padding: 4px 12px }
.cb-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin: 10px 0; min-width: 0 }
.cb-block-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px }
.cb-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px } .cb-2col > .cb-block { margin: 10px 0 }
.cb-chart { height: 260px; position: relative } .cb-map { height: 420px; border-radius: 8px }
.cb-heat { overflow-x: auto } .cb-heat table { border-collapse: collapse; font-size: 10px } .cb-heat td, .cb-heat th { width: 30px; height: 24px; text-align: center; border: 1px solid var(--border); padding: 0 } .cb-heat th { color: var(--text-muted); font-weight: 500 }
.cb-delta { font-size: 11px; font-weight: 600 } .cb-delta.up { color: #16a34a } .cb-delta.down { color: #dc2626 }
.cb-anom td { background: rgba(220,38,38,.1) !important }
.cb-tbl-tools { display: flex; gap: 8px; align-items: center; margin: 4px 0 } .cb-tbl-tools .cb-tbl-q { max-width: 240px; padding: 4px 8px; font-size: 12px } .cb-tbl-info { font-size: 11px; color: var(--text-muted) }
.cb-tbl-tools-sm { padding: 6px 12px 0 } .cb-tbl-pager { display: flex; gap: 6px; align-items: center; justify-content: flex-end; font-size: 12px; padding: 6px 12px } .cb-tbl-pager .btn { padding: 2px 10px }
.cb-tbl-wrap { overflow-x: auto } th.cb-sortable { cursor: pointer; user-select: none; white-space: nowrap } th.cb-sortable:hover { color: var(--accent) } th.asc::after { content: ' ▲'; font-size: 9px } th.desc::after { content: ' ▼'; font-size: 9px }

/* хлебные крошки, счётчик, справка */
.cb-crumbs { font-size: 12px; color: var(--text-muted); padding: 6px 4px 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap } .cb-crumbs a { color: var(--text-muted) } .cb-crumbs b { color: var(--text-primary) } .cb-crumbs-help { margin-left: auto; font-size: 11px; opacity: .7 }
.cb-cnt { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center }
.cb-help-card { max-width: 460px; margin: 10vh auto } kbd { border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; font-size: 11px; background: var(--bg-hover) }

/* карта */
.cbm-panel { position: absolute; top: 12px; right: 12px; z-index: 1000; width: 300px; max-height: calc(100vh - 170px); overflow: auto; background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.2); font-size: 12px }
.cbm-panel.min .cbm-b { display: none } .cbm-h { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--border) } .cbm-h .btn { padding: 0 8px }
.cbm-b { padding: 8px 10px } .cbm-row { display: flex; gap: 4px; margin-bottom: 6px } .cbm-row .input { flex: 1; min-width: 0; padding: 4px 6px; font-size: 12px } .cbm-chk { display: inline-flex; gap: 4px; align-items: center; margin-right: 8px; font-size: 12px; cursor: pointer }
.cbm-leg { font-size: 11px; color: var(--text-muted); margin: 4px 0 } .cbm-favs { margin: 6px 0; line-height: 1.9 } .cbm-chip { display: inline-block; background: var(--bg-hover); border-radius: 10px; padding: 0 8px; margin: 0 3px 3px 0; cursor: pointer }
.cbm-idle-h { margin-top: 8px; display: flex; gap: 6px; align-items: center } .cbm-idle { max-height: 200px; overflow: auto } .cbm-idle-i { display: flex; justify-content: space-between; padding: 3px 4px; border-bottom: 1px solid var(--border); cursor: pointer } .cbm-idle-i:hover { background: var(--bg-hover) }
.cbm-tip { font-size: 12px; line-height: 1.45 } .cb-play { display: flex; gap: 6px; align-items: center; padding: 0 12px 10px } .cb-play .input { width: 70px }

/* видео */
.cbv-live { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: #374151; color: #e5e7eb; white-space: nowrap } .cbv-live.ok { background: #15803d; color: #fff } .cbv-live.ok.slow { background: #b45309 } .cbv-live.bad { background: #b91c1c; color: #fff }
.cbv-nosig { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9ca3af; background: repeating-linear-gradient(45deg, #111 0 12px, #181818 12px 24px); gap: 6px; text-align: center; padding: 20px; z-index: 2 } .cbv-nosig i { font-size: 40px } .cbv-nosig[hidden] { display: none }
.cbv-wall { width: 100vw !important; max-width: none !important; height: 100vh; background: #000 } .cbv-wall #video-grid { height: calc(100vh - 60px) } .cbv-wall #video-grid > div { aspect-ratio: auto !important }
.cba-act { display: flex; gap: 4px; flex-wrap: wrap } .cba-act .btn { padding: 3px 8px; font-size: 12px }

/* адаптив: планшет и телефон */
@media (max-width: 1024px) { .cb-2col { grid-template-columns: 1fr } .rhub-grid { grid-template-columns: 1fr !important } #rhub-cat { max-height: 240px !important } .cbm-panel { width: 250px } }
@media (max-width: 680px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important } .card-header { flex-direction: column; align-items: stretch !important }
  .cb-toolbar > *, .cb-period .input { flex: 1 1 auto } .cbm-panel { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; max-height: 45vh }
  .table { font-size: 12px } .table td, .table th { padding: 6px !important } .cb-crumbs-help { display: none } .cb-chart { height: 210px } .cb-map { height: 300px }
  .modal, .modal-content { width: 100vw !important; max-width: 100vw !important; margin: 0 !important; border-radius: 0 !important }
}
@media print {
  .header, .utility-bar, .nav-strip, .cb-crumbs, .cb-toolbar, .cb-tbl-tools, .cb-tbl-pager, .cbm-panel, button { display: none !important }
  body::before { content: 'CityBus · отчёт · bus.nexusapps.pro'; display: block; font: 700 16px sans-serif; color: #16a34a; border-bottom: 3px solid #16a34a; padding-bottom: 6px; margin-bottom: 10px }
  .card { box-shadow: none !important; border: 1px solid #ccc } .cb-block { page-break-inside: avoid }
}