/*
 * Status-specific Hyper shell.
 *
 * All selectors are Hyper-scoped. The homepage, Replay and Edit map keep their
 * purpose-built application layout while sharing this Bootstrap 5 runtime.
 */

html[data-status-theme="hyper"] {
  color-scheme: light;
  --status-shell-header-height: var(--ct-topbar-height, 70px);
  --status-shell-surface: var(--ct-secondary-bg);
  --status-shell-border: var(--ct-border-color);
  --status-shell-muted: var(--ct-secondary-color);
  --status-shell-focus: rgba(var(--ct-primary-rgb), 0.25);
  --status-shell-navbar-bg: var(--ct-topbar-bg, var(--ct-body-bg));
}

html[data-status-theme="hyper"][data-bs-theme="dark"] {
  color-scheme: dark;
}

html[data-status-theme="hyper"] body.status-theme-hyper {
  min-height: 100dvh;
  padding-top: var(--status-shell-header-height);
  overflow-x: clip;
  background: var(--ct-body-bg);
  color: var(--ct-body-color);
  font-family: var(--ct-body-font-family);
}

html[data-status-theme="hyper"] body.status-theme-hyper.status-admin-mode {
  background:
    radial-gradient(circle at 100% 0, rgba(var(--ct-primary-rgb), 0.08), transparent 32rem),
    var(--ct-body-bg);
}

html[data-status-theme="hyper"] .status-navbar {
  min-height: var(--status-shell-header-height);
  border-bottom: 1px solid var(--status-shell-border);
  background: rgba(36, 42, 49, 0.985) !important;
  box-shadow: var(--ct-box-shadow-sm) !important;
}

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

html[data-status-theme="hyper"] .status-navbar .nav-link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  border-radius: var(--ct-border-radius);
}

html[data-status-theme="hyper"] .status-navbar .nav-link:focus-visible,
html[data-status-theme="hyper"] .status-navbar .dropdown-item:focus-visible,
html[data-status-theme="hyper"] .status-hyper-content :focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--status-shell-focus);
}

html[data-status-theme="hyper"] .status-navbar .dropdown-menu {
  --ct-dropdown-bg: var(--ct-secondary-bg);
  --ct-dropdown-link-color: var(--ct-body-color);
  --ct-dropdown-link-hover-bg: rgba(var(--ct-primary-rgb), 0.12);
  --ct-dropdown-link-hover-color: var(--ct-body-color);
  border-color: var(--status-shell-border);
  box-shadow: var(--ct-box-shadow);
}

html[data-status-theme="hyper"] .status-navbar .form-inline {
  display: flex;
  align-items: center;
  flex-flow: row wrap;
  gap: 0.5rem;
}

html[data-status-theme="hyper"] .status-page-container {
  width: min(100%, 1600px);
  min-height: calc(100dvh - var(--status-shell-header-height));
  margin-inline: auto;
  padding: 1rem;
}

html[data-status-theme="hyper"] .status-admin-container,
html[data-status-theme="hyper"] .status-public-container {
  max-width: 1600px;
}

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

html[data-status-theme="hyper"] .status-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

html[data-status-theme="hyper"] .status-page-title {
  margin: 0;
  color: var(--ct-heading-color, var(--ct-body-color));
  font-size: clamp(1.35rem, 1rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}

html[data-status-theme="hyper"] .status-page-subtitle {
  max-width: 72rem;
  margin-top: 0.375rem;
  color: var(--ct-secondary-color);
}

html[data-status-theme="hyper"] .status-section-card,
html[data-status-theme="hyper"] .card {
  border-color: var(--status-shell-border);
  background: var(--ct-card-bg);
  box-shadow: var(--ct-box-shadow-sm);
}

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

html[data-status-theme="hyper"] .table {
  --ct-table-bg: transparent;
  --ct-table-color: var(--ct-body-color);
  --ct-table-border-color: var(--status-shell-border);
  margin-bottom: 0;
}

html[data-status-theme="hyper"] .table > :not(caption) > * > * {
  border-bottom-color: var(--status-shell-border);
}

html[data-status-theme="hyper"] .text-muted {
  color: var(--ct-secondary-color) !important;
}

html[data-status-theme="hyper"] .status-flash-stack {
  z-index: 1095;
}

html[data-status-theme="hyper"] .status-loading-overlay {
  z-index: 1090;
}

html[data-status-theme="hyper"] .status-bs4-input-group-addon {
  display: contents;
}

@media (min-width: 768px) {
  html[data-status-theme="hyper"] .status-page-container {
    padding: 1.5rem;
  }
}

@media (max-width: 991.98px) {
  html[data-status-theme="hyper"] .status-navbar .navbar-collapse {
    max-height: calc(100dvh - var(--status-shell-header-height));
    overflow-y: auto;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-status-theme="hyper"] *,
  html[data-status-theme="hyper"] *::before,
  html[data-status-theme="hyper"] *::after {
    scroll-behavior: auto !important;
  }
}