/* ============================================================
THEME V3 — Premium Indigo
A ground-up premium admin dashboard skin inspired by modern
SaaS products (Stripe/Linear/Vercel style). Fresh palette,
layered shadows, generous spacing, refined typography.
Scope: Applied only when theme_settings.ui_theme_version = 'v3'
============================================================ */
/* ═══════════════════════════════════════════════════
1. DESIGN TOKENS
═══════════════════════════════════════════════════ */
:root {
/* Indigo — primary */
--v3-primary: #4f46e5;
--v3-primary-dark: #3730a3;
--v3-primary-darker: #1e1b4b;
--v3-primary-light: #6366f1;
--v3-primary-50: #eef2ff;
--v3-primary-100: #e0e7ff;
--v3-primary-200: #c7d2fe;
--v3-primary-soft: rgba(79, 70, 229, 0.08);
/* Cyan — accent (data / secondary CTAs) */
--v3-accent: #06b6d4;
--v3-accent-dark: #0e7490;
--v3-accent-light: #22d3ee;
--v3-accent-50: #ecfeff;
/* Orange — vibrant highlight */
--v3-orange: #f97316;
--v3-orange-light: #fb923c;
--v3-orange-50: #fff7ed;
/* Semantic */
--v3-success: #10b981;
--v3-success-dark: #059669;
--v3-success-50: #ecfdf5;
--v3-danger: #ef4444;
--v3-danger-dark: #b91c1c;
--v3-danger-50: #fef2f2;
--v3-warning: #f59e0b;
--v3-warning-50: #fffbeb;
--v3-info: #0ea5e9;
/* Neutrals (warm cool slate) */
--v3-bg: #f6f8fc;
--v3-surface: #ffffff;
--v3-surface-2: #fafbff;
--v3-surface-alt: #f1f3f9;
--v3-border: #e5e7eb;
--v3-border-soft: #eef0f4;
--v3-border-strong: #d1d5db;
--v3-text: #111827;
--v3-text-muted: #6b7280;
--v3-text-soft: #9ca3af;
/* Sidebar — deep slate to deep indigo */
--v3-sidebar-top: #0f172a;
--v3-sidebar-bottom: #1e1b4b;
--v3-sidebar-active: #4f46e5;
/* Shadows — layered indigo tint */
--v3-shadow-xs: 0 1px 2px 0 rgba(17, 24, 39, 0.04);
--v3-shadow-sm: 0 1px 3px 0 rgba(17, 24, 39, 0.06), 0 1px 2px -1px rgba(17, 24, 39, 0.04);
--v3-shadow: 0 4px 10px -2px rgba(17, 24, 39, 0.07), 0 2px 4px -1px rgba(17, 24, 39, 0.04);
--v3-shadow-md: 0 10px 20px -4px rgba(17, 24, 39, 0.08), 0 4px 8px -2px rgba(17, 24, 39, 0.05);
--v3-shadow-lg: 0 20px 40px -8px rgba(17, 24, 39, 0.12), 0 8px 16px -4px rgba(17, 24, 39, 0.08);
--v3-shadow-primary: 0 8px 20px -4px rgba(79, 70, 229, 0.35);
--v3-shadow-accent: 0 8px 20px -4px rgba(6, 182, 212, 0.35);
/* Radius */
--v3-radius-xs: 6px;
--v3-radius-sm: 8px;
--v3-radius: 12px;
--v3-radius-lg: 16px;
--v3-radius-xl: 20px;
/* Motion */
--v3-ease: cubic-bezier(0.4, 0, 0.2, 1);
--v3-trans: all 0.2s var(--v3-ease);
--v3-trans-slow: all 0.35s var(--v3-ease);
}
/* ═══════════════════════════════════════════════════
2. TYPOGRAPHY + BASE
═══════════════════════════════════════════════════ */
body, html body {
font-family: 'Nunito', 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
background: var(--v3-bg) !important;
color: var(--v3-text) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'cv02','cv03','cv04','cv11';
}
h1, h2, h3, h4, h5, h6,
.panel-title, .page-title {
font-family: 'Nunito', 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif !important;
color: var(--v3-text) !important;
font-weight: 700 !important;
letter-spacing: -0.015em;
}
/* ═══════════════════════════════════════════════════
3. SIDEBAR — Deep premium gradient
═══════════════════════════════════════════════════ */
/* Max specificity outer — beats every legacy html.* variant */
html.no-overflowscrolling.sidebar-light:not(.dark) .sidebar-left,
html.sidebar-light:not(.dark) #sidebar-left,
html.sidebar-light:not(.dark) .sidebar-left,
html.sidebar-light #sidebar-left,
html.mobile-device.sidebar-light .sidebar-left,
html .sidebar-left,
#sidebar-left,
.sidebar-left {
background: linear-gradient(180deg, var(--v3-sidebar-top) 0%, var(--v3-sidebar-bottom) 100%) !important;
background-color: var(--v3-sidebar-top) !important;
border-right: 0 !important;
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.02), 4px 0 24px -8px rgba(15, 23, 42, 0.3) !important;
}
/* Nano wrapper — force transparent so outer gradient shows */
html.no-overflowscrolling.sidebar-light:not(.dark) .sidebar-left .nano,
html.no-overflowscrolling.sidebar-light:not(.dark) .sidebar-left .nano-content,
html.no-overflowscrolling.sidebar-light:not(.dark) .sidebar-left .nano-pane,
html.sidebar-light:not(.dark) .sidebar-left .nano,
html.sidebar-light:not(.dark) .sidebar-left .nano-content,
html.sidebar-light:not(.dark).sidebar-left-collapsed .sidebar-left .nano,
html.scroll .sidebar-left .nano,
html.boxed .sidebar-left .nano,
html.fixed .sidebar-left .nano,
html.fixed .sidebar-left .nano-content,
html.sidebar-left-big-icons .sidebar-left .nano,
html .sidebar-left .nano,
html .sidebar-left .nano .nano-content,
html .sidebar-left .nano-pane,
.sidebar-left .nano,
.sidebar-left .nano-content,
.sidebar-left .nano-pane {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
/* Sidebar section header "MAIN" */
.sidebar-left .sidebar-header,
html.sidebar-light:not(.dark) .sidebar-left .sidebar-header .sidebar-title,
.sidebar-left .sidebar-title {
background: transparent !important;
color: rgba(255, 255, 255, 0.35) !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 20px 24px 8px !important;
border: 0 !important;
}
/* Top-level menu links */
#menu.nav-main > ul > li > a,
.sidebar-left .nav-main > li > a,
.sidebar-left ul.nav.nav-main > li > a {
color: rgba(255, 255, 255, 0.70) !important;
font-weight: 500 !important;
font-size: 13.5px !important;
padding: 11px 16px !important;
margin: 2px 12px !important;
border-radius: 10px !important;
transition: var(--v3-trans) !important;
background: transparent !important;
border-left: 0 !important;
display: flex;
align-items: center;
}
/* Hover — subtle left slide */
.sidebar-left .nav-main > li > a:hover,
.sidebar-left ul.nav.nav-main > li > a:hover,
html.sidebar-light:not(.dark) ul.nav-main > li > a:hover,
html.sidebar-light:not(.dark) ul.nav-main > li > a:focus,
html ul.nav-main > li > a:hover,
html ul.nav-main > li > a:focus {
background: rgba(255, 255, 255, 0.06) !important;
background-color: rgba(255, 255, 255, 0.06) !important;
color: #ffffff !important;
transform: translateX(2px);
}
/* Active — indigo glow pill */
.sidebar-left .nav-main > li.nav-active > a,
.sidebar-left .nav-main > li.nav-expanded > a,
.sidebar-left ul.nav.nav-main > li.nav-active > a,
html.sidebar-light:not(.dark) ul.nav-main > li.nav-expanded > a,
html.sidebar-light:not(.dark) ul.nav-main > li.nav-active > a,
html ul.nav-main > li.nav-active > a,
html ul.nav-main > li.nav-expanded > a {
background: linear-gradient(135deg, var(--v3-primary) 0%, var(--v3-primary-light) 100%) !important;
background-color: var(--v3-primary) !important;
color: #ffffff !important;
box-shadow: 0 6px 16px -4px rgba(79, 70, 229, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
/* Sidebar icons */
html ul.nav-main li a i,
html ul.nav-main li a > i,
.sidebar-left .nav-main > li > a > i,
.sidebar-left ul.nav.nav-main > li > a > i,
.sidebar-left ul.nav-main li a i {
color: rgba(255, 255, 255, 0.75) !important;
opacity: 1 !important;
font-size: 16px !important;
margin-right: 12px !important;
width: 22px;
text-align: center;
display: inline-block !important;
background: none !important;
box-shadow: none !important;
transition: var(--v3-trans) !important;
}
.sidebar-left ul.nav-main > li.nav-active > a > i,
.sidebar-left ul.nav-main > li.nav-expanded > a > i,
html ul.nav-main > li.nav-active > a > i {
color: #ffffff !important;
}
/* Submenu (nav-children) */
html.sidebar-light:not(.dark) ul.nav-main li .nav-children,
html ul.nav-main li .nav-children,
.sidebar-left .nav-children,
.sidebar-left ul.nav.nav-children {
background: rgba(0, 0, 0, 0.25) !important;
background-color: rgba(0, 0, 0, 0.25) !important;
box-shadow: none !important;
margin: 4px 12px !important;
padding: 4px 0 !important;
border-radius: 10px !important;
}
.sidebar-left .nav-children > li > a,
.sidebar-left ul.nav.nav-children > li > a,
html.sidebar-light:not(.dark) ul.nav-main li a {
color: rgba(255, 255, 255, 0.60) !important;
font-size: 12.5px !important;
padding: 8px 16px 8px 44px !important;
transition: var(--v3-trans) !important;
background: transparent !important;
border: 0 !important;
}
html.sidebar-light:not(.dark) ul.nav-main li .nav-children li a:hover,
html.sidebar-light:not(.dark) ul.nav-main li .nav-children li a:focus,
html ul.nav-main li .nav-children li a:hover,
.sidebar-left .nav-children > li > a:hover {
color: #ffffff !important;
background: rgba(255, 255, 255, 0.05) !important;
padding-left: 48px !important;
}
.sidebar-left .nav-children > li.nav-active > a {
color: var(--v3-accent-light) !important;
background: rgba(6, 182, 212, 0.10) !important;
font-weight: 600 !important;
}
.sidebar-left .nav-children > li > a > i.fa-caret-right {
color: rgba(255, 255, 255, 0.25) !important;
font-size: 9px !important;
margin-right: 10px !important;
}
.sidebar-left .nav-children > li.nav-active > a > i.fa-caret-right {
color: var(--v3-accent-light) !important;
}
/* ═══════════════════════════════════════════════════
4. TOPBAR / HEADER
═══════════════════════════════════════════════════ */
#header, .header, header.header {
background: var(--v3-surface) !important;
border-bottom: 1px solid var(--v3-border) !important;
box-shadow: var(--v3-shadow-xs) !important;
backdrop-filter: saturate(180%) blur(8px);
-webkit-backdrop-filter: saturate(180%) blur(8px);
}
.header .logo-container,
.header .sidebar-toggle {
background: transparent !important;
border: 0 !important;
}
.header-right .notifications .dropdown-toggle,
.header-right .userbox .dropdown-toggle,
.header-right .separator {
color: var(--v3-text-muted) !important;
transition: var(--v3-trans) !important;
}
.header-right .notifications .dropdown-toggle:hover,
.header-right .userbox .dropdown-toggle:hover {
color: var(--v3-primary) !important;
}
.header-right .badge,
.header-right .notifications .badge {
background: var(--v3-orange) !important;
color: #fff !important;
border-radius: 12px !important;
font-weight: 700 !important;
font-size: 10px !important;
padding: 2px 7px !important;
box-shadow: 0 2px 6px -1px rgba(249, 115, 22, 0.45) !important;
}
/* Search input in header */
.header form.sidebar-search input[type="text"],
.header input[type="search"] {
background: var(--v3-surface-alt) !important;
border: 1px solid transparent !important;
border-radius: 10px !important;
color: var(--v3-text) !important;
padding: 8px 14px !important;
transition: var(--v3-trans) !important;
}
.header form.sidebar-search input[type="text"]:focus,
.header input[type="search"]:focus {
background: var(--v3-surface) !important;
border-color: var(--v3-primary-200) !important;
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.08) !important;
}
/* ═══════════════════════════════════════════════════
5. CONTENT + PAGE HEADER
═══════════════════════════════════════════════════ */
.content-body, section.body-sign, .inner-wrapper {
background: var(--v3-bg) !important;
}
.page-header {
border-bottom: 0 !important;
padding: 12px 18px !important;
margin: 0 0 14px 0 !important;
background: var(--v3-surface) !important;
border-radius: var(--v3-radius-lg) !important;
box-shadow: var(--v3-shadow-sm) !important;
position: relative;
overflow: visible !important;
height: auto !important;
min-height: 0 !important;
box-sizing: border-box !important;
}
.page-header::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--v3-primary) 0%, var(--v3-accent) 100%);
border-radius: 4px 0 0 4px;
}
.page-header h2 {
color: var(--v3-text) !important;
font-weight: 800 !important;
font-size: 18px !important;
line-height: 1.5 !important;
margin: 0 !important;
padding: 2px 0 !important;
letter-spacing: -0.025em;
display: block !important;
float: none !important;
height: auto !important;
border-bottom: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.page-header h2 > i,
.page-header h2 > .fas,
.page-header h2 > .fa {
color: var(--v3-primary) !important;
margin-right: 10px !important;
font-size: 20px !important;
}
.breadcrumb {
background: transparent !important;
padding: 4px 0 !important;
font-size: 13px !important;
margin: 0 !important;
}
.breadcrumb a, .breadcrumb > li {
color: var(--v3-text-muted) !important;
}
.breadcrumb > .active {
color: var(--v3-primary) !important;
font-weight: 600 !important;
}
/* ═══════════════════════════════════════════════════
6. PANELS / CARDS
═══════════════════════════════════════════════════ */
.panel, .panel-default, section.panel {
background: var(--v3-surface) !important;
border: 1px solid var(--v3-border-soft) !important;
border-radius: var(--v3-radius-lg) !important;
box-shadow: var(--v3-shadow-sm) !important;
margin-bottom: 14px !important;
overflow: hidden;
transition: var(--v3-trans) !important;
}
.panel-heading {
background: transparent !important;
border-bottom: 1px solid var(--v3-border-soft) !important;
padding: 10px 16px !important;
border-radius: var(--v3-radius-lg) var(--v3-radius-lg) 0 0 !important;
position: relative;
}
.panel-title {
color: var(--v3-text) !important;
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: -0.01em;
}
.panel-body {
padding: 14px 16px !important;
}
.panel.pg-fw {
border-radius: var(--v3-radius-lg) !important;
box-shadow: var(--v3-shadow-sm) !important;
border: 1px solid var(--v3-border-soft) !important;
}
.panel.pg-fw:hover {
box-shadow: var(--v3-shadow-md) !important;
border-color: var(--v3-primary-100) !important;
}
/* ═══════════════════════════════════════════════════
7. DASHBOARD COUNTER TILES
═══════════════════════════════════════════════════ */
.widget-col-in {
padding: 8px !important;
position: relative;
}
.widget-row-in > div .panel-body {
background: var(--v3-surface) !important;
border-radius: var(--v3-radius-lg) !important;
border: 1px solid var(--v3-border-soft) !important;
margin: 6px !important;
transition: var(--v3-trans-slow);
padding: 20px !important;
position: relative;
overflow: hidden;
}
.widget-row-in > div .panel-body::before {
content: "";
position: absolute;
top: -40px; right: -40px;
width: 110px; height: 110px;
border-radius: 50%;
opacity: 0.08;
pointer-events: none;
}
.widget-row-in > div:nth-child(1) .panel-body::before { background: var(--v3-primary); }
.widget-row-in > div:nth-child(2) .panel-body::before { background: var(--v3-success); }
.widget-row-in > div:nth-child(3) .panel-body::before { background: var(--v3-accent); }
.widget-row-in > div:nth-child(4) .panel-body::before { background: var(--v3-orange); }
.widget-row-in > div .panel-body:hover {
transform: translateY(-4px);
box-shadow: var(--v3-shadow-md) !important;
border-color: var(--v3-primary-100) !important;
}
/* Icon chips — soft background, no gradient */
.widget-row-in .panel-body .widget-col-in > div > i.fas,
.widget-row-in .panel-body .widget-col-in > div > i.fa {
width: 48px !important;
height: 48px !important;
border-radius: 14px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
font-size: 20px !important;
margin-bottom: 8px;
transition: var(--v3-trans) !important;
}
.widget-row-in > div:nth-child(1) .widget-col-in > div > i.fas,
.widget-row-in > div:nth-child(1) .widget-col-in > div > i.fa {
background: var(--v3-primary-50) !important;
color: var(--v3-primary) !important;
}
.widget-row-in > div:nth-child(2) .widget-col-in > div > i.fas,
.widget-row-in > div:nth-child(2) .widget-col-in > div > i.fa {
background: var(--v3-success-50) !important;
color: var(--v3-success) !important;
}
.widget-row-in > div:nth-child(3) .widget-col-in > div > i.fas,
.widget-row-in > div:nth-child(3) .widget-col-in > div > i.fa {
background: var(--v3-accent-50) !important;
color: var(--v3-accent-dark) !important;
}
.widget-row-in > div:nth-child(4) .widget-col-in > div > i.fas,
.widget-row-in > div:nth-child(4) .widget-col-in > div > i.fa {
background: var(--v3-orange-50) !important;
color: var(--v3-orange) !important;
}
.widget-row-in > div .panel-body:hover .widget-col-in > div > i.fas,
.widget-row-in > div .panel-body:hover .widget-col-in > div > i.fa {
transform: scale(1.08) rotate(-4deg);
}
.widget-col-in h5 {
color: var(--v3-text-muted) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.3px !important;
text-transform: uppercase !important;
margin-top: 8px !important;
}
.widget-col-in .counter,
.widget-col-in h3.counter {
color: var(--v3-text) !important;
font-weight: 800 !important;
font-size: 32px !important;
letter-spacing: -0.03em;
line-height: 1.1 !important;
font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
}
.widget-row-in > div .box-top-line {
background: var(--v3-surface-alt) !important;
border: 0 !important;
border-radius: 12px !important;
height: 6px !important;
position: relative;
overflow: hidden;
margin-top: 14px !important;
padding: 0 !important;
}
.widget-row-in > div .box-top-line::after {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 70%;
border-radius: 12px;
}
.widget-row-in > div:nth-child(1) .box-top-line::after { background: linear-gradient(90deg, var(--v3-primary), var(--v3-primary-light)); }
.widget-row-in > div:nth-child(2) .box-top-line::after { background: linear-gradient(90deg, var(--v3-success), #34d399); }
.widget-row-in > div:nth-child(3) .box-top-line::after { background: linear-gradient(90deg, var(--v3-accent), var(--v3-accent-light)); }
.widget-row-in > div:nth-child(4) .box-top-line::after { background: linear-gradient(90deg, var(--v3-orange), var(--v3-orange-light)); }
.widget-row-in > div .box-top-line .text-uppercase {
position: absolute;
top: -22px;
right: 0;
font-size: 10px !important;
letter-spacing: 1.2px !important;
color: var(--v3-text-soft) !important;
font-weight: 700 !important;
}
/* ═══════════════════════════════════════════════════
8. BUTTONS
═══════════════════════════════════════════════════ */
.btn {
border-radius: 8px !important;
font-weight: 600 !important;
padding: 6px 14px !important;
transition: var(--v3-trans) !important;
border-width: 1px !important;
letter-spacing: 0.005em;
font-size: 13px !important;
}
.btn-primary {
background: var(--v3-primary) !important;
border-color: var(--v3-primary) !important;
color: #ffffff !important;
box-shadow: 0 1px 2px 0 rgba(79, 70, 229, 0.15) !important;
}
.btn-primary:hover, .btn-primary:focus {
background: var(--v3-primary-dark) !important;
border-color: var(--v3-primary-dark) !important;
box-shadow: var(--v3-shadow-primary) !important;
transform: translateY(-1px);
}
.btn-success {
background: var(--v3-success) !important;
border-color: var(--v3-success) !important;
color: #fff !important;
}
.btn-success:hover, .btn-success:focus {
background: var(--v3-success-dark) !important;
border-color: var(--v3-success-dark) !important;
box-shadow: 0 8px 20px -4px rgba(16, 185, 129, 0.40) !important;
transform: translateY(-1px);
}
.btn-danger {
background: var(--v3-danger) !important;
border-color: var(--v3-danger) !important;
color: #fff !important;
}
.btn-danger:hover {
background: var(--v3-danger-dark) !important;
border-color: var(--v3-danger-dark) !important;
box-shadow: 0 8px 20px -4px rgba(239, 68, 68, 0.40) !important;
transform: translateY(-1px);
}
.btn-warning {
background: var(--v3-warning) !important;
border-color: var(--v3-warning) !important;
color: #fff !important;
}
.btn-info {
background: var(--v3-accent) !important;
border-color: var(--v3-accent) !important;
color: #fff !important;
}
.btn-info:hover {
background: var(--v3-accent-dark) !important;
border-color: var(--v3-accent-dark) !important;
box-shadow: var(--v3-shadow-accent) !important;
transform: translateY(-1px);
}
.btn-default, .btn-white {
background: var(--v3-surface) !important;
color: var(--v3-text) !important;
border-color: var(--v3-border-strong) !important;
}
.btn-default:hover {
background: var(--v3-surface-alt) !important;
border-color: var(--v3-primary-200) !important;
color: var(--v3-primary) !important;
}
/* ═══════════════════════════════════════════════════
9. FORMS
═══════════════════════════════════════════════════ */
.form-control, .form-control:focus,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="date"],
textarea, select {
border-radius: 8px !important;
border: 1px solid var(--v3-border-strong) !important;
background: var(--v3-surface) !important;
color: var(--v3-text) !important;
transition: var(--v3-trans) !important;
padding: 6px 12px !important;
font-size: 13px !important;
line-height: 1.45 !important;
}
.form-control:focus, input:focus, textarea:focus, select:focus {
border-color: var(--v3-primary) !important;
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.10) !important;
outline: 0 !important;
}
label, .control-label {
color: var(--v3-text) !important;
font-weight: 600 !important;
font-size: 13px !important;
margin-bottom: 6px !important;
}
/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
border: 1px solid var(--v3-border-strong) !important;
border-radius: 8px !important;
min-height: 32px !important;
background: var(--v3-surface) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 30px !important;
padding-left: 10px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 30px !important;
}
.select2-container--default.select2-container--focus .select2-selection {
border-color: var(--v3-primary) !important;
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.10) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: var(--v3-primary) !important;
color: #fff !important;
}
.select2-dropdown {
border: 1px solid var(--v3-border-strong) !important;
border-radius: 12px !important;
box-shadow: var(--v3-shadow-md) !important;
overflow: hidden;
}
/* ═══════════════════════════════════════════════════
10. TABLES (DataTables)
═══════════════════════════════════════════════════ */
table.dataTable, .table {
border-collapse: separate !important;
border-spacing: 0 !important;
background: var(--v3-surface) !important;
}
table.dataTable thead th, .table thead th,
table.dataTable > thead > tr > th {
background: var(--v3-surface-2) !important;
color: var(--v3-text-muted) !important;
font-weight: 700 !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.6px !important;
border-bottom: 1px solid var(--v3-border-soft) !important;
border-top: 0 !important;
padding: 8px 10px !important;
}
table.dataTable tbody tr, .table tbody tr {
transition: var(--v3-trans);
}
table.dataTable tbody tr:hover, .table tbody tr:hover {
background: var(--v3-primary-soft) !important;
}
table.dataTable tbody td, .table tbody td {
color: var(--v3-text) !important;
border-top: 1px solid var(--v3-border-soft) !important;
padding: 7px 10px !important;
font-size: 13px !important;
line-height: 1.35 !important;
vertical-align: middle !important;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
color: var(--v3-text-muted) !important;
font-size: 12.5px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--v3-primary) !important;
color: #fff !important;
border: 1px solid var(--v3-primary) !important;
border-radius: 8px !important;
font-weight: 600 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
border-radius: 8px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--v3-primary-soft) !important;
color: var(--v3-primary) !important;
border-color: var(--v3-primary-100) !important;
}
/* ═══════════════════════════════════════════════════
11. BADGES / LABELS
═══════════════════════════════════════════════════ */
.badge, .label {
border-radius: 20px !important;
font-weight: 600 !important;
padding: 4px 10px !important;
font-size: 11px !important;
letter-spacing: 0.3px;
display: inline-flex;
align-items: center;
}
.badge-primary, .label-primary { background: var(--v3-primary-50) !important; color: var(--v3-primary) !important; }
.badge-success, .label-success { background: var(--v3-success-50) !important; color: var(--v3-success-dark) !important; }
.badge-danger, .label-danger { background: var(--v3-danger-50) !important; color: var(--v3-danger-dark) !important; }
.badge-warning, .label-warning { background: var(--v3-warning-50) !important; color: #92400e !important; }
.badge-info, .label-info { background: var(--v3-accent-50) !important; color: var(--v3-accent-dark) !important; }
/* ═══════════════════════════════════════════════════
12. ALERTS
═══════════════════════════════════════════════════ */
.alert {
border-radius: var(--v3-radius) !important;
border: 1px solid transparent !important;
padding: 14px 18px !important;
font-size: 13.5px !important;
display: flex;
align-items: center;
gap: 10px;
}
.alert-success { background: var(--v3-success-50) !important; color: var(--v3-success-dark) !important; border-color: rgba(16, 185, 129, 0.18) !important; }
.alert-danger { background: var(--v3-danger-50) !important; color: var(--v3-danger-dark) !important; border-color: rgba(239, 68, 68, 0.18) !important; }
.alert-warning { background: var(--v3-warning-50) !important; color: #92400e !important; border-color: rgba(245, 158, 11, 0.18) !important; }
.alert-info { background: var(--v3-primary-50) !important; color: var(--v3-primary) !important; border-color: var(--v3-primary-100) !important; }
/* ═══════════════════════════════════════════════════
13. MODALS
═══════════════════════════════════════════════════ */
.modal-content {
border-radius: var(--v3-radius-xl) !important;
border: 0 !important;
box-shadow: var(--v3-shadow-lg) !important;
}
.modal-header {
background: var(--v3-surface) !important;
border-bottom: 1px solid var(--v3-border-soft) !important;
border-radius: var(--v3-radius-xl) var(--v3-radius-xl) 0 0 !important;
padding: 20px 24px !important;
}
.modal-header .modal-title {
color: var(--v3-text) !important;
font-weight: 700 !important;
font-size: 16px;
}
.modal-body {
padding: 22px 24px !important;
}
.modal-footer {
border-top: 1px solid var(--v3-border-soft) !important;
padding: 14px 24px !important;
background: var(--v3-surface-2) !important;
}
/* ═══════════════════════════════════════════════════
14. NAV TABS / PILLS
═══════════════════════════════════════════════════ */
.nav-tabs {
border-bottom: 1px solid var(--v3-border) !important;
}
.nav-tabs > li > a {
color: var(--v3-text-muted) !important;
border: 0 !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
padding: 10px 18px !important;
font-weight: 600 !important;
background: transparent !important;
margin: 0 4px !important;
transition: var(--v3-trans);
}
.nav-tabs > li > a:hover {
color: var(--v3-primary) !important;
background: transparent !important;
border-bottom-color: var(--v3-primary-100) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: var(--v3-primary) !important;
border-bottom-color: var(--v3-primary) !important;
background: transparent !important;
font-weight: 700 !important;
}
.nav-pills > li > a {
border-radius: 10px !important;
color: var(--v3-text-muted) !important;
padding: 8px 14px !important;
font-weight: 500 !important;
}
.nav-pills > li.active > a {
background: var(--v3-primary) !important;
color: #fff !important;
}
/* ═══════════════════════════════════════════════════
15. LINKS
═══════════════════════════════════════════════════ */
a { color: var(--v3-primary) !important; transition: var(--v3-trans); }
a:hover, a:focus { color: var(--v3-primary-dark) !important; text-decoration: none !important; }
/* ═══════════════════════════════════════════════════
16. DROPDOWN MENUS
═══════════════════════════════════════════════════ */
.dropdown-menu {
background: var(--v3-surface) !important;
border: 1px solid var(--v3-border-soft) !important;
border-radius: var(--v3-radius) !important;
box-shadow: var(--v3-shadow-md) !important;
padding: 6px !important;
margin-top: 6px !important;
}
.dropdown-menu > li > a,
.dropdown-menu > .dropdown-item,
.dropdown-menu li > a,
.dropdown-menu ul > li > a,
.userbox .dropdown-menu ul > li:not(.user-p-box) a,
.header-menubox a,
.header-menubox .hbox ul li a {
color: var(--v3-text) !important;
padding: 9px 14px !important;
font-size: 13.5px !important;
border-radius: 8px !important;
transition: var(--v3-trans) !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .dropdown-item:hover,
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-menu ul > li > a:hover,
.dropdown-menu ul > li > a:focus,
.userbox.open .dropdown-menu ul > li:not(.user-p-box) a:hover,
.userbox.open .dropdown-menu ul > li:not(.user-p-box) a:focus,
.header-menu .open .hbox ul li a:hover,
.header-menubox a:hover,
.header-menubox a:focus {
background: var(--v3-primary-soft) !important;
color: var(--v3-primary) !important;
}
.dropdown-menu .divider {
background: var(--v3-border-soft) !important;
margin: 6px 0 !important;
height: 1px;
}
/* Icons inside dropdown items — inherit text color so they follow hover state */
.dropdown-menu li > a > i,
.userbox .dropdown-menu ul > li a > i,
.header-menubox a > i { color: inherit !important; }
/* ═══════════════════════════════════════════════════
17. TOOLTIPS + POPOVERS
═══════════════════════════════════════════════════ */
.tooltip-inner {
background: var(--v3-text) !important;
color: #ffffff !important;
border-radius: 8px !important;
font-size: 12px !important;
padding: 7px 11px !important;
font-weight: 500;
}
.tooltip.top .tooltip-arrow { border-top-color: var(--v3-text) !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--v3-text) !important; }
.tooltip.left .tooltip-arrow { border-left-color: var(--v3-text) !important; }
.tooltip.right .tooltip-arrow { border-right-color: var(--v3-text) !important; }
.popover {
background: var(--v3-surface) !important;
border: 1px solid var(--v3-border-soft) !important;
border-radius: var(--v3-radius) !important;
box-shadow: var(--v3-shadow-md) !important;
}
.popover-title {
background: var(--v3-surface-2) !important;
border-bottom: 1px solid var(--v3-border-soft) !important;
color: var(--v3-text) !important;
font-weight: 700 !important;
}
/* ═══════════════════════════════════════════════════
18. PAGINATION (Bootstrap non-DataTables)
═══════════════════════════════════════════════════ */
.pagination > li > a, .pagination > li > span {
color: var(--v3-primary) !important;
background: var(--v3-surface) !important;
border: 1px solid var(--v3-border) !important;
margin: 0 3px !important;
border-radius: 8px !important;
transition: var(--v3-trans);
}
.pagination > li > a:hover {
background: var(--v3-primary-soft) !important;
color: var(--v3-primary) !important;
border-color: var(--v3-primary-100) !important;
}
.pagination > .active > a,
.pagination > .active > span {
background: var(--v3-primary) !important;
border-color: var(--v3-primary) !important;
color: #fff !important;
box-shadow: var(--v3-shadow-primary);
}
/* ═══════════════════════════════════════════════════
19. PROGRESS
═══════════════════════════════════════════════════ */
.progress {
background: var(--v3-surface-alt) !important;
border-radius: 10px !important;
height: 8px !important;
box-shadow: none !important;
overflow: hidden;
}
.progress-bar {
background: linear-gradient(90deg, var(--v3-primary), var(--v3-primary-light)) !important;
box-shadow: none !important;
border-radius: 10px;
}
.progress-bar-success { background: linear-gradient(90deg, var(--v3-success), #34d399) !important; }
.progress-bar-danger { background: linear-gradient(90deg, var(--v3-danger), #f87171) !important; }
.progress-bar-warning { background: linear-gradient(90deg, var(--v3-warning), #fbbf24) !important; }
.progress-bar-info { background: linear-gradient(90deg, var(--v3-accent), var(--v3-accent-light)) !important; }
/* ═══════════════════════════════════════════════════
20. USERROLE WIDGETS
═══════════════════════════════════════════════════ */
.box-top-line {
border-top: 3px solid var(--v3-primary) !important;
border-radius: var(--v3-radius) !important;
background: var(--v3-surface) !important;
box-shadow: var(--v3-shadow-sm) !important;
}
.icon-holder {
border-radius: 14px !important;
width: 56px; height: 56px;
display: inline-flex !important;
align-items: center; justify-content: center;
font-size: 22px;
}
.icon-holder.bg-primary { background: var(--v3-primary-50) !important; color: var(--v3-primary) !important; }
.icon-holder.bg-success { background: var(--v3-success-50) !important; color: var(--v3-success) !important; }
.icon-holder.bg-danger { background: var(--v3-danger-50) !important; color: var(--v3-danger) !important; }
.icon-holder.bg-warning { background: var(--v3-warning-50) !important; color: var(--v3-warning) !important; }
.icon-holder.bg-info { background: var(--v3-accent-50) !important; color: var(--v3-accent-dark) !important; }
/* ═══════════════════════════════════════════════════
21. SWEETALERT
═══════════════════════════════════════════════════ */
.swal-modal, .sweet-alert {
border-radius: var(--v3-radius-xl) !important;
background: var(--v3-surface) !important;
box-shadow: var(--v3-shadow-lg) !important;
}
.swal-title, .sweet-alert h2 {
color: var(--v3-text) !important;
font-weight: 700 !important;
}
.swal-text, .sweet-alert p { color: var(--v3-text-muted) !important; }
.swal-button--confirm, .sweet-alert .btn-success {
background: var(--v3-primary) !important;
border-color: var(--v3-primary) !important;
border-radius: 10px !important;
}
.swal-button--cancel, .sweet-alert .btn-default {
background: var(--v3-surface-alt) !important;
color: var(--v3-text) !important;
border-radius: 10px !important;
}
/* ═══════════════════════════════════════════════════
22. LOGIN PAGE
═══════════════════════════════════════════════════ */
.auth-main {
background: linear-gradient(135deg, var(--v3-sidebar-top) 0%, var(--v3-sidebar-bottom) 100%) !important;
min-height: 100vh !important;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.auth-main::before, .auth-main::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.3;
pointer-events: none;
}
.auth-main::before {
width: 400px; height: 400px;
background: var(--v3-primary);
top: -100px; right: -100px;
}
.auth-main::after {
width: 500px; height: 500px;
background: var(--v3-accent);
bottom: -150px; left: -150px;
}
.auth-main .slideIn {
background: var(--v3-surface) !important;
border-radius: var(--v3-radius-xl) !important;
box-shadow: 0 30px 60px -16px rgba(15, 23, 42, 0.40) !important;
overflow: hidden;
margin: 20px auto !important;
position: relative;
z-index: 2;
}
.auth-main .image-area {
background: linear-gradient(135deg, var(--v3-primary) 0%, var(--v3-primary-dark) 100%) !important;
color: #fff !important;
padding: 40px 24px !important;
min-height: 100%;
}
.auth-main .image-area h2,
.auth-main .image-area .image-hader h2,
.auth-main .image-area .address p { color: #fff !important; }
.auth-main .image-area .f-social-links a {
color: rgba(255, 255, 255, 0.85) !important;
background: rgba(255, 255, 255, 0.10) !important;
border-radius: 50% !important;
width: 36px; height: 36px;
display: inline-flex !important;
align-items: center; justify-content: center;
margin: 0 4px;
transition: var(--v3-trans);
}
.auth-main .image-area .f-social-links a:hover {
background: var(--v3-accent) !important;
color: #fff !important;
transform: translateY(-3px) scale(1.05);
}
.auth-main .sign-area {
background: var(--v3-surface) !important;
padding: 44px 40px !important;
}
.auth-main .sign-hader {
text-align: center;
margin-bottom: 28px !important;
}
.auth-main .sign-hader h2 {
color: var(--v3-text) !important;
font-weight: 800 !important;
font-size: 22px !important;
margin-top: 12px !important;
letter-spacing: -0.025em;
}
.auth-main .input-group-addon {
background: transparent !important;
border: 0 !important;
color: var(--v3-primary) !important;
}
.auth-main .input-group-icon .input-group-addon span.icon {
color: var(--v3-primary) !important;
padding: 11px 14px !important;
z-index: 5 !important;
}
.auth-main .input-group-icon .form-control {
border-radius: 10px !important;
padding-left: 44px !important;
padding-right: 14px !important;
height: auto !important;
}
.auth-main .btn-round,
.auth-main .btn.btn-round,
.auth-main button[type="submit"] {
background: linear-gradient(135deg, var(--v3-primary) 0%, var(--v3-primary-light) 100%) !important;
border: 0 !important;
color: #fff !important;
border-radius: 50px !important;
padding: 12px 28px !important;
font-weight: 700 !important;
letter-spacing: 0.3px !important;
box-shadow: var(--v3-shadow-primary) !important;
transition: var(--v3-trans) !important;
}
.auth-main .btn-round:hover,
.auth-main button[type="submit"]:hover {
background: linear-gradient(135deg, var(--v3-primary-dark) 0%, var(--v3-primary) 100%) !important;
box-shadow: 0 12px 28px -6px rgba(79, 70, 229, 0.55) !important;
transform: translateY(-2px);
}
.auth-main .forgot-text a {
color: var(--v3-primary) !important;
font-weight: 600 !important;
}
.auth-main .forgot-text a:hover {
color: var(--v3-accent) !important;
}
.auth-main .error, .auth-main .has-error .error {
color: var(--v3-danger) !important;
font-size: 12px !important;
}
/* ═══════════════════════════════════════════════════
23. SCROLLBAR
═══════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--v3-surface-alt); }
::-webkit-scrollbar-thumb { background: var(--v3-border-strong); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--v3-text-soft); }
/* ═══════════════════════════════════════════════════
24. DARK MODE
═══════════════════════════════════════════════════ */
html.dark {
--v3-bg: #0b1020;
--v3-surface: #141b33;
--v3-surface-2: #111731;
--v3-surface-alt: #0f1529;
--v3-border: #252d4b;
--v3-border-soft: #1e253f;
--v3-border-strong: #2d3659;
--v3-text: #e5e7eb;
--v3-text-muted: #94a3b8;
--v3-text-soft: #64748b;
--v3-primary-50: rgba(79, 70, 229, 0.14);
--v3-primary-100: rgba(79, 70, 229, 0.22);
--v3-primary-soft: rgba(79, 70, 229, 0.10);
--v3-accent-50: rgba(6, 182, 212, 0.12);
--v3-success-50: rgba(16, 185, 129, 0.12);
--v3-danger-50: rgba(239, 68, 68, 0.12);
--v3-warning-50: rgba(245, 158, 11, 0.12);
--v3-orange-50: rgba(249, 115, 22, 0.12);
}
html.dark body { background: var(--v3-bg) !important; color: var(--v3-text) !important; }
html.dark .panel, html.dark .panel.pg-fw, html.dark .modal-content {
background: var(--v3-surface) !important;
border-color: var(--v3-border) !important;
}
html.dark #header, html.dark .header {
background: var(--v3-surface) !important;
border-bottom-color: var(--v3-border) !important;
}
html.dark .form-control, html.dark input, html.dark textarea, html.dark select {
background: var(--v3-surface-alt) !important;
color: var(--v3-text) !important;
border-color: var(--v3-border) !important;
}
html.dark table.dataTable tbody tr:hover,
html.dark .table tbody tr:hover { background: var(--v3-primary-soft) !important; }
html.dark table.dataTable thead th,
html.dark .table thead th {
background: var(--v3-surface-2) !important;
color: var(--v3-text-muted) !important;
border-bottom-color: var(--v3-border) !important;
}
html.dark table.dataTable tbody td,
html.dark .table tbody td {
border-top-color: var(--v3-border-soft) !important;
color: var(--v3-text) !important;
}
html.dark .widget-row-in > div .panel-body {
background: var(--v3-surface) !important;
border-color: var(--v3-border) !important;
}
html.dark .page-header { background: var(--v3-surface) !important; }
html.dark .dropdown-menu {
background: var(--v3-surface) !important;
border-color: var(--v3-border) !important;
}
/* ═══════════════════════════════════════════════════
25. COLOR VARIANT OVERRIDES (customizer)
data-v3-color on swaps primary palette
═══════════════════════════════════════════════════ */
html[data-v3-color="blue"] {
--v3-primary: #2563eb;
--v3-primary-dark: #1e40af;
--v3-primary-light: #3b82f6;
--v3-primary-50: #eff6ff;
--v3-primary-100: #dbeafe;
--v3-primary-200: #bfdbfe;
--v3-primary-soft: rgba(37, 99, 235, 0.08);
--v3-shadow-primary: 0 8px 20px -4px rgba(37, 99, 235, 0.35);
--v3-sidebar-active: #2563eb;
}
html[data-v3-color="emerald"] {
--v3-primary: #059669;
--v3-primary-dark: #047857;
--v3-primary-light: #10b981;
--v3-primary-50: #ecfdf5;
--v3-primary-100: #d1fae5;
--v3-primary-200: #a7f3d0;
--v3-primary-soft: rgba(5, 150, 105, 0.08);
--v3-shadow-primary: 0 8px 20px -4px rgba(5, 150, 105, 0.35);
--v3-sidebar-active: #059669;
}
html[data-v3-color="purple"] {
--v3-primary: #9333ea;
--v3-primary-dark: #6b21a8;
--v3-primary-light: #a855f7;
--v3-primary-50: #faf5ff;
--v3-primary-100: #f3e8ff;
--v3-primary-200: #e9d5ff;
--v3-primary-soft: rgba(147, 51, 234, 0.08);
--v3-shadow-primary: 0 8px 20px -4px rgba(147, 51, 234, 0.35);
--v3-sidebar-active: #9333ea;
}
html[data-v3-color="orange"] {
--v3-primary: #ea580c;
--v3-primary-dark: #c2410c;
--v3-primary-light: #f97316;
--v3-primary-50: #fff7ed;
--v3-primary-100: #ffedd5;
--v3-primary-200: #fed7aa;
--v3-primary-soft: rgba(234, 88, 12, 0.08);
--v3-shadow-primary: 0 8px 20px -4px rgba(234, 88, 12, 0.35);
--v3-sidebar-active: #ea580c;
}
html[data-v3-color="rose"] {
--v3-primary: #e11d48;
--v3-primary-dark: #9f1239;
--v3-primary-light: #f43f5e;
--v3-primary-50: #fff1f2;
--v3-primary-100: #ffe4e6;
--v3-primary-200: #fecdd3;
--v3-primary-soft: rgba(225, 29, 72, 0.08);
--v3-shadow-primary: 0 8px 20px -4px rgba(225, 29, 72, 0.35);
--v3-sidebar-active: #e11d48;
}
/* ═══════════════════════════════════════════════════
26. SIDEBAR VARIANT OVERRIDES (customizer)
data-v3-sidebar on swaps sidebar background
═══════════════════════════════════════════════════ */
html[data-v3-sidebar="midnight"] .sidebar-left,
html[data-v3-sidebar="midnight"] #sidebar-left {
background: linear-gradient(180deg, #0a0f1d 0%, #1a2341 100%) !important;
background-color: #0a0f1d !important;
}
html[data-v3-sidebar="ocean"] .sidebar-left,
html[data-v3-sidebar="ocean"] #sidebar-left {
background: linear-gradient(180deg, #0c4a6e 0%, #0369a1 100%) !important;
background-color: #0c4a6e !important;
}
html[data-v3-sidebar="forest"] .sidebar-left,
html[data-v3-sidebar="forest"] #sidebar-left {
background: linear-gradient(180deg, #064e3b 0%, #047857 100%) !important;
background-color: #064e3b !important;
}
html[data-v3-sidebar="pattern"] .sidebar-left,
html[data-v3-sidebar="pattern"] #sidebar-left {
background:
radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0/14px 14px,
linear-gradient(180deg, var(--v3-sidebar-top) 0%, var(--v3-sidebar-bottom) 100%) !important;
background-color: var(--v3-sidebar-top) !important;
}
/* ═══════════════════════════════════════════════════
27. CUSTOMIZER WIDGET
═══════════════════════════════════════════════════ */
.v3cx-fab {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 9998;
width: 52px;
height: 52px;
border-radius: 50%;
border: 0;
color: #fff;
background: linear-gradient(135deg, var(--v3-primary) 0%, var(--v3-primary-light) 100%);
box-shadow: 0 10px 28px -6px rgba(79, 70, 229, 0.55), 0 4px 12px rgba(17, 24, 39, 0.12);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: var(--v3-trans);
animation: v3cxSpin 12s linear infinite;
}
.v3cx-fab:hover {
transform: scale(1.08);
box-shadow: 0 16px 40px -8px rgba(79, 70, 229, 0.65), 0 6px 16px rgba(17, 24, 39, 0.18);
}
.v3cx-fab.is-hidden { opacity: 0; pointer-events: none; transform: scale(0.6); }
@keyframes v3cxSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.v3cx-fab:hover { animation-play-state: paused; }
.v3cx-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(3px);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
z-index: 9997;
}
.v3cx-overlay.is-open { opacity: 1; pointer-events: auto; }
.v3cx-panel {
position: fixed;
top: 0;
right: 0;
width: 340px;
max-width: 92vw;
height: 100vh;
background: var(--v3-surface);
z-index: 9999;
box-shadow: -10px 0 40px -8px rgba(17, 24, 39, 0.2);
transform: translateX(108%);
transition: transform 0.35s var(--v3-ease);
display: flex;
flex-direction: column;
font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
color: var(--v3-text);
}
.v3cx-panel.is-open { transform: translateX(0); }
.v3cx-head {
padding: 20px 22px 16px;
border-bottom: 1px solid var(--v3-border-soft);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
background: linear-gradient(180deg, var(--v3-surface) 0%, var(--v3-surface-2) 100%);
}
.v3cx-head h3 {
font-size: 17px !important;
font-weight: 800 !important;
margin: 0 !important;
color: var(--v3-text) !important;
letter-spacing: -0.02em;
}
.v3cx-sub {
margin: 2px 0 0;
font-size: 12px;
color: var(--v3-text-muted);
}
.v3cx-close {
width: 32px;
height: 32px;
border-radius: 8px;
border: 0;
background: var(--v3-surface-alt);
color: var(--v3-text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--v3-trans);
}
.v3cx-close:hover {
background: var(--v3-danger-50);
color: var(--v3-danger);
}
.v3cx-body {
flex: 1;
overflow-y: auto;
padding: 18px 22px;
}
.v3cx-sec { margin-bottom: 22px; }
.v3cx-sec h4 {
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--v3-text-muted) !important;
margin: 0 0 10px !important;
}
.v3cx-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.v3cx-chip {
width: 38px;
height: 38px;
border-radius: 12px;
border: 2px solid transparent;
cursor: pointer;
position: relative;
transition: var(--v3-trans);
padding: 0;
flex: 0 0 auto;
}
.v3cx-chip:hover { transform: scale(1.1); }
.v3cx-chip-check {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
opacity: 0;
transition: var(--v3-trans);
}
.v3cx-chip.is-active {
border-color: var(--v3-text);
box-shadow: 0 0 0 3px var(--v3-surface), 0 0 0 5px var(--v3-primary);
}
.v3cx-chip.is-active .v3cx-chip-check { opacity: 1; }
.v3cx-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.v3cx-tile {
border: 2px solid var(--v3-border-soft);
border-radius: 12px;
background: var(--v3-surface);
padding: 8px 6px 6px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
transition: var(--v3-trans);
position: relative;
}
.v3cx-tile:hover { border-color: var(--v3-primary-200); transform: translateY(-2px); }
.v3cx-tile-preview {
width: 100%;
height: 48px;
border-radius: 8px;
display: block;
}
.v3cx-tile-label {
font-size: 11px;
font-weight: 600;
color: var(--v3-text-muted);
}
.v3cx-tile-check {
position: absolute;
top: 6px;
right: 6px;
width: 18px;
height: 18px;
background: var(--v3-primary);
color: #fff;
border-radius: 50%;
font-size: 9px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: var(--v3-trans);
}
.v3cx-tile.is-active { border-color: var(--v3-primary); }
.v3cx-tile.is-active .v3cx-tile-check { opacity: 1; }
.v3cx-seg {
display: grid;
grid-template-columns: repeat(3, 1fr);
background: var(--v3-surface-alt);
border-radius: 10px;
padding: 4px;
gap: 2px;
}
.v3cx-seg-item {
border: 0;
background: transparent;
padding: 8px 10px;
border-radius: 8px;
font-size: 12.5px;
font-weight: 600;
color: var(--v3-text-muted);
cursor: pointer;
transition: var(--v3-trans);
}
.v3cx-seg-item:hover { color: var(--v3-text); }
.v3cx-seg-item.is-active {
background: var(--v3-surface);
color: var(--v3-primary);
box-shadow: var(--v3-shadow-xs);
}
.v3cx-foot {
padding: 14px 22px;
border-top: 1px solid var(--v3-border-soft);
background: var(--v3-surface-2);
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.v3cx-reset {
width: 100%;
border: 1px solid var(--v3-border-strong);
background: var(--v3-surface);
color: var(--v3-text);
padding: 9px 14px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: var(--v3-trans);
}
.v3cx-reset:hover { background: var(--v3-primary-soft); color: var(--v3-primary); border-color: var(--v3-primary-200); }
.v3cx-tag {
font-size: 10px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--v3-text-soft);
font-weight: 700;
}
html.dark .v3cx-panel { background: var(--v3-surface); }
html.dark .v3cx-head, html.dark .v3cx-foot { background: var(--v3-surface-2); }
html.dark .v3cx-close, html.dark .v3cx-reset { background: var(--v3-surface-alt); color: var(--v3-text); }
@media (max-width: 480px) {
.v3cx-panel { width: 100vw; }
.v3cx-fab { right: 16px; bottom: 16px; width: 48px; height: 48px; font-size: 18px; }
}
/* ═══════════════════════════════════════════════════
28. WELCOME BANNER — Full-width colored hero
═══════════════════════════════════════════════════ */
.v3-welcome {
background: linear-gradient(135deg, var(--v3-primary) 0%, var(--v3-primary-light) 100%);
border: 0;
border-radius: var(--v3-radius-lg);
padding: 28px 34px;
margin-bottom: 22px;
box-shadow: 0 12px 28px -8px rgba(79, 70, 229, 0.30);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 18px;
position: relative;
overflow: hidden;
color: #ffffff;
}
.v3-welcome::before,
.v3-welcome::after {
content: "";
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.10);
pointer-events: none;
}
.v3-welcome::before {
width: 220px; height: 220px;
top: -80px; right: -30px;
}
.v3-welcome::after {
width: 140px; height: 140px;
bottom: -70px; right: 220px;
background: rgba(255, 255, 255, 0.06);
}
.v3-welcome-text { position: relative; z-index: 1; }
.v3-welcome-text h1 {
margin: 0 0 6px !important;
font-size: 26px !important;
font-weight: 800 !important;
color: #ffffff !important;
letter-spacing: -0.025em;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.v3-welcome-text p {
margin: 0 !important;
color: rgba(255, 255, 255, 0.90) !important;
font-size: 14px !important;
font-weight: 500;
}
.v3-welcome-date {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.25);
padding: 10px 16px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
color: #ffffff;
position: relative;
z-index: 1;
}
.v3-welcome-date i { color: rgba(255, 255, 255, 0.85); }
/* ═══════════════════════════════════════════════════
29. STAT CARDS — White cards with icon + sparkline
═══════════════════════════════════════════════════ */
.widget-row-in > div .panel-body {
background: var(--v3-surface) !important;
border: 1px solid var(--v3-border-soft) !important;
border-radius: var(--v3-radius-lg) !important;
margin: 6px !important;
padding: 20px !important;
color: var(--v3-text) !important;
overflow: hidden;
position: relative;
transition: var(--v3-trans-slow);
}
.widget-row-in > div .panel-body::before { display: none !important; }
.widget-row-in > div .panel-body:hover {
transform: translateY(-3px);
box-shadow: var(--v3-shadow-md) !important;
border-color: var(--v3-primary-100) !important;
}
/* Dark icon chip (top-left) */
.widget-row-in .panel-body .widget-col-in > div > i.fas,
.widget-row-in .panel-body .widget-col-in > div > i.fa,
.widget-row-in > div:nth-child(n) .widget-col-in > div > i.fas,
.widget-row-in > div:nth-child(n) .widget-col-in > div > i.fa {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
color: #ffffff !important;
width: 44px !important;
height: 44px !important;
border-radius: 10px !important;
font-size: 16px !important;
box-shadow: 0 4px 10px -2px rgba(15, 23, 42, 0.25) !important;
margin-bottom: 0 !important;
}
.widget-col-in h5 {
color: var(--v3-text-muted) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
text-transform: none !important;
margin-top: 4px !important;
order: 2;
}
.widget-col-in .counter,
.widget-col-in h3.counter {
color: var(--v3-text) !important;
font-weight: 800 !important;
font-size: 28px !important;
letter-spacing: -0.025em !important;
line-height: 1.15 !important;
font-family: 'Nunito', 'Inter', sans-serif !important;
text-align: left !important;
}
/* Per-tile icon accent color */
.widget-row-in > div:nth-child(1) .widget-col-in > div > i.fas,
.widget-row-in > div:nth-child(1) .widget-col-in > div > i.fa {
background: linear-gradient(135deg, var(--v3-primary) 0%, var(--v3-primary-dark) 100%) !important;
box-shadow: 0 4px 10px -2px rgba(79, 70, 229, 0.35) !important;
}
.widget-row-in > div:nth-child(2) .widget-col-in > div > i.fas,
.widget-row-in > div:nth-child(2) .widget-col-in > div > i.fa {
background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%) !important;
box-shadow: 0 4px 10px -2px rgba(20, 184, 166, 0.35) !important;
}
.widget-row-in > div:nth-child(3) .widget-col-in > div > i.fas,
.widget-row-in > div:nth-child(3) .widget-col-in > div > i.fa {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
box-shadow: 0 4px 10px -2px rgba(59, 130, 246, 0.35) !important;
}
.widget-row-in > div:nth-child(4) .widget-col-in > div > i.fas,
.widget-row-in > div:nth-child(4) .widget-col-in > div > i.fa {
background: linear-gradient(135deg, #ec4899 0%, #be185d 100%) !important;
box-shadow: 0 4px 10px -2px rgba(236, 72, 153, 0.35) !important;
}
/* Trend badge (injected by JS, top-right of tile) — real data from backend */
.v3-stat-badge {
position: absolute;
top: 16px;
right: 16px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 6px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.3px;
font-family: 'Nunito', 'Inter', sans-serif;
}
.v3-stat-badge.up { background: var(--v3-success-50); color: var(--v3-success-dark); }
.v3-stat-badge.down { background: var(--v3-danger-50); color: var(--v3-danger-dark); }
.v3-stat-badge i { font-size: 9px; }
/* Mini sparkline (injected canvas, bottom-right) */
.v3-stat-spark {
position: absolute;
right: 16px;
bottom: 16px;
width: 70px;
height: 32px;
pointer-events: none;
opacity: 0.85;
}
/* Hide the existing TOTAL STRENGTH underline in v3 stat card look */
.widget-row-in > div .box-top-line {
display: none !important;
}
/* ═══════════════════════════════════════════════════
30. SUNSET color preset (DreamsPOS-inspired orange)
═══════════════════════════════════════════════════ */
html[data-v3-color="sunset"] {
--v3-primary: #fd6c2d;
--v3-primary-dark: #c2410c;
--v3-primary-light: #fb923c;
--v3-primary-50: #fff7ed;
--v3-primary-100: #ffedd5;
--v3-primary-200: #fed7aa;
--v3-primary-soft: rgba(253, 108, 45, 0.08);
--v3-shadow-primary: 0 8px 20px -4px rgba(253, 108, 45, 0.40);
--v3-sidebar-active: #fd6c2d;
}
/* ═══════════════════════════════════════════════════
31. POS DARK sidebar preset (very dark with texture)
═══════════════════════════════════════════════════ */
html[data-v3-sidebar="posdark"] .sidebar-left,
html[data-v3-sidebar="posdark"] #sidebar-left {
background:
radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0/16px 16px,
linear-gradient(180deg, #1c2434 0%, #0f172a 100%) !important;
background-color: #1c2434 !important;
}
html[data-v3-sidebar="posdark"] .sidebar-left .nav-main > li.nav-active > a,
html[data-v3-sidebar="posdark"] .sidebar-left ul.nav.nav-main > li.nav-active > a {
background: transparent !important;
color: var(--v3-sidebar-active) !important;
box-shadow: none !important;
position: relative;
}
html[data-v3-sidebar="posdark"] .sidebar-left .nav-main > li.nav-active > a::before {
content: "";
position: absolute;
left: -4px; top: 50%;
transform: translateY(-50%);
width: 6px; height: 6px;
border-radius: 50%;
background: var(--v3-sidebar-active);
box-shadow: 0 0 0 3px rgba(253, 108, 45, 0.25);
}
html[data-v3-sidebar="posdark"] .sidebar-left .nav-main > li.nav-active > a > i {
color: var(--v3-sidebar-active) !important;
}
/* Sidebar solid presets */
html[data-v3-sidebar="slate"] .sidebar-left,
html[data-v3-sidebar="slate"] #sidebar-left {
background: #1f2937 !important;
background-color: #1f2937 !important;
}
html[data-v3-sidebar="plum"] .sidebar-left,
html[data-v3-sidebar="plum"] #sidebar-left {
background: #3b1e4a !important;
background-color: #3b1e4a !important;
}
html[data-v3-sidebar="deepsea"] .sidebar-left,
html[data-v3-sidebar="deepsea"] #sidebar-left {
background: #062a4e !important;
background-color: #062a4e !important;
}
/* Sidebar gradient presets */
html[data-v3-sidebar="grad-ocean"] .sidebar-left,
html[data-v3-sidebar="grad-ocean"] #sidebar-left {
background: linear-gradient(180deg, #0c4a6e 0%, #0369a1 100%) !important;
background-color: #0c4a6e !important;
}
html[data-v3-sidebar="grad-forest"] .sidebar-left,
html[data-v3-sidebar="grad-forest"] #sidebar-left {
background: linear-gradient(180deg, #064e3b 0%, #047857 100%) !important;
background-color: #064e3b !important;
}
html[data-v3-sidebar="grad-sunset"] .sidebar-left,
html[data-v3-sidebar="grad-sunset"] #sidebar-left {
background: linear-gradient(180deg, #7c2d12 0%, #ea580c 100%) !important;
background-color: #7c2d12 !important;
}
html[data-v3-sidebar="grad-purple"] .sidebar-left,
html[data-v3-sidebar="grad-purple"] #sidebar-left {
background: linear-gradient(180deg, #4c1d95 0%, #7c3aed 100%) !important;
background-color: #4c1d95 !important;
}
html[data-v3-sidebar="grad-indigo"] .sidebar-left,
html[data-v3-sidebar="grad-indigo"] #sidebar-left {
background: linear-gradient(180deg, #1e1b4b 0%, #4f46e5 100%) !important;
background-color: #1e1b4b !important;
}
html[data-v3-sidebar="grad-crimson"] .sidebar-left,
html[data-v3-sidebar="grad-crimson"] #sidebar-left {
background: linear-gradient(180deg, #7f1d1d 0%, #dc2626 100%) !important;
background-color: #7f1d1d !important;
}
/* ═══════════════════════════════════════════════════
32. SIDEBAR BACKGROUND PATTERNS (layered over base)
═══════════════════════════════════════════════════ */
html[data-v3-sidebar-bg="dots"] .sidebar-left {
background-image:
radial-gradient(rgba(255, 255, 255, 0.10) 1.2px, transparent 1.2px),
var(--_v3-sb-base, linear-gradient(180deg, #0f172a, #1e1b4b)) !important;
background-size: 14px 14px, 100% 100% !important;
background-position: 0 0, 0 0 !important;
}
html[data-v3-sidebar-bg="grid"] .sidebar-left {
background-image:
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
background-size: 24px 24px, 24px 24px !important;
}
html[data-v3-sidebar-bg="waves"] .sidebar-left {
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: repeat !important;
}
html[data-v3-sidebar-bg="diagonal"] .sidebar-left {
background-image: repeating-linear-gradient(
45deg,
rgba(255, 255, 255, 0.04) 0,
rgba(255, 255, 255, 0.04) 1px,
transparent 1px,
transparent 14px
) !important;
}
html[data-v3-sidebar-bg="mesh"] .sidebar-left {
background-image:
radial-gradient(at 20% 10%, rgba(139, 92, 246, 0.18), transparent 45%),
radial-gradient(at 80% 70%, rgba(6, 182, 212, 0.14), transparent 50%),
radial-gradient(at 50% 100%, rgba(236, 72, 153, 0.10), transparent 50%) !important;
}
/* Plain keeps the default */
/* Image-based sidebar backgrounds (user-supplied SVGs placed at
assets/img/sidebar-bg/bg-01.svg ... bg-06.svg) */
html[data-v3-sidebar-bg="img-01"] .sidebar-left,
html[data-v3-sidebar-bg="img-01"] #sidebar-left {
background-image: url('../img/sidebar-bg/bg-01.svg') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
html[data-v3-sidebar-bg="img-02"] .sidebar-left,
html[data-v3-sidebar-bg="img-02"] #sidebar-left {
background-image: url('../img/sidebar-bg/bg-02.svg') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
html[data-v3-sidebar-bg="img-03"] .sidebar-left,
html[data-v3-sidebar-bg="img-03"] #sidebar-left {
background-image: url('../img/sidebar-bg/bg-03.svg') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
html[data-v3-sidebar-bg="img-04"] .sidebar-left,
html[data-v3-sidebar-bg="img-04"] #sidebar-left {
background-image: url('../img/sidebar-bg/bg-04.svg') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
html[data-v3-sidebar-bg="img-05"] .sidebar-left,
html[data-v3-sidebar-bg="img-05"] #sidebar-left {
background-image: url('../img/sidebar-bg/bg-05.svg') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
html[data-v3-sidebar-bg="img-06"] .sidebar-left,
html[data-v3-sidebar-bg="img-06"] #sidebar-left {
background-image: url('../img/sidebar-bg/bg-06.svg') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* Dark scrim overlay on image backgrounds so sidebar text remains readable */
html[data-v3-sidebar-bg^="img-"] .sidebar-left::after,
html[data-v3-sidebar-bg^="img-"] #sidebar-left::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.75) 100%);
pointer-events: none;
z-index: 0;
}
html[data-v3-sidebar-bg^="img-"] .sidebar-left > * {
position: relative;
z-index: 1;
}
/* ═══════════════════════════════════════════════════
33. TOP BAR COLOR PRESETS
═══════════════════════════════════════════════════ */
html[data-v3-topbar="slate"] #header, html[data-v3-topbar="slate"] .header { background: #334155 !important; }
html[data-v3-topbar="black"] #header, html[data-v3-topbar="black"] .header { background: #0f172a !important; }
html[data-v3-topbar="navy"] #header, html[data-v3-topbar="navy"] .header { background: #1e3a8a !important; }
html[data-v3-topbar="purple"] #header, html[data-v3-topbar="purple"] .header { background: #7c3aed !important; }
html[data-v3-topbar="teal"] #header, html[data-v3-topbar="teal"] .header { background: #0d9488 !important; }
html[data-v3-topbar="primary"] #header, html[data-v3-topbar="primary"] .header { background: var(--v3-primary) !important; }
html[data-v3-topbar="grad-indigo"] #header, html[data-v3-topbar="grad-indigo"] .header { background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; }
html[data-v3-topbar="grad-ocean"] #header, html[data-v3-topbar="grad-ocean"] .header { background: linear-gradient(135deg, #0891b2, #06b6d4) !important; }
html[data-v3-topbar="grad-sunset"] #header, html[data-v3-topbar="grad-sunset"] .header { background: linear-gradient(135deg, #f97316, #ef4444) !important; }
html[data-v3-topbar="grad-royal"] #header, html[data-v3-topbar="grad-royal"] .header { background: linear-gradient(135deg, #1e3a8a, #3b82f6) !important; }
html[data-v3-topbar="grad-forest"] #header, html[data-v3-topbar="grad-forest"] .header { background: linear-gradient(135deg, #065f46, #10b981) !important; }
html[data-v3-topbar="grad-violet"] #header, html[data-v3-topbar="grad-violet"] .header { background: linear-gradient(135deg, #7c3aed, #ec4899) !important; }
/* Dark/colored top bar variants — whiten topbar chrome only, NOT popup menus.
Dropdown/popup panels have white bg; we explicitly exclude them from the
white-text sweep so their items stay readable. */
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header,
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header > a,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header > a,
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header .header-right > ul > li > a,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header .header-right > ul > li > a,
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header > .header-left > a,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header > .header-left > a,
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header span:not(.badge):not(.dropdown-menu span):not(.header-menubox span),
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header span:not(.badge):not(.dropdown-menu span):not(.header-menubox span),
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header h1,
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header h2,
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header h3,
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header h4,
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header h5,
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header h6,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header h4,
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header > small,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header > small,
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header > label,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header > label {
color: rgba(255, 255, 255, 0.94) !important;
}
/* Safety net: any popup panel inside the topbar forces its own text color,
overriding the topbar whiten rule above regardless of cascade order. */
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header .dropdown-menu,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header .dropdown-menu,
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header .header-menubox,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header .header-menubox {
color: var(--v3-text) !important;
}
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header .dropdown-menu a,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header .dropdown-menu a,
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header .header-menubox a,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header .header-menubox a {
color: var(--v3-text) !important;
}
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header .dropdown-menu a:hover,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header .dropdown-menu a:hover,
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header .header-menubox a:hover,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header .header-menubox a:hover {
color: var(--v3-primary) !important;
background: var(--v3-primary-soft) !important;
}
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header .dropdown-menu span,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header .dropdown-menu span,
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header .header-menubox span,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header .header-menubox span {
color: inherit !important;
}
/* Legacy header-menu-icon has a ::before white rotated diamond that
clashes with colored top bar. Make it translucent + give the icon
glyph a forced white color so it remains visible. */
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header .header-menu-icon::before,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header .header-menu-icon::before {
background-color: rgba(255, 255, 255, 0.16) !important;
border-color: rgba(255, 255, 255, 0.22) !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10) !important;
}
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header .header-menu-icon:hover::before,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header .header-menu-icon:hover::before {
background-color: rgba(255, 255, 255, 0.28) !important;
}
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header .header-menu-icon i,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header .header-menu-icon i,
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header .header-menu i,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header .header-menu i {
color: #ffffff !important;
opacity: 1 !important;
}
/* Open/active dropdown state for menu icon */
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header .open .header-menu-icon::before,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header .open .header-menu-icon::before {
background-color: rgba(255, 255, 255, 0.32) !important;
}
/* Search input in header — translucent white */
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header input[type="text"],
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header input[type="search"],
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header input[type="text"],
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header input[type="search"],
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header form.sidebar-search input,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header form.sidebar-search input {
background: rgba(255, 255, 255, 0.16) !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.22) !important;
}
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header input::placeholder,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header input::placeholder {
color: rgba(255, 255, 255, 0.65) !important;
}
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header .fa-search,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header .fa-search {
color: rgba(255, 255, 255, 0.7) !important;
}
/* Notification badge should remain vivid, not washed white */
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header .badge,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header .badge {
background: var(--v3-orange) !important;
color: #ffffff !important;
}
/* Logo image — never touch it (filter none) */
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header .logo img,
html[data-v3-topbar]:not([data-v3-topbar="white"]) .header .logo img,
html[data-v3-topbar]:not([data-v3-topbar="white"]) #header img.logo-img {
filter: none !important;
opacity: 1 !important;
}
/* ═══════════════════════════════════════════════════
34. CUSTOMIZER — Collapsible sections + new bits
═══════════════════════════════════════════════════ */
.v3cx-sec {
margin-bottom: 8px;
border: 1px solid var(--v3-border-soft);
border-radius: 12px;
overflow: hidden;
background: var(--v3-surface);
}
.v3cx-sec-head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
background: transparent;
border: 0;
cursor: pointer;
font-size: 12.5px !important;
font-weight: 700 !important;
color: var(--v3-text) !important;
text-transform: uppercase;
letter-spacing: 0.8px;
transition: var(--v3-trans);
}
.v3cx-sec-head:hover { background: var(--v3-surface-alt); }
.v3cx-sec-caret {
color: var(--v3-text-muted);
font-size: 10px;
transition: transform 0.2s var(--v3-ease);
}
.v3cx-sec.is-open .v3cx-sec-caret { transform: rotate(180deg); }
.v3cx-sec-body {
max-height: 0;
overflow: hidden;
padding: 0 14px;
transition: max-height 0.3s var(--v3-ease), padding 0.3s var(--v3-ease);
}
.v3cx-sec.is-open .v3cx-sec-body {
max-height: 1000px;
padding: 4px 14px 14px;
}
.v3cx-sublabel {
font-size: 10.5px;
font-weight: 600;
color: var(--v3-text-muted);
text-transform: uppercase;
letter-spacing: 0.8px;
margin: 10px 0 8px;
}
.v3cx-chip-bordered { border-color: var(--v3-border-strong) !important; }
.v3cx-seg-item i { margin-right: 6px; }
/* Sidebar background tile preview patterns */
.v3cx-bg-plain { background: linear-gradient(180deg, #0f172a, #1e1b4b); }
.v3cx-bg-dots { background:
radial-gradient(rgba(255,255,255,0.25) 1px, transparent 1px) 0 0/8px 8px,
linear-gradient(180deg, #0f172a, #1e1b4b); }
.v3cx-bg-grid { background:
linear-gradient(rgba(255,255,255,0.15) 1px, transparent 1px) 0 0/14px 14px,
linear-gradient(90deg, rgba(255,255,255,0.15) 1px, transparent 1px) 0 0/14px 14px,
linear-gradient(180deg, #0f172a, #1e1b4b); }
.v3cx-bg-waves { background:
url("data:image/svg+xml;utf8,") repeat,
linear-gradient(180deg, #0f172a, #1e1b4b); }
.v3cx-bg-diagonal { background:
repeating-linear-gradient(45deg, rgba(255,255,255,0.14) 0, rgba(255,255,255,0.14) 1px, transparent 1px, transparent 8px),
linear-gradient(180deg, #0f172a, #1e1b4b); }
.v3cx-bg-mesh { background:
radial-gradient(at 20% 10%, rgba(139,92,246,0.5), transparent 50%),
radial-gradient(at 80% 70%, rgba(6,182,212,0.4), transparent 50%),
linear-gradient(180deg, #0f172a, #1e1b4b); }
/* ═══════════════════════════════════════════════════
31. DENSITY TUNE — show more data per screen
(bring v3 inline with v1 row/gap density while keeping polish)
═══════════════════════════════════════════════════ */
.content-body section.panel + section.panel,
.content-body .panel + .panel { margin-top: 0 !important; }
.form-group { margin-bottom: 10px !important; }
label, .control-label { margin-bottom: 4px !important; font-size: 12.5px !important; }
.dataTables_wrapper { padding: 0 !important; }
.dataTables_wrapper .row { margin-left: -6px !important; margin-right: -6px !important; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { margin: 6px 0 !important; }
/* DataTables export buttons toolbar */
.dt-buttons, div.dt-buttons { margin-bottom: 6px !important; }
.dt-buttons .btn, div.dt-buttons .btn { padding: 5px 10px !important; font-size: 12px !important; }
/* Compact action-button column */
.table .btn-circle, .table .btn.icon, .table .btn-xs, .table .btn-sm {
padding: 4px 8px !important;
font-size: 12px !important;
}
/* Photo thumbs in lists */
.table td img, .table td .profile-img { max-height: 38px !important; }
/* Widget row gutters */
.row { margin-left: -8px; margin-right: -8px; }
.row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }
/* Tighter dashboard welcome hero */
.v3-welcome { padding: 18px 22px !important; margin-bottom: 14px !important; }
.v3-welcome-text h1 { font-size: 20px !important; margin: 0 0 4px !important; }
.v3-welcome-text p { font-size: 13px !important; }
/* Tab nav + modal headers tighter */
.nav-tabs > li > a { padding: 8px 14px !important; font-size: 13px !important; }
.modal-header { padding: 12px 18px !important; }
.modal-body { padding: 14px 18px !important; }
.modal-footer { padding: 10px 18px !important; }
/* Dashboard stat tiles — slightly smaller to match list density */
.widget-row-in > div .panel-body { margin: 4px !important; padding: 14px !important; }
.widget-col-in .counter, .widget-col-in h3.counter { font-size: 24px !important; }
.widget-col-in h5 { font-size: 12px !important; }
/* Chart title spacing */
h4.chart-title { font-size: 13px !important; margin: 0 0 6px !important; }
/* Alerts tighter */
.alert { padding: 8px 12px !important; margin-bottom: 10px !important; font-size: 13px !important; }