/* ════════════════════════════════════════════════════════════════════ ZVoice Dashboard — global styles Themes: dark (default) + light. Toggle via [data-theme="..."] on . ════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 16px; color: var(--text); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } i[data-lucide] { display: inline-flex; vertical-align: middle; stroke-width: 2; } i[data-lucide] svg { width: 100%; height: 100%; } button, input, select { font-family: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } /* ─── Theme tokens ───────────────────────────────────────────── */ [data-theme="dark"] { --bg: #0a0d14; --bg-elev: #0e1320; --surface: #131927; --surface-2: #1a2133; --border: #1f2940; --border-2: #2a3556; --text: #e8edf7; --text-2: #b8c1d6; --muted: #6b7693; --accent: #10b981; --accent-2: #34d399; --blue: #60a5fa; --orange: #fb923c; --amber: #fbbf24; --red: #f87171; --purple: #a78bfa; --shadow: 0 4px 24px -8px rgba(0,0,0,.5); --shadow-lg: 0 12px 40px -12px rgba(0,0,0,.6); --grid-line: rgba(255,255,255,.04); } [data-theme="light"] { --bg: #f6f8fc; --bg-elev: #ffffff; --surface: #ffffff; --surface-2: #f1f5f9; --border: #e4e8f0; --border-2: #cbd5e1; --text: #0f172a; --text-2: #334155; --muted: #64748b; --accent: #059669; --accent-2: #10b981; --blue: #2563eb; --orange: #ea580c; --amber: #d97706; --red: #dc2626; --purple: #7c3aed; --shadow: 0 4px 12px -4px rgba(15,23,42,.08); --shadow-lg: 0 10px 32px -8px rgba(15,23,42,.12); --grid-line: rgba(15,23,42,.05); } html { transition: background .25s; } /* ─── Splash loader ──────────────────────────────────────────── */ .splash { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; transition: opacity .4s, visibility .4s; } .splash.out { opacity: 0; visibility: hidden; pointer-events: none; } .splash-ring { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: spin .8s linear infinite; } .splash-text { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); } @keyframes spin { to { transform: rotate(360deg); } } /* ─── Topbar ─────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 32px; padding: 14px 24px; background: color-mix(in srgb, var(--bg-elev) 85%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.02em; user-select: none; } .brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: pulse 2s ease-in-out infinite; } .brand-text-accent { color: var(--accent); } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.5); } } .tabs { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px; } .tab { padding: 8px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--text-2); transition: all .15s; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; } .tab i[data-lucide] { width: 15px; height: 15px; } .tab:hover { color: var(--text); background: var(--surface-2); } .tab.active { background: var(--accent); color: white; font-weight: 600; box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 60%, transparent); } .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; } .pulse-indicator { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2s ease-in-out infinite; } .last-updated { font-size: 12.5px; color: var(--muted); } .icon-btn { width: 34px; height: 34px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; transition: all .15s; } .icon-btn i[data-lucide] { width: 16px; height: 16px; } .icon-btn:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent); transform: translateY(-1px); } /* ─── Toast ──────────────────────────────────────────────────── */ .toast { position: fixed; top: 80px; left: 50%; transform: translateX(-50%) translateY(-12px); padding: 10px 18px; border-radius: 10px; background: color-mix(in srgb, var(--red) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); color: var(--red); font-family: 'JetBrains Mono', monospace; font-size: 12px; z-index: 200; opacity: 0; visibility: hidden; transition: all .25s; max-width: 80vw; text-align: center; } .toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* ─── Main view container — FULL WIDTH ──────────────────────── */ .view { width: 100%; padding: 16px 20px 32px; animation: fadeIn .35s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } } @media (min-width: 1600px) { .view { padding: 16px 32px 32px; } } /* ─── Section primitives ─────────────────────────────────────── */ .section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 12px; } .row { display: grid; gap: 12px; } .row-6 { grid-template-columns: repeat(6, 1fr); } .row-5 { grid-template-columns: repeat(5, 1fr); } .row-4 { grid-template-columns: repeat(4, 1fr); } .row-3 { grid-template-columns: repeat(3, 1fr); } .row-2 { grid-template-columns: 1fr 1fr; } .row-2-13 { grid-template-columns: 1fr 3fr; } .row-2-21 { grid-template-columns: 2fr 1fr; } .row-2-31 { grid-template-columns: 3fr 1fr; } .row-3-211 { grid-template-columns: 2fr 1fr 1fr; } @media (max-width: 1400px) { .row-6 { grid-template-columns: repeat(4, 1fr); } .row-5 { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 1100px) { .row-6, .row-5 { grid-template-columns: repeat(3, 1fr); } .row-4 { grid-template-columns: repeat(2, 1fr); } .row-3, .row-3-211 { grid-template-columns: repeat(2, 1fr); } .row-2-13, .row-2-21, .row-2-31 { grid-template-columns: 1fr; } } @media (max-width: 700px) { .row-6, .row-5, .row-4, .row-3, .row-3-211, .row-2 { grid-template-columns: 1fr; } .view { padding: 12px; } .topbar { gap: 12px; padding: 12px 16px; flex-wrap: wrap; } .last-updated { display: none; } } /* ─── Card ───────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; position: relative; transition: border-color .15s, transform .15s; } .card:hover { border-color: var(--border-2); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .card-title { font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; } .card-title i[data-lucide] { width: 16px; height: 16px; color: var(--accent); } .card-tag { font-size: 11.5px !important; padding: 3px 10px !important; } .card-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; background: var(--surface-2); color: var(--muted); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); } /* ─── KPI ────────────────────────────────────────────────────── */ .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; position: relative; overflow: hidden; transition: transform .15s, border-color .15s, box-shadow .15s; } .kpi:hover { transform: translateY(-2px); border-color: var(--border-2); } .kpi.clickable { cursor: pointer; } .kpi.clickable:hover { border-color: var(--accent); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 55%, transparent); } .kpi-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 14px 14px 0 0; } .kpi-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 6px; } .kpi-value { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; } .kpi-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); margin-top: 6px; } .kpi-icon { position: absolute; right: 14px; top: 14px; font-size: 20px; opacity: .12; } /* ─── Chart container ────────────────────────────────────────── */ .chart-area { position: relative; height: 220px; } .chart-area.tall { height: 280px; } /* ─── Filter bar ─────────────────────────────────────────────── */ .filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 16px; } .filter-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); } .filter-divider { width: 1px; height: 18px; background: var(--border); margin: 0 4px; } .pill { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-2); transition: all .12s; } .pill:hover { border-color: var(--accent); color: var(--accent); } .pill.on { background: var(--accent); border-color: var(--accent); color: white; font-weight: 600; } .search-wrap { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; min-width: 220px; } .search-wrap:focus-within { border-color: var(--accent); } .search-wrap input { flex: 1; background: transparent; border: none; outline: none; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text); } .search-wrap input::placeholder { color: var(--muted); } /* ─── Table ──────────────────────────────────────────────────── */ .table-wrap { overflow: auto; max-height: 600px; } table { width: 100%; border-collapse: collapse; } thead { position: sticky; top: 0; background: var(--surface); z-index: 1; } th { text-align: left; white-space: nowrap; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--border); } td { padding: 13px 14px; font-size: 15px; border-bottom: 1px solid var(--border); vertical-align: middle; } tr { transition: background .1s; } tbody tr.clickable { cursor: pointer; } tbody tr.clickable:hover { background: color-mix(in srgb, var(--accent) 5%, var(--surface-2)); } td.tight { font-family: 'JetBrains Mono', monospace; color: var(--text-2); font-size: 14px; } td.name { font-weight: 600; font-size: 15px; } /* ─── Badges ─────────────────────────────────────────────────── */ .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .badge-incoming, .badge-inbound { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .badge-outgoing, .badge-outbound { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); } .badge-missed { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); } .badge-default { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); } .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .dot-online { background: var(--accent); box-shadow: 0 0 6px var(--accent); } .dot-offline { background: var(--muted); } .dot-busy { background: var(--amber); } /* ─── Pager ──────────────────────────────────────────────────── */ .pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; } .pager-info { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); } .btn { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); transition: all .12s; } .btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .btn:disabled { opacity: .35; cursor: not-allowed; } /* ─── Agent grid (cards) ─────────────────────────────────────── */ .agent-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .agent-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; cursor: pointer; transition: all .15s; } .agent-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); } .agent-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .agent-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; background: color-mix(in srgb, var(--accent) 15%, var(--surface-2)); color: var(--accent); flex-shrink: 0; } .agent-name { font-weight: 600; font-size: 14px; } .agent-meta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--muted); margin-top: 2px; } .agent-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .agent-stat-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .agent-stat-value { font-size: 16px; font-weight: 700; margin-top: 2px; font-family: 'JetBrains Mono', monospace; } /* ─── Activity feed (mixed timeline) ─────────────────────────── */ .feed { display: flex; flex-direction: column; gap: 8px; max-height: 600px; overflow-y: auto; padding-right: 4px; } .feed-item { display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; background: var(--bg-elev); border: 1px solid var(--border); transition: border-color .12s; } .feed-item:hover { border-color: var(--border-2); } .feed-icon { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; } .feed-icon-call { background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--blue); } .feed-icon-sms { background: color-mix(in srgb, var(--purple) 18%, transparent); color: var(--purple); } .feed-main { min-width: 0; overflow: hidden; } .feed-line1 { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .feed-line2 { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--muted); margin-top: 3px; } .feed-time { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--muted); white-space: nowrap; } .feed-icon { width: 30px !important; height: 30px !important; font-size: 14px !important; } /* ─── Empty state ────────────────────────────────────────────── */ .empty { text-align: center; padding: 48px 16px; font-family: 'JetBrains Mono', monospace; font-size: 13.5px; color: var(--muted); } /* ─── Skeleton (loading) ─────────────────────────────────────── */ .skeleton { background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; display: inline-block; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ─── Modal (drill-down) ─────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 100; display: none; animation: fadeIn .18s; } .modal-backdrop.show { display: flex; align-items: flex-start; justify-content: center; padding: 32px 16px; overflow-y: auto; } .modal { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 16px; padding: 0; max-width: 1200px; width: 100%; max-height: calc(100vh - 64px); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: modalIn .22s ease; } @keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } } .modal-header { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .modal-header-title { flex: 1; min-width: 0; } .modal-header-name { font-size: 20px; font-weight: 700; } .modal-header-meta { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--muted); margin-top: 5px; } .modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 16px; } .modal-close { font-size: 18px; color: var(--muted); width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); flex-shrink: 0; } .modal-close:hover { background: var(--surface-2); color: var(--text); } .modal-tabs { display: flex; gap: 4px; padding: 3px; background: var(--surface); border-radius: 999px; border: 1px solid var(--border); width: fit-content; } .modal-tab { padding: 7px 16px; border-radius: 999px; font-size: 13px; color: var(--text-2); transition: all .12s; } .modal-tab:hover { color: var(--text); background: var(--surface-2); } .modal-tab.active { background: var(--accent); color: white; font-weight: 600; } /* trend chip (used in KPIs) */ .trend { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 2px 7px; border-radius: 999px; margin-left: 6px; } .trend-up { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } .trend-down { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); } .trend-flat { background: var(--surface-2); color: var(--muted); } /* ─── Scrollbar ──────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-2); }