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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f6f8fa;
}

.logo-dot { color: #ffc107; font-size: 1.1em; }

/* ---------- Карта ---------- */
.map-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  height: calc(100vh - 56px);
}

.map-area { width: 100%; height: 100%; }

.side-panel {
  background: #fff;
  border-left: 1px solid #dee2e6;
  padding: 1rem 1.25rem;
  overflow-y: auto;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.kpi {
  background: #f1f3f5;
  border-radius: 0.5rem;
  padding: 0.6rem 0.5rem;
  text-align: center;
}
.kpi-label { display: block; font-size: 0.75rem; color: #6c757d; }
.kpi-value { display: block; font-size: 1.5rem; font-weight: 600; }

.legend { list-style: none; padding: 0; margin: 0; }
.legend li { margin: 0.25rem 0; }

.dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -2px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.status-green  { background: #28a745; }
.status-yellow { background: #ffc107; }
.status-red    { background: #dc3545; }
.status-black  { background: #212529; }

.bin-card { line-height: 1.5; }
.bin-card h6 { margin-bottom: 0.25rem; }
.bin-card .progress { height: 12px; margin: 0.25rem 0 0.5rem; }

/* ---------- Статистика ---------- */
.stat-card .stat-label { color: #6c757d; font-size: 0.8rem; }
.stat-card .stat-value { font-size: 1.6rem; font-weight: 600; }

/* ---------- Маркеры Leaflet: SVG-иконки мусорных контейнеров ---------- */
.bin-marker {
  position: relative;
  border-radius: 50%;
  background: #fff;
  border: 2px solid currentColor;
  box-shadow: 0 2px 5px rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.bin-marker:hover { transform: scale(1.15); z-index: 1000; }
.bin-marker svg { width: 60%; height: 60%; }
.bin-marker .bin-fill-label {
  position: absolute;
  bottom: -7px; right: -7px;
  background: #fff;
  border: 2px solid currentColor;
  border-radius: 999px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  min-width: 18px;
  text-align: center;
  color: inherit;
}
.bin-status-green  { color: #198754; }
.bin-status-yellow { color: #e69500; }   /* чуть темнее для контраста */
.bin-status-red    { color: #dc3545; }
.bin-status-black  { color: #212529; }
.bin-sensor-down   { color: #adb5bd; opacity: 0.7; }
.bin-sensor-warn {
  position: absolute;
  top: -6px; right: -6px;
  background: #dc3545;
  color: #fff;
  border-radius: 50%;
  width: 16px; height: 16px;
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

/* Пульсация для критичных баков */
@keyframes bin-pulse-anim {
  0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(220, 53, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}
.bin-pulse { animation: bin-pulse-anim 1.5s infinite; }
.bin-status-black.bin-pulse {
  animation-name: bin-pulse-black-anim;
}
@keyframes bin-pulse-black-anim {
  0%   { box-shadow: 0 0 0 0 rgba(33, 37, 41, 0.75); }
  70%  { box-shadow: 0 0 0 16px rgba(33, 37, 41, 0); }
  100% { box-shadow: 0 0 0 0 rgba(33, 37, 41, 0); }
}

/* ---------- LIVE-индикатор ---------- */
.live-indicator {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  color: #495057;
}
.live-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}
.live-ok { background: #198754; box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); animation: blink 2s infinite; }
.live-updating { background: #ffc107; }
.live-error { background: #dc3545; }
@keyframes blink {
  0%   { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(25, 135, 84, 0); }
  100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

.leaflet-popup-content { min-width: 220px; }
.leaflet-popup-content h6 { margin-bottom: 0.5rem; }
.leaflet-popup-content .small { color: #6c757d; }

/* ---------- Маршрут вывоза ---------- */
.depot-pin {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #0d6efd;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.dot-depot {
  background: #0d6efd;
}

.route-stop {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  color: #0d6efd;
  border: 3px solid #0d6efd;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* ---------- Ролевые карточки на странице логина ---------- */
.role-card {
  background: #fff;
  border: 2px solid #dee2e6;
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  min-height: 230px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.role-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.role-card-success:hover { border-color: #198754; }
.role-card-primary:hover { border-color: #0d6efd; }
.role-card-warning:hover { border-color: #ffc107; }

.role-icon { font-size: 3rem; margin-bottom: 0.5rem; }
.role-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.5rem; }
.role-desc { color: #6c757d; font-size: 0.9rem; margin-bottom: 0.75rem; }
.role-login { color: #adb5bd; }
.role-login code { background: #f1f3f5; padding: 1px 6px; border-radius: 4px; }