/* -------------------------------- */
/* MARKEN-THEME: F7-Akzentfarbe grün */
/* (statt iOS-Default-Blau #007aff)  */
/* -------------------------------- */
:root {
  --f7-theme-color: #2d6a1a;
  --f7-theme-color-rgb: 45, 106, 26;
  --f7-theme-color-shade: #245515;
  --f7-theme-color-tint: #3d8b24;
}

/* -------------------------------- */
/* GLOBAL: Textselektion verhindern */
/* -------------------------------- */
* {
  -webkit-user-select: none;
  user-select: none;
}
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

/* -------------------------------- */
/* APP-ZOOM                         */
/* Zoom sitzt auf html (index.html) */
/* Livemap wird zurückgesetzt damit */
/* Mapbox-Touch-Koordinaten stimmen */
/* -------------------------------- */

/* Livemap: Zoom nur auf den Kartencontainer aufheben (1 / 1.3 ≈ 0.769)
   damit Mapbox-Touch-Koordinaten stimmen */
#livemap-map-wrapper {
  zoom: 1;
}

/* Navbar auf allen Seiten auf Normalgröße zurücksetzen */
.navbar {
  zoom: 1;
}

/* -------------------------------- */
/* CALENDAR POPOVER – weißer HG     */
/* (Sheet-Backdrop scheint sonst    */
/*  durch das Popover durch)        */
/* -------------------------------- */

.calendar-popover,
.popover.calendar-popover {
  background: #ffffff !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.calendar-popover .popover-inner,
.calendar-popover .calendar,
.calendar-modal,
.calendar-modal .calendar {
  background: #ffffff !important;
  opacity: 1 !important;
}

/* -------------------------------- */
/* TOAST – solider Hintergrund      */
/* (ältere Geräte: kein backdrop)   */
/* -------------------------------- */

.toast {
  background: #1c1c1e !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.toast .toast-text {
  color: #ffffff !important;
}

/* -------------------------------- */
/* FRAMEWORK7 GLASS PILL ENTFERNEN  */
/* -------------------------------- */

.navbar-inner .left,
.navbar-inner .right {
  background-color: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* -------------------------------- */
/* FRAMEWORK7 ROUTER SLIDE ENTFERNEN */
/* -------------------------------- */

.router-transition-forward,
.router-transition-backward {
  animation: none !important;
}

.page-next,
.page-previous {
  transform: none !important;
}

/* -------------------------------- */
/* FADE TRANSITION STATT SLIDE */
/* -------------------------------- */

.page {
  transition: opacity 0.25s ease;
}

.router-transition-forward .page-current,
.router-transition-backward .page-current {
  opacity: 0;
}

.router-transition-forward .page-current.page-current,
.router-transition-backward .page-current.page-current {
  opacity: 1;
}

/* Tabbar klar und abgehoben */
#main-tabbar {
  backdrop-filter: none !important; /* kein Blur */
  background-color: var(--f7-bars-bg-color, #ffffff); /* Default hell */
  border-top: 1px solid rgba(0,0,0,0.1); /* leichte Trennung zum Content */
  box-shadow: 0 -2px 6px rgba(0,0,0,0.1); /* leichte Tiefe */
}

/* Icons & Label Abstand */
#main-tabbar .tabbar-inner {
  justify-content: space-around; /* gleichmäßiger Abstand der Tabs */
}

/* -------------------------------- */
/* NAVBAR TAP HIGHLIGHT – alle Seiten */
/* -------------------------------- */

#start-navbar,    #start-navbar *,
#neworder-navbar, #neworder-navbar *,
#livemap-navbar,  #livemap-navbar * {
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  outline: none !important;
}

#start-navbar    .link,  #start-navbar    .link.active-state,
#start-navbar    .left,  #start-navbar    .left.active-state,
#start-navbar    .right, #start-navbar    .right.active-state,
#neworder-navbar .link,  #neworder-navbar .link.active-state,
#neworder-navbar .left,  #neworder-navbar .left.active-state,
#neworder-navbar .right, #neworder-navbar .right.active-state,
#livemap-navbar  .link,  #livemap-navbar  .link.active-state,
#livemap-navbar  .right, #livemap-navbar  .right.active-state {
  background: transparent !important;
  background-color: transparent !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

#start-navbar    .ripple-wave,
#neworder-navbar .ripple-wave,
#livemap-navbar  .ripple-wave { display: none !important; }


/* Dark Mode */
.theme-dark #main-tabbar {
  background-color: #1c1c1c;
  border-top: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 -2px 6px rgba(0,0,0,0.4);
}

/* Tab active – Marken-Grün statt iOS-Blau */
#main-tabbar .tab-link.tab-link-active i,
#main-tabbar .tab-link.tab-link-active .tabbar-label {
  color: #2d6a1a;
}


/* Tabbar-Icons + Labels vertikal zentrieren */
#main-tabbar .toolbar-inner {
  display: flex;
  justify-content: space-around; /* gleiche Abstände */
  align-items: flex-end; /* Icons & Labels etwas tiefer setzen */
  padding-bottom: 4px; /* optional etwas Abstand nach unten */
}

/* Labels: kleiner + garantiert vollständig sichtbar (kein Abschneiden).
   Überschreibt den Inline-font-size:12px der Tabbar-Spans in index.html. */
#main-tabbar .tabbar-label {
  font-size: 9px !important;
  margin-top: 2px;
  max-width: 100%;
  overflow: visible;
  white-space: nowrap;
  letter-spacing: -.2px;
}
/* Tab-Links: etwas weniger horizontales Padding, damit lange Labels passen */
#main-tabbar .tab-link {
  padding-left: 2px;
  padding-right: 2px;
}

/* Icons ein bisschen tiefer */
#main-tabbar .icon {
  margin-bottom: 2px;
}


/* Navbar deutlich höher (+40px) + minimaler Abstand für Notch */
.navbar {
  height: calc(56px + env(safe-area-inset-top) * 0.6) !important;
  line-height: 56px;
  background-color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  backdrop-filter: none !important;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: calc(env(safe-area-inset-top) * 0.6);
}

/* Dark Mode */
.theme-dark .navbar {
  background-color: #1c1c1e !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Titel an neue Höhe anpassen */
.navbar .title,
.navbar .title-large-text {
  font-size: 17px;
  line-height: 44px;
}

/* Icons links/rechts anpassen */
.navbar .left .link,
.navbar .right .link {
  line-height: 44px;
}



/* PAGE CONTENT – Abstand zur Navbar + Notch */
.page-content {
  padding-top: calc(56px + env(safe-area-inset-top) * 0.6) !important;
}

/* Safe-Areas berücksichtigen (iPhone Notch / Android) */
.page-content.safe-areas {
  padding-top: calc(8px + env(safe-area-inset-top)) !important;
  padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
}

.ping-loading {
  animation: pulse 2s infinite;
  will-change: opacity;
}

@keyframes pulse {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

/* "Wiederholen"-Button: 3 Min. vor der erwarteten naechsten Ladung (siehe
   checkLoadReminder in neworder_additions.js) */
.load-reminder-blink {
  animation: load-reminder-blink 1.1s ease-in-out infinite;
}
@keyframes load-reminder-blink {
  0%, 100% { background: #fff; border-color: #e7e5e4; box-shadow: none; }
  50%      { background: #fff7ed; border-color: #ff9f43; box-shadow: 0 0 0 3px rgba(255,159,67,.25); }
}

/* Timer-Elemente auf eigene GPU-Ebene heben */
#live-timer, #job-timer-block {
  will-change: contents;
  transform: translateZ(0);
}

/* Container der Selects */
.month-select-wrapper {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

/* Select Design */
.month-select-wrapper select {
  width: 90px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #dcdcdc;
  background: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Hover */
.month-select-wrapper select:hover {
  border-color: #007aff;
}

/* Fokus */
.month-select-wrapper select:focus {
  outline: none;
  border-color: #007aff;
  box-shadow: 0 0 0 2px rgba(0,122,255,0.2);
}

/* Optional: etwas moderner */
.month-select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.month-total {
  font-weight: 600;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  min-width: 90px;
  text-align: center;
}

/* ── AgriTalk Bar ── */
/* position:fixed — this app disables all F7 slide/transform transitions,
   so fixed positioning works correctly across all page navigations.      */
#agritalk-bar {
  display: none;
  position: fixed;
  /* Über der Navigationsleiste. Die ist 70px hoch (--f7-toolbar-height in
     index.html) plus Geräterand unten — mit den früheren 56px lag die Leiste
     beim App-Start halb in der Navigationsleiste, solange sie noch nicht
     vermessen werden konnte. agriTalkBarAlign() korrigiert später exakt. */
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  height: 72px;
  background: linear-gradient(90deg, #0d1f0a 0%, #0a1e2e 100%);
  border-top: 1px solid rgba(255,255,255,0.12);
  flex-direction: row;
  align-items: center;
  padding: 0 12px 0 16px;
  gap: 12px;
  z-index: 9000;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.5);
  box-sizing: border-box;
}
#agritalk-bar.is-visible {
  display: flex !important;
}
/* Bei aktiver AgriTalk-Leiste den Seiteninhalt darüber halten:
   Leiste 72px + Navigationsleiste 70px + Geräterand + etwas Luft. */
body.agritalk-bar-on .page-content {
  padding-bottom: calc(158px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Fullscreen AgriTalk page: kein extra Padding durch die Bar */
.page[data-name="agritalk"] .page-content {
  padding-bottom: 0 !important;
}

#agritalk-bar-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

#agritalk-bar-channel {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#agritalk-bar-users {
  font-size: 13px;
  font-weight: 600;
  color: #e5f0df;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ptt-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  width: 96px;
  height: 56px;
  border-radius: 28px;
  border: none;
  background: #16a34a;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: background 0.08s, transform 0.08s, box-shadow 0.08s;
  box-shadow: 0 2px 10px rgba(22,163,74,0.5);
}

#ptt-button.active {
  background: #dc2626;
  box-shadow: 0 2px 12px rgba(220,38,38,0.6);
  transform: scale(1.07);
}

/* Sprachaktivierung: hier wird nicht gedrückt, sondern nur angezeigt.
   Der Knopf darf deshalb auch nicht wie ein Knopf aussehen. */
#ptt-button.vad-mode {
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.16);
  color: rgba(229,240,223,0.7);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
  transform: none;
}
#ptt-button.vad-mode svg { opacity: 0.55; }

/* Überträgt gerade — dieselbe Signalfarbe wie beim Sprechen im PTT-Modus */
#ptt-button.vad-mode.active {
  background: rgba(220,38,38,0.9);
  border-color: rgba(220,38,38,0.9);
  color: #fff;
  box-shadow: 0 2px 12px rgba(220,38,38,0.5);
  transform: none;
}
#ptt-button.vad-mode.active svg { opacity: 1; }

#ptt-button svg {
  flex-shrink: 0;
}

/* Beschriftung darf den Knopf nie sprengen — auch nicht bei vergrößerter
   Systemschrift oder längeren Wörtern. */
#ptt-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Empfindlichkeits-Regler auf der AgriTalk-Seite: bewusst groß, wird oft
   mit Arbeitshandschuhen bedient. Gleiche Optik wie im öffentlichen Kanal
   im Browser.
   ACHTUNG: Muss hier stehen, nicht in pages/agritalk.html — der Router lädt
   die Seite per url: und übernimmt nur das .page-Element, ein <style> davor
   wird verworfen. */
#at-vad-slider {
  width: 100%; height: 56px; cursor: pointer; margin: 2px 0;
  -webkit-appearance: none; appearance: none; background: transparent;
}
#at-vad-slider::-webkit-slider-runnable-track {
  height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(22,163,74,.45));
}
#at-vad-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 38px; height: 38px; margin-top: -12px; border-radius: 50%;
  background: #16a34a; border: 3px solid #0d1f0a;
  box-shadow: 0 3px 12px rgba(22,163,74,.55);
}
#at-vad-slider::-moz-range-track {
  height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(22,163,74,.45));
}
#at-vad-slider::-moz-range-thumb {
  width: 32px; height: 32px; border-radius: 50%;
  background: #16a34a; border: 3px solid #0d1f0a;
  box-shadow: 0 3px 12px rgba(22,163,74,.55);
}

/* AgriTalk bar padding is handled in JS (agriTalkBarShow/Hide + pageInit hook) */


#jitsi-container {
    position: absolute;
    top: 20%;          /* oberes Drittel */
    left: 5%;
    width: 90%;        /* fast gesamte Breite */
    height: 30%;       /* Höhe für Teilnehmerliste + Audio */
    z-index: 9999;     /* über allen Cards */
    background-color: #000; /* schwarz, um Video sichtbar zu machen */
    border-radius: 12px;
    overflow: hidden;
}

#jitsi-container iframe {
  width: 100% !important;   /* iframe auf Containergröße anpassen */
  height: 100% !important;
}

/* iOS 16 Dialog / Popup Transparenz Fix */

/* Backdrop (Overlay hinter dem Dialog) = dunkel */
.dialog-backdrop.backdrop-in {
  background: rgba(0, 0, 0, 0.5) !important;
}

/* Dialog-Box selbst = weiß, kein Glaseffekt */
.dialog {
  --f7-dialog-bg-color: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.sheet-modal,
.sheet-modal .sheet-modal-inner {
  background: #ffffff !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.popup,
.popup .page,
.popup .page-content {
  background: #ffffff !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Dark Mode */
.theme-dark .dialog .dialog-inner,
.theme-dark .sheet-modal,
.theme-dark .popup .page {
  background: #1c1c1e !important;
}
/* ── Login Screen: Slide durch Fade ersetzen ──────────────────── */
.login-screen {
  transition-property: opacity !important;
}
.login-screen.modal-in {
  transform: none !important;
  opacity: 1 !important;
}
.login-screen.modal-out {
  transform: none !important;
  opacity: 0 !important;
}

/* AgriTalk aktiv: Bottom-Bars nach oben schieben */
body.agritalk-bar-on .ls-bottom-bar {
  bottom: calc(49px + 72px + 20px) !important;
}

/* ── AgriTalk VAD-Empfindlichkeits-Slider: größerer Touch-Bereich + Thumb ── */
/* Nativer Thumb ist auf iOS/Android winzig und schwer zu treffen (Werkstatt/Traktor) */
#at-vad-slider {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
#at-vad-slider::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,0.15);
}
#at-vad-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #16a34a;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  margin-top: -11px;
  cursor: pointer;
}
#at-vad-slider::-moz-range-track {
  height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,0.15);
}
#at-vad-slider::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #16a34a;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  cursor: pointer;
}