/*
 * Final Status / Hyper component layer.
 *
 * This file is loaded after route markup so old inline layout fragments cannot
 * recolor or resize the shared shell. It deliberately uses Hyper variables and
 * Bootstrap 5 component contracts instead of the retired Bootstrap 4 skins.
 */

html[data-status-theme="hyper"] body.status-theme-hyper {
  --status-navbar-height: var(--ct-topbar-height, 70px);
  --status-safe-top: env(safe-area-inset-top, 0px);
  --status-safe-right: env(safe-area-inset-right, 0px);
  --status-safe-bottom: env(safe-area-inset-bottom, 0px);
  --status-safe-left: env(safe-area-inset-left, 0px);
  width: 100%;
  min-width: 0;
  margin: 0;
  background: var(--ct-body-bg) !important;
  color: var(--ct-body-color);
}

html[data-status-theme="hyper"] body.status-theme-isolated {
  /* Custom map canvases keep their own content layout, but their shared
   * application header has exactly the same desktop geometry as every other
   * Hyper page. Mobile still uses the shared 56 px rule below. */
  --status-navbar-height: var(--ct-topbar-height, 70px);
  --status-shell-header-height: var(--status-navbar-height);
  padding-top: var(--status-navbar-height) !important;
}

html[data-status-theme="hyper"] .status-navbar {
  min-height: var(--status-shell-header-height);
  padding-inline: max(.75rem, var(--status-safe-left)) max(.75rem, var(--status-safe-right));
  border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
  background: rgba(36, 42, 49, .985) !important;
  box-shadow: 0 .25rem .85rem rgba(15, 23, 42, .16) !important;
}

/* The homepage is the only translucent top bar. Replay and Edit map remain
 * opaque even though all three routes are custom application surfaces. */
html[data-status-theme="hyper"] body.status-home-page .status-navbar {
  background: rgba(31, 37, 44, .72) !important;
  box-shadow: 0 .25rem .85rem rgba(15, 23, 42, .16) !important;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}

html[data-status-theme="hyper"] body.page-replay .status-navbar,
html[data-status-theme="hyper"] body.page-edit_map .status-navbar {
  background: rgba(36, 42, 49, .985) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The homepage map deliberately continues behind its translucent top bar,
 * but interactive Leaflet controls must start below it on wider screens. In
 * mobile portrait the map canvas itself already starts below the navbar. */
@media (min-width: 768px) {
  html[data-status-theme="hyper"] body.status-home-page #image-map .leaflet-control-container .leaflet-top {
    top: var(--status-navbar-height, 56px) !important;
  }
}

html[data-status-theme="hyper"] .status-navbar .navbar-toggler {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-color: rgba(255, 255, 255, .18);
  border-radius: var(--ct-border-radius);
  color: rgba(255, 255, 255, .9);
}

html[data-status-theme="hyper"] .status-navbar .status-navbar-menu-icon {
  font-size: 1.55rem;
  line-height: 1;
}

html[data-status-theme="hyper"] .status-navbar .navbar-collapse {
  min-width: 0;
}

html[data-status-theme="hyper"] .status-navbar .navbar-nav {
  min-width: 0;
  gap: .15rem;
}

html[data-status-theme="hyper"] .status-navbar .nav-link {
  color: rgba(255, 255, 255, .72);
}

html[data-status-theme="hyper"] .status-navbar .nav-link:hover,
html[data-status-theme="hyper"] .status-navbar .nav-link:focus-visible,
html[data-status-theme="hyper"] .status-navbar .nav-link.show,
html[data-status-theme="hyper"] .status-navbar .nav-item.active > .nav-link {
  color: #fff;
  background: rgba(255, 255, 255, .1);
}

html[data-status-theme="hyper"] .status-navbar .status-user-menu-toggle {
  color: rgba(255, 255, 255, .9) !important;
  border-color: rgba(255, 255, 255, .28) !important;
}

html[data-status-theme="hyper"] .status-navbar .status-user-menu-toggle:hover,
html[data-status-theme="hyper"] .status-navbar .status-user-menu-toggle:focus-visible,
html[data-status-theme="hyper"] .status-navbar .status-user-menu-toggle.show,
html[data-status-theme="hyper"] .status-navbar .status-user-menu-toggle[aria-expanded="true"] {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .5) !important;
  background: rgba(255, 255, 255, .1) !important;
}

html[data-status-theme="hyper"] .status-navbar .status-user-menu-toggle .material-icons,
html[data-status-theme="hyper"] .status-navbar .status-user-menu-toggle .status-user-menu-name {
  color: inherit !important;
}

html[data-status-theme="hyper"] .status-navbar .dropdown-menu {
  max-width: min(24rem, calc(100vw - 1.5rem));
}

html[data-status-theme="hyper"] .status-navbar .dropdown-item {
  display: flex;
  min-height: 2.65rem;
  align-items: center;
  gap: .55rem;
  white-space: normal;
}

html[data-status-theme="hyper"] .status-faction-information,
html[data-status-theme="hyper"] .status-faction-points {
  display: flex;
  min-width: 0;
  align-items: center;
}

html[data-status-theme="hyper"] .status-faction-points {
  gap: .4rem;
  overflow: hidden;
}

html[data-status-theme="hyper"] .status-faction-point {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .12rem;
  color: #fff;
  font-weight: 700;
}

html[data-status-theme="hyper"] .status-faction-point .material-icons {
  font-size: 1.05rem;
}

html[data-status-theme="hyper"] body:not(.status-theme-isolated) .status-page-container {
  width: min(100%, 1600px) !important;
  max-width: 1600px !important;
  margin-inline: auto !important;
  padding: 1.25rem !important;
  background: transparent !important;
}

html[data-status-theme="hyper"] body:not(.status-theme-isolated) .status-admin-shell,
html[data-status-theme="hyper"] body:not(.status-theme-isolated) .status-public-list-shell,
html[data-status-theme="hyper"] body:not(.status-theme-isolated) .status-form-shell,
html[data-status-theme="hyper"] body:not(.status-theme-isolated) .status-admin-page,
html[data-status-theme="hyper"] body:not(.status-theme-isolated) .status-public-list-page,
html[data-status-theme="hyper"] body:not(.status-theme-isolated) .status-admin-editor,
html[data-status-theme="hyper"] body:not(.status-theme-isolated) .status-alert-admin-page,
html[data-status-theme="hyper"] body:not(.status-theme-isolated) .status-alert-form-page,
html[data-status-theme="hyper"] body:not(.status-theme-isolated) .status-notices-page,
html[data-status-theme="hyper"] body:not(.status-theme-isolated) .user-settings-page,
html[data-status-theme="hyper"] body:not(.status-theme-isolated) .edit-event-page,
html[data-status-theme="hyper"] body:not(.status-theme-isolated) .updater-page {
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

html[data-status-theme="hyper"] .status-page-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  min-height: 4.25rem;
  margin: 0 0 1rem !important;
  padding: 1rem 1.25rem !important;
  border: 1px solid var(--status-shell-border) !important;
  border-radius: var(--ct-border-radius-lg) !important;
  background: var(--ct-card-bg) !important;
  box-shadow: var(--ct-box-shadow-sm) !important;
}

html[data-status-theme="hyper"] .status-page-title,
html[data-status-theme="hyper"] .status-page-header h1,
html[data-status-theme="hyper"] .status-page-header h2 {
  margin: 0 !important;
  color: var(--ct-heading-color, var(--ct-body-color)) !important;
}

html[data-status-theme="hyper"] .status-page-actions,
html[data-status-theme="hyper"] .status-admin-filter-row,
html[data-status-theme="hyper"] .status-form-actions,
html[data-status-theme="hyper"] .status-modal-actions {
  display: flex !important;
  min-width: 0;
  align-items: center !important;
  flex-wrap: wrap;
  gap: .65rem !important;
}

html[data-status-theme="hyper"] .status-admin-filter-row {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-status-theme="hyper"] .status-admin-search,
html[data-status-theme="hyper"] .status-admin-filter-row .input-group {
  min-width: 0;
  flex: 1 1 18rem;
}

/* Shared Bootstrap/Hyper list toolbar. Search owns the flexible column,
 * optional filters use their content width and the primary action stays at
 * the right edge. The row itself is deliberately not another nested card. */
html[data-status-theme="hyper"] .status-admin-toolbar-row {
  --ct-gutter-x: .75rem;
  --ct-gutter-y: .75rem;
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

html[data-status-theme="hyper"] .status-admin-toolbar-row .status-admin-search-col {
  min-width: min(100%, 14rem);
  flex: 1 1 22rem;
}

html[data-status-theme="hyper"] .status-admin-toolbar-row .status-admin-search,
html[data-status-theme="hyper"] .status-admin-toolbar-row .status-admin-search .input-group {
  width: 100% !important;
  max-width: none !important;
}

html[data-status-theme="hyper"] .status-admin-toolbar-row .status-admin-search .form-control,
html[data-status-theme="hyper"] .status-admin-toolbar-row .status-admin-search .input-group-text,
html[data-status-theme="hyper"] .status-admin-toolbar-row .status-admin-search .status-search-clear {
  min-height: 2.75rem;
}

html[data-status-theme="hyper"] .status-admin-toolbar-row .status-admin-filter-col,
html[data-status-theme="hyper"] .status-admin-toolbar-row .status-admin-primary-action-col {
  min-width: 0;
}

html[data-status-theme="hyper"] .status-admin-toolbar-row .status-admin-filter-actions {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

html[data-status-theme="hyper"] .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 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-status-theme="hyper"] .status-admin-toolbar-row .status-admin-filter-actions .btn-group > .btn {
  min-height: 2.75rem;
  align-items: center;
  gap: .35rem;
  border-radius: 0 !important;
  white-space: nowrap;
}

html[data-status-theme="hyper"] .status-admin-toolbar-row .status-admin-filter-actions .btn-group > .btn:first-child {
  border-radius: var(--ct-border-radius) 0 0 var(--ct-border-radius) !important;
}

html[data-status-theme="hyper"] .status-admin-toolbar-row .status-admin-filter-actions .btn-group > .btn:last-child {
  border-radius: 0 var(--ct-border-radius) var(--ct-border-radius) 0 !important;
}

html[data-status-theme="hyper"] .status-admin-toolbar-row .status-admin-primary-action-col .btn {
  height: 100%;
  min-height: 2.75rem;
}

@media (max-width: 575.98px) {
  html[data-status-theme="hyper"] .status-admin-toolbar-row .status-admin-search-col {
    min-width: 0;
    width: auto !important;
    max-width: calc(100% - 3.5rem);
    flex: 1 1 0 !important;
  }

  html[data-status-theme="hyper"] .status-admin-toolbar-row .status-admin-search .form-control {
    min-width: 0;
  }

  html[data-status-theme="hyper"] .status-admin-toolbar-row .status-admin-primary-action-col {
    flex: 0 0 auto !important;
  }
}

html[data-status-theme="hyper"] .status-admin-add-btn,
html[data-status-theme="hyper"] .status-compact-add {
  display: inline-flex !important;
  flex: 0 0 auto;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: .45rem;
}

/* Shared Bootstrap Table presentation. Dynamic admin lists generate a single
 * semantic table on desktop and accessible record cards on phones. The card
 * DOM is produced by status-bootstrap-table.js; all visual decisions live in
 * this Hyper component layer. */
html[data-status-theme="hyper"] .status-bs-table-shell {
  overflow: visible;
  border: 1px solid var(--status-shell-border);
  border-radius: var(--ct-border-radius-lg);
  background: var(--ct-card-bg);
  box-shadow: var(--ct-box-shadow-sm);
}

html[data-status-theme="hyper"] .status-bs-table {
  width: 100%;
  margin: 0;
  color: var(--ct-body-color);
}

html[data-status-theme="hyper"] .status-bs-table > thead > tr > th {
  padding: .75rem;
  border-top: 0;
  border-bottom: 1px solid var(--status-shell-border);
  background: var(--ct-tertiary-bg, var(--ct-secondary-bg));
  color: var(--ct-secondary-color);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}

html[data-status-theme="hyper"] .status-bs-table > thead > tr > th.status-bs-table-sortable {
  position: relative;
  padding-inline-end: 1.8rem;
  cursor: pointer;
  user-select: none;
}

html[data-status-theme="hyper"] .status-bs-table > thead > tr > th.status-bs-table-sortable::after {
  position: absolute;
  top: 50%;
  right: .65rem;
  content: '\2195';
  opacity: .45;
  font-size: .9rem;
  line-height: 1;
  transform: translateY(-50%);
}

html[data-status-theme="hyper"] .status-bs-table > thead > tr > th.status-bs-table-sort-active[aria-sort="ascending"]::after {
  content: '\2191';
  opacity: 1;
}

html[data-status-theme="hyper"] .status-bs-table > thead > tr > th.status-bs-table-sort-active[aria-sort="descending"]::after {
  content: '\2193';
  opacity: 1;
}

html[data-status-theme="hyper"] .status-bs-table > tbody > tr > td {
  padding: .8rem .75rem;
  border-color: var(--status-shell-border);
  vertical-align: middle;
}

html[data-status-theme="hyper"] .status-bs-table-cell-content {
  min-width: 0;
  max-width: 100%;
}

html[data-status-theme="hyper"] .status-bs-table-hidden,
html[data-status-theme="hyper"] .status-mobile-card-list[hidden],
html[data-status-theme="hyper"] .status-bs-table-shell[hidden],
html[data-status-theme="hyper"] .status-bs-table-empty[hidden] {
  display: none !important;
}

html[data-status-theme="hyper"] .status-bs-table-actions {
  text-align: end;
  white-space: nowrap;
}

html[data-status-theme="hyper"] .status-mobile-card-list {
  display: grid;
  gap: .75rem;
}

html[data-status-theme="hyper"] .status-mobile-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  margin: 0 0 .65rem;
}

html[data-status-theme="hyper"] .status-mobile-list-toolbar label {
  margin: 0;
  color: var(--ct-secondary-color);
  font-size: .75rem;
  font-weight: 700;
}

html[data-status-theme="hyper"] .status-mobile-list-toolbar .form-control,
html[data-status-theme="hyper"] .status-mobile-list-toolbar .form-select {
  width: auto;
  min-width: 10.5rem;
}

html[data-status-theme="hyper"] .status-mobile-record-card {
  position: relative;
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--status-shell-border);
  border-inline-start: .25rem solid var(--ct-primary);
  border-radius: var(--ct-border-radius-lg);
  background: var(--ct-card-bg);
  box-shadow: var(--ct-box-shadow-sm);
}

html[data-status-theme="hyper"] .status-mobile-record-card__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-width: 0;
  align-items: start;
  gap: .65rem;
  padding: .8rem;
  border-bottom: 1px solid var(--status-shell-border);
}

html[data-status-theme="hyper"] .status-mobile-record-card__primary {
  grid-column: 2;
  min-width: 0;
}

html[data-status-theme="hyper"] .status-mobile-record-card__select {
  grid-column: 1;
  display: flex;
  min-width: 2.5rem;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
}

html[data-status-theme="hyper"] .status-mobile-record-card__header > .status-mobile-record-card__primary:first-child {
  grid-column: 1 / 3;
}

html[data-status-theme="hyper"] .status-mobile-record-card__actions {
  position: relative;
  z-index: 30;
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

html[data-status-theme="hyper"] .status-mobile-record-card__actions .btn {
  display: inline-flex;
  width: 2.65rem;
  min-width: 2.65rem;
  height: 2.65rem;
  min-height: 2.65rem;
  align-items: center;
  justify-content: center;
  padding: 0;
}

html[data-status-theme="hyper"] .status-mobile-record-card__actions .dropdown-menu {
  /* Page actions stay above their card, but the application menu and modals
   * must always win when they are opened. */
  z-index: 1090;
  min-width: min(15rem, calc(100vw - 2rem));
  max-width: calc(100vw - 1rem);
  max-height: min(22rem, calc(100dvh - 5rem));
  overflow-y: auto;
}

html[data-status-theme="hyper"] .status-mobile-record-card__actions .dropdown-item {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: .65rem;
  white-space: normal;
}

html[data-status-theme="hyper"] .status-mobile-record-card__actions .dropdown-item .material-icons,
html[data-status-theme="hyper"] .status-mobile-record-card__actions .dropdown-item .mdi {
  flex: 0 0 auto;
  margin: 0;
}

html[data-status-theme="hyper"] .status-mobile-record-card__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
}

html[data-status-theme="hyper"] .status-mobile-record-card__field {
  min-width: 0;
  margin: 0;
  padding: .7rem .8rem;
  border-bottom: 1px solid var(--status-shell-border);
}

html[data-status-theme="hyper"] .status-mobile-record-card__field:nth-child(odd):not([data-mobile-span="full"]) {
  border-inline-end: 1px solid var(--status-shell-border);
}

html[data-status-theme="hyper"] .status-mobile-record-card__field[data-mobile-span="full"] {
  grid-column: 1 / -1;
}

html[data-status-theme="hyper"] .status-mobile-record-card__label {
  margin: 0 0 .28rem;
  color: var(--ct-secondary-color);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.35;
  text-transform: uppercase;
}

html[data-status-theme="hyper"] .status-mobile-record-card__value {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: .28rem .4rem;
  margin: 0;
  color: var(--ct-body-color);
  overflow-wrap: anywhere;
}

html[data-status-theme="hyper"] .status-mobile-record-card__value > * {
  min-width: 0;
  max-width: 100%;
}

html[data-status-theme="hyper"] .status-mobile-record-card__value .badge {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  align-items: center;
  white-space: normal;
}

html[data-status-theme="hyper"] .status-mobile-record-card-empty {
  padding: 1.25rem;
  border: 1px dashed var(--status-shell-border);
  border-radius: var(--ct-border-radius-lg);
  background: var(--ct-card-bg);
  color: var(--ct-secondary-color);
  text-align: center;
}

html[data-status-theme="hyper"] .material-icons,
html[data-status-theme="hyper"] .mdi {
  line-height: 1;
}

html[data-status-theme="hyper"] .form-group {
  margin-bottom: 1rem;
}

html[data-status-theme="hyper"] .form-group > label,
html[data-status-theme="hyper"] .col-form-label {
  margin-bottom: .4rem;
  color: var(--ct-heading-color, var(--ct-body-color));
  font-weight: 600;
}

html[data-status-theme="hyper"] .form-check {
  min-height: 1.5rem;
}

html[data-status-theme="hyper"] .form-check-input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .15rem;
}

html[data-status-theme="hyper"] .input-group-text,
html[data-status-theme="hyper"] .form-control,
html[data-status-theme="hyper"] .form-select {
  border-color: var(--status-shell-border);
}

html[data-status-theme="hyper"] .input-group-text {
  background: var(--ct-tertiary-bg, var(--ct-secondary-bg)) !important;
  color: var(--ct-secondary-color);
}

html[data-status-theme="hyper"] .card,
html[data-status-theme="hyper"] .status-section-card,
html[data-status-theme="hyper"] .status-form-card,
html[data-status-theme="hyper"] .status-admin-table-card {
  border: 1px solid var(--status-shell-border) !important;
  border-radius: var(--ct-border-radius-lg) !important;
  background: var(--ct-card-bg) !important;
  color: var(--ct-body-color);
  box-shadow: var(--ct-box-shadow-sm) !important;
}

html[data-status-theme="hyper"] .status-actions-btn,
html[data-status-theme="hyper"] .status-icon-btn {
  display: inline-grid !important;
  width: 2.65rem;
  min-width: 2.65rem;
  height: 2.65rem;
  min-height: 2.65rem;
  padding: 0 !important;
  place-items: center;
  border-color: var(--status-shell-border);
}

html[data-status-theme="hyper"] .status-actions-btn::after,
html[data-status-theme="hyper"] .status-icon-btn::after {
  display: none !important;
}

html[data-status-theme="hyper"] .status-action-menu,
html[data-status-theme="hyper"] .dropdown-menu.status-action-menu {
  z-index: 1090;
  min-width: min(18rem, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1rem);
  padding: .55rem;
  border-color: var(--status-shell-border);
  border-radius: var(--ct-border-radius-lg);
  background: var(--ct-dropdown-bg, var(--ct-card-bg));
  box-shadow: var(--ct-box-shadow-lg, var(--ct-box-shadow));
}

html[data-status-theme="hyper"] .status-action-menu .dropdown-item {
  display: flex;
  min-height: 2.8rem;
  align-items: center;
  gap: .7rem;
  margin: .16rem 0;
  padding: .55rem .7rem;
  border-radius: var(--ct-border-radius);
  color: var(--ct-dropdown-link-color, var(--ct-body-color));
  white-space: normal;
}

html[data-status-theme="hyper"] .status-action-menu .status-action-edit { color: var(--ct-primary); background: rgba(var(--ct-primary-rgb), .09); }
html[data-status-theme="hyper"] .status-action-menu .status-action-location { color: var(--ct-success); background: rgba(var(--ct-success-rgb), .09); }
html[data-status-theme="hyper"] .status-action-menu .status-action-battery { color: var(--ct-warning-text-emphasis); background: rgba(var(--ct-warning-rgb), .13); }
html[data-status-theme="hyper"] .status-action-menu .status-action-remove { color: var(--ct-danger); background: rgba(var(--ct-danger-rgb), .09); }

html[data-status-theme="hyper"] .status-table,
html[data-status-theme="hyper"] .status-bs-table {
  width: 100%;
  margin: 0;
  color: var(--ct-body-color);
  background: transparent !important;
}

html[data-status-theme="hyper"] .status-table > thead > tr > th,
html[data-status-theme="hyper"] .status-bs-table > thead > tr > th {
  padding: .8rem;
  border-bottom: 1px solid var(--status-shell-border);
  background: var(--ct-tertiary-bg, var(--ct-secondary-bg));
  color: var(--ct-secondary-color);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}

html[data-status-theme="hyper"] .status-table > tbody > tr > td,
html[data-status-theme="hyper"] .status-bs-table > tbody > tr > td {
  min-width: 0;
  padding: .85rem .8rem;
  border-color: var(--status-shell-border);
  vertical-align: middle;
}

html[data-status-theme="hyper"] .status-bs-table-sortable {
  cursor: pointer;
  user-select: none;
}

html[data-status-theme="hyper"] .modal {
  z-index: 20070;
}

html[data-status-theme="hyper"] .modal-backdrop {
  z-index: 20060;
}

html[data-status-theme="hyper"] .modal-content {
  overflow: hidden;
  border: 1px solid var(--status-shell-border);
  border-radius: var(--ct-border-radius-lg);
  background: var(--ct-modal-bg, var(--ct-card-bg));
  box-shadow: var(--ct-box-shadow-lg);
}

/* Hyper's 500 px Bootstrap default is cramped for the forms and structured
 * details used throughout Status. Keep explicit sm/lg/xl choices intact and
 * give only an unqualified dialog a comfortable shared desktop width. */
@media (min-width: 768px) {
  html[data-status-theme="hyper"] .modal-dialog:not(.modal-sm):not(.modal-lg):not(.modal-xl) {
    --ct-modal-width: 42rem;
    width: min(42rem, calc(100vw - 3rem));
    max-width: min(42rem, calc(100vw - 3rem));
  }
}

html[data-status-theme="hyper"] .modal-header,
html[data-status-theme="hyper"] .modal-footer {
  border-color: var(--status-shell-border);
}

/* Item and task editors are reused inside a modal. The modal already owns
 * the title and close action, so the embedded full-page header is duplicate
 * chrome and wastes the first phone viewport. */
html[data-status-theme="hyper"] .status-content-editor-modal .status-page-header {
  display: none !important;
}

html[data-status-theme="hyper"] .status-content-editor-modal .status-admin-page,
html[data-status-theme="hyper"] .status-content-editor-modal .status-admin-shell {
  margin: 0 !important;
  padding: 0 !important;
}

html[data-status-theme="hyper"] .modal-footer,
html[data-status-theme="hyper"] .status-modal-actions {
  flex-direction: row !important;
  justify-content: flex-start !important;
}

html[data-status-theme="hyper"] .status-modal-fixed-footer {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  flex-flow: row nowrap !important;
  gap: .65rem;
}

html[data-status-theme="hyper"] .status-modal-fixed-footer .btn {
  width: auto !important;
  min-width: 0;
  flex: 0 1 auto !important;
}

html[data-status-theme="hyper"] .status-docking-savebar {
  z-index: 20040 !important;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem 1rem max(.75rem, var(--status-safe-bottom));
  border-top: 1px solid var(--status-shell-border);
  background: rgba(var(--ct-body-bg-rgb), .96);
  box-shadow: 0 -.35rem 1rem rgba(15, 23, 42, .1);
}

html[data-status-theme="hyper"] .status-public-toolbar-row,
html[data-status-theme="hyper"] .status-public-toolbar-controls,
html[data-status-theme="hyper"] .status-public-task-status,
html[data-status-theme="hyper"] .status-public-task-heading,
html[data-status-theme="hyper"] .status-item-card-heading,
html[data-status-theme="hyper"] .status-public-task-actions,
html[data-status-theme="hyper"] .status-item-card-actions,
html[data-status-theme="hyper"] .status-task-filters {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
}

html[data-status-theme="hyper"] .status-public-toolbar-row {
  justify-content: space-between;
  gap: 1rem;
}

html[data-status-theme="hyper"] .status-public-toolbar-heading {
  min-width: 0;
  flex: 1 1 14rem;
}

html[data-status-theme="hyper"] .status-public-toolbar-controls {
  flex: 1 1 30rem;
  justify-content: flex-end;
}

html[data-status-theme="hyper"] .status-public-toolbar-select {
  width: auto;
  min-width: 10rem;
}

html[data-status-theme="hyper"] .status-public-search {
  min-width: 14rem;
  flex: 1 1 18rem;
}

html[data-status-theme="hyper"] .status-flags-list-page .status-public-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

/* Public flags use purpose-built cards on phones. This component used to live
 * in the retired global stylesheet, which made the Hyper route fall back to a
 * squeezed desktop table. Keep it in the shared Hyper component layer. */
html[data-status-theme="hyper"] .status-flags-mobile-cards {
  display: none;
}

html[data-status-theme="hyper"] .status-flags-list-page .status-flag-faction-chip {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: .42rem;
  padding: .18rem .48rem;
  border: 1px solid var(--status-shell-border);
  border-radius: 50rem;
  background: var(--faction-bg, var(--ct-secondary-bg));
  color: var(--ct-body-color);
  font-weight: 600;
  line-height: 1.2;
}

html[data-status-theme="hyper"] .status-flags-list-page .status-flag-faction-dot,
html[data-status-theme="hyper"] .status-flags-list-page .status-flag-status-dot {
  display: inline-block;
  width: .62rem;
  height: .62rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--faction-color, var(--ct-secondary-color));
  box-shadow: 0 0 0 2px var(--ct-card-bg);
}

html[data-status-theme="hyper"] .status-flags-list-page .status-flag-status-badge {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: .38rem;
  color: var(--ct-body-color) !important;
  font-weight: 600;
  line-height: 1.2;
  white-space: normal;
}

html[data-status-theme="hyper"] .status-flags-list-page .status-flag-status-dot {
  background: var(--status-color, var(--ct-secondary-color));
}

html[data-status-theme="hyper"] .status-flags-list-page .status-flag-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .6rem;
}

html[data-status-theme="hyper"] .status-flags-list-page .status-flag-identity strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

html[data-status-theme="hyper"] .status-flags-list-page .status-flag-letter-icon {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--flag-color, var(--ct-heading-color));
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: none;
}

html[data-status-theme="hyper"] .status-flags-list-page .status-flag-state-mini .status-flag-status-badge {
  max-width: 100%;
  margin: .1rem 0 0;
  white-space: normal;
}

html[data-status-theme="hyper"] .status-flag-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--status-shell-border);
  border-inline-start: .25rem solid var(--flag-color, var(--ct-primary));
  border-radius: var(--ct-border-radius-lg);
  background: var(--ct-card-bg);
  box-shadow: var(--ct-box-shadow-sm);
}

html[data-status-theme="hyper"] .status-flag-card-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .75rem;
}

html[data-status-theme="hyper"] .status-flag-icon {
  display: grid;
  flex: 0 0 2.65rem;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  border: 1px solid var(--status-shell-border);
  border-radius: var(--ct-border-radius-lg);
  background: var(--ct-tertiary-bg, var(--ct-secondary-bg));
  color: var(--flag-color, var(--ct-heading-color));
  box-shadow: var(--ct-box-shadow-sm);
}

html[data-status-theme="hyper"] .status-flag-icon img {
  width: 1.65rem;
  height: 1.65rem;
  object-fit: contain;
}

html[data-status-theme="hyper"] .status-flags-list-page .status-flag-identity .status-flag-icon {
  width: 2rem;
  height: 2rem;
  flex-basis: 2rem;
  border-radius: var(--ct-border-radius);
  box-shadow: none;
}

html[data-status-theme="hyper"] .status-flags-list-page .status-flag-identity .status-flag-letter-icon {
  font-size: 1rem;
}

html[data-status-theme="hyper"] .status-flags-list-page .status-flag-identity .status-flag-icon img {
  width: 1.25rem;
  height: 1.25rem;
}

html[data-status-theme="hyper"] .status-flags-list-page .status-relative-time {
  display: inline-block;
  max-width: 100%;
  color: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: help;
}

html[data-status-theme="hyper"] .status-flag-main {
  min-width: 0;
  flex: 1 1 auto;
}

html[data-status-theme="hyper"] .status-flag-main h2 {
  margin: 0 0 .3rem;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

html[data-status-theme="hyper"] .status-flag-owner,
html[data-status-theme="hyper"] .status-flag-owner .status-flag-faction-chip,
html[data-status-theme="hyper"] .status-flag-owner .status-flag-faction-chip > span:last-child {
  min-width: 0;
  max-width: 100%;
}

html[data-status-theme="hyper"] .status-flag-owner .status-flag-faction-chip > span:last-child {
  overflow-wrap: normal;
  word-break: normal;
}

html[data-status-theme="hyper"] .status-flag-multiplier {
  flex: 0 0 auto;
  padding: .25rem .55rem;
  border-radius: 50rem;
  background: var(--ct-tertiary-bg, var(--ct-secondary-bg));
  font-weight: 700;
}

html[data-status-theme="hyper"] .status-flag-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin-top: .85rem;
}

html[data-status-theme="hyper"] .status-flag-card-grid > div {
  min-width: 0;
  padding: .6rem;
  border: 1px solid var(--status-shell-border);
  border-radius: var(--ct-border-radius);
  background: var(--ct-tertiary-bg, var(--ct-secondary-bg));
}

html[data-status-theme="hyper"] .status-flag-card-grid small,
html[data-status-theme="hyper"] .status-flag-card-grid strong {
  display: block;
  min-width: 0;
}

html[data-status-theme="hyper"] .status-flag-card-grid small {
  color: var(--ct-secondary-color);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

html[data-status-theme="hyper"] .status-flag-card-grid strong {
  margin-top: .2rem;
  font-size: .86rem;
  overflow-wrap: anywhere;
}

html[data-status-theme="hyper"] .status-empty-state {
  padding: 2rem;
  color: var(--ct-secondary-color);
  text-align: center;
}

html[data-status-theme="hyper"] .status-empty-state .material-icons {
  display: block;
  margin-bottom: .5rem;
  font-size: 2.5rem;
}

/* Information page uses the same card, spacing and color tokens as the rest
 * of Hyper. These rules intentionally replace the page's retired legacy skin. */
html[data-status-theme="hyper"] .status-info-page {
  min-height: calc(100vh - var(--status-navbar-height));
}

html[data-status-theme="hyper"] .status-info-shell {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
}

html[data-status-theme="hyper"] .status-info-hero {
  overflow: hidden;
  border: 1px solid var(--status-shell-border) !important;
  border-radius: var(--ct-border-radius-lg);
  background: linear-gradient(145deg, var(--ct-card-bg), var(--ct-tertiary-bg, var(--ct-secondary-bg)));
}

html[data-status-theme="hyper"] .status-info-logo {
  display: inline-block;
  width: 5.5rem;
  height: 5.5rem;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--ct-border-radius-lg);
}

html[data-status-theme="hyper"] .status-info-brand {
  display: block;
  width: 100%;
  color: var(--ct-heading-color, var(--ct-body-color));
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.025em;
  text-align: center;
}

html[data-status-theme="hyper"] .status-info-hero .lead,
html[data-status-theme="hyper"] .status-info-event-summary {
  max-width: 48.75rem;
}

html[data-status-theme="hyper"] .status-info-event-summary {
  color: var(--ct-secondary-color);
}

html[data-status-theme="hyper"] .status-info-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
}

html[data-status-theme="hyper"] .status-info-hero-actions .btn {
  display: inline-flex;
  min-height: 2.625rem;
  align-items: center;
  justify-content: center;
}

html[data-status-theme="hyper"] .status-info-feature {
  border-radius: var(--ct-border-radius-lg);
}

html[data-status-theme="hyper"] .status-info-feature .card-body {
  padding: 1.25rem;
}

html[data-status-theme="hyper"] .status-info-feature-icon {
  display: inline-flex;
  width: 2.625rem;
  height: 2.625rem;
  align-items: center;
  justify-content: center;
  margin-bottom: .85rem;
  border-radius: var(--ct-border-radius);
  background: var(--ct-tertiary-bg, var(--ct-secondary-bg));
}

html[data-status-theme="hyper"] .status-info-feature-icon .material-icons {
  font-size: 1.5rem;
}

html[data-status-theme="hyper"] .status-info-steps > div {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  margin-bottom: .85rem;
}

html[data-status-theme="hyper"] .status-info-steps > div:last-child {
  margin-bottom: 0;
}

html[data-status-theme="hyper"] .status-info-steps > div > span {
  display: inline-flex;
  flex: 0 0 1.875rem;
  width: 1.875rem;
  height: 1.875rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ct-primary);
  color: var(--ct-white, #fff);
  font-weight: 700;
}

html[data-status-theme="hyper"] .status-info-steps p {
  margin: 0;
}

/* New event follows the same horizontal Hyper navigation and card form
 * language as Event settings. The long form remains one server transaction,
 * while its sections stay easy to discover on narrow screens. */
html[data-status-theme="hyper"] .status-new-event-tabs {
  overflow: hidden;
}

html[data-status-theme="hyper"] .status-new-event-tabs .card-body {
  overflow-x: auto;
  scrollbar-width: thin;
}

html[data-status-theme="hyper"] .status-new-event-tabs .nav {
  width: max-content;
  min-width: 100%;
  gap: .35rem;
}

html[data-status-theme="hyper"] .status-new-event-tabs .nav-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}

html[data-status-theme="hyper"] .status-new-event-form {
  overflow: visible;
}

html[data-status-theme="hyper"] .status-new-event-form .tab-pane {
  max-width: 72rem;
}

html[data-status-theme="hyper"] .status-new-event-form #middle_point_map {
  width: 100%;
  height: clamp(20rem, 52vh, 31.25rem);
  margin-top: 1rem;
  border: 1px solid var(--status-shell-border);
  border-radius: var(--ct-border-radius-lg);
  overflow: hidden;
}

html[data-status-theme="hyper"] .status-task-card {
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

html[data-status-theme="hyper"] .status-task-card:hover,
html[data-status-theme="hyper"] .status-task-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--ct-box-shadow) !important;
}

html[data-status-theme="hyper"] .status-task-card-media,
html[data-status-theme="hyper"] .status-item-card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--ct-tertiary-bg, var(--ct-secondary-bg));
}

html[data-status-theme="hyper"] .status-task-card-image,
html[data-status-theme="hyper"] .status-item-card-image,
html[data-status-theme="hyper"] .status-task-modal-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html[data-status-theme="hyper"] .status-public-task-heading,
html[data-status-theme="hyper"] .status-item-card-heading {
  align-items: flex-start;
  flex-wrap: nowrap;
}

html[data-status-theme="hyper"] .status-public-task-heading-copy,
html[data-status-theme="hyper"] .status-item-card-heading-copy {
  min-width: 0;
  flex: 1 1 auto;
}

html[data-status-theme="hyper"] .status-task-no-media-icon,
html[data-status-theme="hyper"] .status-item-no-media-icon {
  display: inline-grid;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: var(--ct-border-radius);
  color: var(--ct-primary);
  background: rgba(var(--ct-primary-rgb), .1);
}

html[data-status-theme="hyper"] .status-public-task-location,
html[data-status-theme="hyper"] .status-item-card-location,
html[data-status-theme="hyper"] .status-public-task-time {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .35rem;
  color: var(--ct-secondary-color);
  font-size: .8rem;
}

html[data-status-theme="hyper"] .status-public-task-time.is-deadline {
  color: var(--ct-warning-text-emphasis);
  background: rgba(var(--ct-warning-rgb), .13);
}

html[data-status-theme="hyper"] .status-public-task-time.is-completed {
  color: var(--ct-success-text-emphasis);
  background: rgba(var(--ct-success-rgb), .1);
}

html[data-status-theme="hyper"] .status-public-task-time.is-failed {
  color: var(--ct-danger-text-emphasis);
  background: rgba(var(--ct-danger-rgb), .1);
}

html[data-status-theme="hyper"] .status-tasks-list-page .badge,
html[data-status-theme="hyper"] .status-items-list-page .badge {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  max-width: 100%;
  font-size: clamp(.67rem, 1.7vw, .78rem);
  white-space: normal;
}

html[data-status-theme="hyper"] .status-public-task-time {
  margin-bottom: .8rem;
  padding: .45rem .6rem;
  border-radius: var(--ct-border-radius);
  background: var(--ct-tertiary-bg, var(--ct-secondary-bg));
}

html[data-status-theme="hyper"] .status-public-task-actions,
html[data-status-theme="hyper"] .status-item-card-actions {
  margin-top: auto;
}

html[data-status-theme="hyper"] .status-public-task-actions .btn,
html[data-status-theme="hyper"] .status-item-card-actions .btn {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}

html[data-status-theme="hyper"] .status-task-modal-map {
  width: 100%;
  min-height: 18rem;
  border-radius: var(--ct-border-radius);
}

html[data-status-theme="hyper"] .status-mobile-nav {
  position: fixed;
  z-index: 20030;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: calc(3.6rem + var(--status-safe-bottom));
  padding: .25rem max(.25rem, var(--status-safe-right)) var(--status-safe-bottom) max(.25rem, var(--status-safe-left));
  border-top: 1px solid var(--status-shell-border);
  background: rgba(var(--ct-body-bg-rgb), .96);
  box-shadow: 0 -.35rem 1rem rgba(15, 23, 42, .1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html[data-status-theme="hyper"] .status-mobile-nav-item {
  display: flex;
  min-width: 0;
  min-height: 3.15rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .08rem;
  border-radius: var(--ct-border-radius);
  color: var(--ct-secondary-color);
  font-size: .72rem;
  text-decoration: none;
}

html[data-status-theme="hyper"] .status-mobile-nav-item.active {
  color: var(--ct-primary);
  background: rgba(var(--ct-primary-rgb), .1);
}

html[data-status-theme="hyper"] .status-mobile-nav-icon {
  font-size: 1.45rem;
}

@media (max-width: 991.98px) {
  html[data-status-theme="hyper"] body.status-theme-hyper {
    --status-shell-header-height: 56px;
  }

  html[data-status-theme="hyper"] .status-navbar {
    height: 56px !important;
    min-height: 56px !important;
    padding-block: .35rem !important;
  }

  html[data-status-theme="hyper"] .status-navbar .navbar-collapse:not(.status-mobile-menu-panel) {
    margin: .6rem -.75rem -.5rem;
    padding: .5rem .75rem .8rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: rgba(36, 42, 49, .99);
  }

  html[data-status-theme="hyper"] .status-navbar .navbar-nav {
    align-items: stretch;
  }

  html[data-status-theme="hyper"] .status-navbar .nav-link {
    min-height: 2.75rem;
    padding: .65rem .75rem;
  }

  html[data-status-theme="hyper"] .status-page-header {
    align-items: flex-start !important;
    padding: .9rem 1rem !important;
  }

  html[data-status-theme="hyper"] .status-page-actions {
    justify-content: flex-end;
  }

  html[data-status-theme="hyper"] body.status-has-mobile-nav:not(.status-theme-isolated) {
    padding-bottom: calc(3.6rem + var(--status-safe-bottom));
  }

  html[data-status-theme="hyper"] body.status-has-mobile-nav .status-mobile-nav {
    display: grid;
  }
}

@media (max-width: 767.98px) {
  html[data-status-theme="hyper"] body:not(.status-theme-isolated) .status-page-container {
    padding: .75rem !important;
  }

  html[data-status-theme="hyper"] .status-page-title {
    font-size: 1.35rem !important;
  }

  html[data-status-theme="hyper"] .status-page-header {
    align-items: flex-start !important;
    flex-direction: row;
  }

  html[data-status-theme="hyper"] .status-page-header > :first-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  html[data-status-theme="hyper"] .status-page-actions {
    width: auto;
    flex: 0 0 auto;
  }

  html[data-status-theme="hyper"] .updater-page-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  html[data-status-theme="hyper"] .updater-page-header .updater-header-main {
    width: 100%;
    min-width: 0;
  }

  html[data-status-theme="hyper"] .updater-page-header .updater-header-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  html[data-status-theme="hyper"] .updater-page-header .updater-header-actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  html[data-status-theme="hyper"] .updater-page-header .updater-header-status {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: .2rem;
    scrollbar-width: thin;
  }

  html[data-status-theme="hyper"] .updater-page-header .updater-status-chip {
    flex: 0 0 auto;
  }

  html[data-status-theme="hyper"] .status-page-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .4rem;
  }

  html[data-status-theme="hyper"] .status-page-title > .material-icons,
  html[data-status-theme="hyper"] .status-page-title > .mdi {
    flex: 0 0 auto;
  }

  html[data-status-theme="hyper"] .status-add-label,
  html[data-status-theme="hyper"] .status-admin-add-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  html[data-status-theme="hyper"] .status-bs-table-cards,
  html[data-status-theme="hyper"] .status-bs-table-cards > tbody {
    display: block;
    width: 100%;
  }

  html[data-status-theme="hyper"] .status-bs-table-cards > thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
  }

  html[data-status-theme="hyper"] .status-bs-table-cards > tbody > tr {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    width: 100%;
    margin: 0 0 .75rem;
    padding: .8rem;
    overflow: visible;
    border: 1px solid var(--status-shell-border);
    border-inline-start: .24rem solid var(--ct-primary);
    border-radius: var(--ct-border-radius-lg);
    background: var(--ct-card-bg);
    box-shadow: var(--ct-box-shadow-sm);
  }

  html[data-status-theme="hyper"] .status-bs-table-cards > tbody > tr > td {
    display: block;
    min-width: 0 !important;
    min-height: 0;
    padding: .6rem;
    border: 1px solid var(--status-shell-border);
    border-radius: var(--ct-border-radius);
    background: var(--ct-tertiary-bg, var(--ct-secondary-bg));
    text-align: start !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  html[data-status-theme="hyper"] .status-bs-table-cards > tbody > tr > td::before {
    display: block;
    margin-bottom: .25rem;
    content: attr(data-label);
    color: var(--ct-secondary-color);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  html[data-status-theme="hyper"] .status-bs-table-cards > tbody > tr > td.status-bs-table-primary,
  html[data-status-theme="hyper"] .status-bs-table-cards > tbody > tr > td:first-child {
    grid-column: 1 / -1;
  }

  /* GPS cards have both a row selector and a device icon. Reserve explicit
   * header lanes for the selector and Actions button instead of placing them
   * over the device identity. */
  html[data-status-theme="hyper"][data-status-theme-page="edit_gps"] .status-gps-table.status-bs-table-cards > tbody > tr > td.status-bs-table-primary {
    min-height: 3.75rem;
    padding: 0 3.6rem .65rem 4.4rem !important;
  }

  html[data-status-theme="hyper"][data-status-theme-page="edit_gps"] .status-gps-table .status-gps-device-cell {
    align-items: flex-start !important;
  }

  html[data-status-theme="hyper"] .status-bs-table-cards > tbody > tr > td[data-mobile-span="full"] {
    grid-column: 1 / -1;
  }

  html[data-status-theme="hyper"] .status-bs-table-cards > tbody > tr > td[data-mobile-empty="hide"]:empty {
    display: none;
  }

  html[data-status-theme="hyper"] .status-bs-table-cards > tbody > tr > td.status-bs-table-select {
    position: absolute;
    z-index: 12;
    top: .75rem;
    left: .75rem;
    width: 2.4rem !important;
    min-height: 2.4rem;
    padding: .55rem;
  }

  html[data-status-theme="hyper"] .status-bs-table-cards > tbody > tr > td.status-bs-table-primary::before,
  html[data-status-theme="hyper"] .status-bs-table-cards > tbody > tr > td.status-bs-table-select::before {
    display: none;
  }

  html[data-status-theme="hyper"] .status-bs-table-cards > tbody > tr > td.status-bs-table-actions,
  html[data-status-theme="hyper"] .status-bs-table-cards > tbody > tr > td:last-child {
    position: absolute;
    z-index: 12;
    top: .7rem;
    right: .7rem;
    width: auto !important;
    padding: 0;
    border: 0;
    background: transparent;
  }

  html[data-status-theme="hyper"] .status-bs-table-cards > tbody > tr > td.status-bs-table-actions::before,
  html[data-status-theme="hyper"] .status-bs-table-cards > tbody > tr > td:last-child::before {
    display: none;
  }

  html[data-status-theme="hyper"] .status-bs-table-shell {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  html[data-status-theme="hyper"] .modal-dialog {
    width: auto;
    max-width: none;
    height: calc(100dvh - 1rem);
    margin: .5rem;
  }

  html[data-status-theme="hyper"] .modal-dialog-scrollable .modal-content,
  html[data-status-theme="hyper"] .modal-dialog .modal-content {
    max-height: calc(100dvh - 1rem - var(--status-safe-bottom));
  }

  html[data-status-theme="hyper"] body.status-has-mobile-nav .modal-dialog-scrollable .modal-content,
  html[data-status-theme="hyper"] body.status-has-mobile-nav .modal-dialog .modal-content {
    max-height: calc(100dvh - var(--status-mobile-nav-actual-height, 3.6rem) - 1rem - var(--status-safe-bottom)) !important;
  }

  /* Reserve the bottom-navigation lane on the dialog itself, not only on its
   * content. Bootstrap's scrollable dialog is a flex container and otherwise
   * keeps its full viewport box around a shorter card, leaving the lower edge
   * beneath the fixed navigation even though the modal body scrolls. */
  html[data-status-theme="hyper"] body.status-has-mobile-nav .modal-dialog,
  html[data-status-theme="hyper"] body.status-has-mobile-nav .modal-dialog.modal-dialog-scrollable,
  html[data-status-theme="hyper"] body.status-has-mobile-nav .modal-dialog.status-single-scroll-dialog {
    height: auto !important;
    max-height: calc(100dvh - var(--status-mobile-nav-actual-height, 3.6rem) - 1rem - var(--status-safe-bottom)) !important;
    margin: .5rem .5rem calc(var(--status-mobile-nav-actual-height, 3.6rem) + .5rem + var(--status-safe-bottom)) !important;
  }

  html[data-status-theme="hyper"] .modal-footer .btn,
  html[data-status-theme="hyper"] .status-modal-actions .btn {
    width: auto !important;
    flex: 0 0 auto !important;
  }

  html[data-status-theme="hyper"] .status-public-toolbar-row {
    align-items: stretch;
    flex-direction: column;
  }

  html[data-status-theme="hyper"] .status-public-toolbar-controls {
    align-items: center;
    flex-direction: row;
  }

  html[data-status-theme="hyper"] .status-flags-list-page .status-public-toolbar-controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 2.55rem;
    gap: .4rem !important;
  }

  html[data-status-theme="hyper"] .status-flags-list-page .status-public-refresh {
    display: inline-flex;
    width: 2.55rem;
    min-width: 2.55rem;
    height: 2.55rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0;
  }

  html[data-status-theme="hyper"] .status-flags-list-page .status-public-refresh .mdi {
    margin: 0 !important;
    font-size: 1.15rem;
  }

  html[data-status-theme="hyper"] .status-public-toolbar-heading,
  html[data-status-theme="hyper"] .status-public-toolbar-controls {
    width: 100%;
    flex: 0 0 auto;
  }

  html[data-status-theme="hyper"] .status-public-toolbar-select,
  html[data-status-theme="hyper"] .status-public-search {
    width: 100%;
    min-width: 0;
  }

  html[data-status-theme="hyper"] .status-public-toolbar-select {
    flex: 1 1 10rem;
  }

  html[data-status-theme="hyper"] .status-public-search {
    flex: 1 1 14rem;
  }

  html[data-status-theme="hyper"] .status-public-task-actions .btn,
  html[data-status-theme="hyper"] .status-item-card-actions .btn {
    flex: 1 1 auto;
  }

  html[data-status-theme="hyper"] .status-flags-table-wrap {
    display: none !important;
  }

  html[data-status-theme="hyper"] .status-flags-mobile-cards {
    display: grid;
    gap: .75rem;
    padding: .75rem;
  }

  html[data-status-theme="hyper"] .status-info-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  html[data-status-theme="hyper"] .status-info-hero-actions .btn {
    width: 100%;
  }

  html[data-status-theme="hyper"] .status-new-event-form .form-group.row > label,
  html[data-status-theme="hyper"] .status-new-event-form .form-group.row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  html[data-status-theme="hyper"] .status-new-event-form .form-group.row > label {
    margin-bottom: .4rem;
    padding-bottom: 0;
  }

  html[data-status-theme="hyper"] .status-new-event-form .form-group.row > [class*="offset-"] {
    margin-left: 0;
  }
}

html[data-status-theme="hyper"] .status-header-primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

@media (max-width: 420px) {
  html[data-status-theme="hyper"] .status-bs-table-cards > tbody > tr {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-status-theme="hyper"] .status-bs-table-cards > tbody > tr > td {
    grid-column: 1 / -1;
  }

  html[data-status-theme="hyper"] .status-public-task-actions,
  html[data-status-theme="hyper"] .status-item-card-actions {
    align-items: stretch;
    flex-direction: column;
  }

  html[data-status-theme="hyper"] .status-public-task-actions .btn,
  html[data-status-theme="hyper"] .status-item-card-actions .btn {
    width: 100%;
  }
}