:root{
  --bg:#080b0f;
  --panel:#0a0e14;
  --panel-2:#0a0e14;
  --line:#1e2733;
  --line-strong:#333d4a;
  --text:#c7ccd1;
  --text-dim:#5a6472;
  --text-faint:#333d4a;
  --cyan:#3fa9c9;
  --cyan-dim:#1E5A6B;
  --amber:#e8a33d;
  --amber-dim:#5C4419;
  --red:#d64545;
  --red-dim:#5A1F1F;
  --green:#4f9d6e;
}
*{box-sizing:border-box; border-radius:0 !important;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Mono', monospace;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'IBM Plex Mono', monospace;}

/* ---------- top status bar ---------- */
.statusbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px 12px 20px;
  border-bottom:1px solid var(--line);
  background:var(--panel-2);
  flex-wrap:wrap;
  gap:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-mark{
  width:28px;height:28px;
  border:1px solid var(--cyan);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.brand-mark::after{
  content:"";
  width:6px;height:6px;
  background:var(--cyan);
  border-radius:50%;
}
.brand-name{font-weight:600;font-size:15px;letter-spacing:0.2px;}
.brand-sub{font-size:12px;color:var(--text-dim);}

.status-pill{
  display:flex;align-items:center;gap:8px;
  padding:7px 14px;
  border-radius:6px;
  font-size:13px;
  font-weight:500;
}
.status-pill.watch{background:var(--amber-dim);color:var(--amber);border:1px solid #7A5A22;}
.status-pill.safe{background:rgba(79,157,110,0.15);color:var(--green);border:1px solid rgba(79,157,110,0.3);}
.status-pill.night{background:rgba(63,169,201,0.15);color:var(--cyan);border:1px solid rgba(63,169,201,0.3);}
.status-pill.danger{background:var(--red-dim);color:#F09595;border:1px solid #7a2828;}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}

.event.dimmed { opacity: 0.35; transition: opacity 0.3s; }

.demo-btn{
  background:transparent;
  border:1px solid var(--line-strong);
  color:var(--text-dim);
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  padding: 10px 16px;
  border-radius: 6px;
  cursor:pointer;
  transition: all 0.2s;
}
.demo-btn:hover{border-color:var(--cyan-dim);color:var(--cyan);}

/* ---------- simple view ---------- */
body.simple-mode-active .layout { display: none; }
body.simple-mode-active simple-view { display: flex; }
simple-view {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 61px);
  text-align: center;
  padding: 20px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.simple-indicator {
  width: 150px;
  height: 150px;
  border-radius: 50% !important;
  margin-bottom: 40px;
  animation: pulse 2s infinite;
}
.simple-text {
  font-size: 44px;
  font-weight: 600;
  max-width: 800px;
  line-height: 1.2;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.simple-subtext {
  font-size: 20px;
  color: var(--text-dim);
  margin-top: 24px;
  max-width: 600px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.tts-btn {
  border-radius: 12px !important;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

/* ---------- filtry do kafelkow mapy ---------- */
.dark-osm-tiles {
  filter: invert(100%) hue-rotate(180deg) brightness(85%) contrast(90%) sepia(20%);
}

/* ---------- layout ---------- */
.layout{
  display:grid;
  grid-template-columns:1fr 380px;
  min-height:calc(100vh - 61px);
}
@media (max-width:900px){
  .layout{grid-template-columns:1fr;}
  .side-tab { padding: 10px 2px; font-size: 9px; letter-spacing: 0.5px; }
  .map-area { min-height: 350px; }
}

/* ---------- map area ---------- */
.map-area{
  position:relative;
  padding:20px;
  border-right:1px solid var(--line);
}
.map-legend{
  display:flex;
  gap:18px;
  margin-bottom:14px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--text-dim);
}
.legend-item{display:flex;align-items:center;gap:6px;}
.legend-swatch{width:10px;height:10px;border-radius:2px;}

.map-frame{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px;
}

svg text{font-family:'IBM Plex Mono', monospace;}

.layer-toggles{
  display:flex;
  gap:8px;
  margin-top:14px;
  flex-wrap:wrap;
}
.toggle{
  font-size:12px;
  padding:6px 12px;
  border-radius:20px;
  border:1px solid var(--line-strong);
  color:var(--text-dim);
  cursor:pointer;
  user-select:none;
  display:flex;align-items:center;gap:6px;
}
.toggle.on{border-color:var(--cyan-dim);color:var(--cyan);background:rgba(63,169,201,0.08);}

/* ---------- side panel ---------- */
.side{
  display:flex;
  flex-direction:column;
  background:var(--panel);
  height: 100%;
}
.side-tabs{
  display:flex;
  border-bottom:1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) var(--bg);
  
}
.side-tabs::-webkit-scrollbar {
  height: 3px;
}
.side-tabs::-webkit-scrollbar-track {
  background: var(--bg);
}
.side-tabs::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 3px;
}
.side-tab{
  flex: 1;
  min-width: 80px;
  text-align:center;
  padding:12px 5px;
  font-size:10px;
  color:var(--text-faint);
  cursor:pointer;
  letter-spacing:1px;
}
.side-tab.active{color:var(--cyan);border-bottom-color:var(--cyan);}

.side-content{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  max-height:640px;
}

.event{
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:5px;
}
.event-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.event-time{font-size:12px;color:var(--text-faint);}
.confidence{
  font-size:11px;
  padding:2px 8px;
  border-radius:10px;
  font-weight:500;
}
.confidence.confirmed{background:var(--red-dim);color:#F09595;}
.confidence.likely{background:var(--amber-dim);color:var(--amber);}
.confidence.multiple{background:rgba(214, 166, 36, 0.15);color:#D6A624;}
.confidence.unverified{background:#1B2530;color:var(--text-dim);}
.event-title{font-size:13.5px;line-height:1.4;}
.event-meta{font-size:10px;color:var(--text-dim);display:flex;flex-direction:column;gap:2px;}

.source-item{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  font-size:13px;
}
.source-name{font-weight:500;margin-bottom:3px;}
.source-desc{color:var(--text-dim);font-size:12px;line-height:1.5;}
.source-tag{
  display:inline-block;
  font-size:10.5px;
  padding:2px 7px;
  border-radius:4px;
  margin-top:6px;
  color:var(--text-dim);
  border:1px solid var(--line-strong);
}

/* ---------- notification demo overlay ---------- */
.notif-demo{
  position:fixed;
  top:16px;
  right:16px;
  width:320px;
  background:#141B22;
  border:1px solid var(--red);
  border-radius:8px;
  padding:14px 16px;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
  display:none;
  z-index:50;
}
.notif-demo.show{display:block;}
.notif-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--red);}
.notif-title{font-size:13px;font-weight:600;color:#F09595;}
.notif-body{font-size:12.5px;color:var(--text);line-height:1.5;}
.notif-eta{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--amber);margin-top:8px;}
.notif-close{
  position:absolute;top:10px;right:10px;
  background:none;border:none;color:var(--text-faint);
  cursor:pointer;font-size:14px;
}

.footnote{
  padding:6px 20px;
  font-size:9px;
  color:var(--text-faint);
  border-top:1px solid var(--line);
  grid-column:1 / -1;
  text-transform:uppercase;
  letter-spacing:1px;
}

@media (max-width: 600px) {
  .statusbar { flex-direction: column; align-items: flex-start; gap: 12px; height: auto; }
  .statusbar > div:last-child { width: 100%; justify-content: flex-start; }
  .status-pill { flex: 1; justify-content: center; text-align: center; }
  .demo-btn { flex: 1; text-align: center; }
  .simple-text { font-size: clamp(24px, 7vw, 44px) !important; word-wrap: break-word; }
  .map-area { min-height: 50vh !important; }
}


@keyframes fab-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fab-pulse {
  0% { box-shadow: 0 0 0 0 rgba(229, 84, 84, 0.4), 0 8px 24px rgba(0,0,0,0.7); }
  70% { box-shadow: 0 0 0 10px rgba(229, 84, 84, 0), 0 8px 24px rgba(0,0,0,0.7); }
  100% { box-shadow: 0 0 0 0 rgba(229, 84, 84, 0), 0 8px 24px rgba(0,0,0,0.7); }
}


.layer-btn-report {
  transition: all 0.2s ease;
  border: 2px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(var(--red), var(--red)), linear-gradient(45deg, #ff4e50, #f9d423, #ff4e50, #e8a33d);
  background-size: 100% 100%, 300% 300%;
  animation: fab-gradient 4s ease infinite, fab-pulse 2s infinite;
}
.layer-btn-report:hover {
  transform: translateY(-2px);
  background-image: linear-gradient(#E55454, #E55454), linear-gradient(45deg, #ff4e50, #f9d423, #ff4e50, #e8a33d);
}
.layer-btn-report:active {
  transform: translateY(1px);
}


/* Ukrycie systemowych pask�w przewijania w ca�ej aplikacji (globalnie) */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar {
  display: none;
}



/* --- LEAFLET POPUP DARK THEME OVERRIDES --- */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-radius: 0 !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.9) !important;
}
.leaflet-popup-tip {
  border-top: none !important;
  border-left: none !important;
}
.leaflet-popup-content {
  font-family: 'IBM Plex Mono', monospace !important;
  margin: 14px !important;
  line-height: 1.4 !important;
}
.leaflet-popup-close-button {
  color: var(--text-faint) !important;
  font-family: 'IBM Plex Mono', monospace !important;
}
.leaflet-popup-close-button:hover {
  color: var(--text) !important;
  background: transparent !important;
}

/* Scrollable content inside popup */
.popup-scrollable {
  max-height: 250px;
  overflow-y: auto;
  padding-right: 6px;
}

/* --- My Location Marker --- */
.my-location-icon {
  position: relative;
}
.loc-dot {
  width: 14px;
  height: 14px;
  background: var(--cyan);
  border: 2px solid var(--panel);
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
}
.loc-pulse {
  width: 24px;
  height: 24px;
  background: rgba(63, 169, 201, 0.4);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  animation: loc-pulse-anim 2s infinite ease-out;
}
@keyframes loc-pulse-anim {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(3); opacity: 0; }
}