/* ============================================================================ VOIPE CPanel - Bootstrap 4 / Falcon Theme Override Layer v2.1 ============================================================================ Reskins existing Bootstrap 4 + Falcon v2.6.0 classes to match the VOIPE design system tokens (--v-*). Requirements: - voipe-design-system.css must be loaded BEFORE this file - Does NOT break existing JS or functionality -- visual only - Full RTL support via [dir="rtl"] selectors + CSS logical properties - Dark mode via .v-dark on or - Responsive / mobile-compatible Sections: 1. Global / Base Overrides 2. Layout (body, .main, .content, .container-fluid) 3. Sidebar (.navbar-vertical) 4. Topbar (.navbar-top, .navbar-glass) 5. Cards (.card) 6. Buttons (.btn) 7. Forms (.form-control, .custom-select, .custom-checkbox, .custom-radio) 8. Tables & DataTables 9. Badges (.badge) 10. Modals (.modal) 11. Dropdowns (.dropdown-menu) 12. Alerts (.alert) 13. Pagination (.pagination) 14. Tabs (.nav-tabs) 15. Toastr (#toast-container) 16. DateRangePicker (.daterangepicker) 17. Breadcrumbs 18. Tooltips & Popovers 19. Progress Bars 20. Scrollbars 21. RTL-Specific Overrides 22. Dark Mode Refinements 23. Responsive / Mobile 24. Print 25. Animations & Transitions ============================================================================ */ /* ============================================================================ 1. GLOBAL / BASE OVERRIDES ============================================================================ */ html { scroll-behavior: smooth; } body, body.v-app { font-family: var(--v-font-sans); font-size: var(--v-text-base); line-height: var(--v-leading-normal); color: var(--v-text-primary); background-color: var(--v-bg-app); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; } *, *::before, *::after { border-color: var(--v-border-primary); } a { color: var(--v-text-link); transition: color var(--v-duration-fast) var(--v-ease-default); } a:hover { color: var(--v-brand-700); text-decoration: none; } a:focus-visible { outline: 2px solid var(--v-border-focus); outline-offset: 2px; border-radius: var(--v-radius-sm); } ::selection { background: var(--v-brand-200); color: var(--v-brand-900); } .v-dark ::selection { background: var(--v-brand-700); color: white; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--v-text-primary); font-family: var(--v-font-sans); letter-spacing: var(--v-tracking-tight); font-weight: 600; } p { color: var(--v-text-primary); } small, .small, .text-muted { color: var(--v-text-secondary) !important; } .text-600 { color: var(--v-text-secondary) !important; } .text-700 { color: var(--v-text-primary) !important; } code, pre, .font-mono { font-family: var(--v-font-mono); } hr { border-top-color: var(--v-border-secondary); } /* ============================================================================ 2. LAYOUT (body, .main, .content, .container-fluid) ============================================================================ */ .main, main.main { background-color: var(--v-bg-app); min-height: 100vh; } .container-fluid[data-layout="container"] { background-color: var(--v-bg-app); } .content { background-color: var(--v-bg-app); min-height: calc(100vh - var(--v-topbar-height)); } .content-inner { padding: var(--v-space-5); } /* Page content wrapper */ .pageContent { animation: v-fade-in 0.3s var(--v-ease-default) forwards; } footer { padding: var(--v-space-4) 0; border-top: 1px solid var(--v-border-secondary); } footer p { color: var(--v-text-tertiary) !important; font-size: var(--v-text-xs); } /* ============================================================================ 3. SIDEBAR (.navbar-vertical) ============================================================================ */ .navbar-vertical { background: var(--v-bg-sidebar) !important; border-inline-end: 1px solid var(--v-border-primary) !important; border-right: none; border-left: none; box-shadow: var(--v-shadow-sm); transition: width var(--v-duration-slow) var(--v-ease-default), box-shadow var(--v-duration-normal) var(--v-ease-default); font-family: var(--v-font-sans); } /* Glass effect on sidebar */ .navbar-vertical::before { content: ''; position: absolute; inset: 0; background: var(--v-glass-highlight); pointer-events: none; z-index: 0; border-radius: inherit; } /* RTL: sidebar border flips */ [dir="rtl"] .navbar-vertical { border-left: none !important; border-right: none !important; border-inline-end: 1px solid var(--v-border-primary) !important; } /* Sidebar brand/logo area */ .navbar-vertical .navbar-brand { padding: var(--v-space-3) var(--v-space-4); } .navbar-vertical .navbar-brand img { transition: opacity var(--v-duration-normal) var(--v-ease-default); } /* Sidebar scrollbar */ .navbar-vertical .navbar-collapse, .navbar-vertical .perfect-scrollbar, .navbar-vertical .scrollbar { background: transparent !important; } .navbar-vertical .navbar-collapse::-webkit-scrollbar { width: 4px; } .navbar-vertical .navbar-collapse::-webkit-scrollbar-track { background: transparent; } .navbar-vertical .navbar-collapse::-webkit-scrollbar-thumb { background: var(--v-border-primary); border-radius: var(--v-radius-pill); } /* Sidebar vertical divider line */ .navbar-vertical-divider { opacity: 0.5; } .navbar-vertical-hr { border-color: var(--v-border-secondary) !important; margin: var(--v-space-2) 0 !important; } /* Sidebar navigation items */ .navbar-vertical .nav-item { margin: 1px 0; } .navbar-vertical .nav-link { color: var(--v-text-secondary) !important; font-size: var(--v-text-sm); font-weight: 450; padding: var(--v-space-2) var(--v-space-3); border-radius: var(--v-radius-md); margin: 0 var(--v-space-2); transition: all var(--v-duration-fast) var(--v-ease-default); position: relative; } .navbar-vertical .nav-link:hover { background: var(--v-bg-hover); color: var(--v-text-primary) !important; } .navbar-vertical .nav-item.active > .nav-link, .navbar-vertical .nav-link.active { background: var(--v-bg-active) !important; color: var(--v-text-brand) !important; font-weight: 500; } /* Active indicator bar */ .navbar-vertical .nav-item.active > .nav-link::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 16px; background: var(--v-brand-500); border-start-start-radius: 0; border-start-end-radius: var(--v-radius-pill); border-end-end-radius: var(--v-radius-pill); border-end-start-radius: 0; } /* Sidebar nav link icons */ .navbar-vertical .nav-link-icon { color: var(--v-text-tertiary); width: 20px; min-width: 20px; font-size: var(--v-text-sm); text-align: center; transition: color var(--v-duration-fast) var(--v-ease-default); } .navbar-vertical .nav-link:hover .nav-link-icon, .navbar-vertical .nav-item.active .nav-link-icon { color: var(--v-text-brand); } .navbar-vertical .nav-link-text { font-size: var(--v-text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Sidebar dropdown-indicator (collapse arrow) */ .navbar-vertical .nav-link.dropdown-indicator::after { transition: transform var(--v-duration-fast) var(--v-ease-default); color: var(--v-text-tertiary); border: none; font-size: 0.65em; } [dir="rtl"] .navbar-vertical .nav-link.dropdown-indicator::after { transform: scaleX(-1); } .navbar-vertical .nav-link.dropdown-indicator[aria-expanded="true"]::after { transform: rotate(90deg); } [dir="rtl"] .navbar-vertical .nav-link.dropdown-indicator[aria-expanded="true"]::after { transform: scaleX(-1) rotate(90deg); } /* Sidebar sub-menus (collapsed navs) */ .navbar-vertical .nav.collapse, .navbar-vertical .nav.collapsing { padding-inline-start: var(--v-space-3); } .navbar-vertical .nav.collapse .nav-link { font-size: var(--v-text-xs); padding: var(--v-space-1) var(--v-space-3); margin: 0 var(--v-space-1); } /* Sidebar user info section */ .navbar-vertical #innerNavInfo { padding: var(--v-space-2) var(--v-space-3); } .navbar-vertical #innerNavInfo .nav-item { font-size: var(--v-text-xs); color: var(--v-text-secondary); } .navbar-vertical #innerNavInfo .nav-item span { font-size: var(--v-text-xs); color: var(--v-text-secondary); } /* Sidebar tab navigation (PBX / CC / MNG / RPT) */ #asideNavTabs { border-bottom: 1px solid var(--v-border-primary) !important; background: var(--v-bg-secondary); margin: 0 !important; padding: var(--v-space-1) !important; gap: 2px; } #asideNavTabs .nav-item { border-radius: var(--v-radius-sm); overflow: hidden; } #asideNavTabs .nav-link { color: var(--v-text-tertiary) !important; font-size: var(--v-text-xs); padding: var(--v-space-2) var(--v-space-1); border: none !important; border-radius: var(--v-radius-sm) !important; transition: all var(--v-duration-fast) var(--v-ease-default); background: transparent !important; margin: 0 !important; } #asideNavTabs .nav-link:hover { color: var(--v-text-primary) !important; background: var(--v-bg-hover) !important; } #asideNavTabs .nav-link.active { color: var(--v-text-brand) !important; background: var(--v-bg-active) !important; font-weight: 500; } /* Sidebar tab content area */ #asideTabContent { padding: var(--v-space-2) 0; } #asideTabContent .tab-pane { animation: v-fade-in 0.2s var(--v-ease-default) forwards; } /* Sidebar collapsed state */ html.navbar-vertical-collapsed .navbar-vertical { box-shadow: none; } html.navbar-vertical-collapsed .navbar-vertical:hover { box-shadow: var(--v-shadow-lg); } /* Toggle button (hamburger) */ .navbar-toggler-humburger-icon { color: var(--v-text-secondary); border: none !important; border-radius: var(--v-radius-md); padding: var(--v-space-2); transition: background var(--v-duration-fast) var(--v-ease-default); } .navbar-toggler-humburger-icon:hover { background: var(--v-bg-hover); } .navbar-toggle-icon .toggle-line { background-color: var(--v-text-secondary) !important; } /* ============================================================================ 4. TOPBAR (.navbar-top, .navbar-glass) ============================================================================ */ .navbar-top, .navbar-glass, #vertNavBar { background: var(--v-glass-bg) !important; backdrop-filter: blur(var(--v-glass-blur)) saturate(var(--v-glass-saturate)) !important; -webkit-backdrop-filter: blur(var(--v-glass-blur)) saturate(var(--v-glass-saturate)) !important; border-bottom: 1px solid var(--v-glass-border) !important; box-shadow: var(--v-shadow-xs) !important; transition: background var(--v-duration-normal) var(--v-ease-default), box-shadow var(--v-duration-normal) var(--v-ease-default); min-height: var(--v-topbar-height); padding: 0 var(--v-space-4); } /* Topbar position relative to glass effect */ .navbar-top::before, .navbar-glass::before, #vertNavBar::before { content: ''; position: absolute; inset: 0; background: var(--v-glass-highlight); pointer-events: none; z-index: 0; } /* Topbar nav items */ .navbar-top .nav-link, .navbar-glass .nav-link, #vertNavBar .nav-link { color: var(--v-text-secondary) !important; font-size: var(--v-text-sm); font-weight: 450; transition: color var(--v-duration-fast) var(--v-ease-default); padding: var(--v-space-2) var(--v-space-2); border-radius: var(--v-radius-md); position: relative; z-index: 1; } .navbar-top .nav-link:hover, .navbar-glass .nav-link:hover, #vertNavBar .nav-link:hover { color: var(--v-text-primary) !important; background: var(--v-bg-hover); } /* CTI indicator */ #cti_changer { font-family: var(--v-font-mono); font-size: var(--v-text-xs); font-weight: 600; padding: var(--v-space-1) var(--v-space-3) !important; border-radius: var(--v-radius-pill); transition: all var(--v-duration-fast) var(--v-ease-default); } #cti_changer.cti_disabled { background: var(--v-danger-bg); color: var(--v-danger) !important; } #cti_changer.cti_enabled { background: var(--v-success-bg); color: var(--v-success) !important; } /* User avatar in topbar */ .navbar-top .avatar, .navbar-glass .avatar, #vertNavBar .avatar { border: 2px solid var(--v-border-primary); transition: border-color var(--v-duration-fast) var(--v-ease-default); } .navbar-top .avatar:hover, .navbar-glass .avatar:hover, #vertNavBar .avatar:hover { border-color: var(--v-brand-300); } .avatar img.rounded-circle { border-radius: var(--v-radius-pill) !important; } /* Skills section in topbar */ #cc_skills .form-control { background: var(--v-bg-secondary); border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-md); font-size: var(--v-text-xs); color: var(--v-text-primary); padding: var(--v-space-1) var(--v-space-2); } /* ============================================================================ 5. CARDS (.card) ============================================================================ */ .card { background: var(--v-bg-primary); border: 1px solid var(--v-border-primary) !important; border-radius: var(--v-radius-lg) !important; box-shadow: var(--v-shadow-card); transition: box-shadow var(--v-duration-normal) var(--v-ease-default), transform var(--v-duration-normal) var(--v-ease-default); overflow: hidden; } .card:hover { box-shadow: var(--v-shadow-card-hover); } .card-header { background: var(--v-bg-primary) !important; border-bottom: 1px solid var(--v-border-secondary) !important; padding: var(--v-space-4) var(--v-space-5); font-weight: 600; font-size: var(--v-text-base); color: var(--v-text-primary); } .card-body { padding: var(--v-space-5); color: var(--v-text-primary); } .card-footer { background: var(--v-bg-secondary) !important; border-top: 1px solid var(--v-border-secondary) !important; padding: var(--v-space-3) var(--v-space-5); } .card-title { color: var(--v-text-primary); font-weight: 600; font-size: var(--v-text-md); letter-spacing: var(--v-tracking-tight); margin-bottom: var(--v-space-3); } /* Falcon specific card classes */ .bg-white { background-color: var(--v-bg-primary) !important; } .rounded-soft { border-radius: var(--v-radius-md) !important; } /* Tips section card */ .innerTips.card { border-radius: var(--v-radius-lg) !important; box-shadow: var(--v-shadow-sm); } /* ============================================================================ 6. BUTTONS (.btn) ============================================================================ */ .btn { font-family: var(--v-font-sans); font-size: var(--v-text-sm); font-weight: 500; border-radius: var(--v-radius-md); padding: var(--v-space-2) var(--v-space-4); transition: all var(--v-duration-fast) var(--v-ease-default); border: 1px solid transparent; line-height: 1.5; letter-spacing: 0; position: relative; overflow: hidden; } .btn:focus, .btn:focus-visible { box-shadow: 0 0 0 2px var(--v-bg-app), 0 0 0 4px var(--v-border-focus) !important; outline: none; } .btn:active { transform: scale(0.98); } /* Primary */ .btn-primary { background: var(--v-brand-600) !important; border-color: var(--v-brand-700) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn-primary:hover, .btn-primary:focus { background: var(--v-brand-700) !important; border-color: var(--v-brand-800) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .btn-primary:active { background: var(--v-brand-800) !important; } /* Secondary */ .btn-secondary { background: var(--v-bg-primary) !important; border-color: var(--v-border-primary) !important; color: var(--v-text-primary) !important; box-shadow: var(--v-shadow-xs); } .btn-secondary:hover, .btn-secondary:focus { background: var(--v-bg-secondary) !important; border-color: var(--v-border-primary) !important; color: var(--v-text-primary) !important; box-shadow: var(--v-shadow-sm); } /* Danger */ .btn-danger { background: var(--v-danger) !important; border-color: var(--v-danger) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(239, 68, 68, 0.2); } .btn-danger:hover, .btn-danger:focus { background: #dc2626 !important; border-color: #b91c1c !important; box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3); } /* Success */ .btn-success { background: var(--v-success) !important; border-color: var(--v-success) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(16, 185, 129, 0.2); } .btn-success:hover, .btn-success:focus { background: #059669 !important; border-color: #047857 !important; } /* Warning */ .btn-warning { background: var(--v-warning) !important; border-color: var(--v-warning) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(245, 158, 11, 0.2); } .btn-warning:hover, .btn-warning:focus { background: #d97706 !important; border-color: #b45309 !important; } /* Info */ .btn-info { background: var(--v-info) !important; border-color: var(--v-info) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(59, 130, 246, 0.2); } .btn-info:hover, .btn-info:focus { background: #2563eb !important; border-color: #1d4ed8 !important; } /* Outline variants */ .btn-outline-primary { color: var(--v-brand-600) !important; border-color: var(--v-brand-600) !important; background: transparent !important; } .btn-outline-primary:hover { background: var(--v-brand-600) !important; color: #fff !important; } .btn-outline-secondary { color: var(--v-text-secondary) !important; border-color: var(--v-border-primary) !important; background: transparent !important; } .btn-outline-secondary:hover { background: var(--v-bg-secondary) !important; color: var(--v-text-primary) !important; } .btn-outline-danger { color: var(--v-danger) !important; border-color: var(--v-danger) !important; background: transparent !important; } .btn-outline-danger:hover { background: var(--v-danger) !important; color: #fff !important; } /* Falcon default button */ .btn-falcon-default { background: var(--v-bg-primary) !important; border-color: var(--v-border-primary) !important; color: var(--v-text-primary) !important; box-shadow: var(--v-shadow-xs); } .btn-falcon-default:hover { background: var(--v-bg-secondary) !important; color: var(--v-text-primary) !important; box-shadow: var(--v-shadow-sm); } .btn-falcon-primary { background: var(--v-brand-50) !important; border-color: var(--v-brand-100) !important; color: var(--v-brand-700) !important; } .btn-falcon-primary:hover { background: var(--v-brand-100) !important; color: var(--v-brand-800) !important; } /* Link button */ .btn-link { color: var(--v-text-link) !important; text-decoration: none; } .btn-link:hover { color: var(--v-brand-700) !important; text-decoration: none; } /* Button sizes */ .btn-sm { padding: var(--v-space-1) var(--v-space-3); font-size: var(--v-text-xs); border-radius: var(--v-radius-sm); } .btn-lg { padding: var(--v-space-3) var(--v-space-6); font-size: var(--v-text-md); border-radius: var(--v-radius-lg); } /* Disabled state */ .btn:disabled, .btn.disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; } /* Button group */ .btn-group .btn { border-radius: 0; } .btn-group .btn:first-child { border-start-start-radius: var(--v-radius-md); border-end-start-radius: var(--v-radius-md); } .btn-group .btn:last-child { border-start-end-radius: var(--v-radius-md); border-end-end-radius: var(--v-radius-md); } /* Close button */ .close, button.close { color: var(--v-text-tertiary); opacity: 0.6; transition: opacity var(--v-duration-fast) var(--v-ease-default); text-shadow: none; } .close:hover { color: var(--v-text-primary); opacity: 1; } /* ============================================================================ 7. FORMS (.form-control, .custom-select, .custom-checkbox, .custom-radio) ============================================================================ */ .form-control { font-family: var(--v-font-sans); font-size: var(--v-text-base); color: var(--v-text-primary); background-color: var(--v-bg-primary); border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-md); padding: var(--v-space-2) var(--v-space-3); transition: border-color var(--v-duration-fast) var(--v-ease-default), box-shadow var(--v-duration-fast) var(--v-ease-default); } .form-control:focus { border-color: var(--v-brand-500); box-shadow: var(--v-focus-ring); color: var(--v-text-primary); background-color: var(--v-bg-primary); } .form-control::placeholder { color: var(--v-text-tertiary); } .form-control:disabled, .form-control[readonly] { background-color: var(--v-bg-secondary); color: var(--v-text-tertiary); opacity: 0.7; } .form-control-sm { font-size: var(--v-text-xs); padding: var(--v-space-1) var(--v-space-2); border-radius: var(--v-radius-sm); } .form-control-lg { font-size: var(--v-text-md); padding: var(--v-space-3) var(--v-space-4); border-radius: var(--v-radius-lg); } /* Form labels */ .form-group label, label { color: var(--v-text-secondary); font-size: var(--v-text-sm); font-weight: 500; margin-bottom: var(--v-space-1); } .form-group { margin-bottom: var(--v-space-4); } .form-text { color: var(--v-text-tertiary); font-size: var(--v-text-2xs); } /* Validation states */ .form-control.is-valid { border-color: var(--v-success) !important; } .form-control.is-valid:focus { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important; } .form-control.is-invalid { border-color: var(--v-danger) !important; } .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important; } .valid-feedback { color: var(--v-success); font-size: var(--v-text-2xs); } .invalid-feedback { color: var(--v-danger); font-size: var(--v-text-2xs); } /* Custom select */ .custom-select { font-family: var(--v-font-sans); font-size: var(--v-text-base); color: var(--v-text-primary); background-color: var(--v-bg-primary); border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-md); padding: var(--v-space-2) var(--v-space-3); padding-inline-end: var(--v-space-8); transition: border-color var(--v-duration-fast) var(--v-ease-default), box-shadow var(--v-duration-fast) var(--v-ease-default); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px; background-position: calc(100% - 10px) center; } [dir="rtl"] .custom-select { background-position: 10px center; } .custom-select:focus { border-color: var(--v-brand-500); box-shadow: var(--v-focus-ring); } /* Custom checkbox */ .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--v-brand-600); border-color: var(--v-brand-600); } .custom-checkbox .custom-control-label::before { border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-sm); background-color: var(--v-bg-primary); transition: all var(--v-duration-fast) var(--v-ease-default); } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--v-focus-ring); border-color: var(--v-brand-500); } /* Custom radio */ .custom-radio .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--v-brand-600); border-color: var(--v-brand-600); } .custom-radio .custom-control-label::before { border: 1px solid var(--v-border-primary); background-color: var(--v-bg-primary); transition: all var(--v-duration-fast) var(--v-ease-default); } /* Custom switch */ .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--v-brand-500); border-color: var(--v-brand-500); } .custom-control-label { color: var(--v-text-primary); font-size: var(--v-text-sm); cursor: pointer; } /* Input group */ .input-group-text { background-color: var(--v-bg-secondary); border: 1px solid var(--v-border-primary); color: var(--v-text-secondary); font-size: var(--v-text-sm); border-radius: var(--v-radius-md); } .input-group > .form-control:not(:first-child) { border-start-start-radius: 0; border-end-start-radius: 0; } .input-group > .form-control:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; } /* ============================================================================ 8. TABLES & DATATABLES ============================================================================ */ /* Base Bootstrap table */ table.table, .table { color: var(--v-text-primary); font-size: var(--v-text-sm); border-collapse: separate; border-spacing: 0; } .table thead th { background: var(--v-bg-secondary); color: var(--v-text-secondary); font-size: var(--v-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--v-border-primary) !important; border-top: none !important; padding: var(--v-space-3) var(--v-space-4); white-space: nowrap; text-align: start; } .table td, .table tbody td { padding: var(--v-space-3) var(--v-space-4); border-top: none !important; border-bottom: 1px solid var(--v-border-secondary); color: var(--v-text-primary); vertical-align: middle; text-align: start; } .table tbody tr { transition: background var(--v-duration-fast) var(--v-ease-default); } .table-hover tbody tr:hover, .table tbody tr:hover { background: var(--v-bg-hover) !important; } .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.015); } .v-dark .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.02); } .table-bordered { border: 1px solid var(--v-border-primary) !important; } .table-bordered th, .table-bordered td { border: 1px solid var(--v-border-secondary) !important; } /* DataTables wrapper */ .dataTables_wrapper { font-family: var(--v-font-sans); font-size: var(--v-text-sm); color: var(--v-text-secondary); } /* DataTables filter/search */ .dataTables_wrapper .dataTables_filter { margin-bottom: var(--v-space-4); } .dataTables_wrapper .dataTables_filter label { font-size: var(--v-text-sm); color: var(--v-text-secondary); } .dataTables_wrapper .dataTables_filter input { font-family: var(--v-font-sans); font-size: var(--v-text-sm); color: var(--v-text-primary); background: var(--v-bg-primary); border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-md); padding: var(--v-space-2) var(--v-space-3); margin-inline-start: var(--v-space-2); transition: border-color var(--v-duration-fast) var(--v-ease-default), box-shadow var(--v-duration-fast) var(--v-ease-default); } .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--v-brand-500); box-shadow: var(--v-focus-ring); outline: none; } /* DataTables length selector */ .dataTables_wrapper .dataTables_length { margin-bottom: var(--v-space-4); } .dataTables_wrapper .dataTables_length label { font-size: var(--v-text-sm); color: var(--v-text-secondary); } .dataTables_wrapper .dataTables_length select { font-family: var(--v-font-sans); font-size: var(--v-text-sm); color: var(--v-text-primary); background: var(--v-bg-primary); border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-md); padding: var(--v-space-1) var(--v-space-2); } /* DataTables info */ .dataTables_wrapper .dataTables_info { font-size: var(--v-text-xs); color: var(--v-text-tertiary); padding-top: var(--v-space-3); } /* DataTables pagination */ .dataTables_wrapper .dataTables_paginate { padding-top: var(--v-space-3); } .dataTables_wrapper .dataTables_paginate .paginate_button { font-family: var(--v-font-sans); font-size: var(--v-text-xs); color: var(--v-text-secondary) !important; background: var(--v-bg-primary) !important; border: 1px solid var(--v-border-primary) !important; border-radius: var(--v-radius-sm) !important; padding: var(--v-space-1) var(--v-space-3) !important; margin: 0 2px; transition: all var(--v-duration-fast) var(--v-ease-default); } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--v-bg-secondary) !important; color: var(--v-text-primary) !important; border-color: var(--v-border-primary) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--v-brand-600) !important; color: #fff !important; border-color: var(--v-brand-700) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--v-brand-700) !important; color: #fff !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: 0.4; cursor: not-allowed; } /* DataTables sorting indicators */ table.dataTable thead .sorting::before, table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::before, table.dataTable thead .sorting_desc::after { opacity: 0.3; } table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::before { opacity: 0.8; color: var(--v-brand-500); } /* DataTables selected row */ table.dataTable tbody tr.selected, table.dataTable tbody tr.selected td { background-color: var(--v-bg-active) !important; color: var(--v-text-primary) !important; } /* DataTables responsive */ table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before, table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before { background-color: var(--v-brand-500) !important; border-radius: var(--v-radius-pill); box-shadow: var(--v-shadow-xs); } /* DataTables Editor */ .DTED_Lightbox_Wrapper .DTED_Lightbox_Container { background: var(--v-bg-primary) !important; border: 1px solid var(--v-border-primary) !important; border-radius: var(--v-radius-xl) !important; box-shadow: var(--v-shadow-xl) !important; } .DTED_Lightbox_Wrapper .DTED_Lightbox_Content_Wrapper { background: var(--v-bg-primary) !important; } /* DataTables buttons */ .dt-buttons .btn, .dataTables_wrapper .dt-button { background: var(--v-bg-primary) !important; border: 1px solid var(--v-border-primary) !important; color: var(--v-text-primary) !important; font-size: var(--v-text-xs) !important; border-radius: var(--v-radius-md) !important; padding: var(--v-space-1) var(--v-space-3) !important; margin-inline-end: var(--v-space-1); box-shadow: var(--v-shadow-xs); } .dt-buttons .btn:hover, .dataTables_wrapper .dt-button:hover { background: var(--v-bg-secondary) !important; box-shadow: var(--v-shadow-sm); } /* DataTables empty row */ .dataTables_wrapper .dataTables_empty { color: var(--v-text-tertiary); font-size: var(--v-text-sm); padding: var(--v-space-8) !important; text-align: center; } /* ============================================================================ 9. BADGES (.badge) ============================================================================ */ .badge { font-family: var(--v-font-sans); font-size: var(--v-text-2xs); font-weight: 600; padding: 3px 8px; border-radius: var(--v-radius-pill); letter-spacing: 0.01em; line-height: 1.4; } .badge-primary, .badge-soft-primary { background: var(--v-brand-50) !important; color: var(--v-brand-700) !important; } .badge-success, .badge-soft-success { background: var(--v-success-bg) !important; color: var(--v-success) !important; } .badge-warning, .badge-soft-warning { background: var(--v-warning-bg) !important; color: var(--v-warning) !important; } .badge-danger, .badge-soft-danger { background: var(--v-danger-bg) !important; color: var(--v-danger) !important; } .badge-info, .badge-soft-info { background: var(--v-info-bg) !important; color: var(--v-info) !important; } .badge-secondary { background: var(--v-bg-tertiary) !important; color: var(--v-text-secondary) !important; } .badge-light { background: var(--v-bg-secondary) !important; color: var(--v-text-secondary) !important; } .badge-dark { background: var(--v-text-primary) !important; color: var(--v-text-inverse) !important; } /* ============================================================================ 10. MODALS (.modal) ============================================================================ */ .modal-backdrop { background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .modal-backdrop.show { opacity: 1; } .modal-content { background: var(--v-bg-primary); border: 1px solid var(--v-border-primary) !important; border-radius: var(--v-radius-xl) !important; box-shadow: var(--v-shadow-xl); overflow: hidden; } .modal-header { background: var(--v-bg-primary); border-bottom: 1px solid var(--v-border-secondary) !important; padding: var(--v-space-4) var(--v-space-5); } .modal-title { color: var(--v-text-primary); font-weight: 600; font-size: var(--v-text-lg); letter-spacing: var(--v-tracking-tight); } .modal-body { padding: var(--v-space-5); color: var(--v-text-primary); } .modal-footer { background: var(--v-bg-secondary); border-top: 1px solid var(--v-border-secondary) !important; padding: var(--v-space-3) var(--v-space-5); } /* Modal animation */ .modal.fade .modal-dialog { transition: transform var(--v-duration-normal) var(--v-ease-out), opacity var(--v-duration-normal) var(--v-ease-out); transform: scale(0.95) translateY(-10px); } .modal.show .modal-dialog { transform: scale(1) translateY(0); } /* Specific VOIPE modals */ #disconnectedExt .modal-content { border-top: 3px solid var(--v-danger) !important; } /* ============================================================================ 11. DROPDOWNS (.dropdown-menu) ============================================================================ */ .dropdown-menu { background: var(--v-bg-primary); border: 1px solid var(--v-border-primary) !important; border-radius: var(--v-radius-md) !important; box-shadow: var(--v-shadow-lg); padding: var(--v-space-1) 0; font-size: var(--v-text-sm); animation: v-scale-in 0.15s var(--v-ease-out) forwards; overflow: hidden; } .dropdown-item { color: var(--v-text-primary); font-size: var(--v-text-sm); padding: var(--v-space-2) var(--v-space-4); transition: background var(--v-duration-fast) var(--v-ease-default); border-radius: 0; } .dropdown-item:hover, .dropdown-item:focus { background: var(--v-bg-hover); color: var(--v-text-primary); } .dropdown-item.active, .dropdown-item:active { background: var(--v-bg-active); color: var(--v-text-brand); } .dropdown-item.text-danger { color: var(--v-danger) !important; } .dropdown-item.text-danger:hover { background: var(--v-danger-bg); } .dropdown-divider { border-top: 1px solid var(--v-border-secondary); margin: var(--v-space-1) 0; } /* Dropdown in topbar */ .navbar-top .dropdown-menu, .navbar-glass .dropdown-menu, #vertNavBar .dropdown-menu { margin-top: var(--v-space-1) !important; } /* Language dropdown */ #navbarDropdownLang + .dropdown-menu { min-width: auto !important; } /* User dropdown */ #navbarDropdownUser + .dropdown-menu .avatar { border: 2px solid var(--v-border-secondary); } /* CC Status menu */ #ccstatus_menu .dropdown-menu { min-width: 180px; } /* ============================================================================ 12. ALERTS (.alert) ============================================================================ */ .alert { border-radius: var(--v-radius-md); padding: var(--v-space-3) var(--v-space-4); font-size: var(--v-text-sm); border: 1px solid transparent; margin-bottom: var(--v-space-4); } .alert-primary { background: var(--v-brand-50); color: var(--v-brand-800); border-color: var(--v-brand-100); } .alert-success { background: var(--v-success-bg); color: #065f46; border-color: rgba(16, 185, 129, 0.2); } .alert-danger { background: var(--v-danger-bg); color: #991b1b; border-color: rgba(239, 68, 68, 0.2); } .alert-warning { background: var(--v-warning-bg); color: #92400e; border-color: rgba(245, 158, 11, 0.2); } .alert-info { background: var(--v-info-bg); color: #1e40af; border-color: rgba(59, 130, 246, 0.2); } .alert-secondary { background: var(--v-bg-secondary); color: var(--v-text-secondary); border-color: var(--v-border-primary); } .alert .close { color: inherit; opacity: 0.6; } .alert .close:hover { opacity: 1; } /* Dark mode alert adjustments */ .v-dark .alert-success { color: #6ee7b7; } .v-dark .alert-danger { color: #fca5a5; } .v-dark .alert-warning { color: #fcd34d; } .v-dark .alert-info { color: #93c5fd; } .v-dark .alert-primary { color: var(--v-brand-200); } /* ============================================================================ 13. PAGINATION (.pagination) ============================================================================ */ .pagination { gap: 2px; } .page-link { font-family: var(--v-font-sans); font-size: var(--v-text-xs); color: var(--v-text-secondary); background-color: var(--v-bg-primary); border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-sm) !important; padding: var(--v-space-2) var(--v-space-3); transition: all var(--v-duration-fast) var(--v-ease-default); margin: 0 1px; } .page-link:hover { background-color: var(--v-bg-secondary); color: var(--v-text-primary); border-color: var(--v-border-primary); } .page-link:focus { box-shadow: var(--v-focus-ring); z-index: 1; } .page-item.active .page-link { background-color: var(--v-brand-600); border-color: var(--v-brand-700); color: #fff; } .page-item.disabled .page-link { background-color: var(--v-bg-secondary); color: var(--v-text-muted); border-color: var(--v-border-secondary); opacity: 0.5; } /* ============================================================================ 14. TABS (.nav-tabs, .tab-content) ============================================================================ */ .nav-tabs { border-bottom: 1px solid var(--v-border-primary); gap: var(--v-space-1); } .nav-tabs .nav-link { font-family: var(--v-font-sans); font-size: var(--v-text-sm); font-weight: 500; color: var(--v-text-secondary); border: none; border-bottom: 2px solid transparent; padding: var(--v-space-3) var(--v-space-4); margin-bottom: -1px; transition: all var(--v-duration-fast) var(--v-ease-default); border-radius: 0; background: transparent; } .nav-tabs .nav-link:hover { color: var(--v-text-primary); border-bottom-color: var(--v-border-primary); background: transparent; } .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--v-text-brand) !important; border-bottom-color: var(--v-brand-500) !important; background: transparent !important; font-weight: 500; } /* Nav pills */ .nav-pills .nav-link { font-family: var(--v-font-sans); font-size: var(--v-text-sm); color: var(--v-text-secondary); border-radius: var(--v-radius-md); padding: var(--v-space-2) var(--v-space-4); transition: all var(--v-duration-fast) var(--v-ease-default); } .nav-pills .nav-link:hover { background: var(--v-bg-hover); color: var(--v-text-primary); } .nav-pills .nav-link.active { background: var(--v-brand-600); color: #fff; } /* Tab content */ .tab-content { padding-top: var(--v-space-3); } .tab-pane.fade { transition: opacity var(--v-duration-normal) var(--v-ease-default); } .tab-content > .tab-pane { animation: v-fade-in 0.2s var(--v-ease-default) forwards; } /* ============================================================================ 15. TOASTR (#toast-container) ============================================================================ */ #toast-container { font-family: var(--v-font-sans); } #toast-container > .toast { background-color: var(--v-bg-primary); border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-md) !important; box-shadow: var(--v-shadow-lg); color: var(--v-text-primary); font-size: var(--v-text-sm); opacity: 1 !important; padding: var(--v-space-3) var(--v-space-4); padding-inline-start: var(--v-space-5); position: relative; overflow: hidden; } /* Colored left/start border for toast types */ #toast-container > .toast::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; } #toast-container > .toast-success { border-color: rgba(16, 185, 129, 0.2) !important; } #toast-container > .toast-success::before { background: var(--v-success); } #toast-container > .toast-error { border-color: rgba(239, 68, 68, 0.2) !important; } #toast-container > .toast-error::before { background: var(--v-danger); } #toast-container > .toast-warning { border-color: rgba(245, 158, 11, 0.2) !important; } #toast-container > .toast-warning::before { background: var(--v-warning); } #toast-container > .toast-info { border-color: rgba(59, 130, 246, 0.2) !important; } #toast-container > .toast-info::before { background: var(--v-info); } #toast-container > .toast .toast-title { font-weight: 600; font-size: var(--v-text-sm); color: var(--v-text-primary); margin-bottom: var(--v-space-1); } #toast-container > .toast .toast-message { font-size: var(--v-text-xs); color: var(--v-text-secondary); } #toast-container > .toast .toast-close-button { color: var(--v-text-tertiary); font-size: var(--v-text-lg); font-weight: 400; opacity: 0.6; text-shadow: none; transition: opacity var(--v-duration-fast) var(--v-ease-default); } #toast-container > .toast .toast-close-button:hover { opacity: 1; color: var(--v-text-primary); } /* Toast progress bar */ #toast-container > .toast .toast-progress { background: var(--v-brand-500); opacity: 0.3; height: 2px; } /* ============================================================================ 16. DATERANGEPICKER (.daterangepicker) ============================================================================ */ .daterangepicker { font-family: var(--v-font-sans); background-color: var(--v-bg-primary); border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-lg) !important; box-shadow: var(--v-shadow-xl); color: var(--v-text-primary); font-size: var(--v-text-sm); } .daterangepicker::before, .daterangepicker::after { display: none; } .daterangepicker .calendar-table { background: var(--v-bg-primary); border: none; } .daterangepicker .calendar-table th, .daterangepicker .calendar-table td { font-size: var(--v-text-xs); border-radius: var(--v-radius-sm); padding: var(--v-space-1); min-width: 32px; height: 32px; line-height: 32px; color: var(--v-text-primary); transition: all var(--v-duration-fast) var(--v-ease-default); } .daterangepicker .calendar-table th { color: var(--v-text-secondary); font-weight: 600; } .daterangepicker td.available:hover { background: var(--v-bg-hover) !important; color: var(--v-text-primary) !important; border-radius: var(--v-radius-sm); } .daterangepicker td.active, .daterangepicker td.active:hover { background: var(--v-brand-600) !important; color: #fff !important; border-radius: var(--v-radius-sm); } .daterangepicker td.in-range { background: var(--v-bg-active) !important; color: var(--v-text-brand) !important; } .daterangepicker td.start-date { border-start-start-radius: var(--v-radius-sm) !important; border-end-start-radius: var(--v-radius-sm) !important; } .daterangepicker td.end-date { border-start-end-radius: var(--v-radius-sm) !important; border-end-end-radius: var(--v-radius-sm) !important; } .daterangepicker td.off, .daterangepicker td.disabled { color: var(--v-text-muted) !important; } .daterangepicker .drp-buttons { border-top: 1px solid var(--v-border-secondary); padding: var(--v-space-3); } .daterangepicker .drp-buttons .btn { font-size: var(--v-text-xs); padding: var(--v-space-1) var(--v-space-3); border-radius: var(--v-radius-md); } .daterangepicker .drp-selected { font-size: var(--v-text-xs); color: var(--v-text-secondary); } .daterangepicker .ranges li { font-size: var(--v-text-sm); color: var(--v-text-primary); padding: var(--v-space-2) var(--v-space-4); border-radius: var(--v-radius-sm); transition: background var(--v-duration-fast) var(--v-ease-default); } .daterangepicker .ranges li:hover { background: var(--v-bg-hover); } .daterangepicker .ranges li.active { background: var(--v-brand-600) !important; color: #fff !important; } /* DateRangePicker select controls */ .daterangepicker select.monthselect, .daterangepicker select.yearselect { font-size: var(--v-text-xs); background: var(--v-bg-secondary); border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-sm); color: var(--v-text-primary); padding: var(--v-space-1); } /* DateRangePicker input */ .daterangepicker .input-mini { border: 1px solid var(--v-border-primary) !important; border-radius: var(--v-radius-sm) !important; font-size: var(--v-text-xs) !important; color: var(--v-text-primary) !important; background: var(--v-bg-primary) !important; } .daterangepicker .input-mini:focus { border-color: var(--v-brand-500) !important; } /* ============================================================================ 17. BREADCRUMBS ============================================================================ */ .breadcrumb { background: transparent; padding: var(--v-space-2) 0; font-size: var(--v-text-xs); margin-bottom: var(--v-space-4); } .breadcrumb-item { color: var(--v-text-tertiary); } .breadcrumb-item a { color: var(--v-text-tertiary); text-decoration: none; transition: color var(--v-duration-fast) var(--v-ease-default); } .breadcrumb-item a:hover { color: var(--v-text-primary); } .breadcrumb-item.active { color: var(--v-text-primary); font-weight: 500; } .breadcrumb-item + .breadcrumb-item::before { color: var(--v-text-muted); } [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; transform: scaleX(-1); display: inline-block; } /* ============================================================================ 18. TOOLTIPS & POPOVERS ============================================================================ */ .tooltip .tooltip-inner { font-family: var(--v-font-sans); font-size: var(--v-text-2xs); font-weight: 500; background: var(--v-bg-elevated); color: var(--v-text-primary); border-radius: var(--v-radius-sm); box-shadow: var(--v-shadow-lg); border: 1px solid var(--v-border-primary); padding: var(--v-space-1) var(--v-space-2); max-width: 240px; } .tooltip .arrow::before { display: none; } .popover { font-family: var(--v-font-sans); background: var(--v-bg-primary); border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-lg); box-shadow: var(--v-shadow-xl); } .popover-header { background: var(--v-bg-secondary); border-bottom: 1px solid var(--v-border-secondary); font-weight: 600; font-size: var(--v-text-sm); color: var(--v-text-primary); border-radius: var(--v-radius-lg) var(--v-radius-lg) 0 0; } .popover-body { font-size: var(--v-text-sm); color: var(--v-text-primary); } /* ============================================================================ 19. PROGRESS BARS ============================================================================ */ .progress { background-color: var(--v-bg-tertiary); border-radius: var(--v-radius-pill); height: 6px; overflow: hidden; } .progress-bar { background-color: var(--v-brand-500); border-radius: var(--v-radius-pill); transition: width var(--v-duration-normal) var(--v-ease-default); } .progress-bar-success, .bg-success.progress-bar { background-color: var(--v-success) !important; } .progress-bar-danger, .bg-danger.progress-bar { background-color: var(--v-danger) !important; } .progress-bar-warning, .bg-warning.progress-bar { background-color: var(--v-warning) !important; } .progress-bar-info, .bg-info.progress-bar { background-color: var(--v-info) !important; } /* ============================================================================ 20. SCROLLBARS (global) ============================================================================ */ /* Webkit scrollbars */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--v-border-primary); border-radius: var(--v-radius-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--v-text-muted); } /* Firefox scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--v-border-primary) transparent; } /* Spinner */ .spinner-border { color: var(--v-brand-500) !important; } /* ============================================================================ 21. RTL-SPECIFIC OVERRIDES ============================================================================ */ /* Sidebar in RTL */ [dir="rtl"] .navbar-vertical { inset-inline-start: 0; } /* Content margin offset for sidebar */ [dir="rtl"] .content { /* Allow logical property to handle margin direction */ } /* RTL: DataTables */ [dir="rtl"] .dataTables_wrapper { direction: rtl; } [dir="rtl"] .dataTables_wrapper .dataTables_filter { text-align: start; } [dir="rtl"] .dataTables_wrapper .dataTables_filter input { margin-inline-start: var(--v-space-2); margin-inline-end: 0; margin-left: 0; margin-right: 0; } [dir="rtl"] .dataTables_wrapper .dataTables_info { text-align: start; } [dir="rtl"] .dataTables_wrapper .dataTables_paginate { text-align: start; } [dir="rtl"] .dataTables_wrapper .dataTables_length { text-align: start; } /* RTL: table text alignment */ [dir="rtl"] .table thead th, [dir="rtl"] .table tbody td { text-align: start; } /* RTL: Dropdowns */ [dir="rtl"] .dropdown-menu { text-align: start; } [dir="rtl"] .dropdown-menu-right { right: auto !important; left: 0 !important; } [dir="rtl"] .dropdown-menu-left { left: auto !important; right: 0 !important; } /* RTL: Modal close button */ [dir="rtl"] .modal-header .close { margin: -1rem auto -1rem -1rem; padding: 1rem; } /* RTL: margin/padding utilities fix for Bootstrap */ [dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; } [dir="rtl"] .ml-1, [dir="rtl"] .ml-2, [dir="rtl"] .ml-3 { margin-left: 0 !important; } [dir="rtl"] .mr-1, [dir="rtl"] .mr-2, [dir="rtl"] .mr-3 { margin-right: 0 !important; } [dir="rtl"] .ml-1 { margin-right: 0.25rem !important; } [dir="rtl"] .ml-2 { margin-right: 0.5rem !important; } [dir="rtl"] .ml-3 { margin-right: 1rem !important; } [dir="rtl"] .mr-1 { margin-left: 0.25rem !important; } [dir="rtl"] .mr-2 { margin-left: 0.5rem !important; } [dir="rtl"] .mr-3 { margin-left: 1rem !important; } [dir="rtl"] .pl-1, [dir="rtl"] .pl-2, [dir="rtl"] .pl-3 { padding-left: 0 !important; } [dir="rtl"] .pr-1, [dir="rtl"] .pr-2, [dir="rtl"] .pr-3 { padding-right: 0 !important; } [dir="rtl"] .pl-1 { padding-right: 0.25rem !important; } [dir="rtl"] .pl-2 { padding-right: 0.5rem !important; } [dir="rtl"] .pl-3 { padding-right: 1rem !important; } [dir="rtl"] .pr-1 { padding-left: 0.25rem !important; } [dir="rtl"] .pr-2 { padding-left: 0.5rem !important; } [dir="rtl"] .pr-3 { padding-left: 1rem !important; } /* RTL: Float utilities */ [dir="rtl"] .float-left { float: right !important; } [dir="rtl"] .float-right { float: left !important; } /* RTL: Text alignment */ [dir="rtl"] .text-left { text-align: right !important; } [dir="rtl"] .text-right { text-align: left !important; } /* RTL: Keep phone numbers, timestamps, IPs in LTR */ [dir="rtl"] [data-ltr], [dir="rtl"] .ltr-content, [dir="rtl"] time, [dir="rtl"] #cur_datetime, [dir="rtl"] .v-phone, [dir="rtl"] .v-ip, [dir="rtl"] .v-timestamp, [dir="rtl"] .v-duration, [dir="rtl"] .cc_skills_waittime, [dir="rtl"] .ccstatus_time, [dir="rtl"] .header_user_extension { direction: ltr; unicode-bidi: isolate; } /* RTL: Stats and numeric values remain LTR */ [dir="rtl"] .v-ltr-nums, [dir="rtl"] .v-stat-value { direction: ltr; unicode-bidi: embed; } /* RTL: Breadcrumb separator flips */ [dir="rtl"] .breadcrumb-item + .breadcrumb-item { padding-left: 0; padding-right: 0.5rem; } /* RTL: Sidebar tabs */ [dir="rtl"] #asideNavTabs { direction: rtl; } /* RTL: DateRangePicker */ [dir="rtl"] .daterangepicker { direction: rtl; } [dir="rtl"] .daterangepicker .calendar-table th, [dir="rtl"] .daterangepicker .calendar-table td { text-align: center; } [dir="rtl"] .daterangepicker .drp-buttons { text-align: start; } [dir="rtl"] .daterangepicker .ranges { text-align: start; } [dir="rtl"] .daterangepicker .range_inputs { direction: rtl; } /* RTL: Topbar special items */ [dir="rtl"] .navbar-nav { flex-direction: row; } [dir="rtl"] #ulTopBar { margin-left: 0 !important; margin-right: auto !important; } /* RTL: Pull utilities */ [dir="rtl"] .pull-right { float: left !important; } [dir="rtl"] .pull-left { float: right !important; } /* RTL: Sidebar collapse nav indent */ [dir="rtl"] .navbar-vertical .nav.collapse { padding-right: var(--v-space-3); padding-left: 0; } /* RTL: Form check */ [dir="rtl"] .custom-control { padding-left: 0; padding-right: 1.5rem; } [dir="rtl"] .custom-control-label::before, [dir="rtl"] .custom-control-label::after { left: auto; right: -1.5rem; } /* RTL: Input group */ [dir="rtl"] .input-group > .input-group-prepend > .input-group-text { border-radius: 0 var(--v-radius-md) var(--v-radius-md) 0; } [dir="rtl"] .input-group > .input-group-append > .input-group-text { border-radius: var(--v-radius-md) 0 0 var(--v-radius-md); } /* ============================================================================ 22. DARK MODE REFINEMENTS (.v-dark) ============================================================================ */ /* Sidebar dark mode */ .v-dark .navbar-vertical { background: var(--v-bg-sidebar) !important; border-color: var(--v-border-primary) !important; } .v-dark .navbar-vertical .nav-link { color: var(--v-text-secondary) !important; } .v-dark .navbar-vertical .nav-link:hover { color: var(--v-text-primary) !important; } /* Topbar dark mode */ .v-dark .navbar-top, .v-dark .navbar-glass, .v-dark #vertNavBar { background: var(--v-glass-bg) !important; border-bottom-color: var(--v-glass-border) !important; } /* Cards dark mode */ .v-dark .card { background: var(--v-bg-primary); border-color: var(--v-border-primary) !important; } .v-dark .card-header { background: var(--v-bg-primary) !important; border-bottom-color: var(--v-border-secondary) !important; } .v-dark .card-footer { background: var(--v-bg-secondary) !important; border-top-color: var(--v-border-secondary) !important; } .v-dark .bg-white { background-color: var(--v-bg-primary) !important; } /* Tables dark mode */ .v-dark .table thead th { background: var(--v-bg-secondary); color: var(--v-text-secondary); } .v-dark .table td, .v-dark .table tbody td { color: var(--v-text-primary); border-bottom-color: var(--v-border-secondary); } .v-dark .table-hover tbody tr:hover { background: var(--v-bg-hover) !important; } /* Forms dark mode */ .v-dark .form-control { background-color: var(--v-bg-secondary); border-color: var(--v-border-primary); color: var(--v-text-primary); } .v-dark .form-control:focus { background-color: var(--v-bg-secondary); border-color: var(--v-brand-500); color: var(--v-text-primary); } .v-dark .custom-select { background-color: var(--v-bg-secondary); border-color: var(--v-border-primary); color: var(--v-text-primary); } .v-dark .input-group-text { background-color: var(--v-bg-tertiary); border-color: var(--v-border-primary); color: var(--v-text-secondary); } /* Modals dark mode */ .v-dark .modal-content { background: var(--v-bg-primary); border-color: var(--v-border-primary) !important; } .v-dark .modal-header { background: var(--v-bg-primary); border-bottom-color: var(--v-border-secondary) !important; } .v-dark .modal-footer { background: var(--v-bg-secondary); border-top-color: var(--v-border-secondary) !important; } /* Dropdowns dark mode */ .v-dark .dropdown-menu { background: var(--v-bg-primary); border-color: var(--v-border-primary) !important; } .v-dark .dropdown-item { color: var(--v-text-primary); } .v-dark .dropdown-item:hover { background: var(--v-bg-hover); color: var(--v-text-primary); } .v-dark .dropdown-divider { border-top-color: var(--v-border-secondary); } /* Pagination dark mode */ .v-dark .page-link { background-color: var(--v-bg-secondary); border-color: var(--v-border-primary); color: var(--v-text-secondary); } .v-dark .page-link:hover { background-color: var(--v-bg-tertiary); color: var(--v-text-primary); } .v-dark .page-item.active .page-link { background-color: var(--v-brand-600); border-color: var(--v-brand-700); } /* DataTables dark mode */ .v-dark .dataTables_wrapper .dataTables_filter input { background: var(--v-bg-secondary); border-color: var(--v-border-primary); color: var(--v-text-primary); } .v-dark .dataTables_wrapper .dataTables_length select { background: var(--v-bg-secondary); border-color: var(--v-border-primary); color: var(--v-text-primary); } .v-dark .dataTables_wrapper .dataTables_paginate .paginate_button { background: var(--v-bg-secondary) !important; border-color: var(--v-border-primary) !important; color: var(--v-text-secondary) !important; } .v-dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--v-bg-tertiary) !important; color: var(--v-text-primary) !important; } .v-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--v-brand-600) !important; color: #fff !important; border-color: var(--v-brand-700) !important; } /* Toastr dark mode */ .v-dark #toast-container > .toast { background-color: var(--v-bg-elevated); border-color: var(--v-border-primary); color: var(--v-text-primary); } .v-dark #toast-container > .toast .toast-title { color: var(--v-text-primary); } .v-dark #toast-container > .toast .toast-message { color: var(--v-text-secondary); } /* DateRangePicker dark mode */ .v-dark .daterangepicker { background-color: var(--v-bg-primary); border-color: var(--v-border-primary); } .v-dark .daterangepicker .calendar-table { background: var(--v-bg-primary); } .v-dark .daterangepicker .calendar-table th, .v-dark .daterangepicker .calendar-table td { color: var(--v-text-primary); } .v-dark .daterangepicker td.off, .v-dark .daterangepicker td.disabled { color: var(--v-text-muted) !important; } .v-dark .daterangepicker select.monthselect, .v-dark .daterangepicker select.yearselect { background: var(--v-bg-secondary); color: var(--v-text-primary); border-color: var(--v-border-primary); } .v-dark .daterangepicker .input-mini { background: var(--v-bg-secondary) !important; border-color: var(--v-border-primary) !important; color: var(--v-text-primary) !important; } /* Tooltip dark mode */ .v-dark .tooltip .tooltip-inner { background: var(--v-bg-elevated); color: var(--v-text-primary); border-color: var(--v-border-primary); } /* Sidebar tabs dark mode */ .v-dark #asideNavTabs { background: var(--v-bg-tertiary); border-bottom-color: var(--v-border-primary) !important; } .v-dark #asideNavTabs .nav-link { color: var(--v-text-tertiary) !important; } .v-dark #asideNavTabs .nav-link:hover { color: var(--v-text-primary) !important; } .v-dark #asideNavTabs .nav-link.active { color: var(--v-text-brand) !important; background: var(--v-bg-active) !important; } /* Dark mode buttons refinement */ .v-dark .btn-secondary, .v-dark .btn-falcon-default { background: var(--v-bg-secondary) !important; border-color: var(--v-border-primary) !important; color: var(--v-text-primary) !important; } .v-dark .btn-secondary:hover, .v-dark .btn-falcon-default:hover { background: var(--v-bg-tertiary) !important; } .v-dark .btn-outline-secondary { border-color: var(--v-border-primary) !important; color: var(--v-text-secondary) !important; } .v-dark .btn-outline-secondary:hover { background: var(--v-bg-secondary) !important; color: var(--v-text-primary) !important; } /* DataTables Editor dark mode */ .v-dark .DTED_Lightbox_Wrapper .DTED_Lightbox_Container { background: var(--v-bg-primary) !important; border-color: var(--v-border-primary) !important; } .v-dark .DTED_Lightbox_Wrapper .DTED_Lightbox_Content_Wrapper { background: var(--v-bg-primary) !important; } /* Popover dark mode */ .v-dark .popover { background: var(--v-bg-primary); border-color: var(--v-border-primary); } .v-dark .popover-header { background: var(--v-bg-secondary); border-bottom-color: var(--v-border-secondary); color: var(--v-text-primary); } .v-dark .popover-body { color: var(--v-text-primary); } /* Progress dark mode */ .v-dark .progress { background-color: var(--v-bg-tertiary); } /* Close button dark mode */ .v-dark .close { color: var(--v-text-tertiary); } .v-dark .close:hover { color: var(--v-text-primary); } /* HR dark mode */ .v-dark hr { border-top-color: var(--v-border-secondary); } /* Extension status icon colors (preserved) */ .text-success, .fa-circle.text-success { color: var(--v-success) !important; } .text-danger, .fa-circle.text-danger { color: var(--v-danger) !important; } .text-warning, .fa-circle.text-warning { color: var(--v-warning) !important; } .text-info, .fa-circle.text-info { color: var(--v-info) !important; } .text-primary { color: var(--v-brand-600) !important; } /* ============================================================================ 23. RESPONSIVE / MOBILE ============================================================================ */ /* Mobile: sidebar as overlay */ @media (max-width: 1199.98px) { .navbar-vertical { z-index: 1050 !important; box-shadow: var(--v-shadow-xl) !important; } .content { margin-inline-start: 0 !important; } .content-inner { padding: var(--v-space-3); } /* Topbar mobile */ .navbar-top, .navbar-glass, #vertNavBar { padding: 0 var(--v-space-3); } /* Card spacing mobile */ .card-body { padding: var(--v-space-3); } .card-header { padding: var(--v-space-3) var(--v-space-4); } /* DataTables mobile */ .dataTables_wrapper .row { flex-direction: column; gap: var(--v-space-2); } .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { text-align: start; width: 100%; } .dataTables_wrapper .dataTables_filter input { width: 100%; margin: var(--v-space-2) 0 0 0; } /* Tables scroll on mobile */ .table-responsive, .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Modal full-screen on mobile */ .modal-dialog { margin: var(--v-space-3); } .modal-content { border-radius: var(--v-radius-lg) !important; } /* DateRangePicker mobile */ .daterangepicker { width: calc(100vw - 2rem) !important; max-width: 360px; } /* Hide secondary brand on mobile (already handled by Falcon) */ #secondBrand { display: none !important; } } /* Small mobile adjustments */ @media (max-width: 575.98px) { .content-inner { padding: var(--v-space-2); } .card-body { padding: var(--v-space-3); } .btn { padding: var(--v-space-2) var(--v-space-3); font-size: var(--v-text-xs); } .modal-dialog { margin: var(--v-space-2); } /* Stack topbar items more tightly */ #ulTopBar .nav-item { padding: 0 var(--v-space-1) !important; } } /* Touch targets for mobile */ @media (pointer: coarse) { .nav-link { min-height: 44px; display: flex; align-items: center; } .btn { min-height: 44px; } .dropdown-item { min-height: 44px; display: flex; align-items: center; } .page-link { min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; } .nav-tabs .nav-link { min-height: 44px; } .form-control, .custom-select { min-height: 44px; } .custom-control-label { min-height: 44px; display: flex; align-items: center; } .close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } } /* ============================================================================ 24. PRINT ============================================================================ */ @media print { .navbar-vertical, .navbar-top, .navbar-glass, #vertNavBar, .btn, .nav-tabs, #asideNavTabs, .dataTables_filter, .dataTables_length, .dataTables_paginate, .dataTables_info, .dropdown-menu, #toast-container, .daterangepicker, #loadSpinner, footer { display: none !important; } body { background: #fff !important; color: #000 !important; font-size: 12pt !important; } .main { margin: 0 !important; padding: 0 !important; } .content { margin: 0 !important; padding: 0 !important; } .content-inner { padding: 0 !important; } .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; page-break-inside: avoid; } .table thead th { background: #f5f5f5 !important; color: #333 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } a { color: #000 !important; text-decoration: none !important; } } /* ============================================================================ 25. ANIMATIONS & TRANSITIONS ============================================================================ */ /* Fade-in for page content */ @keyframes v-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Scale-in for dropdowns */ @keyframes v-scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* Loading spinner */ .spinner-border { animation: v-spin 0.8s linear infinite; } @keyframes v-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Smooth collapse transitions */ .collapse:not(.show) { display: none; } .collapsing { transition: height var(--v-duration-normal) var(--v-ease-default); } /* Fade transitions for tabs */ .fade { transition: opacity var(--v-duration-normal) var(--v-ease-default); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================================ 26. MISC FALCON THEME OVERRIDES ============================================================================ */ /* Falcon-specific utility classes */ .fs--2 { font-size: var(--v-text-2xs) !important; } .fs--1 { font-size: var(--v-text-xs) !important; } .fs-0 { font-size: var(--v-text-sm) !important; } .fs-1 { font-size: var(--v-text-base) !important; } .fs-2 { font-size: var(--v-text-lg) !important; } .fs-3 { font-size: var(--v-text-xl) !important; } /* Falcon text colors mapped to design system */ .text-300 { color: var(--v-text-muted) !important; } .text-400 { color: var(--v-text-tertiary) !important; } .text-500 { color: var(--v-text-tertiary) !important; } .text-600 { color: var(--v-text-secondary) !important; } .text-700 { color: var(--v-text-primary) !important; } .text-800 { color: var(--v-text-primary) !important; } .text-900 { color: var(--v-text-primary) !important; } .text-1000 { color: var(--v-text-primary) !important; } /* Falcon bg utilities */ .bg-light { background-color: var(--v-bg-secondary) !important; } .bg-100 { background-color: var(--v-bg-secondary) !important; } .bg-200 { background-color: var(--v-bg-tertiary) !important; } /* Falcon border radius */ .rounded-soft { border-radius: var(--v-radius-md) !important; } /* Falcon box shadow */ .shadow-sm { box-shadow: var(--v-shadow-sm) !important; } .shadow { box-shadow: var(--v-shadow-md) !important; } .shadow-lg { box-shadow: var(--v-shadow-lg) !important; } .shadow-none { box-shadow: none !important; } /* Dropdown-on-hover (Falcon feature) */ .dropdown-on-hover:hover > .dropdown-menu { display: block; animation: v-scale-in 0.15s var(--v-ease-out) forwards; } /* Sticky-kit integration */ .sticky-kit { position: sticky; top: 0; z-index: var(--v-z-sticky); } /* Falcon perfect-scrollbar overrides */ .perfect-scrollbar .ps__rail-y { opacity: 0; transition: opacity var(--v-duration-normal) var(--v-ease-default); } .perfect-scrollbar:hover .ps__rail-y { opacity: 1; } .ps__thumb-y { background-color: var(--v-border-primary) !important; border-radius: var(--v-radius-pill) !important; width: 4px !important; } /* LeafletJS map container */ .leaflet-container { border-radius: var(--v-radius-lg); border: 1px solid var(--v-border-primary); } /* ApexCharts overrides */ .apexcharts-canvas { font-family: var(--v-font-sans) !important; } .apexcharts-tooltip { background: var(--v-bg-primary) !important; border: 1px solid var(--v-border-primary) !important; border-radius: var(--v-radius-md) !important; box-shadow: var(--v-shadow-lg) !important; font-family: var(--v-font-sans) !important; font-size: var(--v-text-xs) !important; color: var(--v-text-primary) !important; } .apexcharts-tooltip-title { background: var(--v-bg-secondary) !important; border-bottom: 1px solid var(--v-border-secondary) !important; font-weight: 600 !important; } .v-dark .apexcharts-tooltip { background: var(--v-bg-elevated) !important; border-color: var(--v-border-primary) !important; color: var(--v-text-primary) !important; } .v-dark .apexcharts-tooltip-title { background: var(--v-bg-tertiary) !important; border-bottom-color: var(--v-border-secondary) !important; } /* Keepalive link */ #keepalive_link { font-size: var(--v-text-2xs); color: var(--v-text-tertiary); text-decoration: none; opacity: 0.5; } /* Loading spinner positioning */ #loadSpinner { z-index: 9999 !important; } /* Box components (legacy admin template) */ .box { background: var(--v-bg-primary); border-radius: var(--v-radius-lg); } .box-header { padding: var(--v-space-3) var(--v-space-4); border-bottom: 1px solid var(--v-border-secondary); } .box-body { padding: var(--v-space-3) var(--v-space-4); } .box-title { font-size: var(--v-text-sm); font-weight: 600; color: var(--v-text-primary); } .box-tools .btn-box-tool { color: var(--v-text-tertiary); transition: color var(--v-duration-fast) var(--v-ease-default); } .box-tools .btn-box-tool:hover { color: var(--v-text-primary); } /* Tips section scrollbar */ .tips_section .box-body::-webkit-scrollbar { width: 4px !important; } .tips_section .box-body::-webkit-scrollbar-track { background: transparent !important; box-shadow: none !important; } .tips_section .box-body::-webkit-scrollbar-thumb { background: var(--v-border-primary) !important; border-radius: var(--v-radius-pill) !important; } /* List group */ .list-group-item { background-color: var(--v-bg-primary); border-color: var(--v-border-secondary); color: var(--v-text-primary); padding: var(--v-space-3) var(--v-space-4); transition: background var(--v-duration-fast) var(--v-ease-default); } .list-group-item:hover { background-color: var(--v-bg-hover); } .list-group-item.active { background-color: var(--v-brand-600); border-color: var(--v-brand-700); color: #fff; } .v-dark .list-group-item { background-color: var(--v-bg-primary); border-color: var(--v-border-secondary); color: var(--v-text-primary); } /* Jumbotron */ .jumbotron { background-color: var(--v-bg-secondary); border-radius: var(--v-radius-xl); } /* Accordion / Collapse */ .accordion .card { margin-bottom: 0; border-radius: 0 !important; border-bottom: 1px solid var(--v-border-secondary) !important; } .accordion .card:first-of-type { border-top-left-radius: var(--v-radius-lg) !important; border-top-right-radius: var(--v-radius-lg) !important; } .accordion .card:last-of-type { border-bottom-left-radius: var(--v-radius-lg) !important; border-bottom-right-radius: var(--v-radius-lg) !important; border-bottom: none !important; } .accordion .card-header { cursor: pointer; transition: background var(--v-duration-fast) var(--v-ease-default); } .accordion .card-header:hover { background: var(--v-bg-hover) !important; } /* Navbar vertical collapsed hover label */ .navbar-vertical-collapsed .navbar-vertical .nav-link-text { opacity: 0; transition: opacity var(--v-duration-fast) var(--v-ease-default); } .navbar-vertical-collapsed .navbar-vertical:hover .nav-link-text { opacity: 1; } /* Selection controls in DataTables */ table.dataTable tbody td.select-checkbox::before, table.dataTable tbody th.select-checkbox::before { border: 1px solid var(--v-border-primary); border-radius: var(--v-radius-sm); } table.dataTable tbody td.select-checkbox::after, table.dataTable tbody th.select-checkbox::after { color: var(--v-brand-500); } /* Container padding RTL fix */ [dir="rtl"] .container-fluid[data-layout="container"] { padding-right: 40px !important; padding-left: 15px !important; } /* LTR container padding (default) */ .container-fluid[data-layout="container"] { padding-left: 15px; }