/* ========================================================== Premium UI layer (scoped) - Goal: make the whole app feel modern & professional - Scope: only active when is present - Designed to sit on top of NobleUI + existing riskcapcom theme ========================================================== */ body.premium-ui { /* Typography + rendering */ font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background: #f6f8fb; } /* Keep login page looking intentional (it already has custom layout) */ body.premium-ui.login-page { background: #f8f9fa; } /* Headings */ body.premium-ui h1, body.premium-ui h2, body.premium-ui h3, body.premium-ui h4, body.premium-ui h5 { letter-spacing: 0.15px; } /* Page content spacing */ body.premium-ui .page-content { padding-top: 18px; } /* Cards (default) */ /* IMPORTANT: do not override cards that are intentionally colored/gradient (e.g., dashboard cards), otherwise their white text becomes unreadable on a forced white background. */ body.premium-ui .card:not(.dashboard-card):not(.theme-card):not(.quick-action-card) { border: 1px solid #e5e7eb !important; border-radius: 14px !important; box-shadow: 0 10px 28px rgba(17, 24, 39, 0.06) !important; background: #fff; } body.premium-ui .card:not(.dashboard-card):not(.theme-card):not(.quick-action-card) .card-header { background: #fbfcfe; border-bottom: 1px solid #eef2f7 !important; border-top-left-radius: 14px !important; border-top-right-radius: 14px !important; } /* Dashboard cards: preserve their intended gradient backgrounds and readable text */ body.premium-ui .dashboard-card { color: #fff; } /* Buttons */ body.premium-ui .btn { border-radius: 12px; font-weight: 600; } body.premium-ui .btn:focus, body.premium-ui .btn:focus-visible { box-shadow: 0 0 0 0.25rem rgba(0, 51, 102, 0.18) !important; } /* Inputs */ body.premium-ui .form-control, body.premium-ui .form-select { border-radius: 12px; border-color: #e5e7eb; } body.premium-ui .form-control:focus, body.premium-ui .form-select:focus { border-color: rgba(0, 51, 102, 0.55); box-shadow: 0 0 0 0.25rem rgba(0, 51, 102, 0.12) !important; } /* Dropdowns */ body.premium-ui .dropdown-menu { border-radius: 14px; border: 1px solid rgba(229, 231, 235, 0.9); box-shadow: 0 18px 44px rgba(17, 24, 39, 0.14); } /* Tables */ body.premium-ui .table { border-color: #eef2f7; } /* Premium light table header (simple + professional) */ body.premium-ui .table thead th { background: #f8fafc !important; color: #111827 !important; border-color: #eef2f7 !important; letter-spacing: 0.1px; font-weight: 700; } body.premium-ui .table tbody tr { border-bottom: 1px solid rgba(229, 231, 235, 0.85); } body.premium-ui .table tbody tr:last-child { border-bottom: none; } /* Navbar */ body.premium-ui .navbar { background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(10px); border-bottom: 1px solid rgba(229, 231, 235, 0.85); } /* Sidebar - full width when expanded (NobleUI default: 270px for our theme) */ body.premium-ui:not(.sidebar-folded) .sidebar, body.premium-ui.sidebar-folded.open-sidebar-folded .sidebar { background: #ffffff !important; border-right: 1px solid rgba(229, 231, 235, 0.9); width: 270px !important; } /* Keep sidebar-header width in sync with the wider sidebar */ body.premium-ui:not(.sidebar-folded) .sidebar .sidebar-header, body.premium-ui.sidebar-folded.open-sidebar-folded .sidebar .sidebar-header { width: 270px !important; } /* When sidebar is folded (NobleUI default behaviour) - wider folded sidebar for icon spacing */ body.premium-ui.sidebar-folded:not(.open-sidebar-folded) .sidebar { width: 80px !important; } /* Match the wider sidebar by shifting page-wrapper/navbar when expanded */ body.premium-ui:not(.sidebar-folded) .main-wrapper .page-wrapper, body.premium-ui.sidebar-folded.open-sidebar-folded .main-wrapper .page-wrapper { width: calc(100% - 270px) !important; margin-left: 270px !important; } body.premium-ui:not(.sidebar-folded) .main-wrapper .page-wrapper .navbar, body.premium-ui.sidebar-folded.open-sidebar-folded .main-wrapper .page-wrapper .navbar { left: 270px !important; width: calc(100% - 270px) !important; } /* When sidebar is folded - layout (80px sidebar) */ body.premium-ui.sidebar-folded:not(.open-sidebar-folded) .main-wrapper .page-wrapper { width: calc(100% - 80px) !important; margin-left: 80px !important; } body.premium-ui.sidebar-folded:not(.open-sidebar-folded) .main-wrapper .page-wrapper .navbar { left: 80px !important; width: calc(100% - 80px) !important; } body.premium-ui .sidebar .nav .nav-item .nav-link { border-radius: 12px; margin: 2px 10px; } /* Top-level sidebar links (including dropdown headers) need padding so the chevron never clips */ body.premium-ui .sidebar .sidebar-body .nav > .nav-item > .nav-link { padding: 8px 12px !important; height: auto !important; overflow: visible !important; } /* Reserve space for the dropdown chevron on collapse headers */ body.premium-ui .sidebar .nav-link[href^="#"] { position: relative !important; padding-right: 34px !important; overflow: visible !important; } /* Guaranteed submenu chevron (CSS-drawn) so it always shows */ body.premium-ui .sidebar .nav-link[href^="#"]::after { content: ""; position: absolute; right: 12px; top: 50%; width: 8px; height: 8px; border-right: 2px solid #111827; border-bottom: 2px solid #111827; transform: translateY(-50%) rotate(45deg); opacity: 0.75; transition: transform 0.2s ease, opacity 0.2s ease; pointer-events: none; } body.premium-ui .sidebar .nav-link[href^="#"]:hover::after { opacity: 1; } body.premium-ui .sidebar .nav-link[aria-expanded="true"][href^="#"]::after { transform: translateY(-50%) rotate(-135deg); opacity: 1; } body.premium-ui .sidebar .nav .nav-item.active > .nav-link, body.premium-ui .sidebar .nav .nav-item .nav-link.active { background: rgba(0, 51, 102, 0.08) !important; color: var(--primary-navy) !important; } body.premium-ui .sidebar .nav .nav-item .nav-link:hover { background: rgba(0, 51, 102, 0.06); } /* Dropdown chevrons (submenu arrows) - make them clearer */ body.premium-ui .sidebar .nav-link .fa-chevron-down, body.premium-ui .sidebar .nav-link .fa-chevron-up { display: none !important; } body.premium-ui .sidebar .nav-link:hover .fa-chevron-down, body.premium-ui .sidebar .nav-link:hover .fa-chevron-up { background: rgba(0, 51, 102, 0.08); opacity: 0.95; } body.premium-ui .sidebar .nav-link[aria-expanded="true"] .fa-chevron-down { transform: translateY(-50%) rotate(180deg); } /* Remove NobleUI left indicator bar for active items (we use background highlight instead) */ body.premium-ui .sidebar .sidebar-body .nav .nav-item.active .nav-link::before { display: none !important; } /* Submenu (dropdown) styling */ body.premium-ui .sidebar .sidebar-body .nav.sub-menu { padding: 8px 8px 10px 8px !important; margin: 6px 10px 10px 10px; border-radius: 14px; background: #f8fafc; border: 1px solid rgba(229, 231, 235, 0.9); } /* Remove the dot markers in submenu items */ body.premium-ui .sidebar .sidebar-body .nav.sub-menu .nav-item .nav-link::before { display: none !important; } /* Submenu links */ body.premium-ui .sidebar .sidebar-body .nav.sub-menu .nav-item .nav-link { height: auto !important; padding: 8px 10px 8px 10px !important; border-radius: 12px; color: #111827 !important; font-weight: 600; font-size: 0.9rem; } body.premium-ui .sidebar .sidebar-body .nav.sub-menu .nav-item .nav-link:hover { background: rgba(0, 51, 102, 0.06); color: var(--primary-navy) !important; } body.premium-ui .sidebar .sidebar-body .nav.sub-menu .nav-item .nav-link.active { background: rgba(0, 51, 102, 0.1) !important; color: var(--primary-navy) !important; } /* Submenu icon alignment */ body.premium-ui .sidebar .sidebar-body .nav.sub-menu .nav-item .nav-link i { width: 18px; margin-right: 10px; text-align: center; opacity: 0.9; } /* Sidebar submenu header (remove inline styles and unify look) */ body.premium-ui .sidebar .submenu-header { margin: 6px 12px 6px 12px; padding: 10px 12px; border-radius: 12px; font-weight: 700; font-size: 0.85rem; color: #111827; background: rgba(0, 51, 102, 0.06); border: 1px solid rgba(0, 51, 102, 0.1); } /* Badges */ body.premium-ui .badge { font-weight: 700; } /* ══════════════════════════════════════════════════════════════ FIX: Sidebar items should NOT move/dance on hover Kill all transform, margin-left shifts on hover for nav items. NobleUI default: .link-title margin-left goes 30px→31px on hover and sub-menu .nav-link gets margin-left: 3px on hover. ══════════════════════════════════════════════════════════════ */ /* Kill transition on link-title so nothing animates on hover */ .sidebar .sidebar-body .nav .nav-item .nav-link .link-title, .sidebar .sidebar-body .nav .nav-item .nav-link .link-arrow { transition: none !important; -webkit-transition: none !important; } /* Lock FA icon width so color change can't shift layout */ .sidebar .sidebar-body .nav .nav-item .nav-link > i:first-child { width: 20px !important; text-align: center !important; flex-shrink: 0 !important; display: inline-block !important; } /* Top-level nav items – prevent hover shift */ .sidebar .sidebar-body .nav .nav-item:hover .nav-link { transform: none !important; } .sidebar .sidebar-body .nav .nav-item:hover .nav-link .link-title { margin-left: 10px !important; transform: none !important; } .sidebar .sidebar-body .nav .nav-item:hover .nav-link .link-icon { transform: none !important; } .sidebar .sidebar-body .nav .nav-item:hover .nav-link > i:first-child { transform: none !important; width: 20px !important; } /* Sub-menu items – prevent hover shift */ .sidebar .sidebar-body .nav.sub-menu .nav-item:hover .nav-link { margin-left: 0 !important; transform: none !important; } /* Mobile/tablet: disable desktop sidebar width math so content can use full width */ @media (max-width: 991.98px) { body.premium-ui .main-wrapper .page-wrapper, body.premium-ui:not(.sidebar-folded) .main-wrapper .page-wrapper, body.premium-ui.sidebar-folded.open-sidebar-folded .main-wrapper .page-wrapper, body.premium-ui.sidebar-folded:not(.open-sidebar-folded) .main-wrapper .page-wrapper { width: 100% !important; margin-left: 0 !important; } body.premium-ui .main-wrapper .page-wrapper .navbar, body.premium-ui:not(.sidebar-folded) .main-wrapper .page-wrapper .navbar, body.premium-ui.sidebar-folded.open-sidebar-folded .main-wrapper .page-wrapper .navbar, body.premium-ui.sidebar-folded:not(.open-sidebar-folded) .main-wrapper .page-wrapper .navbar { left: 0 !important; width: 100% !important; } body.premium-ui .page-content { padding-top: 12px; } }