/* =============================================
   trafikinfo.css – TÅGradar trafikinformationssida
   ============================================= */

body.trafikinfo-page {
  background: #0b1220;
  color: #e2e8f0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  min-height: 100vh;
}

/* ── Layout ───────────────────────────────────── */
.ti-layout {
  display: flex;
  height: calc(100vh - 48px);
  margin-top: 48px;
}

/* ── Left panel ───────────────────────────────── */
.ti-panel {
  width: 380px;
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  background: #0d1629;
  border-right: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
}

@media (max-width: 768px) {
  .ti-layout      { flex-direction: column; }
  .ti-panel       { width: 100%; flex: 0 0 auto; max-height: 55vh; }
  .ti-map-wrap    { flex: 1; }
}

/* ── Panel header ─────────────────────────────── */
.ti-panel-header {
  padding: 18px 18px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex: 0 0 auto;
}

.ti-panel-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.ti-panel-title {
  margin: 0;
  font: 700 17px/1 system-ui;
  color: #f1f5f9;
}

.ti-count-badge {
  font: 600 11px/1 system-ui;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.1);
}

.ti-count-badge--active {
  background: rgba(239,68,68,0.15);
  color: #fca5a5;
  border-color: rgba(239,68,68,0.25);
}

.ti-panel-meta {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ti-updated {
  font: 500 11px/1 system-ui;
  color: rgba(255,255,255,0.28);
}

.ti-refresh-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  flex: 0 0 6px;
}
.ti-refresh-dot.refreshing {
  background: #60a5fa;
  animation: dotPulse 0.8s ease-in-out infinite alternate;
}
@keyframes dotPulse { from { opacity:.4; } to { opacity:1; } }

/* ── Filter row ───────────────────────────────── */
.ti-filter-row {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex: 0 0 auto;
}

.ti-filter-btn {
  padding: 6px 13px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 99px;
  background: transparent;
  color: rgba(255,255,255,0.45);
  font: 600 12px/1 system-ui;
  cursor: pointer;
  transition: all 0.15s;
}
.ti-filter-btn:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.75);
}
.ti-filter-btn--active {
  background: rgba(59,130,246,0.15);
  border-color: rgba(59,130,246,0.35);
  color: #93c5fd;
}

/* ── Card list ────────────────────────────────── */
.ti-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ti-list::-webkit-scrollbar { width: 4px; }
.ti-list::-webkit-scrollbar-track { background: transparent; }
.ti-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* ── Card ─────────────────────────────────────── */
.ti-card {
  padding: 13px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  user-select: none;
}

.ti-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.13);
}

.ti-card--active {
  background: rgba(239,68,68,0.05);
  border-color: rgba(239,68,68,0.2);
}
.ti-card--active:hover {
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.3);
}

.ti-card--stopped {
  background: rgba(127,29,29,0.1);
  border-color: rgba(239,68,68,0.35);
  box-shadow: 0 0 0 1px rgba(239,68,68,0.15) inset;
}

.ti-card--selected {
  border-color: rgba(59,130,246,0.55) !important;
  background: rgba(59,130,246,0.07) !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.12);
}

/* ── Card top row ─────────────────────────────── */
.ti-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 7px;
}

/* ── Badges ───────────────────────────────────── */
.ti-card-badge {
  font: 700 10px/1 system-ui;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  flex: 0 0 auto;
}

.ti-badge--active {
  background: rgba(239,68,68,0.15);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.3);
}
.ti-badge--stopped {
  background: rgba(127,29,29,0.25);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.45);
}
.ti-badge--reduced {
  background: rgba(249,115,22,0.15);
  color: #fdba74;
  border: 1px solid rgba(249,115,22,0.3);
}
.ti-badge--possible {
  background: rgba(250,204,21,0.12);
  color: #fde047;
  border: 1px solid rgba(250,204,21,0.25);
}
.ti-badge--done {
  background: rgba(100,116,139,0.12);
  color: #94a3b8;
  border: 1px solid rgba(100,116,139,0.2);
}
.ti-badge--none {
  background: rgba(100,116,139,0.08);
  color: rgba(148,163,184,0.7);
  border: 1px solid rgba(100,116,139,0.15);
}

/* ── ReasonCode pills ─────────────────────────── */
.ti-reason-pill {
  font: 600 10px/1 system-ui;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(96,165,250,0.1);
  color: #93c5fd;
  border: 1px solid rgba(96,165,250,0.2);
  white-space: nowrap;
}

/* ── Duration ─────────────────────────────────── */
.ti-card-dur {
  margin-left: auto;
  font: 600 11px/1 system-ui;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
}

.ti-card-dur--ongoing {
  color: #4ade80;
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.25);
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 10px;
  letter-spacing: 0.3px;
}

/* ── Title ────────────────────────────────────── */
.ti-card-title {
  margin: 0 0 6px;
  font: 600 14px/1.25 system-ui;
  color: #f1f5f9;
  letter-spacing: -0.15px;
}

.ti-card--active   .ti-card-title,
.ti-card--stopped  .ti-card-title { color: #fecaca; }

/* ── Route ────────────────────────────────────── */
.ti-card-route {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}

.ti-route-icon {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  flex: 0 0 auto;
}

.ti-route-text {
  font: 500 12px/1.35 system-ui;
  color: #93c5fd;
  word-break: break-word;
}

/* ── PublicMessage ────────────────────────────── */
.ti-card-message {
  display: flex;
  gap: 7px;
  margin-bottom: 7px;
  padding: 8px 10px;
  background: rgba(59,130,246,0.06);
  border: 1px solid rgba(59,130,246,0.15);
  border-radius: 8px;
}

.ti-msg-icon {
  font-size: 13px;
  flex: 0 0 auto;
  line-height: 1.35;
}

.ti-msg-text {
  font: 400 12px/1.45 system-ui;
  color: #bfdbfe;
  word-break: break-word;
}

/* ── Metadata row ─────────────────────────────── */
.ti-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 7px;
}

.ti-meta-county,
.ti-meta-item,
.ti-meta-level {
  font: 500 11px/1 system-ui;
  padding: 3px 7px;
  border-radius: 6px;
}

.ti-meta-county {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.08);
}
.ti-meta-item {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.35);
  border: 1px solid rgba(255,255,255,0.07);
}
.ti-meta-level {
  background: rgba(249,115,22,0.08);
  color: #fdba74;
  border: 1px solid rgba(249,115,22,0.15);
}

/* Nivå-specifika färger: 1=grön, 2=gul, 3=orange, 4/5=röd */
.ti-meta-level--1 {
  background: rgba(74,222,128,0.1);
  color: #4ade80;
  border-color: rgba(74,222,128,0.25);
}
.ti-meta-level--2 {
  background: rgba(250,204,21,0.1);
  color: #facc15;
  border-color: rgba(250,204,21,0.25);
}
.ti-meta-level--3 {
  background: rgba(249,115,22,0.1);
  color: #fb923c;
  border-color: rgba(249,115,22,0.25);
}
.ti-meta-level--4,
.ti-meta-level--5 {
  background: rgba(239,68,68,0.1);
  color: #f87171;
  border-color: rgba(239,68,68,0.25);
}

/* ── Footer ───────────────────────────────────── */
.ti-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.ti-card-time {
  font: 500 11px/1 "SF Mono","Fira Code",monospace;
  color: rgba(255,255,255,0.3);
}

.ti-time-sep {
  color: rgba(255,255,255,0.18);
}

.ti-card-eid {
  font: 500 10px/1 "SF Mono","Fira Code",monospace;
  color: rgba(255,255,255,0.15);
  letter-spacing: 0.3px;
}

/* ── Skeleton ─────────────────────────────────── */
.ti-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ti-skel {
  height: 90px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  animation: skelPulse 1.4s ease-in-out infinite;
}
@keyframes skelPulse {
  0%,100% { opacity:.4; }
  50%      { opacity:.9; }
}

/* ── Error / empty ────────────────────────────── */
.ti-error {
  margin: 12px;
  padding: 14px;
  border-radius: 10px;
  font: 500 13px/1.5 system-ui;
  color: #fca5a5;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  display: none;
}

.ti-empty {
  padding: 32px 0;
  text-align: center;
  font: 500 13px/1 system-ui;
  color: rgba(255,255,255,0.25);
}

/* ── Map ──────────────────────────────────────── */
.ti-map-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
}

#tiMap {
  position: absolute;
  inset: 0;
}

.ti-map-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(11,18,32,0.88);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 99px;
  padding: 10px 20px;
  font: 500 13px/1 system-ui;
  color: rgba(255,255,255,0.6);
  pointer-events: none;
  backdrop-filter: blur(8px);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1000;
}

/* ── Map tooltip ──────────────────────────────── */
.ti-tooltip.leaflet-tooltip {
  background: rgba(11,18,32,0.92) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #f1f5f9 !important;
  font: 600 12px/1 system-ui !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}
.ti-tooltip.leaflet-tooltip::before { display: none !important; }