/* ========================================================================== Design tokens / theming -------------------------------------------------------------------------- The :root palette below is the DARK theme and holds the exact values the dashboard shipped with, so `data-theme="dark"` (and the no-attribute default the boot script sets) renders pixel-identical to before. Every colour the app paints now flows through a token here — no hardcoded hex/rgba lives in the component rules — which is what lets the light palette further down override the whole surface cleanly. Theme is selected by a `data-theme` attribute on , set before first paint by the inline boot script in index.html/setup.html (stored choice, else prefers-color-scheme). The header toggle flips it and persists to localStorage. ======================================================================== */ :root { --dashboard-sticky-offset: 4rem; --bg: #0e1116; --panel: #161b22; --panel-2: #1c232d; --border: #2a323d; --text: #e6edf3; --muted: #8b949e; --accent: #2f81f7; --accent-bg: rgba(47, 129, 247, 0.14); --accent-border: rgba(47, 129, 247, 0.5); --ok: #2ea043; --ok-bg: rgba(46, 160, 67, 0.14); --ok-border: rgba(46, 160, 67, 0.5); --ok-glow: rgba(46, 160, 67, 0.18); --warning: #d29922; --warning-bg: rgba(210, 153, 34, 0.14); --warning-border: rgba(210, 153, 34, 0.5); --danger: #f85149; --danger-bg: rgba(248, 81, 73, 0.14); --danger-border: rgba(248, 81, 73, 0.55); --off: #6e7681; --muted-bg: rgba(139, 148, 158, 0.14); --on-accent: #ffffff; /* Device-screen letterbox stays near-black in both themes (like a video player) — the live/tile canvas shows the real screen; only the bars show. */ --screen-bg: #000000; --overlay-stripe: rgba(255, 255, 255, 0.03); --backdrop: rgba(0, 0, 0, 0.6); /* Dark stays intentionally flat: no elevation shadows (identical to before). */ --shadow-sm: none; --shadow-md: none; } /* Light theme — hand-tuned (GitHub-light inspired), not an inversion. Surfaces are white-on-cool-gray with real elevation, and every status hue is re-picked to clear WCAG AA contrast on a light background rather than reusing the dark hues (which would be too bright/low-contrast on white). */ :root[data-theme="light"] { --bg: #eef1f5; --panel: #ffffff; --panel-2: #f2f4f8; --border: #d5dbe3; --text: #1a1f27; --muted: #59616d; --accent: #0b6bd6; --accent-bg: rgba(11, 107, 214, 0.10); --accent-border: rgba(11, 107, 214, 0.45); --ok: #1a7f37; --ok-bg: rgba(26, 127, 55, 0.12); --ok-border: rgba(26, 127, 55, 0.42); --ok-glow: rgba(26, 127, 55, 0.20); --warning: #9a6700; --warning-bg: rgba(154, 103, 0, 0.12); --warning-border: rgba(154, 103, 0, 0.42); --danger: #cf222e; --danger-bg: rgba(207, 34, 46, 0.10); --danger-border: rgba(207, 34, 46, 0.42); --off: #656d76; --muted-bg: rgba(101, 109, 118, 0.12); --on-accent: #ffffff; --overlay-stripe: rgba(255, 255, 255, 0.04); --backdrop: rgba(27, 31, 39, 0.38); --shadow-sm: 0 1px 2px rgba(27, 31, 39, 0.06), 0 1px 3px rgba(27, 31, 39, 0.05); --shadow-md: 0 4px 12px rgba(27, 31, 39, 0.10); } * { box-sizing: border-box; } /* Baseline visible focus for keyboard users on the interactive elements that otherwise had none — theme-aware ring, never removed by hover. Components with their own focus treatment (cards, tiles, live canvas) keep theirs. */ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, .navbtn:focus-visible, .seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); } .hidden { display: none !important; } .muted { color: var(--muted); } .error { color: var(--danger); min-height: 1.2em; margin: 0.5rem 0 0; } button { background: var(--accent); color: var(--on-accent); border: 1px solid transparent; border-radius: 8px; padding: 0.55rem 0.85rem; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: filter .12s, background-color .12s, border-color .12s, transform .04s; } button.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); font-weight: 400; } button:hover { filter: brightness(1.08); } .link-button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 8px; padding: 0.55rem 0.85rem; font-size: 0.9rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: filter .12s, background-color .12s, border-color .12s, transform .04s; } .link-button.ghost { background: transparent; border-color: var(--border); color: var(--text); font-weight: 400; } .link-button:hover { filter: brightness(1.08); } /* Ghost buttons read better with a surface tint on hover than a brightness shift (transparent + brightness does nothing on the text alone). */ button.ghost:hover { filter: none; background: var(--panel-2); border-color: var(--muted); } .link-button.ghost:hover { filter: none; background: var(--panel-2); border-color: var(--muted); } button:active, .link-button:active { transform: translateY(0.5px); } input, textarea, select { transition: border-color .12s, box-shadow .12s; } input:disabled, textarea:disabled, select:disabled { cursor: not-allowed; opacity: 0.65; } input { width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 0.6rem 0.7rem; font-size: 0.95rem; } input:hover, textarea:hover, select:hover { border-color: var(--muted); } /* Focus: accent border + soft ring (in addition to the baseline :focus-visible outline, which covers keyboard nav) so text fields read as clearly active. */ input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); outline: none; } /* Login */ .login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; } .login-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; width: min(380px, 92vw); display: flex; flex-direction: column; gap: 0.75rem; box-shadow: var(--shadow-md); } .login-card h1 { margin: 0; font-size: 1.4rem; } .login-card p { margin: 0; } .login-card label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); } /* Top bar */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); background: var(--panel); position: sticky; top: 0; z-index: 5; } /* On phones the sticky header wastes scarce vertical space — let it scroll away with the page. (Confirmed outstanding field issue.) */ @media (max-width: 430px) { .topbar { position: static; } } .brand { font-weight: 600; } .topbar-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; min-width: 0; } #who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Theme toggle: square, icon-sized ghost button. Font-size sets the glyph size. */ .icon-btn { padding: 0.4rem 0.55rem; line-height: 1; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; } /* View nav (Fleet / Wall) */ .viewnav { display: inline-flex; gap: 0.25rem; margin-left: 0.75rem; } .navbtn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); padding: 0.4rem 0.85rem; font-size: 0.9rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: filter .12s, background-color .12s, border-color .12s, transform .04s; } .navbtn:hover { filter: none; background: var(--panel-2); color: var(--text); } .navbtn:active { transform: translateY(0.5px); } .navbtn.active { color: var(--text); border-color: var(--accent); background: var(--accent-bg); } @media (max-width: 720px) { :root { --dashboard-sticky-offset: 6.75rem; } .topbar { flex-wrap: wrap; align-items: flex-start; } .viewnav { margin-left: 0; } .topbar-actions { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; margin-left: 0; } #who { flex: 1 1 auto; max-width: 100%; } } @media (max-width: 430px) { :root { --dashboard-sticky-offset: 0rem; } .viewnav { flex: 1 1 100%; } .navbtn { flex: 1 1 0; padding-inline: 0.5rem; } #who { flex-basis: 100%; } } .fleet, .detail, .wall, .settings { padding: 1rem; margin: 0 auto; } .fleet, .detail, .settings { max-width: 1200px; } .wall { max-width: 1500px; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.35rem 0.75rem; flex-wrap: wrap; margin-bottom: 0.6rem; } .section-head h2 { min-width: 0; margin: 0; font-size: 1.25rem; font-weight: 650; letter-spacing: 0; } .section-head .muted { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; } /* Status dot */ .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--off); margin-right: 0.4rem; } .dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-glow); } .dot.off { background: var(--off); } /* Fleet grid — auto-fill keeps cards a comfortable width whether the fleet is 2 devices or 18+ (rows just wrap); the min tightens a touch on narrow viewports. */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.9rem; } @media (max-width: 520px) { .grid { grid-template-columns: 1fr; } } .card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem 0.95rem; cursor: default; box-shadow: var(--shadow-sm); position: relative; transition: border-color .15s, box-shadow .15s, transform .1s; } .card:hover, .card:focus-visible, .card:focus-within { border-color: var(--accent); outline: none; box-shadow: var(--shadow-md); transform: translateY(-2px); } .card:active { transform: translateY(0); } .card-link { display: block; color: inherit; text-decoration: none; border-radius: 8px; cursor: pointer; } .card-link:focus-visible { outline-offset: 4px; } .card-selectable .card-head { padding-left: 1.65rem; } .card-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; } .card-title { font-weight: 600; font-size: 0.98rem; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-state { margin-left: auto; font-size: 0.75rem; color: var(--muted); } .card-meta { display: grid; grid-template-columns: auto 1fr; gap: 0.22rem 0.6rem; margin: 0; font-size: 0.85rem; } .card-meta dt { color: var(--muted); } .card-meta dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; } /* Detail */ .detail-header { margin: 0.75rem 0 1rem; } .detail-header h2 { margin: 0 0 0.25rem; } .detail-section-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin: -0.35rem 0 0.75rem; padding: 0.5rem 0; position: sticky; top: var(--dashboard-sticky-offset); z-index: 4; background: var(--bg); border-bottom: 1px solid var(--border); } .detail-section-menu { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.85rem; min-width: 0; } .detail-section-menu select { min-width: 12rem; max-width: min(18rem, 100%); background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.5rem; font-size: 0.85rem; } .detail-section-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; } @media (max-width: 520px) { .detail-section-controls { align-items: stretch; } .detail-section-menu { flex: 1 1 100%; } .detail-section-menu select { flex: 1 1 auto; min-width: 0; } .detail-section-buttons { width: 100%; } .detail-section-buttons button { flex: 1 1 0; } } .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 1rem; overflow: hidden; box-shadow: var(--shadow-sm); } .detail-panel { scroll-margin-top: calc(var(--dashboard-sticky-offset) + 4.75rem); } .panel-head { padding: 0.7rem 0.95rem; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 0.95rem; letter-spacing: 0; } details.panel > summary.panel-head { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; list-style: none; } details.panel > summary.panel-head::-webkit-details-marker { display: none; } details.panel > summary.panel-head::before { content: "+"; width: 1.15rem; height: 1.15rem; border: 1px solid var(--border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--muted); background: var(--panel-2); font-size: 0.82rem; line-height: 1; } details.panel[open] > summary.panel-head::before { content: "-"; color: var(--text); border-color: var(--accent); } details.panel:not([open]) > summary.panel-head { border-bottom: 0; } details.panel > summary.panel-head:hover { background: var(--panel-2); } details.panel > summary.live-head { justify-content: flex-start; } details.panel > summary.live-head .live-status { margin-left: auto; } .table-wrap { padding: 0.25rem 0.85rem 0.85rem; overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); white-space: nowrap; } th { color: var(--muted); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; position: sticky; top: 0; background: var(--panel); } tbody tr { transition: background-color .1s; } tbody tr:hover td { background: var(--panel-2); } tr:last-child td { border-bottom: none; } .empty { padding: 0.85rem; } @media (max-width: 640px) { #heartbeats, #commands { overflow-x: visible; } .detail-history-table, .detail-history-table tbody, .detail-history-table tr, .detail-history-table td { display: block; width: 100%; } .detail-history-table thead { display: none; } .detail-history-table tr { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.75rem; background: var(--panel); overflow: hidden; } .detail-history-table td { display: grid; grid-template-columns: minmax(5.75rem, 34%) minmax(0, 1fr); gap: 0.75rem; align-items: start; border-bottom: 1px solid var(--border); white-space: normal; padding: 0.65rem 0.75rem; word-break: break-word; } .detail-history-table td:last-child { border-bottom: 0; } .detail-history-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } } /* Fleet empty state: a centred, dashed placeholder rather than a bare line, so "no devices" reads as an intentional state and not a load failure. */ .grid > p.empty { grid-column: 1 / -1; text-align: center; padding: 2.5rem 1rem; border: 1px dashed var(--border); border-radius: 12px; margin: 0; } /* Loading skeleton (first fleet load): pulsing placeholder cards. Respects prefers-reduced-motion (falls back to a static tint). */ .card-skeleton { cursor: default; pointer-events: none; } .card-skeleton:hover { border-color: var(--border); box-shadow: var(--shadow-sm); transform: none; } .sk { height: 0.75rem; border-radius: 6px; background: var(--muted-bg); margin-bottom: 0.55rem; animation: sk-pulse 1.2s ease-in-out infinite; } .sk-title { height: 1rem; width: 55%; margin-bottom: 0.85rem; } .sk-line { width: 100%; } .sk-short { width: 40%; margin-bottom: 0; } @keyframes sk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .sk { animation: none; opacity: 0.7; } } /* Live screen */ .live-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .live-status { font-size: 0.8rem; font-weight: 400; } .live-status.live-ok { color: var(--ok); } .live-body { padding: 1rem; } .live-controls { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; } .live-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; min-width: 0; } /* Transport segmented control */ .transport { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .transport .seg { display: flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.7rem; font-size: 0.85rem; cursor: pointer; user-select: none; border-right: 1px solid var(--border); } .transport .seg span { min-width: 0; overflow-wrap: anywhere; } .transport .seg:last-child { border-right: none; } .transport .seg input { width: auto; margin: 0; accent-color: var(--accent); } .transport .seg:has(input:checked) { background: var(--accent-bg); color: var(--accent); } .transport .seg-disabled { color: var(--muted); cursor: not-allowed; } .transport .seg-disabled em { font-style: normal; font-size: 0.7rem; opacity: 0.8; } /* View size row */ .live-size { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: -0.25rem 0 0.85rem; font-size: 0.85rem; } .seg-btn { background: transparent; border: 1px solid var(--border); color: var(--text); font-size: 0.82rem; padding: 0.4rem 0.7rem; } .zoom-label { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); } .zoom-label input[type="range"] { width: 140px; accent-color: var(--accent); padding: 0; } .codec-tag { font-size: 0.78rem; padding: 0.1rem 0.45rem; border: 1px solid var(--border); border-radius: 999px; } .size-hint { font-size: 0.78rem; } @media (max-width: 520px) { .live-controls { align-items: stretch; } .transport { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .transport .seg { justify-content: center; padding-inline: 0.45rem; text-align: center; } .live-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .live-actions button { width: 100%; min-height: 2.6rem; white-space: normal; } .live-size { align-items: stretch; } .zoom-label { flex: 1 1 100%; } .zoom-label input[type="range"] { flex: 1; min-width: 0; width: auto; } } /* Screen surface — resizable panel (drag the lower-right corner) */ .live-screen-wrap { position: relative; border: 1px solid var(--border); border-radius: 10px; background: var(--screen-bg); display: flex; align-items: center; justify-content: center; overflow: auto; resize: vertical; min-height: 300px; height: 62vh; max-height: 88vh; } /* When zoomed past fit, anchor top-left so the whole image is scroll-reachable (centred flex items clip their overflow and can't be scrolled into view). */ .live-screen-wrap.zoomed { align-items: flex-start; justify-content: flex-start; } /* CONTRACT (tap calibration): keep object-fit:contain and NO padding/border on the canvas, so its border-box (getBoundingClientRect) equals the video's contain box. deviceCoordsFromClient() in public/coords.js assumes this; changing it (padding, border, or object-fit:cover/fill) would silently miscalibrate every remote tap. */ .live-canvas { display: none; max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; image-rendering: auto; } .live-screen-wrap.zoomed .live-canvas { flex: 0 0 auto; } .live-canvas--active { display: block; } .live-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; background: repeating-linear-gradient( 45deg, transparent, transparent 10px, var(--overlay-stripe) 10px, var(--overlay-stripe) 20px); } .live-overlay p { max-width: 46ch; margin: 0; } /* Remote control (Phase 2) */ #control-toggle.control-on { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); } .control-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin: -0.25rem 0 0.85rem; } .nav-buttons { display: flex; gap: 0.4rem; } .nav-buttons button { font-size: 0.8rem; padding: 0.4rem 0.7rem; } .text-send { display: flex; gap: 0.4rem; flex: 1 1 16rem; min-width: 14rem; } .text-send input { flex: 1; min-width: 0; font-size: 0.85rem; } .text-send button { font-size: 0.8rem; padding: 0.4rem 0.7rem; white-space: nowrap; } .control-hint { font-size: 0.8rem; } .control-hint.control-warn { color: var(--danger); } /* Cursor cue: the canvas is interactive only while controlling. */ .live-canvas.controlling { cursor: crosshair; touch-action: none; } .live-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Pop-out focused view: /device/:id/live/popout shows just the device header + live panel — the rest of the dashboard chrome is hidden. The server still enforces auth/scopes; this is presentation only. */ .popout .topbar, .popout #back-btn, .popout #popout-btn, .popout .detail-section-controls, .popout .detail > .panel:not(.live-panel) { display: none; } .popout .detail { padding-top: 0.5rem; } .popout .rename-input { background: transparent; border-color: transparent; padding-inline: 0; box-shadow: none; } .popout .rename-input:focus { border-color: transparent; box-shadow: none; } /* The build-identity footer is chrome — hidden in the focused pop-out window. */ .popout .app-footer { display: none; } /* Build-identity footer: unobtrusive, centred, on every view for every role. */ .app-footer { margin-top: 1.5rem; padding: 0.75rem 1rem 1.25rem; text-align: center; font-size: 0.72rem; border-top: 1px solid var(--border); } /* ---- device management ------------------------------------------------ */ button.danger { background: var(--danger); color: var(--on-accent); } button:disabled { opacity: 0.5; cursor: not-allowed; filter: none; } /* Fleet overview counts */ .overview { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.25rem 0 0.85rem; } .stat { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.9rem; display: flex; flex-direction: column; min-width: 96px; box-shadow: var(--shadow-sm); } .stat-num { font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: 0; font-variant-numeric: tabular-nums; } .stat-label { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.1rem; } .stat.online .stat-num { color: var(--ok); } .stat.offline .stat-num { color: var(--off); } .stat.archived .stat-num { color: var(--muted); } /* Toolbar */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-bottom: 0.75rem; } .toolbar .search { width: auto; flex: 1 1 220px; min-width: 180px; } .tb-field { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); } .tb-field select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.5rem; font-size: 0.85rem; } .tb-check { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); } .tb-check input { width: auto; } .toolbar-status { flex: 1 1 12rem; min-width: 10rem; font-size: 0.82rem; } .status-error { color: var(--danger); } /* Bulk action bar (feature k) */ .bulkbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: var(--panel); border: 1px solid var(--accent); border-radius: 10px; padding: 0.5rem 0.85rem; margin-bottom: 0.75rem; flex-wrap: wrap; } .bulk-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-left: auto; } #bulk-status { color: var(--ok); } /* Bulk group/tags dialog (feature k): the clear-group checkbox sits inline, unlike the stacked text-input labels around it. */ .dialog form label.og-inline { flex-direction: row; align-items: center; gap: 0.4rem; } .dialog form label.og-inline input { width: auto; } /* Status badges */ .badge { margin-left: auto; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.14rem 0.5rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); } .badge.online { color: var(--ok); border-color: var(--ok-border); background: var(--ok-bg); } .badge.offline { color: var(--off); } .badge.archived { color: var(--muted); background: var(--muted-bg); } /* Cards: checkbox + archived dimming */ .card-check { width: auto; margin: 0; accent-color: var(--accent); flex: 0 0 auto; position: absolute; top: 1rem; left: 0.95rem; z-index: 1; } .card-check.hidden { position: static; } .card-archived { opacity: 0.62; } .card-archived:hover, .card-archived:focus-visible { opacity: 1; } /* Detail header: inline rename + actions */ .detail-title-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .rename-input { width: auto; flex: 1 1 220px; min-width: 160px; font-size: 1.05rem; font-weight: 600; } .detail-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; } /* Device info grid */ .device-info { padding: 0.85rem; } .info-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; align-items: start; } .info-group { min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); padding: 0.7rem; } .info-group-title { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.55rem; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; list-style: none; } .info-group-title::-webkit-details-marker { display: none; } .info-group-title::before { content: "-"; width: 1rem; height: 1rem; border: 1px solid var(--border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--panel); color: var(--text); font-size: 0.72rem; line-height: 1; } details.info-group:not([open]) .info-group-title { margin-bottom: 0; } details.info-group:not([open]) .info-group-title::before { content: "+"; color: var(--muted); } .info-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; margin: 0; font-size: 0.88rem; } .info-grid dt { color: var(--muted); } .info-grid dd { margin: 0; word-break: break-all; } @media (max-width: 720px) { .info-groups { grid-template-columns: 1fr; } } /* Notes */ .notes-body { padding: 0.85rem; } .notes { width: 100%; resize: vertical; font-family: inherit; font-size: 0.9rem; } .notes-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; } /* Health status badges (feature e) */ .hbadge { margin-left: auto; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.14rem 0.5rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; } .hbadge.h-ok { color: var(--ok); border-color: var(--ok-border); background: var(--ok-bg); } .hbadge.h-warning { color: var(--warning); border-color: var(--warning-border); background: var(--warning-bg); } .hbadge.h-critical { color: var(--danger); border-color: var(--danger-border); background: var(--danger-bg); } .hbadge.h-offline { color: var(--off); } /* Health stat chips in the overview */ .stat.h-ok .stat-num { color: var(--ok); } .stat.h-warn .stat-num { color: var(--warning); } .stat.h-crit .stat-num { color: var(--danger); } /* Group / tag chips (feature h) */ .card-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.55rem; } /* Readiness / consent indicators (feature l): per-capability pills on fleet cards, a single warn badge on wall tiles (only when something is missing). */ .ready-row { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.55rem; } .rpill { font-size: 0.68rem; padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); cursor: default; } .rpill.ok { color: var(--ok); border-color: var(--ok-border); } .rpill.no { color: var(--danger); border-color: var(--danger-border); } .rpill.warn { color: var(--warning); border-color: var(--warning-border); } .tile-ready { flex: 0 0 auto; font-size: 0.68rem; color: var(--danger); white-space: nowrap; border: 1px solid var(--danger-border); border-radius: 999px; padding: 0 0.35rem; } .chip { font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); } .chip.group { border-color: var(--accent-border); color: var(--accent); } /* Fleet wall (feature b) */ .wall-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-bottom: 0.85rem; } .wall-note { font-size: 0.8rem; flex: 1 1 260px; } .wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 0.7rem; } /* Operator-selectable tile size (medium is the default above). */ .wall-grid[data-size="small"] { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } .wall-grid[data-size="large"] { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .tile { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .1s; } .tile:hover, .tile:focus-visible { border-color: var(--accent); outline: none; box-shadow: var(--shadow-md); transform: translateY(-2px); } .tile-screen { position: relative; background: var(--screen-bg); aspect-ratio: 9 / 16; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Fill the tile box (object-fit:contain preserves aspect) so bigger tiles show a bigger stream, not empty space around a fixed-size thumbnail. */ .tile-canvas { width: 100%; height: 100%; object-fit: contain; display: none; } .tile-canvas.active { display: block; } .tile-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.5rem; font-size: 0.72rem; color: var(--muted); } .tile-foot { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.25rem 0.35rem; padding: 0.4rem 0.5rem; } .tile-name { font-size: 0.78rem; font-weight: 600; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; flex: 1 1 5.5rem; } .tile-batt { font-size: 0.72rem; color: var(--muted); flex: 0 0 auto; margin-left: auto; } .tile-dot { margin-right: 0; flex: 0 0 auto; } .tile.tile-warning { border-color: var(--warning-border); } .tile.tile-critical { border-color: var(--danger-border); } /* Backup & restore (backlog): the restore file-input dressed as a ghost button */ .restore-label { display: inline-block; background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 0.55rem 0.8rem; font-size: 0.9rem; cursor: pointer; } .restore-label:hover { background: var(--panel-2); border-color: var(--muted); } /* Macros / workflows (feature d) */ .macros-body { padding: 0.85rem; display: flex; flex-direction: column; gap: 0.85rem; } .macro-run-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .macro-send { display: flex; flex-direction: column; gap: 0.6rem; border-top: 1px solid var(--border); padding-top: 0.85rem; } .macro-send textarea { width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 0.6rem 0.7rem; font-size: 0.9rem; resize: vertical; } .macro-sub { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 0.6rem; } .macro-note { margin: 0; font-size: 0.78rem; } /* Remote agent config (feature i) */ .config-body { padding: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; } .config-body .org-field input[type="number"] { max-width: 180px; } .config-note { flex-basis: 100%; margin: 0; font-size: 0.78rem; } /* Organisation editor (feature h) */ .org-body { padding: 0.85rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; } .org-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); flex: 1 1 220px; } .org-field input { font-size: 0.9rem; } .org-actions { display: flex; align-items: center; gap: 0.6rem; } /* Settings page (feature o): role-aware account / users / activity / about */ .settings-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border); } .settings-tab { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.12rem; background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 0.45rem 0.75rem; border-radius: 8px; font-size: 0.86rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: filter .12s, background-color .12s, border-color .12s; } .settings-tab-main { color: var(--text); font-weight: 600; } .settings-tab-note { font-size: 0.72rem; color: var(--muted); } .settings-tab:hover { filter: none; background: var(--panel-2); color: var(--text); } .settings-tab.active, .settings-tab[aria-selected="true"] { background: var(--accent-bg); border-color: var(--accent); color: var(--text); } .settings-tab.active .settings-tab-note, .settings-tab[aria-selected="true"] .settings-tab-note { color: var(--accent); } @media (min-width: 900px) { .settings { display: grid; grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr); align-items: start; column-gap: 1rem; } .settings > .section-head { grid-column: 1 / -1; } .settings-tabs { grid-column: 1; flex-direction: column; flex-wrap: nowrap; gap: 0.4rem; margin: 0; padding: 0 0.75rem 0 0; border-right: 1px solid var(--border); border-bottom: 0; position: sticky; top: calc(var(--dashboard-sticky-offset) + 0.75rem); max-height: calc(100vh - var(--dashboard-sticky-offset) - 1.5rem); overflow-y: auto; } .settings-tab { width: 100%; align-items: flex-start; justify-content: center; text-align: left; } .settings > .settings-panel, .settings > .settings-section { grid-column: 2; min-width: 0; } } .settings-section { margin-top: 0; } .section-head.sub { padding-top: 0; } .section-head.sub h3 { min-width: 0; margin: 0; font-size: 1rem; } .account-body, .about-body { padding: 0.85rem; display: flex; flex-direction: column; gap: 0.75rem; } .account-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; font-size: 0.9rem; } .account-grid dt { color: var(--muted); } .account-grid dd { margin: 0; word-break: break-word; } .account-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .about-body p { margin: 0; line-height: 1.5; } @media (max-width: 520px) { .settings-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .settings-tab { width: 100%; min-height: 3.15rem; padding-inline: 0.45rem; } } /* One-time API-token reveal: a highlighted, easy-to-copy plaintext block. */ .apitoken-reveal { border: 1px solid var(--ok-border); background: var(--ok-bg); border-radius: 8px; padding: 0.6rem 0.75rem; margin: 0.5rem 0; } .apitoken-value { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; word-break: break-all; user-select: all; margin-top: 0.3rem; } /* Users / access management (feature f) */ .users-note { margin: 0 0 0.85rem; font-size: 0.85rem; } .user-create { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; padding: 0.85rem; } .uc-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--muted); } .uc-field input { font-size: 0.9rem; } .role-select, .uc-field select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.5rem; font-size: 0.85rem; } button.small { font-size: 0.78rem; padding: 0.35rem 0.6rem; margin-right: 0.35rem; } .users-list-table .user-email-cell { min-width: 12rem; white-space: normal; word-break: break-word; } .users-list-table .role-select { max-width: 100%; } .user-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .user-actions .small { margin-right: 0; } #users-table td:last-child { white-space: normal; } @media (max-width: 640px) { #users-table { overflow-x: visible; } .users-list-table, .users-list-table tbody, .users-list-table tr, .users-list-table td { display: block; width: 100%; } .users-list-table thead { display: none; } .users-list-table tr { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.75rem; background: var(--panel); overflow: hidden; } .users-list-table td { display: grid; grid-template-columns: minmax(5.75rem, 34%) minmax(0, 1fr); gap: 0.75rem; align-items: center; border-bottom: 1px solid var(--border); white-space: normal; padding: 0.65rem 0.75rem; } .users-list-table td:last-child { border-bottom: 0; } .users-list-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .users-list-table .user-actions-cell { display: block; } .users-list-table .user-actions-cell::before { display: block; margin-bottom: 0.45rem; } .users-list-table .user-actions button { flex: 1 1 8.5rem; } } /* Activity / audit log (feature g) */ .activity-more { margin-top: 0.75rem; text-align: center; } .activity-list-table .activity-actor-cell, .activity-list-table .activity-target-cell { white-space: normal; word-break: break-word; } #activity-table td:last-child { white-space: normal; word-break: break-word; max-width: 28rem; font-size: 0.8rem; } #activity-table .activity-details-cell { min-width: 16rem; } .activity-details { display: flex; flex-wrap: wrap; gap: 0.35rem; } .activity-detail { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--panel-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .activity-detail-key { padding: 0.14rem 0.4rem; color: var(--muted); background: var(--muted-bg); border-right: 1px solid var(--border); flex: 0 0 auto; } .activity-detail-sep { padding-left: 0.35rem; color: var(--muted); flex: 0 0 auto; } .activity-detail-value { padding: 0.14rem 0.45rem 0.14rem 0.2rem; overflow: hidden; text-overflow: ellipsis; min-width: 0; } @media (max-width: 700px) { #activity-table { overflow-x: visible; } .activity-list-table, .activity-list-table tbody, .activity-list-table tr, .activity-list-table td { display: block; width: 100%; } .activity-list-table thead { display: none; } .activity-list-table tr { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.75rem; background: var(--panel); overflow: hidden; } .activity-list-table td { display: grid; grid-template-columns: minmax(5.75rem, 34%) minmax(0, 1fr); gap: 0.75rem; align-items: start; border-bottom: 1px solid var(--border); white-space: normal; padding: 0.65rem 0.75rem; } .activity-list-table td:last-child { border-bottom: 0; } .activity-list-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } #activity-table .activity-details-cell { display: block; min-width: 0; max-width: none; } #activity-table .activity-details-cell::before { display: block; margin-bottom: 0.45rem; } } /* Dialog forms (self password change) */ .dialog form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.6rem; } .setup-hint { font-size: 0.78rem; margin: -0.4rem 0 0.2rem; } /* Delete confirmation dialog */ .dialog-backdrop { position: fixed; inset: 0; background: var(--backdrop); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; } .dialog { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 1.4rem; width: min(440px, 94vw); display: flex; flex-direction: column; gap: 0.6rem; box-shadow: var(--shadow-md); } .dialog h3 { margin: 0; font-size: 1.15rem; letter-spacing: 0; } .dialog p { margin: 0; } .dialog-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.4rem; } /* Honour reduced-motion: keep focus/state changes but drop the hover lifts and any transform/animation-driven motion. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .card:hover, .card:focus-visible, .tile:hover, .tile:focus-visible { transform: none; } }