/* NB 511 – Consistent with MB 511
   Works with either popup class prefix:
   - nb511-2.js currently outputs .on511-*
   - older/other versions may output .nb511-*
*/

/* --- Control (same as mb511.css) --- */

.btr-road-events{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:rgba(17,24,39,.95);
  color:#e5e7eb;
  border-radius:10px;
  box-shadow:0 10px 25px rgba(0,0,0,.45);
  overflow:hidden;
  min-width:260px;
  max-width:360px;
  border:1px solid rgba(55,65,81,.9);
}
.btr-road-events .btr-rc-header,
.btr-road-events .btr-rc-body{ padding:8px 10px; }
.btr-road-events.is-collapsed .btr-rc-body{ display:none; }

.btr-rc-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.btr-rc-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
}
.btr-rc-toggle input[type="checkbox"]{ display:none; }
.btr-rc-title{
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
}

.btr-rc-switch{
  position:relative;
  width:36px;
  height:20px;
  border-radius:999px;
  background:#4b5563;
  display:inline-flex;
  align-items:center;
  padding:2px;
  box-sizing:border-box;
  transition:background .18s ease;
}
.btr-rc-knob{
  width:16px;
  height:16px;
  border-radius:999px;
  background:#e5e7eb;
  transform:translateX(0);
  transition:transform .18s ease, background .18s ease;
}
.btr-rc-toggle input[type="checkbox"]:checked + .btr-rc-switch{ background:#2563eb; }
.btr-rc-toggle input[type="checkbox"]:checked + .btr-rc-switch .btr-rc-knob{
  transform:translateX(16px);
  background:#f9fafb;
}

.btr-rc-collapse{
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btr-rc-chevron{
  width:14px;
  height:14px;
  border-radius:999px;
  border:1px solid #4b5563;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.btr-rc-chevron::before{
  content:"";
  border-style:solid;
  border-width:0 2px 2px 0;
  border-color:#e5e7eb;
  display:inline-block;
  padding:2px;
  transform:rotate(45deg) translateY(-1px);
  transition:transform .18s ease;
}
.btr-road-events.is-collapsed .btr-rc-chevron::before{
  transform:rotate(-135deg) translateY(1px);
}

.btr-rc-body{ border-top:1px solid rgba(31,41,55,.9); }
.btr-pills{ display:flex; flex-direction:column; gap:6px; }
.btr-pills-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.btr-pills-row .label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#9ca3af;
  margin-right:2px;
}
.btr-pills .pill{
  border-radius:999px;
  border:1px solid #4b5563;
  background:#111827;
  color:#e5e7eb;
  padding:2px 10px;
  font-size:11px;
  line-height:1.4;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btr-pills .pill:hover{ background:#1f2933; border-color:#6b7280; }
.btr-pills .pill.active{ background:#2563eb; border-color:#2563eb; color:#f9fafb; }

/* --- Popup layout: alias NB (nb511-*) + current JS (on511-*) --- */

.on511-popup, .nb511-popup{
  max-width:280px;
  padding:6px 0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#111827;
}
.on511-title, .nb511-title{
  font-size:14px;
  font-weight:700;
  margin-bottom:3px;
  display:flex;
  align-items:center;
  gap:6px;
}
.on511-section, .nb511-section{
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid #e5e7eb;
}
.on511-row, .nb511-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:2px 0;
  font-size:12px;
}
.on511-label, .nb511-label{
  color:#6b7280;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.on511-value, .nb511-value{
  font-size:12px;
  font-weight:600;
}

/* Multi-line rows (used by nb511-2.js as on511-row-multi/value-multi) */
.on511-row-multi{
  align-items:flex-start;
  gap:10px;
}
.on511-value-multi{
  text-align:right;
  display:block;
  max-width:68%;
  word-break:break-word;
}

/* Chips */
.on511-chip, .nb511-chip{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  color:#fff;
}
.on511-chip.red, .nb511-chip.red{ background:#d32f2f; }
.on511-chip.orange, .nb511-chip.orange{ background:#f97316; }
.on511-chip.yellow, .nb511-chip.yellow{ background:#facc15; color:#000; }
.on511-chip.purple, .nb511-chip.purple{ background:#7e22ce; }
.on511-chip.blue, .nb511-chip.blue{ background:#1d4ed8; }
.on511-chip.grey, .nb511-chip.grey{ background:#6b7280; }

.on511-meta, .nb511-meta{
  margin-top:8px;
  font-size:10px;
  color:#6b7280;
}

/* Secondary condition list (nb511.css had nb511-secondary-list; nb511-2.js uses on511-condition-list) */
.on511-condition-list, .nb511-secondary-list{
  margin:0;
  padding-left:0;
  list-style:none;
}
.on511-condition-list li, .nb511-secondary-list li{
  font-size:11px;
  font-weight:500;
  margin:1px 0;
}

/* Detours (kept for compatibility) */
.nb511-detour-list{
  margin:0;
  padding-left:0;
  list-style:none;
}
.nb511-detour-list li{
  font-size:11px;
  font-weight:500;
  margin:1px 0;
}

/* Mobile */
@media (max-width:640px){
  .btr-road-events{
    max-width:100%;
    width:calc(100vw - 20px);
  }
  .btr-rc-header,
  .btr-rc-body{ padding:6px 8px; }
  .btr-pills-row{ gap:4px; }
}