html:has(.auth-page) {
overflow: hidden;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.validation-message {
color: #e50000;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
border-color: #929292;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
/* Gradient backgrounds */
.gradient-mesh {
background:
radial-gradient(ellipse at 20% 20%, hsl(var(--primary) / 0.16) 0%, transparent 55%),
radial-gradient(ellipse at 80% 80%, hsl(var(--mesh-cool) / 0.10) 0%, transparent 55%),
radial-gradient(ellipse at 50% 50%, hsl(var(--mesh-violet) / 0.08) 0%, transparent 65%);
}
/* Glow effects */
.glow-primary {
box-shadow: 0 0 30px hsl(var(--primary) / 0.25), 0 0 60px hsl(var(--primary) / 0.1);
}
.glow-success {
box-shadow: 0 0 20px hsl(var(--success) / 0.3);
}
.glow-warning {
box-shadow: 0 0 20px hsl(var(--warning) / 0.3);
}
.glow-destructive {
box-shadow: 0 0 20px hsl(var(--destructive) / 0.3);
}
/* Status indicator pulse */
.pulse-success {
animation: pulse-success 2s ease-in-out infinite;
}
/* Text gradient utilities */
.text-gradient {
background: linear-gradient(135deg, hsl(0 0% 100%), hsl(0 0% 70%));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.text-gradient-primary {
background: linear-gradient(135deg, hsl(37 89% 60%), hsl(37 89% 45%));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.text-mono {
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
.lum-tooltip-rich .tt-label {
font-weight: 500;
font-size: 0.8125rem;
}
.lum-tooltip-rich .tt-sub {
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
}
.lum-tooltip-rich .tt-date {
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
}
.lum-tooltip-rich .tt-status {
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.lum-tooltip-rich .tt-status.active {
color: hsl(var(--success));
}
.lum-tooltip-rich .tt-status.inactive {
color: hsl(var(--muted-foreground));
font-style: italic;
}
/* Per-task detail rows (configured subsystems, target mode, schedule, …) */
.lum-tooltip-rich .tt-details {
display: flex;
flex-direction: column;
gap: 0.2rem;
margin-top: 0.15rem;
padding-top: 0.25rem;
border-top: 1px solid hsl(var(--border) / 0.5);
}
.lum-tooltip-rich .tt-detail {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.75rem;
color: hsl(var(--foreground));
}
.lum-tooltip-rich .tt-detail-icon {
display: inline-flex;
flex-shrink: 0;
color: hsl(var(--muted-foreground));
}
.lum-tooltip-rich .tt-detail-icon svg {
width: 0.75rem;
height: 0.75rem;
}
.lum-tooltip-info-steps .step-num {
color: hsl(var(--primary));
font-weight: 600;
}
/* Flash prevention: apply collapsed width before Blazor hydrates */
html[data-sidebar-collapsed="true"] .sidebar {
width: var(--sidebar-width-collapsed);
min-width: var(--sidebar-width-collapsed);
}
html[data-sidebar-collapsed="true"] .sidebar .sidebar-header {
padding: 0.5rem 0;
display: flex;
justify-content: center;
align-items: center;
height: 3.5rem;
}
html[data-sidebar-collapsed="true"] .sidebar .sidebar-content {
padding: 0.5rem 0;
}
html[data-sidebar-collapsed="true"] .sidebar .sidebar-menu-button {
justify-content: center;
padding: 0.5rem 0;
}
html[data-sidebar-collapsed="true"] .sidebar .sidebar-footer {
padding: 0.5rem 0;
display: flex;
justify-content: center;
}
.sidebar {
display: flex;
flex-direction: column;
width: var(--sidebar-width);
min-width: var(--sidebar-width);
height: 100%;
background-color: hsl(var(--sidebar-background));
color: hsl(var(--sidebar-foreground));
border-right: 1px solid hsl(var(--sidebar-border));
transition: width 0.2s ease, min-width 0.2s ease;
overflow: hidden;
z-index: 30;
}
.sidebar.collapsed {
width: var(--sidebar-width-collapsed);
min-width: var(--sidebar-width-collapsed);
}
.sidebar.collapsed .sidebar-header {
padding: 0.5rem 0;
display: flex;
justify-content: center;
align-items: center;
height: 3.5rem;
}
.sidebar.collapsed .sidebar-content {
padding: 0.5rem 0;
}
.sidebar.collapsed .sidebar-menu-button {
justify-content: center;
padding: 0.5rem 0;
}
.sidebar.collapsed .sidebar-footer {
padding: 0.5rem 0;
display: flex;
justify-content: center;
}
/* Floating sidebar tooltip (rendered on , escapes overflow) */
.sidebar-tooltip {
position: fixed;
transform: translateY(-50%);
padding: 0.375rem 0.75rem;
border-radius: 0.375rem;
background: hsl(var(--popover));
color: hsl(var(--popover-foreground));
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
box-shadow: 0 2px 8px hsl(0 0% 0% / 0.15);
border: 1px solid hsl(var(--border));
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
z-index: 100;
}
.sidebar-tooltip.visible {
opacity: 1;
}
.sidebar-header {
padding: 1rem 0.75rem;
border-bottom: 1px solid hsl(var(--sidebar-border));
}
.sidebar-logo-full {
/* Wide CityONE lockup (≈3.4:1); size by height and let the width follow within
the sidebar. viewBox is framed symmetrically so it sits centred. */
height: 3.75rem;
width: auto;
max-width: 100%;
object-fit: contain;
}
.sidebar-logo-icon {
height: 2rem;
width: 2rem;
object-fit: contain;
}
.sidebar-content {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 1rem 0.5rem;
display: flex;
flex-direction: column;
}
/* Menu groups keep their natural height and scroll rather than compress when the
menu is long, so the municipality logo can flow below them. */
.sidebar-content > .sidebar-group {
flex-shrink: 0;
}
.sidebar-footer {
padding: 1rem;
border-top: 1px solid hsl(var(--sidebar-border));
}
/* Municipality logo: sits just above the user footer, gentle margins, stuck to the bottom
of the scrollable nav area. Only rendered when expanded (ShowLabels) and a logo exists. */
.sidebar-municipality {
margin-top: auto; /* pushed to the bottom when the menu is short */
flex-shrink: 0; /* never compressed — scrolls into view when the menu is long */
padding: 1.5rem 1.25rem 0.5rem;
display: flex;
justify-content: center;
align-items: flex-end;
}
.sidebar-municipality img {
max-width: 100%;
max-height: 5rem;
object-fit: contain;
opacity: 0.95;
}
/* Branding admin tab: crop workspace + logo preview */
.branding-crop-area {
width: 100%;
height: 18rem;
background: hsl(var(--muted));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
overflow: hidden;
}
.branding-crop-img {
display: block;
max-width: 100%;
}
.branding-preview {
display: flex;
justify-content: center;
align-items: center;
padding: 1.5rem;
background: hsl(var(--muted) / 0.4);
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
}
.branding-preview-img {
max-width: 100%;
max-height: 8rem;
object-fit: contain;
}
.branding-preview-empty {
display: flex;
align-items: center;
justify-content: center;
min-height: 4rem;
}
.sidebar-group {
margin-bottom: 1rem;
}
.sidebar-group-label {
padding: 0 0.75rem;
margin-bottom: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: hsl(var(--sidebar-muted));
}
.sidebar-menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.sidebar-menu-item {
display: flex;
}
.sidebar-menu-button {
display: flex;
width: 100%;
align-items: center;
gap: 0.75rem;
border-radius: calc(var(--radius) - 4px);
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
color: hsl(var(--sidebar-foreground));
text-decoration: none;
transition: background-color 0.15s, color 0.15s;
border: none;
background: transparent;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
}
.sidebar-menu-button:hover {
background-color: hsl(var(--sidebar-accent));
color: hsl(var(--sidebar-accent-foreground));
}
.sidebar-menu-button.active {
background-color: hsl(var(--sidebar-accent));
color: hsl(var(--sidebar-primary));
font-weight: 500;
}
.sidebar-menu-button svg {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
}
.sidebar-menu-button .chevron {
margin-left: auto;
width: 1rem;
height: 1rem;
opacity: 0;
transition: opacity 0.15s;
}
.sidebar-menu-button:hover .chevron {
opacity: 1;
}
.sidebar-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
height: 2.25rem;
width: 2.25rem;
border-radius: calc(var(--radius) - 2px);
background: transparent;
border: none;
cursor: pointer;
color: hsl(var(--foreground));
transition: background-color 0.15s;
}
.sidebar-toggle-btn:hover {
background-color: hsl(var(--accent));
}
/* Sidebar theme variants */
html[data-theme-style="frost"] .sidebar {
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.2);
}
html[data-theme-style="aurora"] .sidebar {
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4);
}
/* User footer */
.sidebar-user {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
border-radius: calc(var(--radius) - 2px);
background-color: hsl(var(--sidebar-accent) / 0.5);
}
.sidebar-user-avatar {
display: flex;
height: 2.25rem;
width: 2.25rem;
align-items: center;
justify-content: center;
border-radius: calc(var(--radius) - 4px);
font-size: 0.75rem;
font-weight: 700;
background-color: hsl(var(--sidebar-primary));
color: hsl(var(--sidebar-primary-foreground));
}
.sidebar-user-name {
font-size: 0.875rem;
font-weight: 500;
color: hsl(var(--sidebar-foreground));
}
.sidebar-user-status {
display: inline-flex;
align-items: center;
gap: 0.3rem;
/* Slightly smaller + no-wrap so longer localities (e.g. STAWIGUDA, KRZESZOWICE)
stay on one line next to the ONLINE badge. */
font-size: 0.7rem;
letter-spacing: 0.03em;
color: hsl(var(--sidebar-muted));
white-space: nowrap;
}
.sidebar-online-dot {
flex: none;
width: 0.4rem;
height: 0.4rem;
border-radius: 9999px;
background-color: hsl(var(--success));
box-shadow: 0 0 4px hsl(var(--success) / 0.5);
}
.profile-avatar {
display: flex;
height: 4rem;
width: 4rem;
align-items: center;
justify-content: center;
border-radius: var(--radius);
font-size: 1.25rem;
font-weight: 700;
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
flex-shrink: 0;
}
.profile-info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.profile-info-label {
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
color: hsl(var(--muted-foreground));
margin-bottom: 0.25rem;
}
.profile-info-value {
font-size: 0.875rem;
font-weight: 500;
color: hsl(var(--foreground));
}
.profile-form-group {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
@media (max-width: 640px) {
.profile-info-grid {
grid-template-columns: 1fr;
}
}
.app-header {
position: sticky;
top: 0;
z-index: 40;
display: flex;
height: 3.5rem;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0 1rem;
border-bottom: 1px solid hsl(var(--border));
background-color: hsl(var(--card));
}
html[data-theme-style="frost"] .app-header {
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-color: hsl(214 32% 86% / 0.6);
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
}
html[data-theme-style="aurora"] .app-header {
background-color: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-color: rgba(255, 255, 255, 0.1);
}
.app-header-left {
display: flex;
align-items: center;
gap: 1rem;
min-width: 0;
flex-shrink: 1;
}
.app-header-right {
display: flex;
align-items: center;
gap: 0.75rem;
min-width: 0;
}
.app-header-title {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.app-header-title svg {
width: 1rem;
height: 1rem;
color: hsl(var(--primary));
flex-shrink: 0;
}
.app-header-title h1 {
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.015em;
margin: 0;
white-space: nowrap;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.app-header-search {
position: relative;
flex-shrink: 1;
min-width: 0;
}
.app-header-search svg {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
width: 1rem;
height: 1rem;
color: hsl(var(--muted-foreground));
}
.app-header-search input {
width: 14rem;
padding-left: 2.25rem;
border-radius: calc(var(--radius) - 2px);
}
/* Mobile search overlay */
.mobile-search-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
height: 3.5rem;
display: flex;
align-items: center;
padding: 0 0.75rem;
background-color: hsl(var(--card));
border-bottom: 1px solid hsl(var(--border));
animation: mobile-search-in 0.15s ease-out;
}
html[data-theme-style="frost"] .mobile-search-overlay {
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
html[data-theme-style="aurora"] .mobile-search-overlay {
background-color: rgba(20, 20, 30, 0.95);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
.mobile-search-bar {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
position: relative;
}
.mobile-search-bar > svg {
position: absolute;
left: 0.75rem;
width: 1rem;
height: 1rem;
color: hsl(var(--muted-foreground));
pointer-events: none;
}
.mobile-search-bar input {
flex: 1;
min-width: 0;
padding-left: 2.25rem;
border-radius: calc(var(--radius) - 2px);
}
.mobile-search-bar .lum-btn {
flex-shrink: 0;
}
@keyframes mobile-search-in {
from { opacity: 0; transform: translateY(-0.25rem); }
to { opacity: 1; transform: translateY(0); }
}
.notification-badge {
position: absolute;
right: -0.25rem;
top: -0.25rem;
display: flex;
height: 1.25rem;
width: 1.25rem;
align-items: center;
justify-content: center;
background-color: hsl(var(--destructive));
color: hsl(var(--destructive-foreground));
font-size: 0.625rem;
font-weight: 700;
border-radius: 9999px;
}
/* Active Tasks Indicator – pill badge in header */
.active-tasks-indicator {
display: flex;
align-items: center;
gap: 0.375rem;
border-radius: 9999px;
padding: 0.375rem 0.75rem;
white-space: nowrap;
flex-shrink: 0;
border: 1px solid hsl(var(--primary) / 0.3);
background-color: hsl(var(--primary) / 0.1);
cursor: help;
transition: background-color 0.2s, border-color 0.2s;
}
.active-tasks-indicator:hover {
background-color: hsl(var(--primary) / 0.18);
border-color: hsl(var(--primary) / 0.45);
}
.active-tasks-icon {
width: 0.875rem;
height: 0.875rem;
color: hsl(var(--primary));
flex-shrink: 0;
}
.active-tasks-count {
font-size: 0.75rem;
font-weight: 600;
color: hsl(var(--primary));
line-height: 1;
}
.active-tasks-spinner {
width: 0.875rem;
height: 0.875rem;
color: hsl(var(--primary));
flex-shrink: 0;
animation: active-tasks-spin 1s linear infinite;
}
@keyframes active-tasks-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Executing state: pulsing border to draw attention */
.active-tasks-executing {
animation: active-tasks-pulse 2s ease-in-out infinite;
}
@keyframes active-tasks-pulse {
0%, 100% { border-color: hsl(var(--primary) / 0.3); }
50% { border-color: hsl(var(--primary) / 0.6); }
}
/* Frost theme overrides */
html[data-theme-style="frost"] .active-tasks-indicator {
border-color: hsl(37 80% 45% / 0.3);
background-color: hsl(37 90% 95%);
}
html[data-theme-style="frost"] .active-tasks-indicator:hover {
background-color: hsl(37 90% 90%);
border-color: hsl(37 80% 45% / 0.5);
}
html[data-theme-style="frost"] .active-tasks-icon,
html[data-theme-style="frost"] .active-tasks-count,
html[data-theme-style="frost"] .active-tasks-spinner {
color: hsl(37 80% 35%);
}
/* Aurora theme overrides */
html[data-theme-style="aurora"] .active-tasks-indicator {
border-color: hsl(var(--primary) / 0.25);
background-color: hsl(var(--primary) / 0.08);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
html[data-theme-style="aurora"] .active-tasks-indicator:hover {
background-color: hsl(var(--primary) / 0.15);
border-color: hsl(var(--primary) / 0.4);
}
/* Tablet & mobile: compact (icon + count only, smaller padding) */
@media (max-width: 1024px) {
.active-tasks-indicator {
padding: 0.25rem 0.5rem;
gap: 0.25rem;
}
.active-tasks-icon,
.active-tasks-spinner {
width: 0.75rem;
height: 0.75rem;
}
.active-tasks-count {
font-size: 0.6875rem;
}
}
/* Active Events Indicator – pill badge in header (mirrors active-tasks but
uses the destructive palette to read as an alarm). */
.active-events-indicator {
display: flex;
align-items: center;
gap: 0.375rem;
border-radius: 9999px;
padding: 0.375rem 0.75rem;
white-space: nowrap;
flex-shrink: 0;
border: 1px solid hsl(var(--destructive) / 0.3);
background-color: hsl(var(--destructive) / 0.1);
cursor: help;
transition: background-color 0.2s, border-color 0.2s;
}
.active-events-indicator:hover {
background-color: hsl(var(--destructive) / 0.18);
border-color: hsl(var(--destructive) / 0.45);
}
.active-events-icon {
width: 0.875rem;
height: 0.875rem;
color: hsl(var(--destructive));
flex-shrink: 0;
}
.active-events-count {
font-size: 0.75rem;
font-weight: 600;
color: hsl(var(--destructive));
line-height: 1;
}
/* Aurora theme override */
html[data-theme-style="aurora"] .active-events-indicator {
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Tablet & mobile: compact (icon + count only, smaller padding) */
@media (max-width: 1024px) {
.active-events-indicator {
padding: 0.25rem 0.5rem;
gap: 0.25rem;
}
.active-events-icon {
width: 0.75rem;
height: 0.75rem;
}
.active-events-count {
font-size: 0.6875rem;
}
}
/* Header link wrapper around StateActiveEvents (see app-header-tasks-link). */
.app-header-events-link {
display: inline-flex;
align-items: center;
text-decoration: none;
color: inherit;
}
/* Header tablet range (≤1024px): collapse the inline search to its icon-button form,
and hide the trailing word in the status pill so the right group stays narrow. */
@media (max-width: 1024px) {
.app-header .app-header-search.desktop-only { display: none !important; }
.app-header .lum-btn.mobile-only { display: inline-flex !important; }
.app-header .status-indicator .hide-mobile { display: none !important; }
}
.status-indicator {
display: flex;
align-items: center;
gap: 0.5rem;
border-radius: 9999px;
padding: 0.375rem 0.75rem;
white-space: nowrap;
flex-shrink: 0;
border: 1px solid hsl(var(--success) / 0.3);
background-color: hsl(var(--success) / 0.1);
}
html[data-theme-style="frost"] .status-indicator {
border-color: hsl(152 65% 38% / 0.3);
background-color: hsl(152 65% 38% / 0.1);
}
.status-indicator-dot {
height: 0.5rem;
width: 0.5rem;
border-radius: 9999px;
background-color: hsl(var(--success));
animation: pulse-success 2s ease-in-out infinite;
}
.status-indicator-text {
font-size: 0.75rem;
font-weight: 600;
color: hsl(var(--success));
}
html[data-theme-style="frost"] .status-indicator-text {
color: hsl(152 65% 25%);
}
/* Status indicator - offline state (grey) */
.status-indicator-offline {
border-color: hsl(var(--muted-foreground) / 0.3);
background-color: hsl(var(--muted-foreground) / 0.1);
}
.status-indicator-dot-offline {
background-color: hsl(var(--muted-foreground));
animation: none;
}
.status-indicator-text-offline {
color: hsl(var(--muted-foreground));
}
/* Status indicator - partial state (some but not all online → neutral/foreground) */
.status-indicator-neutral {
border-color: hsl(var(--foreground) / 0.3);
background-color: hsl(var(--foreground) / 0.08);
}
.status-indicator-dot-neutral {
background-color: hsl(var(--foreground));
animation: none;
}
.status-indicator-text-neutral {
color: hsl(var(--foreground));
}
html[data-theme-style="frost"] .status-indicator-offline {
border-color: hsl(var(--muted-foreground) / 0.3);
background-color: hsl(var(--muted-foreground) / 0.1);
}
html[data-theme-style="frost"] .status-indicator-text-offline {
color: hsl(var(--muted-foreground));
}
html[data-theme-style="aurora"] .status-indicator-offline {
border-color: hsl(0 0% 100% / 0.2);
background-color: hsl(0 0% 100% / 0.06);
}
.timestamp {
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
font-variant-numeric: tabular-nums;
}
.app-layout {
display: flex;
height: 100vh;
width: 100%;
max-width: 100vw;
overflow: hidden;
}
/* Theme page backgrounds */
html[data-theme-style="brutal"] .app-layout {
background-color: hsl(var(--background));
}
html[data-theme-style="frost"] .app-layout {
background: linear-gradient(to bottom right, hsl(210 40% 96%), hsl(210 40% 98%), hsl(213 40% 96%));
}
html[data-theme-style="aurora"] .app-layout {
background: linear-gradient(160deg, hsl(270 55% 18%) 0%, hsl(275 50% 12%) 45%, hsl(285 45% 8%) 100%);
}
.app-layout-mesh {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
/* Own compositing layer. Backdrop-filtered surfaces above (glass tables,
header, sidebar) sample this fixed gradient; without a stable layer
Chromium re-rasterizes it on repaints beneath them (row/tile hover),
flashing a diagonal "reflection" of the mesh through the glass. */
transform: translateZ(0);
}
html[data-theme-style="frost"] .app-layout-mesh {
background:
radial-gradient(ellipse at 30% 20%, hsl(200 60% 70% / 0.2), transparent 50%),
radial-gradient(ellipse at 70% 80%, hsl(260 40% 75% / 0.15), transparent 50%);
}
html[data-theme-style="aurora"] .app-layout-mesh {
background:
radial-gradient(ellipse 80% 50% at 20% 20%, hsl(200 70% 55% / 0.22), transparent 55%),
radial-gradient(ellipse 60% 40% at 80% 30%, hsl(320 65% 55% / 0.18), transparent 50%);
}
.app-main-wrapper {
position: relative;
display: flex;
flex: 1;
flex-direction: column;
background: transparent;
min-width: 0;
overflow: hidden;
isolation: isolate;
}
.app-main-wrapper:has(.lum-overlay-open),
.app-main-wrapper:has(.lum-tooltip) {
z-index: 40; /* above sidebar z-index: 30 */
}
.app-main {
flex: 1;
overflow: auto;
padding: 1.5rem;
min-width: 0;
scrollbar-gutter: stable;
}
@media (max-width: 768px) {
/* Sidebar: off-screen by default on mobile, slide in as overlay */
.sidebar,
.sidebar.collapsed {
position: fixed;
left: 0;
top: 0;
width: var(--sidebar-width);
min-width: var(--sidebar-width);
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 50;
}
.sidebar.mobile-open,
.sidebar.collapsed.mobile-open {
transform: translateX(0);
}
/* Reset collapsed overrides on mobile (content is fully rendered via ShowLabels) */
.sidebar.collapsed.mobile-open .sidebar-header,
.sidebar.collapsed.mobile-open .sidebar-content,
.sidebar.collapsed.mobile-open .sidebar-footer {
padding: revert;
}
.sidebar.collapsed.mobile-open .sidebar-header {
padding: 0.5rem 0.75rem;
display: block;
justify-content: initial;
}
.sidebar.collapsed.mobile-open .sidebar-content {
padding: 1rem 0.5rem;
}
.sidebar.collapsed.mobile-open .sidebar-menu-button {
justify-content: initial;
padding: 0.5rem 0.75rem;
}
.sidebar.collapsed.mobile-open .sidebar-footer {
padding: 1rem;
display: block;
justify-content: initial;
}
/* Same resets for the flash-prevention attribute selector */
html[data-sidebar-collapsed="true"] .sidebar,
html[data-sidebar-collapsed="true"] .sidebar.collapsed {
width: var(--sidebar-width);
min-width: var(--sidebar-width);
transform: translateX(-100%);
}
html[data-sidebar-collapsed="true"] .sidebar.mobile-open {
transform: translateX(0);
}
html[data-sidebar-collapsed="true"] .sidebar.mobile-open .sidebar-header {
padding: 0.5rem 0.75rem;
display: block;
justify-content: initial;
}
html[data-sidebar-collapsed="true"] .sidebar.mobile-open .sidebar-content {
padding: 1rem 0.5rem;
}
html[data-sidebar-collapsed="true"] .sidebar.mobile-open .sidebar-menu-button {
justify-content: initial;
padding: 0.5rem 0.75rem;
}
html[data-sidebar-collapsed="true"] .sidebar.mobile-open .sidebar-footer {
padding: 1rem;
display: block;
justify-content: initial;
}
/* Reduce main content padding on mobile */
.app-main {
padding: 1rem;
}
}
@media (min-width: 769px) and (max-width: 1440px) {
.app-main {
padding: 1rem;
}
}
/* Sidebar backdrop overlay (mobile) */
.sidebar-backdrop {
display: none;
}
@media (max-width: 768px) {
.sidebar-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 45;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
}
.auth-page {
position: relative;
display: flex;
min-height: 100vh;
min-height: 100dvh;
width: 100%;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 1rem 0;
font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}
.auth-bg-image {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.auth-gradient-overlay {
position: absolute;
inset: 0;
background: linear-gradient(160deg,
hsl(270 55% 12% / 0.85) 0%,
hsl(225 30% 8% / 0.92) 50%,
hsl(270 45% 10% / 0.88) 100%);
}
.auth-mesh-accents {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse at 25% 20%, hsl(24 95% 53% / 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 75% 80%, hsl(200 80% 50% / 0.06) 0%, transparent 50%);
}
.auth-content {
position: relative;
z-index: 10;
display: flex;
width: 100%;
max-width: 26rem;
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 1.5rem;
}
.auth-logo {
/* CityONE lockup is a wide horizontal mark; size by width. The SVG viewBox is
framed symmetrically around the artwork so it centres cleanly in .auth-content. */
width: 100%;
max-width: 20rem;
height: auto;
}
.auth-card {
width: 100%;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.06);
padding: 2rem;
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}
.auth-card h1 {
margin-bottom: 1.5rem;
text-align: center;
font-size: 1.25rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
}
.auth-fields {
display: flex;
flex-direction: column;
gap: 1rem;
}
.auth-field {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.auth-field label {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
}
.auth-field input,
.auth-field select {
width: 100%;
padding: 0.5rem 0.75rem;
height: 2.75rem;
border-radius: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
}
.auth-field input::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.auth-field input:focus {
border-color: rgba(243, 165, 41, 0.6);
box-shadow: 0 0 0 2px rgba(243, 165, 41, 0.15);
}
.auth-password-wrapper {
position: relative;
}
.auth-password-wrapper input {
padding-right: 2.75rem;
}
.auth-password-toggle {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: rgba(255, 255, 255, 0.4);
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
transition: color 0.2s;
}
.auth-password-toggle:hover {
color: rgba(255, 255, 255, 0.8);
}
.auth-remember-row {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 0.25rem;
}
.auth-remember {
display: flex;
align-items: center;
gap: 0.5rem;
}
.auth-remember input[type="checkbox"] {
width: 1rem;
height: 1rem;
accent-color: #f3a529;
cursor: pointer;
}
.auth-remember label {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
user-select: none;
}
.auth-forgot-link {
font-size: 0.875rem;
color: rgba(243, 165, 41, 0.8);
text-decoration: none;
transition: color 0.2s;
}
.auth-forgot-link:hover {
color: #f3a529;
}
.auth-submit-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1.5rem;
width: 100%;
height: 2.75rem;
border-radius: 0.5rem;
border: none;
background: #f3a529;
color: #1a1a2e;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s, transform 0.1s;
}
.auth-submit-btn:hover {
background: #e5971f;
}
.auth-submit-btn:active {
transform: scale(0.98);
}
.auth-partner-logos {
position: absolute;
bottom: 2rem;
right: 2.5rem;
z-index: 10;
display: flex;
align-items: center;
gap: 2rem;
opacity: 0.8;
}
.auth-partner-logos img {
height: 3.5rem;
width: auto;
object-fit: contain;
}
.auth-partner-logos img:first-child {
height: 4.5rem;
}
.auth-partner-logos img.invert {
filter: invert(1);
}
.auth-footer {
position: absolute;
bottom: 1.5rem;
left: 2rem;
z-index: 10;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.3);
}
.auth-status-message {
margin-bottom: 1rem;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-size: 0.875rem;
border: 1px solid;
}
.auth-status-message.error {
background: rgba(239, 68, 68, 0.12);
border-color: rgba(239, 68, 68, 0.3);
color: #fca5a5;
}
.auth-status-message.success {
background: rgba(34, 197, 94, 0.12);
border-color: rgba(34, 197, 94, 0.3);
color: #86efac;
}
.auth-info-text {
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 0.875rem;
line-height: 1.6;
margin: 1rem 0;
}
.auth-card-icon {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
.auth-card-icon svg {
width: 3rem;
height: 3rem;
}
.auth-validation-message {
display: block;
font-size: 0.75rem;
color: #fca5a5;
margin-top: 0.375rem;
}
.auth-link {
color: rgba(243, 165, 41, 0.8);
text-decoration: none;
transition: color 0.2s;
}
.auth-link:hover {
color: #f3a529;
}
.auth-link-block {
display: block;
text-align: center;
margin-top: 1.25rem;
font-size: 0.875rem;
}
@media (max-width: 768px) {
.auth-partner-logos {
display: none;
}
.auth-footer {
left: 50%;
transform: translateX(-50%);
text-align: center;
}
}
@media (max-width: 480px) {
.auth-card {
padding: 1.75rem;
}
.auth-logo {
max-width: 16rem;
}
}
/* ---- Login success transition: street lamps ignite, then navigate ----
Elements are created by js/login-success-animation.js, which also positions
them over the luminaires of the background photo. Everything animates on
opacity/transform only, so the sequence stays smooth on low-end devices. */
.auth-success-live {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.auth-lamp-layer {
position: absolute;
inset: 0;
z-index: 5;
overflow: hidden;
pointer-events: none;
}
/* One glow per luminaire, built to read as real light rather than a flat disc.
The element is a tall box (JS sizes it ~2.15x taller than wide) with the lamp
head anchored near the top (50% x, 30% y); everything below the head is room
for the downward throw. Three stacked radials make the head — a small hot
core (the lit LED bar), a tight inner bloom, and a soft round violet halo
that fades on a long exponential-like curve so it has no visible silhouette.
The ::before adds the conical throw. All of it dies out inside the element,
so nothing washes over the sky or the poles. */
.auth-lamp {
position: absolute;
opacity: 0;
mix-blend-mode: screen;
background:
/* hot core — the lit LED bar: bright and slightly horizontal, fading
SOFTLY so it melts into the halo below with no hard edge */
radial-gradient(ellipse 24% 7% at 50% 30%,
rgba(255, 255, 255, 0.95) 0%,
rgba(240, 234, 255, 0.5) 52%,
rgba(230, 222, 255, 0.16) 78%,
rgba(224, 214, 255, 0) 100%),
/* halo — its inner region is already bright, so where the white core
fades the violet glow carries the brightness on: one continuous ramp
from the hot centre out to the poświata, with no visible boundary */
radial-gradient(ellipse 54% 25% at 50% 30%,
rgba(224, 214, 255, 0.5) 0%,
rgba(216, 206, 255, 0.34) 14%,
rgba(208, 198, 255, 0.2) 30%,
rgba(203, 193, 255, 0.11) 48%,
rgba(200, 190, 255, 0.05) 66%,
rgba(199, 189, 255, 0.018) 82%,
rgba(199, 189, 255, 0) 100%);
transform: translate(-50%, -30%);
/* Pivot the ignite scale on the lamp head, so the glow grows OUT of the
panel rather than swelling from the middle of the (tall) box. */
transform-origin: 50% 30%;
will-change: transform, opacity;
animation: auth-lamp-ignite 1.2s cubic-bezier(0.33, 1, 0.68, 1) var(--d, 0ms) both;
}
/* Downward cone: a conic wedge (widens with distance from the head) masked by a
radial fade, so the throw tapers out softly over the road instead of reading
as a straight searchlight column. */
.auth-lamp::before {
content: "";
position: absolute;
inset: 0;
mix-blend-mode: screen;
background: conic-gradient(at 50% 30%,
transparent 152deg,
rgba(208, 200, 255, 0.10) 168deg,
rgba(214, 206, 255, 0.17) 180deg,
rgba(208, 200, 255, 0.10) 192deg,
transparent 208deg);
-webkit-mask-image: radial-gradient(ellipse 60% 52% at 50% 30%,
#000 0%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.28) 55%, transparent 78%);
mask-image: radial-gradient(ellipse 60% 52% at 50% 30%,
#000 0%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.28) 55%, transparent 78%);
}
/* Ignition: the panel lights up as a small bright point, then the glow swells
out of it — a gradual brighten-and-bloom rather than a blob appearing whole. */
@keyframes auth-lamp-ignite {
0% { opacity: 0; transform: translate(-50%, -30%) scale(0.32); }
45% { opacity: 0.9; transform: translate(-50%, -30%) scale(0.72); }
100% { opacity: 1; transform: translate(-50%, -30%) scale(1); }
}
/* Scene-wide response once the ignition starts: the darkening overlay eases
up slightly and the page chrome steps aside. The lift is kept subtle on
purpose — the photo's sky has its own aurora, and a stronger lift or a
brightness boost makes it flare up as if the animation painted it. */
html.login-anim .auth-gradient-overlay {
opacity: 0.68;
transition: opacity 1.6s ease 0.1s;
}
html.login-anim .auth-content,
html.login-anim .auth-partner-logos,
html.login-anim .auth-footer {
opacity: 0;
transform: translateY(6px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
/* Final cover before navigation; deep navy matches the night scene, so the
hand-off to the app shell never flashes white. */
.auth-anim-fade {
position: absolute;
inset: 0;
z-index: 40;
background: #0b0a1a;
opacity: 0;
pointer-events: none;
transition: opacity 0.45s ease;
}
.auth-anim-fade.on {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.auth-lamp {
animation: none;
opacity: 1;
}
html.login-anim .auth-gradient-overlay,
html.login-anim .auth-content,
html.login-anim .auth-partner-logos,
html.login-anim .auth-footer,
.auth-anim-fade {
transition: none;
}
}
.page-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.page-toolbar-left {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.page-toolbar-right {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
/* Search input — base styles live in lum.css (.lum-search-wrapper); the
page toolbar only pins the desktop width. */
.page-toolbar .lum-search-wrapper .lum-input {
width: 24rem;
}
/* Stat cards grid */
.page-stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.page-stat-grid--2 { grid-template-columns: repeat(2, 1fr); }
.page-stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.page-stat-grid--5 { grid-template-columns: repeat(5, 1fr); }
.page-stat-card {
display: flex;
align-items: baseline; /* label & value sit on a shared text baseline */
justify-content: space-between; /* label left, value right */
gap: 0.5rem;
padding: 0.5rem 0.875rem; /* was 1rem all-round */
border-radius: 0.75rem;
border: 1px solid hsl(var(--border));
background: hsl(var(--card));
}
.page-stat-label {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: hsl(var(--muted-foreground));
min-width: 0; /* permit wrapping in narrow cards */
}
.page-stat-value {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.2;
white-space: nowrap; /* keep "1,234.56 kWh" / "… PLN" intact */
text-align: right;
flex-shrink: 0;
}
/* Event/Task icon containers */
.lamp-icon { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.25rem; padding: 0.2rem; flex-shrink: 0; }
.lamp-icon svg { width: 0.9375rem; height: 0.9375rem; } /* 0.75rem +25% — Events/Tasks column glyphs were too small */
/* Event severity colors */
.lamp-icon.severity-critical { color: hsl(var(--destructive)); background: hsl(var(--destructive) / 0.1); }
.lamp-icon.severity-warning { color: hsl(var(--warning)); background: hsl(var(--warning) / 0.1); }
.lamp-icon.severity-info { color: hsl(var(--primary)); background: hsl(var(--primary) / 0.1); }
/* Task status colors */
.lamp-icon.status-pending { color: hsl(var(--muted-foreground)); background: hsl(var(--muted) / 0.5); }
.lamp-icon.status-active { color: hsl(var(--primary)); background: hsl(var(--primary) / 0.1); }
.lamp-icon.status-completed { color: hsl(var(--success)); background: hsl(var(--success) / 0.1); }
.lamp-icon.status-failed { color: hsl(var(--destructive)); background: hsl(var(--destructive) / 0.1); }
.lamp-icon.status-canceled { color: hsl(var(--muted-foreground)); background: hsl(var(--muted) / 0.7); opacity: 0.65; }
/* Expanded row two-column grid */
.lamp-expanded-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.lamp-expanded-section { display: flex; flex-direction: column; gap: 0.5rem; }
.lamp-expanded-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
/* Expanded row cards (events + tasks) */
.lamp-event-card,
.lamp-task-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid hsl(var(--border)); }
.lamp-event-card .lamp-icon,
.lamp-task-card .lamp-icon { padding: 0.4rem; }
.lamp-event-card .lamp-icon svg,
.lamp-task-card .lamp-icon svg { width: 1rem; height: 1rem; }
.lamp-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; overflow-wrap: break-word; word-break: break-word; }
.lamp-card-status { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.lamp-card-status.active { color: hsl(var(--success)); }
.lamp-card-status.completed { color: hsl(var(--success)); }
.lamp-card-status.failed { color: hsl(var(--destructive)); }
.lamp-card-status.pending { color: hsl(var(--warning)); }
.lamp-card-status.canceled { color: hsl(var(--muted-foreground)); }
html[data-theme-style="aurora"] .lamp-icon.status-pending {
background: hsl(0 0% 100% / 0.03);
}
html[data-theme-style="aurora"] .lamp-icon.status-canceled {
background: hsl(0 0% 100% / 0.04);
}
/* Frost theme — stat cards */
html[data-theme-style="frost"] .page-stat-card {
background: hsl(0 0% 100% / 0.7);
backdrop-filter: blur(8px);
border-color: hsl(214 32% 91%);
box-shadow: 0 1px 3px hsl(var(--foreground) / 0.05);
}
/* Aurora theme — stat cards. Thin glass WITHOUT backdrop-filter, matching
aurora .lum-card: the backdrop here is the near-uniform page gradient, so
the blur is invisible, but it made hover repaints nearby (table rows,
neighbouring tiles) flash a diagonal mesh reflection across the tile and
costs GPU time on mobile/low-res devices. */
html[data-theme-style="aurora"] .page-stat-card {
background: hsl(0 0% 100% / 0.06);
border-color: hsl(0 0% 100% / 0.1);
}
.events-toolbar-left {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.events-toggle {
display: flex;
align-items: center;
gap: 0.75rem;
height: 2.25rem;
padding: 0 0.75rem;
border-radius: calc(var(--radius) - 2px);
border: 1px solid hsl(var(--border));
background: hsl(var(--card));
}
html[data-theme-style="frost"] .events-toggle {
background: hsl(0 0% 100% / 0.7);
backdrop-filter: blur(8px);
border-color: hsl(214 32% 91%);
box-shadow: 0 1px 2px hsl(var(--foreground) / 0.05);
}
html[data-theme-style="aurora"] .events-toggle {
background: hsl(0 0% 100% / 0.06);
backdrop-filter: blur(var(--glass-blur));
border-color: hsl(0 0% 100% / 0.1);
}
.energy-date-range-spinner {
display: flex;
align-items: center;
justify-content: center;
min-height: 2rem;
}
.energy-date-range-dates {
display: block;
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
margin-top: 0.125rem;
font-variant-numeric: tabular-nums;
}
.config-stat-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
}
.energy-tariff-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.625rem;
border-radius: 0.375rem;
font-size: 0.75rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
background: hsl(var(--primary) / 0.1);
color: hsl(var(--primary));
border: 1px solid hsl(var(--primary) / 0.2);
white-space: nowrap;
}
.energy-tariff-badge svg {
width: 0.875rem;
height: 0.875rem;
}
/* Energy balance panel */
.energy-balance-details {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding-top: 0.5rem;
}
.energy-balance-section {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.energy-balance-section-title {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: hsl(var(--muted-foreground));
}
.energy-balance-section-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
.energy-balance-divider {
border-top: 1px dashed hsl(var(--border));
}
.energy-balance-item {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.energy-balance-item-value {
font-size: 1.125rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: hsl(var(--foreground));
}
.energy-balance-item-label {
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
}
.energy-balance-item-highlight {
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
border: 1px solid hsl(var(--primary) / 0.2);
background: hsl(var(--primary) / 0.05);
}
.energy-balance-item-highlight .energy-balance-item-value {
color: hsl(var(--primary));
}
/* Frost theme — energy balance highlight */
html[data-theme-style="frost"] .energy-balance-item-highlight {
background: hsl(var(--primary) / 0.08);
border-color: hsl(var(--primary) / 0.15);
}
/* Aurora theme — energy balance */
html[data-theme-style="aurora"] .energy-balance-divider {
border-color: hsl(0 0% 100% / 0.1);
}
html[data-theme-style="aurora"] .energy-balance-item-highlight {
background: hsl(var(--primary) / 0.1);
border-color: hsl(var(--primary) / 0.25);
}
.status-detail-item {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.status-detail-label {
font-size: 0.75rem;
font-weight: 500;
color: hsl(var(--muted-foreground));
text-transform: uppercase;
letter-spacing: 0.03em;
}
.status-detail-value {
font-size: 0.875rem;
color: hsl(var(--foreground));
font-variant-numeric: tabular-nums;
}
/* Status GEO dialog — coordinate display */
.status-geo-coords {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.status-geo-coords .status-detail-item {
padding: 0.75rem;
border-radius: 0.5rem;
border: 1px solid hsl(var(--border));
background: hsl(var(--card));
}
/* Frost theme — status detail cards */
html[data-theme-style="frost"] .status-geo-coords .status-detail-item {
background: hsl(0 0% 100% / 0.7);
backdrop-filter: blur(8px);
}
/* Aurora theme — status detail cards */
html[data-theme-style="aurora"] .status-geo-coords .status-detail-item {
background: hsl(0 0% 100% / 0.06);
backdrop-filter: blur(var(--glass-blur));
border-color: hsl(0 0% 100% / 0.1);
}
/* ===== Responsive ===== */
@media (max-width: 768px) {
.page-toolbar {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
.page-toolbar-left {
width: 100%;
}
.page-toolbar .lum-search-wrapper .lum-input {
width: 100%;
}
.page-toolbar-right {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.page-toolbar-right .lum-btn {
white-space: nowrap;
min-height: 44px;
width: 100%;
}
/* Dropdown-menu triggers fill their grid cell like plain buttons do */
.page-toolbar-right .page-toolbar-menu {
display: block;
width: 100%;
}
.events-toolbar-left {
width: 100%;
}
.events-toolbar-left .lum-btn {
min-height: 44px;
}
.events-toggle {
min-height: 44px;
}
.page-stat-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.config-stat-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.energy-balance-section-grid {
grid-template-columns: 1fr;
}
.lamp-expanded-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
/* Expanded cards: reduce gap on mobile */
.lamp-event-card,
.lamp-task-card {
gap: 0.5rem;
padding: 0.5rem;
}
}
/* Very small screens — stack label/value vertically for readability */
@media (max-width: 400px) {
.page-stat-card {
padding: 0.75rem;
}
.page-stat-value {
font-size: 1.25rem;
}
.page-stat-grid {
gap: 0.5rem;
}
.page-stat-grid--5 {
grid-template-columns: 1fr;
}
.config-stat-grid {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.page-toolbar-right {
grid-template-columns: 1fr;
}
.page-toolbar-right .lum-btn {
justify-content: center;
}
}
.export-format-btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 1rem;
border-radius: var(--radius);
border: 1px solid hsl(var(--border));
background: transparent;
color: hsl(var(--muted-foreground));
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.export-format-btn:hover {
background: hsl(var(--accent));
color: hsl(var(--accent-foreground));
border-color: hsl(var(--accent));
}
.export-format-btn.active {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
border-color: hsl(var(--primary));
}
.export-category-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem 1rem;
margin-top: 0.5rem;
}
/* ── Export dialog: sticky column search + accordion groups ── */
/* Sticky inside .lum-modal-body (its scroll container); the negative offsets
cancel the body's 1.5rem padding so the bar hugs the modal edge and content
scrolls underneath it. Near-opaque card background, no backdrop blur
(aurora policy: thin glass on small surfaces). */
.export-search-bar {
position: sticky;
top: -1.5rem;
z-index: 5;
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0 -1.5rem 0.25rem;
padding: 0.625rem 1.5rem;
background: hsl(var(--card) / 0.95);
border-bottom: 1px solid hsl(var(--border) / 0.6);
}
.export-search-bar .export-search-input {
flex: 1;
min-width: 0;
}
.export-columns-area {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1rem;
}
.export-group {
border: 1px solid hsl(var(--border) / 0.6);
border-radius: var(--radius);
background: hsl(var(--card) / 0.35);
}
.export-group-header {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
min-height: 44px;
cursor: pointer;
user-select: none;
}
.export-group-header:focus-visible {
outline: 2px solid hsl(var(--ring));
outline-offset: -2px;
border-radius: var(--radius);
}
.export-group-chevron {
flex-shrink: 0;
color: hsl(var(--muted-foreground));
transition: transform 0.15s ease;
}
.export-group-chevron.expanded {
transform: rotate(90deg);
}
.export-group-title {
flex: 1;
min-width: 0;
font-size: 0.8125rem;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.export-group-count {
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
color: hsl(var(--muted-foreground));
white-space: nowrap;
}
.export-group-count.has-selection {
color: hsl(var(--primary));
font-weight: 600;
}
.export-group-body {
padding: 0 0.75rem 0.75rem;
border-top: 1px solid hsl(var(--border) / 0.4);
}
.export-group-body .export-category-grid {
margin-top: 0.625rem;
}
@media (max-width: 640px) {
.export-group-selectall-label {
display: none; /* checkbox alone; the label steals width from the title */
}
}
.export-column-order {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
}
.export-date-fields {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.export-date-input {
width: 160px;
}
.export-order-item {
display: inline-flex;
align-items: center;
gap: 0.25rem;
cursor: grab;
user-select: none;
touch-action: manipulation;
border-radius: var(--radius);
transition: transform 0.15s, box-shadow 0.15s;
}
.export-drag-handle {
color: hsl(var(--muted-foreground));
flex-shrink: 0;
opacity: 0.5;
}
.export-order-item:hover .export-drag-handle {
opacity: 1;
}
.export-drag-ghost {
opacity: 0.35;
border: 1.5px dashed hsl(var(--primary));
border-radius: var(--radius);
}
.export-drag-chosen {
transform: scale(1.04);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 10;
}
.export-drag-active {
opacity: 0.85;
}
@media (max-width: 768px) {
.export-column-order {
touch-action: none;
}
.export-order-item {
min-height: 44px;
padding: 0.25rem;
}
.export-date-input {
width: 100%;
}
}
@media (max-width: 640px) {
.export-category-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 400px) {
.export-category-grid {
grid-template-columns: 1fr;
}
}
/* KPI card + widget moved to the component library (LumKpiCard / LumGlassWidget,
_content/Lmp.Web3.Components/css/lum-display.css). */
/* Alarm list (scrollable) */
.dashboard-alarm-list {
max-height: 22rem;
overflow-y: auto;
overflow-x: hidden;
padding-right: 0.25rem;
}
/* Alarm row */
.dashboard-alarm-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem;
border-radius: 0.75rem;
border: 1px solid;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
cursor: default;
}
.dashboard-alarm-row:hover {
transform: scale(1.01);
box-shadow: 0 4px 12px hsl(0 0% 0% / 0.1);
}
.dashboard-alarm-row.severity-critical {
background: hsl(var(--destructive) / 0.06);
border-color: hsl(var(--destructive) / 0.3);
}
.dashboard-alarm-row.severity-critical:hover {
border-color: hsl(var(--destructive) / 0.5);
}
.dashboard-alarm-row.severity-warning {
background: hsl(var(--warning) / 0.06);
border-color: hsl(var(--warning) / 0.3);
}
.dashboard-alarm-row.severity-warning:hover {
border-color: hsl(var(--warning) / 0.5);
}
.dashboard-alarm-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 9999px;
animation: dashboard-pulse 2s ease-in-out infinite;
will-change: opacity;
}
.dashboard-alarm-dot.critical {
background-color: hsl(var(--destructive));
}
.dashboard-alarm-dot.warning {
background-color: hsl(var(--warning));
}
@keyframes dashboard-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* Alarm timestamp: inline by default, stacks at narrow widget widths */
.dashboard-alarm-time {
white-space: nowrap;
}
.dashboard-alarm-time-sep {
margin: 0 0.25rem;
opacity: 0.6;
}
@container (max-width: 360px) {
.dashboard-alarm-time {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.dashboard-alarm-time-sep {
display: none;
}
}
/* Alarm groups (event-type aggregation with expandable detail rows) */
.dashboard-alarm-group {
border-radius: 0.75rem;
border: 1px solid;
overflow: hidden;
}
.dashboard-alarm-group.severity-critical {
background: hsl(var(--destructive) / 0.06);
border-color: hsl(var(--destructive) / 0.3);
}
.dashboard-alarm-group.severity-warning {
background: hsl(var(--warning) / 0.06);
border-color: hsl(var(--warning) / 0.3);
}
.dashboard-alarm-group.severity-info {
background: hsl(var(--muted) / 0.06);
border-color: hsl(var(--border));
}
.dashboard-alarm-group-header {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.75rem;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
color: inherit;
font: inherit;
transition: background-color 0.15s;
}
.dashboard-alarm-group-header:hover {
background: hsl(var(--foreground) / 0.04);
}
.dashboard-alarm-group-header:focus-visible {
outline: 2px solid hsl(var(--ring));
outline-offset: -2px;
}
.dashboard-alarm-group-icon {
width: 0.875rem;
height: 0.875rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: hsl(var(--muted-foreground));
}
.dashboard-alarm-group-icon svg {
width: 100%;
height: 100%;
}
.severity-critical .dashboard-alarm-group-icon { color: hsl(var(--destructive)); }
.severity-warning .dashboard-alarm-group-icon { color: hsl(var(--warning)); }
.dashboard-alarm-group-label {
font-size: 0.875rem;
font-weight: 500;
color: hsl(var(--foreground));
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dashboard-alarm-group-count {
font-size: 0.75rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
background: hsl(var(--foreground) / 0.08);
color: hsl(var(--foreground));
flex-shrink: 0;
}
.severity-critical .dashboard-alarm-group-count {
background: hsl(var(--destructive) / 0.18);
color: hsl(var(--destructive));
}
.severity-warning .dashboard-alarm-group-count {
background: hsl(var(--warning) / 0.18);
color: hsl(var(--warning));
}
.dashboard-alarm-group-chevron {
width: 1rem;
height: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: hsl(var(--muted-foreground));
transition: transform 0.2s;
}
.dashboard-alarm-group-chevron svg {
width: 100%;
height: 100%;
}
.dashboard-alarm-group-header[aria-expanded="true"] .dashboard-alarm-group-chevron {
transform: rotate(180deg);
}
.dashboard-alarm-detail-list {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0 0.5rem 0.5rem 0.5rem;
}
.dashboard-alarm-detail-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.5rem 0.625rem;
gap: 0.5rem;
background: hsl(var(--background) / 0.4);
border: 1px solid hsl(var(--border) / 0.6);
border-radius: 0.5rem;
cursor: pointer;
text-align: left;
color: inherit;
font: inherit;
transition: background-color 0.15s, border-color 0.15s;
}
.dashboard-alarm-detail-row:hover {
background: hsl(var(--background) / 0.7);
border-color: hsl(var(--border));
}
.dashboard-alarm-detail-row:focus-visible {
outline: 2px solid hsl(var(--ring));
outline-offset: 2px;
}
@container (max-width: 360px) {
.dashboard-alarm-group-header {
padding: 0.625rem;
gap: 0.375rem;
}
.dashboard-alarm-detail-row {
padding: 0.5rem;
}
}
/* Sun arc */
.dashboard-sun-arc {
width: 100%;
max-height: 8rem;
}
/* Mini-map styles moved to the component library (LumMiniMap,
_content/Lmp.Web3.Components/css/lum-display.css). */
/* ApexCharts: keep tooltips/crosshairs inside each widget */
.dashboard-widget .apexcharts-canvas {
overflow: clip;
}
/* ApexCharts theme overrides */
.apexcharts-tooltip {
background: hsl(var(--card)) !important;
border: 1px solid hsl(var(--border)) !important;
border-radius: 0.75rem !important;
box-shadow: 0 8px 24px hsl(0 0% 0% / 0.25) !important;
color: hsl(var(--foreground)) !important;
}
.apexcharts-tooltip-title {
background: hsl(var(--muted)) !important;
border-bottom: 1px solid hsl(var(--border)) !important;
color: hsl(var(--foreground)) !important;
font-weight: 600 !important;
}
.apexcharts-tooltip-text {
color: hsl(var(--foreground)) !important;
}
.apexcharts-xaxis-label,
.apexcharts-yaxis-label {
fill: hsl(var(--muted-foreground)) !important;
font-size: 11px !important;
}
.apexcharts-gridline {
stroke: hsl(var(--border)) !important;
}
.apexcharts-legend-text {
color: hsl(var(--muted-foreground)) !important;
}
html[data-theme-style="frost"] .apexcharts-tooltip {
background: hsl(0 0% 100% / 0.95) !important;
}
html[data-theme-style="aurora"] .apexcharts-tooltip {
background: hsl(var(--popover) / 0.92) !important;
border-color: hsl(0 0% 100% / 0.18) !important;
backdrop-filter: blur(20px) saturate(1.35);
-webkit-backdrop-filter: blur(20px) saturate(1.35);
}
html[data-theme-style="aurora"] .apexcharts-tooltip-title {
background: hsl(0 0% 100% / 0.06) !important;
border-bottom-color: hsl(0 0% 100% / 0.12) !important;
}
.chart-tooltip-body {
padding: 8px 12px;
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
}
.chart-tooltip-row {
display: flex;
align-items: center;
gap: 8px;
}
.chart-tooltip-dot {
width: 8px;
height: 8px;
border-radius: 9999px;
flex-shrink: 0;
}
.chart-tooltip-name {
color: hsl(var(--muted-foreground));
flex: 1;
min-width: 70px;
}
.chart-tooltip-value {
color: hsl(var(--foreground));
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.chart-tooltip-total {
border-top: 1px solid hsl(var(--border));
padding-top: 4px;
margin-top: 2px;
padding-left: 16px;
}
.chart-tooltip-total .chart-tooltip-name {
color: hsl(var(--foreground));
font-weight: 600;
}
.chart-tooltip-date {
color: hsl(var(--muted-foreground));
font-weight: 400;
margin-left: 6px;
}
.change-mode-step-bar {
display: flex;
align-items: center;
gap: 0.5rem;
padding-top: 0.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid hsl(var(--border));
flex-wrap: wrap;
justify-content: center;
}
.change-mode-step-badge {
height: 1.75rem;
width: 1.75rem;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
transition: background-color 0.2s, color 0.2s;
flex-shrink: 0;
}
.change-mode-step-badge.active,
.change-mode-step-badge.done {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
.change-mode-step-badge.active {
box-shadow: 0 0 0 3px hsl(var(--primary) / 0.2);
}
.change-mode-step-badge.pending {
background: hsl(var(--muted));
color: hsl(var(--muted-foreground));
}
html[data-theme-style="frost"] .change-mode-step-badge.pending {
background: hsl(210 20% 90%);
color: hsl(215 16% 47%);
}
.change-mode-content {
padding-top: 1rem;
}
.change-mode-step-connector {
flex: 1;
height: 2px;
min-width: 1rem;
max-width: 3rem;
background: hsl(var(--muted));
border-radius: 1px;
transition: background-color 0.2s;
}
.change-mode-step-connector.done {
background: hsl(var(--primary));
}
.change-mode-step-label {
font-size: 0.6875rem;
font-weight: 500;
}
.change-mode-summary-accent {
position: relative;
overflow: hidden;
}
.change-mode-summary-accent::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary) / 0.3));
border-radius: 0.75rem 0.75rem 0 0;
}
.change-mode-dialog .lum-modal-footer .lum-btn {
min-height: 2.75rem;
}
html[data-theme-style="frost"] .change-mode-step-connector {
background: hsl(213 27% 84%);
}
html[data-theme-style="frost"] .change-mode-step-connector.done {
background: hsl(var(--primary));
}
html[data-theme-style="aurora"] .change-mode-step-connector {
background: hsl(0 0% 100% / 0.1);
}
html[data-theme-style="aurora"] .change-mode-step-connector.done {
background: hsl(var(--primary));
}
@media (max-width: 640px) {
.change-mode-step-bar {
gap: 0.25rem;
}
.change-mode-step-connector {
min-width: 0.5rem;
max-width: 1.5rem;
}
.change-mode-dialog .lum-modal-footer {
gap: 0.75rem;
}
.change-mode-dialog .lum-modal-footer .lum-btn {
width: 100%;
}
}
.change-mode-card {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
border: 1px solid hsl(var(--border));
background: hsl(var(--secondary) / 0.5);
transition: border-color 0.15s, background-color 0.15s;
cursor: pointer;
text-align: left;
width: 100%;
}
.change-mode-card:hover {
border-color: hsl(var(--primary) / 0.5);
}
html[data-theme-style="frost"] .change-mode-card {
border-color: hsl(213 27% 84%);
background: hsl(0 0% 100% / 0.8);
}
html[data-theme-style="frost"] .change-mode-card:hover {
border-color: hsl(45 93% 58%);
}
html[data-theme-style="aurora"] .change-mode-card {
border-color: hsl(0 0% 100% / 0.1);
background: hsl(0 0% 100% / 0.06);
}
html[data-theme-style="aurora"] .change-mode-card:hover {
border-color: hsl(0 0% 100% / 0.25);
}
.change-mode-card-selected {
border-color: hsl(var(--primary)) !important;
background: hsl(var(--primary) / 0.1) !important;
}
html[data-theme-style="frost"] .change-mode-card-selected {
border-color: hsl(45 96% 50%) !important;
background: hsl(48 100% 96%) !important;
}
html[data-theme-style="aurora"] .change-mode-card-selected {
border-color: hsl(var(--primary)) !important;
background: hsl(var(--primary) / 0.15) !important;
}
.change-mode-icon-box {
height: 2.25rem;
width: 2.25rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: hsl(var(--muted));
color: hsl(var(--muted-foreground));
}
.change-mode-icon-box svg {
width: 1.25rem;
height: 1.25rem;
}
.change-mode-icon-box.active {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
html[data-theme-style="frost"] .change-mode-icon-box {
background: hsl(210 20% 96%);
color: hsl(215 20% 40%);
}
.change-mode-summary {
padding: 1.25rem;
border-radius: 0.75rem;
border: 1px solid hsl(var(--border));
background: hsl(var(--secondary) / 0.5);
}
html[data-theme-style="frost"] .change-mode-summary {
border-color: hsl(213 27% 84%);
background: hsl(0 0% 100% / 0.8);
}
html[data-theme-style="aurora"] .change-mode-summary {
border-color: hsl(0 0% 100% / 0.1);
background: hsl(0 0% 100% / 0.06);
}
/* Footer layout — Cancel+Back left, Next right */
.change-mode-dialog .lum-modal-footer { justify-content: space-between; }
/* Astronomical clock offset pickers — label / control grid, stacked on narrow screens */
.change-mode-offset-row {
display: grid;
grid-template-columns: 140px 1fr;
align-items: center;
gap: 0.75rem;
}
@media (max-width: 640px) {
.change-mode-offset-row {
grid-template-columns: 1fr;
}
}
/* Site-location preview. The shared .lamp-drawer-map only rounds its bottom corners
because it sits flush at the foot of the details drawer; inside this card it needs
all four plus a border of its own. */
.change-mode-astro-map {
border-radius: 0.5rem;
border: 1px solid hsl(var(--border));
overflow: hidden;
}
.change-mode-astro-map .lamp-drawer-map {
border-radius: 0;
}
/* Confirmation lamp item frost override */
html[data-theme-style="frost"] .change-mode-lamp-item {
background: hsl(210 20% 96%);
}
/* Schedule card grid */
.change-mode-schedule-card {
width: 100%;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
border: 1px solid hsl(var(--border));
background: hsl(var(--secondary) / 0.5);
transition: border-color 0.15s, background-color 0.15s;
cursor: pointer;
text-align: left;
}
.change-mode-schedule-card:hover {
border-color: hsl(var(--primary) / 0.5);
}
html[data-theme-style="frost"] .change-mode-schedule-card {
border-color: hsl(213 27% 84%);
background: hsl(0 0% 100% / 0.8);
}
html[data-theme-style="frost"] .change-mode-schedule-card:hover {
border-color: hsl(45 93% 58%);
}
html[data-theme-style="aurora"] .change-mode-schedule-card {
border-color: hsl(0 0% 100% / 0.1);
background: hsl(0 0% 100% / 0.06);
}
html[data-theme-style="aurora"] .change-mode-schedule-card:hover {
border-color: hsl(0 0% 100% / 0.25);
}
.change-mode-schedule-card-selected {
border-color: hsl(var(--primary)) !important;
background: hsl(var(--primary) / 0.1) !important;
}
html[data-theme-style="frost"] .change-mode-schedule-card-selected {
border-color: hsl(45 96% 50%) !important;
background: hsl(48 100% 96%) !important;
}
html[data-theme-style="aurora"] .change-mode-schedule-card-selected {
border-color: hsl(var(--primary)) !important;
background: hsl(var(--primary) / 0.15) !important;
}
.configure-step-bar {
display: flex;
align-items: center;
gap: 0.5rem;
padding-top: 0.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid hsl(var(--border));
flex-wrap: wrap;
justify-content: center;
}
.configure-step-badge {
height: 1.75rem;
width: 1.75rem;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
transition: background-color 0.2s, color 0.2s;
flex-shrink: 0;
}
.configure-step-badge.active,
.configure-step-badge.done {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
.configure-step-badge.active {
box-shadow: 0 0 0 3px hsl(var(--primary) / 0.2);
}
.configure-step-badge.pending {
background: hsl(var(--muted));
color: hsl(var(--muted-foreground));
}
html[data-theme-style="frost"] .configure-step-badge.pending {
background: hsl(210 20% 90%);
color: hsl(215 16% 47%);
}
.configure-content {
padding-top: 1rem;
}
.configure-step-connector {
flex: 1;
height: 2px;
min-width: 1rem;
max-width: 3rem;
background: hsl(var(--muted));
border-radius: 1px;
transition: background-color 0.2s;
}
.configure-step-connector.done {
background: hsl(var(--primary));
}
.configure-step-label {
font-size: 0.6875rem;
font-weight: 500;
}
html[data-theme-style="frost"] .configure-step-connector {
background: hsl(213 27% 84%);
}
html[data-theme-style="frost"] .configure-step-connector.done {
background: hsl(var(--primary));
}
html[data-theme-style="aurora"] .configure-step-connector {
background: hsl(0 0% 100% / 0.1);
}
html[data-theme-style="aurora"] .configure-step-connector.done {
background: hsl(var(--primary));
}
/* Section box (tariff zones, readings) */
.configure-section-box {
padding: 1rem;
border-radius: 0.75rem;
border: 1px solid hsl(var(--border));
background: hsl(var(--secondary) / 0.5);
}
html[data-theme-style="frost"] .configure-section-box {
border-color: hsl(213 27% 84%);
background: hsl(0 0% 100% / 0.8);
}
html[data-theme-style="aurora"] .configure-section-box {
border-color: hsl(0 0% 100% / 0.1);
background: hsl(0 0% 100% / 0.06);
}
/* Enable/disable toggle row */
.configure-scope-toggle {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
padding: 0.5rem 0;
user-select: none;
}
.configure-scope-checkbox {
height: 1.25rem;
width: 1.25rem;
border-radius: 0.25rem;
border: 2px solid hsl(var(--border));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background-color 0.15s, border-color 0.15s;
}
.configure-scope-checkbox.checked {
background: hsl(var(--primary));
border-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
/* Zone badge (T1 / T2 circle) */
.configure-zone-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 9999px;
font-size: 0.6875rem;
font-weight: 700;
flex-shrink: 0;
color: hsl(var(--primary-foreground));
}
.configure-zone-badge.t1 {
background: hsl(var(--primary));
}
.configure-zone-badge.t2 {
background: hsl(var(--warning));
}
/* Per-zone inline timeline bar */
.configure-timeline {
position: relative;
height: 1.75rem;
border-radius: 9999px;
background: hsl(var(--muted) / 0.3);
overflow: hidden;
}
.configure-timeline-segment {
position: absolute;
top: 0;
height: 100%;
border-radius: 9999px;
}
.configure-timeline-segment.t1 {
background: hsl(var(--primary) / 0.7);
}
.configure-timeline-segment.t2 {
background: hsl(var(--warning) / 0.6);
}
.configure-timeline-center-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6875rem;
font-weight: 600;
color: hsl(var(--foreground));
pointer-events: none;
white-space: nowrap;
}
/* Disabled section fade */
.configure-disabled {
opacity: 0.4;
pointer-events: none;
transition: opacity 0.2s;
}
/* Summary card */
.configure-summary {
padding: 1.25rem;
border-radius: 0.75rem;
border: 1px solid hsl(var(--border));
background: hsl(var(--secondary) / 0.5);
}
html[data-theme-style="frost"] .configure-summary {
border-color: hsl(213 27% 84%);
background: hsl(0 0% 100% / 0.8);
}
html[data-theme-style="aurora"] .configure-summary {
border-color: hsl(0 0% 100% / 0.1);
background: hsl(0 0% 100% / 0.06);
}
.configure-summary-accent {
position: relative;
overflow: hidden;
}
.configure-summary-accent::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary) / 0.3));
border-radius: 0.75rem 0.75rem 0 0;
}
/* Footer layout — Cancel+Back left, Next right */
.configure-dialog .lum-modal-footer {
justify-content: space-between;
}
.configure-dialog .lum-modal-footer .lum-btn {
min-height: 2.75rem;
}
/* Confirmation lamp item frost override */
html[data-theme-style="frost"] .configure-lamp-item {
background: hsl(210 20% 96%);
}
/* Mobile overrides */
@media (max-width: 640px) {
.configure-step-bar {
gap: 0.25rem;
}
.configure-step-label {
display: none;
}
.configure-step-connector {
min-width: 0.5rem;
max-width: 1.5rem;
}
.configure-dialog .lum-modal-footer {
gap: 0.75rem;
}
.configure-dialog .lum-modal-footer .lum-btn {
width: 100%;
}
}
.admin-config-step-bar {
display: flex;
align-items: center;
gap: 0.5rem;
padding-top: 0.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid hsl(var(--border));
flex-wrap: wrap;
justify-content: center;
}
.admin-config-step-badge {
height: 1.75rem;
width: 1.75rem;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
transition: background-color 0.2s, color 0.2s;
flex-shrink: 0;
}
.admin-config-step-badge.active,
.admin-config-step-badge.done {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
.admin-config-step-badge.active {
box-shadow: 0 0 0 3px hsl(var(--primary) / 0.2);
}
.admin-config-step-badge.pending {
background: hsl(var(--muted));
color: hsl(var(--muted-foreground));
}
html[data-theme-style="frost"] .admin-config-step-badge.pending {
background: hsl(210 20% 90%);
color: hsl(215 16% 47%);
}
.admin-config-content {
padding-top: 1rem;
min-width: 0;
}
.admin-config-step-connector {
flex: 1;
height: 2px;
min-width: 1rem;
max-width: 3rem;
background: hsl(var(--muted));
border-radius: 1px;
transition: background-color 0.2s;
}
.admin-config-step-connector.done {
background: hsl(var(--primary));
}
.admin-config-step-label {
font-size: 0.6875rem;
font-weight: 500;
}
/* Action cards (Read / Configure) */
.admin-config-action-card {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 1rem 1.25rem;
border-radius: 0.75rem;
border: 1px solid hsl(var(--border));
background: hsl(var(--secondary) / 0.5);
transition: border-color 0.15s, background-color 0.15s;
cursor: pointer;
text-align: left;
width: 100%;
}
.admin-config-action-card:hover {
border-color: hsl(var(--primary) / 0.5);
}
html[data-theme-style="frost"] .admin-config-action-card {
border-color: hsl(213 27% 84%);
background: hsl(0 0% 100% / 0.8);
}
html[data-theme-style="frost"] .admin-config-action-card:hover {
border-color: hsl(45 93% 58%);
}
html[data-theme-style="aurora"] .admin-config-action-card {
border-color: hsl(0 0% 100% / 0.1);
background: hsl(0 0% 100% / 0.06);
}
html[data-theme-style="aurora"] .admin-config-action-card:hover {
border-color: hsl(0 0% 100% / 0.25);
}
.admin-config-action-card-selected {
border-color: hsl(var(--primary)) !important;
background: hsl(var(--primary) / 0.1) !important;
}
html[data-theme-style="frost"] .admin-config-action-card-selected {
border-color: hsl(45 96% 50%) !important;
background: hsl(48 100% 96%) !important;
}
html[data-theme-style="aurora"] .admin-config-action-card-selected {
border-color: hsl(var(--primary)) !important;
background: hsl(var(--primary) / 0.15) !important;
}
.admin-config-action-icon-box {
height: 2.5rem;
width: 2.5rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: hsl(var(--muted));
color: hsl(var(--muted-foreground));
}
.admin-config-action-icon-box.active {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
html[data-theme-style="frost"] .admin-config-action-icon-box {
background: hsl(210 20% 96%);
color: hsl(215 20% 40%);
}
/* Tab bar */
.admin-config-tab-bar {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
padding: 0.25rem;
border-radius: 0.5rem;
background: hsl(var(--muted) / 0.5);
}
html[data-theme-style="frost"] .admin-config-tab-bar {
background: hsl(210 20% 96%);
}
html[data-theme-style="aurora"] .admin-config-tab-bar {
background: hsl(0 0% 100% / 0.06);
}
/* Section picker — tab bar on desktop, dropdown on narrow viewports */
.admin-config-tab-select {
display: none;
}
@media (max-width: 768px) {
.admin-config-tab-bar-desktop {
display: none;
}
.admin-config-tab-select {
display: block;
}
}
.admin-config-tab-select-row {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.admin-config-tab-select-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-config-tab {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.15s, color 0.15s;
color: hsl(var(--muted-foreground));
background: transparent;
border: none;
}
.admin-config-tab:hover {
color: hsl(var(--foreground));
background: hsl(var(--muted) / 0.5);
}
.admin-config-tab.active {
background: hsl(var(--background));
color: hsl(var(--foreground));
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
html[data-theme-style="frost"] .admin-config-tab.active {
background: white;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}
html[data-theme-style="aurora"] .admin-config-tab.active {
background: hsl(0 0% 100% / 0.1);
}
.admin-config-tab-dot {
width: 0.375rem;
height: 0.375rem;
border-radius: 9999px;
background: hsl(var(--warning));
flex-shrink: 0;
}
/* Config section box */
.admin-config-section-box {
padding: 1rem;
border-radius: 0.75rem;
border: 1px solid hsl(var(--border));
background: hsl(var(--secondary) / 0.5);
}
html[data-theme-style="frost"] .admin-config-section-box {
border-color: hsl(213 27% 84%);
background: hsl(0 0% 100% / 0.8);
}
html[data-theme-style="aurora"] .admin-config-section-box {
border-color: hsl(0 0% 100% / 0.1);
background: hsl(0 0% 100% / 0.06);
}
/* Scope toggle (enable/disable section) */
.admin-config-scope-toggle {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
transition: background-color 0.15s;
}
.admin-config-scope-toggle:hover {
background: hsl(var(--muted) / 0.5);
}
.admin-config-scope-checkbox {
height: 1.25rem;
width: 1.25rem;
border-radius: 0.25rem;
border: 2px solid hsl(var(--border));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background-color 0.15s, border-color 0.15s;
}
.admin-config-scope-checkbox.checked {
background: hsl(var(--primary));
border-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
/* Disabled section fade */
.admin-config-disabled {
opacity: 0.4;
pointer-events: none;
transition: opacity 0.2s;
}
/* Field row layout (label + input) */
.admin-config-field-row {
display: grid;
grid-template-columns: 140px 1fr;
align-items: center;
gap: 0.75rem;
}
/* Summary card */
.admin-config-summary {
padding: 1.25rem;
border-radius: 0.75rem;
border: 1px solid hsl(var(--border));
background: hsl(var(--secondary) / 0.5);
}
html[data-theme-style="frost"] .admin-config-summary {
border-color: hsl(213 27% 84%);
background: hsl(0 0% 100% / 0.8);
}
html[data-theme-style="aurora"] .admin-config-summary {
border-color: hsl(0 0% 100% / 0.1);
background: hsl(0 0% 100% / 0.06);
}
.admin-config-summary-accent {
position: relative;
overflow: hidden;
}
.admin-config-summary-accent::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary) / 0.3));
border-radius: 0.75rem 0.75rem 0 0;
}
/* Footer layout — Cancel+Back left, Next right */
.admin-config-dialog .lum-modal-footer {
justify-content: space-between;
}
.admin-config-dialog .lum-modal-footer .lum-btn {
min-height: 2.75rem;
}
/* Confirmation lamp item frost override */
html[data-theme-style="frost"] .admin-config-lamp-item {
background: hsl(210 20% 96%);
}
/* Frost theme overrides for connectors */
html[data-theme-style="frost"] .admin-config-step-connector {
background: hsl(213 27% 84%);
}
html[data-theme-style="frost"] .admin-config-step-connector.done {
background: hsl(var(--primary));
}
/* Aurora theme overrides for connectors */
html[data-theme-style="aurora"] .admin-config-step-connector {
background: hsl(0 0% 100% / 0.1);
}
html[data-theme-style="aurora"] .admin-config-step-connector.done {
background: hsl(var(--primary));
}
/* Hide step labels earlier — full Polish/German labels don't fit before mobile */
@media (max-width: 900px) {
.admin-config-step-label {
display: none;
}
.admin-config-step-bar {
gap: 0.375rem;
}
.admin-config-step-connector {
min-width: 0.75rem;
max-width: 2rem;
}
}
/* Mobile overrides */
@media (max-width: 640px) {
.admin-config-step-bar {
gap: 0.25rem;
}
.admin-config-step-connector {
min-width: 0.5rem;
max-width: 1.5rem;
}
.admin-config-field-row {
grid-template-columns: 1fr;
}
.admin-config-dialog .lum-modal-footer {
gap: 0.75rem;
}
.admin-config-dialog .lum-modal-footer .lum-btn {
width: 100%;
}
/* Touch-friendly inputs inside admin-config (16px font prevents iOS auto-zoom) */
.admin-config-dialog .lum-input,
.admin-config-dialog .lum-select-trigger {
min-height: 2.75rem;
font-size: 1rem;
}
/* Bigger DST checkbox tap target */
.admin-config-dialog .admin-config-field-row .flex.items-center.gap-2.cursor-pointer {
min-height: 2.75rem;
padding: 0.5rem 0;
}
/* Prevent summary row label/value from overlapping when value is long */
.admin-config-summary .flex.justify-between {
gap: 0.75rem;
}
.admin-config-summary .flex.justify-between > span:last-child {
min-width: 0;
text-align: right;
word-break: break-word;
}
}
/* Very narrow screens — ensure footer buttons wrap cleanly */
@media (max-width: 400px) {
.admin-config-dialog .lum-modal-footer {
flex-wrap: wrap;
}
.admin-config-dialog .lum-modal-footer > div {
width: 100%;
}
.admin-config-dialog .lum-modal-footer > div .lum-btn {
flex: 1;
}
}
/* Align the dialog's max-width with the content's width. The base xl size in
LumModal.razor.css caps the dialog at 64rem, but .lum-modal-xl .lum-modal-content
sets content to 72rem — content overflows the dialog. Visible in Aurora where
the dialog is transparent and its box-shadow draws an inner "ghost modal" ring. */
.lum-modal.schedule-editor-dialog {
max-width: min(72rem, calc(100vw - 1rem)) !important;
}
/* Pin the OUTER modal content to a fixed height so the dialog cannot auto-size
to its children. Higher specificity (.lum-modal.schedule-editor-dialog) beats
the scoped CSS in LumModal.razor.css. */
.lum-modal.schedule-editor-dialog .lum-modal-content {
height: min(85vh, 820px) !important;
max-height: min(85vh, 820px) !important;
}
.lum-modal.schedule-editor-dialog .lum-modal-body {
flex: 1 1 auto !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.schedule-editor-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 1.5rem;
align-items: start;
}
.schedule-editor-left {
min-width: 0;
display: flex;
flex-direction: column;
}
.schedule-editor-right {
border-left: 1px solid hsl(var(--border));
padding-left: 1.5rem;
}
.schedule-editor-tab-toolbar {
min-height: 64px;
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.schedule-preset-bar {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
background: hsl(var(--muted) / 0.5);
}
.schedule-solar-box,
.schedule-summary-box {
padding: 0.75rem;
border-radius: 0.5rem;
background: hsl(var(--muted) / 0.5);
border: 1px solid hsl(var(--border));
}
.schedule-curve-chart-wrapper {
position: relative;
width: 100%;
margin-bottom: 1rem;
}
.schedule-curve-chart {
width: 100%;
height: auto;
display: block;
touch-action: none;
user-select: none;
}
.schedule-chart-bg {
fill: hsl(var(--muted) / 0.3);
}
.schedule-chart-night {
fill: hsl(220 30% 15% / 0.25);
}
.schedule-chart-grid {
stroke: hsl(var(--border));
stroke-width: 0.5;
stroke-dasharray: 3 3;
}
.schedule-chart-label {
fill: hsl(var(--muted-foreground));
font-size: 11px;
font-family: monospace;
}
.schedule-chart-sunset {
stroke: hsl(220 20% 50%);
stroke-width: 1;
stroke-dasharray: 5 3;
}
.schedule-chart-sunrise {
stroke: hsl(37 90% 55%);
stroke-width: 1;
stroke-dasharray: 5 3;
}
.schedule-chart-marker-label {
fill: hsl(var(--muted-foreground));
font-size: 11px;
}
.schedule-chart-fill {
fill: hsl(var(--primary) / 0.15);
}
.schedule-chart-line {
fill: none;
stroke: hsl(var(--primary));
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.schedule-chart-handle {
fill: hsl(var(--primary));
stroke: hsl(var(--background));
stroke-width: 2.5;
transition: r 0.15s;
}
.schedule-chart-now {
stroke: hsl(0 85% 55%);
stroke-width: 1.5;
}
.schedule-chart-now-arrow {
fill: hsl(0 85% 55%);
}
.schedule-chart-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.375rem 0.5rem;
margin-top: 0.25rem;
border-radius: 0.5rem;
background: hsl(var(--muted) / 0.3);
border: 1px solid hsl(var(--border) / 0.5);
}
.schedule-chart-toolbar-info {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.schedule-points-table {
border-color: hsl(var(--border));
}
.schedule-points-header {
background: hsl(var(--muted) / 0.5);
border-bottom: 1px solid hsl(var(--border));
}
.schedule-points-row {
border-bottom: 1px solid hsl(var(--border) / 0.5);
transition: background 0.15s, color 0.15s;
cursor: pointer;
}
.schedule-points-row:last-child {
border-bottom: none;
}
.schedule-points-row:hover {
background: hsl(var(--muted) / 0.3);
}
.schedule-points-row.editing {
background: hsl(var(--primary) / 0.08);
}
.schedule-points-input {
padding: 0.25rem 0.375rem;
border-radius: 0.25rem;
border: 1px solid hsl(var(--border));
background: hsl(var(--background));
color: hsl(var(--foreground));
font-family: monospace;
font-size: 0.8125rem;
}
.schedule-points-input:focus {
outline: none;
border-color: hsl(var(--primary));
box-shadow: 0 0 0 2px hsl(var(--primary) / 0.25);
}
.schedule-special-days {
border-top: 1px solid hsl(var(--border));
padding-top: 1rem;
}
.schedule-special-day-chip {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.5rem;
border-radius: 0.375rem;
background: hsl(var(--primary) / 0.15);
color: hsl(var(--primary));
font-size: 0.75rem;
font-weight: 500;
}
.schedule-special-day-remove {
display: flex;
align-items: center;
padding: 0;
background: none;
border: none;
cursor: pointer;
color: hsl(var(--muted-foreground));
transition: color 0.15s;
}
.schedule-special-day-remove:hover {
color: hsl(var(--destructive));
}
/* Savings breakdown panel — toggled from the savings badge, sits under the
points table and recalculates live while the curve is edited. Shares the
solar/summary-box surface so it reads as part of the same dialog. */
.schedule-savings-panel {
margin-top: 1rem;
padding: 0.75rem;
border-radius: 0.5rem;
background: hsl(var(--muted) / 0.5);
border: 1px solid hsl(var(--border));
}
.schedule-savings-row {
border-bottom: 1px solid hsl(var(--border) / 0.5);
}
.schedule-savings-total {
border-top: 1px solid hsl(var(--border));
background: hsl(var(--muted) / 0.4);
}
/* The savings row — reference minus curve, highlighted in the primary hue so
the table itself answers "how much do we save". */
.schedule-savings-diff td {
border-top: 1px solid hsl(var(--primary) / 0.35);
background: hsl(var(--primary) / 0.08);
color: hsl(var(--primary));
}
.schedule-savings-summary {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
background: hsl(var(--primary) / 0.08);
border: 1px solid hsl(var(--primary) / 0.25);
}
/* Sunset/sunrise marker rows bracketing the breakdown — same hues as the
dashed markers on the curve chart (.schedule-chart-sunset/-sunrise), with a
soft gradient wash so they read as the window's opening and closing. */
.schedule-savings-sun td {
border-bottom: 1px solid hsl(var(--border) / 0.5);
}
.schedule-savings-sun--set td {
background: linear-gradient(90deg, hsl(220 45% 45% / 0.16), hsl(220 45% 45% / 0.04) 55%, transparent);
color: hsl(220 25% 55%);
}
.schedule-savings-sun--rise td {
background: linear-gradient(90deg, hsl(37 90% 50% / 0.16), hsl(37 90% 50% / 0.04) 55%, transparent);
color: hsl(37 80% 45%);
}
.schedule-savings-sun .schedule-savings-sun-icon {
flex-shrink: 0;
}
/* Attention flash when the savings badge scrolls the user here — a primary-hued
ring that swells and fades, so the jump has visible feedback even when the
panel was already in view. */
.schedule-savings-panel.schedule-savings-flash {
animation: schedule-savings-flash 1.1s ease-out;
}
@keyframes schedule-savings-flash {
0% {
box-shadow: 0 0 0 0 hsl(var(--primary) / 0.5);
border-color: hsl(var(--primary) / 0.7);
}
100% {
box-shadow: 0 0 0 14px hsl(var(--primary) / 0);
border-color: hsl(var(--border));
}
}
.schedule-savings-how summary { list-style: none; }
.schedule-savings-how summary::-webkit-details-marker { display: none; }
.schedule-savings-how[open] summary svg { transform: rotate(90deg); }
/* Mobile-only identity strip duplicates the right-panel name/description above
the grid on narrow viewports. Hidden on desktop; the desktop-only copy lives
in the right column. Toggling via display:none keeps only one input in the
DOM/focus order at any breakpoint. */
.schedule-identity-mobile { display: none; }
.schedule-identity-desktop { display: block; }
/* Stacked layout for tablet / narrow desktop (≤1024px).
Above 768px the LumModal stays a centered dialog; we still collapse
the two-panel grid so the chart and right-panel data each get full
width. The identity (Name/Desc) is moved to the mobile strip above
the grid so it sits at the top — chart stays directly under it. */
@media (max-width: 1024px) {
.schedule-identity-mobile { display: block; }
.schedule-identity-desktop { display: none; }
.schedule-editor-grid {
display: flex;
flex-direction: column;
gap: 1.25rem;
height: auto;
min-height: 0;
}
.schedule-editor-left,
.schedule-editor-right {
overflow-y: visible;
min-height: 0;
padding-right: 0;
scrollbar-gutter: auto;
}
/* Curve editor first; metadata (solar/summary) moves to the bottom. */
.schedule-editor-left { order: 1; }
.schedule-editor-right { order: 2; }
.schedule-editor-right {
border-left: none;
border-top: 1px solid hsl(var(--border));
padding-left: 0;
padding-top: 1rem;
margin-top: 0.25rem;
}
.schedule-editor-tab-toolbar {
min-height: 0;
}
.lum-modal.schedule-editor-dialog .lum-modal-body {
display: block;
overflow-y: auto !important;
}
.schedule-editor-grid {
flex-shrink: 0;
}
}
/* Phone / narrow tablet (≤768px). The schedule editor goes fullscreen at the
same breakpoint where LumModal switches to bottom-sheet — without this the
dialog's own height/width !important caps would leave a clipped half-sheet. */
@media (max-width: 768px) {
.schedule-editor-dialog.lum-modal,
html[data-theme-style="frost"] .schedule-editor-dialog.lum-modal,
html[data-theme-style="aurora"] .schedule-editor-dialog.lum-modal {
width: 100vw;
max-width: 100vw !important;
margin: 0;
border-radius: 0;
border-left: none;
border-right: none;
}
.lum-modal.schedule-editor-dialog .lum-modal-content {
height: 100dvh !important;
max-height: 100dvh !important;
width: 100vw;
border-radius: 0;
}
.lum-modal.schedule-editor-dialog .lum-modal-header {
padding: 0.875rem 1rem 0.5rem;
}
.lum-modal.schedule-editor-dialog .lum-modal-body {
padding: 0.75rem 1rem;
}
.lum-modal.schedule-editor-dialog .lum-modal-footer {
padding: 0.625rem 1rem;
padding-bottom: max(0.625rem, env(safe-area-inset-bottom));
}
.schedule-editor-grid {
gap: 1rem;
}
.schedule-curve-chart-wrapper {
min-height: 220px;
}
.schedule-points-table table {
font-size: 0.75rem;
}
.schedule-chart-toolbar {
flex-wrap: wrap;
}
/* Stack the Templates/Reset bar with the EnergySavings badge below it. */
.schedule-editor-left > div.flex.items-center.justify-between {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
}
/* Compact points table — hide # column and the inline progress-bar swatch so
time + power% + delete fit without horizontal scroll. */
@media (max-width: 520px) {
.schedule-points-table th:first-child,
.schedule-points-table td:first-child {
display: none;
}
.schedule-points-table td > div.flex.items-center.justify-end > div.h-2.rounded-full {
display: none;
}
.schedule-points-table th,
.schedule-points-table td {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}
/* Phone (≤480px). Tighten chart, drop the redundant Weekday/Weekend badge
(the active tab already conveys this), and clamp the special-day calendar
popover so it never overflows the viewport. */
@media (max-width: 480px) {
.schedule-curve-chart-wrapper {
min-height: 180px;
}
/* The active LumTab already shows "Weekdays"/"Weekend"; the small abbrev
badge to the right of the tab strip is redundant on phones and crowds
the row. */
.schedule-editor-left .lum-badge.ml-auto {
display: none;
}
.schedule-editor-dialog .lum-popover {
max-width: calc(100vw - 1.5rem);
}
.schedule-editor-dialog .lum-popover .lum-calendar {
font-size: 0.8125rem;
}
}
html[data-theme-style="frost"] .schedule-solar-box,
html[data-theme-style="frost"] .schedule-summary-box {
background: hsl(0 0% 96%);
border-color: hsl(0 0% 90%);
}
html[data-theme-style="frost"] .schedule-chart-bg {
fill: hsl(0 0% 96% / 0.5);
}
html[data-theme-style="frost"] .schedule-chart-night {
fill: hsl(220 20% 85% / 0.3);
}
html[data-theme-style="frost"] .schedule-preset-bar {
background: hsl(0 0% 96% / 0.7);
}
html[data-theme-style="frost"] .schedule-points-table {
border-color: hsl(0 0% 88%);
}
html[data-theme-style="frost"] .schedule-points-header {
background: hsl(210 20% 96% / 0.8);
border-color: hsl(0 0% 88%);
}
html[data-theme-style="frost"] .schedule-points-row {
border-color: hsl(0 0% 88% / 0.6);
color: hsl(210 10% 25%);
}
html[data-theme-style="frost"] .schedule-points-row:hover {
background: hsl(210 20% 96% / 0.5);
}
html[data-theme-style="frost"] .schedule-points-input {
background: hsl(0 0% 100%);
border-color: hsl(0 0% 88%);
color: hsl(210 10% 25%);
}
html[data-theme-style="frost"] .schedule-chart-toolbar {
background: hsl(210 20% 96% / 0.6);
border-color: hsl(0 0% 88% / 0.6);
}
html[data-theme-style="aurora"] .schedule-solar-box,
html[data-theme-style="aurora"] .schedule-summary-box {
background: hsl(260 30% 20% / 0.4);
border-color: hsl(260 30% 40% / 0.3);
backdrop-filter: blur(8px);
}
html[data-theme-style="aurora"] .schedule-chart-bg {
fill: hsl(260 30% 18% / 0.3);
}
html[data-theme-style="aurora"] .schedule-chart-night {
fill: hsl(260 30% 12% / 0.3);
}
html[data-theme-style="aurora"] .schedule-preset-bar {
background: hsl(260 30% 20% / 0.3);
backdrop-filter: blur(4px);
}
html[data-theme-style="aurora"] .schedule-points-table {
border-color: hsl(0 0% 100% / 0.1);
}
html[data-theme-style="aurora"] .schedule-points-header {
background: hsl(0 0% 100% / 0.04);
border-color: hsl(0 0% 100% / 0.08);
}
html[data-theme-style="aurora"] .schedule-points-row {
border-color: hsl(0 0% 100% / 0.06);
color: hsl(0 0% 100% / 0.9);
}
html[data-theme-style="aurora"] .schedule-points-row:hover {
background: hsl(0 0% 100% / 0.06);
}
html[data-theme-style="aurora"] .schedule-points-input {
background: hsl(0 0% 100% / 0.08);
border-color: hsl(0 0% 100% / 0.12);
color: hsl(0 0% 100%);
}
html[data-theme-style="aurora"] .schedule-chart-toolbar {
background: hsl(260 30% 20% / 0.3);
border-color: hsl(0 0% 100% / 0.08);
backdrop-filter: blur(4px);
}
/* Drawer header */
.lamp-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.lamp-drawer-header-info {
display: flex;
align-items: center;
gap: 0.75rem;
}
.lamp-drawer-header-title {
font-size: 1.125rem;
font-weight: 600;
color: hsl(var(--foreground));
}
.lamp-drawer-address {
font-size: 0.875rem;
color: hsl(var(--muted-foreground));
margin-top: 0.25rem;
}
/* Drawer actions bar */
.lamp-drawer-actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
padding: 0.75rem;
border-radius: 0.75rem;
border: 1px solid hsl(var(--border));
background: hsl(var(--secondary) / 0.5);
}
html[data-theme-style="frost"] .lamp-drawer-actions {
background: hsl(210 40% 96.1%);
border-color: hsl(214.3 31.8% 91.4%);
}
html[data-theme-style="aurora"] .lamp-drawer-actions {
background: hsl(0 0% 100% / 0.06);
border-color: hsl(0 0% 100% / 0.1);
}
@media (max-width: 640px) {
.lamp-drawer-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
padding: 0.625rem;
}
.lamp-drawer-actions > .lum-btn {
flex: none;
width: 100%;
}
}
/* Section card (used in all tabs) */
.lamp-drawer-section {
border-radius: 0.75rem;
padding: 1rem;
border: 1px solid hsl(var(--border));
background: hsl(var(--secondary) / 0.5);
}
html[data-theme-style="frost"] .lamp-drawer-section {
background: hsl(210 40% 96.1%);
border-color: hsl(214.3 31.8% 91.4%);
}
html[data-theme-style="aurora"] .lamp-drawer-section {
background: hsl(0 0% 100% / 0.06);
border-color: hsl(0 0% 100% / 0.1);
}
.lamp-drawer-section-title {
font-size: 0.875rem;
font-weight: 500;
color: hsl(var(--foreground));
margin-bottom: 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.lamp-drawer-gps-hint {
font-size: 0.625rem;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
background: hsl(var(--secondary) / 0.5);
color: hsl(var(--muted-foreground));
}
/* Key-value row (Info tab, status items) */
.lamp-drawer-kv {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.75rem;
padding: 0.375rem 0;
border-bottom: 1px solid hsl(var(--border));
}
.lamp-drawer-kv:last-child {
border-bottom: none;
}
.lamp-drawer-kv-label {
flex-shrink: 0;
font-size: 0.875rem;
color: hsl(var(--muted-foreground));
}
.lamp-drawer-kv-value {
flex: 1;
min-width: 0;
text-align: right;
overflow-wrap: anywhere;
word-break: break-word;
font-size: 0.875rem;
font-weight: 500;
color: hsl(var(--foreground));
font-variant-numeric: tabular-nums;
}
/* Status/reading item row */
.lamp-drawer-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
background: hsl(var(--background) / 0.5);
}
html[data-theme-style="frost"] .lamp-drawer-row {
background: hsl(0 0% 100%);
}
html[data-theme-style="aurora"] .lamp-drawer-row {
background: hsl(0 0% 100% / 0.04);
}
.lamp-drawer-row-inner {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
/* Value side of a status/reading/config row — long values (broker URL, server name)
wrap instead of pushing the label out of the card. */
.lamp-drawer-row-value {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 0.375rem;
min-width: 0;
text-align: right;
overflow-wrap: anywhere;
word-break: break-word;
font-size: 0.875rem;
font-weight: 500;
color: hsl(var(--foreground));
font-variant-numeric: tabular-nums;
}
/* Event card */
.lamp-drawer-event {
border-radius: 0.75rem;
padding: 0.75rem;
border: 1px solid hsl(var(--border) / 0.5);
transition: background-color 0.15s;
}
.lamp-drawer-event.severity-critical {
background: hsl(var(--destructive) / 0.1);
border-color: hsl(var(--destructive) / 0.3);
}
.lamp-drawer-event.severity-warning {
background: hsl(var(--warning) / 0.1);
border-color: hsl(var(--warning) / 0.3);
}
.lamp-drawer-event.inactive {
background: hsl(var(--muted) / 0.3);
border-color: hsl(var(--border) / 0.5);
}
/* GPS source indicator */
.lamp-drawer-gps-source {
font-size: 0.625rem;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
background: hsl(var(--secondary) / 0.5);
color: hsl(var(--muted-foreground));
}
html[data-theme-style="frost"] .lamp-drawer-gps-source {
background: hsl(213.1 93.9% 67.8% / 0.1);
}
html[data-theme-style="aurora"] .lamp-drawer-gps-source {
background: hsl(0 0% 100% / 0.04);
}
/* GPS edit form */
.lamp-drawer-gps-edit {
display: flex;
align-items: flex-end;
gap: 0.5rem;
padding: 0.5rem;
border-radius: 0.5rem;
flex-wrap: wrap;
background: hsl(var(--secondary) / 0.5);
}
html[data-theme-style="frost"] .lamp-drawer-gps-edit {
background: hsl(210 40% 96.1%);
}
html[data-theme-style="aurora"] .lamp-drawer-gps-edit {
background: hsl(0 0% 100% / 0.04);
}
/* Labelled group of rows inside a details card (configuration tab). The first group
sits straight under the reading date; the rest get breathing room above the heading. */
.lamp-drawer-group + .lamp-drawer-group {
margin-top: 1.25rem;
}
.lamp-drawer-group-title {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
color: hsl(var(--foreground));
}
/* Tilt popover */
.lamp-tilt-popover {
width: 13rem;
padding: 0.75rem;
}
/* Displacement dialog points */
.lamp-geo-point {
overflow: hidden;
border-radius: 0.5rem;
border: 1px solid hsl(var(--border));
background: hsl(var(--card));
transition: all 0.15s;
}
.lamp-geo-point.hovered {
box-shadow: 0 0 0 1px hsl(var(--primary) / 0.4);
}
html[data-theme-style="frost"] .lamp-geo-point {
border-color: hsl(214.3 31.8% 91.4%);
background: hsl(0 0% 100%);
}
html[data-theme-style="aurora"] .lamp-geo-point {
border-color: hsl(0 0% 100% / 0.08);
background: hsl(0 0% 100% / 0.03);
}
.lamp-geo-point td {
padding: 0.5rem 1rem;
font-size: 0.875rem;
border-top: 1px solid hsl(var(--border));
}
html[data-theme-style="frost"] .lamp-geo-point td {
border-top-color: hsl(210 40% 96.1%);
}
html[data-theme-style="aurora"] .lamp-geo-point td {
border-top-color: hsl(0 0% 100% / 0.06);
}
/* GPS edit modal map */
.gps-edit-map {
height: 280px;
width: 100%;
border-radius: 0.75rem;
border: 1px solid hsl(var(--border));
overflow: hidden;
}
@media (max-width: 640px) {
.gps-edit-map {
height: 200px;
}
}
/* GPS edit inputs row */
.gps-edit-inputs {
display: flex;
gap: 0.75rem;
}
@media (max-width: 640px) {
.gps-edit-inputs {
flex-direction: column;
}
}
/* GPS edit hint text */
.gps-edit-hint {
text-align: center;
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
}
/* GPS edit distance tooltip on map */
.gps-edit-distance-label {
background: hsl(var(--primary)) !important;
color: hsl(var(--primary-foreground)) !important;
border: none !important;
border-radius: 1rem !important;
padding: 0.125rem 0.5rem !important;
font-size: 0.6875rem !important;
font-weight: 500 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
white-space: nowrap !important;
}
.gps-edit-distance-label::before {
display: none !important;
}
/* Drawer mini map container */
.lamp-drawer-map {
width: 100%;
overflow: hidden;
border-bottom-left-radius: 0.75rem;
border-bottom-right-radius: 0.75rem;
}
/* Mobile/touch: thinner scrollbars */
@media (pointer: coarse) {
* {
scrollbar-width: thin;
}
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
}
.lamp-detail-page {
max-width: 56rem;
}
/* Toolbar: breadcrumb left + search right */
.lamp-detail-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
}
/* Breadcrumb */
.lamp-detail-breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
min-width: 0;
}
.lamp-detail-back-link {
display: flex;
align-items: center;
gap: 0.375rem;
color: hsl(var(--muted-foreground));
text-decoration: none;
transition: color 0.15s;
white-space: nowrap;
}
.lamp-detail-back-link:hover {
color: hsl(var(--foreground));
}
.lamp-detail-back-link svg {
width: 16px;
height: 16px;
}
.lamp-detail-breadcrumb-sep {
color: hsl(var(--muted-foreground));
display: flex;
align-items: center;
}
.lamp-detail-breadcrumb-sep svg {
width: 14px;
height: 14px;
}
.lamp-detail-breadcrumb-current {
font-weight: 600;
color: hsl(var(--foreground));
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Loading state */
.lamp-detail-loading {
padding: 2rem 0;
}
/* Not-found state */
.lamp-detail-not-found {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 1rem;
text-align: center;
gap: 0.75rem;
}
.lamp-detail-not-found-icon {
color: hsl(var(--muted-foreground));
margin-bottom: 0.5rem;
}
.lamp-detail-not-found-icon svg {
width: 48px;
height: 48px;
}
.lamp-detail-not-found h2 {
font-size: 1.25rem;
font-weight: 600;
color: hsl(var(--foreground));
margin: 0;
}
.lamp-detail-not-found p {
font-size: 0.875rem;
color: hsl(var(--muted-foreground));
max-width: 24rem;
margin: 0;
}
.lamp-detail-not-found .lum-btn {
margin-top: 0.5rem;
gap: 0.375rem;
}
.lamp-search-selector {
position: relative;
width: 18rem;
flex-shrink: 0;
}
.lamp-search-input-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0 0.75rem;
height: 2.25rem;
border-radius: calc(var(--radius) - 2px);
border: 1px solid hsl(var(--border));
background: hsl(var(--background));
transition: border-color 0.15s, box-shadow 0.15s;
}
.lamp-search-input-wrapper:focus-within {
border-color: hsl(var(--ring));
box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}
.lamp-search-input {
flex: 1;
border: none;
background: transparent;
color: hsl(var(--foreground));
font-size: 0.8125rem;
outline: none;
min-width: 0;
}
.lamp-search-input::placeholder {
color: hsl(var(--muted-foreground));
}
.lamp-search-clear {
display: flex;
align-items: center;
justify-content: center;
padding: 0.125rem;
border: none;
background: transparent;
color: hsl(var(--muted-foreground));
cursor: pointer;
border-radius: 2px;
}
.lamp-search-clear:hover {
color: hsl(var(--foreground));
}
/* Dropdown */
.lamp-search-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 50;
max-height: 20rem;
overflow-y: auto;
border-radius: calc(var(--radius) - 2px);
border: 1px solid hsl(var(--border));
background: hsl(var(--card));
box-shadow: 0 4px 12px hsl(0 0% 0% / 0.15);
}
/* Dropdown item */
.lamp-search-item {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 0 0.75rem;
width: 100%;
padding: 0.5rem 0.75rem;
border: none;
background: transparent;
text-align: left;
cursor: pointer;
transition: background-color 0.1s;
min-height: 2.75rem;
border-bottom: 1px solid hsl(var(--border) / 0.3);
}
.lamp-search-item:last-child {
border-bottom: none;
}
.lamp-search-item:hover,
.lamp-search-item.highlighted {
background: hsl(var(--accent));
}
.lamp-search-item.current {
background: hsl(var(--primary) / 0.08);
}
.lamp-search-item.current.highlighted {
background: hsl(var(--primary) / 0.15);
}
.lamp-search-item-main {
display: flex;
align-items: center;
gap: 0.5rem;
grid-column: 1;
grid-row: 1;
}
.lamp-search-item-id {
font-size: 0.8125rem;
font-weight: 600;
color: hsl(var(--foreground));
}
.lamp-search-item-detail {
font-size: 0.6875rem;
color: hsl(var(--muted-foreground));
grid-column: 1;
grid-row: 2;
padding-left: 1.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lamp-search-item-group {
grid-column: 2;
grid-row: 1 / -1;
align-self: center;
font-size: 0.625rem;
font-weight: 500;
padding: 0.125rem 0.375rem;
border-radius: calc(var(--radius) - 4px);
background: hsl(var(--secondary));
color: hsl(var(--muted-foreground));
white-space: nowrap;
}
.lamp-search-no-results {
padding: 0.75rem;
font-size: 0.8125rem;
color: hsl(var(--muted-foreground));
text-align: center;
}
/* Theme: Frost */
html[data-theme-style="frost"] .lamp-search-input-wrapper {
background: hsl(0 0% 100%);
border-color: hsl(214.3 31.8% 91.4%);
}
html[data-theme-style="frost"] .lamp-search-dropdown {
background: hsl(0 0% 100%);
border-color: hsl(214.3 31.8% 91.4%);
box-shadow: 0 4px 12px hsl(0 0% 0% / 0.08);
}
html[data-theme-style="frost"] .lamp-search-item:hover,
html[data-theme-style="frost"] .lamp-search-item.highlighted {
background: hsl(210 40% 96.1%);
}
html[data-theme-style="frost"] .lamp-search-item.current {
background: hsl(var(--primary) / 0.06);
}
/* Theme: Aurora */
html[data-theme-style="aurora"] .lamp-search-input-wrapper {
background: hsl(0 0% 100% / 0.04);
border-color: hsl(0 0% 100% / 0.1);
}
html[data-theme-style="aurora"] .lamp-search-dropdown {
background: hsl(var(--card));
border-color: hsl(0 0% 100% / 0.1);
backdrop-filter: blur(12px);
}
html[data-theme-style="aurora"] .lamp-search-item:hover,
html[data-theme-style="aurora"] .lamp-search-item.highlighted {
background: hsl(0 0% 100% / 0.06);
}
html[data-theme-style="aurora"] .lamp-search-item.current {
background: hsl(var(--primary) / 0.1);
}
html[data-theme-style="aurora"] .lamp-search-item-group {
background: hsl(0 0% 100% / 0.06);
}
/* Mobile responsive */
@media (max-width: 640px) {
.lamp-detail-toolbar {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
.lamp-search-selector {
width: 100%;
}
.lamp-search-dropdown {
position: fixed;
left: 0.5rem;
right: 0.5rem;
top: auto;
max-height: 50vh;
z-index: 100;
}
}
/* ========================================================================
Global header search (GlobalSearch.razor)
Reuses the .lamp-search-* dropdown/item styling; adds section headers and a
footer action, plus header/mobile sizing.
======================================================================== */
.global-search {
position: relative;
width: 16rem;
min-width: 0;
flex-shrink: 1;
}
.global-search .lamp-search-dropdown {
min-width: 20rem;
/* Aurora's --card is translucent; use the solid --popover so the dropdown
isn't see-through over page content. */
background: hsl(var(--popover));
}
html[data-theme-style="aurora"] .global-search .lamp-search-dropdown {
background: hsl(var(--popover));
}
/* Keep the input interior dark like the page search boxes (Aurora otherwise
tints the wrapper translucent-white). */
html[data-theme-style="aurora"] .global-search .lamp-search-input-wrapper {
background: hsl(var(--background));
}
.global-search--mobile {
width: 100%;
flex: 1;
min-width: 0;
}
/* The mobile overlay's generic ".mobile-search-bar input" rule targeted a bare
input; the embedded GlobalSearch supplies its own wrapper + icon, so reset
the inherited indent/radius. */
.global-search--mobile .lamp-search-input {
padding-left: 0;
border-radius: 0;
}
.global-search--mobile .lamp-search-dropdown {
position: fixed;
left: 0.5rem;
right: 0.5rem;
top: 3.25rem;
min-width: 0;
max-height: 60vh;
z-index: 100;
}
.global-search-section {
padding: 0.375rem 0.75rem 0.25rem;
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: hsl(var(--muted-foreground));
}
.global-search-item-icon {
width: 14px;
height: 14px;
color: hsl(var(--muted-foreground));
flex-shrink: 0;
}
.global-search-action {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.5rem 0.75rem;
border: none;
border-top: 1px solid hsl(var(--border));
background: transparent;
color: hsl(var(--primary));
font-size: 0.75rem;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: background-color 0.1s;
}
.global-search-action:hover,
.global-search-action.highlighted {
background: hsl(var(--accent));
}
.global-search-action svg {
flex-shrink: 0;
}
@media (max-width: 1024px) {
.global-search {
width: 12rem;
}
}
.mqtt-toolbar {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
padding: 1rem;
border-radius: 0.75rem;
border: 1px solid hsl(var(--border));
background: hsl(var(--card) / 0.6);
backdrop-filter: blur(12px);
}
html[data-theme-style="frost"] .mqtt-toolbar {
background: hsl(0 0% 100% / 0.8);
border-color: hsl(214.3 31.8% 91.4%);
}
html[data-theme-style="aurora"] .mqtt-toolbar {
background: hsl(0 0% 100% / 0.06);
border-color: hsl(0 0% 100% / 0.1);
}
.mqtt-toolbar-separator {
width: 1px;
height: 1.5rem;
background: hsl(var(--border));
flex-shrink: 0;
}
.mqtt-search-wrapper {
position: relative;
width: 100%;
}
.mqtt-search-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
width: 1rem;
height: 1rem;
color: hsl(var(--muted-foreground));
pointer-events: none;
}
.mqtt-search-input {
width: 100%;
padding-left: 2.25rem;
}
/* Status badge (LIVE / PAUSED) */
.mqtt-status-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.625rem;
border-radius: 9999px;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.05em;
white-space: nowrap;
}
.mqtt-status-badge.live {
background: hsl(var(--success) / 0.15);
color: hsl(var(--success));
}
.mqtt-status-badge.paused {
background: hsl(var(--warning) / 0.15);
color: hsl(var(--warning));
}
.mqtt-status-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 9999px;
background: currentColor;
}
.mqtt-status-badge.live .mqtt-status-dot {
animation: pulse-success 2s ease-in-out infinite;
}
/* Message count badge */
.mqtt-msg-count {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.5rem;
border-radius: 9999px;
font-size: 0.6875rem;
font-weight: 500;
background: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
white-space: nowrap;
}
/* Desktop live table */
.mqtt-live-desktop {
display: block;
}
.mqtt-live-mobile {
display: none;
}
/* Live table styles */
.mqtt-live-table {
width: 100%;
border-collapse: collapse;
font-size: 0.75rem;
}
.mqtt-live-table th {
padding: 0.5rem 0.75rem;
text-align: left;
font-weight: 500;
color: hsl(var(--muted-foreground));
border-bottom: 1px solid hsl(var(--border));
white-space: nowrap;
position: sticky;
top: 0;
background: hsl(var(--card));
z-index: 1;
}
html[data-theme-style="frost"] .mqtt-live-table th {
background: hsl(0 0% 100%);
}
html[data-theme-style="aurora"] .mqtt-live-table th {
background: hsl(270 30% 12%);
}
.mqtt-live-table td {
padding: 0.375rem 0.75rem;
border-bottom: 1px solid hsl(var(--border) / 0.5);
vertical-align: top;
}
.mqtt-live-table tr:hover td {
background: hsl(var(--accent) / 0.3);
}
.mqtt-live-scroll {
max-height: 65vh;
overflow-y: auto;
border-radius: 0.5rem;
border: 1px solid hsl(var(--border));
}
/* Mobile card layout for live events */
.mqtt-live-card {
padding: 0.75rem;
border-radius: 0.5rem;
border: 1px solid hsl(var(--border));
background: hsl(var(--card) / 0.5);
font-size: 0.75rem;
}
html[data-theme-style="frost"] .mqtt-live-card {
background: hsl(0 0% 100% / 0.7);
}
html[data-theme-style="aurora"] .mqtt-live-card {
background: hsl(0 0% 100% / 0.04);
}
.mqtt-live-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.375rem;
}
.mqtt-live-card-body {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
color: hsl(var(--foreground));
word-break: break-all;
font-size: 0.6875rem;
line-height: 1.4;
}
/* Hex payload display */
.mqtt-payload-hex {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
font-size: 0.6875rem;
/* Table cells force nowrap (.lum-table-cell); long hex payloads must wrap instead. */
white-space: normal;
word-break: break-all;
line-height: 1.4;
}
/* Topic badge colors */
.mqtt-topic-disconnect { color: hsl(var(--destructive)); }
.mqtt-topic-connect { color: hsl(var(--success)); }
.mqtt-topic-publish { color: hsl(var(--muted-foreground)); }
.mqtt-topic-subscribe { color: hsl(var(--primary)); }
/* Grouped tab grid */
.mqtt-grouped-grid {
width: 100%;
border-collapse: collapse;
font-size: 0.75rem;
}
.mqtt-grouped-grid th {
padding: 0.5rem 0.75rem;
text-align: left;
font-weight: 500;
color: hsl(var(--muted-foreground));
border-bottom: 1px solid hsl(var(--border));
white-space: nowrap;
}
.mqtt-grouped-grid td {
padding: 0.375rem 0.75rem;
border-bottom: 1px solid hsl(var(--border) / 0.5);
}
.mqtt-grouped-grid tr:hover td {
background: hsl(var(--accent) / 0.3);
}
.mqtt-grouped-grid tr.expanded td {
background: hsl(var(--accent) / 0.2);
}
.mqtt-grouped-expand {
padding: 0.75rem;
background: hsl(var(--secondary) / 0.3);
border-bottom: 1px solid hsl(var(--border));
}
html[data-theme-style="frost"] .mqtt-grouped-expand {
background: hsl(210 40% 96.1% / 0.5);
}
html[data-theme-style="aurora"] .mqtt-grouped-expand {
background: hsl(0 0% 100% / 0.03);
}
/* Date range toolbar in grouped tab */
.mqtt-grouped-toolbar {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
/* Empty state */
.mqtt-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 1rem;
color: hsl(var(--muted-foreground));
text-align: center;
gap: 0.75rem;
}
.mqtt-empty-state svg {
width: 3rem;
height: 3rem;
opacity: 0.4;
}
/* Copy button */
.mqtt-copy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border: none;
background: transparent;
color: hsl(var(--muted-foreground));
cursor: pointer;
border-radius: 0.25rem;
padding: 0;
transition: color 0.15s, background 0.15s;
}
.mqtt-copy-btn:hover {
color: hsl(var(--foreground));
background: hsl(var(--accent) / 0.3);
}
/* Expandable row toggle */
.mqtt-expand-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border: none;
background: transparent;
color: hsl(var(--muted-foreground));
cursor: pointer;
border-radius: 0.25rem;
padding: 0;
transition: transform 0.2s;
}
.mqtt-expand-btn.expanded {
transform: rotate(90deg);
}
/* Responsive breakpoints */
@media (max-width: 768px) {
.mqtt-toolbar {
flex-direction: column;
align-items: stretch;
}
.mqtt-toolbar-separator {
display: none;
}
.mqtt-live-desktop {
display: none;
}
.mqtt-live-mobile {
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 65vh;
overflow-y: auto;
}
.mqtt-grouped-toolbar {
flex-direction: column;
align-items: stretch;
}
}
@media (max-width: 480px) {
.mqtt-toolbar .lum-btn {
width: 100%;
justify-content: center;
min-height: 44px;
}
}
/* Map is full-bleed: drop .app-main's padding/scroll so the map fills
exactly without a negative-margin escape (which mismatched the padding
at viewport widths ≤1440px and produced scrollbars). */
.app-main:has(.map-page) {
padding: 0;
overflow: hidden;
}
.map-page {
position: relative;
height: 100%;
overflow: hidden;
/* Drawer height shared with the bottom-action bar so its drawer-open lift
stays in lockstep with the actual drawer size across breakpoints. */
--map-drawer-h: 45vh;
/* CSS containment so the map's responsive breakpoints fire on the map area
(not the viewport). The sidebar shrinks the available width, so a
viewport-only @media query would trigger far too late when the sidebar
is expanded. */
container-type: inline-size;
container-name: map;
/* Strip reservations consumed by .map-toolbar / .map-bulk-actions /
.map-edit-banner. They define how much horizontal space the centered
bars must leave clear for MapSearch (top-left) and MapKPIPanel
(bottom-left). When the side widgets shrink to icon/pill at narrow
container sizes, the @container blocks below shrink these vars so the
bars reclaim the space. */
--map-side-l: 308px; /* 16 (left margin) + 280 (search) + 12 (gap) */
--map-side-r: 16px;
--map-bot-l: 228px; /* 16 (left margin) + 200 (KPI panel) + 12 (gap) */
--map-bot-r: 16px; /* zoom column lifts above the bulk bar (line 8809+) */
}
#map-container {
position: absolute;
inset: 0;
z-index: 0;
}
/* --- Right-edge controls column (layers + zoom) ---
One positioned wrapper whose children stack as a 40px-wide column.
Bottom-anchored so the expanding style list pushes UP without
displacing the zoom group. z-index 800 sits below .map-fixtures-drawer
(900) so the expanded drawer slides on top. */
.map-right-controls {
position: absolute;
bottom: 16px;
right: 16px;
z-index: 800;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
/* --- Custom zoom group (+/- buttons) ---
Renders in Razor (Map.razor) instead of via Leaflet's control system
so it lives in the same DOM parent as the layers button and alignment
is guaranteed by flexbox, not by Leaflet's corner layout. */
.map-zoom-custom {
display: flex;
flex-direction: column;
width: 40px;
border: 1px solid hsl(var(--border));
border-radius: 12px;
overflow: hidden;
background: hsl(var(--card) / 0.95);
backdrop-filter: blur(16px);
box-shadow: 0 8px 32px hsl(0 0% 0% / 0.3);
}
.map-zoom-btn {
box-sizing: border-box;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-bottom: 1px solid hsl(var(--border));
color: hsl(var(--muted-foreground));
font-size: 18px;
font-weight: 400;
line-height: 1;
cursor: pointer;
padding: 0;
transition: color 0.15s, background-color 0.15s;
}
.map-zoom-btn:last-child { border-bottom: none; }
.map-zoom-btn:hover {
background: hsl(var(--secondary));
color: hsl(var(--foreground));
}
[data-theme-style="frost"] .map-zoom-custom {
background: hsl(0 0% 100% / 0.80);
border-color: hsl(214 32% 91% / 0.6);
box-shadow: 0 8px 32px hsl(0 0% 0% / 0.08);
}
[data-theme-style="frost"] .map-zoom-btn {
color: hsl(215 16% 47%);
border-bottom-color: hsl(214 32% 91%);
}
[data-theme-style="frost"] .map-zoom-btn:hover {
color: hsl(222 47% 11%);
background: hsl(210 40% 96%);
}
[data-theme-style="aurora"] .map-zoom-custom {
background: hsl(270 45% 12% / 0.88);
border-color: hsl(0 0% 100% / 0.12);
}
[data-theme-style="aurora"] .map-zoom-btn {
color: hsl(0 0% 100% / 0.7);
border-bottom-color: hsl(0 0% 100% / 0.08);
}
[data-theme-style="aurora"] .map-zoom-btn:hover {
color: hsl(0 0% 100%);
background: hsl(0 0% 100% / 0.08);
}
/* Marker-cluster icon, marker popup and drag-label styles moved to the component
library (LumMap engine, _content/Lmp.Web3.Components/css/lum-display.css). */
/* --- Glassmorphism base for all overlays --- */
.map-toolbar,
.map-search .map-search-input-wrapper,
.map-search .map-search-dropdown,
.map-kpi,
.map-bulk-actions,
.map-style-selector .map-style-list,
.map-style-selector .map-style-toggle,
.map-edit-banner {
background: hsl(var(--card) / 0.95);
backdrop-filter: blur(16px);
border: 1px solid hsl(var(--border));
border-radius: 12px;
box-shadow: 0 8px 32px hsl(0 0% 0% / 0.3);
}
[data-theme-style="frost"] .map-toolbar,
[data-theme-style="frost"] .map-search .map-search-input-wrapper,
[data-theme-style="frost"] .map-search .map-search-dropdown,
[data-theme-style="frost"] .map-kpi,
[data-theme-style="frost"] .map-bulk-actions,
[data-theme-style="frost"] .map-style-selector .map-style-list,
[data-theme-style="frost"] .map-style-selector .map-style-toggle,
[data-theme-style="frost"] .map-edit-banner {
background: hsl(0 0% 100% / 0.80);
backdrop-filter: blur(20px);
border-color: hsl(214 32% 91% / 0.6);
box-shadow: 0 8px 32px hsl(0 0% 0% / 0.08);
}
[data-theme-style="aurora"] .map-toolbar,
[data-theme-style="aurora"] .map-search .map-search-input-wrapper,
[data-theme-style="aurora"] .map-search .map-search-dropdown,
[data-theme-style="aurora"] .map-kpi,
[data-theme-style="aurora"] .map-bulk-actions,
[data-theme-style="aurora"] .map-style-selector .map-style-list,
[data-theme-style="aurora"] .map-style-selector .map-style-toggle,
[data-theme-style="aurora"] .map-edit-banner {
background: hsl(270 45% 12% / 0.88);
backdrop-filter: blur(20px);
border-color: hsl(0 0% 100% / 0.12);
box-shadow: 0 8px 32px hsl(0 0% 0% / 0.3);
}
/* --- Toolbar ---
The toolbar is split into an outer wrapper (.map-toolbar) holding the
visual styling (background, border, backdrop-filter) and an inner flex
row (.map-toolbar-scroll) that handles horizontal scrolling on narrow
viewports. Keeping overflow off the outer is critical: themed variants
apply backdrop-filter, which makes .map-toolbar a containing block for
position:fixed descendants. If overflow lived here, popovers spawned
from inside the toolbar (Groups, Coords) would be clipped to the
toolbar's box and never render. */
/* The .map-top-row wraps MapSearch + MapToolbar so they can be laid out
together as a single flex cluster at narrow widths. At wide widths the
wrapper uses `display: contents` so it disappears from the layout —
children fall back to their own absolute positioning rules below.
This keeps the desktop "search-pinned-left, toolbar-clamped-center"
behavior unchanged while enabling cluster-centering on mobile via the
@container override further down. */
.map-top-row { display: contents; }
/* Strip-aware centering. Original code used `left:50%; translateX(-50%)`,
which centers around the container midpoint and can slide the toolbar
under MapSearch when the centered box overlaps the search reserve.
Instead, center the toolbar around the *strip* midpoint (the band
between --map-side-l and --map-side-r), and clamp its max-width to the
strip width so it can never overlap either side widget. cqw resolves
against .map-page (container-name: map). */
.map-toolbar {
position: absolute;
top: 12px;
left: calc((var(--map-side-l) + 100cqw - var(--map-side-r)) / 2);
transform: translateX(-50%);
max-width: calc(100cqw - var(--map-side-l) - var(--map-side-r));
z-index: 1000;
padding: 4px 6px;
}
.map-toolbar-scroll {
display: flex;
align-items: center;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
}
.map-toolbar-scroll::-webkit-scrollbar { display: none; }
.map-toolbar-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
height: 32px;
border: none;
outline: none;
background: transparent;
color: hsl(var(--foreground));
font-size: 12px;
font-weight: 500;
border-radius: 8px;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.15s, color 0.15s;
}
.map-toolbar-btn:hover { background: hsl(var(--secondary)); }
.map-toolbar-btn:focus,
.map-toolbar-btn:focus-visible { outline: none; }
.map-toolbar-btn.icon-only { padding: 4px 8px; }
.map-toolbar-btn.active-destructive {
background: hsl(var(--destructive) / 0.15);
color: hsl(var(--destructive));
box-shadow: inset 0 0 0 1px hsl(var(--destructive) / 0.4);
}
.map-toolbar-btn.active-warning {
background: hsl(42 95% 55% / 0.15);
color: hsl(42 95% 55%);
box-shadow: inset 0 0 0 1px hsl(42 95% 55% / 0.4);
}
.map-toolbar-btn.active-primary {
background: hsl(var(--primary) / 0.1);
color: hsl(var(--primary));
box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.4);
}
.map-toolbar-btn.active-success {
background: hsl(142 70% 45% / 0.15);
color: hsl(142 70% 45%);
box-shadow: inset 0 0 0 1px hsl(142 70% 45% / 0.4);
}
/* Matches palette.Custom in map.js (hsl(199,89%,48%)) so the Groups filter
button's active color aligns with the blue that markers turn when groups
are applied. */
.map-toolbar-btn.active-custom {
background: hsl(199 89% 48% / 0.15);
color: hsl(199 89% 48%);
box-shadow: inset 0 0 0 1px hsl(199 89% 48% / 0.4);
}
/* Matches palette.Selected in map.js (hsl(270,60%,70%)) so the Fixtures
working-set badge aligns with the purple used for click-selected markers. */
.map-toolbar-btn.active-selected {
background: hsl(270 60% 70% / 0.15);
color: hsl(270 60% 70%);
box-shadow: inset 0 0 0 1px hsl(270 60% 70% / 0.4);
}
[data-theme-style="frost"] .map-toolbar-btn { color: hsl(215 25% 27%); }
[data-theme-style="frost"] .map-toolbar-btn:hover { background: hsl(210 40% 96%); }
[data-theme-style="aurora"] .map-toolbar-btn { color: hsl(0 0% 100% / 0.8); }
[data-theme-style="aurora"] .map-toolbar-btn:hover { background: hsl(0 0% 100% / 0.08); }
.map-toolbar-divider {
width: 1px;
height: 20px;
background: hsl(var(--border));
flex-shrink: 0;
}
.map-toolbar-count {
height: 20px !important;
padding: 0 6px !important;
font-size: 10px !important;
font-weight: 700 !important;
}
.map-toolbar-count.lum-badge-success {
background-color: hsl(142 55% 38%);
}
.map-toolbar-count-custom {
background-color: hsl(199 89% 48%) !important;
color: hsl(0 0% 100%) !important;
border: 1px solid transparent !important;
}
.map-toolbar-count-selected {
background-color: hsl(270 60% 70%) !important;
color: hsl(270 40% 15%) !important;
border: 1px solid transparent !important;
}
.map-toolbar-dropdown {
display: flex;
flex-direction: column;
min-width: 160px;
max-height: 300px;
overflow-y: auto;
padding: 4px;
}
.map-toolbar-dropdown-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
font-size: 12px;
border: none;
outline: none;
background: transparent;
color: hsl(var(--foreground));
cursor: pointer;
border-radius: 6px;
text-align: left;
transition: background 0.15s;
}
.map-toolbar-dropdown-item:hover { background: hsl(var(--secondary)); }
.map-toolbar-dropdown-item:focus,
.map-toolbar-dropdown-item:focus-visible { outline: none; }
.map-toolbar-dropdown-item.selected { background: hsl(var(--primary) / 0.1); font-weight: 600; }
[data-theme-style="frost"] .map-toolbar-dropdown-item { color: hsl(215 25% 27%); }
[data-theme-style="frost"] .map-toolbar-dropdown-item:hover { background: hsl(210 40% 96%); }
[data-theme-style="aurora"] .map-toolbar-dropdown-item { color: hsl(0 0% 100% / 0.8); }
[data-theme-style="aurora"] .map-toolbar-dropdown-item:hover { background: hsl(0 0% 100% / 0.08); }
/* SVGs inside dropdown items render at the same size as inline toolbar icons.
The Lucide constants in LampHelpers.cs only declare viewBox (no width/height),
so without this rule the flex slot stretches them to fill the popover. */
.map-toolbar-dropdown-item svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.map-toolbar-group-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
/* Wraps the Coords LumPopover so the priority+ collapse can target a flex
child (LumPopover renders its own div, not a button — `data-overflow-id`
has to live on something the bar's flex layout sees). */
.map-toolbar-coords-wrap { display: inline-flex; }
.map-toolbar-dropdown-divider {
height: 1px;
background: hsl(var(--border));
margin: 4px 0;
}
.map-toolbar-dropdown-label {
padding: 4px 12px 2px;
font-size: 10px;
font-weight: 700;
color: hsl(var(--muted-foreground));
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* --- Search --- */
/* Wide widths: the .map-top-row wrapper is display:contents so MapSearch
positions itself absolutely as if it were a direct child of .map-page.
Narrow widths: the wrapper turns into a flex container (see @container
block below); this absolute rule is overridden there with position:static. */
.map-search {
position: absolute;
top: 12px;
left: 16px;
z-index: 1001; /* sits one above .map-toolbar so the mobile expand overlays it */
width: 280px;
}
.map-search-input-wrapper {
display: flex;
align-items: center;
gap: 8px;
/* 4px vertical + 32px inner input = 40px total, matching the toolbar
(which uses 4px padding + 32px button height) so the two overlay
widgets sit on the same baseline at the top of the map. */
padding: 4px 12px;
}
/* Mobile-only: collapsed search renders as a 40×40 magnifying-glass that
expands to a full-width input/dropdown when tapped. Hidden on desktop. */
.map-search-mobile-toggle {
display: none;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border: 1px solid hsl(var(--border));
border-radius: 12px;
background: hsl(var(--card) / 0.95);
backdrop-filter: blur(16px);
box-shadow: 0 8px 32px hsl(0 0% 0% / 0.3);
color: hsl(var(--muted-foreground));
cursor: pointer;
padding: 0;
}
.map-search-mobile-toggle:hover { color: hsl(var(--foreground)); }
.map-search-mobile-close {
display: none;
background: none;
border: none;
cursor: pointer;
color: hsl(var(--muted-foreground));
padding: 2px;
margin-left: 4px;
}
.map-search-mobile-close:hover { color: hsl(var(--foreground)); }
[data-theme-style="frost"] .map-search-mobile-toggle {
background: hsl(0 0% 100% / 0.80);
border-color: hsl(214 32% 91% / 0.6);
box-shadow: 0 8px 32px hsl(0 0% 0% / 0.08);
color: hsl(215 16% 47%);
}
[data-theme-style="aurora"] .map-search-mobile-toggle {
background: hsl(270 45% 12% / 0.88);
border-color: hsl(0 0% 100% / 0.12);
color: hsl(0 0% 100% / 0.7);
}
.map-search-input {
flex: 1;
background: transparent;
border: none;
outline: none;
font-size: 12px;
/* Match the toolbar-button height so the search wrapper ends at the same
40px total height (with the wrapper's 4px vertical padding). */
height: 32px;
color: hsl(var(--foreground));
}
.map-search-input::placeholder { color: hsl(var(--muted-foreground)); }
[data-theme-style="frost"] .map-search-input { color: hsl(222 47% 11%); }
[data-theme-style="frost"] .map-search-input::placeholder { color: hsl(215 16% 47%); }
[data-theme-style="aurora"] .map-search-input { color: hsl(0 0% 100%); }
[data-theme-style="aurora"] .map-search-input::placeholder { color: hsl(0 0% 100% / 0.4); }
.map-search-clear {
background: none;
border: none;
cursor: pointer;
color: hsl(var(--muted-foreground));
padding: 2px;
}
.map-search-dropdown {
margin-top: 4px;
overflow: hidden;
}
.map-search-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 10px 12px;
border: none;
background: transparent;
text-align: left;
cursor: pointer;
transition: background 0.15s;
color: hsl(var(--foreground));
}
.map-search-item:hover,
.map-search-item.active { background: hsl(var(--secondary)); }
[data-theme-style="frost"] .map-search-item:hover,
[data-theme-style="frost"] .map-search-item.active { background: hsl(210 40% 96%); }
[data-theme-style="aurora"] .map-search-item:hover,
[data-theme-style="aurora"] .map-search-item.active { background: hsl(0 0% 100% / 0.06); }
.map-search-item-icon { position: relative; }
.map-search-status-dot {
position: absolute;
top: -2px;
right: -2px;
width: 8px;
height: 8px;
border-radius: 50%;
}
.map-search-status-dot.online { background: hsl(var(--success)); }
.map-search-status-dot.alarm { background: hsl(var(--destructive)); }
.map-search-status-dot.offline { background: hsl(var(--muted-foreground)); }
.map-search-item-text { flex: 1; min-width: 0; }
.map-search-item-id { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.map-search-item-addr { font-size: 10px; color: hsl(var(--muted-foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-search-item-group {
font-size: 10px;
padding: 2px 6px;
border-radius: 9999px;
background: hsl(var(--secondary));
color: hsl(var(--muted-foreground));
flex-shrink: 0;
}
.map-search-apply {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 12px;
border: none;
border-top: 1px solid hsl(var(--border));
background: hsl(var(--primary) / 0.05);
text-align: left;
cursor: pointer;
color: hsl(var(--primary));
font-size: 12px;
font-weight: 500;
transition: background 0.15s;
}
.map-search-apply:hover { background: hsl(var(--primary) / 0.12); }
/* --- KPI Panel --- */
.map-kpi {
position: absolute;
left: 16px;
bottom: 24px;
z-index: 1000;
padding: 12px;
min-width: 160px;
transition: opacity 0.2s ease, visibility 0.2s ease;
}
/* When the fixtures drawer is open it covers the bottom half of the map;
the KPI panel is redundant (the drawer shows counts/badges of its own)
so hide it entirely rather than pushing it up above the drawer. */
.map-kpi.drawer-open {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* When the bulk-action bar appears, lift the KPI panel above it instead of
hiding it — the network status is still useful information while the
operator works through a filter. The lift mirrors .map-right-controls
(see :has(.map-bulk-actions) rule below) so both bottom-edge clusters
move together. The bulk bar's true page-centered positioning still
works because the KPI sits above, not next to, it.
Math: bulk bar is ~44px tall (6px pad + 32px button + 6px pad) at
bottom: 24px → top edge ≈ 68px → KPI lifted to bottom: 80px gives
~12px clearance. Same value at every breakpoint since the bar size
is uniform now. */
.map-kpi.map-kpi--bulk-active { bottom: 80px; }
.map-kpi-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.map-kpi-header-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: hsl(var(--muted-foreground));
}
.map-kpi-selected {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.75rem;
font-weight: 700;
color: hsl(var(--primary));
font-variant-numeric: tabular-nums;
}
.map-kpi-items { display: flex; flex-direction: column; gap: 6px; }
/* Collapsed-pill affordance: shown only on phones (≤480px) when the panel is
in the collapsed state. Hidden everywhere else so desktop and tablet keep
the full-panel experience. */
.map-kpi-pill { display: none; }
.map-kpi-header-collapse { display: none; }
.map-kpi-item {
display: flex;
align-items: center;
gap: 10px;
}
.map-kpi-label {
font-size: 0.75rem;
font-weight: 500;
flex: 1;
color: hsl(var(--muted-foreground));
}
.map-kpi-value {
font-size: 0.8125rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: hsl(var(--foreground));
}
[data-theme-style="frost"] .map-kpi-label { color: hsl(215 16% 47%); }
[data-theme-style="frost"] .map-kpi-value { color: hsl(222 47% 11%); }
[data-theme-style="aurora"] .map-kpi-label { color: hsl(0 0% 100% / 0.5); }
[data-theme-style="aurora"] .map-kpi-value { color: hsl(0 0% 100%); }
/* --- Bulk Actions --- */
/* True page-centered. The KPI panel lifts above this bar (see the
.map-kpi.map-kpi--bulk-active rule above) so we don't need the strip-
clamp dance — just center at cqw/2 with a 12px safety margin on each
side. The right-edge zoom column lifts above the bar via the :has()
rule below, so it's safe to extend close to the right edge. */
.map-bulk-actions {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
max-width: calc(100cqw - 24px);
z-index: 1000;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
}
/* Bulk-bar children must not flex-shrink: their content (icons + labels) is
already minimal, and shrinking individual buttons would clip text/icons
before the overflow-into-more-menu kicks in. */
.map-bulk-actions > * { flex-shrink: 0; }
.map-bulk-count {
display: flex;
align-items: center;
gap: 8px;
padding-right: 12px;
border-right: 1px solid hsl(var(--border));
}
.map-bulk-count-badge {
height: 24px;
min-width: 24px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.map-bulk-count-label { font-size: 12px; font-weight: 500; color: hsl(var(--foreground)); white-space: nowrap; }
.map-bulk-btn { white-space: nowrap; }
.map-bulk-clear {
background: none;
border: none;
font-size: 12px;
color: hsl(var(--destructive));
cursor: pointer;
padding: 4px 8px;
white-space: nowrap;
}
.map-bulk-clear:hover { text-decoration: underline; }
.map-bulk-clear-icon { display: none; }
.map-bulk-clear-label { display: inline; }
/* --- Overflow "more" buttons --- */
/* Hidden by default. CSS toggles them at very narrow @container widths
(see the @container map (max-width: 480px) block) where their secondary
siblings get hidden via the *--secondary class. The popover content
inside duplicates the secondary actions so nothing is unreachable. */
.map-toolbar-more,
.map-bulk-more { display: none; }
.map-bulk-more {
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: hsl(var(--foreground));
border-radius: 8px;
cursor: pointer;
padding: 0;
}
.map-bulk-more:hover { background: hsl(var(--secondary)); }
.map-bulk-more:disabled { opacity: 0.5; cursor: not-allowed; }
/* Lift the bar above the fixtures drawer when it's open so the buttons stay
reachable. The drawer height is exposed as --map-drawer-h on .map-page so
both elements stay in sync across breakpoints (see media queries below). */
.map-bulk-actions--drawer-open { bottom: calc(var(--map-drawer-h, 45vh) + 24px); }
/* When the bulk-actions bar is rendered (only present in DOM when
_actionModeActive is true), lift the right-edge zoom/layers column so
it never overlaps the bar — applies at every viewport width because the
bar can extend wide enough to clip the controls even on small laptops. */
.map-page:has(.map-bulk-actions) .map-right-controls { bottom: 76px; }
/* Toolbar labels degrade earlier than bulk-action labels: the toolbar reserves
--map-side-l (308 px) on the left for the search widget, so its effective
width is well under the container width. Hiding labels at 1100 px keeps
icon-only mode kicking in before priority+ runs out of items to collapse. */
@container map (max-width: 1100px) {
.map-toolbar-label { display: none; }
}
/* Bulk-action bar is centered with smaller side reservations, so its labels
can stay visible longer. Also swaps the clear button for an X icon. Keyed
to the .map-page container (not the viewport) so the trigger fires on the
actual map area, sidebar-aware. */
@container map (max-width: 900px) {
.map-bulk-actions .map-bulk-btn-label { display: none; }
.map-bulk-count-label { display: none; }
.map-bulk-count {
padding-right: 0;
border-right: none;
}
.map-bulk-clear-label { display: none; }
.map-bulk-clear-icon { display: inline-flex; }
.map-bulk-clear { padding: 4px; min-width: 28px; }
}
/* JS-driven overflow visibility (see wwwroot/js/bar-overflow.js).
Scoped to the bar so a stray data-collapsed elsewhere can't accidentally
hide unrelated content. */
[data-bar-overflow] [data-collapsed] { display: none !important; }
/* The matching More popover entries are hidden by default and only revealed
when bar-overflow.js marks them as needed (i.e. when their corresponding
bar item is currently collapsed). Without this, the popover would always
list every secondary action — duplicating buttons that are still visible
in the bar. */
[data-bar-overflow] [data-overflow-target]:not([data-overflow-needed]) { display: none !important; }
/* The More overflow trigger is hidden by default (existing rule above) and
shown only when JS marks at least one item as collapsed. */
.map-toolbar-more[data-active],
.map-bulk-more[data-active] { display: inline-flex; }
/* --- Style Selector ---
Positioning is provided by the surrounding .map-right-controls flex
column (Map.razor). When collapsed this is a 40px toggle; when
expanded it becomes the wider .map-style-list panel. Right-aligned
via align-items: flex-end on the parent. */
.map-style-selector {
position: relative;
}
.map-style-toggle {
box-sizing: border-box;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: hsl(var(--muted-foreground));
transition: color 0.15s;
}
.map-style-toggle:hover { color: hsl(var(--foreground)); }
.map-style-list {
position: relative;
z-index: 1501; /* above .lum-popover-backdrop so its items remain clickable */
padding: 8px;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 140px;
}
.map-style-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
border: none;
background: transparent;
font-size: 12px;
font-weight: 500;
color: hsl(var(--foreground));
cursor: pointer;
border-radius: 8px;
transition: background 0.15s;
}
.map-style-item:hover { background: hsl(var(--secondary)); }
.map-style-item.active { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); }
[data-theme-style="frost"] .map-style-item { color: hsl(215 25% 27%); }
[data-theme-style="frost"] .map-style-item:hover { background: hsl(210 40% 96%); }
[data-theme-style="aurora"] .map-style-item { color: hsl(0 0% 100% / 0.8); }
[data-theme-style="aurora"] .map-style-item:hover { background: hsl(0 0% 100% / 0.08); }
.map-style-preview {
width: 20px;
height: 20px;
border-radius: 4px;
border: 1px solid;
}
.preview-street { background: hsl(152 68% 80%); border-color: hsl(152 50% 60%); }
.preview-topo { background: hsl(38 80% 80%); border-color: hsl(38 60% 60%); }
.preview-dark { background: hsl(220 25% 18%); border-color: hsl(220 15% 40%); }
.preview-satellite { background: hsl(140 40% 25%); border-color: hsl(140 30% 40%); }
/* --- Edit mode banner --- */
/* Strip-aware centering — same pattern as the bulk-action bar. */
.map-edit-banner {
position: absolute;
bottom: 80px;
left: calc((var(--map-bot-l) + 100cqw - var(--map-bot-r)) / 2);
transform: translateX(-50%);
max-width: calc(100cqw - var(--map-bot-l) - var(--map-bot-r));
z-index: 1000;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
}
.map-edit-banner-end {
display: inline-flex;
align-items: center;
gap: 4px;
background: none;
border: none;
color: hsl(0 0% 100% / 0.8);
font-size: 12px;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
}
.map-edit-banner-end:hover { background: hsl(0 0% 100% / 0.1); }
/* --- Fixtures Drawer (bottom slide-up) --- */
.map-fixtures-drawer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 900;
height: var(--map-drawer-h, 45vh);
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 12px 12px 0 0;
background: hsl(var(--card) / 0.95);
backdrop-filter: blur(16px);
border: 1px solid hsl(var(--border));
border-bottom: none;
box-shadow: 0 -8px 32px hsl(0 0% 0% / 0.2);
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
will-change: transform;
}
.map-fixtures-drawer.open {
transform: translateY(0);
pointer-events: auto;
}
[data-theme-style="frost"] .map-fixtures-drawer {
background: hsl(0 0% 100% / 0.92);
border-color: hsl(214 32% 91%);
box-shadow: 0 -8px 32px hsl(0 0% 0% / 0.06);
}
[data-theme-style="aurora"] .map-fixtures-drawer {
background: hsl(270 45% 12% / 0.92);
border-color: hsl(0 0% 100% / 0.1);
}
.map-fixtures-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
border-bottom: 1px solid hsl(var(--border));
flex-shrink: 0;
}
.map-fixtures-header-left { display: flex; align-items: center; gap: 8px; }
.map-fixtures-header-right { display: flex; align-items: center; gap: 8px; }
.map-fixtures-title { font-size: 16px; font-weight: 600; color: hsl(var(--foreground)); }
.map-fixtures-selected-info { font-size: 14px; color: hsl(var(--muted-foreground)); }
.map-fixtures-clear {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
font-size: 12px;
color: hsl(var(--destructive));
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
}
.map-fixtures-clear:hover { background: hsl(var(--destructive) / 0.1); }
.map-fixtures-close {
background: none;
border: none;
cursor: pointer;
color: hsl(var(--muted-foreground));
padding: 4px;
border-radius: 6px;
}
.map-fixtures-close:hover { background: hsl(var(--secondary)); }
/* Filter-aware action bar hosted inside the fixtures drawer. Reuses the
`page-toolbar-right` flex layout so buttons wrap the same way as on the
Lamps page, just in a narrower container. */
.map-fixtures-actions {
padding: 10px 20px;
border-bottom: 1px solid hsl(var(--border));
background: hsl(var(--card));
flex-shrink: 0;
}
@media (max-width: 640px) {
.map-fixtures-actions { padding: 8px 12px; }
}
/* Desktop-only inline action area. The host renders this strip directly under
the drawer header; at ≤640px viewport width the @media block below hides it
and reveals the .map-fixtures-actions-mobile-cta sticky bottom CTA instead. */
.map-fixtures-actions--desktop .map-fixtures-actions-inline {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Single row hosting the advanced-filter toggle (left) and the action buttons
(right) on the same level; wraps gracefully in a narrow drawer. */
.map-fixtures-actions-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem;
flex-wrap: wrap;
}
/* When the advanced panel is collapsed the wrapper renders no visible content —
drop its padding so it doesn't leave a phantom gap above the table. */
.map-fixtures-advanced.collapsed { padding: 0; }
/* Action sheet popover content — same visual grammar as .map-toolbar-dropdown
but with phone-sized 44px tap targets. */
.map-fixtures-action-sheet-list {
display: flex;
flex-direction: column;
padding: 4px;
min-width: 240px;
}
.map-fixtures-action-sheet-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
min-height: 44px;
border-radius: 8px;
background: transparent;
border: none;
text-align: left;
color: hsl(var(--foreground));
font-size: 13px;
cursor: pointer;
transition: background 0.15s;
}
.map-fixtures-action-sheet-item:hover { background: hsl(var(--secondary)); }
.map-fixtures-action-sheet-item[disabled] { opacity: 0.5; cursor: not-allowed; }
.map-fixtures-action-sheet-item svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Admin row gets a subtle accent so the destructive action stands out. */
.map-fixtures-action-sheet-item--admin { color: hsl(0 70% 50%); }
.map-fixtures-action-sheet-item--admin:hover { background: hsl(0 70% 50% / 0.08); }
/* Drag-handle pill at the top of the drawer (mobile only). Visual affordance
that this is a bottom sheet; tapping cycles snap points (peek → half → full
→ peek). Hidden by default; revealed in the @media (max-width: 640px) block.
The button itself fills the strip to give a generous tap target around the
pill. */
.map-fixtures-handle {
display: none;
align-items: center;
justify-content: center;
width: 100%;
height: 22px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
flex-shrink: 0;
}
.map-fixtures-handle-pill {
display: block;
width: 36px;
height: 4px;
border-radius: 2px;
background: hsl(var(--muted-foreground) / 0.4);
transition: background 0.15s;
}
.map-fixtures-handle:hover .map-fixtures-handle-pill,
.map-fixtures-handle:active .map-fixtures-handle-pill {
background: hsl(var(--muted-foreground) / 0.7);
}
/* Mobile-only sticky bottom CTA — anchors the "Akcje · N" trigger to the
bottom of the drawer where the user's thumb lives. Hidden at desktop
widths; reveal happens in the @media (max-width: 640px) block. */
.map-fixtures-actions-mobile-cta {
display: none;
flex-shrink: 0;
padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
border-top: 1px solid hsl(var(--border));
/* hsl(var(--popover)) is solid in every theme, including aurora — using
--card here would render nearly transparent in aurora (where --card is
white at 10% opacity) and the lamp cards behind would bleed through. */
background: hsl(var(--popover));
}
.map-fixtures-actions-sheet-trigger--cta {
width: 100%;
min-height: 48px;
justify-content: center;
gap: 8px;
font-size: 15px;
font-weight: 600;
}
/* Bottom-sheet modal that opens from the sticky CTA. Slides up over the
drawer area; backdrop covers the rest of the screen. The list inside is
the same .map-fixtures-action-sheet-list used by the popover variant,
with bottomsheet-specific tweaks via the --bottomsheet modifier. */
.map-fixtures-action-bottomsheet-backdrop {
position: fixed;
inset: 0;
z-index: 1100;
background: hsl(0 0% 0% / 0.45);
animation: lum-fade-in 0.18s ease-out;
}
.map-fixtures-action-bottomsheet-backdrop.closing {
animation: lum-fade-out 0.2s ease-in forwards;
}
.map-fixtures-action-bottomsheet {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1101;
display: flex;
flex-direction: column;
max-height: 80dvh;
/* hsl(var(--popover)) is solid in every theme; --card is semi-transparent
in aurora (white at 10% opacity) and would let lamp cards bleed through
the sheet panel — see the matching note on .map-fixtures-actions-mobile-cta. */
background: hsl(var(--popover));
color: hsl(var(--popover-foreground));
border-radius: 16px 16px 0 0;
border: 1px solid hsl(var(--border));
border-bottom: none;
box-shadow: 0 -12px 40px hsl(0 0% 0% / 0.3);
padding-bottom: env(safe-area-inset-bottom, 0px);
animation: lum-slide-up 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.map-fixtures-action-bottomsheet.closing {
animation: lum-slide-down 0.2s ease-in forwards;
}
.map-fixtures-action-bottomsheet-handle {
align-self: center;
width: 36px;
height: 4px;
margin-top: 8px;
border-radius: 2px;
background: hsl(var(--muted-foreground) / 0.4);
flex-shrink: 0;
}
.map-fixtures-action-bottomsheet-title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px 8px;
font-size: 14px;
font-weight: 600;
color: hsl(var(--foreground));
flex-shrink: 0;
}
.map-fixtures-action-bottomsheet-close {
background: transparent;
border: none;
color: hsl(var(--muted-foreground));
cursor: pointer;
padding: 6px;
border-radius: 6px;
}
.map-fixtures-action-bottomsheet-close:hover { background: hsl(var(--secondary)); }
.map-fixtures-action-sheet-list--bottomsheet {
overflow-y: auto;
padding: 4px 8px 12px;
}
.map-fixtures-action-sheet-list--bottomsheet .map-fixtures-action-sheet-item {
min-height: 56px;
font-size: 15px;
padding: 14px 16px;
}
.map-fixtures-action-sheet-list--bottomsheet .map-fixtures-action-sheet-item svg {
width: 20px;
height: 20px;
}
/* lum-fade-in and lum-slide-up are defined at the top of this file
(~line 4331) for the table sheet; reused here. The fade-out and
slide-down counterparts live only here since the table sheet doesn't
need an animated dismissal. */
@keyframes lum-fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes lum-slide-down {
from { transform: translateY(0); }
to { transform: translateY(100%); }
}
.map-fixtures-table-header {
display: grid;
grid-template-columns: 50px 80px 100px 1fr 100px 130px 130px;
gap: 8px;
padding: 8px 16px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: hsl(var(--muted-foreground));
border-bottom: 1px solid hsl(var(--border));
flex-shrink: 0;
}
.map-fixtures-table-body {
flex: 1;
overflow-y: auto;
}
/* The LumDataTable (chips row + table) sits flush-left in the table body, but the
advanced-filter button above lives in .map-fixtures-actions (padding-left: 20px).
That left the active-filter chip 20px to the left of the button. Inset just the
chip row so its left edge lines up with the "Filtrowanie zaawansowane" button.
Scoped to this drawer — the shared .lum-table-filter-chips rule is untouched. */
.map-fixtures-table-body .lum-table-filter-chips {
padding-left: 20px;
}
.map-fixtures-row {
display: grid;
grid-template-columns: 50px 80px 100px 1fr 100px 130px 130px;
gap: 8px;
padding: 10px 16px;
align-items: center;
cursor: pointer;
font-size: 13px;
color: hsl(var(--foreground));
border-bottom: 1px solid hsl(var(--border) / 0.5);
transition: background 0.15s;
}
.map-fixtures-row:hover { background: hsl(var(--secondary) / 0.3); }
.map-fixtures-row.even { background: hsl(var(--secondary) / 0.15); }
.map-fixtures-row.selected {
background: hsl(var(--primary) / 0.1);
border-left: 2px solid hsl(var(--primary));
}
.map-fixtures-row.alarm-border {
border-left: 2px solid hsl(var(--warning));
}
.map-fixtures-row .col-id { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 12px; }
.map-fixtures-row .col-sn { font-variant-numeric: tabular-nums; font-size: 12px; }
.map-fixtures-row .col-address { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: hsl(var(--muted-foreground)); }
.map-fixtures-row .col-lastcomm { font-size: 11px; font-variant-numeric: tabular-nums; color: hsl(var(--muted-foreground)); }
.map-fixtures-group-badge {
display: inline-flex;
padding: 1px 6px;
border-radius: 9999px;
font-size: 10px;
font-weight: 600;
border: 1px solid;
margin-right: 4px;
}
/* --- Help dialog sections --- */
.map-help-section {
border-radius: 12px;
padding: 16px;
background: hsl(var(--secondary) / 0.5);
border: 1px solid hsl(var(--border));
}
[data-theme-style="frost"] .map-help-section {
background: hsl(210 40% 97%);
border-color: hsl(214 32% 91%);
}
[data-theme-style="aurora"] .map-help-section {
background: hsl(0 0% 100% / 0.04);
border-color: hsl(0 0% 100% / 0.08);
}
.map-help-section-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: hsl(var(--foreground));
margin-bottom: 12px;
}
.map-help-shortcuts { display: flex; flex-direction: column; gap: 8px; }
.map-help-shortcut-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.map-help-keys { display: flex; align-items: center; gap: 6px; }
.map-help-kbd {
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
font-family: monospace;
font-weight: 500;
background: hsl(var(--background));
border: 1px solid hsl(var(--border));
color: hsl(var(--foreground));
}
[data-theme-style="frost"] .map-help-kbd {
background: hsl(0 0% 100%);
border-color: hsl(214 32% 80%);
color: hsl(222 47% 11%);
box-shadow: 0 1px 2px hsl(0 0% 0% / 0.05);
}
[data-theme-style="aurora"] .map-help-kbd {
background: hsl(0 0% 100% / 0.08);
border-color: hsl(0 0% 100% / 0.15);
color: hsl(0 0% 100%);
}
.map-help-desc { font-size: 12px; color: hsl(var(--muted-foreground)); }
.map-help-colors {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.map-help-color-item { display: flex; align-items: center; gap: 8px; }
.map-help-color-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.map-help-legend-items { display: flex; flex-direction: column; gap: 8px; }
.map-help-legend-row { display: flex; align-items: center; gap: 12px; }
.map-help-legend-icon { width: 24px; text-align: center; font-size: 14px; flex-shrink: 0; }
.map-help-control-icon { display: flex; align-items: center; justify-content: center; color: hsl(var(--muted-foreground)); }
/* --- Map-area-responsive (container queries on .map-page) ---
These breakpoints fire on the ACTUAL map width, so collapsing the sidebar
makes the layout breathe even at the same viewport width. Progression:
≤900px (label-hide block, see above): toolbar + bulk-bar lose text
labels so the rows stay one-line of icons.
≤720px (this block): collapse MapSearch to its magnifier icon and
MapKPIPanel to its status pill; bulk bar fills the bottom edge.
≤480px (next block): tighter toolbar padding, smaller right-side controls.
Landscape phones are still handled by an @media query (it's a viewport-
height concern, not a map-area-width one). */
@container map (max-width: 720px) {
.map-page {
--map-drawer-h: min(50vh, 360px);
--map-bot-l: 12px; /* KPI is in pill form at this width and stacks */
--map-bot-r: 12px; /* above the bulk bar — no left reserve needed. */
}
/* Cluster mode: the wrapper switches from display:contents to a real
flex container so search-icon + toolbar are laid out adjacently and
centered as a single unit. justify-content:center is what produces
the "centered as a unit" UX the mobile design asks for. The wrapper
itself is pointer-events:none so map gestures pass through gaps. */
.map-top-row {
display: flex;
position: absolute;
top: 12px;
left: 12px;
right: 12px;
z-index: 1000;
align-items: flex-start;
justify-content: center;
gap: 8px;
pointer-events: none;
}
.map-top-row > * { pointer-events: auto; }
/* Override the wide-width absolute rules so children become flex items. */
.map-search,
.map-toolbar {
position: static;
top: auto;
left: auto;
right: auto;
transform: none;
max-width: none;
}
.map-toolbar { min-width: 0; }
.map-search { width: auto; flex: none; }
/* Phone search behaviour:
- collapsed: shrink container to the toggle icon only.
- open: grow to fill the cluster row and hide the toolbar so the
expanded input has the whole top edge to itself. */
.map-search-mobile-toggle { display: inline-flex; }
.map-search:not(.map-search--mobile-open) .map-search-input-wrapper,
.map-search:not(.map-search--mobile-open) .map-search-dropdown {
display: none;
}
.map-search--mobile-open { flex: 1 1 auto; }
.map-search--mobile-open ~ .map-toolbar { display: none; }
.map-search--mobile-open .map-search-mobile-toggle { display: none; }
.map-search--mobile-open .map-search-mobile-close { display: inline-flex; align-items: center; justify-content: center; }
/* KPI panel: collapsed pill (online/alarm/offline chips) by default;
tap to expand to full panel. The pill inherits the shared map-kpi
glassmorphism, so theming is automatic across brutal/frost/aurora. */
.map-kpi {
display: block;
padding: 0;
min-width: auto;
}
/* (KPI lift when bulk-active is now a base rule — see
.map-kpi.map-kpi--bulk-active near the end of the KPI section.) */
.map-kpi--collapsed .map-kpi-header,
.map-kpi--collapsed .map-kpi-items { display: none; }
.map-kpi--collapsed .map-kpi-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border: none;
background: transparent;
cursor: pointer;
}
.map-kpi:not(.map-kpi--collapsed) .map-kpi-pill { display: none; }
.map-kpi-pill-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.map-kpi-pill-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.map-kpi-pill-dot.online { background: hsl(var(--success)); }
.map-kpi-pill-dot.alarm { background: hsl(var(--destructive)); }
.map-kpi-pill-dot.offline { background: hsl(var(--muted-foreground)); }
.map-kpi:not(.map-kpi--collapsed) {
padding: 10px 12px;
}
.map-kpi:not(.map-kpi--collapsed) .map-kpi-header-collapse {
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
color: hsl(var(--muted-foreground));
padding: 2px;
margin-left: 8px;
border-radius: 4px;
}
.map-kpi:not(.map-kpi--collapsed) .map-kpi-header-collapse:hover {
color: hsl(var(--foreground));
background: hsl(var(--secondary));
}
.map-fixtures-table-header,
.map-fixtures-row {
grid-template-columns: 40px 70px 1fr 110px;
}
.map-fixtures-row .col-sn,
.map-fixtures-row .col-groups,
.map-fixtures-row .col-mode,
.map-fixtures-table-header .col-sn,
.map-fixtures-table-header .col-groups,
.map-fixtures-table-header .col-mode { display: none; }
}
/* Map-area-narrow (≤480px) — about the *map area width*, not the device. Fires
when a wide sidebar shrinks the map even on desktop. Toolbar/right-controls
tweaks belong here. Drawer/mobile-CTA rules live in the @media block below
since those are device concerns, not container concerns. */
@container map (max-width: 480px) {
/* Tighten toolbar so the remaining (post-overflow) buttons fit on a
single row at 360px. */
.map-toolbar { padding: 4px; }
.map-toolbar-scroll { gap: 2px; }
.map-toolbar-btn { padding: 4px 6px; }
.map-toolbar-divider { display: none; }
/* Right-side controls hug the corner more tightly. The :has() lift above
still applies — its `bottom: 76px` overrides this when bulk bar shows. */
.map-right-controls { right: 8px; bottom: 8px; gap: 6px; }
.map-zoom-btn { width: 36px; height: 36px; font-size: 16px; }
.map-style-toggle { width: 36px; height: 36px; }
.map-search-mobile-toggle { width: 36px; height: 36px; }
}
/* Mobile drawer redesign — three-snap-point bottom sheet with sticky CTA.
Switched from @container to @media at 640px to match the rest of the app
(LumDataTable mobile cards at app.css:4636 also use @media 768px). The
container query was firing inconsistently because .map-page's negative
margin extends its inline-size past the viewport on some layouts. */
@media (max-width: 640px) {
/* Snap-point heights. dvh tracks Mobile Safari's collapsing chrome
correctly; vh would leave the drawer visually wrong as the toolbar
scrolls. The --map-drawer-h variable feeds .map-bulk-actions's lift
math (which is hidden in this block, but kept consistent for
defensiveness). Peek is fixed-height: header + handle only. */
.map-page:has(.map-fixtures-snap-peek) { --map-drawer-h: 80px; }
.map-page:has(.map-fixtures-snap-half) { --map-drawer-h: 60dvh; }
.map-page:has(.map-fixtures-snap-full) { --map-drawer-h: 92dvh; }
.map-fixtures-snap-peek { height: 80px; }
.map-fixtures-snap-half { height: 60dvh; }
.map-fixtures-snap-full { height: 92dvh; }
/* Reveal the drag handle pill at the top of the drawer. */
.map-fixtures-handle { display: flex; }
/* Hide the desktop inline action strip; the sticky CTA below replaces it. */
.map-fixtures-actions--desktop { display: none; }
/* Reveal the sticky bottom CTA. */
.map-fixtures-actions-mobile-cta { display: block; }
/* Peek state: only header + handle visible. Hide the table body and CTA
so they don't clip awkwardly inside the 80px-tall drawer. */
.map-fixtures-snap-peek .map-fixtures-table-body,
.map-fixtures-snap-peek .map-fixtures-actions-mobile-cta { display: none; }
/* Lift the right-edge controls (zoom/layers) above the drawer so the
map is still navigable when the drawer is open in any snap state.
In Full state this pushes them off the map area, which is fine —
the user is browsing the list, not the map. */
.map-page[data-drawer-open="true"] .map-right-controls {
bottom: calc(var(--map-drawer-h, 60dvh) + 12px);
}
/* Hide the floating MapBottomActions when the drawer is open — its 5
buttons duplicate the drawer's action sheet, and the lifted-above-drawer
trick wastes vertical space on phones. The bar reappears as soon as
the user closes the drawer. */
.map-page[data-drawer-open="true"] .map-bulk-actions { display: none; }
}
/* Landscape phones: the viewport is squat (≈375px tall on iPhone landscape).
Bumping the drawer to 75dvh gives a usable list without crushing the map.
The edit banner moves to the top to avoid the action bar's lifted position.
This overrides the snap-point heights in the @media (max-width: 640px)
block above for landscape only. */
@media (max-height: 500px) and (orientation: landscape) {
.map-page:has(.map-fixtures-snap-half),
.map-page:has(.map-fixtures-snap-full) { --map-drawer-h: 85dvh; }
.map-fixtures-snap-half,
.map-fixtures-snap-full { height: 85dvh; }
.map-edit-banner {
top: 56px;
bottom: auto;
}
}
/* ========================================================================
View-mode toggle (Basic/Detailed)
======================================================================== */
.view-mode-toggle {
display: flex;
gap: 0;
border: 1px solid hsl(var(--border));
border-radius: calc(var(--radius) - 4px);
overflow: hidden;
}
.view-mode-toggle .lum-btn {
border: none;
border-radius: 0;
background: transparent;
color: hsl(var(--muted-foreground));
font-weight: 500;
}
.view-mode-toggle .lum-btn:hover {
background: hsl(var(--muted));
color: hsl(var(--foreground));
}
.view-mode-toggle .lum-btn.active {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
/* Frost theme */
html[data-theme-style="frost"] .view-mode-toggle {
border-color: hsl(var(--border));
background: hsl(var(--background));
}
html[data-theme-style="frost"] .view-mode-toggle .lum-btn.active {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
/* Aurora theme */
html[data-theme-style="aurora"] .view-mode-toggle {
border-color: hsl(var(--glass-border));
background: hsl(var(--glass-bg) / 0.3);
}
html[data-theme-style="aurora"] .view-mode-toggle .lum-btn.active {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
/* ── Event Detail Buttons (Globe/Compass in Parameters column) ── */
.event-detail-btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.75rem;
height: 1.75rem;
border-radius: 0.5rem;
padding: 0;
border: none;
background: transparent;
color: hsl(var(--primary));
cursor: pointer;
transition: background-color 0.15s;
}
.event-detail-btn:hover {
background: hsl(var(--secondary) / 0.5);
}
.event-detail-btn svg {
width: 0.875rem;
height: 0.875rem;
}
/* ── Event Status Badges ── */
.event-status-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
border: 1px solid;
}
/* Default (Brutal) */
.event-status-active {
background: hsl(var(--success) / 0.15);
color: hsl(var(--success));
border-color: hsl(var(--success) / 0.3);
}
.event-status-inactive {
background: hsl(var(--muted) / 0.5);
color: hsl(var(--muted-foreground));
border-color: hsl(var(--border));
}
/* Frost overrides */
[data-theme-style="frost"] .event-status-active {
background: #ecfdf5;
color: #047857;
border-color: #a7f3d0;
}
[data-theme-style="frost"] .event-status-inactive {
background: #f1f5f9;
color: #64748b;
border-color: #e2e8f0;
}
/* Aurora overrides */
[data-theme-style="aurora"] .event-status-active {
background: hsl(160 84% 39% / 0.15);
color: hsl(160 84% 39%);
border-color: hsl(160 84% 39% / 0.3);
}
[data-theme-style="aurora"] .event-status-inactive {
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.4);
border-color: rgba(255,255,255,0.1);
}
/* ========================================================================
Reports
======================================================================== */
.reports-loading-state {
min-height: 14rem;
display: flex;
align-items: center;
justify-content: center;
}
.reports-subtitle {
margin: 0;
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
line-height: 1.5;
}
.reports-date-button {
min-width: 9.5rem;
justify-content: flex-start;
gap: 0.5rem;
}
.reports-date-separator {
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
}
.reports-accent-tabs .lum-accent-tabs-list {
margin-bottom: 0.25rem;
}
/* ===== Generate report dialog (two-column: lamps + settings) ===== */
.report-generate-stack {
display: flex;
flex-direction: column;
gap: 1rem;
}
.report-generate-options {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
padding: 0.75rem 0.875rem;
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
}
.report-generate-date-sep {
color: hsl(var(--muted-foreground));
}
.report-generate-save {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-left: auto;
font-size: 0.8125rem;
font-weight: 600;
color: hsl(var(--muted-foreground));
cursor: pointer;
}
.report-generate-lamps {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 0;
}
.report-generate-heading {
margin: 0;
font-size: 1rem;
font-weight: 700;
color: hsl(var(--foreground));
}
.report-generate-type-pill {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.625rem;
border-radius: 9999px;
font-size: 0.8125rem;
font-weight: 600;
color: hsl(var(--primary));
background: hsl(var(--primary) / 0.1);
border: 1px solid hsl(var(--primary) / 0.3);
}
.report-generate-segmented {
display: inline-flex;
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
overflow: hidden;
}
.report-generate-segment {
padding: 0.3rem 0.75rem;
font-size: 0.8125rem;
font-weight: 600;
color: hsl(var(--muted-foreground));
background: transparent;
cursor: pointer;
border: none;
transition: background 0.15s, color 0.15s;
}
.report-generate-segment + .report-generate-segment {
border-left: 1px solid hsl(var(--border));
}
.report-generate-segment.is-active {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
}
@media (max-width: 768px) {
.report-generate-save {
margin-left: 0;
}
}
@media (max-width: 768px) {
.reports-date-button {
width: 100%;
}
.reports-date-separator {
display: none;
}
}
/* ========================================================================
Report Map
======================================================================== */
.report-map-container {
height: 500px;
width: 100%;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid hsl(var(--border));
}
@media (max-width: 640px) {
.report-map-container { height: 350px; }
}
.report-map-legend {
display: flex;
gap: 1rem;
flex-wrap: wrap;
align-items: center;
padding: 0.5rem 0;
font-size: 0.75rem;
}
.reports-totals-row {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 0.75rem 1rem;
border-radius: var(--radius);
border: 1px solid hsl(var(--border));
background: hsl(var(--muted) / 0.28);
}
.reports-section-header {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.reports-tab-footer {
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
margin: 0;
}
/* Active historical-comparison marker on the comparison button */
.reports-comparison-active {
display: inline-flex;
align-items: center;
margin-left: 0.25rem;
color: hsl(var(--success));
}
/* Report overview summary header */
/* Energy balance summary (Current / Historical / Difference) */
.report-energy-scroll {
overflow-x: auto;
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
}
.report-energy-summary-table {
border-collapse: collapse;
width: 100%;
font-size: 0.75rem;
white-space: nowrap;
}
.report-energy-summary-table th,
.report-energy-summary-table td {
padding: 0.5rem 0.75rem;
text-align: right;
border-bottom: 1px solid hsl(var(--border));
}
.report-energy-summary-table th:first-child,
.report-energy-summary-table td:first-child,
.report-energy-summary-table th:nth-child(2),
.report-energy-summary-table td:nth-child(2) {
text-align: left;
}
.report-energy-summary-table thead th {
color: hsl(var(--muted-foreground));
font-weight: 600;
background: hsl(var(--muted) / 0.3);
}
.report-energy-summary-table tbody tr:last-child td {
border-bottom: none;
}
.report-energy-summary-table .summary-row-historical td {
background: hsl(var(--primary) / 0.08);
}
.report-energy-summary-table .summary-row-difference td {
background: hsl(var(--success) / 0.10);
}
/* Sticky leading label column for the energy summary tables. The composited
gradient-over-card keeps the cell opaque so scrolling cells don't bleed
through while the row tint is preserved. */
.report-energy-summary-table .report-energy-sticky-col {
position: sticky;
left: 0;
z-index: 2;
background: hsl(var(--card));
box-shadow: 1px 0 0 hsl(var(--border));
}
.report-energy-summary-table thead .report-energy-sticky-col {
z-index: 4;
background: hsl(var(--muted));
}
.report-energy-summary-table .summary-row-historical .report-energy-sticky-col {
background: linear-gradient(hsl(var(--primary) / 0.08), hsl(var(--primary) / 0.08)), hsl(var(--card));
}
.report-energy-summary-table .summary-row-difference .report-energy-sticky-col {
background: linear-gradient(hsl(var(--success) / 0.10), hsl(var(--success) / 0.10)), hsl(var(--card));
}
/* Difference row: colour the gap vs. historical — increase = red, saving = green */
.report-energy-summary-table .summary-row-difference td.report-delta-pos {
color: hsl(var(--destructive));
font-weight: 600;
}
.report-energy-summary-table .summary-row-difference td.report-delta-neg {
color: hsl(var(--success));
font-weight: 600;
}
/* ===== Report header KPI tiles (clickable status filters) ===== */
.report-kpi-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.75rem;
}
@media (max-width: 768px) {
.report-kpi-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 400px) {
.report-kpi-grid {
grid-template-columns: 1fr;
}
}
.report-kpi-card {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.625rem 0.875rem;
border-radius: 0.75rem;
border: 1px solid hsl(var(--border));
background: hsl(var(--card));
min-width: 0;
}
.report-kpi-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: hsl(var(--muted-foreground));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.report-kpi-value {
font-size: 1.05rem;
font-weight: 700;
line-height: 1.2;
display: flex;
align-items: center;
gap: 0.4rem;
}
button.report-kpi-card {
cursor: pointer;
text-align: left;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
button.report-kpi-card:hover {
border-color: hsl(var(--ring));
}
.report-kpi-card.is-active {
border-color: hsl(var(--primary));
box-shadow: inset 0 0 0 1px hsl(var(--primary));
background: hsl(var(--primary) / 0.04);
}
.report-kpi-dot {
width: 0.6rem;
height: 0.6rem;
border-radius: 9999px;
display: inline-block;
flex-shrink: 0;
}
.report-kpi-status-ok .report-kpi-dot {
background: hsl(var(--success));
}
.report-kpi-status-warning .report-kpi-dot {
background: #f59e0b;
}
.report-kpi-status-faulty .report-kpi-dot {
background: hsl(var(--destructive));
}
/* Label/icon beside the saved-report selector in the toolbar */
.reports-selector-label {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
font-weight: 600;
color: hsl(var(--muted-foreground));
white-space: nowrap;
}
@media (max-width: 768px) {
.reports-selector-label {
display: none;
}
}
/* Inline alert variants for the Installation page (LumAlert only ships
default + destructive; we need info/warning/success here). */
.installation-alert {
display: flex;
align-items: flex-start;
gap: 0.625rem;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
border: 1px solid transparent;
font-size: 0.875rem;
}
.installation-alert-icon {
flex-shrink: 0;
width: 1.125rem;
height: 1.125rem;
margin-top: 0.0625rem;
}
.installation-alert-info {
background: hsl(var(--primary) / 0.08);
border-color: hsl(var(--primary) / 0.3);
color: hsl(var(--foreground));
}
.installation-alert-info .installation-alert-icon {
color: hsl(var(--primary));
}
.installation-alert-warning {
background: hsl(var(--warning) / 0.1);
border-color: hsl(var(--warning) / 0.3);
color: hsl(var(--foreground));
}
.installation-alert-warning .installation-alert-icon {
color: hsl(var(--warning));
}
.installation-alert-error {
background: hsl(var(--destructive) / 0.1);
border-color: hsl(var(--destructive) / 0.3);
color: hsl(var(--foreground));
}
.installation-alert-error .installation-alert-icon {
color: hsl(var(--destructive));
}
/* Footer button row inside install wizard — wraps reverse-stack on mobile */
.installation-wizard-footer {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
flex-wrap: wrap;
}
@media (max-width: 640px) {
.installation-wizard-footer {
flex-direction: column-reverse;
align-items: stretch;
width: 100%;
}
.installation-wizard-footer .lum-btn {
width: 100%;
}
}
/* Imports tab — three stat cards on confirm step */
.installation-confirm-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
@media (max-width: 640px) {
.installation-confirm-grid {
grid-template-columns: 1fr;
}
}
.installation-confirm-card {
padding: 1rem;
border-radius: 0.75rem;
border: 1px solid hsl(var(--border));
background: hsl(var(--card));
}
.installation-confirm-card-info { border-color: hsl(var(--primary) / 0.4); }
.installation-confirm-card-warning { border-color: hsl(var(--warning) / 0.4); }
.installation-confirm-card-error { border-color: hsl(var(--destructive) / 0.4); }
.installation-confirm-card-label {
display: block;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: hsl(var(--muted-foreground));
margin-bottom: 0.25rem;
}
.installation-confirm-card-value {
font-size: 1.75rem;
font-weight: 700;
line-height: 1.1;
}
.installation-confirm-card-info .installation-confirm-card-value { color: hsl(var(--primary)); }
.installation-confirm-card-warning .installation-confirm-card-value { color: hsl(var(--warning)); }
.installation-confirm-card-error .installation-confirm-card-value { color: hsl(var(--destructive)); }
/* Addresses tab — toolbar */
.installation-addresses-toolbar {
display: flex;
align-items: flex-start;
gap: 0.5rem;
flex-wrap: wrap;
}
.installation-addresses-progress-row {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.5rem;
}
.installation-addresses-progress-row .lum-progress {
flex: 1 1 auto;
max-width: 24rem;
}
/* Header link wrapper around StateActiveTasks (must not introduce its own
visual styling — the indicator inside owns its look). */
.app-header-tasks-link {
display: inline-flex;
align-items: center;
text-decoration: none;
color: inherit;
}
/* ── Tasks page: expanded batch rows + sub-task list shared by
TasksBatchesTable.ExpandedRowContent and TaskDetailsModal "Lamps" tab ─ */
.batch-expanded {
padding: 0.5rem 0.25rem;
}
.batch-expanded-grid {
display: grid;
gap: 0.25rem;
font-size: 0.875rem;
}
.batch-expanded-row {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.5fr) auto;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.25rem;
border-bottom: 1px solid hsl(var(--border) / 0.5);
}
.batch-expanded-row:last-child { border-bottom: none; }
.batch-expanded-header {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: hsl(var(--muted-foreground));
font-weight: 600;
}
@media (max-width: 640px) {
.batch-expanded-row {
grid-template-columns: 1fr;
gap: 0.25rem;
}
}
.lamp-advanced-filter {
width: 100%;
}
/* Collapsed panel-only instance (toggle lives in the toolbar) renders nothing —
hide it so it doesn't add a stray gap above the stat grid. */
.lamp-advanced-filter.is-hidden { display: none; }
.lamp-af-toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.85rem;
font-size: 0.875rem;
font-weight: 500;
color: hsl(var(--foreground));
background: hsl(var(--secondary));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.lamp-af-toggle:hover { background: hsl(var(--accent)); }
.lamp-af-toggle.open { background: hsl(var(--accent)); border-color: hsl(var(--ring)); }
.lamp-af-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 1.25rem;
padding: 0 0.35rem;
font-size: 0.7rem;
font-weight: 700;
color: hsl(var(--primary-foreground));
background: hsl(var(--primary));
border-radius: 999px;
}
.lamp-af-chevron { transition: transform .2s ease; opacity: .6; }
.lamp-af-toggle.open .lamp-af-chevron { transform: rotate(180deg); }
.lamp-af-panel {
position: relative;
margin-top: 0.75rem;
padding: 1rem;
/* Solid card background (no backdrop-filter): a backdrop-filter would create a
stacking context that traps the field/operator dropdowns below the table. */
background: hsl(var(--card));
border: 1px solid var(--glass-border, hsl(var(--border)));
border-radius: calc(var(--radius) + 2px);
box-shadow: 0 8px 28px -12px rgba(0, 0, 0, 0.35);
animation: lamp-af-in .18s ease;
}
@keyframes lamp-af-in {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Saved-query bar */
.lamp-af-saved {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
padding-bottom: 0.75rem;
margin-bottom: 0.75rem;
border-bottom: 1px solid hsl(var(--border) / 0.6);
}
.lamp-af-saved-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
color: hsl(var(--muted-foreground));
}
.lamp-af-saved-empty { font-size: 0.8rem; color: hsl(var(--muted-foreground)); font-style: italic; }
.lamp-af-saved-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lamp-af-chip {
padding: 0.25rem 0.6rem;
font-size: 0.8rem;
color: hsl(var(--foreground));
background: hsl(var(--secondary));
border: 1px solid hsl(var(--border));
border-radius: 999px;
cursor: pointer;
transition: all .15s ease;
}
.lamp-af-chip:hover { background: hsl(var(--accent)); }
.lamp-af-chip.active {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
border-color: hsl(var(--primary));
}
/* Tree */
.lamp-af-tree { margin: 0.25rem 0 0.75rem; }
.lamp-filter-group {
border: 1px solid hsl(var(--border));
border-left-width: 3px;
border-radius: var(--radius);
padding: 0.6rem;
background: hsl(var(--muted) / 0.25);
}
.lamp-filter-group.combinator-and { border-left-color: hsl(var(--primary)); }
.lamp-filter-group.combinator-or { border-left-color: hsl(var(--warning)); }
.lamp-filter-group.is-negated { border-left-color: hsl(var(--destructive)); }
.lamp-filter-group-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem;
}
.lamp-filter-combinator {
display: inline-flex;
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
overflow: hidden;
}
.lamp-filter-combinator button {
padding: 0.2rem 0.6rem;
font-size: 0.75rem;
font-weight: 600;
background: transparent;
color: hsl(var(--muted-foreground));
border: none;
cursor: pointer;
}
.lamp-filter-combinator button.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.lamp-filter-not {
padding: 0.2rem 0.5rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.03em;
background: transparent;
color: hsl(var(--muted-foreground));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
cursor: pointer;
}
.lamp-filter-not.active { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); border-color: hsl(var(--destructive)); }
.lamp-filter-group-actions { margin-left: auto; display: flex; align-items: center; gap: 0.25rem; }
.lamp-filter-plus { font-weight: 700; margin-right: 0.15rem; }
.lamp-filter-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
background: transparent;
color: hsl(var(--muted-foreground));
border: 1px solid transparent;
border-radius: var(--radius);
cursor: pointer;
transition: all .15s ease;
}
.lamp-filter-remove:hover { color: hsl(var(--destructive)); background: hsl(var(--destructive) / 0.1); }
.lamp-filter-children {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 0.5rem;
padding-left: 0.85rem;
border-left: 1px dashed hsl(var(--border));
}
.lamp-filter-empty { font-size: 0.8rem; color: hsl(var(--muted-foreground)); font-style: italic; }
.lamp-filter-condition {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem;
padding: 0.5rem;
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
}
.lamp-filter-condition.is-negated { border-color: hsl(var(--destructive) / 0.5); }
.lamp-filter-field { flex: 1 1 180px; min-width: 150px; }
.lamp-filter-operator { flex: 0 1 170px; min-width: 130px; }
.lamp-filter-value { flex: 1 1 160px; min-width: 120px; }
.lamp-filter-and-sep { font-size: 0.75rem; color: hsl(var(--muted-foreground)); padding: 0 0.1rem; }
/* The flex sizing lives on these wrappers; make the hosted control fill them. */
.lamp-filter-field > *,
.lamp-filter-operator > *,
.lamp-filter-value > * { width: 100%; }
/* Field picker dropdown */
.lamp-field-picker-group {
padding: 0.4rem 0.6rem 0.2rem;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
color: hsl(var(--muted-foreground));
}
/* Footer */
.lamp-af-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
padding-top: 0.75rem;
margin-top: 0.25rem;
border-top: 1px solid hsl(var(--border) / 0.6);
}
.lamp-af-match { display: flex; align-items: baseline; gap: 0.4rem; }
.lamp-af-match-label { font-size: 0.8rem; color: hsl(var(--muted-foreground)); }
.lamp-af-match-value { font-size: 1.1rem; font-weight: 700; color: hsl(var(--primary)); }
.lamp-af-footer-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.lamp-af-modal-label { display: block; font-size: 0.8rem; font-weight: 500; margin-bottom: 0.4rem; color: hsl(var(--foreground)); }
/* Mobile */
@media (max-width: 640px) {
.lamp-af-toggle { width: 100%; justify-content: flex-start; }
.lamp-af-panel { padding: 0.75rem; }
.lamp-filter-condition { flex-direction: column; align-items: stretch; }
.lamp-filter-field,
.lamp-filter-operator,
.lamp-filter-value { flex: 1 1 auto; min-width: 0; width: 100%; }
.lamp-filter-children { padding-left: 0.5rem; }
.lamp-filter-group-actions { margin-left: 0; width: 100%; justify-content: flex-end; }
.lamp-af-footer { flex-direction: column; align-items: stretch; }
.lamp-af-footer-actions { justify-content: space-between; }
}
/* Advanced filter inside the map fixtures drawer */
.map-fixtures-advanced {
padding: 0.5rem 0.75rem 0;
}
/* TALQ OAS documentation tooltips (TalqDocLabel) — subtle dotted underline
marks fields whose description comes from the official TALQ OAS files. */
.talq-doc-label {
border-bottom: 1px dotted hsl(var(--muted-foreground) / 0.55);
cursor: help;
}
/* --- Traffic segment hover tooltip (map) ---
Same dark-glass look as the lamp marker popover; content HTML is built
server-side in Map.razor (BuildTrafficTooltipHtml). */
.leaflet-tooltip.traffic-tooltip {
background: hsl(225 25% 10% / 0.95);
backdrop-filter: blur(16px);
border: 1px solid hsl(0 0% 100% / 0.1);
border-radius: 10px;
box-shadow: 0 12px 40px hsl(0 0% 0% / 0.4);
color: hsl(0 0% 90%);
font-family: 'Inter', sans-serif;
font-size: 12px;
line-height: 1.5;
padding: 8px 12px;
}
.leaflet-tooltip.traffic-tooltip::before {
display: none; /* the arrow tip would inherit an opaque white background */
}
.traffic-tooltip .traffic-tooltip-title {
display: flex;
align-items: center;
gap: 6px;
font-weight: 600;
margin-bottom: 2px;
}
.traffic-tooltip .traffic-tooltip-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.traffic-tooltip .traffic-tooltip-closure {
color: hsl(0 80% 65%);
font-weight: 600;
}
.traffic-tooltip .traffic-tooltip-meta {
margin-top: 2px;
color: hsl(0 0% 65%);
font-size: 11px;
}
/* ── Status page (/not-found) ─────────────────────────────────────────────
One page serves both shells. Anonymous visitors get it inside the glass
auth card on the dark photo backdrop, so its text is fixed light-on-dark;
signed-in users get it inside MainLayout, where it must follow the theme
tokens like any other page. Hence two scopes, not one set of colours. */
.status-page .status-page-message {
text-align: center;
line-height: 1.55;
}
.status-page .status-page-retry {
margin-top: 0.75rem;
text-align: center;
font-weight: 600;
}
.status-page .status-page-code {
margin-top: 1.5rem;
text-align: center;
font-size: 0.75rem;
letter-spacing: 0.04em;
}
/* Anonymous: inside .auth-card on the dark backdrop. */
.auth-card.status-page .status-page-message {
color: rgba(255, 255, 255, 0.75);
}
.auth-card.status-page .status-page-retry {
color: rgba(255, 255, 255, 0.9);
}
.auth-card.status-page .status-page-code {
color: rgba(255, 255, 255, 0.45);
}
/* Signed in: inside MainLayout, themed. */
.status-page-inline {
max-width: 32rem;
margin: 4rem auto;
padding: 0 1.5rem;
text-align: center;
}
.status-page-inline h1 {
margin-bottom: 1rem;
font-size: 1.5rem;
font-weight: 600;
color: hsl(var(--foreground));
}
.status-page-inline .status-page-message,
.status-page-inline .status-page-code {
color: hsl(var(--muted-foreground));
}
.status-page-inline .status-page-retry {
color: hsl(var(--foreground));
}
/* ========================================================================
Motion flow editor (MotionFlowEditorDialog) — map-based motion-sensor wizard.
Layout: modal body = [step bar][map + side panel]. Map chrome reuses the
/map toolbar button look (.map-toolbar-btn); the side panel reuses the
fixtures-drawer handle/advanced-filter classes. Role colours are the two
editor accents below (not part of the marker palette on purpose).
======================================================================== */
:root {
--motion-src: hsl(32 92% 50%);
--motion-rcv: hsl(199 78% 46%);
}
.motion-editor-dialog .lum-modal-content {
height: calc(100dvh - 2rem);
}
.motion-editor-dialog .lum-modal-body {
padding: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.motion-editor-dialog .configure-step-bar {
padding-left: 1.5rem;
padding-right: 1.5rem;
flex-shrink: 0;
}
.motion-editor-dialog .configure-content {
padding: 1.25rem 1.5rem 1.5rem;
overflow-y: auto;
flex: 1;
min-height: 0;
}
.motion-editor-dialog .lum-modal-footer {
align-items: center;
justify-content: space-between;
padding: 0.75rem 1.5rem;
}
.motion-editor-mode-link {
margin-left: auto;
border: none;
background: transparent;
color: hsl(var(--muted-foreground));
font-size: 12px;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
padding: 4px 6px;
}
.motion-editor-mode-link:hover { color: hsl(var(--foreground)); }
/* ---- Two-pane body ---- */
.motion-editor {
flex: 1;
display: flex;
min-height: 0;
position: relative;
}
.motion-editor-map-wrap {
flex: 1;
position: relative;
min-width: 0;
background: color-mix(in srgb, hsl(var(--muted)) 40%, transparent);
overflow: hidden;
}
.motion-editor-map {
position: absolute;
inset: 0;
z-index: 0;
}
.motion-editor-map .leaflet-container { font: inherit; background: color-mix(in srgb, hsl(var(--muted)) 30%, transparent); }
.motion-editor-map .leaflet-control-attribution { font-size: 10px; background: hsl(var(--popover)); color: hsl(var(--muted-foreground)); }
/* Map chrome */
.motion-editor-toolbar {
position: absolute;
top: 10px;
left: 10px;
z-index: 1000;
display: flex;
gap: 6px;
flex-wrap: wrap;
max-width: calc(100% - 20px);
}
.motion-editor-tools {
display: flex;
gap: 2px;
padding: 3px;
border-radius: 10px;
background: hsl(var(--popover));
border: 1px solid hsl(var(--border));
box-shadow: 0 2px 8px hsl(0 0% 0% / 0.1);
}
.motion-editor-tools .map-toolbar-btn { height: 30px; }
.motion-editor-tools .map-toolbar-btn.active { background: color-mix(in srgb, hsl(var(--primary)) 14%, transparent); color: hsl(var(--foreground)); }
.motion-editor-tools .map-toolbar-btn.active-custom { background: color-mix(in srgb, var(--motion-src) 22%, transparent); color: hsl(var(--foreground)); }
.motion-editor-tools .map-toolbar-btn:hover { background: hsl(var(--secondary)); }
.motion-editor-status {
position: absolute;
top: 10px;
right: 10px;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
max-width: 60%;
}
.motion-editor-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
background: hsl(var(--popover));
border: 1px solid hsl(var(--border));
color: hsl(var(--foreground));
box-shadow: 0 2px 8px hsl(0 0% 0% / 0.1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
cursor: default;
font-family: inherit;
}
button.motion-editor-chip { cursor: pointer; }
.motion-editor-chip--mode { border-color: color-mix(in srgb, hsl(var(--primary)) 70%, transparent); background: hsl(var(--popover)); }
.motion-editor-chip--warn { border-color: hsl(var(--warning)); }
.motion-editor-chip--bad { border-color: hsl(var(--destructive)); color: hsl(var(--destructive)); }
.motion-editor-legend {
position: absolute;
left: 10px;
bottom: 22px;
z-index: 1000;
display: grid;
grid-template-columns: auto auto;
gap: 3px 14px;
padding: 8px 10px;
border-radius: 10px;
font-size: 11px;
color: hsl(var(--foreground));
background: hsl(var(--popover));
border: 1px solid hsl(var(--border));
box-shadow: 0 2px 8px hsl(0 0% 0% / 0.1);
}
.motion-editor-legend > div { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.motion-legend-node {
display: inline-block;
width: 12px; height: 12px;
border-radius: 50%;
border: 2px solid hsl(var(--muted-foreground));
background: hsl(var(--popover));
flex: none;
}
.motion-legend-node--src { border-color: var(--motion-src); background: var(--motion-src); }
.motion-legend-node--rcv { border-color: var(--motion-rcv); }
.motion-legend-node--both { border-color: var(--motion-src); background: linear-gradient(90deg, var(--motion-src) 50%, var(--motion-rcv) 50%); }
.motion-legend-node--mesh { border-color: hsl(var(--destructive)); border-style: dashed; }
.motion-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--success)); flex: none; }
.motion-legend-line { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--motion-src); flex: none; }
.motion-legend-line--device { border-top-color: hsl(var(--muted-foreground)); }
.motion-legend-line--removed { border-top-color: hsl(var(--destructive)); border-top-style: dashed; }
/* Markers (Leaflet divIcons) */
.motion-node-icon { background: transparent; border: none; }
.motion-node { position: relative; width: 100%; height: 100%; cursor: pointer; touch-action: none; }
.motion-node svg { display: block; transition: transform 0.12s; }
.motion-node-label {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -8px);
font-size: 11px;
font-weight: 500;
white-space: nowrap;
color: hsl(var(--foreground));
text-shadow: 0 0 3px hsl(var(--background)), 0 0 3px hsl(var(--background)), 0 0 6px hsl(var(--background));
pointer-events: none;
}
.motion-node--context { cursor: pointer; opacity: 0.85; }
/* Labels only when zoomed in (≥ 17) — at street-overview zooms they pile up on each other;
selected / armed / hovered markers keep theirs. */
.motion-labels-hidden .motion-node-label { display: none; }
.motion-labels-hidden .motion-node:hover .motion-node-label,
.motion-labels-hidden .motion-node--dragging .motion-node-label,
.motion-labels-hidden .motion-node--target .motion-node-label { display: block; }
.motion-node--target svg, .motion-node:hover svg { transform: scale(1.15); }
.motion-node--dragging svg { transform: scale(1.1); filter: drop-shadow(0 0 4px var(--motion-src)); }
.motion-tool-link .motion-node, .motion-tool-wave .motion-node { cursor: crosshair; }
.motion-tool-lasso .leaflet-container, .motion-tool-lasso .leaflet-interactive { cursor: crosshair; }
.motion-node--pulse svg { animation: motion-node-pulse 0.8s ease-out 2; }
@keyframes motion-node-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.35); }
100% { transform: scale(1); }
}
.motion-node-tip { font-size: 12px; }
/* Edges */
.motion-edge-hit { cursor: pointer; }
.motion-edge-label-icon { background: transparent; border: none; }
.motion-edge-label {
display: inline-block;
transform: translate(-50%, -50%);
padding: 1px 6px;
border-radius: 999px;
font-size: 11px;
font-weight: 500;
font-variant-numeric: tabular-nums;
white-space: nowrap;
background: hsl(var(--popover));
border: 1px solid var(--motion-src);
color: hsl(var(--foreground));
cursor: pointer;
box-shadow: 0 1px 4px hsl(0 0% 0% / 0.12);
}
.motion-edge-label--device { border-color: hsl(var(--muted-foreground)); color: hsl(var(--muted-foreground)); }
.motion-edge-label--removed { border-color: hsl(var(--destructive)); color: hsl(var(--destructive)); text-decoration: line-through; }
/* Cards (node / edge) */
.motion-card {
position: absolute;
z-index: 1100;
width: 300px;
max-width: calc(100% - 16px);
background: hsl(var(--popover));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
box-shadow: 0 12px 32px hsl(0 0% 0% / 0.22);
font-size: 13px;
color: hsl(var(--foreground));
}
.motion-card-head {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 8px 8px 12px;
border-bottom: 1px solid hsl(var(--border));
}
.motion-card-head .lum-modal-close { width: 1.6rem; height: 1.6rem; }
.motion-card .lum-badge { white-space: nowrap; flex: none; }
.motion-card-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.motion-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.motion-card-row > :first-child { min-width: 0; }
.motion-card-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.motion-card-more {
border: none; background: transparent; padding: 0;
color: hsl(var(--muted-foreground)); font-size: 12px; cursor: pointer; text-align: left; font-family: inherit;
}
.motion-card-more:hover { color: hsl(var(--foreground)); }
.motion-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Coach marks */
.motion-coach {
position: absolute;
z-index: 1200;
top: 56px;
left: 12px;
max-width: 280px;
padding: 10px 12px;
border-radius: 10px;
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
font-size: 12px;
box-shadow: 0 12px 32px hsl(0 0% 0% / 0.25);
}
.motion-coach--right { left: auto; right: 12px; }
.motion-coach b { display: block; margin-bottom: 2px; }
.motion-coach-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; opacity: 0.95; }
.motion-coach-foot button {
border: 1px solid color-mix(in srgb, hsl(var(--primary-foreground)) 60%, transparent);
background: transparent;
color: inherit;
border-radius: 6px;
font: inherit;
padding: 2px 8px;
cursor: pointer;
}
/* ---- Side panel ---- */
.motion-editor-panel {
/* ≥ 600px keeps LumDataTable in table mode (its container breakpoint); narrower
viewports get the card layout automatically. */
width: clamp(440px, 46%, 720px);
flex: none;
border-left: 1px solid hsl(var(--border));
background: hsl(var(--popover));
display: flex;
flex-direction: column;
min-height: 0;
transition: width 0.2s ease;
overflow: hidden;
}
.motion-editor--panel-closed .motion-editor-panel { width: 0; border-left: none; }
.motion-editor-handle { display: none; }
.motion-editor-tabs {
display: flex;
gap: 2px;
padding: 6px 8px 0;
border-bottom: 1px solid hsl(var(--border));
flex-shrink: 0;
}
.motion-editor-tabs button {
border: none;
background: transparent;
font: inherit;
font-size: 13px;
color: hsl(var(--muted-foreground));
padding: 6px 10px;
border-bottom: 2px solid transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.motion-editor-tabs button.active { color: hsl(var(--foreground)); border-bottom-color: hsl(var(--primary)); }
.motion-editor-tab { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.motion-editor-tablebar {
display: flex;
align-items: center;
gap: 6px;
padding: 8px;
flex-wrap: wrap;
border-bottom: 1px solid hsl(var(--border));
flex-shrink: 0;
}
.motion-editor-panel .map-fixtures-advanced { flex-shrink: 0; max-height: 40%; overflow: auto; }
.motion-editor-panel .map-fixtures-advanced.collapsed { display: none; }
.motion-editor-table { flex: 1; min-height: 0; overflow: auto; }
.motion-editor-plan, .motion-editor-history {
overflow-y: auto;
padding: 8px;
gap: 8px;
font-size: 12px;
}
.motion-editor-history { gap: 2px; }
/* Scroll containers are flex columns — children must not be squashed to fit. */
.motion-editor-plan > *, .motion-editor-history > * { flex-shrink: 0; }
.motion-card-row--stack { flex-direction: column; align-items: stretch; gap: 4px; }
.motion-card-row--stack > span:last-child { display: flex; align-items: center; gap: 6px; }
.motion-issue {
display: flex;
gap: 8px;
align-items: flex-start;
padding: 6px 8px;
border-radius: 8px;
border: 1px solid hsl(var(--border));
background: color-mix(in srgb, hsl(var(--muted)) 40%, transparent);
color: hsl(var(--foreground));
}
.motion-issue b { display: block; font-weight: 600; }
.motion-issue--warn { border-color: hsl(var(--warning)); }
.motion-issue--bad { border-color: hsl(var(--destructive)); background: color-mix(in srgb, hsl(var(--destructive)) 8%, transparent); }
.motion-issue-fix {
border: none; background: transparent; padding: 0; margin-right: 10px;
color: hsl(var(--primary)); font-weight: 500; font-size: 12px; cursor: pointer; font-family: inherit;
}
.motion-plan-group { border: 1px solid hsl(var(--border)); border-radius: 8px; overflow: hidden; }
.motion-plan-group h4 {
margin: 0;
padding: 6px 8px;
background: color-mix(in srgb, hsl(var(--muted)) 50%, transparent);
font-size: 12px;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
color: hsl(var(--foreground));
}
.motion-plan-edge {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 5px 8px;
border: none;
border-top: 1px solid hsl(var(--border));
background: transparent;
color: hsl(var(--foreground));
font: inherit;
font-size: 12px;
text-align: left;
cursor: pointer;
}
.motion-plan-edge:hover { background: color-mix(in srgb, hsl(var(--muted)) 40%, transparent); }
.motion-plan-edge--static { cursor: default; }
.motion-plan-edge--static:hover { background: transparent; }
.motion-history-entry {
display: flex;
width: 100%;
align-items: center;
gap: 8px;
padding: 5px 8px;
border: none;
border-radius: 6px;
background: transparent;
color: hsl(var(--foreground));
font: inherit;
font-size: 12px;
cursor: pointer;
}
.motion-history-entry:hover { background: color-mix(in srgb, hsl(var(--muted)) 40%, transparent); }
.motion-history-entry.current { background: color-mix(in srgb, hsl(var(--primary)) 12%, transparent); }
.motion-history-entry.undone { color: hsl(var(--muted-foreground)); text-decoration: line-through; }
/* Role badge (table + cards) */
.motion-role-badge {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 7px;
border-radius: 999px;
font-size: 11px;
font-weight: 500;
border: 1px solid hsl(var(--border));
color: hsl(var(--muted-foreground));
white-space: nowrap;
}
.motion-role-badge--src { border-color: var(--motion-src); background: color-mix(in srgb, var(--motion-src) 18%, transparent); color: hsl(var(--foreground)); }
.motion-role-badge--rcv { border-color: var(--motion-rcv); background: color-mix(in srgb, var(--motion-rcv) 18%, transparent); color: hsl(var(--foreground)); }
.motion-role-badge--both { border-color: var(--motion-src); background: linear-gradient(90deg, color-mix(in srgb, var(--motion-src) 22%, transparent), color-mix(in srgb, var(--motion-rcv) 22%, transparent)); color: hsl(var(--foreground)); }
/* Footer summary */
.motion-editor-summary { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.motion-editor-sum {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 8px; border-radius: 999px;
background: color-mix(in srgb, hsl(var(--muted)) 50%, transparent); color: hsl(var(--foreground));
font-variant-numeric: tabular-nums;
}
.motion-editor-sum i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.motion-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.motion-summary-grid > div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 4px 8px; border-radius: 6px; background: color-mix(in srgb, hsl(var(--muted)) 35%, transparent); }
/* ---- Narrow / mobile: full-screen dialog, bottom-sheet panel, sheet cards ---- */
@media (max-width: 900px) {
.motion-editor-panel { width: 360px; }
.motion-editor-legend { display: none; }
}
@media (max-width: 768px) {
/* Full-screen on phones: beats the scoped LumModal bottom-sheet rules by specificity. */
dialog.lum-modal.motion-editor-dialog { margin: 0; max-height: 100dvh; height: 100dvh; border-radius: 0; padding-bottom: 0; }
dialog.lum-modal.motion-editor-dialog .lum-modal-content { max-height: 100dvh; height: 100dvh; border-radius: 0; }
.motion-editor-dialog .lum-modal-header { padding: 0.75rem 0.75rem 0; }
.motion-editor-summary { display: none; }
.motion-coach { top: 52px; }
.motion-editor-dialog .configure-step-bar { padding-left: 0.75rem; padding-right: 0.75rem; }
.motion-editor-dialog .lum-modal-footer { flex-direction: row; flex-wrap: wrap; padding: 0.5rem 0.75rem; }
.motion-editor-dialog .lum-modal-footer .lum-btn { width: auto; min-height: 2.5rem; }
.motion-editor-dialog .lum-modal-footer > .flex { margin-left: auto; }
.motion-editor-summary .motion-editor-sum:nth-child(n+3) { display: none; }
.motion-editor-tools .map-toolbar-label { display: none; }
.motion-editor-tools .map-toolbar-btn { padding: 4px 7px; }
.motion-editor-status { max-width: 50%; }
.motion-editor-chip--mode { display: none; }
.motion-editor-panel {
position: absolute;
left: 0; right: 0; bottom: 0;
width: auto !important;
border-left: none;
border-top: 1px solid hsl(var(--border));
border-radius: 14px 14px 0 0;
box-shadow: 0 -8px 28px hsl(0 0% 0% / 0.2);
height: 46%;
transition: height 0.25s ease;
z-index: 1050;
}
.motion-editor-snap-peek .motion-editor-panel { height: 46px; }
.motion-editor-snap-half .motion-editor-panel { height: 46%; }
.motion-editor-snap-full .motion-editor-panel { height: 88%; }
.motion-editor--panel-closed .motion-editor-panel { height: 0; border-top: none; }
.motion-editor-handle { display: flex; height: 14px; }
.motion-card {
left: 8px !important;
right: 8px;
top: auto !important;
bottom: 54px;
width: auto;
max-width: none;
z-index: 1150;
}
.motion-coach { max-width: calc(100% - 24px); }
}
/* Aurora: same glass as the /map chrome (thin glass on small surfaces, blur only on the
one large panel surface). --popover is a solid fallback; these tint it to the theme. */
[data-theme-style="aurora"] .motion-editor-tools,
[data-theme-style="aurora"] .motion-editor-chip,
[data-theme-style="aurora"] .motion-editor-legend,
[data-theme-style="aurora"] .motion-edge-label,
[data-theme-style="aurora"] .motion-card {
background: hsl(270 45% 12% / 0.92);
border-color: hsl(0 0% 100% / 0.14);
box-shadow: 0 8px 32px hsl(0 0% 0% / 0.3);
}
[data-theme-style="aurora"] .motion-editor-panel {
background: hsl(270 45% 12% / 0.94);
backdrop-filter: blur(20px);
transform: translateZ(0);
border-color: hsl(0 0% 100% / 0.1);
}
[data-theme-style="aurora"] .motion-editor-tools .map-toolbar-btn { color: hsl(0 0% 100% / 0.8); }
[data-theme-style="aurora"] .motion-editor-tools .map-toolbar-btn:hover { background: hsl(0 0% 100% / 0.08); }
[data-theme-style="aurora"] .motion-editor-tools .map-toolbar-btn.active { background: hsl(0 0% 100% / 0.14); color: hsl(0 0% 100%); }
[data-theme-style="aurora"] .motion-node-label { text-shadow: 0 0 3px hsl(0 0% 100%), 0 0 3px hsl(0 0% 100%), 0 0 6px hsl(0 0% 100%); color: hsl(270 45% 12%); }
/* Field-hint icon next to wizard labels (motion wizards): muted, help cursor, keyboard-focusable. */
.motion-field-hint {
display: inline-flex;
align-items: center;
color: hsl(var(--muted-foreground));
cursor: help;
border-radius: 999px;
line-height: 0;
}
.motion-field-hint:hover { color: hsl(var(--foreground)); }