/* ============================================================================ VOIPE CPanel - Page-Specific CSS Enhancements v2.1 ============================================================================ Complements voipe-bootstrap-overrides.css with page-specific styling that generic Bootstrap overrides cannot cover. Requirements: - voipe-design-system.css must be loaded FIRST - voipe-bootstrap-overrides.css should be loaded SECOND - This file is loaded THIRD (most specific layer) - Uses --v-* CSS custom properties throughout - Full RTL support via [dir="rtl"] + CSS logical properties - Dark mode via .v-dark on or - Mobile-first responsive - No !important unless overriding Bootstrap specificity Sections: 1. Page Load Transition 2. Dashboard Page Enhancements 3. Agents Page Enhancements 4. CDR Page Enhancements 5. Queues Page Enhancements 6. Settings Pages Enhancements 7. Filter Bar Universal Enhancements 8. Agent Status Color System 9. Chart Container Enhancements 10. Loading States 11. Dark Mode Page-Specific 12. Responsive Page-Specific 13. RTL Page-Specific 14. Print Page-Specific 15. Monitoring Pages - Insight / Monitor / Realtime 16. Management Pages - Queues Manage / Agents Manage 17. Auth Pages - Login / Forgot Password / Reset Password 18. Dark Mode - Monitoring / Management / Auth Pages 19. Responsive - Monitoring / Management / Auth Pages 20. RTL - Monitoring / Management / Auth Pages 21. Animations (shared) ============================================================================ */ /* ============================================================================ 1. PAGE LOAD TRANSITION ============================================================================ */ /* Page reveal: smooth fade-in when JS adds .v-redesigned class. body.v-app is always visible — no opacity:0 to avoid blank pages on standalone auth pages that don't load the JS. */ body.v-app { opacity: 1; } body.v-app.v-redesigned { animation: v-page-reveal 0.35s ease both; } @keyframes v-page-reveal { from { opacity: 0.92; } to { opacity: 1; } } /* ============================================================================ 2. DASHBOARD PAGE ENHANCEMENTS ============================================================================ */ /* Chart containers — subtle refinement */ .chart1, .chart2 { border-radius: var(--v-radius-md); padding: var(--v-space-3); background: var(--v-bg-primary); border: 1px solid var(--v-border-secondary); transition: box-shadow var(--v-duration-normal) var(--v-ease-default); } .chart1:hover, .chart2:hover { box-shadow: var(--v-shadow-sm); } /* Progress group — enhanced layout */ .progress-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-2); padding-block: var(--v-space-2); margin-block-end: var(--v-space-2); } /* Progress text label */ .progress-text { font-size: var(--v-text-sm); font-weight: 500; color: var(--v-text-secondary); flex: 1; min-width: 0; } /* Progress number value */ .progress-number { font-size: var(--v-text-sm); font-weight: 600; color: var(--v-text-primary); font-variant-numeric: tabular-nums; margin-inline-start: auto; } /* Progress bar sits below on full width */ .progress-group .progress { width: 100%; flex-basis: 100%; } /* KPI stat cards — large number styling */ .fs-4.font-weight-normal.text-700, .fs-4.font-weight-normal.text-sans-serif.text-700 { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: var(--v-leading-tight); color: var(--v-text-primary); } /* Period dropdown button — enhanced pill styling */ #period .btn-falcon-default.dropdown-toggle { border-radius: var(--v-radius-pill); padding-inline: var(--v-space-4); padding-block: var(--v-space-1); font-size: var(--v-text-sm); font-weight: 500; border: 1px solid var(--v-border-primary); background: var(--v-bg-primary); color: var(--v-text-primary); box-shadow: var(--v-shadow-xs); transition: all var(--v-duration-fast) var(--v-ease-default); } #period .btn-falcon-default.dropdown-toggle:hover { background: var(--v-bg-secondary); box-shadow: var(--v-shadow-sm); } /* Dashboard table — agent status */ .table-dashboard .table { font-size: var(--v-text-sm); } .table-dashboard .table thead th { font-size: var(--v-text-xs); font-weight: 600; color: var(--v-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; padding-block: var(--v-space-3); padding-inline: var(--v-space-3); border-bottom: 1px solid var(--v-border-primary); background: var(--v-bg-secondary); white-space: nowrap; } .table-dashboard .table tbody td { padding-block: var(--v-space-2); padding-inline: var(--v-space-3); border-bottom: 1px solid var(--v-border-secondary); vertical-align: middle; } .table-dashboard .table tbody tr { transition: background var(--v-duration-fast) var(--v-ease-default); } .table-dashboard .table tbody tr:hover { background: var(--v-bg-hover); } /* ============================================================================ 3. AGENTS PAGE ENHANCEMENTS ============================================================================ */ /* Agent grid cards — enhanced card layout with status color stripe */ .v-redesigned .col-md-4 .info-box, .v-redesigned .col-sm-6 .info-box { border-radius: var(--v-radius-lg); border: 1px solid var(--v-border-primary); box-shadow: var(--v-shadow-card); overflow: hidden; transition: box-shadow var(--v-duration-normal) var(--v-ease-default), transform var(--v-duration-normal) var(--v-ease-default); position: relative; } .v-redesigned .col-md-4 .info-box:hover, .v-redesigned .col-sm-6 .info-box:hover { box-shadow: var(--v-shadow-card-hover); transform: translateY(-1px); } /* Status color stripe on top of agent cards */ .v-redesigned .col-md-4 .info-box::before, .v-redesigned .col-sm-6 .info-box::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--agent-color, var(--v-border-primary)); z-index: 1; } /* Control buttons — pill-style view toggle */ .controlButtons .btn-group { border-radius: var(--v-radius-pill); overflow: hidden; box-shadow: var(--v-shadow-xs); border: 1px solid var(--v-border-primary); } .controlButtons .btn-group .btn { border: none; border-radius: 0; font-size: var(--v-text-sm); font-weight: 500; padding-inline: var(--v-space-4); padding-block: var(--v-space-2); color: var(--v-text-secondary); background: var(--v-bg-primary); transition: all var(--v-duration-fast) var(--v-ease-default); } .controlButtons .btn-group .btn:hover { background: var(--v-bg-hover); color: var(--v-text-primary); } .controlButtons .btn-group .btn.active, .controlButtons .btn-group .btn:active { background: var(--v-brand-500); color: var(--v-text-inverse); } /* Separate buttons in the group with subtle dividers */ .controlButtons .btn-group .btn + .btn { border-inline-start: 1px solid var(--v-border-secondary); } .controlButtons .btn-group .btn.active + .btn, .controlButtons .btn-group .btn + .btn.active { border-inline-start-color: transparent; } /* Spy / whisper / barge action buttons */ .v-redesigned .btn-group:not(.controlButtons) .btn-sm { border-radius: var(--v-radius-sm); transition: all var(--v-duration-fast) var(--v-ease-default); } .v-redesigned .btn-group:not(.controlButtons) .btn-sm:hover { transform: scale(1.05); box-shadow: var(--v-shadow-sm); } /* Table header sticky positioning fix */ .v-redesigned table thead th { position: sticky; top: 0; z-index: var(--v-z-sticky); background: var(--v-bg-secondary); } /* fix_pos container — better max-height calculation */ .fix_pos { max-height: calc(100vh - var(--v-topbar-height) - 200px); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* Scrollbar styling inside fix_pos */ .fix_pos::-webkit-scrollbar { width: 5px; } .fix_pos::-webkit-scrollbar-track { background: transparent; } .fix_pos::-webkit-scrollbar-thumb { background: var(--v-border-primary); border-radius: var(--v-radius-pill); } /* ============================================================================ 4. CDR PAGE ENHANCEMENTS ============================================================================ */ /* Filter bar row — better alignment and spacing */ .v-redesigned .card-body .row .input-group { align-items: center; } .v-redesigned #filterForm .row { gap: var(--v-space-2); align-items: flex-end; } /* Recording modal — enhanced glass styling */ .v-redesigned .modal-content .audio-player, .v-redesigned .modal-body audio { width: 100%; border-radius: var(--v-radius-md); outline: none; } .v-redesigned .modal-content { background: var(--v-glass-bg); backdrop-filter: blur(var(--v-glass-blur)) saturate(var(--v-glass-saturate)); -webkit-backdrop-filter: blur(var(--v-glass-blur)) saturate(var(--v-glass-saturate)); border: 1px solid var(--v-glass-border); border-radius: var(--v-radius-xl); box-shadow: var(--v-glass-shadow); } /* CDR table action buttons — compact icon buttons */ .v-redesigned .dataTables_wrapper .btn-sm { padding: var(--v-space-1); min-width: 28px; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--v-radius-sm); transition: all var(--v-duration-fast) var(--v-ease-default); } .v-redesigned .dataTables_wrapper .btn-sm:hover { background: var(--v-bg-hover); box-shadow: var(--v-shadow-xs); } /* Status badges in CDR — VOIPE badge styling */ .v-redesigned .badge-soft-success { background: var(--v-success-bg); color: var(--v-success); font-weight: 600; font-size: var(--v-text-2xs); border-radius: var(--v-radius-pill); padding: 2px 8px; } .v-redesigned .badge-soft-danger { background: var(--v-danger-bg); color: var(--v-danger); font-weight: 600; font-size: var(--v-text-2xs); border-radius: var(--v-radius-pill); padding: 2px 8px; } .v-redesigned .badge-soft-warning { background: var(--v-warning-bg); color: var(--v-warning); font-weight: 600; font-size: var(--v-text-2xs); border-radius: var(--v-radius-pill); padding: 2px 8px; } .v-redesigned .badge-soft-info { background: var(--v-info-bg); color: var(--v-info); font-weight: 600; font-size: var(--v-text-2xs); border-radius: var(--v-radius-pill); padding: 2px 8px; } /* Export buttons — enhanced styling */ .v-redesigned .buttons-csv, .v-redesigned .buttons-excel, .v-redesigned .buttons-pdf, .v-redesigned .buttons-copy, .v-redesigned .buttons-print { border-radius: var(--v-radius-md); font-size: var(--v-text-xs); font-weight: 500; padding: var(--v-space-1) var(--v-space-3); border: 1px solid var(--v-border-primary); background: var(--v-bg-primary); color: var(--v-text-primary); transition: all var(--v-duration-fast) var(--v-ease-default); } .v-redesigned .buttons-csv:hover, .v-redesigned .buttons-excel:hover, .v-redesigned .buttons-pdf:hover, .v-redesigned .buttons-copy:hover, .v-redesigned .buttons-print:hover { background: var(--v-bg-secondary); box-shadow: var(--v-shadow-sm); } /* ============================================================================ 5. QUEUES PAGE ENHANCEMENTS ============================================================================ */ /* Queue table — enhanced row styling with status-dependent left border */ .v-redesigned .card .table tbody tr { border-inline-start: 3px solid transparent; transition: border-color var(--v-duration-fast) var(--v-ease-default), background var(--v-duration-fast) var(--v-ease-default); } .v-redesigned .card .table tbody tr.queue-active { border-inline-start-color: var(--v-success); } .v-redesigned .card .table tbody tr.queue-warning { border-inline-start-color: var(--v-warning); } .v-redesigned .card .table tbody tr.queue-critical { border-inline-start-color: var(--v-danger); } /* SLA toggle — enhanced switch styling */ .v-redesigned .custom-switch .custom-control-label::before { border-radius: var(--v-radius-pill); background-color: var(--v-bg-tertiary); border-color: var(--v-border-primary); transition: all var(--v-duration-normal) var(--v-ease-default); } .v-redesigned .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--v-brand-500); border-color: var(--v-brand-600); } /* Queue loading spinner — brand-colored spinner */ .v-redesigned .card .spinner-border { color: var(--v-brand-500); border-width: 2px; border-inline-end-color: transparent; } /* Waiting calls counter — highlight styling */ .v-redesigned .badge-pill { font-variant-numeric: tabular-nums; min-width: 24px; text-align: center; font-weight: 600; letter-spacing: 0; } /* ============================================================================ 6. SETTINGS PAGES ENHANCEMENTS ============================================================================ */ /* Settings form groups — better spacing and alignment */ .v-redesigned .settings-form .form-group, .v-redesigned .card-body .form-group { margin-block-end: var(--v-space-5); } .v-redesigned .settings-form .form-group label, .v-redesigned .card-body .form-group > label { font-size: var(--v-text-sm); font-weight: 500; color: var(--v-text-secondary); margin-block-end: var(--v-space-2); display: block; } /* Settings tabs — enhanced tab styling */ .v-redesigned .nav-tabs .nav-link { font-size: var(--v-text-sm); font-weight: 500; color: var(--v-text-secondary); padding-inline: var(--v-space-4); padding-block: var(--v-space-3); border: none; border-bottom: 2px solid transparent; transition: all var(--v-duration-fast) var(--v-ease-default); margin-block-end: -1px; } .v-redesigned .nav-tabs .nav-link:hover { color: var(--v-text-primary); border-bottom-color: var(--v-border-primary); } .v-redesigned .nav-tabs .nav-link.active { color: var(--v-text-brand); border-bottom-color: var(--v-brand-500); background: transparent; font-weight: 600; } /* Settings save buttons — brand CTA styling */ .v-redesigned .card-footer .btn-primary, .v-redesigned .settings-form .btn-primary { background: var(--v-brand-600); border-color: var(--v-brand-700); color: var(--v-text-inverse); font-weight: 500; padding-inline: var(--v-space-6); padding-block: var(--v-space-2); border-radius: var(--v-radius-md); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15); transition: all var(--v-duration-fast) var(--v-ease-default); } .v-redesigned .card-footer .btn-primary:hover, .v-redesigned .settings-form .btn-primary:hover { background: var(--v-brand-700); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); transform: translateY(-1px); } .v-redesigned .card-footer .btn-primary:active, .v-redesigned .settings-form .btn-primary:active { transform: translateY(0); box-shadow: var(--v-shadow-xs); } /* Settings cards — enhanced glass effect for sections */ .v-redesigned .settings-section .card, .v-redesigned .tab-pane .card { background: var(--v-glass-bg); backdrop-filter: blur(12px) saturate(1.5); -webkit-backdrop-filter: blur(12px) saturate(1.5); border: 1px solid var(--v-glass-border); border-radius: var(--v-radius-lg); box-shadow: var(--v-shadow-card); } /* ============================================================================ 7. FILTER BAR UNIVERSAL ENHANCEMENTS ============================================================================ */ /* Better alignment of filter elements */ .v-redesigned .input-group { align-items: stretch; } .v-redesigned .input-group .form-control, .v-redesigned .input-group .custom-select { border-radius: var(--v-radius-md); } /* Ensure the first and last child in input-group have correct radii */ .v-redesigned .input-group > .form-control:first-child, .v-redesigned .input-group > .custom-select:first-child, .v-redesigned .input-group > .input-group-prepend .input-group-text { border-start-end-radius: 0; border-end-end-radius: 0; } .v-redesigned .input-group > .form-control:last-child, .v-redesigned .input-group > .custom-select:last-child, .v-redesigned .input-group > .input-group-append .input-group-text { border-start-start-radius: 0; border-end-start-radius: 0; } /* Date picker input enhanced styling */ .v-redesigned input[name="daterange"], .v-redesigned input.daterangepicker-input, .v-redesigned .daterangepicker-container .form-control { font-family: var(--v-font-mono); font-size: var(--v-text-sm); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; padding-inline: var(--v-space-3); padding-block: var(--v-space-2); border-radius: var(--v-radius-md); background: var(--v-bg-primary); border: 1px solid var(--v-border-primary); color: var(--v-text-primary); transition: border-color var(--v-duration-fast) var(--v-ease-default), box-shadow var(--v-duration-fast) var(--v-ease-default); } .v-redesigned input[name="daterange"]:focus, .v-redesigned input.daterangepicker-input:focus { border-color: var(--v-brand-500); box-shadow: 0 0 0 3px rgba(92, 124, 250, 0.15); } /* Dropdown filters enhanced with VOIPE tokens */ .v-redesigned .filter-bar .custom-select, .v-redesigned .card-header .custom-select, .v-redesigned #filterForm .custom-select { font-size: var(--v-text-sm); padding-block: var(--v-space-2); padding-inline-start: var(--v-space-3); padding-inline-end: var(--v-space-8); border-radius: var(--v-radius-md); border: 1px solid var(--v-border-primary); background-color: var(--v-bg-primary); color: var(--v-text-primary); transition: border-color var(--v-duration-fast) var(--v-ease-default), box-shadow var(--v-duration-fast) var(--v-ease-default); } .v-redesigned .filter-bar .custom-select:focus, .v-redesigned .card-header .custom-select:focus, .v-redesigned #filterForm .custom-select:focus { border-color: var(--v-brand-500); box-shadow: 0 0 0 3px rgba(92, 124, 250, 0.15); } /* Filter bar submit button */ .v-redesigned .filter-bar .btn, .v-redesigned #filterForm .btn[type="submit"] { border-radius: var(--v-radius-md); font-size: var(--v-text-sm); font-weight: 500; } /* ============================================================================ 8. AGENT STATUS COLOR SYSTEM ============================================================================ */ /* Consistent color mapping for agent/extension statuses */ .agent-status-online, [data-status="online"] { --agent-color: var(--v-success); } .agent-status-oncall, [data-status="oncall"] { --agent-color: var(--v-info); } .agent-status-paused, [data-status="paused"] { --agent-color: var(--v-warning); } .agent-status-offline, [data-status="offline"] { --agent-color: var(--v-danger); } .agent-status-ringing, [data-status="ringing"] { --agent-color: #8b5cf6; } /* Status dot colorization based on --agent-color */ .agent-status-online .v-status-dot, [data-status="online"] .v-status-dot { background: var(--v-success); box-shadow: 0 0 0 2px var(--v-success-bg); } .agent-status-oncall .v-status-dot, [data-status="oncall"] .v-status-dot { background: var(--v-info); box-shadow: 0 0 0 2px var(--v-info-bg); } .agent-status-paused .v-status-dot, [data-status="paused"] .v-status-dot { background: var(--v-warning); box-shadow: 0 0 0 2px var(--v-warning-bg); } .agent-status-offline .v-status-dot, [data-status="offline"] .v-status-dot { background: var(--v-danger); box-shadow: 0 0 0 2px var(--v-danger-bg); } .agent-status-ringing .v-status-dot, [data-status="ringing"] .v-status-dot { background: #8b5cf6; box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15); animation: v-pulse 2s infinite; } /* Inline status indicators using agent-color */ .bg-green, .bg-success .info-box-icon { background-color: var(--v-success) !important; } .bg-red, .bg-danger .info-box-icon { background-color: var(--v-danger) !important; } .bg-blue, .bg-info .info-box-icon { background-color: var(--v-info) !important; } .bg-yellow, .bg-warning .info-box-icon { background-color: var(--v-warning) !important; } .bg-purple { background-color: #8b5cf6 !important; } /* ============================================================================ 9. CHART CONTAINER ENHANCEMENTS ============================================================================ */ /* ApexCharts canvas — rounded corners */ .apexcharts-canvas { border-radius: var(--v-radius-md); } /* ApexCharts tooltip — use VOIPE tokens */ .apexcharts-tooltip { background: var(--v-bg-elevated); border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-md); box-shadow: var(--v-shadow-lg); font-family: var(--v-font-sans); font-size: var(--v-text-sm); } .apexcharts-tooltip-title { background: var(--v-bg-secondary); border-bottom: 1px solid var(--v-border-secondary); font-weight: 600; font-size: var(--v-text-xs); padding: var(--v-space-2) var(--v-space-3); } .apexcharts-tooltip-series-group { padding: var(--v-space-1) var(--v-space-3); } /* Chart.js canvas responsive wrapper */ .chart1 canvas, .chart2 canvas { max-width: 100%; height: auto; } /* Chart legend — clean styling */ .apexcharts-legend { font-family: var(--v-font-sans); font-size: var(--v-text-xs); color: var(--v-text-secondary); } .apexcharts-legend-marker { border-radius: 50%; } /* ============================================================================ 10. LOADING STATES ============================================================================ */ /* item_loading_sign — centered spinner with brand color */ .item_loading_sign { display: flex; align-items: center; justify-content: center; padding: var(--v-space-6); color: var(--v-brand-500); } .item_loading_sign::after { content: ''; width: 24px; height: 24px; border: 2.5px solid var(--v-border-primary); border-inline-end-color: var(--v-brand-500); border-radius: 50%; animation: v-spin 0.8s linear infinite; } /* spinner1 — enhanced spinner animation */ .spinner1 { display: inline-flex; align-items: center; justify-content: center; } .spinner1::before { content: ''; width: 20px; height: 20px; border: 2px solid var(--v-border-primary); border-inline-end-color: var(--v-brand-500); border-radius: 50%; animation: v-spin 0.8s linear infinite; display: inline-block; } /* DataTables processing — clean loading overlay */ .v-redesigned .dataTables_processing { background: var(--v-glass-bg); backdrop-filter: blur(4px) saturate(1.5); -webkit-backdrop-filter: blur(4px) saturate(1.5); border: 1px solid var(--v-glass-border); border-radius: var(--v-radius-lg); padding: var(--v-space-4) var(--v-space-6); font-size: var(--v-text-sm); font-weight: 500; color: var(--v-text-secondary); box-shadow: var(--v-shadow-lg); z-index: var(--v-z-overlay); } /* Skeleton shimmer for lazy-loaded content */ .v-redesigned .placeholder-glow .placeholder { background: linear-gradient(90deg, var(--v-bg-secondary) 25%, var(--v-bg-tertiary) 50%, var(--v-bg-secondary) 75% ); background-size: 200% 100%; animation: v-shimmer 1.5s infinite; border-radius: var(--v-radius-sm); } /* ============================================================================ 11. DARK MODE PAGE-SPECIFIC ============================================================================ */ /* Progress text / number in dark mode */ .v-dark .progress-text { color: var(--v-text-secondary); } .v-dark .progress-number { color: var(--v-text-primary); } /* Chart containers in dark mode */ .v-dark .chart1, .v-dark .chart2 { background: var(--v-bg-secondary); border-color: var(--v-border-primary); } /* Agent card backgrounds in dark mode */ .v-dark .info-box, .v-dark .agent-card { background: var(--v-bg-secondary); border-color: var(--v-border-primary); } .v-dark .info-box:hover, .v-dark .agent-card:hover { background: var(--v-bg-tertiary); } /* Filter bar backgrounds in dark mode */ .v-dark .filter-bar, .v-dark #filterForm { background: var(--v-bg-secondary); } /* Dark mode table-dashboard */ .v-dark .table-dashboard .table thead th { background: var(--v-bg-tertiary); border-bottom-color: var(--v-border-primary); } .v-dark .table-dashboard .table tbody td { border-bottom-color: var(--v-border-secondary); } /* Dark mode export buttons */ .v-dark .buttons-csv, .v-dark .buttons-excel, .v-dark .buttons-pdf, .v-dark .buttons-copy, .v-dark .buttons-print { background: var(--v-bg-secondary); border-color: var(--v-border-primary); color: var(--v-text-secondary); } .v-dark .buttons-csv:hover, .v-dark .buttons-excel:hover, .v-dark .buttons-pdf:hover, .v-dark .buttons-copy:hover, .v-dark .buttons-print:hover { background: var(--v-bg-tertiary); color: var(--v-text-primary); } /* Dark mode settings cards glass */ .v-dark .settings-section .card, .v-dark .tab-pane .card { background: var(--v-glass-bg); border-color: var(--v-glass-border); } /* Dark mode recording modal */ .v-dark .modal-content { background: var(--v-bg-primary); border-color: var(--v-border-primary); } /* Dark mode period dropdown */ .v-dark #period .btn-falcon-default.dropdown-toggle { background: var(--v-bg-secondary); border-color: var(--v-border-primary); color: var(--v-text-primary); } /* Dark mode KPI stat values */ .v-dark .fs-4.font-weight-normal.text-700 { color: var(--v-text-primary); } /* Dark mode DataTables processing overlay */ .v-dark .dataTables_processing { background: var(--v-glass-bg); border-color: var(--v-glass-border); color: var(--v-text-secondary); } /* Dark mode agent status ringing glow */ .v-dark .agent-status-ringing .v-status-dot, .v-dark [data-status="ringing"] .v-status-dot { box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25); } /* Dark mode apexcharts tooltip */ .v-dark .apexcharts-tooltip { background: var(--v-bg-elevated); border-color: var(--v-border-primary); } .v-dark .apexcharts-tooltip-title { background: var(--v-bg-tertiary); border-bottom-color: var(--v-border-secondary); } /* ============================================================================ 12. RESPONSIVE PAGE-SPECIFIC ============================================================================ */ /* --- Mobile (max-width: 768px) --- */ @media (max-width: 768px) { /* Dashboard: Stack KPI cards properly */ .v-redesigned .col-md-6.col-xxl-3 { padding-inline: var(--v-space-2); margin-block-end: var(--v-space-3); } /* Dashboard: Chart height reduction */ .chart1 canvas, .chart2 canvas { max-height: 160px; } .chart1, .chart2 { padding: var(--v-space-2); margin-block-end: var(--v-space-3); } /* Dashboard: Progress group stacks better */ .progress-group { padding-block: var(--v-space-1); } /* Dashboard: KPI big numbers size down */ .fs-4.font-weight-normal.text-700 { font-size: var(--v-text-2xl); } /* Agents: Grid to single column */ .v-redesigned .col-md-4 { flex: 0 0 100%; max-width: 100%; padding-inline: var(--v-space-2); } /* Agents: Hide less important table columns */ .v-redesigned .table .d-none-mobile, .v-redesigned .table [data-priority="low"] { display: none; } /* Agents: fix_pos full height on mobile */ .fix_pos { max-height: calc(100vh - 120px); } /* CDR: Horizontal scroll for table */ .v-redesigned .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .v-redesigned .dataTables_wrapper .table { min-width: 700px; } /* CDR: Stacked filters */ .v-redesigned #filterForm .row > [class*="col"] { flex: 0 0 100%; max-width: 100%; margin-block-end: var(--v-space-2); } /* Queues: Similar to agents single column */ .v-redesigned .queue-card, .v-redesigned .queue-container .col-md-6 { flex: 0 0 100%; max-width: 100%; } /* Settings: Full-width forms */ .v-redesigned .settings-form, .v-redesigned .tab-pane .col-md-8, .v-redesigned .tab-pane .col-lg-8 { flex: 0 0 100%; max-width: 100%; } /* Control buttons stack on mobile */ .controlButtons .btn-group { width: 100%; justify-content: center; } /* Period dropdown full width */ #period { width: 100%; margin-block-end: var(--v-space-3); } #period .btn-falcon-default.dropdown-toggle { width: 100%; text-align: start; } } /* --- Tablet (769px - 1024px) --- */ @media (min-width: 769px) and (max-width: 1024px) { /* Dashboard: 2-column KPI layout (handled by Bootstrap, but refine spacing) */ .v-redesigned .col-md-6.col-xxl-3 { margin-block-end: var(--v-space-3); } /* Chart containers side by side with more breathing room */ .chart1, .chart2 { padding: var(--v-space-3); } /* Agents: 2-column grid */ .v-redesigned .col-md-4 { flex: 0 0 50%; max-width: 50%; } /* Settings: Allow more room */ .v-redesigned .tab-pane .col-lg-8 { flex: 0 0 100%; max-width: 100%; } } /* --- Large screens (1200px+) --- */ @media (min-width: 1200px) { /* Dashboard: KPIs in a nice row */ .v-redesigned .col-xxl-3 { padding-inline: var(--v-space-2); } /* Charts at comfortable height */ .chart1 canvas, .chart2 canvas { max-height: 220px; } } /* ============================================================================ 13. RTL PAGE-SPECIFIC ============================================================================ */ /* Progress group layout direction */ [dir="rtl"] .progress-group { flex-direction: row-reverse; flex-wrap: wrap-reverse; } [dir="rtl"] .progress-group .progress { direction: rtl; } /* Progress text and number — text-align start */ [dir="rtl"] .progress-text { text-align: start; } [dir="rtl"] .progress-number { text-align: start; direction: ltr; unicode-bidi: embed; } /* Agent card text alignment */ [dir="rtl"] .info-box-content { text-align: start; } [dir="rtl"] .info-box-icon { border-start-start-radius: var(--v-radius-sm); border-end-start-radius: var(--v-radius-sm); border-start-end-radius: 0; border-end-end-radius: 0; } /* Filter bar alignment */ [dir="rtl"] #filterForm { direction: rtl; } [dir="rtl"] #filterForm .input-group { flex-direction: row-reverse; } [dir="rtl"] #filterForm .input-group > .form-control:first-child { border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: var(--v-radius-md); border-end-end-radius: var(--v-radius-md); } [dir="rtl"] #filterForm .input-group > .form-control:last-child { border-start-start-radius: var(--v-radius-md); border-end-start-radius: var(--v-radius-md); border-start-end-radius: 0; border-end-end-radius: 0; } /* Table column alignment for RTL */ [dir="rtl"] .table-dashboard .table th, [dir="rtl"] .table-dashboard .table td { text-align: start; } /* RTL: KPI cards — numbers stay LTR for readability */ [dir="rtl"] .fs-4.font-weight-normal.text-700 { direction: ltr; unicode-bidi: embed; } /* RTL: Agent status stripe flips to inline-end */ [dir="rtl"] .v-redesigned .card .table tbody tr { border-inline-start: none; border-inline-end: 3px solid transparent; } [dir="rtl"] .v-redesigned .card .table tbody tr.queue-active { border-inline-end-color: var(--v-success); } [dir="rtl"] .v-redesigned .card .table tbody tr.queue-warning { border-inline-end-color: var(--v-warning); } [dir="rtl"] .v-redesigned .card .table tbody tr.queue-critical { border-inline-end-color: var(--v-danger); } /* RTL: Control buttons group */ [dir="rtl"] .controlButtons .btn-group { flex-direction: row-reverse; } /* RTL: Period dropdown alignment */ [dir="rtl"] #period { text-align: start; } /* RTL: Export buttons group */ [dir="rtl"] .dt-buttons { direction: rtl; } /* ============================================================================ 14. PRINT PAGE-SPECIFIC ============================================================================ */ @media print { /* Hide filters and controls, show data only */ .filter-bar, #filterForm, #period, .controlButtons, .dt-buttons, .dataTables_filter, .dataTables_length, .dataTables_paginate, .dataTables_info, .btn-group, .dropdown, .fix_pos .btn, audio, .item_loading_sign, .spinner1 { display: none !important; } /* Proper table formatting */ .table, .dataTables_wrapper .table { width: 100% !important; border-collapse: collapse !important; font-size: 10pt !important; } .table th, .table td { padding: 4px 8px !important; border: 1px solid #ccc !important; color: #000 !important; background: #fff !important; } .table thead th { background: #f0f0f0 !important; font-weight: bold !important; border-bottom: 2px solid #999 !important; } /* Page break handling */ .card { break-inside: avoid; page-break-inside: avoid; box-shadow: none !important; border: 1px solid #ddd !important; } .table tr { page-break-inside: avoid; } /* Remove backgrounds and shadows for clean print */ .chart1, .chart2 { border: none !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; } /* Print chart containers */ .chart1 canvas, .chart2 canvas { max-width: 100% !important; max-height: 250px !important; } /* KPI cards — clean print layout */ .fs-4.font-weight-normal.text-700 { color: #000 !important; font-size: 18pt !important; } /* Progress bars visible in print */ .progress { border: 1px solid #ccc !important; background: #f5f5f5 !important; border-radius: 0 !important; } .progress-bar { background: #333 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Agent status badges — ensure print visibility */ .badge, .badge-soft-success, .badge-soft-danger, .badge-soft-warning, .badge-soft-info { border: 1px solid #999 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Full width for content */ .content, .container-fluid, .main { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; } /* Table-dashboard full width */ .table-dashboard { width: 100% !important; } /* Hide page load transition in print */ body.v-app { opacity: 1 !important; } } /* ============================================================================ 15. MONITORING PAGES - INSIGHT / MONITOR / REALTIME ============================================================================ */ /* Gauge container — unified styling for migrated ApexCharts radialBar gauges */ .v-redesigned #gauge1, .v-redesigned #gauge2, .v-redesigned #gauge3, .v-redesigned #gauge4 { display: flex; align-items: center; justify-content: center; min-height: 180px; border-radius: var(--v-radius-lg); background: var(--v-bg-primary); border: 1px solid var(--v-border-secondary); padding: var(--v-space-3); transition: box-shadow var(--v-duration-normal) var(--v-ease-default); } .v-redesigned #gauge1:hover, .v-redesigned #gauge2:hover, .v-redesigned #gauge3:hover, .v-redesigned #gauge4:hover { box-shadow: var(--v-shadow-sm); } /* Insight/Monitor metric cards — enhanced card styling */ .v-redesigned .monitor-metric-card, .v-redesigned .insight-metric-card, .v-redesigned .card[class*="border-"] { border-radius: var(--v-radius-lg); overflow: hidden; transition: box-shadow var(--v-duration-normal) var(--v-ease-default), transform var(--v-duration-normal) var(--v-ease-default); } .v-redesigned .monitor-metric-card:hover, .v-redesigned .insight-metric-card:hover { box-shadow: var(--v-shadow-card-hover); transform: translateY(-1px); } /* Metric big numbers in insight/monitor pages */ .v-redesigned .metric-value, .v-redesigned [id$="_foot"], .v-redesigned .total_incoming_foot, .v-redesigned .total_outgoing_foot, .v-redesigned .total_total_foot, .v-redesigned #avg_abandoned_time, .v-redesigned #max_wait_time, .v-redesigned #abandoned, .v-redesigned #unanswered, .v-redesigned #total_calls, .v-redesigned #calls_exited { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.02em; color: var(--v-text-primary); } /* Service level percentage display */ .v-redesigned .slevel { font-size: var(--v-text-3xl, 1.875rem); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--v-text-primary); letter-spacing: -0.03em; } /* Extension status indicator icons */ .v-redesigned .extstatus { display: inline-flex; align-items: center; gap: var(--v-space-2); padding: var(--v-space-1) var(--v-space-2); border-radius: var(--v-radius-sm); font-size: var(--v-text-xs); font-weight: 500; transition: background-color var(--v-duration-fast) var(--v-ease-default); } .v-redesigned .extstatus:hover { background: var(--v-bg-hover); } /* Insight modal (skill/queue selection) — enhanced glass styling */ .v-redesigned #SelectSkillsModal .modal-content, .v-redesigned #SelectQueuesModal .modal-content { background: var(--v-glass-bg); backdrop-filter: blur(var(--v-glass-blur)) saturate(var(--v-glass-saturate)); -webkit-backdrop-filter: blur(var(--v-glass-blur)) saturate(var(--v-glass-saturate)); border: 1px solid var(--v-glass-border); border-radius: var(--v-radius-xl); box-shadow: var(--v-glass-shadow); } /* Insight checkboxes — VOIPE brand styling */ .v-redesigned .select_skill, .v-redesigned .select_queue { accent-color: var(--v-brand-500); } .v-redesigned .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--v-brand-500); border-color: var(--v-brand-600); } /* Monitoring spinner variants — larger for gauge areas */ .v-redesigned .spinner7, .v-redesigned .spinner1, .v-redesigned .spinner2 { display: flex; align-items: center; justify-content: center; color: var(--v-brand-500); } /* Realtime skill selector buttons */ .v-redesigned .skill-selector .btn, .v-redesigned .btn-default[onclick*="skill"] { border-radius: var(--v-radius-md); font-size: var(--v-text-sm); font-weight: 500; padding: var(--v-space-2) var(--v-space-4); border: 1px solid var(--v-border-primary); background: var(--v-bg-primary); color: var(--v-text-secondary); transition: all var(--v-duration-fast) var(--v-ease-default); } .v-redesigned .skill-selector .btn:hover, .v-redesigned .btn-default[onclick*="skill"]:hover { background: var(--v-bg-hover); color: var(--v-text-primary); border-color: var(--v-brand-300); } .v-redesigned .skill-selector .btn.active, .v-redesigned .skill-selector .btn.btn-primary { background: var(--v-brand-500); color: var(--v-text-inverse); border-color: var(--v-brand-600); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } /* Live table (waiting calls) — enhanced styling */ .v-redesigned #live_table, .v-redesigned .live-calls-table { font-size: var(--v-text-sm); } .v-redesigned #live_table thead th { font-size: var(--v-text-xs); font-weight: 600; color: var(--v-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; padding: var(--v-space-2) var(--v-space-3); background: var(--v-bg-secondary); border-bottom: 1px solid var(--v-border-primary); } .v-redesigned #live_table tbody td { padding: var(--v-space-2) var(--v-space-3); border-bottom: 1px solid var(--v-border-secondary); vertical-align: middle; } .v-redesigned #live_table tbody tr { transition: background var(--v-duration-fast) var(--v-ease-default); } .v-redesigned #live_table tbody tr:hover { background: var(--v-bg-hover); } /* #alldata container (monitor_cc specific) */ .v-redesigned #alldata { padding-inline: var(--v-space-4); margin-block-start: var(--v-space-4); } .v-redesigned #alldata .table td { vertical-align: middle; padding: var(--v-space-2) var(--v-space-3); } /* Monitoring refresh rate dropdown */ .v-redesigned #refresh_rate, .v-redesigned select[name="refresh_rate"] { border-radius: var(--v-radius-md); padding: var(--v-space-1) var(--v-space-3); font-size: var(--v-text-sm); border: 1px solid var(--v-border-primary); background: var(--v-bg-primary); color: var(--v-text-primary); transition: border-color var(--v-duration-fast) var(--v-ease-default); } .v-redesigned #refresh_rate:focus { border-color: var(--v-brand-500); box-shadow: 0 0 0 3px rgba(92, 124, 250, 0.15); } /* Queue dashboard mini doughnut chart containers */ .v-redesigned .queue-card-chart canvas, .v-redesigned .queue-card-chart .apexcharts-canvas { max-width: 160px; max-height: 90px; margin: 0 auto; } /* Queue dashboard card grid */ .v-redesigned .queue-dashboard-card, .v-redesigned .box { border-radius: var(--v-radius-lg); border: 1px solid var(--v-border-primary); background: var(--v-bg-primary); box-shadow: var(--v-shadow-card); overflow: hidden; transition: box-shadow var(--v-duration-normal) var(--v-ease-default), transform var(--v-duration-normal) var(--v-ease-default); } .v-redesigned .queue-dashboard-card:hover, .v-redesigned .box:hover { box-shadow: var(--v-shadow-card-hover); transform: translateY(-2px); } .v-redesigned .box-header { padding: var(--v-space-3) var(--v-space-4); border-bottom: 1px solid var(--v-border-secondary); font-weight: 600; font-size: var(--v-text-sm); color: var(--v-text-primary); } .v-redesigned .box-body { padding: var(--v-space-3) var(--v-space-4); } .v-redesigned .box-footer { padding: var(--v-space-2) var(--v-space-4); border-top: 1px solid var(--v-border-secondary); background: var(--v-bg-secondary); font-size: var(--v-text-xs); color: var(--v-text-secondary); } /* Monitoring inline styles overrides */ .v-redesigned .monitor2 .table td { vertical-align: middle; padding: var(--v-space-2) var(--v-space-3); } /* ============================================================================ 16. MANAGEMENT PAGES - QUEUES MANAGE / AGENTS MANAGE ============================================================================ */ /* Navigation pills — enhanced stacked nav for queue/agent lists */ .v-redesigned .nav-pills.nav-stacked .nav-link, .v-redesigned .nav-pills.flex-column .nav-link { border-radius: var(--v-radius-md); padding: var(--v-space-2) var(--v-space-3); margin-block-end: 2px; font-size: var(--v-text-sm); font-weight: 500; color: var(--v-text-secondary); transition: all var(--v-duration-fast) var(--v-ease-default); } .v-redesigned .nav-pills.nav-stacked .nav-link:hover, .v-redesigned .nav-pills.flex-column .nav-link:hover { background: var(--v-bg-hover); color: var(--v-text-primary); } .v-redesigned .nav-pills.nav-stacked .nav-link.active, .v-redesigned .nav-pills.flex-column .nav-link.active { background: var(--v-brand-500); color: var(--v-text-inverse); box-shadow: 0 1px 3px rgba(92, 124, 250, 0.3); } /* Agent/Queue search input in manage pages */ .v-redesigned .search-manage input, .v-redesigned .manage-search .form-control { border-radius: var(--v-radius-md); padding: var(--v-space-2) var(--v-space-3); font-size: var(--v-text-sm); border: 1px solid var(--v-border-primary); background: var(--v-bg-primary); transition: border-color var(--v-duration-fast) var(--v-ease-default), box-shadow var(--v-duration-fast) var(--v-ease-default); } .v-redesigned .search-manage input:focus, .v-redesigned .manage-search .form-control:focus { border-color: var(--v-brand-500); box-shadow: 0 0 0 3px rgba(92, 124, 250, 0.15); } /* Queue/Agent assignment buttons — flat style with brand hover */ .v-redesigned .btn-flat { border-radius: var(--v-radius-md); font-size: var(--v-text-sm); font-weight: 500; padding: var(--v-space-1) var(--v-space-3); border: 1px solid var(--v-border-primary); background: transparent; color: var(--v-text-secondary); transition: all var(--v-duration-fast) var(--v-ease-default); } .v-redesigned .btn-flat:hover { background: var(--v-bg-hover); color: var(--v-text-primary); border-color: var(--v-brand-300); } /* Manage page grid — two-column layout enhancement */ .v-redesigned .manage-panel .card { border-radius: var(--v-radius-lg); box-shadow: var(--v-shadow-card); border: 1px solid var(--v-border-primary); overflow: hidden; } .v-redesigned .manage-panel .card-header { background: var(--v-bg-secondary); border-bottom: 1px solid var(--v-border-primary); padding: var(--v-space-3) var(--v-space-4); font-weight: 600; font-size: var(--v-text-sm); } /* Dropdown action menus in manage pages */ .v-redesigned .manage-panel .dropdown-menu { border-radius: var(--v-radius-md); border: 1px solid var(--v-border-primary); box-shadow: var(--v-shadow-lg); padding: var(--v-space-1); } .v-redesigned .manage-panel .dropdown-item { border-radius: var(--v-radius-sm); padding: var(--v-space-2) var(--v-space-3); font-size: var(--v-text-sm); transition: background-color var(--v-duration-fast) var(--v-ease-default); } .v-redesigned .manage-panel .dropdown-item:hover { background: var(--v-bg-hover); } /* ============================================================================ 17. AUTH PAGES - LOGIN / FORGOT PASSWORD / RESET PASSWORD ============================================================================ */ /* Auth page body — centered layout with gradient background */ .v-redesigned.auth-page, body.v-app.auth-page { background: linear-gradient(135deg, var(--v-bg-primary) 0%, var(--v-bg-secondary) 50%, var(--v-bg-tertiary) 100% ); min-height: 100vh; } /* Auth card — glass morphism */ .v-redesigned .container__content.card, .v-redesigned .auth-card .card, body.v-app .container .card { background: var(--v-glass-bg); backdrop-filter: blur(var(--v-glass-blur)) saturate(var(--v-glass-saturate)); -webkit-backdrop-filter: blur(var(--v-glass-blur)) saturate(var(--v-glass-saturate)); border: 1px solid var(--v-glass-border); border-radius: var(--v-radius-xl); box-shadow: var(--v-glass-shadow); } /* Auth form inputs */ body.v-app .form-control { border-radius: var(--v-radius-md); padding: var(--v-space-3) var(--v-space-4); border: 1px solid var(--v-border-primary); font-size: var(--v-text-sm); transition: border-color var(--v-duration-fast) var(--v-ease-default), box-shadow var(--v-duration-fast) var(--v-ease-default); } body.v-app .form-control:focus { border-color: var(--v-brand-500); box-shadow: 0 0 0 3px rgba(92, 124, 250, 0.15); } /* Auth buttons */ body.v-app .btn-primary { background: var(--v-brand-600); border-color: var(--v-brand-700); color: var(--v-text-inverse); font-weight: 500; border-radius: var(--v-radius-md); padding: var(--v-space-3) var(--v-space-6); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15); transition: all var(--v-duration-fast) var(--v-ease-default); } body.v-app .btn-primary:hover { background: var(--v-brand-700); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); transform: translateY(-1px); } body.v-app .btn-default { border-radius: var(--v-radius-md); padding: var(--v-space-3) var(--v-space-6); font-weight: 500; border: 1px solid var(--v-border-primary); background: var(--v-bg-primary); color: var(--v-text-secondary); transition: all var(--v-duration-fast) var(--v-ease-default); } body.v-app .btn-default:hover { background: var(--v-bg-secondary); color: var(--v-text-primary); } /* Language selector — enhanced positioning */ .v-redesigned .langs, body.v-app .langs { position: fixed; top: var(--v-space-4); z-index: 10; display: flex; gap: var(--v-space-2); } [dir="ltr"] .langs, :not([dir="rtl"]) .langs { right: var(--v-space-4); left: auto; } [dir="rtl"] .langs { left: var(--v-space-4); right: auto; } .v-redesigned .langs a, body.v-app .langs a { font-size: var(--v-text-xs); font-weight: 500; color: var(--v-text-secondary); padding: var(--v-space-1) var(--v-space-3); border-radius: var(--v-radius-pill); border: 1px solid var(--v-border-primary); background: var(--v-bg-primary); text-decoration: none; transition: all var(--v-duration-fast) var(--v-ease-default); } .v-redesigned .langs a:hover, body.v-app .langs a:hover { background: var(--v-brand-500); color: var(--v-text-inverse); border-color: var(--v-brand-600); } /* Auth alerts — enhanced alert styling */ body.v-app .alert { border-radius: var(--v-radius-md); font-size: var(--v-text-sm); padding: var(--v-space-3) var(--v-space-4); border: 1px solid; } body.v-app .alert-success { background: var(--v-success-bg); border-color: var(--v-success); color: var(--v-success); } body.v-app .alert-warning { background: var(--v-warning-bg); border-color: var(--v-warning); color: var(--v-warning); } /* Auth logo — subtle animation */ body.v-app .d-flex.flex-center img { max-width: 180px; height: auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)); transition: transform var(--v-duration-normal) var(--v-ease-default); } body.v-app .d-flex.flex-center img:hover { transform: scale(1.03); } /* ============================================================================ 18. DARK MODE - MONITORING / MANAGEMENT / AUTH PAGES ============================================================================ */ /* Dark gauge containers */ .v-dark #gauge1, .v-dark #gauge2, .v-dark #gauge3, .v-dark #gauge4 { background: var(--v-bg-secondary); border-color: var(--v-border-primary); } /* Dark metric values */ .v-dark .total_incoming_foot, .v-dark .total_outgoing_foot, .v-dark .total_total_foot, .v-dark .slevel, .v-dark #avg_abandoned_time, .v-dark #max_wait_time, .v-dark #total_calls { color: var(--v-text-primary); } /* Dark monitoring table */ .v-dark #live_table thead th { background: var(--v-bg-tertiary); } /* Dark box styling */ .v-dark .box { background: var(--v-bg-secondary); border-color: var(--v-border-primary); } .v-dark .box-header { border-bottom-color: var(--v-border-primary); } .v-dark .box-footer { background: var(--v-bg-tertiary); border-top-color: var(--v-border-primary); } /* Dark manage panels */ .v-dark .manage-panel .card { background: var(--v-bg-secondary); border-color: var(--v-border-primary); } .v-dark .manage-panel .card-header { background: var(--v-bg-tertiary); } /* Dark auth page */ .v-dark.auth-page, .v-dark body.v-app.auth-page { background: linear-gradient(135deg, var(--v-bg-primary) 0%, var(--v-bg-secondary) 50%, var(--v-bg-tertiary) 100% ); } /* Dark auth card */ .v-dark .container__content.card, .v-dark body.v-app .container .card { background: var(--v-glass-bg); border-color: var(--v-glass-border); } /* Dark auth form */ .v-dark body.v-app .form-control { background: var(--v-bg-tertiary); border-color: var(--v-border-primary); color: var(--v-text-primary); } /* Dark auth buttons */ .v-dark body.v-app .btn-default { background: var(--v-bg-tertiary); border-color: var(--v-border-primary); color: var(--v-text-secondary); } /* Dark extension status */ .v-dark .extstatus:hover { background: var(--v-bg-tertiary); } /* ============================================================================ 19. RESPONSIVE - MONITORING / MANAGEMENT / AUTH PAGES ============================================================================ */ @media (max-width: 768px) { /* Gauges stack vertically on mobile */ .v-redesigned #gauge1, .v-redesigned #gauge2, .v-redesigned #gauge3, .v-redesigned #gauge4 { min-height: 150px; margin-block-end: var(--v-space-3); } /* Monitor #alldata responsive */ .v-redesigned #alldata { padding-inline: var(--v-space-2); } /* Insight table horizontal scroll */ .v-redesigned #sTab_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .v-redesigned #sTab { min-width: 700px; } /* Queue dashboard cards — single column */ .v-redesigned .queue-dashboard-card, .v-redesigned .col-lg-3.col-sm-6 { flex: 0 0 100%; max-width: 100%; margin-block-end: var(--v-space-3); } /* Management pages — stack panels */ .v-redesigned .manage-panel .col-md-4, .v-redesigned .manage-panel .col-md-8 { flex: 0 0 100%; max-width: 100%; margin-block-end: var(--v-space-3); } /* Auth card wider on mobile */ body.v-app .col-xl-5, body.v-app .col-xxl-4 { flex: 0 0 95%; max-width: 95%; } /* Skill selector — wrap buttons */ .v-redesigned .skill-selector { display: flex; flex-wrap: wrap; gap: var(--v-space-2); } /* Realtime tables scroll */ .v-redesigned .max200 { max-width: 100%; } } @media (min-width: 769px) and (max-width: 1024px) { /* Gauges — 2x2 grid on tablet */ .v-redesigned #gauge1, .v-redesigned #gauge2, .v-redesigned #gauge3, .v-redesigned #gauge4 { min-height: 160px; } /* Queue dashboard — 2 per row on tablet */ .v-redesigned .queue-dashboard-card, .v-redesigned .col-lg-3.col-sm-6 { flex: 0 0 50%; max-width: 50%; } } /* ============================================================================ 20. RTL - MONITORING / MANAGEMENT / AUTH PAGES ============================================================================ */ /* RTL gauge text — numbers stay LTR */ [dir="rtl"] .slevel, [dir="rtl"] .total_incoming_foot, [dir="rtl"] .total_outgoing_foot, [dir="rtl"] .total_total_foot, [dir="rtl"] #avg_abandoned_time, [dir="rtl"] #max_wait_time, [dir="rtl"] #total_calls { direction: ltr; unicode-bidi: embed; } /* RTL live table alignment */ [dir="rtl"] #live_table th, [dir="rtl"] #live_table td { text-align: start; } /* RTL alldata alignment */ [dir="rtl"] #alldata .table td { text-align: start; } /* RTL manage nav pills */ [dir="rtl"] .nav-pills.nav-stacked .nav-link, [dir="rtl"] .nav-pills.flex-column .nav-link { text-align: start; } /* RTL auth language selector */ [dir="rtl"] .langs { left: var(--v-space-4); right: auto; } /* RTL monitoring filter row */ [dir="rtl"] .v-redesigned #alldata { direction: rtl; } /* RTL dropdown menus flip */ [dir="rtl"] .manage-panel .dropdown-menu { text-align: start; } /* RTL insight table — ensure phone numbers are LTR */ [dir="rtl"] #sTab td:nth-child(5), [dir="rtl"] #live_table td:nth-child(2) { direction: ltr; unicode-bidi: embed; } /* ============================================================================ 21. ANIMATIONS (shared) ============================================================================ */ @keyframes v-spin { to { transform: rotate(360deg); } } @keyframes v-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes v-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes v-slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes v-scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* Card entrance animation for dynamically added cards */ .v-redesigned .v-animate-in { animation: v-slideUp 0.3s ease-out both; } /* Gauge entrance */ .v-redesigned .v-gauge-animate { animation: v-scaleIn 0.4s ease-out both; } /* ============================================================================ 22. MOBILE PERFORMANCE — BACKDROP FILTER FALLBACK ============================================================================ */ /* Disable heavy backdrop-filter on mobile for smoother scrolling */ @media (max-width: 768px) { .navbar-glass, .navbar-top { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: var(--v-bg-primary) !important; } .v-dark .navbar-glass, .v-dark .navbar-top { background: var(--v-bg-secondary) !important; } }