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

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