/*----------------------------------------------------------------------------------------------
Name:   gpsOem.css,
Name:   gpsVision.css
Name:   watcheeTrack.css
Author: mr@marcelruff.info
class="xy"  --> .xy
id="xy"     --> #xy
Background grey: #e6e6e6
Background blue: #377CB1  Decimal: 55 124 177
FgColor  orange: #ee7d13   Decimal: 238 125 19
----------------------------------------------------------------------------------------------*/

* {
  font-family: sans-serif;
}

/* MapInfoGui.js */
div.scroll-container {
  /* background-color: #333; */
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}

/* MapInfoGui.js */
div.scroll-container img {
  padding: 10px;
}

/* watcheeTrack.css */
span.headerWatchee {
  color: #ee7d13;
  font-size: x-large;
  font-weight: bold;
  font-style: italic;
  margin-left: 10px;
  vertical-align: top;
}

span.headerForstware1 {
  padding-top: 12px;
  color: green;
  font-size: 32px;
  font-family: 'Agfa Rotis Semisans ExBd';
}

span.headerForstware2 {
  padding-top: 12px;
  color: black;
  font-size: 32px;
  font-family: 'Agfa Rotis Semisans';
}

/**
 * XSMS display for info window in google map
 */
th.xsmsMapLabel,
td.xsmsMapLabel,
th.gpsMapLabel,
td.gpsMapLabel {
  /* background-color: #888888; */
  /* color: white; */
  font-size: 12px;
}

/**
 * XSMS display for info window in google map
 */
td.xsmsMapValue,
td.gpsMapValue,
td.xsmsMapBody {
  /* padding-top: 3px; */
  /* padding-bottom: 3px; */
  /* padding-left: 5px; */
  max-width: 300px;
  word-wrap: break-word;
  padding-right: 5px;
  /* background-color: #CCCCCC; */
  /* text-align: left; */
  font-size: 11px;
}

td.gpsMapValue0 {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  valign: middle;
  /* background-color: #CCCCCC; */
  text-align: left;
  font-size: 11px;
}

/**
 * XSMS display for info window in google map
 */
td.xsmsMapValue {
  text-align: center;
}


/** lbg https://www.lbg.baden-wuerttemberg.de/startseite see js/oem_iconmappings.js */
.logo1 {
  max-width: 210px;
  min-height: 35px;
  background: url("../images/Kunden/lbg/wappen.png") no-repeat;
  display: inline-block;
  margin-left: 10px;
  margin-top: 10px;
  padding-left: 40px;
  font-family: 'EB Garamond', serif;
  font-size: 16px;
  color: #000;
  line-height: 20px
}

.logo2 {
  width: 99px;
  height: 35px;
  background: url("../images/Kunden/lbg/LUBW_logo.png") no-repeat;
  margin-top: 20px;
  display: inline-block;
  /* float: right */
}

.baloon-wrapper {
  width: 90vw;
  /* Wrapper takes 90% of the viewport width */
  max-width: 1000px;
  /* Limits max width */
  width: 100%;
  border: 2px solid #ccc;
  background: white;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  /* Prevents any horizontal overflow */
}

.baloon-image-container {
  display: flex;
  overflow-x: auto;
  /* Enables horizontal scrolling */
  overflow-y: hidden;
  /* No vertical scroll */
  max-width: 100%;
  /* Ensures it never exceeds the wrapper */
  white-space: nowrap;
  gap: 10px;
  /* Adds space between images */
  scrollbar-width: thin;
  /* Firefox */
  scrollbar-color: gray lightgray;
}

/* Custom scrollbar for WebKit browsers */
.baloon-image-container::-webkit-scrollbar {
  height: 10px;
  background: #ddd;
}

.baloon-image-container::-webkit-scrollbar-thumb {
  background: gray;
  border-radius: 4px;
}

.baloon-image-container img {
  height: 312px;
  /* Uniform height */
  object-fit: cover;
  /* Ensures images fit nicely */
  border-radius: 10px;
  /* Rounded corners */
  border: 3px solid #ffffff;
  /* White border */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  /* Soft shadow effect */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* =====================================
 @see track.form.cellrenderer.HorizontalBar.js

 Smooth animated green and red bars.

 * Label that fades in and sharpens after 1 second.
 * Animated shimmer and particle trail during bar fill.
 * All animations automatically stop after ~4 seconds.
 * Optimized for performance even with hundreds of bars.
 * All is GPU accelerated with no load on main thread
 */
.horizontal-bar-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  font-family: sans-serif;
  box-sizing: border-box;
  /* border: 1px solid #ccc; */
  border: none;
  /* margin: 4px 8px;  vertical + horizontal gap */
  border-radius: 4px;           /* Smooth inner corners */
}

/* Introduced as wrapper for horizontal-bar-container, as vertical alignement was not nice (at top) */
.horizontal-bar-wrapper {
  width: 100%;
  height: 100%;
  padding: 2px 0px;               /* uniform gap around bar */
  margin: 0px;
  box-sizing: border-box;
  border-radius: 6px;           /* Rounded corners */
}

/* ========== Green (filled) Bar ========== */
.horizontal-bar-container .bar.green {
  background-color: green;
  width: 0%;
  transition: width 2s cubic-bezier(0.22, 1.61, 0.36, 1);
  position: relative;
  overflow: hidden;

  /* Shimmer effect */
  background-image: linear-gradient(120deg,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0.2));
  background-size: 200% 100%;
  animation: shimmer 1s linear infinite;
  animation-iteration-count: 4;
  animation-fill-mode: forwards;
}

/* Particle trail effect */
.horizontal-bar-container .bar.green::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%) 0 0 / 6px 6px,
    radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%) 10px 4px / 4px 4px,
    radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%) 20px 2px / 5px 5px;
  background-repeat: no-repeat;
  animation: particleTrail 1s linear infinite;
  animation-iteration-count: 4;
  animation-fill-mode: forwards;
  opacity: 0.6;
}

/* ========== Red (remaining) Bar ========== */
.horizontal-bar-container .bar.red {
  background-color: red;
  width: 100%;
  transition: width 2s cubic-bezier(0.22, 1.61, 0.36, 1);
}

/* ========== Black Indicator Line ========== */
.horizontal-bar-container .bar-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: black;
  transition: left 2s cubic-bezier(0.22, 1.61, 0.36, 1);
}

/* ========== Label ========== */
.horizontal-bar-container .bar-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-shadow: 0 0 2px black;

  /* Start hidden and blurred */
  opacity: 0;
  filter: blur(8px);
  transition:
    opacity 2.5s cubic-bezier(0.4, 0, 0.2, 1),
    filter 2.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.horizontal-bar-container .bar-label.visible {
  opacity: 1;
  filter: blur(0);
}

/* ========== Animations ========== */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes particleTrail {
  0% {
    background-position: 0 0, 10px 4px, 20px 2px;
    opacity: 0.7;
  }

  50% {
    background-position: -20px 5px, -10px 8px, -30px 4px;
    opacity: 0.4;
  }

  100% {
    background-position: -40px 10px, -20px 12px, -60px 8px;
    opacity: 0;
  }
}

.horizontal-bar-container .thumbs-up {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11.5px;
  /* 🔧 tested to visually center the emoji */
  line-height: 1;
  opacity: 0;
  animation: thumbsUpAppear 0.4s ease-in forwards, thumbsUpDisappear 1s ease-out forwards;
  animation-delay: 0s, 4s;
  pointer-events: none;
  z-index: 3;
}

@keyframes thumbsUpAppear {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.5);
  }

  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

@keyframes thumbsUpDisappear {
  to {
    opacity: 0;
    transform: translateY(-50%) scale(0.9);
  }
}

/**
 * @see track.form.cellrenderer.Spinner.js
 * Creates a CPU-light, GPU-accelerated waiting spinner inside an HTML5 <div>
 */
 .cellrenderer-spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* assume parent sets height */
  width: 100%;
  overflow: hidden;
}

/** first variant: a blue cicle rotating: BLUE_CIRCLE */
.cellrenderer-spinner {
  height: 60%;              /* 📏 Scale based on container height */
  aspect-ratio: 1 / 1;      /* 🌀 Keep perfect circle */
  border: 0.25em solid transparent;
  border-top-color: #4fc3f7;
  border-radius: 50%;
  animation: cellrenderer-spin 1s linear infinite;
  will-change: transform;
}

/* GPU-accelerated rotation */
@keyframes cellrenderer-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/** second variant: A blue dot rotating: style == BLUE_DOT */
.cellrenderer-spinner-orbit {
  height: 60%;
  aspect-ratio: 1 / 1;
  position: relative;
  animation: orbit-spin 1.2s linear infinite;
  will-change: transform;
}

.cellrenderer-spinner-orbit .dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 20%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background-color: #4fc3f7;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(79, 195, 247, 0.6);
}

@keyframes orbit-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/** style == SATURN */
.cellrenderer-spinner-orbit {
  height: 60%;
  aspect-ratio: 1 / 1;
  position: relative;
  will-change: transform;
  animation: orbit-spin-primary 1.2s linear infinite;
}

/* Primary Dot - fast, inner moon */
.primary-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 20%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background-color: #4fc3f7;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(79, 195, 247, 0.6);
}

/* Secondary Dot - slow, outer ring */
.secondary-dot {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 14%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background-color: #81d4fa;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(129, 212, 250, 0.5);
  animation: orbit-spin-secondary 2.5s linear infinite;
  will-change: transform;
}

/* Animations */
@keyframes orbit-spin-primary {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes orbit-spin-secondary {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}