@font-face {
    font-family: "Open Sans Custom";
    src: url("/_content/HVO.WebSite.Themes/fonts/OpenSans-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Open Sans Custom";
    src: url("/_content/HVO.WebSite.Themes/fonts/OpenSans-Semibold.ttf") format("truetype");
    font-weight: 600;
}

:root {
    --shell-font-family: "Open Sans Custom", "Segoe UI", sans-serif;
    --shell-font-mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --shell-header-height: 80px;
    --shell-footer-height: 56px;
    --shell-card-gap: 12px;
    --shell-page-padding: 1rem;
    --shell-page-section-gap: 0.9rem;
    --shell-brand-mark-size: 40px;
    --shell-brand-mark-radius: 14px;
    --shell-brand-title-size: 1.34rem;
    --shell-brand-subtitle-size: 0.92rem;
    --shell-pill-min-width: 7rem;
    --shell-pill-menu-min-width: 8rem;
    --shell-pill-height: 2rem;
    --shell-pill-padding-inline: 0.72rem;
    --shell-pill-font-size: 0.88rem;
    --shell-icon-button-size: 2rem;
    --shell-footer-font-size: 0.8rem;
    --shell-page-background-image-size: 100% auto;
    --shell-page-background-image-position: center 62%;
    --shell-chart-grid-color: rgba(126, 157, 196, 0.12);
    --shell-chart-axis-color: rgba(126, 157, 196, 0.18);
    --shell-chart-label-color: #8da4c7;
    --shell-chart-line-width: 3;
    --shell-chart-marker-stroke-width: 2;
    --shell-chart-marker-fill: #ebf5ff;
    --shell-chart-empty-background: rgba(8, 18, 30, 0.28);
    --shell-chart-empty-border: rgba(126, 157, 196, 0.18);
    --shell-page-hero-image: url("/_content/HVO.WebSite.Themes/images/observatory-background.jpg");
}

/**
 * HVO Data Visualization Palette
 * ─────────────────────────────────────────────────────────────────────────────
 * These are the ONLY colors that should be used for new charts, UI accents, and
 * status indicators. Do not add ad-hoc hex values to individual page CSS files.
 *
 * Data Series (chart datasets — assign in numeric order):
 *   --hvo-series-1  primary blue       temperature outside, wind avg
 *   --hvo-series-2  warm amber         temperature inside, secondary
 *   --hvo-series-3  solar yellow       solar radiation, sun arc fill
 *   --hvo-series-4  success green      positive / healthy values
 *   --hvo-series-5  alert orange       wind gust, caution
 *   --hvo-series-6  muted silver       moon arc, secondary muted
 *   --hvo-series-7  bright cyan        wind avg alt, second blue series
 *   --hvo-series-8  danger pink        alarm / critical
 *
 * Accent (UI elements — hero highlights, barometer, indicators):
 *   --hvo-accent-blue      active links, hero readouts
 *   --hvo-accent-cyan      secondary highlights
 *   --hvo-accent-amber     warm hero readouts, sun
 *   --hvo-accent-success   positive / online states
 *   --hvo-accent-danger    negative / offline / alarm
 */
:root {
    --hvo-series-1:  #69d3ff;
    --hvo-series-2:  #ffb86c;
    --hvo-series-3:  #ffd166;
    --hvo-series-4:  #57d38d;
    --hvo-series-5:  #ff9f5a;
    --hvo-series-6:  #9fb8d4;
    --hvo-series-7:  #7ae0ff;
    --hvo-series-8:  #f38ba8;

    --hvo-accent-blue:    #6da5ff;
    --hvo-accent-cyan:    #83e4ff;
    --hvo-accent-amber:   #ffcf66;
    --hvo-accent-success: #57d38d;
    --hvo-accent-danger:  #ff7f7f;
}

html,
body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    font-family: var(--shell-font-family);
    overflow: hidden;
}

body {
    background: #08111f;
    color: var(--shell-page-text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
    font-family: var(--shell-font-family);
}

.mud-layout {
    height: 100vh;
    min-height: 100vh;
    background: var(--shell-page-background);
    overflow: hidden;
}

.shell-theme-dark {
    --shell-page-background:
        linear-gradient(180deg, rgba(8, 13, 22, 0.38) 0%, rgba(6, 11, 18, 0.54) 100%),
        radial-gradient(circle at 58% 72%, rgba(217, 182, 86, 0.34), transparent 25%),
        radial-gradient(circle at 26% 16%, rgba(101, 151, 229, 0.3), transparent 32%),
        var(--shell-page-hero-image, none) var(--shell-page-background-image-position) / var(--shell-page-background-image-size) no-repeat;
    --shell-page-text: #ebf5ff;
    --shell-card-background: rgba(31, 41, 55, 0.92);
    --shell-card-foreground: #f9fafb;
    --shell-card-border: rgba(155, 180, 220, 0.34);
    --shell-card-inner-border: rgba(255, 255, 255, 0.06);
    --shell-card-shadow: 0 18px 38px rgba(3, 8, 18, 0.28);
    --shell-brand-title: #f8fbff;
    --shell-brand-subtitle: #7387a7;
    --shell-action-color: #d9e3f3;
    --shell-pill-text: #bfd0e9;
    --shell-pill-background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(173, 196, 230, 0.04));
    --shell-pill-border: rgba(197, 214, 239, 0.32);
    --shell-pill-hover-background: linear-gradient(180deg, rgba(93, 129, 189, 0.4), rgba(56, 84, 137, 0.34));
    --shell-pill-hover-text: #f8fbff;
    --shell-pill-hover-border: rgba(214, 230, 255, 0.48);
    --shell-pill-active-background: linear-gradient(180deg, rgba(241, 247, 255, 0.98), rgba(196, 220, 255, 0.9));
    --shell-pill-active-text: #10233f;
    --shell-pill-active-border: rgba(255, 255, 255, 0.95);
    --shell-pill-active-shadow: 0 10px 20px rgba(7, 14, 27, 0.3);
    --shell-content-background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 255, 0.98));
    --shell-content-border: rgba(197, 207, 223, 0.75);
    --shell-content-shadow: 0 22px 46px rgba(15, 23, 42, 0.18);
    --shell-overlay-backdrop: rgba(3, 8, 18, 0.18);
    --shell-overlay-surface: linear-gradient(180deg, rgba(22, 37, 58, 0.97), rgba(15, 28, 45, 0.95));
    --shell-overlay-border: rgba(190, 212, 240, 0.44);
    --shell-overlay-shadow: 0 24px 44px rgba(3, 8, 18, 0.32);
    --shell-overlay-text: #ebf5ff;
    --shell-overlay-muted: #9fb4d5;
    --shell-overlay-panel: rgba(8, 18, 30, 0.44);
    --shell-overlay-panel-border: rgba(126, 157, 196, 0.18);
    --shell-overlay-link: #83e4ff;
    --shell-overlay-link-hover: #c8f5ff;
}

.shell-theme-light {
    --shell-page-background:
        linear-gradient(180deg, rgba(244, 248, 253, 0.2) 0%, rgba(223, 234, 247, 0.26) 100%),
        radial-gradient(circle at 58% 72%, rgba(217, 182, 86, 0.08), transparent 24%),
        radial-gradient(circle at 26% 16%, rgba(101, 151, 229, 0.08), transparent 30%),
        var(--shell-page-hero-image, none) var(--shell-page-background-image-position) / var(--shell-page-background-image-size) no-repeat;
    --shell-page-text: #10233f;
    --shell-card-background: rgba(244, 248, 252, 0.56);
    --shell-card-foreground: #10233f;
    --shell-card-border: rgba(128, 151, 185, 0.46);
    --shell-card-inner-border: rgba(255, 255, 255, 0.72);
    --shell-card-shadow: 0 24px 44px rgba(65, 89, 125, 0.18);
    --shell-brand-title: #183250;
    --shell-brand-subtitle: #56708f;
    --shell-action-color: #45617f;
    --shell-pill-text: #35506f;
    --shell-pill-background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(229, 238, 249, 0.92));
    --shell-pill-border: rgba(161, 184, 211, 0.62);
    --shell-pill-hover-background: linear-gradient(180deg, rgba(224, 235, 251, 0.98), rgba(205, 222, 245, 0.98));
    --shell-pill-hover-text: #173251;
    --shell-pill-hover-border: rgba(113, 145, 190, 0.48);
    --shell-pill-active-background: linear-gradient(180deg, rgba(58, 113, 204, 0.96), rgba(84, 144, 234, 0.92));
    --shell-pill-active-text: #f8fbff;
    --shell-pill-active-border: rgba(214, 229, 255, 0.7);
    --shell-pill-active-shadow: 0 14px 24px rgba(45, 95, 183, 0.22);
    --shell-content-background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 250, 255, 0.98));
    --shell-content-border: rgba(176, 194, 219, 0.82);
    --shell-content-shadow: 0 24px 44px rgba(82, 106, 143, 0.16);
    --shell-overlay-backdrop: rgba(80, 98, 122, 0.10);
    --shell-overlay-surface: linear-gradient(180deg, rgba(252, 253, 255, 0.98), rgba(238, 244, 252, 0.97));
    --shell-overlay-border: rgba(128, 151, 185, 0.42);
    --shell-overlay-shadow: 0 20px 40px rgba(66, 88, 120, 0.14);
    --shell-overlay-text: #10233f;
    --shell-overlay-muted: #56708f;
    --shell-overlay-panel: rgba(255, 255, 255, 0.58);
    --shell-overlay-panel-border: rgba(128, 151, 185, 0.24);
    --shell-overlay-link: #2f8fd7;
    --shell-overlay-link-hover: #173251;
    --shell-chart-grid-color: rgba(103, 132, 171, 0.14);
    --shell-chart-axis-color: rgba(128, 151, 185, 0.24);
    --shell-chart-label-color: #68809f;
    --shell-chart-marker-fill: #ffffff;
    --shell-chart-empty-background: rgba(255, 255, 255, 0.42);
    --shell-chart-empty-border: rgba(128, 151, 185, 0.24);
}

.shell-appbar {
    background: transparent !important;
    color: inherit;
    box-shadow: none !important;
    height: var(--shell-header-height) !important;
}

.shell-appbar.mud-appbar .mud-toolbar-appbar {
    min-height: var(--shell-header-height);
    height: var(--shell-header-height);
    padding-top: 0;
    padding-bottom: 0;
}

.shell-appbar-footer {
    height: var(--shell-footer-height) !important;
}

.shell-appbar-footer.mud-appbar .mud-toolbar-appbar {
    min-height: var(--shell-footer-height);
    height: var(--shell-footer-height);
}

.shell-frame {
    width: 1280px;
    min-width: 1280px;
    max-width: 1280px;
    margin: 0 auto;
}

.shell-main {
    min-width: 0;
    display: flex;
    height: 100vh;
    min-height: 100vh;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
}

.shell-content {
    flex: 1 1 auto;
    display: flex;
    min-width: 0;
    height: 100%;
    padding: calc(var(--shell-header-height) + var(--shell-card-gap)) 0 calc(var(--shell-footer-height) + var(--shell-card-gap));
    box-sizing: border-box;
    overflow: hidden;
}

.shell-bar-content {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0 1rem;
    box-sizing: border-box;
    background: var(--shell-card-background);
    color: var(--shell-card-foreground);
    border: 1px solid var(--shell-card-border);
    border-radius: 18px;
    box-shadow: var(--shell-card-shadow);
    backdrop-filter: blur(14px);
    position: relative;
}

.shell-bar-content::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 17px;
    border: 1px solid var(--shell-card-inner-border);
    pointer-events: none;
}

.shell-header-frame {
    min-height: var(--shell-header-height);
}

.shell-brand-block {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    margin-right: 1.1rem;
    min-width: 0;
    flex-shrink: 1;
}

.shell-brand-mark {
    position: relative;
    width: var(--shell-brand-mark-size);
    height: var(--shell-brand-mark-size);
    flex-shrink: 0;
    border-radius: var(--shell-brand-mark-radius);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(39, 50, 68, 0.98), rgba(17, 24, 36, 0.96));
    border: 1px solid rgba(188, 203, 223, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 10px 24px rgba(8, 13, 22, 0.28);
}

.shell-brand-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: 66% 44%;
    filter: contrast(1.04) brightness(0.98);
}

.shell-brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.16rem;
}

.shell-brand-text {
    flex-shrink: 0;
    font-size: var(--shell-brand-title-size) !important;
    font-weight: 800 !important;
    line-height: 1.02 !important;
    letter-spacing: 0.012em !important;
    color: var(--shell-brand-title) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px rgba(2, 8, 23, 0.34) !important;
    white-space: nowrap;
}

.shell-brand-subtitle {
    color: var(--shell-brand-subtitle) !important;
    font-size: var(--shell-brand-subtitle-size) !important;
    font-weight: 500 !important;
    line-height: 1.08 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap;
}

.shell-header-actions {
    display: flex;
    align-items: center;
    gap: 0.18rem;
    flex-shrink: 0;
}

.shell-header-nav {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    min-width: 0;
    margin-left: 1.6rem;
}

.shell-nav-link,
.shell-nav-link.mud-button-root {
    min-width: var(--shell-pill-min-width);
    height: var(--shell-pill-height);
    min-height: var(--shell-pill-height);
    padding: 0 var(--shell-pill-padding-inline);
    border-radius: 999px;
    color: var(--shell-pill-text) !important;
    font-size: var(--shell-pill-font-size);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(6, 10, 20, 0.36);
    text-decoration: none;
    background: var(--shell-pill-background);
    box-shadow:
        inset 0 0 0 1px var(--shell-pill-border),
        0 0 0 1px rgba(8, 15, 28, 0.18);
}

.shell-nav-link.mud-button-root .mud-button-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
}

.shell-nav-link:hover,
.shell-nav-link.mud-button-root:hover {
    background: var(--shell-pill-hover-background);
    color: var(--shell-pill-hover-text) !important;
    box-shadow:
        inset 0 0 0 1px var(--shell-pill-hover-border),
        0 6px 14px rgba(7, 14, 27, 0.22);
    text-decoration: none;
}

.shell-nav-link-current,
.shell-nav-link-current.mud-button-root,
.shell-nav-link.mud-button-filled {
    background: var(--shell-pill-active-background);
    color: var(--shell-pill-active-text) !important;
    box-shadow:
        inset 0 0 0 1px var(--shell-pill-active-border),
        var(--shell-pill-active-shadow);
    text-shadow: none;
}

.shell-header-actions .mud-icon-button,
.shell-icon-button {
    width: var(--shell-icon-button-size);
    height: var(--shell-icon-button-size);
    padding: 0;
    border-radius: 999px;
    background: var(--shell-pill-background);
    color: var(--shell-action-color) !important;
    box-shadow:
        inset 0 0 0 1px var(--shell-pill-border),
        0 0 0 1px rgba(8, 15, 28, 0.18);
    border: 0;
}

.shell-header-actions .mud-icon-button:hover,
.shell-icon-button:hover {
    background: var(--shell-pill-hover-background);
    color: var(--shell-pill-hover-text) !important;
    box-shadow:
        inset 0 0 0 1px var(--shell-pill-hover-border),
        0 6px 14px rgba(7, 14, 27, 0.22);
}

.shell-header-actions .mud-icon-button .mud-icon-root {
    width: 1.12rem;
    height: 1.12rem;
}

.shell-footer-link.mud-button-root {
    min-width: auto;
    padding: 0.2rem 0.35rem;
    color: var(--shell-action-color) !important;
    font-size: var(--shell-footer-font-size);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
}

.shell-footer-frame {
    min-height: var(--shell-footer-height);
}

.shell-footer-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr);
    align-items: center;
    width: 100%;
    gap: 0.5rem;
}

.shell-footer-slot {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    color: var(--shell-action-color) !important;
    font-size: var(--shell-footer-font-size) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.shell-footer-slot-1 {
    justify-self: start;
    justify-content: flex-start;
    text-align: left;
}

.shell-footer-slot-2,
.shell-footer-slot-3,
.shell-footer-slot-4 {
    justify-self: center;
    justify-content: center;
    text-align: center;
}

.shell-footer-slot-2,
.shell-footer-slot-4 {
    padding-inline: 0.35rem;
}

.shell-footer-slot-3 {
    padding-inline: 0.55rem;
}

.shell-footer-slot-5 {
    justify-self: end;
    justify-content: flex-end;
    text-align: right;
}

.shell-status-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06);
}

.shell-status-dot-online {
    background: #6edc8c;
}

.shell-status-dot-offline {
    background: #ff7272;
}

.shell-status-dot-warning {
    background: #ffca66;
}

.layout-canvas {
    position: relative;
    flex: 1;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    border-radius: 24px;
    background: transparent;
    color: var(--shell-page-text);
    border: 0;
    box-sizing: border-box;
    box-shadow: none;
    backdrop-filter: none;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.layout-canvas::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.layout-canvas::after {
    content: none;
}

.shell-page {
    padding: var(--shell-page-padding);
}

.shell-page-stack {
    gap: var(--shell-page-section-gap);
    min-height: 100%;
    height: auto;
}

.shell-page-stack > * {
    flex-shrink: 0;
}

.shell-loading-screen {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shell-loading-card {
    width: min(32rem, 100%);
    padding: 2rem 2.25rem;
    border-radius: 24px;
    background: var(--shell-overlay-surface);
    color: var(--shell-overlay-text);
    border: 1px solid var(--shell-overlay-border);
    box-shadow: var(--shell-overlay-shadow);
    backdrop-filter: blur(16px);
}

.shell-loading-stack {
    min-height: 16rem;
    text-align: center;
}

.shell-loading-stack .mud-typography {
    color: inherit;
}

.shell-loading-stack .mud-progress-circular {
    color: var(--shell-overlay-link) !important;
}

.shell-info-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(var(--shell-header-height) + 1.5rem) 1.5rem 1.5rem;
    background: var(--shell-overlay-backdrop);
    backdrop-filter: blur(3px);
}

.shell-info-dialog {
    position: relative;
    width: min(38rem, 100%);
    padding: 1.4rem 1.5rem 1.5rem;
    border-radius: 24px;
    background: var(--shell-overlay-surface);
    color: var(--shell-overlay-text);
    border: 1px solid var(--shell-overlay-border);
    box-shadow: var(--shell-overlay-shadow);
    backdrop-filter: blur(12px);
}

.shell-info-dialog::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 23px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.shell-info-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.shell-info-dialog-eyebrow {
    color: var(--shell-overlay-muted);
    letter-spacing: 0.18em;
}

.shell-info-dialog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.shell-info-dialog-item {
    display: grid;
    gap: 0.24rem;
    padding: 0.85rem 0.95rem;
    border-radius: 16px;
    background: var(--shell-overlay-panel);
    border: 1px solid var(--shell-overlay-panel-border);
}

.shell-info-dialog-item span {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--shell-overlay-muted);
}

.shell-info-dialog-item strong {
    color: var(--shell-overlay-text);
}

.shell-info-dialog-mono {
    font-variant-numeric: tabular-nums;
}

.shell-info-dialog-note {
    margin-top: 1rem;
    color: var(--shell-overlay-muted);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 1500;
    width: min(42rem, calc(100vw - 2rem));
    transform: translateX(-50%);
}

.shell-blazor-error-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 20px;
    background: var(--shell-overlay-surface);
    color: var(--shell-overlay-text);
    border: 1px solid var(--shell-overlay-border);
    box-shadow: var(--shell-overlay-shadow);
    backdrop-filter: blur(16px);
}

#components-reconnect-modal {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 1550;
    width: min(26rem, calc(100vw - 2rem));
    padding: 1rem 1.1rem;
    border-radius: 20px;
    transform: translateX(-50%);
    background: var(--shell-overlay-surface);
    color: var(--shell-overlay-text);
    border: 1px solid var(--shell-overlay-border);
    box-shadow: var(--shell-overlay-shadow);
    backdrop-filter: blur(16px);
    text-align: center;
}

#components-reconnect-modal::after {
    color: inherit;
    font-weight: 600;
    letter-spacing: 0.01em;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
}

#components-reconnect-modal.components-reconnect-show::after {
    content: "Attempting to reconnect to the dashboard session...";
}

#components-reconnect-modal.components-reconnect-failed {
    border-color: color-mix(in srgb, var(--shell-overlay-border) 42%, #ffca66 58%);
}

#components-reconnect-modal.components-reconnect-failed::after {
    content: "Connection lost. Retrying...";
}

#components-reconnect-modal.components-reconnect-rejected {
    border-color: color-mix(in srgb, var(--shell-overlay-border) 34%, #ff7272 66%);
}

#components-reconnect-modal.components-reconnect-rejected::after {
    content: "Reconnection rejected. Reload the page to recover.";
}

.shell-blazor-error-copy {
    display: grid;
    gap: 0.18rem;
}

.shell-blazor-error-copy strong {
    color: var(--shell-overlay-text);
}

.shell-blazor-error-copy span {
    color: var(--shell-overlay-muted);
}

.shell-blazor-error-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--shell-overlay-panel-border);
    background: var(--shell-overlay-panel);
    color: var(--shell-overlay-text);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

#blazor-error-ui .reload:hover,
#blazor-error-ui .dismiss:hover {
    background: color-mix(in srgb, var(--shell-overlay-panel) 68%, var(--shell-overlay-link) 32%);
    border-color: var(--shell-overlay-link);
    color: var(--shell-overlay-link-hover);
}

#blazor-error-ui .dismiss {
    appearance: none;
}

@media (max-width: 1400px) {
    .shell-frame {
        width: calc(100vw - 24px);
        min-width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
    }
}

@media (max-width: 1100px) {
    .shell-footer-layout {
        grid-template-columns: 1fr;
    }

    .shell-footer-slot-5 {
        justify-self: start;
        justify-content: flex-start;
        text-align: left;
    }
}

@media (max-width: 720px) {
    .shell-info-dialog-backdrop {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .shell-info-dialog-grid {
        grid-template-columns: 1fr;
    }

    #blazor-error-ui {
        width: calc(100vw - 1.2rem);
        bottom: 0.6rem;
    }

    #components-reconnect-modal {
        width: calc(100vw - 1.2rem);
        bottom: 0.6rem;
    }

    .shell-blazor-error-card {
        align-items: stretch;
        flex-direction: column;
    }

    .shell-blazor-error-actions {
        justify-content: flex-end;
    }
}