/* Globalne nastavitve */
body {
    font-family: 'Nunito Sans', sans-serif !important;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: 100vh;
    width: 100%;
    background-color: #4d4d4d;    /* temno siva */
    color: #fff;                  /* svetel tekst, da se dobro vidi */
}

/* Začetni (pre-JS) odmiki, da top-controls-row ne "skoči" ob osvežitvi.
   JS jih kasneje dinamično osveži, vendar so te vrednosti dovolj blizu
   dejanski višini headerja po breakpointih. */
:root {
  --nav-top-offset: 51px;   /* mobilni */
}

@media (min-width: 640px) and (max-width: 899px) {
  :root {
    --nav-top-offset: 58px; /* srednji zasloni */
  }
}

@media (min-width: 900px) {
  :root {
    --nav-top-offset: 60px; /* večji zasloni */
  }
}

.app-body {
  margin: 0;
  position: relative;
  height: 100vh;
}

.app-header-wrap {
  width: 100%;
  background-color: #333333;
  box-sizing: border-box;
  margin: 0;
  display: flex;
  justify-content: center;
  padding: 0 max(20px, calc((100% - 1170px) / 2)); /* Enaka vsebinska širina 1170px kot nav */
  position: relative;
  z-index: 1001; /* Above the controls */
}

.app-header-content {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5em;
  text-align: left;
  padding: 8px 0 8px 0; /* Brez horizontalnega paddinga – logo in naslov poravnana z robovi 1170px pasu */
}

.app-header-logo {
  height: clamp(35px, 8vw, 60px);
  width: auto;
  flex: 0 0 auto;
  margin-left: -15px; /* poravnava z levo puščico izbirnika datuma v navigaciji */
}

.app-header-title {
  margin: 0;
  color: #fff;
  font-size: clamp(0.65em, 3.2vw, 1.4em);  /* Malenkost manj agresivno skaliranje */
  font-weight: 300;
  white-space: nowrap;
  flex: 0 1 auto;
  margin-left: auto;          /* Potisne naslov na desni rob */
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Manjši header za srednje (tablet) zaslone – prepreči, da postane prevelik */
@media (min-width: 640px) and (max-width: 899px) {
  .app-header-logo {
    height: 42px;
  }

  .app-header-title {
    font-size: 1.1em;
  }
}

/* Kompaktnejši, a še vedno jasen header za velike zaslone */
@media (min-width: 900px) {
  .app-header-content {
    padding: 6px 0 6px 0;
  }

  .app-header-logo {
    height: 48px;
  }

  .app-header-title {
    font-size: 1.25em;
  }
}

.date-nav {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.top-controls-row {
  width: 100%;
  font-size: 0.9em; /* Malo manjša pisava v zgornji navigaciji */
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px max(20px, calc((100% - 1170px) / 2)); /* Vsebina max 1170px, ista širina kot header */
  row-gap: 10px;
  box-sizing: border-box;
  overflow-x: visible;
  position: absolute;
  top: var(--nav-top-offset, 70px); /* Dinamično glede na višino headerja */
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Full-width background so it stretches to screen edges on wide viewports */
.top-controls-row::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -50vw;
  width: 100vw;
  background-color: rgba(77, 77, 77, 0.70); /* slightly less transparent timeline background */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);               /* slightly softer blur behind timeline */
  z-index: -1;
  transition: background-color 400ms ease-in-out;
}

/* Light mode only: timeline background a bit darker */
body[data-theme="light"] .top-controls-row::before {
  background-color: rgba(71, 71, 71, 0.74);
}

#top-controls-row div,
#top-controls-row label {
  margin: 0;
}
/* Match gap between next ↔ refresh to gap between prev ↔ next (4px) */
#top-controls-row .top-step-group {
  margin-right: -3px;
}
#top-controls-row #refresh-button {
  margin-left: -3px;
}

#top-controls-row button {
  height: 34px;
  white-space: nowrap;
  background-color: #333333; /* Original brighter buttons */
  color: #fff;
  border: 0.5px solid #4d4d4d;
  cursor: pointer;
}

#top-controls-row button:hover {
  background-color: transparent !important;
  color: #fbb104 !important;
}

.top-export-btn {
  flex: 0 0 auto;
  order: 4;
}

.top-date-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  order: 1;
}
/* Align first button with logo (override #top-controls-row div { margin: 0 }) */
#top-controls-row #date-nav.top-date-group {
  margin-left: -8px;
}

.top-reset-defaults-btn {
  flex: 0 0 auto;
  order: 2;
}

/* Skriti datumski input (ostane v DOM za showPicker) */
#top-controls-row #date-nav input[type="date"].date-selector-hidden {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
}

.top-date-group .range-btn {
  min-width: 32px;
  width: auto;
  height: 34px;
  padding: 0 6px;
  font-size: 1.1em;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent !important;
  border: none !important;
}
/* Override #top-controls-row .top-date-group button font-size for hour labels only */
#top-controls-row .top-date-group button.range-btn {
  font-size: 1.1em;
  font-weight: bold;
}
.top-date-group .range-btn-calendar { padding: 0 6px; }
.top-date-group .range-btn .calendar-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: -4px;
}
.top-date-group .range-btn.is-active {
  background-color: rgba(251, 177, 4, 0.25);
  color: #fbb104;
  border-color: #fbb104;
}
/* Selected time option: yellow (override #top-controls-row button color) */
#top-controls-row .top-date-group .range-btn.is-active,
#top-controls-row #date-calendar-btn.is-active {
  color: #fbb104 !important;
}
#top-controls-row #date-calendar-btn.is-active .calendar-icon {
  color: #fbb104 !important;
}
/* Calendar button stays yellow while date picker is open (same as hover) */
#top-controls-row #date-calendar-btn.calendar-open {
  color: #fbb104;
}
#top-controls-row #date-calendar-btn.calendar-open .calendar-icon {
  color: #fbb104;
}

/* Time range (3h–24h) + calendar: same press animation as last-frame/play/arrows */
#top-controls-row .top-date-group .range-btn .range-btn-label,
#top-controls-row .top-date-group .range-btn .calendar-icon {
  display: inline-block;
  line-height: 1;
  transform: scale(1);
  transition: transform 120ms ease-out;
}
#top-controls-row .top-date-group .range-btn.press-active .range-btn-label,
#top-controls-row .top-date-group .range-btn.press-active .calendar-icon {
  transform: scale(1.2);
}

.top-date-group input[type="date"]:not(.date-selector-hidden) {
  width: 132px;
  height: 34px;
  line-height: 34px;
  padding: 0 8px;
}

/* Base icon size for date and step arrows */
#top-controls-row .top-date-group button {
  font-size: 1.35rem;
  line-height: 1;
}
/* Step arrows: same size as date arrows; symbol nudge via padding below */
#top-controls-row #arrow-backward,
#top-controls-row #arrow-forward {
  font-size: 1.35rem;
  line-height: 1;
}
/* Play icon smaller; pause icon larger (when .is-playing); symbol nudge via padding below */
#top-controls-row #play-button {
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#top-controls-row #play-button.is-playing {
  font-size: 1.8rem;
  color: #fbb104 !important;
}
/* Last-frame icon: slightly larger than step arrows, same vertical alignment */
#top-controls-row #refresh-button {
  font-size: 1.8rem;
  line-height: 1;
}
#top-controls-row #refresh-button .top-refresh-icon {
  font-size: 1em;
}

/* Date prev/next buttons only: no dark background; compact so row aligns with timeline */
.top-date-group button {
  background-color: transparent !important;
  border-color: transparent !important;
  min-width: 18px;
  width: 18px;
  padding: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Previous day button: pull arrow to align with timeline left edge */
#top-controls-row #date-backward {
  margin-left: -4px; /* negative margin to align arrow with timeline edge */
}
.top-date-group button:hover {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Play, refresh, prev/next image: no background; compact so row aligns with timeline */
#top-controls-row #play-button,
#top-controls-row #refresh-button,
#top-controls-row #arrow-backward,
#top-controls-row #arrow-forward,
#top-controls-row #reset-defaults-button,
#top-controls-row #export-gif-button {
  background-color: transparent !important;
  border-color: transparent !important;
}
#top-controls-row #play-button,
#top-controls-row #refresh-button,
#top-controls-row #arrow-backward,
#top-controls-row #arrow-forward,
#top-controls-row #reset-defaults-button {
  width: 20px;
  min-width: 20px;
  padding: 2px 0 0 0; /* no horizontal padding so edges align with timeline */
  box-sizing: border-box;
}
/* Previous frame button: extra space before next frame */
#top-controls-row #arrow-backward {
  margin-right: 6px;
}
#top-controls-row #reset-defaults-button {
  font-size: 1.55rem;
  line-height: 1;
  width: 18px;
  min-width: 18px;
  margin-right: 14px;
  margin-left: 14px;
  padding-top: 5px !important; /* nudge icon down */
}
#top-controls-row #reset-defaults-button:hover .mob-reset-defaults-icon {
  color: #ff6b6b !important; /* arrow red on hover, text stays controlled elsewhere */
}
/* Desktop: hide text label (icon only); mobile shows it below */
.mob-reset-defaults-label {
  display: none;
}
/* Last frame button: pull icon to align with timeline right edge */
#top-controls-row #refresh-button {
  margin-right: -4px; /* negative margin to align with timeline edge */
  margin-left: 8px; /* extra space after next frame button */
}
#top-controls-row #export-gif-button {
  width: auto;
  min-width: 36px;
  padding: 0 12px 0 8px;
  margin-right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
#top-controls-row #export-gif-button .top-export-icon {
  display: inline-flex;
  align-items: center;
  font-size: 1.5rem;
  transform: translateY(0);
}
#top-controls-row #export-gif-button .top-export-icon svg.icon-download {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
}
#top-controls-row #export-gif-button .top-export-label {
  transform: translateY(0);
}
#top-controls-row #play-button:hover,
#top-controls-row #refresh-button:hover,
#top-controls-row #arrow-backward:hover,
#top-controls-row #arrow-forward:hover,
#top-controls-row #reset-defaults-button:hover,
#top-controls-row #export-gif-button:hover {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Wide desktop: wrapper is "invisible" (contents) so timeline can wrap first on its own; play controls stay on row 1 */
.top-playback-and-time {
  display: contents;
}

.top-playback-buttons {
  display: contents;
}

.top-time-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 350px;
  min-width: 180px;
  order: 10; /* wraps first to row 2 */
  margin-left: 20px; /* extra space from last frame button when on same row */
}

/* Play controls stay on row 1 when timeline wraps (orders 6–8) */
#top-controls-row #play-button {
  order: 6;
}
#top-controls-row .top-step-group {
  order: 7;
}
#top-controls-row #refresh-button {
  order: 8;
}

.top-time-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.top-time-track-label,
.top-time-value {
  font-size: 0.84em;
  line-height: 1;
  white-space: nowrap;
}

.top-time-slider {
  width: 100% !important;
  margin: 0 !important;
}

.ts-wrap {
  position: relative;
  width: 100%;
  height: 16px;
}

/* Desktop: slightly more space between timeline title and slider */
@media (min-width: 641px) {
  #top-controls-row .top-time-group .ts-wrap {
    margin-top: 2px;
  }
}

.ts-base,
.ts-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 2px;
  pointer-events: none;
}

.ts-base {
  width: 100%;
  background: rgba(255, 255, 255, 0.2);
}

.ts-fill {
  width: 0%;
  background: rgba(251, 177, 4, 0.6);
  will-change: width;
}

.top-refresh-btn {
  font-size: 1.05em;
  line-height: 1;
}

.top-step-group {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.top-step-btn {
  /* size from #top-controls-row #arrow-backward/forward block */
}

.top-play-btn {
  min-width: 34px;
  margin-right: 2px; /* space before previous frame */
}

.top-fps-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 34px;
  order: 5;
}

.top-fps-label {
  font-size: 0.9em;
  white-space: nowrap;
  cursor: default;
}

/* FPS slider wrapper - same structure as opacity */
.fps-slider-wrap {
  position: relative;
  width: 100%;
  height: 16px;
  min-width: 0;
}

.fps-slider-wrap #fps-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0 !important;
}

.fps-value-wrap {
  position: relative;
  flex-shrink: 0;
  min-width: 2.5em;
  text-align: right;
}

.fps-value-display {
  font-size: 0.84em;
  width: 2.5em;
  min-width: 2.5em;
  display: inline-block;
  cursor: default;
  line-height: 1;
  text-align: right;
}

/* Desktop only: click FPS number to type value – same size as hover box, only color changes when editing */
@media (min-width: 641px) {
  /* Fixed width and padding so span and input match exactly */
  .fps-value-display {
    cursor: text;
    padding: 2px 4px;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 0.84em;
    line-height: 1;
    width: 2.5em;
    min-width: 2.5em;
    display: inline-block;
    border: 1px solid transparent;
    /* Default: gray background (was hover color before) */
    background: rgba(255, 255, 255, 0.08);
  }
  /* Hover: brighter gray */
  .fps-value-display:hover {
    background: rgba(255, 255, 255, 0.15);
  }
  .fps-value-wrap .fps-input-edit {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.5em;
    min-width: 2.5em;
    height: 100%;
    padding: 2px 4px;
    font-size: 0.84em;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 3px;
    background: #333;
    color: #fff;
    text-align: right;
    box-sizing: border-box;
    display: none;
    margin: 0;
    outline: none;
  }
  .fps-value-wrap.fps-editing .fps-value-display {
    visibility: hidden;
  }
  .fps-value-wrap.fps-editing .fps-input-edit {
    display: block;
  }
  /* When editing: exact same box size, only background/color change */
  #top-controls-row .fps-value-wrap #fps-input {
    border: 1px solid transparent;
    border-radius: 3px;
    background: #333;
    color: #fff;
    outline: none;
    text-align: right;
  }
  #top-controls-row .fps-value-wrap #fps-input:focus,
  #top-controls-row .fps-value-wrap.fps-editing #fps-input {
    border-color: rgba(251, 177, 4, 0.5);
    background: rgba(251, 177, 4, 0.12);
    box-shadow: none;
    /* Lock dimensions to match .fps-value-display exactly - fixed width */
    width: 2.5em;
    min-width: 2.5em;
    height: 100%;
    padding: 2px 4px;
    font-size: 0.84em;
    line-height: 1;
    margin: 0;
    box-sizing: border-box;
    text-align: right;
  }
  .fps-value-wrap .fps-input-edit::-webkit-inner-spin-button,
  .fps-value-wrap .fps-input-edit::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
  .fps-value-wrap .fps-input-edit[type="number"] {
    -moz-appearance: textfield;
  }
  /* Opacity value: only number is in the colored box, % sits outside - wider than FPS for 3-digit numbers */
  .opacity-value-wrap .top-opacity-value {
    cursor: text;
    padding: 2px 4px;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 0.84em;
    line-height: 1;
    width: 3em;
    min-width: 3em;
    display: inline-block;
    border: 1px solid transparent;
    /* Default: gray background */
    background: rgba(255, 255, 255, 0.08);
    text-align: right;
  }
  /* Hover: brighter gray */
  .opacity-value-wrap .top-opacity-value:hover {
    background: rgba(255, 255, 255, 0.15);
  }
  .opacity-value-wrap .opacity-input-edit {
    position: absolute;
    top: 0;
    left: 0;
    width: 3em;
    min-width: 3em;
    height: 100%;
    padding: 2px 4px;
    font-size: 0.84em;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 3px;
    background: #333;
    color: #fff;
    text-align: right;
    box-sizing: border-box;
    display: none;
    margin: 0;
    outline: none;
  }
  .opacity-value-wrap.opacity-editing .top-opacity-value {
    visibility: hidden;
  }
  .opacity-value-wrap.opacity-editing .opacity-input-edit {
    display: block;
  }
  /* When editing: yellow tint, same size - only covers the number */
  #top-controls-row .opacity-value-wrap #opacity-input {
    border: 1px solid transparent;
    border-radius: 3px;
    background: #333;
    color: #fff;
    outline: none;
  }
  #top-controls-row .opacity-value-wrap #opacity-input:focus,
  #top-controls-row .opacity-value-wrap.opacity-editing #opacity-input {
    border-color: rgba(251, 177, 4, 0.5);
    background: rgba(251, 177, 4, 0.12);
    box-shadow: none;
    width: 3em;
    min-width: 3em;
    height: 100%;
    padding: 2px 4px;
    font-size: 0.84em;
    line-height: 1;
    margin: 0;
    box-sizing: border-box;
  }
  .opacity-value-wrap .opacity-input-edit::-webkit-inner-spin-button,
  .opacity-value-wrap .opacity-input-edit::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
  .opacity-value-wrap .opacity-input-edit[type="number"] {
    -moz-appearance: textfield;
  }
  /* Opacity value wrap: number + % side by side, only number is editable */
  #top-controls-row .top-opacity-header .opacity-value-wrap {
    display: inline-flex;
    align-items: baseline;
    margin: 0;
    padding: 0;
    line-height: 1;
    position: relative;
    vertical-align: baseline;
    min-width: 3.4em;
  }
  #top-controls-row .top-opacity-header .opacity-unit {
    font-size: 0.84em;
    line-height: 1;
    margin-left: 2px;
  }
}

/* Desktop: FPS layout = label + value above slider (align with prosojnost and časovni trak) */
@media (min-width: 641px) {
  #top-controls-row .top-fps-group {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    height: auto;
    flex: 0 0 auto;
    min-width: 120px;
    max-width: 160px;
    margin: 0;
    padding: 0;
    align-self: flex-start;
  }
  #top-controls-row .top-fps-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    min-height: 0;
    line-height: 1;
  }
  #top-controls-row .top-fps-header .top-fps-label,
  #top-controls-row .top-fps-header .fps-value-display {
    font-size: 0.84em;
    line-height: 1;
    margin: 0;
    vertical-align: baseline;
  }
  /* Ensure fps-value-wrap has fixed dimensions and no extra spacing */
  #top-controls-row .top-fps-header .fps-value-wrap {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 1;
    min-width: 2.5em;
    position: relative;
    vertical-align: baseline;
  }
  /* Match opacity text-to-slider distance exactly - only use gap */
  #top-controls-row .fps-slider-wrap {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* Desktop: FPS slider - same styling as opacity slider (gray thumb, 16px, same positioning) */
@media (min-width: 641px) {
  #top-controls-row #fps-slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    cursor: pointer;
    background: transparent;
    box-sizing: border-box;
  }
  #top-controls-row #fps-slider::-webkit-slider-runnable-track {
    height: 4px;
    background: linear-gradient(to right,
      rgba(221, 221, 221, 0.6) 0%,
      rgba(221, 221, 221, 0.6) var(--value, 16.95%),
      rgba(255, 255, 255, 0.2) var(--value, 16.95%),
      rgba(255, 255, 255, 0.2) 100%);
    border-radius: 2px;
  }
  /* Same gray thumb as opacity */
  #top-controls-row #fps-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border-radius: 50%;
    background: #a0a0a0;
    border: none;
    cursor: pointer;
  }
  #top-controls-row #fps-slider:hover::-webkit-slider-thumb,
  #top-controls-row #fps-slider:active::-webkit-slider-thumb {
    background: #dddddd;
  }
  #top-controls-row #fps-slider::-moz-range-track {
    height: 4px;
    background: linear-gradient(to right,
      rgba(221, 221, 221, 0.6) 0%,
      rgba(221, 221, 221, 0.6) var(--value, 16.95%),
      rgba(255, 255, 255, 0.2) var(--value, 16.95%),
      rgba(255, 255, 255, 0.2) 100%);
    border-radius: 2px;
  }
  #top-controls-row #fps-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #a0a0a0;
    border: none;
    cursor: pointer;
  }
  #top-controls-row #fps-slider:hover::-moz-range-thumb,
  #top-controls-row #fps-slider:active::-moz-range-thumb {
    background: #dddddd;
  }
  #top-controls-row #fps-slider:focus {
    outline: none;
  }
}

.top-opacity-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 120px; /* Narrower opacity slider */
  order: 3;
  margin: 0 16px !important; /* dodaten odmik levo in desno */
}

/* Wide screens: align top of opacity & FPS with timeline (same row) */
@media (min-width: 641px) {
  #top-controls-row .top-opacity-group {
    margin: -3px 16px 0 16px !important;
    padding-top: 0;
  }
  #top-controls-row .top-fps-group {
    margin-top: -3px !important;
    margin-right: 20px;
    padding-top: 0;
  }
}

.top-opacity-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.top-opacity-title,
.top-opacity-value {
  font-size: 0.84em;
  line-height: 1;
}

/* Same logic as .ts-wrap: 16px hit area, track stays 4px visually */
.opacity-slider-wrap {
  position: relative;
  width: 100%;
  height: 16px;
  margin-top: 6px; /* match časovni trak text-to-slider distance */
}

.top-opacity-slider {
  width: 100% !important;
  margin: 0 !important;
}


/* Višja specifičnost: preglasi stare globalne in id stile */
#top-controls-row #date-nav input[type="date"] {
  width: 132px;
  height: 34px;
  box-sizing: border-box;
  line-height: 34px;
  padding: 0 0 0 8px;
  font-size: 0.9em;
  background-color: #333333;
  color: #fff;
  border: 0.5px solid #4d4d4d !important;
  border-radius: 3px;
  box-shadow: none;
  color-scheme: dark;
  accent-color: #fbb104;
}
#top-controls-row #date-nav input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  margin-left: -16px;
  margin-right: 0;
  width: 14px;
  height: 14px;
  padding: 0;
  opacity: 1;
  transform: translateX(-12px);
  /* Replace native icon with white calendar via mask */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: #fff;
  background-image: none;
}
/* Icon yellow only when icon is hovered (class set by JS) */
#top-controls-row #date-nav input[type="date"].date-icon-hovered::-webkit-calendar-picker-indicator {
  background-color: #fbb104;
}
/* Text yellow when date text is hovered (class set by JS) */
#top-controls-row #date-nav input[type="date"].date-text-hovered {
  color: #fbb104;
}
/* When focused (editing): text yellow only; icon yellow only when calendar opened (class set by JS) */
#top-controls-row #date-nav input[type="date"]:focus {
  outline: none;
  border: 0.5px solid #fbb104 !important;
  box-shadow: inset 0 0 0 1px #fbb104;
  color: #fbb104;
}
#top-controls-row #date-nav input[type="date"].date-picker-open::-webkit-calendar-picker-indicator {
  background-color: #fbb104;
}

#top-controls-row #time-slider {
  width: 100% !important;
  margin: 0 !important;
}

#top-controls-row #refresh-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1px;
  margin-right: 6px !important;
}

#top-controls-row #refresh-button .top-refresh-icon {
  display: inline-block;
  line-height: 1;
  transform: scale(1);
  transition: transform 120ms ease-out;
  font-size: 1em; /* inherit button icon size */
}

#top-controls-row #refresh-button:active {
  transform: none; /* avoid global #refresh-button:active scaling the button */
}
#top-controls-row #refresh-button.press-active .top-refresh-icon {
  transform: scale(1.2);
}

/* Timeline panel buttons: zoom-in on press – icon only (same as last-frame); GIF has no zoom */
#top-controls-row #play-button .top-play-icon,
#top-controls-row #arrow-backward .top-step-icon,
#top-controls-row #arrow-forward .top-step-icon {
  display: inline-block;
  line-height: 1;
  transform: scale(1);
  transition: transform 120ms ease-out;
}
#top-controls-row #play-button.press-active .top-play-icon,
#top-controls-row #arrow-backward.press-active .top-step-icon,
#top-controls-row #arrow-forward.press-active .top-step-icon {
  transform: scale(1.35);
}

#top-controls-row #reset-defaults-button {
  transform: scale(1);
  transition: transform 120ms ease-out;
}
#top-controls-row #reset-defaults-button.press-active {
  transform: scale(1.15);
}

/* arrow-backward/forward size set in icon-button block above */

/* FPS: wrapper groups input + custom arrow buttons */
#top-controls-row .fps-control-wrap {
  display: flex;
  align-items: center;
  height: 34px;
  box-sizing: border-box;
  border: 0.5px solid #4d4d4d;
  border-radius: 3px;
  background-color: #333333;
}
#top-controls-row .fps-control-wrap:focus-within {
  border-color: #fbb104;
  box-shadow: inset 0 0 0 1px #fbb104;
}

#top-controls-row #fps-input {
  width: 2.6em;
  min-width: 2.6em;
  height: 28px;
  box-sizing: border-box;
  padding: 0 4px 0 6px;
  font-size: 0.9em;
  line-height: 1;
  border: none;
  border-radius: 3px 0 0 3px;
  background-color: transparent;
  color: #fff;
  text-align: center;
  color-scheme: dark;
  align-self: center;
}
#top-controls-row #fps-input:focus {
  outline: none;
}

/* Hide native number input spinner completely */
#top-controls-row #fps-input::-webkit-inner-spin-button,
#top-controls-row #fps-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
#top-controls-row #fps-input[type="number"] {
  -moz-appearance: textfield;
}

/* Custom FPS arrows: no background; gray by default; only the hovered arrow turns yellow */
#top-controls-row .fps-spinner-arrows {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 20px;
  max-height: 20px;
  overflow: hidden;
  margin-right: 3px;
}
#top-controls-row .fps-spinner-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10px;
  min-height: 10px;
  max-height: 10px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.32);
  font-size: 0.5rem;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
#top-controls-row .fps-spinner-btn:hover {
  color: #fbb104;
  background: transparent !important;
}
#top-controls-row .fps-spinner-up {
  border-radius: 0 3px 0 0;
}
#top-controls-row .fps-spinner-down {
  border-radius: 0 0 3px 0;
}

#top-controls-row #opacity-slider {
  width: 100% !important;
  margin: 0 !important;
}

/* ==========================================================================
   Cross-browser range slider styling (Chrome, Safari, Firefox)
   Hover and active states use identical bright colors
   ========================================================================== */

/* Reset and base styling */
#top-controls-row #time-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  outline: none;
  margin: 0;
}

#top-controls-row #opacity-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  cursor: pointer;
  outline: none;
  background: transparent;
}

/* Top timeline: transparent track (visuals from .ts-base / .ts-fill) */
#top-controls-row #time-slider::-webkit-slider-runnable-track {
  background: transparent;
  height: 4px;
}

/* Opacity slider fill (Chrome/Safari) */
#top-controls-row #opacity-slider::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
    rgba(221, 221, 221, 0.6) 0%,
    rgba(221, 221, 221, 0.6) var(--value, 75%),
    rgba(255, 255, 255, 0.2) var(--value, 75%),
    rgba(255, 255, 255, 0.2) 100%);
  border-radius: 2px;
  height: 4px;
}

/* Top timeline: transparent track (Firefox) */
#top-controls-row #time-slider::-moz-range-track {
  background: transparent;
  height: 4px;
}

/* Opacity slider fill (Firefox) */
#top-controls-row #opacity-slider::-moz-range-track {
  background: linear-gradient(to right,
    rgba(221, 221, 221, 0.6) 0%,
    rgba(221, 221, 221, 0.6) var(--value, 75%),
    rgba(255, 255, 255, 0.2) var(--value, 75%),
    rgba(255, 255, 255, 0.2) 100%);
  border-radius: 2px;
  height: 4px;
}

/* Timeline slider: YELLOW thumb */
#top-controls-row #time-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: #c9940a;
  border: none;
  cursor: pointer;
}
#top-controls-row #time-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #c9940a;
  border: none;
  cursor: pointer;
}
#top-controls-row #time-slider:hover::-webkit-slider-thumb,
#top-controls-row #time-slider:active::-webkit-slider-thumb {
  background: #fbb104;
}
#top-controls-row #time-slider:hover::-moz-range-thumb,
#top-controls-row #time-slider:active::-moz-range-thumb {
  background: #fbb104;
}

/* Opacity slider: GRAY thumb */
#top-controls-row #opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: #a0a0a0;
  border: none;
  cursor: pointer;
}
#top-controls-row #opacity-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #a0a0a0;
  border: none;
  cursor: pointer;
}
#top-controls-row #opacity-slider:hover::-webkit-slider-thumb,
#top-controls-row #opacity-slider:active::-webkit-slider-thumb {
  background: #dddddd;
}
#top-controls-row #opacity-slider:hover::-moz-range-thumb,
#top-controls-row #opacity-slider:active::-moz-range-thumb {
  background: #dddddd;
}

/* Focus outline for accessibility */
#top-controls-row #time-slider:focus,
#top-controls-row #opacity-slider:focus {
  outline: none;
}

/* Light mode only: opacity and FPS sliders – track a bit subtler, thumbs a bit brighter */
body[data-theme="light"] #top-controls-row #opacity-slider::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
    rgba(228, 228, 228, 0.72) 0%,
    rgba(228, 228, 228, 0.72) var(--value, 75%),
    rgba(255, 255, 255, 0.35) var(--value, 75%),
    rgba(255, 255, 255, 0.35) 100%) !important;
}
body[data-theme="light"] #top-controls-row #opacity-slider::-moz-range-track {
  background: linear-gradient(to right,
    rgba(228, 228, 228, 0.72) 0%,
    rgba(228, 228, 228, 0.72) var(--value, 75%),
    rgba(255, 255, 255, 0.35) var(--value, 75%),
    rgba(255, 255, 255, 0.35) 100%) !important;
}
body[data-theme="light"] #top-controls-row #opacity-slider::-webkit-slider-thumb {
  background: #c6c6c6 !important;
}
body[data-theme="light"] #top-controls-row #opacity-slider::-moz-range-thumb {
  background: #c6c6c6 !important;
}
body[data-theme="light"] #top-controls-row #opacity-slider:hover::-webkit-slider-thumb,
body[data-theme="light"] #top-controls-row #opacity-slider:active::-webkit-slider-thumb {
  background: #e8e8e8 !important;
}
body[data-theme="light"] #top-controls-row #opacity-slider:hover::-moz-range-thumb,
body[data-theme="light"] #top-controls-row #opacity-slider:active::-moz-range-thumb {
  background: #e8e8e8 !important;
}
body[data-theme="light"] #top-controls-row #fps-slider::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
    rgba(228, 228, 228, 0.72) 0%,
    rgba(228, 228, 228, 0.72) var(--value, 16.95%),
    rgba(255, 255, 255, 0.35) var(--value, 16.95%),
    rgba(255, 255, 255, 0.35) 100%) !important;
}
body[data-theme="light"] #top-controls-row #fps-slider::-moz-range-track {
  background: linear-gradient(to right,
    rgba(228, 228, 228, 0.72) 0%,
    rgba(228, 228, 228, 0.72) var(--value, 16.95%),
    rgba(255, 255, 255, 0.35) var(--value, 16.95%),
    rgba(255, 255, 255, 0.35) 100%) !important;
}
body[data-theme="light"] #top-controls-row #fps-slider::-webkit-slider-thumb {
  background: #c6c6c6 !important;
}
body[data-theme="light"] #top-controls-row #fps-slider::-moz-range-thumb {
  background: #c6c6c6 !important;
}
body[data-theme="light"] #top-controls-row #fps-slider:hover::-webkit-slider-thumb,
body[data-theme="light"] #top-controls-row #fps-slider:active::-webkit-slider-thumb {
  background: #e8e8e8 !important;
}
body[data-theme="light"] #top-controls-row #fps-slider:hover::-moz-range-thumb,
body[data-theme="light"] #top-controls-row #fps-slider:active::-moz-range-thumb {
  background: #e8e8e8 !important;
}

/* Light mode only: timeline slider thumb – mid yellow when not hovered, bright #fbb104 on hover */
body[data-theme="light"] #top-controls-row #time-slider::-webkit-slider-thumb {
  background: #d9a80f !important;
}
body[data-theme="light"] #top-controls-row #time-slider::-moz-range-thumb {
  background: #d9a80f !important;
}
body[data-theme="light"] #top-controls-row #time-slider:hover::-webkit-slider-thumb,
body[data-theme="light"] #top-controls-row #time-slider:active::-webkit-slider-thumb {
  background: #fbb104 !important;
}
body[data-theme="light"] #top-controls-row #time-slider:hover::-moz-range-thumb,
body[data-theme="light"] #top-controls-row #time-slider:active::-moz-range-thumb {
  background: #fbb104 !important;
}

/* Wide desktop only: all controls on one row – extra gap between last frame and timeline */
@media (min-width: 1201px) {
  #top-controls-row #refresh-button {
    margin-right: 22px !important;
  }
}

/* Narrow desktop: only timeline wraps to row 2 (full width); play controls stay on row 1. */
@media (max-width: 1200px) {
  .top-controls-row {
    row-gap: 8px;
  }
  .top-time-group {
    flex: 1 1 100%;
    min-width: 180px;
    order: 10;
  }
  .top-opacity-group {
    flex: 1 1 auto;
    min-width: 120px;
  }
  #top-controls-row .top-fps-group {
    flex: 1 1 auto !important;
    min-width: 120px;
    max-width: none !important;
  }
}

/* Even narrower: playback controls + timeline wrap together; row 2 = [timeline][play controls]. */
@media (max-width: 900px) {
  .top-controls-row {
    gap: 8px;
    align-items: flex-start;
  }
  .top-date-group {
    order: 1;
  }
  .top-reset-defaults-btn {
    order: 2;
  }
  .top-opacity-group {
    order: 3;
    flex: 1 1 auto;
    min-width: 120px;
  }
  .top-export-btn {
    order: 4;
  }
  #top-controls-row .top-fps-group {
    order: 5;
    flex: 1 1 auto !important;
    min-width: 120px;
    max-width: none !important;
    margin-right: 0 !important;
  }
  .top-playback-and-time {
    display: flex !important;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 28px;
    flex: 1 1 100%;
    min-width: 180px;
    order: 10;
  }
  .top-playback-buttons {
    display: flex !important;
    align-items: center;
    flex: 0 0 auto;
    gap: 10px;
  }
  #top-controls-row .top-playback-buttons #play-button {
    margin-right: 4px;
    margin-left: 0;
  }
  #top-controls-row .top-playback-buttons .top-step-group {
    gap: 10px;
    margin-right: 0;
  }
  #top-controls-row .top-playback-buttons #arrow-backward {
    margin-right: 6px;
  }
  #top-controls-row .top-playback-buttons #refresh-button {
    margin-left: 8px;
    margin-right: -4px;
  }
  .top-playback-and-time .top-time-group {
    flex: 1 1 100%;
    min-width: 180px;
  }
}

/* Just above mobile: let FPS shrink so it stays on top row instead of wrapping alone */
@media (min-width: 641px) and (max-width: 720px) {
  #top-controls-row .top-fps-group {
    min-width: 90px !important;
  }
}

@media (max-width: 640px) {
  .top-controls-row {
    gap: 6px;
    row-gap: 8px;
  }
  .top-date-group {
    order: 1;
  }
  .top-reset-defaults-btn {
    order: 2;
  }
  .top-opacity-group {
    order: 3;
  }
  .top-export-btn {
    order: 4;
  }
  .top-fps-group {
    order: 5;
  }
  .top-playback-and-time {
    order: 10;
    flex: 1 1 100%;
    min-width: 180px;
  }
  .top-playback-and-time .top-time-group {
    flex: 1 1 100%;
    min-width: 180px;
  }
  /* Manjši razmik v headerju na mobilnih zaslonih,
     z levim/desnim robom poravnanimi s časovno vrstico (#top-controls-row). */
  .app-header-wrap {
    padding: 0 12px; /* enak notranji rob kot mobilna časovna vrstica */
  }
  .app-header-content {
    gap: 0.3em;
    padding: 6px 0 6px 0;  /* brez dodatnega horizontalnega paddinga – rob določa .app-header-wrap */
  }
  .app-header-logo {
    margin-left: -8px; /* rahlo povleci logotip levo, da se poravna z vsebino časovne vrstice */
  }
  /* Še manjša pisava na mobilnih zaslonih */
  .app-header-title {
    font-size: clamp(0.55em, 3.5vw, 1.5em);
    margin-right: 4px; /* malo bolj v levo znotraj vsebinskega pasu */
  }
}

.time-wrapper-main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.5em;
  margin: 1px 0 0;
  position: relative;
  z-index: 2;
}

#current-time {
  margin: 0;
  padding: 0;
  width: auto;
  text-align: center;
}

/* Na RES zelo ozkih zaslonih naj se ura začne manjšati,
   da ne potiska gumbov iz vrstic časovnega traku.
   Uporabimo nižji prag širine in omogočimo stalno prilagajanje. */
@media (max-width: 360px) {
  #current-time {
    /* Do ~0.9em normalne velikosti, pod 360px pa se proporcionalno manjša z
       širino zaslona in se ne neha odzivati na še ožje zaslone. */
    font-size: min(0.9em, 3.2vw);
  }
}

.time-slider-main {
  width: 50% !important;
}

.time-arrows-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.2em;
  margin-top: 10px;
  max-width: 100%;
}

.time-arrow-btn {
  flex: 1;
  padding: 10px 0;
  min-width: 150px;
  text-align: center;
}

.animation-legend-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: -0.8em;
  margin-bottom: 0;
}

.animation-legend-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 80%;
}

.animation-controls {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.nowrap-label {
  white-space: nowrap;
}

.fps-input-inline-size {
  width: 4em;
  height: 1.5em;
}

.opacity-label {
  margin-left: 0.2em;
}

.opacity-slider-inline-size {
  width: 100px !important;
  margin-bottom: 9px;
}

.map-time-wrapper {
  display: flex;
  align-items: center;
  gap: 1em;
}

.map-time-slider {
  width: 330px !important;
}

.is-hidden {
  display: none !important;
}

/* Za gumbe posebej nastavimo pisavo */
#play-button,
#export-gif-button,
#arrow-backward,
#arrow-forward {
  font-family: 'Nunito Sans', sans-serif !important;
}

/* play-button size set in #top-controls-row #play-button block */

/* Globalna pisava za vsa vnosna polja */
input,
select,
textarea {
  font-family: 'Nunito Sans', sans-serif !important;
}

body {
  margin: 0;     /* odstrani privzeti rob okoli vsebine */
  padding: 0;
}

.header {
  display: flex;
  justify-content: center;    /* oboje: horizontalno centriranje */
  align-items: center;        /* vertikalno centriranje */
  width: 100%;
  background-color: #2b2b2b;  /* temno siva podlaga */
  padding: 0.5em 1em;
  box-sizing: border-box;     /* vključi padding v širino */
}

.header h1 {
  margin: 0;
  color: #fff;
}

/* Slog za zemljevid */
#map {
  position: absolute;
  top: var(--nav-top-offset, 70px); /* Dinamično glede na višino headerja */
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100vh - var(--nav-top-offset, 70px));
}

/* Slog za forme (izbirnik datuma in drsnik) */
div {
    margin: 10px;
}

/* Full-bleed: header and nav must touch screen edges (no margin) */
.app-header-wrap,
.app-header-content,
.top-controls-row {
  margin: 0 !important;
}

/* reset margin za karto in vse Leafletove kontejnere */
#map,
#map *,
.leaflet-container,
.leaflet-pane {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Dark background for map to prevent white flashes when loading tiles */
.leaflet-container {
  background-color: #1a1a1a !important;
}

/* Odmik kontrolnikov iz zgornjega levega vogala */
.leaflet-top.leaflet-left {
  top: var(--leaflet-controls-top, 120px) !important; /* Dynamic positioning based on timeline controls */
  left: 20px !important;
}

/* Odmik kontrolnikov iz zgornjega desnega vogala */
.leaflet-top.leaflet-right {
  top: var(--leaflet-controls-top, 120px) !important; /* Dynamic positioning based on timeline controls */
  right: 20px !important;
}

/* Z-index: zgornje kontrolke (npr. Layers) naj bodo nad spodnjimi (legenda) */
.leaflet-top {
  z-index: 2000 !important;
}
.leaflet-bottom {
  z-index: 1000 !important;
}

/* Izbirnik za datum */
input[type="date"] {
    padding: 8px;
    font-size: 16px;
    width: 200px;
}

/* Drsnik za čas */
input[type="range"] {
    width: 300px;
    margin-top: 10px;
}

/* Preprosta sprememba barve napolnjenega dela drsnika */
input[type="range"] {
  accent-color: #fbb104;    /* nastavi barvo drsnika */
}

/* Rumeno ozadje in črno besedilo */
button {
  background-color: #b3b3b3;  /* barva gumbov */
  color: #fff;              /* bela pisava v gumbih */
  border: 0.5px solid #4d4d4d;    /* nežna obroba, po potrebi prilagodi */
  border-radius: 3px;        /* zaokroženi robovi */
  padding: 0.3em 0.6em;      /* notranji odmik */
  font-size: 1em;            /* enaka velikost besedila kot drugje */
  background-color: #333333;
}

/* Če želiš, da ima izbirnik datuma podoben izgled v različnih brskalnikih: */
input[type="date"] {
  /* odstranimo privzeto obarvanje, če ga brskalnik dodaja */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0.4em 0.6em;
}

input[type="date"]:focus {
  outline: none;
  border: 2px solid #fbb104;      /* obroba */
}

/* Gumbom dodamo še hover efekt */
button:hover {
  background-color: #fbb104;    /* barva gumba ob prehodu miške */
  color: #fff;
}

/* Stil za FPS polje */
#fps-input {
  background-color: #fcfcfc;    /* ozadje */
  color: black;               /* besedilo */
  border: 0.5px solid #4d4d4d;    /* obroba, po želji nastavljen odtenek */
  border-radius: 3px;        /* zaobljeni robovi */
  padding: 0.2em 0.4em;       /* notrajši odmik */
  width: 4em;                /* ohrani širino */
  text-align: center;        /* besedilo na sredini */
}

/* Ob fokusiranju (klik na polje) */
#fps-input:focus {
  outline: none;
  border: 2px solid #fbb104;      /* obroba */
}

/* Oblikovanje legende */
/* Legenda kot grid 15×2 na desni */
#legend {
  display: grid;
  grid-template-columns: repeat(15, 20px);
  grid-template-rows: 20px auto;
  margin: 0.7em 0 0;
}

/* Vse barvne celice imajo vel. 20×20 in nimajo obrobe */
#legend > div[style*="grid-row:1"] {
  /* grid-row:1 cilja samo na prve vrstice */
  width: 20px;
  height: 20px;
}

/* Container always just shows the toggle button, panel is separate */
.leaflet-control-layers.leaflet-control-layers-expanded {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
}
.leaflet-touch .leaflet-control-layers.leaflet-control-layers-expanded {
  border: none !important;
}

/* Floating layers panel – same style as info panel */
.leaflet-layers-panel {
  position: fixed;
  width: 180px;
  padding: 6px 8px 8px 16px;  /* reduced further, left unchanged */
  background: rgba(26, 26, 26, 0.88) !important;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  color: white;
  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.15s ease-in-out, background-color 400ms ease-in-out;
  z-index: 1999;
}
.leaflet-layers-panel.open {
  opacity: 1;
}

/* Light mode only: layers panel – same background as info panel (all widths) */
body[data-theme="light"] .leaflet-layers-panel {
  background: rgba(24, 24, 24, 0.86) !important;
}

@media (min-width: 1025px) {
  .leaflet-layers-panel {
    background: rgba(26, 26, 26, 0.55) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  /* Light mode only: layers panel – same background as info panel (desktop) */
  body[data-theme="light"] .leaflet-layers-panel {
    background: rgba(26, 26, 26, 0.68) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* Keep toggle button always visible even when expanded */
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Panel open (clicked): keep same background; outline is in the rule below with hover/active */
.leaflet-container a.leaflet-control-layers-toggle.layers-active {
  background-color: rgba(31, 31, 31, 0.70) !important;
}

/* Gumb X za zaprtje panelu slojev – desno zgoraj */
.leaflet-control-layers-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: #ff6b6b;
  background: transparent;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.leaflet-control-layers-close:hover {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.18);
}

/* Seznam v panelu */
.leaflet-layers-panel .leaflet-control-layers-list {
  display: block !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  margin-top: 28px;  /* space for close button */
}

/* Layers button: dark mode default (dark bg + light icon); light mode overridden below */
.leaflet-container .leaflet-control-layers-toggle {
  width: 32px;
  height: 32px;
  background-color: rgba(31, 31, 31, 0.70) !important;
  background-image: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  border: none !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  outline: none !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  /* Vertical spacing below layers button before theme button */
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cccccc;
}

.leaflet-container .leaflet-control-layers-toggle svg {
  display: block;
  width: 30px;
  height: 30px;
}

.leaflet-container .leaflet-control-layers-toggle svg path {
  fill: currentColor;
}

/* Hover, active (mousedown), and panel open: yellow outline + yellow icon */
.leaflet-container a.leaflet-control-layers-toggle:hover,
.leaflet-container a.leaflet-control-layers-toggle:active,
.leaflet-container a.leaflet-control-layers-toggle.layers-active {
  outline: 2px solid #fbb104 !important;
  color: #fbb104 !important;
}

/* Focus: hide outline only when not hovering, not mousedown, and panel closed */
.leaflet-container a.leaflet-control-layers-toggle:focus:not(:hover):not(:active):not(.layers-active),
.leaflet-container a.leaflet-control-layers-toggle:focus-visible:not(:hover):not(:active):not(.layers-active) {
  outline: none !important;
  box-shadow: none !important;
}

/* When Leaflet adds .leaflet-active, keep outline none unless hover, :active (mousedown), or .layers-active */
.leaflet-container a.leaflet-control-layers-toggle.leaflet-active:not(.layers-active):not(:hover):not(:active) {
  outline: none !important;
  box-shadow: none !important;
}

/* Remove any visible frame around collapsed layers button */
.leaflet-control-layers:not(.leaflet-control-layers-expanded) {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Vertical spacing between controls in top-right corner */
.leaflet-top.leaflet-right > .leaflet-control-layers,
.leaflet-top.leaflet-right > .leaflet-control-theme-wrap {
  border-bottom: 12px solid transparent !important;
  background-clip: padding-box !important;
}

/* Accent color for layer selectors */
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-layers-panel .leaflet-control-layers-list {
  accent-color: #fbb104;
}

/* All radio/checkbox: same fixed size so position never jumps */
.leaflet-control-layers .leaflet-control-layers-list input[type="radio"],
.leaflet-layers-panel .leaflet-control-layers-list input[type="radio"],
.leaflet-control-layers .leaflet-control-layers-list input[type="checkbox"],
.leaflet-layers-panel .leaflet-control-layers-list input[type="checkbox"] {
  box-sizing: border-box;
  width: 13px;
  min-width: 13px;
  height: 13px;
  min-height: 13px;
  margin: 2px 12px 0 0;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Unchecked: light fill */
.leaflet-control-layers .leaflet-control-layers-list input[type="radio"]:not(:checked),
.leaflet-layers-panel .leaflet-control-layers-list input[type="radio"]:not(:checked),
.leaflet-control-layers .leaflet-control-layers-list input[type="checkbox"]:not(:checked),
.leaflet-layers-panel .leaflet-control-layers-list input[type="checkbox"]:not(:checked) {
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.15);
}
.leaflet-control-layers .leaflet-control-layers-list input[type="radio"]:not(:checked),
.leaflet-layers-panel .leaflet-control-layers-list input[type="radio"]:not(:checked) {
  border-radius: 50%;
}
.leaflet-control-layers .leaflet-control-layers-list input[type="checkbox"]:not(:checked),
.leaflet-layers-panel .leaflet-control-layers-list input[type="checkbox"]:not(:checked) {
  border-radius: 2px;
}
/* Unchecked hover: gray fill */
.leaflet-control-layers .leaflet-control-layers-list input[type="radio"]:not(:checked):hover,
.leaflet-layers-panel .leaflet-control-layers-list input[type="radio"]:not(:checked):hover,
.leaflet-control-layers .leaflet-control-layers-list input[type="checkbox"]:not(:checked):hover,
.leaflet-layers-panel .leaflet-control-layers-list input[type="checkbox"]:not(:checked):hover {
  background: #787878;
  border-color: #7a7a7a;
}

/* Checked: same box, yellow fill (no size change) */
.leaflet-control-layers .leaflet-control-layers-list input[type="radio"]:checked,
.leaflet-layers-panel .leaflet-control-layers-list input[type="radio"]:checked {
  border: 1.5px solid #fbb104;
  background: #fbb104;
  border-radius: 50%;
}
.leaflet-control-layers .leaflet-control-layers-list input[type="checkbox"]:checked,
.leaflet-layers-panel .leaflet-control-layers-list input[type="checkbox"]:checked {
  border: 1.5px solid #fbb104;
  background: #fbb104;
  border-radius: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' d='M3 8l3 3 7-7'/%3E%3C/svg%3E");
}


/* Divider line above PODLAGE (same style as Sloji separator) */
.leaflet-control-layers-expanded .leaflet-control-layers-base,
.leaflet-layers-panel .leaflet-control-layers-base {
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  margin-top: 12px !important;
  padding-top: 8px !important;
}

/* Naslov za baseLayers (PODLAGE) */
.leaflet-control-layers-expanded .leaflet-control-layers-base::before,
.leaflet-layers-panel .leaflet-control-layers-base::before {
  content: 'PODLAGE';
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #999;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* Razmik med baseLayers in overlay sloji */
.leaflet-control-layers-expanded .leaflet-control-layers-base::after,
.leaflet-layers-panel .leaflet-control-layers-base::after {
  content: '';
  display: block;
  height: 4px;   /* razmik med podlago in overlay sloji */
  background: transparent;
}

/* Naslov za overlays (Sloji) - dodan pred overlays sekcijo */
.leaflet-control-layers-expanded .leaflet-control-layers-overlays,
.leaflet-layers-panel .leaflet-control-layers-overlays {
  position: relative;
}
.leaflet-control-layers-expanded .leaflet-control-layers-overlays::before {
  content: 'Sloji';
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #999;
  margin-bottom: 8px;
  margin-top: 4px;
  text-transform: uppercase;
}
.leaflet-layers-panel .leaflet-control-layers-overlays::before {
  content: 'Sloji';
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #999;
  margin-bottom: 6px;
  margin-top: 2px;   /* less gap (no divider above) */
  text-transform: uppercase;
}

/* Light mode only: PODLAGE / Sloji titles – same as INFORMACIJE title */
body[data-theme="light"] .leaflet-layers-panel .leaflet-control-layers-base::before,
body[data-theme="light"] .leaflet-layers-panel .leaflet-control-layers-overlays::before {
  color: #a8a8a8;
}

/* Poveča razmike v izbirniku slojev za dodatne sloje (spodnji del) */
.leaflet-control-layers-expanded .leaflet-control-layers-overlays::after {
  content: '';
  display: block;
  height: 4px;
  background: transparent;
}
.leaflet-layers-panel .leaflet-control-layers-overlays::after {
  content: '';
  display: block;
  height: 0;
  background: transparent;
}

/* Ločnica med sloji v meniju – temna, manjši razmik */
.leaflet-control-layers .leaflet-control-layers-separator {
  border-top-color: rgba(255, 255, 255, 0.15) !important;
  margin: 12px -10px 2px -6px !important;  /* več prostora nad črto pred Sloji */
}
/* No divider line above Sloji in the floating panel */
.leaflet-layers-panel .leaflet-control-layers-separator {
  display: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* Ensure labels are block elements in the panel */
.leaflet-layers-panel .leaflet-control-layers-list label {
  display: flex !important;
  align-items: center;
  margin: 6px 0;
}

/* Odmik Leafletovega attributions watermark iz spodnjega desnega vogala */
.leaflet-bottom.leaflet-right {
  bottom: 0px !important;
  right: 0px !important;
}

/* Ciljamo na samo atribucijsko polje (© Leaflet...) */
.leaflet-control-attribution {
  border: 3px solid transparent !important;   /* obroba prosojna - samo za prostor */
  border-radius: 2px !important;        /* rahlo zaobljeni vogali */
  background: rgba(26, 26, 26, 0.8) !important; /* malenkost bolj prosojno ozadje */
  color: #b3b3b3 !important;            /* temno siva barva fonta */
}

/* Dark mode: copyright/attribution – match layers button (rgba 31,31,31 0.70 + blur) */
body:not([data-theme="light"]) .leaflet-control-attribution {
  background: rgba(31, 31, 31, 0.70) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Light mode: copyright – brighter background; text darker */
body[data-theme="light"] .leaflet-control-attribution {
  background: rgba(220, 220, 220, 0.78) !important;
  color: #4a4a4a !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body[data-theme="light"] .leaflet-control-attribution a {
  color: #000 !important;
}

/* Links v attribution (dark mode + base) */
.leaflet-control-attribution a {
  color: #e6e6e6 !important;
}

/* Zoom +/– : background always the same */
.leaflet-bar a.leaflet-control-zoom-in,
.leaflet-bar a.leaflet-control-zoom-out {
  background-color: rgba(40, 40, 40, 0.88) !important;
  border: 0px solid rgba(40, 40, 40, 0.88) !important;
  color: #fff !important;
}

/* Hover/click: only symbol turns yellow */
.leaflet-bar a.leaflet-control-zoom-in:hover,
.leaflet-bar a.leaflet-control-zoom-out:hover,
.leaflet-bar a.leaflet-control-zoom-in:active,
.leaflet-bar a.leaflet-control-zoom-out:active {
  background-color: rgba(40, 40, 40, 0.88) !important;
  color: #fbb104 !important;
}

/* Gumb za geolokacijo (pod zoom gumboma) — dark mode default (dark bg + light icon); light mode overridden below */
.leaflet-bar a.leaflet-control-user-location {
  background-color: rgba(31, 31, 31, 0.70) !important;
  border: 0px solid rgba(31, 31, 31, 0.70) !important;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border-radius: 6px !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 1;
  text-align: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

.leaflet-bar a.leaflet-control-user-location::before {
  content: '⦿';
  display: block;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-2px);
}

/* Hover/click: same bg, yellow outline + yellow icon */
.leaflet-bar a.leaflet-control-user-location:hover,
.leaflet-bar a.leaflet-control-user-location:active,
.leaflet-bar a.leaflet-control-user-location.is-active {
  background-color: rgba(31, 31, 31, 0.70) !important;
  outline: 2px solid #fbb104 !important;
}

.leaflet-bar a.leaflet-control-user-location:hover::before,
.leaflet-bar a.leaflet-control-user-location:active::before,
.leaflet-bar a.leaflet-control-user-location.is-active::before {
  color: #fbb104;
}

#map .leaflet-control-user-location-wrap {
  margin-top: 2px !important; /* slightly closer to zoom buttons on desktop */
}

/* Hide default Leaflet zoom control (+/- buttons) - we use mouse wheel / pinch instead */
.leaflet-control-zoom {
  display: none !important;
}

/* Hide controls that MapTiler/MapLibre GL injects next to Leaflet (zoom, compass, logo, attribution) */
.maptiler-ctrl,
.maptiler-ctrl-group,
.maptiler-ctrl-top-right,
.maptiler-ctrl-top-left,
.maptiler-ctrl-bottom-right,
.maptiler-ctrl-bottom-left,
.maplibregl-ctrl,
.maplibregl-ctrl-top-right,
.maplibregl-ctrl-top-left,
.maplibregl-ctrl-bottom-right,
.maplibregl-ctrl-bottom-left {
  display: none !important;
}

/* Remove outlines/frames on zoom and location controls */
.leaflet-control-zoom {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#map .leaflet-control-user-location-wrap {
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;  /* slight rounded corners to match other buttons */
  box-shadow: none !important;
}

.leaflet-container a.leaflet-control-zoom-in,
.leaflet-container a.leaflet-control-zoom-out,
.leaflet-container a.leaflet-control-user-location {
  outline: none !important;
}
.leaflet-container a.leaflet-control-zoom-in,
.leaflet-container a.leaflet-control-zoom-out {
  box-shadow: none !important;
}

.leaflet-container a.leaflet-control-zoom-in:focus,
.leaflet-container a.leaflet-control-zoom-out:focus,
.leaflet-container a.leaflet-control-user-location:focus,
.leaflet-container a.leaflet-control-zoom-in:focus-visible,
.leaflet-container a.leaflet-control-zoom-out:focus-visible,
.leaflet-container a.leaflet-control-user-location:focus-visible,
.leaflet-container a.leaflet-control-zoom-in.leaflet-active,
.leaflet-container a.leaflet-control-zoom-out.leaflet-active,
.leaflet-container a.leaflet-control-user-location.leaflet-active {
  outline: none !important;
}
/* Restore yellow outline on hover when location button is active (clicked) or has focus */
.leaflet-container a.leaflet-control-user-location.leaflet-active:hover,
.leaflet-container a.leaflet-control-user-location:focus:hover,
.leaflet-container a.leaflet-control-user-location:focus-visible:hover {
  outline: 2px solid #fbb104 !important;
}
.leaflet-container a.leaflet-control-zoom-in:focus,
.leaflet-container a.leaflet-control-zoom-out:focus,
.leaflet-container a.leaflet-control-zoom-in:focus-visible,
.leaflet-container a.leaflet-control-zoom-out:focus-visible,
.leaflet-container a.leaflet-control-zoom-in.leaflet-active,
.leaflet-container a.leaflet-control-zoom-out.leaflet-active {
  box-shadow: none !important;
}

#date-nav input[type="date"] {
  height: 2.5em;                 /* fiksna višina */
  line-height: 2.5em;            /* vertikalno centriranje besedila */
  font-family: Nunito Sans, sans-serif;/* pisava */
  font-size: 1em;              /* večji font */
  font-weight: 500;              /* poldebela */
  color: black;                  /* barva teksta */
  padding: 1em;              /* le horizontalni odmik */
  box-sizing: border-box;        /* padding ne vpliva na višino */
}

/* Način prikaza slike na karti */
.pixelated {
  image-rendering: pixelated;
}

/* Fullscreen button — dark mode default (dark bg + light icon); light mode overridden below */
.fs-btn {
  width: 32px;
  height: 32px;
  position: absolute;
  bottom: var(--fs-btn-bottom, 21px);
  left: 21px;
  z-index: 2500;
  font-weight: bold;
  font-size: 1em;
  color: white;
  background: rgba(31, 31, 31, 0.70);
  border: 0px solid transparent;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  outline: none !important;
}

/* Hover/click: same dark bg, yellow outline + yellow icon */
.fs-btn:hover,
.fs-btn:active {
  background: rgba(31, 31, 31, 0.70) !important;
  outline: 2px solid #fbb104 !important;
  color: #fbb104;
}

/* Explicit active state for fullscreen ON (used by JS) */
.fs-btn.fs-active {
  color: #fbb104 !important;
}

/* When NOT in fullscreen, keep icon white by default (dark mode) */
.fs-btn:not(.fs-active):not(:hover) {
  color: white !important;
}

.fs-btn:focus,
.fs-btn:focus-visible,
.fs-btn:active {
  outline: none !important;
  box-shadow: none !important;
}
/* Restore yellow outline on hover when fullscreen button has focus (after click) */
.fs-btn:focus:hover,
.fs-btn:focus-visible:hover {
  outline: 2px solid #fbb104 !important;
}

.fs-icon,
.fs-icon svg {
  display: block;
  vertical-align: middle;
  pointer-events: none;
}

#map.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 999 !important;
}

/* Ko je fullscreen, skrijemo samo header */
body:has(#map.fullscreen) .app-header-wrap {
  display: none !important;
}

/* Fullscreen: navigacijsko vrstico držimo zgoraj, fiksirano; nekoliko višja za večji tekst */
body:has(#map.fullscreen) #top-controls-row,
body:has(#map.fullscreen) .top-controls-row {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1001 !important;
  padding: 12px 20px !important;
  gap: 10px !important;
  row-gap: 8px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  background: none !important;
}
body:has(#map.fullscreen) {
  --fs-nav-height: 60px;
}

/* Fullscreen: prosojno ozadje – enaka tehnika kot v navadnem načinu */
body:has(#map.fullscreen) #top-controls-row::before,
body:has(#map.fullscreen) .top-controls-row::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  margin-left: -50vw !important;
  width: 100vw !important;
  background-color: rgba(77, 77, 77, 0.75) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Fullscreen: višina gumbov in časovnega traku; večji tekst nad trakom */
body:has(#map.fullscreen) #top-controls-row button {
  height: 30px !important;
  min-height: 30px !important;
}
body:has(#map.fullscreen) #top-controls-row .ts-wrap {
  height: 14px !important;
}
body:has(#map.fullscreen) #top-controls-row .top-time-group {
  min-width: 160px !important;
}

/* V fullscreen skrijemo: izbira datuma, reset, prosojnost, FPS, export */
body:has(#map.fullscreen) #top-controls-row #date-nav,
body:has(#map.fullscreen) #top-controls-row .top-date-group,
body:has(#map.fullscreen) #top-controls-row #reset-defaults-button,
body:has(#map.fullscreen) #top-controls-row .top-opacity-group,
body:has(#map.fullscreen) #top-controls-row .top-fps-group,
body:has(#map.fullscreen) #top-controls-row #export-gif-button {
  display: none !important;
}

/* In fullscreen, hide layers button, info button, and legend */
body:has(#map.fullscreen) .leaflet-control-layers,
body:has(#map.fullscreen) .leaflet-control-info-wrap,
body:has(#map.fullscreen) .leaflet-control-theme-wrap,
body:has(#map.fullscreen) .leaflet-control-legend {
  display: none !important;
}

/* In fullscreen, map controls (zoom only) just below the nav bar */
body:has(#map.fullscreen) .leaflet-top.leaflet-right {
  top: calc(var(--fs-nav-height, 52px) + 16px) !important;
  right: 20px !important;
}

body:has(#map.fullscreen) .leaflet-top.leaflet-left {
  top: calc(var(--fs-nav-height, 52px) + 16px) !important;
  left: 20px !important;
}

/* Fullscreen button position in fullscreen mode */
body:has(#map.fullscreen) .fs-btn {
  bottom: var(--fs-btn-bottom, 20px) !important;
  left: 21px !important;  /* match non-fullscreen desktop (21px) so button doesn't shift */
}

/* Stil osvežitvenega gumba */
#refresh-button {
  font-family: Nunito Sans, sans-serif; /* pisava */
  font-weight: bold;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.0em;
  height: 1.0em;
  line-height: 1;
  font-size: 1.0em;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 2;
}

#refresh-button:hover {
  color: #fbb104;
}

#refresh-button:active {
  transform: scale(1.2);
}

/* Privzeto UI skrijemo */
#map-ui {
  display: none;
}

/* V fullscreen krmilnice so v zgornji navigaciji, zato map-ui skrijemo */
#map.fullscreen #map-ui {
  display: none !important;
}

#map-ui * {
  cursor: inherit;  /* puščica, ne ročica */
}

#map-ui .legend-dbz {
  color: white;
  font-size: 1.2em;
}

#map-refresh-button:active {
  transform: scale(1.2);
}

/* Dodatne izboljšave za mobilni prikaz */
@media (max-width: 500px) {
  #animation-and-legend {
    flex-direction: column;
    align-items: center;
  }

  #animation-controls {
    justify-content: center;
    flex-wrap: wrap;
  }

  #fps-input {
    width: 100%;
  }
}

#export-gif-button {
  background: #b3b3b3;
  color: black;
  font-size: 0.9em;
  padding: 0.2em 0.5em;
  cursor: pointer;
  height: 34px;
  min-width: 4.5em;
}

#export-gif-button:hover {
  background: transparent;
}

/* Stil za kloniran UI v animacijskem oknu */
#map-ui-clone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2em; /* manjši vertikalni razmiki med elementi */
  padding: 0.8em; /* manjši notranji robovi, če je preveč praznega prostora */

  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-53%) scale(0.8); /* zmanjšaj celoten UI */
  transform-origin: top center;

  z-index: 1000;
  background: rgba(77, 77, 77, 0.8);
  border: 0px solid rgba(77, 77, 77, 0.8);
  border-radius: 3px;

  font-family: "Nunito Sans", sans-serif;
}

#map-ui-clone > * {
  margin: 0 !important;
  padding: 0 !important;
}

#map-ui-clone #map-refresh-button {
  display: none !important;
}

#map-ui-clone #map-time-slider {
  display: none !important;
}

#map-ui-clone #map-play-button {
display: none !important;
}

#map-ui-clone #map-current-time {
  font-size: 1.1em;
}

#map-ui-clone .legend-title {
  color: white;
  font-size: 0.9em;
  margin-bottom: 0em;
  text-align: center;
}

#map-ui-clone #legend {
  font-size: 1.2em;
  transform: translateX(-10px) translateY(-10px) scale(0.8);
}

/* Prestavi napise legende v kvadratke */
#map-ui-clone #legend div:nth-child(n+16) {
  font-size: 0.6em;
  color: white;
  text-align: center;
  margin-top: 10px;
  margin-bottom: -10px;
  gap: 0em
}

.map-ui #legend {
  display: grid;
  grid-template-columns: repeat(15, 20px);
  grid-template-rows: 20px auto;
  justify-content: center;
  text-align: center;
  gap: 0;
  transform: scale(0.8);              /* manjša legenda kot celota */
  transform-origin: bottom center;
}

.map-ui #legend > div {
  width: 20px;
  height: 20px;
}

.map-ui #legend > div:nth-child(1)  { background: #0e6b9d; }
.map-ui #legend > div:nth-child(2)  { background: #068093; }
.map-ui #legend > div:nth-child(3)  { background: #089e94; }
.map-ui #legend > div:nth-child(4)  { background: #05c1a0; }
.map-ui #legend > div:nth-child(5)  { background: #04d883; }
.map-ui #legend > div:nth-child(6)  { background: #5ae65a; }
.map-ui #legend > div:nth-child(7)  { background: #a9f848; }
.map-ui #legend > div:nth-child(8)  { background: #f0ff50; }
.map-ui #legend > div:nth-child(9)  { background: #ffeb19; }
.map-ui #legend > div:nth-child(10) { background: #ffc71f; }
.map-ui #legend > div:nth-child(11) { background: #ff9f32; }
.map-ui #legend > div:nth-child(12) { background: #ff7d4a; }
.map-ui #legend > div:nth-child(13) { background: #ff6262; }
.map-ui #legend > div:nth-child(14) { background: #ff8fc4; }
.map-ui #legend > div:nth-child(15) { background: #e3d9ff; }

.map-ui #legend > div:nth-child(n+16) {
  font-size: 0.7em;
  color: white;
  text-align: center;
  line-height: 20px;
}


/* Zagotovi, da se tudi pri mobilnem prikazu zemljevid razširi do spodnjega roba zaslona */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

/* Pisava vira podatkov */
.leaflet-control-attribution {
  font-family: Nunito Sans, sans-serif;
  font-size: 10px;  /* manjša pisava za copyright/vire */
}

/* Pisava izbirnika slojev */
.leaflet-control-layers {
  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
}

/* Naj bo layers meni nad legendo */
.leaflet-control-layers {
  z-index: 2000 !important;
}

/* Theme toggle control wrapper */
.leaflet-control-theme-wrap {
  padding: 0 !important;
}

/* The actual button — 44×44 to match layers button (32×32) visually.
   Background and icon color are set per theme below to match layers button. */
.leaflet-control-theme-wrap .theme-toggle {
  box-sizing: border-box !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  font-size: 24px;
  line-height: 1;
  border: none !important;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  border-radius: 6px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

.leaflet-control-theme-wrap .theme-toggle:hover,
.leaflet-control-theme-wrap .theme-toggle.active {
  outline: 2px solid #fbb104 !important;
  color: #fbb104;
}

/* SVG icons inside theme toggle — smaller than button, same icon color as layers (currentColor) */
.leaflet-control-theme-wrap .theme-toggle svg {
  display: block;
  width: 25px !important;
  height: 25px !important;
}
.leaflet-control-theme-wrap .theme-toggle svg path {
  fill: currentColor;
}

/* Info button control wrapper */
.leaflet-control-info-wrap {
  padding: 0 !important;
}

/* Desktop/tablet: nudge info button a bit left so it visually centers with the layers/theme buttons.
   This is a default; JS sets an inline margin-right on desktop to actually shift it.
   Mobile uses fixed positioning that overrides this. */
.leaflet-top.leaflet-right > .leaflet-control-info-wrap {
  margin-right: 10px;
}

/* Info icon itself – fill matches theme button (same color + transparency) */
.leaflet-control-info-wrap .info-icon {
  width: 25px;
  height: 25px;
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  border: 2px solid #cccccc;
  color: #cccccc;
  background-color: rgba(31, 31, 31, 0.70);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Nudge the "i" character lower (transform is not overridden by flex centering) */
.leaflet-control-info-wrap .info-icon .info-icon-char {
  display: block;
  transform: translateY(1px);
}

/* Remove hover/click highlight on touch devices (mobile) */
@media (hover: none) and (pointer: coarse) {
  body[data-theme="light"] .leaflet-control-theme-wrap .theme-toggle:hover,
  body[data-theme="light"] .leaflet-control-theme-wrap .theme-toggle.active {
    background-color: rgba(255, 255, 255, 0.72) !important;
    outline: none !important;
    color: #666 !important;
  }
  body:not([data-theme="light"]) .leaflet-control-theme-wrap .theme-toggle:hover,
  body:not([data-theme="light"]) .leaflet-control-theme-wrap .theme-toggle.active {
    background-color: rgba(31, 31, 31, 0.70) !important;
    outline: none !important;
    color: #cccccc !important;
  }
}

/* (stari .leaflet-control-info-wrap .theme-toggle stili odstranjeni - gumb je zdaj ločen kontrolnik) */

/* Dark mode: theme button — original dark bg + light icon */
body:not([data-theme="light"]) .leaflet-control-theme-wrap .theme-toggle {
  background-color: rgba(31, 31, 31, 0.70) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: #cccccc !important;
}
body:not([data-theme="light"]) .leaflet-control-theme-wrap .theme-toggle:hover,
body:not([data-theme="light"]) .leaflet-control-theme-wrap .theme-toggle.active {
  background-color: rgba(31, 31, 31, 0.70) !important;
  color: #fbb104 !important;
}

/* Light mode: theme button — inverted bright bg + dark icon */
body[data-theme="light"] .leaflet-control-theme-wrap .theme-toggle {
  background-color: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: #666 !important;
}
body[data-theme="light"] .leaflet-control-theme-wrap .theme-toggle:hover,
body[data-theme="light"] .leaflet-control-theme-wrap .theme-toggle.active {
  background-color: rgba(255, 255, 255, 0.72) !important;
  color: #fbb104 !important;
}

/* Mobile: no clicked/active color effect on theme button – always show default icon color, no outline */
@media (max-width: 640px) {
  body[data-theme="light"] .leaflet-control-theme-wrap .theme-toggle:hover,
  body[data-theme="light"] .leaflet-control-theme-wrap .theme-toggle.active {
    color: #666 !important;
    outline: none !important;
  }
  body:not([data-theme="light"]) .leaflet-control-theme-wrap .theme-toggle:hover,
  body:not([data-theme="light"]) .leaflet-control-theme-wrap .theme-toggle.active {
    color: #cccccc !important;
    outline: none !important;
  }
}

/* Light mode: info button – same fill as theme button (bright + same transparency) */
body[data-theme="light"] .leaflet-control-info-wrap .info-icon {
  color: #666 !important;
  border-color: #666 !important;
  background-color: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body[data-theme="light"] .leaflet-control-info-wrap .info-icon:hover,
body[data-theme="light"] .leaflet-control-info-wrap .info-icon.active {
  color: #fbb104 !important;
  border-color: #fbb104 !important;
  background-color: rgba(255, 255, 255, 0.72) !important;
}

/* Light mode: background behind the map (slightly darker than before) */
body[data-theme="light"] #map {
  background-color: #ebebeb !important;
}

body[data-theme="light"] .leaflet-container {
  background-color: #ebebeb !important;
}

/* Light mode: layers, location, fullscreen — inverted (bright bg + dark icon) */
body[data-theme="light"] .leaflet-container .leaflet-control-layers-toggle {
  background-color: rgba(255, 255, 255, 0.72) !important;
  color: #666 !important;
}
body[data-theme="light"] .leaflet-container a.leaflet-control-layers-toggle.layers-active {
  background-color: rgba(255, 255, 255, 0.72) !important;
}
/* Light mode: layers button — yellow icon on hover and when panel open (match theme button) */
body[data-theme="light"] .leaflet-container a.leaflet-control-layers-toggle:hover,
body[data-theme="light"] .leaflet-container a.leaflet-control-layers-toggle:active,
body[data-theme="light"] .leaflet-container a.leaflet-control-layers-toggle.layers-active {
  color: #fbb104 !important;
}
body[data-theme="light"] .leaflet-bar a.leaflet-control-user-location {
  background-color: rgba(255, 255, 255, 0.72) !important;
  border-color: transparent !important;
}
body[data-theme="light"] .leaflet-bar a.leaflet-control-user-location::before {
  color: #555 !important;
}
body[data-theme="light"] .leaflet-bar a.leaflet-control-user-location:hover,
body[data-theme="light"] .leaflet-bar a.leaflet-control-user-location:active,
body[data-theme="light"] .leaflet-bar a.leaflet-control-user-location.is-active {
  background-color: rgba(255, 255, 255, 0.72) !important;
}
body[data-theme="light"] .leaflet-bar a.leaflet-control-user-location:hover::before,
body[data-theme="light"] .leaflet-bar a.leaflet-control-user-location:active::before,
body[data-theme="light"] .leaflet-bar a.leaflet-control-user-location.is-active::before {
  color: #fbb104 !important;
}
body[data-theme="light"] .fs-btn {
  background: rgba(255, 255, 255, 0.72) !important;
  color: #555 !important;
}
body[data-theme="light"] .fs-btn:hover,
body[data-theme="light"] .fs-btn:active {
  background: rgba(255, 255, 255, 0.72) !important;
  color: #fbb104 !important;
}
body[data-theme="light"] .fs-btn:not(.fs-active):not(:hover) {
  color: #555 !important;
}

/* Light mode: menu (settings) button – same as theme button (bright bg + dark icon) */
body[data-theme="light"] .leaflet-control-settings-wrap .settings-icon {
  background-color: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: #666 !important;
}
body[data-theme="light"] .leaflet-control-settings-wrap .settings-icon:hover,
body[data-theme="light"] .leaflet-control-settings-wrap .settings-icon.active {
  background-color: rgba(255, 255, 255, 0.72) !important;
  color: #fbb104 !important;
}

/* Light mode: more spread-out drop shadows on the map control buttons (including menu) */
body[data-theme="light"] .leaflet-container .leaflet-control-layers-toggle,
body[data-theme="light"] .leaflet-control-theme-wrap .theme-toggle,
body[data-theme="light"] .leaflet-control-settings-wrap .settings-icon,
body[data-theme="light"] .leaflet-bar a.leaflet-control-user-location,
body[data-theme="light"] .fs-btn {
  box-shadow: 0 2px 10px 3px rgba(0, 0, 0, 0.1), 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

/* Dark mode: dark grey behind the map (slightly brighter than before) */
body:not([data-theme="light"]) #map {
  background-color: #353535 !important;
}

body:not([data-theme="light"]) .leaflet-container {
  background-color: #353535 !important;
}

/* ── Tema: overlay prekrivač za gladko menjavo podlage ──
   Overlay pokriva zemljevid med preklopom, da se tiles ne naložijo opazno.
   Barva glede na ciljno temo (nastavi JS). */
#theme-transition-overlay {
  position: absolute;
  inset: 0;
  z-index: 500; /* nad tiles, pod Leaflet kontrolami */
  pointer-events: none;
  display: none;
  opacity: 0;
  transition: opacity 400ms ease-in-out;
}
#theme-transition-overlay.fade-in  { opacity: 1; }
#theme-transition-overlay.fade-out { opacity: 0; }

/* ── Smooth theme transition for all UI chrome (not the map) ──
   When body[data-theme] changes, these elements cross-fade their colors. */
.app-header-wrap,
.app-header-title,
#top-controls-row button,
.leaflet-control-info-wrap .info-icon,
.leaflet-control-theme-wrap .theme-toggle,
.leaflet-container .leaflet-control-layers-toggle,
.leaflet-bar a.leaflet-control-user-location,
.leaflet-bar a.leaflet-control-user-location::before,
.fs-btn,
.leaflet-control-settings-wrap .settings-icon,
.leaflet-control-attribution,
.leaflet-control-attribution a,
.leaflet-control-legend,
.leaflet-control-legend .leaflet-legend-title,
.leaflet-control-legend .leaflet-legend-label,
.info-panel-title {
  transition: background-color 400ms ease-in-out, color 400ms ease-in-out, border-color 400ms ease-in-out, box-shadow 400ms ease-in-out !important;
}

/* Hover/active states should snap instantly even during theme transition */
.leaflet-control-info-wrap .info-icon:hover,
.leaflet-control-info-wrap .info-icon.active,
.leaflet-control-theme-wrap .theme-toggle:hover,
.leaflet-control-theme-wrap .theme-toggle.active,
.leaflet-container .leaflet-control-layers-toggle:hover,
.leaflet-bar a.leaflet-control-user-location:hover,
.fs-btn:hover,
.leaflet-control-settings-wrap .settings-icon:hover,
.leaflet-control-settings-wrap .settings-icon.active,
#top-controls-row button:hover {
  transition: color 0.1s ease, border-color 0.1s ease !important;
}

/* Hover and clicked: same fill as theme button (dark), yellow outline and "i" */
.leaflet-control-info-wrap .info-icon:hover,
.leaflet-control-info-wrap .info-icon.active {
  background-color: rgba(31, 31, 31, 0.70) !important;
  border: 2px solid #fbb104;
  color: #fbb104;
}

/* Keep top-right controls tightly anchored; spacing handled by info control padding */
.leaflet-top.leaflet-right .leaflet-control-layers {
  margin-bottom: 0 !important;
  position: relative !important;  /* reference for absolute-positioned info button */
}

/* Settings button – same size and look as layers button, stacks above it */
.leaflet-control-settings-wrap {
  display: flex;
  justify-content: center;
  width: 32px;
  margin: 0 !important;
  padding: 0 !important;
}

.leaflet-control-settings-wrap .settings-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  font-size: 0; /* hide original text glyph */
  line-height: 1;
  border: none;
  background-color: rgba(40, 40, 40, 0.88);
  color: #cccccc;
  cursor: pointer;
  box-shadow: none;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

.leaflet-control-settings-wrap .settings-icon::before {
  content: '\2630'; /* burger icon */
  font-size: 32px;
  color: inherit;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -56%); /* lift icon a bit more within button while button stays put */
}

.leaflet-control-settings-wrap .settings-icon:hover,
.leaflet-control-settings-wrap .settings-icon.active {
  background-color: rgba(40, 40, 40, 0.88) !important;
  outline: 2px solid #fbb104;
  color: #fbb104;
}

/* Hide settings button on tablet and desktop */
@media (min-width: 641px) {
  .leaflet-control-settings-wrap {
    display: none !important;
  }
}

/* Hide settings button in fullscreen (all screen sizes) */
body:has(#map.fullscreen) .leaflet-control-settings-wrap {
  display: none !important;
}

/* Mobile: theme toggle between menu and info buttons */
@media (max-width: 640px) {
  /* Theme toggle: positioned left of the burger menu */
  body:not(:has(#map.fullscreen)) .leaflet-control-theme-wrap {
    position: fixed !important;
    top: calc(var(--nav-top-offset, 70px) + 16px) !important;
    right: 66px !important;  /* left of burger menu (which is at right: 18px) */
    z-index: 3100;
    margin: 0 !important;
    width: auto !important;
  }

  /* Theme toggle button: match burger size on mobile (40×40) */
  body:not(:has(#map.fullscreen)) .leaflet-control-theme-wrap .theme-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
  }
  /* Mobile: icon size inside the 40×40 button (same smaller size as desktop) */
  body:not(:has(#map.fullscreen)) .leaflet-control-theme-wrap .theme-toggle svg {
    width: 25px !important;
    height: 25px !important;
  }

  /* Info button: positioned left of theme toggle */
  body:not(:has(#map.fullscreen)) .leaflet-control-info-wrap {
    position: fixed !important;
    top: calc(var(--nav-top-offset, 70px) + 22px) !important;
    right: 120px !important;  /* left of theme button (66px + 40px + 14px gap) */
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
  }
}

/* ── Mobile settings close button (appended to body via JS, always visible) ── */
#mob-settings-close-fixed {
  position: fixed;
  top: calc(var(--nav-top-offset, 70px) + 14px);
  right: 14px;
  z-index: 9999;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 20px;
  font-weight: bold;
  color: #ff6b6b;
  background: #333333;
  border: none;
  border-radius: 50%;
  display: none; /* shown via JS when settings open */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
#mob-settings-close-fixed:hover {
  background: #7a7a7a;
  color: #ff6b6b;
}

/* ── Mobile info full-screen close button (same look as settings X) ── */
#mob-info-close-fixed {
  position: fixed;
  top: calc(var(--nav-top-offset, 70px) + 14px);
  right: 14px;
  z-index: 9999;
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 20px;
  font-weight: bold;
  color: #ff6b6b;
  background: #333333;
  border: none;
  border-radius: 50%;
  display: none; /* shown via JS when info fullscreen open on mobile */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
#mob-info-close-fixed:hover {
  background: #7a7a7a;
  color: #ff6b6b;
}

/* ── Mobile Settings Panel: full-screen transform of #top-controls-row ── */

/* Settings header – hidden everywhere except mobile settings-open */
#mob-settings-header {
  display: none !important;
}

.mob-settings-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
}

.mob-settings-close-btn {
  background: transparent;
  border: none !important;
  color: #ccc;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 3px;
  height: auto !important;
}
.mob-settings-close-btn:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

@media (max-width: 640px) {
  /* Move navigation bar (timeline, play, prev/next, refresh) to bottom edge (copyright moved to info panel) */
  body:not(.mob-settings-open) #top-controls-row {
    top: auto !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
  }

  /* Move map controls up so they don't overlap with bottom timeline panel */
  /* Fullscreen button: move up significantly - uses CSS variable for dynamic positioning above copyright */
  .fs-btn {
    bottom: var(--fs-btn-bottom, 134px) !important;
    left: 12px !important;
  }
  /* Location button: place it next to the fullscreen button on mobile */
  #map .leaflet-control-user-location-wrap {
    position: fixed;
    bottom: calc(136px + 32px + 8px) !important; /* above fullscreen: fs-btn bottom + height + gap */
    left: 12px; /* same left as fullscreen button */
    margin-top: 0 !important;
    z-index: 2501;
  }
  /* Legend: move up significantly */
  .leaflet-control-legend {
    bottom: 134px !important; /* 2px lower to match fullscreen button */
    right: 14px !important;   /* nudge further right to visually align with menu */
  }

  /* Burger (settings) and info controls: inside timeline panel, aligned with play row */
  /* #top-controls-row has bottom:24px + padding:20px, so buttons sit at ~44px from bottom */
  body:not(:has(#map.fullscreen)) .leaflet-top.leaflet-right {
    top: auto !important;
    right: auto !important;
    bottom: 20px !important; /* timeline padding = aligned with button row (timeline at bottom: 0) */
    left: 12px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
  }
  /* Hide the Leaflet layers button entirely on mobile –
     layer settings are available in the full-screen settings panel instead. */
  body:not(:has(#map.fullscreen)) .leaflet-top.leaflet-right .leaflet-control-layers {
    display: none !important;
  }
  /* Burger (settings) button: pull it out of the bottom control row and
     fix it in the top-right corner, just under the header. */
  body:not(:has(#map.fullscreen)) .leaflet-top.leaflet-right .leaflet-control-settings-wrap {
    position: fixed;
    top: calc(var(--nav-top-offset, 70px) + 16px);
    right: 18px;
    z-index: 3100;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  body:not(:has(#map.fullscreen)) .leaflet-top.leaflet-right .leaflet-control-settings-wrap .settings-icon {
    margin: 0 !important;
  }
  body:not(:has(#map.fullscreen)) .leaflet-top.leaflet-right .leaflet-control {
    margin: 0 !important;
  }
  /* Theme toggle on mobile: between info and burger */
  body:not(:has(#map.fullscreen)) .leaflet-top.leaflet-right .leaflet-control-theme-wrap {
    position: fixed !important;
    top: calc(var(--nav-top-offset, 70px) + 16px) !important;
    right: 66px !important;  /* left of burger menu */
    z-index: 3099 !important;
    margin: 0 !important;
  }
  /* Info button on mobile: leftmost, before theme toggle */
  body:not(:has(#map.fullscreen)) .leaflet-control-info-wrap {
    position: fixed !important;
    top: calc(var(--nav-top-offset, 70px) + 22px) !important;
    right: 116px !important; /* left of theme toggle (66px + 40px + 10px gap) */
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3098 !important; /* below theme toggle */
  }
  body:not(:has(#map.fullscreen)) .leaflet-control-info-wrap .info-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hide settings controls from the normal top bar (keep #date-nav visible in timeline) */
  body:not(.mob-settings-open) #top-controls-row #reset-defaults-button,
  body:not(.mob-settings-open) #top-controls-row .top-fps-group,
  body:not(.mob-settings-open) #top-controls-row .top-opacity-group,
  body:not(.mob-settings-open) #top-controls-row #export-gif-button {
    display: none !important;
  }

  /* Mobile timeline: row 1 = time selection, row 2 = slider, row 3 = timestamp + play/refresh */
  body:not(.mob-settings-open) #top-controls-row {
    display: grid !important;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto auto;
    gap: 4px 8px;
    align-items: center;
    justify-content: stretch;
    padding: 8px 12px 16px 12px;
  }
  /* Flatten wrappers so grid still sees date-nav, play, step-group, refresh, time-group (then time-group uses contents) */
  body:not(.mob-settings-open) #top-controls-row .top-playback-and-time,
  body:not(.mob-settings-open) #top-controls-row .top-playback-buttons {
    display: contents !important;
  }
  body:not(.mob-settings-open) #top-controls-row #date-nav {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex !important;
    justify-content: space-evenly;
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
    margin-top: 4px; /* slightly more background above 3h/6h/12h/24h buttons on mobile */
  }
  body:not(.mob-settings-open) #top-controls-row .top-time-group {
    display: contents !important; /* children (header, ts-wrap) become grid items */
  }
  body:not(.mob-settings-open) #top-controls-row .ts-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  body:not(.mob-settings-open) #top-controls-row .top-time-header {
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-start !important;
  }
  body:not(.mob-settings-open) #top-controls-row .top-play-btn {
    grid-column: 2;
    grid-row: 3;
    margin-right: 10px !important;
  }
  body:not(.mob-settings-open) #top-controls-row .top-refresh-btn {
    grid-column: 3;
    grid-row: 3;
    margin-left: 10px !important;
  }
  /* Timeline header: hide "časovni trak", put date/timestamp on the left */
  body:not(.mob-settings-open) #top-controls-row .top-time-track-label {
    display: none !important;
  }
  /* Hide prev/next frame buttons on mobile; keep on desktop */
  body:not(.mob-settings-open) #top-controls-row .top-step-group {
    display: none !important;
  }

  /* On touch: prevent last-frame button from staying yellow after tap (stuck :hover) */
  @media (hover: none) {
    body:not(.mob-settings-open) #top-controls-row #refresh-button:hover {
      color: #fff !important;
    }
  }

  /* Settings open: transform top-controls-row into a full-screen panel (above map controls: layers, info, zoom, fs, location) */
  body.mob-settings-open #top-controls-row {
    position: fixed;
    top: var(--nav-top-offset, 70px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    background: rgba(26, 26, 26, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 0 16px 24px 16px;
    overflow-y: auto;
    display: grid !important;
    /* Two columns: FPS takes all space (1fr), GIF on right margin (auto) */
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto auto auto;
    align-content: start; /* pack rows at top, don't stretch */
    align-items: start;
    gap: 0 30px; /* column gap only, row gap handled per-row */
    justify-content: flex-start;
  }

  /* Light mode mobile: menu fullscreen background slightly brighter */
  body[data-theme="light"].mob-settings-open #top-controls-row {
    background: rgba(42, 42, 42, 0.88) !important;
  }

  /* Hide the ::before background stripe */
  body.mob-settings-open #top-controls-row::before {
    display: none;
  }

  /* Show the settings header (title only; close X is fixed in corner) */
  body.mob-settings-open #mob-settings-header {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    padding: 64px 56px 0 0; /* more space above for fixed X; no extra gap below title */
    margin-bottom: 0;
    order: 0;
    flex: 0 0 auto;
    line-height: 1.2;
  }
  body.mob-settings-open .mob-settings-title {
    font-size: 16px !important; /* match PODLAGE / Sloji section titles */
    margin: 0;
    padding: 0;
  }

  /* Hide navigation controls and time selection inside the settings panel (time selection is in timeline) */
  body.mob-settings-open #top-controls-row .top-playback-and-time,
  body.mob-settings-open #top-controls-row #date-nav {
    display: none !important;
  }

  /* Grid placement: row 1 = header, row 2 = FPS | GIF, row 3 = opacity, row 4 = revert (below prosojnost), row 5 = layers */
  body.mob-settings-open #top-controls-row #mob-settings-header {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  body.mob-settings-open #top-controls-row .top-fps-group {
    grid-column: 1;
    grid-row: 2;
  }
  body.mob-settings-open #top-controls-row #export-gif-button {
    grid-column: 2;
    grid-row: 2;
  }
  body.mob-settings-open #top-controls-row .top-opacity-group {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  body.mob-settings-open #top-controls-row #reset-defaults-button {
    grid-column: 1 / -1;
    grid-row: 4;
  }
  body.mob-settings-open #top-controls-row .leaflet-layers-panel {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  /* Fixed px spacing - same on all phones, scroll if needed */
  body.mob-settings-open #top-controls-row #reset-defaults-button,
  body.mob-settings-open #top-controls-row #export-gif-button,
  body.mob-settings-open #top-controls-row .leaflet-layers-panel {
    padding: 2px 0 14px 0;
    margin: 0 !important;
  }
  body.mob-settings-open #top-controls-row .top-fps-group {
    padding: 4px 0;
    margin: 0 !important;
  }
  body.mob-settings-open #top-controls-row .top-opacity-group {
    padding: 24px 0 8px 0; /* fixed gap above opacity slider */
    margin: 0 !important;
  }
  /* Row 2: FPS fills left, GIF on right margin – fixed px spacing */
  body.mob-settings-open #top-controls-row .top-fps-group {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 34px;
    min-width: 0;
    padding: 40px 0 4px 0 !important; /* big fixed gap below NASTAVITVE title */
    margin: 0 !important;
  }
  body.mob-settings-open #top-controls-row #export-gif-button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 34px;
    padding: 4px 0 !important;
    margin: 0 !important;
    flex-shrink: 0;
  }
  /* Row 4: revert – fixed px spacing, same on all phones */
  body.mob-settings-open #top-controls-row #reset-defaults-button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 34px;
    padding: 36px 0 52px 0 !important; /* bigger fixed gaps above and below reset button */
    margin: 0 !important;
    width: auto !important;
    min-width: auto !important;
  }
  body.mob-settings-open #top-controls-row #export-gif-button {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 4px !important;
  }

  /* Show the layers panel only when the mobile settings panel is open;
     keep it hidden in the compact timeline view. */
  body:not(.mob-settings-open) #top-controls-row .leaflet-layers-panel {
    display: none !important;
  }

  /* When layers panel is inside the mobile settings panel, make it full-width
     and remove floating popup styling. */
  body.mob-settings-open #top-controls-row .leaflet-layers-panel {
    position: static;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    background: transparent !important;
    box-shadow: none;
    opacity: 1;
  }
  body.mob-settings-open #top-controls-row .leaflet-layers-panel .leaflet-control-layers-close {
    display: none;
  }
  body.mob-settings-open #top-controls-row .leaflet-layers-panel .leaflet-control-layers-list {
    margin-top: 0;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  body.mob-settings-open #top-controls-row .leaflet-layers-panel .leaflet-control-layers-base {
    border-top: 2px solid rgba(255, 255, 255, 0.25) !important;
    margin-top: 0 !important;
    padding-top: 32px !important;
  }

  /* PODLAGE / Sloji: fixed px spacing – same on all phones */
  body.mob-settings-open #top-controls-row .leaflet-layers-panel .leaflet-control-layers-base::before {
    font-size: 16px !important;
    margin-bottom: 24px !important;
  }
  body.mob-settings-open #top-controls-row .leaflet-layers-panel .leaflet-control-layers-overlays::before {
    font-size: 16px !important;
    margin-top: 20px !important;
    margin-bottom: 24px !important;
  }
  body.mob-settings-open #top-controls-row .leaflet-layers-panel .leaflet-control-layers-list label {
    font-size: 15px !important;
    min-height: 28px !important;
    margin: 8px 0 !important;
  }
  /* Nudge layer names up and left so they align with radio/checkbox dots/squares */
  body.mob-settings-open #top-controls-row .leaflet-layers-panel .leaflet-control-layers-list label span {
    display: inline-block;
    transform: translate(-2px, -3px);
  }
  body.mob-settings-open #top-controls-row .leaflet-layers-panel .leaflet-control-layers-list input[type="radio"],
  body.mob-settings-open #top-controls-row .leaflet-layers-panel .leaflet-control-layers-list input[type="checkbox"] {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 2px 14px 0 0 !important;
  }
  body.mob-settings-open #top-controls-row .leaflet-layers-panel .leaflet-reset-layers {
    font-size: 16px !important;
    min-height: 36px !important;
    margin: 10px 0 0 0 !important;
    padding: 4px 0 0 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    color: #fbb104 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
  }
  body.mob-settings-open #top-controls-row .leaflet-layers-panel .leaflet-reset-layers .leaflet-reset-layers-icon {
    color: #ff6b6b !important;
  }
  body.mob-settings-open #top-controls-row .leaflet-layers-panel .leaflet-reset-layers-icon {
    font-size: 1.35em !important;
    margin-right: 10px !important;
    margin-left: 0 !important;
  }
  body.mob-settings-open #top-controls-row .leaflet-layers-panel .leaflet-reset-layers-spacer {
    height: 12px !important;
    min-height: 12px !important;
  }
  /* Mobile: show long label "ponastavi podlage in sloje", hide desktop ::after */
  body.mob-settings-open #top-controls-row .leaflet-layers-panel .leaflet-reset-layers::after {
    content: none;
  }
  body.mob-settings-open #top-controls-row .leaflet-layers-panel .leaflet-reset-layers .leaflet-reset-layers-label {
    display: inline;
    color: #ff6b6b !important;
    vertical-align: middle;
    margin-left: 6px;
    transform: translateY(-5px);
  }

  /* Reset defaults button: match layers reset style – arrow + "ponastavi nastavitve", red */
  body.mob-settings-open #top-controls-row #reset-defaults-button {
    width: auto;
    display: flex !important;
    align-items: center !important;
    font-family: "Nunito Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: normal !important;
    color: #ff6b6b !important;
    background: transparent !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  body.mob-settings-open #top-controls-row #reset-defaults-button .mob-reset-defaults-icon {
    display: inline-block;
    font-size: 1.35em;
    line-height: 1;
    vertical-align: middle;
    margin-right: 10px;
    color: #ff6b6b !important;
  }
  body.mob-settings-open #top-controls-row #reset-defaults-button .mob-reset-defaults-label {
    display: inline;
    color: #ff6b6b !important;
    vertical-align: middle;
    transform: translateY(-4px);
  }

  /* Opacity group: same row as FPS – label | slider | value */
  body.mob-settings-open #top-controls-row .top-opacity-group {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex: 0 0 auto;
    justify-self: stretch;
    align-self: stretch;
    min-height: 34px;
  }
  body.mob-settings-open #top-controls-row .top-opacity-group .top-opacity-header {
    display: contents;
  }
  body.mob-settings-open #top-controls-row .top-opacity-group .top-opacity-title {
    order: 1;
    flex-shrink: 0;
  }
  body.mob-settings-open #top-controls-row .top-opacity-group .opacity-slider-wrap {
    order: 2;
    flex: 1;
    min-width: 0;
    margin-top: 0;
    margin-bottom: 0;
  }
  /* Value (number + %) must sit to the right of the slider */
  body.mob-settings-open #top-controls-row .top-opacity-group .opacity-value-wrap {
    order: 3;
    flex-shrink: 0;
  }
  body.mob-settings-open #top-controls-row .top-opacity-group .top-opacity-value,
  body.mob-settings-open #top-controls-row .top-opacity-group #opacity-value {
    flex-shrink: 0;
  }
  body.mob-settings-open #top-controls-row #opacity-slider {
    width: 100% !important;
    margin: 0 !important;
  }

  /* FPS group: label | slider | value in one row (header becomes contents so label and value are flex children) */
  body.mob-settings-open #top-controls-row .top-fps-group {
    flex-direction: row !important;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
  body.mob-settings-open #top-controls-row .top-fps-group .top-fps-header {
    display: contents;
  }
  body.mob-settings-open #top-controls-row .top-fps-group .top-fps-label {
    order: 1;
    flex-shrink: 0;
  }
  body.mob-settings-open #top-controls-row .top-fps-group .fps-slider-wrap {
    order: 2;
    flex: 1;
    min-width: 0;
    max-width: 100%;
  }
  body.mob-settings-open #top-controls-row .top-fps-group .fps-value-wrap {
    order: 3;
    flex-shrink: 0;
    margin-left: -20px;
  }
  body.mob-settings-open #top-controls-row #fps-slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 2px;
    cursor: pointer;
    background: transparent;
    box-sizing: border-box;
  }
  body.mob-settings-open #top-controls-row #fps-slider::-webkit-slider-runnable-track {
    height: 4px;
    background: linear-gradient(to right,
      rgba(221, 221, 221, 0.6) 0%,
      rgba(221, 221, 221, 0.6) var(--value, 16.95%),
      rgba(255, 255, 255, 0.2) var(--value, 16.95%),
      rgba(255, 255, 255, 0.2) 100%);
    border-radius: 2px;
  }
  body.mob-settings-open #top-controls-row #fps-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border-radius: 50%;
    background: #a0a0a0;
    border: none;
    cursor: pointer;
  }
  body.mob-settings-open #top-controls-row #fps-slider:hover::-webkit-slider-thumb,
  body.mob-settings-open #top-controls-row #fps-slider:active::-webkit-slider-thumb {
    background: #dddddd;
  }
  body.mob-settings-open #top-controls-row #fps-slider::-moz-range-track {
    height: 4px;
    background: linear-gradient(to right,
      rgba(221, 221, 221, 0.6) 0%,
      rgba(221, 221, 221, 0.6) var(--value, 16.95%),
      rgba(255, 255, 255, 0.2) var(--value, 16.95%),
      rgba(255, 255, 255, 0.2) 100%);
    border-radius: 2px;
  }
  body.mob-settings-open #top-controls-row #fps-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #a0a0a0;
    border: none;
    cursor: pointer;
  }
  body.mob-settings-open #top-controls-row #fps-slider:hover::-moz-range-thumb,
  body.mob-settings-open #top-controls-row #fps-slider:active::-moz-range-thumb {
    background: #dddddd;
  }
  body.mob-settings-open #top-controls-row .fps-value-display {
    font-size: 0.95rem;
    min-width: 1.8em;
    flex-shrink: 0;
    text-align: right;
  }

  /* GIF button in panel row: compact, centered in its grid cell */
  body.mob-settings-open #top-controls-row #export-gif-button {
    width: auto;
    justify-content: center;
  }

  /* Mobile settings panel: slightly larger FPS, GIF, revert, prosojnost text */
  body.mob-settings-open #top-controls-row .top-fps-label {
    font-size: 0.98rem;
  }
  /* Mobile: hide the editable inputs completely (desktop-only features) */
  body.mob-settings-open #top-controls-row #fps-input,
  body.mob-settings-open #top-controls-row #opacity-input {
    display: none !important;
  }
  body.mob-settings-open #top-controls-row #export-gif-button {
    font-size: 0.95rem;
    padding: 2px 4px !important;
    color: #fff;
  }
  body.mob-settings-open #top-controls-row #export-gif-button .top-export-icon {
    font-size: 1.65rem;
    color: #fbb104;
  }
  body.mob-settings-open #top-controls-row #export-gif-button .top-export-icon svg {
    fill: #fbb104;
  }
  body.mob-settings-open #top-controls-row #export-gif-button .top-export-label {
    color: #fff;
  }
  body.mob-settings-open #top-controls-row .top-opacity-title,
  body.mob-settings-open #top-controls-row .top-opacity-value,
  body.mob-settings-open #top-controls-row #opacity-value {
    font-size: 0.95rem;
  }

  /* FINAL OVERRIDE: Fixed px spacing – same on all phones, scroll if needed */
  body[class*="mob-settings-open"] #top-controls-row .top-fps-group,
  body[class*="mob-settings-open"] #top-controls-row #export-gif-button,
  body[class*="mob-settings-open"] #top-controls-row #reset-defaults-button {
    margin: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-width: auto !important;
    width: auto !important;
    box-sizing: border-box !important;
    justify-self: flex-start !important;
  }
  body[class*="mob-settings-open"] #top-controls-row .top-fps-group {
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    padding: 40px 0 4px 0 !important; /* big fixed gap below NASTAVITVE title */
  }
  body[class*="mob-settings-open"] #top-controls-row #export-gif-button {
    padding: 40px 0 4px 0 !important; /* match FPS spacing */
  }
  body[class*="mob-settings-open"] #top-controls-row .top-opacity-group {
    margin: 0 !important;
    padding: 24px 0 8px 0 !important; /* fixed gap above opacity slider */
  }
  body[class*="mob-settings-open"] #top-controls-row #reset-defaults-button {
    padding: 36px 0 52px 0 !important; /* bigger fixed gaps above and below reset button */
  }
  /* Override any global button padding (GIF button gets 0 left so it sits next to FPS slider) */
  body[class*="mob-settings-open"] #top-controls-row button {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body[class*="mob-settings-open"] #top-controls-row #export-gif-button {
    padding-left: 0 !important;
  }

  /* Hide copyright on map on mobile – it is shown at bottom of info full-screen panel instead */
  .leaflet-control-attribution {
    display: none !important;
  }

  /* Info panel on mobile: same full-screen logic and background style as settings panel */
  .info-tooltip.info-tooltip-fullscreen {
    position: fixed !important;
    top: var(--nav-top-offset, 70px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 16px 12px 16px !important; /* slightly smaller bottom padding so gap below copyright is reduced */
    border-radius: 0 !important;
    background: rgba(26, 26, 26, 0.88) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: none !important;
    z-index: 3005 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .info-tooltip.info-tooltip-fullscreen .info-tooltip-content {
    margin-top: 56px; /* same as menu header top padding (space below fixed X) */
    font-size: 16px; /* slightly smaller, but still larger body text */
    padding: 0 !important;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    line-height: 1.6; /* increased line spacing for better readability */
  }
  .info-tooltip.info-tooltip-fullscreen .info-panel-title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 18px; /* larger gap between title and body text */
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left;
  }
  /* On mobile fullscreen use fixed X (same as menu); hide the inline close */
  .info-tooltip.info-tooltip-fullscreen .info-tooltip-close {
    display: none !important;
  }
  /* Copyright/attribution at bottom of info panel (content moved from map on mobile) */
  .info-tooltip.info-tooltip-fullscreen .info-tooltip-attribution {
    display: block;
    flex: 0 0 auto;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 13px;
    color: #b3b3b3;
    font-family: "Nunito Sans", sans-serif;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .info-tooltip.info-tooltip-fullscreen .info-tooltip-attribution a {
    color: #e6e6e6;
  }

  /* Light mode mobile: info fullscreen background slightly brighter */
  body[data-theme="light"] .info-tooltip.info-tooltip-fullscreen {
    background: rgba(42, 42, 42, 0.88) !important;
  }
}

/* Legenda naj bo "pod" layers menijem (base: light mode) */
.leaflet-control-legend {
  z-index: 900 !important;
  bottom: 15px;
  right: 20px;  /* same as .leaflet-top.leaflet-right for alignment with layers button */
  margin: 0;
  font-family: "Nunito Sans", sans-serif;
  background: rgba(40, 40, 40, 0.6) !important;
  border: 10px solid rgba(40, 40, 40, 0.6) !important;
  border-top-width: 10px !important;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  box-shadow: none !important;
  outline: none !important;
  transform: scale(0.8);              /* celotna legenda še malo manjša */
  transform-origin: bottom right;
}

.leaflet-control-legend div {
  margin: 0;
}

.leaflet-control-legend .leaflet-legend-title {
  color: #fff;
  text-align: center;
  font-size: 10px; /* smaller dBZ title; numbers stay larger in squares */
  padding: 0 0 3px;
  background: inherit !important;
}

/* Legend: inner elements inherit frame background so everything matches */
.leaflet-control-legend .legend,
.leaflet-control-legend .leaflet-legend {
  background: inherit !important;
  border: none !important;
  box-shadow: none !important;
}
.leaflet-control-legend .leaflet-legend-title,
.leaflet-control-legend .leaflet-legend-spacer,
.leaflet-control-legend .leaflet-legend-item {
  background: inherit !important;
  border: none !important;
  box-shadow: none !important;
}

/* Dark mode: legend frame with blur – more transparent (same feel as light mode) */
body:not([data-theme="light"]) .leaflet-control-legend {
  background: rgba(31, 31, 31, 0.42) !important;
  border-color: rgba(31, 31, 31, 0.42) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body:not([data-theme="light"]) .leaflet-control-legend .legend,
body:not([data-theme="light"]) .leaflet-control-legend .leaflet-legend,
body:not([data-theme="light"]) .leaflet-control-legend .leaflet-legend-title,
body:not([data-theme="light"]) .leaflet-control-legend .leaflet-legend-spacer,
body:not([data-theme="light"]) .leaflet-control-legend .leaflet-legend-item {
  background: inherit !important;
  border: none !important;
  box-shadow: none !important;
}

/* Light mode: legend – more transparent (0.42 alpha + blur), bright; frame and content use inherit so one consistent transparency */
body[data-theme="light"] .leaflet-control-legend {
  background: rgba(255, 255, 255, 0.42) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 2px 10px 3px rgba(0, 0, 0, 0.1), 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}
body[data-theme="light"] .leaflet-control-legend .legend,
body[data-theme="light"] .leaflet-control-legend .leaflet-legend,
body[data-theme="light"] .leaflet-control-legend .leaflet-legend-title,
body[data-theme="light"] .leaflet-control-legend .leaflet-legend-spacer,
body[data-theme="light"] .leaflet-control-legend .leaflet-legend-item {
  background: inherit !important;
  border: none !important;
  box-shadow: none !important;
}
body[data-theme="light"] .leaflet-control-legend .leaflet-legend-title,
body[data-theme="light"] .leaflet-control-legend .leaflet-legend-label {
  color: #000 !important;
}

.leaflet-control-legend .leaflet-legend-label {
  background: transparent !important;
}

.leaflet-control-legend .leaflet-legend-spacer {
  height: 0;
  display: none;
}

/* Legend: values inside color squares (same on desktop and mobile) */
.leaflet-control-legend .leaflet-legend-item {
  position: relative;
  display: inline-flex;
  width: 20px;
  height: 20px;
  margin: 0;
  gap: 0;
  background: inherit !important;
}

.leaflet-control-legend .leaflet-legend-color-box {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.leaflet-control-legend .leaflet-legend-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: #000; /* black numbers inside colored squares */
  pointer-events: none;
}

/* Mobile-only: make burger icon yellow; keep info button styling as before */
@media (max-width: 640px) {
  .leaflet-control-settings-wrap .settings-icon {
    color: #fbb104;
  }
}

/* ==========================================================================
   Mobile fullscreen map: show ONLY timeline slider, timestamp, play + last-frame
   Everything else (header, map controls, settings/info overlays) is hidden.
   ========================================================================== */
@media (max-width: 640px) {
  /* Place the timeline bar at the very bottom in fullscreen on mobile */
  body:has(#map.fullscreen) #top-controls-row {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 16px 12px 18px 12px !important;
    gap: 4px 8px !important;
    row-gap: 4px !important;
    align-items: center !important;
    justify-content: stretch !important;
    display: grid !important;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    overflow: visible !important;
    /* Keep z-index lower than fullscreen button (2500) so the exit button stays on top */
    z-index: 2400 !important;
  }

  /* Fullscreen button on mobile fullscreen: keep same left margin as non-fullscreen
     and lift it above the bottom timeline panel so they don't overlap. */
  body:has(#map.fullscreen) .fs-btn {
    bottom: 96px !important; /* a bit above the fullscreen timeline panel */
    left: 12px !important;   /* match mobile non-fullscreen left margin */
  }

  /* Mobile: fullscreen button only yellow + outline when IN fullscreen; when not, default color and no outline */
  body:not(:has(#map.fullscreen)) .fs-btn,
  body:not(:has(#map.fullscreen)) .fs-btn:hover,
  body:not(:has(#map.fullscreen)) .fs-btn:active,
  body:not(:has(#map.fullscreen)) .fs-btn.fs-active,
  body:not(:has(#map.fullscreen)) .fs-btn:focus:hover,
  body:not(:has(#map.fullscreen)) .fs-btn:focus-visible:hover {
    color: white !important;
    outline: none !important;
  }
  body:not(:has(#map.fullscreen))[data-theme="light"] .fs-btn,
  body:not(:has(#map.fullscreen))[data-theme="light"] .fs-btn:hover,
  body:not(:has(#map.fullscreen))[data-theme="light"] .fs-btn:active,
  body:not(:has(#map.fullscreen))[data-theme="light"] .fs-btn.fs-active,
  body:not(:has(#map.fullscreen))[data-theme="light"] .fs-btn:focus:hover,
  body:not(:has(#map.fullscreen))[data-theme="light"] .fs-btn:focus-visible:hover {
    color: #555 !important;
    outline: none !important;
  }

  /* Mobile: location button only yellow + outline when location is ON (.is-active); when OFF, default color and no outline */
  .leaflet-bar a.leaflet-control-user-location:not(.is-active),
  .leaflet-bar a.leaflet-control-user-location:not(.is-active):hover,
  .leaflet-bar a.leaflet-control-user-location:not(.is-active):active,
  .leaflet-container a.leaflet-control-user-location:not(.is-active):focus:hover,
  .leaflet-container a.leaflet-control-user-location:not(.is-active):focus-visible:hover {
    outline: none !important;
  }
  .leaflet-bar a.leaflet-control-user-location:not(.is-active)::before,
  .leaflet-bar a.leaflet-control-user-location:not(.is-active):hover::before,
  .leaflet-bar a.leaflet-control-user-location:not(.is-active):active::before {
    color: #fff !important;
  }
  body[data-theme="light"] .leaflet-bar a.leaflet-control-user-location:not(.is-active)::before,
  body[data-theme="light"] .leaflet-bar a.leaflet-control-user-location:not(.is-active):hover::before,
  body[data-theme="light"] .leaflet-bar a.leaflet-control-user-location:not(.is-active):active::before {
    color: #555 !important;
  }

  /* Mobile: play button only yellow when playing (.is-playing); when paused, revert to original color */
  #top-controls-row #play-button:not(.is-playing),
  #top-controls-row #play-button:not(.is-playing):hover,
  #top-controls-row #play-button:not(.is-playing):active {
    color: #fff !important;
  }

  /* Mobile only: slightly larger play button in timeline, nudge down for alignment */
  #top-controls-row #play-button {
    font-size: 1.15rem;
    margin-top: 4px;
  }
  #top-controls-row #play-button.is-playing {
    font-size: 1.85rem;
  }

  /* Mobile: play button uses same icon-only zoom as global (see Timeline panel buttons block) */

  /* In fullscreen on mobile, keep only the main time slider + timestamp + play + last-frame */
  body:has(#map.fullscreen) #top-controls-row #date-nav,
  body:has(#map.fullscreen) #top-controls-row .top-date-group,
  body:has(#map.fullscreen) #top-controls-row #reset-defaults-button,
  body:has(#map.fullscreen) #top-controls-row .top-opacity-group,
  body:has(#map.fullscreen) #top-controls-row .top-fps-group,
  body:has(#map.fullscreen) #top-controls-row #export-gif-button,
  body:has(#map.fullscreen) #top-controls-row .top-step-group,
  body:has(#map.fullscreen) #top-controls-row #mob-settings-header {
    display: none !important;
  }

  /* Layout: row 1 = slider, row 2 = timestamp | play | last-frame */
  body:has(#map.fullscreen) #top-controls-row .top-time-group {
    display: contents !important; /* children become grid items */
  }

  body:has(#map.fullscreen) #top-controls-row .ts-wrap {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  body:has(#map.fullscreen) #top-controls-row .top-time-header {
    grid-column: 1;
    grid-row: 2;
    justify-content: flex-start !important;
  }

  body:has(#map.fullscreen) #top-controls-row .top-play-btn {
    grid-column: 2;
    grid-row: 2;
  }

  body:has(#map.fullscreen) #top-controls-row .top-refresh-btn {
    grid-column: 3;
    grid-row: 2;
  }

  /* Hide "časovni trak" label – only the timestamp text stays visible */
  body:has(#map.fullscreen) #top-controls-row .top-time-track-label {
    display: none !important;
  }

  /* While in fullscreen on mobile, hide all extra map UI so the map + small timeline are all you see */
  body:has(#map.fullscreen) .app-header-wrap,
  body:has(#map.fullscreen) .leaflet-control-zoom,
  body:has(#map.fullscreen) .leaflet-control-layers,
  body:has(#map.fullscreen) .leaflet-control-info-wrap,
  body:has(#map.fullscreen) .leaflet-control-theme-wrap,
  body:has(#map.fullscreen) .leaflet-control-legend,
  body:has(#map.fullscreen) .leaflet-control-attribution,
  body:has(#map.fullscreen) .leaflet-control-settings-wrap,
  body:has(#map.fullscreen) #map .leaflet-control-user-location-wrap,
  body:has(#map.fullscreen) #map-ui-clone,
  body:has(#map.fullscreen) #map-ui {
    display: none !important;
  }
}

/* Barva pisave izbirnika slojev */
.leaflet-control-layers,
.leaflet-control-layers label,
.leaflet-control-layers span,
.leaflet-layers-panel,
.leaflet-layers-panel label,
.leaflet-layers-panel span {
  color: white !important;
}

/* Ensure no borders on sections that could show light stripes */
.leaflet-control-layers-expanded .leaflet-control-layers-base, .leaflet-layers-panel .leaflet-control-layers-base,
.leaflet-control-layers-expanded .leaflet-control-layers-overlays, .leaflet-layers-panel .leaflet-control-layers-overlays {
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Extra space above the divider line before Sloji */
.leaflet-control-layers-expanded .leaflet-control-layers-base,
.leaflet-layers-panel .leaflet-control-layers-base {
  padding-bottom: 14px !important;
}

/* Add padding to overlays section for spacing before reset button */
.leaflet-control-layers-expanded .leaflet-control-layers-overlays {
  padding-bottom: 15px !important;
}
.leaflet-layers-panel .leaflet-control-layers-overlays {
  padding-bottom: 0 !important;  /* no gap above ponastavi in panel */
}

/* Default transparent background for layer items */
.leaflet-control-layers .leaflet-control-layers-list label,
.leaflet-layers-panel .leaflet-control-layers-list label {
  background: transparent !important;
}

/* No background change on hover for layer labels – circles/squares still change */
.leaflet-control-layers .leaflet-control-layers-list label:hover,
.leaflet-layers-panel .leaflet-control-layers-list label:hover,
.leaflet-control-layers .leaflet-control-layers-selector:hover + label,
.leaflet-layers-panel .leaflet-control-layers-selector:hover + label {
  background: transparent !important;
  color: white !important;
}

/* Stil info ikone in okna z napisom */

/* Ikona */
.info-icon {
  display: inline-flex;           /* da lahko centriramo vsebino */
  justify-content: center;        /* horizontalno centrirano */
  align-items: center;            /* vertikalno centrirano */
  width: 18px;                    /* premer kroga */
  height: 18px;                   /* enako višino */
  border: 1px solid white;      /* bela obroba */
  border-radius: 50%;             /* da je krog */
  color: white;                 /* barva črke i */
  font-weight: bold;              /* debela črka za vidnost */
  font-size: 12px;                /* velikost črke */
  background-color: #333333;    /* ozadje ikone */
  margin-left: 5px;               /* razmik od sliderja */
  cursor: default;                /* kazalec na hover */
  position: relative;             /* za tooltip pozicioniranje, če boš dodal */
}

/* Info popup panel – same logic/style/position as layers panel (.leaflet-layers-panel) */
.info-tooltip {
  position: fixed;
  /* top/right set by JS from info button rect, same as layers panel */
  width: 350px;
  padding: 6px 16px 8px 16px !important;  /* match left/right padding of layers panel */
  box-sizing: border-box !important;
  background: rgba(26, 26, 26, 0.88) !important;
  color: white !important;
  font-size: 13px;
  font-weight: normal;
  font-family: "Nunito Sans", sans-serif;
  text-align: left;
  border-radius: 5px;
  white-space: normal;
  opacity: 1;
  transition: background-color 400ms ease-in-out;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  z-index: 1999;
}

.info-tooltip.open {
  opacity: 1;
}

/* Light mode only: info popup panel – darker background */
body[data-theme="light"] .info-tooltip {
  background: rgba(24, 24, 24, 0.86) !important;
}

@media (min-width: 1025px) {
  .info-tooltip {
    background: rgba(26, 26, 26, 0.55) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  /* Light mode only: desktop info popup – darker background */
  body[data-theme="light"] .info-tooltip {
    background: rgba(26, 26, 26, 0.68) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* Full-screen info panel is defined inside @media (max-width: 640px) only (same logic as settings panel). */

/* Attribution block only shown in mobile full-screen info panel; hidden in desktop popup */
.info-tooltip .info-tooltip-attribution {
  display: none;
}

.info-tooltip-content {
  margin-top: 28px;   /* space for close button, same as .leaflet-layers-panel .leaflet-control-layers-list */
  padding: 0 !important;
  display: block;
  font-family: "Nunito Sans", sans-serif;
  line-height: 1.4;
}

/* Desktop/mobile default style for info title – match PODLAGE title */
.info-panel-title {
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #999;
  margin-bottom: 8px;
  text-transform: uppercase;
  margin-left: -2px; /* slight nudge so title aligns visually with body text/PODLAGE */
}

/* Light mode only: INFORMACIJE title – tiny bit brighter */
body[data-theme="light"] .info-panel-title {
  color: #a8a8a8;
}

/* Desktop: show "na spodnji desni strani interaktivnega zemljevida", hide "spodaj" */
.info-tooltip-content .info-sentence-mobile { display: none; }
.info-tooltip-content .info-sentence-desktop { display: inline; }

@media (max-width: 640px) {
  .info-tooltip-content .info-sentence-desktop { display: none; }
  .info-tooltip-content .info-sentence-mobile { display: inline; }
}

/* Close button – same as .leaflet-control-layers-close */
.info-tooltip-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: #ff6b6b;
  background: transparent;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-tooltip-close:hover {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.18);
}

/* Info icon active state (clicked): same as hover – same fill as theme button, yellow outline and "i" */
.info-icon.active {
  background-color: rgba(31, 31, 31, 0.70) !important;
  border-color: #fbb104;
  color: #fbb104;
}

/* odmik nad gumbom "ponastavi prikaz slojev" (vstavljen v JS) */
.leaflet-reset-layers-spacer {
  display: block !important;
  height: 18px !important;
  min-height: 18px !important;
  width: 100%;
}
.leaflet-layers-panel .leaflet-reset-layers-spacer {
  height: 8px !important;
  min-height: 8px !important;
}

/* ikona ↩ v gumbu ponastavi – v skladu z velikostjo besedila */
.leaflet-reset-layers-icon {
  display: inline-block;
  font-size: 1.3em;
  line-height: 1;
  vertical-align: middle;
  margin-right: 8px;
}
.leaflet-layers-panel .leaflet-reset-layers-icon {
  margin-left: -2px;  /* slight shift left to align with circles/squares */
}

/* gumb oz. napis za ponastavitev slojev in zemljevida na privzete nastavitve */
.leaflet-reset-layers {
  display: block !important;  /* za pravilno velikost */
  box-sizing: border-box !important; /* padding šteje v dimenzije */
  min-width: 155px;                  /* minimalna širina */
  min-height: 27px;                  /* minimalna višina */
  margin: 8px 0 0 0 !important;      /* enak levi rob kot ostala vsebina panela */
  padding-left: 0 !important;        /* poravnava z radiji/checkboxi in naslovi */
  background: transparent !important;
  border: none !important;         /* Remove all borders */
  border-radius: 3px;              /* zaobljeni robovi kot ostali gumbi */
  font-family: "Nunito Sans", sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #999;         /* same grey as PODLAGE/Sloji titles */
  cursor: pointer;
  text-align: left;                  /* poravnava na levo */
}
/* Desktop: short label via ::after; long label (for mobile) hidden */
.leaflet-reset-layers .leaflet-reset-layers-label {
  display: none;
}
.leaflet-reset-layers::after {
  content: ' ponastavi';
  position: relative;
  top: -3px; /* nudge text further up without changing horizontal alignment */
}
.leaflet-reset-layers .leaflet-reset-layers-icon {
  color: #ff6b6b;        /* icon red by default */
}

/* Ensure red icon specifically inside the layers panel on desktop */
.leaflet-layers-panel .leaflet-reset-layers .leaflet-reset-layers-icon {
  color: #ff6b6b !important;
}

.leaflet-reset-layers:hover {
  background: transparent !important;
  color: #ff6b6b !important;  /* text turns red on hover */
}
.leaflet-control-layers .leaflet-reset-layers:hover .leaflet-reset-layers-icon,
.leaflet-layers-panel .leaflet-reset-layers:hover .leaflet-reset-layers-icon {
  color: #ff6b6b !important;  /* refresh icon turns red on hover */
}

/* Additional spacing for the reset button in the layers list */
.leaflet-control-layers-list .leaflet-reset-layers {
  margin-top: 8px !important;
}
.leaflet-layers-panel .leaflet-reset-layers {
  margin-top: 4px !important;  /* slight gap above ponastavi in panel */
}

/* Light mode: ponastavi text – same color as PODLAGE/Sloji titles */
body[data-theme="light"] .leaflet-layers-panel .leaflet-reset-layers {
  color: #a8a8a8 !important;
}
/* Light mode: ponastavi hover – text and icon turn red (same as dark mode) */
body[data-theme="light"] .leaflet-layers-panel .leaflet-reset-layers:hover {
  color: #ff6b6b !important;
}
body[data-theme="light"] .leaflet-layers-panel .leaflet-reset-layers:hover .leaflet-reset-layers-icon {
  color: #ff6b6b !important;
}

/* Accuracy krog: brez focus okvirja in brez "pointer" kazalca ob kliku */
.leaflet-interactive.user-location-accuracy-circle {
  cursor: default !important;
  outline: none !important;
}

.leaflet-interactive.user-location-accuracy-circle:focus {
  outline: none !important;
}

/* Tooltip območja natančnosti lokacije in napisi krajev ob hover – pisava Nunito Sans kot v starejših verzijah */
.leaflet-tooltip.tooltip-kraj-hover {
  display: inline-block !important;
  padding: 1px 4px !important;
  background: rgba(255, 255, 255, 0.75) !important;
  outline: 2px solid rgba(255, 255, 255, 0.75) !important;
  border: none !important;
  box-shadow: none !important;
  color: black !important;
  font-family: "Nunito Sans", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-shadow: 0 0 0 #fff, 0 0 0 #fff !important;
  white-space: nowrap !important;
  border-radius: 2px !important;
}
.leaflet-tooltip.tooltip-kraj-hover::before {
  display: none !important;
}

/* Modal: izvoz animacije */
.export-dialog-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.55);
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1025px) {
  .export-dialog-overlay {
    top: var(--nav-top-offset, 70px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.45);
  }
}

.export-dialog {
  width: min(84vw, 220px);
  background: rgba(40, 40, 40, 0.9);
  color: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
  padding: 16px 16px 12px;
  margin: 0;
  font-family: "Nunito Sans", sans-serif;
  border-radius: 6px;
  border: none;
  position: relative;
}

/* Light mode: GIF export popup – slightly brighter background (blur overlay unchanged) */
body[data-theme="light"] .export-dialog {
  background: rgba(58, 58, 58, 0.9) !important;
}

@media (max-width: 1024px) {
  .export-dialog-overlay {
    top: var(--nav-top-offset, 70px);
    align-items: flex-start;
    justify-content: stretch;
    padding-top: 0;
    z-index: 13000;
    background: transparent;
  }

  /* Blur on pseudo-element so fixed-position children (X button) aren't affected */
  .export-dialog-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(40, 40, 40, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: -1;
    pointer-events: none;
  }
  body[data-theme="light"] .export-dialog-overlay::before {
    background: rgba(58, 58, 58, 0.7) !important;
  }

  .export-dialog {
    width: 100%;
    min-height: calc(100vh - 60px);
    height: auto;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    /* Match vertical spacing of mobile settings header relative to fixed X */
    padding: 56px 16px 20px;
    overflow-y: auto;
    background: transparent;
  }

  .export-dialog-close {
    position: fixed !important;
    top: calc(var(--nav-top-offset, 70px) + 14px) !important;
    right: 14px !important;
    z-index: 13001 !important;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 20px;
    font-weight: bold;
    color: #fbb104;
    background: #333333;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .export-dialog .export-dialog-title {
    /* Match mobile settings title (NASTAVITVE) */
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #999 !important;
    margin: 0 0 18px 0 !important;
  }

  .export-dialog .export-dialog-section-label {
    font-size: 17px !important;
    font-weight: normal !important;
    letter-spacing: 0.05em !important;
    margin: 24px 0 12px 0 !important;
  }

  .export-dialog-interval-options label {
    font-size: 15px !important;
    min-height: 28px !important;
    margin: 8px 0 !important;
    line-height: 1.4 !important;
    align-items: center !important;
  }

  .export-dialog-interval-options label span {
    transform: translateY(0) !important;
  }

  .export-dialog-interval-options input[type="radio"] {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 0 4px 0 0 !important;
  }

  .export-dialog-select {
    font-size: 15px;
    min-height: 28px;
  }

  .export-dialog .export-dialog-actions {
    margin-top: 80px;
  }

  .export-dialog-btn {
    font-size: 24px;
    height: 56px;
  }
}

.export-dialog-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: #ff6b6b;
  background: transparent;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile / tablet: make GIF close button match the circular menu close button */
@media (max-width: 1024px) {
  .export-dialog-close {
    position: fixed !important;
    top: calc(var(--nav-top-offset, 70px) + 14px) !important;
    right: 14px !important;
    z-index: 13001 !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #ff6b6b !important;
    background: #333333 !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (min-width: 1025px) {
  .export-dialog-close:hover {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.18);
  }
}

.export-dialog div {
  margin: 0;
}

.export-dialog .export-dialog-title {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #999999;
  margin: 14px 0 18px 0;
}

.export-dialog .export-dialog-section-label {
  font-size: 0.95rem;
  opacity: 0.9;
  margin: 20px 0 8px 0;
}

.export-dialog .export-dialog-interval-options {
  margin: 4px 0 16px 0;
}

.export-dialog-interval-options label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  padding-left: 0;
  margin: 4px 0;
  font-size: 13px;
  color: #999999;
}

.export-dialog-interval-options label input[type="radio"] {
  transform: translateY(1px);
}

.export-dialog-interval-options label:last-child {
  margin-bottom: 0;
}

.export-dialog-interval-options input[type="radio"] {
  box-sizing: border-box;
  width: 13px;
  min-width: 13px;
  height: 13px;
  min-height: 13px;
  margin: 4px 2px 0 0;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.15);
}

.export-dialog-interval-options input[type="radio"]:not(:checked):hover {
  background: #787878;
  border-color: #7a7a7a;
}

.export-dialog-interval-options input[type="radio"]:checked {
  border: 1.5px solid #fbb104;
  background: #fbb104;
}

.export-dialog .export-dialog-note {
  font-size: 0.8rem;
  opacity: 0.75;
  margin: 2px 0 18px 0;
  padding-left: 2px;
}

.export-dialog-select {
  display: block;
  width: 100%;
  margin: 0 0 18px 0;
  padding: 6px 28px 6px 8px;
  /* Cross-browser: remove native select look so Safari/DuckDuckGo match Chrome */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Dark grey fill, light grey text, subtle border, custom chevron */
  background-color: #3d3d3d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  color: #b0b0b0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}
.export-dialog-select:hover {
  border-color: rgba(255, 255, 255, 0.22);
}
.export-dialog-select:focus {
  outline: none;
  border-color: #fbb104;
  box-shadow: 0 0 0 1px #fbb104;
}

.export-dialog.export-range-custom select[data-role="export-range-mode"] {
  margin-bottom: 6px;
}

.export-dialog .export-dialog-time-label {
  margin: 0 8px 4px 8px;
}

.export-dialog .export-dialog-time-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 0;
  margin: 0 8px 14px 8px;
  padding: 0;
  box-sizing: border-box;
}

.export-dialog .export-dialog-time-caption {
  font-size: 0.8rem;
  opacity: 0.8;
  line-height: 1;
  margin: 5px;
  align-self: end;
  transform: translateY(1px);
}

.export-dialog-time-caption--from {
  grid-column: 1;
  grid-row: 1;
}

.export-dialog-time-caption--to {
  grid-column: 3;
  grid-row: 1;
}

.export-dialog-time-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 6px 8px;
  box-sizing: border-box;
  background: #333333;
  color: #fff;
  border: 0;
}

.export-dialog-time-input--from {
  grid-column: 1;
  grid-row: 2;
}

.export-dialog-time-input--to {
  grid-column: 3;
  grid-row: 2;
}

.export-dialog .export-dialog-time-separator {
  opacity: 0.75;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1.05rem;
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}

.export-dialog .export-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 22px 0 4px 0;
}

.export-dialog-btn {
  height: 34px;
  padding: 0;
  cursor: pointer;
  color: #999999;
  background-color: transparent;
  border: none;
  border-radius: 0;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  gap: 2px;
}

@media (max-width: 1024px) {
  .export-dialog .export-dialog-actions {
    margin-top: 40px !important;
    margin-bottom: 12px !important;
  }

  .export-dialog-btn {
    height: 40px !important;
    font-size: 16px !important;
    color: #fbb104 !important; /* yellow text on mobile */
  }
}

.export-dialog-btn:hover {
  color: #fbb104;
  background-color: transparent;
  border-color: transparent;
}

.export-dialog-btn .export-dialog-btn-icon .icon-download {
  fill: #fbb104;
  width: 1.9em;
  height: 1.9em;
  transform: translate(3px, 1px); /* slight nudge right + down for alignment */
}

/* Progress state: same dialog box, form hidden, progress message shown */
/* Desktop only: blurred overlay so map is blurred during export (spinner section) */
@media (min-width: 1025px) {
  .export-dialog-overlay--progress {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.35) !important;
  }

  .export-dialog-overlay--progress::before {
    display: none !important;
  }
}

/* In progress state, dialog is a flex column so the progress block can fill and push content down */
.export-dialog--progress {
  display: flex !important;
  flex-direction: column !important;
}

.export-dialog-progress {
  display: none;
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: flex-end;
  padding: 24px 16px 28px;
}

.export-dialog--progress .export-dialog-progress {
  display: flex;
}

.export-dialog-progress .export-progress-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75em;
  padding-bottom: 8px;
}

/* Message text (second child div) – keep centered */
.export-dialog-progress .export-progress-content > div:nth-child(2) {
  margin: 0;
  color: #fff;
  text-align: center;
}

.export-dialog-progress .export-progress-spinner {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  min-width: 64px;
  min-height: 64px;
  max-width: 64px;
  max-height: 64px;
  border-width: 5px;
  border-style: solid;
  border-color: rgba(251, 177, 4, 0.3);
  border-top-color: #fbb104;
}

/* Cancel button: absolutely at bottom so spinner+text stay centred */
.export-dialog-cancel-btn {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 10px 24px;
  background: transparent;
  color: #ff6b6b;
  border: 2px solid transparent; /* reserve space so text doesn't shift on hover */
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.export-dialog-cancel-btn:hover {
  background: transparent;
  color: #ff6b6b;
  border-color: #ff6b6b;
}

/* Progress content: spinner and text centred; reserve space at bottom for button */
.export-dialog-progress .export-progress-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75em;
  padding-bottom: 56px;
  min-height: 200px;
  justify-content: center;
}

/* Hide close button during progress */
.export-dialog--progress .export-dialog-close {
  display: none !important;
}

/* Mobile: progress dialog full screen; spinner and text centred in the screen */
@media (max-width: 1024px) {
  .export-dialog--progress {
    min-height: calc(100vh - 60px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .export-dialog--progress .export-dialog-progress {
    display: flex !important;
    width: 100%;
    flex: 1;
    justify-content: center !important;
    align-items: center !important;
  }

  .export-dialog--progress .export-dialog-progress .export-progress-content {
    gap: 2.25em;
    transform: translateY(-8vh);
    min-height: 300px;
  }

  .export-dialog--progress .export-dialog-progress .export-progress-content > div:nth-child(2) {
    max-width: 11em;
    text-align: center;
  }

  .export-dialog--progress .export-dialog-progress .export-progress-spinner {
    width: 88px;
    height: 88px;
    min-width: 88px;
    min-height: 88px;
    max-width: 88px;
    max-height: 88px;
    border-width: 6px;
  }

  .export-dialog--progress .export-dialog-close {
    display: none !important;
  }

  .export-dialog-cancel-btn {
    bottom: 24px;
    padding: 12px 32px;
    font-size: 1rem;
  }
}

.export-progress-blocker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(0, 0, 0, 0);
  pointer-events: auto;
}

.export-progress-notice {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  padding: 1em 2em;
  background-color: rgba(43, 43, 43, 0.7);
  color: #fff;
  font-size: 1.2em;
  border-radius: 0;
}

.export-progress-notice div {
  margin: 0;
}

.export-progress-content {
  display: flex;
  align-items: center;
  gap: 1em;
}

.export-progress-spinner {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  max-width: 24px;
  max-height: 24px;
  border: 4px solid #fff;
  border-top: 4px solid transparent;
  border-radius: 50%;
  animation: export-spinner-spin 1s linear infinite;
}

@keyframes export-spinner-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Period picker modal (začetni / končni termin) – no overlay darkening, subtle shadow like layers popup */
.period-picker-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: transparent;
  z-index: 12000;
  display: block;
}

.period-picker-dialog {
  width: min(92vw, 365px);
  box-sizing: border-box;
  background: rgba(26, 26, 26, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  padding: 16px 16px 6px;
  border-radius: 8px;
  position: absolute;
  font-family: "Nunito Sans", sans-serif;
  top: 0;
  left: 0;
}

/* Light mode: period picker – same background and title color as layers/info popup */
body[data-theme="light"] .period-picker-dialog {
  background: rgba(24, 24, 24, 0.86) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
}
@media (min-width: 1025px) {
  body[data-theme="light"] .period-picker-dialog {
    background: rgba(26, 26, 26, 0.68) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}
body[data-theme="light"] .period-picker-dialog .period-picker-title {
  color: #a8a8a8 !important;
}

.period-picker-dialog .period-picker-title,
.period-picker-dialog .period-picker-row,
.period-picker-dialog .period-picker-error,
.period-picker-dialog .period-picker-actions {
  margin-left: 0;
  margin-right: 0;
}

.period-picker-dialog .period-picker-date-time,
.period-picker-dialog .period-picker-date-wrap {
  margin: 0;
  padding: 0;
}

@media (max-width: 1024px) {
  .period-picker-overlay {
    top: var(--nav-top-offset, 70px);
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .period-picker-dialog {
    position: relative !important;
    width: 100% !important;
    min-height: 100% !important;
    top: auto !important;
    left: auto !important;
    box-sizing: border-box;
    margin: 0;
    padding: 0 16px 10px 16px;
    overflow-y: auto;
    border-radius: 0;
    box-shadow: none;
    background: rgba(26, 26, 26, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  body[data-theme="light"] .period-picker-dialog {
    background: rgba(24, 24, 24, 0.86) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  .period-picker-close {
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 12001 !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #ff6b6b !important;
    background: #333333 !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  }

  .period-picker-dialog .period-picker-title {
    padding: 56px 56px 14px 0;
    margin: 0 0 4px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999;
  }

  .period-picker-dialog .period-picker-row {
    padding: 10px 0;
    margin: 0;
  }

  .period-picker-dialog .period-picker-row + .period-picker-row {
    margin-top: 6px;
  }

  .period-picker-dialog > .period-picker-row + .period-picker-row {
    margin-top: 12px !important;
  }

  .period-picker-dialog .period-picker-label {
    margin-bottom: 6px;
  }

  .period-picker-dialog .period-picker-date-time {
    width: 100%;
  }

  .period-picker-dialog .period-picker-date-wrap .period-picker-date {
    min-width: 0;
    max-width: none;
    flex: 1;
  }

  .period-picker-dialog .period-picker-actions {
    margin-top: 0;
    padding: 0;
    margin-right: -16px; /* cancel dialog right padding so button can hug popup edge */
  }

  .period-picker-dialog .period-picker-btn-confirm {
    transform: none;
  }

  .period-picker-dialog .period-picker-error {
    margin: 10px 0 0 0;
  }

  /* Mobile: confirm button styling */
  .period-picker-dialog .period-picker-btn-confirm {
    color: #fbb104;
    padding: 10px 22px;
    font-size: 1rem;
    margin-right: 0;
  }

  .period-picker-dialog .period-picker-btn-confirm .period-picker-btn-tick {
    width: 30px;
    height: 30px;
  }
}

.period-picker-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 16px;
  color: #ff6b6b;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.period-picker-close:hover {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.18);
}

.period-picker-title {
  margin: 14px 0 18px 0;
  font-size: 12px;
  font-weight: bold;
  color: #999;
  text-transform: uppercase;
}

.period-picker-row {
  margin-bottom: 6px;
  margin-left: 0;
  margin-right: 0;
}

.period-picker-row:last-of-type {
  margin-bottom: 0;
}

.period-picker-row + .period-picker-row {
  margin-top: 16px;
}

.period-picker-dialog > .period-picker-row + .period-picker-row {
  margin-top: 18px !important;
}

.period-picker-label {
  display: block;
  font-size: 0.9rem;
  margin: 0 0 6px 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.9);
  width: 100%;
  box-sizing: border-box;
}

.period-picker-date-time {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.period-picker-date-wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
}

.period-picker-date-wrap .period-picker-date {
  flex: 1;
  min-width: 130px;
  max-width: 160px;
}

.period-picker-arrow {
  flex-shrink: 0;
  width: 34px;
  height: 36px;
  padding: 0;
  font-size: 1.25rem;
  color: #b0b0b0;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

/* Optically center left arrows (glyph often has built-in right bias); negative margin keeps gap to date box unchanged */
.period-picker-arrow[data-action$="prev"] {
  transform: translateX(-10px);
  margin-right: -10px;
}

.period-picker-arrow:hover {
  color: #fbb104;
  background: transparent;
}

.period-picker-date,
.period-picker-time {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 8px 10px;
  height: 36px;
  font-size: 0.95rem;
  color: #c8c8c8;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  box-sizing: border-box;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease;
}

.period-picker-dialog .period-picker-date:focus,
.period-picker-dialog .period-picker-date:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: #fbb104 !important;
}

.period-picker-dialog .period-picker-time:focus,
.period-picker-dialog .period-picker-time:focus-visible {
  outline: none !important;
  border-color: #fbb104 !important;
  box-shadow: 0 0 0 1px #fbb104 !important;
}

.period-picker-dialog .period-picker-date::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0 2px 0 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: #fbb104;
  background-image: none;
}

.period-picker-dialog .period-picker-time::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0 2px 0 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: #fbb104;
  background-image: none;
}

.period-picker-time {
  flex: 0 0 100px;
  min-width: 100px;
}

.period-picker-error {
  margin: 10px 0 0 0;
  font-size: 0.85rem;
  color: #e57373;
  line-height: 1.2;
  min-height: 1.2em;
  max-height: 1.2em;
  overflow: hidden;
  visibility: hidden;
}

.period-picker-error.is-visible {
  visibility: visible;
}

.period-picker-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0;
}

.period-picker-btn {
  padding: 8px 18px;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.period-picker-btn-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  transform: translateX(20px);
  background: transparent;
  color: #fff;
  border: none;
}

.period-picker-btn-confirm .period-picker-btn-tick {
  color: #fbb104;
  flex-shrink: 0;
  transition: color 0.2s;
}

.period-picker-btn-confirm:hover {
  color: #fbb104;
  background: transparent;
}

.period-picker-btn-confirm:hover .period-picker-btn-tick {
  color: #fbb104;
}

.gif-capture-container {
  position: absolute;
  top: -10000px;
  left: -10000px;
  z-index: -1;
  overflow: hidden;
  display: block;
}

.gif-capture-map {
  flex: none;
  position: absolute;
  top: 0;
  left: 0;
}