/* Kill theme chrome above the dashboard on mobile so the SPA sits flush with the top of the viewport (the shortcode tags via the hp-ai-dashboard-page class filter). Scope all overrides to that class so we don't touch pages that don't host the shortcode. */ @media (max-width: 900px) { body.hp-ai-dashboard-page .entry-title, body.hp-ai-dashboard-page .page-title, body.hp-ai-dashboard-page .entry-header, body.hp-ai-dashboard-page .et_post_meta_wrapper { display: none !important; } body.hp-ai-dashboard-page .entry-content, body.hp-ai-dashboard-page article .entry-content, body.hp-ai-dashboard-page .et_pb_section:first-of-type, body.hp-ai-dashboard-page .et_pb_row:first-of-type, body.hp-ai-dashboard-page #main-content, body.hp-ai-dashboard-page #page, body.hp-ai-dashboard-page .site-content, body.hp-ai-dashboard-page main { padding-top: 0 !important; margin-top: 0 !important; } } /* HP AI Dashboard — dark theme matching the camera's detection-plot dashboard: deep indigo base with Acaris green accent, soft ambient radial glows, dark translucent cards. */ #hp-ai-dashboard-root { --hp-bg: #060718; --hp-bg-soft: #0b0e2b; --hp-surface: rgba(16, 18, 52, 0.78); --hp-text: #EDF9FF; --hp-muted: #8890b8; --hp-faint: #6a70a8; --hp-line: rgba(42, 42, 130, 0.6); --hp-accent: #00B488; --hp-accent-soft: rgba(0, 180, 136, 0.15); --hp-ink: #060718; --hp-ok: #00B488; --hp-warn: #f4c430; --hp-err: #b01e23; --hp-radius: 18px; --hp-radius-sm: 12px; --hp-pad: 18px; --hp-shadow: 0 4px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05); --hp-shadow-lg: 0 10px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,180,136,0.3), inset 0 1px 0 rgba(255,255,255,0.08); font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--hp-text); background: radial-gradient(ellipse at 20% 20%, rgba(29,112,183,0.12) 0%, transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(0,180,136,0.08) 0%, transparent 60%), radial-gradient(ellipse at 50% 50%, rgba(42,42,130,0.15) 0%, transparent 70%), var(--hp-bg); padding: 24px; border-radius: 24px; font-size: 14px; line-height: 1.45; box-shadow: inset 0 0 0 1px rgba(42,42,130,0.25); /* Crucial for narrow viewports: when the surrounding theme container is narrower than the dashboard's content, every flex/grid child would otherwise blow the layout out to the right (default min-width of grid/flex items is auto = content size). Constraining the root and adding min-width:0 to children below contains the overflow. Use `clip` not `hidden` — `overflow-x: hidden` implicitly promotes overflow-y to `auto` (per CSS spec), turning the root into a scroll container that on mobile steals touch-scroll from the page on content-heavy tabs like Quick Settings. `clip` hides the overflow without creating a scroll container. */ box-sizing: border-box; max-width: 100%; overflow-x: clip; } #hp-ai-dashboard-root *, #hp-ai-dashboard-root *::before, #hp-ai-dashboard-root *::after { box-sizing: border-box; } /* ---- light theme ---- Flips the palette via CSS vars + tweaks a handful of hard-coded dark-only decorations. Toggled by the SPA via the .hp-theme-light class on #hp-ai-dashboard-root; default (no class) is the dark theme. */ #hp-ai-dashboard-root.hp-theme-light { --hp-bg: #f2f5f9; --hp-bg-soft: #e8edf4; --hp-surface: #ffffff; --hp-text: #111827; --hp-muted: #475569; --hp-faint: #64748b; --hp-line: #e2e8f0; --hp-accent: #00967a; --hp-accent-soft: rgba(0, 180, 136, 0.12); --hp-ink: #0f172a; --hp-ok: #059669; --hp-warn: #b45309; --hp-err: #b91c1c; --hp-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.06); --hp-shadow-lg: 0 2px 4px rgba(15,23,42,0.06), 0 14px 36px rgba(15,23,42,0.08), 0 0 0 1px rgba(0,180,136,0.2); background: radial-gradient(ellipse at 20% 20%, rgba(0,180,136,0.06) 0%, transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(29,112,183,0.05) 0%, transparent 60%), var(--hp-bg); box-shadow: inset 0 0 0 1px rgba(15,23,42,0.04); } /* Light-theme-specific overrides for decorations that use literal colors baked for the dark palette. */ #hp-ai-dashboard-root.hp-theme-light .hp-header-logo { box-shadow: 0 0 0 1px rgba(0,180,136,0.25), 0 0 10px rgba(0,180,136,0.15); } #hp-ai-dashboard-root.hp-theme-light .hp-header-logout { background: #ffffff; color: var(--hp-text); border-color: var(--hp-line); } #hp-ai-dashboard-root.hp-theme-light .hp-header-logout:hover { background: var(--hp-accent-soft); border-color: var(--hp-accent); box-shadow: 0 0 10px rgba(0,180,136,0.25); } #hp-ai-dashboard-root.hp-theme-light .hp-pill-ok { background: #d1fae5; color: #047857; } #hp-ai-dashboard-root.hp-theme-light .hp-pill-warn { background: #fef3c7; color: #b45309; } #hp-ai-dashboard-root.hp-theme-light .hp-pill-err { background: #fee2e2; color: #b91c1c; } #hp-ai-dashboard-root.hp-theme-light .hp-pill-muted { background: #eef0f4; color: #475569; } #hp-ai-dashboard-root.hp-theme-light .hp-quick-pill[data-state="saving"] { background: rgba(0,180,136,0.12); color: #047857; } #hp-ai-dashboard-root.hp-theme-light .hp-quick-pill[data-state="saved"] { background: #d1fae5; color: #047857; } #hp-ai-dashboard-root.hp-theme-light .hp-quick-pill[data-state="error"] { background: #fee2e2; color: #b91c1c; } #hp-ai-dashboard-root.hp-theme-light .hp-quick-warning { background: #fef3c7; color: #92400e; } #hp-ai-dashboard-root.hp-theme-light .hp-adminbar { background: #fef3c7; border-color: #fcd34d; } #hp-ai-dashboard-root.hp-theme-light .hp-adminbar-done { background: #d1fae5; border-color: #6ee7b7; } #hp-ai-dashboard-root.hp-theme-light .hp-adminbar-btn { color: #ffffff; } #hp-ai-dashboard-root.hp-theme-light .hp-adminbar-btn-quiet { background: #ffffff; color: var(--hp-muted); border-color: var(--hp-line); } #hp-ai-dashboard-root.hp-theme-light .hp-toggle-track { background: #cbd5e1; border-color: #e2e8f0; } #hp-ai-dashboard-root.hp-theme-light .hp-text-input:disabled { background: #f8fafc; color: var(--hp-faint); } #hp-ai-dashboard-root.hp-theme-light .hp-footer { border-top-color: var(--hp-line); } #hp-ai-dashboard-root.hp-theme-light .hp-footer-logo { filter: none; opacity: 0.8; } #hp-ai-dashboard-root.hp-theme-light .hp-horse-tile-offline { border-color: rgba(148,163,184,0.6); } #hp-ai-dashboard-root.hp-theme-light .hp-detection-frame, #hp-ai-dashboard-root.hp-theme-light .hp-settings-frame { background: #ffffff; } #hp-ai-dashboard-root.hp-theme-light .hp-live-wrap { background: #0b1220; } /* Messages bell — same 32px circular affordance as the theme/width toggles, with an unread counter pinned to its top-right corner. */ .hp-header-msg { position: relative; appearance: none; -webkit-appearance: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hp-line); background: rgba(42,42,130,0.35); color: var(--hp-text); cursor: pointer; flex-shrink: 0; transition: background .15s ease, border-color .15s ease, color .15s ease; } .hp-header-msg:hover { background: var(--hp-accent-soft); border-color: var(--hp-accent); color: var(--hp-accent); } .hp-header-msg-unread { border-color: var(--hp-accent); color: var(--hp-accent); } .hp-header-msg-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--hp-err); color: #fff; font: 700 10px/17px system-ui, -apple-system, Segoe UI, Roboto, sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--hp-bg); pointer-events: none; } .hp-header-msg-badge.hp-hidden { display: none; } #hp-ai-dashboard-root.hp-theme-light .hp-header-msg { background: #ffffff; } /* Help "?" icon — same 32 px circular affordance as the bell / theme / width buttons. On /hp-help/ this element becomes a "back" arrow, so we share the base styling. */ .hp-header-help { appearance: none; -webkit-appearance: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hp-line); background: rgba(42,42,130,0.35); color: var(--hp-text); text-decoration: none; cursor: pointer; flex-shrink: 0; font-size: 14px; font-weight: 600; transition: background .15s ease, border-color .15s ease, color .15s ease; } .hp-header-help:hover { background: var(--hp-accent-soft); border-color: var(--hp-accent); color: var(--hp-accent); } #hp-ai-dashboard-root.hp-theme-light .hp-header-help { background: #ffffff; } /* Language selector — pill-shaped ---- */ .hp-picker-group { appearance: none; -webkit-appearance: none; border: 1px solid var(--hp-line); background: var(--hp-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238890b8' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right 12px center; background-size: 10px 6px; border-radius: 999px; color: var(--hp-text); padding: 6px 32px 6px 14px; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: border-color .15s ease; min-width: 0; } .hp-picker-group:hover { border-color: var(--hp-accent); } .hp-picker-group:focus { outline: 0; border-color: var(--hp-accent); box-shadow: 0 0 0 3px var(--hp-accent-soft); } /* ---- Collapse / expand toggle ---- Lives at the end of `.hp-picker-summary` so it sits next to the group selector and the chip filters. Sized to match the chips. */ .hp-picker-expand-btn { margin-left: auto; /* push to the far right of the chip bar */ background: var(--hp-surface); border: 1px solid var(--hp-line); border-radius: 999px; color: var(--hp-muted); padding: 6px 14px; font-size: 12px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: color .15s ease, border-color .15s ease, background .15s ease; } .hp-picker-expand-btn:hover { color: var(--hp-text); border-color: var(--hp-accent); background: var(--hp-accent-soft); } .hp-picker-expand-btn[aria-expanded="true"] { color: var(--hp-text); border-color: var(--hp-accent); } /* ---- Picker LARGE mode (no horse selected) ---- Tiles become a responsive grid of card-shaped previews instead of pill rows. Avatar 80px, name + status pill underneath. */ .hp-picker-mode-large .hp-horse-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; overflow: visible; /* override the default horizontal-scroll row */ padding: 4px 2px; width: 100%; } .hp-picker-mode-large .hp-horse-tile { flex-direction: column; align-items: stretch; gap: 12px; border-radius: var(--hp-radius); padding: 16px 16px 14px; } .hp-picker-mode-large .hp-horse-tile .hp-horse-avatar { width: 80px; height: 80px; align-self: center; border-radius: 50%; box-shadow: 0 0 0 4px rgba(0,180,136,0.10); } .hp-picker-mode-large .hp-horse-tile .hp-horse-dot { width: 18px; height: 18px; bottom: 0; right: 4px; border-width: 3px; } .hp-picker-mode-large .hp-horse-meta { align-items: center; text-align: center; max-width: 100%; gap: 6px; } .hp-picker-mode-large .hp-horse-tile .hp-horse-name { font-size: 15px; white-space: normal; /* allow wrapping in the card */ } .hp-picker-mode-large .hp-horse-id { font-size: 11px; } /* Stronger online glow in large mode so it pops at a glance. */ .hp-picker-mode-large .hp-horse-tile-online { border-color: rgba(0,180,136,0.55); box-shadow: 0 0 0 1px rgba(0,180,136,0.25), 0 0 18px rgba(0,180,136,0.18); } /* Heavier offline distinction in large mode — more grayscale, dim, dashed border so even a colorblind user reads "this is not live". */ .hp-picker-mode-large .hp-horse-tile-offline { opacity: 0.45; filter: grayscale(1); border-style: dashed; } /* ---- Status pill (large-mode tiles) ---- Renders below the name, colour-matched to the state. */ .hp-horse-state-pill { display: inline-flex; align-items: center; align-self: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .hp-horse-state-pill.is-online { background: rgba(0,180,136,0.18); color: #2bdfa8; } .hp-horse-state-pill.is-offline { background: rgba(100,116,139,0.18); color: #94a3b8; } .hp-horse-state-pill.is-alarm { background: rgba(176,30,35,0.20); color: #fca5a5; } /* The pill only renders in LARGE picker mode. In COMPACT (pill row) mode the existing dot + state classes already convey the state and the pill would just bloat the tile width. */ .hp-picker-mode-compact .hp-horse-state-pill { display: none; } /* ---- tile sub-line + badges ---------------------------------------- The sub-line (cam_id · last-seen) and the badges row only render in LARGE picker mode. The compact pill row already shows the name + the status dot; an extra row of chips there would just bloat the strip. */ .hp-picker-mode-compact .hp-horse-sub, .hp-picker-mode-compact .hp-horse-tile-badges { display: none; } .hp-horse-sub { display: inline-flex; align-items: baseline; gap: 0; font-size: 11px; color: var(--hp-faint); white-space: nowrap; } .hp-horse-sub .hp-horse-sep { opacity: 0.55; padding: 0 4px; } .hp-horse-sub .hp-horse-age { color: var(--hp-muted); } .hp-horse-tile-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 2px; } .hp-badge { --hp-badge-bg: rgba(100,116,139,0.18); --hp-badge-fg: #cbd5e1; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 600 11px/1.05 'Inter', system-ui, sans-serif; letter-spacing: 0.02em; background: var(--hp-badge-bg); color: var(--hp-badge-fg); border: 1px solid color-mix(in srgb, var(--hp-badge-fg) 18%, transparent); white-space: nowrap; } .hp-badge-icon { font-size: 12px; line-height: 1; } .hp-badge-label { letter-spacing: 0.03em; } /* Activity palette — keyed off data-activity so future values can be added without touching every selector. Defaults (above) cover the "unknown" case. */ .hp-badge-activity[data-activity="drinking"] { --hp-badge-bg: rgba(29,112,183,0.20); --hp-badge-fg: #93c5fd; } .hp-badge-activity[data-activity="feeding_heu"] { --hp-badge-bg: rgba(217,119,6,0.22); --hp-badge-fg: #fcd34d; } .hp-badge-activity[data-activity="feeding_kraft-futter"]{ --hp-badge-bg: rgba(180,83,9,0.24); --hp-badge-fg: #fbbf24; } .hp-badge-activity[data-activity="lying"] { --hp-badge-bg: rgba(124,58,237,0.22); --hp-badge-fg: #c4b5fd; } .hp-badge-activity[data-activity="awake"] { --hp-badge-bg: rgba(0,180,136,0.20); --hp-badge-fg: #6ee7b7; } .hp-badge-activity[data-activity="empty_box"] { --hp-badge-bg: rgba(100,116,139,0.20); --hp-badge-fg: #cbd5e1; } .hp-badge-activity[data-activity="calibration"] { --hp-badge-bg: rgba(244,196,48,0.22); --hp-badge-fg: #fde68a; } .hp-badge-activity[data-activity="Starting"] { --hp-badge-bg: rgba(244,196,48,0.22); --hp-badge-fg: #fde68a; } /* Mode palette — distinctive but quiet. Birth is the only one that should grab the eye, so it gets a soft red glow. */ .hp-badge-mode[data-mode="birth"] { --hp-badge-bg: rgba(176,30,35,0.18); --hp-badge-fg: #fca5a5; box-shadow: 0 0 0 1px rgba(176,30,35,0.30), 0 0 8px rgba(176,30,35,0.20); } .hp-badge-mode[data-mode="foal"] { --hp-badge-bg: rgba(236,72,153,0.18); --hp-badge-fg: #f9a8d4; } .hp-badge-mode[data-mode="outdoor"] { --hp-badge-bg: rgba(56,189,248,0.18); --hp-badge-fg: #7dd3fc; } .hp-badge-mode[data-mode="no_learn"] { --hp-badge-bg: rgba(100,116,139,0.18); --hp-badge-fg: #94a3b8; } /* Light theme softens both palettes — invert the fg/bg so the badge reads on the light surface. */ #hp-ai-dashboard-root.hp-theme-light .hp-badge { border-color: rgba(15,23,42,0.08); } #hp-ai-dashboard-root.hp-theme-light .hp-badge-activity[data-activity="drinking"] { --hp-badge-bg: #dbeafe; --hp-badge-fg: #1d4ed8; } #hp-ai-dashboard-root.hp-theme-light .hp-badge-activity[data-activity="feeding_heu"] { --hp-badge-bg: #fef3c7; --hp-badge-fg: #92400e; } #hp-ai-dashboard-root.hp-theme-light .hp-badge-activity[data-activity="feeding_kraft-futter"]{ --hp-badge-bg: #fde68a; --hp-badge-fg: #78350f; } #hp-ai-dashboard-root.hp-theme-light .hp-badge-activity[data-activity="lying"] { --hp-badge-bg: #ede9fe; --hp-badge-fg: #5b21b6; } #hp-ai-dashboard-root.hp-theme-light .hp-badge-activity[data-activity="awake"] { --hp-badge-bg: #d1fae5; --hp-badge-fg: #047857; } #hp-ai-dashboard-root.hp-theme-light .hp-badge-activity[data-activity="empty_box"] { --hp-badge-bg: #e2e8f0; --hp-badge-fg: #475569; } #hp-ai-dashboard-root.hp-theme-light .hp-badge-mode[data-mode="birth"] { --hp-badge-bg: #fee2e2; --hp-badge-fg: #b91c1c; box-shadow: 0 0 0 1px rgba(176,30,35,0.18); } #hp-ai-dashboard-root.hp-theme-light .hp-badge-mode[data-mode="foal"] { --hp-badge-bg: #fce7f3; --hp-badge-fg: #be185d; } #hp-ai-dashboard-root.hp-theme-light .hp-badge-mode[data-mode="outdoor"] { --hp-badge-bg: #e0f2fe; --hp-badge-fg: #0369a1; } #hp-ai-dashboard-root.hp-theme-light .hp-badge-mode[data-mode="no_learn"] { --hp-badge-bg: #e2e8f0; --hp-badge-fg: #475569; } /* ---- summary-bar additions ---------------------------------------- */ .hp-picker-chip-icon { font-size: 12px; line-height: 1; } .hp-picker-chip-tone-birth { border-color: rgba(176,30,35,0.40); } .hp-picker-chip-tone-birth.hp-picker-chip-active { background: rgba(176,30,35,0.14); border-color: var(--hp-err); color: var(--hp-text); } .hp-picker-chip-tone-foal { border-color: rgba(236,72,153,0.40); } .hp-picker-chip-tone-foal.hp-picker-chip-active { background: rgba(236,72,153,0.16); border-color: #ec4899; color: var(--hp-text); } .hp-picker-activity { appearance: none; -webkit-appearance: none; font: 600 11px/1 system-ui, sans-serif; padding: 7px 28px 7px 12px; border-radius: 999px; border: 1px solid var(--hp-line); background: var(--hp-surface) url("data:image/svg+xml;utf8,") no-repeat right 10px center; color: var(--hp-text); cursor: pointer; } /* ---- Groups tab ---- */ .hp-groups-tab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .hp-groups-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; background: var(--hp-surface); border: 1px solid var(--hp-line); border-radius: var(--hp-radius); } .hp-groups-toolbar select { min-width: 200px; } .hp-btn { appearance: none; -webkit-appearance: none; border: 1px solid var(--hp-line); background: var(--hp-surface); color: var(--hp-text); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; display: inline-flex; align-items: center; gap: 6px; } .hp-btn:hover { border-color: var(--hp-accent); } .hp-btn-primary { background: linear-gradient(135deg, #00B488, #00967a); border-color: transparent; color: #fff; box-shadow: 0 0 12px rgba(0,180,136,0.30); } .hp-btn-primary:hover { box-shadow: 0 0 18px rgba(0,180,136,0.50); } .hp-btn-danger { border-color: rgba(176,30,35,0.5); color: #fca5a5; } .hp-btn-danger:hover { background: rgba(176,30,35,0.12); border-color: var(--hp-err); } .hp-groups-card { background: var(--hp-surface); border: 1px solid var(--hp-line); border-radius: var(--hp-radius); padding: 16px; } .hp-groups-card h4 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hp-muted); font-weight: 600; } .hp-groups-create-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .hp-groups-create-row input { background: var(--hp-bg-soft); border: 1px solid var(--hp-line); border-radius: 10px; padding: 8px 12px; color: var(--hp-text); font-size: 13px; min-width: 0; flex: 1 1 200px; } .hp-groups-create-row input:focus { outline: 0; border-color: var(--hp-accent); box-shadow: 0 0 0 3px var(--hp-accent-soft); } /* Cam rows inside a group — drag-to-reorder targets. */ .hp-group-cam-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .hp-group-cam-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--hp-bg-soft); border: 1px solid var(--hp-line); border-radius: 12px; cursor: grab; transition: border-color .15s ease, background .15s ease; } .hp-group-cam-row:hover { border-color: var(--hp-accent); } .hp-group-cam-row.is-dragging { opacity: 0.4; } .hp-group-cam-row.is-drag-over { border-color: var(--hp-accent); background: var(--hp-accent-soft); } .hp-group-cam-handle { flex: 0 0 auto; width: 18px; height: 18px; color: var(--hp-faint); display: inline-flex; align-items: center; justify-content: center; } .hp-group-cam-handle svg { width: 14px; height: 14px; fill: currentColor; } .hp-group-cam-row .hp-horse-avatar { width: 32px; height: 32px; } .hp-group-cam-name { flex: 1 1 auto; font-size: 13px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hp-group-cam-id { font-size: 11px; color: var(--hp-faint); flex: 0 0 auto; } .hp-group-cam-remove { flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 6px; color: rgba(255, 255, 255, 0.4); font: 600 18px/1 system-ui, sans-serif; padding: 0; margin-left: 4px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .hp-group-cam-remove:hover { background: rgba(252, 165, 165, 0.14); color: #fca5a5; border-color: rgba(252, 165, 165, 0.35); } .hp-group-cam-remove:focus-visible { outline: 2px solid var(--hp-accent); outline-offset: 1px; } #hp-ai-dashboard-root.hp-theme-light .hp-group-cam-remove { color: rgba(0, 0, 0, 0.4); } #hp-ai-dashboard-root.hp-theme-light .hp-group-cam-remove:hover { background: #fee2e2; color: #b91c1c; border-color: #fecaca; } /* Available-cams checkbox grid (add to group). */ .hp-group-add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin-top: 8px; } .hp-group-add-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--hp-bg-soft); border: 1px solid var(--hp-line); border-radius: 10px; cursor: pointer; transition: border-color .15s ease; } .hp-group-add-row:hover { border-color: var(--hp-accent); } .hp-group-add-row input { accent-color: var(--hp-accent); } .hp-group-add-row .hp-horse-avatar { width: 28px; height: 28px; } .hp-group-add-name { flex: 1 1 auto; font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hp-groups-empty { padding: 24px; text-align: center; color: var(--hp-muted); background: var(--hp-bg-soft); border: 1px dashed var(--hp-line); border-radius: var(--hp-radius); } .hp-groups-status { font-size: 12px; color: var(--hp-muted); min-height: 14px; } .hp-groups-status.is-saved { color: var(--hp-ok); } .hp-groups-status.is-error { color: var(--hp-err); } /* Hardware-family filter row above the Add cams picker. */ .hp-groups-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; } .hp-groups-filter-label { font-size: 12px; color: var(--hp-muted); } .hp-groups-filter-hidden { font-size: 12px; color: var(--hp-muted); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; } .hp-groups-filter-hidden:hover { color: var(--hp-text); } /* Family badge — small uppercase pill next to legacy cam names. */ .hp-cam-family-badge { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 999px; background: rgba(255,180,80,0.18); color: #ffc77a; border: 1px solid rgba(255,180,80,0.4); text-transform: uppercase; line-height: 1.4; } .hp-cam-family-badge.hp-family-stable { background: rgba(148,163,184,0.18); color: #cbd5e1; border-color: rgba(148,163,184,0.4); } .hp-cam-family-badge.hp-family-other { background: rgba(252,165,165,0.16); color: #fca5a5; border-color: rgba(252,165,165,0.4); } #hp-ai-dashboard-root.hp-theme-light .hp-cam-family-badge { background: #fef3c7; color: #b45309; border-color: #fcd34d; } #hp-ai-dashboard-root.hp-theme-light .hp-cam-family-badge.hp-family-stable { background: #e2e8f0; color: #475569; border-color: #cbd5e1; } #hp-ai-dashboard-root.hp-theme-light .hp-cam-family-badge.hp-family-other { background: #fee2e2; color: #b91c1c; border-color: #fecaca; } /* ---- Multi-Cam tab — single bundle root ---- The bundle's WebRTCConnectionCreator renders an outer MUI Grid2 container with one Grid2 cell per cam. Each cell contains a .acaris-multivideo-video-container which the bundle styles as position:relative (see multiple_videos.css). Our overlays are absolute children of that container, injected via MutationObserver as React creates cells. Don't fight MUI's layout — let the bundle do its thing and decorate the existing per-cell box. */ .hp-multicam-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 14px; background: var(--hp-surface); border: 1px solid var(--hp-line); border-radius: var(--hp-radius); margin-bottom: 12px; } .hp-multicam-slot { width: 100%; } /* Full-tab loading card shown for the ~1-4 s between tab-click and the first cells rendering. Two phases (init / cams) share the same look — centered ring + label + small sub-text — so it reads as one continuous "loading" experience even if the underlying state actually transitions through both phases. */ .hp-multicam-tab-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 280px; padding: 60px 24px; background: var(--hp-bg-soft); border: 1px solid var(--hp-line); border-radius: var(--hp-radius); margin-bottom: 12px; } .hp-multicam-tab-loading-ring { width: 52px; height: 52px; border: 4px solid rgba(255, 255, 255, 0.12); border-top-color: #ffffff; border-radius: 50%; animation: hp-multicam-spin 0.9s linear infinite; } .hp-multicam-tab-loading-label { font: 600 14px/1.2 'Inter', system-ui, sans-serif; color: rgba(255, 255, 255, 0.92); letter-spacing: 0.02em; } .hp-multicam-tab-loading-sub { font: 500 12px/1.4 'Inter', system-ui, sans-serif; color: rgba(255, 255, 255, 0.55); text-align: center; max-width: 280px; } /* One-time intro banner — explains the staggered connect + retry flow to first-time operators. Dismissable per-tab via sessionStorage. */ .hp-multicam-intro { position: relative; padding: 14px 56px 14px 16px; background: var(--hp-bg-soft); border: 1px solid var(--hp-line); border-left: 4px solid var(--hp-accent, #4f6cff); border-radius: var(--hp-radius); margin-bottom: 12px; color: var(--hp-text); } .hp-multicam-intro-title { font: 600 13px/1.2 'Inter', system-ui, sans-serif; margin-bottom: 4px; } .hp-multicam-intro-body { margin: 0; font: 400 13px/1.45 'Inter', system-ui, sans-serif; color: var(--hp-muted); } .hp-multicam-intro-close { position: absolute; top: 8px; right: 8px; appearance: none; background: transparent; border: 1px solid var(--hp-line); color: var(--hp-muted); border-radius: 4px; padding: 4px 8px; font: 500 11px/1 'Inter', system-ui, sans-serif; cursor: pointer; } .hp-multicam-intro-close:hover { color: var(--hp-text); border-color: var(--hp-muted); } .hp-multicam-empty { padding: 32px; text-align: center; color: var(--hp-muted); background: var(--hp-bg-soft); border: 1px dashed var(--hp-line); border-radius: var(--hp-radius); } /* Phase-2 layout: the grid itself is the CSS-Grid container. Was previously `display: block` and the actual grid lived on the bundle's MUI Grid2 container inside a single acaris-multiple-videos-root; that layout collapsed to 0/5 stream connects after a group switch (empty-MediaStream cliff — see task #98 sandbox findings). Now every cam is its own .hp-multicam-webrtc-item wrapper (real grid item); the bundle's root, its Grid2 container and its Grid2 item beneath the wrapper are all display:contents so the video cell renders directly inside the wrapper alongside the mini-strip / settings-tile siblings the SPA appends. MJPEG tiles + placeholder overflow row are direct grid items too. */ .hp-multicam-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; align-items: start; gap: 10px; width: 100%; min-width: 0; } /* Per-cam wrapper — the real CSS-Grid item. Stacks the video cell, mini-strip and settings-tile vertically inside its grid cell. */ .hp-multicam-grid > .hp-multicam-webrtc-item { display: flex; flex-direction: column; min-width: 0; gap: 0; } /* Every element between the wrapper and the .acaris-multivideo-video-container is display:contents — the bundle's root, its MUI Grid2 container, and the Grid2 item. This makes the video cell render as a direct child of the wrapper regardless of how deeply the bundle nests it. */ .hp-multicam-grid > .hp-multicam-webrtc-item > .acaris-multiple-videos-root, .hp-multicam-grid > .hp-multicam-webrtc-item > .acaris-multiple-videos-root-mounted, .hp-multicam-grid > .hp-multicam-webrtc-item > .acaris-multiple-videos-root > *, .hp-multicam-grid > .hp-multicam-webrtc-item > .acaris-multiple-videos-root-mounted > *, .hp-multicam-grid > .hp-multicam-webrtc-item > .acaris-multiple-videos-root > * > *, .hp-multicam-grid > .hp-multicam-webrtc-item > .acaris-multiple-videos-root-mounted > * > * { display: contents !important; } /* Pending roots stay out of layout so the bundle mount scan (which sweeps .acaris-multiple-videos-root only, not -pending) skips them. Once multiCamMountBundle promotes them to -mounted, the display:contents chain above applies and the cell becomes visible. */ .hp-multicam-grid > .hp-multicam-webrtc-item > .acaris-multiple-videos-root-pending { display: none !important; } /* Each per-cam cell — this is the bundle's own DOM node (we don't create it, just style + decorate it). It's already position:relative per multiple_videos.css. Add card chrome to match the rest of the dashboard. width/max-width/min-width with !important defeat any inline width or emotion-generated class width the bundle ships. aspect-ratio keeps height proportional regardless of column width so the grid rows are tidy even when columns are narrower at small viewports. Default aspect-ratio is 2:1 (twice as wide as tall) so the loading skeleton stays compact — half the height of the previous square default. Once the WebRTC stream delivers its first frame, JS reads the real videoWidth/videoHeight and writes an inline `aspect-ratio: w/h` with !important so the cell collapses to fit the picture exactly — no letterbox, no pillarbox. The 2:1 loading default is only visible for the ~1-5 s before frames arrive; once they do, it gets replaced anyway. */ .hp-multicam-grid .acaris-multivideo-video-container { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; border-radius: var(--hp-radius); overflow: hidden; background: #000; border: 0; /* was 1px solid; saved 2px vertical */ box-shadow: 0 1px 2px rgba(0,0,0,0.3); /* slimmer than var(--hp-shadow) */ cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; aspect-ratio: 2 / 1; box-sizing: border-box; } .hp-multicam-grid .acaris-multivideo-video-container:hover { transform: translateY(-1px); box-shadow: var(--hp-shadow-lg); } .hp-multicam-grid .acaris-multivideo-video-container[data-state="online"] { border-color: rgba(0,180,136,0.45); } .hp-multicam-grid .acaris-multivideo-video-container[data-state="offline"] { filter: saturate(0.6); } .hp-multicam-grid .acaris-multivideo-video-container[data-state="alarm"] { border-color: var(--hp-err); box-shadow: 0 0 0 1px rgba(176,30,35,0.55), 0 0 22px rgba(176,30,35,0.45); animation: hp-tile-alarm-pulse 1.8s ease-in-out infinite; } /* Bundle's video element — override its default height:220px AND its inline style="width:100%". The cell is absolute-position'd 16:9 box; position:absolute + inset:0 forces the video to fill it regardless of the inline width hint. !important on every dimension so the bundle's inline `width:100%` and bundle CSS `height:220px` lose. object-fit: contain (was: cover) so the FULL camera frame is shown inside the tile. Source aspect varies per device — 4:3 cameras get a narrow letterbox on top/bottom, but the operator never sees parts of the picture cut off at the edges, which the cover mode was doing (cropping ~12% of width on 4:3 sources in a 16:9 cell). */ .hp-multicam-grid .acaris-multivideo-video-container video { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: contain !important; background: #000; border: 0; display: block; } /* The legacy info strip (horse name) sits in the top-right by default — we already show name in our top overlay so suppress the duplicate. */ .hp-multicam-grid .acaris-video-player-info { display: none !important; } /* Bundle's play/pause IconButton — keep centered, give it a z-index above the gradient overlays so the user can pause/resume any cell. */ .hp-multicam-grid .acaris-multivideos-button { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); z-index: 4; } .hp-multicam-grid .acaris-multivideos-button.disconnected { opacity: 1; } /* While loading we hide the bundle's play/pause button so it doesn't sit under the spinner. As soon as the cell flips to connected / failed / stopped it comes back. */ .hp-multicam-grid .acaris-multivideo-video-container[data-hp-state="loading"] .acaris-multivideos-button { opacity: 0 !important; pointer-events: none; } /* ── Per-cell spinner / failed / stopped overlay ──────────────────── */ .hp-multicam-spinner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(7, 9, 28, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 5; pointer-events: none; transition: opacity .25s ease; } .hp-multicam-spinner-ring { width: 44px; height: 44px; border: 3px solid rgba(255, 255, 255, 0.18); border-top-color: #ffffff; border-radius: 50%; animation: hp-multicam-spin 0.9s linear infinite; } .hp-multicam-spinner-label { font: 600 11px/1.1 'Inter', system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); } .hp-multicam-spinner-sub { font: 500 11px/1.25 'Inter', system-ui, sans-serif; color: rgba(255, 255, 255, 0.62); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); margin-top: -4px; padding: 0 14px; text-align: center; } @keyframes hp-multicam-spin { to { transform: rotate(360deg); } } /* Hide spinner once we've reached a terminal state. The bundle's play/pause IconButton is the visible affordance for failed/stopped cells (it sits at z=4 above the gradient overlays). */ .hp-multicam-grid .acaris-multivideo-video-container[data-hp-state="connected"] .hp-multicam-spinner, .hp-multicam-grid .acaris-multivideo-video-container[data-hp-state="failed"] .hp-multicam-spinner, .hp-multicam-grid .acaris-multivideo-video-container[data-hp-state="stopped"] .hp-multicam-spinner { display: none; } /* Also hide spinner while the MJPEG bridge is up — MJPEG is already delivering frames so the "Connecting…" overlay would just dim what the user can already see. Once WebRTC takes over (state="connected") or the bridge errors out, the normal state-based rules take over. */ .hp-multicam-grid .acaris-multivideo-video-container.hp-tile-bridge-active .hp-multicam-spinner { display: none; } /* ── MJPEG bridge overlay ───────────────────────────────────────────── While WebRTC negotiates, an is layered above the bundle's empty