/* Shared component geometry for every Status route. Themes own colours;
 * route styles must not redefine modal sizes or paired control heights. */
:root {
  --status-control-height: 2.75rem;
  --status-control-gap: .375rem;
}

/* Header geometry must be correct before the footer's theme overrides load. */
@media (min-width: 992px) {
  html[data-status-theme="hyper"] .status-navbar .navbar-toggler { display: none; }
  html[data-status-theme="hyper"] .status-navbar.status-navbar-force-collapse .navbar-toggler,
  html[data-status-theme="hyper"] body.status-compact-landscape .status-navbar .navbar-toggler { display: inline-flex; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--status-control-gap);
  line-height: 1.5;
}

:is(.material-icons, .material-symbols-outlined, .mdi) {
  vertical-align: middle;
}

.btn > :is(.material-icons, .material-symbols-outlined, .mdi),
.input-group-text > :is(.material-icons, .material-symbols-outlined, .mdi) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1;
}

/* Explicit size utilities keep their meaning inside every component. */
:is(.material-icons, .material-symbols-outlined, .mdi).md-18 { font-size: 18px !important; }
:is(.material-icons, .material-symbols-outlined, .mdi).md-24 { font-size: 24px !important; }
:is(.material-icons, .material-symbols-outlined, .mdi).md-36 { font-size: 36px !important; }
:is(.material-icons, .material-symbols-outlined, .mdi).md-48 { font-size: 48px !important; }

.status-icon-btn,
.status-actions-btn {
  display: inline-flex;
  width: var(--status-control-height);
  min-width: var(--status-control-height);
  height: var(--status-control-height);
  min-height: var(--status-control-height);
  padding: 0;
  line-height: 1;
}

.status-icon-btn::after,
.status-actions-btn::after { display: none; }

.status-telemetry-icon {
  box-sizing: border-box;
  display: inline-flex;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: .5rem;
  line-height: 1;
}

.status-telemetry-icon > :is(.material-icons, .material-symbols-outlined, .mdi) {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1;
}

.status-gps-hidden-badge > :is(.material-icons, .material-symbols-outlined, .mdi) {
  margin: 0;
  font-size: 1em;
  line-height: 1;
}

/* Bootstrap's row gutters inset the search a second time when a toolbar and
 * table already share one card-body. Use a gap with unpadded child columns. */
.status-admin-toolbar-row {
  display: flex;
  width: 100%;
  min-width: 0;
  margin-inline: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

.status-admin-toolbar-row > * {
  min-width: 0;
  margin-top: 0;
  padding-inline: 0;
}

.status-admin-toolbar-row .status-admin-search-col { flex: 1 1 18rem; }
.status-admin-toolbar-row .status-admin-primary-action-col { flex: 0 0 auto; }
.status-admin-toolbar-row .status-admin-search,
.status-admin-toolbar-row .status-admin-search .input-group {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.status-admin-toolbar-row .status-admin-filter-actions {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.status-admin-toolbar-row .status-admin-filter-actions .btn-group {
  display: inline-flex;
  width: max-content;
  min-width: max-content;
  flex-wrap: nowrap !important;
  gap: 0;
}

.status-admin-toolbar-row .status-admin-filter-actions .btn { white-space: nowrap; }

:is(.status-toolbar-controls, .status-admin-toolbar-row, .status-admin-search-actions, .status-public-toolbar-controls, .status-flags-manager-toolbar) :is(.form-control, .form-select, .custom-select, .input-group-text, .btn) {
  box-sizing: border-box;
  height: var(--status-control-height);
  min-height: var(--status-control-height);
  padding-block: .375rem;
  line-height: 1.5;
}

.status-toolbar-controls.input-group,
:is(.status-toolbar-controls, .status-admin-toolbar-row, .status-admin-search-actions, .status-public-toolbar-controls, .status-flags-manager-toolbar) .input-group {
  min-width: 0;
  height: var(--status-control-height);
  flex-wrap: nowrap;
}

/* One responsive modal scale, including custom map surfaces and Hyper pages. */
.status-app-modal {
  --status-modal-width: 60rem;
  --status-modal-margin: 1.5rem;
  --status-modal-safe-top: max(var(--status-modal-margin), env(safe-area-inset-top, 0px));
  --status-modal-safe-bottom: max(var(--status-modal-margin), env(safe-area-inset-bottom, 0px));
}
.status-modal-compact { --status-modal-width: 30rem; }
.status-modal-standard { --status-modal-width: 60rem; }
.status-modal-wide { --status-modal-width: 72rem; }
.status-modal-detail,
.status-modal-map,
.status-modal-content { --status-modal-width: 84rem; }

.status-app-modal .modal-dialog {
  width: calc(100% - max(var(--status-modal-margin), env(safe-area-inset-left, 0px)) - max(var(--status-modal-margin), env(safe-area-inset-right, 0px)));
  max-width: var(--status-modal-width);
  margin: var(--status-modal-safe-top) auto var(--status-modal-safe-bottom);
}
.status-app-modal .modal-dialog-scrollable {
  /* Bootstrap's centred dialog min-height otherwise exceeds this height and
   * pushes long public detail content into the mobile navigation lane. */
  min-height: 0;
  height: calc(100dvh - var(--status-modal-safe-top) - var(--status-modal-safe-bottom));
}
.status-app-modal .modal-content {
  min-height: 0;
  max-height: calc(100dvh - var(--status-modal-safe-top) - var(--status-modal-safe-bottom));
  overflow: hidden;
}
.status-app-modal .modal-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.status-app-modal .modal-footer,
.status-modal-fixed-footer {
  display: flex;
  flex: 0 0 auto;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  padding: .75rem 1rem;
}
.status-modal-fixed-footer {
  position: sticky;
  z-index: 4;
  bottom: 0;
  background: var(--ct-modal-bg, var(--ct-card-bg, #fff));
  border-top: 1px solid var(--status-shell-border, #dee2e6);
}
.status-app-modal .modal-footer .btn,
.status-modal-fixed-footer .btn {
  width: auto;
  min-width: 0;
  height: var(--status-control-height);
  min-height: var(--status-control-height);
  flex: 0 1 auto;
  margin: 0;
  padding: .5rem 1rem;
  font-size: .875rem;
  line-height: 1.5;
  white-space: nowrap;
}

@media (max-width: 991.98px) {
  body.status-has-mobile-nav .status-app-modal {
    --status-modal-safe-bottom: calc(max(var(--status-modal-margin), env(safe-area-inset-bottom, 0px)) + var(--status-mobile-nav-actual-height, 3.6rem));
  }
}
@media (max-width: 767.98px) {
  .status-app-modal { --status-modal-margin: .5rem; }
}
@media (max-width: 575.98px) {
  .status-admin-toolbar-row .status-admin-search-col {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
  }
  .status-app-modal .modal-footer,
  .status-modal-fixed-footer { padding: .65rem .75rem; }
  .status-app-modal .modal-footer .btn,
  .status-modal-fixed-footer .btn { flex: 1 1 0; }
}

/* One stable floating-to-docked action card for long editor forms. The
 * placeholder reserves exactly one bar, so moving the same DOM node between
 * the viewport and its natural final-card position cannot jump the layout. */
.status-docking-savebar-slot {
  width: 100%;
  min-height: 72px;
  margin-top: 1rem;
}

.status-docking-savebar {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  margin: 0 !important;
  z-index: 1020;
  border: 1px solid var(--status-color-border, var(--ct-border-color, #dee2e6)) !important;
  border-radius: var(--status-radius-md, .75rem) !important;
  background: var(--status-color-surface, var(--ct-card-bg, #fff)) !important;
  box-shadow: var(--status-shadow-sm, 0 .125rem .25rem rgba(0,0,0,.075)) !important;
  transform: none;
}

.status-docking-savebar.is-floating {
  position: fixed;
  left: var(--status-savebar-left, 1rem);
  right: auto;
  bottom: var(--status-savebar-bottom, .5rem);
  width: var(--status-savebar-width, calc(100vw - 2rem));
}

.status-docking-savebar.is-docked {
  position: relative;
  left: auto;
  bottom: auto;
  width: 100%;
}

.status-docking-savebar .status-docking-savebar-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
}

.status-docking-savebar .status-docking-savebar-actions .btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Map and Replay use the same legend surface. The common modal scale owns
 * viewport/bottom-navigation clearance; rows scroll inside this flex body. */
body:is(.page-map, .page-replay) #layers.status-layers-modal {
  --status-modal-safe-bottom: calc(var(--status-modal-margin) + var(--status-map-modal-bottom-clearance, 0px));
}
#layers.status-layers-modal { position: fixed; z-index: 100100; --status-legend-surface: var(--ct-modal-bg, var(--ct-secondary-bg, #fff)); }
#layers.status-layers-modal .modal-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1rem;
  text-align: left;
}
#layers .status-layers-title { display: flex; align-items: center; gap: .45rem; }
#layers .status-layers-filterbar {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: .375rem;
  margin: 0 0 .75rem;
  padding: .125rem;
}
#layers .status-layers-filterbar .list-inline-item { flex: 0 0 auto; margin: 0; }
#layers .filter-btn { min-height: var(--status-control-height); gap: .25rem; border-radius: .6rem; white-space: nowrap; }
#layers .status-filter-count { font-size: .75rem; }
#layers .filter-btn .material-icons { font-size: 1.125rem; }
#layers #livesearch { flex: 0 0 auto; min-height: var(--status-control-height); text-align: left; }
#layers #legendlist {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin-top: .75rem;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--ct-border-color, #dee2e6);
  border-radius: .6rem;
  background: var(--status-legend-surface);
}
#layers #legendlist > div:not(:empty)::before {
  content: attr(data-status-title);
  display: block;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: .45rem .75rem;
  background: var(--ct-tertiary-bg, #f1f3f5);
  color: var(--ct-secondary-color, #6c757d);
  font-size: .75rem;
  font-weight: 700;
}
#layers #legendlist button {
  display: block;
  width: 100%;
  padding: .7rem .8rem;
  border-inline: 0;
  border-radius: 0;
  background: var(--status-legend-surface);
  color: var(--ct-body-color, #212529);
  text-align: left;
  overflow-wrap: anywhere;
}
#layers #legendlist button:hover { background: var(--ct-tertiary-bg, #f8f9fa); }
#layers .status-legend-row { display: flex; align-items: flex-start; gap: .55rem; }
#layers .status-legend-symbol { flex: 0 0 auto; min-width: 26px; text-align: center; }
#layers .status-legend-content { min-width: 0; flex: 1 1 auto; }
#layers .status-legend-title { display: block; font-weight: 500; white-space: normal; overflow-wrap: anywhere; }
#layers .status-legend-layer { display: flex; align-items: center; gap: .25rem; margin-top: .2rem; font-size: .78rem; color: var(--ct-secondary-color, #6c757d); }
@media (max-width: 991.98px) {
  #layers .status-layers-filterbar { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x; scroll-snap-type: x proximity; }
  #layers .status-layers-filterbar .list-inline-item { scroll-snap-align: start; }
}