/* ============================================
   LONDON LIVE DASHBOARD — WordPress Plugin CSS
   All classes prefixed with .ll- to avoid conflicts
   ============================================ */

/* --- Design Tokens --- */
.london-live {
  --ll-bg-primary: #fafaf8;
  --ll-bg-secondary: #ffffff;
  --ll-bg-tertiary: #f3f4f0;
  --ll-bg-card: rgba(255,255,255,0.92);
  --ll-bg-glass: rgba(255,255,255,0.75);
  --ll-bg-hover: rgba(230,0,35,0.05);
  --ll-accent: #e60023;
  --ll-accent-dim: rgba(230,0,35,0.1);
  --ll-accent2: #b91c1c;
  --ll-sev-severe: #dc2626;
  --ll-sev-serious: #ea580c;
  --ll-sev-moderate: #ca8a04;
  --ll-sev-minimal: #16a34a;
  --ll-cat-accident: #dc2626;
  --ll-cat-roadwork: #ea580c;
  --ll-cat-closure: #9333ea;
  --ll-cat-event: #2563eb;
  --ll-cat-weather: #0891b2;
  --ll-cat-transport: #0284c7;
  --ll-cat-other: #6b7280;
  --ll-text-1: #1a1a2e;
  --ll-text-2: #4b5563;
  --ll-text-3: #9ca3af;
  --ll-border-s: rgba(0,0,0,0.06);
  --ll-border-m: rgba(0,0,0,0.1);
  --ll-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --ll-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --ll-shadow-lg: 0 8px 32px rgba(0,0,0,0.1);
  --ll-radius-sm: 6px;
  --ll-radius-md: 10px;
  --ll-radius-lg: 14px;
  --ll-radius-full: 9999px;
  --ll-font: 'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --ll-mono: 'JetBrains Mono','Fira Code',monospace;
  --ll-fast: 150ms cubic-bezier(0.4,0,0.2,1);
}

/* --- Base --- */
.london-live { font-family: var(--ll-font); color: var(--ll-text-1); line-height: 1.5; background: var(--ll-bg-primary); position: relative; overflow: hidden; }
.london-live * { box-sizing: border-box; margin: 0; padding: 0; }
.london-live ::-webkit-scrollbar { width: 5px; }
.london-live ::-webkit-scrollbar-track { background: transparent; }
.london-live ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 99px; }

/* --- Animations --- */
@keyframes ll-fade-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes ll-slide-right { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
@keyframes ll-slide-up { from { opacity:0; transform:translateY(100%); } to { opacity:1; transform:translateY(0); } }
@keyframes ll-pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.5; transform:scale(.85); } }
@keyframes ll-marker-pulse { 0% { transform:scale(1); opacity:.6; } 50% { transform:scale(2.5); opacity:0; } 100% { transform:scale(1); opacity:0; } }
@keyframes ll-spin { to { transform: rotate(360deg); } }

/* --- Loading --- */
.ll-loading { display:flex; align-items:center; justify-content:center; gap:12px; height:100%; color:var(--ll-text-3); font-size:.85rem; }
.ll-loading-spinner { width:20px; height:20px; border:2px solid var(--ll-border-m); border-top-color:#e60023; border-radius:50%; animation:ll-spin .8s linear infinite; }

/* --- Header --- */
.ll-header { position:absolute; top:0; left:0; right:0; z-index:200; display:flex; align-items:center; justify-content:space-between; padding:8px 20px; background:rgba(255,255,255,0.92); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--ll-border-s); height:50px; box-shadow:var(--ll-shadow-sm); }
.ll-brand { display:flex; align-items:center; gap:10px; }
.ll-logo { width:30px; height:30px; border-radius:var(--ll-radius-sm); background:linear-gradient(135deg,#e60023,#b91c1c); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:800; color:#fff; }
.ll-title { font-size:1.1rem; font-weight:700; color:var(--ll-text-1); }
.ll-subtitle { font-size:.65rem; color:var(--ll-text-3); font-weight:500; text-transform:uppercase; letter-spacing:.1em; }
.ll-header-right { display:flex; align-items:center; gap:12px; }
.ll-live { display:flex; align-items:center; gap:6px; padding:3px 10px; background:rgba(22,163,74,0.08); border:1px solid rgba(22,163,74,0.15); border-radius:var(--ll-radius-full); font-size:.68rem; font-weight:600; color:#16a34a; text-transform:uppercase; letter-spacing:.08em; }
.ll-live-dot { width:6px; height:6px; border-radius:50%; background:#16a34a; animation:ll-pulse 2s ease-in-out infinite; }
.ll-mock-badge { display:flex; align-items:center; gap:4px; padding:3px 8px; background:rgba(202,138,4,0.08); border:1px solid rgba(202,138,4,0.15); border-radius:var(--ll-radius-full); font-size:.65rem; font-weight:600; color:var(--ll-sev-moderate); text-transform:uppercase; }
.ll-last-update { font-size:.68rem; color:var(--ll-text-3); font-family:var(--ll-mono); }

/* --- Map --- */
.ll-map-container { position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; }
.ll-map-canvas { width:100%; height:100%; }

/* Mapbox popup overrides */
.london-live .mapboxgl-popup-content { background:rgba(255,255,255,0.96); backdrop-filter:blur(20px); border:1px solid var(--ll-border-m); border-radius:var(--ll-radius-md); padding:10px 14px; color:var(--ll-text-1); font-family:var(--ll-font); box-shadow:var(--ll-shadow-lg); max-width:280px; }
.london-live .mapboxgl-popup-tip { border-top-color:rgba(255,255,255,0.96); }
.london-live .mapboxgl-popup-close-button { color:var(--ll-text-2); font-size:1.2rem; padding:4px 8px; }
.london-live .mapboxgl-popup-close-button:hover { color:var(--ll-text-1); background:transparent; }
.london-live .mapboxgl-ctrl-group { background:rgba(255,255,255,0.95)!important; border:1px solid var(--ll-border-s)!important; border-radius:var(--ll-radius-md)!important; box-shadow:var(--ll-shadow-md)!important; }
.london-live .mapboxgl-ctrl-group button { width:34px!important; height:34px!important; }
.london-live .mapboxgl-ctrl-group button+button { border-top:1px solid var(--ll-border-s)!important; }

/* --- Stats Bar --- */
.ll-stats { position:absolute; top:56px; left:0; right:380px; z-index:100; display:flex; align-items:stretch; justify-content:center; gap:2px; padding:3px; margin:0 auto; width:fit-content; background:rgba(255,255,255,0.88); backdrop-filter:blur(20px); border:1px solid var(--ll-border-s); border-radius:var(--ll-radius-lg); animation:ll-fade-in .5s ease-out; box-shadow:var(--ll-shadow-md); }
.ll-stat { display:flex; flex-direction:column; align-items:center; padding:6px 16px; min-width:60px; border-radius:var(--ll-radius-md); transition:background var(--ll-fast); }
.ll-stat:hover { background:var(--ll-bg-hover); }
.ll-stat-val { font-family:var(--ll-mono); font-size:1.2rem; font-weight:700; line-height:1.2; }
.ll-stat-label { font-size:.58rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ll-text-3); margin-top:1px; }
.ll-stat-div { width:1px; background:var(--ll-border-s); align-self:stretch; margin:4px 0; }
.ll-val-total { color:var(--ll-accent); }
.ll-val-severe { color:var(--ll-sev-severe); }
.ll-val-serious { color:var(--ll-sev-serious); }
.ll-val-moderate { color:var(--ll-sev-moderate); }
.ll-val-minimal { color:var(--ll-sev-minimal); }

/* --- Filters --- */
.ll-filters { position:absolute; top:108px; left:0; right:380px; z-index:100; display:flex; align-items:center; justify-content:center; gap:4px; padding:3px; margin:0 auto; width:fit-content; background:rgba(255,255,255,0.88); backdrop-filter:blur(20px); border:1px solid var(--ll-border-s); border-radius:var(--ll-radius-full); animation:ll-fade-in .6s ease-out .1s both; box-shadow:var(--ll-shadow-md); }
.ll-chip { display:flex; align-items:center; gap:4px; padding:4px 12px; border-radius:var(--ll-radius-full); border:1px solid transparent; background:transparent; color:var(--ll-text-2); font-family:var(--ll-font); font-size:.7rem; font-weight:500; cursor:pointer; transition:all var(--ll-fast); white-space:nowrap; }
.ll-chip:hover { background:var(--ll-bg-hover); color:var(--ll-text-1); }
.ll-chip.active { background:var(--ll-accent-dim); color:var(--ll-accent); border-color:rgba(230,0,35,0.2); }
.ll-chip-icon { display:flex; align-items:center; }
.ll-chip-count { font-family:var(--ll-mono); font-size:.6rem; font-weight:600; opacity:.7; }
.ll-chip-div { width:1px; height:18px; background:var(--ll-border-s); margin:0 2px; }

/* --- Area Filter --- */
.ll-area-wrap { position:absolute; top:148px; left:0; right:380px; z-index:100; display:flex; justify-content:center; margin:0 auto; width:fit-content; animation:ll-fade-in .5s ease-out .15s both; }
.ll-area-btn { display:flex; align-items:center; gap:5px; padding:6px 12px; background:rgba(255,255,255,0.88); backdrop-filter:blur(20px); border:1px solid var(--ll-border-s); border-radius:var(--ll-radius-full); color:var(--ll-text-2); font-family:var(--ll-font); font-size:.72rem; font-weight:500; cursor:pointer; transition:all var(--ll-fast); box-shadow:var(--ll-shadow-md); white-space:nowrap; }
.ll-area-btn:hover { background:rgba(255,255,255,0.95); color:var(--ll-text-1); }
.ll-area-btn.active { background:var(--ll-accent); color:#fff; border-color:var(--ll-accent); box-shadow:var(--ll-shadow-md),0 2px 8px rgba(230,0,35,0.2); }
.ll-area-btn.active:hover { background:#c8001e; }
.ll-area-chevron { transition:transform var(--ll-fast); }
.ll-area-chevron.open { transform:rotate(180deg); }
.ll-area-dropdown { position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); width:250px; max-height:360px; background:rgba(255,255,255,0.97); backdrop-filter:blur(40px); border:1px solid var(--ll-border-m); border-radius:var(--ll-radius-lg); box-shadow:var(--ll-shadow-lg); overflow:hidden; animation:ll-fade-in .2s ease-out; display:flex; flex-direction:column; }
.ll-area-search-wrap { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--ll-border-s); }
.ll-area-search { flex:1; border:none; background:transparent; color:var(--ll-text-1); font-family:var(--ll-font); font-size:.78rem; outline:none; }
.ll-area-search::placeholder { color:var(--ll-text-3); }
.ll-area-list { flex:1; overflow-y:auto; padding:4px; }
.ll-area-group { padding:6px 10px 3px; font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--ll-text-3); }
.ll-area-option { display:flex; align-items:center; gap:7px; width:100%; padding:6px 10px; border:none; border-radius:var(--ll-radius-sm); background:transparent; color:var(--ll-text-1); font-family:var(--ll-font); font-size:.75rem; font-weight:500; cursor:pointer; transition:all var(--ll-fast); text-align:left; }
.ll-area-option:hover { background:var(--ll-bg-hover); }
.ll-area-option.active { background:var(--ll-accent-dim); color:var(--ll-accent); font-weight:600; }
.ll-area-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.ll-area-none { padding:14px; text-align:center; font-size:.75rem; color:var(--ll-text-3); }

/* --- Legend --- */
.ll-legend { position:absolute; bottom:20px; left:20px; z-index:100; padding:10px 14px; background:rgba(255,255,255,0.92); backdrop-filter:blur(20px); border:1px solid var(--ll-border-s); border-radius:var(--ll-radius-md); animation:ll-fade-in .6s ease-out .3s both; box-shadow:var(--ll-shadow-md); min-width:140px; }
.ll-legend-title { font-size:.58rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--ll-text-3); margin-bottom:6px; }
.ll-legend-items { display:flex; flex-direction:column; gap:3px; }
.ll-legend-item { display:flex; align-items:center; gap:6px; font-size:.68rem; color:var(--ll-text-2); }
.ll-legend-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.ll-legend-div { height:1px; background:var(--ll-border-s); margin:5px 0; }
.ll-legend-sev { display:flex; flex-direction:column; gap:2px; }
.ll-legend-sev-item { display:flex; align-items:center; gap:6px; font-size:.62rem; color:var(--ll-text-3); }

/* --- Feed Sidebar --- */
.ll-feed { position:absolute; top:50px; right:0; bottom:0; width:380px; z-index:100; display:flex; flex-direction:column; background:rgba(255,255,255,0.95); backdrop-filter:blur(40px); border-left:1px solid var(--ll-border-s); animation:ll-slide-right .5s ease-out; box-shadow:-2px 0 12px rgba(0,0,0,0.04); }
.ll-feed-header { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-bottom:1px solid var(--ll-border-s); }
.ll-feed-title { font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ll-text-2); }
.ll-feed-count { font-family:var(--ll-mono); font-size:.68rem; font-weight:500; color:var(--ll-text-3); background:var(--ll-bg-tertiary); padding:2px 8px; border-radius:var(--ll-radius-full); }
.ll-feed-list { flex:1; overflow-y:auto; padding:6px; }

/* Feed cards */
.ll-card { display:flex; gap:10px; padding:10px 14px; margin-bottom:2px; border-radius:var(--ll-radius-md); cursor:pointer; transition:all var(--ll-fast); border:1px solid transparent; animation:ll-fade-in .3s ease-out both; }
.ll-card:hover { background:var(--ll-bg-hover); border-color:var(--ll-border-s); }
.ll-card.selected { background:var(--ll-accent-dim); border-color:rgba(230,0,35,0.2); }
.ll-card-dot { width:9px; height:9px; border-radius:50%; margin-top:4px; flex-shrink:0; }
.ll-card-body { flex:1; min-width:0; }
.ll-card-title { font-size:.78rem; font-weight:600; color:var(--ll-text-1); line-height:1.35; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ll-card-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ll-card-road { font-family:var(--ll-mono); font-size:.65rem; font-weight:600; color:var(--ll-accent); background:var(--ll-accent-dim); padding:1px 5px; border-radius:var(--ll-radius-sm); }
.ll-card-time { font-size:.65rem; color:var(--ll-text-3); }
.ll-feed-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; color:var(--ll-text-3); text-align:center; gap:10px; }

/* --- Severity Badges --- */
.ll-badge { display:inline-flex; align-items:center; padding:1px 7px; border-radius:var(--ll-radius-full); font-size:.63rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.ll-badge-severe { background:rgba(220,38,38,0.08); color:var(--ll-sev-severe); border:1px solid rgba(220,38,38,0.2); }
.ll-badge-serious { background:rgba(234,88,12,0.08); color:var(--ll-sev-serious); border:1px solid rgba(234,88,12,0.2); }
.ll-badge-moderate { background:rgba(202,138,4,0.08); color:var(--ll-sev-moderate); border:1px solid rgba(202,138,4,0.2); }
.ll-badge-minimal { background:rgba(22,163,74,0.08); color:var(--ll-sev-minimal); border:1px solid rgba(22,163,74,0.2); }

/* --- Detail Panel --- */
.ll-detail-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.2); z-index:300; animation:ll-fade-in .2s ease-out; }
.ll-detail { position:absolute; top:50px; right:380px; bottom:0; width:380px; z-index:300; background:rgba(255,255,255,0.97); backdrop-filter:blur(40px); border-left:1px solid var(--ll-border-m); overflow-y:auto; animation:ll-slide-right .35s ease-out; box-shadow:-4px 0 16px rgba(0,0,0,0.06); }
.ll-detail-close { position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:var(--ll-radius-sm); background:var(--ll-bg-tertiary); border:1px solid var(--ll-border-s); color:var(--ll-text-2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--ll-fast); }
.ll-detail-close:hover { background:var(--ll-bg-hover); color:var(--ll-text-1); }
.ll-detail-banner { padding:20px 20px 14px; border-bottom:1px solid var(--ll-border-s); }
.ll-detail-cat { display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:var(--ll-radius-full); font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
.ll-cat-accident { background:rgba(220,38,38,0.08); color:var(--ll-cat-accident); border:1px solid rgba(220,38,38,0.15); }
.ll-cat-roadwork { background:rgba(234,88,12,0.08); color:var(--ll-cat-roadwork); border:1px solid rgba(234,88,12,0.15); }
.ll-cat-closure { background:rgba(147,51,234,0.08); color:var(--ll-cat-closure); border:1px solid rgba(147,51,234,0.15); }
.ll-cat-event { background:rgba(37,99,235,0.08); color:var(--ll-cat-event); border:1px solid rgba(37,99,235,0.15); }
.ll-cat-weather { background:rgba(8,145,178,0.08); color:var(--ll-cat-weather); border:1px solid rgba(8,145,178,0.15); }
.ll-cat-transport { background:rgba(2,132,199,0.08); color:var(--ll-cat-transport); border:1px solid rgba(2,132,199,0.15); }
.ll-cat-other { background:rgba(107,114,128,0.08); color:var(--ll-cat-other); border:1px solid rgba(107,114,128,0.15); }
.ll-detail-title { font-size:1.1rem; font-weight:700; line-height:1.35; color:var(--ll-text-1); padding-right:40px; }
.ll-detail-body { padding:20px; }
.ll-meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.ll-meta-item { padding:10px; background:var(--ll-bg-tertiary); border-radius:var(--ll-radius-md); border:1px solid var(--ll-border-s); }
.ll-meta-label { font-size:.58rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--ll-text-3); margin-bottom:3px; }
.ll-meta-val { font-size:.78rem; font-weight:600; color:var(--ll-text-1); }
.ll-meta-mono { font-family:var(--ll-mono); font-size:.75rem; }
.ll-section-title { font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ll-text-3); margin-bottom:10px; display:flex; align-items:center; gap:4px; }
.ll-desc { font-size:.82rem; line-height:1.65; color:var(--ll-text-2); margin-bottom:20px; }
.ll-coords { display:flex; align-items:center; gap:6px; padding:10px; background:var(--ll-bg-tertiary); border-radius:var(--ll-radius-md); border:1px solid var(--ll-border-s); font-family:var(--ll-mono); font-size:.7rem; color:var(--ll-text-3); }

/* Camera toggle */
.ll-cam-toggle { position:absolute; bottom:20px; left:58px; z-index:10; display:flex; align-items:center; gap:5px; padding:7px 12px; background:rgba(255,255,255,0.9); backdrop-filter:blur(20px); border:1px solid var(--ll-border-s); border-radius:var(--ll-radius-full); color:var(--ll-text-2); font-family:var(--ll-font); font-size:.7rem; font-weight:600; cursor:pointer; transition:all var(--ll-fast); box-shadow:var(--ll-shadow-md); }
.ll-cam-toggle:hover { background:var(--ll-bg-hover); color:var(--ll-text-1); }
.ll-cam-toggle.active { background:rgba(8,145,178,0.1); color:#0891b2; border-color:rgba(8,145,178,0.25); }

/* --- Responsive --- */
@media (max-width:1024px) {
  .ll-feed { width:320px; }
  .ll-stats,.ll-filters,.ll-area-wrap { right:320px; }
  .ll-detail { right:320px; width:340px; }
}
@media (max-width:768px) {
  .ll-feed { top:auto; bottom:0; left:0; right:0; width:100%; height:45%; border-left:none; border-top:1px solid var(--ll-border-s); border-radius:var(--ll-radius-lg) var(--ll-radius-lg) 0 0; animation:ll-slide-up .4s ease-out; }
  .ll-stats,.ll-filters,.ll-area-wrap { right:0; }
  .ll-detail { right:0; left:0; width:100%; top:auto; bottom:45%; height:55%; border-radius:var(--ll-radius-lg) var(--ll-radius-lg) 0 0; }
  .ll-legend { bottom:47%; }
}