/* Theme tokens. Swap the `data-theme` attribute on to restyle later. */ :root, [data-theme="light"] { --bg: #f4f5f7; --panel: #ffffff; --border: #dfe3e8; --text: #1c2733; --text-muted: #6b7784; --accent: #cc0000; /* Avaya red */ --stat-bg: #ffffff; --stat-value: #1c2733; --header-bg: #ffffff; --row-alt: #f7f8fa; --ok: #1e9e57; --stale: #d1a10a; --down: #cc2b2b; --shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } [data-theme="dark"] { --bg: #10151c; --panel: #1a212b; --border: #2a323d; --text: #eef2f6; --text-muted: #94a1ad; --accent: #ff4d4d; --stat-bg: #1a212b; --stat-value: #ffffff; --header-bg: #1a212b; --row-alt: #151b23; --ok: #33c27a; --stale: #e0b93a; --down: #ff5c5c; --shadow: none; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--bg); color: var(--text); font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; display: flex; flex-direction: column; min-height: 100vh; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 1vh 2vw; background: var(--header-bg); border-bottom: 3px solid var(--accent); } .brand { display: flex; align-items: center; gap: 0.8vw; } .brand-mark { width: 1.6vw; height: 1.6vw; min-width: 18px; min-height: 18px; background: var(--accent); border-radius: 4px; } .brand-name { font-size: 2.2vh; font-weight: 700; letter-spacing: 0.02em; } .version { font-size: 1.4vh; color: var(--text-muted); background: var(--row-alt); border: 1px solid var(--border); border-radius: 999px; padding: 0.2vh 0.6vw; font-variant-numeric: tabular-nums; } .meta { display: flex; align-items: center; gap: 1.2vw; font-size: 1.8vh; } .customer-name { font-weight: 700; color: var(--accent); } .conn { width: 1.1vh; height: 1.1vh; min-width: 10px; min-height: 10px; border-radius: 50%; } .conn--ok { background: var(--ok); } .conn--stale { background: var(--stale); } .conn--down { background: var(--down); } main { flex: 1; display: flex; flex-direction: column; gap: 1.5vh; padding: 1.5vh 2vw; overflow: hidden; } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5vw; } .stat { background: var(--stat-bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 2vh 1vw; text-align: center; } .stat-value { font-size: 9vh; font-weight: 800; line-height: 1; color: var(--stat-value); font-variant-numeric: tabular-nums; } .stat-label { margin-top: 1vh; font-size: 2.2vh; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } /* Highlight a non-zero call queue. */ .stat.alert .stat-value { color: var(--accent); } .agents { flex: 1; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; } .agent-table { width: 100%; border-collapse: collapse; /* Set by JS (fitAgents) to scale the whole grid to the number of rows. */ --agent-font: 2.8vh; font-size: var(--agent-font); } .agent-table thead th { position: sticky; top: 0; background: var(--header-bg); text-align: left; padding: 0.6vh 0.8vw; font-size: calc(var(--agent-font) * 0.62); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); border-bottom: 2px solid var(--border); } .agent-table tbody td { padding: 0.5vh 0.8vw; border-bottom: 1px solid var(--border); white-space: nowrap; font-weight: 600; } .agent-table tbody tr:nth-child(even) { background: var(--row-alt); } .status-pill { display: inline-block; padding: 0.2vh 0.7vw; border-radius: 999px; font-size: calc(var(--agent-font) * 0.72); font-weight: 700; } .status-avail { background: rgba(30, 158, 87, 0.15); color: var(--ok); } .status-acd { background: rgba(204, 0, 0, 0.12); color: var(--accent); } .status-aux { background: rgba(209, 161, 10, 0.18); color: var(--stale); } .status-other { background: var(--row-alt); color: var(--text-muted); } .empty-row td { text-align: center; color: var(--text-muted); padding: 4vh 0; }