/* ========================================================================= THEME TOKENS ========================================================================= Two palettes, one mechanism: an optional `data-theme="dark"` attribute on swaps the colour set. Absent attribute (or "light") = light theme, which is the new default. The toggle button + FOUC-prevention script in index.html keep this in sync with localStorage and the per-user `theme_preference` column surfaced by /api/whoami. Layout + typography tokens are SHARED (same in both themes) and live in the first :root block. The palette is split: light values in the same :root block (so they're the default), dark values overriding via :root[data-theme="dark"]. ========================================================================= */ :root { /* ---- Shared tokens (identical in both themes) ---- */ --sidebar-width: 240px; --radius: 4px; --radius-sm: 3px; --radius-lg: 4px; --transition: 0.15s ease; --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --font-head: 'Inter', system-ui, sans-serif; /* ---- LIGHT THEME (default) — formal billing-panel look ---- */ /* Backgrounds */ --bg: #f5f7fa; /* soft gray page background */ --card: #ffffff; /* sidebar, cards, panels */ --card-hover: #f0f3f7; --input-bg: #ffffff; /* Borders */ --border: #d1d5db; --border-light: #e5e7eb; /* Text */ --text: #1a1f2e; /* near-black — easier on eyes than pure #000 */ --text-secondary: #4b5563; --muted: #9ca3af; /* Primary — corporate blue accent */ --primary: #2563eb; --primary-hover: #1d4ed8; --primary-muted: rgba(37, 99, 235, 0.10); /* Semantic */ --success: #16a34a; --danger: #dc2626; --danger-hover: #b91c1c; --danger-muted: rgba(220, 38, 38, 0.10); --warning: #d97706; --warning-hover: #b45309; --warning-muted: rgba(217, 119, 6, 0.10); --info: #0ea5e9; --info-hover: #0284c7; --info-muted: rgba(14, 165, 233, 0.10); /* On-accent: text/icon colour drawn ON TOP of primary/danger fills. Dark theme overrides this to black (text on bright neon green). */ --on-accent: #ffffff; /* Real shadows — light surfaces need depth cues. Dark theme has none. */ --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05); --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04); /* Compatibility aliases for legacy variable names used in inline JS styles and per-page injected stylesheets (dialer, dashboard, recharge…). Both themes share them — they just re-point at the canonical tokens. */ --text-muted: var(--muted); --accent: var(--primary); --bg-elev: var(--card-hover); --border-soft: var(--border-light); /* Call-status (light-mode-saturation hues) */ --call-answered: #16a34a; --call-answered-bg: rgba(22, 163, 74, 0.10); --call-failed: #dc2626; --call-failed-bg: rgba(220, 38, 38, 0.10); --call-busy: #ea580c; --call-busy-bg: rgba(234, 88, 12, 0.10); --call-noanswer: #d97706; --call-noanswer-bg: rgba(217, 119, 6, 0.10); --call-cancelled: #6b7280; --call-cancelled-bg: rgba(107, 114, 128, 0.10); --call-ringing: #0284c7; --call-ringing-bg: rgba(2, 132, 199, 0.10); --call-trying: #ca8a04; --call-trying-bg: rgba(202, 138, 4, 0.10); --call-held: #7c3aed; --call-held-bg: rgba(124, 58, 237, 0.10); } /* ---- DARK THEME (original terminal aesthetic — preserved exactly) ---- */ :root[data-theme="dark"] { /* Backgrounds — pure black with subtle depth for layered surfaces */ --bg: #000000; --card: #050a05; --card-hover: #0a140a; --input-bg: #030503; /* Borders */ --border: #1c3a1c; --border-light: #2a5a2a; /* Text — phosphor green palette */ --text: #00ff41; --text-secondary: #00b32d; --muted: #1f5f1f; /* Semantic — all green except danger */ --primary: #00ff41; --primary-hover: #66ff7a; --primary-muted: rgba(0, 255, 65, 0.10); --success: #00ff41; --danger: #ff3344; --danger-hover: #ff6675; --danger-muted: rgba(255, 51, 68, 0.12); --warning: #c8ff00; --warning-hover: #d9ff4d; --warning-muted: rgba(200, 255, 0, 0.10); --info: #66ffaa; --info-hover: #99ffc8; --info-muted: rgba(102, 255, 170, 0.10); /* On-accent: black text reads cleanly on the bright neon-green button fills */ --on-accent: #000000; /* Terminal aesthetic — flat surfaces, no shadows */ --shadow: none; --shadow-lg: none; /* Call-status — preserved exact dark-theme values */ --call-answered: #00ff41; --call-answered-bg: rgba(0, 255, 65, 0.10); --call-failed: #ff3344; --call-failed-bg: rgba(255, 51, 68, 0.12); --call-busy: #ff9933; --call-busy-bg: rgba(255, 153, 51, 0.12); --call-noanswer: #ffcc33; --call-noanswer-bg: rgba(255, 204, 51, 0.12); --call-cancelled: #888a93; --call-cancelled-bg: rgba(136, 138, 147, 0.10); --call-ringing: #33ccff; --call-ringing-bg: rgba(51, 204, 255, 0.12); --call-trying: #ffe066; --call-trying-bg: rgba(255, 224, 102, 0.10); --call-held: #cc99ff; --call-held-bg: rgba(204, 153, 255, 0.12); } /* ===== Reset & Base ===== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior: none; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; overflow: hidden; height: 100vh; height: 100dvh; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-hover); text-decoration: underline; } input, select, textarea, button { font-family: inherit; font-size: inherit; color: var(--text); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 0; } ::-webkit-scrollbar-thumb:hover { background: var(--border-light); } /* Inverted selection — classic terminal */ ::selection { background: var(--primary); color: var(--on-accent); } /* ===== App Layout ===== */ #app { display: flex; height: 100vh; width: 100%; } /* ===== Sidebar ===== */ .sidebar { width: var(--sidebar-width); min-width: var(--sidebar-width); background: var(--card); border-right: 1px solid var(--border); display: flex; flex-direction: column; /* 100vh on mobile browsers includes the area behind the URL bar, which pushes the Logout button below the visible viewport. 100dvh tracks the visible area instead. Older browsers fall back to 100vh. */ height: 100vh; height: 100dvh; overflow-y: auto; overflow-x: hidden; z-index: 100; transition: transform var(--transition); } .sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; color: var(--primary); letter-spacing: 0.5px; } /* Uploaded image logo (Settings → Branding → Logo URL). Capped to a small square so a wide wordmark image can't blow out the header. */ .sidebar-logo .sidebar-brand-img { height: 32px; width: 32px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 0 1px var(--primary)); } /* Inline SVG wordmark generated from site_title. Takes the full header width; `preserveAspectRatio` in the SVG markup keeps it from clipping at narrow sidebar sizes. */ .sidebar-logo .sidebar-brand-svg { flex: 1 1 auto; width: 100%; height: 36px; display: block; min-width: 0; } .sidebar-nav { flex: 1; padding: 12px 10px; list-style: none; display: flex; flex-direction: column; gap: 6px; } .sidebar-nav-item { display: block; } .sidebar-nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all var(--transition); border: 1px solid var(--border); border-radius: var(--radius); background: transparent; text-decoration: none; user-select: none; } .sidebar-nav-link:hover { color: var(--text); border-color: var(--primary); background: var(--card-hover); text-decoration: none; } .sidebar-nav-link.active { color: var(--text); background: var(--primary-muted); border-color: var(--primary); text-decoration: none; } .sidebar-nav-icon { font-size: 1.05rem; width: 22px; text-align: center; flex-shrink: 0; color: var(--primary); } .sidebar-section-label { /* deprecated — section dividers removed from sidebar */ display: none; } /* Tree groups (admin sidebar). A group is a clickable header with a chevron that expands/collapses a nested list of child links. */ .sidebar-nav-group { display: block; } .sidebar-nav-group-header { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--text-secondary); font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; user-select: none; transition: all var(--transition); } .sidebar-nav-group-header:hover { color: var(--text); border-color: var(--primary); background: var(--card-hover); } .sidebar-nav-group-chevron { margin-left: auto; font-size: 0.8em; color: var(--text-muted); transition: transform var(--transition); } .sidebar-nav-group.open > .sidebar-nav-group-header .sidebar-nav-group-chevron { transform: rotate(90deg); } .sidebar-nav-group-body { list-style: none; margin: 6px 0 0 0; padding: 0 0 0 14px; display: none; flex-direction: column; gap: 6px; border-left: 1px dashed var(--border); margin-left: 14px; } .sidebar-nav-group.open > .sidebar-nav-group-body { display: flex; } .sidebar-nav-group-body .sidebar-nav-link { font-size: 0.85rem; padding: 8px 12px; } .sidebar-footer { padding: 12px; /* Add iOS safe-area inset so the Logout button stays clear of the home indicator on notched phones. Falls back to 0 on devices that don't expose the inset. */ padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); } .sidebar-logout-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; font-family: var(--font); font-size: 0.85rem; font-weight: 500; transition: all var(--transition); } .sidebar-logout-btn:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-muted); } /* Mobile sidebar toggle */ .sidebar-toggle { display: none; position: fixed; top: 12px; left: 12px; z-index: 200; background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 1.2rem; } /* ===== Main Content ===== */ .main-content { flex: 1; overflow-y: auto; overflow-x: hidden; height: 100vh; } .page-container { padding: 28px 32px; max-width: 1600px; min-height: 100%; } .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; } .page-title { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--text); letter-spacing: 0; line-height: 1.2; } .page-subtitle { font-size: 0.82rem; color: var(--text-secondary); margin-top: 4px; letter-spacing: 0.3px; } /* ===== Buttons — all outline-style for terminal feel ===== */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; background: transparent; border: 1px solid var(--primary); border-radius: var(--radius-sm); color: var(--primary); font-family: var(--font); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all var(--transition); white-space: nowrap; line-height: 1.4; text-transform: none; } .btn:hover { background: var(--primary-muted); color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary { border-color: var(--primary); color: var(--primary); } .btn-primary:hover { background: var(--primary-muted); color: var(--on-accent); background-color: var(--primary); } .btn-danger { border-color: var(--danger); color: var(--danger); } .btn-danger:hover { background: var(--danger-muted); color: var(--danger-hover); border-color: var(--danger-hover); } .btn-warning { border-color: var(--warning); color: var(--warning); } .btn-warning:hover { background: var(--warning-muted); color: var(--warning-hover); border-color: var(--warning-hover); } .btn-info { border-color: var(--info); color: var(--info); } .btn-info:hover { background: var(--info-muted); color: var(--info-hover); border-color: var(--info-hover); } .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); } .btn-outline:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-muted); } .btn-ghost { background: transparent; border: 1px solid transparent; color: var(--text-secondary); padding: 6px 8px; } .btn-ghost:hover { color: var(--text); border-color: var(--border); } .btn-sm { padding: 4px 10px; font-size: 0.78rem; } .btn-icon { padding: 5px 8px; font-size: 0.95rem; min-width: 30px; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; transition: all var(--transition); } .btn-icon:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-muted); } .btn-icon.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-muted); } .btn-icon.warning:hover { border-color: var(--warning); color: var(--warning); background: var(--warning-muted); } .btn-group { display: flex; gap: 6px; } /* ===== Cards ===== */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .card-title { font-family: var(--font-head); font-size: 1rem; font-weight: 600; color: var(--text); letter-spacing: 0; } /* Dashboard stat cards */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; } .stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; transition: border-color var(--transition); } .stat-card:hover { border-color: var(--border-light); } .stat-card-label { font-size: 0.74rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; } .stat-card-value { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 700; color: var(--text); line-height: 1.1; letter-spacing: 0; } .stat-card-value.primary { color: var(--primary); } .stat-card-value.danger { color: var(--danger); } .stat-card-value.warning { color: var(--warning); } .stat-card-value.info { color: var(--info); } .stat-card-footer { font-size: 0.76rem; color: var(--muted); } /* ===== System Status tiles (dashboard) ===== */ .status-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .status-tile { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--transition), transform var(--transition); } .status-tile:hover { border-color: var(--primary); transform: translateY(-1px); } .status-tile-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .status-tile-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .status-tile-title { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-secondary); font-weight: 600; } .status-tile-value { display: inline-flex; align-items: center; gap: 7px; font-size: 1rem; font-weight: 600; } .status-tile-value.ok { color: var(--primary); } .status-tile-value.bad { color: var(--danger); } .status-tile-metric { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; color: var(--text); } .status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; position: relative; } .status-dot.ok { background: var(--primary); box-shadow: 0 0 0 0 var(--primary); animation: status-pulse 1.6s infinite; } .status-dot.bad { background: var(--danger); box-shadow: 0 0 0 0 var(--danger); animation: status-pulse-bad 1.6s infinite; } @keyframes status-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 255, 65, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(0, 255, 65, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 255, 65, 0); } } @keyframes status-pulse-bad { 0% { box-shadow: 0 0 0 0 rgba(255, 51, 68, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(255, 51, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 51, 68, 0); } } /* ===== Tables ===== */ .table-wrapper { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .table-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px; } .table-toolbar-left { display: flex; align-items: center; gap: 10px; } .table-toolbar-right { display: flex; align-items: center; gap: 10px; } .table-search-wrap { position: relative; display: inline-block; } .table-search { padding: 6px 28px 6px 12px; /* right padding leaves room for ✕ */ background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: 0.85rem; width: 220px; transition: border-color var(--transition); } .table-search::placeholder { color: var(--muted); } .table-search:focus { outline: none; border-color: var(--primary); } /* ✕ clear button — sits inside the search input, hidden until the input has a value (driven by .has-value on the wrapper, toggled by the JS on every keystroke). Click clears the input AND re-applies an empty filter. */ .table-search-clear { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: none; width: 18px; height: 18px; line-height: 16px; text-align: center; padding: 0; margin: 0; border: none; background: var(--border); color: var(--text); border-radius: 50%; cursor: pointer; font-size: 14px; font-weight: bold; opacity: 0.65; transition: opacity var(--transition), background var(--transition); } .table-search-wrap.has-value .table-search-clear { display: block; } .table-search-clear:hover { opacity: 1; background: var(--danger); color: var(--on-accent); } .table-scroll { overflow-x: auto; overscroll-behavior-x: contain; } table.data-table { width: 100%; border-collapse: collapse; white-space: nowrap; } table.data-table thead th { padding: 10px 16px; text-align: left; font-family: var(--font); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); background: var(--bg); border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; position: relative; transition: color var(--transition); } table.data-table thead th:hover { color: var(--text); } table.data-table thead th.sorted-asc, table.data-table thead th.sorted-desc { color: var(--primary); } table.data-table thead th .sort-indicator { margin-left: 4px; font-size: 0.7rem; opacity: 0.5; } table.data-table thead th.sorted-asc .sort-indicator, table.data-table thead th.sorted-desc .sort-indicator { opacity: 1; color: var(--primary); } table.data-table thead th.no-sort { cursor: default; } table.data-table tbody tr { border-bottom: 1px solid var(--border); transition: background var(--transition); } table.data-table tbody tr:hover { background: var(--card-hover); } table.data-table tbody tr:last-child { border-bottom: none; } table.data-table tbody td { padding: 9px 16px; font-size: 0.85rem; color: var(--text); } table.data-table td.mono { font-family: var(--font-mono); font-size: 0.82rem; } table.data-table td.actions { text-align: right; } .table-empty { padding: 48px 20px; text-align: center; color: var(--muted); font-size: 0.95rem; } .table-empty-icon { font-size: 2.4rem; margin-bottom: 10px; opacity: 0.5; } /* Pagination */ .table-pagination { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 10px; } .table-pagination-info { font-size: 0.8rem; color: var(--text-secondary); } .table-pagination-controls { display: flex; align-items: center; gap: 4px; } .table-pagination-controls button { padding: 4px 10px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); font-family: var(--font); cursor: pointer; font-size: 0.8rem; min-width: 30px; transition: all var(--transition); } .table-pagination-controls button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); } .table-pagination-controls button.active { background: var(--primary); border-color: var(--primary); color: var(--on-accent); } .table-pagination-controls button:disabled { opacity: 0.35; cursor: not-allowed; } .per-page-select { padding: 4px 8px; background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: 0.8rem; cursor: pointer; } .per-page-select:focus { outline: none; border-color: var(--primary); } /* ===== Badges ===== */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; font-family: var(--font); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .badge-success { background: var(--primary-muted); border-color: var(--primary); color: var(--primary); } .badge-danger { background: var(--danger-muted); border-color: var(--danger); color: var(--danger); } .badge-warning { background: var(--warning-muted); border-color: var(--warning); color: var(--warning); } .badge-info { background: var(--info-muted); border-color: var(--info); color: var(--info); } .badge-muted { background: transparent; border-color: var(--border); color: var(--muted); } .badge-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .badge-dot.success { background: var(--primary); } .badge-dot.danger { background: var(--danger); } .badge-dot.warning { background: var(--warning); } .badge-dot.info { background: var(--info); } /* ===== Call status badges (distinct hues so the page isn't all one colour) The actual tokens (--call-answered etc.) are declared per-theme at the top of this file so each palette can pick its own saturation. */ .badge.call-answered { color: var(--call-answered); border-color: var(--call-answered); background: var(--call-answered-bg); } .badge.call-failed { color: var(--call-failed); border-color: var(--call-failed); background: var(--call-failed-bg); } .badge.call-busy { color: var(--call-busy); border-color: var(--call-busy); background: var(--call-busy-bg); } .badge.call-noanswer { color: var(--call-noanswer); border-color: var(--call-noanswer); background: var(--call-noanswer-bg); } .badge.call-cancelled { color: var(--call-cancelled); border-color: var(--call-cancelled); background: var(--call-cancelled-bg); } .badge.call-ringing { color: var(--call-ringing); border-color: var(--call-ringing); background: var(--call-ringing-bg); } .badge.call-trying { color: var(--call-trying); border-color: var(--call-trying); background: var(--call-trying-bg); } .badge.call-held { color: var(--call-held); border-color: var(--call-held); background: var(--call-held-bg); } .badge-dot.call-answered { background: var(--call-answered); } .badge-dot.call-failed { background: var(--call-failed); } .badge-dot.call-busy { background: var(--call-busy); } .badge-dot.call-noanswer { background: var(--call-noanswer); } .badge-dot.call-cancelled { background: var(--call-cancelled); } .badge-dot.call-ringing { background: var(--call-ringing); } .badge-dot.call-trying { background: var(--call-trying); } .badge-dot.call-held { background: var(--call-held); } /* Row-level status indicator: 3px left stripe + subtle text tint so a whole row reads at a glance. Tints only the primary identification cells (caller/callee/gateway/duration), leaving mono/numeric cells legible. */ tr[data-call-status] td { box-shadow: none; } tr[data-call-status] td:first-child { border-left: 3px solid transparent; } tr[data-call-status="answered"] td:first-child, tr[data-call-status="completed"] td:first-child, tr[data-call-status="active"] td:first-child { border-left-color: var(--call-answered); } tr[data-call-status="failed"] td:first-child { border-left-color: var(--call-failed); } tr[data-call-status="busy"] td:first-child { border-left-color: var(--call-busy); } tr[data-call-status="no_answer"] td:first-child { border-left-color: var(--call-noanswer); } tr[data-call-status="canceled"] td:first-child, tr[data-call-status="cancelled"] td:first-child { border-left-color: var(--call-cancelled); } tr[data-call-status="ringing"] td:first-child, tr[data-call-status="early"] td:first-child { border-left-color: var(--call-ringing); } tr[data-call-status="trying"] td:first-child, tr[data-call-status="init"] td:first-child { border-left-color: var(--call-trying); } tr[data-call-status="held"] td:first-child { border-left-color: var(--call-held); } tr[data-call-status="failed"] td { color: var(--call-failed); } tr[data-call-status="busy"] td { color: var(--call-busy); } tr[data-call-status="no_answer"] td { color: var(--call-noanswer); } tr[data-call-status="canceled"] td, tr[data-call-status="cancelled"] td { color: var(--call-cancelled); } tr[data-call-status="ringing"] td, tr[data-call-status="early"] td { color: var(--call-ringing); } tr[data-call-status="trying"] td, tr[data-call-status="init"] td { color: var(--call-trying); } tr[data-call-status="held"] td { color: var(--call-held); } /* Answered / completed / active stays the default light text so successful calls don't dominate the eye — the green stripe + green badge are enough. */ /* ===== Forms ===== */ .form-group { margin-bottom: 14px; } .form-label { display: block; margin-bottom: 5px; font-family: var(--font); font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .form-label .required { color: var(--danger); margin-left: 2px; } .form-input, .form-select, .form-textarea { width: 100%; padding: 8px 12px; background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: 0.88rem; caret-color: var(--primary); transition: border-color var(--transition); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--primary); } .form-input::placeholder, .form-textarea::placeholder { color: var(--muted); } .form-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300b32d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; } .form-select option { background: var(--card); color: var(--text); } .form-checkbox-wrapper { display: flex; align-items: center; gap: 8px; } .form-checkbox { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-error { color: var(--danger); font-size: 0.78rem; margin-top: 4px; } .form-hint { color: var(--muted); font-size: 0.78rem; margin-top: 4px; } /* ===== Modal ===== */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; animation: fadeIn 0.12s ease; } .modal-card { background: var(--card); border: 1px solid var(--primary); border-radius: var(--radius); width: 100%; max-width: 520px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: none; animation: slideUp 0.15s ease; } .modal-card.wide { max-width: 720px; } .modal-card.extra-wide { max-width: 960px; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); } .modal-title { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; color: var(--primary); letter-spacing: 0; } .modal-close { background: transparent; border: none; color: var(--text-secondary); font-size: 1.4rem; cursor: pointer; padding: 4px; line-height: 1; transition: color var(--transition); } .modal-close:hover { color: var(--danger); } .modal-body { padding: 20px; overflow-y: auto; flex: 1; } .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border); } .modal-confirm-message { font-size: 0.92rem; color: var(--text); line-height: 1.6; text-align: center; padding: 12px 0; } .modal-confirm-icon { font-size: 2.4rem; text-align: center; margin-bottom: 10px; color: var(--primary); } /* ===== Toast ===== */ .toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column-reverse; gap: 8px; max-width: 400px; } .toast { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; min-width: 280px; animation: toastSlideIn 0.25s ease; position: relative; overflow: hidden; } .toast.removing { animation: toastSlideOut 0.25s ease forwards; } .toast-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; } .toast.success .toast-accent { background: var(--primary); } .toast.error .toast-accent { background: var(--danger); } .toast.warning .toast-accent { background: var(--warning); } .toast.info .toast-accent { background: var(--info); } .toast.success { border-color: var(--primary); } .toast.error { border-color: var(--danger); } .toast.warning { border-color: var(--warning); } .toast.info { border-color: var(--info); } .toast-icon { font-size: 1.05rem; margin-left: 6px; flex-shrink: 0; margin-top: 1px; } .toast.success .toast-icon { color: var(--primary); } .toast.error .toast-icon { color: var(--danger); } .toast.warning .toast-icon { color: var(--warning); } .toast.info .toast-icon { color: var(--info); } .toast-content { flex: 1; } .toast-message { font-size: 0.86rem; color: var(--text); line-height: 1.4; } .toast-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; padding: 0; line-height: 1; flex-shrink: 0; transition: color var(--transition); } .toast-close:hover { color: var(--text); } /* ===== Filter Bar ===== */ .filter-bar { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 20px; } .filter-bar-title { font-family: var(--font); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); margin-bottom: 12px; } .filter-bar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; } .filter-bar-actions { display: flex; gap: 10px; justify-content: flex-end; } .filter-input { padding: 7px 12px; background: var(--input-bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: 0.84rem; width: 100%; transition: border-color var(--transition); } .filter-input::placeholder { color: var(--muted); } .filter-input:focus { outline: none; border-color: var(--primary); } .filter-group label { display: block; font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; } /* ===== Login Screen ===== */ .login-screen { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 5000; } .login-card { background: var(--card); border: 1px solid var(--primary); border-radius: var(--radius); padding: 32px; width: 100%; max-width: 380px; box-shadow: none; } .login-logo { text-align: center; margin-bottom: 20px; min-height: 64px; display: flex; align-items: center; justify-content: center; } .login-logo img { max-height: 64px; max-width: 100%; object-fit: contain; } .login-brand-svg { width: 100%; max-width: 360px; height: 64px; display: block; } .login-title { text-align: center; font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; color: var(--primary); margin-bottom: 4px; letter-spacing: 0; } .login-subtitle { text-align: center; font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 24px; letter-spacing: 0.5px; } .login-btn { display: block; margin: 8px auto 0; padding: 10px 36px; min-width: 160px; font-size: 0.95rem; } /* ===== Clickable / Links ===== */ .clickable { cursor: pointer; color: var(--primary); transition: color var(--transition); } .clickable:hover { color: var(--primary-hover); text-decoration: underline; } /* ===== Utility ===== */ .text-mono { font-family: var(--font-mono); font-size: 0.82rem; } .text-muted { color: var(--text-secondary); } .text-center { text-align: center; } .text-right { text-align: right; } .text-sm { font-size: 0.8rem; } .mt-4 { margin-top: 16px; } .mb-4 { margin-bottom: 16px; } .flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .flex-1 { flex: 1; } /* ===== Animations ===== */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes toastSlideIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes toastSlideOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } /* ===== Loading Spinner — square terminal cursor instead of round ===== */ .spinner { width: 28px; height: 28px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.7s linear infinite; margin: 40px auto; } @keyframes spin { to { transform: rotate(360deg); } } .page-loading { display: flex; align-items: center; justify-content: center; min-height: 300px; } /* ===== Responsive ===== */ @media (max-width: 1024px) { .stats-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } } @media (max-width: 768px) { .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .sidebar-toggle { display: block; } .page-container { padding: 16px; padding-top: 52px; } .page-header { flex-direction: column; align-items: flex-start; } .filter-bar-grid { grid-template-columns: 1fr 1fr; } .form-row { grid-template-columns: 1fr; } .table-toolbar { flex-direction: column; align-items: flex-start; } .stats-grid { grid-template-columns: 1fr 1fr; } .modal-card { max-width: 95%; } } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } .filter-bar-grid { grid-template-columns: 1fr; } .stat-card { padding: 12px !important; } .data-table { font-size: 11px; } .data-table td, .data-table th { padding: 4px 6px; white-space: nowrap; } .page-title { font-size: 1.6rem; } .btn { padding: 5px 10px; font-size: 0.78rem; } .btn-sm { padding: 3px 8px; font-size: 0.72rem; } } /* ===== Live-Listen Player Modal ===== */ .modal-card.ll-modal { max-width: 560px; } .ll-toprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .ll-status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; } .ll-status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); box-shadow: 0 0 0 0 rgba(0, 255, 65, 0); } .ll-dot-connecting { background: var(--text-muted); animation: ll-pulse-gray 1.4s infinite ease-in-out; } .ll-dot-listening { background: var(--primary); animation: ll-pulse-green 1.4s infinite ease-in-out; } .ll-dot-closed { background: var(--danger); } .ll-dot-error { background: var(--danger); } @keyframes ll-pulse-green { 0% { box-shadow: 0 0 0 0 rgba(0, 255, 65, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(0, 255, 65, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 255, 65, 0); } } @keyframes ll-pulse-gray { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } } .ll-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; } .ll-timer { color: var(--text-secondary); font-family: var(--font-mono); } .ll-meters { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 16px; } .ll-meter-row { display: flex; align-items: center; gap: 8px; } .ll-meter-label { width: 80px; font-size: 0.78rem; color: var(--text-muted); } .ll-meter { flex: 1; height: 8px; background: rgba(0, 255, 65, 0.08); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; } .ll-meter-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--primary) 0%, var(--warning) 80%, var(--danger) 100%); transition: width 0.08s linear; } .ll-controls { display: flex; flex-direction: column; gap: 10px; } .ll-volume-row { display: flex; align-items: center; gap: 8px; } .ll-volume-label { width: 80px; font-size: 0.78rem; color: var(--text-muted); } .ll-volume { flex: 1; accent-color: var(--primary); } .ll-mute-row { display: flex; gap: 8px; flex-wrap: wrap; } .ll-message { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--danger); border-radius: var(--radius); color: var(--danger); background: var(--danger-muted); font-size: 0.9rem; } /* Recordings page — inline player styles */ .rec-inline-player { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .rec-inline-player audio { flex: 1; max-width: 360px; } /* ─── Recording player modal ─────────────────────────────────────────── */ .rp-modal { width: 560px; max-width: 96vw; } .rp-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; font-size: 13px; } .rp-time-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .rp-time-row .mono { min-width: 56px; text-align: center; font-size: 13px; color: var(--text-muted); } .rp-seek { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; background: var(--border); border-radius: 3px; outline: none; cursor: pointer; } .rp-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--primary); cursor: pointer; } .rp-seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--primary); border: 2px solid var(--card); cursor: pointer; } .rp-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rp-spacer { flex: 1; } .rp-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 36px; padding: 0 12px; border: 1px solid var(--border); background: var(--card-hover); color: var(--text); border-radius: 6px; font-size: 14px; cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s; } .rp-btn:hover { background: var(--card-active, var(--card-hover)); border-color: var(--primary); } .rp-btn.rp-play { min-width: 56px; font-size: 18px; background: var(--primary); color: var(--on-accent); border-color: var(--primary); } .rp-btn.rp-play:hover { filter: brightness(1.1); } .rp-speed-wrap, .rp-vol-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .rp-speed { height: 32px; padding: 0 6px; background: var(--card); border: 1px solid var(--border); color: var(--text); border-radius: 4px; font-size: 13px; } .rp-vol { width: 90px; -webkit-appearance: none; appearance: none; height: 4px; background: var(--border); border-radius: 2px; outline: none; cursor: pointer; } .rp-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); cursor: pointer; } .rp-vol::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: none; cursor: pointer; } .rp-error { margin-top: 10px; padding: 8px 10px; background: rgba(220, 53, 69, 0.12); color: var(--danger, #dc3545); border: 1px solid rgba(220, 53, 69, 0.4); border-radius: 4px; font-size: 13px; } /* ─── Entity-edit permissions panel (used in Reseller/Client/SIP-user forms) ─ */ .perm-panel { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 10%, var(--card)) 0%, var(--card-hover) 100%); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); } .perm-panel-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--border); } .perm-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; margin: 6px 0; background: rgba(0,0,0,0.18); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.05s; } .perm-item:hover { border-color: var(--primary); background: rgba(0,0,0,0.28); } /* Custom dark-theme checkbox. `accent-color` alone only tints the tick; the unchecked box keeps the browser's white default, which clashes with the dark panel. We strip the native control with `appearance: none` and paint our own box + checkmark so it matches the rest of the form. */ .perm-item input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; margin: 3px 0 0 0; width: 18px; height: 18px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; flex-shrink: 0; position: relative; transition: background 0.15s, border-color 0.15s; } .perm-item input[type="checkbox"]:hover { border-color: var(--primary); } .perm-item input[type="checkbox"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } .perm-item input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); } .perm-item input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); } .perm-item input[type="checkbox"]:checked ~ .perm-text .perm-label { color: var(--primary); } .perm-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; } .perm-label { font-weight: 600; font-size: 13px; color: var(--text); transition: color 0.15s; } .perm-hint { font-size: 12px; color: var(--text-muted); } /* ========================================================================= Theme toggle button (the floating moon/sun in the top-right corner) ========================================================================= Lives outside the page-container so it's visible on every route AND on the login screen. Stays clear of the mobile burger menu (top-left) and sits below modals (z-index 1000+) but above the sidebar (z-index 100). ========================================================================= */ .theme-toggle { position: fixed; top: 14px; right: 14px; z-index: 200; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; background: var(--card); border: 1px solid var(--border); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: var(--shadow); transition: background var(--transition), border-color var(--transition), transform var(--transition); -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { background: var(--card-hover); border-color: var(--primary); color: var(--primary); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } @media (max-width: 480px) { .theme-toggle { top: 10px; right: 10px; width: 34px; height: 34px; font-size: 16px; } }