@charset "UTF-8";
/* Tablet nav sidebar width — shared so the reserved column (normal pages) and the
   overlay panel (Flight Ops / Ground Ops / Rotation plan) stay identical. Pure vw
   keeps it proportional in both portrait and landscape; wide enough that the two
   longest labels ("Flight Ops" / "Ground Ops") don't overflow. */
/* Shared page shell / toolbar rhythm (Event, Log, Management, list pages) */
.tablet_layout {
  display: grid;
  /* Fill the viewport once — avoid body scroll under nested table scroll. */
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  margin: 0;
  grid-template-areas: "header header header" "nav main aside" "footer footer footer";
  grid-template-columns: 16vw 1fr 12vw;
  /* Footer keeps a visible strip and can grow for action buttons */
  grid-template-rows: 10vh minmax(0, 1fr) minmax(6vh, auto);
}

.header_tablet {
  grid-area: header;
  height: 100%;
  min-height: 0;
}

.nav_tablet {
  grid-area: nav;
  height: 100%;
  min-height: 0;
  align-self: stretch;
}

.main_tablet {
  grid-area: main;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  /* Scroll only when page content is taller than the main grid cell */
  overflow-x: hidden;
  overflow-y: auto;
}

.aside_tablet {
  grid-area: aside;
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 0;
}

.footer_tablet {
  grid-area: footer;
  min-height: 6vh;
  height: auto;
  box-sizing: border-box;
  /* Keep footer chrome / actions above scrolling main content */
  position: relative;
  z-index: 5;
}

/* NAVBAR */
.navbar-expand-lg .navbar-toggler {
  display: block;
}

.nav_tablet > .collapse {
  height: 100%;
  min-height: 0;
}

/*
 * Bootstrap collapse animates height to content size, then .show forces 100% —
 * that mid-animation stretch felt like a pace change. Keep full column height and
 * fade opacity instead (open/close direction via .nav-is-opening / .nav-is-closing).
 */
.nav_tablet > .collapse.show {
  height: 100% !important;
  opacity: 1;
}

.nav_tablet > .collapsing {
  height: 100% !important;
  overflow: hidden !important;
  /* Match Bootstrap collapse duration so fade covers the whole phase. */
  transition: none !important;
}

.nav_tablet > .collapsing.nav-is-opening {
  animation: nav-tablet-fade-in 0.35s ease forwards;
}

.nav_tablet > .collapsing.nav-is-closing {
  animation: nav-tablet-fade-out 0.35s ease forwards;
}

@keyframes nav-tablet-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes nav-tablet-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.navigation {
  display: flex;
  flex-direction: column;
  background-color: #2d3b67;
  font-size: 2vw;
  padding: 1.3vw;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
}
.navigation a,
.navigation .nav_logout_btn {
  text-decoration: none;
  padding: 5px;
  color: aliceblue;
  white-space: nowrap;
}
.navigation a.active,
.navigation .nav_logout_btn.active {
  color: white;
  font-weight: bold;
}
.navigation form.nav_logout {
  display: flex;
  flex-direction: column;
}
.navigation .nav_logout_btn {
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

/* Helitrans brand cues (https://www.helitrans.ch/) — kept minimal for registration. */
.entry_layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: Helvetica, Arial, sans-serif;
  /* —— Customer registration —— */
}
.entry_layout .entry_register {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 1.25rem;
  box-sizing: border-box;
  /* Scroll the whole wrapper (not a nested box) so the mobile keyboard can't
     hide focused fields — the browser scrolls the field into view natively. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #c5d0da;
  background-image: url("../img/entry_bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.entry_layout .entry_box--register {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* margin:auto centers the card when it fits and lets .entry_register
     scroll when it doesn't (e.g. keyboard open) — no inner scroll trap. */
  margin: auto;
  width: min(22rem, 100%);
  padding: 2.5rem 2rem 2rem;
  background: #fff;
  color: #2d3b67;
  box-shadow: 0 8px 28px rgba(45, 59, 103, 0.22);
}
.entry_layout .entry_box--register .entry_logo {
  display: block;
  width: auto;
  max-width: 10rem;
  height: auto;
  max-height: 3.5rem;
  margin: 0 auto 1.5rem;
  object-fit: contain;
  padding: 0;
}
.entry_layout .entry_box--register .entry_title {
  margin: 0 0 1.75rem;
  text-align: center;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2d3b67;
  /* Short red accent like helitrans.ch section lines */
}
.entry_layout .entry_box--register .entry_title::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin: 0.85rem auto 0;
  background-color: rgb(237, 32, 36);
}
.entry_layout .entry_box--register form {
  width: 100%;
}
.entry_layout .entry_box--register .entry_field {
  width: 100%;
  margin-bottom: 1.1rem;
}
.entry_layout .entry_box--register .entry_field__hint {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: #8a8a8a;
}
.entry_layout .entry_box--register .entry_field .form-control {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #cfcfcf;
  border-radius: 0;
  color: #2d3b67;
  padding: 0.55rem 0 0.45rem;
  margin: 0;
  box-shadow: none;
  font-family: Helvetica, Arial, sans-serif;
}
.entry_layout .entry_box--register .entry_field .form-control::placeholder {
  color: #8a8a8a;
  opacity: 1;
}
.entry_layout .entry_box--register .entry_field .form-control:focus {
  background-color: transparent;
  border-bottom-color: #2d3b67;
  box-shadow: none;
  color: #2d3b67;
}
.entry_layout .entry_box--register .entry_captcha {
  margin-top: 0.5rem;
}
.entry_layout .entry_box--register .entry_captcha__label {
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.85rem;
  color: #2d3b67;
}
.entry_layout .entry_box--register .entry_alert {
  width: 100%;
  margin: 0 0 1rem;
  text-align: center;
}
.entry_layout .entry_box--register .entry_honeypot {
  display: none;
}
.entry_layout .entry_box--register .entry_required_note {
  margin: 0.25rem 0 1.25rem;
  font-size: 0.8rem;
  color: #8a8a8a;
}
.entry_layout .entry_box--register .entry_submit {
  border: none;
  border-radius: 0;
  padding: 0.75rem 1rem;
  background-color: #2d3b67;
  color: #fff;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.entry_layout .entry_box--register .entry_submit:hover, .entry_layout .entry_box--register .entry_submit:focus {
  background-color: #243155;
  color: #fff;
}
.entry_layout .entry_box--register .entry_submit:disabled {
  opacity: 0.7;
}
.entry_layout .entry_box--register .persons {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0;
}
.entry_layout {
  /* —— Admin login (legacy navy panel) —— */
}
.entry_layout > .entry_box:not(.entry_box--register) {
  background-color: #2d3b67;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  padding: 2rem;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  min-height: 62vh;
  height: auto;
  max-height: 90vh;
  width: 30vw;
  overflow-y: auto;
}
.entry_layout > .entry_box:not(.entry_box--register) img {
  height: 14vh;
}
.entry_layout > .entry_box:not(.entry_box--register) form {
  width: 100%;
}
.entry_layout > .entry_box:not(.entry_box--register) .form-control {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid white;
  border-radius: 0;
  color: white;
  padding-left: 0;
  padding-right: 0;
  margin-top: 20px;
  margin-bottom: 20px;
}
.entry_layout > .entry_box:not(.entry_box--register) .form-control::placeholder {
  color: white;
}
.entry_layout > .entry_box:not(.entry_box--register) .entry_alert {
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 0;
  text-align: center;
}
.entry_layout .entry_wait_overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(45, 59, 103, 0.75);
  padding: 1.5rem;
}
.entry_layout .entry_wait_overlay[hidden] {
  display: none !important;
}
.entry_layout .entry_wait_overlay__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  color: #fff;
  max-width: 18rem;
}
.entry_layout .entry_wait_overlay__title {
  margin: 0;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.entry_layout .entry_wait_overlay__hint {
  margin: 0;
  opacity: 0.85;
  font-size: 0.95rem;
}
.entry_layout .entry_wait_overlay .spinner-border {
  width: 2.5rem;
  height: 2.5rem;
  border-width: 0.25rem;
}
.entry_layout .footer_entry {
  width: 100%;
  flex-shrink: 0;
  margin-top: 1rem;
}

@media (orientation: portrait) {
  .entry_layout .entry_box--register {
    width: min(22rem, 92vw);
  }
  .entry_layout > .entry_box:not(.entry_box--register) {
    width: 90vw;
    height: auto;
    max-height: calc(100vh - 2rem);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
}
.phone_layout {
  display: grid;
  grid-template-rows: 3.5rem 1fr auto;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  /* Allow pan/scroll inside main; avoid browser overscroll bounce fighting the shell. */
  touch-action: manipulation;
  overscroll-behavior: contain;
}

.header-phone {
  grid-row: 1;
}

.main_phone {
  grid-row: 2;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer_phone {
  grid-row: 3;
  min-height: 2.75rem;
}

.diagram_container {
  position: fixed;
  top: 14vh;
  right: 1vw;
  height: 61vh;
  width: 30%;
  padding: 3vw;
  background: #769dc3;
}

.cg_embed_panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  margin-bottom: 0;
  overflow: hidden;
}
.cg_embed_panel h3 {
  margin: 0 0 0.2rem;
  font-size: 0.85em;
  line-height: 1.2;
  flex-shrink: 0;
}
.cg_embed_panel .weight-balance-box {
  padding: 0.2rem 0.35rem;
  margin-bottom: 0.25rem;
  font-size: 0.68rem;
  line-height: 1.2;
  flex-shrink: 0;
}

.cg_chart_frame {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  contain: layout size;
}

.cg_chart_pane_labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.cg_chart_pane_label {
  position: absolute;
  left: 0.2rem;
  font-size: 0.62rem;
  font-weight: 600;
  color: #c5c9d4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}

.cg_chart_pane_label--weight {
  top: 3%;
}

.cg_chart_pane_label--lateral {
  top: 48%;
}

.cg_embed_chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #1a1a2e;
}

.cg_embed_panel--pilot {
  flex: 1 1 0;
  min-height: 0;
}

.image_helicopter {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}

.cabin-plan {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.cabin-plan__frame {
  position: relative;
  width: min(100%, 48vh);
  max-width: 100%;
  aspect-ratio: 5/7;
  margin: 0 auto;
  overflow: hidden;
}

.cabin-plan__outline {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cabin-plan__fuselage {
  fill: #fff;
  stroke: #3f4f66;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.no-seats {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1rem;
  color: #b02a37;
  font-size: 0.85rem;
  text-align: center;
}

.seat {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #2d3b67;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  text-align: center;
  font-weight: 700;
  line-height: 1.1;
  overflow: visible;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transform: translate(-50%, -50%);
  box-shadow: none;
}
.seat.seat-pilot {
  cursor: default;
}
.seat.seat-pilot .seat__disk {
  color: #2f3035;
}
.seat.seat-pilot .seat__badge {
  font-size: 0.7rem;
}
.seat.seat-occupied .seat__disk {
  color: #769dc3;
}
.seat.seat-occupied .seat__person {
  color: black;
  font-weight: 600;
}

.seat__disk {
  position: relative;
  box-sizing: border-box;
  width: 5.75rem;
  height: 5.75rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #2d3b67;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: none;
}

.seat__icon {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.seat__icon-path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 28;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

.seat__badge {
  position: absolute;
  inset: 0% 10% 26%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.05;
  color: black;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.seat__person {
  max-width: 5.6rem;
  min-height: 1.05em;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.15;
  color: black;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seat__person--empty {
  color: #42464e;
  font-weight: 500;
  font-style: italic;
}

.cabin-plan__frame--dense .seat__disk {
  width: 4.8rem;
  height: 4.8rem;
}
.cabin-plan__frame--dense .seat__badge {
  font-size: 0.68rem;
}
.cabin-plan__frame--dense .seat__person {
  max-width: 4.8rem;
  font-size: 0.61rem;
}

.cabin-plan__frame--compact .seat {
  gap: 0.1rem;
}
.cabin-plan__frame--compact .seat__disk {
  width: 2.65rem;
  height: 2.65rem;
}
.cabin-plan__frame--compact .seat__badge {
  font-size: 0.6rem;
}
.cabin-plan__frame--compact .seat__person {
  max-width: 4.1rem;
  min-height: 0.9em;
  font-size: 0.55rem;
}

.image_helicopter--readonly .seat {
  cursor: default;
  touch-action: none;
}

.table_all {
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  /* Fill remaining height under toolbars; scroll inside instead of growing the page */
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
}

/* Parent pages already pad the shell — avoid double inset. */
.event_page .table_all,
.list_page .table_all {
  padding-left: 0;
  padding-right: 0;
}

/* Shared list pages (customer, helicopter): add button above the table */
.list_page {
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem 0.75rem;
  box-sizing: border-box;
}

.list_page_toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.85rem 1.75rem;
  margin-bottom: 1.1rem;
}

/*
 * Shared list-page chrome contract (tablet lists):
 *
 *   list_page
 *     flash_from_query
 *     list_page_toolbar [--split when right-side controls exist]
 *       list_page_toolbar_start  → filters? + add? + return?
 *       list_page_toolbar_end    → search? + extras?
 *     [optional category filter row from list_filters.tpl]
 *     table_all / page body
 *
 * List pages without date filters (Helikopter / Pilot / Passagiere) share one
 * toolbar row above the table. Lock its height so those tables start on the
 * same vertical line; filter pages (Event, Einteilung, …) keep their own stack.
 */
.list_page > .list_page_toolbar {
  flex-shrink: 0;
  min-height: 2.125rem;
}

.list_page_toolbar--split {
  justify-content: space-between;
}
.list_page_toolbar--split .list_page_search_form,
.list_page_toolbar--split .list_search_form.list_page_search_form {
  width: 14rem;
  max-width: 48vw;
  margin: 0;
  flex-shrink: 0;
}

.list_page_toolbar_start,
.list_page_toolbar_end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.list_page_toolbar_end {
  justify-content: flex-end;
}

/* Shown when staff came from rotation_plan (sessionStorage return context). */
.list_page_return_btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-font-size: 0.875rem;
  line-height: 1.5;
}
.list_page_return_btn[hidden] {
  display: none !important;
}

.list_search_form {
  display: flex;
  align-items: center;
  width: 14rem;
  max-width: 48vw;
  margin: 0 0 0 auto;
  flex-shrink: 0;
}

.list_search_input_wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.list_search_input {
  width: 100%;
  min-width: 0;
  padding-right: 2.1rem;
}

.list_search_btn {
  position: absolute;
  top: 50%;
  right: 0.1rem;
  transform: translateY(-50%);
  min-width: 0;
  padding: 0.2rem 0.45rem;
  border: 0;
  background: transparent;
  color: #6c757d;
  line-height: 1;
}
.list_search_btn:hover, .list_search_btn:focus-visible {
  color: #2d3b67;
  outline: none;
}

.list_page_hint {
  margin: 0 0 0.75rem;
  color: #6c757d;
  font-size: 0.95rem;
}

.list_page_add_form {
  margin: 0;
}

/* Shared sm size for every list-page add control (Event, Einteilung, Helikopter, …). */
.list_page_add_btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-font-size: 0.875rem;
  line-height: 1.5;
}

.list-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  box-shadow: none;
}
.list-sort-btn:hover, .list-sort-btn:focus-visible, .list-sort-btn:active {
  color: #2d3b67;
  background: transparent;
  outline: none;
  box-shadow: none;
}

.list-sort-arrows {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  line-height: 0.5;
  opacity: 0.4;
}
.list-sort-arrows i {
  margin: 0;
  padding: 0;
}

.list-sort-btn[aria-sort=ascending] .list-sort-arrows,
.list-sort-btn[aria-sort=descending] .list-sort-arrows {
  opacity: 1;
}

.list-sort-btn[aria-sort=ascending] .fa-caret-down,
.list-sort-btn[aria-sort=descending] .fa-caret-up {
  opacity: 0.35;
}

.list-sort-btn[aria-sort=ascending] .fa-caret-up,
.list-sort-btn[aria-sort=descending] .fa-caret-down {
  color: #2d3b67;
}

/*
 * List rows that are themselves the action: tapping the row opens its modal, so
 * these tables have no per-row edit button. The touched row turns primary blue,
 * like an active "Heute" / "Alle" filter button, and stays blue while its modal
 * is open (.is-row-selected, set by listRowSelect.js — Bootstrap pulls focus into
 * the modal, so :focus on the row cannot hold the highlight). Bootstrap paints
 * row states through the *-state custom properties (an inset box-shadow on the
 * cells), so a plain background-color would stay invisible under .table-striped.
 *
 * Listed per table on purpose: the Counter queue rows are selectable too, but
 * their colours are operational (current rotation, delay boundary) and must not
 * be painted over — add a table here when its rows become tappable.
 * Passagiere / Piloten / Helikopter navigate to their edit pages (same as
 * Rotation → planning).
 */
#eventTable tbody tr[role=button],
#einteilungTable tbody tr[role=button],
#rotationTable tbody tr[role=button],
#customerTable tbody tr[role=button],
#pilotsTable tbody tr[role=button],
#helicopterTable tbody tr[role=button] {
  cursor: pointer;
}
#eventTable tbody tr[role=button]:hover > *, #eventTable tbody tr[role=button]:focus-visible > *, #eventTable tbody tr[role=button].is-row-selected > *,
#einteilungTable tbody tr[role=button]:hover > *,
#einteilungTable tbody tr[role=button]:focus-visible > *,
#einteilungTable tbody tr[role=button].is-row-selected > *,
#rotationTable tbody tr[role=button]:hover > *,
#rotationTable tbody tr[role=button]:focus-visible > *,
#rotationTable tbody tr[role=button].is-row-selected > *,
#customerTable tbody tr[role=button]:hover > *,
#customerTable tbody tr[role=button]:focus-visible > *,
#customerTable tbody tr[role=button].is-row-selected > *,
#pilotsTable tbody tr[role=button]:hover > *,
#pilotsTable tbody tr[role=button]:focus-visible > *,
#pilotsTable tbody tr[role=button].is-row-selected > *,
#helicopterTable tbody tr[role=button]:hover > *,
#helicopterTable tbody tr[role=button]:focus-visible > *,
#helicopterTable tbody tr[role=button].is-row-selected > * {
  /* Same blue as an active Heute / Alle (Bootstrap .btn-primary). The
     --bs-table-* vars drive Bootstrap's inset cell paint; background-color
     is a belt-and-braces fallback for older WebKit on the iPad. */
  --bs-table-bg-state: var(--bs-primary);
  --bs-table-color-state: #fff;
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}
#eventTable tbody tr[role=button]:focus-visible,
#einteilungTable tbody tr[role=button]:focus-visible,
#rotationTable tbody tr[role=button]:focus-visible,
#customerTable tbody tr[role=button]:focus-visible,
#pilotsTable tbody tr[role=button]:focus-visible,
#helicopterTable tbody tr[role=button]:focus-visible {
  outline: 2px solid #2d3b67;
  outline-offset: -2px;
}

/*
 * Row action buttons — ~20% larger than Bootstrap .btn-sm so they stay tappable
 * on the iPad (toolbar filters stay normal).
 */
.table td .btn.btn-sm {
  --bs-btn-padding-y: 0.3rem;
  --bs-btn-padding-x: 0.6rem;
  --bs-btn-font-size: 1.05rem;
  padding: 0.3rem 0.6rem;
  font-size: 1.05rem;
  line-height: 1.5;
  min-height: 2.1rem;
  min-width: 2.1rem;
  flex-shrink: 0;
}

/*
 * Passagiere list: payment method sits in the row. Keep it tappable on iPad
 * without stretching the Status Bezahlt column.
 */
#customerTable .customer-payment-select {
  min-width: 10.5rem;
  max-width: 13rem;
  cursor: pointer;
}

/* Companion passengers (added by the primary on user.html) — show the family
   link on a muted second line under the name. Vertical so length isn't an issue,
   always visible on iPad (no hover), and the list stays flat + fully sortable. */
.passenger-subline {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.3;
  color: #6c757d;
}

.passenger-subline::before {
  content: "↳";
  margin-right: 0.3rem;
  opacity: 0.75;
}

.passenger-nr-col {
  width: 1%;
  white-space: nowrap;
  color: #6c757d;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.form_container {
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  font-size: 1rem;
}
.form_container h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  align-items: center;
}

/* Shared save / back / cancel / delete controls on edit forms and modals.
   Built on Bootstrap .btn so base chrome always renders, even before overrides load. */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.5rem;
}

.form-actions--bordered {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid #e2e6ee;
}

.form-actions--stack {
  flex-direction: column;
  width: 100%;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}
.form-actions--stack form {
  width: 100%;
  margin: 0;
}
.form-actions--stack .btn-form-action {
  width: 100%;
}

.btn.btn-form-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 6.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  border-radius: 0.4rem;
  border-width: 2px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.btn.btn-form-action:hover, .btn.btn-form-action:focus-visible {
  text-decoration: none;
}
.btn.btn-form-action:focus-visible {
  outline: 2px solid #2b689c;
  outline-offset: 2px;
}
.btn.btn-form-action:active {
  transform: scale(0.98);
}
.btn.btn-form-action--lg {
  min-width: 8rem;
  padding: 0.55rem 1.15rem;
  font-size: 1.05rem;
}

.btn.btn-form-action--back {
  --bs-btn-color: #2d3b67;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #2d3b67;
  --bs-btn-hover-color: #2d3b67;
  --bs-btn-hover-bg: #eef1f7;
  --bs-btn-hover-border-color: #2d3b67;
  --bs-btn-active-color: #2d3b67;
  --bs-btn-active-bg: #e3e8f0;
  --bs-btn-active-border-color: #2d3b67;
  --bs-btn-focus-shadow-rgb: 45, 59, 103;
}

.btn.btn-form-action--save {
  --bs-btn-color: #198754;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #157347;
  --bs-btn-hover-bg: #eef9f2;
  --bs-btn-hover-border-color: #157347;
  --bs-btn-active-color: #146c43;
  --bs-btn-active-bg: #e2f4e9;
  --bs-btn-active-border-color: #146c43;
  --bs-btn-focus-shadow-rgb: 25, 135, 84;
}

.btn.btn-form-action--cancel {
  --bs-btn-color: #495057;
  --bs-btn-bg: #e9ecef;
  --bs-btn-border-color: #adb5bd;
  --bs-btn-hover-color: #343a40;
  --bs-btn-hover-bg: #dee2e6;
  --bs-btn-hover-border-color: #adb5bd;
  --bs-btn-active-color: #343a40;
  --bs-btn-active-bg: #d3d9df;
  --bs-btn-active-border-color: #adb5bd;
  --bs-btn-focus-shadow-rgb: 173, 181, 189;
}

.btn.btn-form-action--export {
  --bs-btn-color: #0f766e;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #0f766e;
  --bs-btn-hover-color: #0b5d57;
  --bs-btn-hover-bg: #ecfdfa;
  --bs-btn-hover-border-color: #0b5d57;
  --bs-btn-active-color: #0b5d57;
  --bs-btn-active-bg: #d7f7f1;
  --bs-btn-active-border-color: #0b5d57;
  --bs-btn-focus-shadow-rgb: 15, 118, 110;
}

.btn.btn-form-action--delete {
  --bs-btn-color: #dc3545;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #b02a37;
  --bs-btn-hover-bg: #fff5f5;
  --bs-btn-hover-border-color: #b02a37;
  --bs-btn-active-color: #a52834;
  --bs-btn-active-bg: #ffe8ea;
  --bs-btn-active-border-color: #a52834;
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
}

.modal-footer .btn-form-action {
  margin: 0;
}

.form_wrapper {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Shared create/edit modal chrome (Event, Einteilung, …). */
.form-edit-modal {
  border: 2px solid #2d3b67;
  overflow: hidden;
}

.form-edit-modal__header {
  background: linear-gradient(180deg, #2b689c 0%, #2d3b67 100%);
  color: #fff;
  border-bottom-color: #2d3b67;
}
.form-edit-modal__header .modal-title {
  font-weight: 600;
  color: #fff;
}
.form-edit-modal__header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.form-edit-modal__footer {
  background: #eef1f6;
  border-top-color: #c5cdd8;
}

/* iPad Safari centers <input type="date"> text by default — align like other fields. */
.form-edit-modal input[type=date].form-control {
  text-align: left;
  direction: ltr;
}
.form-edit-modal input[type=date].form-control::-webkit-date-and-time-value {
  text-align: left;
}
.form-edit-modal input[type=date].form-control::-webkit-datetime-edit {
  text-align: left;
}

.map {
  height: 35vh;
  margin-top: 2%;
  width: 100%;
  justify-items: center;
}
@media (max-width: 768px) {
  .map {
    height: 220px;
    width: 100%;
    margin: 0.75rem 0;
  }
}

/* Full-page message screen (404 / error) — brand cues from the entry/registration
   card (navy card, Raleway uppercase title, red Helitrans accent line). Uses its own
   centered layout instead of the tablet grid so the content isn't stranded in an
   unassigned grid area. */
.message_layout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 1.5rem;
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  background-color: #c5d0da;
  background-image: linear-gradient(rgba(197, 208, 218, 0.55), rgba(197, 208, 218, 0.55)), url("../img/entry_bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-message {
  width: min(30rem, 100%);
  padding: 3rem 2.5rem 2.75rem;
  background: #fff;
  color: #2d3b67;
  text-align: center;
  box-shadow: 0 8px 28px rgba(45, 59, 103, 0.22);
}

.page-message__code {
  margin: 0;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-size: clamp(3.5rem, 12vh, 6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  color: #2d3b67;
}

.page-message__title {
  margin: 1rem 0 0;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2d3b67;
  /* Short red accent like helitrans.ch / the entry title */
}
.page-message__title::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin: 0.85rem auto 0;
  background-color: rgb(237, 32, 36);
}

.page-message__text {
  margin: 1.5rem 0 0;
  color: #8a8a8a;
  font-size: 0.95rem;
  line-height: 1.6;
}

.page-message__action {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.75rem 1.75rem;
  background-color: #2d3b67;
  color: #fff;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.page-message__action:hover, .page-message__action:focus {
  background-color: #243155;
  color: #fff;
}

.main_tablet {
  /* event_page is a JS marker (data-view) on the shared .list_page shell. */
}
.main_tablet .event_view_toggle {
  flex-shrink: 0;
}
.main_tablet .event_view_toggle .btn {
  min-width: 2.65rem;
  padding: 0.35rem 0.7rem;
}
.main_tablet .event_table_wrap {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.main_tablet #eventTable {
  table-layout: fixed;
  width: 100%;
}
.main_tablet #eventTable > :not(caption) > * > * {
  vertical-align: middle;
}
.main_tablet .event-col-name {
  width: 32%;
}
.main_tablet .event-col-datum {
  width: 8.5rem;
  white-space: nowrap;
}
.main_tablet .event-col-treffpunkt {
  width: 32%;
}
.main_tablet .event-col-name,
.main_tablet .event-col-treffpunkt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.main_tablet {
  /* Sort chrome comes from .list-sort-btn; .event-sort-btn is only the JS hook
     that also reorders the card grid. */
}
.main_tablet .event-row.is-highlighted {
  outline: 2px solid #ffc107;
  outline-offset: -2px;
}
.main_tablet .event_table_empty {
  padding: 1.5rem 1rem;
  color: #6c757d;
}
.main_tablet .event-map {
  position: relative;
  z-index: 0;
  background: #dfe5ee;
  overflow: hidden;
  /* Leaflet adds .leaflet-container on the same node — keep fixed sizes.
  height:100% collapses inside table cells and shows only a thin line. */
}
.main_tablet .event-map.leaflet-container {
  background: #dfe5ee;
}
.main_tablet .event-map.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #adb5bd;
  font-size: 0.7rem;
  text-align: center;
  line-height: 1.2;
  padding: 0.25rem;
}
.main_tablet .event-map--card, .main_tablet .event-map--card.leaflet-container {
  width: 100% !important;
  height: 7rem !important;
  min-height: 7rem;
  flex: 0 0 7rem;
  max-height: 7rem;
  border-bottom: 1px solid #dee2e6;
}
.main_tablet .event-map .leaflet-control-attribution {
  font-size: 0.55rem;
  max-width: 100%;
  pointer-events: none;
  user-select: none;
}
.main_tablet .event-map .leaflet-control-attribution a {
  pointer-events: none;
  color: inherit;
  text-decoration: none;
}
.main_tablet {
  /* Transparent grid shell — aim for ~4 cards per row.
   * Size rows to content: min-height:0 on cards let a dense "Alle" grid
   * collapse each card to the map and clip name/date/treffpunkt. */
}
.main_tablet .event_cards_grid {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.main_tablet .event_cards_grid:not([hidden]) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: max-content;
  gap: 0.9rem;
  align-content: start;
  align-items: start;
}
.main_tablet .event_cards_empty {
  grid-column: 1/-1;
  margin: 1.25rem 0;
  text-align: center;
  color: #5c6578;
}
.main_tablet .event_card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: auto;
  background: #f7f8fb;
  border: 2px solid #6f7a90;
  border-radius: 0.35rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(45, 59, 103, 0.1);
  /* Tapping anywhere on the card opens the edit modal. */
  cursor: pointer;
  /* Same primary blue the list rows use — the map and text stay readable,
     so the card is outlined instead of filled. */
}
.main_tablet .event_card:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 2px 6px rgba(45, 59, 103, 0.22);
}
.main_tablet .event_card {
  /* Stays marked while its edit modal is open (listRowSelect.js). */
}
.main_tablet .event_card.is-row-selected {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.35);
}
.main_tablet .event_card:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}
.main_tablet .event_card.is-highlighted, .main_tablet .event_card.table-warning {
  outline: 2px solid #ffc107;
  outline-offset: 2px;
}
.main_tablet .event_card_body {
  flex: 0 0 auto;
  padding: 0.75rem 0.85rem;
}
.main_tablet .event_card_title {
  margin: 0 0 0.3rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  color: #2d3b67;
  /* Keep card heights even — long names truncate; full name via title attr */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.main_tablet .event_card_meta {
  margin: 0 0 0.2rem;
  font-size: 0.85rem;
  color: #6c757d;
}
.main_tablet .event_card_location {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.35;
}
.main_tablet .event_list_footer {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
  padding-bottom: 0.25rem;
}
.main_tablet .event_result_summary {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  color: #5c6578;
  text-align: center;
}
.main_tablet .event_pagination {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 auto;
}
.main_tablet .event_pagination_label {
  flex: 0 0 auto;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2d3b67;
  text-align: center;
  white-space: nowrap;
}
.main_tablet .event_pagination_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 6.5rem;
  min-height: 2.35rem;
  padding: 0.35rem 0.65rem;
  text-align: center;
}
.main_tablet .event_pagination_btn i {
  flex: 0 0 auto;
  width: 0.85rem;
  font-size: 0.85rem;
  line-height: 1;
  text-align: center;
}
.main_tablet .event_pagination_btn span {
  flex: 0 0 auto;
}
.main_tablet .event_pagination_btn.disabled {
  pointer-events: none;
  opacity: 0.45;
}

/* Location picker shell (WP1): map placeholder + collapsed coordinates */
.event-location-map {
  position: relative;
  width: 100%;
  height: 16rem;
  min-height: 16rem;
  border: 1px solid #ced4da;
  border-radius: 0.35rem;
  background: #e9ecef;
  overflow: hidden;
  z-index: 0;
}
.event-location-map.leaflet-container {
  width: 100%;
  height: 16rem;
  font: inherit;
}
.event-location-map .leaflet-control-attribution {
  display: none !important;
}

.event-location-map__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 16rem;
  margin: 0;
  padding: 1rem;
  color: #6c757d;
  font-size: 0.9rem;
  text-align: center;
}

.event-location-map__status {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  line-height: 1.35;
}

.event-location-reverse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.55rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #c5cdd8;
  border-radius: 0.35rem;
  background: #f7f8fb;
}

.event-location-reverse__label {
  flex: 1 1 12rem;
  font-size: 0.88rem;
  line-height: 1.35;
  color: #3d4659;
}

.event-location-reverse__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.event-address-search {
  position: relative;
}

.event-address-results {
  position: absolute;
  z-index: 1100;
  top: calc(100% + 0.2rem);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  max-height: 14rem;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.35rem;
  box-shadow: 0 4px 12px rgba(45, 59, 103, 0.15);
}

.event-address-results__btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.75rem;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.35;
  color: #212529;
  cursor: pointer;
}
.event-address-results__btn:hover, .event-address-results__btn:focus-visible {
  background: #e8eef8;
  outline: none;
}

.event-address-results__msg {
  padding: 0.45rem 0.75rem;
  font-size: 0.85rem;
  color: #6c757d;
}
.event-address-results__msg--danger {
  color: #b02a37;
}

.event-location-coords {
  padding: 0.35rem 0;
}
.event-location-coords .event-location-coords__summary {
  cursor: pointer;
  color: #5c6578;
  font-size: 0.9rem;
  user-select: none;
}
.event-location-coords .event-location-coords__summary:hover {
  color: #2d3b67;
}

@media (max-width: 1100px) {
  .main_tablet .event_cards_grid:not([hidden]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .main_tablet .event_page > .list_page_toolbar--split {
    flex-direction: column;
    align-items: stretch;
  }
  .main_tablet .event_page .list_page_toolbar_end {
    align-items: stretch;
  }
  .main_tablet .event_page .list_search_form {
    width: 100%;
    max-width: none;
  }
  .main_tablet .event_view_toggle {
    align-self: flex-end;
  }
  .main_tablet .event_cards_grid:not([hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .main_tablet .event_cards_grid:not([hidden]) {
    grid-template-columns: 1fr;
  }
}
/* Customer status (user.html) — Helitrans brand, phone-first.
 * Text tokens mirror https://www.helitrans.ch/ Wix theme:
 *   --color_15: 40,40,40  (primary / --txt)
 *   --color_45: 77,77,77  (secondary / subtitles)
 */
body.phone_layout:has(.user-content) {
  --color_15: 40, 40, 40;
  --color_45: 77, 77, 77;
  touch-action: manipulation;
  overscroll-behavior-y: contain;
  background-color: #fff;
  color: rgb(var(--txt, var(--color_15)));
  font-family: Helvetica, Arial, sans-serif;
}

.header-phone.user-header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0.5rem 1rem 0;
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
}
.header-phone.user-header .header-img {
  height: 2.25rem;
  width: auto;
  display: block;
  margin: 0;
  justify-self: unset;
}

.user-content {
  padding: 1.25rem 1rem 1.5rem;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  box-sizing: border-box;
  gap: 1.25rem;
  background-color: #fff;
  color: rgb(var(--txt, var(--color_15)));
}

.user-welcome {
  margin: 0;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--color_45));
}
.user-welcome::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin: 0.65rem auto 0;
  background: rgb(237, 32, 36);
}

.user-banner {
  margin: 0;
  padding: 0.75rem 0.9rem;
  text-align: left;
  font-size: 0.9rem;
  border: none;
  border-radius: 0;
  background: #f5f5f5;
  color: rgb(var(--txt, var(--color_15)));
}
.user-banner--info {
  background: #f5f5f5;
}
.user-banner--success {
  background: #e7f2ea;
  color: #1e5631;
}
.user-banner--danger {
  background: #fbe9e9;
  color: #a12222;
}

.user-section {
  margin: 0;
  padding: 0;
}
.user-section__label {
  margin: 0 0 0.35rem;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--color_45));
}

.user-countdown {
  margin: 0;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-size: clamp(2rem, 9vw, 2.75rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: rgb(var(--txt, var(--color_15)));
}

.timer-container {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.35rem;
}

.timer-animation {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0.75rem auto 0;
  height: 36px;
}

.helicopter-animation {
  position: absolute;
  height: 40px;
  top: 0;
  left: 0;
  offset-rotate: auto;
  offset-anchor: center;
  offset-distance: 0%;
  z-index: 3;
}

.helicopter-animation img {
  height: 40px;
  width: auto;
}

.arrow-animation,
.line-animation {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 11.25px;
  transform: translateY(-50%);
}

.arrow-animation {
  z-index: 1;
}

.line-animation {
  z-index: 2;
}

#arrow-fill {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.planned-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.user-start {
  margin: 0;
  font-size: 1rem;
  color: rgb(var(--txt, var(--color_15)));
}
.user-start strong {
  font-weight: 600;
}

.user-delay {
  margin: 0;
  padding: 0.35rem 0.75rem;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgb(237, 32, 36);
}

.event-card {
  width: 100%;
  text-align: left;
}

.event-header {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.event-header p {
  margin: 0;
  font-size: 0.95rem;
  color: rgb(var(--txt, var(--color_15)));
}
.event-header__key {
  display: block;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--color_45));
}

.map-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.map.map--user,
.phone_layout .map {
  height: 220px;
  width: 100%;
  margin: 0;
  border: 1px solid #e6e6e6;
  border-radius: 0;
  box-shadow: none;
}

/* Transparent tap target over the Leaflet preview */
.map-geo-link--hit {
  position: absolute;
  inset: 0;
  z-index: 1100;
  display: block;
  background: transparent;
  text-indent: -9999px;
  overflow: hidden;
}
.map-geo-link--hit[hidden] {
  display: none !important;
}

/* Visible CTA below the map (outside .map-wrap so Leaflet cannot cover it) */
.map-route-btn {
  position: static;
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.7rem 1rem;
  border-radius: 0;
  text-align: center;
  text-decoration: none;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: #2d3b67;
  box-sizing: border-box;
}
.map-route-btn:hover, .map-route-btn:focus {
  color: #fff;
  background: #243155;
}
.map-route-btn[hidden] {
  display: none !important;
}

.user-waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2.5rem 1rem;
  text-align: center;
  background-color: #fff;
}
.user-waiting__pulse {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: rgb(237, 32, 36);
  animation: user-wait-pulse 1.6s ease-in-out infinite;
}
.user-waiting__title {
  margin: 0;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(var(--color_45));
}
.user-waiting__text {
  margin: 0;
  max-width: 18rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgb(var(--txt, var(--color_15)));
}

/* Primary not seated yet, but companions already are — positive confirmation
   instead of the bare "Noch kein Flug" waiting state. */
.user-assigned {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.75rem 1rem;
  text-align: center;
  background-color: #fff;
}
.user-assigned__title {
  margin: 0;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2d3b67;
}
.user-assigned__text {
  margin: 0;
  max-width: 20rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgb(var(--txt, var(--color_15)));
}
.user-assigned__note {
  margin: 0;
  max-width: 20rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgb(var(--color_45));
}

@keyframes user-wait-pulse {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}
/* —— Weitere Personen (add companions on the status page) —— */
.user-group {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: left;
  padding-top: 1.25rem;
  border-top: 1px solid #e6e6e6;
}
.user-group .user-section__label {
  text-align: center;
}
.user-group {
  /* One-line rollup above the roster: "N von M …" or "fliegt gemeinsam …". */
}
.user-group__status {
  margin: 0 0 0.25rem;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.4;
  color: rgb(var(--color_45));
}
.user-group__status strong {
  color: rgb(var(--txt, var(--color_15)));
  font-variant-numeric: tabular-nums;
}
.user-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.user-group__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e6e6e6;
  font-size: 0.95rem;
}
.user-group__name {
  flex: 1 1 auto;
  min-width: 0;
  color: rgb(var(--txt, var(--color_15)));
}
.user-group__tag {
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: #2d3b67;
}
.user-group__weight {
  flex-shrink: 0;
  color: rgb(var(--color_45));
  font-variant-numeric: tabular-nums;
}
.user-group {
  /* Per-row remove control (companions only, before seating) */
}
.user-group__del {
  flex-shrink: 0;
  margin: 0;
  display: flex;
  align-items: center;
}
.user-group__del-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid #e6e6e6;
  border-radius: 50%;
  background: transparent;
  color: rgb(var(--color_45));
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.user-group__del-btn:hover, .user-group__del-btn:focus-visible {
  color: rgb(237, 32, 36);
  border-color: rgb(237, 32, 36);
  background: #fbe9e9;
  outline: none;
}
.user-group__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.user-group {
  /* Collapsible "Weitere Personen" panel (native <details>) — tap to open/close */
}
.user-group__add {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.user-group {
  /* When the list of registered people sits above it, separate the
     "add a person" panel from the list with extra breathing room. */
}
.user-group__list + .user-group__add {
  margin-top: 0.75rem;
}
.user-group__add-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.35rem 0;
  cursor: pointer;
  user-select: none;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.user-group__add-label::-webkit-details-marker {
  display: none;
}
.user-group__add-label:focus-visible {
  outline: 2px solid #2d3b67;
  outline-offset: 2px;
}
.user-group {
  /* Chevron drawn from two borders; points down when closed, flips up when open */
}
.user-group__add-icon {
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.15rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.user-group__add[open] .user-group__add-icon {
  margin-top: 0.15rem;
  transform: rotate(-135deg);
}
.user-group__fields {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.user-group .form-control {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #e6e6e6;
  border-radius: 0;
  padding: 0.55rem 0 0.45rem;
  color: rgb(var(--txt, var(--color_15)));
  box-shadow: none;
}
.user-group .form-control::placeholder {
  color: rgb(var(--color_45));
  opacity: 1;
}
.user-group .form-control:focus {
  background-color: transparent;
  border-bottom-color: #2d3b67;
  box-shadow: none;
}
.user-group__btn {
  display: block;
  width: 100%;
  padding: 0.7rem 1rem;
  border: none;
  border-radius: 0;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: #2d3b67;
  cursor: pointer;
}
.user-group__btn:hover, .user-group__btn:focus {
  background: #243155;
}
.user-group__hint {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgb(var(--color_45));
}
.user-group__note {
  margin: 0;
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  text-align: center;
  color: rgb(var(--color_45));
  background: #f5f5f5;
}

/* —— Per-person flight rows (tap a name to open the meeting-point map) —— */
/* A member row: the collapsible flight (or a muted "no flight" line) on the
   left, the optional remove control pinned top-right. */
.user-group__item--person {
  align-items: flex-start;
  gap: 0.6rem;
}

.user-person {
  flex: 1 1 auto;
  min-width: 0;
  /* Summary = the always-visible tap target: name + weight, then a compact
     time · Treffpunkt line with the disclosure chevron. */
}
.user-person__summary {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.user-person__summary::-webkit-details-marker {
  display: none;
}
.user-person__summary:focus-visible {
  outline: 2px solid #2d3b67;
  outline-offset: 2px;
}
.user-person__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.user-person__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: rgb(var(--color_45));
}
.user-person__meta--none {
  font-style: italic;
}
.user-person__time {
  flex-shrink: 0;
  font-weight: 600;
  color: rgb(var(--txt, var(--color_15)));
  font-variant-numeric: tabular-nums;
}
.user-person__place {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-person__delay {
  flex-shrink: 0;
  font-weight: 500;
  color: rgb(237, 32, 36);
}
.user-person {
  /* Reuses the .user-group__add-icon chevron; flip it when the row is open. */
}
.user-person__icon {
  flex-shrink: 0;
}
.user-person[open] .user-person__icon {
  margin-top: 0.15rem;
  transform: rotate(-135deg);
}
.user-person__card {
  padding-top: 0.75rem;
  text-align: left;
}
.user-person {
  /* Non-expandable variant for a member not yet assigned to any flight. */
}
.user-person--none {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* —— Remove-companion confirm modal (self-contained, no Bootstrap on this page) —— */
.user-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(40, 40, 40, 0.55);
}
.user-modal__dialog {
  width: 100%;
  max-width: 22rem;
  padding: 1.4rem 1.25rem 1.25rem;
  background: #fff;
  text-align: left;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.user-modal__title {
  margin: 0 0 0.6rem;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgb(var(--txt, var(--color_15)));
}
.user-modal__text {
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgb(var(--color_45));
}
.user-modal__actions {
  display: flex;
  gap: 0.6rem;
}
.user-modal__btn {
  flex: 1 1 0;
  padding: 0.7rem 1rem;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.user-modal__btn--cancel {
  color: rgb(var(--txt, var(--color_15)));
  background: #fff;
  border-color: #e6e6e6;
}
.user-modal__btn--cancel:hover, .user-modal__btn--cancel:focus-visible {
  background: #f5f5f5;
  outline: none;
}
.user-modal__btn--confirm {
  color: #fff;
  background: rgb(237, 32, 36);
}
.user-modal__btn--confirm:hover, .user-modal__btn--confirm:focus-visible {
  background: #cf1b1f;
  outline: none;
}

.footer_phone.user-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.35rem 0.75rem;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;
}
.footer_phone.user-footer__copy, .footer_phone.user-footer__contact {
  margin: 0;
  font-size: 0.7rem;
  color: rgb(var(--color_45));
}
.footer_phone.user-footer a {
  color: rgb(var(--txt, var(--color_15)));
  text-decoration: none;
}

.view_helicopter_page {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 1.5rem 1rem 0.75rem;
  box-sizing: border-box;
  gap: 0.85rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.heli_page_toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.75rem;
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 1.1rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #e2e6ee;
}

.heli_page_toolbar_title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.85rem;
  min-width: 0;
}

.heli_page_heading {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  color: #2d3b67;
}

.heli_page_kennung {
  font-size: 1rem;
  color: #6c757d;
}

.heli_edit_form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

/* Two columns on tablet: master data left, envelopes right */
.heli_form_sections {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 0.85rem 1rem;
  align-items: start;
  width: 100%;
}

.heli_form_col {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  /* Let the Long/Lat pairs react to this column's own width (see below),
     so they stack whenever the column is narrow — narrow single-column
     portrait tablets AND the half-width columns of the two-column layout
     (e.g. iPad Pro in landscape). */
  container-type: inline-size;
}

.view_helicopter_page .heli_form_section {
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  background: #f7f8fb;
  border: 1px solid #d8dde8;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(45, 59, 103, 0.08);
  padding: 0.85rem 1rem 1rem;
}
.view_helicopter_page .heli_form_section h3 {
  margin: 0 0 0.85rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid #e2e6ee;
  font-size: 1.05rem;
  font-weight: 600;
  color: #2d3b67;
  line-height: 1.3;
}
.view_helicopter_page .heli_form_section .row {
  --bs-gutter-x: 0.75rem;
  margin-bottom: 0.65rem !important;
}
.view_helicopter_page .heli_form_section .row:last-of-type {
  margin-bottom: 0 !important;
}
.view_helicopter_page .heli_form_section .col-form-label {
  font-size: 0.92rem;
  padding-top: calc(0.375rem + 1px);
  color: #3d4659;
}
.view_helicopter_page .heli_form_section .form-control {
  min-height: 2.25rem;
}
.view_helicopter_page .heli_form_section {
  /* Let the paired fields share the row width evenly. Covers both the
     single unit fields (.input-group) and the fieldset/legend pairs
     (.heli_field) — both carry .heli_unit_group. */
}
.view_helicopter_page .heli_form_section .heli_unit_group {
  min-width: 0;
  flex: 1 1 0;
}
.view_helicopter_page .heli_form_section {
  /* Real fieldset + legend: the legend natively breaks the fieldset border,
     so the caption sits in a genuine gap — no background patch, no border
     line crossing the text, and it survives any panel-colour change. The
     border moves from the input to the fieldset; the input goes borderless
     inside it. */
}
.view_helicopter_page .heli_form_section .heli_field {
  /* Override the fieldset default min-inline-size: min-content so it can
     shrink in the flex row. */
  min-width: 0;
  margin: 0;
  padding: 0 0.15rem 0.1rem;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  background: #fff;
}
.view_helicopter_page .heli_form_section .heli_field:focus-within {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.2);
}
.view_helicopter_page .heli_form_section .heli_field_legend {
  /* Shrink to the text so only its own width notches the border. */
  width: auto;
  margin: 0 0 0 0.35rem;
  padding: 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  color: #5c6578;
  white-space: nowrap;
}
.view_helicopter_page .heli_form_section {
  /* Input is borderless inside the fieldset; the fieldset draws the frame. */
}
.view_helicopter_page .heli_form_section .heli_field > .form-control {
  border: 0;
  background: transparent;
  min-height: 1.8rem;
  padding-top: 0.15rem;
  padding-bottom: 0.3rem;
}
.view_helicopter_page .heli_form_section .heli_field > .form-control:focus {
  box-shadow: none;
}
.view_helicopter_page .heli_form_section .input-group-text {
  padding: 0.25rem 0.45rem;
  font-size: 0.8rem;
  color: #5c6578;
  background: #eef0f5;
  white-space: nowrap;
}
.view_helicopter_page .heli_form_section {
  /* Unit shown inside the field instead of a trailing addon box, so the
     number itself keeps the width. The prefix (Long/Lat/Station/Gewicht)
     stays a left box; only the unit (mm/kg) moved inside. */
}
.view_helicopter_page .heli_form_section .heli_unit_group {
  position: relative;
}
.view_helicopter_page .heli_form_section .heli_unit_group .form-control {
  /* Reserve room so typed digits never slide under the unit. */
  padding-right: 2.3rem;
  /* The input is the visual right edge now (unit is overlaid, no box),
     so restore the right radius Bootstrap strips from a non-last child. */
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.view_helicopter_page .heli_form_section {
  /* Hide number spinners so they don't collide with the overlaid unit on
     desktop; iPadOS Safari shows none anyway. */
}
.view_helicopter_page .heli_form_section .heli_unit_group input[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.view_helicopter_page .heli_form_section .heli_unit_group input[type=number]::-webkit-outer-spin-button, .view_helicopter_page .heli_form_section .heli_unit_group input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.view_helicopter_page .heli_form_section .heli_unit_suffix {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  transform: translateY(-50%);
  /* Sit above the input, incl. its focus z-index bump, so it stays visible. */
  z-index: 6;
  font-size: 0.8rem;
  line-height: 1;
  color: #5c6578;
  pointer-events: none;
}

.view_helicopter_page .btn_seatAdd,
.view_helicopter_page .btn_envelopeAdd {
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.35rem 0.55rem;
  line-height: 1;
}

.view_helicopter_page .btn_seatRemove,
.view_helicopter_page .btn_envelopeRemove {
  padding: 0.25rem 0.4rem;
  flex-shrink: 0;
  color: #6c757d;
}
.view_helicopter_page .btn_seatRemove:hover, .view_helicopter_page .btn_seatRemove:focus-visible,
.view_helicopter_page .btn_envelopeRemove:hover,
.view_helicopter_page .btn_envelopeRemove:focus-visible {
  color: #b02a37;
  outline: none;
}

.heli_cg_preview_hint {
  margin: -0.35rem 0 0.65rem;
  font-size: 0.82rem;
  color: #6c757d;
  line-height: 1.35;
}

.heli_cg_status {
  padding: 0.45rem 0.65rem;
  margin-bottom: 0.65rem;
  font-size: 0.85rem;
  line-height: 1.3;
}

.heli_cg_chart_frame {
  position: relative;
  width: 100%;
  min-height: 22rem;
  border: 1px solid #e2e6ee;
  border-radius: 0.35rem;
  background: #fff;
  overflow: hidden;
}

.heli_cg_chart_frame .cg_embed_chart {
  width: 100%;
  min-height: 22rem;
}

.heli_cg_chart_empty {
  margin: 0;
  padding: 2rem 1rem;
  text-align: center;
  color: #adb5bd;
  font-size: 0.9rem;
}

.btn_seatRemove {
  padding: 0;
}

/* Narrow main column / portrait: stack sections */
@media (max-width: 1100px) {
  .heli_form_sections {
    grid-template-columns: 1fr;
  }
}
/* When the form column is narrow, the EmptyMass / Fuel Long/Lat pairs are
   too cramped side by side in col-sm-7, so stack them. The ~700px column of
   the iPad mini in landscape stays comfortable; the ~520px portrait column
   and the ~420-480px two-column widths (iPad Pro landscape) stack. */
@container (max-width: 640px) {
  .view_helicopter_page .heli_axis_pair {
    flex-direction: column;
  }
}
body.tablet_layout:has(.pilot-counter) {
  height: 100vh;
  overflow: hidden;
}
body.tablet_layout:has(.pilot-counter) .aside_tablet {
  display: none;
}
body.tablet_layout:has(.pilot-counter) {
  grid-template-areas: "header" "content";
  grid-template-columns: 1fr;
  grid-template-rows: 10vh minmax(0, 1fr);
}
body.tablet_layout:has(.pilot-counter) .footer_tablet {
  display: none;
}
body.tablet_layout:has(.pilot-counter) .header_tablet {
  position: relative;
  z-index: 50;
}
body.tablet_layout:has(.pilot-counter) .main_tablet {
  grid-area: content;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  z-index: 1;
}
body.tablet_layout:has(.pilot-counter) .nav_tablet {
  grid-area: content;
  justify-self: start;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  width: auto;
  z-index: 40;
  pointer-events: none;
}
body.tablet_layout:has(.pilot-counter) .nav_tablet > .collapse.show,
body.tablet_layout:has(.pilot-counter) .nav_tablet > .collapsing {
  pointer-events: auto;
}
body.tablet_layout:has(.pilot-counter) .nav_tablet > .collapse {
  height: 100%;
  min-height: 0;
}
body.tablet_layout:has(.pilot-counter) .nav_tablet > .collapse.show {
  height: 100% !important;
  opacity: 1;
}
body.tablet_layout:has(.pilot-counter) .navigation {
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  width: 16vw;
}

.main_tablet.pilot-counter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 34%);
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0.5rem 0.75rem;
  overflow: hidden;
  box-sizing: border-box;
  align-items: stretch;
  /* Locked viewport (body/main overflow: hidden) means the page itself must
     not scroll on the iPad. Let this column scroll internally so the action
     buttons at the bottom stay reachable when the content is tall. */
}
.main_tablet.pilot-counter .pilot_container {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
}
.main_tablet.pilot-counter .diagram_container {
  position: relative;
  top: auto;
  right: auto;
  width: auto;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  padding: 0.4rem;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: transparent;
}
.main_tablet.pilot-counter .diagram_container h3 {
  font-size: 0.85em;
  margin: 0 0 0.25rem;
  flex-shrink: 0;
}
.main_tablet.pilot-counter .diagram_container .table-responsive {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 30%;
  overflow-y: auto;
}

@media (max-width: 1100px) {
  .main_tablet.pilot-counter {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(22rem, 48vh);
    align-content: stretch;
  }
  .main_tablet.pilot-counter .diagram_container {
    height: 100%;
    max-height: none;
    min-height: 0;
    overflow: hidden;
  }
  .main_tablet.pilot-counter .diagram_container .cg_embed_panel--pilot > h3 {
    display: none;
  }
  .main_tablet.pilot-counter .diagram_container .table-responsive {
    flex: 0 0 auto;
    max-height: 5.5rem;
  }
  .main_tablet.pilot-counter .diagram_container .cg_chart_frame {
    flex: 1 1 auto;
    min-height: 16rem;
  }
}
.pilot_container {
  display: flex;
  flex-direction: column;
  justify-items: center;
  text-align: center;
  gap: 0.75rem;
}

.pilot_header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.pilot_header h1 {
  margin: 0;
}

.pilot_status_badge {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
}

.pilot_status_badge.is-idle {
  background: #cff4fc;
  color: #055160;
}

.pilot_status_badge.is-running {
  background: #fff3cd;
  color: #664d03;
}

.pilot_status_badge.is-done {
  background: #d1e7dd;
  color: #0f5132;
}

.table_pilot {
  padding: 0;
  width: 100%;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.table_pilot .table {
  margin-bottom: 0;
  font-size: 0.95rem;
}
.table_pilot .table > :not(caption) > * > * {
  padding: 0.4rem 0.5rem;
}
.table_pilot .table th {
  font-size: 0.85rem;
}

/* Table ~2/3 · cabin ~1/3; row band ≈ header + 4 body rows. */
.pilot-pax {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.5rem;
  align-items: stretch;
  width: 100%;
  padding: 0rem 0.15rem;
  margin: 1rem 0;
  --pilot-pax-head: calc(0.85rem * 1.25 + 0.8rem);
  --pilot-pax-row: calc(0.95rem * 1.25 + 0.8rem);
  height: calc(var(--pilot-pax-head) + 4 * var(--pilot-pax-row));
  min-height: 0;
}

.pilot-cabin {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.pilot-cabin .image_helicopter,
.pilot-cabin .cabin-plan {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.pilot-cabin .cabin-plan__frame {
  width: 100%;
  height: 100%;
  max-width: 100%;
  aspect-ratio: auto;
  overflow: visible;
  --cabin-top: 20;
  --cabin-bottom: 80;
  --cabin-half-span-base: 14;
  --cabin-half-span-step: 6;
  --cabin-half-span-max: 28;
  --seat-disk-size: 4rem;
}
.pilot-cabin .seat__disk {
  width: var(--seat-disk-size);
  height: var(--seat-disk-size);
}
.pilot-cabin .seat__badge {
  font-size: 0.68rem;
}
.pilot-cabin .seat__person {
  max-width: var(--seat-disk-size);
  font-size: 0.66rem;
  min-height: 0.85em;
}
.pilot-cabin .seat {
  gap: 0.08rem;
}
.pilot-cabin .cabin-plan__frame--dense,
.pilot-cabin .cabin-plan__frame--compact {
  --seat-disk-size: 3.35rem;
}
.pilot-cabin .cabin-plan__frame--dense .seat__badge,
.pilot-cabin .cabin-plan__frame--compact .seat__badge,
.pilot-cabin .cabin-plan__frame--dense .seat__person,
.pilot-cabin .cabin-plan__frame--compact .seat__person {
  font-size: 0.58rem;
}

.pilot_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: center;
  padding: 0.85rem 0.6rem 0.4rem;
  align-items: flex-start;
}

.pilot_action_wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.pilot_action_btn {
  min-width: 10rem;
}

.pilot_context_form {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

.pilot_context_field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.pilot_context_field label {
  margin: 0;
  font-weight: 600;
  font-size: 0.85rem;
}
.pilot_context_field select {
  min-width: 10rem;
  max-width: 15rem;
}

.pilot_context_field--event select {
  min-width: 14rem;
  max-width: 20rem;
}

.main_tablet.pilot-counter--select {
  grid-template-columns: minmax(0, 1fr);
  overflow-y: auto;
}
.main_tablet.pilot-counter--select .pilot_container {
  height: auto;
  min-height: 100%;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.pilot_select_container {
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
  padding: 1rem 0;
  text-align: center;
}

.pilot_select_panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pilot_select_title {
  margin: 0;
  font-size: 1.4rem;
}

.pilot_select_hint {
  margin: 0;
  color: #6c757d;
  font-size: 0.95rem;
}

.pilot_select_form {
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}
.pilot_select_form .pilot_context_field {
  align-items: stretch;
  text-align: left;
}
.pilot_select_form .pilot_context_field select {
  min-width: 0;
  max-width: none;
  width: 100%;
}

.pilot_select_start {
  margin-top: 0.5rem;
  width: 100%;
}

.counter_return_btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.5rem;
  background: #fff;
  color: #212529;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}
.counter_return_btn:hover, .counter_return_btn:focus-visible {
  background: #f1f3f5;
  color: #212529;
}
.counter_return_btn:focus-visible {
  outline: 2px solid rgba(13, 110, 253, 0.4);
  outline-offset: 2px;
}

.counter_header_bar {
  display: flex;
  align-items: center;
}

.counter_header_left,
.counter_header_center,
.counter_header_right {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}

.counter_header_left {
  justify-content: flex-start;
  gap: 0.75rem;
}

.counter_header_center {
  justify-content: center;
}

.counter_header_right {
  justify-content: flex-end;
}

.counter_header_pilot {
  margin: 0;
  padding: 0;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.counter_header_einteilung {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pilot_meta {
  text-align: left;
  background: #f8f9fa;
  border-radius: 0.5rem;
  padding: 0.75rem;
}
.pilot_meta p {
  margin: 0.15rem 0;
}

.counter_timer {
  background: #fff3cd;
  border: 1px solid #ffe69c;
  border-radius: 0.5rem;
  padding: 0.75rem;
}
.counter_timer p {
  margin: 0.2rem 0;
  font-size: 1.1rem;
}

.counter_timer_soll {
  font-weight: 500;
  font-size: 0.95em;
  opacity: 0.85;
}

.pilot_flight_animation {
  margin: 2rem 0;
}

.pilot_flight_row {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.pilot_flight_side {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.pilot_flight_side--left {
  justify-content: flex-end;
}

.pilot_flight_side--right {
  justify-content: flex-start;
}

.pilot_flight_time {
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #495057;
}

.pilot_flight_animation.is-overrun .pilot_flight_time--arrive {
  color: #dc3545;
}

.pilot_flight_delta {
  flex: 0 0 auto;
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #dc3545;
}

.pilot_flight_track {
  position: relative;
  flex: 0 1 20rem;
  height: 96px;
  display: flex;
  align-items: center;
}

.pilot_flight_heli {
  position: absolute;
  top: 0;
  left: 0;
  height: 96px;
  offset-rotate: auto;
  offset-anchor: center;
  offset-distance: 0%;
  z-index: 3;
  pointer-events: none;
}
.pilot_flight_heli img {
  display: block;
  height: 96px;
  width: auto;
}

.pilot_flight_guide,
.pilot_flight_fill {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 16px;
  transform: translateY(-50%);
  line-height: 0;
}
.pilot_flight_guide svg,
.pilot_flight_fill svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pilot_flight_guide {
  z-index: 1;
}

.pilot_flight_fill {
  z-index: 2;
}

#pilotFlightFillLine {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

/* iPad Mini (and similarly compact viewports): keep the Pro-sized animation
   as the default, scale the track/heli/line back down here. */
@media (max-width: 900px), (max-height: 768px) {
  .main_tablet.pilot-counter {
    padding: 0.35rem 0.5rem;
  }
  .main_tablet.pilot-counter .pilot_container {
    gap: 0.45rem;
    padding-bottom: 0.25rem;
  }
  .pilot_flight_animation {
    margin: 0.75rem 0;
  }
  .pilot_flight_row {
    gap: 1rem;
  }
  .pilot_flight_time {
    font-size: 1.1rem;
  }
  .pilot_flight_delta {
    font-size: 1.1rem;
  }
  .pilot_flight_track {
    flex: 0 1 16rem;
    height: 68px;
  }
  .pilot_flight_heli {
    height: 68px;
  }
  .pilot_flight_heli img {
    height: 68px;
  }
  .pilot_flight_guide,
  .pilot_flight_fill {
    height: 12px;
  }
  .pilot_flight_guide g,
  .pilot_flight_fill g {
    stroke-width: 7;
  }
  .table_pilot {
    padding: 0;
  }
  .table_pilot .table {
    font-size: 0.85rem;
  }
  .table_pilot .table > :not(caption) > * > * {
    padding: 0.28rem 0.4rem;
  }
  .table_pilot .table th {
    font-size: 0.78rem;
  }
  .pilot-pax {
    --pilot-pax-head: calc(0.78rem * 1.25 + 0.56rem);
    --pilot-pax-row: calc(0.85rem * 1.25 + 0.56rem);
    gap: 0.35rem;
    padding: 0rem 0;
    margin: 0rem 0;
    height: 16rem;
  }
  .pilot-cabin .cabin-plan__frame {
    --seat-disk-size: 3.4rem;
  }
  .pilot-cabin .seat__badge {
    font-size: 0.58rem;
  }
  .pilot-cabin .seat__person {
    font-size: 0.58rem;
  }
  .pilot-cabin .cabin-plan__frame--dense,
  .pilot-cabin .cabin-plan__frame--compact {
    --seat-disk-size: 2.9rem;
  }
  .pilot_actions {
    gap: 0.5rem 1rem;
    padding: 0.5rem 0.4rem 0.25rem;
  }
}
/* All tablets in portrait: give the cabin more width; layout JS spreads seats
   to the pane instead of shrinking disks. */
@media (orientation: portrait) {
  .pilot-pax {
    grid-template-columns: 1.2fr 1fr;
    height: 18rem;
  }
  .pilot-cabin .cabin-plan__frame {
    --cabin-top: 22;
    --cabin-bottom: 78;
    --cabin-half-span-base: 16;
    --cabin-half-span-step: 6;
    --cabin-half-span-max: 32;
    --seat-disk-size: 3.4rem;
  }
  .pilot-cabin .seat__badge {
    font-size: 0.58rem;
  }
  .pilot-cabin .seat__person {
    font-size: 0.58rem;
    min-height: 0.85em;
  }
  .pilot-cabin .cabin-plan__frame--dense,
  .pilot-cabin .cabin-plan__frame--compact {
    --seat-disk-size: 2.9rem;
  }
  .pilot-cabin .cabin-plan__frame--dense .seat__badge,
  .pilot-cabin .cabin-plan__frame--compact .seat__badge,
  .pilot-cabin .cabin-plan__frame--dense .seat__person,
  .pilot-cabin .cabin-plan__frame--compact .seat__person {
    font-size: 0.52rem;
  }
}
/* iPad Mini portrait: same disk size as Mini landscape — only pack tighter. */
@media (orientation: portrait) and (max-width: 900px) {
  .pilot-pax {
    grid-template-columns: 1fr 1fr;
    height: 17rem;
  }
  .pilot-cabin .cabin-plan__frame {
    --cabin-top: 24;
    --cabin-bottom: 76;
    --cabin-half-span-base: 18;
    --cabin-half-span-step: 7;
    --cabin-half-span-max: 34;
    --seat-disk-size: 3.4rem;
  }
  .pilot-cabin .seat__badge {
    font-size: 0.58rem;
  }
  .pilot-cabin .seat__person {
    font-size: 0.58rem;
  }
  .pilot-cabin .cabin-plan__frame--dense,
  .pilot-cabin .cabin-plan__frame--compact {
    --seat-disk-size: 2.9rem;
  }
  .pilot-cabin .cabin-plan__frame--dense .seat__badge,
  .pilot-cabin .cabin-plan__frame--compact .seat__badge,
  .pilot-cabin .cabin-plan__frame--dense .seat__person,
  .pilot-cabin .cabin-plan__frame--compact .seat__person {
    font-size: 0.52rem;
  }
}
.counter_timer_hint {
  font-size: 0.85rem !important;
  opacity: 0.8;
}

#counterFlightRemaining.is-overrun {
  color: #b02a37;
  font-weight: 700;
}

.pilot_action_form {
  grid-row: 2;
  display: inline-block;
  margin: 0;
}

.table-boundary td {
  background-color: #fff3cd;
}

/* Ground Ops: prominent "next flight" scheduled-time header (read-only view). */
.ground_next {
  text-align: center;
  margin: 0.5rem 0 1rem;
}

.ground_next_title {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin: 0 0 0.25rem;
}

.ground_next_time {
  font-size: 2.5rem;
  font-weight: 700;
  color: hsl(227, 71%, 57%);
  margin: 0;
}

body.tablet_layout:has(.main_tablet.seat-allocation) {
  height: 100vh;
  overflow: hidden;
  grid-template-areas: "header header header" "nav main main" "footer footer footer";
  grid-template-rows: 10vh minmax(0, 1fr) 7vh;
}
body.tablet_layout:has(.main_tablet.seat-allocation) .aside_tablet {
  display: none;
}
body.tablet_layout:has(.main_tablet.seat-allocation) .main_tablet {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
body.tablet_layout:has(.main_tablet.seat-allocation) {
  /* Stretch collapse + .navigation to the grid nav cell (not just content height).
     Other pages use .navigation { height: 84vh }; here % needs a tall parent chain. */
}
body.tablet_layout:has(.main_tablet.seat-allocation) .nav_tablet {
  height: 100%;
  min-height: 0;
  align-self: stretch;
}
body.tablet_layout:has(.main_tablet.seat-allocation) .nav_tablet > .collapse {
  height: 100%;
  min-height: 0;
}
body.tablet_layout:has(.main_tablet.seat-allocation) .nav_tablet > .collapse.show {
  height: 100% !important;
  opacity: 1;
}
body.tablet_layout:has(.main_tablet.seat-allocation) .nav_tablet > .collapsing {
  height: 100% !important;
  overflow: hidden !important;
  transition: none !important;
}
body.tablet_layout:has(.main_tablet.seat-allocation) .nav_tablet > .collapsing.nav-is-opening {
  animation: nav-tablet-fade-in 0.35s ease forwards;
}
body.tablet_layout:has(.main_tablet.seat-allocation) .nav_tablet > .collapsing.nav-is-closing {
  animation: nav-tablet-fade-out 0.35s ease forwards;
}
body.tablet_layout:has(.main_tablet.seat-allocation) .navigation {
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

.seat-allocation.has-tap-selection .available-customers-section {
  background: rgba(45, 59, 103, 0.04);
}
.seat-allocation {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28%;
  grid-template-rows: minmax(0, 1fr) minmax(0, 34%);
  gap: 0.6vh 1vw;
  width: 100%;
  height: 100%;
  padding: 0.4vh 0.6vw;
  overflow: hidden;
  align-content: stretch;
  box-sizing: border-box;
}
.seat-allocation .seat-allocation-alert {
  position: absolute;
  top: 0.5vh;
  left: 13vw;
  right: 1vw;
  z-index: 20;
  margin: 0;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
}
.seat-allocation .image_helicopter {
  grid-column: 1;
  grid-row: 1;
}
.seat-allocation .seat.is-drop-target .seat__disk {
  color: #2d3b67 !important;
  filter: drop-shadow(0 0 4px rgba(45, 59, 103, 0.55));
}
.seat-allocation .seat.is-selected-source {
  outline: none;
}
.seat-allocation .seat.is-selected-source .seat__disk {
  color: #2d3b67 !important;
}
.seat-allocation .diagram_container {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  top: auto;
  right: auto;
  width: auto;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  padding: 0.35vw;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: transparent;
}
.seat-allocation .diagram_container h3 {
  font-size: 0.85em;
  margin: 0 0 0.2vh;
  flex-shrink: 0;
}
.seat-allocation .bottom-customers-layout {
  grid-column: 1/-1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  justify-self: stretch;
  min-height: 0;
  align-self: stretch;
}
.seat-allocation .bottom-customers-layout .section-title {
  font-size: 0.9em;
  margin: 0 0 0.3em;
}
.seat-allocation .bottom-customers-layout .tap-hint {
  margin: 0 0 0.45rem;
  font-size: 0.75em;
  line-height: 1.3;
  color: #5c6578;
}
.seat-allocation .bottom-customers-layout .available-customers-section,
.seat-allocation .bottom-customers-layout .assigned-customers-section {
  border: 0;
  padding: 0.35rem 1vw;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}
.seat-allocation .bottom-customers-layout .available-customers-section .available-empty-hint,
.seat-allocation .bottom-customers-layout .assigned-customers-section .available-empty-hint {
  margin: 0.25rem 0 0;
  font-size: 0.8em;
  line-height: 1.3;
  flex-shrink: 0;
}
.seat-allocation .bottom-customers-layout .available-customers-section .customer-container,
.seat-allocation .bottom-customers-layout .assigned-customers-section .customer-container {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-content: flex-start;
}
.seat-allocation .bottom-customers-layout .available-customers-section .customer-card,
.seat-allocation .bottom-customers-layout .assigned-customers-section .customer-card {
  border: 1px solid rgba(45, 59, 103, 0.28);
  border-radius: 0.45rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.85em;
  background: #fff;
  color: black;
  box-shadow: 0 1px 2px rgba(45, 59, 103, 0.08);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.seat-allocation .bottom-customers-layout .available-customers-section .customer-card strong,
.seat-allocation .bottom-customers-layout .assigned-customers-section .customer-card strong {
  color: black;
}
.seat-allocation .bottom-customers-layout .available-customers-section .customer-card span,
.seat-allocation .bottom-customers-layout .assigned-customers-section .customer-card span {
  color: #42464e;
}
.seat-allocation .bottom-customers-layout .available-customers-section .customer-card:hover,
.seat-allocation .bottom-customers-layout .assigned-customers-section .customer-card:hover {
  border-color: #2b689c;
  box-shadow: 0 1px 4px rgba(43, 104, 156, 0.18);
}
.seat-allocation .bottom-customers-layout .available-customers-section .customer-card.is-selected,
.seat-allocation .bottom-customers-layout .assigned-customers-section .customer-card.is-selected {
  outline-offset: 1px;
  background: #2d3b67;
  border-color: #2d3b67;
  color: #fff;
  box-shadow: 0 1px 4px rgba(45, 59, 103, 0.28);
}
.seat-allocation .bottom-customers-layout .available-customers-section .customer-card.is-selected strong,
.seat-allocation .bottom-customers-layout .available-customers-section .customer-card.is-selected span,
.seat-allocation .bottom-customers-layout .assigned-customers-section .customer-card.is-selected strong,
.seat-allocation .bottom-customers-layout .assigned-customers-section .customer-card.is-selected span {
  color: #fff;
}
.seat-allocation .bottom-customers-layout .assigned-customers-section {
  border-left: 1px solid #c5cdd8;
  padding-left: 1.2vw;
}
.seat-allocation .bottom-customers-layout .available-customers-section {
  padding-right: 1.2vw;
}
.seat-allocation #cg-status-box {
  padding: 0.25rem 0.4rem;
  margin-bottom: 0.3vh;
  border: 1px solid #ccc;
  background: #fff;
  color: #000;
  font-size: 0.8em;
  line-height: 1.2;
}

.footer_tablet.customer_management {
  height: 7vh;
  min-height: 7vh;
  max-height: 7vh;
  padding: 0.4vh 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-sizing: border-box;
}
.footer_tablet.customer_management .seat-allocation-actions {
  width: 100%;
  max-width: 36rem;
  flex-wrap: nowrap;
}
.footer_tablet.customer_management .seat-allocation-actions form {
  flex: 1;
  margin: 0;
  min-width: 0;
}
.footer_tablet.customer_management .seat-allocation-actions > .btn-form-action {
  flex: 1;
  min-width: 0;
}
.footer_tablet.customer_management .seat-allocation-actions .btn-form-action {
  width: 100%;
}
.footer_tablet.customer_management .seat-allocation-actions .seat-allocation-locked {
  flex: 2;
  margin: 0;
  align-self: center;
  text-align: center;
  font-weight: 600;
  min-width: 0;
}

body.tablet_layout:has(.rotation-plan) {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  grid-template-areas: "header" "content" "footer";
  grid-template-columns: 1fr;
  grid-template-rows: 10vh minmax(0, 1fr) minmax(6vh, auto);
}
body.tablet_layout:has(.rotation-plan) .aside_tablet {
  display: none;
}
body.tablet_layout:has(.rotation-plan) .header_tablet {
  position: relative;
  z-index: 50;
}
body.tablet_layout:has(.rotation-plan) .footer_tablet {
  position: relative;
  z-index: 50;
}
body.tablet_layout:has(.rotation-plan) .main_tablet {
  grid-area: content;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  z-index: 1;
}
body.tablet_layout:has(.rotation-plan) .nav_tablet {
  grid-area: content;
  justify-self: start;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  width: auto;
  z-index: 40;
  pointer-events: none;
}
body.tablet_layout:has(.rotation-plan) .nav_tablet > .collapse.show,
body.tablet_layout:has(.rotation-plan) .nav_tablet > .collapsing {
  pointer-events: auto;
}
body.tablet_layout:has(.rotation-plan) .nav_tablet > .collapse {
  height: 100%;
  min-height: 0;
}
body.tablet_layout:has(.rotation-plan) .nav_tablet > .collapse.show {
  height: 100% !important;
  opacity: 1;
}
body.tablet_layout:has(.rotation-plan) .navigation {
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  width: 16vw;
}

.main_tablet.rotation-plan {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.rotation-plan__grid {
  display: grid;
  grid-template-columns: minmax(14rem, 28%) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  width: 100%;
}

.rotation-plan__slots,
.rotation-plan__detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

.rotation-plan__slots {
  border-right: 1px solid #d0d5dd;
  background: #f8f9fb;
}

.rotation-plan__header {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e3e6ea;
  flex-shrink: 0;
  position: relative;
}

.rotation-plan__back {
  margin-bottom: 0.5rem;
}

.rotation-plan__clock {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #1f2733;
}

.rotation-plan__title {
  margin: 0 0 0.25rem;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.25;
}

.rotation-plan__meta {
  margin: 0;
  color: #5b6472;
  font-size: clamp(0.8rem, 1.2vw, 0.95rem);
  line-height: 1.35;
}

.rotation-plan__slot-list,
.rotation-plan__detail-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.75rem 1rem;
}

.rotation-plan__slot-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.rotation-plan__slot {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #fff;
  position: relative;
  color: black;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}
.rotation-plan__slot.is-hidden-past {
  display: none;
}
.rotation-plan__slot:hover {
  border-color: #2b689c;
}
.rotation-plan__slot.is-selected {
  border-color: #2b689c;
  background: #eaf2fb;
  box-shadow: inset 3px 0 0 #2b689c;
}
.rotation-plan__slot.is-in-flight {
  border-color: #34a853;
  background: #e6f4ea;
}
.rotation-plan__slot.is-in-flight.is-selected {
  background: #d7ecdd;
}
.rotation-plan__slot.is-in-flight::after {
  content: "";
  width: 1.6rem;
  height: 1.6rem;
  margin-left: auto;
  align-self: center;
  flex-shrink: 0;
  background: url("../img/heli_gif_200.gif") center/contain no-repeat;
}
.rotation-plan__slot.is-flown {
  border-color: #d7dbe0;
  background: #f0f1f3;
}
.rotation-plan__slot.is-flown .rotation-plan__slot-time,
.rotation-plan__slot.is-flown .rotation-plan__slot-pax {
  color: #8a929e;
}
.rotation-plan__slot.is-skipped {
  border-color: #d7dbe0;
  background: #f0f1f3;
}
.rotation-plan__slot.is-skipped .rotation-plan__slot-time {
  color: #9aa2ae;
  text-decoration: line-through;
}
.rotation-plan__slot.is-skipped .rotation-plan__slot-pax {
  color: #9aa2ae;
}
.rotation-plan__slot.is-skipped::after {
  content: "übersprungen";
  margin-left: auto;
  align-self: center;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-style: italic;
  color: #9aa2ae;
}

.rotation-plan__slot-time {
  min-width: 3.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.rotation-plan__slot-pax {
  color: #5b6472;
  font-size: 0.9rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rotation-plan__slot-pax--empty {
  color: #9aa2ae;
  font-style: italic;
}

.rotation-plan__placeholder {
  color: #8a929e;
  font-style: italic;
}

.rotation-plan__detail-body:has(.seat-allocation) {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rotation-plan__detail-body .seat-allocation {
  flex: 1 1 auto;
  min-height: 0;
}
.rotation-plan__detail-body .seat-allocation--embedded {
  gap: 0.4rem 0.6rem;
  padding: 0.4rem 0.5rem;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 34%);
  grid-template-rows: minmax(0, 1fr) minmax(8rem, 30%);
}
.rotation-plan__detail-body .seat-allocation--embedded .seat-allocation-alert,
.rotation-plan__detail-body .seat-allocation--embedded .rotation-plan__mutation-flash {
  position: absolute;
  top: 0.35rem;
  left: 0.5rem;
  right: 0.5rem;
  z-index: 20;
  margin: 0;
}
.rotation-plan__detail-body .seat-allocation--embedded .cabin-plan__frame {
  width: min(100%, 42vh);
  max-width: 100%;
  max-height: 100%;
  height: auto;
  aspect-ratio: 5/7;
}
.rotation-plan__detail-body .seat-allocation--embedded .seat__disk,
.rotation-plan__detail-body .seat-allocation--embedded .cabin-plan__frame--dense .seat__disk,
.rotation-plan__detail-body .seat-allocation--embedded .cabin-plan__frame--compact .seat__disk {
  width: clamp(5rem, 9vh, 6.25rem);
  height: clamp(5rem, 9vh, 6.25rem);
}
.rotation-plan__detail-body .seat-allocation--embedded .seat__badge {
  font-size: 0.78rem;
}
.rotation-plan__detail-body .seat-allocation--embedded .seat__person {
  font-size: 0.72rem;
}
.rotation-plan__detail-body .seat-allocation--embedded .diagram_container {
  padding: 0.25rem;
}
.rotation-plan__detail-body .seat-allocation--embedded .diagram_container h3,
.rotation-plan__detail-body .seat-allocation--embedded .bottom-customers-layout .section-title {
  font-size: 0.8em;
}
.rotation-plan__detail-body .seat-allocation--embedded .bottom-customers-layout .tap-hint {
  display: none;
}
.rotation-plan__detail-body .seat-allocation--embedded .bottom-customers-layout .customer-card {
  padding: 0.28rem 0.5rem;
  font-size: 0.8em;
}
.rotation-plan__detail-body .seat-allocation-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid #e3e6ea;
}
.rotation-plan__detail-body .seat-allocation-actions form {
  flex: 1 1 6rem;
  margin: 0;
  min-width: 0;
}
.rotation-plan__detail-body .seat-allocation-actions .btn-form-action {
  flex: 1 1 6rem;
  width: 100%;
  min-width: 0;
}
.rotation-plan__detail-body .seat-allocation-actions .seat-allocation-locked {
  flex: 2 1 10rem;
  margin: 0;
  align-self: center;
  text-align: center;
}

/* —— iPad Air / Pro 11" landscape and similar (~1024–1180 wide) —— */
@media (max-width: 1180px) {
  .rotation-plan__grid {
    grid-template-columns: minmax(13rem, 24%) minmax(0, 1fr);
  }
  .rotation-plan__header {
    padding: 0.7rem 0.85rem;
  }
  .rotation-plan__slot-list,
  .rotation-plan__detail-body {
    padding: 0.6rem 0.75rem;
  }
  .rotation-plan__detail-body .seat-allocation--embedded {
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 32%);
    grid-template-rows: minmax(0, 1fr) minmax(7.5rem, 28%);
  }
  .rotation-plan__detail-body .seat-allocation--embedded .cabin-plan__frame {
    width: min(100%, 40vh);
  }
  .rotation-plan__detail-body .seat-allocation--embedded .seat__disk,
  .rotation-plan__detail-body .seat-allocation--embedded .cabin-plan__frame--dense .seat__disk,
  .rotation-plan__detail-body .seat-allocation--embedded .cabin-plan__frame--compact .seat__disk {
    width: clamp(4.75rem, 8.5vh, 6rem);
    height: clamp(4.75rem, 8.5vh, 6rem);
  }
}
/* —— Short viewports (Mini landscape height, split keyboards, etc.) —— */
@media (max-height: 820px) {
  .rotation-plan__header {
    padding: 0.55rem 0.75rem;
  }
  .rotation-plan__title {
    font-size: 1.05rem;
  }
  .rotation-plan__meta {
    font-size: 0.8rem;
  }
  .rotation-plan__slot {
    padding: 0.45rem 0.65rem;
  }
  .rotation-plan__detail-body .seat-allocation--embedded {
    grid-template-rows: minmax(0, 1fr) minmax(7rem, 26%);
    gap: 0.3rem 0.45rem;
    padding: 0.3rem 0.4rem;
  }
  .rotation-plan__detail-body .seat-allocation--embedded .cabin-plan__frame {
    width: min(100%, 48vh);
  }
  .rotation-plan__detail-body .seat-allocation--embedded .seat__disk,
  .rotation-plan__detail-body .seat-allocation--embedded .cabin-plan__frame--dense .seat__disk,
  .rotation-plan__detail-body .seat-allocation--embedded .cabin-plan__frame--compact .seat__disk {
    width: clamp(4.5rem, 9.5vh, 5.75rem);
    height: clamp(4.5rem, 9.5vh, 5.75rem);
  }
  .rotation-plan__detail-body .seat-allocation--embedded .seat__person {
    font-size: 0.62rem;
  }
  .rotation-plan__detail-body .seat-allocation-actions {
    padding: 0.4rem 0.6rem;
    gap: 0.35rem;
  }
}
/* —— Portrait / narrow (iPad Mini–Pro portrait): stack slots above detail —— */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
  .rotation-plan__grid {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(11rem, 34%) minmax(0, 1fr);
  }
  .rotation-plan__slots {
    border-right: 0;
    border-bottom: 1px solid #d0d5dd;
    overflow: hidden;
  }
  .rotation-plan__slot-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 0.4rem;
    padding-bottom: 0.35rem;
  }
  .rotation-plan__slot {
    flex: 0 0 auto;
    width: auto;
    min-width: 7.5rem;
    max-width: 12rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
  .rotation-plan__slot.is-selected {
    box-shadow: inset 0 -3px 0 #2b689c;
  }
  .rotation-plan__slot.is-in-flight::after {
    position: absolute;
    top: 0.3rem;
    right: 0.35rem;
    width: 1.3rem;
    height: 1.3rem;
    margin: 0;
  }
  .rotation-plan__slot-pax {
    white-space: nowrap;
    max-width: 10rem;
  }
  .rotation-plan__detail-body .seat-allocation--embedded {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 42%) minmax(9rem, 28%) minmax(6.5rem, 30%);
  }
  .rotation-plan__detail-body .seat-allocation--embedded .image_helicopter {
    grid-column: 1;
    grid-row: 1;
  }
  .rotation-plan__detail-body .seat-allocation--embedded .diagram_container {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: 100%;
  }
  .rotation-plan__detail-body .seat-allocation--embedded .bottom-customers-layout {
    grid-column: 1;
    grid-row: 3;
  }
  .rotation-plan__detail-body .seat-allocation--embedded .cabin-plan__frame {
    width: min(100%, 34vh);
    max-height: 100%;
  }
  .rotation-plan__detail-body .seat-allocation--embedded .seat__disk,
  .rotation-plan__detail-body .seat-allocation--embedded .cabin-plan__frame--dense .seat__disk,
  .rotation-plan__detail-body .seat-allocation--embedded .cabin-plan__frame--compact .seat__disk {
    width: clamp(4.75rem, 9vh, 6rem);
    height: clamp(4.75rem, 9vh, 6rem);
  }
}
/* —— Very short portrait (Mini portrait height) —— */
@media (orientation: portrait) and (max-height: 1024px) {
  .rotation-plan__grid {
    grid-template-rows: minmax(9.5rem, 30%) minmax(0, 1fr);
  }
  .rotation-plan__header {
    padding: 0.45rem 0.65rem;
  }
  .rotation-plan__meta + .rotation-plan__meta {
    display: none;
  }
}
/* Filter chrome used by list_filters.tpl (Event, Einteilung, Rotation, Log). */
.log_filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.log_date_form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.log_date_input {
  min-width: 10rem;
}
.log_date_input.is-active {
  border-color: var(--bs-primary);
}

.log_summary {
  margin: 0;
  color: #6c757d;
  font-size: 0.95rem;
}

.log_filter_row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.75rem;
  margin-bottom: 1.1rem;
}

.log_category_form,
.log_refine_form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.log_filter_label {
  font-weight: 600;
  white-space: nowrap;
  margin: 0;
}

.log_filter_select {
  width: 22rem;
  max-width: 100%;
  flex: none;
}
.log_filter_select--refine {
  width: 11rem;
}

.log_load_more {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

html {
  height: 100%;
  scrollbar-gutter: stable;
}

html,
body {
  margin: 0;
  padding: 0;
  font-size: clamp(12px, 2vh, 20px);
}

/* Phone / entry may scroll the document; tablet is locked in _tablet_layout.scss */
body:not(.tablet_layout) {
  min-height: 100%;
  overflow-y: auto;
}

/* Keep layout stable when Bootstrap modals lock body scroll (no sideways squeeze). */
body.modal-open {
  padding-right: 0 !important;
}

body.tablet_layout.modal-open {
  overflow: hidden !important;
}

body:not(.tablet_layout).modal-open {
  overflow-y: auto !important;
}

/*# sourceMappingURL=index.css.map */