@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;
}

.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;
  }
}

.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)));
}

@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__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;
}

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

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

.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: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 */