Tone "auto" follows the page palette (dark over the map, light elsewhere).
--glass-tint can be set inline to colour-shift the surface (success/warning).
Includes a subtle SVG noise overlay at very low opacity to prevent banding
on heavily blurred backgrounds — purely visual, no DOM cost beyond a single
::before. */
.glass-surface {
position: relative;
background: var(--glass-bg);
border: var(--glass-border);
border-radius: var(--r-md);
box-shadow: var(--shadow-glass);
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
color: var(--text-on-glass);
overflow: hidden;
isolation: isolate;
}
.glass-surface::before {
/* tinted wash — pulled from --glass-tint set per-instance for
success/warning/info coloration. */
content: "";
position: absolute;
inset: 0;
background: var(--glass-tint);
pointer-events: none;
z-index: 0;
border-radius: inherit;
}
.glass-surface::after {
/* fine grain to suppress posterised banding on broad blurred areas */
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,
");
background-size: 160px 160px;
mix-blend-mode: overlay;
opacity: var(--glass-noise-opacity);
pointer-events: none;
z-index: 1;
border-radius: inherit;
}
.glass-surface > * { position: relative; z-index: 2; }
/* Variants: pre-set padding + radius for the four common roles */
.glass-surface[data-variant="hud"] {
border-radius: var(--r-pill);
padding: 8px 14px;
box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.glass-surface[data-variant="panel"] {
border-radius: var(--r-lg);
padding: 14px;
box-shadow: var(--lg-shadow-hud);
}
.glass-surface[data-variant="card"] {
border-radius: var(--r-lg);
padding: 20px;
}
.glass-surface[data-variant="modal"] {
border-radius: var(--r-lg);
padding: 24px;
box-shadow:
0 32px 64px rgba(15, 23, 42, 0.32),
0 8px 24px rgba(15, 23, 42, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
/* Tone — light tone over bright surfaces (e.g. admin pages) keeps body text dark */
.glass-surface[data-tone="light"] {
--glass-bg: var(--surface-glass-light);
--glass-border: var(--lg-light-border);
color: var(--text-primary);
box-shadow: var(--lg-light-shadow);
}
.glass-surface[data-tone="light"][data-variant="card"] {
box-shadow: var(--lg-light-shadow-lifted);
}
/* Auto tone — adopts the dark/light variant via the page body class. Keeps
the tone choice with the layout decision instead of every template. */
body.map-page .glass-surface[data-tone="auto"],
body.touch-dashboard-page .glass-surface[data-tone="auto"] {
/* dark by default — handled by base styles */
}
body:not(.map-page):not(.touch-dashboard-page) .glass-surface[data-tone="auto"] {
--glass-bg: var(--surface-glass-light);
--glass-border: var(--lg-light-border);
color: var(--text-primary);
box-shadow: var(--lg-light-shadow);
}
/* Tints — combine with any variant for status colouring */
.glass-surface[data-tint="success"] { --glass-tint: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0.04)); }
.glass-surface[data-tint="warning"] { --glass-tint: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.04)); }
.glass-surface[data-tint="danger"] { --glass-tint: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.04)); }
.glass-surface[data-tint="info"] { --glass-tint: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(56, 189, 248, 0.04)); }
.glass-surface[data-tint="accent"] { --glass-tint: linear-gradient(135deg, rgba(99, 102, 241, 0.20), rgba(99, 102, 241, 0.04)); }
/* When the screen prefers reduced transparency, drop the noise/grain too */
@media (prefers-reduced-transparency: reduce) {
.glass-surface::after { display: none; }
}
/* --- Liquid Glass keyframes --- */
@keyframes lg-fade-up {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes lg-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes lg-scale-in {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
@keyframes lg-slide-in-down {
from { opacity: 0; transform: translateY(-8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lg-pop {
0% { transform: scale(0.92); opacity: 0; }
60% { transform: scale(1.02); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-delay: 0ms !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* --- Sidebar --- */
#sidebar {
width: 240px;
height: 100vh;
height: 100dvh;
min-height: 0;
max-height: 100vh;
max-height: 100dvh;
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-sidebar);
/* Deeper translucency: a slim opaque base, layered with shifting gradients */
background:
radial-gradient(120% 70% at -10% 0%, rgba(99, 132, 255, 0.22), transparent 55%),
radial-gradient(80% 50% at 110% 100%, rgba(168, 85, 247, 0.18), transparent 55%),
linear-gradient(180deg, rgba(11, 14, 24, 0.62) 0%, rgba(13, 16, 28, 0.5) 100%);
backdrop-filter: blur(36px) saturate(190%);
-webkit-backdrop-filter: blur(36px) saturate(190%);
border-right: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 0 36px rgba(8, 10, 22, 0.45),
inset -1px 0 0 rgba(255, 255, 255, 0.04),
inset 1px 0 0 rgba(255, 255, 255, 0.05);
overflow: hidden;
transition:
width var(--dur-base) var(--ease-spring),
box-shadow var(--dur-base) var(--ease-out-quart),
background var(--dur-base) var(--ease-out-quart);
}
/* Slow-shifting aurora overlay that gives the glass life */
#sidebar::before {
content: "";
position: absolute;
inset: -25%;
pointer-events: none;
z-index: 0;
background:
radial-gradient(circle at 20% 20%, rgba(56, 189, 248, 0.18), transparent 35%),
radial-gradient(circle at 80% 60%, rgba(168, 85, 247, 0.18), transparent 40%),
radial-gradient(circle at 30% 95%, rgba(34, 197, 94, 0.12), transparent 35%);
filter: blur(40px);
opacity: 0.85;
animation: lg-sidebar-aurora 22s ease-in-out infinite alternate;
}
/* Specular highlight along the top edge */
#sidebar::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 90px;
pointer-events: none;
z-index: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
}
#sidebar > * { position: relative; z-index: 1; }
@keyframes lg-sidebar-aurora {
0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.78; }
50% { transform: translate3d(8%, -4%, 0) rotate(8deg); opacity: 1; }
100% { transform: translate3d(-6%, 6%, 0) rotate(-6deg); opacity: 0.78; }
}
#main-content {
margin-left: 240px;
min-height: 100vh;
display: flex;
flex-direction: column;
transition:
margin-left var(--dur-base) var(--ease-spring),
opacity var(--dur-fast) var(--ease-out-quart),
transform var(--dur-base) var(--ease-spring);
}
.sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 12px 12px 16px;
min-width: 0;
flex: 0 0 auto;
}
.sidebar-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
-webkit-overflow-scrolling: touch;
padding-bottom: 12px;
}
.sidebar-section {
padding: 0 10px 10px;
}
.sidebar-brand {
display: flex;
align-items: center;
gap: 12px;
flex: 1 1 auto;
color: #fff;
text-decoration: none;
font-weight: 700;
font-size: 1.25rem;
letter-spacing: 0.05em;
min-width: 0;
overflow: hidden;
transition: color var(--dur-fast) var(--ease-out-quart);
}
.sidebar-brand:hover {
color: #cfe2ff;
}
.sidebar-brand:focus-visible {
outline: 2px solid rgba(191, 219, 254, 0.8);
outline-offset: 4px;
border-radius: 18px;
}
.sidebar-brand-chip {
position: relative;
width: 42px;
height: 42px;
flex: 0 0 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
font-size: 1.1rem;
transition:
transform var(--dur-base) var(--ease-spring),
background var(--dur-fast) var(--ease-out-quart),
border-color var(--dur-fast) var(--ease-out-quart),
box-shadow var(--dur-base) var(--ease-out-quart);
}
.sidebar-brand-chip::after {
content: "";
position: absolute;
inset: -5px;
border-radius: 18px;
border: 1px solid rgba(191, 219, 254, 0.28);
opacity: 0;
transform: scale(0.9);
transition:
opacity var(--dur-fast) var(--ease-out-quart),
transform var(--dur-base) var(--ease-spring);
}
.sidebar-brand:hover .sidebar-brand-chip,
.sidebar-brand:focus-visible .sidebar-brand-chip {
transform: translateY(-1px) scale(1.02);
background: rgba(255, 255, 255, 0.18);
border-color: rgba(191, 219, 254, 0.26);
}
.sidebar-brand:hover .sidebar-brand-chip::after,
.sidebar-brand:focus-visible .sidebar-brand-chip::after {
opacity: 1;
transform: scale(1);
}
.sidebar-brand-text {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
transition:
opacity var(--dur-fast) var(--ease-out-quart),
transform var(--dur-base) var(--ease-spring);
}
.sidebar-brand-name {
font-size: 1.02rem;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-brand-tag {
margin-top: 2px;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(191, 219, 254, 0.78);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-rail-handle {
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(241, 245, 249, 0.78);
transition:
background var(--dur-fast) var(--ease-out-quart),
color var(--dur-fast) var(--ease-out-quart),
border-color var(--dur-fast) var(--ease-out-quart),
box-shadow var(--dur-base) var(--ease-spring),
transform var(--dur-fast) var(--ease-spring);
}
/* Slim, borderless ghost toggle — only the icon, lights up on hover */
.sidebar-toggle {
width: 28px;
height: 28px;
flex: 0 0 28px;
padding: 0;
border-radius: 8px;
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
box-shadow: none;
color: rgba(226, 232, 240, 0.55);
transition:
background var(--dur-fast) var(--ease-out-quart),
color var(--dur-fast) var(--ease-out-quart),
transform var(--dur-fast) var(--ease-spring);
}
.sidebar-toggle-icon {
font-size: 0.95rem;
line-height: 1;
transition: transform var(--dur-base) var(--ease-spring);
}
.sidebar-toggle:hover .sidebar-toggle-icon { transform: translateX(-1px); }
.sidebar-toggle:active .sidebar-toggle-icon { transform: translateX(-2px) scale(0.94); }
/* Hide the "Collapse" / "Expand" text — the icon + tooltip carry meaning;
keep it readable for screen readers via the visually-hidden technique. */
.sidebar-toggle-label {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.sidebar-toggle:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.08);
}
.sidebar-rail-handle:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.12);
border-color: rgba(191, 219, 254, 0.28);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 4px 12px rgba(99, 132, 255, 0.22);
}
.sidebar-toggle:active {
transform: scale(0.92);
background: rgba(255, 255, 255, 0.12);
}
.sidebar-rail-handle:active {
transform: scale(0.94);
}
.sidebar-toggle:focus-visible {
outline: 2px solid rgba(96, 165, 250, 0.55);
outline-offset: 2px;
}
#sidebar .nav-link {
color: rgba(255, 255, 255, 0.7);
padding: 0.72rem 0.9rem;
display: flex;
align-items: center;
gap: 0.72rem;
font-size: 0.9rem;
border-left: 3px solid transparent;
border-radius: 16px;
margin: 3px 0;
transition: color var(--dur-fast) var(--ease-out-quart),
background var(--dur-fast) var(--ease-out-quart),
border-left-color var(--dur-base) var(--ease-spring),
padding-left var(--dur-fast) var(--ease-spring),
transform var(--dur-fast) var(--ease-spring);
}
#sidebar .nav-link:hover {
color: #fff;
background: rgba(255, 255, 255, 0.1);
border-left-color: rgba(255, 255, 255, 0.3);
padding-left: 1.1rem;
transform: translateX(2px);
}
#sidebar .nav-link.active {
color: #fff;
background: rgba(13, 110, 253, 0.16);
border-left-color: #0d6efd;
box-shadow: inset 4px 0 12px -8px rgba(13, 110, 253, 0.55);
}
#sidebar .nav-link i {
transition: transform var(--dur-base) var(--ease-spring);
}
#sidebar .nav-link:hover i {
transform: scale(1.08);
}
#sidebar .nav-link i {
width: 20px;
text-align: center;
}
.nav-label {
display: inline-block;
min-width: 0;
max-width: 180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition:
opacity var(--dur-fast) var(--ease-out-quart),
transform var(--dur-base) var(--ease-spring),
max-width var(--dur-base) var(--ease-spring);
}
.sidebar-section-title {
padding: 0.7rem 0.9rem 0.35rem;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.4);
overflow: hidden;
max-height: 28px;
transition:
opacity var(--dur-fast) var(--ease-out-quart),
transform var(--dur-base) var(--ease-spring),
max-height var(--dur-base) var(--ease-spring),
padding var(--dur-base) var(--ease-spring);
}
.sidebar-section-eyebrow {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-footer {
flex: 0 0 auto;
margin-top: auto;
padding: 14px 12px 16px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-user {
width: 100%;
padding: 10px 12px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.86);
text-decoration: none;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 10px;
}
.sidebar-user:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.12);
}
.sidebar-user-avatar {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(13, 110, 253, 0.42);
color: #eff6ff;
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.04em;
}
.sidebar-user-meta {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1 1 auto;
max-width: 150px;
overflow: hidden;
transition:
opacity var(--dur-fast) var(--ease-out-quart),
transform var(--dur-base) var(--ease-spring),
max-width var(--dur-base) var(--ease-spring);
}
.sidebar-user-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 700;
}
.sidebar-user-role {
margin-top: 2px;
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.sidebar-user-chev {
color: rgba(255, 255, 255, 0.4);
max-width: 16px;
transition:
opacity var(--dur-fast) var(--ease-out-quart),
transform var(--dur-base) var(--ease-spring),
max-width var(--dur-base) var(--ease-spring);
}
.sidebar-logout-form {
margin-top: 10px;
}
.sidebar-logout {
width: 100%;
min-height: 42px;
border: 0;
border-radius: 14px;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.86);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 700;
transition:
background var(--dur-fast) var(--ease-out-quart),
color var(--dur-fast) var(--ease-out-quart),
transform var(--dur-fast) var(--ease-spring);
}
.sidebar-logout:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.14);
}
.sidebar-logout:active {
transform: scale(0.98);
}
.sidebar-rail-handle {
position: fixed;
top: 20px;
left: 86px;
min-width: 68px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 12px;
border-radius: 999px;
z-index: 1002;
opacity: 0;
pointer-events: none;
transform: translateX(-10px);
background: rgba(15, 20, 30, 0.84);
border: 1px solid rgba(191, 219, 254, 0.18);
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.14);
transition:
opacity var(--dur-fast) var(--ease-out-quart),
transform var(--dur-base) var(--ease-spring),
left var(--dur-base) var(--ease-spring),
background var(--dur-fast) var(--ease-out-quart),
border-color var(--dur-fast) var(--ease-out-quart),
box-shadow var(--dur-base) var(--ease-out-quart);
}
.sidebar-rail-label {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
}
body[data-sidebar="collapsed"] #sidebar {
width: 78px;
}
body[data-sidebar="collapsed"] #main-content {
margin-left: 78px;
}
body[data-sidebar="collapsed"] .sidebar-header {
justify-content: center;
padding-inline: 10px;
}
body[data-sidebar="collapsed"] .sidebar-toggle {
display: none;
}
body[data-sidebar="collapsed"] .sidebar-brand {
justify-content: center;
gap: 0;
}
body[data-sidebar="collapsed"] .sidebar-brand-text,
body[data-sidebar="collapsed"] .sidebar-section-title,
body[data-sidebar="collapsed"] .nav-label,
body[data-sidebar="collapsed"] .sidebar-user-meta,
body[data-sidebar="collapsed"] .sidebar-user-chev,
body[data-sidebar="collapsed"] .sidebar-logout .nav-label {
opacity: 0;
transform: translateX(-10px);
max-width: 0;
max-height: 0;
margin: 0;
padding-top: 0;
padding-bottom: 0;
pointer-events: none;
}
body[data-sidebar="collapsed"] #sidebar .nav-link {
justify-content: center;
padding-left: 0.72rem;
padding-right: 0.72rem;
}
body[data-sidebar="collapsed"] #sidebar .nav-link:hover {
padding-left: 0.72rem;
transform: none;
}
body[data-sidebar="collapsed"] .sidebar-user {
justify-content: center;
padding-inline: 8px;
}
body[data-sidebar="collapsed"] .sidebar-logout {
justify-content: center;
}
body[data-sidebar="collapsed"] .sidebar-brand-chip {
background: linear-gradient(180deg, rgba(96, 165, 250, 0.34), rgba(30, 64, 175, 0.28));
border-color: rgba(191, 219, 254, 0.34);
box-shadow:
0 14px 28px rgba(30, 64, 175, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
body[data-sidebar="collapsed"] .sidebar-brand:hover .sidebar-brand-chip,
body[data-sidebar="collapsed"] .sidebar-brand:focus-visible .sidebar-brand-chip {
transform: translateY(-2px) scale(1.04);
}
body[data-sidebar="collapsed"] .sidebar-rail-handle {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
body[data-sidebar-transition="collapsing"] #main-content {
transform: translateX(-4px);
}
body[data-sidebar-transition="expanding"] #main-content {
transform: translateX(5px);
}
body[data-sidebar-transition="collapsing"] .sidebar-brand-chip {
transform: scale(0.92) rotate(-5deg);
}
body[data-sidebar-transition="expanding"] .sidebar-brand-chip {
transform: scale(1.06) rotate(4deg);
}
body[data-sidebar-transition="collapsing"] .sidebar-rail-handle {
transform: translateX(-4px);
}
body[data-sidebar-transition="expanding"] .sidebar-rail-handle {
transform: translateX(6px);
}
@media (prefers-reduced-motion: no-preference) {
@keyframes sidebarCollapsedCue {
0%, 100% {
transform: translateY(0);
box-shadow:
0 14px 28px rgba(30, 64, 175, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
50% {
transform: translateY(-1px);
box-shadow:
0 18px 34px rgba(30, 64, 175, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
}
body[data-sidebar="collapsed"] .sidebar-brand-chip {
animation: sidebarCollapsedCue 2.8s ease-in-out infinite;
}
}
/* --- Map --- */
#map {
position: relative;
z-index: var(--z-map);
width: 100%;
height: calc(100vh - 40px);
cursor: default;
}
body.map-page #map {
height: 100dvh;
}
#map.drawing-mode { cursor: crosshair; }
/* Map + HUD reveal — hold the canvas and widgets invisible until the first
tiles paint, then fade them in together. The `map-tiles-ready` class is
added by the inline page-loader script (header.ejs) at the same moment the
loader bar starts its finish animation, so the loader fades out as the map
fades in (one synchronised reveal, no popping or staggered widgets). The
#main-content area gets a dark base so the held-back state shows a calm
surface, not a white flash. */
body.map-page #main-content {
background: #0b0d12;
}
body.map-page #map,
body.map-page .map-hud-widgets,
body.map-page #map-fab {
opacity: 0;
pointer-events: none;
transition: opacity 380ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
body.map-page.map-tiles-ready #map,
body.map-page.map-tiles-ready .map-hud-widgets,
body.map-page.map-tiles-ready #map-fab {
opacity: 1;
pointer-events: auto;
}
/* `.map-hud-widgets` has pointer-events:none in its base styles so map clicks
pass through; restore that on its children once visible. */
body.map-page.map-tiles-ready .map-hud-widgets {
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
body.map-page #map,
body.map-page .map-hud-widgets,
body.map-page #map-fab { transition: none; }
}
/* --- Map Toolkit --- */
#map-toolkit { position: relative; }
#map .leaflet-bottom.leaflet-left {
bottom: 16px;
left: 16px;
}
/* Leaflet zoom control — Liquid Glass capsule */
#map .leaflet-bar {
background: var(--lg-bg);
backdrop-filter: var(--lg-blur);
-webkit-backdrop-filter: var(--lg-blur);
border: var(--lg-border);
border-radius: var(--lg-radius-pill);
box-shadow: var(--lg-shadow);
overflow: hidden;
}
#map .leaflet-bar a,
#map .leaflet-bar a:hover,
#map .leaflet-bar a:focus {
background: transparent;
color: var(--lg-text);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: background 0.18s ease, color 0.18s ease;
}
#map .leaflet-bar a:last-child {
border-bottom: none;
}
#map .leaflet-bar a:hover {
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
#map .leaflet-bar a.leaflet-disabled {
background: transparent;
color: rgba(241, 245, 249, 0.3);
cursor: not-allowed;
}
/* Panels — Apple-style pop-in animation. Background, border, and shadow
match .hud-dropdown so the layers/colour/marker panels share the HUD look. */
.map-panel {
position: fixed;
top: 64px;
left: 256px;
z-index: 1100;
background: var(--lg-bg-hud);
backdrop-filter: var(--lg-blur);
-webkit-backdrop-filter: var(--lg-blur);
border: var(--lg-border-hud);
border-radius: var(--lg-radius);
box-shadow: var(--lg-shadow-hud);
padding: 14px;
width: 220px;
color: var(--lg-text);
font-size: 0.82rem;
opacity: 0;
transform: scale(0.94) translateY(-8px);
pointer-events: none;
transform-origin: top left;
transition: opacity var(--dur-fast) var(--ease-out-quart),
transform var(--dur-base) var(--ease-spring);
}
.map-panel.lg-open {
opacity: 1;
transform: scale(1) translateY(0);
pointer-events: auto;
}
.map-panel.map-panel-right {
transform-origin: top right;
}
.map-panel-right {
left: auto;
right: 12px;
width: 360px;
}
.field-panel {
width: min(400px, calc(100vw - 24px));
}
.map-panel .btn-close {
filter: invert(1);
opacity: 0.8;
}
.map-panel .btn-close:hover {
opacity: 1;
}
/* HUD-style map panel — uses the HUD widget hero as its header so the
panel reads as part of the same family as the HUD chip dropdowns. */
.map-panel.hud-panel .hud-panel-hero {
margin-bottom: 12px;
}
.map-panel.hud-panel .hud-panel-hero .hud-widget-hero-head {
align-items: flex-start;
}
.map-panel.hud-panel .hud-panel-close {
margin-left: auto;
flex: 0 0 auto;
align-self: flex-start;
position: relative;
z-index: 1;
}
.panel-title {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(226, 232, 240, 0.6);
margin-bottom: 8px;
}
/* Icon grid */
.icon-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
}
.icon-btn {
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.06);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
color: var(--lg-text);
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.icon-btn:hover {
border-color: rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn.active {
border-color: rgba(147, 197, 253, 0.55);
background: rgba(13, 110, 253, 0.32);
color: #dbeafe;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 2px 8px rgba(13, 110, 253, 0.3);
}
/* Color grid */
.color-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
}
.color-btn {
width: 32px;
height: 32px;
border: 3px solid transparent;
border-radius: 50%;
cursor: pointer;
transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.color-btn:hover { transform: scale(1.15); }
.color-btn.active {
border-color: #f8fafc;
box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.85), 0 0 0 4px rgba(248, 250, 252, 0.85);
}
/* Measurement display */
.measurement-display {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1100;
background: var(--lg-bg-strong);
backdrop-filter: var(--lg-blur);
-webkit-backdrop-filter: var(--lg-blur);
border: var(--lg-border);
color: var(--lg-text);
padding: 8px 16px;
border-radius: var(--lg-radius-pill);
box-shadow: var(--lg-shadow-soft);
font-size: 0.9rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}
/* Layers list */
#layers-list .layer-group-title {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(226, 232, 240, 0.55);
padding: 8px 0 4px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#layers-list .layer-item {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 0;
font-size: 0.85rem;
cursor: pointer;
color: #e0e0e0;
}
#layers-list .layer-item-wrap {
padding: 2px 0 6px;
}
#layers-list .layer-item:hover { color: #93c5fd; }
#layers-list .layer-item.disabled {
color: rgba(226, 232, 240, 0.35);
cursor: not-allowed;
}
#layers-list .layer-item.disabled:hover {
color: rgba(226, 232, 240, 0.35);
}
#layers-list .layer-color {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
#layers-list {
max-height: calc(100vh - 150px);
overflow: auto;
}
#layers-list .layer-section {
margin-bottom: 12px;
}
#layers-list .layer-main-section {
border: 1px solid rgba(13, 110, 253, 0.3);
border-radius: 8px;
background: rgba(13, 110, 253, 0.08);
}
#layers-list .layer-main-section > summary {
padding: 10px 12px;
}
#layers-list .layer-main-section[open] > summary {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#layers-list .layer-section-title {
font-size: 0.78rem;
font-weight: 700;
color: #e8e8e8;
margin-bottom: 4px;
}
#layers-list .layer-section-meta {
margin-left: auto;
padding-left: 12px;
}
#layers-list .layer-search {
margin-bottom: 12px;
}
#layers-list details {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
margin-bottom: 8px;
background: rgba(255, 255, 255, 0.04);
}
#layers-list summary {
list-style: none;
cursor: pointer;
padding: 8px 10px;
font-size: 0.85rem;
font-weight: 600;
color: #e8e8e8;
display: flex;
align-items: center;
justify-content: space-between;
}
#layers-list summary::-webkit-details-marker {
display: none;
}
#layers-list .layer-group-count {
font-size: 0.75rem;
color: rgba(226, 232, 240, 0.55);
font-weight: 500;
}
#layers-list .layer-group-summary {
display: inline-flex;
align-items: center;
gap: 8px;
}
#layers-list .layer-group-body {
padding: 0 10px 8px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
#layers-list .layer-compare-card {
margin-bottom: 10px;
padding: 10px;
border: 1px solid rgba(13, 110, 253, 0.3);
border-radius: 8px;
background: rgba(13, 110, 253, 0.08);
}
#layers-list .layer-compare-title {
font-size: 0.78rem;
font-weight: 700;
color: #f1f5f9;
margin-bottom: 2px;
}
#layers-list .layer-compare-hint {
font-size: 0.78rem;
color: rgba(226, 232, 240, 0.6);
margin-bottom: 10px;
}
#layers-list .layer-compare-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
#layers-list .layer-compare-field {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 8px;
font-size: 0.78rem;
font-weight: 600;
color: rgba(226, 232, 240, 0.75);
}
#layers-list .layer-compare-range {
margin-bottom: 4px;
}
#layers-list .layer-compare-status {
margin-bottom: 10px;
font-size: 0.78rem;
color: rgba(226, 232, 240, 0.6);
line-height: 1.35;
}
#layers-list .layer-compare-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#layers-list .layer-item input {
margin: 0;
}
#layers-list .layer-label {
flex: 1;
}
#layers-list .layer-muted {
color: rgba(226, 232, 240, 0.55);
font-size: 0.8rem;
}
#layers-list .legend-entry {
display: flex;
align-items: center;
gap: 8px;
padding: 3px 0;
}
#layers-list .legend-swatch {
max-width: 30px;
max-height: 30px;
width: auto;
height: auto;
flex-shrink: 0;
}
#layers-list .legend-label {
font-size: 0.8rem;
color: #d0d0d0;
line-height: 1.25;
}
#map-legend {
position: fixed;
right: 16px;
bottom: 24px;
z-index: 1100;
width: 280px;
max-height: 45vh;
overflow: auto;
background: var(--lg-bg-strong);
backdrop-filter: var(--lg-blur);
-webkit-backdrop-filter: var(--lg-blur);
border: var(--lg-border);
border-radius: var(--lg-radius);
box-shadow: var(--lg-shadow);
padding: 0;
color: var(--lg-text);
}
.map-legend-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.map-legend-heading {
font-size: 0.82rem;
font-weight: 700;
color: #f1f5f9;
}
.map-legend-toggle {
border: none;
background: transparent;
color: #d0d0d0;
width: 28px;
height: 28px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
}
.map-legend-toggle:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
#map-legend-body {
padding: 10px 12px;
}
.map-legend-status {
margin: 0 12px;
padding: 8px 10px;
border-radius: 6px;
background: rgba(234, 179, 8, 0.15);
border: 1px solid rgba(234, 179, 8, 0.35);
color: #fde68a;
font-size: 0.8rem;
line-height: 1.35;
}
.map-legend-title {
font-size: 0.82rem;
font-weight: 700;
color: #f1f5f9;
margin-bottom: 8px;
}
#btn-edit-geometry.active {
background: #0d6efd;
border-color: #0d6efd;
color: #fff;
}
.geometry-edit-handle {
background: transparent;
border: none;
}
.geometry-edit-handle span {
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
background: #ffffff;
border: 2px solid #111111;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.geometry-edit-center span {
background: #0d6efd;
border-color: #ffffff;
}
/* Custom marker icons — glass pin with translucent core, accent ring,
and a soft drop shadow. The colour is mixed in at runtime via inline
style; the ring + sheen come from the layered backgrounds below so
every pin reads consistently regardless of the user-picked hue. */
.farm-marker {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
background-blend-mode: overlay, normal;
background-image:
radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%),
linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.18));
border: 1.5px solid rgba(255, 255, 255, 0.78);
box-shadow:
0 6px 14px rgba(15, 23, 42, 0.32),
0 1px 2px rgba(15, 23, 42, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.45);
transition:
transform var(--dur-fast) var(--ease-glass),
box-shadow var(--dur-fast) var(--ease-glass);
}
.farm-marker:hover {
transform: rotate(-45deg) scale(1.12);
box-shadow:
0 10px 22px rgba(15, 23, 42, 0.42),
0 2px 4px rgba(15, 23, 42, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.farm-marker i {
transform: rotate(45deg);
font-size: 14px;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
}
@media (prefers-reduced-motion: reduce) {
.farm-marker { transition: none; }
.farm-marker:hover { transform: rotate(-45deg); }
}
#map .field-map-shape {
stroke-linejoin: round;
stroke-linecap: round;
/* Frosted-edge effect — soft outer light + subtle drop so the boundary
reads as a translucent ridge rather than a flat ink line. paint-order
ensures the fill renders before the stroke so the stroke isn't muddied. */
paint-order: fill stroke;
filter:
drop-shadow(0 0 1px rgba(255, 255, 255, 0.55))
drop-shadow(0 1px 2px rgba(15, 23, 42, 0.18));
transition: filter var(--dur-fast) var(--ease-glass);
}
#map .field-map-shape:hover {
filter:
drop-shadow(0 0 2px rgba(255, 255, 255, 0.7))
drop-shadow(0 2px 6px rgba(15, 23, 42, 0.24));
}
#map .farm-boundary-shape {
stroke-linejoin: round;
stroke-linecap: round;
paint-order: fill stroke;
filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.4));
}
/* Measurement tooltip on map */
.measurement-tooltip {
background: rgba(0,0,0,0.75);
color: #fff;
padding: 3px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
border: none;
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.measurement-tooltip::before { display: none; }
/* Responsive */
@media (max-width: 768px) {
.map-panel { left: 72px; }
#layers-list .layer-compare-grid {
grid-template-columns: 1fr;
}
#map .leaflet-top.leaflet-left {
top: 96px;
}
}
/* --- General --- */
body {
margin: 0;
min-height: 100vh;
background:
radial-gradient(circle at 12% 8%, rgba(96, 165, 250, 0.16), transparent 32%),
radial-gradient(circle at 88% 14%, rgba(167, 139, 250, 0.12), transparent 34%),
radial-gradient(circle at 50% 96%, rgba(52, 211, 153, 0.1), transparent 30%),
linear-gradient(180deg, #eef3fa 0%, #f6f9fd 100%);
background-attachment: fixed;
color: #0f172a;
}
.card {
background: var(--lg-light-bg-strong);
backdrop-filter: var(--lg-blur-soft);
-webkit-backdrop-filter: var(--lg-blur-soft);
border: var(--lg-light-border);
border-radius: var(--lg-radius-md);
box-shadow: var(--lg-light-shadow-soft);
transition: transform var(--dur-fast) var(--ease-spring),
box-shadow var(--dur-fast) var(--ease-out-quart),
border-color var(--dur-fast) var(--ease-out-quart);
}
.card:hover {
transform: translateY(-1px);
box-shadow: var(--lg-light-shadow-lifted);
}
.card.shadow,
.card.shadow-sm {
box-shadow: var(--lg-light-shadow-soft) !important;
}
.card.shadow:hover,
.card.shadow-sm:hover {
box-shadow: var(--lg-light-shadow-lifted) !important;
}
/* Clickable cards (anchor-wrapped, role=button, .card-link) get a stronger lift */
a.card:hover,
.card[role="button"]:hover,
.card-link:hover {
transform: translateY(-2px);
}
.card-header {
background: rgba(255, 255, 255, 0.35);
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.card-footer {
background: rgba(255, 255, 255, 0.35);
border-top: 1px solid rgba(15, 23, 42, 0.06);
}
/* Unauthenticated pages (login/register) */
body > .container {
max-width: 100%;
}
/* --- Liquid Glass platform chrome --- */
/* Page entrance — content fades up gently, except on map-page where the
map itself is the canvas */
body:not(.map-page) #main-content,
body:not(.map-page) > main.container {
animation: lg-fade-up var(--dur-slow) var(--ease-spring) backwards;
}
/* Subtle stagger for content rows inside the main content */
body:not(.map-page) #main-content > .container > *,
body:not(.map-page) #main-content > .container-fluid > *,
body:not(.map-page) #main-content > .p-4 > *,
body:not(.map-page) #main-content > div > * {
animation: lg-fade-up var(--dur-slow) var(--ease-spring) backwards;
}
body:not(.map-page) #main-content > .container > *:nth-child(1),
body:not(.map-page) #main-content > .container-fluid > *:nth-child(1),
body:not(.map-page) #main-content > .p-4 > *:nth-child(1),
body:not(.map-page) #main-content > div > *:nth-child(1) { animation-delay: 0ms; }
body:not(.map-page) #main-content > .container > *:nth-child(2),
body:not(.map-page) #main-content > .container-fluid > *:nth-child(2),
body:not(.map-page) #main-content > .p-4 > *:nth-child(2),
body:not(.map-page) #main-content > div > *:nth-child(2) { animation-delay: 60ms; }
body:not(.map-page) #main-content > .container > *:nth-child(3),
body:not(.map-page) #main-content > .container-fluid > *:nth-child(3),
body:not(.map-page) #main-content > .p-4 > *:nth-child(3),
body:not(.map-page) #main-content > div > *:nth-child(3) { animation-delay: 120ms; }
body:not(.map-page) #main-content > .container > *:nth-child(n+4),
body:not(.map-page) #main-content > .container-fluid > *:nth-child(n+4),
body:not(.map-page) #main-content > .p-4 > *:nth-child(n+4),
body:not(.map-page) #main-content > div > *:nth-child(n+4) { animation-delay: 180ms; }
/* Top navbar (unauth pages) */
.navbar.bg-dark,
.navbar-dark.bg-dark {
background: rgba(15, 20, 30, 0.7) !important;
backdrop-filter: var(--lg-blur);
-webkit-backdrop-filter: var(--lg-blur);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
/* Modals — Apple-style scale-fade entrance (320ms scale-from-95 + backdrop blur ramp 0→24px) */
.modal-content {
background: var(--lg-light-bg-tint);
backdrop-filter: var(--lg-blur);
-webkit-backdrop-filter: var(--lg-blur);
border: var(--lg-light-border);
border-radius: var(--r-lg);
box-shadow:
0 32px 64px rgba(15, 23, 42, 0.32),
0 8px 24px rgba(15, 23, 42, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.modal-header {
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.modal-footer {
border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.modal.fade .modal-dialog {
transition:
transform 320ms var(--ease-glass),
opacity 320ms var(--ease-glass);
transform: scale(0.95);
opacity: 0;
}
.modal.show .modal-dialog {
transform: scale(1);
opacity: 1;
}
/* Backdrop blur ramps from 0 → 24px to match the modal entrance — feels like
the page is "settling" behind the dialog rather than snap-blurring. */
.modal-backdrop {
background: rgba(15, 23, 42, 0.32);
backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);
transition:
opacity 320ms var(--ease-glass),
backdrop-filter 320ms var(--ease-glass),
-webkit-backdrop-filter 320ms var(--ease-glass);
}
.modal-backdrop.show {
opacity: 1;
backdrop-filter: blur(24px) saturate(160%);
-webkit-backdrop-filter: blur(24px) saturate(160%);
}
/* ── Glass tooltip — single shared element managed by initTooltips().
Positioned via inline transform; opacity + transform animate via CSS. */
.lg-tooltip {
position: fixed;
top: 0;
left: 0;
z-index: 4500;
display: none;
padding: 6px 10px;
border-radius: var(--r-sm);
background: var(--lg-bg-hud);
backdrop-filter: var(--glass-blur, var(--lg-blur));
-webkit-backdrop-filter: var(--glass-blur, var(--lg-blur));
border: var(--lg-border-hud);
color: var(--lg-text);
font-size: var(--text-12);
font-weight: 500;
letter-spacing: 0.005em;
white-space: nowrap;
pointer-events: none;
box-shadow: var(--shadow-1);
opacity: 0;
/* The slight 6px shift creates a "settling-in" motion on the side it appears */
transition: opacity 140ms var(--ease-glass), transform 200ms var(--ease-glass);
}
.lg-tooltip.is-mounted { display: block; }
.lg-tooltip[data-placement="right"]:not(.is-visible) { /* shift left 6px before show */ }
.lg-tooltip.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.lg-tooltip { transition: opacity 80ms linear; }
}
/* ── Skeleton loader — universal shimmer surface used in place of spinners.
Use as a standalone shape (`.skeleton .skeleton-line`) or inline on any
element with `data-loading`. The shimmer is GPU-cheap (background-position).
Examples:
── */
.skeleton,
.skeleton-line,
.skeleton-text,
.skeleton-circle {
position: relative;
overflow: hidden;
background:
linear-gradient(90deg,
rgba(148, 163, 184, 0.10) 0%,
rgba(203, 213, 225, 0.22) 50%,
rgba(148, 163, 184, 0.10) 100%);
background-size: 220% 100%;
background-repeat: no-repeat;
background-position: 100% 0;
border-radius: var(--r-sm);
animation: skeleton-shimmer 1.6s linear infinite;
color: transparent !important;
user-select: none;
pointer-events: none;
}
.skeleton-block { width: 100%; }
.skeleton-line { display: block; height: 12px; margin: 6px 0; border-radius: 6px; }
.skeleton-line-sm { height: 8px; }
.skeleton-line-md { height: 14px; }
.skeleton-line-lg { height: 20px; border-radius: 8px; }
.skeleton-line-w-25 { width: 25%; }
.skeleton-line-w-40 { width: 40%; }
.skeleton-line-w-60 { width: 60%; }
.skeleton-line-w-80 { width: 80%; }
.skeleton-text { display: inline-block; height: 1em; min-width: 4ch; vertical-align: -2px; border-radius: 4px; }
.skeleton-text[data-len="short"] { width: 4ch; }
.skeleton-text[data-len="medium"] { width: 9ch; }
.skeleton-text[data-len="long"] { width: 16ch; }
.skeleton-circle { width: 32px; height: 32px; border-radius: 50%; }
@keyframes skeleton-shimmer {
0% { background-position: 220% 0; }
100% { background-position: -120% 0; }
}
/* Slightly brighter shimmer over dark glass */
.glass-surface .skeleton,
.hud-dropdown .skeleton,
.map-context-panel .skeleton,
.glass-surface .skeleton-line,
.hud-dropdown .skeleton-line,
.map-context-panel .skeleton-line,
.glass-surface .skeleton-text,
.hud-dropdown .skeleton-text,
.map-context-panel .skeleton-text {
background:
linear-gradient(90deg,
rgba(255, 255, 255, 0.04) 0%,
rgba(255, 255, 255, 0.16) 50%,
rgba(255, 255, 255, 0.04) 100%);
background-size: 220% 100%;
background-repeat: no-repeat;
}
@media (prefers-reduced-motion: reduce) {
.skeleton, .skeleton-line, .skeleton-text, .skeleton-circle {
animation: none;
background-position: 50% 0;
}
}
/* Form controls */
.form-control,
.form-select,
.input-group-text {
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
border: 1px solid rgba(15, 23, 42, 0.1);
border-radius: 12px;
transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.form-control:focus,
.form-select:focus {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(13, 110, 253, 0.5);
box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.18);
}
.form-control::placeholder {
color: rgba(15, 23, 42, 0.4);
}
/* Buttons — base */
.btn {
border-radius: 12px;
font-weight: 500;
transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.btn:active { transform: scale(0.97); }
/* Solid colored buttons get inner highlight + colored glow */
.btn-primary {
border: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 12px rgba(13, 110, 253, 0.28);
}
.btn-primary:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 6px 16px rgba(13, 110, 253, 0.36);
}
.btn-success {
border: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 12px rgba(25, 135, 84, 0.28);
}
.btn-danger {
border: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 12px rgba(220, 53, 69, 0.28);
}
.btn-warning {
border: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 4px 12px rgba(255, 193, 7, 0.28);
}
.btn-info {
border: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 4px 12px rgba(13, 202, 240, 0.28);
}
.btn-secondary {
border: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 12px rgba(108, 117, 125, 0.22);
}
/* Light/translucent buttons take the glass material */
.btn-light {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 6px rgba(15, 23, 42, 0.05);
color: #0f172a;
}
.btn-light:hover {
background: rgba(255, 255, 255, 0.92);
color: #0f172a;
}
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark {
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.btn-outline-light {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-color: rgba(255, 255, 255, 0.4);
}
/* Tables sit on transparent so cards' glass shows through */
.table {
--bs-table-bg: transparent;
color: inherit;
}
.table > :not(caption) > * > * {
background-color: transparent;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
background-color: rgba(15, 23, 42, 0.025);
color: inherit;
}
.table-hover > tbody > tr:hover > * {
background-color: rgba(13, 110, 253, 0.06);
}
/* Alerts */
.alert {
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
border-radius: var(--lg-radius-md);
border: 1px solid rgba(15, 23, 42, 0.06);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.alert-primary { background: rgba(13, 110, 253, 0.12); }
.alert-success { background: rgba(25, 135, 84, 0.12); }
.alert-warning { background: rgba(255, 193, 7, 0.16); }
.alert-danger { background: rgba(220, 53, 69, 0.12); }
.alert-info { background: rgba(13, 202, 240, 0.14); }
.alert-secondary { background: rgba(108, 117, 125, 0.12); }
/* Dropdowns (Bootstrap) — animated open via @starting-style */
.dropdown-menu {
background: var(--lg-light-bg-tint);
backdrop-filter: var(--lg-blur);
-webkit-backdrop-filter: var(--lg-blur);
border: var(--lg-light-border);
border-radius: var(--lg-radius-md);
box-shadow: var(--lg-light-shadow);
transform-origin: top center;
transition: opacity var(--dur-fast) var(--ease-out-quart),
transform var(--dur-base) var(--ease-spring);
}
.dropdown-menu.show {
animation: lg-slide-in-down var(--dur-base) var(--ease-spring);
}
.dropdown-item {
border-radius: 8px;
margin: 2px 4px;
padding: 6px 10px;
width: calc(100% - 8px);
transition: background var(--dur-fast) var(--ease-out-quart),
color var(--dur-fast) var(--ease-out-quart),
transform var(--dur-fast) var(--ease-spring);
}
.dropdown-item:hover,
.dropdown-item:focus {
background: rgba(13, 110, 253, 0.12);
color: #0f172a;
}
.dropdown-item:active {
transform: scale(0.97);
}
/* Badges — slight rounding bump */
.badge {
border-radius: 8px;
font-weight: 600;
}
/* Progress bars */
.progress {
background: rgba(15, 23, 42, 0.06);
border-radius: var(--lg-radius-pill);
overflow: hidden;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.progress-bar {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* List groups */
.list-group {
border-radius: var(--lg-radius-md);
overflow: hidden;
}
.list-group-item {
background: rgba(255, 255, 255, 0.5);
border-color: rgba(15, 23, 42, 0.06);
}
/* Nav pills/tabs (non-map) — softer rounding to match */
.nav-link {
transition: color var(--dur-fast) var(--ease-out-quart),
background var(--dur-fast) var(--ease-out-quart),
border-color var(--dur-fast) var(--ease-out-quart),
transform var(--dur-fast) var(--ease-spring);
}
.nav-link:active { transform: scale(0.97); }
.nav-pills .nav-link {
border-radius: 10px;
}
.nav-tabs {
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.nav-tabs .nav-link {
border-radius: 10px 10px 0 0;
border-color: transparent;
}
.nav-tabs .nav-link.active {
background: var(--lg-light-bg-tint);
border-color: rgba(15, 23, 42, 0.08) rgba(15, 23, 42, 0.08) transparent;
}
/* Tab pane fade — replace Bootstrap's slow linear fade */
.tab-pane.fade {
transition: opacity var(--dur-base) var(--ease-out-quart);
}
/* List groups — smooth hover */
.list-group-item {
transition: background var(--dur-fast) var(--ease-out-quart),
color var(--dur-fast) var(--ease-out-quart);
}
.list-group-item-action:hover {
background: rgba(13, 110, 253, 0.08);
}
.list-group-item-action:active {
transform: scale(0.99);
transition-duration: 80ms;
}
/* HUD dropdown content stagger — items fade up after the dropdown pops in */
.hud-dropdown.lg-open > *,
.hud-dropdown.lg-open .hud-dd-row,
.hud-dropdown.lg-open .hud-tool-btn,
.hud-dropdown.lg-open .hud-dd-row-sm,
.hud-dropdown.lg-open .hud-alert-item,
.map-fab-menu.lg-open .map-fab-item {
animation: lg-fade-up var(--dur-base) var(--ease-spring) backwards;
}
.hud-dropdown.lg-open > *:nth-child(1),
.map-fab-menu.lg-open > *:nth-child(1) { animation-delay: 60ms; }
.hud-dropdown.lg-open > *:nth-child(2),
.map-fab-menu.lg-open > *:nth-child(2) { animation-delay: 100ms; }
.hud-dropdown.lg-open > *:nth-child(3),
.map-fab-menu.lg-open > *:nth-child(3) { animation-delay: 140ms; }
.hud-dropdown.lg-open > *:nth-child(n+4),
.map-fab-menu.lg-open > *:nth-child(n+4) { animation-delay: 180ms; }
/* Map context panel content fades in after the panel slides in */
.map-context-panel.context-panel-open .context-panel-view-active > * {
animation: lg-fade-up var(--dur-base) var(--ease-spring) backwards;
animation-delay: 120ms;
}
/* Alerts slide in if injected dynamically */
.alert {
animation: lg-slide-in-down var(--dur-base) var(--ease-spring);
}
/* Spinner uses spring-friendly speed */
.spinner-border, .spinner-grow {
animation-duration: 0.8s;
}
/* =========================================================================
Apple-style polish — selection, scrollbars, focus, controls, utilities
========================================================================= */
/* Branded text selection */
::selection {
background: rgba(13, 110, 253, 0.25);
color: #0f172a;
}
/* Refined focus ring — branded, only for keyboard navigation. Uses outline
(not box-shadow) so form-control / button :focus rings don't double up. */
:focus { outline: none; }
:focus-visible {
outline: 3px solid rgba(13, 110, 253, 0.36);
outline-offset: 2px;
border-radius: inherit;
}
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.btn-close:focus-visible {
outline: none; /* their own focus state handles the ring */
}
/* Thin Apple-style scrollbars on light surfaces */
* {
scrollbar-width: thin;
scrollbar-color: rgba(15, 23, 42, 0.22) transparent;
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: rgba(15, 23, 42, 0.22);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
transition: background-color 0.18s var(--ease-out-quart);
}
*::-webkit-scrollbar-thumb:hover {
background-color: rgba(15, 23, 42, 0.42);
background-clip: padding-box;
}
/* Dark scrollbars for dark glass surfaces */
#sidebar,
.map-fab-menu,
.map-context-panel,
.map-panel,
.map-daylight-card {
scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
#sidebar::-webkit-scrollbar-thumb,
.map-fab-menu::-webkit-scrollbar-thumb,
.map-context-panel::-webkit-scrollbar-thumb,
.map-panel::-webkit-scrollbar-thumb,
.map-daylight-card::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.22);
}
#sidebar::-webkit-scrollbar-thumb:hover,
.map-fab-menu::-webkit-scrollbar-thumb:hover,
.map-context-panel::-webkit-scrollbar-thumb:hover,
.map-panel::-webkit-scrollbar-thumb:hover,
.map-daylight-card::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.4);
}
.hud-dropdown,
.hud-dropdown * {
scrollbar-width: none;
}
.hud-dropdown::-webkit-scrollbar,
.hud-dropdown *::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
/* iOS-style toggle switch */
.form-switch .form-check-input,
.form-check-input[role="switch"] {
width: 44px;
height: 26px;
margin-top: 0.15rem;
background-color: rgba(15, 23, 42, 0.22);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
border-color: transparent;
border-radius: 999px;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.1);
transition: background-color var(--dur-fast) var(--ease-out-quart),
background-position var(--dur-base) var(--ease-spring);
}
.form-switch .form-check-input:hover,
.form-check-input[role="switch"]:hover {
background-color: rgba(15, 23, 42, 0.32);
}
.form-switch .form-check-input:checked,
.form-check-input[role="switch"]:checked {
background-color: #34c759;
border-color: transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 4px rgba(52, 199, 89, 0.32);
}
.form-switch .form-check-input:focus,
.form-check-input[role="switch"]:focus {
border-color: transparent;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.1), 0 0 0 3px rgba(13, 110, 253, 0.18);
}
.form-switch .form-check-input:checked:focus,
.form-check-input[role="switch"]:checked:focus {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 3px rgba(52, 199, 89, 0.28);
}
/* Round checkboxes — like iOS form rows */
.form-check-input[type="checkbox"]:not([role="switch"]) {
width: 1.15em;
height: 1.15em;
border-radius: 6px;
border-color: rgba(15, 23, 42, 0.2);
transition: background-color var(--dur-fast) var(--ease-out-quart),
border-color var(--dur-fast) var(--ease-out-quart);
}
.form-check-input[type="checkbox"]:not([role="switch"]):checked {
background-color: #0d6efd;
border-color: #0d6efd;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 6px rgba(13, 110, 253, 0.32);
}
/* Radio — iOS style with inner dot */
.form-check-input[type="radio"] {
width: 1.2em;
height: 1.2em;
border-color: rgba(15, 23, 42, 0.2);
transition: background-color var(--dur-fast) var(--ease-out-quart),
border-color var(--dur-fast) var(--ease-out-quart),
box-shadow var(--dur-fast) var(--ease-out-quart);
}
.form-check-input[type="radio"]:checked {
background-color: #fff;
border-color: #0d6efd;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.4' fill='%230d6efd'/%3e%3c/svg%3e");
box-shadow: 0 2px 6px rgba(13, 110, 253, 0.18);
}
/* iOS-style range slider */
.form-range {
height: 24px;
}
.form-range::-webkit-slider-runnable-track {
height: 4px;
background: rgba(15, 23, 42, 0.12);
border-radius: 999px;
}
.form-range::-moz-range-track {
height: 4px;
background: rgba(15, 23, 42, 0.12);
border-radius: 999px;
}
.form-range::-webkit-slider-thumb {
width: 22px;
height: 22px;
margin-top: -9px;
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2), 0 2px 8px rgba(15, 23, 42, 0.12);
transition: transform var(--dur-fast) var(--ease-spring);
}
.form-range::-moz-range-thumb {
width: 22px;
height: 22px;
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2), 0 2px 8px rgba(15, 23, 42, 0.12);
}
.form-range::-webkit-slider-thumb:active { transform: scale(1.1); }
/* Segmented control — opt-in via .segmented on a btn-group */
.btn-group.segmented,
.segmented {
display: inline-flex;
background: rgba(15, 23, 42, 0.06);
border-radius: 12px;
padding: 3px;
gap: 2px;
box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.04);
}
.btn-group.segmented > .btn,
.segmented > .btn {
background: transparent;
border: none;
border-radius: 9px;
color: #475569;
font-weight: 600;
padding: 6px 14px;
font-size: 0.86rem;
box-shadow: none;
}
.btn-group.segmented > .btn:hover,
.segmented > .btn:hover {
background: rgba(255, 255, 255, 0.5);
color: #0f172a;
}
.btn-group.segmented > .btn.active,
.btn-group.segmented > .btn:active,
.segmented > .btn.active,
.segmented > input[type="radio"]:checked + label {
background: #fff;
color: #0f172a;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.06);
}
/* Sliding underline indicator for tab navigation */
.nav-tabs .nav-link {
position: relative;
border: none !important;
background: transparent !important;
color: rgba(15, 23, 42, 0.6);
font-weight: 600;
padding: 10px 14px;
}
.nav-tabs .nav-link::after {
content: '';
position: absolute;
left: 14px;
right: 14px;
bottom: 0;
height: 2.5px;
background: #0d6efd;
border-radius: 999px;
transform: scaleX(0);
transform-origin: center;
transition: transform var(--dur-base) var(--ease-spring),
background var(--dur-fast) var(--ease-out-quart);
}
.nav-tabs .nav-link:hover {
color: #0f172a;
}
.nav-tabs .nav-link.active {
color: #0f172a;
background: transparent !important;
}
.nav-tabs .nav-link.active::after {
transform: scaleX(1);
}
/* Pagination — pill items */
.pagination {
gap: 4px;
}
.page-item .page-link {
border: none;
border-radius: 10px;
min-width: 36px;
padding: 6px 12px;
font-weight: 600;
background: transparent;
color: #475569;
transition: background var(--dur-fast) var(--ease-out-quart),
color var(--dur-fast) var(--ease-out-quart),
transform var(--dur-fast) var(--ease-spring);
}
.page-item .page-link:hover {
background: rgba(13, 110, 253, 0.1);
color: #0d6efd;
}
.page-item:active .page-link { transform: scale(0.96); }
.page-item.active .page-link {
background: #0d6efd;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 2px 8px rgba(13, 110, 253, 0.32);
}
.page-item.disabled .page-link {
color: rgba(15, 23, 42, 0.32);
background: transparent;
}
/* Polished tables */
.table {
font-size: 0.92rem;
}
.table > thead {
font-size: 0.74rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #64748b;
}
.table > thead th {
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
padding: 10px 12px;
background: transparent;
font-weight: 700;
}
.table > tbody td {
padding: 12px;
vertical-align: middle;
border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}
.table > tbody tr:last-child td {
border-bottom: none;
}
/* Toasts — Bootstrap utility */
.toast {
background: var(--lg-light-bg-tint);
backdrop-filter: var(--lg-blur);
-webkit-backdrop-filter: var(--lg-blur);
border: var(--lg-light-border);
border-radius: var(--lg-radius-md);
box-shadow: var(--lg-shadow);
animation: lg-slide-in-down var(--dur-base) var(--ease-spring);
}
.toast-header {
background: transparent;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
/* Tooltips & popovers — light glass */
.tooltip-inner {
background: rgba(15, 20, 30, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 8px;
padding: 6px 10px;
font-size: 0.78rem;
font-weight: 500;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.popover {
background: var(--lg-light-bg-tint);
backdrop-filter: var(--lg-blur);
-webkit-backdrop-filter: var(--lg-blur);
border: var(--lg-light-border);
border-radius: var(--lg-radius-md);
box-shadow: var(--lg-shadow);
}
/* Search field utility — wrap an input with .search-field for the icon */
.search-field {
position: relative;
display: inline-flex;
align-items: center;
width: 100%;
}
.search-field .form-control,
.search-field input[type="search"] {
border-radius: var(--lg-radius-pill);
padding: 8px 14px 8px 38px;
}
.search-field::before {
content: '\F52A';
font-family: 'bootstrap-icons';
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-size: 0.95rem;
pointer-events: none;
z-index: 1;
}
/* Section heading utility — kicker + title pattern */
.kicker {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #64748b;
margin-bottom: 4px;
display: block;
}
/* ── Page header — used across admin / farm pages ───────────────────── */
.page-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.page-header-title {
margin: 4px 0 6px;
font-size: var(--text-28);
font-weight: 600;
line-height: var(--leading-display);
letter-spacing: var(--tracking-tight);
color: var(--text-primary);
}
.page-header-title i {
margin-right: 8px;
color: var(--accent);
}
.page-header-subtitle {
margin: 0;
font-size: var(--text-14);
color: var(--text-muted);
max-width: 60ch;
line-height: var(--leading-body);
}
.page-header-actions {
display: flex;
gap: 8px;
align-items: center;
}
/* Primary accented button — gradient with a glass highlight overlay */
.lg-btn-accent {
background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
border: 0;
color: #fff;
padding: 10px 18px;
border-radius: var(--r-md);
font-weight: 500;
letter-spacing: var(--tracking-loose);
box-shadow: 0 6px 18px rgba(99, 102, 241, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
transition: transform var(--dur-fast) var(--ease-glass),
box-shadow var(--dur-fast) var(--ease-glass);
}
.lg-btn-accent:hover {
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(99, 102, 241, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.32);
color: #fff;
}
/* ── Admin dashboard glass tile grid ─────────────────────────────────── */
.admin-dashboard {
position: relative;
isolation: isolate;
}
.admin-mesh {
position: fixed;
inset: 0;
z-index: -1;
background:
radial-gradient(circle at 12% 18%, rgba(99, 102, 241, 0.18), transparent 38%),
radial-gradient(circle at 88% 14%, rgba(20, 184, 166, 0.16), transparent 36%),
radial-gradient(circle at 50% 100%, rgba(139, 92, 246, 0.18), transparent 42%),
linear-gradient(180deg, #f6f8ff 0%, #f0f4fb 100%);
pointer-events: none;
}
.glass-tile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.glass-tile {
display: flex;
flex-direction: column;
gap: 12px;
min-height: 168px;
padding: 20px;
text-decoration: none;
color: inherit;
cursor: default;
transform-style: preserve-3d;
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1);
transition:
transform var(--dur-base) var(--ease-glass),
box-shadow var(--dur-base) var(--ease-glass);
will-change: transform;
}
.glass-tile.is-tilted {
transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.02);
box-shadow: var(--shadow-2);
}
.glass-tile-action {
cursor: pointer;
}
.glass-tile-action:hover {
color: inherit;
}
.glass-tile-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.glass-tile-icon {
width: 40px;
height: 40px;
border-radius: var(--r-sm);
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, 0.04);
border: 1px solid rgba(15, 23, 42, 0.06);
color: var(--accent);
font-size: 1.1rem;
flex: 0 0 auto;
}
.glass-tile-metric {
font-size: clamp(2.4rem, 4vw, 2.75rem);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--text-primary);
}
.glass-tile-metric-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-22);
color: var(--accent);
}
.glass-tile-metric-cta i {
transition: transform var(--dur-fast) var(--ease-glass);
}
.glass-tile-action:hover .glass-tile-metric-cta i { transform: translateX(4px); }
.glass-tile-foot {
margin-top: auto;
font-size: var(--text-13);
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 6px;
}
/* Live status pulse — used to signal "real-time data is flowing" */
.glass-tile-pulse {
position: relative;
display: inline-flex;
width: 8px; height: 8px;
flex: 0 0 auto;
}
.glass-tile-pulse > span {
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--success);
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
animation: tile-pulse 2s var(--ease-glass) infinite;
}
@keyframes tile-pulse {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); opacity: 0.95; }
70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); opacity: 1; }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
.glass-tile { transition: none; transform: none; }
.glass-tile.is-tilted { transform: none; }
.glass-tile-pulse > span { animation: none; }
}
/* Stat tile utility — large number + label */
.stat-tile {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 18px;
border-radius: 14px;
background: var(--lg-light-bg-strong);
border: var(--lg-light-border);
box-shadow: var(--lg-light-shadow-soft);
transition: transform var(--dur-fast) var(--ease-spring),
box-shadow var(--dur-fast) var(--ease-out-quart);
}
.stat-tile:hover {
transform: translateY(-1px);
box-shadow: var(--lg-light-shadow-lifted);
}
.stat-tile-label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #64748b;
}
.stat-tile-value {
font-size: 1.7rem;
font-weight: 700;
letter-spacing: -0.01em;
color: #0f172a;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.stat-tile-trend {
font-size: 0.78rem;
font-weight: 600;
color: #16a34a;
display: inline-flex;
align-items: center;
gap: 4px;
}
.stat-tile-trend.is-down { color: #dc2626; }
.stat-tile-trend.is-flat { color: #64748b; }
/* Empty state utility */
.lg-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 48px 24px;
border: 1px dashed rgba(15, 23, 42, 0.14);
border-radius: var(--lg-radius-md);
background: rgba(255, 255, 255, 0.4);
color: #475569;
gap: 8px;
}
.lg-empty-icon {
font-size: 2.4rem;
color: rgba(13, 110, 253, 0.5);
margin-bottom: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(13, 110, 253, 0.1);
}
.lg-empty-title {
font-size: 1.05rem;
font-weight: 700;
color: #0f172a;
}
.lg-empty-copy {
font-size: 0.88rem;
color: #64748b;
max-width: 320px;
line-height: 1.5;
}
/* Skeleton loader — apply .skeleton class to a placeholder block */
.skeleton {
background: linear-gradient(
90deg,
rgba(15, 23, 42, 0.05),
rgba(15, 23, 42, 0.12),
rgba(15, 23, 42, 0.05)
);
background-size: 200% 100%;
animation: lg-skeleton-shimmer 1.4s ease-in-out infinite;
border-radius: 8px;
color: transparent !important;
user-select: none;
}
@keyframes lg-skeleton-shimmer {
0% { background-position: 200% 50%; }
100% { background-position: -200% 50%; }
}
/* Polished progress bar */
.progress {
background: rgba(15, 23, 42, 0.06);
border-radius: var(--lg-radius-pill);
overflow: hidden;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.progress-bar {
background: linear-gradient(90deg, #0d6efd 0%, #4dabf7 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
transition: width var(--dur-slow) var(--ease-spring);
}
.progress-bar.bg-success {
background: linear-gradient(90deg, #16a34a 0%, #4ade80 100%) !important;
}
.progress-bar.bg-warning {
background: linear-gradient(90deg, #f59e0b 0%, #fcd34d 100%) !important;
}
.progress-bar.bg-danger {
background: linear-gradient(90deg, #dc2626 0%, #f87171 100%) !important;
}
/* Headings — slightly tighter tracking, weight discipline */
h1, h2, h3, h4, h5, h6 {
letter-spacing: -0.01em;
color: #0f172a;
}
h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 700; }
h4, h5, h6 { font-weight: 600; }
/* Hover lift on action buttons in headers */
.btn-icon {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 50%;
}
/* Smooth disabled fade — interactive elements look soft when disabled */
.btn:disabled,
.btn.disabled,
.form-control:disabled,
.form-select:disabled,
.form-check-input:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* --- Touch dashboard --- */
body.touch-dashboard-page {
--touch-ink: #091321;
--touch-ink-soft: #516174;
--touch-ink-faint: #6c7f95;
--touch-border: rgba(255, 255, 255, 0.34);
--touch-border-strong: rgba(255, 255, 255, 0.5);
--touch-shadow: 0 24px 60px rgba(15, 23, 42, 0.12), 0 10px 28px rgba(37, 99, 235, 0.08);
min-height: 100dvh;
background:
radial-gradient(circle at 12% 14%, rgba(125, 211, 252, 0.46), transparent 24%),
radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.86), transparent 16%),
radial-gradient(circle at 78% 82%, rgba(96, 165, 250, 0.28), transparent 28%),
radial-gradient(circle at 10% 88%, rgba(52, 211, 153, 0.18), transparent 24%),
linear-gradient(180deg, #dceeff 0%, #edf6ff 36%, #f7fbff 100%);
color: var(--touch-ink);
font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.touch-dashboard-page #main-content {
margin-left: 0;
min-height: 100dvh;
background: transparent;
}
.pos-shell,
.touch-shell {
width: 100%;
}
body.pos-page {
min-height: 100dvh;
background:
radial-gradient(circle at top left, rgba(14, 165, 233, 0.12), transparent 24%),
radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.12), transparent 28%),
linear-gradient(180deg, #f1f6fb 0%, #f8fbff 100%);
}
body.pos-page #main-content {
margin-left: 0;
min-height: 100dvh;
}
.pos-topbar {
position: sticky;
top: 0;
z-index: 1105;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%);
color: #ffffff;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}
.pos-topbar-brand {
display: flex;
flex-direction: column;
gap: 2px;
}
.pos-topbar-kicker {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #93c5fd;
}
.pos-topbar-brand strong {
font-size: 1.35rem;
}
.pos-topbar-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
body.pos-page .p-4 {
padding: 1.35rem !important;
}
body.pos-page h2,
body.pos-page h3,
body.pos-page h4,
body.pos-page h5 {
color: #0f172a;
}
body.pos-page .card,
body.pos-page .table-responsive,
body.pos-page .alert,
body.pos-page .progress {
border-radius: 18px;
}
body.pos-page .card {
border: 1px solid rgba(148, 163, 184, 0.14);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}
body.pos-page .btn {
min-height: 50px;
padding: 0.75rem 1.1rem;
border-radius: 14px;
font-weight: 700;
}
body.pos-page .btn-sm {
min-height: 44px;
padding: 0.6rem 0.95rem;
font-size: 0.98rem;
}
body.pos-page .form-control,
body.pos-page .form-select {
min-height: 50px;
border-radius: 14px;
font-size: 1rem;
}
body.pos-page textarea.form-control {
min-height: 120px;
}
body.pos-page .badge {
padding: 0.5em 0.7em;
}
body.pos-page table {
font-size: 0.98rem;
}
.touch-shell {
width: 100%;
}
.touch-dashboard {
position: relative;
isolation: isolate;
min-height: 100dvh;
padding: 24px;
touch-action: manipulation;
}
.touch-dashboard::before,
.touch-dashboard::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
}
.touch-dashboard::before {
background:
radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.58), transparent 18%),
radial-gradient(circle at 84% 10%, rgba(255, 255, 255, 0.44), transparent 16%),
linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 42%);
filter: blur(28px);
opacity: 0.85;
}
.touch-dashboard::after {
background:
linear-gradient(130deg, rgba(255, 255, 255, 0.18), transparent 42%),
radial-gradient(circle at 70% 78%, rgba(56, 189, 248, 0.12), transparent 22%);
opacity: 0.9;
}
.touch-dashboard > * {
position: relative;
z-index: 1;
}
.touch-liquid-surface {
--touch-accent-rgb: 96, 165, 250;
--touch-glow-x: 26%;
--touch-glow-y: 0%;
position: relative;
overflow: hidden;
isolation: isolate;
border: 1px solid var(--touch-border);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.18) 100%);
backdrop-filter: blur(28px) saturate(165%);
-webkit-backdrop-filter: blur(28px) saturate(165%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.56),
inset 0 -1px 0 rgba(255, 255, 255, 0.12),
var(--touch-shadow);
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}
.touch-liquid-surface::before,
.touch-liquid-surface::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
}
.touch-liquid-surface::before {
background:
radial-gradient(240px 140px at var(--touch-glow-x) var(--touch-glow-y), rgba(255, 255, 255, 0.76), transparent 42%),
linear-gradient(135deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.08) 44%, rgba(255, 255, 255, 0.16) 100%);
opacity: 0.96;
}
.touch-liquid-surface::after {
background:
radial-gradient(circle at 82% 120%, rgba(var(--touch-accent-rgb), 0.24), transparent 36%),
radial-gradient(circle at 8% -8%, rgba(255, 255, 255, 0.34), transparent 24%);
mix-blend-mode: screen;
opacity: 0.95;
}
.touch-liquid-surface > * {
position: relative;
z-index: 1;
}
.touch-liquid-surface.touch-liquid-pressed {
transform: translateY(1px) scale(0.995);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.52),
inset 0 -1px 0 rgba(255, 255, 255, 0.1),
0 16px 36px rgba(15, 23, 42, 0.12);
}
.touch-panel .touch-liquid-surface:not(.touch-panel),
.touch-alert .touch-liquid-surface,
.touch-hero-card .touch-liquid-surface,
.touch-clock-card .touch-liquid-surface {
backdrop-filter: blur(20px) saturate(155%);
-webkit-backdrop-filter: blur(20px) saturate(155%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.48),
inset 0 -1px 0 rgba(255, 255, 255, 0.1),
0 12px 24px rgba(15, 23, 42, 0.08);
}
.touch-hero-card,
.touch-clock-card,
.touch-panel-weather,
.touch-weather-card {
--touch-accent-rgb: 96, 165, 250;
}
.touch-panel-compliance,
.touch-alert-success {
--touch-accent-rgb: 16, 185, 129;
}
.touch-panel-fleet {
--touch-accent-rgb: 59, 130, 246;
}
.touch-panel-team {
--touch-accent-rgb: 168, 85, 247;
}
.touch-panel-actions {
--touch-accent-rgb: 56, 189, 248;
}
.touch-panel-lists,
.touch-alert-warning {
--touch-accent-rgb: 250, 204, 21;
}
.touch-panel-news {
--touch-accent-rgb: 244, 114, 182;
}
.touch-alert-danger {
--touch-accent-rgb: 248, 113, 113;
}
.touch-topbar {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.95fr);
gap: 18px;
margin-bottom: 20px;
}
.touch-hero-card {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
padding: 24px 26px 26px;
border-radius: 32px;
}
.touch-kicker {
width: fit-content;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1d4ed8;
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.42);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.touch-farm-name {
margin: 0 0 10px;
font-size: clamp(2.15rem, 3vw, 3.35rem);
font-weight: 800;
letter-spacing: -0.045em;
color: var(--touch-ink);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.48);
}
.touch-subtitle {
max-width: 56ch;
font-size: 1.02rem;
line-height: 1.55;
color: rgba(9, 19, 33, 0.72);
}
.touch-clock-card {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
padding: 22px 24px;
border-radius: 32px;
text-align: right;
}
.touch-clock-time {
font-size: clamp(2.5rem, 4vw, 4.2rem);
font-weight: 800;
letter-spacing: -0.06em;
line-height: 1;
color: var(--touch-ink);
font-variant-numeric: tabular-nums;
}
.touch-clock-date {
margin-top: 6px;
font-size: 1rem;
color: rgba(9, 19, 33, 0.72);
}
.touch-clock-meta {
margin-top: 10px;
font-size: 0.9rem;
color: var(--touch-ink-faint);
}
.touch-brief-strip {
margin-bottom: 20px;
}
.touch-brief-card {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.95fr);
gap: 18px;
align-items: stretch;
padding: 22px 24px;
border-radius: 30px;
}
.touch-brief-copy {
min-width: 0;
}
.touch-brief-summary {
margin-top: 8px;
max-width: 58ch;
font-size: 1rem;
line-height: 1.55;
color: rgba(9, 19, 33, 0.74);
}
.touch-brief-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
}
.touch-brief-actions .btn {
min-height: 54px;
padding-inline: 18px;
font-weight: 700;
}
.touch-brief-stack {
display: flex;
flex-direction: column;
gap: 12px;
}
.touch-brief-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.touch-brief-metric {
display: flex;
flex-direction: column;
gap: 4px;
min-height: 90px;
padding: 14px;
border-radius: 20px;
}
.touch-brief-metric span {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(9, 19, 33, 0.6);
}
.touch-brief-metric strong {
font-size: 1rem;
line-height: 1.3;
color: var(--touch-ink);
}
.touch-brief-metric-danger {
--touch-accent-rgb: 248, 113, 113;
}
.touch-brief-metric-warning {
--touch-accent-rgb: 250, 204, 21;
}
.touch-brief-metric-info {
--touch-accent-rgb: 59, 130, 246;
}
.touch-brief-metric-success {
--touch-accent-rgb: 16, 185, 129;
}
.touch-brief-highlights {
display: grid;
gap: 10px;
}
.touch-brief-highlight {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-radius: 20px;
}
.touch-brief-highlight i {
font-size: 1.1rem;
margin-top: 2px;
color: rgba(var(--touch-accent-rgb), 1);
}
.touch-brief-highlight-title {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(9, 19, 33, 0.58);
}
.touch-brief-highlight-value {
margin-top: 2px;
font-size: 0.95rem;
font-weight: 700;
color: var(--touch-ink);
}
.touch-brief-highlight-detail {
margin-top: 3px;
font-size: 0.86rem;
line-height: 1.4;
color: rgba(9, 19, 33, 0.72);
}
.touch-brief-highlight-danger {
--touch-accent-rgb: 248, 113, 113;
}
.touch-brief-highlight-warning {
--touch-accent-rgb: 250, 204, 21;
}
.touch-brief-highlight-info {
--touch-accent-rgb: 59, 130, 246;
}
.touch-brief-highlight-success {
--touch-accent-rgb: 16, 185, 129;
}
.touch-dashboard .btn {
position: relative;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.46);
background: rgba(255, 255, 255, 0.28);
color: var(--touch-ink);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 10px 24px rgba(15, 23, 42, 0.08);
font-weight: 700;
transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.touch-dashboard .btn:hover {
color: var(--touch-ink);
background: rgba(255, 255, 255, 0.42);
border-color: rgba(255, 255, 255, 0.62);
}
.touch-dashboard .btn:active {
transform: translateY(1px);
}
.touch-dashboard .btn-primary {
color: #ffffff;
border-color: rgba(255, 255, 255, 0.22);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.86) 0%, rgba(96, 165, 250, 0.72) 100%);
}
.touch-dashboard .btn-primary:hover {
color: #ffffff;
background: linear-gradient(135deg, rgba(29, 78, 216, 0.9) 0%, rgba(96, 165, 250, 0.78) 100%);
}
.touch-dashboard .btn-outline-primary {
color: #0b4aa2;
}
.touch-dashboard .badge {
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.56) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
.touch-refresh-btn {
margin-top: 14px;
min-height: 56px;
min-width: 180px;
align-self: flex-end;
}
.touch-alert-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
margin-bottom: 20px;
}
.touch-alert {
display: flex;
gap: 14px;
align-items: flex-start;
min-height: 104px;
padding: 16px 18px;
border-radius: 24px;
}
.touch-alert i {
font-size: 1.4rem;
margin-top: 1px;
}
.touch-alert-success {
border-color: rgba(187, 247, 208, 0.55);
}
.touch-alert-warning {
border-color: rgba(253, 230, 138, 0.5);
}
.touch-alert-danger {
border-color: rgba(252, 165, 165, 0.54);
}
.touch-alert-title {
font-weight: 700;
color: var(--touch-ink);
}
.touch-alert-text {
font-size: 0.92rem;
line-height: 1.45;
color: rgba(9, 19, 33, 0.72);
}
.touch-status-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 16px;
margin-bottom: 20px;
align-items: stretch;
}
.touch-content-grid {
display: grid;
grid-template-columns: 1.35fr 1fr 1fr;
gap: 16px;
align-items: stretch;
}
.touch-panel {
min-width: 0;
padding: 20px;
border-radius: 30px;
}
.touch-panel-feature {
padding-bottom: 22px;
}
.touch-panel-wide {
min-width: 0;
}
.touch-panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
}
.touch-panel-label {
width: fit-content;
margin-bottom: 8px;
padding: 6px 10px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #4f5f74;
background: rgba(255, 255, 255, 0.26);
border: 1px solid rgba(255, 255, 255, 0.38);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44);
}
.touch-panel-title {
margin: 0;
font-size: 1.34rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--touch-ink);
}
.touch-link-btn {
min-height: 52px;
padding-inline: 18px;
}
.touch-weather-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
}
.touch-weather-card {
padding: 14px;
border-radius: 22px;
}
.touch-weather-station {
font-weight: 700;
color: var(--touch-ink);
}
.touch-weather-main {
margin-top: 10px;
font-size: 2.15rem;
font-weight: 800;
letter-spacing: -0.05em;
color: #1055b5;
}
.touch-weather-meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 6px;
font-size: 0.92rem;
color: rgba(9, 19, 33, 0.72);
}
.touch-weather-foot {
display: flex;
justify-content: space-between;
gap: 8px;
margin-top: 10px;
font-size: 0.84rem;
color: var(--touch-ink-faint);
}
.touch-stat-cluster {
display: grid;
grid-template-columns: 160px 1fr;
gap: 16px;
align-items: stretch;
}
.touch-big-stat {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 16px;
border-radius: 24px;
}
.touch-big-stat-value {
font-size: 2.6rem;
font-weight: 800;
letter-spacing: -0.05em;
color: #1055b5;
}
.touch-big-stat-label {
font-size: 0.95rem;
color: rgba(9, 19, 33, 0.72);
}
.touch-mini-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.touch-mini-stats-stack {
grid-template-columns: 1fr;
}
.touch-mini-stat {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
border-radius: 20px;
color: rgba(9, 19, 33, 0.74);
}
.touch-mini-stat strong {
font-size: 1.3rem;
letter-spacing: -0.03em;
color: var(--touch-ink);
}
.touch-action-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 14px;
}
.touch-action-row .btn {
min-height: 54px;
padding-inline: 18px;
font-weight: 700;
}
.touch-action-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 14px;
}
.touch-action-tile {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 10px;
min-height: 132px;
padding: 18px;
border-radius: 24px;
color: var(--touch-ink);
text-decoration: none;
}
.touch-action-tile i {
font-size: 1.6rem;
color: rgba(var(--touch-accent-rgb), 1);
}
.touch-action-tile span {
font-weight: 700;
}
.touch-action-tile:hover {
color: var(--touch-ink);
transform: translateY(-2px);
border-color: var(--touch-border-strong);
}
.touch-action-primary {
color: #ffffff;
background: linear-gradient(135deg, rgba(29, 78, 216, 0.84) 0%, rgba(96, 165, 250, 0.64) 100%);
border-color: rgba(255, 255, 255, 0.2);
}
.touch-action-primary i {
color: rgba(219, 234, 254, 0.98);
}
.touch-action-primary:hover {
color: #ffffff;
}
.touch-list-block + .touch-list-block {
margin-top: 16px;
}
.touch-list-heading {
margin: 0 0 10px;
font-size: 0.98rem;
font-weight: 800;
color: var(--touch-ink);
}
.touch-list,
.touch-news-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.touch-list-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
border-radius: 20px;
color: rgba(9, 19, 33, 0.72);
}
.touch-task-mini-stats {
margin-top: 10px;
}
.touch-task-row,
.touch-task-meta-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.touch-task-meta-row {
font-size: 0.85rem;
color: var(--touch-ink-faint);
}
.touch-task-pill {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
white-space: nowrap;
background: rgba(255, 255, 255, 0.5);
color: #405264;
}
.touch-task-pill-warning {
background: rgba(253, 224, 71, 0.32);
color: #7c5800;
}
.touch-task-pill-danger {
background: rgba(248, 113, 113, 0.2);
color: #9f1239;
}
.touch-news-item {
display: flex;
flex-direction: column;
gap: 8px;
padding: 14px;
border-radius: 22px;
color: var(--touch-ink);
text-decoration: none;
}
.touch-news-item:hover {
color: var(--touch-ink);
transform: translateY(-2px);
border-color: var(--touch-border-strong);
}
.touch-news-topline {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: center;
color: var(--touch-ink-faint);
}
.touch-news-summary {
font-size: 0.92rem;
color: rgba(9, 19, 33, 0.72);
}
.touch-empty-state,
.touch-empty-inline {
padding: 16px;
border-radius: 20px;
border-style: dashed;
border-color: rgba(255, 255, 255, 0.52);
color: var(--touch-ink-faint);
}
.touch-empty-inline {
padding: 12px 14px;
}
@media (prefers-reduced-motion: reduce) {
.touch-liquid-surface,
.touch-dashboard .btn,
.touch-action-tile,
.touch-news-item {
transition: none;
}
}
/* --- Farm news --- */
.news-hero {
background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
}
.news-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.news-card {
border: 1px solid #e4edf5;
}
.news-card-title {
margin-bottom: 10px;
font-size: 1.1rem;
line-height: 1.35;
color: #0f172a;
}
.news-source-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.news-source-item {
padding-bottom: 14px;
border-bottom: 1px solid #e9eef5;
}
.news-source-item:last-child {
padding-bottom: 0;
border-bottom: none;
}
/* --- Compliance workboard --- */
.ops-hero {
background: linear-gradient(135deg, #f7fbff 0%, #ffffff 100%);
}
.ops-metric-card {
height: 100%;
padding: 18px;
border: 1px solid #dbe7f3;
border-radius: 12px;
background: #ffffff;
}
.ops-metric-label {
margin-bottom: 6px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
}
.ops-metric-value {
font-size: 2rem;
font-weight: 700;
line-height: 1;
color: #0f172a;
}
.ops-jump-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 12px;
}
.ops-jump-link {
display: block;
padding: 12px 14px;
border: 1px solid #dbe7f3;
border-radius: 10px;
background: #ffffff;
color: #1d4ed8;
font-weight: 600;
text-decoration: none;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.ops-jump-link:hover {
border-color: #b7ccdf;
background: #f8fbff;
color: #1e40af;
}
.ops-section-card {
border: 1px solid #dbe7f3;
border-radius: 12px;
background: #ffffff;
overflow: hidden;
scroll-margin-top: 16px;
}
.ops-section-card > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 18px;
background: #f8fbff;
}
.ops-section-card > summary::-webkit-details-marker {
display: none;
}
.ops-section-card[open] > summary {
border-bottom: 1px solid #e4edf5;
}
.ops-section-heading {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 700;
color: #0f172a;
}
.ops-section-summary {
font-size: 0.88rem;
color: #64748b;
text-align: right;
}
.ops-section-body {
padding: 18px;
}
.ops-form-card {
padding: 16px;
border: 1px solid #e4edf5;
border-radius: 12px;
background: #fbfdff;
}
.ops-more-fields {
border: 1px dashed #cbd5e1;
border-radius: 10px;
padding: 10px 12px;
background: #ffffff;
}
.ops-more-fields > summary {
cursor: pointer;
font-size: 0.9rem;
font-weight: 600;
color: #475569;
}
.ops-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.ops-list-item {
padding: 14px;
border: 1px solid #e4edf5;
border-radius: 10px;
background: #ffffff;
}
.ops-empty-state {
padding: 18px;
border: 1px dashed #cbd5e1;
border-radius: 10px;
background: #fafcff;
color: #64748b;
}
/* --- Asset tasks --- */
.asset-task-shell {
padding: 24px;
}
.asset-task-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.asset-task-heading h1 {
margin: 0;
font-size: 1.8rem;
color: #111827;
}
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
color: #64748b;
font-size: 0.75rem;
font-weight: 700;
}
.asset-task-layout {
display: grid;
grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.asset-task-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-bottom: 18px;
}
.asset-task-stat {
border: 1px solid #d7e2ea;
border-radius: 8px;
background: #fff;
padding: 12px 14px;
}
.asset-task-stat span {
display: block;
color: #111827;
font-size: 1.5rem;
font-weight: 800;
line-height: 1.1;
}
.asset-task-stat small {
color: #64748b;
font-weight: 700;
}
.asset-task-stat-overdue span {
color: #dc3545;
}
.asset-task-sidebar {
display: flex;
flex-direction: column;
gap: 14px;
}
.asset-task-panel,
.asset-task-calendar-wrap {
border: 1px solid #d7e2ea;
border-radius: 8px;
background: #fff;
padding: 16px;
}
.asset-task-panel h2,
.asset-task-panel h3 {
margin: 0 0 12px;
font-size: 1rem;
color: #111827;
}
.asset-task-panel h3 {
font-size: 0.85rem;
}
.asset-task-hidden {
display: none;
}
.asset-weekday-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
font-size: 0.85rem;
}
.asset-assignment-picker {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 180px;
overflow: auto;
padding: 8px;
border: 1px solid #d7e2ea;
border-radius: 8px;
}
.asset-assignment-picker label {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 0.9rem;
}
.employee-drag-pool {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.employee-chip {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid #b7c6d4;
border-radius: 8px;
background: #f7fafc;
color: #1f2937;
padding: 6px 8px;
cursor: grab;
font-size: 0.85rem;
}
.employee-chip span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 8px;
background: #0d6efd;
color: #fff;
font-weight: 700;
font-size: 0.7rem;
}
.employee-chip:active {
cursor: grabbing;
}
.asset-drop-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.asset-drop-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
width: 100%;
border: 1px solid #d7e2ea;
border-radius: 8px;
background: #f8fafc;
color: #111827;
padding: 9px 10px;
text-align: left;
}
.asset-drop-item span {
font-weight: 700;
}
.asset-drop-item small {
color: #64748b;
}
.asset-drop-item.asset-task-drop-target {
background: #ecfdf3;
border-color: #198754;
}
.asset-task-calendar-wrap {
min-width: 0;
}
.asset-task-calendar-wrap .fc {
font-size: 0.92rem;
}
.asset-task-calendar-wrap .fc-button {
border-radius: 6px !important;
}
.asset-task-status-open {
border-color: #0d6efd !important;
}
.asset-task-status-in_progress {
border-color: #198754 !important;
}
.asset-task-status-completed {
opacity: 0.72;
text-decoration: line-through;
}
.asset-task-status-cancelled {
opacity: 0.55;
text-decoration: line-through;
}
.asset-task-overdue {
border-color: #dc3545 !important;
}
.asset-task-drop-target {
outline: 2px solid #198754;
outline-offset: 2px;
}
.asset-task-meta {
display: flex;
flex-direction: column;
gap: 6px;
color: #475569;
font-size: 0.85rem;
}
.asset-task-status-pill,
.asset-task-assignee {
display: inline-flex;
align-items: center;
width: fit-content;
gap: 6px;
border-radius: 8px;
padding: 3px 8px;
background: #eef2f7;
color: #1f2937;
text-transform: capitalize;
}
.asset-task-notes {
margin: 12px 0 0;
color: #334155;
}
.asset-task-assignee-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.asset-task-assignee-completed {
background: #d1e7dd;
color: #0f5132;
}
.asset-task-assignee-in_progress {
background: #fff3cd;
color: #664d03;
}
.asset-task-badge-tooltip {
border: none;
border-radius: 999px;
background: #0d6efd;
color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
font-weight: 700;
padding: 2px 7px;
}
.asset-task-badge-tooltip.asset-task-badge-overdue {
background: #dc3545;
}
.feature-action-items {
border-top: 1px solid #e5e7eb;
padding-top: 10px;
}
.feature-action-items-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 8px;
}
.feature-action-item {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 0.82rem;
}
.feature-action-item span {
color: #64748b;
white-space: nowrap;
}
/* Responsive sidebar collapse */
@media (max-width: 768px) {
body.map-page {
--map-sidebar-offset: 78px;
}
.asset-task-layout {
grid-template-columns: 1fr;
}
.asset-task-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.asset-task-shell {
padding: 16px;
}
.asset-task-heading {
align-items: flex-start;
flex-direction: column;
}
.ops-section-card > summary {
flex-direction: column;
align-items: flex-start;
}
.ops-section-summary {
text-align: left;
}
.touch-topbar,
.touch-brief-card,
.touch-status-grid,
.touch-content-grid,
.touch-stat-cluster {
grid-template-columns: 1fr;
}
.touch-dashboard {
padding: 14px;
}
.touch-hero-card,
.touch-clock-card,
.touch-panel {
border-radius: 24px;
}
.touch-clock-card {
align-items: flex-start;
text-align: left;
}
.touch-refresh-btn {
align-self: flex-start;
}
.touch-brief-card {
gap: 14px;
padding: 18px;
}
.touch-brief-grid {
grid-template-columns: 1fr;
}
.touch-brief-actions .btn {
width: 100%;
}
.touch-action-grid,
.touch-mini-stats {
grid-template-columns: 1fr;
}
.pos-topbar {
flex-direction: column;
align-items: flex-start;
}
#sidebar {
width: 78px;
}
#main-content {
margin-left: 78px;
}
.sidebar-header {
justify-content: center;
padding-inline: 10px;
}
.sidebar-toggle,
.sidebar-brand-text,
.sidebar-section-title,
.nav-label,
.sidebar-user-meta,
.sidebar-user-chev,
.sidebar-logout .nav-label {
display: none;
}
#sidebar .nav-link {
justify-content: center;
padding-left: 0.72rem;
padding-right: 0.72rem;
}
#sidebar .nav-link:hover {
padding-left: 0.72rem;
transform: none;
}
.sidebar-user,
.sidebar-logout {
justify-content: center;
}
.sidebar-rail-handle {
opacity: 1;
pointer-events: auto;
left: 86px;
}
}
/* =========================================================================
Map HUD — Age of Empires overlay
========================================================================= */
/* ── HUD widget rail ────────────────────────────────────────────────────── */
.map-hud-widgets {
position: fixed;
top: var(--hud-safe-edge);
right: var(--hud-safe-edge);
left: calc(var(--map-sidebar-offset, 240px) + var(--hud-safe-edge));
max-width: calc(100vw - var(--map-sidebar-offset, 240px) - (var(--hud-safe-edge) * 2));
z-index: var(--z-hud-base);
pointer-events: none;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-end;
gap: 10px;
}
body.map-page .map-hud-widgets {
left: calc(var(--map-sidebar-offset, 240px) + 16px);
}
/* ── Daylight widget ────────────────────────────────────────────────────── */
.map-daylight-indicator {
position: relative;
top: auto;
left: auto;
z-index: auto;
pointer-events: auto;
flex: 0 0 auto;
max-width: min(100%, 360px);
}
.map-daylight-card {
--lg-phase-accent: #fbbf24;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 18px;
background: var(--lg-bg-strong);
border: var(--lg-border);
box-shadow: var(--lg-shadow-soft);
backdrop-filter: var(--lg-blur);
-webkit-backdrop-filter: var(--lg-blur);
color: var(--lg-text);
pointer-events: auto;
white-space: nowrap;
line-height: 1.2;
transition: box-shadow var(--dur-base) var(--ease-out-quart);
}
.map-daylight-card[data-phase="day"] { --lg-phase-accent: #fbbf24; }
.map-daylight-card[data-phase="dawn"] { --lg-phase-accent: #fb923c; }
.map-daylight-card[data-phase="dusk"] { --lg-phase-accent: #f97316; }
.map-daylight-card[data-phase="night"]{ --lg-phase-accent: #a5b4fc; }
.map-daylight-card[data-phase="day"] { box-shadow: 0 10px 28px rgba(251, 191, 36, 0.14), var(--lg-shadow-soft); }
.map-daylight-card[data-phase="dawn"] { box-shadow: 0 10px 28px rgba(251, 146, 60, 0.18), var(--lg-shadow-soft); }
.map-daylight-card[data-phase="dusk"] { box-shadow: 0 10px 28px rgba(249, 115, 22, 0.2), var(--lg-shadow-soft); }
.map-daylight-card[data-phase="night"] { box-shadow: 0 10px 28px rgba(99, 102, 241, 0.16), var(--lg-shadow-soft); }
/* Glyph holder */
.map-daylight-glyph {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: color-mix(in srgb, var(--lg-phase-accent) 14%, transparent);
color: var(--lg-phase-accent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lg-phase-accent) 24%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition: color var(--dur-slow) var(--ease-out-quart),
background var(--dur-slow) var(--ease-out-quart),
box-shadow var(--dur-slow) var(--ease-out-quart);
}
.map-daylight-glyph svg { display: block; }
/* Primary column: time + date */
.map-daylight-primary {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.map-daylight-time {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.02em;
color: #f8fafc;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.map-daylight-date {
font-size: 0.7rem;
font-weight: 500;
color: rgba(226, 232, 240, 0.62);
letter-spacing: 0.02em;
line-height: 1.2;
}
/* Vertical rule between sections */
.map-daylight-rule {
flex: 0 0 auto;
width: 1px;
height: 32px;
background: rgba(255, 255, 255, 0.14);
margin: 0 2px;
}
/* Secondary column: phase + sunrise/sunset */
.map-daylight-secondary {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.map-daylight-phase-line {
display: inline-flex;
align-items: baseline;
gap: 6px;
line-height: 1;
}
.map-daylight-phase-label {
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--lg-phase-accent);
}
.map-daylight-phase-pct {
font-size: 0.78rem;
font-weight: 600;
color: rgba(241, 245, 249, 0.9);
font-variant-numeric: tabular-nums;
}
.map-daylight-phase-pct::before {
content: '·';
margin-right: 5px;
color: rgba(255, 255, 255, 0.32);
font-weight: 600;
}
.map-daylight-sun-line {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.7rem;
color: rgba(226, 232, 240, 0.78);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.map-daylight-sun-time {
display: inline-flex;
align-items: center;
gap: 4px;
}
.map-daylight-sun-time svg {
color: var(--lg-phase-accent);
opacity: 0.85;
}
/* Loading + unavailable states */
.map-daylight-card-loading,
.map-daylight-card-unavailable {
padding: 10px 14px;
}
.map-daylight-card-loading {
gap: 10px;
}
.map-daylight-spinner {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.18);
border-top-color: var(--lg-phase-accent);
animation: map-daylight-spin 0.8s linear infinite;
}
.map-daylight-loading-copy,
.map-daylight-unavailable-text {
font-size: 0.78rem;
line-height: 1.3;
color: rgba(226, 232, 240, 0.85);
font-weight: 500;
}
@keyframes map-daylight-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ── HUD Top Bar (top-right) ───────────────────────────────────────────── */
.map-hud-bar {
position: relative;
top: auto;
right: auto;
left: auto;
width: auto;
max-width: min(100%, var(--hud-safe-width));
min-width: 0;
flex: 1 1 520px;
margin-left: auto;
z-index: auto;
pointer-events: none;
}
body.map-page .map-hud-bar {
left: auto;
}
.hud-chips {
display: flex;
gap: 12px; /* gap between clusters; chips inside use 6px */
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-start;
pointer-events: auto;
}
/* Chip cluster — visually groups related chips with a hairline separator
sitting on the gap. The separator is rendered via ::before on the next
cluster so it disappears cleanly on wrap. */
.hud-chip-cluster {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
position: relative;
}
.hud-chip-cluster + .hud-chip-cluster::before {
content: "";
align-self: center;
width: 1px;
height: 20px;
margin: 0 6px 0 -3px;
background: linear-gradient(180deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.18) 50%,
rgba(255, 255, 255, 0) 100%);
flex: 0 0 auto;
}
.hud-chip {
position: relative;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: var(--lg-bg);
backdrop-filter: var(--lg-blur-soft);
-webkit-backdrop-filter: var(--lg-blur-soft);
border: var(--lg-border);
border-radius: var(--lg-radius-pill);
color: var(--lg-text);
font-size: var(--text-13);
line-height: 1.45;
font-weight: 500;
font-variant-numeric: tabular-nums;
cursor: pointer;
user-select: none;
box-shadow: var(--lg-shadow-soft);
transition:
background var(--dur-fast) var(--ease-glass),
border-color var(--dur-fast) var(--ease-glass),
transform var(--dur-fast) var(--ease-glass),
box-shadow var(--dur-fast) var(--ease-glass);
white-space: nowrap;
}
.hud-chip:hover {
background: rgba(40, 42, 50, 0.78); /* 55% → 75% opacity per spec */
border-color: rgba(255, 255, 255, 0.28);
transform: translateY(-2px); /* lift 2px */
box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.hud-chip:active {
background: rgba(40, 42, 50, 0.85);
border-color: rgba(255, 255, 255, 0.32);
transform: translateY(-1px);
}
.hud-chip i {
font-size: 0.9rem;
opacity: 0.85;
}
.hud-chip-danger {
border-color: rgba(220, 53, 69, 0.5);
}
.hud-chip-danger:hover {
border-color: rgba(220, 53, 69, 0.8);
}
.hud-chip-bell {
padding: 6px 10px;
}
/* ── HUD Dropdowns ─────────────────────────────────────────────────────── */
.hud-dropdown {
position: fixed;
top: 0;
left: 0;
box-sizing: border-box;
min-width: min(320px, var(--hud-safe-width));
width: max-content;
max-width: min(720px, var(--hud-safe-width));
height: auto;
overflow: visible;
background: var(--lg-bg-hud);
backdrop-filter: var(--lg-blur);
-webkit-backdrop-filter: var(--lg-blur);
border: var(--lg-border-hud);
border-radius: var(--lg-radius);
padding: 14px;
box-shadow: var(--lg-shadow-hud);
color: var(--lg-text);
font-size: 0.82rem;
z-index: var(--z-hud-dropdown);
display: block;
opacity: 0;
transform: scale(0.94) translateY(-8px);
pointer-events: none;
transform-origin: top right;
transition: opacity var(--dur-fast) var(--ease-out-quart),
transform var(--dur-base) var(--ease-spring);
}
.hud-dropdown.lg-open {
opacity: 1;
transform: scale(1) translateY(0);
pointer-events: auto;
}
.hud-dropdown-measuring {
visibility: hidden !important;
opacity: 0 !important;
transform: none !important;
transition: none !important;
pointer-events: none !important;
}
.hud-dropdown-opens-up {
transform: scale(0.94) translateY(8px);
}
.hud-dropdown-opens-up.lg-open {
transform: scale(1) translateY(0);
}
.hud-dropdown-fit-compact {
padding: 10px;
font-size: 0.78rem;
}
.hud-dropdown-fit-compact .hud-widget-hero {
padding: 10px;
margin-bottom: 8px;
gap: 8px;
}
.hud-dropdown-fit-compact .hud-widget-hero-icon {
width: 32px;
height: 32px;
border-radius: 10px;
}
.hud-dropdown-fit-compact .hud-weather-station {
padding: 7px 0;
}
.hud-dropdown-fit-compact .hud-weather-current-row,
.hud-dropdown-fit-compact .hud-weather-headline,
.hud-dropdown-fit-compact .hud-weather-guidance-list,
.hud-dropdown-fit-compact .hud-weather-alert-list {
margin-top: 6px;
}
.hud-dropdown-fit-compact .hud-weather-summary-grid,
.hud-dropdown-fit-compact .hud-weather-metrics-grid,
.hud-dropdown-fit-compact .hud-sensor-grid,
.hud-dropdown-fit-compact .hud-people-grid,
.hud-dropdown-fit-compact .hud-comp-tiles,
.hud-dropdown-fit-compact .hud-task-legend {
gap: 6px;
}
.hud-dropdown-contained {
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
-webkit-overflow-scrolling: touch;
}
.hud-dropdown-wide-flow {
width: min(920px, var(--hud-safe-width));
max-width: min(920px, var(--hud-safe-width));
}
.hud-dropdown-wide-flow .hud-weather-summary-grid,
.hud-dropdown-wide-flow .hud-weather-metrics-grid,
.hud-dropdown-wide-flow .hud-task-legend,
.hud-dropdown-wide-flow .hud-comp-tiles,
.hud-dropdown-wide-flow .hud-people-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.hud-dropdown-right {
right: auto;
}
.hud-dd-title {
font-weight: 600;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #999;
margin-bottom: 8px;
padding-bottom: 4px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hud-dd-row {
padding: 6px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.hud-dd-row:last-child {
border-bottom: none;
}
.hud-dd-row-sm {
padding: 3px 0;
font-size: 0.8rem;
}
.hud-dd-stats {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 2px;
font-size: 0.78rem;
}
.hud-dd-stats-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 6px 0;
}
.hud-dd-temp {
font-weight: 600;
font-size: 0.9rem;
}
.hud-dd-empty {
padding: 12px 4px;
color: #888;
text-align: center;
}
.hud-dd-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.hud-people-list {
/* Legacy class — kept for any callers; the new avatar grid handles size. */
}
.hud-status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
vertical-align: middle;
margin-right: 4px;
}
/* Live indicator — small pulsing ring used in chip dropdowns and tiles to
signal that data on the surface refreshes in real time. Pure CSS, GPU-cheap. */
.lg-live-dot {
position: relative;
display: inline-flex;
width: 8px;
height: 8px;
flex: 0 0 auto;
vertical-align: middle;
}
.lg-live-dot::before,
.lg-live-dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
}
.lg-live-dot::before {
background: var(--success);
box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}
.lg-live-dot::after {
border: 1.5px solid var(--success);
opacity: 0.8;
animation: lg-live-pulse 2s var(--ease-glass) infinite;
}
@keyframes lg-live-pulse {
0% { transform: scale(1); opacity: 0.4; }
50% { transform: scale(2.4); opacity: 1; }
100% { transform: scale(2.4); opacity: 0; }
}
.lg-live-dot[data-tone="warning"]::before { background: var(--warning); box-shadow: 0 0 6px rgba(245, 158, 11, 0.6); }
.lg-live-dot[data-tone="warning"]::after { border-color: var(--warning); }
.lg-live-dot[data-tone="danger"]::before { background: var(--danger); box-shadow: 0 0 6px rgba(239, 68, 68, 0.6); }
.lg-live-dot[data-tone="danger"]::after { border-color: var(--danger); }
.lg-live-dot[data-tone="muted"]::before { background: var(--slate-400); box-shadow: none; }
.lg-live-dot[data-tone="muted"]::after { display: none; }
@media (prefers-reduced-motion: reduce) {
.lg-live-dot::after { animation: none; opacity: 0; }
}
#hud-dd-weather {
min-width: min(620px, var(--hud-safe-width));
width: min(820px, var(--hud-safe-width));
max-width: min(820px, var(--hud-safe-width));
}
#hud-dd-alerts {
min-width: min(520px, var(--hud-safe-width));
width: min(720px, var(--hud-safe-width));
max-width: min(720px, var(--hud-safe-width));
}
#hud-dd-fleet,
#hud-dd-sensors {
min-width: min(460px, var(--hud-safe-width));
width: min(660px, var(--hud-safe-width));
max-width: min(660px, var(--hud-safe-width));
}
#hud-dd-tasks,
#hud-dd-people,
#hud-dd-compliance {
min-width: min(380px, var(--hud-safe-width));
width: min(520px, var(--hud-safe-width));
max-width: min(520px, var(--hud-safe-width));
}
#hud-dd-jarvis {
min-width: min(420px, var(--hud-safe-width));
width: min(560px, var(--hud-safe-width));
max-width: min(560px, var(--hud-safe-width));
}
#hud-dd-location,
#hud-dd-layers {
min-width: min(300px, var(--hud-safe-width));
width: min(380px, var(--hud-safe-width));
max-width: min(380px, var(--hud-safe-width));
overflow: visible;
padding: 14px;
}
#hud-dd-location .hud-utility-note,
#hud-dd-layers .hud-utility-note {
margin-bottom: 12px;
}
#hud-dd-location .hud-utility-status,
#hud-dd-layers .hud-layer-summary-grid {
margin-bottom: 12px;
}
.hud-weather-summary-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-bottom: 10px;
}
.hud-weather-summary-item,
.hud-weather-metric,
.hud-weather-guidance {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 12px;
}
.hud-weather-summary-item {
padding: 8px 10px;
}
.hud-weather-summary-item strong {
display: block;
margin-top: 4px;
color: #f8fafc;
font-size: 0.92rem;
}
.hud-weather-summary-item strong i {
opacity: 0.8;
}
.hud-weather-summary-label,
.hud-weather-metric span,
.hud-weather-guidance-title {
display: block;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(203, 213, 225, 0.72);
}
.hud-weather-station {
padding: 10px 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hud-weather-station:first-of-type {
border-top: none;
}
.hud-weather-station-head,
.hud-weather-current-row,
.hud-weather-guidance-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.hud-weather-station-name {
font-size: 0.95rem;
font-weight: 700;
color: #f8fafc;
display: flex;
align-items: center;
gap: 6px;
}
.hud-weather-station-name i { color: #93c5fd; }
.hud-weather-station-subtitle,
.hud-weather-sync,
.hud-weather-headline,
.hud-weather-guidance-detail {
color: rgba(203, 213, 225, 0.78);
}
.hud-weather-station-subtitle,
.hud-weather-sync,
.hud-weather-guidance-detail {
font-size: 0.72rem;
}
.hud-weather-current-row {
margin-top: 8px;
}
.hud-weather-current-temp {
font-size: 1.45rem;
font-weight: 700;
color: #f8fafc;
line-height: 1;
}
.hud-weather-current-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
}
.hud-weather-metrics-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 8px;
}
.hud-weather-metric {
padding: 8px 10px;
}
.hud-weather-metric strong {
display: block;
margin-top: 3px;
color: #f8fafc;
font-size: 0.88rem;
line-height: 1.2;
}
.hud-weather-metrics-grid-outlook .hud-weather-metric {
background: rgba(14, 116, 144, 0.18);
}
.hud-weather-headline {
margin-top: 8px;
font-size: 0.78rem;
line-height: 1.35;
}
.hud-weather-guidance-list,
.hud-weather-alert-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.hud-weather-guidance {
padding: 8px 10px;
}
.hud-weather-guidance-header strong {
color: #f8fafc;
font-size: 0.84rem;
text-align: right;
}
.hud-weather-guidance-info {
border-color: rgba(56, 189, 248, 0.22);
}
.hud-weather-guidance-warning {
border-color: rgba(251, 191, 36, 0.28);
background: rgba(251, 191, 36, 0.08);
}
.hud-weather-guidance-danger {
border-color: rgba(239, 68, 68, 0.28);
background: rgba(239, 68, 68, 0.08);
}
.hud-weather-alert,
.hud-weather-sync-error {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 10px;
border-radius: 12px;
font-size: 0.76rem;
line-height: 1.35;
}
.hud-weather-alert {
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.2);
color: rgba(254, 226, 226, 0.96);
}
.hud-weather-alert-warning {
background: rgba(251, 191, 36, 0.08);
border-color: rgba(251, 191, 36, 0.22);
color: rgba(254, 243, 199, 0.96);
}
.hud-weather-sync-error {
margin-top: 8px;
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.22);
color: rgba(254, 226, 226, 0.96);
}
.hud-weather-station-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
}
.hud-weather-station-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.7rem;
color: rgba(226, 232, 240, 0.82);
}
.hud-weather-station-badge i {
color: #93c5fd;
}
.hud-weather-more {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 10px;
}
.hud-weather-more-card {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
padding: 9px 10px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.09);
color: #f8fafc;
text-align: left;
cursor: pointer;
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.hud-weather-more-card:hover {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0.09);
border-color: rgba(96, 165, 250, 0.34);
}
.hud-weather-more-name {
display: flex;
align-items: center;
gap: 6px;
font-weight: 700;
font-size: 0.8rem;
}
.hud-weather-more-name i {
color: #93c5fd;
}
.hud-weather-more-meta {
font-size: 0.72rem;
color: rgba(203, 213, 225, 0.72);
}
/* ── Utility Chips ──────────────────────────────────────────────────────── */
.hud-chip-utility {
border-color: rgba(148, 163, 184, 0.24);
}
.hud-chip-utility:hover {
border-color: rgba(148, 163, 184, 0.4);
}
.hud-utility-note {
margin-bottom: 10px;
color: rgba(226, 232, 240, 0.82);
font-size: 0.78rem;
line-height: 1.45;
}
.hud-utility-status {
display: flex;
flex-direction: column;
gap: 2px;
padding: 9px 10px;
border-radius: 12px;
background: rgba(56, 189, 248, 0.1);
border: 1px solid rgba(56, 189, 248, 0.18);
margin-bottom: 10px;
}
.hud-utility-status strong,
.hud-layer-summary-item strong {
color: #f8fafc;
}
.hud-utility-status span,
.hud-layer-summary-item span {
color: rgba(203, 213, 225, 0.78);
}
.hud-utility-status strong {
font-size: 0.82rem;
}
.hud-utility-status span {
font-size: 0.74rem;
line-height: 1.35;
}
.hud-utility-status-warning {
background: rgba(251, 191, 36, 0.08);
border-color: rgba(251, 191, 36, 0.2);
}
.hud-location-preview {
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 10px;
margin-bottom: 10px;
border-radius: 14px;
background: rgba(15, 23, 42, 0.54);
border: 1px solid rgba(148, 163, 184, 0.16);
}
.hud-location-mini-map {
position: relative;
height: 64px;
border-radius: 12px;
overflow: hidden;
display: grid;
place-items: center;
background:
linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(56, 189, 248, 0.12)),
repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.hud-location-gridline {
position: absolute;
background: rgba(226, 232, 240, 0.18);
}
.hud-location-gridline-v {
width: 1px;
height: 100%;
}
.hud-location-gridline-h {
width: 100%;
height: 1px;
}
.hud-location-mini-map i {
position: relative;
z-index: 1;
color: #f8fafc;
font-size: 1rem;
}
.hud-location-pulse {
position: absolute;
width: 26px;
height: 26px;
border-radius: 999px;
background: rgba(56, 189, 248, 0.2);
border: 1px solid rgba(125, 211, 252, 0.5);
animation: hud-location-pulse 1.8s ease-in-out infinite;
}
@keyframes hud-location-pulse {
0%, 100% { transform: scale(0.84); opacity: 0.6; }
50% { transform: scale(1.18); opacity: 1; }
}
.hud-location-coords span {
display: block;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(203, 213, 225, 0.68);
}
.hud-location-coords strong {
display: block;
margin-top: 4px;
font-size: 0.86rem;
font-variant-numeric: tabular-nums;
color: #f8fafc;
overflow-wrap: anywhere;
}
.hud-layer-groups {
display: grid;
gap: 8px;
margin-bottom: 10px;
}
.hud-layer-group {
padding: 8px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.hud-layer-group-title {
margin: 0 2px 6px;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(191, 219, 254, 0.78);
}
.hud-layer-row {
display: grid;
grid-template-columns: 24px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 7px 8px;
border-radius: 10px;
color: rgba(226, 232, 240, 0.82);
}
.hud-layer-row:hover {
background: rgba(255, 255, 255, 0.07);
}
.hud-layer-row i {
color: rgba(147, 197, 253, 0.9);
}
.hud-layer-row span {
min-width: 0;
font-size: 0.78rem;
}
.hud-layer-row strong {
font-size: 0.7rem;
color: #f8fafc;
white-space: nowrap;
}
.hud-widget-hero {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
margin-bottom: 12px;
border-radius: 16px;
background:
radial-gradient(circle at top right, rgba(96, 165, 250, 0.14), transparent 42%),
linear-gradient(135deg, rgba(17, 24, 39, 0.96), rgba(15, 17, 24, 0.9));
border: 1px solid rgba(255, 255, 255, 0.08);
position: relative;
overflow: hidden;
}
.hud-widget-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
transform: translateX(-120%);
animation: hud-widget-sheen 6s ease-in-out infinite;
pointer-events: none;
}
@keyframes hud-widget-sheen {
0%, 68% { transform: translateX(-120%); opacity: 0; }
76% { opacity: 1; }
100% { transform: translateX(120%); opacity: 0; }
}
.hud-widget-hero-danger {
background:
radial-gradient(circle at top right, rgba(248, 113, 113, 0.16), transparent 42%),
linear-gradient(135deg, rgba(28, 16, 16, 0.96), rgba(15, 17, 24, 0.9));
border-color: rgba(248, 113, 113, 0.18);
}
.hud-widget-hero-success {
background:
radial-gradient(circle at top right, rgba(74, 222, 128, 0.16), transparent 42%),
linear-gradient(135deg, rgba(13, 24, 18, 0.96), rgba(15, 17, 24, 0.9));
border-color: rgba(74, 222, 128, 0.16);
}
.hud-widget-hero-warning {
background:
radial-gradient(circle at top right, rgba(251, 191, 36, 0.16), transparent 42%),
linear-gradient(135deg, rgba(33, 24, 8, 0.96), rgba(15, 17, 24, 0.9));
border-color: rgba(251, 191, 36, 0.18);
}
.hud-widget-hero-info {
background:
radial-gradient(circle at top right, rgba(56, 189, 248, 0.16), transparent 42%),
linear-gradient(135deg, rgba(13, 24, 30, 0.96), rgba(15, 17, 24, 0.9));
border-color: rgba(56, 189, 248, 0.16);
}
.hud-widget-hero-head {
display: flex;
align-items: flex-start;
gap: 10px;
position: relative;
z-index: 1;
}
.hud-widget-hero-icon {
width: 38px;
height: 38px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.09);
border: 1px solid rgba(255, 255, 255, 0.12);
flex: 0 0 auto;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.hud-widget-hero-icon i {
font-size: 1.1rem;
color: #e2e8f0;
}
.hud-widget-hero-copy {
flex: 1 1 auto;
min-width: 0;
}
.hud-widget-hero-kicker {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(147, 197, 253, 0.85);
}
.hud-widget-hero-title {
font-size: 0.96rem;
font-weight: 700;
color: #f8fafc;
line-height: 1.3;
margin-top: 2px;
}
.hud-widget-hero-detail {
margin-top: 3px;
font-size: 0.78rem;
line-height: 1.45;
color: rgba(226, 232, 240, 0.74);
}
.hud-widget-hero-status {
flex: 0 0 auto;
align-self: flex-start;
max-width: min(220px, 42%);
padding: 5px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(248, 250, 252, 0.82);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.03em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hud-widget-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
position: relative;
z-index: 1;
}
.hud-widget-hero-action {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
color: #f8fafc;
cursor: pointer;
text-decoration: none;
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.hud-widget-hero-action:hover {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0.14);
border-color: rgba(147, 197, 253, 0.34);
color: #fff;
}
.hud-widget-hero-action i {
font-size: 0.78rem;
opacity: 0.9;
}
.hud-widget-hero-action-link {
background: rgba(59, 130, 246, 0.16);
border-color: rgba(59, 130, 246, 0.34);
}
.hud-widget-hero-action-inline {
margin-top: 2px;
}
@media (max-width: 768px) {
.hud-brief-signal-head {
flex-direction: column;
align-items: flex-start;
}
}
.hud-layer-summary-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-bottom: 10px;
}
.hud-layer-summary-item {
padding: 9px 10px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.11);
}
.hud-layer-summary-item span {
display: block;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.hud-layer-summary-item strong {
display: block;
margin-top: 4px;
font-size: 0.84rem;
line-height: 1.25;
}
.hud-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 9px 12px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
color: #f8fafc;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.hud-action-btn-grow,
.hud-action-btn-inline,
.hud-action-btn-icon {
width: auto;
}
.hud-action-btn-grow {
flex: 1 1 auto;
}
.hud-action-btn-inline {
flex: 0 0 auto;
padding-inline: 14px;
}
.hud-action-btn-icon {
flex: 0 0 auto;
min-width: 42px;
padding-inline: 0;
}
.hud-action-btn-primary {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.32), rgba(37, 99, 235, 0.2));
border-color: rgba(96, 165, 250, 0.34);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px rgba(37, 99, 235, 0.14);
}
.hud-action-btn-success {
background: linear-gradient(135deg, rgba(22, 163, 74, 0.26), rgba(21, 128, 61, 0.14));
border-color: rgba(74, 222, 128, 0.28);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 20px rgba(22, 163, 74, 0.12);
}
.hud-action-btn-danger {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.24), rgba(185, 28, 28, 0.14));
border-color: rgba(252, 165, 165, 0.28);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 20px rgba(185, 28, 28, 0.12);
}
.hud-action-link {
text-decoration: none;
}
.hud-action-btn:hover {
background: rgba(255, 255, 255, 0.13);
border-color: rgba(255, 255, 255, 0.24);
color: #f8fafc;
text-decoration: none;
}
.hud-action-btn-primary:hover {
background: linear-gradient(135deg, rgba(96, 165, 250, 0.38), rgba(37, 99, 235, 0.25));
border-color: rgba(147, 197, 253, 0.4);
}
.hud-action-btn-success:hover {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(21, 128, 61, 0.2));
border-color: rgba(134, 239, 172, 0.34);
}
.hud-action-btn-danger:hover {
background: linear-gradient(135deg, rgba(248, 113, 113, 0.28), rgba(185, 28, 28, 0.2));
border-color: rgba(254, 202, 202, 0.34);
}
.hud-action-btn:focus-visible {
outline: 2px solid rgba(191, 219, 254, 0.78);
outline-offset: 2px;
}
.hud-action-btn:active {
transform: scale(0.98);
}
/* ── Tools Chip & Dropdown ──────────────────────────────────────────────── */
.hud-chip-tools {
border-color: rgba(13, 110, 253, 0.35);
}
.hud-chip-tools:hover {
border-color: rgba(13, 110, 253, 0.6);
}
.hud-tools-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.hud-tools-divider {
grid-column: 1 / -1;
height: 1px;
background: rgba(255, 255, 255, 0.08);
margin: 4px 0;
}
.hud-tool-btn {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
align-items: center;
gap: 8px;
width: 100%;
min-height: 46px;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--lg-text);
font-size: 0.8rem;
border-radius: 12px;
cursor: pointer;
text-align: left;
transition: background 0.18s ease, color 0.18s ease;
}
.hud-tool-btn:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(147, 197, 253, 0.26);
color: #fff;
}
.hud-tool-btn i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.08);
font-size: 0.9rem;
text-align: center;
opacity: 0.8;
}
.hud-tool-btn span {
min-width: 0;
}
.hud-tool-field {
color: #86efac;
}
.hud-tool-field:hover {
color: #bbf7d0;
background: rgba(47, 133, 90, 0.15);
}
/* ── Alert Badge ───────────────────────────────────────────────────────── */
.hud-alert-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
background: #dc3545;
color: #fff;
font-size: 0.65rem;
font-weight: 700;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
line-height: 1;
}
.hud-alert-group {
margin-bottom: 8px;
}
.hud-alert-item {
padding: 4px 0;
font-size: 0.8rem;
}
.hud-alert-urgent {
color: #f8a0a8;
}
.hud-alert-warning {
color: #f0d080;
}
/* Actionable alert row — icon + title/meta + primary link + Ask Jarvis */
.hud-alert-row {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 8px 10px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
margin: 4px 0;
transition: background 0.18s ease, border-color 0.18s ease;
}
.hud-alert-row + .hud-alert-row {
margin-top: 6px;
}
.hud-alert-row:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.12);
}
.hud-alert-row-urgent {
background: rgba(220, 38, 38, 0.12);
border-color: rgba(220, 38, 38, 0.32);
}
.hud-alert-row-urgent:hover {
background: rgba(220, 38, 38, 0.18);
border-color: rgba(220, 38, 38, 0.5);
}
.hud-alert-row-warning {
background: rgba(234, 179, 8, 0.1);
border-color: rgba(234, 179, 8, 0.28);
}
.hud-alert-row-warning:hover {
background: rgba(234, 179, 8, 0.15);
border-color: rgba(234, 179, 8, 0.45);
}
.hud-alert-row-icon {
flex: 0 0 28px;
width: 28px;
height: 28px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
color: #f1f5f9;
font-size: 0.95rem;
}
.hud-alert-row-urgent .hud-alert-row-icon {
background: rgba(220, 38, 38, 0.28);
color: #fee2e2;
}
.hud-alert-row-warning .hud-alert-row-icon {
background: rgba(234, 179, 8, 0.25);
color: #fef3c7;
}
.hud-alert-row-body {
flex: 1 1 auto;
min-width: 0;
}
.hud-alert-row-title {
font-size: 0.82rem;
font-weight: 600;
color: #f1f5f9;
line-height: 1.3;
}
.hud-alert-row-meta {
margin-top: 2px;
font-size: 0.74rem;
color: rgba(226, 232, 240, 0.7);
line-height: 1.35;
}
.hud-alert-row-actions {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.hud-alert-action {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
cursor: pointer;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
color: #f1f5f9;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.hud-alert-action:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.32);
color: #ffffff;
}
.hud-alert-action:active { transform: scale(0.96); }
.hud-alert-action i { font-size: 0.74rem; }
.hud-alert-action-primary {
background: rgba(59, 130, 246, 0.18);
border-color: rgba(59, 130, 246, 0.42);
}
.hud-alert-action-primary:hover {
background: rgba(59, 130, 246, 0.3);
border-color: rgba(59, 130, 246, 0.65);
}
.hud-alert-action-jarvis {
background: rgba(167, 139, 250, 0.18);
border-color: rgba(167, 139, 250, 0.4);
}
.hud-alert-action-jarvis:hover {
background: rgba(167, 139, 250, 0.3);
border-color: rgba(167, 139, 250, 0.65);
}
.hud-alert-action-jarvis i.bi-stars {
color: #ffe4a8;
filter: drop-shadow(0 0 3px rgba(255, 228, 168, 0.55));
}
/* Specific item rows inside an alert (e.g. top overdue tasks, alerted stations) */
.hud-alert-items-list {
margin: 8px 0 4px;
display: flex;
flex-direction: column;
gap: 4px;
}
.hud-alert-item-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 8px;
background: rgba(15, 17, 24, 0.45);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.hud-alert-item-body {
flex: 1 1 auto;
min-width: 0;
}
.hud-alert-item-title {
font-size: 0.78rem;
font-weight: 600;
color: #f1f5f9;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hud-alert-item-meta {
font-size: 0.7rem;
color: rgba(226, 232, 240, 0.6);
line-height: 1.3;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Container for the per-item action buttons (View on Map + Ask Jarvis).
When multiple actions exist they sit side-by-side at the right of the row. */
.hud-alert-item-actions {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 4px;
}
.hud-alert-item-action {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
cursor: pointer;
border: 1px solid rgba(34, 197, 94, 0.4);
background: rgba(34, 197, 94, 0.16);
color: #dcfce7;
transition: background var(--dur-fast) var(--ease-glass),
border-color var(--dur-fast) var(--ease-glass),
transform var(--dur-fast) var(--ease-glass);
}
.hud-alert-item-action:hover {
background: rgba(34, 197, 94, 0.28);
border-color: rgba(34, 197, 94, 0.65);
color: #f0fdf4;
}
.hud-alert-item-action:active { transform: scale(0.95); }
.hud-alert-item-action i { font-size: 0.72rem; }
/* Jarvis variant — indigo tint matches the hud-chip-jarvis chip palette so
the pivot to AI feels like the same surface the user already trusts. */
.hud-alert-item-action-jarvis {
border-color: rgba(129, 140, 248, 0.45);
background: rgba(99, 102, 241, 0.18);
color: #e0e7ff;
}
.hud-alert-item-action-jarvis:hover {
border-color: rgba(165, 180, 252, 0.7);
background: rgba(99, 102, 241, 0.28);
color: #f5f3ff;
}
.hud-alert-item-action-jarvis i {
/* The bi-stars glyph reads better with a soft drop-shadow on dark glass */
filter: drop-shadow(0 0 4px rgba(165, 180, 252, 0.5));
}
/* ── Alert freshness — "new since last visit" treatment ───────────────── */
@keyframes hud-bell-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.0); }
50% { box-shadow: 0 0 0 6px rgba(248, 113, 113, 0.32); }
}
@keyframes hud-bell-pulse-soft {
0%, 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.0); }
50% { box-shadow: 0 0 0 5px rgba(250, 204, 21, 0.25); }
}
.hud-chip-fresh {
animation: hud-bell-pulse 1.8s ease-in-out infinite;
border-color: rgba(248, 113, 113, 0.7);
}
.hud-chip-fresh-soft:not(.hud-chip-fresh) {
animation: hud-bell-pulse-soft 2.2s ease-in-out infinite;
border-color: rgba(250, 204, 21, 0.6);
}
@media (prefers-reduced-motion: reduce) {
.hud-chip-fresh,
.hud-chip-fresh-soft:not(.hud-chip-fresh) { animation: none; }
}
/* "Since last visit" line at the top of the bell dropdown */
.hud-alert-since-line {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
margin: 4px 0 8px;
border-radius: 10px;
font-size: 0.74rem;
color: rgba(226, 232, 240, 0.7);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.hud-alert-since-line i { font-size: 0.85rem; opacity: 0.85; }
.hud-alert-since-line-active {
color: #fef9c3;
background: rgba(250, 204, 21, 0.08);
border-color: rgba(250, 204, 21, 0.32);
}
.hud-alert-since-line-active i { color: #fde68a; }
.hud-alert-since-line-fresh-user {
color: rgba(186, 230, 253, 0.85);
background: rgba(56, 189, 248, 0.08);
border-color: rgba(56, 189, 248, 0.28);
}
/* NEW pill on alert rows / item rows that arrived since lastSeenAt */
.hud-alert-new-pill {
display: inline-block;
margin-right: 6px;
padding: 1px 6px;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.06em;
border-radius: 999px;
text-transform: uppercase;
background: linear-gradient(135deg, #fde68a, #fbbf24);
color: #422006;
vertical-align: middle;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.hud-alert-row-fresh {
position: relative;
border-left: 2px solid rgba(250, 204, 21, 0.7);
padding-left: 8px;
}
.hud-alert-item-row-fresh {
border-color: rgba(250, 204, 21, 0.4);
background: rgba(250, 204, 21, 0.06);
}
/* ── Schedule (one-click create-task) ───────────────────────────────────
Teal accent so it reads distinctly from the green View action — both
sit on positive intent but Schedule is a state-changing commit. Goes
into a loading state during the POST so a double-click can't double-
create. Only renders for admins; viewers never see it. */
.hud-alert-item-action-task {
border-color: rgba(45, 212, 191, 0.45);
background: rgba(20, 184, 166, 0.16);
color: #ccfbf1;
}
.hud-alert-item-action-task:hover {
border-color: rgba(94, 234, 212, 0.7);
background: rgba(20, 184, 166, 0.28);
color: #f0fdfa;
}
.hud-alert-item-action-task i {
filter: drop-shadow(0 0 4px rgba(94, 234, 212, 0.45));
}
.hud-alert-item-action-loading {
pointer-events: none;
opacity: 0.65;
cursor: progress;
}
.hud-alert-item-action-loading i {
animation: hud-action-loading-spin 700ms linear infinite;
}
@keyframes hud-action-loading-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.hud-alert-item-action-loading i { animation: none; }
}
/* ── Snooze affordance ──────────────────────────────────────────────────
Quiet a single alert item the user has acknowledged. Calm slate tone
so it reads as a passive "set aside" action — distinct from the green
View / indigo Ask Jarvis action buttons in the same row. */
.hud-alert-item-action-snooze {
border-color: rgba(148, 163, 184, 0.35);
background: rgba(100, 116, 139, 0.16);
color: #e2e8f0;
}
.hud-alert-item-action-snooze:hover {
border-color: rgba(203, 213, 225, 0.55);
background: rgba(100, 116, 139, 0.28);
color: #f8fafc;
}
.hud-alert-item-action-snooze i { opacity: 0.85; }
/* Row collapse animation when an item is being snoozed. We animate
max-height + opacity so the surrounding list reflows smoothly rather
than jumping. The cubic-bezier matches the rest of the HUD's
--ease-glass curve. */
@keyframes hud-alert-item-snoozing {
0% {
opacity: 1;
transform: translateX(0);
max-height: 80px;
padding-top: 6px;
padding-bottom: 6px;
margin-top: 0;
margin-bottom: 0;
}
60% {
opacity: 0;
transform: translateX(8px);
}
100% {
opacity: 0;
transform: translateX(8px);
max-height: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
border-width: 0;
}
}
.hud-alert-item-row-snoozing {
overflow: hidden;
pointer-events: none;
animation: hud-alert-item-snoozing 280ms var(--ease-glass, cubic-bezier(0.32, 0.72, 0, 1)) forwards;
}
@media (prefers-reduced-motion: reduce) {
.hud-alert-item-row-snoozing {
animation: none;
opacity: 0;
}
}
/* Brief highlight on a row that was just restored via Undo so the user
can spot where it landed in the list. */
@keyframes hud-alert-item-restored {
0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); background: rgba(56, 189, 248, 0.18); }
60% { box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.18); }
100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); background: rgba(15, 17, 24, 0.45); }
}
.hud-alert-item-row-restored {
animation: hud-alert-item-restored 1400ms var(--ease-glass, cubic-bezier(0.32, 0.72, 0, 1)) forwards;
}
@media (prefers-reduced-motion: reduce) {
.hud-alert-item-row-restored { animation: none; }
}
/* "Snoozed — Undo" toast inside the alerts dropdown. Floats above the
alert groups, auto-dismisses after 5s, and gives a one-click escape
hatch for accidental snoozes. */
@keyframes hud-alert-snooze-toast-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.hud-alert-snooze-toast {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
margin: 4px 0 10px;
border-radius: 10px;
font-size: 0.74rem;
color: rgba(226, 232, 240, 0.85);
background: rgba(100, 116, 139, 0.18);
border: 1px solid rgba(148, 163, 184, 0.3);
animation: hud-alert-snooze-toast-in 200ms var(--ease-glass, cubic-bezier(0.32, 0.72, 0, 1)) both;
}
.hud-alert-snooze-toast i {
font-size: 0.85rem;
opacity: 0.85;
flex: 0 0 auto;
}
.hud-alert-snooze-toast-label {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hud-alert-snooze-toast-undo {
flex: 0 0 auto;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
cursor: pointer;
border: 1px solid rgba(165, 180, 252, 0.45);
background: rgba(99, 102, 241, 0.18);
color: #e0e7ff;
transition: background var(--dur-fast) var(--ease-glass),
border-color var(--dur-fast) var(--ease-glass),
transform var(--dur-fast) var(--ease-glass);
}
.hud-alert-snooze-toast-undo:hover {
background: rgba(99, 102, 241, 0.28);
border-color: rgba(165, 180, 252, 0.7);
}
.hud-alert-snooze-toast-undo:active { transform: scale(0.96); }
.hud-alert-snooze-toast-leaving {
animation: hud-alert-snooze-toast-in 200ms var(--ease-glass, cubic-bezier(0.32, 0.72, 0, 1)) reverse forwards;
}
@media (prefers-reduced-motion: reduce) {
.hud-alert-snooze-toast,
.hud-alert-snooze-toast-leaving { animation: none; }
}
/* Tone variants for the dropdown toast — used by the Schedule action's
success/error feedback. Same shape, different palette so the user can
tell at a glance whether the click landed. */
.hud-alert-snooze-toast-success {
background: rgba(20, 184, 166, 0.18);
border-color: rgba(45, 212, 191, 0.35);
color: #ccfbf1;
}
.hud-alert-snooze-toast-success i { color: #5eead4; opacity: 1; }
.hud-alert-snooze-toast-success .hud-alert-snooze-toast-undo {
border-color: rgba(94, 234, 212, 0.55);
background: rgba(20, 184, 166, 0.22);
color: #f0fdfa;
}
.hud-alert-snooze-toast-success .hud-alert-snooze-toast-undo:hover {
background: rgba(20, 184, 166, 0.32);
border-color: rgba(94, 234, 212, 0.75);
}
.hud-alert-snooze-toast-error {
background: rgba(239, 68, 68, 0.16);
border-color: rgba(248, 113, 113, 0.4);
color: #fee2e2;
}
.hud-alert-snooze-toast-error i { color: #fda4af; opacity: 1; }
/* ── Context Panel (right slide-in) ────────────────────────────────────── */
.map-context-panel {
position: fixed;
top: 12px;
right: 12px;
width: 360px;
height: calc(100vh - 24px);
max-height: calc(100vh - 24px);
max-height: calc(100dvh - 24px);
min-height: 0;
display: flex;
flex-direction: column;
background: var(--lg-bg-hud);
backdrop-filter: var(--lg-blur);
-webkit-backdrop-filter: var(--lg-blur);
border: var(--lg-border-hud);
border-radius: var(--lg-radius);
color: var(--lg-text);
z-index: var(--z-map-context);
overflow: hidden;
padding: 16px;
transform: translateX(calc(100% + 24px));
transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
box-shadow: var(--lg-shadow-hud);
}
.map-context-panel.context-panel-open {
transform: translateX(0);
}
.context-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex: 0 0 auto;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.context-panel-title-wrap {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.context-panel-header h6 {
font-size: 1rem;
font-weight: 600;
margin: 0;
min-width: 0;
}
.context-panel-back {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
color: #f8fafc;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.context-panel-back:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.2);
transform: translateX(-1px);
}
.context-panel-back:focus-visible {
outline: 2px solid rgba(191, 219, 254, 0.95);
outline-offset: 2px;
}
/* Right-aligned cluster of header actions: copy-link button + close. */
.context-panel-header-actions {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
}
/* Generic icon button matching the header chrome — used for the share /
copy-link affordance. Keeps the same hit-target as the back button so
the header reads as one balanced row. */
.context-panel-icon-btn {
position: relative;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
color: #e2e8f0;
cursor: pointer;
transition: background var(--dur-fast, 140ms) var(--ease-glass, cubic-bezier(0.32, 0.72, 0, 1)),
border-color var(--dur-fast, 140ms) var(--ease-glass, cubic-bezier(0.32, 0.72, 0, 1)),
transform var(--dur-fast, 140ms) var(--ease-glass, cubic-bezier(0.32, 0.72, 0, 1));
}
.context-panel-icon-btn:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.22);
}
.context-panel-icon-btn:active { transform: scale(0.94); }
.context-panel-icon-btn:focus-visible {
outline: 2px solid rgba(191, 219, 254, 0.95);
outline-offset: 2px;
}
.context-panel-icon-btn i { font-size: 1rem; }
.context-panel-icon-btn[hidden] { display: none; }
/* "Copied" flash — slides up over the icon for ~1.4s after a successful
copy. Pure CSS animation triggered by a single class toggle. */
.context-panel-share-flash {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: inherit;
background: rgba(20, 184, 166, 0.92);
color: #f0fdfa;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0;
pointer-events: none;
}
.context-panel-icon-btn-flashing .context-panel-share-flash {
animation: context-panel-share-flash 1400ms var(--ease-glass, cubic-bezier(0.32, 0.72, 0, 1)) forwards;
}
@keyframes context-panel-share-flash {
0% { opacity: 0; transform: translateY(4px); }
15% { opacity: 1; transform: translateY(0); }
75% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
.context-panel-icon-btn-flashing .context-panel-share-flash {
animation: none;
opacity: 1;
}
}
/* ── Stale deep-link toast ──────────────────────────────────────────────
Floats at the top of the viewport when a #focus= URL points to an
entity that no longer exists. Auto-dismisses after ~4.5s. */
.map-deeplink-toast {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 1080;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 500;
color: #fee2e2;
background: rgba(120, 30, 30, 0.78);
border: 1px solid rgba(248, 113, 113, 0.45);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
animation: map-deeplink-toast-in 240ms var(--ease-glass, cubic-bezier(0.32, 0.72, 0, 1)) both;
}
.map-deeplink-toast i { font-size: 1rem; opacity: 0.85; }
.map-deeplink-toast-leaving {
animation: map-deeplink-toast-in 240ms var(--ease-glass, cubic-bezier(0.32, 0.72, 0, 1)) reverse forwards;
}
@keyframes map-deeplink-toast-in {
from { opacity: 0; transform: translate(-50%, -8px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
.map-deeplink-toast,
.map-deeplink-toast-leaving { animation: none; }
}
.map-context-panel .nav-pills .nav-link {
color: #aaa;
font-size: 0.78rem;
padding: 4px 10px;
border-radius: 6px;
}
.map-context-panel .nav-pills .nav-link.active {
background: rgba(13, 110, 253, 0.3);
color: #fff;
}
.map-context-panel .btn-close {
filter: invert(1);
}
.context-panel-view-stack {
position: relative;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.context-panel-view {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
overflow: hidden;
opacity: 0;
transform: translateX(18px);
pointer-events: none;
visibility: hidden;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.context-panel-view-active {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
visibility: visible;
}
#context-tabs {
flex: 0 0 auto;
}
.context-tab-content {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
-webkit-overflow-scrolling: touch;
padding-right: 4px;
padding-bottom: 10px;
}
.context-drawing-copy {
flex: 0 0 auto;
padding: 12px 14px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.context-drawing-kicker {
margin-bottom: 4px;
color: #94a3b8;
}
.context-drawing-body {
font-size: 0.86rem;
line-height: 1.45;
color: #d5dbe4;
}
/* Context tab content */
.context-section {
margin-bottom: 10px;
}
.context-label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.4px;
color: #888;
margin-bottom: 2px;
}
.context-value {
font-size: 0.9rem;
}
.context-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 8px;
}
.context-stat {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
background: rgba(255, 255, 255, 0.04);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.context-stat-icon {
font-size: 1.1rem;
opacity: 0.7;
}
.context-stat-value {
font-size: 0.85rem;
font-weight: 600;
}
.context-stat-label {
font-size: 0.68rem;
color: #888;
text-transform: uppercase;
}
.context-task-list {
overflow: visible;
}
.context-task-item {
padding: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.context-task-item:last-child {
border-bottom: none;
}
.context-task-create {
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.context-task-create .form-control {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.1);
color: #e0e0e0;
}
.context-task-create .form-control::placeholder {
color: #666;
}
.context-compliance-list {
overflow: visible;
}
.context-compliance-item {
padding: 6px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.context-compliance-item:last-child {
border-bottom: none;
}
/* ── Edit forms inside context panel ────────────────────────────────────── */
.context-edit-content {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
-webkit-overflow-scrolling: touch;
padding-top: 4px;
padding-right: 4px;
padding-bottom: 10px;
}
.context-edit-content .context-edit-empty {
padding: 12px 0;
color: #9ca3af;
line-height: 1.45;
}
.context-edit-content .context-edit-form {
/* Override map-panel positioning — render inline inside context panel */
position: static !important;
top: auto !important;
right: auto !important;
width: auto !important;
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
z-index: auto !important;
border-radius: 0 !important;
}
.context-edit-content .context-edit-form .panel-title {
display: none; /* title is in the context panel header */
}
.context-edit-content .form-control,
.context-edit-content .form-select {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.12);
color: #e0e0e0;
}
.context-edit-content .form-control::placeholder {
color: #666;
}
.context-edit-content .form-label {
color: #aaa;
}
.context-edit-content .form-select option {
background: #1e1e1c;
color: #e0e0e0;
}
.context-edit-content .feature-action-items-list {
color: #ccc;
}
.context-edit-content .alert-danger {
background: rgba(220, 53, 69, 0.15);
border-color: rgba(220, 53, 69, 0.3);
color: #f8a0a8;
}
.context-edit-content textarea.form-control {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.12);
color: #e0e0e0;
}
/* ── Map Layer Markers ─────────────────────────────────────────────────── */
/* Weather station — vertical glass mini-card so multiple stations stay
readable when they overlap on the map. Top accent bar color-codes by
temp/alert tone; body holds tabular-num temperature + station name. */
.hud-weather-marker {
background: none !important;
border: none !important;
}
.hud-weather-card {
display: flex;
flex-direction: column;
width: 88px;
border-radius: var(--r-md);
background: var(--lg-bg-hud);
backdrop-filter: var(--lg-blur);
-webkit-backdrop-filter: var(--lg-blur);
border: var(--lg-border-hud);
box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.18);
color: var(--lg-text);
overflow: hidden;
transition: transform var(--dur-fast) var(--ease-glass),
box-shadow var(--dur-fast) var(--ease-glass);
}
.hud-weather-card:hover {
transform: translateY(-2px) scale(1.04);
box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.hud-weather-card-bar {
height: 4px;
width: 100%;
flex: 0 0 auto;
}
.hud-weather-card-body {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 6px 6px 8px;
line-height: 1.2;
}
.hud-weather-card-temp {
font-size: var(--text-18);
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
color: #f8fafc;
}
.hud-weather-card-name {
font-size: 0.65rem;
font-weight: 500;
color: rgba(226, 232, 240, 0.78);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.hud-weather-card-alert {
border-color: rgba(239, 68, 68, 0.5);
box-shadow: var(--shadow-1),
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 0 12px rgba(239, 68, 68, 0.32);
}
@media (prefers-reduced-motion: reduce) {
.hud-weather-card { transition: none; }
.hud-weather-card:hover { transform: none; }
}
/* Sensor marker */
.hud-sensor-marker {
background: none !important;
border: none !important;
}
.hud-sensor-icon {
min-width: 44px;
min-height: 36px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 10px;
color: #fff;
font-weight: 700;
font-size: 0.72rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
border: 2px solid rgba(255, 255, 255, 0.55);
margin: 0 auto;
}
.hud-sensor-label {
text-align: center;
font-size: 0.62rem;
color: #333;
text-shadow: 0 0 3px #fff, 0 0 3px #fff;
margin-top: 2px;
white-space: nowrap;
font-weight: 600;
}
/* Fleet marker */
.hud-fleet-marker {
background: none !important;
border: none !important;
}
.hud-fleet-icon {
width: 32px;
height: 32px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.85rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
border: 2px solid rgba(255, 255, 255, 0.5);
margin: 0 auto;
}
.hud-fleet-label {
text-align: center;
font-size: 0.6rem;
color: #333;
text-shadow: 0 0 3px #fff, 0 0 3px #fff;
margin-top: 1px;
white-space: nowrap;
font-weight: 600;
}
/* Compliance shield */
.hud-compliance-marker {
background: none !important;
border: none !important;
}
.hud-compliance-icon {
width: 26px;
height: 26px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.7rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
gap: 2px;
}
.hud-compliance-count {
font-size: 0.6rem;
font-weight: 700;
}
/* Employee marker */
.hud-employee-marker {
background: none !important;
border: none !important;
}
.hud-employee-icon {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px 6px;
background: rgba(13, 110, 253, 0.85);
color: #fff;
border-radius: 10px;
font-size: 0.65rem;
font-weight: 600;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
/* Task heat pulse animation */
@keyframes hud-pulse-anim {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.hud-pulse {
animation: hud-pulse-anim 2s ease-in-out infinite;
}
/* ── FAB (Quick Action Button) ─────────────────────────────────────────── */
.map-fab {
position: fixed;
bottom: 28px;
right: 28px;
z-index: calc(var(--z-hud-base) - 10);
}
.map-fab-btn {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--lg-bg);
backdrop-filter: var(--lg-blur);
-webkit-backdrop-filter: var(--lg-blur);
border: var(--lg-border);
color: var(--lg-text);
font-size: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--lg-shadow);
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.map-fab-btn:hover {
background: rgba(40, 42, 50, 0.7);
border-color: rgba(255, 255, 255, 0.26);
color: #fff;
transform: scale(1.06);
}
.map-fab-btn:active { transform: scale(0.96); }
.map-fab-menu {
position: absolute;
bottom: 68px;
right: 0;
background: var(--lg-bg-strong);
backdrop-filter: var(--lg-blur);
-webkit-backdrop-filter: var(--lg-blur);
border: var(--lg-border);
border-radius: var(--lg-radius);
padding: 8px;
min-width: 200px;
box-shadow: var(--lg-shadow);
display: block;
opacity: 0;
transform: scale(0.92) translateY(8px);
pointer-events: none;
transform-origin: bottom right;
transition: opacity var(--dur-fast) var(--ease-out-quart),
transform var(--dur-base) var(--ease-spring);
}
.map-fab-menu.lg-open {
opacity: 1;
transform: scale(1) translateY(0);
pointer-events: auto;
}
.map-fab-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 12px;
background: none;
border: none;
color: var(--lg-text);
font-size: 0.82rem;
border-radius: 12px;
cursor: pointer;
text-align: left;
transition: background 0.18s ease, color 0.18s ease;
}
.map-fab-item:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
body.map-page {
--hud-safe-edge: 12px;
}
.map-hud-widgets {
top: var(--hud-safe-edge);
right: var(--hud-safe-edge);
left: calc(var(--map-sidebar-offset, 78px) + var(--hud-safe-edge));
max-width: calc(100vw - var(--map-sidebar-offset, 78px) - (var(--hud-safe-edge) * 2));
justify-content: center;
}
body.map-page:has(.map-context-panel.context-panel-open) .map-hud-widgets {
right: var(--hud-safe-edge);
}
.map-hud-bar {
flex: 1 1 100%;
width: 100%;
}
.hud-chips {
justify-content: center;
}
#hud-dd-fleet,
#hud-dd-sensors {
width: min(560px, var(--hud-safe-width));
max-width: min(560px, var(--hud-safe-width));
}
.hud-fleet-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
body.map-page {
--hud-safe-edge: 8px;
}
.map-hud-widgets {
top: 12px;
left: 8px;
right: 8px;
max-width: calc(100vw - 16px);
gap: 8px;
}
.map-daylight-indicator {
width: 100%;
top: auto;
left: auto;
max-width: none;
}
.map-daylight-card {
width: 100%;
padding: 8px 12px;
gap: 10px;
border-radius: 16px;
}
.map-daylight-glyph {
width: 34px;
height: 34px;
}
.map-daylight-time {
font-size: 0.95rem;
}
.map-daylight-rule {
height: 28px;
}
.map-hud-bar {
width: 100%;
min-width: 0;
max-width: none;
}
.hud-chips {
gap: 3px;
justify-content: center;
}
.hud-chip {
padding: 4px 8px;
font-size: 0.72rem;
}
.hud-dropdown {
position: fixed;
min-width: min(320px, var(--hud-safe-width));
width: var(--hud-safe-width);
max-width: var(--hud-safe-width);
}
#hud-dd-location,
#hud-dd-layers {
min-width: 0;
width: var(--hud-safe-width);
max-width: var(--hud-safe-width);
}
#hud-dd-weather {
min-width: 0;
width: var(--hud-safe-width);
max-width: var(--hud-safe-width);
}
#hud-dd-alerts,
#hud-dd-fleet,
#hud-dd-sensors,
#hud-dd-tasks,
#hud-dd-people,
#hud-dd-compliance,
#hud-dd-jarvis {
min-width: 0;
width: var(--hud-safe-width);
max-width: var(--hud-safe-width);
}
.map-context-panel {
top: 8px;
right: 8px;
left: 8px;
width: auto;
height: calc(100vh - 16px);
border-radius: var(--lg-radius-md);
}
.map-fab {
bottom: 16px;
right: 16px;
}
}
/* Very narrow phones: collapse secondary column so the card stays compact */
@media (max-width: 540px) {
.map-daylight-rule,
.map-daylight-secondary {
display: none;
}
.map-daylight-card {
width: 100%;
justify-content: space-between;
padding: 8px 10px;
}
.map-daylight-time {
font-size: 0.92rem;
}
.map-daylight-date {
font-size: 0.66rem;
}
.hud-weather-summary-grid,
.hud-weather-metrics-grid {
grid-template-columns: 1fr;
}
.hud-weather-more {
grid-template-columns: 1fr;
}
.hud-fleet-list,
.hud-sensor-grid {
grid-template-columns: 1fr;
}
.hud-weather-current-row,
.hud-weather-guidance-header {
flex-direction: column;
align-items: flex-start;
}
.hud-weather-current-meta {
align-items: flex-start;
}
.hud-weather-guidance-header strong {
text-align: left;
}
}
/* ── Weather Dashboards ───────────────────────────────────────────────── */
.mock-sensor-location-map {
height: 320px;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.1);
background: linear-gradient(180deg, rgba(148, 163, 184, 0.12), rgba(148, 163, 184, 0.04));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.mock-sensor-location-map .leaflet-control-zoom a {
color: #0f172a;
}
.weather-page .card {
border-radius: 18px;
}
.weather-empty-state {
border: 1px dashed rgba(13, 110, 253, 0.25);
border-radius: 24px;
padding: 64px 24px;
text-align: center;
background: linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(232, 244, 255, 0.9));
}
.weather-alert-card {
border-radius: 18px;
background: linear-gradient(135deg, rgba(255, 248, 219, 0.98), rgba(255, 238, 190, 0.92));
}
.weather-metric-card {
background: linear-gradient(180deg, #ffffff, #f8fbff);
}
.weather-hero-card {
background: linear-gradient(135deg, rgba(248, 251, 255, 0.96), rgba(229, 244, 255, 0.9));
}
.weather-hero-temp {
display: flex;
align-items: flex-end;
gap: 18px;
}
.weather-hero-value {
font-size: clamp(2.5rem, 6vw, 4rem);
line-height: 1;
font-weight: 700;
color: #0f172a;
}
.weather-stat-chip {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
border-radius: 14px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(15, 23, 42, 0.06);
font-size: 0.92rem;
}
.weather-summary-block {
height: 100%;
padding: 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(15, 23, 42, 0.06);
}
.weather-summary-kicker {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.72rem;
color: #64748b;
font-weight: 700;
margin-bottom: 8px;
}
.weather-insight {
display: flex;
align-items: center;
gap: 10px;
border-radius: 16px;
padding: 12px 14px;
font-size: 0.94rem;
border: 1px solid transparent;
}
.weather-insight-info {
background: rgba(59, 130, 246, 0.08);
color: #1d4ed8;
border-color: rgba(59, 130, 246, 0.16);
}
.weather-insight-warning {
background: rgba(245, 158, 11, 0.1);
color: #b45309;
border-color: rgba(245, 158, 11, 0.16);
}
.weather-insight-danger {
background: rgba(239, 68, 68, 0.1);
color: #b91c1c;
border-color: rgba(239, 68, 68, 0.18);
}
.weather-chart-wrap {
position: relative;
min-height: 300px;
}
.weather-station-card .weather-card-main {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.weather-station-card .weather-card-temp {
font-size: 2.25rem;
font-weight: 700;
line-height: 1;
}
.weather-mini-stat {
display: flex;
justify-content: space-between;
gap: 10px;
border-radius: 14px;
padding: 10px 12px;
background: rgba(248, 250, 252, 0.95);
font-size: 0.9rem;
}
.weather-mini-stat span {
color: #64748b;
}
.weather-card-section {
padding-top: 12px;
margin-top: 12px;
border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.weather-card-label {
text-transform: uppercase;
letter-spacing: 0.07em;
font-size: 0.7rem;
color: #64748b;
font-weight: 700;
margin-bottom: 6px;
}
@media (max-width: 768px) {
.weather-chart-wrap {
min-height: 260px;
}
.weather-hero-value {
font-size: 2.5rem;
}
.weather-card-main {
flex-direction: column;
align-items: flex-start;
}
}
/* =========================================================================
Time chip — live clock + sky details (sun + moon) dropdown
========================================================================= */
.hud-chip-time {
border-color: rgba(56, 189, 248, 0.35);
}
.hud-chip-time:hover {
border-color: rgba(56, 189, 248, 0.6);
}
.hud-chip-time .hud-time-label {
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
font-weight: 600;
}
#hud-dd-time {
min-width: min(320px, var(--hud-safe-width));
width: min(420px, var(--hud-safe-width));
max-width: min(420px, var(--hud-safe-width));
overflow: visible;
padding: 14px;
}
.hud-time-hero {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
padding: 14px 14px 14px 16px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(99, 132, 255, 0.18), rgba(56, 189, 248, 0.12));
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.hud-time-hero-clock {
font-size: 2.2rem;
font-weight: 600;
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
color: #fff;
line-height: 1;
}
.hud-time-hero-meta {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1;
min-width: 0;
}
.hud-time-hero-date {
font-size: 0.84rem;
font-weight: 600;
color: rgba(241, 245, 249, 0.95);
letter-spacing: -0.005em;
}
.hud-time-hero-tz {
font-size: 0.72rem;
color: rgba(203, 213, 225, 0.7);
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hud-time-phase {
margin-bottom: 12px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.07);
}
.hud-time-phase-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 6px;
}
.hud-time-phase-label {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(241, 245, 249, 0.9);
}
.hud-time-phase-pct {
font-size: 0.78rem;
font-weight: 600;
color: rgba(203, 213, 225, 0.78);
font-variant-numeric: tabular-nums;
}
.hud-time-progress {
position: relative;
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.hud-time-progress-fill {
position: absolute;
inset: 0 auto 0 0;
border-radius: 999px;
background: linear-gradient(90deg, #4f8bff, #38bdf8);
transition: width 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}
.hud-time-phase[data-phase="dawn"] .hud-time-progress-fill { background: linear-gradient(90deg, #fb923c, #f59e0b); }
.hud-time-phase[data-phase="dusk"] .hud-time-progress-fill { background: linear-gradient(90deg, #f97316, #a855f7); }
.hud-time-phase[data-phase="night"] .hud-time-progress-fill { background: linear-gradient(90deg, #475569, #94a3b8); }
.hud-time-grid { margin-bottom: 12px; }
.hud-time-grid .hud-layer-summary-item strong {
font-variant-numeric: tabular-nums;
letter-spacing: -0.005em;
}
.hud-time-moon {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(15, 23, 42, 0.4));
border: 1px solid rgba(168, 85, 247, 0.25);
}
.hud-time-moon-glyph {
font-size: 1.8rem;
line-height: 1;
filter: drop-shadow(0 2px 6px rgba(168, 85, 247, 0.45));
}
.hud-time-moon-meta { min-width: 0; }
.hud-time-moon-name {
font-size: 0.86rem;
font-weight: 600;
color: #f8fafc;
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hud-time-moon-sub {
font-size: 0.72rem;
color: rgba(203, 213, 225, 0.72);
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
.hud-time-moon-times {
display: flex;
flex-direction: column;
gap: 2px;
text-align: right;
}
.hud-time-moon-times span {
display: inline-block;
font-size: 0.62rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(203, 213, 225, 0.5);
margin-right: 6px;
}
.hud-time-moon-times strong {
font-size: 0.8rem;
color: #f8fafc;
font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
#hud-dd-time {
min-width: 0;
width: var(--hud-safe-width);
max-width: var(--hud-safe-width);
}
.hud-time-hero { padding: 12px; }
.hud-time-hero-clock { font-size: 1.9rem; }
}
/* =========================================================================
Sidebar interactivity — cursor glow, magnetic active indicator, brand pulse
========================================================================= */
/* Brand chip — gradient + soft breathing pulse */
.sidebar-brand-chip {
background:
linear-gradient(135deg, #60a5fa 0%, #818cf8 50%, #c084fc 100%) !important;
border-color: rgba(255, 255, 255, 0.18) !important;
color: #fff !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.12),
0 6px 18px rgba(99, 132, 255, 0.35) !important;
position: relative;
overflow: hidden;
animation: lg-brand-breathe 5.5s ease-in-out infinite;
transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-spring);
}
.sidebar-brand-chip::after {
content: "";
position: absolute;
inset: -50%;
background: conic-gradient(from 120deg, transparent 0deg, rgba(255, 255, 255, 0.45) 30deg, transparent 60deg, transparent 360deg);
animation: lg-brand-rotate 7s linear infinite;
pointer-events: none;
mix-blend-mode: overlay;
opacity: 0.65;
}
.sidebar-brand:hover .sidebar-brand-chip {
transform: rotate(-6deg) scale(1.06);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 10px 28px rgba(99, 132, 255, 0.5) !important;
}
@keyframes lg-brand-breathe {
0%, 100% { box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(0, 0, 0, 0.12),
0 6px 18px rgba(99, 132, 255, 0.35); }
50% { box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 -1px 0 rgba(0, 0, 0, 0.12),
0 10px 26px rgba(124, 92, 255, 0.55); }
}
@keyframes lg-brand-rotate {
to { transform: rotate(360deg); }
}
/* Cursor-tracking glow on nav links — JS sets --mx / --my (% of element) */
#sidebar .nav-link {
position: relative;
isolation: isolate;
overflow: hidden;
--mx: 50%;
--my: 50%;
}
#sidebar .nav-link::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: radial-gradient(180px circle at var(--mx) var(--my), rgba(99, 132, 255, 0.22), transparent 55%);
opacity: 0;
transition: opacity var(--dur-fast) var(--ease-out-quart);
z-index: -1;
}
#sidebar .nav-link:hover::before { opacity: 1; }
/* Animated icon tile — gentle bounce on hover, gradient on active */
#sidebar .nav-link i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 8px;
font-size: 1rem;
background: rgba(255, 255, 255, 0.05);
color: rgba(241, 245, 249, 0.85);
transition:
transform var(--dur-base) var(--ease-spring),
background var(--dur-fast) var(--ease-out-quart),
color var(--dur-fast) var(--ease-out-quart),
box-shadow var(--dur-base) var(--ease-spring);
}
#sidebar .nav-link:hover i {
background: rgba(255, 255, 255, 0.12);
color: #fff;
transform: scale(1.1) rotate(-3deg);
}
#sidebar .nav-link.active i {
background: linear-gradient(135deg, #4f8bff, #a855f7);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 6px 14px rgba(99, 132, 255, 0.4);
}
/* ── Active state — single floating "liquid lozenge" that slides between
nav items via JS-measured transform. The shared element gives the
visionOS shared-layout feel without a JS framework. ── */
#sidebar .sidebar-scroll {
position: relative;
}
.sidebar-active-lozenge {
position: absolute;
left: 8px;
top: 0;
width: calc(100% - 16px);
height: 0; /* JS sets height + transforms */
z-index: 0;
pointer-events: none;
border-radius: var(--r-md);
background:
radial-gradient(ellipse at top left, rgba(99, 132, 255, 0.22), transparent 60%),
linear-gradient(135deg, rgba(99, 132, 255, 0.18), rgba(168, 85, 247, 0.10));
border: 1px solid rgba(147, 197, 253, 0.22);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
inset 0 -1px 0 rgba(0, 0, 0, 0.18),
0 8px 24px rgba(99, 132, 255, 0.16);
opacity: 0;
transform: translate3d(0, 0, 0);
transition:
transform var(--dur-base) var(--ease-glass),
opacity var(--dur-fast) var(--ease-glass),
height var(--dur-base) var(--ease-glass);
will-change: transform, height;
}
.sidebar-active-lozenge::before {
/* 2px accent indicator on the leading edge */
content: "";
position: absolute;
top: 18%;
left: -1px;
height: 64%;
width: 2px;
border-radius: var(--r-pill);
background: linear-gradient(180deg, #60a5fa, #c084fc);
box-shadow: 0 0 10px rgba(99, 132, 255, 0.65);
}
.sidebar-active-lozenge.is-visible {
opacity: 1;
}
/* Sidebar nav links sit above the lozenge */
#sidebar .nav-link {
position: relative;
z-index: 1;
}
#sidebar .nav-link.active {
background: transparent !important;
}
@media (prefers-reduced-motion: reduce) {
.sidebar-active-lozenge { transition: opacity var(--dur-fast) var(--ease-glass); }
}
/* Reveal-on-load stagger for nav items (top-down cascade) */
#sidebar .sidebar-nav .nav-item,
#sidebar .nav.flex-column > .nav-item {
animation: lg-fade-up 0.5s var(--ease-spring) backwards;
}
#sidebar .sidebar-nav .nav-item:nth-child(1),
#sidebar .nav.flex-column > .nav-item:nth-child(1) { animation-delay: 0.05s; }
#sidebar .sidebar-nav .nav-item:nth-child(2),
#sidebar .nav.flex-column > .nav-item:nth-child(2) { animation-delay: 0.09s; }
#sidebar .sidebar-nav .nav-item:nth-child(3),
#sidebar .nav.flex-column > .nav-item:nth-child(3) { animation-delay: 0.13s; }
#sidebar .sidebar-nav .nav-item:nth-child(4),
#sidebar .nav.flex-column > .nav-item:nth-child(4) { animation-delay: 0.17s; }
#sidebar .sidebar-nav .nav-item:nth-child(5),
#sidebar .nav.flex-column > .nav-item:nth-child(5) { animation-delay: 0.21s; }
#sidebar .sidebar-nav .nav-item:nth-child(6),
#sidebar .nav.flex-column > .nav-item:nth-child(6) { animation-delay: 0.25s; }
#sidebar .sidebar-nav .nav-item:nth-child(7),
#sidebar .nav.flex-column > .nav-item:nth-child(7) { animation-delay: 0.29s; }
#sidebar .sidebar-nav .nav-item:nth-child(8),
#sidebar .nav.flex-column > .nav-item:nth-child(8) { animation-delay: 0.33s; }
#sidebar .sidebar-nav .nav-item:nth-child(9),
#sidebar .nav.flex-column > .nav-item:nth-child(9) { animation-delay: 0.37s; }
#sidebar .sidebar-nav .nav-item:nth-child(10),
#sidebar .nav.flex-column > .nav-item:nth-child(10) { animation-delay: 0.41s; }
#sidebar .sidebar-nav .nav-item:nth-child(n+11),
#sidebar .nav.flex-column > .nav-item:nth-child(n+11) { animation-delay: 0.45s; }
/* Sidebar user pill: hover flourish */
.sidebar-user-avatar {
background: linear-gradient(135deg, #4f8bff, #a855f7) !important;
color: #fff !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 4px 12px rgba(79, 139, 255, 0.32);
transition: transform var(--dur-base) var(--ease-spring);
}
.sidebar-user:hover .sidebar-user-avatar { transform: rotate(-4deg) scale(1.05); }
/* Logout: gentle red wash on hover */
.sidebar-logout:hover {
background: rgba(239, 68, 68, 0.16) !important;
color: #fecaca !important;
box-shadow: inset 0 1px 0 rgba(254, 202, 202, 0.18);
}
/* =========================================================================
Page-wide micro-interactions
========================================================================= */
/* =========================================================================
Page Loader — liquid glass top bar + optional centre card
========================================================================= */
.page-loader {
position: fixed;
inset: 0 0 auto 0;
height: 3px;
z-index: 4000;
pointer-events: none;
opacity: 0;
transition: opacity 220ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.page-loader-active { opacity: 1; }
/* Track behind the bar — barely-there hairline so the channel reads even at 0% */
.page-loader-rail {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
/* The progressing bar — saturated apple-style gradient with a soft outer glow */
.page-loader-bar {
position: absolute;
inset: 0;
transform-origin: left center;
transform: scaleX(0);
background:
linear-gradient(90deg,
rgba(56, 189, 248, 0.95) 0%,
rgba(96, 165, 250, 1) 38%,
rgba(168, 85, 247, 1) 72%,
rgba(236, 72, 153, 1) 100%);
box-shadow:
0 0 12px rgba(96, 165, 250, 0.65),
0 0 28px rgba(168, 85, 247, 0.35);
border-radius: 0 6px 6px 0;
transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
will-change: transform;
}
/* A travelling "head" glow that always rides the leading edge */
.page-loader-glow {
position: absolute;
top: 50%;
width: 80px;
height: 18px;
margin-top: -9px;
margin-left: -60px;
background: radial-gradient(ellipse at center,
rgba(255, 255, 255, 0.55) 0%,
rgba(168, 85, 247, 0.25) 40%,
transparent 70%);
filter: blur(6px);
opacity: 0.9;
transition: left 280ms cubic-bezier(0.32, 0.72, 0, 1);
pointer-events: none;
}
/* Continuous shimmer travels across the bar so the eye sees motion even when
the percentage is momentarily flat — kills the "is it stuck?" instinct. */
.page-loader-shimmer {
position: absolute;
inset: 0;
background: linear-gradient(100deg,
transparent 0%,
transparent 35%,
rgba(255, 255, 255, 0.55) 50%,
transparent 65%,
transparent 100%);
background-size: 220% 100%;
background-repeat: no-repeat;
mix-blend-mode: overlay;
opacity: 0.85;
animation: page-loader-shimmer 1.6s linear infinite;
pointer-events: none;
}
@keyframes page-loader-shimmer {
0% { background-position: 220% 0; }
100% { background-position: -120% 0; }
}
/* Done state: bar hits 100, glow fades, shimmer settles, then the whole strip
fades out — a clean "completed the journey" moment instead of a snap-cut. */
.page-loader-done .page-loader-shimmer { opacity: 0; transition: opacity 180ms ease; }
.page-loader-done .page-loader-glow { opacity: 0; transition: opacity 220ms ease; }
.page-loader-done {
opacity: 0;
transition: opacity 280ms cubic-bezier(0.165, 0.84, 0.44, 1) 80ms;
}
/* ── Centre card — appears only after a delay, for the longer waits ────── */
.page-loader-card {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -42%) scale(0.96);
z-index: 3900;
pointer-events: none;
opacity: 0;
transition:
opacity 320ms cubic-bezier(0.165, 0.84, 0.44, 1),
transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.page-loader-card-visible {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.page-loader-card-glass {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 22px 16px 18px;
min-width: 280px;
max-width: min(88vw, 420px);
border-radius: 22px;
background: var(--lg-bg-hud, rgba(14, 16, 22, 0.9));
backdrop-filter: var(--lg-blur, blur(28px) saturate(180%));
-webkit-backdrop-filter: var(--lg-blur, blur(28px) saturate(180%));
border: var(--lg-border-hud, 1px solid rgba(255, 255, 255, 0.18));
box-shadow: var(--lg-shadow-hud,
0 18px 44px rgba(0, 0, 0, 0.32),
0 16px 40px rgba(0, 0, 0, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.2));
color: var(--lg-text, #f1f5f9);
position: relative;
overflow: hidden;
}
.page-loader-card-glass::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.16), transparent 55%);
pointer-events: none;
}
.page-loader-card-glass::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%);
transform: translateX(-120%);
animation: page-loader-card-sheen 2.6s cubic-bezier(0.32, 0.72, 0, 1) infinite;
pointer-events: none;
}
@keyframes page-loader-card-sheen {
0%, 35% { transform: translateX(-120%); opacity: 0; }
55% { opacity: 1; }
100% { transform: translateX(120%); opacity: 0; }
}
.page-loader-card-logo {
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at 30% 30%, rgba(96, 165, 250, 0.55), rgba(56, 189, 248, 0.18) 60%, rgba(15, 17, 24, 0.4) 100%);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 18px rgba(96, 165, 250, 0.28);
position: relative;
z-index: 1;
animation: page-loader-logo-breathe 2.4s cubic-bezier(0.32, 0.72, 0, 1) infinite;
}
.page-loader-card-logo i {
font-size: 1.2rem;
color: #f1f5f9;
filter: drop-shadow(0 0 6px rgba(147, 197, 253, 0.6));
}
@keyframes page-loader-logo-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.07); }
}
.page-loader-card-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
position: relative;
z-index: 1;
}
.page-loader-card-status {
font-size: 0.95rem;
font-weight: 600;
color: #f8fafc;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity 200ms cubic-bezier(0.165, 0.84, 0.44, 1),
transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
.page-loader-card-detail {
font-size: 0.78rem;
color: rgba(226, 232, 240, 0.72);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity 200ms cubic-bezier(0.165, 0.84, 0.44, 1),
transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
.page-loader-card-status.is-swapping,
.page-loader-card-detail.is-swapping {
opacity: 0;
transform: translateY(-4px);
}
/* Reduced motion — drop the shimmer/sheen, keep only opacity transitions. */
@media (prefers-reduced-motion: reduce) {
.page-loader-shimmer,
.page-loader-card-glass::after { animation: none; opacity: 0; }
.page-loader-card-logo { animation: none; }
.page-loader-bar { transition: transform 200ms linear; }
.page-loader-glow { display: none; }
}
/* Top-of-page scroll progress bar (driven by CSS scroll-timeline / JS fallback) */
#scroll-progress {
position: fixed;
top: 0;
left: var(--map-sidebar-offset, 240px);
right: 0;
height: 2px;
background: linear-gradient(90deg, #4f8bff, #a855f7, #ec4899);
transform-origin: left center;
transform: scaleX(var(--scroll-progress, 0));
z-index: 1500;
pointer-events: none;
opacity: 0.85;
transition: transform 80ms linear, opacity var(--dur-fast) var(--ease-out-quart);
}
body.map-page #scroll-progress { display: none; }
/* Cursor-tracked card glow — JS sets --mx/--my as % */
body:not(.map-page) #main-content .card {
position: relative;
isolation: isolate;
--mx: 50%;
--my: 50%;
}
body:not(.map-page) #main-content .card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: radial-gradient(280px circle at var(--mx) var(--my), rgba(99, 132, 255, 0.14), transparent 60%);
opacity: 0;
transition: opacity var(--dur-fast) var(--ease-out-quart);
z-index: -1;
}
body:not(.map-page) #main-content .card:hover::before { opacity: 1; }
/* Ripple effect on .btn click — JS injects span */
.btn { position: relative; overflow: hidden; }
.btn .lg-ripple {
position: absolute;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%) scale(0);
background: currentColor;
opacity: 0.18;
animation: lg-ripple 600ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes lg-ripple {
to { transform: translate(-50%, -50%) scale(8); opacity: 0; }
}
/* Stat-tile entrance (count-up uses JS, this just lifts on enter) */
.lg-stat-enter {
animation: lg-fade-up 0.6s var(--ease-spring) backwards;
}
/* Form input animated underline focus (Bootstrap-flat-friendly) */
body:not(.map-page) .form-control,
body:not(.map-page) .form-select {
position: relative;
}
body:not(.map-page) .form-control:focus,
body:not(.map-page) .form-select:focus {
border-color: rgba(99, 132, 255, 0.55);
box-shadow:
0 0 0 4px rgba(99, 132, 255, 0.15),
inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
/* Table row "wake-up" — chip flushes through on hover */
body:not(.map-page) .table-hover > tbody > tr {
transition: background-color var(--dur-fast) var(--ease-out-quart), transform var(--dur-fast) var(--ease-spring);
}
body:not(.map-page) .table-hover > tbody > tr:hover {
background-color: rgba(99, 132, 255, 0.06) !important;
}
/* Smooth icon spin on focus for search-like inputs */
.btn i {
transition: transform var(--dur-base) var(--ease-spring);
}
.btn:hover i {
transform: scale(1.08);
}
/* =========================================================================
Overlay coordination — keep HUD widgets out from behind context panel
========================================================================= */
body.map-page:has(.map-context-panel.context-panel-open) .map-hud-widgets {
right: max(var(--hud-safe-edge), min(388px, calc(100vw - var(--map-sidebar-offset, 240px) - 360px)));
transition: right var(--dur-base) var(--ease-spring);
}
.map-hud-widgets {
transition: right var(--dur-base) var(--ease-spring);
}
/* Context panel: a more transparent feel matching the new sidebar */
.map-context-panel {
background:
radial-gradient(120% 60% at 0% 0%, rgba(99, 132, 255, 0.16), transparent 55%),
linear-gradient(180deg, rgba(11, 14, 24, 0.62), rgba(13, 16, 28, 0.5)) !important;
backdrop-filter: blur(36px) saturate(180%) !important;
-webkit-backdrop-filter: blur(36px) saturate(180%) !important;
}
/* Sidebar collapse/expand transition flourish — aurora pulses brighter for the
moment the sidebar is moving, then settles back. */
body[data-sidebar-transition] #sidebar::before {
animation-duration: 4s, 22s;
filter: blur(36px) brightness(1.18);
}
body[data-sidebar-transition="collapsing"] #main-content,
body[data-sidebar-transition="expanding"] #main-content {
animation: lg-fade-up 0.4s var(--ease-spring);
}
/* Reduce motion: collapse all decorative animations cleanly */
@media (prefers-reduced-motion: reduce) {
#sidebar::before,
.sidebar-brand-chip,
.sidebar-brand-chip::after { animation: none !important; }
#scroll-progress { display: none !important; }
body[data-sidebar-transition] #main-content { animation: none !important; }
}
/* =========================================================================
Jarvis (AI assistant) — HUD chip + dropdown panel
========================================================================= */
.hud-chip-brief {
border-color: rgba(56, 189, 248, 0.42);
background: linear-gradient(
135deg,
rgba(14, 165, 233, 0.3) 0%,
rgba(59, 130, 246, 0.25) 100%
);
}
.hud-chip-brief:hover {
border-color: rgba(125, 211, 252, 0.7);
background: linear-gradient(
135deg,
rgba(14, 165, 233, 0.4) 0%,
rgba(59, 130, 246, 0.34) 100%
);
}
.hud-chip-brief i.bi-clipboard2-data-fill {
color: #dbeafe;
}
.hud-chip-jarvis {
border-color: rgba(167, 139, 250, 0.45);
background: linear-gradient(
135deg,
rgba(99, 102, 241, 0.32) 0%,
rgba(167, 139, 250, 0.28) 50%,
rgba(244, 114, 182, 0.28) 100%
);
}
.hud-chip-jarvis:hover {
border-color: rgba(167, 139, 250, 0.75);
background: linear-gradient(
135deg,
rgba(99, 102, 241, 0.42) 0%,
rgba(167, 139, 250, 0.38) 50%,
rgba(244, 114, 182, 0.38) 100%
);
}
.hud-chip-jarvis i.bi-stars {
color: #ffe4a8;
filter: drop-shadow(0 0 4px rgba(255, 228, 168, 0.55));
}
.hud-chip-jarvis-loading i.bi-stars {
animation: jarvis-pulse 1.4s ease-in-out infinite;
}
@keyframes jarvis-pulse {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.15); }
}
#hud-dd-jarvis {
min-width: min(420px, var(--hud-safe-width));
width: min(560px, var(--hud-safe-width));
max-width: min(560px, var(--hud-safe-width));
padding: 12px;
}
#hud-dd-brief {
min-width: min(460px, var(--hud-safe-width));
width: min(620px, var(--hud-safe-width));
max-width: min(620px, var(--hud-safe-width));
}
.hud-brief-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin-bottom: 10px;
}
.hud-brief-metric {
padding: 8px 10px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.11);
}
.hud-brief-metric span {
display: block;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(203, 213, 225, 0.72);
}
.hud-brief-metric strong {
display: block;
margin-top: 4px;
color: #f8fafc;
font-size: 0.84rem;
line-height: 1.25;
}
.hud-brief-signals {
display: grid;
gap: 8px;
margin-bottom: 10px;
}
.hud-brief-signal {
display: flex;
gap: 10px;
align-items: flex-start;
width: 100%;
padding: 10px 12px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.09);
color: inherit;
text-align: left;
cursor: pointer;
transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.hud-brief-signal:hover {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0.08);
border-color: rgba(147, 197, 253, 0.22);
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}
.hud-brief-signal:focus-visible {
outline: 2px solid rgba(96, 165, 250, 0.7);
outline-offset: 2px;
}
.hud-brief-signal-icon {
width: 32px;
height: 32px;
flex: 0 0 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: rgba(255, 255, 255, 0.08);
color: #dbeafe;
}
.hud-brief-signal-copy {
min-width: 0;
flex: 1 1 auto;
}
.hud-brief-signal-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.hud-brief-signal-title {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(191, 219, 254, 0.8);
}
.hud-brief-signal-head strong {
color: #f8fafc;
font-size: 0.82rem;
white-space: nowrap;
}
.hud-brief-signal-detail {
margin-top: 4px;
font-size: 0.76rem;
line-height: 1.35;
color: rgba(226, 232, 240, 0.78);
}
.hud-brief-signal-compact .hud-brief-signal-detail {
display: none;
}
.hud-brief-signal-danger {
border-color: rgba(239, 68, 68, 0.24);
background: rgba(239, 68, 68, 0.08);
}
.hud-brief-signal-warning {
border-color: rgba(251, 191, 36, 0.22);
background: rgba(251, 191, 36, 0.08);
}
.hud-brief-signal-info {
border-color: rgba(56, 189, 248, 0.2);
background: rgba(56, 189, 248, 0.06);
}
.hud-brief-signal-success {
border-color: rgba(74, 222, 128, 0.2);
background: rgba(74, 222, 128, 0.06);
}
.hud-brief-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.hud-jarvis-status {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
border-radius: 12px;
font-size: 0.82rem;
line-height: 1.4;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.hud-jarvis-status i { margin-top: 2px; }
.hud-jarvis-status-loading { color: rgba(241, 245, 249, 0.75); }
.hud-jarvis-status-warning {
border-color: rgba(250, 204, 21, 0.35);
background: rgba(250, 204, 21, 0.08);
}
.hud-jarvis-status-error {
border-color: rgba(248, 113, 113, 0.45);
background: rgba(248, 113, 113, 0.1);
}
.hud-jarvis-focus {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 12px;
margin: 4px 0 10px;
border-radius: 14px;
background:
radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), transparent 52%),
linear-gradient(135deg, rgba(15, 17, 24, 0.92), rgba(19, 35, 47, 0.82));
border: 1px solid rgba(56, 189, 248, 0.2);
}
.hud-jarvis-focus-empty {
border-color: rgba(148, 163, 184, 0.18);
background: rgba(15, 17, 24, 0.58);
}
.hud-jarvis-focus-copy {
display: flex;
flex-direction: column;
gap: 2px;
}
.hud-jarvis-focus-kicker {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(125, 211, 252, 0.82);
}
.hud-jarvis-focus-title {
font-size: 0.88rem;
font-weight: 600;
color: #f8fafc;
}
.hud-jarvis-focus-meta {
font-size: 0.74rem;
line-height: 1.45;
color: rgba(226, 232, 240, 0.66);
}
.hud-jarvis-focus-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.hud-jarvis-voice {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 12px;
margin: 4px 0 10px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.hud-jarvis-voice-controls {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.hud-jarvis-voice .hud-action-btn {
min-width: 0;
}
.hud-jarvis-voice-toggle {
flex: 0 0 auto;
}
.hud-jarvis-voice-record {
flex: 1 1 180px;
}
.hud-jarvis-voice-status {
font-size: 0.74rem;
line-height: 1.45;
color: rgba(226, 232, 240, 0.68);
}
.hud-jarvis-voice-record[disabled] {
opacity: 0.7;
cursor: not-allowed;
}
.hud-jarvis-presets {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 4px 0 10px;
}
.hud-jarvis-preset {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: var(--lg-radius-pill);
background: rgba(167, 139, 250, 0.16);
border: 1px solid rgba(167, 139, 250, 0.32);
color: var(--lg-text);
font-size: 0.76rem;
font-weight: 500;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.hud-jarvis-preset:hover {
background: rgba(167, 139, 250, 0.28);
border-color: rgba(167, 139, 250, 0.55);
}
.hud-jarvis-preset-subtle {
background: rgba(148, 163, 184, 0.12);
border-color: rgba(148, 163, 184, 0.22);
}
.hud-jarvis-preset-subtle:hover {
background: rgba(148, 163, 184, 0.2);
border-color: rgba(148, 163, 184, 0.35);
}
.hud-jarvis-preset:active { transform: scale(0.97); }
.hud-jarvis-preset i { font-size: 0.78rem; opacity: 0.85; }
/* Focus-only preset gets the warmer accent so users see "this needs focus" at a glance. */
.hud-jarvis-preset-focus {
background: rgba(244, 114, 182, 0.16);
border-color: rgba(244, 114, 182, 0.36);
}
.hud-jarvis-preset-focus:hover {
background: rgba(244, 114, 182, 0.28);
border-color: rgba(244, 114, 182, 0.6);
}
.hud-jarvis-preset-focus i { color: #ffe4a8; opacity: 1; }
/* "Ask Jarvis about this" entry-point shown inside the right-side context panel.
Reuses the HUD action-btn shape but adopts the Jarvis accent so the action
visibly belongs to the assistant. */
.hud-action-btn-jarvis {
background: linear-gradient(
135deg,
rgba(99, 102, 241, 0.16) 0%,
rgba(167, 139, 250, 0.18) 60%,
rgba(244, 114, 182, 0.16) 100%
);
border: 1px solid rgba(167, 139, 250, 0.35);
color: var(--lg-text, #f1f5f9);
font-weight: 600;
}
.hud-action-btn-jarvis:hover {
background: linear-gradient(
135deg,
rgba(99, 102, 241, 0.26) 0%,
rgba(167, 139, 250, 0.3) 60%,
rgba(244, 114, 182, 0.26) 100%
);
border-color: rgba(167, 139, 250, 0.7);
}
.hud-action-btn-jarvis i.bi-stars {
color: #ffe4a8;
filter: drop-shadow(0 0 4px rgba(255, 228, 168, 0.55));
}
.context-jarvis-cta {
display: flex;
flex-direction: column;
gap: 4px;
}
.hud-jarvis-output {
background: rgba(15, 17, 24, 0.55);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 12px;
padding: 10px 12px;
margin-bottom: 10px;
min-height: 60px;
font-size: 0.82rem;
line-height: 1.45;
}
.hud-jarvis-empty {
color: rgba(226, 232, 240, 0.6);
font-size: 0.78rem;
display: flex;
align-items: center;
gap: 6px;
}
.hud-jarvis-empty i { color: #ffe4a8; }
.hud-jarvis-loading {
display: flex;
align-items: center;
gap: 8px;
color: rgba(226, 232, 240, 0.78);
font-size: 0.82rem;
}
.hud-jarvis-loading i { animation: jarvis-pulse 1.4s ease-in-out infinite; }
.hud-jarvis-error {
color: #fecaca;
font-size: 0.8rem;
}
.hud-jarvis-error i { margin-right: 4px; }
.hud-jarvis-reply-kicker {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(167, 139, 250, 0.85);
margin-bottom: 4px;
}
.hud-jarvis-reply-body p { margin: 0 0 6px; }
.hud-jarvis-reply-body p:last-child { margin-bottom: 0; }
.hud-jarvis-reply-body ul {
margin: 4px 0 6px;
padding-left: 18px;
}
.hud-jarvis-reply-body li { margin-bottom: 2px; }
.hud-jarvis-reply-body strong { color: #fff7d9; }
.hud-jarvis-reply-meta {
margin-top: 6px;
font-size: 0.7rem;
color: rgba(226, 232, 240, 0.45);
}
.hud-jarvis-form {
display: flex;
flex-direction: column;
gap: 6px;
}
.hud-jarvis-input {
width: 100%;
resize: none;
min-height: 48px;
overflow: hidden;
padding: 8px 10px;
border-radius: 10px;
background: rgba(15, 17, 24, 0.65);
border: 1px solid rgba(255, 255, 255, 0.12);
color: var(--lg-text);
font-size: 0.82rem;
line-height: 1.4;
font-family: inherit;
transition: border-color 0.18s ease, background 0.18s ease;
}
.hud-jarvis-input:focus {
outline: none;
border-color: rgba(167, 139, 250, 0.6);
background: rgba(15, 17, 24, 0.85);
}
.hud-jarvis-input::placeholder { color: rgba(226, 232, 240, 0.35); }
.hud-jarvis-form-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.hud-jarvis-model {
font-size: 0.7rem;
color: rgba(226, 232, 240, 0.45);
font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.hud-jarvis-form .hud-action-btn-primary[disabled] {
opacity: 0.6;
cursor: progress;
}
@media (prefers-reduced-motion: reduce) {
.hud-chip-jarvis-loading i.bi-stars,
.hud-jarvis-loading i { animation: none !important; }
}
@media (max-width: 768px) {
#hud-dd-jarvis {
min-width: 260px;
width: var(--hud-safe-width);
max-width: var(--hud-safe-width);
}
}
/* =========================================================================
Tasks chip — segmented breakdown, pressure tile, legend grid
========================================================================= */
.hud-task-pressure {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 10px;
background: rgba(13, 110, 253, 0.16);
border: 1px solid rgba(13, 110, 253, 0.32);
}
.hud-task-pressure i {
font-size: 1.4rem;
color: #93c5fd;
}
.hud-task-pressure-body { flex: 1 1 auto; min-width: 0; }
.hud-task-pressure-label {
font-weight: 600;
font-size: 0.88rem;
color: #f1f5f9;
}
.hud-task-pressure-meta {
margin-top: 2px;
font-size: 0.72rem;
color: rgba(226, 232, 240, 0.6);
}
.hud-task-pressure-urgent {
background: rgba(220, 38, 38, 0.18);
border-color: rgba(220, 38, 38, 0.45);
}
.hud-task-pressure-urgent i { color: #fecaca; }
.hud-task-pressure-today {
background: rgba(234, 179, 8, 0.16);
border-color: rgba(234, 179, 8, 0.42);
}
.hud-task-pressure-today i { color: #fde68a; }
.hud-task-bar {
display: flex;
gap: 4px;
height: 38px;
margin-bottom: 10px;
}
.hud-task-bar-seg {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
border-radius: 10px;
font-weight: 600;
font-size: 0.82rem;
color: #f8fafc;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
transform: scaleY(0.7);
transform-origin: bottom;
opacity: 0;
animation: hud-task-rise 320ms var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)) forwards;
}
.hud-task-bar-seg i { font-size: 0.78rem; opacity: 0.85; }
.hud-task-bar-seg:nth-child(1) { animation-delay: 40ms; }
.hud-task-bar-seg:nth-child(2) { animation-delay: 100ms; }
.hud-task-bar-seg:nth-child(3) { animation-delay: 160ms; }
.hud-task-bar-seg:nth-child(4) { animation-delay: 220ms; }
@keyframes hud-task-rise {
from { transform: scaleY(0.4); opacity: 0; }
to { transform: scaleY(1); opacity: 1; }
}
.hud-task-seg-danger { background: rgba(220, 38, 38, 0.32); border-color: rgba(220, 38, 38, 0.62); }
.hud-task-seg-warning { background: rgba(234, 179, 8, 0.3); border-color: rgba(234, 179, 8, 0.55); color: #fff7d9; }
.hud-task-seg-info { background: rgba(59, 130, 246, 0.28); border-color: rgba(59, 130, 246, 0.55); }
.hud-task-seg-success { background: rgba(34, 197, 94, 0.28); border-color: rgba(34, 197, 94, 0.55); }
.hud-task-legend {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.hud-task-legend-tile {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.hud-task-legend-tile i { font-size: 1rem; opacity: 0.85; }
.hud-task-legend-tile strong {
display: block;
font-size: 1.05rem;
font-weight: 700;
color: #f1f5f9;
line-height: 1;
}
.hud-task-legend-tile span {
display: block;
margin-top: 2px;
font-size: 0.7rem;
color: rgba(226, 232, 240, 0.6);
letter-spacing: 0.02em;
}
.hud-task-legend-zero { opacity: 0.55; }
.hud-task-legend-tile.hud-task-seg-danger { background: rgba(220, 38, 38, 0.12); border-color: rgba(220, 38, 38, 0.32); }
.hud-task-legend-tile.hud-task-seg-warning { background: rgba(234, 179, 8, 0.1); border-color: rgba(234, 179, 8, 0.28); }
.hud-task-legend-tile.hud-task-seg-info { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.28); }
.hud-task-legend-tile.hud-task-seg-success { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.28); }
.hud-task-empty {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: 14px;
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.32);
color: #d1fae5;
}
.hud-task-empty i { font-size: 1.6rem; color: #86efac; }
.hud-task-empty-meta {
margin-top: 2px;
font-size: 0.72rem;
color: rgba(226, 232, 240, 0.65);
}
/* =========================================================================
Compliance chip — animated SVG ring + tiles
========================================================================= */
.hud-comp-hero {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
}
.hud-comp-ring {
position: relative;
flex: 0 0 96px;
width: 96px;
height: 96px;
}
.hud-comp-ring svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.hud-comp-ring-track {
fill: none;
stroke: rgba(255, 255, 255, 0.1);
stroke-width: 9;
}
.hud-comp-ring-fill {
fill: none;
stroke-width: 9;
stroke-linecap: round;
stroke: var(--hud-comp-ring-color, #34d399);
stroke-dasharray: var(--hud-comp-circ);
stroke-dashoffset: var(--hud-comp-circ);
animation: hud-comp-ring-draw 720ms var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1)) forwards;
}
@keyframes hud-comp-ring-draw {
to { stroke-dashoffset: var(--hud-comp-offset); }
}
.hud-comp-ring-good { --hud-comp-ring-color: #34d399; }
.hud-comp-ring-warn { --hud-comp-ring-color: #fbbf24; }
.hud-comp-ring-bad { --hud-comp-ring-color: #f87171; }
.hud-comp-ring-text {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.hud-comp-ring-text strong {
font-size: 1.6rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #f1f5f9;
line-height: 1;
}
.hud-comp-ring-text strong span {
font-size: 0.85rem;
font-weight: 600;
color: rgba(226, 232, 240, 0.6);
margin-left: 1px;
}
.hud-comp-ring-status {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(226, 232, 240, 0.6);
margin-top: 4px;
}
.hud-comp-ring-good .hud-comp-ring-status { color: #86efac; }
.hud-comp-ring-warn .hud-comp-ring-status { color: #fcd34d; }
.hud-comp-ring-bad .hud-comp-ring-status { color: #fca5a5; }
.hud-comp-hero-meta { flex: 1 1 auto; min-width: 0; }
.hud-comp-hero-title {
font-weight: 600;
font-size: 0.85rem;
color: #f1f5f9;
}
.hud-comp-hero-sub {
margin-top: 4px;
font-size: 0.72rem;
color: rgba(226, 232, 240, 0.55);
line-height: 1.35;
}
.hud-comp-tiles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.hud-comp-tile {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.hud-comp-tile i { font-size: 1.05rem; opacity: 0.8; }
.hud-comp-tile strong {
display: block;
font-size: 1.1rem;
font-weight: 700;
color: #f1f5f9;
line-height: 1;
}
.hud-comp-tile span {
display: block;
margin-top: 2px;
font-size: 0.7rem;
color: rgba(226, 232, 240, 0.6);
}
.hud-comp-tile-warn {
background: rgba(234, 179, 8, 0.12);
border-color: rgba(234, 179, 8, 0.32);
}
.hud-comp-tile-warn i { color: #fde68a; }
.hud-comp-tile-danger {
background: rgba(220, 38, 38, 0.14);
border-color: rgba(220, 38, 38, 0.42);
}
.hud-comp-tile-danger i { color: #fecaca; }
/* =========================================================================
Sensors chip — type-coloured cards
========================================================================= */
.hud-sensor-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.hud-sensor-card {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 12px 10px 14px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-left: 3px solid var(--hud-sensor-accent, #38bdf8);
transition: background 0.18s ease, border-color 0.18s ease;
}
.hud-sensor-card:hover {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.16);
}
.hud-sensor-head {
display: flex;
align-items: center;
gap: 10px;
}
.hud-sensor-icon {
flex: 0 0 32px;
width: 32px;
height: 32px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #f8fafc;
font-size: 0.95rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}
.hud-sensor-meta {
flex: 1 1 auto;
min-width: 0;
}
.hud-sensor-name {
font-weight: 600;
font-size: 0.86rem;
color: #f1f5f9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hud-sensor-type {
margin-top: 2px;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(226, 232, 240, 0.55);
}
.hud-sensor-age {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(34, 197, 94, 0.18);
color: #bbf7d0;
font-size: 0.66rem;
font-weight: 600;
}
.hud-sensor-age i { font-size: 0.62rem; animation: hud-sensor-pulse 2s ease-in-out infinite; }
.hud-sensor-age-stale {
background: rgba(234, 179, 8, 0.22);
color: #fde68a;
}
.hud-sensor-age-stale i { animation: none; }
@keyframes hud-sensor-pulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
.hud-sensor-primary {
font-size: 1.4rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #fff7d9;
line-height: 1.05;
}
.hud-sensor-secondary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.hud-sensor-sec-item {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
padding: 6px 8px;
}
.hud-sensor-sec-item span {
display: block;
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(226, 232, 240, 0.55);
}
.hud-sensor-sec-item strong {
display: block;
margin-top: 2px;
font-size: 0.85rem;
font-weight: 600;
color: #f1f5f9;
}
.hud-sensor-card-stale {
border-left-color: rgba(234, 179, 8, 0.7);
}
/* =========================================================================
Fleet chip — vehicle cards + countdown
========================================================================= */
.hud-fleet-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
margin-bottom: 10px;
}
.hud-fleet-summary-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 8px 6px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
text-align: center;
min-width: 0;
}
.hud-fleet-summary-tile i { font-size: 0.85rem; }
.hud-fleet-summary-tile strong {
font-size: 1rem;
font-weight: 700;
color: #f1f5f9;
line-height: 1;
}
.hud-fleet-summary-tile span {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(226, 232, 240, 0.55);
max-width: 100%;
overflow-wrap: anywhere;
}
.hud-fleet-summary-active i { color: #4ade80; }
.hud-fleet-summary-maint i { color: #fbbf24; }
.hud-fleet-summary-due-active {
background: rgba(220, 38, 38, 0.14);
border-color: rgba(220, 38, 38, 0.42);
}
.hud-fleet-summary-due-active i { color: #fecaca; animation: hud-fleet-pulse 1.6s ease-in-out infinite; }
.hud-fleet-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
.hud-fleet-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 9px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
min-width: 0;
}
.hud-fleet-icon {
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #cbd5e1;
font-size: 1rem;
}
.hud-fleet-body { flex: 1 1 auto; min-width: 0; }
.hud-fleet-name-row {
display: flex;
align-items: center;
gap: 8px;
justify-content: space-between;
}
.hud-fleet-name {
font-weight: 600;
font-size: 0.84rem;
color: #f1f5f9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hud-fleet-status {
flex: 0 0 auto;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.62rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
background: rgba(255, 255, 255, 0.08);
color: #e2e8f0;
}
.hud-fleet-status-active { background: rgba(34, 197, 94, 0.22); color: #bbf7d0; }
.hud-fleet-status-maint { background: rgba(234, 179, 8, 0.22); color: #fde68a; }
.hud-fleet-status-other { background: rgba(148, 163, 184, 0.22); color: #e2e8f0; }
.hud-fleet-type {
margin-top: 2px;
font-size: 0.7rem;
color: rgba(226, 232, 240, 0.55);
text-transform: capitalize;
}
.hud-fleet-service {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 4px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(56, 189, 248, 0.16);
color: #bae6fd;
font-size: 0.7rem;
font-weight: 600;
}
.hud-fleet-service i { font-size: 0.74rem; }
.hud-fleet-service-soon {
background: rgba(234, 179, 8, 0.22);
color: #fde68a;
animation: hud-fleet-pulse 1.8s ease-in-out infinite;
}
.hud-fleet-service-overdue {
background: rgba(220, 38, 38, 0.22);
color: #fecaca;
animation: hud-fleet-pulse 1.4s ease-in-out infinite;
}
@keyframes hud-fleet-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
50% { box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.22); }
}
.hud-fleet-more {
margin-top: 6px;
text-align: center;
font-size: 0.72rem;
color: rgba(226, 232, 240, 0.55);
}
.hud-fleet-map-btn {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid rgba(96, 165, 250, 0.34);
background: rgba(59, 130, 246, 0.14);
color: #dbeafe;
font-size: 0.7rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.hud-fleet-map-btn:hover {
transform: translateY(-1px);
background: rgba(59, 130, 246, 0.24);
border-color: rgba(96, 165, 250, 0.52);
color: #eff6ff;
}
.hud-fleet-map-btn i {
font-size: 0.72rem;
}
@media (max-width: 480px) {
.hud-fleet-summary {
grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
}
/* =========================================================================
People chip — avatar grid + activity bar
========================================================================= */
.hud-people-activity {
margin-bottom: 12px;
}
.hud-people-activity-bar {
display: flex;
height: 28px;
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.hud-people-activity-empty {
background: rgba(255, 255, 255, 0.04);
}
.hud-people-activity-active,
.hud-people-activity-leave {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
color: #f8fafc;
transition: flex-basis 0.32s var(--ease-spring, cubic-bezier(0.32, 0.72, 0, 1));
}
.hud-people-activity-active {
background: linear-gradient(90deg, rgba(34, 197, 94, 0.65), rgba(74, 222, 128, 0.55));
}
.hud-people-activity-leave {
background: linear-gradient(90deg, rgba(234, 179, 8, 0.55), rgba(251, 191, 36, 0.5));
}
.hud-people-activity-active i,
.hud-people-activity-leave i { font-size: 0.74rem; }
.hud-people-activity-legend {
display: flex;
gap: 14px;
margin-top: 6px;
font-size: 0.7rem;
color: rgba(226, 232, 240, 0.7);
}
.hud-people-activity-legend i { margin-right: 2px; }
.hud-people-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.hud-people-tile {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: background 0.18s ease, transform 0.18s ease;
}
.hud-people-tile:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateY(-1px);
}
.hud-people-avatar {
position: relative;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.04em;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.22);
}
.hud-people-status-dot {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid rgba(14, 16, 22, 0.95);
}
.hud-people-dot-active { background: #22c55e; }
.hud-people-dot-leave { background: #f59e0b; }
.hud-people-dot-other { background: #94a3b8; }
.hud-people-info { flex: 1 1 auto; min-width: 0; }
.hud-people-name {
font-weight: 600;
font-size: 0.82rem;
color: #f1f5f9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hud-people-position {
margin-top: 1px;
font-size: 0.66rem;
color: rgba(226, 232, 240, 0.55);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hud-people-more {
margin-top: 6px;
text-align: center;
font-size: 0.7rem;
color: rgba(226, 232, 240, 0.55);
}
@media (prefers-reduced-motion: reduce) {
.hud-task-bar-seg,
.hud-comp-ring-fill,
.hud-fleet-summary-due-active i,
.hud-fleet-service-soon,
.hud-fleet-service-overdue,
.hud-sensor-age i {
animation: none !important;
}
}