/* share/style/css/share.css */
/* Extracted from inline <style> in share/share.html */

/* Design tokens */
:root {
  --color-bg-page: #f8f9fa;
  --color-text: #222;
  --color-text-muted: #666;
  --color-panel-bg: rgba(0,12,24,0.62);
  --color-panel-border: rgba(255,255,255,0.12);
  --color-accent: #0062ff;
  --color-error-bg: #ffebee;
  --color-error-text: #c62828;
  --radius-md: 14px;
  --shadow-elev: 0 8px 28px -6px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
  --font-base: Arial, sans-serif;
  --transition-fast: 150ms ease;
  --placeholder-image: url('../img/australia-map.jpg');
  --leaflet-ctrl-bg: rgba(255,255,255,0.9);
  --leaflet-ctrl-border: rgba(0,0,0,0.25);
  --leaflet-ctrl-text: #222;
  --leaflet-ctrl-hover-bg: #fff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-page: #181a1b;
    --color-text: #e0e0e0;
    --color-text-muted: #bbb;
    --color-panel-bg: rgba(15,15,18,0.55);
    --color-error-bg: #2d1a1a;
    --color-error-text: #ffb3b3;
    --placeholder-image: url('../img/australia-map-darkmode.jpg');
    --leaflet-ctrl-bg: rgba(32,32,36,0.85);
    --leaflet-ctrl-border: rgba(255,255,255,0.18);
    --leaflet-ctrl-text: #f1f1f1;
    --leaflet-ctrl-hover-bg: rgba(55,55,60,0.95);
  }
}
html, body { margin:0; padding:0; height:100%; font-family:var(--font-base); background:var(--color-bg-page); color:var(--color-text); }
#map { width:100%; height:100%; background:var(--color-bg-page); }
#map-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; /* Use themed page background to avoid harsh black flash on light theme */ background:var(--color-bg-page) var(--placeholder-image) center center / cover no-repeat; color:#fff; text-align:center; padding:2rem 1rem 3.5rem; z-index:500; opacity:1; visibility:visible; transition:opacity 320ms ease, visibility 0s linear 0s; }
#map-placeholder.hidden { opacity:0; visibility:hidden; transition:opacity 240ms ease, visibility 0s linear 240ms; }
#map-placeholder h2 { margin:0 0 .75rem; font-size:1.4rem; letter-spacing:.5px; font-weight:600; }
#map-placeholder p { margin:0 0 1rem; line-height:1.5; font-size:.95rem; color:#d0d6dc; }
#map-placeholder .retry-hint { font-size:.75rem; opacity:.7; }
#map-placeholder ul.reason-list { margin:0 0 1.1rem; padding:0 0 0 1.1rem; list-style:disc; text-align:left; }
#map-placeholder ul.reason-list li { margin:0 0 .55rem; line-height:1.4; font-size:.9rem; color:#d8dde2; }
#map-placeholder .placeholder-content { background:var(--color-panel-bg); padding:1.9rem 2.15rem 1.75rem; border-radius:var(--radius-md); backdrop-filter:blur(6px) saturate(140%); -webkit-backdrop-filter:blur(6px) saturate(140%); border:1px solid var(--color-panel-border); max-width:640px; box-shadow:var(--shadow-elev); text-align:center; }
#map-placeholder .placeholder-content h2 { font-size:1.55rem; color:#fff; }
#map-placeholder .placeholder-content p:last-child { margin-bottom:0; }
.vehicle-popup { padding:5px; }
.vehicle-popup .name { font-weight:600; font-size:14px; margin-bottom:8px; color:#333; }
.vehicle-popup .details { font-size:12px; color:var(--color-text-muted); line-height:1.4; }
.vehicle-popup .status { display:inline-block; padding:2px 6px; border-radius:3px; margin-right:5px; }
.vehicle-popup .status.online { background:#e8f5e9; color:#2e7d32; }
.vehicle-popup .status.offline { background:#ffebee; color:#c62828; }
.loading { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:rgba(255,255,255,0.9); padding:20px; border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,0.1); z-index:1000; }
.error { position:absolute; top:20px; left:50%; transform:translateX(-50%); background:var(--color-error-bg); color:var(--color-error-text); padding:10px 20px; border-radius:6px; box-shadow:0 2px 4px rgba(0,0,0,0.1); z-index:1000; display:none; max-width:80%; text-align:center; animation:fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity:0; transform:translate(-50%, -10px);} to { opacity:1; transform:translate(-50%, 0);} }
.logo-control { background:var(--leaflet-ctrl-bg); padding:5px; border-radius:4px; box-shadow:0 1px 5px rgba(0,0,0,0.2); margin-bottom:15px !important; transition:all 0.2s ease; cursor:pointer; border:1px solid var(--leaflet-ctrl-border); }
.logo-control img { height:25px; width:auto; display:block; }
.logo-control .live-status { display:flex; align-items:center; gap:6px; margin-top:6px; font-size:12px; font-weight:600; color:var(--leaflet-ctrl-text); letter-spacing:0.6px; text-transform:uppercase; justify-content:center; }
.logo-control .live-dot { width:8px; height:8px; border-radius:50%; background:#ff3b30; box-shadow:0 0 0 0 rgba(255,59,48,0.45); animation:livePulse 1.6s ease-in-out infinite; flex-shrink:0; }
.logo-control .live-text { font-weight:700; }
.logo-control .live-countdown { font-variant-numeric:tabular-nums; letter-spacing:0.3px; }
@keyframes livePulse { 0% { transform:scale(1); box-shadow:0 0 0 0 rgba(255,59,48,0.45); } 70% { transform:scale(1.3); box-shadow:0 0 0 6px rgba(255,59,48,0); } 100% { transform:scale(1); box-shadow:0 0 0 0 rgba(255,59,48,0); } }
.logo-control:hover { background:var(--leaflet-ctrl-hover-bg); box-shadow:0 2px 6px rgba(0,0,0,0.3); transform:translateY(-1px); }
.leaflet-control-zoom, .leaflet-bar, .leaflet-control-attribution { border-radius:6px !important; overflow:hidden; }
.leaflet-bar a, .leaflet-bar a:hover { background:var(--leaflet-ctrl-bg); color:var(--leaflet-ctrl-text); border-bottom:1px solid var(--leaflet-ctrl-border); }
.leaflet-bar a:last-child { border-bottom:none; }
.leaflet-bar a:hover { background:var(--leaflet-ctrl-hover-bg); }
.leaflet-control-attribution { background:var(--leaflet-ctrl-bg) !important; color:var(--leaflet-ctrl-text) !important; border:1px solid var(--leaflet-ctrl-border) !important; }
.leaflet-control-attribution a { color:var(--leaflet-ctrl-text) !important; }
.vehicle-icon-container { display:flex; flex-direction:column; align-items:center; text-align:center; width:144px; position:relative; }
.vehicle-icon { width:144px; height:208px; display:flex; align-items:center; justify-content:center; }
.vehicle-svg-rotator { width:144px; height:208px; }
.vehicle-image { width:auto; height:auto; }
.vehicle-label { background:rgba(0,0,0,0.7); color:#fff; font-family:inherit; font-weight:500; letter-spacing:0.01em; font-size:13px; padding:4px 8px; border-radius:4px; margin-top:4px; white-space:nowrap; max-width:140px; overflow:hidden; text-overflow:ellipsis; box-shadow:0 2px 6px rgba(0,0,0,0.15); position:relative; left:40%; bottom:85%; transform:translateX(-50%); }
@media (prefers-color-scheme: dark) { .loading { background:rgba(24,26,27,0.95); color:var(--color-text);} .logo-control { background:rgba(30,30,30,0.9);} .logo-control:hover { background:rgba(40,40,40,1);} .vehicle-label { background:rgba(30,30,30,0.85) !important; color:#fff !important;} #map-placeholder p { color:#b7c2cc;} }