/* ============================================================================
skydash — shared design system for the airport / incidents / etc dashboards.
Originally inlined in AirportDashboardPage.razor; extracted so any page that
adds class="skydash" to its root inherits the same look. Light + dark theme
driven by --vars; the dark variant kicks in via .dark on (existing
site theme toggle).
============================================================================ */
.skydash {
/* === LIGHT THEME (default) === */
--bg: #f6f7fb;
--bg-2: #eef0f7;
--card: #ffffff;
--line: #eaecf3;
--line-strong: #d6dae4;
--ink: #1e2330;
--ink-2: #4b5366;
--ink-3: #8a93a6;
--ink-faint: #b3bac8;
--sky: #3b82f6;
--sky-soft: #e8f0fe;
--sky-soft-border: #cfe0fc;
--sky-soft-label: #1d4ed8;
--sky-soft-text: #1e3a8a;
--violet: #8b5cf6;
--violet-soft: #f1ebfe;
--violet-soft-border: #e0d4fc;
--violet-soft-label: #6d28d9;
--violet-soft-text: #4c1d95;
--emerald: #10b981;
--emerald-soft: #d6f5e8;
--emerald-soft-border: #bbeed4;
--emerald-soft-label: #047857;
--emerald-soft-text: #064e3b;
--amber: #f59e0b;
--amber-soft: #fdf0d6;
--amber-soft-border: #fde7b9;
--amber-soft-label: #b45309;
--amber-soft-text: #78350f;
--rose: #f43f5e;
--rose-soft: #fde2e7;
--rose-soft-border: #fcd0d7;
--rose-soft-label: #be123c;
--rose-soft-text: #881337;
--cyan: #06b6d4;
--cyan-soft: #d4f3f9;
--cyan-soft-border: #b6e7f0;
--cyan-soft-label: #0e7490;
--cyan-soft-text: #164e63;
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
font-feature-settings: "ss01", "ss02", "cv11";
background: var(--bg);
color: var(--ink);
min-height: 100vh;
}
/* === DARK THEME — triggered by the .dark class on the root element (existing site theme toggle) === */
.dark .skydash {
--bg: #0e1014;
--bg-2: #181b25;
--card: #161922;
--line: #252937;
--line-strong: #353a4d;
--ink: #ebecf0;
--ink-2: #a8acbc;
--ink-3: #6e7385;
--ink-faint: #494c5d;
/* Soft tile fills become tinted overlays — accent colors stay the same,
text colors invert (deep → light). */
--sky-soft: rgba(59, 130, 246, 0.14);
--sky-soft-border: rgba(59, 130, 246, 0.32);
--sky-soft-label: #93c5fd;
--sky-soft-text: #bfdbfe;
--violet-soft: rgba(139, 92, 246, 0.14);
--violet-soft-border: rgba(139, 92, 246, 0.32);
--violet-soft-label: #c4b5fd;
--violet-soft-text: #ddd6fe;
--emerald-soft: rgba(16, 185, 129, 0.14);
--emerald-soft-border: rgba(16, 185, 129, 0.32);
--emerald-soft-label: #6ee7b7;
--emerald-soft-text: #a7f3d0;
--amber-soft: rgba(245, 158, 11, 0.14);
--amber-soft-border: rgba(245, 158, 11, 0.32);
--amber-soft-label: #fcd34d;
--amber-soft-text: #fde68a;
--rose-soft: rgba(244, 63, 94, 0.14);
--rose-soft-border: rgba(244, 63, 94, 0.32);
--rose-soft-label: #fda4af;
--rose-soft-text: #fecdd3;
--cyan-soft: rgba(6, 182, 212, 0.14);
--cyan-soft-border: rgba(6, 182, 212, 0.32);
--cyan-soft-label: #67e8f9;
--cyan-soft-text: #a5f3fc;
}
/* The premium overlay-glass fades to the page bg — needs a dark variant */
.dark .skydash .overlay-glass {
background: linear-gradient(180deg, rgba(14,16,20,0) 0%, rgba(14,16,20,0.92) 60%, rgba(14,16,20,0.98) 100%);
}
/* Dropdown panels need to POP off the page in dark mode — they often
float over the satellite map hero where var(--card) bleeds into the
imagery. Bump the background well above the page bg, add a backdrop
blur for frosted-glass separation, brighten the border, and stack
a deep shadow + faint inner highlight. */
.dark .skydash .dd-panel {
background: rgba(38, 43, 60, 0.96);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border-color: rgba(255, 255, 255, 0.18);
box-shadow:
0 28px 64px -16px rgba(0, 0, 0, 0.85),
0 10px 24px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.dark .skydash .dd-item:hover { background: rgba(255, 255, 255, 0.06); }
/* Click-outside-to-close overlay. Rendered ONLY when a dropdown is open.
Transparent, fills the viewport, sits below the dropdowns (z-30) but
above everything else. Catches clicks anywhere outside the panel and
fires CloseAllDropdowns. */
.skydash .dd-overlay {
position: fixed;
inset: 0;
z-index: 30;
background: transparent;
}
/* Pills floating on top of the satellite map — need a frosted-glass treatment
that's readable in both light and dark mode against arbitrary imagery. */
.skydash .map-pill {
background: rgba(255, 255, 255, 0.92);
color: #1e2330;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.4);
}
.dark .skydash .map-pill {
background: rgba(15, 17, 23, 0.78);
color: #ebecf0;
border: 1px solid rgba(255, 255, 255, 0.12);
}
.skydash .mono { font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace; font-feature-settings: "tnum"; }
.skydash .tnum { font-variant-numeric: tabular-nums; }
/* Soft layered card */
.skydash .card {
background: var(--card);
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 12px 32px -16px rgba(15,23,42,0.10);
}
.skydash .card-flat {
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
}
/* Stat card with colored glow */
.skydash .stat {
background: var(--card);
border: 1px solid var(--line);
border-radius: 18px;
padding: 22px 22px 20px;
position: relative;
overflow: hidden;
box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 12px 32px -16px rgba(15,23,42,0.10);
transition: transform 0.18s, box-shadow 0.18s;
}
.skydash .stat::after {
content: "";
position: absolute;
right: -40px; top: -40px;
width: 130px; height: 130px;
border-radius: 50%;
opacity: 0.12;
background: var(--accent, var(--sky));
filter: blur(8px);
pointer-events: none;
}
.skydash .stat:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(15,23,42,0.05), 0 22px 48px -22px rgba(15,23,42,0.18); }
.skydash .stat .icon-tile {
width: 46px; height: 46px;
border-radius: 14px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--accent-soft, var(--sky-soft));
color: var(--accent, var(--sky));
}
.skydash .stat .label { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-top: 14px; }
.skydash .stat .value { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-top: 4px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.skydash .stat .delta { font-size: 12px; font-weight: 600; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; }
.skydash .stat .delta.up { color: var(--emerald); }
.skydash .stat .delta.down { color: var(--rose); }
/* Section headings */
.skydash h2.section { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.skydash p.subsection { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
/* Promo banner */
.skydash .promo {
background: linear-gradient(110deg, #1e2330 0%, #2a2e44 60%, #3b3458 100%);
color: #fff;
border-radius: 20px;
padding: 22px 26px;
position: relative;
overflow: hidden;
box-shadow: 0 12px 36px -16px rgba(60,30,120,0.4);
}
.skydash .promo::after {
content: "";
position: absolute;
right: -60px; top: -60px;
width: 240px; height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(139,92,246,0.6) 0%, transparent 65%);
pointer-events: none;
}
/* Pill */
.skydash .pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
background: var(--bg-2);
color: var(--ink-2);
}
.skydash .pill-emerald { background: var(--emerald-soft); color: var(--emerald-soft-label); }
.skydash .pill-amber { background: var(--amber-soft); color: var(--amber-soft-label); }
.skydash .pill-rose { background: var(--rose-soft); color: var(--rose-soft-label); }
.skydash .pill-violet { background: var(--violet-soft); color: var(--violet-soft-label); }
.skydash .pill-sky { background: var(--sky-soft); color: var(--sky-soft-label); }
.skydash .pill-cyan { background: var(--cyan-soft); color: var(--cyan-soft-label); }
.skydash .row-hover:hover { background: var(--bg); }
/* Filter button */
.skydash .filter-btn {
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
padding: 10px 14px;
font-size: 13px;
font-weight: 500;
color: var(--ink);
display: inline-flex; align-items: center; gap: 8px;
transition: border-color 0.15s, box-shadow 0.15s;
cursor: pointer;
}
.skydash .filter-btn:hover { border-color: var(--ink-faint); box-shadow: 0 2px 8px rgba(15,23,42,0.06); }
.skydash .filter-btn .filter-label { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.skydash .filter-btn.is-active { border-color: var(--sky); color: var(--sky); background: var(--sky-soft); }
.skydash .filter-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
/* Type-checkbox chip — multi-select pill row used by the incidents page */
.skydash .chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: 999px;
background: var(--bg-2);
border: 1px solid transparent;
color: var(--ink-2);
font-size: 12px;
font-weight: 600;
cursor: pointer;
user-select: none;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.skydash .chip:hover { background: var(--bg); border-color: var(--line-strong); }
.skydash .chip.is-on {
background: var(--accent-soft, var(--sky-soft));
color: var(--accent, var(--sky));
border-color: var(--accent, var(--sky));
}
.skydash .chip .glyph { font-weight: 900; }
.skydash .chip[disabled] { opacity: 0.55; cursor: not-allowed; }
.skydash .dd-panel {
background: var(--card);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 24px 56px -20px rgba(15,23,42,0.22), 0 4px 12px rgba(15,23,42,0.05);
}
/* Mobile: the airport filter bar is `grid grid-cols-3` so each .afb-dd
parent is ~107px wide on a 360px viewport. The dropdown menus inside use
`absolute right-0 w-60` (240px wide, anchored to the parent's right
edge) — which pushes the LEFT-MOST two dropdowns 130+px off-screen to
the left. To the user it looked like "dropdowns don't work on mobile"
(the JS toggle was actually firing, but you couldn't see or tap the
menu). The third menu fit because its parent's right edge was already
at the viewport's right edge.
Fix: viewport-anchored positioning on small screens. Position:fixed
with !important so the Tailwind utility classes (absolute, right-0,
w-60) on the menu element are overridden. z-index 100 sits above the
afb-dd parents' z-50 so the menu can't be covered by an adjacent
filter chrome. Reported 2026-06-01. */
@media (max-width: 639px) {
.skydash .dd-panel.afb-menu {
position: fixed !important;
left: 1rem !important;
right: 1rem !important;
width: auto !important;
max-width: none !important;
max-height: 70vh;
overflow-y: auto;
z-index: 100 !important;
}
}
.skydash .dd-item {
font-size: 13px;
font-weight: 500;
color: var(--ink);
padding: 11px 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.skydash .dd-item:first-child { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.skydash .dd-item:last-child { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
.skydash .dd-item:hover { background: var(--bg); }
.skydash .dd-item.is-premium .pill { background: var(--amber-soft); color: #b45309; }
.skydash hr.hair { border: 0; border-top: 1px solid var(--line); margin: 0; }
/* Donut chart wrapper */
.skydash .donut-legend-dot {
width: 10px; height: 10px;
border-radius: 50%;
display: inline-block;
}
/* Bar chart bar */
.skydash .bar {
height: 10px;
border-radius: 999px;
background: var(--line);
overflow: hidden;
}
.skydash .bar > span {
display: block;
height: 100%;
background: var(--accent, var(--sky));
border-radius: 999px;
transition: width 0.8s cubic-bezier(.2,.8,.2,1);
}
/* Hourly delays SVG chart polish */
.skydash .delay-chart-cell {
transition: opacity 0.2s;
}
.skydash .delay-chart-cell:hover { opacity: 0.78; }
/* Animated stagger-in */
.skydash .stagger > * {
opacity: 0;
transform: translateY(8px);
animation: stagger-in 0.55s cubic-bezier(.2,.8,.2,1) forwards;
}
.skydash .stagger > *:nth-child(1) { animation-delay: 0.04s; }
.skydash .stagger > *:nth-child(2) { animation-delay: 0.10s; }
.skydash .stagger > *:nth-child(3) { animation-delay: 0.16s; }
.skydash .stagger > *:nth-child(4) { animation-delay: 0.22s; }
.skydash .stagger > *:nth-child(5) { animation-delay: 0.28s; }
.skydash .stagger > *:nth-child(6) { animation-delay: 0.34s; }
@keyframes stagger-in { to { opacity: 1; transform: none; } }
/* Loading spinner */
.skydash .spinner {
width: 38px; height: 38px;
border-radius: 50%;
border: 3px solid var(--line);
border-top-color: var(--sky);
animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* METAR readout */
.skydash .metar-block {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 12px;
padding: 12px 14px;
color: var(--ink-2);
line-height: 1.55;
}
/* Premium soft overlay */
.skydash .overlay-glass {
backdrop-filter: blur(2px);
background: linear-gradient(180deg, rgba(246,247,251,0) 0%, rgba(246,247,251,0.92) 60%, rgba(246,247,251,0.98) 100%);
}
.skydash a.link { color: var(--sky); }
.skydash a.link:hover { text-decoration: underline; }
/* checkbox accent */
.skydash input[type="checkbox"] { accent-color: #3b82f6; }
.skydash input[type="date"] { color-scheme: light; }
/* === Airline logo tile — image w/ letter fallback underneath ===
Render as: CODE
The 2-letter code is shown by default. The img is positioned on top
and covers it; if the img 404s the onerror hides it and the letters
remain visible. */
.skydash .al-logo {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--bg-2);
border: 1px solid var(--line);
overflow: hidden;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.02em;
color: var(--ink-2);
}
.skydash .al-logo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
background: #fff;
padding: 3px;
}
.skydash .al-logo-sm { width: 26px; height: 26px; border-radius: 6px; font-size: 8px; }
.skydash .al-logo-md { width: 36px; height: 36px; border-radius: 9px; font-size: 10px; }
.skydash .al-logo-lg { width: 44px; height: 44px; border-radius: 11px; font-size: 11px; }
/* Flight-card row — used by Recent Incidents to mirror /search/results visual.
Plain block w/ rounded border + hover lift; click anywhere navigates. */
.skydash .flight-row {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
text-decoration: none;
color: inherit;
cursor: pointer;
flex-wrap: nowrap;
overflow-x: auto;
}
.skydash .flight-row:hover {
border-color: var(--ink-faint);
box-shadow: 0 2px 8px rgba(15,23,42,0.06);
transform: translateY(-1px);
}
.skydash .flight-row.has-incident { border-color: var(--rose-soft-border); }
/* Card-link pattern for the incident rows: every inside a flight-row
sits above the absolutely-positioned overlay anchor (which is .flight-row's
:first-child ). Without this, clicks on inline links fall through to
the overlay and always navigate to the incident detail page. */
.skydash .flight-row > a:not(:first-child),
.skydash .flight-row .col-flight a,
.skydash .flight-row .col-route a,
.skydash .flight-row .col-actions a { position: relative; z-index: 1; }
.skydash .flight-row .col-flight { min-width: 180px; flex-shrink: 0; }
.skydash .flight-row .col-route { min-width: 220px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.skydash .flight-row .col-time { min-width: 110px; flex-shrink: 0; }
.skydash .flight-row .col-event { min-width: 180px; flex: 1; }
.skydash .flight-row .col-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.skydash .btn-primary {
padding: 7px 12px;
background: var(--sky);
color: #fff;
font-size: 12px;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background 0.15s;
}
.skydash .btn-primary:hover { background: #2563eb; }
.skydash .btn-secondary {
padding: 7px 12px;
background: var(--bg-2);
color: var(--ink-2);
font-size: 12px;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background 0.15s;
}
.skydash .btn-secondary:hover { background: var(--bg); color: var(--ink); }
/* Pagination bar */
.skydash .pager {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-top: 1px solid var(--line);
}
.skydash .pager .page-info { font-size: 12px; color: var(--ink-3); }
.skydash .pager-btn {
padding: 7px 14px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 8px;
font-size: 12px;
font-weight: 600;
color: var(--ink-2);
cursor: pointer;
text-decoration: none;
}
.skydash .pager-btn:hover:not([disabled]) { border-color: var(--sky); color: var(--sky); }
.skydash .pager-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
/* Pro lock badge — used on disabled day-range buttons for free users */
.skydash .lock-badge {
display: inline-flex;
align-items: center;
gap: 3px;
margin-left: 6px;
padding: 1px 6px;
border-radius: 999px;
background: var(--violet-soft);
color: var(--violet-soft-label);
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ===== Great-circle route map markers ===== */
.rt-marker { position: relative; width: 24px; height: 24px; }
.rt-marker .rt-marker-pulse {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 24px; height: 24px;
border-radius: 50%;
}
.rt-marker .rt-marker-dot {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 12px; height: 12px;
border-radius: 50%;
border: 2px solid #fff;
}
.rt-marker-origin .rt-marker-pulse {
background: radial-gradient(circle, #00ff00 0%, #00ff00 40%, transparent 70%);
animation: rt-origin-pulse 2s ease-in-out infinite;
}
.rt-marker-origin .rt-marker-dot {
background: #00ff00;
box-shadow: 0 0 20px #00ff00, 0 0 40px #00ff00, 0 0 60px rgba(0, 255, 0, 0.5);
}
.rt-marker-dest .rt-marker-pulse {
background: radial-gradient(circle, #ff0000 0%, #ff0000 40%, transparent 70%);
animation: rt-dest-pulse 2s ease-in-out infinite;
}
.rt-marker-dest .rt-marker-dot {
background: #ff0000;
box-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px rgba(255, 0, 0, 0.5);
}
@keyframes rt-origin-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
50% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}
@keyframes rt-dest-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
50% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}
/* Tiny destination dots for the spider-web globe — too many full pulsing
markers turn into visual noise, so spiders use a static dot instead. */
.rt-marker-dest-small { position: relative; width: 10px; height: 10px; }
.rt-marker-dest-small .rt-marker-dot-small {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 8px; height: 8px;
border-radius: 50%;
background: #00d4ff;
border: 1px solid #fff;
box-shadow: 0 0 6px #00d4ff;
}
/* ─── Incidents sidebar filters ───────────────────────────────────────
Kayak/SeatGuru-style facet panel. Stacks vertically in a left
sidebar; on mobile collapses above the main content.
*/
.incidents-sidebar {
--facet-row-pad-y: 6px;
--facet-row-pad-x: 8px;
}
.filter-section-heading {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-3);
margin-bottom: 6px;
}
.facet-row {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: var(--facet-row-pad-y) var(--facet-row-pad-x);
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
text-align: left;
font-size: 13px;
color: var(--ink-2);
transition: background 120ms ease;
}
.facet-row:hover { background: var(--bg-2); }
.facet-row.is-active {
background: var(--bg-2);
color: var(--ink);
font-weight: 600;
}
.facet-row.is-disabled { opacity: 0.45; cursor: not-allowed; }
.facet-row.is-locked .facet-label { color: var(--ink-3); }
.facet-dot {
width: 14px; height: 14px; border-radius: 50%;
border: 2px solid var(--line);
background: transparent;
flex-shrink: 0;
}
.facet-dot.is-on {
border-color: var(--sky);
background: radial-gradient(circle, var(--sky) 0%, var(--sky) 40%, transparent 50%);
}
.facet-checkbox {
width: 15px; height: 15px;
border-radius: 4px;
border: 1.5px solid var(--line);
background: var(--card);
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: background 120ms, border-color 120ms;
}
.facet-checkbox.is-checked {
background: var(--accent, var(--sky));
border-color: var(--accent, var(--sky));
}
.facet-glyph {
font-weight: 700;
font-size: 13px;
width: 14px;
text-align: center;
flex-shrink: 0;
}
.facet-label { flex: 1; min-width: 0; }
.facet-count {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.facet-row.is-active .facet-count { color: var(--ink-2); font-weight: 700; }
.facet-lock, .facet-soon {
font-size: 9px;
font-weight: 800;
padding: 1px 5px;
border-radius: 4px;
letter-spacing: 0.04em;
background: var(--violet-soft);
color: var(--violet);
}
.facet-input {
width: 100%;
padding: 7px 10px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 8px;
font-size: 13px;
color: var(--ink);
font-family: 'JetBrains Mono', monospace;
}
.facet-input:focus { outline: none; border-color: var(--sky); }
.facet-hint {
font-size: 10px;
color: var(--ink-faint);
margin-top: 4px;
}
.upgrade-link {
display: block;
padding: 10px;
background: var(--violet-soft);
color: var(--violet);
border-radius: 8px;
font-size: 12px;
font-weight: 600;
text-align: center;
text-decoration: none;
border: 1px solid var(--violet);
transition: opacity 120ms;
}
.upgrade-link:hover { opacity: 0.85; }
/* ─── Filter-click loading overlay ────────────────────────────────────
Tiny in-flight indicator covering only the .incidents-main column.
JS in IncidentsSidebarFilters.razor adds `.is-loading` on any
[data-filter-click] click; the browser navigation then triggers
a fresh page render where the class isn't present.
*/
.incidents-main {
position: relative;
min-height: 200px;
}
.incidents-main.is-loading::before {
content: "";
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(1px);
z-index: 50;
border-radius: 12px;
animation: incidents-loading-fade-in 150ms ease-out;
}
.incidents-main.is-loading::after {
content: "";
position: absolute;
top: 30%;
left: 50%;
width: 40px; height: 40px;
margin-left: -20px;
border: 3px solid var(--line);
border-top-color: var(--sky);
border-radius: 50%;
z-index: 51;
animation: incidents-loading-spin 700ms linear infinite;
}
@keyframes incidents-loading-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes incidents-loading-spin {
to { transform: rotate(360deg); }
}
@media (prefers-color-scheme: dark) {
.incidents-main.is-loading::before {
background: rgba(20, 20, 28, 0.65);
}
}