/*
* ╔═══════════════════════════════════════════════════════════════════╗
* ║ BLUENERGY UI — Global Design System v1.0.0 ║
* ║ File location: theme/assets/css/bluenergy-ui.css ║
* ╠═══════════════════════════════════════════════════════════════════╣
* ║ HOW THE SWITCH WORKS ║
* ║ ───────────────────── ║
* ║ All rules are scoped to: html[data-be-theme="new"] ║
* ║ To enable new theme: add data-be-theme="new" to ║
* ║ To rollback: change "new" → "old" (or remove attr) ║
* ║ ║
* ║ In header.php, change: ║
* ║ ║
* ║ to: ║
* ║ ║
* ║ ║
* ║ ONE attribute. Zero PHP changes. Zero JS changes. ║
* ║ Rollback = change "new" to "old" in that single attribute. ║
* ╚═══════════════════════════════════════════════════════════════════╝
*/
/* ══════════════════════════════════════════════════════
§1 DESIGN TOKENS
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] {
--be-white: #ffffff;
--be-bg: #f5f7fb;
--be-surface: #ffffff;
--be-border: #e4e8f0;
--be-border-soft: #eef1f7;
--be-blue: #3b6ef8;
--be-blue-light: #eef2ff;
--be-blue-mid: #c7d4fd;
--be-blue-dark: #2451d1;
--be-teal: #0ec4a8;
--be-teal-light: #e6faf7;
--be-amber: #f59e0b;
--be-amber-light: #fffbeb;
--be-red: #ef4444;
--be-red-light: #fef2f2;
--be-green: #22c55e;
--be-green-light: #f0fdf4;
--be-text-primary: #0f1a35;
--be-text-secondary: #64748b;
--be-text-muted: #94a3b8;
--be-radius-sm: 8px;
--be-radius: 12px;
--be-radius-lg: 16px;
--be-shadow-sm: 0 1px 3px rgba(15,26,53,.06), 0 1px 2px rgba(15,26,53,.04);
--be-shadow: 0 4px 16px rgba(15,26,53,.08), 0 1px 4px rgba(15,26,53,.04);
--be-shadow-lg: 0 8px 32px rgba(15,26,53,.10), 0 2px 8px rgba(15,26,53,.06);
--be-t: .18s ease;
}
/* ══════════════════════════════════════════════════════
§2 FONT (DM Sans via Google Fonts)
Add this to header.php inside :
══════════════════════════════════════════════════════ */
html[data-be-theme="new"],
html[data-be-theme="new"] body {
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
background-color: var(--be-bg) !important;
}
/* ══════════════════════════════════════════════════════
§3 TOPBAR
══════════════════════════════════════════════════════ */
/*
* The header uses data-topbar-color="dark" — so the native topbar
* is dark (#313a46) with a dark nav-user box (#3c4655).
* We keep the topbar WHITE in light mode (new design) and fix:
* 1. nav-user box background → white to match
* 2. nav-user border → light border
* 3. user name/email → dark text (readable on white)
* 4. logo: force logo-dark visible, logo-light hidden on white bg
* 5. company name text → visible on white bg
*/
html[data-be-theme="new"]:not([data-theme="dark"]) .navbar-custom {
background: var(--be-white) !important;
border-bottom: 1px solid var(--be-border) !important;
box-shadow: 0 1px 8px rgba(15,26,53,.06) !important;
}
/* nav-user pill — match white topbar */
html[data-be-theme="new"]:not([data-theme="dark"]) .nav-user {
background-color: var(--be-bg) !important;
border-color: var(--be-border) !important;
}
/* User name & email — dark text on white topbar */
html[data-be-theme="new"]:not([data-theme="dark"]) .navbar-custom .nav-user h5 {
font-size: 13px !important;
font-weight: 600 !important;
color: var(--be-text-primary) !important;
}
html[data-be-theme="new"]:not([data-theme="dark"]) .navbar-custom .nav-user h6 {
font-size: 11.5px !important;
color: var(--be-text-muted) !important;
}
/* Topbar icon color — dark on white bg */
html[data-be-theme="new"]:not([data-theme="dark"]) .navbar-custom .topbar-menu .nav-link i,
html[data-be-theme="new"]:not([data-theme="dark"]) .navbar-custom .button-toggle-menu {
color: var(--be-text-secondary) !important;
}
/* LOGO FIX */
html[data-be-theme="new"]:not([data-theme="dark"]) .logo-topbar .logo-dark {
display: block !important;
}
html[data-be-theme="new"]:not([data-theme="dark"]) .logo-topbar .logo-light {
display: none !important;
}
/* COMPANY NAME FIX — #nombre_multiple_crm has class text-white which is
invisible on our white topbar. Override to dark text. */
html[data-be-theme="new"]:not([data-theme="dark"]) #nombre_multiple_crm,
html[data-be-theme="new"]:not([data-theme="dark"]) .navbar-custom .topbar .dropdown > .nav-link span.text-white,
html[data-be-theme="new"]:not([data-theme="dark"]) .navbar-custom .topbar .dropdown > a span {
color: var(--be-text-primary) !important;
}
html[data-be-theme="new"]:not([data-theme="dark"]) .navbar-custom .topbar .dropdown > .nav-link i {
color: var(--be-text-secondary) !important;
}
/* SEARCH ICON FIX (leads_new2.php):
Structure: .app-search > form > .input-group > input#buscador + span.search-icon + button
The span.search-icon is position:absolute (theme CSS) but its nearest
positioned ancestor is the form. The input-group is flex so we need
to make it position:relative and the icon positioned inside it. */
html[data-be-theme="new"] .app-search form {
position: relative !important;
overflow: visible !important;
}
html[data-be-theme="new"] .app-search form .input-group {
position: relative !important;
}
/* The icon sits absolute inside .input-group, left of the input */
html[data-be-theme="new"] .app-search form .input-group .search-icon,
html[data-be-theme="new"] .app-search form span.search-icon {
position: absolute !important;
left: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 10 !important;
font-size: 16px !important;
line-height: 1 !important;
pointer-events: none !important;
color: var(--be-text-muted) !important;
width: auto !important;
height: auto !important;
/* Remove it from flex flow so it doesn't push the input */
margin: 0 !important;
padding: 0 !important;
}
/* Input inside input-group with icon on left — add left padding */
html[data-be-theme="new"] .app-search form .input-group .form-control#buscador,
html[data-be-theme="new"] .app-search form .input-group input.form-control {
padding-left: 36px !important;
border-radius: var(--be-radius-sm) 0 0 var(--be-radius-sm) !important;
}
/* Button at end of input-group */
html[data-be-theme="new"] .app-search form .input-group .input-group-text.btn {
border-radius: 0 var(--be-radius-sm) var(--be-radius-sm) 0 !important;
}
/* ══════════════════════════════════════════════════════
§4 LEFT SIDEBAR
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] .leftside-menu {
background: var(--be-white) !important;
border-right: 1px solid var(--be-border) !important;
box-shadow: var(--be-shadow-sm) !important;
}
html[data-be-theme="new"] .side-nav .side-nav-link {
color: var(--be-text-secondary) !important;
font-size: 13px !important;
font-weight: 500 !important;
border-radius: var(--be-radius-sm) !important;
margin: 1px 8px !important;
padding: 9px 12px !important;
transition: background var(--be-t), color var(--be-t) !important;
}
html[data-be-theme="new"] .side-nav .side-nav-link:hover,
html[data-be-theme="new"] .side-nav .side-nav-link:focus {
background: var(--be-blue-light) !important;
color: var(--be-blue) !important;
}
html[data-be-theme="new"] .side-nav .menuitem-active > .side-nav-link {
background: var(--be-blue-light) !important;
color: var(--be-blue) !important;
font-weight: 600 !important;
}
html[data-be-theme="new"] .side-nav .side-nav-link i {
color: inherit !important;
font-size: 16px !important;
width: 20px !important;
}
html[data-be-theme="new"] .side-nav-title {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
color: var(--be-text-muted) !important;
padding: 14px 20px 4px !important;
}
html[data-be-theme="new"] .side-nav .side-nav-second-level li a {
font-size: 12.5px !important;
color: var(--be-text-secondary) !important;
padding: 6px 12px 6px 42px !important;
border-radius: var(--be-radius-sm) !important;
margin: 1px 8px !important;
transition: background var(--be-t), color var(--be-t) !important;
}
html[data-be-theme="new"] .side-nav .side-nav-second-level li a:hover {
background: var(--be-blue-light) !important;
color: var(--be-blue) !important;
}
/* ══════════════════════════════════════════════════════
§5 PAGE TITLE & BREADCRUMB
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] .page-title-box {
padding: 16px 0 12px !important;
}
html[data-be-theme="new"] .page-title {
font-size: 20px !important;
font-weight: 700 !important;
color: var(--be-text-primary) !important;
letter-spacing: -.02em !important;
margin: 0 !important;
}
html[data-be-theme="new"] .breadcrumb {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
html[data-be-theme="new"] .breadcrumb-item {
font-size: 12.5px !important;
color: var(--be-text-muted) !important;
}
html[data-be-theme="new"] .breadcrumb-item a {
color: var(--be-text-secondary) !important;
text-decoration: none !important;
}
html[data-be-theme="new"] .breadcrumb-item a:hover { color: var(--be-blue) !important; }
html[data-be-theme="new"] .breadcrumb-item.active {
color: var(--be-blue) !important;
font-weight: 500 !important;
}
/* ══════════════════════════════════════════════════════
§6 CARDS (global)
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] .card {
border: 1px solid var(--be-border) !important;
border-radius: var(--be-radius-lg) !important;
box-shadow: var(--be-shadow) !important;
background: var(--be-white) !important;
}
html[data-be-theme="new"] .card-header {
background: var(--be-bg) !important;
border-bottom: 1px solid var(--be-border-soft) !important;
padding: 14px 20px !important;
font-size: 10.5px !important;
font-weight: 700 !important;
color: var(--be-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
border-radius: var(--be-radius-lg) var(--be-radius-lg) 0 0 !important;
}
html[data-be-theme="new"] .card-body { padding: 20px !important; }
html[data-be-theme="new"] .card-title {
font-size: 14px !important;
font-weight: 700 !important;
color: var(--be-text-primary) !important;
margin-bottom: 4px !important;
}
html[data-be-theme="new"] .header-title {
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .1em !important;
color: var(--be-text-muted) !important;
}
/* ══════════════════════════════════════════════════════
§7 BUTTONS
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] .btn-primary {
background: var(--be-blue) !important;
border-color: var(--be-blue) !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 600 !important;
padding: 7px 20px !important;
color: #fff !important;
box-shadow: none !important;
transition: background var(--be-t), box-shadow var(--be-t) !important;
}
html[data-be-theme="new"] .btn-primary:hover,
html[data-be-theme="new"] .btn-primary:focus,
html[data-be-theme="new"] .btn-primary:active {
background: var(--be-blue-dark) !important;
border-color: var(--be-blue-dark) !important;
box-shadow: 0 4px 14px rgba(59,110,248,.30) !important;
color: #fff !important;
}
html[data-be-theme="new"] .btn-primary3 {
background: var(--be-blue) !important;
border: none !important;
border-radius: 999px !important;
font-size: 12.5px !important;
font-weight: 600 !important;
color: #fff !important;
padding: 5px 16px !important;
box-shadow: none !important;
transition: background var(--be-t), box-shadow var(--be-t) !important;
display: inline-flex !important;
align-items: center;
gap: 5px;
}
html[data-be-theme="new"] .btn-primary3:hover,
html[data-be-theme="new"] .btn-primary3:focus {
background: var(--be-blue-dark) !important;
box-shadow: 0 4px 14px rgba(59,110,248,.28) !important;
color: #fff !important;
}
html[data-be-theme="new"] .btn-outline-primary {
border: 1.5px solid var(--be-blue) !important;
color: var(--be-blue) !important;
background: transparent !important;
border-radius: 999px !important;
font-size: 12.5px !important;
font-weight: 600 !important;
padding: 5px 16px !important;
transition: all var(--be-t) !important;
}
html[data-be-theme="new"] .btn-outline-primary:hover,
html[data-be-theme="new"] .btn-outline-primary:focus {
background: var(--be-blue) !important;
color: #fff !important;
box-shadow: 0 4px 14px rgba(59,110,248,.28) !important;
}
html[data-be-theme="new"] .btn-outline-info {
border: 1.5px solid var(--be-teal) !important;
color: var(--be-teal) !important;
background: transparent !important;
border-radius: 999px !important;
font-size: 12.5px !important;
font-weight: 600 !important;
padding: 5px 16px !important;
transition: all var(--be-t) !important;
}
html[data-be-theme="new"] .btn-outline-info:hover {
background: var(--be-teal) !important;
color: #fff !important;
}
html[data-be-theme="new"] .btn-info {
background: var(--be-teal) !important;
border-color: var(--be-teal) !important;
color: #fff !important;
border-radius: 999px !important;
font-size: 12.5px !important;
font-weight: 600 !important;
transition: all var(--be-t) !important;
}
html[data-be-theme="new"] .btn-info:hover { background: #09a48d !important; border-color: #09a48d !important; }
html[data-be-theme="new"] .btn-secondary,
html[data-be-theme="new"] .btn-light {
background: var(--be-bg) !important;
border: 1px solid var(--be-border) !important;
border-radius: var(--be-radius-sm) !important;
color: var(--be-text-secondary) !important;
font-size: 13px !important;
font-weight: 500 !important;
transition: all var(--be-t) !important;
}
html[data-be-theme="new"] .btn-secondary:hover,
html[data-be-theme="new"] .btn-light:hover {
background: var(--be-blue-light) !important;
border-color: var(--be-blue-mid) !important;
color: var(--be-blue) !important;
}
/* Radio toggle group (leads_new.php) */
html[data-be-theme="new"] .btn-group .btn-outline-primary { border-radius: var(--be-radius-sm) !important; }
html[data-be-theme="new"] .btn-check:checked + .btn-outline-primary {
background: var(--be-blue) !important;
color: #fff !important;
border-color: var(--be-blue) !important;
}
/* ══════════════════════════════════════════════════════
§8 FORM CONTROLS
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] .form-control,
html[data-be-theme="new"] .form-select {
border: 1px solid var(--be-border) !important;
border-radius: var(--be-radius-sm) !important;
background: var(--be-white) !important;
color: var(--be-text-primary) !important;
font-size: 13px !important;
height: 38px !important;
padding: 0 12px !important;
transition: border-color var(--be-t), box-shadow var(--be-t) !important;
box-shadow: none !important;
}
html[data-be-theme="new"] textarea.form-control { height: auto !important; padding: 10px 12px !important; }
html[data-be-theme="new"] .form-control:focus,
html[data-be-theme="new"] .form-select:focus {
border-color: var(--be-blue) !important;
box-shadow: 0 0 0 3px rgba(59,110,248,.12) !important;
outline: none !important;
}
html[data-be-theme="new"] .form-control::placeholder { color: var(--be-text-muted) !important; }
html[data-be-theme="new"] .form-label,
html[data-be-theme="new"] .col-form-label {
font-size: 12px !important;
font-weight: 600 !important;
color: var(--be-text-secondary) !important;
margin-bottom: 4px !important;
}
html[data-be-theme="new"] .input-group-text {
background: var(--be-bg) !important;
border: 1px solid var(--be-border) !important;
color: var(--be-text-secondary) !important;
font-size: 14px !important;
border-radius: var(--be-radius-sm) !important;
}
/* ══════════════════════════════════════════════════════
§9 SELECT2
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] .select2-container--default .select2-selection--single {
border: 1px solid var(--be-border) !important;
border-radius: var(--be-radius-sm) !important;
height: 38px !important;
display: flex !important;
align-items: center !important;
background: var(--be-white) !important;
}
html[data-be-theme="new"] .select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--be-text-primary) !important;
font-size: 13px !important;
line-height: 38px !important;
padding: 0 12px !important;
}
html[data-be-theme="new"] .select2-container--default.select2-container--focus .select2-selection--single {
border-color: var(--be-blue) !important;
box-shadow: 0 0 0 3px rgba(59,110,248,.12) !important;
}
html[data-be-theme="new"] .select2-dropdown {
border: 1px solid var(--be-border) !important;
border-radius: var(--be-radius-sm) !important;
box-shadow: var(--be-shadow-lg) !important;
font-size: 13px !important;
}
html[data-be-theme="new"] .select2-container--default .select2-results__option--highlighted {
background: var(--be-blue-light) !important;
color: var(--be-blue) !important;
}
/* ══════════════════════════════════════════════════════
§10 TABLES
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] .table {
color: var(--be-text-primary) !important;
font-size: 13px !important;
}
html[data-be-theme="new"] .table > thead > tr > th {
background: var(--be-bg) !important;
color: var(--be-text-muted) !important;
font-size: 10.5px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
border-bottom: 1px solid var(--be-border) !important;
padding: 10px 14px !important;
white-space: nowrap !important;
}
html[data-be-theme="new"] .table > tbody > tr > td {
border-bottom: 1px solid var(--be-border-soft) !important;
padding: 10px 14px !important;
vertical-align: middle !important;
}
html[data-be-theme="new"] .table > tbody > tr:hover > td { background: var(--be-blue-light) !important; }
html[data-be-theme="new"] table.dataTable.no-footer { border-bottom: 1px solid var(--be-border) !important; }
html[data-be-theme="new"] .dataTables_wrapper .dataTables_paginate .paginate_button {
border-radius: var(--be-radius-sm) !important;
font-size: 12.5px !important;
color: var(--be-text-secondary) !important;
border: none !important;
}
html[data-be-theme="new"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-be-theme="new"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--be-blue) !important;
color: #fff !important;
border: none !important;
box-shadow: none !important;
}
html[data-be-theme="new"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--be-blue-light) !important;
color: var(--be-blue) !important;
border: none !important;
}
html[data-be-theme="new"] .dataTables_wrapper .dataTables_info,
html[data-be-theme="new"] .dataTables_wrapper .dataTables_length,
html[data-be-theme="new"] .dataTables_wrapper .dataTables_filter {
font-size: 12.5px !important;
color: var(--be-text-secondary) !important;
}
/* ══════════════════════════════════════════════════════
§11 BADGES
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] .badge {
border-radius: 999px !important;
font-size: 11px !important;
font-weight: 600 !important;
padding: 4px 10px !important;
}
html[data-be-theme="new"] .badge-primary-lighten,
html[data-be-theme="new"] .badge-info-lighten,
html[data-be-theme="new"] .bg-soft-info {
background: var(--be-blue-light) !important;
color: var(--be-blue) !important;
border: 1px solid var(--be-blue-mid) !important;
}
html[data-be-theme="new"] .badge-success-lighten,
html[data-be-theme="new"] .bg-soft-success {
background: var(--be-green-light) !important;
color: #16a34a !important;
border: 1px solid #bbf7d0 !important;
}
html[data-be-theme="new"] .badge-danger-lighten,
html[data-be-theme="new"] .bg-soft-danger {
background: var(--be-red-light) !important;
color: var(--be-red) !important;
border: 1px solid #fecaca !important;
}
html[data-be-theme="new"] .badge-warning-lighten,
html[data-be-theme="new"] .bg-soft-warning {
background: var(--be-amber-light) !important;
color: #b45309 !important;
border: 1px solid #fde68a !important;
}
html[data-be-theme="new"] .badge-secondary-lighten,
html[data-be-theme="new"] .bg-soft-secondary,
html[data-be-theme="new"] .badge.bg-secondary {
background: #f1f5f9 !important;
color: var(--be-text-secondary) !important;
border: 1px solid var(--be-border) !important;
}
html[data-be-theme="new"] .badge .mdi-bitcoin { display: none !important; }
/* ══════════════════════════════════════════════════════
§12 PROGRESS BARS
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] #my_table .progress {
height: 10px !important;
background: #dde3f5 !important;
border-radius: 999px !important;
overflow: visible !important;
display: flex !important;
align-items: flex-start !important;
position: relative !important;
width: 100% !important;
margin-bottom: 18px !important;
}
html[data-be-theme="new"] #my_table .progress-bar,
html[data-be-theme="new"] #my_table .progress-bar.progress-bar-striped,
html[data-be-theme="new"] #my_table .progress-bar.progress-bar-animated {
background: linear-gradient(90deg, #3b6ef8 0%, #0ec4a8 100%) !important;
background-color: #3b6ef8 !important;
background-image: linear-gradient(90deg, #3b6ef8 0%, #0ec4a8 100%) !important;
height: 10px !important;
border-radius: 999px !important;
font-size: 0 !important;
color: transparent !important;
animation: none !important;
transition: width .6s ease !important;
align-self: flex-start !important;
flex-shrink: 0 !important;
}
html[data-be-theme="new"] #my_table .progress > h6 {
display: block !important;
position: absolute !important;
top: 14px !important;
right: 0 !important;
font-size: 11px !important;
font-weight: 700 !important;
color: #3b6ef8 !important;
white-space: nowrap !important;
line-height: 1 !important;
margin: 0 !important;
}
html[data-be-theme="new"][data-theme="dark"] #my_table .progress {
background: #2a3550 !important;
}
/* ══════════════════════════════════════════════════════
§13 NAV TABS (install_tracker.php)
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] .nav-tabs.nav-bordered {
border-bottom: 1px solid var(--be-border) !important;
}
html[data-be-theme="new"] .nav-tabs.nav-bordered .nav-link {
border: none !important;
border-bottom: 2px solid transparent !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--be-text-secondary) !important;
padding: 10px 18px !important;
border-radius: 0 !important;
transition: color var(--be-t), border-color var(--be-t) !important;
background: transparent !important;
}
html[data-be-theme="new"] .nav-tabs.nav-bordered .nav-link:hover { color: var(--be-blue) !important; border-bottom-color: var(--be-blue-mid) !important; }
html[data-be-theme="new"] .nav-tabs.nav-bordered .nav-link.active {
color: var(--be-blue) !important;
font-weight: 700 !important;
border-bottom: 2px solid var(--be-blue) !important;
background: transparent !important;
}
/* ══════════════════════════════════════════════════════
§14 ACCORDION (install_tracker.php)
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] .accordion-item {
border: none !important;
border-bottom: 1px solid var(--be-border-soft) !important;
background: transparent !important;
}
html[data-be-theme="new"] .accordion-button {
font-size: 13px !important;
font-weight: 600 !important;
color: var(--be-text-primary) !important;
background: var(--be-white) !important;
padding: 13px 16px !important;
box-shadow: none !important;
gap: 8px !important;
}
html[data-be-theme="new"] .accordion-button:not(.collapsed) {
background: var(--be-blue-light) !important;
color: var(--be-blue) !important;
}
html[data-be-theme="new"] .accordion-body {
background: var(--be-bg) !important;
padding: 16px !important;
font-size: 13px !important;
}
/* ══════════════════════════════════════════════════════
§15 TOAST (install_tracker.php)
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] .toast {
border: 1px solid var(--be-border) !important;
border-radius: var(--be-radius) !important;
box-shadow: var(--be-shadow-lg) !important;
overflow: hidden !important;
}
html[data-be-theme="new"] .toast-header.bg-primary {
background: var(--be-blue) !important;
border-bottom: none !important;
color: #fff !important;
font-weight: 600 !important;
}
html[data-be-theme="new"] .toast-body.bg-white {
background: var(--be-white) !important;
padding: 14px !important;
}
/* ══════════════════════════════════════════════════════
§16 MODALS
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] .modal-content {
border: 1px solid var(--be-border) !important;
border-radius: var(--be-radius-lg) !important;
box-shadow: var(--be-shadow-lg) !important;
overflow: hidden !important;
}
html[data-be-theme="new"] .modal-header {
background: var(--be-bg) !important;
border-bottom: 1px solid var(--be-border) !important;
padding: 16px 20px !important;
}
html[data-be-theme="new"] .modal-title {
font-size: 15px !important;
font-weight: 700 !important;
color: var(--be-text-primary) !important;
}
html[data-be-theme="new"] .modal-body { padding: 20px !important; background: var(--be-white) !important; }
html[data-be-theme="new"] .modal-footer { background: var(--be-bg) !important; border-top: 1px solid var(--be-border) !important; padding: 12px 20px !important; }
html[data-be-theme="new"] .btn-close { opacity: .5 !important; transition: opacity var(--be-t) !important; }
html[data-be-theme="new"] .btn-close:hover { opacity: 1 !important; }
/* ══════════════════════════════════════════════════════
§17 ALERTS
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] .alert {
border-radius: var(--be-radius) !important;
border: 1px solid transparent !important;
font-size: 13px !important;
padding: 12px 16px !important;
}
html[data-be-theme="new"] .alert-warning { background: var(--be-amber-light) !important; border-color: #fde68a !important; color: #92400e !important; }
html[data-be-theme="new"] .alert-danger { background: var(--be-red-light) !important; border-color: #fecaca !important; color: #991b1b !important; }
html[data-be-theme="new"] .alert-success { background: var(--be-green-light) !important; border-color: #bbf7d0 !important; color: #166534 !important; }
html[data-be-theme="new"] .alert-info { background: var(--be-blue-light) !important; border-color: var(--be-blue-mid) !important; color: var(--be-blue-dark) !important; }
/* ══════════════════════════════════════════════════════
§18 MISC HELPERS
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] hr { border-color: var(--be-border-soft) !important; opacity: 1 !important; }
html[data-be-theme="new"] p.text-muted { color: var(--be-text-secondary) !important; font-size: 13px !important; }
html[data-be-theme="new"] .text-info { color: var(--be-teal) !important; }
html[data-be-theme="new"] .bg-info { background: var(--be-teal) !important; }
html[data-be-theme="new"] .text-muted.font-14 { font-size: 13px !important; color: var(--be-text-secondary) !important; }
html[data-be-theme="new"] .text-muted.font-14 strong { color: var(--be-text-primary) !important; font-weight: 600 !important; }
/* scrollbar */
html[data-be-theme="new"] ::-webkit-scrollbar { width: 5px; height: 5px; }
html[data-be-theme="new"] ::-webkit-scrollbar-track { background: transparent; }
html[data-be-theme="new"] ::-webkit-scrollbar-thumb { background: var(--be-border); border-radius: 999px; }
/* ══════════════════════════════════════════════════════
§19 PRELOADER
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] .preloader-wrapper {
background: rgba(245,247,251,.95) !important;
backdrop-filter: blur(4px) !important;
}
html[data-be-theme="new"] .preloader-img { width: 80px !important; height: 72px !important; }
/* ══════════════════════════════════════════════════════════════════
§20 PAGE: trackers_new.php
JS cards injected by trackers_new.js → #my_table tbody#trackers
═══════════════════════════════════════════════════════════════════ */
html[data-be-theme="new"] #my_table tbody tr td {
padding: 6px 10px !important;
border: none !important;
background: transparent !important;
}
/* Card shell */
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 {
margin: 0 !important;
border: 1px solid var(--be-border) !important;
border-radius: var(--be-radius-lg) !important;
padding: 0 !important;
background: var(--be-white);
box-shadow: 0 2px 8px rgba(15,26,53,.06);
overflow: hidden;
transition: box-shadow .2s ease, border-color .2s ease;
}
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2:hover {
box-shadow: 0 6px 24px rgba(15,26,53,.10);
border-color: var(--be-blue-mid) !important;
}
/* Three columns */
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 > .col-lg-12 > .row {
margin: 0 !important;
display: flex !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
}
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 > .col-lg-12 > .row > .col-lg-4 {
padding: 18px 20px !important;
border-right: 1px solid var(--be-border-soft) !important;
flex: 1 1 0 !important;
min-width: 0;
}
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 > .col-lg-12 > .row > .col-lg-4:last-child {
border-right: none !important;
}
/* Column section title (h4) */
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 .col-lg-4 > h4.mb-3 {
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: .1em !important;
text-transform: uppercase !important;
color: var(--be-text-muted) !important;
margin: 0 0 12px !important;
}
/* Customer info strip inner border/bg */
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 .col-xxl-12.text-start.border.rounded-3.bg-body {
border: none !important;
border-radius: 0 !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 .col-xxl-12.text-start span {
display: block !important;
line-height: 1 !important;
margin-bottom: 10px !important;
}
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 .col-xxl-12.text-start strong {
display: block !important;
font-size: 10px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .07em !important;
color: var(--be-text-muted) !important;
margin-bottom: 1px !important;
}
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 .col-xxl-12.text-start a.text-info {
font-size: 13.5px !important;
font-weight: 700 !important;
color: var(--be-blue) !important;
text-decoration: none !important;
}
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 .col-xxl-12.text-start br { display: none !important; }
/* Col 3 project info: label left, value right */
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 [id^="information-"] span {
display: flex !important;
justify-content: space-between !important;
align-items: baseline !important;
margin-bottom: 7px !important;
line-height: 1.2 !important;
}
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 [id^="information-"] strong {
display: inline !important;
font-size: 12px !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: 0 !important;
color: var(--be-text-secondary) !important;
}
/* Design image area */
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 [id^="designs-"] {
border: 1.5px solid var(--be-border) !important;
border-radius: var(--be-radius-sm) !important;
background: var(--be-bg) !important;
min-height: 155px !important;
max-height: 175px !important;
width: 100% !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
margin-bottom: 10px !important;
}
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 [id^="designs-"] img {
max-height: 155px;
max-width: 100% !important;
width: auto !important;
cursor: pointer;
transition: transform .3s ease;
object-fit: contain;
}
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 [id^="designs-"] img[src*="sin_casa"] {
opacity: .22;
max-height: 60px !important;
max-width: 60px !important;
width: 60px !important;
}
/* Progress % h6 */
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 h6[style*="display:none"] {
display: block !important;
font-size: 11px !important;
font-weight: 700 !important;
color: var(--be-blue) !important;
text-align: right !important;
margin: 3px 0 0 !important;
}
/* Progress bar container */
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 .col-xxl-12 {
width: 100% !important;
box-sizing: border-box !important;
}
/* Software logo */
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 [id^="imagenSoftware-"] {
max-height: 32px !important;
object-fit: contain !important;
display: block !important;
margin-bottom: 8px !important;
}
/* Action buttons inside cards */
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 .btn-primary3 {
height: 28px !important;
font-size: 11.5px !important;
padding: 0 12px !important;
}
/* Responsive */
@media (max-width: 900px) {
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 > .col-lg-12 > .row { flex-wrap: wrap !important; }
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 > .col-lg-12 > .row > .col-lg-4 {
flex: 1 1 100% !important;
border-right: none !important;
border-bottom: 1px solid var(--be-border-soft) !important;
}
html[data-be-theme="new"] #my_table tbody tr td > .row.border.p-2 > .col-lg-12 > .row > .col-lg-4:last-child { border-bottom: none !important; }
}
/* ══════════════════════════════════════════════════════
§21 PAGE: leads_new2.php (JS-injected lead rows)
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] #leads tr td {
padding: 6px 10px !important;
border: none !important;
background: transparent !important;
}
html[data-be-theme="new"] #leads tr td > .row.border {
border: 1px solid var(--be-border) !important;
border-radius: var(--be-radius-lg) !important;
background: var(--be-white) !important;
box-shadow: var(--be-shadow-sm) !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
transition: box-shadow .2s ease, border-color .2s ease !important;
}
html[data-be-theme="new"] #leads tr td > .row.border:hover {
box-shadow: var(--be-shadow-lg) !important;
border-color: var(--be-blue-mid) !important;
}
/* ══════════════════════════════════════════════════════
§22 PAGE: customer_new.php
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] h4#customer {
font-size: 20px !important;
font-weight: 700 !important;
letter-spacing: -.02em !important;
color: var(--be-blue) !important;
}
html[data-be-theme="new"] .text-dark.fw-bold.font-16 {
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .1em !important;
color: var(--be-text-muted) !important;
}
html[data-be-theme="new"] .btn.w-100.bg-light {
background: var(--be-bg) !important;
border: 1px solid var(--be-border) !important;
border-radius: var(--be-radius-sm) !important;
color: var(--be-text-secondary) !important;
font-size: 13px !important;
font-weight: 500 !important;
text-align: left !important;
padding: 10px 16px !important;
transition: all var(--be-t) !important;
}
html[data-be-theme="new"] .btn.w-100.bg-light:hover {
background: var(--be-blue-light) !important;
border-color: var(--be-blue-mid) !important;
color: var(--be-blue) !important;
}
html[data-be-theme="new"] img#imagenDiseno {
border-radius: var(--be-radius) !important;
border: 1.5px solid var(--be-border) !important;
max-width: 320px !important;
background: var(--be-bg) !important;
}
/* ══════════════════════════════════════════════════════
§23 PAGE: install_tracker.php
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] h4#customerName {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--be-text-primary) !important;
}
html[data-be-theme="new"] #estado {
font-size: 11.5px !important;
font-weight: 700 !important;
border-radius: 999px !important;
padding: 5px 14px !important;
}
html[data-be-theme="new"] #customerPage .badge,
html[data-be-theme="new"] #proposal .badge,
html[data-be-theme="new"] #deal .badge,
html[data-be-theme="new"] #agreement .badge {
font-size: 12px !important;
padding: 6px 14px !important;
cursor: pointer !important;
transition: box-shadow var(--be-t) !important;
}
html[data-be-theme="new"] #customerPage .badge:hover,
html[data-be-theme="new"] #proposal .badge:hover,
html[data-be-theme="new"] #deal .badge:hover,
html[data-be-theme="new"] #agreement .badge:hover {
box-shadow: 0 4px 12px rgba(59,110,248,.22) !important;
}
html[data-be-theme="new"] #contenedorSent .p-2.bg-light {
background: var(--be-bg) !important;
border-top: 1px solid var(--be-border) !important;
}
/* ══════════════════════════════════════════════════════
§24 PAGE: leads_new.php (map)
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] #map {
border-radius: var(--be-radius) !important;
overflow: hidden !important;
border: 1px solid var(--be-border) !important;
}
/* ══════════════════════════════════════════════════════
§25 MENTION MENU (trackers / milestones)
══════════════════════════════════════════════════════ */
html[data-be-theme="new"] .menu {
background: var(--be-white) !important;
border: 1px solid var(--be-border) !important;
border-radius: var(--be-radius-sm) !important;
box-shadow: var(--be-shadow-lg) !important;
}
html[data-be-theme="new"] .menu-item {
padding: 7px 12px !important;
font-size: 13px !important;
cursor: pointer !important;
transition: background var(--be-t) !important;
}
html[data-be-theme="new"] .menu-item.selected,
html[data-be-theme="new"] .menu-item:hover:not(.selected) {
background: var(--be-blue-light) !important;
color: var(--be-blue) !important;
}
/* ══════════════════════════════════════════════════════════════════════
§26 DARK MODE
Triggered by: html[data-theme="dark"]
The Hyper theme JS sets this attribute automatically when the user
clicks the moon/sun toggle (#light-dark-mode) in the topbar.
We combine it with data-be-theme="new" so dark mode only applies
when the new design system is also active.
═══════════════════════════════════════════════════════════════════════ */
/* Dark design tokens */
html[data-be-theme="new"][data-theme="dark"] {
--be-white: #1e2533;
--be-bg: #171e2b;
--be-surface: #1e2533;
--be-border: #2e3a4e;
--be-border-soft: #253042;
--be-blue: #5b8def;
--be-blue-light: #1d2a42;
--be-blue-mid: #2d4070;
--be-blue-dark: #3d6fe0;
--be-teal: #12d8b8;
--be-teal-light: #0f2e2a;
--be-amber-light: #2a2010;
--be-red-light: #2a1515;
--be-green-light: #0f2a1a;
--be-text-primary: #e2e8f0;
--be-text-secondary: #94a3b8;
--be-text-muted: #64748b;
--be-shadow-sm: 0 1px 3px rgba(0,0,0,.3);
--be-shadow: 0 4px 16px rgba(0,0,0,.35);
--be-shadow-lg: 0 8px 32px rgba(0,0,0,.45);
}
/* Body / page background */
html[data-be-theme="new"][data-theme="dark"],
html[data-be-theme="new"][data-theme="dark"] body {
background-color: var(--be-bg) !important;
color: var(--be-text-primary) !important;
}
/* Topbar */
html[data-be-theme="new"][data-theme="dark"] .navbar-custom {
background: #1e2533 !important;
border-bottom-color: var(--be-border) !important;
box-shadow: 0 1px 12px rgba(0,0,0,.3) !important;
}
html[data-be-theme="new"][data-theme="dark"] .nav-user {
background-color: #253042 !important;
border-color: var(--be-border) !important;
}
html[data-be-theme="new"][data-theme="dark"] .navbar-custom .nav-user h5 {
color: var(--be-text-primary) !important;
}
html[data-be-theme="new"][data-theme="dark"] .navbar-custom .nav-user h6 {
color: var(--be-text-muted) !important;
}
/* Dark mode logo */
html[data-be-theme="new"][data-theme="dark"] .logo-topbar .logo-light {
display: block !important;
}
html[data-be-theme="new"][data-theme="dark"] .logo-topbar .logo-dark {
display: none !important;
}
/* Sidebar */
html[data-be-theme="new"][data-theme="dark"] .leftside-menu {
background: #1a2130 !important;
border-right-color: var(--be-border) !important;
}
html[data-be-theme="new"][data-theme="dark"] .side-nav .side-nav-link {
color: var(--be-text-secondary) !important;
}
html[data-be-theme="new"][data-theme="dark"] .side-nav .side-nav-link:hover,
html[data-be-theme="new"][data-theme="dark"] .side-nav .side-nav-link:focus,
html[data-be-theme="new"][data-theme="dark"] .side-nav .menuitem-active > .side-nav-link {
background: var(--be-blue-light) !important;
color: var(--be-blue) !important;
}
html[data-be-theme="new"][data-theme="dark"] .side-nav .side-nav-second-level li a {
color: var(--be-text-secondary) !important;
}
html[data-be-theme="new"][data-theme="dark"] .side-nav .side-nav-second-level li a:hover {
background: var(--be-blue-light) !important;
color: var(--be-blue) !important;
}
/* Cards */
html[data-be-theme="new"][data-theme="dark"] .card {
background: var(--be-surface) !important;
border-color: var(--be-border) !important;
}
html[data-be-theme="new"][data-theme="dark"] .card-header {
background: #171e2b !important;
border-bottom-color: var(--be-border) !important;
color: var(--be-text-muted) !important;
}
html[data-be-theme="new"][data-theme="dark"] .card-title {
color: var(--be-text-primary) !important;
}
/* Form controls */
html[data-be-theme="new"][data-theme="dark"] .form-control,
html[data-be-theme="new"][data-theme="dark"] .form-select {
background: #253042 !important;
border-color: var(--be-border) !important;
color: var(--be-text-primary) !important;
}
html[data-be-theme="new"][data-theme="dark"] .form-control:focus,
html[data-be-theme="new"][data-theme="dark"] .form-select:focus {
border-color: var(--be-blue) !important;
box-shadow: 0 0 0 3px rgba(91,141,239,.18) !important;
}
html[data-be-theme="new"][data-theme="dark"] .form-control::placeholder {
color: var(--be-text-muted) !important;
}
html[data-be-theme="new"][data-theme="dark"] .input-group-text {
background: #253042 !important;
border-color: var(--be-border) !important;
color: var(--be-text-secondary) !important;
}
html[data-be-theme="new"][data-theme="dark"] .form-label,
html[data-be-theme="new"][data-theme="dark"] .col-form-label {
color: var(--be-text-secondary) !important;
}
/* Tables */
html[data-be-theme="new"][data-theme="dark"] .table {
color: var(--be-text-primary) !important;
}
html[data-be-theme="new"][data-theme="dark"] .table > thead > tr > th {
background: #171e2b !important;
color: var(--be-text-muted) !important;
border-bottom-color: var(--be-border) !important;
}
html[data-be-theme="new"][data-theme="dark"] .table > tbody > tr > td {
border-bottom-color: var(--be-border-soft) !important;
}
html[data-be-theme="new"][data-theme="dark"] .table > tbody > tr:hover > td {
background: var(--be-blue-light) !important;
}
/* Modals */
html[data-be-theme="new"][data-theme="dark"] .modal-content {
background: var(--be-surface) !important;
border-color: var(--be-border) !important;
}
html[data-be-theme="new"][data-theme="dark"] .modal-header {
background: #171e2b !important;
border-bottom-color: var(--be-border) !important;
}
html[data-be-theme="new"][data-theme="dark"] .modal-title {
color: var(--be-text-primary) !important;
}
html[data-be-theme="new"][data-theme="dark"] .modal-body {
background: var(--be-surface) !important;
color: var(--be-text-primary) !important;
}
html[data-be-theme="new"][data-theme="dark"] .modal-footer {
background: #171e2b !important;
border-top-color: var(--be-border) !important;
}
/* Accordion */
html[data-be-theme="new"][data-theme="dark"] .accordion-button {
background: var(--be-surface) !important;
color: var(--be-text-primary) !important;
}
html[data-be-theme="new"][data-theme="dark"] .accordion-button:not(.collapsed) {
background: var(--be-blue-light) !important;
color: var(--be-blue) !important;
}
html[data-be-theme="new"][data-theme="dark"] .accordion-body {
background: #171e2b !important;
color: var(--be-text-secondary) !important;
}
html[data-be-theme="new"][data-theme="dark"] .accordion-item {
border-bottom-color: var(--be-border-soft) !important;
}
/* Nav tabs */
html[data-be-theme="new"][data-theme="dark"] .nav-tabs.nav-bordered {
border-bottom-color: var(--be-border) !important;
}
html[data-be-theme="new"][data-theme="dark"] .nav-tabs.nav-bordered .nav-link {
color: var(--be-text-secondary) !important;
}
html[data-be-theme="new"][data-theme="dark"] .nav-tabs.nav-bordered .nav-link.active {
color: var(--be-blue) !important;
border-bottom-color: var(--be-blue) !important;
}
/* Select2 */
html[data-be-theme="new"][data-theme="dark"] .select2-container--default .select2-selection--single {
background: #253042 !important;
border-color: var(--be-border) !important;
}
html[data-be-theme="new"][data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--be-text-primary) !important;
}
html[data-be-theme="new"][data-theme="dark"] .select2-dropdown {
background: #253042 !important;
border-color: var(--be-border) !important;
}
html[data-be-theme="new"][data-theme="dark"] .select2-container--default .select2-results__option {
color: var(--be-text-primary) !important;
}
html[data-be-theme="new"][data-theme="dark"] .select2-container--default .select2-results__option--highlighted {
background: var(--be-blue-light) !important;
color: var(--be-blue) !important;
}
/* Buttons — keep legible on dark */
html[data-be-theme="new"][data-theme="dark"] .btn-secondary,
html[data-be-theme="new"][data-theme="dark"] .btn-light {
background: #253042 !important;
border-color: var(--be-border) !important;
color: var(--be-text-secondary) !important;
}
html[data-be-theme="new"][data-theme="dark"] .btn-secondary:hover,
html[data-be-theme="new"][data-theme="dark"] .btn-light:hover {
background: var(--be-blue-light) !important;
color: var(--be-blue) !important;
}
html[data-be-theme="new"][data-theme="dark"] .btn.w-100.bg-light {
background: #253042 !important;
border-color: var(--be-border) !important;
color: var(--be-text-secondary) !important;
}
html[data-be-theme="new"][data-theme="dark"] .btn.w-100.bg-light:hover {
background: var(--be-blue-light) !important;
color: var(--be-blue) !important;
}
/* Tracker cards (dark) */
html[data-be-theme="new"][data-theme="dark"] #my_table tbody tr td > .row.border.p-2 {
background: var(--be-surface) !important;
border-color: var(--be-border) !important;
}
html[data-be-theme="new"][data-theme="dark"] #my_table tbody tr td > .row.border.p-2 > .col-lg-12 > .row > .col-lg-4 {
border-right-color: var(--be-border-soft) !important;
}
html[data-be-theme="new"][data-theme="dark"] #my_table tbody tr td > .row.border.p-2 .col-xxl-12.text-start.border.rounded-3.bg-body {
background: transparent !important;
}
html[data-be-theme="new"][data-theme="dark"] #my_table tbody tr td > .row.border.p-2 [id^="designs-"] {
background: #171e2b !important;
border-color: var(--be-border) !important;
}
/* Leads cards (dark) */
html[data-be-theme="new"][data-theme="dark"] #leads tr td > .row.border {
background: var(--be-surface) !important;
border-color: var(--be-border) !important;
}
/* HR dividers */
html[data-be-theme="new"][data-theme="dark"] hr {
border-color: var(--be-border) !important;
}
/* Page title */
html[data-be-theme="new"][data-theme="dark"] .page-title {
color: var(--be-text-primary) !important;
}
html[data-be-theme="new"][data-theme="dark"] .breadcrumb-item a {
color: var(--be-text-secondary) !important;
}
/* Misc text */
html[data-be-theme="new"][data-theme="dark"] p.text-muted,
html[data-be-theme="new"][data-theme="dark"] .text-muted {
color: var(--be-text-secondary) !important;
}
html[data-be-theme="new"][data-theme="dark"] strong {
color: var(--be-text-primary) !important;
}
html[data-be-theme="new"][data-theme="dark"] h4,
html[data-be-theme="new"][data-theme="dark"] h5 {
color: var(--be-text-primary) !important;
}
/* Customer name */
html[data-be-theme="new"][data-theme="dark"] h4#customer {
color: var(--be-blue) !important;
}
/* Footer */
html[data-be-theme="new"][data-theme="dark"] .footer {
background: #1a2130 !important;
border-top: 1px solid var(--be-border) !important;
color: var(--be-text-muted) !important;
}
html[data-be-theme="new"][data-theme="dark"] .footer a {
color: var(--be-text-secondary) !important;
}
/* Scrollbar dark */
html[data-be-theme="new"][data-theme="dark"] ::-webkit-scrollbar-thumb {
background: var(--be-border) !important;
}
/* Mention menu dark */
html[data-be-theme="new"][data-theme="dark"] .menu {
background: #253042 !important;
border-color: var(--be-border) !important;
}
html[data-be-theme="new"][data-theme="dark"] .menu-item {
color: var(--be-text-primary) !important;
}
/* Moon icon → becomes sun icon in dark mode (handled by theme JS already) */
/* Toast dark */
html[data-be-theme="new"][data-theme="dark"] .toast {
border-color: var(--be-border) !important;
}
html[data-be-theme="new"][data-theme="dark"] .toast-body.bg-white {
background: var(--be-surface) !important;
color: var(--be-text-primary) !important;
}