/* ============================================================ SAS Support Hub — Redesign Skin Visual re-theming layer applied on top of the existing Tabler UI. No JS or HTML logic changes — only colors, typography, radii, spacing, and component-level polish for components that defined the new look. Toggle: disables this skin. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap'); /* --- Design tokens shared by light + dark --- */ :root { --rds-radius-xs: 4px; --rds-radius-sm: 6px; --rds-radius: 8px; --rds-radius-md: 10px; --rds-radius-lg: 14px; --rds-radius-xl: 20px; --rds-radius-pill: 999px; --rds-shadow-xs: 0 1px 2px rgba(15,23,42,.04); --rds-shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); --rds-shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04); --rds-shadow-lg: 0 12px 28px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.04); --rds-font: 'Cairo', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --rds-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; } /* --- Light theme: re-theme Tabler tokens to match the new design --- */ body[data-skin]:not([data-skin="off"]):where([data-bs-theme="light"], :not([data-bs-theme])) { --tblr-bg-body: #f7f8fa; --tblr-bg-surface: #ffffff; --tblr-bg-surface-secondary: #f1f3f6; --tblr-bg-surface-tertiary: #eef0f4; --tblr-border-color: #e4e7ec; --tblr-border-color-translucent: rgba(15,23,42,.07); --tblr-body-color: #0f172a; --tblr-secondary-color: #475569; --tblr-muted: #94a3b8; --tblr-primary: #3b5bdb; --tblr-primary-rgb: 59,91,219; --tblr-primary-darken: #324bb8; --tblr-success: #10b981; --tblr-warning: #f59e0b; --tblr-danger: #ef4444; --tblr-info: #0ea5e9; --tblr-border-radius: var(--rds-radius); --tblr-border-radius-sm: var(--rds-radius-sm); --tblr-border-radius-lg: var(--rds-radius-md); --tblr-box-shadow: var(--rds-shadow-md); --tblr-box-shadow-sm: var(--rds-shadow-sm); } /* --- Dark theme: solid black-ish surfaces, matching new design's deep dark --- */ body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] { --tblr-bg-body: #000000; --tblr-bg-surface: #0a0a0a; --tblr-bg-surface-secondary: #141414; --tblr-bg-surface-tertiary: #1c1c1c; --tblr-border-color: #1f1f1f; --tblr-border-color-translucent: rgba(255,255,255,.06); --tblr-body-color: #f5f5f5; --tblr-secondary-color: #c7c7c7; --tblr-muted: #5a5a5a; --tblr-primary: #6178e8; --tblr-primary-rgb: 97,120,232; --tblr-primary-darken: #7a8df0; --tblr-success: #10b981; --tblr-warning: #f59e0b; --tblr-danger: #ef4444; --tblr-info: #38bdf8; --tblr-border-radius: var(--rds-radius); --tblr-border-radius-sm: var(--rds-radius-sm); --tblr-border-radius-lg: var(--rds-radius-md); --tblr-box-shadow: 0 4px 12px rgba(0,0,0,.5); --tblr-box-shadow-sm: 0 1px 3px rgba(0,0,0,.4); } /* --- Body typography polish + force dark surfaces to true black --- */ body[data-skin]:not([data-skin="off"]) { font-family: var(--rds-font) !important; font-feature-settings: 'kern' 1, 'liga' 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] { background-color: #000 !important; color: #f5f5f5 !important; } body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .page, body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .page-body, body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .page-wrapper, body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] main { background-color: #000 !important; } /* Force surface colors on cards in dark mode (Tabler dark theme uses navy by default) */ body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .card, body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .modal-content, body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .dropdown-menu, body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .navbar, body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .chat-sidebar, body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .chat-header, body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .chat-composer, body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .composer-area, body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .offcanvas { background-color: #0a0a0a !important; } body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .card, body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .navbar, body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .modal-content, body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .dropdown-menu { border-color: #1f1f1f !important; } /* --- Scrollbars --- */ body[data-skin]:not([data-skin="off"]) ::-webkit-scrollbar { width: 10px; height: 10px; } body[data-skin]:not([data-skin="off"]) ::-webkit-scrollbar-track { background: transparent; } body[data-skin]:not([data-skin="off"]) ::-webkit-scrollbar-thumb { background: var(--tblr-border-color); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } body[data-skin]:not([data-skin="off"]) ::-webkit-scrollbar-thumb:hover { background: var(--tblr-muted); background-clip: padding-box; border: 2px solid transparent; } /* --- Light theme: force the primary navbar to a light surface The legacy header has no .navbar-light class, so Tabler keeps it dark. Override aggressively in light mode. --- */ body[data-skin]:not([data-skin="off"])[data-bs-theme="light"] header.navbar, body[data-skin]:not([data-skin="off"])[data-bs-theme="light"] header.navbar.navbar-expand-md, body[data-skin]:not([data-skin="off"]):not([data-bs-theme="dark"]) header.navbar { background: var(--tblr-bg-surface) !important; color: var(--tblr-body-color) !important; border-bottom: 1px solid var(--tblr-border-color) !important; } body[data-skin]:not([data-skin="off"])[data-bs-theme="light"] header.navbar .text-white, body[data-skin]:not([data-skin="off"]):not([data-bs-theme="dark"]) header.navbar .text-white { color: var(--tblr-body-color) !important; } body[data-skin]:not([data-skin="off"])[data-bs-theme="light"] header.navbar .navbar-brand, body[data-skin]:not([data-skin="off"]):not([data-bs-theme="dark"]) header.navbar .navbar-brand, body[data-skin]:not([data-skin="off"])[data-bs-theme="light"] header.navbar .nav-item, body[data-skin]:not([data-skin="off"]):not([data-bs-theme="dark"]) header.navbar .nav-item { color: var(--tblr-body-color) !important; } /* Force the vertical sidebar to a light surface in light mode */ body[data-skin]:not([data-skin="off"])[data-bs-theme="light"] #navbar-menu, body[data-skin]:not([data-skin="off"]):not([data-bs-theme="dark"]) #navbar-menu { background: var(--tblr-bg-surface) !important; border-left-color: var(--tblr-border-color) !important; } /* Chat sidebar (conversations list) in light mode */ body[data-skin]:not([data-skin="off"])[data-bs-theme="light"] .chat-sidebar, body[data-skin]:not([data-skin="off"]):not([data-bs-theme="dark"]) .chat-sidebar { background: var(--tblr-bg-surface) !important; color: var(--tblr-body-color) !important; } body[data-skin]:not([data-skin="off"])[data-bs-theme="light"] .chat-sidebar-header, body[data-skin]:not([data-skin="off"]):not([data-bs-theme="dark"]) .chat-sidebar-header { background: var(--tblr-bg-surface) !important; border-bottom-color: var(--tblr-border-color) !important; color: var(--tblr-body-color) !important; } /* --- Override inline `style="background:#1a2e3a"` on chat-list-item avatars The legacy JS sets dark inline backgrounds directly; we override with theme tokens. --- */ body[data-skin]:not([data-skin="off"]) .chat-list-item .avatar.rounded-circle { color: #fff !important; } /* Light theme: replace dark inline avatar backgrounds with subtle accent tints */ body[data-skin]:not([data-skin="off"])[data-bs-theme="light"] .chat-list-item .avatar.rounded-circle, body[data-skin]:not([data-skin="off"]):not([data-bs-theme="dark"]) .chat-list-item .avatar.rounded-circle { background: linear-gradient(135deg, #6178e8, #8b5cf6) !important; color: #fff !important; box-shadow: 0 1px 2px rgba(15,23,42,.1); } /* Dark theme keeps a deeper version of the inline color but cleaner */ body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .chat-list-item .avatar.rounded-circle { background: linear-gradient(135deg, #1f2940, #2a1a3a) !important; color: #c7c7c7 !important; } /* --- Section headers in conv list (نشط / بانتظار الرد) — inline-styled too. Make them adapt: the JS uses rgba colors which already work; just ensure they're readable on both themes. --- */ body[data-skin]:not([data-skin="off"])[data-bs-theme="light"] .conv-section-header, body[data-skin]:not([data-skin="off"]):not([data-bs-theme="dark"]) .conv-section-header { background: rgba(16,185,129,.10) !important; color: #047857 !important; } /* --- Light theme rescue: hardcoded `.text-white` and similar must adapt --- */ body[data-skin]:not([data-skin="off"])[data-bs-theme="light"] .navbar .text-white, body[data-skin]:not([data-skin="off"]):not([data-bs-theme="dark"]) .navbar .text-white { color: var(--tblr-body-color) !important; } body[data-skin]:not([data-skin="off"])[data-bs-theme="light"] .navbar-brand span[style*="rgba(255,255,255"], body[data-skin]:not([data-skin="off"]):not([data-bs-theme="dark"]) .navbar-brand span[style*="rgba(255,255,255"] { color: var(--tblr-muted) !important; } body[data-skin]:not([data-skin="off"])[data-bs-theme="light"] .header-action-btn, body[data-skin]:not([data-skin="off"]):not([data-bs-theme="dark"]) .header-action-btn { color: var(--tblr-secondary-color) !important; background: var(--tblr-bg-surface-secondary) !important; } body[data-skin]:not([data-skin="off"])[data-bs-theme="light"] .header-action-btn:hover, body[data-skin]:not([data-skin="off"]):not([data-bs-theme="dark"]) .header-action-btn:hover { color: var(--tblr-body-color) !important; background: var(--tblr-bg-surface-tertiary) !important; } /* Chat header icons in light theme — bump contrast */ body[data-skin]:not([data-skin="off"])[data-bs-theme="light"] .chat-header .btn-ghost-secondary, body[data-skin]:not([data-skin="off"]):not([data-bs-theme="dark"]) .chat-header .btn-ghost-secondary { color: var(--tblr-secondary-color) !important; } /* Chat list item names on light bg */ body[data-skin]:not([data-skin="off"])[data-bs-theme="light"] .chat-list-item .item-name, body[data-skin]:not([data-skin="off"]):not([data-bs-theme="dark"]) .chat-list-item .item-name { color: var(--tblr-body-color) !important; } body[data-skin]:not([data-skin="off"])[data-bs-theme="light"] .chat-list-item .item-preview, body[data-skin]:not([data-skin="off"]):not([data-bs-theme="dark"]) .chat-list-item .item-preview { color: var(--tblr-secondary-color) !important; } /* --- Top navbar --- */ body[data-skin]:not([data-skin="off"]) .navbar { background: var(--tblr-bg-surface) !important; border-bottom: 1px solid var(--tblr-border-color) !important; box-shadow: none !important; min-height: 60px; } body[data-skin]:not([data-skin="off"]) .navbar-brand { font-weight: 700 !important; letter-spacing: -.01em !important; font-size: 16px !important; } body[data-skin]:not([data-skin="off"]) .nav-link { border-radius: var(--rds-radius) !important; padding: 7px 14px !important; font-weight: 500 !important; font-size: 13.5px; transition: background .15s, color .15s; margin: 0 2px; } body[data-skin]:not([data-skin="off"]) .nav-link:hover { background: var(--tblr-bg-surface-secondary) !important; color: var(--tblr-body-color) !important; } body[data-skin]:not([data-skin="off"]) .nav-link.active { background: rgba(var(--tblr-primary-rgb), .14) !important; color: var(--tblr-primary) !important; font-weight: 600 !important; } body[data-skin]:not([data-skin="off"]) .navbar .nav-item .badge { font-size: 10.5px; padding: 2px 6px; } body[data-skin]:not([data-skin="off"]) .header-action-btn, body[data-skin]:not([data-skin="off"]) .navbar .btn-icon { width: 36px !important; height: 36px !important; border-radius: var(--rds-radius) !important; background: transparent !important; border: 1px solid transparent !important; color: var(--tblr-secondary-color) !important; transition: all .15s !important; } body[data-skin]:not([data-skin="off"]) .header-action-btn:hover, body[data-skin]:not([data-skin="off"]) .navbar .btn-icon:hover { background: var(--tblr-bg-surface-secondary) !important; border-color: var(--tblr-border-color) !important; color: var(--tblr-body-color) !important; } /* --- Buttons: tighter, modern --- */ body[data-skin]:not([data-skin="off"]) .btn { border-radius: var(--rds-radius); font-weight: 600; font-size: 13px; letter-spacing: 0; transition: all .15s; padding: 6px 14px; } body[data-skin]:not([data-skin="off"]) .btn-sm { padding: 4px 10px; font-size: 12px; } body[data-skin]:not([data-skin="off"]) .btn-primary { background: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff; } body[data-skin]:not([data-skin="off"]) .btn-primary:hover { background: var(--tblr-primary-darken); border-color: var(--tblr-primary-darken); } /* --- Cards: cleaner, softer borders --- */ body[data-skin]:not([data-skin="off"]) .card { border-radius: var(--rds-radius-md); border-color: var(--tblr-border-color); background: var(--tblr-bg-surface); box-shadow: var(--rds-shadow-xs); } /* --- Forms --- */ body[data-skin]:not([data-skin="off"]) .form-control, body[data-skin]:not([data-skin="off"]) .form-select { border-radius: var(--rds-radius); border-color: var(--tblr-border-color); background-color: var(--tblr-bg-surface); color: var(--tblr-body-color); font-size: 13.5px; transition: all .15s; } body[data-skin]:not([data-skin="off"]) .form-control:focus, body[data-skin]:not([data-skin="off"]) .form-select:focus { border-color: var(--tblr-primary); box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .15); } /* --- Badges --- */ body[data-skin]:not([data-skin="off"]) .badge { font-weight: 600; border-radius: var(--rds-radius-pill); padding: 2px 8px; font-size: 11px; letter-spacing: 0; } /* --- Chat sidebar (conversations list) — match new design's conv-item --- */ body[data-skin]:not([data-skin="off"]) .chat-list-item { padding: 11px 14px; border-bottom: 1px solid var(--tblr-border-color-translucent); border-right: 3px solid transparent; transition: background .12s, border-right-color .12s; } body[data-skin]:not([data-skin="off"]) .chat-list-item:hover { background: var(--tblr-bg-surface-secondary); } body[data-skin]:not([data-skin="off"]) .chat-list-item.active { background: rgba(var(--tblr-primary-rgb), .10); border-right-color: var(--tblr-primary); } body[data-skin]:not([data-skin="off"]) .chat-list-item .item-name { font-size: 13.5px; font-weight: 600; color: var(--tblr-body-color); } body[data-skin]:not([data-skin="off"]) .chat-list-item .item-preview { font-size: 12.5px; color: var(--tblr-secondary-color); } body[data-skin]:not([data-skin="off"]) .chat-list-item .item-time { font-size: 11px; color: var(--tblr-muted); } /* --- Chat header / customer info panel --- */ body[data-skin]:not([data-skin="off"]) .chat-header { background: var(--tblr-bg-surface); border-bottom: 1px solid var(--tblr-border-color); padding: 12px 18px; } body[data-skin]:not([data-skin="off"]) .chat-sidebar { background: var(--tblr-bg-surface); border-color: var(--tblr-border-color); } /* --- Message bubbles --- */ body[data-skin]:not([data-skin="off"]) .msg-bubble, body[data-skin]:not([data-skin="off"]) .message-bubble, body[data-skin]:not([data-skin="off"]) .msg { border-radius: var(--rds-radius-md); box-shadow: var(--rds-shadow-xs); } /* --- Composer area --- */ body[data-skin]:not([data-skin="off"]) .chat-composer, body[data-skin]:not([data-skin="off"]) .composer-area { background: var(--tblr-bg-surface); border-top: 1px solid var(--tblr-border-color); } /* --- Avatars (rounder) --- */ body[data-skin]:not([data-skin="off"]) .avatar { border-radius: 999px; font-weight: 600; } /* --- Modals: cleaner header / radius --- */ body[data-skin]:not([data-skin="off"]) .modal-content { border-radius: var(--rds-radius-lg); border: 1px solid var(--tblr-border-color); box-shadow: var(--rds-shadow-lg); } body[data-skin]:not([data-skin="off"]) .modal-header { border-bottom-color: var(--tblr-border-color); padding: 14px 20px; } body[data-skin]:not([data-skin="off"]) .modal-footer { border-top-color: var(--tblr-border-color); padding: 12px 20px; } /* --- Dropdowns --- */ body[data-skin]:not([data-skin="off"]) .dropdown-menu { border-radius: var(--rds-radius-md); border: 1px solid var(--tblr-border-color); box-shadow: var(--rds-shadow-lg); padding: 6px; } body[data-skin]:not([data-skin="off"]) .dropdown-item { border-radius: var(--rds-radius-sm); font-size: 13px; padding: 7px 10px; } /* --- Tables --- */ body[data-skin]:not([data-skin="off"]) .table thead th { background: var(--tblr-bg-surface-secondary); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tblr-secondary-color); border-bottom: 1px solid var(--tblr-border-color); } body[data-skin]:not([data-skin="off"]) .table tbody td { font-size: 13px; border-bottom-color: var(--tblr-border-color-translucent); vertical-align: middle; } /* --- Tab pills --- */ body[data-skin]:not([data-skin="off"]) .nav-pills .nav-link { border-radius: var(--rds-radius); } body[data-skin]:not([data-skin="off"]) .nav-pills .nav-link.active { background: var(--tblr-primary); color: #fff; } /* --- KPI / stat cards --- */ body[data-skin]:not([data-skin="off"]) .card .h1, body[data-skin]:not([data-skin="off"]) .card .h2, body[data-skin]:not([data-skin="off"]) .card .h3 { font-weight: 800; letter-spacing: -.02em; } /* --- Code / monospace --- */ body[data-skin]:not([data-skin="off"]) code, body[data-skin]:not([data-skin="off"]) pre, body[data-skin]:not([data-skin="off"]) kbd, body[data-skin]:not([data-skin="off"]) .font-mono, body[data-skin]:not([data-skin="off"]) .text-monospace { font-family: var(--rds-font-mono); } /* --- Status colored chips for ticket statuses, mapping common Tabler classes --- */ body[data-skin]:not([data-skin="off"]) .bg-green-lt, body[data-skin]:not([data-skin="off"]) .badge.bg-green-lt { background: rgba(16,185,129,.14); color: #047857; } body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .bg-green-lt, body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .badge.bg-green-lt { background: rgba(16,185,129,.16); color: #34d399; } body[data-skin]:not([data-skin="off"]) .bg-yellow-lt, body[data-skin]:not([data-skin="off"]) .badge.bg-yellow-lt { background: rgba(245,158,11,.14); color: #b45309; } body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .bg-yellow-lt, body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .badge.bg-yellow-lt { background: rgba(245,158,11,.16); color: #fbbf24; } body[data-skin]:not([data-skin="off"]) .bg-red-lt, body[data-skin]:not([data-skin="off"]) .badge.bg-red-lt { background: rgba(239,68,68,.14); color: #b91c1c; } body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .bg-red-lt, body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .badge.bg-red-lt { background: rgba(239,68,68,.18); color: #f87171; } /* --- Inputs in dark mode: fix Tabler placeholder + select arrow visibility --- */ body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .form-control, body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .form-select { background-color: #141414; border-color: #1f1f1f; color: #f5f5f5; } body[data-skin]:not([data-skin="off"])[data-bs-theme="dark"] .form-control::placeholder { color: #6a6a6a; } /* --- Connection status / online dot polish --- */ body[data-skin]:not([data-skin="off"]) .online-dot { box-shadow: 0 0 0 3px rgba(16,185,129,.18); } /* ============================================================ Vertical Sidebar (replaces horizontal navbar nav tabs) - Hides the existing horizontal nav wrapper - Re-positions #mainNav as a fixed right-side vertical sidebar - No HTML/JS changes; the same click handlers fire ============================================================ */ :root { --rds-sidenav-w: 232px; --rds-sidenav-w-collapsed: 64px; --rds-topbar-h: 60px; } @media (min-width: 768px) { body[data-skin]:not([data-skin="off"]) .navbar-expand-md > .navbar-collapse, body[data-skin]:not([data-skin="off"]) #navbar-menu > .navbar { display: block; } /* Repurpose the secondary navbar wrapper as our sidebar host. #navbar-menu has Bootstrap .collapse class — force visible on desktop. */ body[data-skin]:not([data-skin="off"]) #navbar-menu { position: fixed !important; top: var(--rds-topbar-h); right: 0; bottom: 0; width: var(--rds-sidenav-w); background: var(--tblr-bg-surface) !important; border-left: 1px solid var(--tblr-border-color) !important; z-index: 30; overflow-y: auto; padding: 12px 8px; display: block !important; /* override Bootstrap .collapse hide */ visibility: visible !important; height: auto !important; } body[data-skin]:not([data-skin="off"]) #navbar-menu .navbar.navbar-light, body[data-skin]:not([data-skin="off"]) #navbar-menu .container-fluid { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: none !important; display: block !important; } body[data-skin]:not([data-skin="off"]) #mainNav { flex-direction: column !important; align-items: stretch !important; gap: 2px !important; padding: 0 !important; list-style: none !important; } body[data-skin]:not([data-skin="off"]) #mainNav .nav-item { width: 100%; margin: 0 !important; } body[data-skin]:not([data-skin="off"]) #mainNav .nav-link { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; padding: 10px 12px !important; border-radius: 8px !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--tblr-secondary-color) !important; background: transparent !important; transition: background .12s, color .12s !important; white-space: nowrap; } body[data-skin]:not([data-skin="off"]) #mainNav .nav-link:hover { background: var(--tblr-bg-surface-secondary) !important; color: var(--tblr-body-color) !important; } body[data-skin]:not([data-skin="off"]) #mainNav .nav-link.active { background: rgba(var(--tblr-primary-rgb), .14) !important; color: var(--tblr-primary) !important; font-weight: 600 !important; box-shadow: inset 3px 0 0 var(--tblr-primary); } body[data-skin]:not([data-skin="off"]) #mainNav .nav-link-icon { width: 22px !important; height: 22px !important; display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; flex-shrink: 0; } body[data-skin]:not([data-skin="off"]) #mainNav .nav-link-icon svg { width: 20px !important; height: 20px !important; } body[data-skin]:not([data-skin="off"]) #mainNav .nav-link-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } body[data-skin]:not([data-skin="off"]) #mainNav .badge { margin-inline-start: auto !important; margin-left: 0 !important; font-size: 10.5px !important; padding: 2px 7px !important; border-radius: 999px !important; } /* Push the page content away from the sidebar so it doesn't overlap */ body[data-skin]:not([data-skin="off"]) .page-wrapper { padding-right: var(--rds-sidenav-w) !important; } /* Some legacy selectors hardcode body padding/margin — adjust the offcanvas-aware containers */ body[data-skin]:not([data-skin="off"]) > .page > .page-wrapper { padding-right: var(--rds-sidenav-w) !important; } } /* ============================================================ Burger toggle: shown on all screens. - Desktop (≥768): toggles body[data-sidenav="collapsed"] → 64px icon-only - Mobile (<768): toggles body[data-sidenav="open"] → drawer slides in The legacy #mobileMenuBtn is kept and just restyled / made always visible. ============================================================ */ body[data-skin]:not([data-skin="off"]) #mobileMenuBtn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; border-radius: var(--rds-radius) !important; background: transparent !important; border: 1px solid var(--tblr-border-color) !important; color: var(--tblr-secondary-color) !important; margin-inline-end: 8px !important; padding: 0 !important; transition: all .15s; position: relative; overflow: hidden; } body[data-skin]:not([data-skin="off"]) #mobileMenuBtn:hover { background: var(--tblr-bg-surface-secondary) !important; color: var(--tblr-body-color) !important; } /* Hide the legacy Tabler toggler icon (Tabler injects a background-image that won't theme right) */ body[data-skin]:not([data-skin="off"]) #mobileMenuBtn .navbar-toggler-icon { background-image: none !important; background: transparent !important; width: 0 !important; height: 0 !important; display: none !important; } /* Draw our own hamburger using ::before — themable via CSS variable */ body[data-skin]:not([data-skin="off"]) #mobileMenuBtn::before { content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E") no-repeat center / contain; } /* Desktop: collapsed sidebar — icon-only */ @media (min-width: 768px) { body[data-skin]:not([data-skin="off"])[data-sidenav="collapsed"] #navbar-menu { width: var(--rds-sidenav-w-collapsed) !important; padding: 12px 6px !important; } body[data-skin]:not([data-skin="off"])[data-sidenav="collapsed"] #mainNav .nav-link { justify-content: center !important; padding: 10px 6px !important; gap: 0 !important; } body[data-skin]:not([data-skin="off"])[data-sidenav="collapsed"] #mainNav .nav-link-title, body[data-skin]:not([data-skin="off"])[data-sidenav="collapsed"] #mainNav .badge { display: none !important; } body[data-skin]:not([data-skin="off"])[data-sidenav="collapsed"] .page-wrapper, body[data-skin]:not([data-skin="off"])[data-sidenav="collapsed"] > .page > .page-wrapper { padding-right: var(--rds-sidenav-w-collapsed) !important; } /* Tooltip-on-hover when collapsed */ body[data-skin]:not([data-skin="off"])[data-sidenav="collapsed"] #mainNav .nav-link { position: relative; } body[data-skin]:not([data-skin="off"])[data-sidenav="collapsed"] #mainNav .nav-link:hover::after { content: attr(data-view); position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); background: var(--tblr-body-color); color: var(--tblr-bg-surface); font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 100; } } /* On small screens: rely on the existing bottom tabs for primary nav. The custom drawer is OFF on mobile so it doesn't fight the bottom tabs. Bottom tabs are governed by mobile-redesign.css; we just make sure they remain visible above any redesign overlays. */ @media (max-width: 767.98px) { body[data-skin]:not([data-skin="off"]) #navbar-menu { display: none !important; } body[data-skin]:not([data-skin="off"]) .page-wrapper { padding-right: 0 !important; } /* Burger hidden on mobile — bottom tabs handle navigation */ body[data-skin]:not([data-skin="off"]) #mobileMenuBtn { display: none !important; } /* Make sure bottom tabs are visible and on top */ body[data-skin]:not([data-skin="off"]) .mb-bottom-tabs { display: flex !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 1040 !important; } body[data-skin]:not([data-skin="off"]) .page-body, body[data-skin]:not([data-skin="off"]) .chat-layout { padding-bottom: calc(var(--mb-tab-height, 62px) + env(safe-area-inset-bottom, 0px)) !important; } } /* --- Conversation section jump bar (نشط / بانتظار الرد) --- Pinned right above #ticketList; one click scrolls to that section. */ body[data-skin]:not([data-skin="off"]) #rds-conv-jump { display: flex; gap: 4px; padding: 6px 8px; background: var(--tblr-bg-surface); border-bottom: 1px solid var(--tblr-border-color); position: sticky; top: 0; z-index: 5; } body[data-skin]:not([data-skin="off"]) .rds-jump-btn { flex: 1; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--tblr-border-color); background: var(--tblr-bg-surface); color: var(--tblr-secondary-color); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body[data-skin]:not([data-skin="off"]) .rds-jump-btn:hover { background: var(--tblr-bg-surface-secondary); color: var(--tblr-body-color); border-color: var(--tblr-border-color); } body[data-skin]:not([data-skin="off"]) .rds-jump-btn.active { background: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff; box-shadow: 0 1px 3px rgba(var(--tblr-primary-rgb), .3); } /* --- Accessibility: respect reduced motion --- */ @media (prefers-reduced-motion: reduce) { body[data-skin]:not([data-skin="off"]) * { transition: none !important; animation: none !important; } }