/** * V3.1 Visual Design Layer — Gate 1 (Shell + Overview only) * Loaded AFTER monitor-v31.css. Purely presentational — no refresh/auth/ * route logic lives here. Safe to delete this file to roll back to the * plain functional baseline in monitor-v31.css. * * Theme: "Maridive Enterprise Operations Command Center" — dark, calm, * restrained accent, status color reserved for actual status. */ :root { --v31-bg: #0b1220; --v31-sidebar-bg: #0e1729; --v31-panel-bg: #121d33; --v31-panel-elevated: #16223c; --v31-border: #223252; --v31-border-soft: #1a2740; --v31-text-primary: #e6ebf5; --v31-text-secondary: #9fb0cc; --v31-text-muted: #64738f; --v31-accent: #3fa9f5; --v31-accent-soft: rgba(63, 169, 245, 0.12); --v31-success: #2ecc71; --v31-success-soft: rgba(46, 204, 113, 0.12); --v31-warning: #f5a623; --v31-warning-soft: rgba(245, 166, 35, 0.12); --v31-danger: #ef4444; --v31-danger-soft: rgba(239, 68, 68, 0.14); --v31-space-xs: 4px; --v31-space-sm: 8px; --v31-space-md: 16px; --v31-space-lg: 24px; --v31-space-xl: 32px; --v31-radius-sm: 6px; --v31-radius-md: 10px; --v31-radius-lg: 14px; --v31-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --v31-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --v31-sidebar-width: 248px; } /* ── Light theme ────────────────────────────────────────────── * Toggled by setting data-theme="light" on (app-v31.js * v31ToggleTheme / initTheme). Everything else in this file is built * on these custom properties, so this block is the entire theme. */ :root[data-theme="light"] { --v31-bg: #f4f6fb; --v31-sidebar-bg: #ffffff; --v31-panel-bg: #ffffff; --v31-panel-elevated: #eef1f8; --v31-border: #dbe1ee; --v31-border-soft: #e8ecf5; --v31-text-primary: #1a2333; --v31-text-secondary: #4b5773; --v31-text-muted: #8896b3; --v31-accent: #2f80c8; --v31-accent-soft: rgba(47, 128, 200, 0.10); --v31-success: #1e9e56; --v31-success-soft: rgba(30, 158, 86, 0.10); --v31-warning: #c98a12; --v31-warning-soft: rgba(201, 138, 18, 0.10); --v31-danger: #d13c3c; --v31-danger-soft: rgba(209, 60, 60, 0.12); --v31-shadow-sm: 0 1px 2px rgba(20, 30, 60, 0.06); --v31-shadow-md: 0 4px 20px rgba(20, 30, 60, 0.08); } :root[data-theme="light"] .proxy-child-services { background: rgba(0, 0, 0, 0.03); } :root[data-theme="light"] .proxy-data-table tr:nth-child(even) td { background: rgba(0, 0, 0, 0.02); } :root[data-theme="light"] .device-card::after { background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 0%), rgba(0, 0, 0, 0.035), transparent 45%); } :root[data-theme="light"] .device-nav-btn.device-nav-active { color: #ffffff !important; } /* Console-style surfaces stay dark in both themes on purpose — logs and raw * JSON read better against a fixed dark background than flipping to light. */ body { background: var(--v31-bg); color: var(--v31-text-primary); font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ── App shell layout ─────────────────────────────────────────── */ .app-shell { display: flex; min-height: 100vh; } .main-shell { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* ── Sidebar ──────────────────────────────────────────────────── */ .sidebar { width: var(--v31-sidebar-width); flex-shrink: 0; background: var(--v31-sidebar-bg); border-right: 1px solid var(--v31-border); display: flex; flex-direction: column; height: 100vh; position: sticky; top: 0; } .sidebar-brand { display: flex; align-items: center; gap: var(--v31-space-sm); padding: var(--v31-space-lg) var(--v31-space-md); border-bottom: 1px solid var(--v31-border-soft); } .brand-mark { width: 36px; height: 36px; border-radius: var(--v31-radius-sm); flex-shrink: 0; object-fit: contain; } .brand-title { font-size: 14px; font-weight: 600; color: var(--v31-text-primary); line-height: 1.2; } .brand-sub { font-size: 11px; color: var(--v31-text-muted); letter-spacing: 0.02em; } .sidebar-nav { flex: 1; overflow-y: auto; padding: var(--v31-space-md) var(--v31-space-sm); } .nav-group { margin-bottom: var(--v31-space-md); } .nav-group-title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v31-text-muted); padding: var(--v31-space-sm) var(--v31-space-sm) 6px; } .nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px var(--v31-space-sm); background: transparent; border: none; border-radius: var(--v31-radius-sm); color: var(--v31-text-secondary); font-size: 13.5px; text-align: left; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease; } .nav-item:hover { background: var(--v31-panel-bg); color: var(--v31-text-primary); } .nav-item.active { background: var(--v31-accent-soft); color: var(--v31-accent); font-weight: 600; } .nav-item:focus-visible { outline: 2px solid var(--v31-accent); outline-offset: 1px; } .nav-icon { width: 18px; text-align: center; font-size: 13px; flex-shrink: 0; opacity: 0.9; } .sidebar-footer { border-top: 1px solid var(--v31-border-soft); padding: var(--v31-space-md); } .sidebar-user { display: flex; align-items: center; gap: var(--v31-space-sm); margin-bottom: var(--v31-space-sm); } .user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--v31-success-soft); color: var(--v31-success); display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; } .user-name { font-size: 13px; font-weight: 600; color: var(--v31-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-role { font-size: 11px; color: var(--v31-text-muted); } .logout-btn { width: 100%; padding: 8px; background: var(--v31-panel-bg); border: 1px solid var(--v31-border); border-radius: var(--v31-radius-sm); color: var(--v31-text-secondary); font-size: 12.5px; cursor: pointer; } .logout-btn:hover { color: var(--v31-danger); border-color: var(--v31-danger); } .sidebar-scrim { display: none; } /* ── Top bar ──────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; gap: var(--v31-space-md); padding: 18px var(--v31-space-lg); border-bottom: 1px solid var(--v31-border); background: var(--v31-bg); position: sticky; top: 0; z-index: 5; } .sidebar-toggle { display: none; background: var(--v31-panel-bg); border: 1px solid var(--v31-border); color: var(--v31-text-primary); border-radius: var(--v31-radius-sm); width: 36px; height: 36px; font-size: 16px; cursor: pointer; flex-shrink: 0; } .topbar-title { flex: 1; min-width: 0; } .topbar-title h1 { font-size: 19px; font-weight: 700; margin: 0; color: var(--v31-text-primary); } .topbar-sub { font-size: 12.5px; color: var(--v31-text-muted); margin-top: 2px; } .topbar-meta { flex-shrink: 0; display: flex; align-items: center; gap: 10px; } .theme-toggle-btn { position: relative; width: 36px; height: 36px; border-radius: 999px; background: var(--v31-panel-bg); border: 1px solid var(--v31-border); color: var(--v31-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.15s ease, color 0.15s ease; } .theme-toggle-btn:hover { border-color: var(--v31-accent); color: var(--v31-accent); } .theme-toggle-icon { position: absolute; font-size: 15px; transition: opacity 0.2s ease, transform 0.3s ease; } .theme-icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } .theme-icon-moon { opacity: 0; transform: rotate(-60deg) scale(0.5); } :root[data-theme="light"] .theme-icon-sun { opacity: 0; transform: rotate(60deg) scale(0.5); } :root[data-theme="light"] .theme-icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } .topbar-chip { font-size: 12px; color: var(--v31-text-secondary); background: var(--v31-panel-bg); border: 1px solid var(--v31-border); border-radius: 999px; padding: 6px 12px; white-space: nowrap; } /* ── Content area ─────────────────────────────────────────────── */ .content-area { flex: 1; padding: var(--v31-space-lg); overflow-y: auto; } .overview-toolbar { margin-bottom: var(--v31-space-md); } .btn-ghost { background: var(--v31-panel-bg); border: 1px solid var(--v31-border); color: var(--v31-text-primary); padding: 8px 14px; border-radius: var(--v31-radius-sm); font-size: 13px; cursor: pointer; } .btn-ghost:hover { border-color: var(--v31-accent); color: var(--v31-accent); } /* ── Overview: Row 1 executive strip ──────────────────────────── */ .ov-strip { /* Auto-fit wrapping grid — grew from 5 to 8 chips (Windows Services, Web App Sessions, TV Apps added), so a fixed 5-column row would overflow or squish. Each chip keeps a sane minimum width and wraps to additional rows instead. */ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--v31-space-md); margin-bottom: var(--v31-space-lg); } .strip-chip { background: var(--v31-panel-bg); border: 1px solid var(--v31-border); border-radius: var(--v31-radius-md); padding: var(--v31-space-md); border-left: 3px solid var(--v31-border); } .strip-chip.clickable, .ov-panel-summary.clickable { cursor: pointer; } .strip-chip.clickable:hover, .ov-panel-summary.clickable:hover { border-color: var(--v31-accent); } .strip-chip.clickable:focus-visible, .ov-panel-summary.clickable:focus-visible { outline: 2px solid var(--v31-accent); outline-offset: 2px; } .strip-chip.strip-ok { border-left-color: var(--v31-success); } .strip-chip.strip-warning { border-left-color: var(--v31-warning); } .strip-chip.strip-critical { border-left-color: var(--v31-danger); background: var(--v31-danger-soft); } .strip-chip.strip-unavailable { border-left-color: var(--v31-text-muted); } .strip-label { font-size: 11.5px; color: var(--v31-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .strip-value { font-size: 22px; font-weight: 700; color: var(--v31-text-primary); } /* ── Overview: Row 2 main operational area ────────────────────── */ .ov-row { display: grid; gap: var(--v31-space-md); margin-bottom: var(--v31-space-lg); } .ov-row-main { grid-template-columns: 1.1fr 1.3fr 1fr; align-items: stretch; } .ov-row-summary { /* Grew from 3 to 5 cards (Web Applications, TV Applications added) — auto-fit so it wraps cleanly instead of forcing 5 cramped columns. */ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .ov-panel { background: var(--v31-panel-bg); border: 1px solid var(--v31-border); border-radius: var(--v31-radius-lg); padding: var(--v31-space-md) var(--v31-space-lg); box-shadow: var(--v31-shadow-sm); } .ov-panel h3 { font-size: 13px; font-weight: 600; color: var(--v31-text-secondary); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 var(--v31-space-md) 0; } .ov-panel-attention { border-color: var(--v31-border); background: var(--v31-panel-elevated); } .panel-critical { border-color: var(--v31-danger); } .ov-panel-summary h3 { margin-bottom: var(--v31-space-sm); } .agent-instructions-textarea { width: 100%; box-sizing: border-box; font-family: 'Consolas', 'Courier New', monospace; font-size: 12px; resize: vertical; margin-top: var(--v31-space-sm); } .agent-feedback-footer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .agent-new-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--v31-success); color: #06210f; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; vertical-align: middle; } .ov-metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--v31-space-md); } .ov-metric-label { font-size: 11.5px; color: var(--v31-text-muted); margin-bottom: 4px; } .ov-metric-value { font-size: 16px; font-weight: 600; color: var(--v31-text-primary); } .ov-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; } .ov-list li { font-size: 13px; color: var(--v31-text-secondary); padding-bottom: 8px; border-bottom: 1px solid var(--v31-border-soft); } .ov-list li:last-child { border-bottom: none; padding-bottom: 0; } /* ── Status colors (reserved for actual status only) ──────────── */ .status-ok { color: var(--v31-success); font-weight: 600; } .status-error { color: var(--v31-danger); font-weight: 600; } .status-unauthorized { color: var(--v31-warning); font-weight: 600; } .status-unavailable { color: var(--v31-text-muted); font-weight: 600; } .status-warning { color: var(--v31-warning); font-weight: 600; } .status-paused { color: var(--v31-warning); font-weight: 600; } .status-pending { color: var(--v31-warning); font-weight: 600; font-style: italic; } .ov-detail { color: var(--v31-text-muted); font-size: 12.5px; overflow-wrap: break-word; } /* ── Buttons (generic, used across other screens too) ─────────── */ button { font-family: inherit; } button:not(.nav-item):not(.logout-btn):not(.btn-ghost):not(.sidebar-toggle) { background: var(--v31-panel-elevated); border: 1px solid var(--v31-border); color: var(--v31-text-primary); border-radius: var(--v31-radius-sm); padding: 7px 12px; font-size: 12.5px; cursor: pointer; } button:not(.nav-item):not(.logout-btn):not(.btn-ghost):not(.sidebar-toggle):hover { border-color: var(--v31-accent); } button:disabled { opacity: 0.5; cursor: not-allowed; } button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--v31-accent); outline-offset: 1px; } /* monitor-v31.css's .raw-preview still has a light-gray background from * before the dark theme — light text on it is unreadable. Override only * the colors here so toggled agent/proxy detail content is actually * visible; layout properties stay in the base file. */ .raw-preview { background: #0a0f1c; color: var(--v31-text-secondary); border: 1px solid var(--v31-border); border-radius: var(--v31-radius-sm); } table { color: var(--v31-text-secondary); } th { color: var(--v31-text-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.03em; } td, th { border-color: var(--v31-border-soft) !important; } /* ── Gate 2: shared operational row pattern ────────────────────── * Used by Proxy Services, Proxy Detail header/actions, and Devices. * Left border color communicates priority at a glance without every * row shouting equally — critical/attention rows stand out, healthy * rows sit calm. */ .ops-toolbar { display: flex; align-items: center; gap: var(--v31-space-sm); margin-bottom: var(--v31-space-md); flex-wrap: wrap; } .ops-list { display: flex; flex-direction: column; gap: var(--v31-space-sm); } /* Proxy Services use compact cards so the three parent proxies can be * compared at a glance. This deliberately does not change .ops-list for * Devices and other operational screens. */ .proxy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v31-space-md); align-items: stretch; } .proxy-grid .ops-row { margin: 0; min-width: 0; } .proxy-card-description { min-height: 32px; margin-top: 7px; color: var(--v31-text-muted); font-size: 11px; line-height: 1.45; } .proxy-child-services { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--v31-space-sm); padding: 8px; border-radius: var(--v31-radius-sm); background: rgba(255,255,255,0.025); } .proxy-child-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--v31-border-soft); border-radius: 999px; padding: 3px 7px; font-size: 10px; color: var(--v31-text-secondary); } .proxy-child-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--v31-text-muted); } .proxy-child-chip.child-ok::before { background: var(--v31-success); } .proxy-child-chip.child-error::before { background: var(--v31-danger); } .proxy-child-chip.child-warning::before { background: var(--v31-warning); } .proxy-btn-icon { display: inline-block; margin-right: 2px; } .proxy-collectors { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: var(--v31-space-sm); padding: 6px 8px; border-radius: var(--v31-radius-sm); border: 1px dashed var(--v31-border-soft); background: rgba(255,255,255,0.02); } .proxy-collectors-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--v31-text-muted); } .proxy-collector-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--v31-border-soft); border-radius: 999px; padding: 3px 8px; font-size: 10px; color: var(--v31-text-secondary); } .announce-modal-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.55); } .announce-modal { width: min(420px, 92vw); background: var(--v31-surface, #1c1f26); border: 1px solid var(--v31-border-soft); border-radius: var(--v31-radius-md, 10px); padding: var(--v31-space-md, 16px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); } .announce-modal h3 { margin: 0 0 10px 0; } .announce-modal textarea { width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit; } .announce-modal-row { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; } .announce-modal-row label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--v31-text-muted); } .announce-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } .proxy-data-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: var(--v31-space-md) 0; } .proxy-data-tabs button.active { border-color: var(--v31-accent); color: var(--v31-accent); } .proxy-data-panel { position: relative; background: var(--v31-panel-bg); border: 1px solid var(--v31-border); border-radius: var(--v31-radius-md); padding: var(--v31-space-md); overflow: hidden; } .proxy-data-heading, .proxy-explorer-toolbar, .proxy-pagination, .proxy-row-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .proxy-data-heading h3 { margin: 0; } .proxy-data-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; } .proxy-kpi { background: var(--v31-panel-elevated); border: 1px solid var(--v31-border-soft); border-radius: var(--v31-radius-sm); padding: 9px 11px; min-width: 0; } .proxy-kpi span,.proxy-kpi small { display: block; color: var(--v31-text-muted); font-size: 10px; } .proxy-kpi strong { display: block; margin: 3px 0; color: var(--v31-text-primary); font-size: 18px; overflow-wrap: anywhere; } .proxy-kpi-ok { border-left: 2px solid var(--v31-success); } .proxy-kpi-warning { border-left: 2px solid var(--v31-warning); } .proxy-explorer-toolbar { margin: 10px 0; } .proxy-explorer-toolbar input, .proxy-explorer-toolbar select { background: var(--v31-panel-elevated); border: 1px solid var(--v31-border); color: var(--v31-text-primary); border-radius: var(--v31-radius-sm); padding: 7px 9px; } .proxy-explorer-toolbar input { flex: 1; min-width: 240px; } .proxy-column-picker { position: relative; } .proxy-column-picker summary { cursor: pointer; border: 1px solid var(--v31-border); border-radius: var(--v31-radius-sm); padding: 7px 10px; } .proxy-column-picker > div { position: absolute; right: 0; z-index: 5; width: 240px; max-height: 300px; overflow: auto; padding: 8px; background: var(--v31-panel-elevated); border: 1px solid var(--v31-border); border-radius: var(--v31-radius-sm); box-shadow: 0 12px 30px rgba(0,0,0,.35); } .proxy-column-picker label { display: block; padding: 4px; font-size: 11px; } .proxy-pagination { margin-top: 9px; color: var(--v31-text-muted); font-size: 11px; } .proxy-pagination > div { display: flex; align-items: center; gap: 8px; } .proxy-data-row { cursor: pointer; } .proxy-data-row:hover td { background: rgba(56,189,248,.08) !important; } .proxy-row-drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 8; width: min(520px, 90%); overflow: auto; padding: var(--v31-space-md); background: var(--v31-panel-elevated); border-left: 1px solid var(--v31-border); box-shadow: -18px 0 35px rgba(0,0,0,.38); } .proxy-data-panel:fullscreen { display: flex; flex-direction: column; background: var(--v31-page-bg); padding: 20px; overflow: hidden; } .proxy-data-panel:fullscreen .proxy-table-wrap { max-height: none; } .proxy-data-panel:fullscreen #proxyDataTable { min-height: 0; flex: 1; overflow: auto; } /* Safe fallback for browsers that reject the native Fullscreen API. It stays * in document flow and never covers the sidebar, header, or other screens. */ .proxy-data-panel.proxy-expanded .proxy-table-wrap { max-height: 75vh; } .proxy-table-wrap { overflow: auto; max-height: 520px; } .proxy-data-table { width: 100%; border-collapse: collapse; font-size: 11px; } .proxy-data-table th { position: sticky; top: 0; z-index: 1; padding: 7px 9px; text-align: left; color: var(--v31-text-muted); background: var(--v31-panel-elevated); white-space: nowrap; } .proxy-data-table td { padding: 6px 9px; color: var(--v31-text-primary); vertical-align: top; max-width: 360px; overflow-wrap: anywhere; } .proxy-data-table tr:nth-child(even) td { background: rgba(255,255,255,0.018); } .proxy-object-key { color: var(--v31-text-muted); font-weight: 600; width: 210px; } .ops-row { background: var(--v31-panel-bg); border: 1px solid var(--v31-border); border-left: 3px solid var(--v31-border); border-radius: var(--v31-radius-md); padding: var(--v31-space-md); } .ops-row.ops-critical { border-left-color: var(--v31-danger); background: var(--v31-danger-soft); } .ops-row.ops-attention { border-left-color: var(--v31-warning); background: var(--v31-warning-soft); } .ops-row.ops-healthy { border-left-color: var(--v31-success); opacity: 0.94; } .ops-row-top { display: flex; align-items: center; justify-content: space-between; gap: var(--v31-space-md); flex-wrap: wrap; } .ops-row-name { font-size: 14px; font-weight: 600; color: var(--v31-text-primary); } .ops-row-meta { display: flex; gap: var(--v31-space-md); flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--v31-text-muted); } .ops-row-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--v31-space-sm); } .ops-row-secondary { margin-top: var(--v31-space-sm); padding-top: var(--v31-space-sm); border-top: 1px solid var(--v31-border-soft); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .ops-row-top-actions { display: flex; gap: 6px; flex-wrap: wrap; } .proxy-btn-count { display: inline-block; min-width: 16px; margin-left: 3px; padding: 0 4px; border-radius: 999px; background: rgba(255,255,255,0.12); font-size: 9px; line-height: 15px; text-align: center; } .proxy-group-tabs button.active { font-weight: 600; } /* ── Agent card grid (AI Agents, Phase A) ───────────────────────── * Cards, not full-width operational rows — 3 columns desktop, 2 laptop, * 1 mobile. Reuses the .ops-row card look (border-left priority color, * padding, status classes) as individual grid items. */ .agent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--v31-space-md); align-items: start; } .agent-grid .ops-row { margin: 0; } @media (max-width: 1200px) { .proxy-data-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .proxy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .agent-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .proxy-data-kpis { grid-template-columns: 1fr; } .proxy-grid { grid-template-columns: 1fr; } .agent-grid { grid-template-columns: 1fr; } } /* ── Agent Workspace tab highlight (Phase B) ──────────────────── */ .tab-btn.tab-active { border-color: var(--v31-accent); color: var(--v31-accent); } /* ── Filter bar (Devices) ─────────────────────────────────────── */ .filter-bar { display: flex; gap: var(--v31-space-sm); align-items: center; margin-bottom: var(--v31-space-md); flex-wrap: wrap; } .filter-bar input[type="text"], .filter-bar select { background: var(--v31-panel-elevated); border: 1px solid var(--v31-border); color: var(--v31-text-primary); border-radius: var(--v31-radius-sm); padding: 7px 10px; font-size: 12.5px; } .filter-bar input[type="text"] { min-width: 200px; flex: 1; } /* ── Devices: premium card grid ──────────────────────────────── * Side-by-side cards instead of a stacked list. Reuses .ops-row's * base look (border, radius, padding, priority color) and layers on * a status accent bar, glowing live-status dot, an icon avatar, a * two-column meta grid, grouped actions, and a hover lift + sheen — * purely presentational, no behavior change. */ .device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--v31-space-md); align-items: start; } .device-card { position: relative; overflow: hidden; margin: 0; padding-top: calc(var(--v31-space-md) + 3px); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .device-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--v31-text-muted), transparent); opacity: 0.6; } .device-card.ops-healthy::before { background: linear-gradient(90deg, var(--v31-success), rgba(46,204,113,0)); opacity: 1; } .device-card.ops-attention::before { background: linear-gradient(90deg, var(--v31-danger), rgba(239,68,68,0)); opacity: 1; } .device-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.05), transparent 45%); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .device-card:hover { transform: translateY(-4px); border-color: var(--v31-accent); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(63, 169, 245, 0.15); } .device-card:hover::after { opacity: 1; } .device-card-head { display: flex; align-items: center; gap: 12px; } .device-avatar { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; background: linear-gradient(145deg, var(--v31-panel-elevated), var(--v31-panel-bg)); border: 1px solid var(--v31-border); transition: box-shadow 0.18s ease; } .device-card.ops-healthy .device-avatar { box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.3); } .device-card.ops-attention .device-avatar { box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35); } .device-heading { min-width: 0; flex: 1; } .device-status-line { display: flex; align-items: center; gap: 6px; margin-top: 3px; } .device-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v31-text-muted); flex-shrink: 0; } .device-status-dot.online { background: var(--v31-success); animation: device-pulse 2s infinite; } .device-status-dot.offline { background: var(--v31-danger); } @keyframes device-pulse { 0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55); } 70% { box-shadow: 0 0 0 7px rgba(46, 204, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); } } .device-now-playing { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--v31-accent); background: var(--v31-accent-soft); border: 1px solid rgba(63, 169, 245, 0.3); } .device-now-playing:empty { display: none; } .device-now-playing::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--v31-accent); animation: device-pulse-accent 1.6s infinite; } @keyframes device-pulse-accent { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .device-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px 14px; margin-top: var(--v31-space-md); padding-top: var(--v31-space-md); border-top: 1px solid var(--v31-border-soft); } .device-meta-item { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; min-width: 0; } .device-meta-icon { flex-shrink: 0; opacity: 0.85; } .device-meta-label { color: var(--v31-text-muted); flex-shrink: 0; } .device-meta-value { color: var(--v31-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .device-actions-group { margin-top: var(--v31-space-sm); padding-top: var(--v31-space-sm); border-top: 1px solid var(--v31-border-soft); } .device-actions-group-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--v31-text-muted); margin-bottom: 6px; } .device-actions-group .ops-row-actions { margin-top: 0; } .device-nav-btn { border-radius: 999px !important; } .device-nav-btn.device-nav-active { background: var(--v31-accent) !important; border-color: var(--v31-accent) !important; color: #04121f !important; font-weight: 700; } .device-subscreen-row { margin-top: 6px; padding: 6px 0 0 16px; border-top: 1px dashed var(--v31-border-soft); } .device-subscreen-btn { font-size: 11px; opacity: 0.9; } .device-btn-primary { background: var(--v31-accent-soft) !important; border-color: rgba(63, 169, 245, 0.35) !important; color: var(--v31-accent) !important; } .device-btn-util { opacity: 0.85; } .device-btn-util:hover { opacity: 1; } @media (max-width: 700px) { .device-grid { grid-template-columns: 1fr; } .device-meta-grid { grid-template-columns: 1fr; } } /* ── Proxy Detail header ──────────────────────────────────────── */ .detail-header { display: flex; align-items: center; justify-content: space-between; gap: var(--v31-space-md); flex-wrap: wrap; margin-bottom: var(--v31-space-md); } .detail-header-title { display: flex; flex-direction: column; gap: 2px; } .detail-header-title h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--v31-text-primary); } .detail-log { background: #0a0f1c; border: 1px solid var(--v31-border); border-radius: var(--v31-radius-md); padding: var(--v31-space-md); font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 12px; line-height: 1.5; color: var(--v31-text-secondary); max-height: 340px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 1200px) { .ov-row-main { grid-template-columns: 1fr 1fr; } .ov-panel-attention { grid-column: 1 / -1; } } @media (max-width: 900px) { .ov-strip { grid-template-columns: repeat(2, 1fr); } .ov-row-main { grid-template-columns: 1fr; } .ov-row-summary { grid-template-columns: 1fr; } .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 20; transform: translateX(-100%); transition: transform 0.18s ease; box-shadow: var(--v31-shadow-md); } .sidebar.open { transform: translateX(0); } .sidebar-scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 15; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .sidebar-scrim.visible { opacity: 1; pointer-events: auto; } } @media (max-width: 560px) { .ov-strip { grid-template-columns: 1fr 1fr; } .content-area { padding: var(--v31-space-md); } .topbar { padding: 14px var(--v31-space-md); } .strip-value { font-size: 18px; } }