/* ============================================================================
BRAWN CLOUD โ Modern CWP Theme Override v2.0
Premium Dark UI ยท Gold palette (#F5C135 / #B3671C)
Modernized layout, enhanced depth, anti-white-flash protection
============================================================================ */
/* ==========================================================================
๐จ CRITICAL: Anti-White-Flash โ loaded FIRST to prevent FOUC
These high-specificity rules ensure no white backgrounds appear
while the rest of CSS parses. Do NOT move these below other rules.
========================================================================== */
html,
body,
body.gray-bg,
#wrapper,
#page-wrapper,
.wrapper-content,
.ibox,
.ibox-content,
.ibox-title,
.tab-content,
.tab-pane,
.panel,
.panel-body,
.panel-heading,
.panel-footer,
.modal-content,
.modal-body,
.modal-footer,
.well,
.jumbotron,
.faq-item,
.project-manager .tag-list li a,
.white-bg,
.dashboard-header {
background-color: #141824 !important;
color: rgba(255, 255, 255, 0.92) !important;
}
/* Google Fonts loaded in index.html for non-blocking performance */
/* ==========================================================================
CSS Custom Properties (Design Tokens)
========================================================================== */
:root {
--bc-gold: #F5C135;
--bc-gold-dark: #B3671C;
--bc-gold-light: #fceeb5;
--bc-gold-accent: #e8a817;
--bc-gold-glow: rgba(245, 193, 53, 0.15);
--bc-gold-glow-strong: rgba(245, 193, 53, 0.3);
--bc-dark: #1a1f2e;
--bc-dark-deeper: #0f1220;
--bc-dark-card: #1e2538;
--bc-dark-border: rgba(255, 255, 255, 0.07);
--bc-cyan: #22d3ee;
--bc-teal: #14b8a6;
/* Dark page background โ matches sidebar */
--bc-page-bg: #141824;
--bc-card-bg: #1e2538;
--bc-card-border: rgba(255, 255, 255, 0.07);
--bc-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
--bc-card-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(245, 193, 53, 0.1);
/* Layered surfaces for depth */
--bc-surface-raised: #212840;
--bc-surface-overlay: rgba(255, 255, 255, 0.025);
--bc-text-primary: rgba(255, 255, 255, 0.92);
--bc-text-secondary: rgba(255, 255, 255, 0.55);
--bc-text-muted: rgba(255, 255, 255, 0.35);
--bc-radius-sm: 8px;
--bc-radius-md: 12px;
--bc-radius-lg: 16px;
--bc-radius-xl: 20px;
--bc-radius-2xl: 24px;
--bc-radius-pill: 999px;
--bc-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
--bc-transition-fast: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
--bc-transition-slow: color 0.35s ease, background-color 0.35s ease, opacity 0.35s ease;
--bc-emerald: #10b981;
--bc-emerald-dark: #059669;
--bc-red: #ef4444;
--bc-red-dark: #dc2626;
--bc-blue: #3b82f6;
--bc-blue-dark: #2563eb;
--bc-orange: #f59e0b;
--bc-indigo: #6366f1;
}
/* ==========================================================================
Global Typography & Reset
========================================================================== */
body {
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
text-rendering: optimizeLegibility !important;
letter-spacing: -0.01em !important;
color: var(--bc-text-primary) !important;
background-color: var(--bc-dark-deeper) !important;
}
/* Fix for icons turning into squares - Restore FontAwesome/Glyphicons */
.fa,
.fas,
.far,
.fab,
.glyphicon,
[class^="icon-"],
[class*=" icon-"] {
font-family: 'FontAwesome', 'Glyphicons Halflings', sans-serif !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Inter', system-ui, sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
color: var(--bc-text-primary) !important;
}
p,
span,
li,
td,
th,
label,
a,
div {
font-family: 'Inter', system-ui, sans-serif !important;
}
/* Ensure icons inside text elements don't get overridden */
p .fa,
span .fa,
li .fa,
a .fa,
div .fa,
p .glyphicon,
span .glyphicon,
li .glyphicon,
a .glyphicon,
div .glyphicon {
font-family: 'FontAwesome', 'Glyphicons Halflings', sans-serif !important;
}
/* ==========================================================================
Page Background & Layout
========================================================================== */
.gray-bg,
.bg-muted {
background-color: var(--bc-page-bg) !important;
}
#page-wrapper {
background-color: #141824 !important;
min-height: 100vh !important;
}
body.fixed-nav #wrapper #page-wrapper {
background-color: #141824 !important;
}
.wrapper-content {
padding: 20px 25px !important;
}
/* ==========================================================================
Sidebar (Left Navigation) โ Dark Premium
High specificity selectors to beat original.css
========================================================================== */
/* Sidebar container โ rounded modern look */
.navbar-default.navbar-static-side,
body .navbar-default.navbar-static-side {
background: linear-gradient(180deg, var(--bc-dark) 0%, var(--bc-dark-deeper) 100%) !important;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25), inset -1px 0 0 rgba(245, 193, 53, 0.06) !important;
border-right: 1px solid rgba(245, 193, 53, 0.08) !important;
border-radius: 0 var(--bc-radius-xl) var(--bc-radius-xl) 0 !important;
overflow: visible !important;
}
body.mini-navbar .navbar-static-side {
background: linear-gradient(180deg, var(--bc-dark) 0%, var(--bc-dark-deeper) 100%) !important;
border-radius: 0 var(--bc-radius-lg) var(--bc-radius-lg) 0 !important;
}
/* Sidebar nav links โ high specificity */
.navbar-default .nav>li>a,
body .navbar-default .nav>li>a,
.navbar-static-side .nav>li>a {
color: rgba(255, 255, 255, 0.65) !important;
font-weight: 500 !important;
font-size: 13px !important;
transition: var(--bc-transition) !important;
border-left: 3px solid transparent !important;
margin: 3px 10px !important;
border-radius: var(--bc-radius-md) !important;
padding: 11px 16px !important;
background: transparent !important;
position: relative !important;
}
/* Sidebar nav hover โ must beat .navbar-default .nav > li > a:hover */
.navbar-default .nav>li>a:hover,
.navbar-default .nav>li>a:focus,
body .navbar-default .nav>li>a:hover,
body .navbar-default .nav>li>a:focus {
background-color: rgba(255, 255, 255, 0.06) !important;
color: #ffffff !important;
border-left-color: var(--bc-gold) !important;
}
/* Sidebar active state โ must beat .nav > li.active */
.navbar-static-side .nav>li.active,
body .navbar-static-side .nav>li.active {
border-left: none !important;
background: transparent !important;
}
.navbar-static-side .nav>li.active>a,
body .navbar-static-side .nav>li.active>a,
.navbar-default .nav>li.active>a {
background: linear-gradient(90deg, rgba(245, 193, 53, 0.12) 0%, rgba(245, 193, 53, 0.03) 100%) !important;
color: var(--bc-gold) !important;
border-left: 3px solid var(--bc-gold) !important;
font-weight: 600 !important;
box-shadow: inset 0 0 20px rgba(245, 193, 53, 0.04) !important;
}
.navbar-static-side .nav>li.active2 {
background: transparent !important;
}
/* Sidebar icons */
.navbar-static-side .nav>li>a i,
.navbar-default .nav>li>a i {
color: rgba(255, 255, 255, 0.4) !important;
transition: var(--bc-transition-fast) !important;
}
.navbar-static-side .nav>li>a:hover i,
.navbar-static-side .nav>li.active>a i,
.navbar-default .nav>li>a:hover i,
.navbar-default .nav>li.active>a i {
color: var(--bc-gold) !important;
}
/* Sidebar arrow icons โ fix vertical alignment */
.navbar-default .nav>li>a,
.navbar-static-side .nav>li>a,
#side-menu>li>a {
position: relative !important;
display: flex !important;
align-items: center !important;
}
.arrow,
.fa.arrow,
span.fa.arrow {
float: none !important;
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 14px !important;
color: rgba(255, 255, 255, 0.3) !important;
transition: transform 0.25s ease, color 0.2s ease !important;
line-height: 1 !important;
}
/* When menu is open, arrow rotates */
.active>a>.fa.arrow,
li.active>a>.fa.arrow {
color: var(--bc-gold) !important;
}
/* Nav label should not compete with arrow */
.nav-label {
flex: 1 !important;
padding-right: 20px !important;
}
/* Footer โ BrawnCloud branding */
.footer {
background: linear-gradient(180deg, rgba(20, 24, 36, 0) 0%, rgba(20, 24, 36, 0.8) 100%) !important;
border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
padding: 12px 20px !important;
text-align: center !important;
}
.footer #footer_content {
color: rgba(255, 255, 255, 0.35) !important;
font-size: 12px !important;
}
.footer #footer_content a {
color: rgba(245, 193, 53, 0.6) !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.footer #footer_content a:hover {
color: var(--bc-gold) !important;
}
/* Sidebar submenu โ use #side-menu ID for max specificity
MUST use SOLID opaque background to avoid transparency issues */
#side-menu ul.nav-second-level,
#side-menu .nav-second-level,
body #side-menu ul.nav-second-level,
body #side-menu .nav-second-level,
body ul.nav-second-level,
body .nav-second-level,
ul.nav-second-level,
.nav-second-level,
.nav-second-level.collapse,
.nav-second-level.collapse.in,
.nav-second-level.collapsing,
.canvas-menu.mini-navbar .nav-second-level,
body .navbar-default .nav>li>ul.nav-second-level {
background: #151a2a !important;
background-color: #151a2a !important;
border-left: 2px solid rgba(245, 193, 53, 0.15) !important;
margin: 4px 10px 4px 20px !important;
padding: 6px 0 !important;
border-radius: var(--bc-radius-md) !important;
}
/* Mini-navbar flyout โ MUST use #side-menu for specificity over generic rule */
body.mini-navbar #side-menu .nav-second-level,
body.mini-navbar #side-menu ul.nav-second-level,
body.mini-navbar .nav .nav-second-level,
body:not(.fixed-sidebar):not(.canvas-menu).mini-navbar #side-menu li:hover>.nav-second-level,
body:not(.fixed-sidebar):not(.canvas-menu).mini-navbar .nav li:hover>.nav-second-level,
body:not(.fixed-sidebar):not(.canvas-menu).mini-navbar .nav li:focus>.nav-second-level {
background: #1a1f2e !important;
background-color: #1a1f2e !important;
box-shadow: 6px 4px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(245, 193, 53, 0.1) !important;
border-radius: 0 var(--bc-radius-md) var(--bc-radius-md) 0 !important;
border-left: 2px solid rgba(245, 193, 53, 0.25) !important;
margin: 0 0 0 0 !important;
padding: 10px 8px 10px 8px !important;
position: absolute !important;
left: 70px !important;
top: 0 !important;
min-width: 180px !important;
z-index: 9999 !important;
}
/* Hover bridge โ transparent area connecting icon to flyout submenu */
body.mini-navbar #side-menu>li,
body.mini-navbar .nav>li {
position: relative !important;
}
body.mini-navbar #side-menu>li>.nav-second-level::before,
body.mini-navbar .nav>li>.nav-second-level::before {
content: '' !important;
position: absolute !important;
left: -30px !important;
top: 0 !important;
width: 30px !important;
height: 100% !important;
background: transparent !important;
z-index: 9998 !important;
}
/* Submenu items โ high specificity with #side-menu */
#side-menu .nav-second-level li a,
#side-menu .nav-third-level li a,
body .nav-second-level li a,
body .nav-third-level li a,
.navbar-default .nav .nav-second-level li a,
.nav-second-level li a,
.nav-third-level li a {
color: rgba(255, 255, 255, 0.6) !important;
font-size: 12.5px !important;
padding: 9px 14px 9px 34px !important;
transition: var(--bc-transition-fast) !important;
border-radius: var(--bc-radius-sm) !important;
margin: 2px 6px !important;
background: transparent !important;
font-weight: 400 !important;
border-left: none !important;
letter-spacing: 0 !important;
}
#side-menu .nav-second-level li a:hover,
#side-menu .nav-third-level li a:hover,
body .nav-second-level li a:hover,
body .nav-third-level li a:hover,
.navbar-default .nav .nav-second-level li a:hover,
.nav-second-level li a:hover,
.nav-third-level li a:hover {
color: var(--bc-gold) !important;
background: rgba(245, 193, 53, 0.08) !important;
border-left-color: var(--bc-gold) !important;
}
/* Active submenu item */
#side-menu .nav.nav-second-level>li.active>a,
#side-menu .nav-second-level li.active>a,
body .nav.nav-second-level>li.active>a,
body .nav-second-level li.active>a,
.nav.nav-second-level>li.active>a,
.nav-second-level li.active>a {
color: var(--bc-gold) !important;
font-weight: 600 !important;
border-left: 2px solid var(--bc-gold) !important;
background: rgba(245, 193, 53, 0.06) !important;
}
#side-menu .nav.nav-second-level>li.active,
.nav.nav-second-level>li.active {
border: none !important;
background: transparent !important;
}
/* Submenu dividers */
#side-menu .nav-second-level li,
#side-menu .nav-third-level li,
.nav-second-level li,
.nav-third-level li {
border-bottom: none !important;
}
/* Mini-navbar submenu flyout links */
body.mini-navbar .navbar-default .nav>li>.nav-second-level li a,
body.mini-navbar #side-menu>li>.nav-second-level li a {
color: rgba(255, 255, 255, 0.7) !important;
font-size: 12.5px !important;
border-radius: var(--bc-radius-sm) !important;
padding: 9px 14px !important;
margin: 2px 4px !important;
border-left: none !important;
}
body.mini-navbar .navbar-default .nav>li>.nav-second-level li a:hover,
body.mini-navbar #side-menu>li>.nav-second-level li a:hover {
color: var(--bc-gold) !important;
background: rgba(245, 193, 53, 0.1) !important;
}
.mini-navbar .nav-second-level li a {
padding: 9px 14px !important;
}
/* Fixed sidebar mini-navbar submenu */
body.fixed-sidebar.mini-navbar .navbar-default .nav>li>.nav-second-level li a,
body.canvas-menu.mini-navbar .navbar-default .nav>li>.nav-second-level li a {
color: rgba(255, 255, 255, 0.7) !important;
padding: 9px 14px 9px 24px !important;
}
body.fixed-sidebar.mini-navbar .navbar-default .nav>li>.nav-second-level li a:hover,
body.canvas-menu.mini-navbar .navbar-default .nav>li>.nav-second-level li a:hover {
color: var(--bc-gold) !important;
background: rgba(245, 193, 53, 0.1) !important;
}
.fixed-sidebar.mini-navbar #side-menu .nav-second-level,
.canvas-menu.mini-navbar #side-menu .nav-second-level,
.fixed-sidebar.mini-navbar .nav-second-level,
.canvas-menu.mini-navbar .nav-second-level {
background: #1a1f2e !important;
background-color: #1a1f2e !important;
border: 1px solid rgba(245, 193, 53, 0.1) !important;
border-radius: var(--bc-radius-md) !important;
box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.5) !important;
position: relative !important;
left: 0 !important;
margin: 0 !important;
padding: 6px 4px !important;
}
.fixed-sidebar.mini-navbar .nav-second-level li a,
.canvas-menu.mini-navbar .nav-second-level li a {
color: rgba(255, 255, 255, 0.7) !important;
}
/* Sidebar profile/logo area โ must beat .nav-header bg */
.nav-header,
.pace-done .nav-header,
body .nav-header {
padding: 25px 20px !important;
background-color: transparent !important;
background-image: none !important;
}
body.mini-navbar .nav-header {
background-color: transparent !important;
background-image: none !important;
}
.nav-header a {
color: rgba(255, 255, 255, 0.85) !important;
}
.nav-header .text-muted {
color: rgba(255, 255, 255, 0.4) !important;
}
/* Logo element */
.logo-element {
color: var(--bc-gold) !important;
}
/* Sidebar separator */
.sidebar-collapse .nav li.divider {
border-top: 1px solid var(--bc-dark-border) !important;
}
/* Sidebar special links */
.navbar-default .special_link a {
background: linear-gradient(135deg, var(--bc-gold) 0%, var(--bc-gold-dark) 100%) !important;
color: #000 !important;
border-radius: var(--bc-radius-sm) !important;
}
.navbar-default .special_link a:hover {
background: linear-gradient(135deg, #f7cc4f 0%, #c97a22 100%) !important;
color: #000 !important;
}
/* Sidebar label/badge counts */
.nav>li>a .label,
.nav>li>a .badge {
background: var(--bc-gold) !important;
color: #000 !important;
font-size: 10px !important;
border-radius: var(--bc-radius-pill) !important;
padding: 3px 7px !important;
font-weight: 700 !important;
}
/* ==========================================================================
Top Navbar โ Dark Premium with Gold Accent
========================================================================== */
.navbar-fixed-top,
.navbar-static-top,
body .navbar-static-top,
body .navbar-fixed-top {
background: rgb(12, 15, 28) !important;
/* backdrop-filter removed โ very expensive GPU op */
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
border-bottom: 1px solid rgba(245, 193, 53, 0.3) !important;
margin-bottom: 0 !important;
z-index: 100;
}
/* Top nav hamburger button */
.minimalize-styl-2,
.navbar-header .navbar-minimalize {
border-radius: var(--bc-radius-md) !important;
background: linear-gradient(135deg, var(--bc-gold) 0%, var(--bc-gold-dark) 100%) !important;
border: none !important;
color: #000 !important;
font-weight: 700 !important;
transition: var(--bc-transition) !important;
box-shadow: 0 4px 12px rgba(245, 193, 53, 0.2) !important;
padding: 10px 18px !important;
}
.minimalize-styl-2:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(245, 193, 53, 0.3) !important;
}
/* Top nav links */
.nav.navbar-top-links>li {
display: inline-block;
}
.nav.navbar-top-links>li>span,
.nav.navbar-top-links>li>a,
.navbar-top-links li a {
color: rgba(255, 255, 255, 0.75) !important;
transition: var(--bc-transition-fast) !important;
border-radius: var(--bc-radius-sm) !important;
padding: 18px 12px !important;
margin: 0 !important;
display: flex;
align-items: center;
border: none !important;
background: transparent;
}
.nav.navbar-top-links>li>a:hover,
.nav.navbar-top-links>li>a:focus {
background-color: rgba(245, 193, 53, 0.08) !important;
color: var(--bc-gold) !important;
transform: translateY(-1px);
}
@media (max-width: 768px) {
/* Better alignment for utility icons on mobile - legacy cleanup */
.nav.navbar-top-links li {
display: inline-block !important;
vertical-align: middle !important;
}
}
/* Ensure images (flags) in top nav are perfectly centered and high-quality */
.nav.navbar-top-links>li>a img.flag-img,
.navbar-top-links li a img.flag-img {
margin: 0 !important;
display: inline-block !important;
height: 14px !important;
width: auto !important;
border-radius: 2px !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) !important;
transition: transform 0.2s ease !important;
vertical-align: middle !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.nav.navbar-top-links>li>a:hover img.flag-img {
transform: scale(1.1);
}
.flag-img-list {
margin-right: 10px !important;
border-radius: 2px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
vertical-align: middle !important;
width: 20px !important;
height: auto !important;
}
/* ==========================================================================
Premium Language Dropdown (Scrollable)
========================================================================== */
.lang-items-wrapper {
background: #1a1f2e !important;
border: 1px solid rgba(245, 193, 53, 0.2) !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
border-radius: 12px !important;
padding: 8px 0 !important;
min-width: 220px !important;
margin-top: 12px !important;
overflow: hidden !important;
}
.lang-scroll-container {
max-height: 350px !important;
overflow-y: auto !important;
padding: 0 8px !important;
}
/* Custom Premium Scrollbar */
.lang-scroll-container::-webkit-scrollbar {
width: 6px;
}
.lang-scroll-container::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.02);
border-radius: 10px;
}
.lang-scroll-container::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, var(--bc-gold-dark), var(--bc-gold));
border-radius: 10px;
}
.li-item-lang {
border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
padding: 0 !important;
list-style: none !important;
}
.li-item-lang:last-child {
border-bottom: none !important;
}
.radio-lang {
margin: 4px 0 !important;
position: relative;
border-radius: 8px !important;
transition: all 0.2s ease !important;
}
.radio-lang:hover {
background: rgba(255, 255, 255, 0.05) !important;
}
/* Custom styled radio for language items */
.radio-lang input[type="radio"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
.lang-label-card {
display: flex !important;
align-items: center !important;
cursor: pointer !important;
padding: 10px 14px !important;
margin: 0 !important;
width: 100%;
font-size: 13.5px !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.75) !important;
transition: all 0.2s ease !important;
}
/* Custom Checkmark/Radio Dot */
.lang-label-card::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid rgba(255, 255, 255, 0.15);
border-radius: 50%;
margin-right: 12px;
transition: all 0.2s ease;
flex-shrink: 0;
}
.radio-lang input[type="radio"]:checked+.lang-label-card {
color: var(--bc-gold) !important;
background: rgba(245, 193, 53, 0.08) !important;
}
.radio-lang input[type="radio"]:checked+.lang-label-card::before {
border-color: var(--bc-gold);
border-width: 4px;
}
.lang-name {
flex: 1;
}
@media (max-width: 768px) {
.lang-items-wrapper {
min-width: 200px !important;
position: absolute !important;
right: 5px !important;
left: auto !important;
top: 100% !important;
}
}
/* Top nav right links */
.nav.navbar-right>li>a {
color: rgba(255, 255, 255, 0.75) !important;
}
/* Search bar */
.navbar-form-custom {
float: left;
height: 60px;
padding: 10px 15px;
width: 250px;
display: flex;
align-items: center;
}
.navbar-form-custom .form-group {
width: 100%;
margin-bottom: 0;
}
.navbar-form-custom .form-control {
border: none !important;
background: rgba(255, 255, 255, 0.06) !important;
box-shadow: none !important;
font-weight: 500 !important;
color: #fff !important;
font-size: 14px !important;
border-radius: var(--bc-radius-pill) !important;
padding: 8px 16px !important;
width: 100% !important;
}
.navbar-form-custom .form-control::placeholder {
color: rgba(255, 255, 255, 0.4) !important;
}
/* Top nav count badges */
.count-info .label {
background: var(--bc-red) !important;
border-radius: var(--bc-radius-pill) !important;
}
/* Row border below top nav */
.row.border-bottom {
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
/* Welcome message */
.welcome-message {
color: rgba(255, 255, 255, 0.8) !important;
font-weight: 500 !important;
}
/* Top navbar badge spacing โ more gap between username and labels */
.nav.navbar-top-links>li>span.welcome-message {
margin-right: 8px !important;
}
.nav.navbar-top-links>li .label,
.navbar-top-links li .label,
.navbar-top-links li span.label {
margin-left: 6px !important;
margin-right: 6px !important;
padding: 5px 14px !important;
font-size: 10.5px !important;
border-radius: 8px !important;
letter-spacing: 0.04em !important;
font-weight: 700 !important;
text-transform: uppercase !important;
vertical-align: middle !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
border: none !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 6px;
}
/* Glass effect for labels */
.nav.navbar-top-links>li .label::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
transform: skewX(-25deg);
transition: none;
}
.nav.navbar-top-links>li:hover .label::after {
left: 150%;
transition: left 0.6s ease-in-out;
}
/* Premium Badge Colors โ Reseller/Unlocked */
.label-warning,
.label-primary {
background: linear-gradient(135deg, #f5c135 0%, #d4a51c 100%) !important;
color: #1a1f2e !important;
text-shadow: none !important;
}
.label-warning:hover,
.label-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(245, 193, 53, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}
/* Success Badge (NEW) */
.label-success {
background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}
/* Add a subtle separator before utility icons on Desktop only */
@media (min-width: 769px) {
.nav.navbar-top-links>li.dropdown:first-of-type {
margin-left: 15px !important;
padding-left: 15px !important;
border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}
}
.nav.navbar-top-links>li>a .label.float-right,
.navbar-top-links li a .label.float-right {
margin-left: 0 !important;
}
/* Spacing between top navbar items */
.nav.navbar-top-links.navbar-right>li {
margin-left: 4px !important;
margin-right: 4px !important;
}
/* User icon and name alignment */
.welcome-message i {
margin-right: 6px !important;
color: var(--bc-gold) !important;
opacity: 0.9;
}
/* ==========================================================================
SIDEBAR & NAVIGATION FIXES โ Dark Premium
========================================================================== */
/* Fix transparent flyout submenus / dropdowns โ SOLID OPAQUE */
.nav-second-level,
body .nav-second-level,
#side-menu .nav-second-level {
background: #151a2a !important;
background-color: #151a2a !important;
}
.nav-second-level li a {
color: rgba(255, 255, 255, 0.7) !important;
}
.nav-second-level li a:hover,
.nav-second-level li.active a {
background-color: rgba(245, 193, 53, 0.08) !important;
color: var(--bc-gold) !important;
}
/* Fix tiny logo when navbar is collapsed / mini */
.logo-element {
padding: 10px 5px !important;
}
.logo-element img {
max-height: 60px !important;
width: auto !important;
max-width: 100% !important;
transform: scale(1.1);
/* Give it a little extra visual punch */
}
/* ==========================================================================
Cards (iBox) โ Dark Premium
========================================================================== */
.ibox {
clear: both;
margin-bottom: 24px !important;
margin-top: 0;
padding: 0;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
border-radius: var(--bc-radius-lg) !important;
background: var(--bc-card-bg) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease !important;
position: relative;
overflow: hidden !important;
}
/* Subtle hover glow for the whole panel */
.ibox:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(245, 193, 53, 0.15) !important;
border-color: rgba(245, 193, 53, 0.12) !important;
transform: translateY(-3px);
}
.ibox-title {
background: rgba(255, 255, 255, 0.03) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
color: var(--bc-text-primary) !important;
margin-bottom: 0;
padding: 18px 22px 14px 22px !important;
min-height: 52px;
position: relative;
clear: both;
border-top-left-radius: var(--bc-radius-lg) !important;
border-top-right-radius: var(--bc-radius-lg) !important;
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: -0.01em;
}
/* Gold accent bar on card title */
.ibox-title::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--bc-gold), var(--bc-gold-dark), transparent);
border-radius: var(--bc-radius-lg) var(--bc-radius-lg) 0 0;
opacity: 0.4;
transition: var(--bc-transition) !important;
}
.ibox:hover .ibox-title::before {
opacity: 1;
}
.ibox-title h5 {
font-size: 13px !important;
font-weight: 700 !important;
color: var(--bc-gold) !important;
text-transform: uppercase;
letter-spacing: 0.06em;
display: flex;
align-items: center;
}
.ibox-title h5 i {
margin-right: 8px;
font-size: 1.1em;
}
.ibox-content {
background-color: transparent !important;
color: var(--bc-text-primary) !important;
padding: 20px 22px 22px 22px !important;
border-color: transparent !important;
border-style: none !important;
border-width: 0 !important;
border-bottom-left-radius: var(--bc-radius-lg) !important;
border-bottom-right-radius: var(--bc-radius-lg) !important;
}
/* ibox tools (minimize, close icons) */
.ibox-tools a {
color: var(--bc-text-muted) !important;
transition: var(--bc-transition-fast) !important;
}
.ibox-tools a:hover {
color: var(--bc-gold) !important;
}
/* ==========================================================================
Buttons โ Gold Gradient Premium
========================================================================== */
.btn {
border-radius: var(--bc-radius-md) !important;
font-weight: 600 !important;
font-size: 13px !important;
padding: 9px 18px !important;
transition: var(--bc-transition) !important;
text-transform: none !important;
border: none !important;
letter-spacing: 0 !important;
position: relative;
overflow: hidden;
}
.btn:active {
transform: scale(0.97) !important;
}
/* Primary โ Gold Gradient */
.btn-primary,
.btn-primary.btn-outline {
background: linear-gradient(135deg, var(--bc-gold) 0%, var(--bc-gold-dark) 100%) !important;
color: #000 !important;
box-shadow: 0 2px 6px rgba(245, 193, 53, 0.3) !important;
}
.btn-primary:hover,
.btn-primary:focus {
background: linear-gradient(135deg, #f7cc4f 0%, #c97a22 100%) !important;
box-shadow: 0 6px 16px rgba(245, 193, 53, 0.4) !important;
transform: translateY(-1px);
color: #000 !important;
}
/* Success โ Emerald */
.btn-success {
background: linear-gradient(135deg, var(--bc-emerald) 0%, var(--bc-emerald-dark) 100%) !important;
color: #fff !important;
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
}
.btn-success:hover,
.btn-success:focus {
box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35) !important;
transform: translateY(-1px);
color: #fff !important;
}
/* Danger โ Red */
.btn-danger {
background: linear-gradient(135deg, var(--bc-red) 0%, var(--bc-red-dark) 100%) !important;
color: #fff !important;
box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25) !important;
}
.btn-danger:hover,
.btn-danger:focus {
box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35) !important;
transform: translateY(-1px);
color: #fff !important;
}
/* Warning โ Orange */
.btn-warning {
background: linear-gradient(135deg, var(--bc-orange) 0%, #d97706 100%) !important;
color: #000 !important;
box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25) !important;
}
.btn-warning:hover,
.btn-warning:focus {
box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35) !important;
transform: translateY(-1px);
}
/* Info โ Blue */
.btn-info {
background: linear-gradient(135deg, var(--bc-blue) 0%, var(--bc-blue-dark) 100%) !important;
color: #fff !important;
box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25) !important;
}
.btn-info:hover,
.btn-info:focus {
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35) !important;
transform: translateY(-1px);
color: #fff !important;
}
/* White / Default */
.btn-white,
.btn-default {
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
color: var(--bc-text-primary) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}
.btn-white:hover,
.btn-default:hover {
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(245, 193, 53, 0.3) !important;
color: var(--bc-gold) !important;
box-shadow: 0 2px 8px rgba(245, 193, 53, 0.15) !important;
}
/* Small buttons */
.btn-xs,
.btn-sm {
padding: 5px 12px !important;
font-size: 12px !important;
border-radius: var(--bc-radius-sm) !important;
}
/* ==========================================================================
Form Controls โ Dark Modern with Gold Focus
========================================================================== */
.form-control {
border-radius: var(--bc-radius-md) !important;
border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
padding: 10px 14px !important;
box-shadow: none !important;
background-color: rgba(255, 255, 255, 0.06) !important;
transition: var(--bc-transition) !important;
height: auto !important;
font-size: 13.5px !important;
color: rgba(255, 255, 255, 0.9) !important;
font-weight: 400;
}
.form-control:focus {
background-color: rgba(255, 255, 255, 0.09) !important;
border-color: var(--bc-gold) !important;
box-shadow: 0 0 0 3px var(--bc-gold-glow) !important;
outline: none !important;
color: #fff !important;
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.35) !important;
font-weight: 400;
}
/* Select dropdowns */
select.form-control {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23F5C135' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
padding-right: 32px !important;
}
/* Input groups */
.input-group-addon {
border-radius: var(--bc-radius-md) 0 0 var(--bc-radius-md) !important;
border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
background: rgba(255, 255, 255, 0.08) !important;
color: rgba(255, 255, 255, 0.6) !important;
}
/* ==========================================================================
Tables โ Dark Modern
========================================================================== */
.table {
border-collapse: separate !important;
border-spacing: 0 !important;
color: var(--bc-text-primary) !important;
}
.table>thead>tr>th {
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
color: var(--bc-gold) !important;
font-weight: 700 !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
padding: 12px 14px !important;
background: rgba(255, 255, 255, 0.03) !important;
}
.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
vertical-align: middle !important;
}
.table>tbody>tr>td {
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
padding: 11px 14px !important;
vertical-align: middle !important;
color: var(--bc-text-primary) !important;
font-size: 13px !important;
transition: var(--bc-transition-fast) !important;
}
.table-hover>tbody>tr:hover,
.table-hover>tbody>tr:hover>td,
table.dataTable tbody tr:hover,
table.dataTable tbody tr:hover>td,
table.dataTable tbody tr.even:hover,
table.dataTable tbody tr.even:hover>td,
table.dataTable tbody tr.odd:hover,
table.dataTable tbody tr.odd:hover>td {
background-color: rgba(245, 193, 53, 0.05) !important;
color: var(--bc-text-primary) !important;
}
.table>tbody>tr:hover>td {
background-color: rgba(245, 193, 53, 0.05) !important;
}
/* ==========================================================================
DATATABLES PAGINATION โ Dark Override
========================================================================== */
.dataTables_wrapper .dataTables_paginate .paginate_button {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: var(--bc-text-secondary) !important;
border-radius: var(--bc-radius-sm) !important;
padding: 6px 12px !important;
margin: 0 !important;
display: inline-block !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: rgba(245, 193, 53, 0.1) !important;
border-color: rgba(245, 193, 53, 0.2) !important;
color: var(--bc-gold) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--bc-gold) !important;
border-color: var(--bc-gold) !important;
color: #000 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
background: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
color: rgba(255, 255, 255, 0.3) !important;
cursor: default !important;
}
/* Zebra striping */
.table-striped>tbody>tr:nth-of-type(odd) {
background-color: rgba(255, 255, 255, 0.02) !important;
}
/* Bordered table */
.ibox-content .table-bordered,
.table-bordered {
border: 1px solid rgba(255, 255, 255, 0.07) !important;
border-radius: var(--bc-radius-md) !important;
overflow: hidden;
}
.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>td {
border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
/* DataTables override - Search and Length Fields */
.dataTables_wrapper .dataTables_filter input {
background-color: rgba(255, 255, 255, 0.05) !important;
border-radius: var(--bc-radius-md) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
padding: 6px 12px !important;
transition: var(--bc-transition) !important;
color: var(--bc-text-primary) !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
border-color: var(--bc-gold) !important;
box-shadow: 0 0 0 3px var(--bc-gold-glow) !important;
background-color: rgba(255, 255, 255, 0.08) !important;
}
.dataTables_wrapper .dataTables_length select {
background-color: rgba(255, 255, 255, 0.05) !important;
border-radius: var(--bc-radius-sm) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
padding: 4px 8px !important;
color: var(--bc-text-primary) !important;
}
/* ==========================================================================
Modals โ Premium Overlay
========================================================================== */
.modal-content {
border-radius: var(--bc-radius-2xl) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(245, 193, 53, 0.06) !important;
overflow: hidden !important;
background-color: var(--bc-card-bg) !important;
}
.modal-header {
background: linear-gradient(135deg, rgba(245, 193, 53, 0.1) 0%, rgba(245, 193, 53, 0.03) 100%) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
padding: 18px 24px !important;
color: var(--bc-text-primary) !important;
}
.modal-header .modal-title,
.modal-header h4,
.modal-header h5 {
color: var(--bc-gold) !important;
font-weight: 700 !important;
}
.modal-header .close {
color: rgba(255, 255, 255, 0.7) !important;
opacity: 0.8 !important;
text-shadow: none !important;
transition: var(--bc-transition-fast) !important;
}
.modal-header .close:hover {
opacity: 1 !important;
color: var(--bc-gold) !important;
}
.modal-body {
padding: 24px !important;
background-color: var(--bc-card-bg) !important;
color: var(--bc-text-primary) !important;
}
.modal-footer {
background-color: rgba(0, 0, 0, 0.15) !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
padding: 16px 24px !important;
}
.modal-backdrop.in {
opacity: 0.6 !important;
background-color: rgba(10, 12, 24, 0.8) !important;
}
/* ==========================================================================
Dropdowns โ Refined
========================================================================== */
.dropdown-menu {
border-radius: var(--bc-radius-lg) !important;
border: 1px solid rgba(0, 0, 0, 0.06) !important;
box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.06) !important;
padding: 6px !important;
animation: bc-dropdown-in 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes bc-dropdown-in {
from {
opacity: 0;
transform: translateY(-6px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.dropdown-menu>li>a {
border-radius: var(--bc-radius-sm) !important;
margin: 2px 0 !important;
padding: 8px 14px !important;
transition: var(--bc-transition-fast) !important;
font-size: 13px !important;
font-weight: 500;
}
.dropdown-menu>li>a:hover {
background: rgba(245, 193, 53, 0.08) !important;
color: var(--bc-gold-dark) !important;
}
/* Sidebar dropdown flyout fix */
.nav .open>a,
.nav .open>a:hover,
.nav .open>a:focus {
background: rgba(255, 255, 255, 0.06) !important;
}
/* ==========================================================================
Progress Bars โ Pill Shape with Gold
========================================================================== */
.progress {
border-radius: var(--bc-radius-pill) !important;
background-color: rgba(255, 255, 255, 0.08) !important;
height: 10px !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
overflow: hidden;
}
.progress-bar {
border-radius: var(--bc-radius-pill) !important;
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.progress-bar-success {
background: linear-gradient(90deg, var(--bc-emerald) 0%, var(--bc-emerald-dark) 100%) !important;
}
.progress-bar-warning {
background: linear-gradient(90deg, var(--bc-gold) 0%, var(--bc-gold-dark) 100%) !important;
}
.progress-bar-danger {
background: linear-gradient(90deg, var(--bc-red) 0%, var(--bc-red-dark) 100%) !important;
}
.progress-bar-info {
background: linear-gradient(90deg, var(--bc-blue) 0%, var(--bc-blue-dark) 100%) !important;
}
/* ==========================================================================
Labels & Badges โ Premium Pill
========================================================================== */
.label,
.badge {
border-radius: var(--bc-radius-sm) !important;
padding: 4px 10px !important;
font-weight: 600 !important;
font-size: 11px !important;
letter-spacing: 0.02em;
}
.label-primary,
.badge-primary {
background: linear-gradient(135deg, var(--bc-gold) 0%, var(--bc-gold-dark) 100%) !important;
color: #000 !important;
}
.label-success,
.badge-success {
background: linear-gradient(135deg, var(--bc-emerald) 0%, var(--bc-emerald-dark) 100%) !important;
}
.label-warning,
.badge-warning {
background: linear-gradient(135deg, var(--bc-orange) 0%, #d97706 100%) !important;
color: #000 !important;
}
.label-danger,
.badge-danger {
background: linear-gradient(135deg, var(--bc-red) 0%, var(--bc-red-dark) 100%) !important;
}
.label-info,
.badge-info {
background: linear-gradient(135deg, var(--bc-blue) 0%, var(--bc-blue-dark) 100%) !important;
}
/* ==========================================================================
Tabs / Nav-tabs
========================================================================== */
.nav-tabs {
border-bottom: 2px solid var(--bc-dark-border) !important;
}
.nav-tabs>li>a,
.tabs-container .nav-tabs>li>a,
a.nav-link {
background: rgba(255, 255, 255, 0.02) !important;
border-radius: var(--bc-radius-md) var(--bc-radius-md) 0 0 !important;
font-weight: 600 !important;
color: var(--bc-text-secondary) !important;
transition: var(--bc-transition-fast) !important;
font-size: 13px !important;
padding: 10px 18px !important;
border: 1px solid transparent !important;
border-bottom: none !important;
}
.nav-tabs>li>a:hover,
.tabs-container .nav-tabs>li>a:hover,
a.nav-link:hover {
color: var(--bc-gold) !important;
background: rgba(245, 193, 53, 0.06) !important;
border: 1px solid transparent !important;
border-bottom: none !important;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus,
.tabs-container .nav-tabs>li.active>a,
.tabs-container .nav-tabs>li.active>a:hover,
.tabs-container .nav-tabs>li.active>a:focus,
a.nav-link.active,
a.nav-link.active:hover,
a.nav-link.active:focus,
.nav-tabs>li.active>a.nav-link {
color: var(--bc-gold) !important;
border: 1px solid var(--bc-dark-border) !important;
border-bottom-color: transparent !important;
background: var(--bc-card-bg) !important;
background-color: var(--bc-card-bg) !important;
font-weight: 700 !important;
}
/* ==========================================================================
Panels
========================================================================== */
.panel {
border-radius: var(--bc-radius-lg) !important;
border: 1px solid var(--bc-card-border) !important;
box-shadow: var(--bc-card-shadow) !important;
}
.panel-heading {
border-radius: var(--bc-radius-lg) var(--bc-radius-lg) 0 0 !important;
padding: 14px 20px !important;
}
.panel-primary .panel-heading {
background: linear-gradient(135deg, var(--bc-gold) 0%, var(--bc-gold-dark) 100%) !important;
border: none !important;
color: #000 !important;
}
.panel-body {
padding: 20px !important;
}
/* ==========================================================================
Alerts
========================================================================== */
.alert {
border-radius: var(--bc-radius-md) !important;
border: none !important;
padding: 14px 18px !important;
font-size: 13px !important;
font-weight: 500 !important;
}
.alert-success {
background: rgba(16, 185, 129, 0.12) !important;
color: #34d399 !important;
border-left: 4px solid var(--bc-emerald) !important;
}
.alert-danger {
background: rgba(239, 68, 68, 0.12) !important;
color: #f87171 !important;
border-left: 4px solid var(--bc-red) !important;
}
.alert-warning {
background: rgba(245, 193, 53, 0.12) !important;
color: var(--bc-gold) !important;
border-left: 4px solid var(--bc-gold) !important;
}
.alert-info {
background: rgba(59, 130, 246, 0.12) !important;
color: #60a5fa !important;
border-left: 4px solid var(--bc-blue) !important;
}
/* ==========================================================================
Toastr Notifications โ Refined
========================================================================== */
#toast-container>div {
border-radius: var(--bc-radius-lg) !important;
box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.2) !important;
padding: 16px 20px !important;
font-family: 'Inter', sans-serif !important;
font-weight: 500 !important;
opacity: 0.97 !important;
}
/* ==========================================================================
Custom Scrollbar โ Thin Gold
========================================================================== */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
border-radius: var(--bc-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
background: var(--bc-gold);
}
/* Sidebar scrollbar */
.sidebar-collapse::-webkit-scrollbar-thumb,
.navbar-static-side ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
}
.sidebar-collapse::-webkit-scrollbar-thumb:hover,
.navbar-static-side ::-webkit-scrollbar-thumb:hover {
background: var(--bc-gold);
}
/* SlimScroll override */
.slimScrollBar {
background: rgba(255, 255, 255, 0.15) !important;
border-radius: var(--bc-radius-pill) !important;
}
/* ==========================================================================
Pace Loading Bar โ Gold
========================================================================== */
.pace .pace-progress {
background: linear-gradient(90deg, var(--bc-gold), var(--bc-gold-dark)) !important;
height: 3px !important;
}
/* ==========================================================================
Footer
========================================================================== */
.footer {
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
background: rgba(15, 18, 32, 0.9) !important;
color: var(--bc-text-secondary) !important;
}
/* ==========================================================================
Dashboard Specific โ Charts & Widgets
(Preserve functionality, enhance look only)
========================================================================== */
/* Stat number styling */
.stat-percent {
color: var(--bc-gold) !important;
font-weight: 700 !important;
}
/* Dashboard widget headers */
.ibox-title .pull-right,
.ibox-title .ibox-tools {
margin-top: 0 !important;
}
/* Disk usage / sidebar bottom widgets */
.sidebar-collapse .nav-label,
.sidebar-collapse .sidebar-panel {
color: rgba(255, 255, 255, 0.5) !important;
}
/* ==========================================================================
Login Page โ Dark Premium
========================================================================== */
body.gray-bg {
background: linear-gradient(135deg, #0f1320 0%, var(--bc-dark) 40%, #1e2a45 100%) !important;
min-height: 100vh;
}
/* Login container */
.loginColumns {
max-width: 900px;
margin: 0 auto;
padding: 40px 20px;
}
.loginColumns .row {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
}
/* Login left side text */
.loginColumns .col-md-6:first-child {
color: rgba(255, 255, 255, 0.85) !important;
}
.loginColumns .col-md-6:first-child p {
color: rgba(255, 255, 255, 0.55) !important;
font-size: 14px !important;
line-height: 1.7 !important;
}
/* Login form card โ glassmorphism */
.loginColumns .ibox-content,
#formlogin .ibox-content,
.loginColumns .col-md-6:last-child>.ibox-content {
background: rgba(255, 255, 255, 0.06) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: var(--bc-radius-xl) !important;
padding: 30px !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
}
/* Login inputs */
.loginColumns .form-control,
body.gray-bg .loginColumns .form-control {
background: rgba(255, 255, 255, 0.08) !important;
border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
color: #fff !important;
border-radius: var(--bc-radius-md) !important;
padding: 12px 16px !important;
font-size: 14px !important;
}
.loginColumns .form-control:focus,
body.gray-bg .loginColumns .form-control:focus {
border-color: var(--bc-gold) !important;
box-shadow: 0 0 0 3px rgba(245, 193, 53, 0.2) !important;
background: rgba(255, 255, 255, 0.12) !important;
}
.loginColumns .form-control::placeholder {
color: rgba(255, 255, 255, 0.4) !important;
}
/* Login button */
.loginColumns .btn-primary {
background: linear-gradient(135deg, var(--bc-gold) 0%, var(--bc-gold-dark) 100%) !important;
color: #000 !important;
font-weight: 700 !important;
padding: 12px 18px !important;
font-size: 14px !important;
letter-spacing: 0.02em;
border-radius: var(--bc-radius-md) !important;
box-shadow: 0 4px 14px rgba(245, 193, 53, 0.35) !important;
}
.loginColumns .btn-primary:hover {
box-shadow: 0 8px 24px rgba(245, 193, 53, 0.45) !important;
transform: translateY(-2px) !important;
}
/* "Forgot password" link */
.loginColumns .btn-white {
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
color: rgba(255, 255, 255, 0.7) !important;
border-radius: var(--bc-radius-md) !important;
}
.loginColumns .btn-white:hover {
background: rgba(255, 255, 255, 0.1) !important;
border-color: var(--bc-gold) !important;
color: var(--bc-gold) !important;
}
/* Login footer */
.loginColumns hr {
border-color: rgba(255, 255, 255, 0.1) !important;
}
.loginColumns .col-md-6 a {
color: var(--bc-gold) !important;
text-decoration: none !important;
transition: var(--bc-transition-fast) !important;
}
.loginColumns .col-md-6 a:hover {
color: #f7cc4f !important;
}
.loginColumns .text-right small,
.loginColumns small {
color: rgba(255, 255, 255, 0.4) !important;
}
/* Login checkbox & labels */
.loginColumns .form-control1 {
accent-color: var(--bc-gold) !important;
}
.loginColumns .form-group {
color: rgba(255, 255, 255, 0.6) !important;
}
.loginColumns .text-muted {
color: rgba(255, 255, 255, 0.4) !important;
}
/* 2FA section */
#twofa.ibox-content {
background: rgba(255, 255, 255, 0.06) !important;
backdrop-filter: blur(16px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: var(--bc-radius-xl) !important;
}
#twofa h2 {
color: #fff !important;
}
#twofa h6,
#twofa p {
color: rgba(255, 255, 255, 0.6) !important;
}
/* Success message */
.logged-message-alert .text-success {
color: var(--bc-emerald) !important;
}
.logged-message-alert h5,
.logged-message-alert p {
color: rgba(255, 255, 255, 0.7) !important;
}
/* Lost password */
.middle-box .ibox-content {
background: rgba(255, 255, 255, 0.06) !important;
backdrop-filter: blur(16px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: var(--bc-radius-xl) !important;
padding: 30px !important;
}
.middle-box .font-bold {
color: #fff !important;
}
.middle-box p {
color: rgba(255, 255, 255, 0.6) !important;
}
/* ==========================================================================
Locked Page โ Dark Premium
========================================================================== */
.lock-word {
color: rgba(255, 255, 255, 0.8) !important;
}
.lock-word .first-word {
color: var(--bc-gold) !important;
}
.lockscreen h3 {
color: rgba(255, 255, 255, 0.9) !important;
}
.lockscreen p {
color: rgba(255, 255, 255, 0.5) !important;
}
/* ==========================================================================
Animations โ Subtle entrance
========================================================================== */
@keyframes bc-fadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bc-fadeInScale {
from {
opacity: 0;
transform: scale(0.96) translateY(6px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
@keyframes bc-slideInLeft {
from {
opacity: 0;
transform: translateX(-12px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes bc-shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.wrapper-content {
animation: bc-fadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.ibox {
animation: bc-fadeInScale 0.4s cubic-bezier(0.4, 0, 0.2, 1) both !important;
}
/* Staggered entrance for multiple iboxes */
.row .ibox:nth-child(1) {
animation-delay: 0s !important;
}
.row .ibox:nth-child(2) {
animation-delay: 0.05s !important;
}
.row .ibox:nth-child(3) {
animation-delay: 0.1s !important;
}
.row .ibox:nth-child(4) {
animation-delay: 0.15s !important;
}
/* Stagger dashboard items */
.dashboard-item:nth-child(1) {
animation: bc-fadeIn 0.3s 0s both;
}
.dashboard-item:nth-child(2) {
animation: bc-fadeIn 0.3s 0.04s both;
}
.dashboard-item:nth-child(3) {
animation: bc-fadeIn 0.3s 0.08s both;
}
.dashboard-item:nth-child(4) {
animation: bc-fadeIn 0.3s 0.12s both;
}
.dashboard-item:nth-child(5) {
animation: bc-fadeIn 0.3s 0.16s both;
}
.dashboard-item:nth-child(6) {
animation: bc-fadeIn 0.3s 0.2s both;
}
.dashboard-item:nth-child(7) {
animation: bc-fadeIn 0.3s 0.24s both;
}
.dashboard-item:nth-child(8) {
animation: bc-fadeIn 0.3s 0.28s both;
}
/* Skeleton loading placeholder */
.bc-skeleton {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.04) 75%);
background-size: 200% 100%;
animation: bc-shimmer 1.5s ease-in-out infinite;
border-radius: var(--bc-radius-sm);
}
/* Sidebar item slide-in on page load */
#side-menu>li {
animation: bc-slideInLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
#side-menu>li:nth-child(1) {
animation-delay: 0s;
}
#side-menu>li:nth-child(2) {
animation-delay: 0.03s;
}
#side-menu>li:nth-child(3) {
animation-delay: 0.06s;
}
#side-menu>li:nth-child(4) {
animation-delay: 0.09s;
}
#side-menu>li:nth-child(5) {
animation-delay: 0.12s;
}
#side-menu>li:nth-child(6) {
animation-delay: 0.15s;
}
#side-menu>li:nth-child(7) {
animation-delay: 0.18s;
}
#side-menu>li:nth-child(8) {
animation-delay: 0.21s;
}
#side-menu>li:nth-child(9) {
animation-delay: 0.24s;
}
#side-menu>li:nth-child(10) {
animation-delay: 0.27s;
}
/* ==========================================================================
Responsive โ Mobile Polish
========================================================================== */
@media (max-width: 768px) {
.ibox {
margin-bottom: 18px !important;
border-radius: var(--bc-radius-md) !important;
}
.ibox-title {
padding: 14px 16px 10px !important;
border-top-left-radius: var(--bc-radius-md) !important;
border-top-right-radius: var(--bc-radius-md) !important;
}
.ibox-content {
padding: 14px 16px 16px !important;
border-bottom-left-radius: var(--bc-radius-md) !important;
border-bottom-right-radius: var(--bc-radius-md) !important;
}
.wrapper-content {
padding: 12px 14px !important;
}
.btn {
padding: 8px 14px !important;
}
.loginColumns {
padding: 20px 16px;
}
.loginColumns .row {
flex-direction: column !important;
}
.loginColumns .col-md-6:first-child {
text-align: center !important;
margin-bottom: 24px !important;
}
.loginColumns .ibox-content {
padding: 24px 20px !important;
}
.modal-content {
border-radius: var(--bc-radius-lg) !important;
margin: 10px !important;
}
}
@media (max-width: 480px) {
.loginColumns {
padding: 16px 12px;
}
.loginColumns .ibox-content {
padding: 20px 16px !important;
}
}
/* ==========================================================================
Misc Utilities
========================================================================== */
/* Welcome message in top nav */
.welcome-message {
color: rgba(255, 255, 255, 0.85) !important;
font-weight: 500 !important;
}
/* Tooltip fix */
.tooltip-inner {
border-radius: var(--bc-radius-sm) !important;
font-family: 'Inter', sans-serif !important;
font-weight: 500;
font-size: 12px !important;
padding: 6px 10px !important;
background: rgba(15, 18, 32, 0.95) !important;
border: 1px solid rgba(245, 193, 53, 0.2) !important;
}
/* Breadcrumbs */
.breadcrumb {
background: transparent !important;
padding: 8px 0 !important;
font-size: 13px !important;
}
.breadcrumb>li+li::before {
color: var(--bc-text-muted) !important;
}
.breadcrumb>.active {
color: var(--bc-text-secondary) !important;
}
.breadcrumb>li>a {
color: var(--bc-gold) !important;
}
/* Switch toggle */
.switchery {
border-radius: var(--bc-radius-pill) !important;
}
/* Well */
.well {
border-radius: var(--bc-radius-md) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
background: rgba(255, 255, 255, 0.04) !important;
box-shadow: none !important;
color: var(--bc-text-primary) !important;
}
/* Page heading */
.page-heading {
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
padding: 20px !important;
color: var(--bc-text-primary) !important;
}
/* Text colors override for dashboard */
body #page-wrapper h1,
body #page-wrapper h2,
body #page-wrapper h3,
body #page-wrapper h4,
body #page-wrapper h5,
body #page-wrapper h6 {
color: var(--bc-text-primary) !important;
}
/* General text inside page */
body #page-wrapper p,
body #page-wrapper span:not(.label):not(.badge),
body #page-wrapper td,
body #page-wrapper th,
body #page-wrapper li,
body #page-wrapper label {
color: var(--bc-text-primary) !important;
}
body #page-wrapper a:not(.btn) {
color: rgba(255, 255, 255, 0.75) !important;
}
body #page-wrapper a:not(.btn):hover {
color: var(--bc-gold) !important;
}
/* Sidebar Widgets (Disk Space, App Version in menu_left.html) */
#side-menu .ibox {
background: rgba(0, 0, 0, 0.2) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
box-shadow: none !important;
margin: 15px 15px 20px 15px !important;
width: auto !important;
border-radius: var(--bc-radius-md) !important;
overflow: visible !important;
/* Ensure charts/tooltips are not clipped */
}
#side-menu .ibox:hover {
background: rgba(0, 0, 0, 0.3) !important;
border-color: rgba(245, 193, 53, 0.3) !important;
transform: translateY(-2px);
}
#side-menu .ibox-content2 {
background: transparent !important;
padding: 15px !important;
border: none !important;
}
#side-menu .ibox-content2 h5 {
color: var(--bc-gold) !important;
font-size: 12px !important;
font-weight: 700 !important;
margin-bottom: 8px !important;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 1 !important;
}
#side-menu .info-left-item {
color: rgba(255, 255, 255, 0.8) !important;
font-size: 11px !important;
font-weight: 500 !important;
}
#side-menu .info-left-item h3 {
font-size: 18px !important;
color: #fff !important;
margin-top: 5px !important;
margin-bottom: 5px !important;
font-weight: 700 !important;
}
#side-menu .progress.progress-mini {
background-color: rgba(255, 255, 255, 0.1) !important;
height: 6px !important;
border-radius: var(--bc-radius-pill) !important;
margin: 8px 0 !important;
box-shadow: none !important;
}
#side-menu .progress-bar {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3) !important;
}
/* Specific fix for "Application Version" list */
#side-menu .ibox-content2 .nav-label h5 {
color: var(--bc-gold) !important;
margin-top: 8px !important;
margin-bottom: 2px !important;
}
#side-menu .ibox-content2 div[style*="margin-left: 5px"] {
margin-left: 0 !important;
color: rgba(255, 255, 255, 0.7) !important;
font-size: 12px !important;
}
/* ==========================================================================
DASHBOARD BODY STYLING (Dark Premium)
========================================================================== */
#page-wrapper .ibox {
background: var(--bc-card-bg) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
border-radius: var(--bc-radius-lg) !important;
margin-bottom: 25px !important;
overflow: visible !important;
}
#page-wrapper .ibox:hover {
border-color: rgba(245, 193, 53, 0.15) !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(245, 193, 53, 0.1) !important;
transform: translateY(-3px);
}
#page-wrapper .ibox-title {
background: rgba(255, 255, 255, 0.025) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
padding: 15px 20px !important;
}
#page-wrapper .ibox-title h5 {
color: var(--bc-gold) !important;
font-size: 11px !important;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700 !important;
}
#page-wrapper .ibox-content {
background: transparent !important;
color: rgba(255, 255, 255, 0.88) !important;
border: none !important;
padding: 20px !important;
}
/* Dashboard Items (Links inside cards) */
.dashboard-item a {
color: rgba(255, 255, 255, 0.9) !important;
text-decoration: none !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
display: flex !important;
align-items: center !important;
padding: 10px !important;
border-radius: var(--bc-radius-md) !important;
}
.well-lg {
padding: 24px 30px !important;
border-radius: var(--bc-radius-lg) !important;
}
.dashboard-item a:hover {
background: rgba(255, 255, 255, 0.05) !important;
transform: translateY(-2px);
}
.dashboard-item a:hover span {
color: var(--bc-gold) !important;
text-decoration: none !important;
}
/* NEW ICON STYLING (Premium Glow) */
/* Targets the icons inside dashboard items which were "squares" */
.dashboard-item a i {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)) !important;
color: var(--bc-gold) !important;
border: 1px solid rgba(245, 193, 53, 0.2) !important;
border-radius: 16px !important;
/* Softer, modern shape */
padding: 12px !important;
/* Adjust padding for better look */
width: 60px !important;
height: 60px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 28px !important;
/* Adjusted size */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
margin-right: 15px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.dashboard-item a:hover i {
background: linear-gradient(135deg, var(--bc-gold), var(--bc-gold-dark)) !important;
color: #000 !important;
/* Black icon on gold background */
border-color: var(--bc-gold) !important;
box-shadow: 0 8px 25px rgba(245, 193, 53, 0.4) !important;
transform: scale(1.05) rotate(3deg);
}
/* Fix for specific images (like Softaculous) if they are img tags instead of i tags */
.dashboard-item a img {
background: rgba(255, 255, 255, 0.1) !important;
padding: 8px !important;
border-radius: 12px !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
transition: all 0.3s ease !important;
}
.dashboard-item a:hover img {
background: rgba(255, 255, 255, 0.2) !important;
transform: scale(1.05);
}
/* ==========================================================================
TOP NAVBAR DARK THEME (overrides earlier block)
========================================================================== */
/* Navbar Background */
.navbar-static-top,
body .navbar-static-top {
background: rgb(8, 10, 20) !important;
/* backdrop-filter removed โ expensive GPU op */
border-bottom: 1px solid rgba(245, 193, 53, 0.25) !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
}
/* Navbar Links & Icons */
.nav.navbar-top-links li a,
.navbar-top-links>li>a {
color: rgba(255, 255, 255, 0.8) !important;
}
.nav.navbar-top-links li a:hover,
.nav.navbar-top-links li a:focus {
background: rgba(245, 193, 53, 0.08) !important;
color: var(--bc-gold) !important;
}
/* Specific fix for right sidebar toggle button */
.right-sidebar-toggle {
color: rgba(255, 255, 255, 0.9) !important;
background: rgba(255, 255, 255, 0.05) !important;
border-radius: var(--bc-radius-md) !important;
margin-right: 15px !important;
}
.right-sidebar-toggle:hover {
background: var(--bc-gold) !important;
color: #000 !important;
}
/* Hamburger button */
.navbar-minimalize,
.minimalize-styl-2 {
background: linear-gradient(135deg, var(--bc-gold), var(--bc-gold-dark)) !important;
border-color: var(--bc-gold) !important;
color: #000 !important;
box-shadow: 0 2px 10px rgba(245, 193, 53, 0.3) !important;
}
.navbar-minimalize:hover,
.minimalize-styl-2:hover {
background: linear-gradient(135deg, #f7cc4f, #c97a22) !important;
box-shadow: 0 4px 16px rgba(245, 193, 53, 0.45) !important;
transform: translateY(-1px);
}
/* Server info text on dark bg */
#page-wrapper .text-muted {
color: rgba(255, 255, 255, 0.45) !important;
}
/* Stat values */
#page-wrapper .stat-percent,
#page-wrapper .h2,
#page-wrapper .h3,
#page-wrapper .h4 {
color: var(--bc-gold) !important;
}
/* Dashboard server info links */
#page-wrapper .ibox-content a {
color: rgba(245, 193, 53, 0.85) !important;
}
#page-wrapper .ibox-content a:hover {
color: var(--bc-gold) !important;
text-decoration: none !important;
}
/* ==========================================================================
MODERN ICON LIBRARIES โ Tabler Icons & Phosphor Icons
Usage:
Tabler:
Phosphor:
========================================================================== */
/* โโ Base icon size normalization โโ */
.ti,
.ph {
font-size: 18px;
line-height: 1;
vertical-align: middle;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--bc-transition-fast);
}
/* โโ Size variants โโ */
.ti-xs,
.ph-xs {
font-size: 14px !important;
}
.ti-sm,
.ph-sm {
font-size: 16px !important;
}
.ti-md,
.ph-md {
font-size: 20px !important;
}
.ti-lg,
.ph-lg {
font-size: 24px !important;
}
.ti-xl,
.ph-xl {
font-size: 30px !important;
}
.ti-2xl,
.ph-2xl {
font-size: 36px !important;
}
.ti-3xl,
.ph-3xl {
font-size: 48px !important;
}
/* โโ Icon Badge / Container โโ */
.icon-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: var(--bc-radius-md);
transition: var(--bc-transition);
position: relative;
flex-shrink: 0;
}
.icon-badge .ti,
.icon-badge .ph {
font-size: 20px !important;
}
/* Size variants for badge */
.icon-badge-sm {
width: 32px;
height: 32px;
border-radius: var(--bc-radius-sm);
}
.icon-badge-sm .ti,
.icon-badge-sm .ph {
font-size: 16px !important;
}
.icon-badge-lg {
width: 52px;
height: 52px;
border-radius: var(--bc-radius-lg);
}
.icon-badge-lg .ti,
.icon-badge-lg .ph {
font-size: 26px !important;
}
.icon-badge-xl {
width: 64px;
height: 64px;
border-radius: 18px;
}
.icon-badge-xl .ti,
.icon-badge-xl .ph {
font-size: 32px !important;
}
/* โโ Color variants for icon badges โโ */
/* Gold / Primary */
.icon-badge-gold {
background: linear-gradient(135deg, rgba(245, 193, 53, 0.18) 0%, rgba(179, 103, 28, 0.1) 100%);
border: 1px solid rgba(245, 193, 53, 0.25);
color: var(--bc-gold) !important;
}
.icon-badge-gold:hover,
a:hover .icon-badge-gold {
background: linear-gradient(135deg, var(--bc-gold) 0%, var(--bc-gold-dark) 100%);
color: #000 !important;
box-shadow: 0 8px 24px rgba(245, 193, 53, 0.4);
transform: translateY(-2px) scale(1.05);
}
/* Emerald / Success */
.icon-badge-emerald {
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(16, 185, 129, 0.2);
color: var(--bc-emerald) !important;
}
.icon-badge-emerald:hover,
a:hover .icon-badge-emerald {
background: linear-gradient(135deg, var(--bc-emerald) 0%, var(--bc-emerald-dark) 100%);
color: #fff !important;
box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
transform: translateY(-2px) scale(1.05);
}
/* Blue / Info */
.icon-badge-blue {
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.2);
color: var(--bc-blue) !important;
}
.icon-badge-blue:hover,
a:hover .icon-badge-blue {
background: linear-gradient(135deg, var(--bc-blue) 0%, var(--bc-blue-dark) 100%);
color: #fff !important;
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
transform: translateY(-2px) scale(1.05);
}
/* Red / Danger */
.icon-badge-red {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.2);
color: var(--bc-red) !important;
}
.icon-badge-red:hover,
a:hover .icon-badge-red {
background: linear-gradient(135deg, var(--bc-red) 0%, var(--bc-red-dark) 100%);
color: #fff !important;
box-shadow: 0 8px 24px rgba(239, 68, 68, 0.35);
transform: translateY(-2px) scale(1.05);
}
/* Purple / Indigo */
.icon-badge-purple {
background: rgba(99, 102, 241, 0.12);
border: 1px solid rgba(99, 102, 241, 0.2);
color: var(--bc-indigo) !important;
}
.icon-badge-purple:hover,
a:hover .icon-badge-purple {
background: linear-gradient(135deg, var(--bc-indigo) 0%, #4f46e5 100%);
color: #fff !important;
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
transform: translateY(-2px) scale(1.05);
}
/* Orange */
.icon-badge-orange {
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.2);
color: var(--bc-orange) !important;
}
.icon-badge-orange:hover,
a:hover .icon-badge-orange {
background: linear-gradient(135deg, var(--bc-orange) 0%, #d97706 100%);
color: #000 !important;
box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
transform: translateY(-2px) scale(1.05);
}
/* Gray / Muted */
.icon-badge-gray {
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.6) !important;
}
.icon-badge-gray:hover,
a:hover .icon-badge-gray {
background: rgba(255, 255, 255, 0.15);
color: #fff !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
transform: translateY(-2px) scale(1.05);
}
/* โโ Glow effects โโ */
.icon-glow-gold {
filter: drop-shadow(0 0 8px rgba(245, 193, 53, 0.6));
}
.icon-glow-blue {
filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6));
}
.icon-glow-green {
filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.6));
}
.icon-glow-red {
filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6));
}
.icon-glow-purple {
filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.6));
}
/* โโ Sidebar icons โ support Tabler & Phosphor โโ */
.nav>li>a .ti,
.nav>li>a .ph,
.navbar-default .nav>li>a .ti,
.navbar-default .nav>li>a .ph {
color: rgba(255, 255, 255, 0.4) !important;
font-size: 16px !important;
margin-right: 8px;
transition: var(--bc-transition-fast) !important;
width: 20px;
text-align: center;
}
.nav>li>a:hover .ti,
.nav>li>a:hover .ph,
.nav>li.active>a .ti,
.nav>li.active>a .ph,
.navbar-default .nav>li>a:hover .ti,
.navbar-default .nav>li>a:hover .ph,
.navbar-default .nav>li.active>a .ti,
.navbar-default .nav>li.active>a .ph {
color: var(--bc-gold) !important;
}
/* โโ Top navbar icons โ support Tabler & Phosphor โโ */
.nav.navbar-top-links li a .ti,
.nav.navbar-top-links li a .ph {
font-size: 20px !important;
color: rgba(255, 255, 255, 0.75) !important;
}
.nav.navbar-top-links li a:hover .ti,
.nav.navbar-top-links li a:hover .ph {
color: var(--bc-gold) !important;
}
/* โโ Dashboard item icons (Tabler/Phosphor inside .dashboard-item) โโ */
.dashboard-item a .ti,
.dashboard-item a .ph {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)) !important;
color: var(--bc-gold) !important;
border: 1px solid rgba(245, 193, 53, 0.2) !important;
border-radius: 16px !important;
padding: 0 !important;
width: 56px !important;
height: 56px !important;
font-size: 26px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
margin-right: 14px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
flex-shrink: 0;
}
.dashboard-item a:hover .ti,
.dashboard-item a:hover .ph {
background: linear-gradient(135deg, var(--bc-gold), var(--bc-gold-dark)) !important;
color: #000 !important;
border-color: var(--bc-gold) !important;
box-shadow: 0 8px 28px rgba(245, 193, 53, 0.45) !important;
transform: scale(1.08) rotate(3deg);
}
/* โโ iBox tools โ Tabler/Phosphor icons โโ */
.ibox-tools .ti,
.ibox-tools .ph {
font-size: 16px;
color: rgba(255, 255, 255, 0.4);
transition: var(--bc-transition-fast);
}
.ibox-tools a:hover .ti,
.ibox-tools a:hover .ph {
color: var(--bc-gold) !important;
}
/* โโ Tabler / Phosphor inside buttons โโ */
.btn .ti,
.btn .ph {
font-size: 16px;
vertical-align: middle;
margin-right: 6px;
}
.btn-icon {
width: 38px !important;
height: 38px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.btn-icon .ti,
.btn-icon .ph {
margin: 0 !important;
font-size: 18px !important;
}
/* โโ Spin/pulse animations โโ */
.ti-spin,
.ph-spin {
animation: bc-icon-spin 1.2s linear infinite;
}
.ti-pulse,
.ph-pulse {
animation: bc-icon-spin 1.2s steps(8) infinite;
}
@keyframes bc-icon-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* โโ Stat widget icons (large display) โโ */
.stat-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: var(--bc-radius-lg);
background: linear-gradient(135deg, rgba(245, 193, 53, 0.15) 0%, rgba(179, 103, 28, 0.08) 100%);
border: 1px solid rgba(245, 193, 53, 0.2);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
transition: var(--bc-transition);
}
.stat-icon .ti,
.stat-icon .ph {
font-size: 28px !important;
color: var(--bc-gold) !important;
}
.stat-icon:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(245, 193, 53, 0.2);
}
/* โโ Icon list (modern menu style) โโ */
.icon-list-item {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: var(--bc-transition-fast);
}
.icon-list-item:last-child {
border-bottom: none;
}
.icon-list-item:hover {
padding-left: 6px;
}
.icon-list-item .icon-badge {
flex-shrink: 0;
}
.icon-list-item .icon-label {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
}
.icon-list-item .icon-value {
margin-left: auto;
font-size: 13px;
font-weight: 600;
color: var(--bc-gold);
}
/* โโ FontAwesome compatibility โ ensure FA still works โโ */
.fa,
.fas,
.far,
.fab,
.fal,
.fad {
font-family: 'FontAwesome', 'Font Awesome 5 Free', 'Font Awesome 5 Brands' !important;
font-size: 14px;
line-height: 1;
}
/* FA inside specific FA-only contexts (sidebar, nav) */
.navbar-default .nav>li>a>.fa {
color: rgba(255, 255, 255, 0.4) !important;
margin-right: 8px;
font-size: 15px !important;
width: 20px;
text-align: center;
transition: var(--bc-transition-fast);
}
.navbar-default .nav>li>a:hover>.fa,
.navbar-default .nav>li.active>a>.fa {
color: var(--bc-gold) !important;
}
/* ==========================================================================
MODULE HEADERS & BREADCRUMB โ Dark Override
========================================================================== */
/* The main module header bar that uses white-bg class */
.white-bg,
.dashboard-header {
background-color: var(--bc-card-bg) !important;
border-bottom: 1px solid var(--bc-dark-border) !important;
padding: 16px 24px !important;
color: var(--bc-text-primary) !important;
}
.white-bg h2,
.white-bg h3,
.dashboard-header h2,
.dashboard-header h3 {
color: var(--bc-text-primary) !important;
font-size: 20px !important;
font-weight: 700 !important;
margin-top: 6px !important;
margin-bottom: 4px !important;
}
/* Breadcrumb โ Bootstrap default is light gray, override to transparent/dark */
.breadcrumb {
background-color: transparent !important;
border-radius: 0 !important;
margin-bottom: 0 !important;
padding: 4px 0 !important;
}
.breadcrumb>li,
.breadcrumb-item {
color: rgba(255, 255, 255, 0.5) !important;
font-size: 12px !important;
}
.breadcrumb>li>a,
.breadcrumb-item>a {
color: var(--bc-gold) !important;
text-decoration: none !important;
}
.breadcrumb>li>a:hover,
.breadcrumb-item>a:hover {
color: #f7cc4f !important;
text-decoration: underline !important;
}
.breadcrumb>.active,
.breadcrumb-item.active {
color: rgba(255, 255, 255, 0.75) !important;
font-weight: 500 !important;
}
/* Bootstrap breadcrumb separator */
.breadcrumb>li+li::before {
color: rgba(255, 255, 255, 0.3) !important;
}
/* ==========================================================================
JUMBOTRON (Help/info panels in modules) โ Dark Override
========================================================================== */
.jumbotron {
background-color: rgba(255, 255, 255, 0.04) !important;
border: 1px solid var(--bc-dark-border) !important;
border-radius: var(--bc-radius-lg) !important;
color: var(--bc-text-primary) !important;
padding: 20px !important;
}
.jumbotron h1,
.jumbotron h2,
.jumbotron h3,
.jumbotron h4 {
color: var(--bc-gold) !important;
font-size: 18px !important;
font-weight: 700 !important;
margin-top: 0 !important;
}
.jumbotron p,
.jumbotron li {
color: rgba(255, 255, 255, 0.7) !important;
font-size: 13px !important;
line-height: 1.6 !important;
}
/* ==========================================================================
PANELS (Bootstrap .panel components in modules) โ Dark Override
========================================================================== */
.panel {
background-color: var(--bc-card-bg) !important;
border: 1px solid var(--bc-dark-border) !important;
border-radius: var(--bc-radius-lg) !important;
box-shadow: var(--bc-card-shadow) !important;
}
.panel-heading,
.panel-heading.white-bg {
background-color: rgba(255, 255, 255, 0.03) !important;
border-bottom: 1px solid var(--bc-dark-border) !important;
border-radius: var(--bc-radius-lg) var(--bc-radius-lg) 0 0 !important;
color: var(--bc-text-primary) !important;
padding: 14px 18px !important;
}
.panel-title {
color: var(--bc-text-primary) !important;
font-size: 14px !important;
font-weight: 600 !important;
}
.panel-body {
background-color: transparent !important;
color: var(--bc-text-primary) !important;
padding: 18px !important;
}
.panel-footer {
background-color: rgba(255, 255, 255, 0.02) !important;
border-top: 1px solid var(--bc-dark-border) !important;
}
/* Panel variants */
.panel-default>.panel-heading {
background-color: rgba(255, 255, 255, 0.03) !important;
border-color: var(--bc-dark-border) !important;
color: var(--bc-text-primary) !important;
}
.panel-primary>.panel-heading {
background: linear-gradient(135deg, rgba(245, 193, 53, 0.15) 0%, rgba(245, 193, 53, 0.05) 100%) !important;
border-color: rgba(245, 193, 53, 0.3) !important;
color: var(--bc-gold) !important;
}
.panel-success>.panel-heading {
background-color: rgba(16, 185, 129, 0.1) !important;
border-color: rgba(16, 185, 129, 0.25) !important;
color: var(--bc-emerald) !important;
}
.panel-danger>.panel-heading {
background-color: rgba(239, 68, 68, 0.1) !important;
border-color: rgba(239, 68, 68, 0.25) !important;
color: var(--bc-red) !important;
}
.panel-warning>.panel-heading {
background-color: rgba(245, 158, 11, 0.1) !important;
border-color: rgba(245, 158, 11, 0.25) !important;
color: var(--bc-orange) !important;
}
.panel-info>.panel-heading {
background-color: rgba(59, 130, 246, 0.1) !important;
border-color: rgba(59, 130, 246, 0.25) !important;
color: var(--bc-blue) !important;
}
/* ==========================================================================
WELL (Bootstrap .well) โ Dark Override
========================================================================== */
.well {
background-color: rgba(255, 255, 255, 0.04) !important;
border: 1px solid var(--bc-dark-border) !important;
border-radius: var(--bc-radius-md) !important;
box-shadow: none !important;
color: var(--bc-text-primary) !important;
}
.well-sm {
padding: 9px 14px !important;
}
.well-lg {
padding: 24px 30px !important;
border-radius: var(--bc-radius-lg) !important;
}
/* ==========================================================================
SWITCHES (.onoffswitch) โ Gold Override
========================================================================== */
.onoffswitch-inner:before {
background-color: var(--bc-gold) !important;
color: #000 !important;
}
.onoffswitch-inner:after {
background-color: rgba(255, 255, 255, 0.1) !important;
color: rgba(255, 255, 255, 0.5) !important;
}
.onoffswitch-switch {
background-color: #fff !important;
border: 2px solid var(--bc-dark-border) !important;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
border-color: var(--bc-gold) !important;
}
.onoffswitch-label {
border: 1px solid var(--bc-dark-border) !important;
}
/* ==========================================================================
NOTIFICATION CENTER MODULE OVERRIDES
========================================================================== */
.noti-module-header {
background: rgba(245, 193, 53, 0.05) !important;
border-color: rgba(245, 193, 53, 0.2) !important;
border-radius: var(--bc-radius-md) !important;
}
.noti-items .panel.panel-default {
background: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
border-radius: var(--bc-radius-lg) !important;
}
.noti-items .panel-heading {
background: rgba(0, 0, 0, 0.2) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
color: var(--bc-gold) !important;
border-top-left-radius: var(--bc-radius-lg) !important;
border-top-right-radius: var(--bc-radius-lg) !important;
}
.noti-items .panel-heading h4 {
color: var(--bc-gold) !important;
}
.noti-items .noti-item {
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
transition: background-color 0.2s ease;
padding: 12px 10px !important;
border-radius: var(--bc-radius-sm);
}
.noti-items .noti-item:hover {
background: rgba(245, 193, 53, 0.03) !important;
}
/* ==========================================================================
SELECT2 (Custom Dropdown) โ Dark Override
========================================================================== */
.select2-container--default .select2-selection--single {
background-color: rgba(255, 255, 255, 0.06) !important;
border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
border-radius: var(--bc-radius-md) !important;
height: 40px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--bc-text-primary) !important;
line-height: 38px !important;
padding-left: 14px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 38px !important;
right: 8px !important;
}
.select2-dropdown {
background-color: var(--bc-dark-deeper) !important;
border: 1px solid var(--bc-dark-border) !important;
border-radius: var(--bc-radius-md) !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
z-index: 9999 !important;
}
.select2-search--dropdown .select2-search__field {
background-color: rgba(255, 255, 255, 0.05) !important;
border: 1px solid var(--bc-dark-border) !important;
color: var(--bc-text-primary) !important;
border-radius: var(--bc-radius-sm) !important;
}
.select2-results__option {
color: var(--bc-text-primary) !important;
padding: 8px 12px !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: rgba(245, 193, 53, 0.1) !important;
color: var(--bc-gold) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: var(--bc-gold) !important;
color: #000 !important;
}
.select2-container--default.select2-container--disabled .select2-selection--single {
background-color: rgba(255, 255, 255, 0.02) !important;
cursor: not-allowed !important;
}
/* ==========================================================================
PAGINATION (Bootstrap Generic) โ Dark Override
========================================================================== */
.pagination>li>a,
.pagination>li>span {
background-color: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: var(--bc-text-secondary) !important;
}
.pagination>li>a:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>span:focus {
background-color: rgba(245, 193, 53, 0.1) !important;
border-color: rgba(245, 193, 53, 0.2) !important;
color: var(--bc-gold) !important;
}
.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
background-color: var(--bc-gold) !important;
border-color: var(--bc-gold) !important;
color: #000 !important;
}
.pagination>.disabled>span,
.pagination>.disabled>span:hover,
.pagination>.disabled>span:focus,
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
background-color: rgba(255, 255, 255, 0.02) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
color: rgba(255, 255, 255, 0.3) !important;
}
/* ==========================================================================
MODALS โ Dark Override & Fixes
========================================================================== */
.modal-content {
background-color: var(--bc-card-bg) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: var(--bc-radius-2xl) !important;
box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(245, 193, 53, 0.06) !important;
color: var(--bc-text-primary) !important;
}
.modal-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
background: linear-gradient(135deg, rgba(245, 193, 53, 0.1) 0%, rgba(245, 193, 53, 0.03) 100%) !important;
border-radius: var(--bc-radius-2xl) var(--bc-radius-2xl) 0 0 !important;
padding: 18px 24px !important;
}
.modal-footer {
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
background: rgba(0, 0, 0, 0.15) !important;
border-radius: 0 0 var(--bc-radius-2xl) var(--bc-radius-2xl) !important;
padding: 16px 24px !important;
}
.modal-body {
padding: 24px !important;
background-color: var(--bc-card-bg) !important;
color: var(--bc-text-primary) !important;
}
.modal-title,
.modal-header h5.modal-title,
.modal-header h4.modal-title {
color: var(--bc-gold) !important;
font-weight: 700 !important;
margin: 0;
}
/* ==========================================================================
TOASTR NOTIFICATIONS FIX
========================================================================== */
#toast-container>div {
padding: 15px 15px 15px 65px !important;
/* Increase left padding to prevent icon overlap */
background-position: 15px center !important;
border-radius: var(--bc-radius-md) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}
#toast-container>div:before {
font-family: "Font Awesome 5 Free", "FontAwesome";
font-weight: 900;
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
}
/* ==========================================================================
MODULE SPECIFIC FIXES (Quota Bars)
========================================================================== */
.pgresql-quota-wrapper,
.mongodb-quota-wrapper,
.mysql-quota-wrapper {
position: relative !important;
top: auto !important;
right: auto !important;
box-shadow: none !important;
margin-bottom: 20px;
z-index: 1;
}
/* ==========================================================================
GLOBAL "ANTI-WHITE" OVERRIDES FOR ALL MODULES
========================================================================== */
/* Catch any generic Bootstrap containers that might default to white */
.well,
.jumbotron,
.list-group-item,
.popover,
.popover-title,
.popover-content,
.tooltip-inner,
.thumbnail,
.img-thumbnail,
pre,
code,
kbd,
samp {
background-color: var(--bc-card-bg) !important;
color: var(--bc-text-primary) !important;
border-color: var(--bc-card-border) !important;
}
/* Ensure list items don't have white hover states */
.list-group-item:hover,
.list-group-item:focus {
background-color: rgba(255, 255, 255, 0.05) !important;
}
/* Fix any tables inside modules that might have missed the dark theme */
.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
background-color: transparent !important;
}
.table-striped>tbody>tr:nth-of-type(odd) {
background-color: rgba(255, 255, 255, 0.02) !important;
}
/* Fix dropdown menus in Select2 or generic inputs */
.select2-dropdown,
.select2-results__option,
.dropdown-menu {
background-color: var(--bc-card-bg) !important;
color: var(--bc-text-primary) !important;
}
.select2-results__option--highlighted[aria-selected],
.dropdown-menu>li>a:hover {
background-color: var(--bc-gold) !important;
color: #000 !important;
}
/* ==========================================================================
RESPONSIVENESS AND WHITESPACE FIXES FOR ALL MODULES
========================================================================== */
@media (max-width: 768px) {
/* Fix wrapper padding on mobile to give more breathing room */
.wrapper-content {
padding: 20px 15px !important;
}
/* Force modal dialogs to be responsive and ignore inline widths */
.modal-dialog {
width: auto !important;
margin: 15px !important;
max-width: 100% !important;
}
/* Improve ibox padding on mobile */
.ibox-content {
padding: 20px 15px !important;
}
.ibox-title {
padding: 15px 15px 10px 15px !important;
}
/* Adjust modal helpers */
.vertical-alignment-helper {
display: block !important;
height: auto !important;
margin: 10px !important;
}
.vertical-align-center {
display: block !important;
}
/* FIX TABLE RESPONSIVENESS IN ALL MODULES */
.table-responsive {
border: none !important;
width: 100% !important;
margin-bottom: 15px !important;
overflow-y: hidden !important;
-ms-overflow-style: -ms-autohiding-scrollbar !important;
}
/* Make ANY table scrollable horizontally on mobile to prevent squishing */
table.table,
.dataTables_wrapper .table {
display: block !important;
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
table.table>thead>tr>th,
table.table>tbody>tr>td {
white-space: nowrap !important;
/* Prevent text from wrapping into unreadable columns */
}
/* Override fixed-width module containers */
.modal-user-pass-input.pass_container,
.general-password-generator-options,
.pgresql-username-wrapper input,
.modal-body select,
.modal-body input {
width: 100% !important;
max-width: 100% !important;
}
.modal-user-pass-container {
flex-direction: column !important;
align-items: stretch !important;
}
.modal-user-pass-generator {
margin-top: 15px !important;
display: flex;
gap: 5px;
}
/* Global max-width resets for broken content */
img,
video,
canvas {
max-width: 100% !important;
height: auto;
}
/* Page Wrapper and Container adjusting */
/* Remove !important from margin to allow CWP Inspinia classes to slide it out when the menu is active */
#page-wrapper {
margin: 0;
padding-top: 60px !important;
}
/* When the mobile menu slides the wrapper to the right, prevent horizontal scrolling */
body.body-small.mini-navbar {
overflow-x: hidden !important;
}
/* Force the sidebar to always be above all content on mobile */
.navbar-static-side {
z-index: 9999 !important;
}
/* Top navbar handling for mobile */
.navbar-static-top {
min-height: 60px;
height: 60px !important;
display: flex;
flex-wrap: nowrap;
/* Never wrap on mobile */
justify-content: space-between;
align-items: center;
padding: 0;
overflow: hidden;
}
.navbar-header {
display: flex;
align-items: center;
width: auto !important;
margin-left: 5px;
flex-shrink: 0;
/* Hamburger menu never shrinks */
}
/* Make the top links horizontally scrollable on mobile! */
.navbar-top-links {
display: flex;
flex-wrap: nowrap !important;
justify-content: flex-start;
margin: 0 0 0 10px !important;
padding: 0 10px 0 0 !important;
position: static !important;
/* No absolute positioning */
height: 60px !important;
align-items: center;
flex: 1;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
/* Hide scrollbar for a clean swipe experience */
.navbar-top-links::-webkit-scrollbar {
display: none !important;
}
.nav.navbar-top-links>li {
flex-shrink: 0 !important;
/* Keep icons their original size */
display: flex;
align-items: center;
}
.nav.navbar-top-links>li>a {
padding: 10px 8px !important;
display: flex;
align-items: center;
justify-content: center;
}
/* Search bar hide on mobile to save space */
.navbar-form-custom {
display: none !important;
}
/* Ensure dropdowns fit on screen */
.cwp-notifications,
.cwp-theme-switcher,
.dropdown-alerts {
width: 90vw !important;
max-width: 380px !important;
right: -10px !important;
left: auto !important;
}
/* Fix language dropdown items wrap */
.lang-items-wrapper {
width: 90vw !important;
max-width: 320px !important;
}
/* Hide unnecessary items on mobile to save space */
.welcome-message {
display: none !important;
}
/* Button spacing */
.btn {
margin-bottom: 8px;
/* More breathable button spacing */
}
/* Input layouts */
.form-group {
width: 100% !important;
}
.input-group {
width: 100% !important;
}
/* Tabs responsiveness */
.nav-tabs {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
padding-bottom: 2px !important;
}
.nav-tabs::-webkit-scrollbar {
height: 3px;
}
.nav-tabs::-webkit-scrollbar-thumb {
background: var(--bc-gold);
border-radius: 10px;
}
.nav-tabs>li {
width: auto !important;
white-space: nowrap !important;
margin-bottom: 0 !important;
}
.nav-tabs>li>a {
margin-right: 5px !important;
padding: 10px 15px !important;
}
/* Panels */
.panel-body,
.panel-heading,
.panel-footer {
padding: 15px !important;
}
h2 {
font-size: 1.4rem !important;
}
h3 {
font-size: 1.2rem !important;
}
.ibox-title h5 {
font-size: 12px !important;
}
}
/* Extra small devices */
@media (max-width: 480px) {
.wrapper-content {
padding: 15px 10px !important;
}
.ibox-content {
padding: 15px 10px !important;
}
.table>tbody>tr>td,
.table>thead>tr>th {
padding: 8px 10px !important;
/* Slightly denser table cells on very small screens */
font-size: 12px !important;
}
}
/* ==========================================================================
๐จ NUCLEAR ANTI-WHITE: Override ALL inline white backgrounds from modules
These rules use attribute selectors with high specificity to override
inline styles like style="background-color: #fff" set in module HTML.
========================================================================== */
/* Catch inline background-color that contains white-ish values */
#page-wrapper [style*="background-color: #fff"],
#page-wrapper [style*="background-color:#fff"],
#page-wrapper [style*="background-color: #ffffff"],
#page-wrapper [style*="background-color:#ffffff"],
#page-wrapper [style*="background-color: white"],
#page-wrapper [style*="background-color:white"],
#page-wrapper [style*="background: white"],
#page-wrapper [style*="background:#fff"],
#page-wrapper [style*="background: #fff"],
#page-wrapper [style*="background: #ffffff"],
#page-wrapper [style*="background:#ffffff"],
#page-wrapper [style*="background-color: #ffffffad"],
#page-wrapper [style*="background-color:#ffffffad"] {
background-color: var(--bc-card-bg) !important;
color: var(--bc-text-primary) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
/* SweetAlert modals dark override */
.sweet-alert,
.swal-modal,
.swal-overlay,
.sweet-alert .sa-button-container,
.sweet-alert h2,
.sweet-alert p {
background-color: var(--bc-card-bg) !important;
color: var(--bc-text-primary) !important;
}
.sweet-alert .sa-confirm-button-container .confirm,
.sweet-alert button.confirm {
background: linear-gradient(135deg, var(--bc-gold), var(--bc-gold-dark)) !important;
color: #000 !important;
border: none !important;
border-radius: var(--bc-radius-md) !important;
font-weight: 600 !important;
}
.sweet-alert button.cancel {
background: rgba(255, 255, 255, 0.06) !important;
color: var(--bc-text-primary) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: var(--bc-radius-md) !important;
}
/* Loading spinners โ make them visible on dark bg */
.sk-spinner,
.sk-spinner-wave,
.sk-spinner-double-bounce,
.ibox-content.sk-loading::after {
background-color: var(--bc-card-bg) !important;
}
/* Pace.js loading bar โ gold instead of blue */
.pace .pace-progress {
background: var(--bc-gold) !important;
box-shadow: 0 0 12px rgba(245, 193, 53, 0.5) !important;
}
.pace .pace-activity {
border-top-color: var(--bc-gold) !important;
border-left-color: var(--bc-gold) !important;
}
/* DataTables dark overrides */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_paginate .paginate_button {
color: var(--bc-text-primary) !important;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
background-color: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: var(--bc-radius-sm) !important;
padding: 5px 10px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--bc-gold) !important;
color: #000 !important;
border-color: var(--bc-gold) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
background: var(--bc-gold) !important;
color: #000 !important;
border-color: var(--bc-gold) !important;
}
/* Fix Vue.js loading overlay */
[class*="loading"],
.loadingVue,
#loading-overlay {
background-color: rgba(20, 24, 36, 0.85) !important;
color: var(--bc-text-primary) !important;
}
/* Fix tab-pane white backgrounds */
.tab-content,
.tab-pane,
.tab-content>.tab-pane {
background-color: transparent !important;
color: var(--bc-text-primary) !important;
}
/* Fix accordion panels */
.panel-group .panel {
background-color: var(--bc-card-bg) !important;
border-color: rgba(255, 255, 255, 0.06) !important;
}
.panel-group .panel+.panel {
margin-top: 8px !important;
}
/* Fix collapsible elements */
/* Fix collapsible elements โ but NOT nav-second-level submenus! */
.collapse.in:not(.nav-second-level),
.collapsing:not(.nav-second-level) {
background-color: transparent !important;
}
/* Force nav-second-level to ALWAYS be opaque even during collapse transitions */
.nav-second-level.collapsing,
.nav-second-level.collapse.in,
.nav-second-level.collapse {
background: #151a2a !important;
background-color: #151a2a !important;
}
/* Sidebar Nav hover gold accent bar */
.navbar-default .nav>li>a::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) scaleY(0);
width: 3px;
height: 60%;
background: var(--bc-gold);
border-radius: 0 3px 3px 0;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar-default .nav>li>a:hover::before,
.navbar-default .nav>li.active>a::before {
transform: translateY(-50%) scaleY(1);
}
/* Fix any remaining white text on white background */
#page-wrapper,
#page-wrapper * {
--white-override: var(--bc-card-bg);
}
/* ==========================================================================
MOBILE / RESPONSIVE โ Sidebar & Submenu Fixes
CWP uses .body-small class (JS-added) for mobile breakpoints
========================================================================== */
/* body-small: Mobile sidebar */
body.body-small .navbar-static-side,
body.body-small .navbar-default.navbar-static-side {
border-radius: 0 !important;
z-index: 2001 !important;
}
/* body-small: Mobile submenu โ MUST be visible with SOLID background */
body.body-small .nav-second-level,
body.body-small .nav-second-level.collapse,
body.body-small .nav-second-level.collapsing,
body.body-small .nav-second-level.collapse.in,
body.body-small ul.nav-second-level,
body.body-small #side-menu .nav-second-level,
body.body-small .navbar-default .nav .nav-second-level {
background: #1a1f2e !important;
background-color: #1a1f2e !important;
border-radius: var(--bc-radius-md) !important;
border-left: 2px solid rgba(245, 193, 53, 0.2) !important;
margin: 4px 8px 4px 16px !important;
padding: 6px 4px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
z-index: 2002 !important;
}
/* body-small: Mobile submenu LINKS โ visible text */
body.body-small .nav-second-level li a,
body.body-small .nav-third-level li a,
body.body-small #side-menu .nav-second-level li a,
body.body-small .navbar-default .nav .nav-second-level li a {
color: rgba(255, 255, 255, 0.75) !important;
background: transparent !important;
font-size: 13px !important;
padding: 10px 14px 10px 28px !important;
margin: 2px 4px !important;
border-radius: var(--bc-radius-sm) !important;
}
body.body-small .nav-second-level li a:hover,
body.body-small .nav-third-level li a:hover,
body.body-small #side-menu .nav-second-level li a:hover,
body.body-small .navbar-default .nav .nav-second-level li a:hover {
color: var(--bc-gold) !important;
background: rgba(245, 193, 53, 0.1) !important;
}
/* body-small: Collapsing submenu transition fix */
body.body-small .nav-second-level.collapsing li a {
color: rgba(255, 255, 255, 0.75) !important;
background: transparent !important;
}
/* @media fallback for screens below 768px */
@media (max-width: 768px) {
.navbar-static-side,
.navbar-default.navbar-static-side {
border-radius: 0 !important;
z-index: 2001 !important;
}
.nav-second-level,
ul.nav-second-level,
#side-menu .nav-second-level,
.navbar-default .nav .nav-second-level {
background: #1a1f2e !important;
background-color: #1a1f2e !important;
border-radius: var(--bc-radius-md) !important;
border-left: 2px solid rgba(245, 193, 53, 0.2) !important;
margin: 4px 8px 4px 16px !important;
padding: 6px 4px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
z-index: 2002 !important;
}
.nav-second-level li a,
.nav-third-level li a,
#side-menu .nav-second-level li a {
color: rgba(255, 255, 255, 0.75) !important;
background: transparent !important;
font-size: 13px !important;
padding: 10px 14px 10px 28px !important;
margin: 2px 4px !important;
border-radius: var(--bc-radius-sm) !important;
}
.nav-second-level li a:hover,
.nav-third-level li a:hover,
#side-menu .nav-second-level li a:hover {
color: var(--bc-gold) !important;
background: rgba(245, 193, 53, 0.1) !important;
}
/* Ensure the sidebar scroll works */
.sidebar-collapse {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* Submenu parent item arrow */
.nav>li>a .fa.arrow {
color: rgba(255, 255, 255, 0.4) !important;
}
}
/* Sidebar scroll styling */
.sidebar-collapse::-webkit-scrollbar {
width: 4px !important;
}
.sidebar-collapse::-webkit-scrollbar-track {
background: transparent !important;
}
.sidebar-collapse::-webkit-scrollbar-thumb {
background: rgba(245, 193, 53, 0.2) !important;
border-radius: var(--bc-radius-pill) !important;
}
.sidebar-collapse::-webkit-scrollbar-thumb:hover {
background: rgba(245, 193, 53, 0.35) !important;
}
/* Sidebar section separator โ subtle divider between menu groups */
.navbar-static-side .nav>li.searchmenu+li.searchmenu {
border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
margin-top: 2px !important;
padding-top: 2px !important;
}
/* Active2 section header styling */
.navbar-static-side .nav>li.active2>a {
color: var(--bc-gold) !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
font-weight: 700 !important;
opacity: 0.6 !important;
padding: 14px 16px 6px 16px !important;
pointer-events: none !important;
}
.navbar-static-side .nav>li.active2>a i {
color: var(--bc-gold) !important;
font-size: 14px !important;
opacity: 0.5 !important;
}
/* ==========================================================================
WHITE AREA FIXES โ Catch-all for remaining white backgrounds
========================================================================== */
/* Main wrapping backgrounds */
#page-wrapper,
.wrapper-content,
.gray-bg,
body.gray-bg,
.dashboard-header {
background-color: #141824 !important;
}
/* High Specificity Module Containers */
body #page-wrapper .ibox,
body #page-wrapper .ibox-content,
body #page-wrapper .ibox-title,
body #page-wrapper .ibox-footer,
.panel,
.panel-body,
.panel-heading,
.panel-footer,
.well,
.jumbotron,
.modal-content,
.modal-header,
.modal-footer {
background-color: var(--bc-card-bg) !important;
color: var(--bc-text-primary) !important;
border-color: rgba(255, 255, 255, 0.06) !important;
}
/* Special Module Headers (like the one in NodeJS screenshot) */
.page-heading,
.dashboard-header,
.white-bg.dashboard-header,
.border-bottom.white-bg,
.row.border-bottom.white-bg {
background-color: #141824 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
/* Loading areas and AJAX containers (targeting the white block with spinner) */
#loading,
#loading-overlay,
.loading-spinner-container,
.sp-container,
.loading-overlay,
.table_cron_loader,
#nodejs_loader_window .table_cron_loader {
background-color: #141824 !important;
}
/* NodeJS Specific UI Elements (high specificity) */
body .nodejs-footer,
body .nodde-js-apps-list .ibox-title,
body #nodejs_form_window .ibox-title,
body .nodde-js-apps-list .ibox-content {
background-color: var(--bc-card-bg) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
/* App Edit header specifically from screenshot */
.row.border-bottom.white-bg.dashboard-header {
background-color: #141824 !important;
border-bottom: 2px solid rgba(245, 193, 53, 0.15) !important;
}
.dir-sel-btn {
background-color: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
}
/* Target deep nested white rows/cols */
.row,
.col-lg-12,
.col-md-12 {
background-color: transparent !important;
}
/* Module iframes and embedded content */
.ibox-content iframe,
.tab-pane iframe {
border-radius: var(--bc-radius-md) !important;
border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
/* Footer / bottom bars */
.footer,
.footer-inner,
.row.border-bottom {
background-color: #141824 !important;
border-color: rgba(255, 255, 255, 0.06) !important;
color: var(--bc-text-secondary) !important;
}
/* Generic white background kills */
.white-bg,
.bg-white,
div.white-bg,
.panel-body.white-bg,
.ibox-content.white-bg {
background-color: var(--bc-card-bg) !important;
}
/* DataTable wrappers */
.dataTables_wrapper,
div.dataTables_wrapper,
.dataTables_scroll,
.dataTables_scrollBody,
.dataTables_scrollHead,
.dataTables_scrollHead .dataTables_scrollHeadInner,
.DTFC_LeftBodyLiner,
.DTFC_RightBodyLiner {
background-color: transparent !important;
color: var(--bc-text-primary) !important;
}
/* Form wrappers and text inputs */
.form-wrapper,
.form-horizontal,
.form-group,
.input-group,
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
background-color: rgba(255, 255, 255, 0.04) !important;
border-color: rgba(245, 193, 53, 0.15) !important;
color: #fff !important;
}
/* Select2 fixes */
.select2-container--default .select2-selection--single {
background-color: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(245, 193, 53, 0.15) !important;
color: #fff !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: #fff !important;
}
/* Breadcrumb / page title bar */
.breadcrumb {
background-color: transparent !important;
color: var(--bc-text-primary) !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
/* Specific content text that stays dark on dark */
body,
p,
span,
div,
td,
th,
li,
a {
transition: color 0.15s ease;
}
/* Catch any inline white from CWP modules */
[style*="background: white"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #ffffff"],
[style*="background-color:#ffffff"],
[style*="background:white"] {
background-color: var(--bc-card-bg) !important;
color: var(--bc-text-primary) !important;
}
/* Ensure images/icons aren't lost in dark backgrounds if they were dark */
img.gray-filter {
filter: invert(1) brightness(2);
}
/* ==========================================================================
๐ฑ MOBILE RESPONSIVENESS (max-width: 768px)
Fixes for sidebar submenus and navbar alignment
========================================================================== */
@media (max-width: 768px) {
/* Force body background to prevent flashes */
body,
#wrapper,
#page-wrapper {
background-color: #141824 !important;
}
/* Fixed Sidebar for Mobile (Inspinia default is off-canvas) */
.navbar-static-side {
width: 250px !important;
position: fixed !important;
background: var(--bc-dark) !important;
transform: translateX(-100%);
transition: transform 0.3s ease !important;
display: block !important;
}
/* Show sidebar on mobile when NOT mini-navbar */
body.body-small:not(.mini-navbar) .navbar-static-side {
transform: translateX(0);
z-index: 2001 !important;
}
/* Force text labels and menu items visible when sidebar is OPEN on mobile */
body.body-small:not(.mini-navbar) .nav-label,
body.body-small:not(.mini-navbar) .navbar-default .nav li a span,
body.body-small:not(.mini-navbar) .profile-element,
body.body-small:not(.mini-navbar) .menugrande {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Ensure the sidebar is full-width (not icon-only) when open on mobile */
body.body-small:not(.mini-navbar) .navbar-static-side {
width: 250px !important;
}
/* Keep spans inline with icons when sidebar is open */
body.body-small:not(.mini-navbar) .navbar-default .nav>li>a span.nav-label {
display: inline !important;
}
/* nav-header (logo area) full display when sidebar open on mobile */
body.body-small:not(.mini-navbar) .nav-header {
padding: 20px 15px !important;
background: transparent !important;
}
body.body-small:not(.mini-navbar) .logo-element {
display: none !important;
}
/* Mobile Submenu Fix โ Inspinia uses .collapse.in on mobile */
#side-menu .nav-second-level.collapse.in,
#side-menu .nav-third-level.collapse.in {
display: block !important;
visibility: visible !important;
height: auto !important;
background: #151a2a !important;
margin: 4px 10px !important;
border-radius: var(--bc-radius-md) !important;
}
/* Top Navbar Alignment โ Prevent overflow and "looking bad" */
.navbar-static-top {
padding: 0 5px !important;
display: flex !important;
align-items: center;
justify-content: space-between;
}
.navbar-header {
width: auto !important;
display: flex !important;
align-items: center;
gap: 10px !important;
}
/* Fixed smaller hamburger for mobile */
.minimalize-styl-2,
.navbar-header .navbar-minimalize {
padding: 6px 12px !important;
margin: 4px !important;
min-height: 34px !important;
font-size: 13px !important;
flex-shrink: 0 !important;
}
.navbar-form-custom {
display: none !important;
/* Hide search on mobile to save space */
}
/* Better alignment for utility icons on mobile */
.nav.navbar-top-links li {
display: inline-block !important;
vertical-align: middle !important;
}
.nav.navbar-top-links>li>a {
padding: 8px 10px !important;
min-height: 50px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
z-index: 5 !important;
}
/* Fix dropdown position and visibility on mobile */
.nav.navbar-top-links .dropdown-menu {
position: absolute !important;
right: 0 !important;
left: auto !important;
top: 50px !important;
/* Height of navbar */
margin-top: 0 !important;
z-index: 2005 !important;
display: none;
}
.nav.navbar-top-links li.open .dropdown-menu {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Prevent parents from clipping dropdowns */
#page-wrapper,
.navbar-static-top,
.navbar-header,
.nav.navbar-top-links {
overflow: visible !important;
}
/* Specifically target language dropdown */
.lang-items-wrapper {
min-width: 220px !important;
max-width: 240px !important;
border-radius: 0 0 12px 12px !important;
}
/* Top Nav Links (Username, Notifications, etc.) */
.nav.navbar-top-links {
margin-right: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 2px !important;
}
.nav.navbar-top-links>li {
margin-left: 0 !important;
margin-right: 0 !important;
display: inline-block !important;
/* Back to inline-block for proper dropdown positioning */
vertical-align: middle !important;
position: relative !important;
}
.nav.navbar-top-links>li>span,
.nav.navbar-top-links>li>a {
padding: 8px 10px !important;
font-size: 11px !important;
display: block !important;
min-height: 50px !important;
line-height: 34px !important;
}
/* Icon sizes on mobile - larger touchable icons */
.nav.navbar-top-links>li>a i {
font-size: 1.25rem !important;
transition: transform 0.2s ease;
}
.nav.navbar-top-links>li>a:active i {
transform: scale(0.9);
}
/* Labels on Mobile - save space */
.nav.navbar-top-links>li .label,
.navbar-top-links li span.label {
padding: 4px 8px !important;
font-size: 8.5px !important;
margin-left: 2px !important;
margin-right: 2px !important;
border-radius: 4px !important;
}
/* Hide labels on very small screens to prevent messy overlap */
@media (max-width: 480px) {
.nav.navbar-top-links>li:has(.label) {
display: none !important;
}
}
/* Flags and small images in top nav - centered and visible */
.nav.navbar-top-links img {
width: 19px !important;
margin-right: 0 !important;
vertical-align: middle !important;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* Spacing for individual dropdowns */
.nav.navbar-top-links>li.dropdown {
margin-left: 1px !important;
}
/* Remove separator on mobile */
.nav.navbar-top-links>li.dropdown:first-of-type,
.nav.navbar-top-links>li:nth-last-child(5) {
margin-left: 0 !important;
padding-left: 0 !important;
border-left: none !important;
}
/* Hide Logout TEXT on mobile, keep icon */
.nav.navbar-top-links li a[onclick*="logon"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
padding: 0 !important;
overflow: hidden !important;
}
.nav.navbar-top-links li a[onclick*="logon"] i {
font-size: 1.4rem !important;
margin: 0 !important;
display: block !important;
}
/* More aggressive logout text removal */
.nav.navbar-top-links li a[onclick*="logon"] {
color: transparent !important;
text-indent: -9999px !important;
}
.nav.navbar-top-links li a[onclick*="logon"] i {
color: #fff !important;
text-indent: 0 !important;
float: none !important;
}
/* Welcome message text usually overflows, hide part of it or wrap */
.welcome-message {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Logo adjustment in Sidebar for mobile */
.nav-header {
padding: 20px 15px !important;
}
#logomenu {
width: 160px !important;
}
/* Fix for content being cut off on mobile */
#page-wrapper {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
.wrapper-content {
padding: 15px 12px !important;
}
/* Ensure modals fit mobile screen */
.modal-dialog {
margin: 10px !important;
width: calc(100% - 20px) !important;
}
}