/* InteliRain Operations Dashboard — design system. * Light theme, navy sidebar, blue accent. All colors and radii come from * the tokens below; components must not hardcode hex values. */ :root { --bg: #f5f7fb; --surface: #ffffff; --surface-soft: #f8fafc; --line: #dfe6f0; --line-strong: #cbd5e1; --text: #0f172a; --muted: #64748b; --muted-strong: #475569; --nav: #071323; --nav-2: #0e2442; --blue: #2563eb; --blue-soft: #eaf1ff; --red: #e11d48; --red-soft: #ffe9ee; --orange: #f97316; --orange-soft: #fff1e6; --amber: #d97706; --amber-soft: #fef3c7; --green: #16a34a; --green-soft: #e8f8ee; --purple: #7c3aed; --purple-soft: #f1eaff; --cyan: #0891b2; --cyan-soft: #e0f7fc; --shadow: 0 14px 34px rgba(15, 23, 42, 0.1); --shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.06); --blue-line: rgba(37, 99, 235, 0.35); --radius: 12px; --radius-sm: 8px; --radius-xs: 6px; color-scheme: light; } /* Dark theme: same token contract, different values. Applied via * , toggled from the topbar and persisted. */ [data-theme="dark"] { --bg: #0b1220; --surface: #121b2e; --surface-soft: #1a2540; --line: #263450; --line-strong: #354667; --text: #e7edf8; --muted: #90a2bd; --muted-strong: #b8c6dc; --nav: #060d19; --nav-2: #0c1e38; --blue: #6c9aff; --blue-soft: #1c2c50; --red: #f66086; --red-soft: #3d1826; --orange: #fb923c; --orange-soft: #3d2512; --amber: #eeb04a; --amber-soft: #3b2c11; --green: #34c273; --green-soft: #123322; --purple: #ab8ffc; --purple-soft: #2b224a; --cyan: #33c4de; --cyan-soft: #0f313b; --shadow: 0 14px 34px rgba(0, 0, 0, 0.55); --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.4); --blue-line: rgba(108, 154, 255, 0.45); color-scheme: dark; } * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; min-width: 320px; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.45; color: var(--text); background: radial-gradient(1100px 500px at 85% -10%, rgba(37, 99, 235, 0.07), transparent 60%), var(--bg); } h1, h2, h3, p { margin: 0; } button { font: inherit; color: inherit; cursor: pointer; } select, input { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--radius-xs); } [data-icon] { display: inline-flex; width: 18px; height: 18px; flex: none; } [data-icon] svg { width: 100%; height: 100%; } /* ------------------------------------------------------------------ */ /* Login */ /* ------------------------------------------------------------------ */ .login-screen { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 24px; /* The enrollment panel (QR + instructions) is taller than a laptop screen with the browser chrome showing. Without this it is simply unreachable — a fixed, inset-0 box clips instead of scrolling. */ overflow-y: auto; /* Painted back to front: photo, a scrim to sit the card on, then the blue wash the rest of the app uses. background-color is what shows before the photo arrives, so the card never lands on bare white mid-load. The scrim is not decoration. `cover` crops the frame differently on every viewport, so the card can end up over the bright sky or the lit field; the darkened layer is what guarantees contrast regardless of which. */ background-color: var(--nav); background-image: radial-gradient(900px 480px at 20% 0%, rgba(37, 99, 235, 0.18), transparent 55%), linear-gradient(160deg, rgba(7, 19, 35, 0.42), rgba(14, 36, 66, 0.58)), url("/static/img/login-background.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .login-screen.show { display: flex; } .login-card { width: min(460px, 100%); padding: 42px 38px 30px; border-radius: 20px; background: var(--surface); box-shadow: 0 30px 80px rgba(2, 8, 20, 0.45); text-align: center; /* Auto margins, not the parent's align-items, do the centring: when the card is taller than the viewport, auto margins collapse to zero and the top stays reachable. Centred flex items scroll their own top off-screen. */ margin: auto; } /* The login card carries the same wordmark as the sidebar (.brand-logo), replacing the old hexagon glyph + "InteliRain" text lockup. Sized larger than the sidebar's because it is the only branding on the screen. The artwork's "AI-driven irrigation" tagline is near-white (#fbfdfd) — it is drawn for the dark sidebar and vanishes on this white card at any size. That is fine and deliberate: "Operations Dashboard" below is the descriptor here. Do not "fix" it by plating the logo; the tagline would still be near-white on whatever plate you chose unless that plate is dark, and a dark plate on a white card looks like a mistake. The artwork is trimmed to its own bounds, so width alone sets the visual size; the intrinsic width/height attributes on the img reserve the box before it loads, which stops the form jumping on a cold cache. */ .login-brand img.login-logo { display: block; margin: 0 auto 10px; width: 100%; max-width: 244px; height: auto; } .login-brand p { color: var(--muted); margin-top: 2px; } /* Centred against the left-aligned form it heads: it labels the whole panel, like the wordmark above it, rather than the first field below it. */ .login-hint { margin: 26px 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; color: var(--muted); } /* Typed sign-in replaced the employee tile roster (2026-08-07): the roster listed every employee to anyone who could load the page. .login-avatar and .login-name are kept — the sidebar profile block reuses them. */ .login-form { display: grid; gap: 14px; text-align: left; } .login-field { display: grid; gap: 6px; } .login-field > span { font-size: 13px; font-weight: 600; color: var(--muted); } .login-field input { width: 100%; padding: 11px 13px; font-size: 15px; color: var(--text); background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); } .login-field input:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent); } /* The 6-digit code is read off a phone and compared digit by digit. */ #loginCode, #enrollCode { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 20px; letter-spacing: 0.32em; text-align: center; } .login-submit { width: 100%; justify-content: center; padding: 12px; font-size: 15px; margin-top: 4px; } /* Abandons a parked sign-in. Deliberately quiet — it is the escape hatch, not the thing to reach for. */ .login-back { width: 100%; justify-content: center; padding: 9px; font-size: 14px; } .login-note { font-size: 13px; line-height: 1.5; color: var(--muted); } /* "Signing in as …" is filled in from the server response, so it is empty on first paint. The form is a grid — an empty row still costs a row and a gap. */ .login-note:empty { display: none; } /* The SVG carries its own white background and quiet zone (see auth.qr_svg), so this plate is only rounding and breathing room. */ .login-qr { display: grid; place-items: center; padding: 10px; margin: 6px auto; width: max-content; max-width: 100%; background: #ffffff; border-radius: var(--radius); } /* Natural size, deliberately. Forcing this to a fixed CSS pixel width was what made the code unscannable: it crushed a 45-module symbol to ~4 px per module, below what a phone camera can resolve off a screen. Only shrink it when the viewport genuinely cannot fit it. */ .login-qr svg { display: block; width: auto; height: auto; max-width: 100%; } .login-secret { display: inline-block; margin-top: 6px; padding: 7px 10px; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 13px; letter-spacing: 0.1em; word-break: break-all; color: var(--text); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; /* A secret is useless unless it can be copied. */ user-select: all; } .login-avatar { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font-weight: 700; color: #ffffff; background: linear-gradient(135deg, var(--blue), var(--purple)); } .login-name { font-weight: 600; font-size: 16px; } .login-footnote { margin-top: 22px; font-size: 12.5px; color: var(--muted); } .login-error { color: var(--red); font-size: 14px; } /* ------------------------------------------------------------------ */ /* App shell */ /* ------------------------------------------------------------------ */ .app-shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; } .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 26px; padding: 26px 20px; color: #dbe7ff; background: linear-gradient(180deg, var(--nav), var(--nav-2)); } .brand { display: flex; align-items: center; justify-content: center; } /* The wordmark replaces the old mark + text lockup entirely. Its artwork is trimmed to its own bounds, so width alone sets the visual size; the intrinsic width/height attributes reserve the right box before it loads. Unplated on purpose (operator decision 2026-08-05): the PNG's background is transparent and it reads against the sidebar gradient — the v2 art's tagline is near-white, so it needs the dark sidebar behind it, not a plate. Centred in the 268px rail rather than flush left. */ .brand-logo { display: block; width: 100%; max-width: 176px; height: auto; } .nav-list { display: grid; gap: 6px; } .nav-link { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 13px; border: none; border-radius: var(--radius-sm); background: transparent; color: rgba(219, 231, 255, 0.82); font-weight: 500; transition: background 0.15s ease, color 0.15s ease; } .nav-link:hover { background: rgba(122, 165, 255, 0.12); color: #ffffff; } .nav-link.active { background: var(--blue); color: #ffffff; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4); } .nav-link strong { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center; font-size: 12px; background: var(--red); color: #ffffff; } /* Live indicator — top right of the topbar, alongside the search field * and theme toggle. Broadcast-style: uppercase label beside a glowing * red dot (the glow and ping live in animations.css). */ .sync-block { display: grid; gap: 1px; padding: 7px 18px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-soft); } .sync-pill { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text); } /* Live dot. The glow and the expanding ring live in animations.css * (status-ping); .degraded stops the animation there too. */ .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--red); } .pulse.degraded { background: var(--amber); } .sync-detail { font-size: 11.5px; color: var(--muted); text-align: center; } /* ------------------------------------------------------------------ */ /* Main column */ /* ------------------------------------------------------------------ */ .dashboard { padding: 26px 30px 44px; display: grid; gap: 22px; align-content: start; } .degraded-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid rgba(217, 119, 6, 0.35); background: var(--amber-soft); color: var(--amber); font-weight: 500; } .topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; } .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); } .topbar h1 { font-size: 26px; letter-spacing: -0.02em; margin-top: 3px; } .subtitle { margin-top: 4px; color: var(--muted); } .topbar-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .search-field { display: flex; align-items: center; gap: 9px; min-width: 260px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); box-shadow: var(--shadow-soft); } .search-field input { border: none; outline: none; background: transparent; width: 100%; color: var(--text); } /* Signed-in employee — bottom of the navy sidebar, so its colors are * fixed light-on-navy rather than surface tokens (which would vanish * against the gradient in light theme). */ .avatar-block { margin-top: auto; display: flex; align-items: center; gap: 11px; padding: 10px 14px 10px 10px; border-radius: var(--radius); border: 1px solid rgba(122, 165, 255, 0.18); background: rgba(122, 165, 255, 0.1); } .avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-weight: 700; font-size: 14px; color: #ffffff; background: linear-gradient(135deg, var(--blue), var(--purple)); } .avatar-meta { display: grid; line-height: 1.25; } .avatar-meta strong { font-size: 14px; color: #ffffff; } .avatar-role { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); } /* var(--blue) is #2563eb in light theme — unreadable on the navy rail. */ .avatar-block .link-button { color: rgba(179, 205, 255, 0.9); } .avatar-block .link-button:hover { color: #ffffff; } .link-button { border: none; background: none; padding: 0; font-size: 12.5px; color: var(--blue); text-align: left; } .link-button:hover { text-decoration: underline; } /* ------------------------------------------------------------------ */ /* Views & panels */ /* ------------------------------------------------------------------ */ .page-view { display: none; } .page-view.active { display: grid; gap: 22px; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: 20px 22px; display: grid; gap: 16px; align-content: start; } .panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .panel-title { display: flex; align-items: center; gap: 9px; color: var(--text); } .panel-title [data-icon] { color: var(--blue); } .panel-title h2 { font-size: 17px; } .panel-header > div > p { margin-top: 3px; font-size: 13.5px; color: var(--muted); } .panel-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .panel-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 13px; } .allocation-note { font-size: 12.5px; } .select-control { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-soft); color: var(--muted); } .select-control select { border: none; background: transparent; outline: none; color: var(--text); font-size: 13.5px; } .segmented { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-soft); } .segment { border: none; background: transparent; padding: 7px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--muted-strong); transition: background 0.15s ease, color 0.15s ease; } .segment.active { background: var(--blue); color: #ffffff; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35); } .primary-button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: none; border-radius: var(--radius-sm); font-weight: 600; color: #ffffff; background: linear-gradient(135deg, var(--blue), #1d4fd8); box-shadow: 0 10px 22px rgba(37, 99, 235, 0.35); /* hover lift, press scale and sheen: animations.css */ } .primary-button:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(37, 99, 235, 0.42); } /* The login handlers disable the button while a request is in flight. Without this the button keeps its full colour and hover lift, so a slow sign-in looks like a click that did nothing and invites a second one. */ .primary-button:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; } .compact-button { padding: 8px 14px; } .ghost-button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); font-weight: 500; color: var(--muted-strong); transition: border-color 0.15s ease, color 0.15s ease; } .ghost-button:hover { border-color: var(--blue); color: var(--blue); } /* ------------------------------------------------------------------ */ /* Metric cards */ /* ------------------------------------------------------------------ */ .metric-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 14px; } .metric-card { display: flex; align-items: center; gap: 13px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-soft); } .metric-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); flex: none; } .metric-icon svg { width: 20px; height: 20px; } .metric-card.blue .metric-icon { background: var(--blue-soft); color: var(--blue); } .metric-card.green .metric-icon { background: var(--green-soft); color: var(--green); } .metric-card.purple .metric-icon { background: var(--purple-soft); color: var(--purple); } .metric-card.orange .metric-icon { background: var(--orange-soft); color: var(--orange); } .metric-card.red .metric-icon { background: var(--red-soft); color: var(--red); } .metric-card strong { display: block; font-size: 22px; letter-spacing: -0.02em; } .metric-card span:not(.metric-icon) { font-size: 12.5px; color: var(--muted); } /* ------------------------------------------------------------------ */ /* Systems list & detail */ /* ------------------------------------------------------------------ */ .employee-dashboard-grid { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(380px, 7fr); gap: 22px; align-items: start; } /* The 7px inner gutter (cancelled by the negative margin, so layout is * unchanged) gives each card's hover glow somewhere to land instead of * being sheared off by this scroller. */ .system-list { display: grid; gap: 9px; max-height: 620px; overflow-y: auto; padding: 7px; margin: -7px; scrollbar-gutter: stable; } .system-card { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease; } .system-card:hover { border-color: var(--blue); background: var(--surface); } .system-card.selected { border-color: var(--blue); background: var(--blue-soft); box-shadow: inset 3px 0 0 var(--blue); } .system-card-body { display: grid; gap: 3px; min-width: 0; flex: 1; } .system-card-body strong { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .system-card-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12.5px; } .chevron { color: var(--line-strong); font-size: 20px; line-height: 1; } .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; } .dot.online { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } .dot.offline { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); } .dot.large { width: 14px; height: 14px; } .status-online { color: var(--green); font-weight: 600; } .status-offline { color: var(--red); font-weight: 600; } .mini-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface); border: 1px solid var(--line); color: var(--muted-strong); white-space: nowrap; } .mini-tag.warn { background: var(--orange-soft); border-color: transparent; color: var(--orange); } .mini-tag.ok { background: var(--green-soft); border-color: transparent; color: var(--green); } .system-detail { display: grid; gap: 18px; } .detail-status-row { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; font-size: 15px; } /* min-height reserves room for the loading shimmer (animations.css), so * the once-a-minute image refresh cannot collapse the layout. */ .map-figure { margin: 0; display: grid; gap: 7px; min-height: 220px; } .map-figure img { width: 100%; max-height: 380px; object-fit: contain; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-soft); cursor: zoom-in; } .map-figure figcaption { font-size: 12.5px; color: var(--muted); } .map-missing { display: flex; align-items: center; gap: 9px; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px dashed var(--line-strong); color: var(--muted); font-size: 14px; } .detail-section { display: grid; gap: 11px; } .detail-section h3 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-strong); } .detail-section h3 [data-icon] { color: var(--blue); width: 16px; height: 16px; } .settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .setting-item { padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-soft); display: grid; gap: 2px; } .setting-item small { font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .setting-item strong { font-size: 15px; } .towers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 9px; } .tower-flags { display: grid; gap: 3px; justify-items: center; margin-top: 4px; } .tower-flag { display: inline-flex; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; background: var(--surface); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; } .tower-flag.net-ok { background: var(--green-soft); border-color: transparent; color: var(--green); } .tower-flag.net-down { background: var(--red-soft); border-color: transparent; color: var(--red); } .tower-chip { display: grid; gap: 1px; justify-items: center; padding: 9px 6px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-soft); } .tower-chip.on { background: var(--green-soft); border-color: rgba(22, 163, 74, 0.3); } .tower-chip.off { color: var(--muted); } .tower-num { font-size: 11px; font-weight: 600; color: var(--muted); } .tower-chip.on .tower-num { color: var(--green); } .tower-state { font-weight: 700; font-size: 13.5px; } .tower-chip.on .tower-state { color: var(--green); } /* Per-tower test-pattern card: a swipe toggle per tower (writes to RDS). */ .tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 9px; } .tp-item { display: grid; gap: 6px; justify-items: center; padding: 10px 6px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-soft); transition: border-color 0.15s, background 0.15s; } .tp-item.on { background: var(--amber-soft); border-color: rgba(217, 119, 6, 0.35); } .tp-item .tp-name { font-size: 11px; font-weight: 600; color: var(--muted); } .tp-item.on .tp-name { color: var(--amber); } /* The swipe switch itself. */ .tp-switch { border: none; background: none; padding: 2px; cursor: pointer; border-radius: 999px; line-height: 0; } .tp-switch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .tp-track { position: relative; display: inline-block; width: 44px; height: 24px; border-radius: 999px; background: var(--line-strong); transition: background 0.18s ease; } .tp-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35); transition: transform 0.18s ease; } .tp-switch.on .tp-track { background: var(--amber); } .tp-switch.on .tp-knob { transform: translateX(20px); } .tp-state-label { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--muted); } .tp-item.on .tp-state-label { color: var(--amber); } .muted-note { color: var(--muted); font-size: 13px; } /* ------------------------------------------------------------------ */ /* World map */ /* ------------------------------------------------------------------ */ .map-wrap { position: relative; } /* Legend stack floating over the map; z-index above Leaflet panes (~700). */ .map-legends { position: absolute; left: 12px; bottom: 12px; z-index: 900; display: grid; gap: 8px; } .elevation-legend, .geofence-legend, .pivot-legend { display: grid; gap: 5px; width: 190px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); font-size: 12px; } .elevation-legend strong, .geofence-legend strong, .pivot-legend strong { font-size: 12.5px; } /* --- pivot view legend ---------------------------------------------- */ /* The card reads out ONE system — whichever the view is zoomed in on — so it stays a fixed handful of rows however large the fleet grows. */ .pivot-legend-scope { display: grid; gap: 5px; } .pivot-legend-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pivot-legend-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--muted); } .pivot-legend-fact span:last-child { flex: none; color: var(--text); font-variant-numeric: tabular-nums; } .pivot-legend-fact.unknown span:last-child { color: var(--muted); } .pivot-measure-toggle { display: flex; align-items: center; gap: 7px; color: var(--muted); cursor: pointer; border-top: 1px solid var(--line); padding-top: 6px; } .pivot-measure-toggle span { display: flex; align-items: center; gap: 7px; } .pivot-measure-toggle input { flex: none; margin: 0; cursor: pointer; } .pivot-measure-controls { display: grid; gap: 5px; } .pivot-measure-controls input[type="number"] { min-width: 0; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 2px 4px; } .pivot-measure-row { display: flex; align-items: center; gap: 6px; } .pivot-measure-row input[type="number"] { width: 74px; flex: none; font-variant-numeric: tabular-nums; } .pivot-swatch { flex: none; width: 16px; height: 0; border-top: 2px dashed; } .pivot-swatch.arm { border-top-color: var(--text); } .pivot-swatch.measure { border-top-color: #dc2626; } /* Grab handle at the measure line's tip. Leaflet sizes the wrapping div-icon; the dot is centred inside it so the drag anchor sits exactly on the line's end point. */ .pivot-measure-handle { background: none; border: none; } .pivot-measure-handle i { display: block; width: 14px; height: 14px; margin: 3px; border-radius: 50%; background: #dc2626; border: 2px solid #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); cursor: grab; } .leaflet-marker-draggable.leaflet-drag-target .pivot-measure-handle i { cursor: grabbing; } .geofence-legend span { display: flex; align-items: center; gap: 7px; color: var(--muted); } .geofence-swatch { flex: none; width: 16px; height: 9px; border-radius: 3px; border: 2px solid; } .geofence-swatch.no-spray { border-color: #e11d48; background: rgba(225, 29, 72, 0.12); } .geofence-swatch.prescribed { border-color: #06b6d4; background: rgba(6, 182, 212, 0.12); } .geofence-swatch.disabled { border-color: #64748b; border-style: dashed; background: rgba(100, 116, 139, 0.08); } .elevation-legend-bar { height: 10px; border-radius: 5px; border: 1px solid var(--line); /* Must match ELEVATION_STOPS (viridis) in app.js. */ background: linear-gradient( to right, #440154 0%, #3b528b 25%, #21918c 50%, #5ec962 75%, #fde725 100% ); } .elevation-legend-labels { display: flex; justify-content: space-between; color: var(--muted); } .world-map { height: min(66vh, 640px); min-height: 380px; border-radius: var(--radius-sm); border: 1px solid var(--line); overflow: hidden; z-index: 0; } /* Full-screen map. app.js puts .map-fullscreen on the panel for BOTH paths — * the native Fullscreen API and the fixed-position fallback — so these rules * never have to name :fullscreen. The panel is normally a grid of auto rows; * as a column it hands the map whatever the header and legend leave, which * stays correct if another row is ever added above it. */ .map-panel.map-fullscreen { display: flex; flex-direction: column; height: 100%; padding: 14px 16px; border: 0; border-radius: 0; overflow: hidden; background: var(--surface); } .map-panel.map-fullscreen .map-wrap { flex: 1 1 auto; min-height: 0; /* without this a flex item floors at its content height */ } /* Beats both .world-map and its max-width override in the mobile query. */ .map-panel.map-fullscreen .world-map { height: 100%; min-height: 0; border-radius: 0; } /* Only for browsers that refuse requestFullscreen (sandboxed iframe, kiosk * shells). Native full screen renders in the top layer and needs none of it. * z-index clears the toast (80), the highest fixed layer in the app. */ .map-panel.map-fullscreen-fallback { position: fixed; inset: 0; z-index: 90; } /* Qualified with .leaflet-bar because leaflet.css sets `display: block` on * `.leaflet-bar a` — one class and one type, which outranks a lone class and * would leave the icon a block box in the corner instead of centred. */ .leaflet-bar a.map-fullscreen-btn { display: flex; align-items: center; justify-content: center; } /* A share of the button rather than a fixed pixel size: Leaflet gives the * anchor a 26px box on a mouse and 30px under .leaflet-touch, and the icon * has to look the same weight as the "+"/"−" above it in both. The viewBox * supplies the aspect ratio, so height follows on its own. */ .leaflet-bar a.map-fullscreen-btn svg { display: block; width: 62%; height: auto; } .map-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--muted-strong); } .map-legend > span { display: inline-flex; align-items: center; gap: 7px; } .dot.unknown { background: var(--muted); box-shadow: 0 0 0 3px var(--surface-soft); } .map-search-wrap { position: relative; } .search-field.compact { min-width: 240px; padding: 8px 13px; } .map-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; display: grid; max-height: 300px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 5px; } .map-search-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 10px; border: none; border-radius: var(--radius-xs); background: transparent; font-size: 13.5px; } .map-search-item:hover { background: var(--blue-soft); color: var(--blue); } .map-search-empty { padding: 10px; font-size: 13px; color: var(--muted); } .leaflet-tooltip.map-label { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.92); color: var(--text); font-family: inherit; font-size: 12px; font-weight: 600; box-shadow: var(--shadow-soft); } .leaflet-tooltip.map-label.online { border-color: rgba(22, 163, 74, 0.45); } .leaflet-tooltip.map-label.offline { border-color: rgba(225, 29, 72, 0.45); } .leaflet-tooltip.map-label.probe { border-color: rgba(100, 116, 139, 0.55); font-size: 11px; } .leaflet-tooltip.map-label::before { display: none; } .leaflet-container { font-family: inherit; } /* The vendored Leaflet stylesheet references an images/ sprite directory * that is not bundled with this dashboard. Draw the only sprite we use (the * base-layer switcher) in CSS so the control never becomes a blank button or * generates a missing-asset request. Circle markers do not use marker-icon. */ .leaflet-control-layers-toggle, .leaflet-retina .leaflet-control-layers-toggle { display: grid; place-items: center; background-image: none; text-decoration: none; } .leaflet-control-layers-toggle::before { content: "◫"; color: #334155; font-size: 23px; line-height: 1; } .leaflet-popup-content-wrapper { border-radius: var(--radius-sm); box-shadow: var(--shadow); } .leaflet-popup-content { margin: 12px 16px; } .map-popup { display: grid; gap: 3px; font-family: inherit; font-size: 13.5px; min-width: 170px; } .map-popup strong { font-size: 14.5px; } .map-popup-status { font-size: 12px; font-weight: 700; } .map-popup-status.online { color: var(--green); } .map-popup-status.offline { color: var(--red); } .map-popup-status.unknown { color: var(--muted); } .map-popup-owner { margin-top: 4px; font-weight: 600; color: var(--muted-strong); } .map-popup-owner.muted { font-weight: 400; color: var(--muted); } .map-popup-email { color: var(--blue); text-decoration: none; word-break: break-all; } .map-popup-email:hover { text-decoration: underline; } .empty-state { display: grid; gap: 9px; justify-items: center; text-align: center; padding: 30px 18px; color: var(--muted); font-size: 14px; } .empty-state.tall { padding: 70px 24px; } .empty-state [data-icon] { width: 30px; height: 30px; color: var(--line-strong); } /* ------------------------------------------------------------------ */ /* Tables */ /* ------------------------------------------------------------------ */ .table-shell { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } th, td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } thead th { position: sticky; top: 0; /* Above the row hover accent, which would otherwise paint over it. */ z-index: 1; background: var(--surface-soft); font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--surface-soft); } tr.unread-row { background: rgba(37, 99, 235, 0.035); } .title-cell { min-width: 200px; } .item-title { display: flex; align-items: center; gap: 7px; font-weight: 600; flex-wrap: wrap; } .item-subtitle { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .time-cell { white-space: nowrap; color: var(--muted-strong); } .actions-col { width: 1%; } .chip { display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--cyan-soft); color: var(--cyan); white-space: nowrap; } .priority-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .priority-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .priority-pill.High { background: var(--red-soft); color: var(--red); } .priority-pill.Medium { background: var(--orange-soft); color: var(--orange); } .priority-pill.Low { background: var(--blue-soft); color: var(--blue); } .priority-pill.Info { background: var(--surface-soft); color: var(--muted-strong); } .status-pill { display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .status-pill.unread { background: var(--blue-soft); color: var(--blue); } .status-pill.acknowledged { background: var(--amber-soft); color: var(--amber); } .status-pill.resolved { background: var(--green-soft); color: var(--green); } .status-pill.pending { background: var(--orange-soft); color: var(--orange); } .status-pill.in_progress { background: var(--purple-soft); color: var(--purple); } .row-actions { display: flex; gap: 6px; flex-wrap: wrap; } .row-action { padding: 4px 10px; border-radius: var(--radius-xs); border: 1px solid var(--line-strong); background: var(--surface); font-size: 12px; font-weight: 500; color: var(--muted-strong); white-space: nowrap; transition: border-color 0.15s ease, color 0.15s ease; } .row-action:hover { border-color: var(--blue); color: var(--blue); } .row-action.danger:hover { border-color: var(--red); color: var(--red); } .row-action:disabled { opacity: 0.45; cursor: not-allowed; } .inline-select { padding: 6px 9px; border-radius: var(--radius-xs); border: 1px solid var(--line); background: var(--surface); font-size: 13px; max-width: 170px; } /* ------------------------------------------------------------------ */ /* Category tabs */ /* ------------------------------------------------------------------ */ .category-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 3px; } .category-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-soft); font-size: 13px; font-weight: 500; color: var(--muted-strong); white-space: nowrap; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .category-tab strong { font-size: 12px; padding: 0 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); } .category-tab:hover { border-color: var(--blue); color: var(--blue); } .category-tab.active { background: var(--blue); border-color: var(--blue); color: #ffffff; } .category-tab.active strong { background: rgba(255, 255, 255, 0.18); border-color: transparent; color: #ffffff; } /* ------------------------------------------------------------------ */ /* Admin */ /* ------------------------------------------------------------------ */ .allocation-grid { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(380px, 7fr); gap: 22px; align-items: start; } /* Stacks the left-hand admin cards; without this wrapper the tall assignments table sets the grid row height and opens a huge gap between Team & Allocation and the cards below it. */ .allocation-col { display: grid; gap: 22px; align-content: start; min-width: 0; } .disable-system-row { display: flex; gap: 10px; align-items: center; } .disable-system-row select { flex: 1; min-width: 0; } .allocation-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .summary-tile { padding: 13px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-soft); display: grid; gap: 2px; } .summary-tile strong { font-size: 19px; letter-spacing: -0.01em; } .summary-tile span { font-size: 12px; color: var(--muted); } .workload-list { display: grid; gap: 11px; } .employee-card { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-soft); } .employee-avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-weight: 700; font-size: 13px; color: #ffffff; background: linear-gradient(135deg, var(--blue), var(--cyan)); flex: none; } /* Master users read as a different kind of account at a glance — amber * rather than the blue/cyan of the allocation roster. */ .employee-avatar.master, .login-avatar.master, .avatar.master { background: linear-gradient(135deg, var(--amber), var(--orange)); } .mini-tag.master-tag { background: var(--amber-soft); color: var(--amber); border-color: transparent; } .employee-info { flex: 1; min-width: 0; display: grid; gap: 7px; } .employee-name-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .day-chips { display: flex; gap: 5px; } .day-chip { width: 28px; height: 26px; display: grid; place-items: center; padding: 0; border-radius: var(--radius-xs); border: 1px solid var(--line); background: var(--surface); font-size: 11.5px; font-weight: 700; color: var(--muted); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .day-chip:hover { border-color: var(--blue); color: var(--blue); } .day-chip.active { background: var(--blue); border-color: var(--blue); color: #ffffff; } .day-chip.today { box-shadow: 0 0 0 2px var(--amber-soft), 0 0 0 3px var(--amber); } .admin-locked { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 70px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); } .admin-locked [data-icon] { width: 40px; height: 40px; color: var(--line-strong); } .admin-locked h2 { font-size: 19px; } .admin-locked p { color: var(--muted); max-width: 420px; } .admin-locked .primary-button { margin-top: 8px; } .nav-lock { margin-left: auto; width: 15px; height: 15px; color: rgba(219, 231, 255, 0.55); } .nav-link.active .nav-lock { color: rgba(255, 255, 255, 0.8); } .workload-meter { height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; } .workload-meter span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: width 0.4s ease; } /* ------------------------------------------------------------------ */ /* Modal & toast */ /* ------------------------------------------------------------------ */ .media-modal { position: fixed; inset: 0; z-index: 70; display: none; place-items: center; padding: 26px; background: rgba(15, 23, 42, 0.74); } .media-modal.show { display: grid; } .media-modal-dialog { position: relative; max-width: min(1080px, 94vw); max-height: 90vh; padding: 18px 18px 14px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); display: grid; gap: 9px; } .media-modal-dialog img { max-width: 100%; max-height: calc(90vh - 90px); object-fit: contain; border-radius: var(--radius-sm); } .media-modal-dialog p { font-size: 13.5px; color: var(--muted); text-align: center; } .media-modal-close { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; display: grid; place-items: center; border: none; border-radius: 50%; background: var(--nav); color: #ffffff; box-shadow: var(--shadow-soft); } .form-modal { position: fixed; inset: 0; z-index: 75; display: none; place-items: center; padding: 26px; background: rgba(15, 23, 42, 0.6); } .form-modal.show { display: grid; } .form-modal-dialog { width: min(440px, 100%); padding: 22px 24px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); display: grid; gap: 14px; } .form-modal-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .form-modal-header h2 { font-size: 17px; } .icon-close { width: 30px; height: 30px; display: grid; place-items: center; border: none; border-radius: 50%; background: var(--surface-soft); color: var(--muted); } .icon-close:hover { background: var(--line); color: var(--text); } .form-modal-message { font-size: 13.5px; color: var(--muted); } .form-modal-fields { display: grid; gap: 12px; } .form-field { display: grid; gap: 5px; } .form-field span { font-size: 12.5px; font-weight: 600; color: var(--muted-strong); } .form-field input, .form-field textarea, .form-field select { padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); font-size: 14px; resize: vertical; } /* Tall forms (the 11-row export picker) must scroll, never clip the footer buttons on short viewports. */ .form-modal-dialog { max-height: calc(100vh - 48px); overflow-y: auto; } .form-modal-bulk { display: flex; gap: 14px; margin-bottom: 2px; } .form-field-checkbox { display: flex; align-items: center; gap: 9px; } .form-field-checkbox input[type="checkbox"] { width: 16px; height: 16px; padding: 0; margin: 0; flex: 0 0 auto; accent-color: var(--blue); } .form-field-checkbox span { font-weight: 500; } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); } .form-modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; } .danger-button { background: linear-gradient(135deg, var(--red), #be123c); box-shadow: 0 10px 22px rgba(225, 29, 72, 0.35); } .danger-button:hover { box-shadow: 0 12px 26px rgba(225, 29, 72, 0.42); } .toast { position: fixed; right: 22px; bottom: 22px; z-index: 80; padding: 12px 18px; border-radius: var(--radius-sm); background: var(--nav); color: #ffffff; font-size: 14px; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; /* slide-in transition: animations.css */ } .toast.show { opacity: 1; transform: translateY(0); } /* ------------------------------------------------------------------ */ /* Responsive */ /* ------------------------------------------------------------------ */ @media (max-width: 1320px) { .metric-grid { grid-template-columns: repeat(3, 1fr); } .employee-dashboard-grid, .allocation-grid { grid-template-columns: 1fr; } .system-list { max-height: 420px; } } @media (max-width: 980px) { .app-shell { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; flex-direction: column; gap: 18px; } .nav-list { grid-template-columns: repeat(2, 1fr); } .avatar-block { margin-top: 0; } .metric-grid { grid-template-columns: repeat(2, 1fr); } .settings-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { body { font-size: 14px; } .dashboard { padding: 18px 16px 34px; } .metric-grid, .allocation-summary, .settings-grid, .nav-list { grid-template-columns: 1fr 1fr; } .topbar-actions { width: 100%; } .search-field { flex: 1; min-width: 0; } .panel { padding: 16px; } table { min-width: 640px; } } /* ------------------------------------------------------------------ */ /* History view */ /* ------------------------------------------------------------------ */ .history-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .history-picker { position: relative; } .history-picker-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 280px; max-height: 340px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 28px rgba(10, 30, 50, 0.18); padding: 10px; gap: 6px; } .history-picker-menu input[type="search"] { width: 100%; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; } .history-picker-actions { display: flex; justify-content: space-between; /* Select all on the left, Clear on the right */ } /* Pickers with only a Clear button (System History) keep it on the right. */ .history-picker-actions .link-button:only-child { margin-left: auto; } .history-picker-list { overflow-y: auto; display: flex; flex-direction: column; } .history-picker-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 0.92rem; } .history-picker-item:hover { background: var(--blue-soft); } .history-custom-range { display: flex; align-items: center; gap: 6px; } .history-custom-range input { padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; font-size: 0.88rem; } .history-body { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; } .history-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.85rem; color: var(--muted-strong); } .legend-swatch { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: baseline; } .legend-swatch.seg-on { background: var(--green); } .legend-swatch.seg-off { background: var(--red); } .legend-swatch.legend-start { background: var(--amber); clip-path: polygon(50% 0, 100% 100%, 0 100%); } .legend-swatch.legend-dot { background: var(--blue); border-radius: 50%; width: 10px; } .history-group { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px 16px; background: var(--surface-soft); } .history-group h3 { margin: 0 0 8px; font-size: 1.02rem; } .history-axis { position: relative; height: 18px; /* Left gutter matches the 28px button column + 10px gap + 140px label + 10px gap; right gutter matches the 90px value slot + 10px gap, so the ticks align with every lane's plot. */ margin: 0 100px 6px 188px; border-bottom: 1px solid var(--line); font-size: 0.7rem; color: var(--muted); } .history-subhead { margin: 14px 0 4px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 0.88rem; font-weight: 600; color: var(--blue); } .history-subhead-first { margin-top: 4px; padding-top: 0; border-top: 0; } .history-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; } .history-axis span:first-child { transform: none; } .history-axis span:last-child { transform: translateX(-100%); } .history-lane { display: flex; align-items: center; gap: 10px; padding: 3px 0; } .lane-label { flex: 0 0 140px; font-size: 0.83rem; color: var(--muted-strong); text-align: right; } .lane-track { flex: 1; position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; } .lane-track svg { width: 100%; height: 18px; display: block; background: var(--surface-soft); border-radius: 4px; } .history-lane.tall .lane-track svg { height: 56px; } .lane-empty { font-size: 0.8rem; color: var(--muted); font-style: italic; } /* Fixed-width value slot on every lane (empty when a lane has no value) so all plots share one width and stay aligned with the axis above. */ .lane-current { flex: 0 0 90px; text-align: right; font-size: 0.82rem; font-weight: 600; color: var(--blue); } .seg-on { fill: var(--green); } .seg-off { fill: var(--red); } .seg-unknown { fill: var(--muted); } .seg-ongoing { opacity: 0.85; } .step-line { fill: none; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; } .step-dot { fill: var(--blue); stroke: var(--surface); stroke-width: 1.2; cursor: pointer; } .start-mark { fill: var(--amber); cursor: pointer; } .history-towers { margin-top: 8px; } .history-towers summary { cursor: pointer; font-size: 0.86rem; color: var(--blue); margin-bottom: 4px; } .history-truncated { color: var(--amber); } .weather-line { fill: none; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; } /* --- Lane detail chart popup --------------------------------------- */ /* One straight column of graph buttons down the left edge of the card, flush with the .history-subhead headings. Fixed width so buttonless lanes (booleans, tower connectivity) keep their labels in line. */ .lane-gutter { flex: 0 0 28px; display: flex; align-items: center; justify-content: center; align-self: stretch; } .lane-chart-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface); color: var(--blue); cursor: pointer; } .lane-chart-btn:hover, .lane-chart-btn:focus-visible { border-color: var(--blue); background: var(--surface); color: var(--blue); } .lane-chart-btn [data-icon] { width: 18px; height: 18px; } .chart-modal { position: fixed; inset: 0; z-index: 72; display: none; place-items: center; padding: 26px; background: rgba(15, 23, 42, 0.6); } .chart-modal.show { display: grid; } .chart-modal-dialog { width: min(940px, 100%); max-height: 92vh; overflow: auto; padding: 20px 22px 16px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); display: grid; gap: 12px; } .chart-modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .chart-modal-header h2 { font-size: 17px; } .chart-modal-meta { margin-top: 3px; font-size: 12.5px; color: var(--muted); } .chart-plot { position: relative; } .chart-plot svg { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); background: var(--surface-soft); font-family: inherit; } .chart-plot svg:focus-visible { outline: 2px solid var(--blue-line); outline-offset: 2px; } .chart-grid { stroke: var(--line); stroke-width: 1; } .chart-axis { stroke: var(--line-strong); } .chart-tick { fill: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; } .chart-tick-y { text-anchor: end; } .chart-line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .chart-area { fill: var(--blue); opacity: 0.08; stroke: none; } .chart-dot { fill: var(--blue); stroke: var(--surface-soft); stroke-width: 2; } .chart-cursor-line { stroke: var(--line-strong); stroke-width: 1; } .chart-cursor-dot { fill: var(--blue); stroke: var(--surface); stroke-width: 2; } .chart-hit { fill: transparent; cursor: crosshair; touch-action: none; } .chart-tooltip { position: absolute; display: grid; gap: 1px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-soft); font-size: 0.8rem; pointer-events: none; white-space: nowrap; z-index: 2; } .chart-tooltip strong { font-size: 0.92rem; color: var(--text); } .chart-tooltip span { color: var(--muted); } .chart-stats { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 2px 4px 0; } .chart-stat { display: grid; gap: 0; font-size: 0.92rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .chart-stat small { font-size: 0.72rem; font-weight: 500; color: var(--muted); } .detail-history-btn { margin-left: auto; } /* Clickable open-alerts tag + per-system alert filter chip */ .alert-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; } .alert-link:hover { filter: brightness(0.92); } .system-filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--blue-soft); border: 1px solid var(--blue-line); color: var(--blue); font-size: 0.85rem; font-weight: 600; } .system-filter-chip .chip-clear { border: none; background: none; cursor: pointer; color: inherit; font-size: 0.85rem; padding: 0 2px; line-height: 1; } .system-filter-chip .chip-clear:hover { color: var(--blue); } /* ------------------------------------------------------------------ */ /* Soil probes view */ /* ------------------------------------------------------------------ */ .picker-group-label { padding: 6px 8px 2px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .probe-item-text { display: flex; flex-direction: column; min-width: 0; } .probe-item-text small { color: var(--muted); font-size: 0.74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .probe-filename { font-weight: 400; font-size: 0.78rem; color: var(--muted); margin-left: 8px; } .probe-chart { margin: 10px 0 16px; } .probe-chart-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .probe-chart-head .ghost-button { margin-left: auto; } .probe-chart-svg-wrap { position: relative; } .probe-chart-svg-wrap svg { width: 100%; height: 230px; display: block; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; } .probe-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; } .probe-axis-label { font-size: 11px; fill: var(--muted); } .probe-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; } .probe-line.m1 { stroke: var(--blue); } .probe-line.m2 { stroke: var(--red); } .probe-swatch-m1 { background: var(--blue); } .probe-swatch-m2 { background: var(--red); } .probe-crosshair { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; } .probe-tooltip { position: absolute; top: 8px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 6px 16px rgba(10, 30, 50, 0.15); padding: 6px 10px; font-size: 0.8rem; display: flex; flex-direction: column; gap: 2px; pointer-events: none; z-index: 5; } .probe-tip-m1 { color: var(--blue); font-weight: 600; } .probe-tip-m2 { color: var(--red); font-weight: 600; } /* Probe time axis, plot-all note, status sub-view */ .probe-time-axis { margin: 4px 0 0 0; border-bottom: none; border-top: none; } .probe-view-toggle { margin-left: 14px; } .probe-all-note { margin: 0 0 4px; } .probe-status-tiles { margin-bottom: 14px; } .probe-status-filter { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font-size: 0.92rem; } .probe-status-filter select { margin-left: 6px; padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; } /* ------------------------------------------------------------------ */ /* Historic maps */ /* ------------------------------------------------------------------ */ .maps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .maps-thumb { margin: 0; display: grid; gap: 5px; } .maps-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-soft); cursor: zoom-in; } .maps-thumb figcaption { display: grid; justify-items: center; gap: 6px; color: var(--muted); } .maps-thumb-date { font-size: 15px; font-weight: 600; color: var(--text); } .maps-download-btn { width: 100%; justify-content: center; } /* Straight row of quick links under the online/offline status line: the buttons share the row equally so all four always sit on one line. */ .detail-quick-links { display: flex; gap: 8px; margin-top: 10px; } .detail-quick-links .ghost-button { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; padding-left: 8px; padding-right: 8px; } /* Coordinates row with copy button */ .coords-value { display: inline-flex; align-items: center; gap: 6px; } .copy-btn { border: none; background: none; cursor: pointer; color: var(--blue); padding: 2px; line-height: 0; border-radius: 6px; } .copy-btn:hover { background: var(--blue-soft); } .copy-btn svg { width: 15px; height: 15px; } /* Coordinates card inside map marker popups */ .map-popup-coords { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 8px; border-radius: 8px; background: var(--blue-soft); border: 1px solid var(--blue-line); font-size: 0.82rem; font-variant-numeric: tabular-nums; color: var(--blue); } .map-popup-elev { margin-top: 4px; font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--muted); } .history-attribution { margin-top: 10px; font-size: 0.75rem; } /* The satellite legend needs more room than the 190px elevation boxes: the slider row (arrows + track) and a date line must fit inside. */ #landsatLegend { width: 232px; } .landsat-slider, .geofence-slider { display: grid; gap: 3px; margin-top: 4px; /* Grid items floor at min-content by default, and a range input's is wide * enough to push the "next" arrow out past a 190px legend. The track can * shrink; say so, or the arrow is clipped. */ min-width: 0; } .landsat-slider-row, .geofence-slider-row { display: flex; align-items: center; gap: 6px; /* The whole chain has to opt out of min-content flooring — legend grid -> * slider grid -> this row -> the input. Miss one link and the "next" arrow * is pushed outside the legend. */ min-width: 0; } .landsat-slider input[type="range"], .geofence-slider input[type="range"] { flex: 1; min-width: 0; accent-color: var(--blue); } .landsat-step, .geofence-step { flex: none; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; font-size: 10px; line-height: 1; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; } .landsat-step:hover:not(:disabled), .geofence-step:hover:not(:disabled) { color: var(--blue); border-color: var(--blue-line); } .landsat-step:disabled, .geofence-step:disabled { opacity: 0.4; cursor: default; } .landsat-slider-date, .geofence-slider-date { text-align: right; font-variant-numeric: tabular-nums; } /* Pinned to a past edit, the zones on screen are no longer what is live — * tint the legend so that is never mistaken for the current layout. */ .geofence-legend.historic { border-color: var(--blue-line); box-shadow: 0 0 0 1px var(--blue-line), var(--shadow); } /* The legend and its change log share one row of the legend stack; aligned * at the bottom so the log grows upward and its export controls stay level * with the slider they belong to. */ .geofence-legend-row { display: flex; align-items: flex-end; gap: 10px; min-width: 0; } .geofence-changelog { display: grid; gap: 7px; width: 260px; max-height: 320px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--blue-line); background: var(--surface); box-shadow: var(--shadow); font-size: 12px; } .geofence-changelog-head { display: grid; gap: 2px; } .geofence-changelog-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; overflow-y: auto; /* The list is the only part allowed to scroll: a field edited twenty times * in one poll must not push the export button off the map. */ min-height: 0; max-height: 168px; } .geofence-changelog-list li { display: grid; gap: 1px; padding-left: 8px; border-left: 2px solid var(--line); } .geofence-changelog-list li.kind-added { border-left-color: #16a34a; } .geofence-changelog-list li.kind-removed { border-left-color: #e11d48; } .geofence-changelog-list li.kind-geometry { border-left-color: #6366f1; } .geofence-changelog-list li.kind-prescription { border-left-color: #06b6d4; } .geofence-changelog-list li.kind-renamed { border-left-color: #d97706; } .geofence-changelog-list li.kind-disabled, .geofence-changelog-list li.kind-enabled { border-left-color: var(--muted); } .geofence-change-zone { font-weight: 600; color: var(--text); } .geofence-change-detail { color: var(--muted); } .geofence-changelog-empty { color: var(--muted); } .geofence-changelog-export { display: grid; gap: 4px; padding-top: 7px; border-top: 1px solid var(--line); } /* Sliding switch. The checkbox stays in the DOM (it is the control — it * keeps the label association, focus and keyboard behaviour) and is moved * off-screen rather than display:none, which would take it out of the tab * order entirely. */ .switch-toggle { display: flex; align-items: center; gap: 8px; color: var(--muted-strong); cursor: pointer; } .switch-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .switch-track { flex: none; position: relative; width: 30px; height: 17px; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--line); transition: background var(--motion-fast, 140ms) ease, border-color var(--motion-fast, 140ms) ease; } .switch-track::after { content: ""; position: absolute; top: 1px; left: 1px; width: 13px; height: 13px; border-radius: 50%; background: var(--muted); transition: transform var(--motion-fast, 140ms) ease, background var(--motion-fast, 140ms) ease; } .switch-toggle input:checked + .switch-track { background: var(--blue); border-color: var(--blue); } .switch-toggle input:checked + .switch-track::after { transform: translateX(13px); background: #ffffff; } /* Focus lands on the hidden input, so the ring has to be drawn on the track * or keyboard users get no indication at all. */ .switch-toggle input:focus-visible + .switch-track { outline: 2px solid var(--blue); outline-offset: 2px; } .geofence-export-fields { display: grid; gap: 4px; padding-top: 2px; } .geofence-changelog-export label { display: flex; align-items: center; gap: 6px; color: var(--muted-strong); cursor: pointer; } .geofence-changelog-export input[type="checkbox"] { flex: none; width: 13px; height: 13px; accent-color: var(--blue); cursor: pointer; } .geofence-changelog-export select { width: 100%; min-width: 0; padding: 4px 6px; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; } .geofence-changelog-export button { width: 100%; margin-top: 2px; } /* Fixed-stop NDVI ramp matching landsat_sync's evalscript colours. */ .landsat-ndvi-ramp { height: 8px; border-radius: 4px; background: linear-gradient( to right, #9c9c9c 0%, #ccbf99 20%, #e6d94d 50%, #66bf40 70%, #0d731a 100% ); } .map-popup-coords .copy-btn { margin-left: auto; } /* ------------------------------------------------------------------ */ /* Dark-theme component overrides (things Leaflet or defaults paint) */ /* ------------------------------------------------------------------ */ /* Street tiles get a night treatment; satellite imagery must NOT. */ [data-theme="dark"] .world-map:not(.satellite-on) .leaflet-tile-pane { filter: invert(1) hue-rotate(190deg) brightness(0.92) contrast(0.9) saturate(0.7); } [data-theme="dark"] .leaflet-popup-content-wrapper, [data-theme="dark"] .leaflet-popup-tip, [data-theme="dark"] .leaflet-control-layers, [data-theme="dark"] .leaflet-control-zoom a, [data-theme="dark"] .map-fullscreen-btn, [data-theme="dark"] .leaflet-control-attribution { background: var(--surface); color: var(--text); } [data-theme="dark"] .leaflet-control-attribution a { color: var(--blue); } [data-theme="dark"] .leaflet-bar a { border-color: var(--line); } [data-theme="dark"] .leaflet-tooltip.map-label { background: rgba(18, 27, 46, 0.94); color: var(--text); } /* Live angle readout riding the measure handle — declared after the dark-theme rule above so it keeps its red chip in both themes. */ [data-theme] .leaflet-tooltip.map-label.pivot-readout, .leaflet-tooltip.map-label.pivot-readout { font-variant-numeric: tabular-nums; color: #ffffff; background: #dc2626; border-color: #dc2626; } [data-theme="dark"] .leaflet-container { background: #0b1220; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted-strong); } .theme-toggle:hover { border-color: var(--blue); color: var(--blue); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline-flex; } [data-theme="dark"] .theme-toggle .icon-sun { display: inline-flex; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ------------------------------------------------------------------ */ /* Mobile refinements for the newer views */ /* ------------------------------------------------------------------ */ @media (max-width: 720px) { .history-toolbar { width: 100%; } .history-toolbar select, .history-toolbar .primary-button, .history-toolbar .ghost-button { flex: 1 1 auto; justify-content: center; } .history-picker { flex: 1 1 100%; } .history-picker > .ghost-button { width: 100%; justify-content: center; } .history-picker-menu { width: min(320px, calc(100vw - 44px)); } .history-custom-range { flex: 1 1 100%; } .history-custom-range input { flex: 1; min-width: 0; } .maps-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .detail-quick-links { flex-wrap: wrap; } .detail-quick-links .ghost-button { flex: 1 1 45%; } .lane-label { flex-basis: 82px; font-size: 0.72rem; } .history-axis { /* 24px button column + 10px gap + 82px label + 10px gap */ margin-left: 126px; font-size: 0.62rem; } .lane-gutter { flex-basis: 24px; } .lane-chart-btn { width: 24px; height: 24px; } .lane-chart-btn [data-icon] { width: 15px; height: 15px; } .history-axis span:nth-child(even) { display: none; } .probe-time-axis { margin-left: 0; } .probe-time-axis span:nth-child(even) { display: none; } .probe-chart-svg-wrap svg { height: 190px; } .probe-chart-head { flex-wrap: wrap; gap: 8px; } .probe-status-filter { flex-wrap: wrap; gap: 8px; } .probe-view-toggle { margin-left: 0; } .panel-title { flex-wrap: wrap; } .detail-history-btn { margin-left: 0; } .world-map { height: min(58vh, 480px); min-height: 300px; } .probe-status-tiles { grid-template-columns: 1fr 1fr; } } /* Dark mode: solid blue fills keep white text readable (the dark --blue * token is lighter, tuned for text-on-dark, not for filled surfaces). */ [data-theme="dark"] .nav-link.active, [data-theme="dark"] .segment.active, [data-theme="dark"] .category-tab.active, [data-theme="dark"] .primary-button { background: #2c5ada; color: #ffffff; } [data-theme="dark"] .category-tab.active { border-color: #2c5ada; } [data-theme="dark"] .primary-button:hover { background: #3b69e8; } [data-theme="dark"] .nav-link strong { background: #e11d48; } [data-theme="dark"] .avatar, [data-theme="dark"] .login-avatar { background: linear-gradient(135deg, #2563eb, #7c3aed); } /* ...but master accounts keep their amber badge in dark mode too. Without * this the rule above — same specificity, later in the file — repaints * them employee-blue, and the only colour cue for "this is a master user" * silently disappears on the login screen and in the sidebar. */ [data-theme="dark"] .avatar.master, [data-theme="dark"] .login-avatar.master, [data-theme="dark"] .employee-avatar.master { background: linear-gradient(135deg, var(--amber), var(--orange)); } /* Keep the CSS-rendered layers glyph and popup close control visible on the * dark surface. */ [data-theme="dark"] .leaflet-control-layers-toggle::before { color: #cbd5e1; } [data-theme="dark"] .leaflet-popup-close-button { color: var(--muted) !important; } [data-theme="dark"] .leaflet-control-layers-expanded { color: var(--text); }