/* StaffingMap admin portal — custom styles on top of Tailwind */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#map {
  height: calc(100vh - 220px);
  min-height: 520px;
  border-radius: 1rem;
  z-index: 1;
}

/* ==== Map markers ==== */
.custom-marker {
  background: #10b981;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 12px;
}
.marker-empty { background: #94a3b8; }
.marker-low   { background: #3b82f6; }
.marker-mid   { background: #0ea5e9; }
.marker-high  { background: #10b981; }

.leaflet-popup-content { margin: 10px 14px; font-family: inherit; }
.leaflet-popup-content-wrapper { border-radius: 12px; }

/* ==== Permanent zip labels on polygons ==== */
.zip-permanent-label {
  background: rgba(255, 255, 255, 0.98);
  border: 1.5px solid #475569;
  border-radius: 6px;
  padding: 3px 7px;
  font-family: inherit;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
  pointer-events: none;
  white-space: nowrap;
}
.zip-permanent-label::before { display: none !important; }
.zip-permanent-label .zip-label-code {
  font-size: 11px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.1;
  letter-spacing: 0.2px;
}
.zip-permanent-label .zip-label-meta {
  font-size: 9px;
  color: #475569;
  font-weight: 500;
  line-height: 1.1;
  margin-top: 1px;
}

/* ==== Animations ==== */
.pulse-dot {
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: .6; }
}

.sms-ticker {
  animation: slideIn .4s ease;
}
@keyframes slideIn {
  from { transform: translateX(-10px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ==== Nurse cards ==== */
.nurse-card {
  transition: all .15s ease;
  cursor: pointer;
  padding: 12px;
}
.nurse-card:hover {
  background: #f8fafc;
  transform: translateX(2px);
}
.nurse-card.selected {
  background: #eff6ff;
  border-left: 3px solid #0ea5e9;
}

/* ==== Custom scrollbars ==== */
.scroll-area::-webkit-scrollbar { width: 6px; }
.scroll-area::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.scroll-area::-webkit-scrollbar-track { background: transparent; }

/* ==== Tab buttons ==== */
.tab-btn {
  background: transparent;
  color: #64748b;
}
.tab-btn[aria-selected="true"],
.tab-btn.active {
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 600;
}

/* ==== Edit panel tabs ==== */
.tab-active {
  border-bottom: 2px solid #0ea5e9;
  color: #0ea5e9;
}

/* ==== Chips ==== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  background: #e0f2fe;
  color: #0369a1;
}
.chip button {
  color: #0369a1;
  opacity: .6;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.chip button:hover { opacity: 1; }

.chip.chip-locked {
  background: #f1f5f9;
  color: #475569;
  cursor: not-allowed;
}
.chip.chip-locked .chip-lock {
  font-size: 9px;
  opacity: .55;
}
.chip.chip-new {
  background: #dcfce7;
  color: #166534;
}
.chip.chip-new button { color: #166534; }

/* ==== Switches (admin toggles) ==== */
.switch-on  { background: #10b981; }
.switch-off { background: #cbd5e1; }

.toggle-btn {
  transition: background .2s;
  cursor: pointer;
  border: none;
}
.toggle-btn[data-on="false"] {
  background: #cbd5e1 !important;
}
.toggle-btn[data-on="false"] .toggle-knob {
  right: auto;
  left: 0.125rem;
  transition: all .2s;
}

/* ==== Row hover ==== */
.row { cursor: pointer; }
.row:hover { background: #f8fafc; }

/* ==== Toast ==== */
#toast.show {
  display: flex !important;
  animation: toastIn .25s ease;
}
@keyframes toastIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
#toast.error { background: #b91c1c; }
#toast.success { background: #047857; }

/* ==== Avatar colors — match the map's coverage-count buckets ==== */
.avatar-empty { background: #94a3b8; }                                 /* gray  — 0 zips */
.avatar-low   { background: #3b82f6; }                                 /* blue  — 1 zip */
.avatar-mid   { background: #0ea5e9; }                                 /* sky   — 2-3 zips */
.avatar-high  { background: #10b981; }                                 /* green — 4+ zips */

/* Edit panel header — same palette but as gradient for visual lift */
.header-empty { background: linear-gradient(135deg, #94a3b8, #64748b); }
.header-low   { background: linear-gradient(135deg, #60a5fa, #2563eb); }
.header-mid   { background: linear-gradient(135deg, #38bdf8, #0284c7); }
.header-high  { background: linear-gradient(135deg, #34d399, #059669); }

/* Backwards-compat: old .avatar-grad-* classes still work in the rare case mock data
   passes through. Maps to a neutral palette. */
.avatar-grad-1, .avatar-grad-2, .avatar-grad-3, .avatar-grad-4,
.avatar-grad-5, .avatar-grad-6, .avatar-grad-7, .avatar-grad-8 {
  background: #94a3b8;
}

/* ==== View switching ==== */
.view { display: grid; }
.view.hidden { display: none; }

/* ==== Modal ==== */
#broadcast-modal.show { display: flex !important; }

/* ==== Hospice pills (slim horizontal bar) ==== */
.hospice-pill {
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
}
.hospice-pill:hover { filter: brightness(0.97); }