/* Janus Console — modern, no-build, hand-written design system. Phosphor icons are loaded from unpkg in base.html. Colors are CSS variables; light mode is default. Dark mode can be enabled via system preference or by adding .theme-dark to . */ :root { /* Backgrounds */ --bg-body: #f5f7fa; --bg-panel: #ffffff; --bg-elevated: #ffffff; --bg-elevated-hover: #f8fafc; --bg-sidebar: #0f172a; --bg-sidebar-hover: rgba(255, 255, 255, 0.06); --bg-sidebar-active: rgba(30, 58, 138, 0.35); --bg-input: #ffffff; /* Surfaces */ --border: #e2e8f0; --border-light: #f1f5f9; --border-strong: #cbd5e1; --divider: #e2e8f0; /* Text */ --text: #0f172a; --text-secondary: #475569; --text-muted: #64748b; --text-on-dark: #f8fafc; --text-on-dark-muted: #94a3b8; /* Accent */ --accent: #2563eb; --accent-600: #1d4ed8; --accent-50: #eff6ff; --accent-100: #dbeafe; --accent-glow: rgba(37, 99, 235, 0.22); /* Status */ --good: #16a34a; --good-50: #f0fdf4; --good-100: #dcfce7; --warn: #ca8a04; --warn-50: #fefce8; --warn-100: #fef9c3; --bad: #dc2626; --bad-50: #fef2f2; --bad-100: #fee2e2; --info: #2563eb; /* Chart */ --chart-grid: #e2e8f0; --chart-text: #475569; --chart-tooltip-bg: #0f172a; /* Misc */ --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04); --shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.07), 0 1px 2px -1px rgba(15, 23, 42, 0.07); --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06); --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05); --shadow-float: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08); --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; --transition: 140ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 260ms cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-color-scheme: dark) { :root:not(.theme-light) { --bg-body: #0b1120; --bg-panel: #111827; --bg-elevated: #1e293b; --bg-elevated-hover: #334155; --bg-sidebar: #020617; --bg-sidebar-hover: rgba(255, 255, 255, 0.07); --bg-sidebar-active: rgba(37, 99, 235, 0.22); --bg-input: #0f172a; --border: #1e293b; --border-light: #172033; --border-strong: #334155; --divider: #1e293b; --text: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; --text-on-dark: #f8fafc; --text-on-dark-muted: #94a3b8; --accent: #3b82f6; --accent-600: #60a5fa; --accent-50: rgba(59, 130, 246, 0.12); --accent-100: rgba(59, 130, 246, 0.18); --accent-glow: rgba(59, 130, 246, 0.35); --good: #22c55e; --good-50: rgba(34, 197, 94, 0.12); --good-100: rgba(34, 197, 94, 0.18); --warn: #eab308; --warn-50: rgba(234, 179, 8, 0.12); --warn-100: rgba(234, 179, 8, 0.18); --bad: #ef4444; --bad-50: rgba(239, 68, 68, 0.12); --bad-100: rgba(239, 68, 68, 0.18); --info: #3b82f6; --chart-grid: #1e293b; --chart-text: #94a3b8; --chart-tooltip-bg: #1e293b; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.3); --shadow-float: 0 20px 25px -5px rgba(0, 0, 0, 0.45), 0 8px 10px -6px rgba(0, 0, 0, 0.4); } } .theme-dark { --bg-body: #0b1120; --bg-panel: #111827; --bg-elevated: #1e293b; --bg-elevated-hover: #334155; --bg-sidebar: #020617; --bg-sidebar-hover: rgba(255, 255, 255, 0.07); --bg-sidebar-active: rgba(37, 99, 235, 0.22); --bg-input: #0f172a; --border: #1e293b; --border-light: #172033; --border-strong: #334155; --divider: #1e293b; --text: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; --text-on-dark: #f8fafc; --text-on-dark-muted: #94a3b8; --accent: #3b82f6; --accent-600: #60a5fa; --accent-50: rgba(59, 130, 246, 0.12); --accent-100: rgba(59, 130, 246, 0.18); --accent-glow: rgba(59, 130, 246, 0.35); --good: #22c55e; --good-50: rgba(34, 197, 94, 0.12); --good-100: rgba(34, 197, 94, 0.18); --warn: #eab308; --warn-50: rgba(234, 179, 8, 0.12); --warn-100: rgba(234, 179, 8, 0.18); --bad: #ef4444; --bad-50: rgba(239, 68, 68, 0.12); --bad-100: rgba(239, 68, 68, 0.18); --info: #3b82f6; --chart-grid: #1e293b; --chart-text: #94a3b8; --chart-tooltip-bg: #0f172a; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.3); --shadow-float: 0 20px 25px -5px rgba(0, 0, 0, 0.45), 0 8px 10px -6px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: var(--bg-body); transition: background-color var(--transition-slow), color var(--transition-slow); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ---- Layout ---- */ .layout { display: flex; min-height: 100vh; } .sidebar { width: 260px; flex: 0 0 260px; background: radial-gradient(circle at 20% 0%, rgba(37, 99, 235, 0.18) 0%, transparent 35%), radial-gradient(circle at 100% 100%, rgba(124, 58, 237, 0.10) 0%, transparent 30%), var(--bg-sidebar); color: var(--text-on-dark); display: flex; flex-direction: column; padding: 0 0 1rem; border-right: 1px solid rgba(255, 255, 255, 0.06); position: relative; } .sidebar::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 25%); } .brand { display: flex; align-items: center; gap: .75rem; padding: 1.15rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); position: relative; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius); background: linear-gradient(135deg, var(--accent), #4f46e5); color: #fff; font-size: 1.2rem; box-shadow: 0 0 16px rgba(37, 99, 235, 0.35); transition: transform var(--transition), box-shadow var(--transition); } .brand:hover .brand-mark { box-shadow: 0 0 24px rgba(37, 99, 235, 0.55); transform: scale(1.06); } .brand-text { font-size: 1.25rem; font-weight: 800; letter-spacing: .01em; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.25); } .brand-text small { display: block; font-size: .68rem; font-weight: 600; color: var(--text-on-dark-muted); letter-spacing: .07em; text-transform: uppercase; margin-top: -0.15rem; } .nav-group { padding: 1rem 0 .25rem; position: relative; } .nav-group h6 { margin: 0; padding: 0 1.25rem .45rem; font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-on-dark-muted); font-weight: 700; } .nav-group a { display: flex; align-items: center; gap: .75rem; padding: .6rem 1.15rem; margin: 0 .5rem; color: var(--text-on-dark-muted); font-size: .88rem; border-radius: var(--radius); transition: background var(--transition), color var(--transition), transform var(--transition); } .nav-group a i { font-size: 1.15rem; transition: transform var(--transition), color var(--transition); } .nav-group a:hover { background: var(--bg-sidebar-hover); color: var(--text-on-dark); text-decoration: none; transform: translateX(3px); } .nav-group a:hover i { transform: translateY(-2px); color: #fff; } .nav-group a.active { background: linear-gradient(90deg, var(--bg-sidebar-active), rgba(255,255,255,0.02)); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); } .nav-group a.active i { color: #fff; } .nav-footer { margin-top: auto; padding-top: 1rem; position: relative; } .main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 1.5rem; background: color-mix(in srgb, var(--bg-panel) 85%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); transition: background-color var(--transition-slow), border-color var(--transition-slow); } .topbar-left, .topbar-right { display: flex; align-items: center; gap: .75rem; } .breadcrumbs { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--text-muted); } .breadcrumbs .sep { font-size: .8rem; color: var(--border-strong); } .breadcrumbs .crumb-current { color: var(--text); font-weight: 700; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text-secondary); cursor: pointer; font-size: 1.15rem; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition); } .theme-toggle:hover { background: var(--bg-elevated-hover); color: var(--accent); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 14px var(--accent-glow); } .theme-toggle i { transition: transform var(--transition); } .theme-toggle:hover i { transform: rotate(20deg) scale(1.1); } .who { display: inline-flex; align-items: center; gap: .45rem; color: var(--text-secondary); font-size: .85rem; } .who i { font-size: 1.3rem; color: var(--text-muted); } .content { padding: 1.5rem; flex: 1 1 auto; } /* hamburger + scrim: hidden until the sidebar collapses */ .nav-btn, .nav-scrim { display: none; } @media (max-width: 900px) { .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; overflow-y: auto; transform: translateX(-100%); transition: transform .2s ease; } #nav-toggle:checked ~ .layout .sidebar { transform: translateX(0); } #nav-toggle:checked ~ .layout .nav-scrim { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(15, 23, 42, .45); } .nav-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-panel); color: var(--text); font-size: 1.2rem; cursor: pointer; } .topbar-right .who-name { display: none; } .topbar-right .who-logout { display: none; } .topbar-right .btn-ghost { padding: .4rem; } .content { padding: 1rem; } } /* ---- Page head ---- */ .page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap; } .page-head h1 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; } .head-actions { display: flex; gap: .5rem; flex-wrap: wrap; } /* One kill switch and its buttons, stacked inside a card (Firewall page). Each row after the first gets a divider so the switches read as separate controls rather than one block of buttons. */ .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .85rem 0; } .switch-row + .switch-row { border-top: 1px solid var(--border); } .switch-row:first-child { padding-top: 0; } .switch-row:last-child { padding-bottom: 0; } .switch-label { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .switch-label .page-desc { width: 100%; } .page-desc { margin: -0.35rem 0 1.25rem; max-width: 76ch; color: var(--text-secondary); font-size: .88rem; line-height: 1.6; } /* A short note under a chart or table - e.g. "no samples yet", "dashed = concurrent calls". Was never actually styled despite being used across several pages (dashboard, SIP capture detail, settings, TLS cert), so it rendered as a bare, oversized default

- full browser margins and body-size text sitting under a compact 13px UI. That mismatch was doing real damage to perceived density on pages with several of these stacked. */ .help-text { margin: .5rem 0 0; color: var(--text-secondary); font-size: .8rem; line-height: 1.5; } /* Inline icon, not flex - a help-text paragraph mixes plain text with // that all need to wrap together as one sentence, which a flex container would break into separate anonymous items instead. */ .help-text i { margin-right: .3rem; color: var(--text-muted); } .help-text code { background: var(--bg-body); border: 1px solid var(--border); padding: .05rem .3rem; border-radius: var(--radius-sm); font-size: .85em; } .help-text.bad { color: var(--bad); } .help-text.bad i { color: var(--bad); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; cursor: pointer; padding: .5rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--bg-panel); color: var(--text); font-size: .85rem; font-weight: 500; box-shadow: var(--shadow-sm); transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition); } .btn i { font-size: 1rem; } .btn:hover { text-decoration: none; border-color: var(--accent); background: var(--bg-elevated-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(1px); } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-600)); border-color: transparent; color: #fff; box-shadow: 0 4px 12px var(--accent-glow); } .btn-primary:hover { background: linear-gradient(135deg, var(--accent-600), var(--accent)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px var(--accent-glow); } .btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; } .btn-danger:hover { background: #b91c1c; border-color: #b91c1c; } .btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-secondary); } .btn-ghost:hover { background: var(--bg-elevated-hover); border-color: var(--border); color: var(--text); } .btn-sm { padding: .32rem .65rem; font-size: .78rem; } /* ---- Cards ---- */ .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--shadow); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background-color var(--transition-slow); } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .card h2 { margin: 0 0 1rem; font-size: 1rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: .4rem; } /* ---- Stats ---- */ .stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 1.5rem; } @media (min-width: 1200px) { .stat-grid { grid-template-columns: repeat(7, 1fr); } } .stat { display: flex; align-items: center; gap: .9rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: .95rem 1rem; box-shadow: var(--shadow); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background-color var(--transition-slow); } .stat:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); } .stat-orb { flex: 0 0 auto; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 12px; background: var(--orb-bg, var(--accent-50)); color: var(--orb, var(--accent)); font-size: 1.25rem; transition: transform var(--transition), box-shadow var(--transition), color var(--transition), background-color var(--transition); box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.18); } .theme-dark .stat-orb { box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.45); } .stat:hover .stat-orb { transform: scale(1.08) rotate(-2deg); } .stat-body { flex: 1 1 auto; min-width: 0; } .stat .n { font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .stat .l { color: var(--text-muted); font-size: .78rem; margin-top: .2rem; white-space: nowrap; } .stat-arrow { flex: 0 0 auto; color: var(--text-muted); font-size: 1rem; opacity: 0; transform: translateX(-4px); transition: opacity var(--transition), transform var(--transition), color var(--transition); } .stat:hover .stat-arrow { opacity: 1; transform: translateX(0); color: var(--accent); } .stat.warn .n { color: var(--warn); } .stat.bad .n { color: var(--bad); } .stat.warn .stat-orb { --orb: var(--warn); --orb-bg: var(--warn-50); } .stat.bad .stat-orb { --orb: var(--bad); --orb-bg: var(--bad-50); } #stat-nodes-tile.bad .n { color: var(--bad); } #stat-nodes-tile.warn .n { color: var(--warn); } /* ---- Card-style stat tiles mixed in chart grids ---- */ .stat-card { display: flex; flex-direction: column; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background-color var(--transition-slow); } .stat-card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow-float); } .stat-card h2 { margin: 0 0 .9rem; } .node-summary { display: flex; flex-direction: column; gap: .25rem; } .node-summary .node-count { font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--good); } .node-summary .node-up { color: var(--text-muted); font-size: .85rem; } /* ---- Charts ---- */ .chart-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .chart-box { position: relative; height: 260px; } /* Paired side-by-side in a chart-grid column rather than full page width - a shorter box keeps two charts from taking as much vertical space together as one full-width one used to alone. */ .chart-box-sm { height: 210px; } /* ---- Tables ---- */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); box-shadow: var(--shadow); } table.data { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg-panel); border-radius: var(--radius); overflow: hidden; } table.data th, table.data td { text-align: left; padding: .65rem .9rem; border-bottom: 1px solid var(--border-light); font-size: .85rem; white-space: nowrap; } table.data th { background: var(--bg-body); font-weight: 700; color: var(--text-secondary); text-transform: uppercase; font-size: .7rem; letter-spacing: .05em; } table.data tbody tr:last-child td { border-bottom: none; } table.data tbody tr:hover td { background: var(--bg-elevated-hover); } table.data td a { font-weight: 500; } td.actions { text-align: right; } td.actions .btn { margin-left: .25rem; } .tag { display: inline-block; padding: .12rem .45rem; border-radius: var(--radius); background: var(--accent-50); color: var(--accent); font-size: .78rem; line-height: 1.3; } /* ---- Datagrid ---- A denser table.data with column rules, a frozen header and sortable columns. The wrapper scrolls in both directions rather than the page, so `position: sticky` has something to stick to - a header that scrolls away is the one thing that makes a wide grid unreadable. */ .datagrid-wrap { overflow: auto; max-height: 72vh; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); box-shadow: var(--shadow); } .datagrid { font-variant-numeric: tabular-nums; } .datagrid th, .datagrid td { padding: .45rem .7rem; border-right: 1px solid var(--border-light); } .datagrid th:last-child, .datagrid td:last-child { border-right: none; } .datagrid thead th { position: sticky; top: 0; z-index: 2; padding: 0; /* Opaque: rows scroll underneath it. */ background: var(--bg-elevated); border-bottom: 1px solid var(--border-strong); } .datagrid thead th a { display: flex; align-items: center; gap: .3rem; padding: .5rem .7rem; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; white-space: nowrap; } .datagrid thead th a:hover { background: var(--bg-elevated-hover); text-decoration: none; } .datagrid thead th.sorted { color: var(--accent); } /* The idle arrows are a hint, not decoration - visible enough to say the column is clickable, faint enough not to compete with the active one. */ .datagrid thead th .sort-hint { opacity: 0; transition: opacity var(--transition); } .datagrid thead th:hover .sort-hint { opacity: .45; } .datagrid tbody tr:nth-child(even) td { background: var(--bg-elevated); } .datagrid tbody tr:hover td { background: var(--accent-50); } .datagrid tbody tr[data-href] { cursor: pointer; } .datagrid td.num { text-align: right; } .datagrid td.mono, .datagrid th.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .datagrid td.mono { font-size: .8rem; color: var(--text-secondary); } /* Long URIs and Call-IDs get a bounded column with the full value on hover, instead of pushing every other column off-screen. */ .datagrid td.ellipsis { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 900px) { .datagrid-wrap { max-height: none; } .datagrid td.ellipsis { max-width: 14ch; } } /* ---- Progress meters ---- */ .meter { display: inline-flex; align-items: center; width: 110px; height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; vertical-align: middle; margin-right: .5rem; } .meter > span { display: block; height: 100%; background: var(--good); border-radius: 4px; } .meter.warn > span { background: var(--warn); } .meter.bad > span { background: var(--bad); } /* ---- Filter bar ---- */ .filter-bar { display: flex; gap: .75rem; flex-wrap: wrap; align-items: end; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.1rem; margin-bottom: 1.25rem; box-shadow: var(--shadow); } .filter-bar .field { margin: 0; } .filter-bar label { font-size: .72rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; } .filter-bar input, .filter-bar select { padding: .45rem .6rem; border-color: var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-input); color: var(--text); } /* ---- Pills / badges ---- */ .pill { display: inline-flex; align-items: center; gap: .25rem; padding: .18rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pill.answered { background: var(--good-100); color: var(--good); } .pill.failed { background: var(--bad-100); color: var(--bad); } .pill.cancelled { background: var(--warn-100); color: var(--warn); } .pill.inbound { background: var(--accent-100); color: var(--accent-600); } .pill.outbound { background: rgba(126, 34, 206, 0.12); color: #a855f7; } .pill.onnet { background: rgba(8, 145, 178, 0.12); color: #0891b2; } /* A DID forward's outbound leg - warn-toned rather than a fresh hue, deliberately: like "cancelled", it flags a call that didn't take the plain path (inbound/outbound/on-net), worth a second glance rather than alarming (that's what failed/attack are for). */ .pill.redirect { background: var(--warn-100); color: var(--warn); } .pill.suspicious { background: var(--warn-100); color: var(--warn); } .pill.attack { background: var(--bad-100); color: var(--bad); } /* ---- Meter ---- */ .meter { background: var(--border); } /* ---- Forms ---- */ form.model-form { max-width: 680px; } .field { margin-bottom: 1.1rem; } .field label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .85rem; color: var(--text-secondary); } .field input[type=text], .field input[type=number], .field input[type=password], .field input[type=email], .field input[type=date], .field select, .field textarea { width: 100%; padding: .55rem .7rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; background: var(--bg-input); color: var(--text); transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition-slow); } .field textarea { min-height: 100px; } .field .help { color: var(--text-muted); font-size: .81rem; margin-top: .3rem; line-height: 1.5; } .field .errs { color: var(--bad); font-size: .82rem; margin-top: .3rem; } .field.disabled input { background: var(--bg-body); color: var(--text-muted); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-100); } .form-actions { display: flex; gap: .6rem; margin-top: 1.5rem; } .readonly-block { background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1.25rem; font-size: .85rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem 1.5rem; } .readonly-block dt { color: var(--text-muted); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; } .readonly-block dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); } /* ---- Messages / alerts ---- */ .messages { margin: 0 0 1.25rem; } .alert { display: flex; align-items: center; gap: .65rem; padding: .8rem 1rem; border-radius: var(--radius); margin-bottom: .6rem; font-size: .88rem; border: 1px solid transparent; backdrop-filter: blur(4px); } .alert i { font-size: 1.1rem; } .alert.success { background: var(--good-50); border-color: var(--good); color: var(--good); } .alert.warning { background: var(--warn-50); border-color: var(--warn); color: var(--warn); } .alert.error { background: var(--bad-50); border-color: var(--bad); color: var(--bad); } .alert.info { background: var(--accent-50); border-color: var(--accent); color: var(--accent-600); } /* ---- Pager ---- */ .pager { margin-top: 1.25rem; display: flex; gap: .5rem; align-items: center; font-size: .85rem; color: var(--text-secondary); } /* ---- Fieldsets ---- */ details.fieldset { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-body); padding: 0 1rem; margin-bottom: 1rem; } details.fieldset > summary { cursor: pointer; list-style: none; padding: .7rem 0; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); display: flex; align-items: center; gap: .4rem; } details.fieldset > summary::-webkit-details-marker { display: none; } details.fieldset > summary::before { content: "\25B8\00a0"; } details.fieldset[open] > summary::before { content: "\25BE\00a0"; } details.fieldset[open] { padding-bottom: .5rem; } .form-error { background: var(--bad-50); border: 1px solid var(--bad-100); color: var(--bad); padding: .75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .88rem; } .form-note { color: var(--text-muted); font-size: .8rem; margin: .2rem 0 .6rem; } .req { color: var(--bad); font-weight: 700; } .btn-lg { padding: .65rem 1.35rem; font-size: .95rem; } /* ---- Wizard ---- */ .wizard-steps { display: flex; list-style: none; padding: 0; margin: 0 0 1.5rem; gap: .6rem; font-size: .85rem; font-weight: 600; color: var(--text-muted); flex-wrap: wrap; } .wizard-steps li { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem .35rem .35rem; border-radius: 999px; background: var(--bg-body); border: 1px solid var(--border); transition: background var(--transition), border-color var(--transition), color var(--transition); } .wizard-steps li .step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--border); color: var(--text-secondary); font-size: .72rem; } .wizard-steps li.active { background: var(--accent); color: #fff; border-color: var(--accent); } .wizard-steps li.active .step-num { background: #fff; color: var(--accent); } .wizard-steps li.complete { background: var(--good-50); color: var(--good); border-color: var(--good-100); } .wizard-steps li.complete .step-num { background: var(--good); color: #fff; } .wizard-form { max-width: 720px; } .wizard-step { opacity: 1; transition: opacity .2s ease; } .wizard-step.hidden { display: none; opacity: 0; } .wizard-section { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border-light); } .wizard-step:last-child .wizard-section { border-bottom: none; margin-bottom: 0; } .wizard-section .section-title { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; } .step-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .8rem; font-weight: 700; } .wizard-section h2 { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--text); } .step-desc { color: var(--text-secondary); font-size: .86rem; margin: 0 0 1rem; line-height: 1.55; } .wizard-fields.two-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1rem; } @media (max-width: 600px) { .wizard-fields.two-col { grid-template-columns: 1fr; } } .auth-choice { background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1rem; } .auth-choice .field { margin-bottom: 0; } .auth-choice .field label { margin-bottom: .1rem; } .auth-choice .field .help { margin-top: .2rem; } .auth-choice ul { margin: 0; padding-left: 0; list-style: none; } .auth-choice ul li { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .4rem; } .auth-choice ul li:last-child { margin-bottom: 0; } .auth-panel { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; background: var(--bg-panel); margin-bottom: .75rem; display: none; animation: panelIn .2s ease; } @keyframes panelIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .auth-panel.active { display: block; } .auth-panel .panel-header { display: flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .88rem; color: var(--text-secondary); margin-bottom: .75rem; } .auth-panel .panel-header i { color: var(--accent); font-size: 1.1rem; } .wizard-step-errors { display: flex; align-items: flex-start; gap: .6rem; background: var(--bad-50); border: 1px solid var(--bad-100); border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: 1rem; font-size: .85rem; color: var(--bad); } .wizard-step-errors.hidden { display: none; } .wizard-step-errors i { font-size: 1.1rem; flex: 0 0 auto; } .wizard-step-errors ul { margin: 0; padding-left: 1.1rem; } .wizard-step-errors li { margin-bottom: .2rem; } .wizard-actions { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border-light); } .wizard-review { max-width: 820px; } .review-header { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1.25rem; } .review-header i { font-size: 1.6rem; color: var(--good); flex: 0 0 auto; } .review-header h2 { margin: 0 0 .25rem; } .review-header p { margin: 0; color: var(--text-secondary); font-size: .88rem; } .review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; } .review-grid.compact { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; } .review-grid.compact .review-section { padding: .85rem 1rem; } .review-grid.compact dt { margin-bottom: .1rem; } .review-grid.compact dd { margin-bottom: .35rem; } .review-section { background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; } .review-section.wide { grid-column: 1 / -1; } .review-section h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .75rem; font-size: .85rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; } .review-section h3 i { font-size: 1rem; color: var(--accent); } .review-section dl { margin: 0; } .review-section dt { font-weight: 600; font-size: .75rem; color: var(--text-muted); margin-bottom: .15rem; } .review-section dd { margin: 0 0 .55rem; font-size: .88rem; color: var(--text); } .review-section dd code { font-size: .8em; } .review-section p { margin: 0; color: var(--text-secondary); font-size: .88rem; line-height: 1.55; } .wizard-help { display: flex; align-items: flex-start; gap: .6rem; background: var(--accent-50); border: 1px solid var(--accent-100); border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: 1.25rem; font-size: .85rem; color: var(--text-secondary); } .wizard-help i { color: var(--accent); font-size: 1.1rem; flex: 0 0 auto; } .wizard-help code { font-size: .8em; } .field input[type=password] { letter-spacing: .1em; } .field input[type=radio] { margin-right: .3rem; width: auto; } #wizard-actions .hidden { display: none; } .empty-state { text-align: center; padding: 3rem 1rem; } .empty-state p { color: var(--text-muted); margin: 0 0 1.25rem; font-size: .95rem; } .empty-state .btn { margin: .15rem .25rem; } .empty-state .big-icon { font-size: 3rem; color: var(--border); margin-bottom: .75rem; } .delete-target { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg-body); border: 1px solid var(--border); padding: .6rem .9rem; border-radius: var(--radius-sm); margin: 0 0 1rem; color: var(--text); } /* ---- Help / prose ---- */ .prose { max-width: 76ch; } .prose p { margin: 0 0 .8rem; line-height: 1.65; } .prose > ul { margin: 0 0 1rem; padding-left: 1.3rem; } .prose li { margin-bottom: .4rem; } .prose code, .page-desc code { background: var(--bg-body); border: 1px solid var(--border); padding: .05rem .35rem; border-radius: var(--radius-sm); font: .85em ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-secondary); } .prose em { font-style: normal; font-weight: 600; color: var(--text); } .term-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .term-head h2 { margin: 0 0 .6rem; } dl.term-fields { margin: .2rem 0 .6rem; } dl.term-fields dt { font-weight: 600; font-size: .85rem; color: var(--text-secondary); } dl.term-fields dd { margin: 0 0 .55rem; color: var(--text-muted); font-size: .85rem; } ol.wizard-doc-steps { margin: .2rem 0 .8rem; padding-left: 1.2rem; color: var(--text-secondary); font-size: .88rem; line-height: 1.6; } ol.wizard-doc-steps li { margin-bottom: .35rem; } ol.wizard-doc-steps li::marker { color: var(--accent); font-weight: 700; } ul.toc { margin: 0; padding-left: 1.1rem; font-size: .9rem; columns: 220px 2; column-gap: 2rem; } ul.toc li { margin-bottom: .4rem; } /* ---- Help centre ---- */ .help-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.25rem; align-items: start; } .help-sidebar { position: sticky; top: calc(56px + 1.25rem); max-height: calc(100vh - 80px); overflow-y: auto; padding: 1rem; } .help-sidebar h2 { margin: 0 0 .75rem; font-size: .95rem; font-weight: 600; } .help-nav { display: flex; flex-direction: column; gap: .15rem; } .help-nav a { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: var(--radius-sm); font-size: .85rem; color: var(--text-secondary); transition: background var(--transition), color var(--transition); } .help-nav a:hover { background: var(--accent-50); color: var(--accent-600); text-decoration: none; } .help-nav a i { font-size: 1rem; color: var(--accent); } .help-nav-heading { margin: .6rem 0 .2rem; padding: 0 .6rem; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); } .help-body { min-width: 0; } .help-call-flow h2, .help-term h2 { font-size: 1.15rem; font-weight: 700; } .flow-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: .5rem; } .flow-card { background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; } .flow-card h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .75rem; font-size: .95rem; font-weight: 600; color: var(--text); } .flow-card h3 i { color: var(--accent); } .flow-card ol { margin: 0; padding-left: 1.1rem; color: var(--text-secondary); font-size: .85rem; line-height: 1.6; } .flow-card li { margin-bottom: .45rem; } .flow-card li::marker { color: var(--accent); font-weight: 700; } .help-term { scroll-margin-top: calc(56px + 1rem); padding-bottom: 1.25rem; } .help-term-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; } .help-term-title { display: flex; align-items: center; gap: .55rem; } .help-term-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius); background: var(--accent-50); color: var(--accent); font-size: 1.15rem; } .help-term-title h2 { margin: 0; } .help-term-lead { margin: 0 0 1rem; color: var(--text-secondary); font-size: .95rem; line-height: 1.55; } .help-term-body { max-width: none; } .help-term-body p:last-child { margin-bottom: 0; } .help-section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border-light); } .help-section h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .75rem; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); } .help-section h3 i { font-size: 1rem; color: var(--accent); } .term-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; } .term-field-row { background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; } .term-field-row dt { font-weight: 600; font-size: .8rem; color: var(--text-secondary); margin-bottom: .25rem; } .term-field-row dd { margin: 0; color: var(--text-muted); font-size: .85rem; line-height: 1.55; } .wizard-doc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; } .wizard-doc-card { display: flex; gap: .75rem; background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; } .wizard-doc-step { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 700; } .wizard-doc-card strong { display: block; font-size: .88rem; color: var(--text); margin-bottom: .2rem; } .wizard-doc-card p { margin: 0; color: var(--text-muted); font-size: .83rem; line-height: 1.5; } .help-notes { margin: 0; padding-left: 1.2rem; color: var(--text-secondary); font-size: .88rem; line-height: 1.6; } .help-notes li { margin-bottom: .4rem; } .help-footer { margin-top: 1rem; } @media (max-width: 900px) { .help-layout { grid-template-columns: 1fr; } .help-sidebar { position: static; max-height: none; order: -1; } .help-nav { flex-direction: row; flex-wrap: wrap; gap: .35rem; } .help-nav-heading { width: 100%; margin-top: 0; } .help-nav a { width: auto; } } /* ---- Login ---- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.25) 0%, transparent 50%), radial-gradient(circle at 80% 90%, rgba(124, 58, 237, 0.18) 0%, transparent 35%), radial-gradient(circle at 50% 0%, #1e293b 0%, #0f172a 60%); padding: 1rem; } .login-card { background: var(--bg-panel); border-radius: var(--radius-xl); padding: 2.25rem; width: 380px; box-shadow: var(--shadow-float); border: 1px solid var(--border); } .login-card .brand { border: none; padding: 0 0 1.5rem; color: var(--text); justify-content: center; } .login-card .brand small { color: var(--text-muted); text-align: center; } .login-card .brand-mark { width: 44px; height: 44px; font-size: 1.45rem; } .login-error { background: var(--bad-50); border: 1px solid var(--bad-100); color: var(--bad); padding: .7rem .9rem; border-radius: var(--radius-sm); font-size: .85rem; margin-bottom: 1rem; } .login-sub { color: var(--text-muted); font-size: .82rem; margin-top: 1.25rem; text-align: center; } /* ---- Empty helpers ---- */ .empty { padding: 2.5rem; text-align: center; color: var(--text-muted); } /* Call firewall page ---------------------------------------------------- */ .fw-section { margin-bottom: 2rem; scroll-margin-top: calc(56px + 1rem); } .fw-section:last-child { margin-bottom: 0; } .fw-section-head { margin-bottom: 1.1rem; } .fw-section-head h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 700; } .fw-section-head h2 i { color: var(--accent); font-size: 1.25rem; } .fw-section-head .page-desc { margin-bottom: 0; } .fw-section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .4rem; } .fw-section-title-row h2 { margin-bottom: 0; } .firewall-switch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .firewall-switch-card { display: flex; flex-direction: column; gap: 1rem; } .firewall-switch-top { display: flex; align-items: flex-start; gap: .85rem; } .firewall-switch-top h3 { margin: 0 0 .35rem; font-size: .98rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .firewall-switch-top p { margin: 0; color: var(--text-secondary); font-size: .85rem; line-height: 1.55; } .firewall-switch-card .head-actions { margin-top: auto; padding-top: .25rem; } /* ---- Focus visibility ---- */ a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* stat tiles become links on the dashboard */ a.stat { display: block; color: inherit; } /* Captured SIP (HEP) --------------------------------------------------- */ .raw-row { padding: 0 !important; background: var(--bg-subtle); } .raw-row details { padding: .35rem .75rem; } .raw-row summary { cursor: pointer; font-size: .78rem; color: var(--text-secondary); user-select: none; } .raw-row summary:hover { color: var(--text); } .raw-sip { margin: .5rem 0 .25rem; padding: .75rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font-size: .78rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; max-height: 26rem; overflow-y: auto; } .truncate { display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* Call-flow ladder modal ----------------------------------------------- */ .flow-modal { width: min(1400px, 96vw); max-height: 92vh; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-float); overflow: hidden; } .flow-modal::backdrop { background: rgba(2, 6, 23, 0.62); } .flow-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg-elevated); position: sticky; top: 0; z-index: 3; } .flow-callid { margin-left: .6rem; font-size: .78rem; color: var(--text-secondary); } .flow-body { overflow: auto; max-height: calc(92vh - 3.1rem); padding: 0 1rem 1.5rem; } .flow-grid { position: relative; min-width: 640px; } /* Column headers, sticky so they stay readable on a long call. */ .flow-hosts { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: repeat(var(--flow-cols), 1fr); padding: .6rem 0 .5rem; background: var(--bg-panel); border-bottom: 1px solid var(--border); } .flow-host { text-align: center; font-size: .8rem; font-weight: 600; } .flow-host span { display: inline-block; padding: .15rem .5rem; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--border); } /* Vertical lifelines behind everything. */ .flow-lifelines { position: absolute; inset: 2.6rem 0 0; display: grid; grid-template-columns: repeat(var(--flow-cols), 1fr); pointer-events: none; z-index: 0; } .flow-lifeline { border-left: 1px dashed var(--border-strong); margin-left: 50%; } .flow-rows { position: relative; z-index: 1; padding-top: .5rem; } .flow-row { display: grid; padding: .3rem 0; } .flow-row:nth-child(odd) { background: color-mix(in srgb, var(--bg-elevated) 55%, transparent); } .flow-arrow { min-width: 0; padding: 0 .5rem; } .flow-arrow.unplaced { opacity: .65; } .flow-label { display: flex; flex-direction: column; line-height: 1.35; } .flow-row.rtl .flow-label { align-items: flex-end; text-align: right; } .flow-title { font-size: .86rem; font-weight: 700; } .flow-sdp { font-weight: 500; opacity: .8; } .flow-line { font-size: .74rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .flow-meta { font-size: .7rem; color: var(--text-muted); } /* The arrow itself: a rule with a head, ports pinned at each end. */ .flow-line-wrap { display: flex; align-items: center; gap: .35rem; margin-top: .15rem; } .flow-stroke { flex: 1; height: 0; border-top: 2px solid currentColor; position: relative; } .flow-stroke::after { content: ""; position: absolute; top: -4px; right: -1px; border: 5px solid transparent; border-left-color: currentColor; border-right: 0; } .flow-row.rtl .flow-stroke::after { right: auto; left: -1px; border-left: 0; border-right: 5px solid currentColor; } .flow-port { font-size: .68rem; color: var(--text-muted); flex: 0 0 auto; } /* Colour by message kind - same conventions a SIP ladder reader expects. */ .flow-arrow.k-invite { color: var(--accent); } .flow-arrow.k-req { color: var(--text-secondary); } .flow-arrow.k-end { color: #a855f7; } .flow-arrow.k-prov { color: var(--text-muted); } .flow-arrow.k-ok { color: var(--good); } .flow-arrow.k-redirect{ color: var(--warn); } .flow-arrow.k-fail { color: var(--bad); } .flow-arrow .flow-title { color: currentColor; } @media (max-width: 700px) { .flow-body { padding: 0 .4rem 1rem; } .flow-line { display: none; } } /* Per-call timing strip (captured SIP detail) --------------------------- */ .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin: 0 0 1rem; } .stat-cell { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .85rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .2rem; cursor: help; } .stat-cell-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } .stat-cell-value { font-size: 1.35rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .stat-cell-value small { font-size: .8rem; font-weight: 600; color: var(--text-secondary); } .stat-cell-none { color: var(--text-muted); font-weight: 500; } /* SIP address builder modal (call destinations) ------------------------- */ .uri-open { margin-top: .4rem; } .uri-modal { width: min(520px, 94vw); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-float); } .uri-modal::backdrop { background: rgba(2, 6, 23, 0.62); } .uri-modal-form { margin: 0; } .uri-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg-elevated); } .uri-modal-body { padding: 1rem; } .uri-modal-body .field { margin-bottom: .9rem; } .uri-modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } .uri-modal-error { margin: 0 0 .8rem; padding: .55rem .75rem; border-radius: var(--radius-sm); background: var(--bad-50); border: 1px solid var(--bad-100); color: var(--bad); font-size: .85rem; } /* The exact string that will be saved. Shown because the whole point of the builder is that the reader does not have to know SIP URI syntax - but they should still be able to see what it produced. */ .uri-modal-preview { padding: .6rem .75rem; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--border); } .uri-modal-preview-label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: .2rem; } .uri-modal-preview code { font-size: .85rem; word-break: break-all; } .uri-modal-actions { display: flex; gap: .5rem; padding: .8rem 1rem; border-top: 1px solid var(--border); background: var(--bg-elevated); } .uri-modal-actions .btn-primary[disabled] { opacity: .5; cursor: not-allowed; } /* Bulk add DIDs modal (DIDs page) -------------------------------------- */ .did-bulk-modal { width: min(640px, 94vw); max-height: 92vh; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-float); overflow: hidden; } .did-bulk-modal::backdrop { background: rgba(2, 6, 23, 0.62); } .did-bulk-form { margin: 0; } .did-bulk-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg-elevated); } .did-bulk-head strong { display: flex; align-items: center; gap: .4rem; font-size: 1rem; } .did-bulk-sub { display: block; font-size: .78rem; color: var(--text-muted); font-weight: 400; } .did-bulk-body { padding: 1rem; overflow-y: auto; max-height: calc(92vh - 7.2rem); } .did-bulk-actions { display: flex; gap: .5rem; padding: .8rem 1rem; border-top: 1px solid var(--border); background: var(--bg-elevated); } @media (max-width: 600px) { .did-bulk-body .wizard-fields.two-col { grid-template-columns: 1fr; } } @media (max-width: 480px) { .uri-modal-row { grid-template-columns: 1fr; } } /* AI analysis card (captured SIP detail) -------------------------------- */ .ai-card { margin-bottom: 1.25rem; } .ai-output { /* The model emits markdown-ish prose. Rendering it as HTML would mean trusting model output built from headers a caller controls, so it is shown as preformatted text instead - readable, and inert. */ white-space: pre-wrap; word-wrap: break-word; font-family: inherit; font-size: .9rem; line-height: 1.55; margin: 0 0 .75rem; padding: .9rem 1rem; background: var(--bg-elevated); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); max-height: 32rem; overflow-y: auto; } .ai-error { color: var(--bad); background: var(--bad-50); border: 1px solid var(--bad-100); border-radius: var(--radius); padding: .7rem .9rem; margin: 0 0 .75rem; font-size: .88rem; } .ai-waiting { display: flex; align-items: center; gap: .5rem; color: var(--text-secondary); font-size: .9rem; margin: 0 0 .75rem; } .ai-spin { animation: ai-spin 1.1s linear infinite; } @keyframes ai-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ai-spin { animation: none; } } /* Session info header (captured SIP detail) ----------------------------- */ .session-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin: 0 0 1.25rem; overflow: hidden; } .session-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; background: var(--bg-elevated); border-bottom: 1px solid var(--border); } .session-id { display: flex; align-items: baseline; gap: .5rem; min-width: 0; } .session-id-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); } /* Call-IDs are long and arbitrary; let it wrap rather than push the status pill off the row. */ .session-id code { word-break: break-all; font-size: .85rem; } .session-head-right { display: flex; align-items: center; gap: .6rem; } .session-span { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: .85rem; } .session-status { padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; } .session-status.s-ok { background: var(--good-100); color: var(--good); } .session-status.s-live { background: var(--accent-100); color: var(--accent); } .session-status.s-warn { background: var(--warn-100); color: var(--warn); } .session-status.s-bad { background: var(--bad-100); color: var(--bad); } .session-status.s-muted { background: var(--bg-elevated-hover); color: var(--text-muted); } .session-body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 1.25rem; padding: 1rem; } .session-agents { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: .9rem; } .session-agent { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .session-agent-role { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } .session-agent-name { font-weight: 600; word-break: break-word; } .session-agent-arrow { color: var(--text-muted); font-size: 1.1rem; } .session-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .7rem 1.25rem; margin: 0; } .session-facts > div { min-width: 0; } .session-facts > div.wide { grid-column: 1 / -1; } .session-facts dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: .15rem; } .session-facts dd { margin: 0; font-size: .9rem; word-break: break-word; } .session-facts dd code { font-size: .85rem; } .session-methods { display: flex; flex-direction: column; align-items: center; gap: .5rem; } .session-donut { width: 100%; height: 130px; } .session-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .7rem; font-size: .8rem; color: var(--text-secondary); } .session-legend li { display: flex; align-items: center; gap: .3rem; } .session-swatch { width: .6rem; height: .6rem; border-radius: 2px; /* Filled in by the chart script so swatch and slice always agree. */ background: var(--text-muted); } .session-strip { margin: 0; padding: 0 1rem 1rem; } .session-strip .stat-cell { background: var(--bg-elevated); } .session-note { margin: 0; padding: 0 1rem 1rem; } .attack-summary { margin-top: 1rem; padding: .9rem 1rem; background: var(--bad-50); border: 1px solid var(--bad-100); border-radius: var(--radius); } .attack-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .55rem; } .attack-head .attack-score { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--bad); } .attack-head .attack-count { font-size: .85rem; color: var(--text-secondary); } .attack-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; } .attack-reasons li { display: flex; align-items: baseline; gap: .4rem; font-size: .9rem; color: var(--text-primary); } .attack-reasons li i { color: var(--warn); flex-shrink: 0; } .attack-signals { margin-top: .7rem; padding: .6rem .75rem; background: var(--bg-elevated); border-radius: var(--radius); font-size: .85rem; } .attack-signals summary { cursor: pointer; color: var(--text-secondary); font-weight: 600; } .attack-signals dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .35rem 1rem; margin: .6rem 0 0; } .attack-signals dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); } .attack-signals dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--text-primary); } @media (max-width: 800px) { .session-body { grid-template-columns: minmax(0, 1fr); } }