:root { --cyan: #0FB5CE; --cyan-2: #2CC7DD; --amber: #F5A524; --bg: #FBFDFE; --bg-2: #EEF4F7; --surface: #fff; --surface-2: #F3F7F9; --text: #0E1A24; --muted: #5A6B76; --line: #DCE6EB; --brand-ink: #0A7E92; --danger: #c0392b; --ok: #1FA971; --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Light is the default; dark is opt-in via the shared toggle (localStorage 'rt-theme'), same model as the landing so the theme carries across the whole site. */ :root[data-theme="dark"] { --bg: #081018; --bg-2: #06121a; --surface: #0f1e27; --surface-2: #0c1a24; --text: #E8F0F4; --muted: #8AA0AC; --line: rgba(255,255,255,.1); --brand-ink: #7FE0EE; } .icon-btn { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 16px; cursor: pointer; } .icon-btn:hover { border-color: var(--cyan); color: var(--text); } .login-toggle { position: fixed; top: 18px; right: 18px; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font-family: var(--font); color: var(--text); background: var(--bg); } a { color: var(--brand-ink); } .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -.01em; } /* B4.9: tenant accent. Defaults to --cyan so the RT Track monogram is visually unchanged when a tenant has no custom branding; a branded tenant tints the monogram with its own accent. */ .brand-mark { width: 18px; height: 18px; border-radius: 5px; background: var(--text); box-shadow: inset 0 0 0 3px var(--brand-accent, var(--cyan)); position: relative; } /* B4.9: optional per-tenant logo shown in place of the monogram. */ .brand-logo { height: 22px; width: auto; max-width: 160px; object-fit: contain; display: block; } .brand-mark::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--amber); } .btn { display: inline-block; border: 0; border-radius: 9px; padding: 10px 16px; font: inherit; font-weight: 600; background: var(--cyan); color: #04222a; cursor: pointer; text-decoration: none; text-align: center; } .btn:hover { background: var(--cyan-2); } .btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line); } .muted { color: var(--muted); } .pad { padding: 16px; } .err { color: var(--danger); font-size: 14px; } .ok { color: var(--ok); font-size: 14px; } .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(1200px 600px at 70% -10%, rgba(15,181,206,.10), transparent), var(--bg); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; } .login { width: min(380px, 92vw); padding: 28px; display: flex; flex-direction: column; gap: 12px; } .login h1 { margin: 4px 0 8px; font-size: 20px; } .login label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); } .login input { padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; } .login.wide { width: min(460px, 92vw); } .login .legal-agree { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; margin: 4px 0; font-size: 13px; line-height: 1.45; color: var(--muted); text-align: left; } .login .legal-agree input { margin-top: 3px; flex-shrink: 0; width: auto; height: auto; padding: 0; border: none; background: transparent; box-shadow: none; accent-color: var(--cyan); } .login .legal-agree a { color: var(--cyan); } .login .btn { margin-top: 6px; } .muted-link { text-align: center; font-size: 13px; text-decoration: none; margin-top: 4px; color: var(--muted); } /* View As (staff impersonation) banner — rendered by includes/auth.php view_as_bar() as the first child of on every customer-portal page while a staff member is acting-as a customer. Loud amber so it is never mistaken for the customer's own chrome. As a normal-flow block it pushes the page down naturally; on the full-height dashboard (.app is 100vh) the adjacent-sibling rule below shrinks the app so nothing overflows. */ .view-as-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; min-height: 46px; background: var(--amber); color: #241a02; font-weight: 600; box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); } .view-as-bar .vab-msg { line-height: 1.3; } .view-as-bar .vab-exit { margin: 0; } .view-as-bar .btn { background: #241a02; color: #fff; padding: 7px 14px; } .view-as-bar .btn:hover { background: #000; } .view-as-bar + .app { height: calc(100vh - 46px); } @media (max-width: 760px) { .view-as-bar { font-size: 13px; padding: 7px 10px; } } .app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface); } .top-right { display: flex; align-items: center; gap: 14px; } .menu-btn { display: none; } .who { font-size: 13px; color: var(--muted); } .body { flex: 1; display: flex; min-height: 0; } .sidebar { width: 300px; border-right: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; min-height: 0; } .side-head { padding: 14px 16px; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); } .asset-list { list-style: none; margin: 0; padding: 6px; overflow: auto; } .asset-list li.asset { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 9px; cursor: pointer; } .asset-list li.asset:hover { background: var(--surface-2); } .asset-list li.asset.sel { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); } .asset-list li.asset .dot { margin-top: 5px; } .a-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .a-name { font-weight: 600; font-size: 14px; line-height: 1.25; } .a-meta { font-size: 12px; color: var(--muted); line-height: 1.3; } .a-where { font-size: 12px; color: var(--text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .a-vitals { flex: none; align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .v-read { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; color: var(--text); } .v-read.low { color: var(--amber); } .a-eng { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; } .a-eng .dh-eng-ico { width: 18px; height: 18px; } .a-age { font-size: 12px; color: var(--muted); } .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--muted)); flex: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--muted)) 25%, transparent); } .badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: var(--c, var(--muted)); } .s-moving { --c: var(--ok); } .s-parked { --c: var(--cyan); } .s-offline { --c: #8391a0; } .s-invalid_gps { --c: var(--amber); } .s-alarm { --c: var(--danger); } .s-unknown { --c: #9aa7b0; } .s-untracked { --c: #9aa7b0; } /* no device assigned — deliberate, not a fault (§P0-3) */ .s-asleep { --c: #7c6cf0; } /* deep-sleep tier: dark-until-motion, expected (not "offline") */ .main { flex: 1; overflow: auto; padding: 18px; } .detail { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .detail-head h2 { margin: 0; font-size: 20px; } .detail-head .sub { color: var(--muted); font-size: 13px; margin-top: 2px; text-transform: capitalize; } .map-box { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface-2); } .map { width: 100%; height: 340px; border: 0; display: block; } .map.empty { height: 340px; display: grid; place-items: center; color: var(--muted); } .stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .stat-label { font-size: 12px; color: var(--muted); } .stat-value { font-size: 20px; font-weight: 700; margin-top: 3px; } .stat-unit { font-size: 13px; font-weight: 500; color: var(--muted); } /* Redesigned asset-detail telemetry cards: icon + label + value + a plain-language status line. */ .stats.metrics { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .metric { display: flex; gap: 11px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .metric-full { grid-column: 1 / -1; } .metric-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); } .metric-ic svg { width: 18px; height: 18px; display: block; } .metric-main { min-width: 0; } .metric-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .metric-value { font-size: 20px; font-weight: 700; line-height: 1.15; margin-top: 3px; word-break: break-word; } .metric-full .metric-value { font-size: 17px; } .metric-unit { font-size: 13px; font-weight: 500; color: var(--muted); } .metric-sub { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; } .metric.is-good .metric-ic { background: rgba(31,169,113,.14); color: #1FA971; } .metric.is-good .metric-sub { color: #1FA971; } .metric.is-warn .metric-ic { background: rgba(199,119,0,.16); color: #C77700; } .metric.is-warn .metric-sub { color: #C77700; } .metric.is-bad .metric-ic { background: rgba(229,72,77,.14); color: #E5484D; } .metric.is-bad .metric-sub { color: #E5484D; } .metric.is-muted .metric-ic { opacity: .7; } .loc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .loc-actions .btn { text-decoration: none; } .history { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .history-head { padding: 12px 14px; font-weight: 600; border-bottom: 1px solid var(--line); } .history table { width: 100%; border-collapse: collapse; font-size: 13px; } .history th, .history td { text-align: left; padding: 8px 14px; border-bottom: 1px solid var(--line); } .history th { color: var(--muted); font-weight: 600; } .history tbody tr:last-child td { border-bottom: 0; } /* Wide tables (recent-activity / fleet list) scroll inside their card instead of being clipped by the card's overflow:hidden. Harmless on desktop where they already fit. */ .history > div:last-child { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* --------------------------------------------------------------------------- Small screens (phones). The portal collapses to a single column: the asset sidebar is hidden — the Fleet-overview map + "All assets" list is the mobile navigation, and the detail view's "‹ All assets" button returns there — the main content goes full width, the top bar condenses, and wide tables scroll horizontally inside their cards rather than squashing to mush. --------------------------------------------------------------------------- */ @media (max-width: 760px) { /* Header: brand + a visible Menu button. The action links (.top-right) become a sheet. */ .topbar { padding: 10px 12px; gap: 10px; } .btn { padding: 9px 13px; } .loc-actions .btn { min-height: 40px; display: inline-flex; align-items: center; } .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 44px; height: 40px; padding: 0 14px; margin-left: auto; font-size: 14px; font-weight: 700; letter-spacing: .01em; } .app.more-open .menu-btn { border-color: var(--cyan); color: var(--text); background: var(--surface-2); } .top-right { display: none; position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); z-index: 55; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; background: var(--surface); border-top: 1px solid var(--line); max-height: 60vh; overflow: auto; box-shadow: 0 -10px 28px rgba(0,0,0,.18); } .app.more-open .top-right { display: flex; } .top-right .btn { text-align: left; min-height: 44px; } .top-right .who { display: block; order: -1; padding: 2px 2px 6px; } /* show the email atop the sheet */ .top-right .icon-btn { align-self: flex-start; } .who { display: none; } /* email hidden in the header itself */ .body { flex-direction: column; } .sidebar { display: none; } .main { padding: 12px; padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } .detail, .detail.overview { max-width: 100%; } .detail-head { flex-wrap: wrap; } .detail-head h2 { font-size: 18px; } .stats { grid-template-columns: repeat(2, 1fr); } .history table:not(.fleet-table):not(.rt-stack) { min-width: 560px; } /* leftover wide tables still scroll */ #fleetList { overflow-x: hidden; } /* Fleet overview: drop the "Fleet overview" title so search + map start sooner. */ .detail.overview .detail-head { display: none; } .detail.overview { gap: 10px; } .fleet-updated { display: none; } .fleet-tools { gap: 8px; } .fleet-search-wrap { min-width: 0; } #fleetList .fleet-table { display: none; } #fleetList .fleet-cards { display: flex; flex-direction: column; } /* Search/chips: keep chips scrolling; the wrap height is fixed AFTER .list-search-wrap (that rule sits later in this file and would otherwise restore flex: 1 1 260px). */ .list-tools { flex-direction: column; align-items: stretch; gap: 10px; } .list-chips, .fleet-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; scrollbar-width: none; } .list-chips::-webkit-scrollbar, .fleet-chips::-webkit-scrollbar { display: none; } .chip { flex: 0 0 auto; } /* Stacked-table cards: add class="rt-stack" + data-label on each td. Desktop tables unchanged. */ table.rt-stack thead { display: none; } table.rt-stack, table.rt-stack tbody { display: block; width: 100%; min-width: 0; } table.rt-stack tbody tr { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--line); } table.rt-stack tbody tr:last-child { border-bottom: 0; } table.rt-stack td { display: block; border: 0 !important; padding: 0 !important; white-space: normal !important; width: auto !important; min-width: 0 !important; } table.rt-stack td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-bottom: 2px; } table.rt-stack td.rt-primary { font-weight: 700; font-size: 15px; } table.rt-stack td.rt-primary::before { display: none; } table.rt-stack td.rt-actions { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; } table.rt-stack td.rt-actions::before { display: none; } table.rt-stack td.rt-actions .btn { min-height: 40px; } .hist-pager { flex-direction: column; align-items: stretch; } .hist-pager-btns .btn { flex: 1 1 40%; min-height: 40px; justify-content: center; } /* Bottom tab bar: Map · Fleet · Alerts · More. Desktop hide is `@media (min-width: 761px)`. */ .mobile-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--line); } .mtab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; padding: 6px 2px; min-height: 44px; } .mtab.active { color: var(--brand-ink); } .mtab-ic { font-size: 18px; line-height: 1; } } @media (max-width: 420px) { .stats { grid-template-columns: 1fr; } } /* Fleet overview (landing) — a bit wider than a single-asset detail; clickable "all assets" list. */ .detail.overview { max-width: 1100px; } .back-btn { margin-bottom: 8px; padding: 5px 12px; font-size: 13px; } .fleet-row { cursor: pointer; } .fleet-row:hover td { background: var(--surface-2); } .fleet-row .dot { display: inline-block; margin-right: 8px; vertical-align: middle; } /* P2-2 fleet tools: live search box, status-count filter chips, and a "last updated" clock. All client-side over the already-polled state — no extra requests. */ .fleet-tools { display: flex; flex-direction: column; gap: 10px; } .fleet-tools-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .fleet-search-wrap { position: relative; flex: 1; min-width: 220px; } .fleet-search { width: 100%; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; } .fleet-search:focus { outline: none; border-color: var(--cyan); } .fleet-updated { font-size: 12px; color: var(--muted); white-space: nowrap; } /* Type-ahead suggestions dropdown under the fleet search box. Theme-aware; scrolls if long. */ .fleet-suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px; } .fleet-suggest[hidden] { display: none; } .sug-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; } .sug-row:hover, .sug-row.hi { background: var(--surface-2); } .sug-row .dot { flex: none; } .sug-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sug-name { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sug-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sug-empty { padding: 10px 12px; font-size: 13px; color: var(--muted); } .fleet-chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .chip:hover { border-color: var(--cyan); } .chip.active { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--cyan); } .chip .chip-n { color: var(--muted); font-weight: 700; } .chip.active .chip-n { color: var(--text); } /* P2-3 phone bottom tab bar — hidden on desktop; shown ≤760px in the media query above. */ @media (min-width: 761px) { .mobile-tabbar { display: none; } } /* ---- Shared list tools (Equipment / Devices / Team management pages) -------- */ /* Search box + filter chips + click-to-sort headers, matching the dashboard fleet tools. */ .list-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0; } .list-search-wrap { position: relative; display: flex; align-items: center; flex: 1 1 260px; } .list-search-wrap svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; } .list-search { width: 100%; padding: 10px 12px 10px 36px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; } .list-search:focus { outline: none; border-color: var(--cyan); } .list-chips { display: flex; flex-wrap: wrap; gap: 8px; } /* Phone: stack search above chips. Must come AFTER the desktop flex: 1 1 260px rule — that 260px is width in a row and HEIGHT in a column (empty band around the search box). */ @media (max-width: 760px) { .list-tools { flex-direction: column; align-items: stretch; gap: 8px; margin: 8px 0 10px; } .list-search-wrap { flex: 0 0 auto; width: 100%; } } /* Sortable table headers on the management tables. */ .eq-table th.eq-th, .dev-table th.dv-th, table.team-table th.tm-th { cursor: pointer; user-select: none; white-space: nowrap; } .eq-table th.eq-th::after, .dev-table th.dv-th::after, table.team-table th.tm-th::after { content: "↕"; margin-left: 6px; font-size: 10px; opacity: .35; } .eq-table th.sort-asc::after, .dev-table th.sort-asc::after, table.team-table th.sort-asc::after { content: "↑"; opacity: .9; } .eq-table th.sort-desc::after, .dev-table th.sort-desc::after, table.team-table th.sort-desc::after { content: "↓"; opacity: .9; } /* ---- Fleet overview "All assets" table — click-to-sort headers -------------- */ #fleetList th.fleet-th { cursor: pointer; user-select: none; white-space: nowrap; } #fleetList th.fleet-th::after { content: "↕"; margin-left: 6px; font-size: 10px; opacity: .35; } #fleetList th.fleet-th.sort-asc::after { content: "↑"; opacity: .9; } #fleetList th.fleet-th.sort-desc::after { content: "↓"; opacity: .9; } /* Phone cards for All assets — hidden on desktop. */ .fleet-cards { display: none; } .fleet-card { padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; display: flex; flex-direction: column; gap: 4px; } .fleet-card:last-child { border-bottom: 0; } .fleet-card:hover, .fleet-card:active { background: var(--surface-2); } .fleet-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; } .fc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .fc-name { font-weight: 700; font-size: 15px; display: flex; align-items: center; min-width: 0; } .fc-name .dot { margin-right: 8px; } .fc-right { display: flex; align-items: center; gap: 8px; flex: none; } .fc-right .v-read { font-size: 13px; } .fc-eng { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; } .fc-eng .dh-eng-ico { width: 20px; height: 20px; } .fc-meta, .fc-loc { font-size: 13px; color: var(--muted); } .fc-loc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Asset detail "Recent activity" table — click-to-sort headers ----------- */ #histBody th.activity-th { cursor: pointer; user-select: none; white-space: nowrap; } #histBody th.activity-th::after { content: "↕"; margin-left: 6px; font-size: 10px; opacity: .35; } #histBody th.activity-th.sort-asc::after { content: "↑"; opacity: .9; } #histBody th.activity-th.sort-desc::after { content: "↓"; opacity: .9; } /* ---- Human location link (place / geofence / City,ST → Google Maps) --------- */ .loc-link { text-decoration: none; color: var(--brand-ink); } .loc-link:hover { text-decoration: underline; } .loc-link .loc-ext { font-size: .78em; opacity: .55; margin-left: 3px; } /* ---- Asset activity log — date-range + page-size controls + pager ---------- */ .hist-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0 4px; } .hist-ctl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } .hist-ctl input[type="date"], .hist-ctl select { padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; } .hist-ctl input[type="date"]:focus, .hist-ctl select:focus { outline: none; border-color: var(--cyan); } .hist-spacer { flex: 1 1 12px; } .hist-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 2px 2px; font-size: 13px; } .hist-pager-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .btn.sm { padding: 5px 11px; font-size: 13px; } /* ===== RTUI — shared toasts + confirm dialogs (rt-ui.js) ===================== Styled entirely from the design tokens above, so light/dark theming is automatic. */ .rtui-toasts { position: fixed; top: 18px; right: 18px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 36px)); pointer-events: none; } .rtui-toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px rgba(8, 24, 34, .16); font-size: 14px; line-height: 1.45; pointer-events: auto; opacity: 0; transform: translateY(-6px); transition: opacity .22s ease, transform .22s ease; } .rtui-toast.rtui-in { opacity: 1; transform: none; } .rtui-toast.rtui-out { opacity: 0; transform: translateY(-6px); } .rtui-toast-icon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--cyan); margin-top: 1px; } .rtui-success .rtui-toast-icon { background: var(--ok); } .rtui-error .rtui-toast-icon { background: var(--danger); } .rtui-toast-msg { flex: 1; padding-top: 2px; overflow-wrap: anywhere; } .rtui-toast-close { flex: none; border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 6px; } .rtui-toast-close:hover { color: var(--text); background: var(--surface-2); } .rtui-overlay { position: fixed; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 20px; background: rgba(8, 16, 24, .45); opacity: 0; transition: opacity .18s ease; } .rtui-overlay.rtui-in { opacity: 1; } .rtui-modal { width: min(440px, 100%); padding: 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 18px 60px rgba(4, 12, 18, .35); } .rtui-modal-title { margin: 0; font-size: 17px; } .rtui-modal-msg { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); } .rtui-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; } .btn.rtui-danger { background: var(--danger); color: #fff; } .btn.rtui-danger:hover { background: #a93226; } body.rtui-modal-open { overflow: hidden; } @media (max-width: 760px) { .rtui-toasts { top: 12px; right: 12px; left: 12px; max-width: none; } .rtui-modal-actions { flex-direction: column-reverse; } .rtui-modal-actions .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .rtui-toast, .rtui-overlay { transition: none; } } /* F2: migrated inline styles -> attribute selectors (data-uc). Appended last to win same-specificity ties. */ [data-uc="1"][data-uc="1"]{top:4%;left:-3%;} [data-uc="2"][data-uc="2"]{top:33%;right:-6%;} [data-uc="3"][data-uc="3"]{bottom:15%;left:-2%;} [data-uc="4"][data-uc="4"]{color:#18a558;} [data-uc="5"][data-uc="5"]{bottom:-2%;right:11%;} [data-uc="6"][data-uc="6"]{margin-bottom:4px;} [data-uc="7"][data-uc="7"]{margin-bottom:4px;color:#b42318;} [data-uc="8"][data-uc="8"]{text-align:center;padding:24px 0;} [data-uc="9"][data-uc="9"]{text-align:center;padding:20px 0;} [data-uc="10"][data-uc="10"]{margin:0;color:var(--text);} [data-uc="11"][data-uc="11"]{margin:0 0 6px;} [data-uc="12"][data-uc="12"]{position:fixed;right:8px;bottom:6px;z-index:500;pointer-events:none;} [data-uc="13"][data-uc="13"]{margin-bottom:8px;font-size:13px;} [data-uc="14"][data-uc="14"]{font-size:12px;} [data-uc="15"][data-uc="15"]{margin-top:14px;} [data-uc="16"][data-uc="16"]{background:#e6f7fa;color:#0A7E92;border-radius:8px;padding:8px 10px;font-size:13px;margin:8px 0;} [data-uc="17"][data-uc="17"]{text-align:center;margin-top:12px;} [data-uc="18"][data-uc="18"]{background:none;border:0;cursor:pointer;font:inherit;color:var(--muted);text-decoration:underline;} [data-uc="19"][data-uc="19"]{white-space:normal;} [data-uc="20"][data-uc="20"]{text-align:center;padding:16px 0;} [data-uc="21"][data-uc="21"]{margin-left:6px;} [data-uc="22"][data-uc="22"]{margin:12px 0 0;} [data-uc="23"][data-uc="23"]{font-size:15px;font-weight:400;} [data-uc="24"][data-uc="24"]{margin:6px 0 4px;} [data-uc="25"][data-uc="25"]{margin-top:12px;} [data-uc="26"][data-uc="26"]{margin:0 0 14px;} [data-uc="27"][data-uc="27"]{margin:0 0 10px;} [data-uc="28"][data-uc="28"]{margin-top:0;} [data-uc="29"][data-uc="29"]{gap:10px;margin:4px 0 14px;} [data-uc="30"][data-uc="30"]{display:inline;} [data-uc="31"][data-uc="31"]{margin:16px 0 4px;} [data-uc="32"][data-uc="32"]{font-weight:400;} [data-uc="33"][data-uc="33"]{margin:0 0 8px;} [data-uc="34"][data-uc="34"]{margin-bottom:12px;} [data-uc="35"][data-uc="35"]{max-width:420px;} [data-uc="36"][data-uc="36"]{margin:0 0 12px;} [data-uc="37"][data-uc="37"]{margin:2px 0 6px;} [data-uc="38"][data-uc="38"]{margin-top:8px;} [data-uc="39"][data-uc="39"]{margin-top:28px;} [data-uc="40"][data-uc="40"]{font-size:14px;font-weight:400;} [data-uc="41"][data-uc="41"]{margin:8px 0 16px;padding:14px 16px;} [data-uc="42"][data-uc="42"]{align-items:center;gap:12px;flex-wrap:wrap;} [data-uc="43"][data-uc="43"]{font-size:15px;padding:6px 12px;} [data-uc="44"][data-uc="44"]{margin:10px 0 0;color:var(--danger,#b42318);} [data-uc="45"][data-uc="45"]{margin-bottom:6px;font-weight:600;} [data-uc="46"][data-uc="46"]{gap:8px;align-items:baseline;margin:3px 0;} [data-uc="47"][data-uc="47"]{text-align:center;padding:22px;} [data-uc="48"][data-uc="48"]{gap:6px;align-items:baseline;margin:2px 0;} [data-uc="49"][data-uc="49"]{font-size:11px;} [data-uc="50"][data-uc="50"]{font-size:13px;} [data-uc="51"][data-uc="51"]{margin-bottom:14px;} [data-uc="52"][data-uc="52"]{margin-top:10px;} [data-uc="53"][data-uc="53"]{margin-bottom:6px;} [data-uc="54"][data-uc="54"]{margin-left:auto;} [data-uc="55"][data-uc="55"]{margin-top:24px;} [data-uc="56"][data-uc="56"]{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted,#6b7280);} [data-uc="57"][data-uc="57"]{padding:6px 8px;border:1px solid var(--line,#dfe3ea);border-radius:8px;background:var(--card,#fff);color:inherit;} [data-uc="58"][data-uc="58"]{margin:0;} [data-uc="59"][data-uc="59"]{font-weight:600;} [data-uc="60"][data-uc="60"]{margin:0 0 16px;} [data-uc="61"][data-uc="61"]{margin:8px 0 2px;} [data-uc="62"][data-uc="62"]{margin-bottom:16px; padding:14px 16px;} [data-uc="63"][data-uc="63"]{gap:8px; align-items:flex-end; flex-wrap:wrap;} [data-uc="64"][data-uc="64"]{min-width:340px;} [data-uc="65"][data-uc="65"]{align-self:center;} [data-uc="66"][data-uc="66"]{margin-top:6px;} [data-uc="67"][data-uc="67"]{grid-column:1/-1;text-align:center;} [data-uc="68"][data-uc="68"]{margin:16px 0;} [data-uc="69"][data-uc="69"]{margin-top:14px;border-top:1px solid var(--line);padding-top:14px;} [data-uc="70"][data-uc="70"]{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;} [data-uc="71"][data-uc="71"]{display:inline-flex;align-items:center;gap:9px;min-width:0;font-size:13.5px;line-height:1.45;} [data-uc="72"][data-uc="72"]{flex:none;} [data-uc="73"][data-uc="73"]{margin:0;flex:none;} [data-uc="74"][data-uc="74"]{margin:9px 0 0;} [data-uc="75"][data-uc="75"]{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px;} [data-uc="76"][data-uc="76"]{padding:2px 16px 16px;} [data-uc="77"][data-uc="77"]{text-align:right;} [data-uc="78"][data-uc="78"]{white-space:nowrap;} [data-uc="79"][data-uc="79"]{font-size:11px;font-weight:600;letter-spacing:.03em;} [data-uc="80"][data-uc="80"]{word-break:break-all;} [data-uc="81"][data-uc="81"]{text-align:right;font-variant-numeric:tabular-nums;} [data-uc="82"][data-uc="82"]{gap:8px;} [data-uc="83"][data-uc="83"]{align-self:end;} [data-uc="84"][data-uc="84"]{text-align:center;} /* F2: version badge + SIM-brand swatch (were inline styles in PHP strings) */ .rt-version-badge{display:inline-block;font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;opacity:.5;letter-spacing:.02em;vertical-align:middle} .sim-brand.brand-hologram{--brand:#6d4bd6} .sim-brand.brand-1nce{--brand:#00b3a4} .sim-brand.brand-other{--brand:#64748b} /* F2: asset-detail panel (were inline styles in app.js popup HTML) */ .stat.stat-full{grid-column:1/-1} .stat-value.sv16{font-size:16px} .stat-value.sv15{font-size:15px} /* ── Engine / reefer run-status "check-engine" icon (device_health.php dh_ignition; status bit 19, field-verified 2026-08-07). Green = running, gray = off, faint = no data. Shared admin + customer. ── */ .dh-eng{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:12.5px;white-space:nowrap;line-height:1} .dh-eng .dh-eng-ico{flex:0 0 auto} .dh-eng-on{color:#12a150} .dh-eng-off{color:#8a94a6} .dh-eng-na{color:var(--line,#c7ccd6)} .dh-eng b{font-weight:600} /* "opt-in" tag on the Account alert-preferences rows (engine on/off, low source voltage) — these alerts are default-off (§064) and only fire once the customer enables them here. */ .acct-optin{display:inline-block;margin-left:6px;font-size:10px;font-weight:600;text-transform:uppercase; letter-spacing:.04em;color:var(--muted,#667);border:1px solid var(--line,#d0d5dd);border-radius:5px;padding:0 5px;vertical-align:middle}