/* ═══════════════════════════════════════════════════════════════ JVP LOGÍSTICA — ADMIN PROFESSIONAL THEME Ironhand Technology | Version 6.0 INSTALLATION: Upload this file to public/css/jvp-admin.css Then add this line to resources/views/app.blade.php in the : ═══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ═══ ROOT VARIABLES ═══ */ :root, html, [data-bs-theme], [data-layout-mode], [data-sidebar], [data-topbar] { --vz-body-bg: #f4f2ed !important; --vz-body-color: #2a2a28 !important; --vz-body-color-rgb: 42,42,40 !important; --vz-secondary-bg: #ffffff !important; --vz-secondary-color: #5c5a52 !important; --vz-tertiary-bg: #edeae4 !important; --vz-emphasis-color: #1c1c1c !important; --vz-emphasis-color-rgb: 28,28,28 !important; --vz-primary: #1c1c1c !important; --vz-primary-rgb: 28,28,28 !important; --vz-primary-bg-subtle: rgba(28,28,28,0.05) !important; --vz-primary-border-subtle: rgba(28,28,28,0.12) !important; --vz-primary-text-emphasis: #000000 !important; --vz-secondary: #5b7ee5 !important; --vz-secondary-rgb: 91,126,229 !important; --vz-success: #0d9668 !important; --vz-success-rgb: 13,150,104 !important; --vz-info: #6366f1 !important; --vz-info-rgb: 99,102,241 !important; --vz-warning: #d97706 !important; --vz-warning-rgb: 217,119,6 !important; --vz-danger: #dc2626 !important; --vz-danger-rgb: 220,38,38 !important; --vz-light: #edeae4 !important; --vz-light-rgb: 237,234,228 !important; --vz-dark: #1c1c1c !important; --vz-dark-rgb: 28,28,28 !important; --vz-border-color: #dedad2 !important; --vz-border-color-translucent: #d0ccc4 !important; --vz-link-color: #1c1c1c !important; --vz-link-color-rgb: 28,28,28 !important; --vz-link-hover-color: #000000 !important; --vz-card-bg: #ffffff !important; --vz-card-border-color: #e4e0d8 !important; --vz-card-cap-bg: #faf9f6 !important; --vz-heading-color: #1c1c1c !important; --vz-input-bg-custom: #faf9f6 !important; --vz-input-border-custom: #d8d4cc !important; --vz-header-bg: #0a0a0a !important; --vz-header-border: rgba(255,255,255,0.08) !important; --vz-header-item-color: rgba(255,255,255,0.85) !important; --vz-header-item-sub-color: rgba(255,255,255,0.50) !important; --vz-header-item-bg: rgba(255,255,255,0.07) !important; --vz-topbar-search-bg: rgba(255,255,255,0.08) !important; --vz-topbar-search-color: #ffffff !important; --vz-topbar-user-bg: rgba(255,255,255,0.08) !important; /* Sidebar palette — deep charcoal, not pure black */ --vz-vertical-menu-bg: #141414 !important; --vz-vertical-menu-border: rgba(255,255,255,0.07) !important; --vz-vertical-menu-item-color: rgba(255,255,255,0.72) !important; --vz-vertical-menu-item-bg: rgba(255,255,255,0.05) !important; --vz-vertical-menu-item-hover-color: #ffffff !important; --vz-vertical-menu-item-active-color: #ffffff !important; --vz-vertical-menu-item-active-bg: rgba(255,255,255,0.10) !important; --vz-vertical-menu-sub-item-color: rgba(255,255,255,0.60) !important; --vz-vertical-menu-sub-item-hover-color: #ffffff !important; --vz-vertical-menu-sub-item-active-color: #ffffff !important; --vz-vertical-menu-title-color: rgba(255,255,255,0.28) !important; --vz-vertical-menu-box-shadow: 2px 0 20px rgba(0,0,0,0.18) !important; --vz-vertical-menu-dropdown-box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important; --vz-footer-bg: #ffffff !important; --vz-footer-color: #8a8578 !important; --vz-page-title-box-shadow: none !important; --vz-page-title-border: 1px solid #e4e0d8 !important; --side_menu: #141414 !important; --side_menu_txt: #ffffff !important; --top_nav: #0a0a0a !important; } /* ═══ TYPOGRAPHY ═══ */ body, .btn, .form-control, .form-select, .nav-link, .dropdown-item, table, input, select, textarea, .card-body, .modal-content, .offcanvas, .page-content, .app-menu, .main-content, p, span, div, a, li, th, td, label, .form-label, .accordion-button { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; } h1, h2, h3, h4, h5, h6, .card-title, .page-title, .modal-title, .offcanvas-title, .fw-bold, .fw-semibold { font-family: 'Outfit', sans-serif !important; color: #1c1c1c !important; } .badge, code, kbd, pre, .counter-value, samp { font-family: 'JetBrains Mono', 'Courier New', monospace !important; } /* ═══ BODY ═══ */ html { background-color: #f4f2ed !important; } body { background-color: #f4f2ed !important; color: #2a2a28 !important; } /* ══════════════════════════════════════════════════════ SIDEBAR — Professional Deep Charcoal ══════════════════════════════════════════════════════ */ /* Sidebar container */ .app-menu.navbar-menu, .app-menu, .navbar-menu, [data-sidebar] .navbar-menu, [data-sidebar] .app-menu, .navbar-menu, .app-menu.navbar-menu, .vertical-menu, [data-sidebar], [data-sidebar="dark"] { background: #141414 !important; border-right: 1px solid rgba(255,255,255,0.06) !important; box-shadow: 2px 0 24px rgba(0,0,0,0.22) !important; } .sidebar-background { background: #141414 !important; background-image: none !important; } /* Logo box */ .navbar-brand-box, .logo-box, .app-menu .navbar-brand-box, .navbar-menu .navbar-brand-box { background: #0d0d0d !important; border-bottom: 1px solid rgba(255,255,255,0.07) !important; display: flex !important; justify-content: center !important; align-items: center !important; padding: 0 16px !important; } .navbar-brand-box a, .navbar-brand-box .logo, .navbar-brand-box .logo-sm, .navbar-brand-box .logo-lg { margin-left: auto !important; margin-right: auto !important; justify-content: center !important; } .navbar-brand-box img, .logo-box img { display: block !important; margin-left: auto !important; margin-right: auto !important; } .logo-dark { display: block !important; } .logo-light { display: none !important; } [data-sidebar="dark"] .logo-dark { display: block !important; } [data-sidebar="dark"] .logo-light { display: none !important; } .navbar-brand-box .logo-lg img, .navbar-brand-box .logo-sm img { filter: none !important; opacity: 1 !important; } /* Section labels / menu titles */ .menu-title, .menu-title span, [data-sidebar] .menu-title, [data-sidebar="dark"] .menu-title, [data-sidebar="dark"] .menu-title span { color: rgba(255,255,255,0.30) !important; font-size: 9.5px !important; letter-spacing: 1.8px !important; font-weight: 700 !important; text-transform: uppercase !important; padding-left: 20px !important; padding-top: 18px !important; padding-bottom: 6px !important; } /* Primary nav links */ .navbar-nav .nav-link, .navbar-menu .nav-link, .menu-link, [data-sidebar] .navbar-nav .nav-link, [data-sidebar] .menu-link, [data-sidebar="dark"] .navbar-nav .nav-link, [data-sidebar="dark"] .menu-link { color: rgba(255,255,255,0.68) !important; font-weight: 400 !important; font-size: 13.5px !important; letter-spacing: 0.01em !important; border-radius: 7px !important; margin: 1px 10px !important; padding: 9px 14px !important; transition: background 0.18s ease, color 0.18s ease !important; position: relative !important; } /* Hover state */ .navbar-nav .nav-link:hover, .menu-link:hover, [data-sidebar] .nav-link:hover, [data-sidebar] .menu-link:hover, [data-sidebar="dark"] .nav-link:hover, [data-sidebar="dark"] .menu-link:hover { color: #ffffff !important; background: rgba(255,255,255,0.07) !important; } /* Active / expanded state — slim left accent bar */ .navbar-nav .nav-link.active, .menu-link.active, [data-sidebar] .nav-link.active, [data-sidebar] .menu-link.active, [data-sidebar="dark"] .nav-link.active, [data-sidebar="dark"] .menu-link.active, .menu-link[aria-expanded="true"], .app-menu .navbar-nav .nav-link.active, .app-menu .menu-link.active, .navbar-menu .navbar-nav .nav-link.active, .navbar-menu .menu-link.active, .app-menu .menu-link[aria-expanded="true"], .navbar-menu .menu-link[aria-expanded="true"] { color: #ffffff !important; background: rgba(255,255,255,0.10) !important; font-weight: 600 !important; box-shadow: inset 3px 0 0 rgba(255,255,255,0.55) !important; } /* Icons and spans inside nav links */ .nav-link i, .nav-link span, .menu-link i, .menu-link span, .nav-link.active i, .nav-link.active span, .menu-link.active i, .menu-link.active span, [data-sidebar] .nav-link i, [data-sidebar] .nav-link span, [data-sidebar] .menu-link i, [data-sidebar] .menu-link span, [data-sidebar="dark"] .nav-link i, [data-sidebar="dark"] .nav-link span, [data-sidebar="dark"] .menu-link i, [data-sidebar="dark"] .menu-link span, .nav-link:hover i, .nav-link:hover span, .menu-link:hover i, .menu-link:hover span, .menu-link[aria-expanded="true"] i, .menu-link[aria-expanded="true"] span, .app-menu .navbar-nav .nav-link i, .app-menu .menu-link i, .navbar-menu .navbar-nav .nav-link i, .navbar-menu .menu-link i, .navbar-nav .nav-link i, .navbar-nav .nav-icon, .navbar-nav svg, .navbar-nav svg path, .app-menu i, .app-menu svg, .app-menu svg path, .vertical-menu i, .vertical-menu svg, .vertical-menu svg path, .menu-dropdown i, .menu-dropdown svg, .menu-dropdown svg path { color: rgba(255,255,255,0.75) !important; fill: rgba(255,255,255,0.75) !important; stroke: none !important; } .nav-link.active i, .nav-link.active span, .menu-link.active i, .menu-link.active span, .nav-link:hover i, .nav-link:hover span, .menu-link:hover i, .menu-link:hover span, .menu-link[aria-expanded="true"] i, .menu-link[aria-expanded="true"] span, .app-menu .navbar-nav .nav-link.active i, .app-menu .navbar-nav .nav-link.active span, .navbar-menu .navbar-nav .nav-link.active i, .navbar-menu .navbar-nav .nav-link.active span { color: #ffffff !important; fill: #ffffff !important; } /* Sub-menu items (nav-sm) */ .nav-sm .nav-link, [data-sidebar] .nav-sm .nav-link, [data-sidebar="dark"] .nav-sm .nav-link, .app-menu .navbar-nav .nav-sm .nav-link, .navbar-menu .navbar-nav .nav-sm .nav-link, .app-menu .navbar-nav .nav-sm .nav-link span, .navbar-menu .navbar-nav .nav-sm .nav-link span, .app-menu .navbar-nav .nav-sm .nav-link i, .navbar-menu .navbar-nav .nav-sm .nav-link i { color: rgba(255,255,255,0.55) !important; font-size: 12.5px !important; padding: 7px 14px 7px 42px !important; border-radius: 6px !important; margin: 1px 10px !important; } .nav-sm .nav-link:hover, .nav-sm .nav-link.active, [data-sidebar] .nav-sm .nav-link:hover, [data-sidebar] .nav-sm .nav-link.active, [data-sidebar="dark"] .nav-sm .nav-link:hover, [data-sidebar="dark"] .nav-sm .nav-link.active, .app-menu .navbar-nav .nav-sm .nav-link:hover, .navbar-menu .navbar-nav .nav-sm .nav-link:hover, .app-menu .navbar-nav .nav-sm .nav-link.active, .navbar-menu .navbar-nav .nav-sm .nav-link.active, .app-menu .navbar-nav .nav-sm .nav-link:hover span, .navbar-menu .navbar-nav .nav-sm .nav-link:hover span, .app-menu .navbar-nav .nav-sm .nav-link.active span, .navbar-menu .navbar-nav .nav-sm .nav-link.active span, .app-menu .navbar-nav .nav-sm .nav-link:hover i, .navbar-menu .navbar-nav .nav-sm .nav-link:hover i, .app-menu .navbar-nav .nav-sm .nav-link.active i, .navbar-menu .navbar-nav .nav-sm .nav-link.active i, .nav-sm .nav-link:hover span, .nav-sm .nav-link.active span, .nav-sm .nav-link:hover i, .nav-sm .nav-link.active i { color: #ffffff !important; background: rgba(255,255,255,0.07) !important; fill: #ffffff !important; } /* Vertical overlay */ .vertical-overlay { background: rgba(0,0,0,0.38) !important; } /* ══════════════════════════════════════════════════════ TOP NAVIGATION BAR — Professional Black ══════════════════════════════════════════════════════ */ #page-topbar, [data-topbar] #page-topbar, [data-topbar="dark"] #page-topbar, .navbar-header { background: #0a0a0a !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.40) !important; } /* Top nav menu links (Home, Users, Settings, Masters) */ a.nav-link.nav-menu, a.nav-link.nav-menu i, a.nav-link.nav-menu span, a.nav-link.nav-menu::before, #dropdownMenuButton.nav-link.nav-menu, #dropdownMenuButton.nav-link.nav-menu i, #dropdownMenuButton.nav-link.nav-menu span { color: rgba(255,255,255,0.82) !important; fill: rgba(255,255,255,0.82) !important; font-size: 13.5px !important; font-weight: 500 !important; } a.nav-link.nav-menu:hover, a.nav-link.nav-menu:hover i, a.nav-link.nav-menu:hover span, #dropdownMenuButton.nav-link.nav-menu:hover, #dropdownMenuButton.nav-link.nav-menu:hover i, #dropdownMenuButton.nav-link.nav-menu:hover span { color: #ffffff !important; background: rgba(255,255,255,0.10) !important; border-radius: 6px !important; } a.nav-link.nav-menu.active, a.nav-link.nav-menu.active i, a.nav-link.nav-menu.active span, a.nav-link.nav-menu[aria-expanded="true"], a.nav-link.nav-menu[aria-expanded="true"] i, a.nav-link.nav-menu[aria-expanded="true"] span, #dropdownMenuButton.nav-link.nav-menu.active, #dropdownMenuButton.nav-link.nav-menu.active i, #dropdownMenuButton.nav-link.nav-menu.active span { color: #ffffff !important; background: rgba(255,255,255,0.14) !important; border-radius: 6px !important; font-weight: 600 !important; } /* Hamburger icon */ .hamburger-icon span, [data-topbar] .hamburger-icon span, [data-topbar="dark"] .hamburger-icon span { background-color: rgba(255,255,255,0.80) !important; } /* Header items (icon buttons in topbar) */ #page-topbar .nav-link:hover, /* Page title box */ .app-page-title, .page-title-box { background: #0a0a0a !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } .page-title-box h4, .page-title { color: #ffffff !important; font-weight: 600 !important; } .breadcrumb-item a { color: rgba(255,255,255,0.55) !important; } .breadcrumb-item.active { color: rgba(255,255,255,0.85) !important; } .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.35) !important; } /* Search bar */ .app-search .form-control, [data-topbar="dark"] .app-search .form-control { background: rgba(255,255,255,0.09) !important; border: 1px solid rgba(255,255,255,0.14) !important; color: #ffffff !important; } .app-search .form-control::placeholder { color: rgba(255,255,255,0.40) !important; } .app-search .search-widget-icon, .app-search i { color: rgba(255,255,255,0.50) !important; } /* User profile chip in topbar */ .topbar-user, [data-topbar] .topbar-user, [data-topbar="dark"] .topbar-user, .topbar-user .btn, .topbar-user .dropdown-toggle { background-color: rgba(255,255,255,0.09) !important; border-radius: 10px !important; padding: 4px 10px !important; border: 1px solid rgba(255,255,255,0.15) !important; color: #ffffff !important; } .topbar-user .user-name-text, .user-name-text, #page-header-user-dropdown .user-name-text, .topbar-user span, .topbar-user strong { color: #ffffff !important; font-weight: 600 !important; } .topbar-user .user-name-sub-text, .user-name-sub-text, #page-header-user-dropdown .user-name-sub-text { color: rgba(255,255,255,0.50) !important; } .topbar-user img { border: 2px solid rgba(255,255,255,0.20) !important; } /* Topbar dropdown menus */ .topbar-user .dropdown-menu, [data-topbar="dark"] .topbar-user .dropdown-menu { background: #ffffff !important; border: 1px solid #e4e0d8 !important; box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important; border-radius: 10px !important; } .topbar-user .dropdown-header { background: #faf9f6 !important; color: #1c1c1c !important; border-bottom: 1px solid #edeae4 !important; } .topbar-user .dropdown-item, .topbar-user .dropdown-item i, .topbar-user .dropdown-item span, .topbar-user .dropdown-item form .btn, .topbar-user .dropdown-item form button, .topbar-user .dropdown-item form .btn i, .topbar-user .dropdown-item form button i, .topbar-user .dropdown-item i.text-muted, html body .topbar-user .dropdown-item, html body .topbar-user .dropdown-item i.text-muted { color: #3a3a38 !important; background: transparent !important; } .topbar-user .dropdown-item:hover, .topbar-user .dropdown-item:hover i, .topbar-user .dropdown-item:hover span { background-color: #f4f2ed !important; color: #1c1c1c !important; } /* Notification & other icon dropdowns */ #page-header-notifications-dropdown, #page-header-notifications-dropdown:hover, #page-header-notifications-dropdown:focus, .dropdown.d-none.d-sm-inline-block > .btn, .dropdown.d-none.d-sm-inline-block > .btn.show, .dropdown.d-none.d-sm-inline-block > .btn:hover, .dropdown.d-none.d-sm-inline-block > .btn:focus, .language-switch, .language-switch button, .language-switch .btn, .language-switch .btn.show, .language-switch .btn:hover, .language-switch .btn:focus { background: transparent !important; color: rgba(255,255,255,0.80) !important; border-color: transparent !important; } /* General dropdown menus in topbar */ .dropdown-menu, .dropdown-menu.show { background: #ffffff !important; border: 1px solid #e4e0d8 !important; box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important; border-radius: 10px !important; } .dropdown-menu .dropdown-item, .dropdown-menu .dropdown-item span, .dropdown-menu .dropdown-item i, .dropdown-menu .dropdown-header { background: transparent !important; color: #3a3a38 !important; } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background: #f4f2ed !important; color: #1c1c1c !important; } .dropdown-menu .dropdown-item.active { background: rgba(28,28,28,0.06) !important; color: #1c1c1c !important; } .dropdown-menu .dropdown-divider, .dropdown-divider { border-top-color: #edeae4 !important; } /* ══════════════════════════════════════════════════════ CARDS ══════════════════════════════════════════════════════ */ .card { background: #ffffff !important; border: 1px solid #e4e0d8 !important; border-radius: 10px !important; box-shadow: 0 1px 4px rgba(0,0,0,0.03) !important; color: #2a2a28 !important; } .card-header { background: #faf9f6 !important; border-bottom: 1px solid #edeae4 !important; color: #1c1c1c !important; } .card-footer { background: #faf9f6 !important; border-top: 1px solid #edeae4 !important; } .card-title { color: #1c1c1c !important; font-weight: 600 !important; } /* ══════════════════════════════════════════════════════ TABLES ══════════════════════════════════════════════════════ */ .table { color: #2a2a28 !important; --bs-table-bg: transparent !important; --bs-table-hover-bg: rgba(28,28,28,0.025) !important; } .table > thead th, .table-active th, thead.table-active th, .table > thead > tr > th { color: #8a8578 !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.8px !important; text-transform: uppercase !important; border-bottom: 2px solid #e4e0d8 !important; background: #faf9f6 !important; padding: 12px 14px !important; } .table > tbody > tr > td, .table td { border-bottom: 1px solid #edeae4 !important; padding: 12px 14px !important; color: #2a2a28 !important; font-size: 13px !important; } .table-hover > tbody > tr:hover > * { background-color: rgba(28,28,28,0.02) !important; } /* ══════════════════════════════════════════════════════ BUTTONS ══════════════════════════════════════════════════════ */ .btn-primary, .btn-primary:focus, .btn-primary:active { background: #1c1c1c !important; border-color: #1c1c1c !important; color: #ffffff !important; font-weight: 600 !important; box-shadow: none !important; } .btn-primary:hover { background: #333333 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; } .btn-soft-primary { background: rgba(28,28,28,0.06) !important; color: #1c1c1c !important; border: none !important; } .btn-soft-primary:hover { background: rgba(28,28,28,0.12) !important; } .btn-soft-secondary { background: #f4f2ed !important; color: #4a4840 !important; border: none !important; } .btn-soft-success { background: rgba(13,150,104,0.08) !important; color: #0d9668 !important; border: none !important; } .btn-soft-warning { background: rgba(217,119,6,0.08) !important; color: #d97706 !important; border: none !important; } .btn-soft-danger { background: rgba(220,38,38,0.08) !important; color: #dc2626 !important; border: none !important; } .btn-soft-info { background: rgba(99,102,241,0.08) !important; color: #6366f1 !important; border: none !important; } .btn-secondary, .btn-secondary:focus { background: #f4f2ed !important; border-color: #dedad2 !important; color: #4a4840 !important; } .btn-light { background: #f4f2ed !important; border-color: #dedad2 !important; color: #4a4840 !important; } .btn-outline-primary { border-color: #1c1c1c !important; color: #1c1c1c !important; background: transparent !important; } .btn-outline-primary:hover { background: #1c1c1c !important; color: #ffffff !important; } /* ══════════════════════════════════════════════════════ FORMS ══════════════════════════════════════════════════════ */ .form-control, .form-select { background-color: #faf9f6 !important; border: 1px solid #d8d4cc !important; color: #1c1c1c !important; border-radius: 6px !important; font-size: 13px !important; } .form-control:focus, .form-select:focus { background-color: #ffffff !important; border-color: #1c1c1c !important; box-shadow: 0 0 0 2px rgba(28,28,28,0.08) !important; color: #1c1c1c !important; } .form-control::placeholder { color: #b0aa9e !important; } .form-label, label { color: #4a4840 !important; font-weight: 500 !important; font-size: 13px !important; } .form-check-input { background-color: #faf9f6 !important; border-color: #d8d4cc !important; } .form-check-input:checked { background-color: #1c1c1c !important; border-color: #1c1c1c !important; } .input-group-text { background: #f4f2ed !important; border-color: #d8d4cc !important; color: #6b665c !important; } /* ══════════════════════════════════════════════════════ BADGES ══════════════════════════════════════════════════════ */ .badge { font-weight: 600 !important; font-size: 10px !important; border-radius: 4px !important; } .bg-primary, .badge-soft-primary, .badge.bg-primary { background-color: rgba(28,28,28,0.08) !important; color: #1c1c1c !important; } .bg-success, .badge-soft-success, .badge.bg-success { background-color: rgba(13,150,104,0.1) !important; color: #0d9668 !important; } .bg-warning, .badge-soft-warning, .badge.bg-warning { background-color: rgba(217,119,6,0.1) !important; color: #d97706 !important; } .bg-danger, .badge-soft-danger, .badge.bg-danger { background-color: rgba(220,38,38,0.1) !important; color: #dc2626 !important; } .bg-info, .badge-soft-info, .badge.bg-info { background-color: rgba(99,102,241,0.1) !important; color: #6366f1 !important; } .bg-secondary, .badge-soft-secondary { background-color: #f4f2ed !important; color: #4a4840 !important; } /* ══════════════════════════════════════════════════════ MODALS & OFFCANVAS ══════════════════════════════════════════════════════ */ .modal-content { background: #ffffff !important; border: 1px solid #e4e0d8 !important; box-shadow: 0 24px 64px rgba(0,0,0,0.12) !important; color: #2a2a28 !important; } .modal-header { border-bottom: 1px solid #edeae4 !important; } .modal-footer { border-top: 1px solid #edeae4 !important; } .btn-close { filter: none !important; } .offcanvas { background: #ffffff !important; border-color: #e4e0d8 !important; color: #2a2a28 !important; } /* ══════════════════════════════════════════════════════ PAGINATION & TABS ══════════════════════════════════════════════════════ */ .pagination .page-link { background: #ffffff !important; border-color: #dedad2 !important; color: #6b665c !important; } .pagination .page-item.active .page-link { background: #1c1c1c !important; border-color: #1c1c1c !important; color: #ffffff !important; } .pagination .page-link:hover { background: #f4f2ed !important; color: #1c1c1c !important; } .nav-tabs { border-bottom: 1px solid #e4e0d8 !important; } .nav-tabs .nav-link { color: #8a8578 !important; border: none !important; } .nav-tabs .nav-link.active { color: #1c1c1c !important; background: transparent !important; border-bottom: 2px solid #1c1c1c !important; font-weight: 600 !important; } .nav-tabs .nav-link:hover { color: #1c1c1c !important; } .nav-pills .nav-link.active { background: rgba(28,28,28,0.06) !important; color: #1c1c1c !important; } /* ══════════════════════════════════════════════════════ ALERTS ══════════════════════════════════════════════════════ */ .alert-primary { background: rgba(28,28,28,0.04) !important; border-color: rgba(28,28,28,0.08) !important; color: #1c1c1c !important; } .alert-success { background: rgba(13,150,104,0.06) !important; border-color: rgba(13,150,104,0.12) !important; color: #0d9668 !important; } .alert-warning { background: rgba(217,119,6,0.06) !important; border-color: rgba(217,119,6,0.12) !important; color: #d97706 !important; } .alert-danger { background: rgba(220,38,38,0.06) !important; border-color: rgba(220,38,38,0.12) !important; color: #dc2626 !important; } .alert-info { background: rgba(99,102,241,0.06) !important; border-color: rgba(99,102,241,0.12) !important; color: #6366f1 !important; } /* ══════════════════════════════════════════════════════ TEXT UTILITIES ══════════════════════════════════════════════════════ */ .text-muted { color: #8a8578 !important; } .text-dark { color: #1c1c1c !important; } .text-body { color: #2a2a28 !important; } .text-primary { color: #1c1c1c !important; } .bg-light, .bg-body-secondary { background-color: #f4f2ed !important; } .bg-primary { background-color: #1c1c1c !important; } .bg-soft-primary { background-color: rgba(28,28,28,0.05) !important; } .border { border-color: #e4e0d8 !important; } .border-bottom { border-bottom-color: #edeae4 !important; } .border-top { border-top-color: #edeae4 !important; } .border-dashed { border-color: #dedad2 !important; } hr { border-color: #edeae4 !important; opacity: 1 !important; } .avatar-title { background: #f4f2ed !important; color: #1c1c1c !important; } .counter-value { color: #1c1c1c !important; } .list-group-item { background: transparent !important; border-color: #edeae4 !important; color: #2a2a28 !important; } .list-group-item.active { background: rgba(28,28,28,0.05) !important; border-color: #1c1c1c !important; color: #1c1c1c !important; } /* ══════════════════════════════════════════════════════ SCROLLBAR ══════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #c8c4bc; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #a8a49c; } /* ══════════════════════════════════════════════════════ PLUGINS ══════════════════════════════════════════════════════ */ .swal2-popup { background: #ffffff !important; color: #2a2a28 !important; border: 1px solid #e4e0d8 !important; } .swal2-title { color: #1c1c1c !important; } .swal2-html-container { color: #4a4840 !important; } .swal2-confirm { background: #1c1c1c !important; color: #ffffff !important; border-color: #1c1c1c !important; } .flatpickr-calendar { background: #ffffff !important; border: 1px solid #e4e0d8 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important; } .flatpickr-day { color: #2a2a28 !important; } .flatpickr-day.today { border-color: #1c1c1c !important; background: rgba(28,28,28,0.06) !important; } .flatpickr-day.selected { background: #1c1c1c !important; color: #ffffff !important; border-color: #1c1c1c !important; } .flatpickr-months .flatpickr-month { background: #faf9f6 !important; color: #1c1c1c !important; } .flatpickr-current-month .flatpickr-monthDropdown-months { background: #ffffff !important; color: #1c1c1c !important; } .flatpickr-time input { color: #1c1c1c !important; } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: #4a4840 !important; fill: #4a4840 !important; } .flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path { fill: #4a4840 !important; } .flatpickr-day.inRange, .flatpickr-day:hover { background: #f4f2ed !important; border-color: #f4f2ed !important; } .apexcharts-canvas .apexcharts-text { fill: #8a8578 !important; } .apexcharts-gridline { stroke: rgba(0,0,0,0.04) !important; } .apexcharts-tooltip { background: #ffffff !important; border: 1px solid #e4e0d8 !important; color: #1c1c1c !important; } .apexcharts-tooltip-title { background: #faf9f6 !important; border-bottom: 1px solid #edeae4 !important; } .apexcharts-legend-text { color: #6b665c !important; } .apexcharts-menu { background: #ffffff !important; border: 1px solid #e4e0d8 !important; } .apexcharts-menu-item:hover { background: #f4f2ed !important; } .progress { background: #edeae4 !important; border-radius: 4px !important; } .progress-bar { background: #1c1c1c !important; } .accordion-item { background: transparent !important; border-color: #e4e0d8 !important; } .accordion-button { background: #faf9f6 !important; color: #1c1c1c !important; font-weight: 500 !important; } .accordion-button:not(.collapsed) { background: rgba(28,28,28,0.04) !important; color: #1c1c1c !important; box-shadow: none !important; } /* ══════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════ */ .footer, .footer-content, .main-content .footer, .page-content footer { background: #f7f4ee !important; color: #6d675d !important; border-top: 1px solid #e5ddd0 !important; } .footer a { color: #6b665c !important; } /* ══════════════════════════════════════════════════════ RIGHT BAR & MISC ══════════════════════════════════════════════════════ */ .sliding-box { background: #ffffff !important; border: 1px solid #e4e0d8 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important; } .sliding-box a, .sliding-box .btn, .sliding-box a span, .sliding-box a i { color: #4a4840 !important; } .sliding-box a:hover { color: #1c1c1c !important; } .right-bar { background: #ffffff !important; color: #2a2a28 !important; } /* ══════════════════════════════════════════════════════ SELECT2 & MULTISELECT ══════════════════════════════════════════════════════ */ .select2-container--default .select2-selection--single { background: #faf9f6 !important; border-color: #d8d4cc !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #1c1c1c !important; } .select2-dropdown { background: #ffffff !important; border-color: #e4e0d8 !important; } .select2-results__option--highlighted { background: #f4f2ed !important; color: #1c1c1c !important; } .multiselect, .multiselect__tags { background: #faf9f6 !important; border-color: #d8d4cc !important; color: #1c1c1c !important; } .multiselect__content-wrapper { background: #ffffff !important; border-color: #e4e0d8 !important; } .multiselect__option--highlight { background: #f4f2ed !important; color: #1c1c1c !important; } /* ══════════════════════════════════════════════════════ CHAT ══════════════════════════════════════════════════════ */ .chat-conversation-list .chat-list .ctext-wrap { background: #f4f2ed !important; border: 1px solid #edeae4 !important; } .chat-input-section { background: #ffffff !important; border-top: 1px solid #e4e0d8 !important; } /* ══════════════════════════════════════════════════════ SCROLL TO TOP ══════════════════════════════════════════════════════ */ #scroll-top, .back-to-top, .btn-icon.back-to-top { background: #1c1c1c !important; border-color: #1c1c1c !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(0,0,0,0.20) !important; } #scroll-top:hover, .back-to-top:hover, .btn-icon.back-to-top:hover { background: #333333 !important; color: #ffffff !important; } /* ══════════════════════════════════════════════════════ DASHBOARD SHELL ══════════════════════════════════════════════════════ */ .dashboard-shell .panel-heading h3, .dashboard-shell .subheading, .dashboard-shell .metric-card .label, .dashboard-shell .panel-card h3, .dashboard-shell .panel-card h4, .dashboard-shell .panel-card strong, .dashboard-shell .map-node strong, .dashboard-shell .map-node small { color: #111111 !important; } .dashboard-shell .panel-heading h3, .dashboard-shell .subheading { letter-spacing: 0.01em !important; font-weight: 700 !important; } .dashboard-shell .ops-map { background: radial-gradient(circle at top, rgba(212,175,55,0.10), rgba(17,17,17,0.02) 35%), linear-gradient(180deg, #f7f4ee 0%, #efe8dc 100%) !important; border: 1px solid #e4d7b8 !important; } .dashboard-shell .map-legend, .dashboard-shell .map-node { background: rgba(255,255,255,0.92) !important; color: #111111 !important; } /* ═══════════════════════════════════════════════════════ TOPBAR FORCE OVERRIDE — Black background, white text Loaded last, maximum specificity ═══════════════════════════════════════════════════════ */ /* Force black background on topbar - overrides all compiled CSS variables */ html body #page-topbar, html body .navbar-header, html body [data-layout="vertical"] #page-topbar, html body [data-layout="horizontal"] #page-topbar { background-color: #000000 !important; background: #000000 !important; border-bottom: 1px solid rgba(255,255,255,0.10) !important; box-shadow: 0 2px 20px rgba(0,0,0,0.50) !important; } /* Force white text on all topbar nav links */ html body #page-topbar .nav-link:hover, html body #page-topbar .nav-link:hover span, html body #page-topbar .nav-link:hover i, html body #page-topbar a.nav-link.nav-menu:hover, html body #page-topbar a.nav-link.nav-menu:hover span, html body #page-topbar a.nav-link.nav-menu:hover i { color: #ffffff !important; background-/* color removed */ border-radius: 6px !important; } html body #page-topbar a.nav-link.nav-menu.active, html body #page-topbar a.nav-link.nav-menu[aria-expanded="true"] { color: #ffffff !important; background-color: rgba(255,255,255,0.14) !important; border-radius: 6px !important; font-weight: 600 !important; } /* Hamburger bars - white on black */ html body #page-topbar .hamburger-icon span { background-color: rgba(255,255,255,0.85) !important; } /* User profile chip */ html body #page-topbar .topbar-user, html body #page-topbar .topbar-user .btn, html body #page-topbar .topbar-user .dropdown-toggle { background-color: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 10px !important; color: #ffffff !important; } html body #page-topbar .topbar-user .user-name-text, html body #page-topbar .topbar-user span, html body #page-topbar .topbar-user strong { color: #ffffff !important; } html body #page-topbar .topbar-user .user-name-sub-text { color: rgba(255,255,255,0.55) !important; } /* Search bar on black topbar */ html body #page-topbar .app-search .form-control { background-color: rgba(255,255,255,0.09) !important; border-color: rgba(255,255,255,0.14) !important; color: #ffffff !important; } html body #page-topbar .app-search .form-control::placeholder { color: rgba(255,255,255,0.40) !important; } /* Notification badge and icons */ html body #page-topbar .btn-topbar, html body #page-topbar .btn-ghost-secondary { color: rgba(255,255,255,0.80) !important; } html body #page-topbar .btn-topbar:hover, html body #page-topbar .btn-ghost-secondary:hover { color: #ffffff !important; background-color: rgba(255,255,255,0.10) !important; } /* ═══════════════════════════════════════════════════════ NAVBAR-EXPAND — Black background, white text Targets: nav.navbar.navbar-expand > div.top-navbar Source: app-3f9081be.css sets rgba(255,255,255,0.88) ═══════════════════════════════════════════════════════ */ /* Black background on the navbar-expand wrapper */ html body nav.navbar.navbar-expand, html body .navbar.navbar-expand { background-color: #000000 !important; background: #000000 !important; } /* Black background on the top-navbar pill/container */ html body .top-navbar, html body nav.navbar.navbar-expand .top-navbar { background-color: #000000 !important; background: #000000 !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,0.08) !important; } /* White text on all nav links inside top-navbar */ /* Hover state — white text, subtle highlight */ html body .top-navbar .nav-menu:hover, html body .top-navbar .nav-link:hover, html body nav.navbar.navbar-expand .nav-link:hover { background: rgba(255, 255, 255, 0.10) !important; color: #ffffff !important; border-radius: 8px !important; } html body .top-navbar .nav-menu:hover span, html body .top-navbar .nav-menu:hover i, html body .top-navbar .nav-link:hover span, html body .top-navbar .nav-link:hover i { color: #ffffff !important; } /* Active state — slightly brighter highlight */ html body .top-navbar .nav-menu.active, html body .top-navbar .nav-item .active, html body .top-navbar .nav-menu[aria-expanded="true"], html body nav.navbar.navbar-expand .nav-link.active, html body nav.navbar.navbar-expand .nav-item.active .nav-link { background: rgba(255, 255, 255, 0.16) !important; color: #ffffff !important; font-weight: 600 !important; border-radius: 8px !important; box-shadow: none !important; } html body .top-navbar .nav-menu.active span, html body .top-navbar .nav-menu.active i, html body .top-navbar .nav-item .active span, html body .top-navbar .nav-item .active i { color: #ffffff !important; } /* ── DROPDOWNS — White background, black text ── */ html body .top-navbar .dropdown-menu, html body nav.navbar.navbar-expand .dropdown-menu { background-color: #ffffff !important; background: #ffffff !important; border: 1px solid rgba(0,0,0,0.10) !important; border-radius: 10px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.14) !important; padding: 6px 0 !important; } html body .top-navbar .dropdown-item, html body nav.navbar.navbar-expand .dropdown-item, html body .top-navbar .dropdown-menu a, html body nav.navbar.navbar-expand .dropdown-menu a, html body .top-navbar .dropdown-menu li a, html body nav.navbar.navbar-expand .dropdown-menu li a { color: #1a1a1a !important; background-color: transparent !important; font-size: 13.5px !important; padding: 8px 18px !important; } html body .top-navbar .dropdown-item:hover, html body nav.navbar.navbar-expand .dropdown-item:hover, html body .top-navbar .dropdown-menu a:hover, html body nav.navbar.navbar-expand .dropdown-menu a:hover { background-color: #f4f4f4 !important; color: #000000 !important; } html body .top-navbar .dropdown-item.active, html body nav.navbar.navbar-expand .dropdown-item.active { background-color: #f0f0f0 !important; color: #000000 !important; font-weight: 600 !important; } /* Dropdown dividers */ html body .top-navbar .dropdown-divider, html body nav.navbar.navbar-expand .dropdown-divider { border-color: rgba(0,0,0,0.08) !important; } /* ── Sidebar collapsed (sm) navbar-menu padding fix ── */ :is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu { padding-top: 18px !important; padding-left: 18px !important; } /* ── Navbar dropdown: white headings & bold text ── */ /* Targets: #page-topbar and nav.navbar.navbar-expand dropdowns */ html body #page-topbar h1, html body #page-topbar h2, html body #page-topbar h3, html body #page-topbar h4, html body #page-topbar h5, html body #page-topbar h6, html body #page-topbar .card-title, html body #page-topbar .page-title, html body #page-topbar .modal-title, html body #page-topbar .offcanvas-title, html body #page-topbar .fw-bold, html body #page-topbar .fw-semibold, html body nav.navbar.navbar-expand h1, html body nav.navbar.navbar-expand h2, html body nav.navbar.navbar-expand h3, html body nav.navbar.navbar-expand h4, html body nav.navbar.navbar-expand h5, html body nav.navbar.navbar-expand h6, html body nav.navbar.navbar-expand .card-title, html body nav.navbar.navbar-expand .page-title, html body nav.navbar.navbar-expand .modal-title, html body nav.navbar.navbar-expand .offcanvas-title, html body nav.navbar.navbar-expand .fw-bold, html body nav.navbar.navbar-expand .fw-semibold, html body .top-navbar h1, html body .top-navbar h2, html body .top-navbar h3, html body .top-navbar h4, html body .top-navbar h5, html body .top-navbar h6, html body .top-navbar .card-title, html body .top-navbar .page-title, html body .top-navbar .modal-title, html body .top-navbar .offcanvas-title, html body .top-navbar .fw-bold, html body .top-navbar .fw-semibold { color: #ffffff !important; } /* Keep user dropdown panel content dark even when the topbar uses white text */ html body #page-topbar .topbar-user .dropdown-menu, html body #page-topbar .topbar-user .dropdown-menu *, html body nav.navbar.navbar-expand .topbar-user .dropdown-menu, html body nav.navbar.navbar-expand .topbar-user .dropdown-menu *, html body .top-navbar .topbar-user .dropdown-menu, html body .top-navbar .topbar-user .dropdown-menu * { color: #1a1a1a !important; } html body #page-topbar .notifications-menu, html body #page-topbar .notifications-menu *, html body #page-header-notifications-dropdown ~ .notifications-menu, html body #page-header-notifications-dropdown ~ .notifications-menu *, html body .topbar-utility-actions .notifications-menu, html body .topbar-utility-actions .notifications-menu * { color: #ffffff !important; } html body #page-topbar .notifications-menu .text-muted, html body #page-topbar .notifications-menu .text-body, html body #page-topbar .notifications-menu .dropdown-head h6, html body #page-topbar .notifications-menu .dropdown-tabs .badge, html body #page-topbar .notifications-menu .dropdown-tabs .bg-light-subtle, html body #page-topbar .notifications-menu .p-3.text-center, html body #page-topbar .notifications-menu .nav-link, html body #page-topbar .notifications-menu .tab-pane, html body #page-topbar .notifications-menu .simplebar-content, html body #page-topbar .notifications-menu .notification-item, html body #page-topbar .notifications-menu .notification-item h6, html body #page-topbar .notifications-menu .notification-item span { color: #ffffff !important; } html body #page-topbar .notifications-menu .dropdown-tabs .badge, html body #page-topbar .notifications-menu .dropdown-tabs .bg-light-subtle { background: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.12) !important; } html body #page-topbar .topbar-user .dropdown-item:hover, html body #page-topbar .topbar-user .dropdown-item:hover *, html body #page-topbar .topbar-user .dropdown-item:focus, html body #page-topbar .topbar-user .dropdown-item:focus * { color: #111111 !important; } /* ── Active tab gold color ── */ /* Overrides the scoped .tab-link.active[data-v-72ebb6ab] blue color */ .tab-link.active, [class*="tab-link"].active, a.tab-link.active, button.tab-link.active { background: #C9A84C !important; background-color: #C9A84C !important; border-color: #C9A84C !important; color: #ffffff !important; } .tab-link.active:hover, [class*="tab-link"].active:hover { background: #b8922e !important; border-color: #b8922e !important; color: #ffffff !important; } /* Force black text on header-item, nav-link, btn inside topbar */ /* ── Container top padding — spacing below navbar ── */ .container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm { padding-top: 1.5rem !important; } /* ── Topbar interactive elements: black default, white on hover ── */ .header-item, #page-topbar .nav-link, #page-topbar .btn, .topbar-head-dropdown .btn, [data-topbar] .header-item, [data-topbar="dark"] .header-item, [data-topbar="dark"] #page-topbar .nav-link { color: #1a1a1a !important; background: transparent !important; } .header-item i, #page-topbar .nav-link i, #page-topbar .btn i, .topbar-head-dropdown .btn i { color: #ffffff !important; } .header-item:hover, .header-item:hover i, #page-topbar .nav-link:hover, #page-topbar .nav-link:hover i, #page-topbar .btn:hover, #page-topbar .btn:hover i, .topbar-head-dropdown .btn:hover, .topbar-head-dropdown .btn:hover i { color: #ffffff !important; } /* ── Notification & topbar dropdowns: restore dark text inside panels ── */ /* The white heading rule above must not affect dropdown panel content */ #page-topbar .topbar-head-dropdown .dropdown-menu h1, #page-topbar .topbar-head-dropdown .dropdown-menu h2, #page-topbar .topbar-head-dropdown .dropdown-menu h3, #page-topbar .topbar-head-dropdown .dropdown-menu h4, #page-topbar .topbar-head-dropdown .dropdown-menu h5, #page-topbar .topbar-head-dropdown .dropdown-menu h6, #page-topbar .topbar-head-dropdown .dropdown-menu .card-title, #page-topbar .topbar-head-dropdown .dropdown-menu .page-title, #page-topbar .topbar-head-dropdown .dropdown-menu .modal-title, #page-topbar .topbar-head-dropdown .dropdown-menu .fw-bold, #page-topbar .topbar-head-dropdown .dropdown-menu .fw-semibold, #page-topbar .topbar-head-dropdown .dropdown-menu p, #page-topbar .topbar-head-dropdown .dropdown-menu span, #page-topbar .topbar-head-dropdown .dropdown-menu small, #page-topbar .topbar-head-dropdown .dropdown-menu .text-muted, .notification-item h6, .notification-item .fw-semibold, .notification-item .fw-bold, .topbar-head-dropdown .dropdown-menu .fw-semibold, .topbar-head-dropdown .dropdown-menu .fw-bold, .topbar-head-dropdown .dropdown-menu h6 { color: #1a1a1a !important; } /* Notification panel title "Notifications" */ #page-topbar .topbar-head-dropdown .dropdown-menu .p-3 h6, #page-topbar .topbar-head-dropdown .dropdown-menu > div > h6, .notifications-title, #page-header-notifications-dropdown ~ .dropdown-menu h6, #page-header-notifications-dropdown ~ .dropdown-menu .fw-semibold { color: #1a1a1a !important; } /* Topbar layout: keep the center nav actually centered and resilient on tablets */ #page-topbar .navbar-header { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; max-width: 100%; overflow: visible !important; } #page-topbar .topbar-nav-center { position: relative !important; left: auto !important; transform: none !important; width: auto; max-width: min(100%, max-content); min-width: 0; display: flex; justify-content: center; align-items: center; pointer-events: auto !important; overflow: visible !important; z-index: 6100 !important; scrollbar-width: none; justify-self: center; } #page-topbar .topbar-nav-center::-webkit-scrollbar { display: none; } #page-topbar .topbar-nav-center > * { flex: 0 1 auto; min-width: 0; position: relative; z-index: inherit; } #page-topbar .topbar-nav-center .navbar { width: auto; max-width: 100%; justify-content: center; } #page-topbar .top-navbar { width: max-content; max-width: 100%; position: relative; z-index: 6150 !important; overflow: visible !important; } #page-topbar .topbar-main-actions { display: flex; align-items: center; flex: 0 0 auto; width: auto; min-width: 0; max-width: 100%; margin-left: auto; padding-right: 0; justify-content: flex-end; justify-self: end; overflow: visible !important; } /* Keep utility dropdowns anchored inside the viewport instead of Popper translating them offscreen */ #page-topbar .topbar-utility-actions .dropdown, #page-topbar .topbar-utility-actions .btn-group, #page-topbar .topbar-utility-actions .topbar-user { position: relative !important; } #page-topbar .topbar-utility-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex: 0 0 auto; width: auto; min-width: 0; max-width: 100%; margin-left: auto; overflow: visible !important; } #page-topbar .topbar-utility-actions .dropdown-menu, #page-topbar .topbar-utility-actions .dropdown-menu-end, #page-topbar .topbar-utility-actions .notifications-menu { left: auto !important; right: 0 !important; top: calc(100% + 8px) !important; transform: none !important; inset: auto 0 auto auto !important; max-width: min(420px, calc(100vw - 24px)) !important; } #page-topbar .topbar-utility-actions .notifications-menu { width: min(360px, calc(100vw - 24px)) !important; } @media (max-width: 1199.98px) { #page-topbar .topbar-nav-center { justify-content: flex-start; } } @media (max-width: 991.98px) { #page-topbar .navbar-header { grid-template-columns: auto 1fr; } #page-topbar .topbar-main-actions { justify-self: end; } #page-topbar .topbar-nav-center { grid-column: 1 / -1; justify-content: flex-start; padding-bottom: 2px; } } @media (max-width: 575.98px) { #page-topbar .topbar-nav-center { display: none; } } /* Final topbar viewport containment override */ html body #page-topbar .layout-width { width: 100% !important; max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; margin-left: 0 !important; margin-right: 0 !important; overflow: visible !important; } html body #page-topbar .navbar-header { grid-template-columns: auto minmax(0, 1fr) auto !important; } html body #page-topbar .topbar-nav-center { width: auto !important; max-width: calc(100vw - 430px) !important; justify-self: center !important; } html body #page-topbar .topbar-main-actions, html body #page-topbar .topbar-utility-actions { width: auto !important; max-width: none !important; margin-left: auto !important; transform: none !important; } html body #page-topbar .topbar-main-actions { justify-self: end !important; padding-right: 240px !important; } html body #page-topbar .topbar-utility-actions { justify-content: flex-end !important; align-items: center !important; gap: 10px !important; } html body #page-topbar .light-dark-mode, html body .btn.light-dark-mode { display: none !important; } html body #page-topbar .location-dropdown { margin-right: 8px !important; } html body #page-topbar .service-location { margin-left: 6px !important; max-width: 72px !important; } html body #page-topbar .topbar-utility-actions .dropdown, html body #page-topbar .topbar-utility-actions .btn-group, html body #page-topbar .topbar-utility-actions .topbar-user { position: relative !important; } html body #page-topbar .topbar-utility-actions .dropdown-menu, html body #page-topbar .topbar-utility-actions .dropdown-menu-end, html body #page-topbar .topbar-utility-actions .notifications-menu { left: auto !important; right: 0 !important; top: calc(100% + 8px) !important; inset: auto 0 auto auto !important; transform: none !important; } html body #page-topbar .topbar-user .dropdown-toggle::after, html body #page-topbar .topbar-user .btn.dropdown-toggle::after { display: none !important; } html body #page-topbar .topbar-user .dropdown-menu, html body #page-topbar .topbar-user .dropdown-menu-end { left: auto !important; right: 0 !important; top: calc(100% + 16px) !important; inset: auto 0 auto auto !important; transform: none !important; margin-top: 8px !important; } html body .offcanvas, html body .offcanvas.show, html body .offcanvas.showing { z-index: 2147483000 !important; } html body .offcanvas-backdrop { z-index: 2147482990 !important; } html body .offcanvas.offcanvas-end { top: 0 !important; } html body .nav-tabs-custom .nav-link.active, html body .nav-tabs .nav-link.active, html body .status-filter.active, html body .filter-group .active { color: #1c1c1c !important; background: #fff3cd !important; border-color: #d8b04c !important; } html, body, #app, #layout-wrapper, .main-content, .page-content { max-width: 100vw !important; overflow-x: hidden !important; } html body #page-topbar, html body #page-topbar .layout-width, html body #page-topbar .navbar-header { max-width: 100vw !important; overflow-x: clip !important; } html body #page-topbar .topbar-nav-center, html body #page-topbar .top-navbar { max-width: calc(100vw - 430px) !important; } /* JVP utility section only */