/* ══════════════════════════════════════════════════════════════ Global CSS custom-property theme tokens Applied by data-theme="dark" / data-theme="light" on ══════════════════════════════════════════════════════════════ */ :root, [data-theme="light"] { /* ── Surfaces ─────────────────────────────────────────────── */ --bp-bg: #F4F6F8; --bp-surface: #FFFFFF; --bp-surface-2: #F0F2F5; --bp-surface-3: #E8EAED; --bp-border: #DDE1E7; --bp-border-soft: #EAEDF1; /* ── Text ─────────────────────────────────────────────────── */ --bp-text: #1E2530; --bp-text-muted: #5C6B7A; --bp-text-faint: #98A5B3; --bp-text-inv: #FFFFFF; /* ── Temi essay section tokens ────────────────────────────── */ --bp-intro-bg: #FFF8F8; --bp-intro-border: #B71C1C; --bp-svolg-bg: #FFFDF5; --bp-svolg-border: #E65100; --bp-conc-bg: #F5FBF5; --bp-conc-border: #2E7D32; /* ── Illumination ─────────────────────────────────────────── */ --bp-gram-dim: 0.38; --bp-struct-dim: 0.35; --bp-glow-opacity: 0.12; --bp-glow-strong: 0.30; /* ── Layout chrome ────────────────────────────────────────── */ --bp-brand: #f78b1e; --bp-sidebar-bg: linear-gradient(175deg, #8B1200 0%, #C93D00 45%, #f78b1e 100%); --bp-sidebar-hover: rgba(255, 255, 255, 0.13); --bp-sidebar-active: rgba(255, 255, 255, 0.22); --bp-sidebar-border: rgba(0, 0, 0, 0.12); --bp-topbar-bg: #FFFFFF; --bp-topbar-border: #E4E8EE; --bp-topbar-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04); --bp-topbar-accent: #f78b1e; --bp-sidebar-top-bg: rgba(0, 0, 0, 0.22); } [data-theme="dark"] { /* ── Surfaces — warm charcoal, NOT pure black ─────────────── */ --bp-bg: #232323; --bp-surface: #2E2E2E; --bp-surface-2: #393939; --bp-surface-3: #444444; --bp-border: #4A4A4A; --bp-border-soft: #3E3E3E; /* ── Text ─────────────────────────────────────────────────── */ --bp-text: #E2E4E9; --bp-text-muted: #9AA3B0; --bp-text-faint: #5E6A7A; --bp-text-inv: #181818; /* ── Temi essay section tokens ────────────────────────────── */ --bp-intro-bg: rgba(239, 83, 80, 0.09); --bp-intro-border: #EF5350; --bp-svolg-bg: rgba(255, 112, 67, 0.08); --bp-svolg-border: #FF7043; --bp-conc-bg: rgba(102, 187, 106, 0.09); --bp-conc-border: #66BB6A; /* ── Illumination ─────────────────────────────────────────── */ --bp-gram-dim: 0.28; --bp-struct-dim: 0.26; --bp-glow-opacity: 0.22; --bp-glow-strong: 0.50; /* ── Layout chrome ─────────────────────────────────────────── */ /* Sidebar: dark version of the brand red-orange gradient */ --bp-sidebar-bg: linear-gradient(175deg, #2A0800 0%, #3E1200 40%, #5C2400 100%); --bp-sidebar-hover: rgba(247, 139, 30, 0.16); --bp-sidebar-active: rgba(247, 139, 30, 0.26); --bp-sidebar-border: #3A2A22; --bp-topbar-bg: #2E2E2E; --bp-topbar-border: #424242; --bp-topbar-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2); --bp-topbar-accent: #FF8A65; --bp-sidebar-top-bg: rgba(0, 0, 0, 0.25); } /* ── Base ────────────────────────────────────────────────────── */ html, body { font-family: 'Segoe UI', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: var(--bp-bg); color: var(--bp-text); /* Short transition — feels instant but avoids hard flash */ transition: background-color 0.12s ease, color 0.08s ease; } /* Prevent layout shifts during theme switch — lock element geometry */ .app-topbar, .mud-nav-menu, .mud-card, .mud-paper { transition: background-color 0.12s ease, border-color 0.12s ease !important; } /* ── Single-column: every informational block on its own row ─── */ /* Applied globally in the content area. */ /* Pages that legitimately need multi-column wrap with .bp-cols */ .content .mud-grid > .mud-grid-item:not([class*="keep-cols"]) { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } a, .btn-link { color: #006bb7; } .btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } .content { padding-top: 1.1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ── MudBlazor nav overrides — light mode (sidebar is red/dark) ── */ .mud-nav-link { color: rgba(255, 255, 255, 0.88) !important; border-radius: 6px !important; margin: 1px 6px !important; font-size: 0.875rem !important; font-weight: 500 !important; transition: background-color 0.15s ease, color 0.15s ease !important; } .mud-nav-group .mud-icon-default, .mud-nav-item .mud-icon-default { color: rgba(255, 255, 255, 0.75) !important; } .mud-nav-link:hover, .mud-nav-link:active { background-color: var(--bp-sidebar-hover) !important; color: #fff !important; } .mud-nav-link.active:not(.mud-nav-link-disabled) { background-color: var(--bp-sidebar-active) !important; color: #fff !important; font-weight: 600 !important; } .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-default { color: #fff !important; } .mud-navmenu.mud-navmenu-default .mud-nav-link-expand-icon { color: rgba(255, 255, 255, 0.5) !important; } .mud-navmenu.mud-navmenu-default .mud-nav-link-expand-icon.mud-transform { color: rgba(255, 255, 255, 0.8) !important; } /* ── MudBlazor nav overrides — dark mode ─────────────────────── */ [data-theme="dark"] .mud-nav-link { color: rgba(255, 255, 255, 0.72) !important; } [data-theme="dark"] .mud-nav-link:hover, [data-theme="dark"] .mud-nav-link:active { background-color: var(--bp-sidebar-hover) !important; color: rgba(255, 255, 255, 0.95) !important; } [data-theme="dark"] .mud-nav-link.active:not(.mud-nav-link-disabled) { background-color: var(--bp-sidebar-active) !important; color: #fff !important; } [data-theme="dark"] .mud-nav-group .mud-icon-default, [data-theme="dark"] .mud-nav-item .mud-icon-default { color: rgba(255, 255, 255, 0.55) !important; } [data-theme="dark"] .mud-navmenu.mud-navmenu-default .mud-nav-link-expand-icon { color: rgba(255, 255, 255, 0.35) !important; } [data-theme="dark"] .mud-navmenu.mud-navmenu-default .mud-nav-link-expand-icon.mud-transform { color: rgba(255, 255, 255, 0.65) !important; } /* ── MudBlazor component dark mode overrides ─────────────────── */ /* These ensure MudBlazor components honour our dark palette */ [data-theme="dark"] .mud-card, [data-theme="dark"] .mud-paper { background-color: var(--bp-surface) !important; color: var(--bp-text) !important; } [data-theme="dark"] .mud-card-header-title .mud-typography, [data-theme="dark"] .mud-card-content .mud-typography, [data-theme="dark"] .mud-typography { color: var(--bp-text) !important; } [data-theme="dark"] .mud-table-container, [data-theme="dark"] .mud-table { background-color: var(--bp-surface) !important; color: var(--bp-text) !important; } [data-theme="dark"] .mud-table-head .mud-table-cell { background-color: var(--bp-surface-2) !important; color: var(--bp-text-muted) !important; border-bottom: 1px solid var(--bp-border) !important; } [data-theme="dark"] .mud-table-body .mud-table-row:hover > .mud-table-cell { background-color: var(--bp-surface-2) !important; } [data-theme="dark"] .mud-table-cell { border-bottom: 1px solid var(--bp-border-soft) !important; } [data-theme="dark"] .mud-input-control, [data-theme="dark"] .mud-input, [data-theme="dark"] .mud-input-outlined-border { color: var(--bp-text) !important; border-color: var(--bp-border) !important; } [data-theme="dark"] .mud-input-label { color: var(--bp-text-muted) !important; } [data-theme="dark"] .mud-chip { background-color: var(--bp-surface-2) !important; color: var(--bp-text) !important; border-color: var(--bp-border) !important; } [data-theme="dark"] .mud-chip.mud-chip-color-primary { background-color: rgba(239, 83, 80, 0.18) !important; color: #EF5350 !important; } [data-theme="dark"] .mud-list-item { color: var(--bp-text) !important; } [data-theme="dark"] .mud-list-item:hover { background-color: var(--bp-surface-2) !important; } [data-theme="dark"] .mud-divider { border-color: var(--bp-border) !important; } [data-theme="dark"] .mud-tooltip-root { background-color: var(--bp-surface-3) !important; color: var(--bp-text) !important; } [data-theme="dark"] .mud-expansion-panel { background-color: var(--bp-surface) !important; color: var(--bp-text) !important; border: 1px solid var(--bp-border) !important; } [data-theme="dark"] .mud-expand-panel-header { background-color: var(--bp-surface-2) !important; color: var(--bp-text) !important; } [data-theme="dark"] .mud-select-input, [data-theme="dark"] .mud-popover-paper { background-color: var(--bp-surface) !important; color: var(--bp-text) !important; border: 1px solid var(--bp-border) !important; } [data-theme="dark"] .mud-autocomplete-popover .mud-list-item { background-color: var(--bp-surface) !important; } [data-theme="dark"] .mud-breadcrumbs .mud-breadcrumb-item { color: var(--bp-text-muted) !important; } [data-theme="dark"] .mud-breadcrumbs .mud-breadcrumb-item.mud-breadcrumb-item-active { color: var(--bp-text) !important; } /* ── MudInput / MudSelect — remove rogue underline in dark ──── */ /* Standard variant bottom-line */ [data-theme="dark"] .mud-input:not(.mud-input-outlined)::before { border-bottom-color: var(--bp-border) !important; } [data-theme="dark"] .mud-input:not(.mud-input-outlined):hover::before { border-bottom-color: var(--bp-text-muted) !important; } [data-theme="dark"] .mud-input:not(.mud-input-outlined)::after { border-bottom-color: var(--bp-topbar-accent) !important; } /* Outlined variant border */ [data-theme="dark"] .mud-input-outlined-border { border-color: var(--bp-border) !important; } [data-theme="dark"] .mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--bp-text-muted) !important; } [data-theme="dark"] .mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color: var(--bp-topbar-accent) !important; } /* Dropdown arrow area separator line — remove */ [data-theme="dark"] .mud-input-adornment-end::before { display: none !important; } /* Select input text and arrow colour */ [data-theme="dark"] .mud-select .mud-input-root, [data-theme="dark"] .mud-select-input { color: var(--bp-text) !important; } [data-theme="dark"] .mud-select .mud-input-adornment svg, [data-theme="dark"] .mud-select .mud-select-input-adornment svg { fill: var(--bp-text-muted) !important; } /* Input label */ [data-theme="dark"] .mud-input-label { color: var(--bp-text-muted) !important; } [data-theme="dark"] .mud-input-label.mud-input-label-animated.mud-input-label-inputcontrol { color: var(--bp-text-muted) !important; } [data-theme="dark"] .mud-input-focused .mud-input-label, [data-theme="dark"] .mud-input-label.mud-shrink { color: var(--bp-topbar-accent) !important; } /* Popover / dropdown list */ [data-theme="dark"] .mud-popover-paper { background-color: var(--bp-surface) !important; border: 1px solid var(--bp-border) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.45) !important; } [data-theme="dark"] .mud-list-item-text, [data-theme="dark"] .mud-list-item-text .mud-typography { color: var(--bp-text) !important; } [data-theme="dark"] .mud-selected-item { background-color: rgba(255,138,101,0.15) !important; color: var(--bp-topbar-accent) !important; } /* ── MudIconButton — transparent, no rectangle ───────────────── */ /* MudBlazor icon buttons: always transparent background */ button.mud-icon-button, button.mud-button-root.mud-icon-button { background-color: transparent !important; border: none !important; box-shadow: none !important; } /* Hover: subtle circular ripple — no square box */ button.mud-icon-button:hover, button.mud-button-root.mud-icon-button:hover { background-color: rgba(0, 0, 0, 0.06) !important; border-radius: 50% !important; } [data-theme="dark"] button.mud-icon-button:hover, [data-theme="dark"] button.mud-button-root.mud-icon-button:hover { background-color: rgba(255, 255, 255, 0.09) !important; border-radius: 50% !important; } /* MudTooltip wrapper — zero footprint, keep clicks working */ .mud-tooltip-root { display: inline-flex !important; background: transparent !important; border: none !important; padding: 0 !important; /* NO pointer-events override — keep default auto */ } /* ── LogViewer FAB — clean up ────────────────────────────────── */ .lv-fab { box-shadow: 0 2px 10px rgba(0,0,0,0.35) !important; } /* ── Mud Alert dark ──────────────────────────────────────────── */ [data-theme="dark"] .mud-alert { background-color: var(--bp-surface-2) !important; border-color: var(--bp-border) !important; color: var(--bp-text) !important; } /* ── Mud Toolbar dark ────────────────────────────────────────── */ [data-theme="dark"] .mud-toolbar { background-color: var(--bp-surface) !important; color: var(--bp-text) !important; } /* ================================================================ App Footer bar - solo nell'area content, colori brand arancione ================================================================ */ .app-footer { position: fixed; bottom: 0; left: 0; right: 0; height: 28px; background: #BF360C; color: rgba(255, 255, 255, 0.90); display: flex; align-items: center; padding: 0 12px; font-size: 0.72rem; z-index: 1300; gap: 6px; border-top: 1px solid rgba(0, 0, 0, 0.15); } /* Su desktop: offset del sidebar (250px) */ @media (min-width: 641px) { .app-footer { left: 250px; } } .app-footer-version { display: flex; align-items: center; gap: 4px; cursor: pointer; padding: 2px 8px; border-radius: 4px; transition: background 0.15s; user-select: none; white-space: nowrap; color: rgba(255, 255, 255, 0.90); text-decoration: none; } .app-footer-version:hover { background: rgba(0, 0, 0, 0.15); color: #fff; } .app-footer-update-dot { width: 8px; height: 8px; border-radius: 50%; background: #FFE082; display: inline-block; flex-shrink: 0; box-shadow: 0 0 6px #FFE082; animation: bp-pulse-dot 1.5s ease-in-out infinite; } @keyframes bp-pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.35); } } /* Spazio al fondo del main per non coprire il contenuto */ article.content { padding-bottom: 36px !important; } /* Drawer note di rilascio */ .release-notes-drawer .mud-drawer-content { border-radius: 16px 16px 0 0; overflow: hidden; } .release-notes-drawer-header { display: flex; align-items: center; padding: 12px 16px 8px; border-bottom: 1px solid var(--mud-palette-divider); gap: 8px; } .release-notes-body { overflow-y: auto; max-height: 300px; padding: 4px 0; } .release-notes-loading { display: flex; justify-content: center; padding: 24px; } .release-note-item { padding: 10px 16px; border-bottom: 1px solid var(--mud-palette-divider); } .release-note-item:last-child { border-bottom: none; } .release-note-item.release-note-current { background: rgba(99, 179, 237, 0.08); } .release-note-header { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; } .release-note-message { color: var(--mud-palette-text-secondary); line-height: 1.4; font-size: 0.85rem; } .release-notes-footer-update { padding: 8px 16px 12px; border-top: 1px solid var(--mud-palette-divider); } /* ============================================= Update popup — notifica di aggiornamento ============================================= */ .update-popup { position: fixed; bottom: 36px; /* sopra la footer bar (28px) + 8px gap */ right: 16px; z-index: 1400; display: flex; align-items: center; gap: 10px; background: #BF360C; color: #fff; border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,0.32); padding: 10px 12px; min-width: 220px; max-width: 300px; animation: popup-slide-in 0.28s cubic-bezier(0.22,1,0.36,1); } @keyframes popup-slide-in { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .update-popup-btn { flex-shrink: 0; background: #fff; color: #BF360C; border: none; border-radius: 6px; padding: 4px 12px; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s; } .update-popup-btn:hover { background: #ffd6cc; color: #8c1a00; } .update-popup-close { flex-shrink: 0; background: none; border: none; color: rgba(255,255,255,0.75); font-size: 1rem; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 4px; transition: color 0.15s, background 0.15s; } .update-popup-close:hover { color: #fff; background: rgba(255,255,255,0.18); } /* ============================================= Focus mode — nasconde sidebar e topbar ============================================= */ body.bp-focus-mode .sidebar, body.bp-focus-mode .app-topbar { display: none !important; } body.bp-focus-mode main { padding-left: 0 !important; margin-left: 0 !important; } body.bp-focus-mode article.content { max-width: 1200px; margin: 0 auto; padding-top: 24px; } /* Pulsante flottante per uscire dalla focus mode */ #bp-focus-exit-fab { position: fixed; top: 12px; right: 12px; z-index: 9999; display: flex; align-items: center; background: rgba(230,74,25,0.92); border: none; border-radius: 20px; color: white; padding: 6px 14px 6px 10px; font-size: 0.78rem; font-weight: 700; cursor: pointer; letter-spacing: .02em; box-shadow: 0 2px 14px rgba(0,0,0,.35); backdrop-filter: blur(6px); transition: background .15s, transform .15s, box-shadow .15s; gap: 2px; } #bp-focus-exit-fab:hover { background: rgba(191,54,12,.98); transform: scale(1.05); box-shadow: 0 4px 18px rgba(0,0,0,.4); } #bp-focus-exit-fab:active { transform: scale(.97); } /* Fullscreen styles for the solar system card */ .ss-svg-card:fullscreen, .ss-svg-card:-webkit-full-screen { background: #000; display: flex; flex-direction: column; padding: 0; border-radius: 0; overflow: hidden; width: 100vw !important; height: 100vh !important; } /* 3D mode fullscreen: override aspect-ratio so the wrap can fill the screen */ .ss-svg-card:fullscreen .ss-3d-wrap, .ss-svg-card:-webkit-full-screen .ss-3d-wrap { flex: 1 1 auto; min-height: 0; height: auto !important; aspect-ratio: unset !important; } .ss-svg-card:fullscreen .ss-3d-canvas, .ss-svg-card:-webkit-full-screen .ss-3d-canvas { width: 100% !important; height: 100% !important; } /* 2D mode fullscreen: expand the perspective wrapper */ .ss-svg-card:fullscreen .ss-perspective-wrap, .ss-svg-card:-webkit-full-screen .ss-perspective-wrap { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; } .ss-svg-card:fullscreen .ss-zoom-viewport, .ss-svg-card:-webkit-full-screen .ss-zoom-viewport { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .ss-svg-card:fullscreen .ss-svg, .ss-svg-card:-webkit-full-screen .ss-svg { max-height: none !important; width: 100% !important; height: auto !important; } /* Cloudflare/static hosting fallback. Keep the app shell readable even if a browser still has an older scoped CSS file. */ .page { position: relative; display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; min-width: 0; background-color: var(--bp-bg, #F4F6F8); } .sidebar { background-image: var(--bp-sidebar-bg); transition: background .25s ease; color: #fff; } .top-row { position: relative; min-height: 52px; background-color: var(--bp-sidebar-top-bg, rgba(0,0,0,0.22)); padding-right: 3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; } .top-row .container-fluid { display: flex; justify-content: space-between; align-items: center; height: 52px; } .navbar-brand { display: flex; align-items: center; gap: 9px; text-decoration: none !important; color: rgba(255, 255, 255, 0.95) !important; } .brand-logo { width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.35); } .brand-name { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.2px; color: rgba(255, 255, 255, 0.95); } .navbar-toggler { appearance: none; cursor: pointer; width: 2.5rem; height: 2.5rem; color: white; position: absolute; top: 0.5rem; right: 0.5rem; border: none; z-index: 1001; } .nav-scrollable { display: none; } .navbar-toggler:checked ~ .nav-scrollable { display: block; } .nav-scrollable .mud-nav-menu { background-color: transparent !important; padding: 6px 0 16px !important; } .app-topbar { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; height: 48px; min-height: 48px; background: var(--bp-topbar-bg); border-bottom: 1px solid var(--bp-topbar-border); padding: 0 1.25rem 0 1.5rem; box-shadow: var(--bp-topbar-shadow); color: var(--bp-text); } @media (min-width: 641px) { .page { flex-direction: row; } main { display: flex; flex-direction: column; overflow-x: clip; } .sidebar { width: 250px; height: 100vh; position: sticky; top: 0; border-right: 1px solid var(--bp-sidebar-border); display: flex; flex-direction: column; flex-shrink: 0; } .navbar-toggler { display: none; } .nav-scrollable { display: block; height: calc(100vh - 52px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; } .nav-scrollable::-webkit-scrollbar { width: 4px; } .nav-scrollable::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; } }