/* -------------------------------- */
/* 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 */
#main-tabbar .tab-link.tab-link-active i,
#main-tabbar .tab-link.tab-link-active .tabbar-label {
  color: var(--f7-theme-color, #007aff); /* Blau wie iOS */
}


/* 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 */
}

/* Optional: Labels etwas kleiner machen */
#main-tabbar .tabbar-label {
  font-size: 11px;
  margin-top: 2px; /* Abstand zwischen Icon und Label */
}

/* 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; }
}

/* 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;
  bottom: 56px; /* above the tabbar */
  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;
}
/* When AgriTalk bar is active, push all page-content above it (bar=72px, tabbar=56px → total 128px) */
body.agritalk-bar-on .page-content {
  padding-bottom: 160px !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);
}

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

/* 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;
}