html { font-size: 14px; } @media (min-width: 768px) { html { font-size: 16px; } } /* Chart Color Palette Reads from Tabler CSS variables so charts respect theme customisation. ApexCharts needs resolved values — use window.vumaChartColors helper in JS. */ :root { --chart-primary: var(--tblr-primary, #206bc4); --chart-success: var(--tblr-success, #2fb344); --chart-danger: var(--tblr-danger, #d63939); --chart-info: var(--tblr-info, #4299e1); --chart-indigo: var(--tblr-indigo, #4263eb); --chart-warning: var(--tblr-warning, #f59f00); --chart-purple: var(--tblr-purple, #ae3ec9); --chart-lime: var(--tblr-lime, #94d82d); --chart-secondary: var(--tblr-secondary, #626976); --chart-danger-light: #fa4646; --chart-purple-bright: #d633ff; /* Typography */ --tblr-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif; /* Custom palette extensions — not in Tabler by default */ --tblr-sky: #0284c7; --tblr-sky-rgb: 2, 132, 199; --tblr-emerald: #059669; --tblr-emerald-rgb: 5, 150, 105; --tblr-amber: #d97706; --tblr-amber-rgb: 217, 119, 6; --tblr-rose: #f43f5e; --tblr-rose-rgb: 244, 63, 94; --tblr-violet: #7c3aed; --tblr-violet-rgb: 124, 58, 237; --tblr-fuchsia: #c026d3; --tblr-fuchsia-rgb: 192, 38, 211; --tblr-slate: #475569; --tblr-slate-rgb: 71, 85, 105; } /* Layout globals */ body { margin: 0; padding: 0; overflow-x: hidden; /* Firefox scrollbar theming */ scrollbar-width: thin; scrollbar-color: var(--tblr-border-color) transparent; } /* Webkit scrollbar theming (Chrome, Edge, Safari) */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--tblr-border-color); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--tblr-secondary); } ::-webkit-scrollbar-corner { background: transparent; } /* Toast: top-center on mobile, bottom-right on desktop */ @@media (max-width: 575.98px) { .toast-container { bottom: auto !important; top: 1rem !important; right: 50% !important; transform: translateX(50%); width: calc(100vw - 2rem); max-width: 400px; } } .page { min-height: 100vh; } .navbar-brand-image { height: 2.5rem; width: auto; } .container-fluid { padding-left: 1.25rem; padding-right: 1.25rem; max-width: 100%; } .navbar-nav { padding-right: 1rem; padding-left: 1rem; } /* Theme colour overrides — applied via CSS variables set inline on */ .btn-primary { background-color: var(--tblr-primary) !important; border-color: var(--tblr-primary) !important; color: #fff !important; } .bg-primary { background-color: var(--tblr-primary) !important; } .text-primary { color: var(--tblr-primary) !important; } .badge.bg-primary-lt { background-color: rgba(var(--tblr-primary-rgb), 0.1) !important; color: var(--tblr-primary) !important; } .btn:focus-visible, .btn:active:focus-visible, .btn-link.nav-link:focus-visible, .form-control:focus-visible, .form-check-input:focus-visible { box-shadow: 0 0 0 0.15rem var(--tblr-body-bg), 0 0 0 0.35rem var(--tblr-primary); } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* Yeastar Timeline Styles */ .yeastar-timeline { position: relative; } .yeastar-timeline::before { content: ''; position: absolute; top: 0.625rem; bottom: 2.5rem; left: var(--timeline-icon-offset, 4.25rem); /* Offset: 45px time label + 23px gap to icon center */ width: 1px; background: var(--tblr-border-color); } .timeline-event { position: relative; z-index: 1; } .timeline-icon { width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; background: var(--tblr-dark); border-radius: 50%; transition: transform 0.2s ease; } .timeline-event:hover .timeline-icon { transform: scale(1.15); } .timeline-dot { width: 0.5rem; height: 0.5rem; background: rgba(255, 255, 255, 0.65); border-radius: 50%; transition: transform 0.2s ease, background-color 0.2s ease; } .timeline-event:hover .timeline-dot { transform: scale(1.5); background-color: rgba(255, 255, 255, 0.9); } /* ============================================================ Modal Size Hierarchy Convention Use these classes consistently across the app: modal-sm — confirmations, short button menus (max-width: 300px) (default) — simple forms, single-field dialogs (max-width: 500px) modal-lg — multi-section forms, settings panels (max-width: 800px) modal-xl — wide content: galleries, transcriptions (max-width: 1140px) modal-full-width — wide data tables requiring viewport width (max-width: 95vw) ============================================================ */ .modal-full-width { max-width: 95vw; } /* Color picker sizing utilities — avoids inline style= on form-control-color inputs */ .form-control-color-compact { height: 2rem; padding: 2px; } .series-color-input { width: 2.375rem; height: 2.375rem; padding: 4px; } .bg-dark-lt { background-color: rgba(255, 255, 255, 0.05) !important; } /* Feature Gate Styling */ .feature-gate { position: relative; overflow: hidden; } .feature-gate-locked { filter: blur(8px) grayscale(1); opacity: 0.1; pointer-events: none; user-select: none; } .feature-gate-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 5; background: rgba(var(--tblr-body-bg-rgb, 244, 246, 250), 0.7); backdrop-filter: blur(4px); } .feature-gate-content { background: var(--tblr-bg-surface); padding: 1rem; border-radius: var(--tblr-border-radius); box-shadow: var(--tblr-shadow-card); text-align: center; border: 1px solid var(--tblr-border-color); max-width: 90%; } .feature-gate-popover-wrapper { cursor: help; } .feature-gate-popover-wrapper .feature-gate-locked { display: inline-block; } /* Animations */ .animated { animation-duration: 0.5s; animation-fill-mode: both; } @@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { will-change: opacity; animation-name: fadeIn; } @@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { will-change: transform; animation-name: pulse; animation-duration: 2s; /* Slower pulsation */ } .infinite { animation-iteration-count: infinite; } /* ============================================================ Library Override Styles NOTE: !important here is intentional — these rules override external library styles (ApexCharts, Litepicker, TomSelect) that use inline styles or high-specificity selectors. Do not remove !important from this section. ============================================================ */ /* Litepicker — navigation button theme colour */ .litepicker .button-previous-month, .litepicker .button-next-month { color: var(--tblr-primary) !important; fill: var(--tblr-primary) !important; } .litepicker .button-previous-month:hover, .litepicker .button-next-month:hover { background-color: rgba(var(--tblr-primary-rgb), 0.1) !important; } /* ApexCharts — force horizontal legend layout (ApexCharts uses inline styles) */ .apexcharts-legend { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-start !important; } .apexcharts-legend-group { display: flex !important; flex-direction: row !important; margin-right: 1rem !important; } /* ApexCharts — hide built-in toolbar (export still works via JS API) */ .apexcharts-toolbar { display: none !important; } /* TomSelect — dark mode / Tabler theme integration */ .ts-control { border-color: var(--tblr-border-color); box-shadow: none; } .ts-dropdown { background: var(--tblr-bg-surface) !important; color: var(--tblr-body-color) !important; box-shadow: var(--tblr-shadow-card); } .ts-dropdown .option { color: var(--tblr-body-color); } .ts-dropdown .active { background: var(--tblr-primary-lt) !important; color: var(--tblr-primary) !important; } .ts-dropdown .optgroup-header { background: var(--tblr-bg-surface-secondary); color: var(--tblr-muted); font-weight: 600; } .ts-wrapper.multi .ts-control > div { background: var(--tblr-primary); color: #fff; border-radius: 3px; padding: 2px 8px; display: inline-flex; align-items: center; } .ts-wrapper.multi .ts-control > div .remove { border-left: 1px solid rgba(255,255,255,0.3); margin-left: 6px; padding-left: 4px; color: #fff; opacity: 0.8; } .ts-wrapper.multi .ts-control > div .remove:hover { opacity: 1; background: rgba(255,255,255,0.1); } /* ============================================================ Loading overlay — works on any container with position:relative. Add class `is-loading` to the container to show its child `.loading-overlay`. #logs-container kept for specificity compat. ============================================================ */ .loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(var(--tblr-bg-surface-rgb), 0.7); display: flex; align-items: flex-start; justify-content: center; padding-top: 5rem; z-index: 10; opacity: 0; visibility: hidden; transition: opacity 0.2s ease-in-out; will-change: opacity; border-radius: inherit; } /* Generic: any .is-loading container reveals its overlay child */ .is-loading { position: relative; min-height: 80px; } .is-loading > .loading-overlay { opacity: 1; visibility: visible; } #logs-container { min-height: 200px; } /* ============================================================ New-row highlight animation (CallLogs) ============================================================ */ .new-row-blink { will-change: background-color; animation: blink-bg 2s ease-in-out 3; } @keyframes blink-bg { 0% { background-color: transparent; } 50% { background-color: rgba(var(--tblr-primary-rgb), 0.2); } 100% { background-color: transparent; } } /* ============================================================ Dashboard / chart utilities (Index) ============================================================ */ .refresh-loading { opacity: 0.5; pointer-events: none; } .chart-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: inherit; color: var(--tblr-muted); } /* ============================================================ Litepicker — navigation padding fix (CallLogs) ============================================================ */ .litepicker .container__main { padding: 0.5rem; } /* ============================================================ Data Table Row Interactions ============================================================ */ .table.card-table tbody tr { transition: background-color 0.12s ease; } .table.card-table tbody tr:hover { background-color: rgba(var(--tblr-primary-rgb), 0.04); } /* ============================================================ Main Dashboard — medium card depth for all widgets Targets KPI/table AJAX containers + static chart cards ============================================================ */ #dashboard-kpis .card, #dashboard-tables .card, #dashboard-ongoing-calls .card, .card:has(#chart-call-volume), .card:has(#chart-wait-bell), .card:has(#chart-talk-bell), .card:has(#chart-dispositions), .card:has(#chart-call-disposition), .card:has(#chart-call-types) { box-shadow: 0 6px 20px rgba(0,0,0,0.22), 0 3px 8px rgba(0,0,0,0.14); transition: box-shadow 0.2s ease; } #dashboard-kpis .card:hover, #dashboard-tables .card:hover, #dashboard-ongoing-calls .card:hover, .card:has(#chart-call-volume):hover, .card:has(#chart-wait-bell):hover, .card:has(#chart-talk-bell):hover, .card:has(#chart-dispositions):hover, .card:has(#chart-call-disposition):hover, .card:has(#chart-call-types):hover { box-shadow: 0 10px 28px rgba(0,0,0,0.28), 0 4px 10px rgba(0,0,0,0.16); } body[data-bs-theme="dark"] #dashboard-kpis .card, body[data-bs-theme="dark"] #dashboard-tables .card, body[data-bs-theme="dark"] #dashboard-ongoing-calls .card, body[data-bs-theme="dark"] .card:has(#chart-call-volume), body[data-bs-theme="dark"] .card:has(#chart-wait-bell), body[data-bs-theme="dark"] .card:has(#chart-talk-bell), body[data-bs-theme="dark"] .card:has(#chart-dispositions), body[data-bs-theme="dark"] .card:has(#chart-call-disposition), body[data-bs-theme="dark"] .card:has(#chart-call-types) { box-shadow: 0 6px 20px rgba(0,0,0,0.60), 0 3px 8px rgba(0,0,0,0.40); } body[data-bs-theme="dark"] #dashboard-kpis .card:hover, body[data-bs-theme="dark"] #dashboard-tables .card:hover, body[data-bs-theme="dark"] #dashboard-ongoing-calls .card:hover, body[data-bs-theme="dark"] .card:has(#chart-call-volume):hover, body[data-bs-theme="dark"] .card:has(#chart-wait-bell):hover, body[data-bs-theme="dark"] .card:has(#chart-talk-bell):hover, body[data-bs-theme="dark"] .card:has(#chart-dispositions):hover, body[data-bs-theme="dark"] .card:has(#chart-call-disposition):hover, body[data-bs-theme="dark"] .card:has(#chart-call-types):hover { box-shadow: 0 10px 30px rgba(0,0,0,0.70), 0 4px 10px rgba(0,0,0,0.45); } /* ============================================================ Main Dashboard — Modern UI Makeover ============================================================ */ /* Increase border radius for all dashboard cards */ #dashboard-kpis .card, #dashboard-tables .card, #dashboard-ongoing-calls .card, .card:has(#chart-call-volume), .card:has(#chart-wait-bell), .card:has(#chart-talk-bell), .card:has(#chart-dispositions), .card:has(#chart-call-disposition), .card:has(#chart-call-types) { border-radius: 12px !important; } /* KPI card — top accent border */ .kpi-card { border-top: 3px solid transparent; border-radius: 12px !important; transition: transform 0.22s ease, box-shadow 0.22s ease !important; overflow: hidden; } .kpi-card.kpi-primary { border-top-color: #206bc4; } .kpi-card.kpi-success { border-top-color: #2fb344; } .kpi-card.kpi-danger { border-top-color: #d63939; } .kpi-card.kpi-info { border-top-color: #4299e1; } /* KPI card hover lift */ .kpi-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 14px 34px rgba(0,0,0,0.26), 0 4px 12px rgba(0,0,0,0.16) !important; } body[data-bs-theme="dark"] .kpi-card:hover { box-shadow: 0 14px 34px rgba(0,0,0,0.65), 0 4px 12px rgba(0,0,0,0.45) !important; } /* KPI icon — soft tinted rounded square */ .kpi-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .kpi-icon .icon { width: 28px; height: 28px; } .kpi-icon-primary { background: rgba(32,107,196,0.12); color: #206bc4; } .kpi-icon-success { background: rgba(47,179,68,0.12); color: #2fb344; } .kpi-icon-danger { background: rgba(214,57,57,0.12); color: #d63939; } .kpi-icon-info { background: rgba(66,153,225,0.12); color: #4299e1; } body[data-bs-theme="dark"] .kpi-icon-primary { background: rgba(32,107,196,0.22); } body[data-bs-theme="dark"] .kpi-icon-success { background: rgba(47,179,68,0.22); } body[data-bs-theme="dark"] .kpi-icon-danger { background: rgba(214,57,57,0.22); } body[data-bs-theme="dark"] .kpi-icon-info { background: rgba(66,153,225,0.22); } /* KPI value — large prominent number */ .kpi-value { font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .kpi-label { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } /* Fade-in animation for AJAX-loaded content */ @keyframes dashFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .dash-fade-in { animation: dashFadeIn 0.35s ease both; } /* Gradient card header for extension leaderboard */ #dashboard-tables .card-header { background: linear-gradient(135deg, rgba(var(--tblr-primary-rgb), 0.06) 0%, transparent 100%); border-bottom: 1px solid rgba(var(--tblr-primary-rgb), 0.12); } /* Chart card header subtle gradient */ .card:has(#chart-call-volume) .card-body, .card:has(#chart-wait-bell) .card-body, .card:has(#chart-talk-bell) .card-body, .card:has(#chart-dispositions) .card-body, .card:has(#chart-call-types) .card-body { position: relative; } .card:has(#chart-call-volume) .card-title, .card:has(#chart-wait-bell) .card-title, .card:has(#chart-talk-bell) .card-title, .card:has(#chart-dispositions) .card-title, .card:has(#chart-call-types) .card-title { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--tblr-secondary); } /* ============================================================ Custom Dashboard — Widget Entrance & Live Pulse ============================================================ */ /* Staggered widget entrance */ @keyframes widgetEntrance { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .widget-entering { animation: widgetEntrance 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; } /* Live auto-refresh pulse dot */ .widget-live-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #2fb344; flex-shrink: 0; position: relative; display: inline-block; } .widget-live-dot::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; background-color: rgba(47,179,68,0.4); animation: livePulse 2.2s ease-in-out infinite; } @keyframes livePulse { 0%, 100% { transform: scale(0.7); opacity: 0.7; } 50% { transform: scale(1.6); opacity: 0; } } body[data-bs-theme="dark"] .widget-live-dot { background-color: #40c057; } body[data-bs-theme="dark"] .widget-live-dot::before { background-color: rgba(64,192,87,0.35); } /* ============================================================ Focus Visibility Enhancement (WCAG 2.1 §2.4.7) :focus-visible fires only for keyboard navigation — mouse/pointer users see no change at all. ============================================================ */ /* Suppress the browser default :focus outline on mouse/touch click. */ *:focus:not(:focus-visible) { outline: none; } /* Global keyboard focus ring — covers links, nav items, dropdowns, tabs, and any element not styled by the more specific rules below. */ *:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; border-radius: 0.2rem; } /* Buttons and form controls use a double-ring box-shadow instead of an outline so the ring sits flush against the element border. */ .btn:focus-visible, .btn:active:focus-visible, .btn-link.nav-link:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible, .form-range:focus-visible { outline: none; box-shadow: 0 0 0 0.15rem var(--tblr-body-bg), 0 0 0 0.35rem var(--tblr-primary); } /* Navbar and sidebar links — outline only, no box-shadow. */ .nav-link:focus-visible, .navbar-brand:focus-visible, .dropdown-item:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; border-radius: 0.2rem; } /* ============================================================ Dropdown Animation Fade + slide-down on .show (works for all Bootstrap dropdowns, navbar menus, and Tabler action menus site-wide). Uses @keyframes so it fires each time the menu opens. `transform-origin: top` anchors the slide to the menu's top edge. No JS required — pure CSS, respects prefers-reduced-motion. ============================================================ */ @keyframes vuma-dropdown-in { from { opacity: 0; transform: translateY(-0.375rem) scaleY(0.96); } to { opacity: 1; transform: translateY(0) scaleY(1); } } .dropdown-menu.show { transform-origin: top; animation: vuma-dropdown-in 0.15s ease forwards; } @media (prefers-reduced-motion: reduce) { .dropdown-menu.show { animation: none; } } /* ============================================================ SVG Icon Size Utility Classes Use alongside Tabler's .icon class. CSS overrides the SVG width/height presentation attributes (lower specificity). Default .icon size is 1.5rem (24px) — defined by Tabler. ============================================================ */ .icon-sm { width: 1rem; height: 1rem; } /* 16px */ .icon-md { width: 1.25rem; height: 1.25rem; } /* 20px */ .icon-lg { width: 2rem; height: 2rem; } /* 32px */ .icon-xl { width: 2.5rem; height: 2.5rem; } /* ============================================================ Skip Link (keyboard accessibility — WCAG 2.1 §2.4.1) Visually hidden until focused; slides in from the top. ============================================================ */ .skip-link { position: absolute; top: -100%; left: 1rem; z-index: 10000; padding: 0.5rem 1.25rem; border-radius: 0 0 0.375rem 0.375rem; background: var(--tblr-primary); color: #fff; font-weight: 600; font-size: 0.875rem; text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: 0; outline: 3px solid var(--tblr-primary); outline-offset: 2px; color: #fff; }