/* ============================================================ FIGHTER VPN — Modern Theme (v7) Fixes from v6 feedback: - Sidebar logo gap reduced - Mini sidebar icon larger - Bell icon more visible - Notice box: same layout, navy color only - Card statistic: proper flex layout, no awkward gap - Globe/cog: more space between - Breadcrumb: noted as HTML issue (div not anchor) - Search click: confirmed correct (opens modal, not navigate) Accent: Navy #1C4D8D ============================================================ */ /* ============================================================ 1. COLOR VARIABLES — LIGHT MODE ============================================================ */ :root, [data-theme="light"] { --mt-accent: #1C4D8D; --mt-accent-hover: #163D70; --mt-accent-light: #2E6BB8; --mt-accent-soft: #EFF6FF; --mt-accent-text: #1C4D8D; --mt-bg-page: #F8FAFC; --mt-bg-card: #FFFFFF; --mt-bg-elevated: #FFFFFF; --mt-bg-input: #FFFFFF; --mt-bg-hover: #F1F5F9; --mt-bg-active: #E2E8F0; --mt-bg-sidebar: #FFFFFF; --mt-bg-navbar: #FFFFFF; --mt-bg-modal: #FFFFFF; --mt-text-primary: #0F172A; --mt-text-secondary: #475569; --mt-text-muted: #64748B; --mt-text-inverse: #FFFFFF; --mt-text-sidebar: #475569; --mt-text-sidebar-active: #1C4D8D; --mt-border: #E2E8F0; --mt-border-strong: #CBD5E1; --mt-border-focus: #1C4D8D; --mt-success: #10B981; --mt-success-bg: #ECFDF5; --mt-warning: #F59E0B; --mt-warning-bg: #FFFBEB; --mt-danger: #EF4444; --mt-danger-bg: #FEF2F2; --mt-info: #2E6BB8; --mt-info-bg: #EFF6FF; --mt-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --mt-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --mt-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --mt-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.10); --mt-radius-sm: 6px; --mt-radius: 8px; --mt-radius-lg: 10px; --mt-radius-xl: 14px; --mt-backdrop: rgba(15, 23, 42, 0.45); } /* ============================================================ 2. COLOR VARIABLES — DARK MODE ============================================================ */ [data-theme="dark"] { --mt-accent: #2E6BB8; --mt-accent-hover: #4A86C4; --mt-accent-light: #4A86C4; --mt-accent-soft: rgba(46, 107, 184, 0.18); --mt-accent-text: #93BFE8; --mt-bg-page: #0B1220; --mt-bg-card: #111827; --mt-bg-elevated: #1A2235; --mt-bg-input: #0F1626; --mt-bg-hover: rgba(46, 107, 184, 0.10); --mt-bg-active: rgba(46, 107, 184, 0.18); --mt-bg-sidebar: #0F172A; --mt-bg-navbar: #111827; --mt-bg-modal: #111827; --mt-text-primary: #E2E8F0; --mt-text-secondary: #94A3B8; --mt-text-muted: #64748B; --mt-text-inverse: #FFFFFF; --mt-text-sidebar: #94A3B8; --mt-text-sidebar-active: #FFFFFF; --mt-border: #1F2937; --mt-border-strong: #374151; --mt-border-focus: #4A86C4; --mt-success: #34D399; --mt-success-bg: rgba(16, 185, 129, 0.12); --mt-warning: #FBBF24; --mt-warning-bg: rgba(245, 158, 11, 0.12); --mt-danger: #F87171; --mt-danger-bg: rgba(239, 68, 68, 0.12); --mt-info: #93BFE8; --mt-info-bg: rgba(46, 107, 184, 0.18); --mt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --mt-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --mt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --mt-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); --mt-backdrop: rgba(0, 0, 0, 0.65); } /* ============================================================ 3. TRANSITIONS ============================================================ */ /* ============================================================ 4. PAGE & BODY ============================================================ */ html[data-theme="dark"] body, html[data-theme="light"] body { background-color: var(--mt-bg-page) !important; color: var(--mt-text-primary) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html[data-theme] .main-wrapper, html[data-theme] .main-content, html[data-theme] section.section { background-color: var(--mt-bg-page) !important; } /* ============================================================ 5. SCROLLBARS — thin, no track, no sidebar overflow ============================================================ */ html[data-theme] ::selection { background: var(--mt-accent); color: var(--mt-text-inverse); } /* ============================================================ 6. KILL ALL PURPLE ============================================================ */ html[data-theme] .btn-primary, html[data-theme] .btn.btn-primary { background-color: var(--mt-accent) !important; background-image: none !important; border-color: var(--mt-accent) !important; color: #FFFFFF !important; box-shadow: none !important; } html[data-theme] .btn-primary:hover, html[data-theme] .btn-primary:focus, html[data-theme] .btn-primary:active, html[data-theme] .btn-primary.active, html[data-theme] .btn-primary:not(:disabled):not(.disabled):active { background-color: var(--mt-accent-hover) !important; border-color: var(--mt-accent-hover) !important; box-shadow: 0 0 0 3px var(--mt-accent-soft) !important; color: #FFFFFF !important; } html[data-theme] .btn-outline-primary { background-color: transparent !important; border-color: var(--mt-accent) !important; color: var(--mt-accent-text) !important; } html[data-theme] .btn-outline-primary:hover { background-color: var(--mt-accent) !important; color: #FFFFFF !important; } html[data-theme] .btn { border-radius: var(--mt-radius) !important; font-weight: 500; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease !important; } html[data-theme] .btn:active, html[data-theme] .btn:not(:disabled):not(.disabled):active { transform: translateY(1px); } html[data-theme] .bg-primary { background-color: var(--mt-accent) !important; } html[data-theme] .badge-primary, html[data-theme] .badge.badge-primary { background-color: var(--mt-accent) !important; color: #FFFFFF !important; } html[data-theme] .page-item.active .page-link { background-color: var(--mt-accent) !important; border-color: var(--mt-accent) !important; color: #FFFFFF !important; } html[data-theme] .page-link { color: var(--mt-accent) !important; } html[data-theme="dark"] .page-link { background-color: var(--mt-bg-card) !important; border-color: var(--mt-border) !important; color: var(--mt-accent-text) !important; } /* ============================================================ 7. SECTION-TITLE NAVY BAR ============================================================ */ html[data-theme] .section-title::before, html[data-theme] .section .section-title::before, html[data-theme] .card .card-body .section-title::before { background-color: var(--mt-accent) !important; border-radius: 4px !important; height: 6px !important; width: 24px !important; margin-top: 10px !important; margin-right: 8px !important; } html[data-theme] .section-title, html[data-theme] .section .section-title, html[data-theme] .card .card-body .section-title { color: var(--mt-text-primary) !important; font-weight: 500 !important; } /* ============================================================ 8. DARK MODE GLOBAL TEXT ============================================================ */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .h1, html[data-theme="dark"] .h2, html[data-theme="dark"] .h3, html[data-theme="dark"] .h4, html[data-theme="dark"] .h5, html[data-theme="dark"] .h6, html[data-theme="dark"] p, html[data-theme="dark"] span:not(.badge):not([class*="bg-"]):not([class*="badge-"]), html[data-theme="dark"] label, html[data-theme="dark"] li, html[data-theme="dark"] td, html[data-theme="dark"] th, html[data-theme="dark"] dt, html[data-theme="dark"] dd, html[data-theme="dark"] strong, html[data-theme="dark"] b, html[data-theme="dark"] small, html[data-theme="dark"] figcaption, html[data-theme="dark"] .text-job, html[data-theme="dark"] .text-title, html[data-theme="dark"] .text-title-md, html[data-theme="dark"] .text-small, html[data-theme="dark"] .text-time, html[data-theme="dark"] .text-date, html[data-theme="dark"] .activities-text, html[data-theme="dark"] .activity-detail, html[data-theme="dark"] .name, html[data-theme="dark"] .modal-title { color: var(--mt-text-primary) !important; } html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sidebar-menu a):not([class*="text-"]) { color: var(--mt-accent-text) !important; } html[data-theme="light"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sidebar-menu a):not([class*="text-"]) { color: var(--mt-accent) !important; } /* ============================================================ 9. NAVBAR ============================================================ */ html[data-theme] .navbar-bg { background-color: transparent !important; background-image: none !important; } html[data-theme] .main-navbar, html[data-theme] .navbar.main-navbar { background-color: var(--mt-bg-navbar) !important; background-image: none !important; border-bottom: 1px solid var(--mt-border) !important; box-shadow: none !important; height: 60px; } /* FIX — Bell icon more visible (larger + brighter) */ html[data-theme] .main-navbar .nav-link { color: var(--mt-text-secondary) !important; } html[data-theme] .main-navbar .notification-toggle i.fa-bell, html[data-theme] .main-navbar .nav-link-lg i { font-size: 18px !important; color: var(--mt-text-primary) !important; } html[data-theme] .main-navbar .nav-link:hover, html[data-theme] .main-navbar .nav-link:focus { color: var(--mt-text-primary) !important; background: var(--mt-bg-hover) !important; border-radius: var(--mt-radius); } html[data-theme] .main-navbar .nav-link span { color: var(--mt-text-primary) !important; } /* Search input */ html[data-theme] .main-navbar .form-control, html[data-theme] .search-element .form-control { background-color: var(--mt-bg-input) !important; border: 1px solid var(--mt-border) !important; color: var(--mt-text-primary) !important; border-radius: var(--mt-radius) !important; } html[data-theme] .main-navbar .form-control::placeholder, html[data-theme] .search-element .form-control::placeholder { color: var(--mt-text-muted) !important; } /* Search button (the magnifier) */ html[data-theme] .search-element .btn, html[data-theme] .search-element button[type="button"] { background-color: var(--mt-accent) !important; border: 1px solid var(--mt-accent) !important; color: #FFFFFF !important; border-radius: var(--mt-radius) !important; } html[data-theme] .search-element .btn:hover { background-color: var(--mt-accent-hover) !important; } html[data-theme] .search-element .btn i { color: #FFFFFF !important; } /* ============================================================ 10. SEARCH RESULT DROPDOWN Note: clicking a result opens a user detail MODAL (not a page navigation — this is the panel's intended behavior) ============================================================ */ html[data-theme] .navbar .form-inline .search-result, html[data-theme] .search-result { background-color: var(--mt-bg-elevated) !important; border: 1px solid var(--mt-border) !important; border-radius: var(--mt-radius-lg) !important; box-shadow: var(--mt-shadow-md) !important; z-index: 9999 !important; top: 70px !important; } html[data-theme] .navbar .form-inline .search-result:before { color: var(--mt-bg-elevated) !important; } html[data-theme] .navbar .form-inline .search-result .search-header { color: var(--mt-text-muted) !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; padding: 10px 16px 4px; } html[data-theme] .navbar .form-inline .search-result .search-item a, html[data-theme] .search-result .search-item a, html[data-theme] .search--item a { color: var(--mt-text-primary) !important; padding: 10px 16px !important; border-radius: var(--mt-radius-sm); pointer-events: auto !important; display: flex !important; align-items: center; gap: 10px; cursor: pointer !important; } html[data-theme] .navbar .form-inline .search-result .search-item a:hover, html[data-theme] .search--item a:hover { background-color: var(--mt-bg-hover) !important; color: var(--mt-accent-text) !important; } html[data-theme] .search-result .search-icon, html[data-theme] .navbar .form-inline .search-result .search-item .search-icon { background-color: var(--mt-accent-soft) !important; color: var(--mt-accent) !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ============================================================ 11. DROPDOWN MENUS + NOTIFICATION ============================================================ */ html[data-theme] .dropdown-menu { background-color: var(--mt-bg-elevated) !important; border: 1px solid var(--mt-border) !important; box-shadow: var(--mt-shadow-md) !important; border-radius: var(--mt-radius-lg) !important; padding: 6px; } html[data-theme] .dropdown-menu .dropdown-item { color: var(--mt-text-primary) !important; border-radius: var(--mt-radius-sm); padding: 8px 12px; font-size: 14px; } html[data-theme] .dropdown-menu .dropdown-item i { color: var(--mt-text-muted) !important; margin-right: 8px; width: 16px; } html[data-theme] .dropdown-menu .dropdown-item:hover, html[data-theme] .dropdown-menu .dropdown-item:focus { background: var(--mt-bg-hover) !important; color: var(--mt-accent-text) !important; } html[data-theme] .dropdown-menu .dropdown-item:hover i { color: var(--mt-accent) !important; } html[data-theme] .dropdown-menu .dropdown-divider { border-top-color: var(--mt-border) !important; } html[data-theme] .dropdown-menu .dropdown-header { background: transparent !important; color: var(--mt-text-muted) !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; padding: 8px 12px 4px; } /* Notification dropdown */ html[data-theme] .dropdown-list, html[data-theme] .dropdown-menu.dropdown-list { background-color: var(--mt-bg-elevated) !important; border: 1px solid var(--mt-border) !important; box-shadow: var(--mt-shadow-md) !important; min-width: 320px; padding: 8px; overflow: hidden !important; scrollbar-width: none !important; } html[data-theme] .dropdown-list .dropdown-item { background-color: var(--mt-bg-card) !important; border: 1px solid var(--mt-border) !important; border-radius: var(--mt-radius) !important; margin-bottom: 4px; padding: 10px 12px; } html[data-theme] .dropdown-list .dropdown-item:hover, html[data-theme] .dropdown-list .dropdown-item:focus { background-color: var(--mt-bg-hover) !important; border-color: var(--mt-accent) !important; } html[data-theme] .notificationlist, html[data-theme] .notice-dropdown, html[data-theme] .dropdown-list-icons, html[data-theme] .profile-notifications { background: transparent !important; } html[data-theme] .dropdown-list .dropdown-item-text, html[data-theme] .dropdown-list p { color: var(--mt-text-primary) !important; } html[data-theme] .dropdown-list small, html[data-theme] .dropdown-list .time { color: var(--mt-text-muted) !important; } /* ============================================================ 12. SIDEBAR — BRAND (FIX 1: reduced gap between logo + name) ============================================================ */ html[data-theme] .main-sidebar, html[data-theme] .main-sidebar.sidebar-style-2 { background-color: var(--mt-bg-sidebar) !important; background-image: none !important; border-right: 1px solid var(--mt-border) !important; box-shadow: none !important; overflow-x: hidden !important; } /* Normal brand (full text + logo) */ html[data-theme] body:not(.sidebar-mini) .main-sidebar .sidebar-brand-sm { display: none !important; } html[data-theme] body.sidebar-mini .main-sidebar .sidebar-brand { display: none !important; } html[data-theme] .main-sidebar .sidebar-brand { background-color: var(--mt-bg-sidebar) !important; background-image: none !important; border-bottom: 1px solid var(--mt-border); padding: 0 16px; /* reduced vertical padding */ height: 60px; display: flex !important; align-items: center !important; } html[data-theme] .main-sidebar .sidebar-brand a { display: flex !important; align-items: center !important; gap: 8px !important; /* FIX 1: was 12px, now 8px */ color: var(--mt-accent-text) !important; font-weight: 700; text-decoration: none; white-space: nowrap; overflow: hidden; width: 100%; } html[data-theme] .main-sidebar .sidebar-brand img { max-height: 36px !important; /* balanced size */ width: auto !important; flex-shrink: 0; display: block !important; } /* Kill rainbow on brand text */ html[data-theme] .main-sidebar .sidebar-brand .animate-charcter { background: none !important; background-clip: unset !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: var(--mt-accent) !important; color: var(--mt-accent) !important; animation: none !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block !important; } html[data-theme="dark"] .main-sidebar .sidebar-brand .animate-charcter { -webkit-text-fill-color: var(--mt-accent-text) !important; color: var(--mt-accent-text) !important; } /* FIX 2: Mini sidebar — larger icon */ html[data-theme] body.sidebar-mini .main-sidebar .sidebar-brand-sm { display: flex !important; align-items: center !important; justify-content: center !important; height: 60px; background-color: var(--mt-bg-sidebar) !important; background-image: none !important; border-bottom: 1px solid var(--mt-border); padding: 0; } html[data-theme] body.sidebar-mini .main-sidebar .sidebar-brand-sm a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } html[data-theme] body.sidebar-mini .main-sidebar .sidebar-brand-sm img { max-height: 42px !important; /* FIX 2: larger in mini mode (was 32px) */ width: auto !important; } /* ============================================================ 13. SIDEBAR MENU ITEMS ============================================================ */ /* MAIN / PANEL headers */ html[data-theme] .main-sidebar .sidebar-menu li.menu-header { color: var(--mt-text-secondary) !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600 !important; padding: 18px 20px 6px !important; background: transparent !important; } html[data-theme="dark"] .main-sidebar .sidebar-menu li.menu-header { color: #6B88A8 !important; } /* Menu links */ html[data-theme] .main-sidebar .sidebar-menu li a { color: var(--mt-text-sidebar) !important; border-radius: var(--mt-radius); margin: 1px 10px; padding: 9px 12px; font-size: 14px; font-weight: 400; background: transparent !important; position: relative; } html[data-theme] .main-sidebar .sidebar-menu li a i { color: var(--mt-text-muted) !important; font-size: 16px; width: 20px; text-align: center; margin-right: 8px; flex-shrink: 0; } html[data-theme] .main-sidebar .sidebar-menu li a:hover { background: var(--mt-bg-hover) !important; color: var(--mt-text-primary) !important; } html[data-theme] .main-sidebar .sidebar-menu li a:hover i { color: var(--mt-accent) !important; } html[data-theme="dark"] .main-sidebar .sidebar-menu li a:hover i { color: var(--mt-accent-text) !important; } /* Active item — remove Stisla's purple ::before, add navy */ html[data-theme] body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu > li.active > a:before { background-color: var(--mt-accent) !important; width: 3px !important; border-radius: 0 3px 3px 0 !important; } html[data-theme] .main-sidebar .sidebar-menu li.active > a { background: var(--mt-accent-soft) !important; color: var(--mt-text-sidebar-active) !important; font-weight: 500; } html[data-theme] .main-sidebar .sidebar-menu li.active > a i { color: var(--mt-accent) !important; } html[data-theme="dark"] .main-sidebar .sidebar-menu li.active > a i { color: var(--mt-accent-text) !important; } /* Submenus */ html[data-theme] .main-sidebar .sidebar-menu .nav-submenu, html[data-theme] .main-sidebar .sidebar-menu .dropdown-menu { background: transparent !important; box-shadow: none !important; border: none !important; } html[data-theme] .main-sidebar .sidebar-menu .nav-submenu li a, html[data-theme] .main-sidebar .sidebar-menu .dropdown-menu li a { padding-left: 44px !important; font-size: 13px !important; color: var(--mt-text-sidebar) !important; margin: 1px 10px; border-radius: var(--mt-radius); } html[data-theme] .main-sidebar .sidebar-menu .nav-submenu li.active a, html[data-theme] .main-sidebar .sidebar-menu .dropdown-menu li.active a { color: var(--mt-accent-text) !important; font-weight: 500; background: var(--mt-accent-soft) !important; } html[data-theme] .main-sidebar .sidebar-menu .nav-submenu li a:hover, html[data-theme] .main-sidebar .sidebar-menu .dropdown-menu li a:hover { color: var(--mt-text-primary) !important; background: var(--mt-bg-hover) !important; } /* ============================================================ 14. CARDS ============================================================ */ html[data-theme] .card { background-color: var(--mt-bg-card) !important; border: 1px solid var(--mt-border) !important; border-radius: var(--mt-radius-lg) !important; box-shadow: var(--mt-shadow-sm) !important; } html[data-theme] .card:hover { box-shadow: var(--mt-shadow) !important; } html[data-theme] .card-header { background-color: transparent !important; border-bottom: 1px solid var(--mt-border) !important; color: var(--mt-text-primary) !important; padding: 1rem 1.25rem; } html[data-theme] .card-header h4, html[data-theme] .card-header h2, html[data-theme] .card-header .card-title { color: var(--mt-text-primary) !important; font-weight: 500; font-size: 16px; margin: 0; } html[data-theme] .card-body { color: var(--mt-text-primary) !important; padding: 1.25rem; } html[data-theme] .card-footer { background-color: transparent !important; border-top: 1px solid var(--mt-border) !important; color: var(--mt-text-secondary) !important; } html[data-theme] .card.card-primary { border-top: 2px solid var(--mt-accent) !important; } /* FIX 10 — Stat cards: proper flexbox layout so title+value look right */ html[data-theme] .card.card-statistic-1, html[data-theme] .card.card-statistic-2 { border-top: 1px solid var(--mt-border) !important; overflow: hidden; } /* Turn the card into a flex row: icon left, text right */ html[data-theme] .card.card-statistic-1 .card-body-wrapper, html[data-theme] .card.card-statistic-1 > div:first-child { display: flex !important; align-items: center !important; gap: 0 !important; } /* Icon box */ html[data-theme] .card-statistic-1 .card-icon, html[data-theme] .card-statistic-2 .card-icon { background: var(--mt-accent-soft) !important; border-radius: var(--mt-radius) !important; width: 64px !important; height: 64px !important; min-width: 64px; display: flex !important; align-items: center !important; justify-content: center !important; border: none !important; box-shadow: none !important; float: left; margin: 14px 16px 14px 14px !important; line-height: 1 !important; } html[data-theme] .card-statistic-1 .card-icon:not([class*="mt-icon"]) i, html[data-theme] .card-statistic-2 .card-icon:not([class*="mt-icon"]) i { color: var(--mt-accent) !important; font-size: 22px !important; line-height: 1 !important; } html[data-theme="dark"] .card-statistic-1 .card-icon i, html[data-theme="dark"] .card-statistic-2 .card-icon i { color: var(--mt-accent-text) !important; } /* Card header (the title like "Reseller", "Users") */ html[data-theme] .card.card-statistic-1 .card-header, html[data-theme] .card.card-statistic-2 .card-header { border-bottom: none !important; /* FIX — no middle divider line */ padding-top: 18px !important; padding-bottom: 2px !important; background: transparent !important; } html[data-theme] .card.card-statistic-1 .card-header h4, html[data-theme] .card.card-statistic-2 .card-header h4 { color: var(--mt-text-muted) !important; font-size: 12px !important; font-weight: 500 !important; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 !important; } /* Card body (the number like "1", "3", "0") */ html[data-theme] .card.card-statistic-1 .card-body, html[data-theme] .card.card-statistic-2 .card-body { padding-top: 0 !important; padding-bottom: 18px !important; color: var(--mt-text-primary) !important; font-size: 28px !important; font-weight: 600 !important; line-height: 1.1 !important; } /* Stat card accent top borders */ html[data-theme] .card.card-statistic-1.card-info { border-top: 2px solid var(--mt-info) !important; } html[data-theme] .card.card-statistic-1.card-success { border-top: 2px solid var(--mt-success) !important; } html[data-theme] .card.card-statistic-1.card-warning { border-top: 2px solid var(--mt-warning) !important; } html[data-theme] .card.card-statistic-1.card-danger { border-top: 2px solid var(--mt-danger) !important; } html[data-theme] .card-statistic-1 small, html[data-theme] .card-statistic-2 small { color: var(--mt-text-muted) !important; } /* ============================================================ 15. SECTION HEADER & BREADCRUMBS ============================================================ */ html[data-theme] .section-header { background: transparent !important; padding: 20px 30px 16px !important; border-bottom: 1px solid var(--mt-border) !important; } html[data-theme] .section-header h1 { color: var(--mt-text-primary) !important; font-weight: 500; font-size: 22px; margin: 0 0 4px 0; } html[data-theme] .section-body { padding: 20px 30px !important; background: transparent !important; } html[data-theme] .breadcrumb { background: transparent !important; padding: 0 !important; margin: 0; } html[data-theme] .breadcrumb-item { font-size: 13px; } /* Breadcrumb note: these are
elements in the HTML, not links. We style the active one as muted, inactive as accent color. To make them clickable, the .tpl files need HTML edits (separate step). */ html[data-theme] .breadcrumb-item.active { color: var(--mt-text-muted) !important; } html[data-theme] .breadcrumb-item:not(.active) { color: var(--mt-accent) !important; font-weight: 500; } html[data-theme="dark"] .breadcrumb-item:not(.active) { color: var(--mt-accent-text) !important; } html[data-theme] .breadcrumb-item + .breadcrumb-item::before { color: var(--mt-text-muted) !important; } /* ============================================================ 17. ACTIVITIES & PROFILE WIDGETS ============================================================ */ html[data-theme] .activities, html[data-theme] .activity, html[data-theme] .activity-detail { background: transparent !important; color: var(--mt-text-primary) !important; } html[data-theme] .activity-icon { border: 4px solid var(--mt-bg-card) !important; } html[data-theme] .activity-detail h4 a { color: var(--mt-text-primary) !important; } html[data-theme] .profile-widget { background-color: var(--mt-bg-card) !important; border: 1px solid var(--mt-border) !important; } html[data-theme] .profile-widget .profile-widget-header { background: transparent !important; border-bottom: 1px solid var(--mt-border) !important; } html[data-theme] .profile-widget .profile-widget-name { background: transparent !important; color: var(--mt-text-primary) !important; } html[data-theme] .profile-widget .profile-widget-item-label { color: var(--mt-text-muted) !important; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; } html[data-theme] .profile-widget .profile-widget-item-value { color: var(--mt-text-primary) !important; font-weight: 500; } /* Statistics card 3-dot button */ html[data-theme] .card .card-header .btn-action, html[data-theme] .card .card-header .btn.btn-action { background-color: var(--mt-bg-hover) !important; border: 1px solid var(--mt-border) !important; color: var(--mt-text-secondary) !important; border-radius: var(--mt-radius) !important; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; } html[data-theme] .card .card-header .btn-action:hover { background-color: var(--mt-accent-soft) !important; border-color: var(--mt-accent) !important; color: var(--mt-accent) !important; } /* ============================================================ 18. FIX 12 — FLOATING BUTTONS: more space between globe + cog ============================================================ */ html[data-theme] .faz, html[data-theme] .faz-lang { background: var(--mt-bg-elevated) !important; background-image: none !important; border: 1px solid var(--mt-border) !important; box-shadow: var(--mt-shadow-md) !important; width: 44px; height: 44px; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; position: fixed; right: 20px; } /* Globe (language) button — position it 120px from bottom */ html[data-theme] .faz-lang { bottom: 120px !important; /* FIX: more space — was too close to cog */ } /* Cog (theme toggle) button — position it 65px from bottom */ html[data-theme] .faz { bottom: 65px !important; } html[data-theme] .faz i, html[data-theme] .faz-lang i { color: var(--mt-accent) !important; font-size: 16px; background: none !important; -webkit-text-fill-color: var(--mt-accent) !important; } html[data-theme="dark"] .faz i, html[data-theme="dark"] .faz-lang i { color: var(--mt-accent-text) !important; -webkit-text-fill-color: var(--mt-accent-text) !important; } html[data-theme] .faz:hover, html[data-theme] .faz-lang:hover { background: var(--mt-accent) !important; border-color: var(--mt-accent) !important; } html[data-theme] .faz:hover i, html[data-theme] .faz-lang:hover i { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* ============================================================ 19. TEXT COLOR HELPERS ============================================================ */ html[data-theme] .text-muted { color: var(--mt-text-muted) !important; } html[data-theme="light"] .text-primary { color: var(--mt-accent) !important; } html[data-theme="dark"] .text-primary { color: var(--mt-accent-text) !important; } html[data-theme] .text-secondary { color: var(--mt-text-secondary) !important; } html[data-theme] .text-success { color: var(--mt-success) !important; } html[data-theme] .text-warning { color: var(--mt-warning) !important; } html[data-theme] .text-danger { color: var(--mt-danger) !important; } html[data-theme] .text-info { color: var(--mt-info) !important; } /* ============================================================ 20. SWEETALERT2 ============================================================ */ html[data-theme] .swal2-popup { background-color: var(--mt-bg-modal) !important; color: var(--mt-text-primary) !important; border: 1px solid var(--mt-border) !important; border-radius: var(--mt-radius-xl) !important; box-shadow: var(--mt-shadow-lg) !important; } html[data-theme] .swal2-title, html[data-theme] .swal2-html-container { color: var(--mt-text-primary) !important; } html[data-theme] .swal2-styled.swal2-confirm { background-color: var(--mt-accent) !important; background-image: none !important; border-color: var(--mt-accent) !important; color: #FFFFFF !important; border-radius: var(--mt-radius) !important; box-shadow: none !important; padding: 8px 18px !important; font-weight: 500; } html[data-theme] .swal2-styled.swal2-confirm:hover { background-color: var(--mt-accent-hover) !important; } html[data-theme] .swal2-styled.swal2-cancel { background-color: var(--mt-danger) !important; background-image: none !important; border-radius: var(--mt-radius) !important; padding: 8px 18px !important; font-weight: 500; } /* ============================================================ 21. BOOTSTRAP MODALS ============================================================ */ html[data-theme] .modal-backdrop.show { background-color: var(--mt-backdrop) !important; opacity: 1 !important; } html[data-theme] .modal-content, html[data-theme] .normal-modal-content { background-color: var(--mt-bg-modal) !important; border: 1px solid var(--mt-border) !important; border-radius: var(--mt-radius-xl) !important; box-shadow: var(--mt-shadow-lg) !important; color: var(--mt-text-primary) !important; } html[data-theme] .modal-header { background: transparent !important; border-bottom: 1px solid var(--mt-border) !important; padding: 1rem 1.25rem; } html[data-theme] .modal-title, html[data-theme] .modal-header h5, html[data-theme] .modal-header h4 { color: var(--mt-text-primary) !important; font-weight: 500; } html[data-theme] .modal-header .close { color: var(--mt-text-secondary) !important; text-shadow: none !important; opacity: 0.7; } html[data-theme] .modal-header .close:hover { opacity: 1; color: var(--mt-accent) !important; } html[data-theme] .modal-body { background: transparent !important; color: var(--mt-text-primary) !important; } html[data-theme] .modal-footer { background: transparent !important; border-top: 1px solid var(--mt-border) !important; } /* ============================================================ 22. FORM CONTROLS ============================================================ */ html[data-theme] .form-control, html[data-theme] input[type="text"]:not([class*="select2"]), html[data-theme] input[type="email"], html[data-theme] input[type="password"], html[data-theme] input[type="number"], html[data-theme] input[type="tel"], html[data-theme] input[type="url"], html[data-theme] input[type="search"], html[data-theme] input[type="date"], html[data-theme] input[type="time"], html[data-theme] textarea, html[data-theme] select { background-color: var(--mt-bg-input) !important; border: 1px solid var(--mt-border) !important; color: var(--mt-text-primary) !important; border-radius: var(--mt-radius) !important; } html[data-theme] .form-control:focus, html[data-theme] input:focus, html[data-theme] textarea:focus, html[data-theme] select:focus { border-color: var(--mt-accent) !important; box-shadow: 0 0 0 3px var(--mt-accent-soft) !important; outline: none !important; } html[data-theme] .form-control::placeholder, html[data-theme] input::placeholder, html[data-theme] textarea::placeholder { color: var(--mt-text-muted) !important; } html[data-theme="dark"] input:-webkit-autofill, html[data-theme="dark"] input:-webkit-autofill:hover, html[data-theme="dark"] input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--mt-bg-input) inset !important; -webkit-text-fill-color: var(--mt-text-primary) !important; border: 1px solid var(--mt-border) !important; } /* ============================================================ 23. CHECKBOXES, RADIOS, SWITCHES ============================================================ */ html[data-theme] .custom-control-label::before { background-color: var(--mt-bg-input) !important; border: 1.5px solid var(--mt-border-strong) !important; } html[data-theme] .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--mt-accent) !important; border-color: var(--mt-accent) !important; } html[data-theme] .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px var(--mt-accent-soft) !important; } html[data-theme] input[type="checkbox"], html[data-theme] input[type="radio"] { accent-color: var(--mt-accent); cursor: pointer; } html[data-theme] .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--mt-accent) !important; border-color: var(--mt-accent) !important; } /* ============================================================ 24. SELECT2 ============================================================ */ html[data-theme] .select2-container--default .select2-selection--single, html[data-theme] .select2-container--default .select2-selection--multiple { background-color: var(--mt-bg-input) !important; border: 1px solid var(--mt-border) !important; border-radius: var(--mt-radius) !important; height: 40px; display: flex; align-items: center; } html[data-theme] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--mt-text-primary) !important; line-height: 38px; padding-left: 12px; } html[data-theme] .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--mt-accent) !important; box-shadow: 0 0 0 3px var(--mt-accent-soft) !important; } html[data-theme] .select2-dropdown { background-color: var(--mt-bg-elevated) !important; border: 1px solid var(--mt-border) !important; border-radius: var(--mt-radius-lg) !important; box-shadow: var(--mt-shadow-md) !important; } html[data-theme] .select2-container--default .select2-results__option { color: var(--mt-text-primary) !important; padding: 8px 12px; } html[data-theme] .select2-container--default .select2-results__option--highlighted[aria-selected], html[data-theme] .select2-container--default .select2-results__option--highlighted { background-color: var(--mt-accent) !important; color: #FFFFFF !important; } html[data-theme] .select2-container--default .select2-results__option[aria-selected="true"] { background-color: var(--mt-accent-soft) !important; color: var(--mt-accent-text) !important; } html[data-theme] .select2-search--dropdown .select2-search__field { background-color: var(--mt-bg-input) !important; border: 1px solid var(--mt-border) !important; color: var(--mt-text-primary) !important; border-radius: var(--mt-radius) !important; padding: 6px 10px; } /* ============================================================ 25. TABLES & DATATABLES ============================================================ */ html[data-theme] .table { color: var(--mt-text-primary) !important; } html[data-theme] .table thead th { background-color: transparent !important; border-bottom: 2px solid var(--mt-border) !important; border-top: none !important; color: var(--mt-text-muted) !important; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; } html[data-theme] .table td, html[data-theme] .table th { border-color: var(--mt-border) !important; } html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.02) !important; } html[data-theme] .dataTables_wrapper .dataTables_length select, html[data-theme] .dataTables_wrapper .dataTables_filter input { background-color: var(--mt-bg-input) !important; border: 1px solid var(--mt-border) !important; color: var(--mt-text-primary) !important; border-radius: var(--mt-radius) !important; padding: 4px 10px; } html[data-theme] .dataTables_info, html[data-theme] .dataTables_length label, html[data-theme] .dataTables_filter label { color: var(--mt-text-secondary) !important; } /* ============================================================ 26. LANGUAGE PICKER ============================================================ */ html[data-theme] #langPickerPopup, html[data-theme] #langPickerPopup * { background-color: var(--mt-bg-elevated) !important; color: var(--mt-text-primary) !important; border-color: var(--mt-border) !important; } html[data-theme] #langPickerPopup { border: 1px solid var(--mt-border) !important; border-radius: var(--mt-radius-lg) !important; box-shadow: var(--mt-shadow-md) !important; padding: 6px !important; } /* lang picker wildcard removed */ /* lang picker wildcard hover removed */ /* ============================================================ 27. SUMMERNOTE EDITOR ============================================================ */ background-color: var(--mt-bg-input) !important; border: 1px solid var(--mt-border) !important; border-radius: var(--mt-radius) !important; } background-color: var(--mt-bg-card) !important; border-color: var(--mt-border) !important; } background-color: transparent !important; border-color: var(--mt-border) !important; color: var(--mt-text-secondary) !important; } background-color: var(--mt-bg-hover) !important; color: var(--mt-accent) !important; } background-color: var(--mt-bg-input) !important; color: var(--mt-text-primary) !important; } /* ============================================================ 28. KILL GLOW ANIMATIONS ============================================================ */ html[data-theme] .btn-glow, html[data-theme] .btn.btn-glow, html[data-theme] [class*="btn-glow"] { animation: none !important; box-shadow: none !important; } html[data-theme] .btn-pulse, html[data-theme] [class*="pulse"]:not(.spinner-grow):not(.animate-charcter) { animation: none !important; } /* ============================================================ 29. MISC ============================================================ */ html[data-theme] .avatar { background: transparent !important; } html[data-theme] hr { border-color: var(--mt-border) !important; } html[data-theme] button.close, html[data-theme] .close { color: var(--mt-text-secondary) !important; text-shadow: none !important; opacity: 0.7; background: transparent !important; border: none; } html[data-theme] button.close:hover, html[data-theme] .close:hover { color: var(--mt-accent) !important; opacity: 1; } /* ============================================================ /* ============================================================ 30. HEADER — Complete consolidated block ============================================================ */ /* All navbar icons: same muted color */ html[data-theme] .main-navbar .nav-link i, html[data-theme] .main-navbar .nav-link-lg i, html[data-theme] .main-navbar .notification-toggle i { color: #6B7A99 !important; -webkit-text-fill-color: #6B7A99 !important; font-size: 18px !important; transition: color 0.15s ease !important; } /* Burger: no background, icon color change only on hover */ html[data-theme] .main-navbar .nav-link[data-toggle="sidebar"] { padding-left: 10px !important; padding-right: 10px !important; background-color: transparent !important; } html[data-theme] .main-navbar .nav-link[data-toggle="sidebar"]:hover i { color: var(--mt-accent) !important; -webkit-text-fill-color: var(--mt-accent) !important; } html[data-theme] .main-navbar .nav-link[data-toggle="sidebar"]:hover, html[data-theme] .main-navbar .nav-link[data-toggle="sidebar"]:focus, html[data-theme] .main-navbar .nav-link[data-toggle="sidebar"]:active { background-color: transparent !important; box-shadow: none !important; outline: none !important; } /* Bell: no stuck highlight */ html[data-theme] .main-navbar .notification-toggle, html[data-theme] .main-navbar .notification-toggle:hover, html[data-theme] .main-navbar .notification-toggle:focus, html[data-theme] .main-navbar .notification-toggle:active, html[data-theme] .main-navbar .notification-toggle.show { background-color: transparent !important; box-shadow: none !important; outline: none !important; } html[data-theme] .main-navbar .notification-toggle:hover i { color: var(--mt-accent) !important; -webkit-text-fill-color: var(--mt-accent) !important; } /* Search input: smaller, fully rounded */ html[data-theme] .navbar .form-inline .form-control, html[data-theme] .search-element .form-control { min-height: 36px !important; height: 36px !important; padding: 0 14px !important; border-radius: 20px !important; border: 1px solid #3D5070 !important; background-color: var(--mt-bg-input) !important; color: var(--mt-text-primary) !important; font-size: 14px !important; margin-right: 0 !important; } html[data-theme] .navbar .form-inline .form-control:focus, html[data-theme] .search-element .form-control:focus { border-color: var(--mt-accent) !important; box-shadow: 0 0 0 3px var(--mt-accent-soft) !important; outline: none !important; } html[data-theme] .navbar .form-inline .form-control::placeholder, html[data-theme] .search-element .form-control::placeholder { color: var(--mt-text-muted) !important; } /* Search button: circle, separated */ html[data-theme] .navbar .form-inline .btn, html[data-theme] .search-element .btn { height: 36px !important; width: 36px !important; min-width: 36px !important; padding: 0 !important; margin-left: 6px !important; border-radius: 50% !important; background-color: transparent !important; background-image: none !important; border: 1px solid #3D5070 !important; color: #6B7A99 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; flex-shrink: 0; } html[data-theme] .navbar .form-inline .btn:hover, html[data-theme] .search-element .btn:hover { background-color: var(--mt-bg-hover) !important; color: var(--mt-accent) !important; border-color: var(--mt-accent) !important; } html[data-theme] .navbar .form-inline .btn i, html[data-theme] .search-element .btn i { font-size: 14px !important; color: inherit !important; -webkit-text-fill-color: inherit !important; } html[data-theme] .navbar .form-inline { display: flex !important; align-items: center !important; } /* Search result panel */ html[data-theme] .navbar .form-inline .search-result, html[data-theme] .search-result { background-color: var(--mt-bg-elevated) !important; border: 1px solid var(--mt-border) !important; border-radius: var(--mt-radius-xl) !important; box-shadow: var(--mt-shadow-lg) !important; width: 420px !important; max-width: calc(100vw - 16px) !important; padding: 10px !important; top: 70px !important; z-index: 9999 !important; } html[data-theme] .navbar .form-inline .search-result .search-header { color: var(--mt-text-muted) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; padding: 4px 8px 8px !important; } html[data-theme] .search--item { background-color: transparent !important; border: none !important; padding: 0 !important; margin: 0 !important; } html[data-theme] .search-result .search-item, html[data-theme] .search--item .search-item { background-color: var(--mt-bg-card) !important; border: 1px solid var(--mt-border) !important; border-radius: var(--mt-radius) !important; margin-bottom: 6px !important; overflow: hidden; } html[data-theme] .search-result .search-item:last-child, html[data-theme] .search--item .search-item:last-child { margin-bottom: 0 !important; } html[data-theme] .search-result .search-item:hover, html[data-theme] .search--item .search-item:hover { border-color: var(--mt-accent) !important; } html[data-theme] .search-result .search-item a, html[data-theme] .search--item .search-item a { background-color: transparent !important; border: none !important; color: var(--mt-text-primary) !important; padding: 12px 14px !important; display: flex !important; align-items: center !important; gap: 12px !important; font-weight: 500 !important; pointer-events: auto !important; cursor: pointer !important; } html[data-theme] .search-result .search-item a:hover, html[data-theme] .search--item .search-item a:hover { background-color: var(--mt-bg-hover) !important; } html[data-theme] .search-result .search-item .dropdown-item-desc b, html[data-theme] .search--item .search-item .dropdown-item-desc b { color: var(--mt-text-primary) !important; font-size: 14px !important; font-weight: 600 !important; display: block !important; } html[data-theme] .search-result .search-item .dropdown-item-desc .time, html[data-theme] .search--item .search-item .dropdown-item-desc .time { color: var(--mt-text-muted) !important; font-size: 12px !important; font-weight: 400 !important; } html[data-theme] .search-result .search-icon, html[data-theme] .search-result .search-item .search-icon { width: 40px !important; height: 40px !important; border-radius: 50% !important; flex-shrink: 0; display: flex !important; align-items: center !important; justify-content: center !important; background-color: var(--mt-bg-elevated) !important; border: 1px solid var(--mt-border) !important; overflow: hidden; } html[data-theme] .search-result .search-icon img { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover !important; } html[data-theme] .search-result .avatar.border-primary, html[data-theme] .search--item .avatar.border-primary { border-color: var(--mt-border-strong) !important; } /* Notification dropdown */ html[data-theme] .dropdown-list, html[data-theme] .dropdown-menu.dropdown-list { background-color: var(--mt-bg-elevated) !important; border: 1px solid var(--mt-border) !important; box-shadow: var(--mt-shadow-md) !important; min-width: 320px; overflow: hidden !important; scrollbar-width: none !important; padding: 8px; } html[data-theme] .dropdown-list .dropdown-item { background-color: var(--mt-bg-card) !important; border: 1px solid var(--mt-border) !important; border-radius: var(--mt-radius) !important; margin-bottom: 4px; padding: 10px 12px; } html[data-theme] .dropdown-list .dropdown-item:hover { background-color: var(--mt-bg-hover) !important; border-color: var(--mt-accent) !important; } html[data-theme] .notificationlist, html[data-theme] .notice-dropdown, html[data-theme] .dropdown-list-icons, html[data-theme] .profile-notifications { background: transparent !important; } html[data-theme] .dropdown-list .dropdown-item-text, html[data-theme] .dropdown-list p { color: var(--mt-text-primary) !important; } html[data-theme] .dropdown-list small, html[data-theme] .dropdown-list .time { color: var(--mt-text-muted) !important; } html[data-theme] .dropdown-list-icons .dropdown-item .dropdown-item-icon, html[data-theme] .profile-notifications .dropdown-item-icon { width: 42px !important; height: 42px !important; min-width: 42px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; line-height: 1 !important; } html[data-theme] .dropdown-list-icons .dropdown-item .dropdown-item-icon i, html[data-theme] .profile-notifications .dropdown-item-icon i { font-size: 16px !important; margin: 0 !important; } html[data-theme] .profile-notifications .dropdown-item-icon.bg-primary:has(i.fa-smile) { background-color: var(--mt-accent-soft) !important; } html[data-theme] .profile-notifications .dropdown-item-icon.bg-primary:has(i.fa-smile) i { color: var(--mt-accent) !important; } html[data-theme="dark"] .profile-notifications .dropdown-item-icon.bg-primary:has(i.fa-smile) i { color: var(--mt-accent-text) !important; } html[data-theme] .profile-notifications .dropdown-item-desc, html[data-theme] .dropdown-list-icons .dropdown-item .dropdown-item-desc { color: var(--mt-text-primary) !important; font-size: 13px !important; } html[data-theme] .profile-notifications .dropdown-item-desc .time { color: var(--mt-text-muted) !important; font-size: 11px !important; } html[data-theme] .profile-notifications .dropdown-item-desc .time.text-primary { color: var(--mt-text-muted) !important; } html[data-theme] .dropdown-list .dropdown-header { color: var(--mt-text-secondary) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; padding: 10px 14px 6px !important; } /* Fixed position dropdowns */ html[data-theme] .main-navbar .dropdown-menu { position: fixed !important; top: 60px !important; } html[data-theme] .main-navbar .dropdown-list.dropdown-menu-right { right: 85px !important; left: auto !important; width: 320px !important; max-width: calc(100vw - 8px) !important; overflow: visible !important; } html[data-theme] .main-navbar .dropdown-menu-right:not(.dropdown-list) { right: 60px !important; left: auto !important; min-width: 180px !important; max-width: calc(100vw - 8px) !important; overflow: visible !important; } /* CSS triangle arrows — desktop */ html[data-theme] .main-navbar .dropdown-list.dropdown-menu-right::before, html[data-theme] .main-navbar .dropdown-menu-right:not(.dropdown-list)::before { display: none !important; content: none !important; } html[data-theme] .main-navbar .dropdown-list.dropdown-menu-right::after, html[data-theme] .main-navbar .dropdown-menu-right:not(.dropdown-list)::after { content: '' !important; position: absolute !important; top: -8px !important; left: var(--arrow-left, 20px) !important; right: auto !important; width: 0 !important; height: 0 !important; border-left: 8px solid transparent !important; border-right: 8px solid transparent !important; border-bottom: 8px solid var(--mt-bg-elevated) !important; display: block !important; pointer-events: none !important; } /* Arrows on all screen sizes */ @media (max-width: 767.98px) { html[data-theme] .main-navbar .dropdown-list.dropdown-menu-right::after, html[data-theme] .main-navbar .dropdown-menu-right:not(.dropdown-list)::after { display: none !important; } } /* Mobile dropdown positions */ @media (max-width: 575.98px) { html[data-theme] .main-navbar .dropdown-list.dropdown-menu-right { right: 4px !important; width: 320px !important; } html[data-theme] .main-navbar .dropdown-menu-right:not(.dropdown-list) { right: 4px !important; } /* Search element */ html[data-theme] .search-element { display: none !important; position: absolute !important; top: 10px !important; left: 10px !important; right: 10px !important; z-index: 892 !important; } html[data-theme] body.search-show .search-element { display: flex !important; align-items: center !important; } html[data-theme] body.search-show .main-navbar .navbar-right { opacity: 0 !important; pointer-events: none !important; } html[data-theme] .main-navbar .navbar-right { display: flex !important; } } /* Tablet dropdown positions */ @media (min-width: 576px) and (max-width: 991.98px) { html[data-theme] .main-navbar .dropdown-list.dropdown-menu-right { right: 8px !important; width: 320px !important; } html[data-theme] .main-navbar .dropdown-menu-right:not(.dropdown-list) { right: 8px !important; } } /* Hover: bg highlight on nav items */ html[data-theme] .main-navbar .nav-link:hover { background-color: var(--mt-bg-hover) !important; border-radius: var(--mt-radius) !important; } /* ============================================================ 31. ARROWS — Re-enable on mobile, JS positions them ============================================================ */ @media (max-width: 767.98px) { html[data-theme] .main-navbar .dropdown-list.dropdown-menu-right::after, html[data-theme] .main-navbar .dropdown-menu-right:not(.dropdown-list)::after { display: block !important; } } /* ============================================================ /* ============================================================ /* ============================================================ 34. PROFILE DROPDOWN — Card style matching notification panel ============================================================ */ html[data-theme] .main-navbar .dropdown-menu-right:not(.dropdown-list) { padding: 8px !important; } html[data-theme] .main-navbar .dropdown-menu-right:not(.dropdown-list) .dropdown-item { background-color: var(--mt-bg-card) !important; border: 1px solid var(--mt-border) !important; border-radius: var(--mt-radius) !important; margin-bottom: 4px !important; padding: 12px 16px !important; font-size: 14px !important; font-weight: 500 !important; color: var(--mt-text-primary) !important; display: flex !important; align-items: center !important; gap: 10px !important; } html[data-theme] .main-navbar .dropdown-menu-right:not(.dropdown-list) .dropdown-item:last-child { margin-bottom: 0 !important; } html[data-theme] .main-navbar .dropdown-menu-right:not(.dropdown-list) .dropdown-item:hover { background-color: var(--mt-bg-hover) !important; border-color: var(--mt-accent) !important; color: var(--mt-text-primary) !important; } html[data-theme] .main-navbar .dropdown-menu-right:not(.dropdown-list) .dropdown-item i { font-size: 16px !important; width: 20px !important; color: var(--mt-text-muted) !important; } html[data-theme] .main-navbar .dropdown-menu-right:not(.dropdown-list) .dropdown-item:hover i { color: var(--mt-accent) !important; } /* Remove divider — cards already separated */ html[data-theme] .main-navbar .dropdown-menu-right:not(.dropdown-list) .dropdown-divider { display: none !important; } /* Logout item: keep danger color on text */ html[data-theme] .main-navbar .dropdown-menu-right:not(.dropdown-list) .dropdown-item.text-danger { color: var(--mt-danger) !important; } html[data-theme] .main-navbar .dropdown-menu-right:not(.dropdown-list) .dropdown-item.text-danger i { color: var(--mt-danger) !important; } /* ============================================================ 35. NOTIFICATION ICONS — White icons on colored backgrounds ============================================================ */ html[data-theme] .profile-notifications .dropdown-item-icon.bg-primary i, html[data-theme] .dropdown-list-icons .dropdown-item .dropdown-item-icon.bg-primary i { color: #7DD3FC !important; -webkit-text-fill-color: #7DD3FC !important; } html[data-theme] .profile-notifications .dropdown-item-icon.bg-warning i, html[data-theme] .dropdown-list-icons .dropdown-item .dropdown-item-icon.bg-warning i { color: #FDE68A !important; -webkit-text-fill-color: #FDE68A !important; } html[data-theme] .profile-notifications .dropdown-item-icon.bg-danger i, html[data-theme] .dropdown-list-icons .dropdown-item .dropdown-item-icon.bg-danger i { color: #FCA5A5 !important; -webkit-text-fill-color: #FCA5A5 !important; } html[data-theme] .profile-notifications .dropdown-item-icon.bg-success i, html[data-theme] .dropdown-list-icons .dropdown-item .dropdown-item-icon.bg-success i { color: #86EFAC !important; -webkit-text-fill-color: #86EFAC !important; } html[data-theme] .profile-notifications .dropdown-item-icon.bg-info i, html[data-theme] .dropdown-list-icons .dropdown-item .dropdown-item-icon.bg-info i { color: #7DD3FC !important; -webkit-text-fill-color: #7DD3FC !important; } /* ============================================================ 36. NOTIFICATION — Fix click/tap on mobile ============================================================ */ html[data-theme] .notificationlist, html[data-theme] .notificationlist *, html[data-theme] .profile-notifications, html[data-theme] .profile-notifications *, html[data-theme] .dropdown-list .dropdown-item, html[data-theme] .dropdown-list .dropdown-item * { pointer-events: auto !important; cursor: pointer !important; } /* Ensure dropdown panel is above everything on mobile */ @media (max-width: 767.98px) { html[data-theme] .main-navbar .dropdown-menu { z-index: 99999 !important; } } /* ============================================================ 37. MOBILE — Use default Bootstrap positioning for dropdowns position:fixed causes touch issues on real mobile browsers ============================================================ */ @media (max-width: 767.98px) { html[data-theme] .main-navbar .dropdown-menu { position: absolute !important; } } /* ============================================================ 38. MODAL — Always above fixed dropdowns on mobile ============================================================ */ html[data-theme] .modal, html[data-theme] .modal-backdrop, html[data-theme] .swal2-container { z-index: 999999 !important; } html[data-theme] .modal-dialog { z-index: 1000000 !important; } /* ============================================================ 39. MODAL BACKDROP — Fix visibility over fixed elements ============================================================ */ html[data-theme] .modal-backdrop { z-index: 99998 !important; opacity: 0.6 !important; background-color: #000 !important; } html[data-theme] .modal { z-index: 99999 !important; } html[data-theme] .modal-dialog { z-index: 100000 !important; margin-top: 80px !important; } html[data-theme] .modal-content { z-index: 100001 !important; } /* Close dropdown when modal opens */ html[data-theme] .main-navbar .dropdown-menu.show { z-index: 99997 !important; } /* ============================================================ 40. MODAL — Smooth backdrop + single close button ============================================================ */ /* Smooth fade-in backdrop */ html[data-theme] .modal-backdrop { transition: opacity 0.25s ease !important; } html[data-theme] .modal.fade .modal-dialog { transition: transform 0.25s ease, opacity 0.25s ease !important; } /* Hide the footer Close button — X button is enough */ html[data-theme] .normal-modalize .modal-footer { display: none !important; } /* ============================================================ 41. MODAL — Show footer close button, hide X button ============================================================ */ html[data-theme] .normal-modalize .modal-footer { display: flex !important; } html[data-theme] .normal-modalize .modal-header .close { display: none !important; } /* ============================================================ /* ============================================================ 42. SCROLLBARS — Single unified style ============================================================ */ ::-webkit-scrollbar { width: 5px !important; height: 5px !important; } ::-webkit-scrollbar-track { background: transparent !important; } ::-webkit-scrollbar-thumb { background: #3D5070 !important; border-radius: 5px !important; } ::-webkit-scrollbar-thumb:hover { background: #1C4D8D !important; } * { scrollbar-width: thin !important; scrollbar-color: #3D5070 transparent !important; } /* ============================================================ 43. NOTIFICATION PANEL — One scrollbar only ============================================================ */ /* Outer panel: no scroll, no overflow */ overflow: hidden !important; overflow: hidden !important; } html[data-theme] .notificationlist, html[data-theme] .notice-dropdown, html[data-theme] .dropdown-list-icons { overflow: visible !important; } html[data-theme] .profile-notifications { max-height: 320px !important; overflow-y: auto !important; overflow-x: hidden !important; } /* ============================================================ 44. NOTIFICATION — Hide all parent scrollbars ============================================================ */ html[data-theme] .dropdown-menu.dropdown-list::-webkit-scrollbar, html[data-theme] .notificationlist::-webkit-scrollbar, html[data-theme] .notice-dropdown::-webkit-scrollbar, html[data-theme] .dropdown-list-icons::-webkit-scrollbar, html[data-theme] .dropdown-list::-webkit-scrollbar { display: none !important; width: 0 !important; } html[data-theme] .dropdown-menu.dropdown-list, html[data-theme] .notificationlist, html[data-theme] .notice-dropdown, html[data-theme] .dropdown-list-icons { scrollbar-width: none !important; } /* Force hide all scrollbars on dropdown panel and parents */ html[data-theme] .dropdown-menu.dropdown-list, html[data-theme] .dropdown-list, html[data-theme] .notificationlist, html[data-theme] .notice-dropdown, html[data-theme] .dropdown-list-icons { overflow: hidden !important; scrollbar-width: none !important; } html[data-theme] .dropdown-menu.dropdown-list::-webkit-scrollbar, html[data-theme] .dropdown-list::-webkit-scrollbar, html[data-theme] .notificationlist::-webkit-scrollbar, html[data-theme] .notice-dropdown::-webkit-scrollbar, html[data-theme] .dropdown-list-icons::-webkit-scrollbar { display: none !important; width: 0 !important; } /* ============================================================ 45. SIDEBAR — Hide scrollbar, keep scroll function ============================================================ */ html[data-theme] .main-sidebar::-webkit-scrollbar, html[data-theme] #sidebar-wrapper::-webkit-scrollbar, html[data-theme] .main-sidebar aside::-webkit-scrollbar { display: none !important; width: 0 !important; } html[data-theme] .main-sidebar, html[data-theme] #sidebar-wrapper, html[data-theme] .main-sidebar aside { scrollbar-width: thin !important; scrollbar-color: #3D5070 transparent !important; } /* ============================================================ 46. WEBKIT SCROLLBAR — Simple selectors, no html prefix ============================================================ */ .main-sidebar::-webkit-scrollbar, #sidebar-wrapper::-webkit-scrollbar, .profile-notifications::-webkit-scrollbar { width: 5px !important; } .main-sidebar::-webkit-scrollbar-track, #sidebar-wrapper::-webkit-scrollbar-track, .profile-notifications::-webkit-scrollbar-track { background: transparent !important; } .main-sidebar::-webkit-scrollbar-thumb, #sidebar-wrapper::-webkit-scrollbar-thumb, .profile-notifications::-webkit-scrollbar-thumb { background: #3D5070 !important; border-radius: 5px !important; } .main-sidebar, #sidebar-wrapper { scrollbar-width: thin !important; scrollbar-color: #3D5070 transparent !important; } /* ============================================================ 47. RAW SCROLLBAR — No selectors, applies everywhere ============================================================ */ :root { scrollbar-width: thin; scrollbar-color: #3D5070 transparent; } ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #3D5070; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #1C4D8D; } /* ============================================================ 48. SIDEBAR BORDER + PAGE HORIZONTAL SCROLL FIX ============================================================ */ /* Remove sidebar right border — it looks like a scrollbar */ html[data-theme] .main-sidebar, html[data-theme] .main-sidebar.sidebar-style-2 { border-right: none !important; } /* Remove horizontal scrollbar on page */ html, body { overflow-x: hidden !important; max-width: 100% !important; } /* ============================================================ 49. NICESCROLL — Theme the JS scrollbar to match our design ============================================================ */ /* NiceScroll cursor (the scrollbar thumb) */ html[data-theme] .nicescroll-cursors { background: #3D5070 !important; border: none !important; border-radius: 5px !important; width: 5px !important; opacity: 0.8 !important; } /* NiceScroll rail (the track) */ html[data-theme] .nicescroll-rails { background: transparent !important; border: none !important; width: 5px !important; } /* Hide horizontal NiceScroll */ html[data-theme] .nicescroll-rails-hr { display: none !important; } /* ============================================================ 50. NICESCROLL — Move scrollbar inside sidebar ============================================================ */ html[data-theme] .nicescroll-rails { right: 2px !important; left: auto !important; } /* ============================================================ 51. NICESCROLL — Correct position inside sidebar ============================================================ */ html[data-theme] .nicescroll-rails { right: 0px !important; left: auto !important; } /* ============================================================ 51. NICESCROLL — Correct position inside sidebar ============================================================ */ html[data-theme] .nicescroll-rails { right: 0px !important; left: auto !important; } /* ============================================================ 52. SIDEBAR SCROLLBAR — Show only on hover ============================================================ */ html[data-theme] .main-sidebar { scrollbar-width: none !important; } html[data-theme] .main-sidebar::-webkit-scrollbar { width: 0px !important; } html[data-theme] .main-sidebar:hover { scrollbar-width: thin !important; scrollbar-color: #3D5070 transparent !important; } html[data-theme] .main-sidebar:hover::-webkit-scrollbar { width: 5px !important; } html[data-theme] .main-sidebar:hover::-webkit-scrollbar-thumb { background: #3D5070 !important; border-radius: 5px !important; } html[data-theme] .main-sidebar:hover::-webkit-scrollbar-track { background: transparent !important; } /* ============================================================ 53. NOTIFICATION PANEL — Fix bottom cut + scrollbar arrows ============================================================ */ html[data-theme] .profile-notifications { padding-bottom: 8px !important; } /* Hide scrollbar arrows (up/down buttons) */ html[data-theme] .profile-notifications::-webkit-scrollbar-button { display: none !important; height: 0 !important; } /* ============================================================ 54. NOTIFICATION CARDS — Increase height + fix bottom cut ============================================================ */ html[data-theme] .profile-notifications .dropdown-item { padding: 16px 14px !important; margin-bottom: 6px !important; min-height: 70px !important; } html[data-theme] .profile-notifications { padding-bottom: 10px !important; } /* ============================================================ 55. NOTIFICATION CARDS — Fix background clipping ============================================================ */ html[data-theme] .profile-notifications .dropdown-item { margin-left: 2px !important; margin-right: 2px !important; margin-bottom: 6px !important; } html[data-theme] .profile-notifications { padding: 6px 4px 10px 4px !important; margin-right: 0 !important; } /* ============================================================ 56. NOTIFICATION — Fix last card bottom cut ============================================================ */ html[data-theme] .profile-notifications { padding-bottom: 6px !important; } html[data-theme] .profile-notifications .dropdown-item:last-child { margin-bottom: 0 !important; } /* Fix last card cut — increase max-height */ html[data-theme] .profile-notifications { max-height: 400px !important; padding-bottom: 12px !important; } /* ============================================================ 57. NOTIFICATION — Cards fit inside panel with padding ============================================================ */ html[data-theme] .profile-notifications { max-height: 300px !important; padding: 4px 4px 4px 4px !important; box-sizing: border-box !important; } html[data-theme] .profile-notifications .dropdown-item { margin-left: 0 !important; margin-right: 0 !important; } /* ============================================================ 58. MODAL — Smooth backdrop fade out ============================================================ */ html[data-theme] .modal-backdrop { transition: opacity 0.25s ease !important; } html[data-theme] .modal.fade .modal-dialog { transition: transform 0.25s ease, opacity 0.25s ease !important; } html[data-theme] .modal.fade { transition: opacity 0.25s ease !important; } /* ============================================================ 59. MODAL BACKDROP — Smooth fade in and out ============================================================ */ html[data-theme] .modal-backdrop { transition: opacity 0.3s ease !important; } html[data-theme] .modal-backdrop.show { opacity: 0.6 !important; } html[data-theme] .modal-backdrop:not(.show) { opacity: 0 !important; } /* ============================================================ 60. MODAL BACKDROP — No animation, instant hide ============================================================ */ html[data-theme] .modal-backdrop { transition: none !important; animation: none !important; } /* ============================================================ 61. MINI NAV — Clean centered layout ============================================================ */ /* Hide MAIN/PANEL headers in mini mode */ html[data-theme] body.sidebar-mini .main-sidebar .sidebar-menu li.menu-header { display: none !important; padding: 0 !important; height: 0 !important; font-size: 0 !important; margin: 0 !important; overflow: hidden !important; } /* Center all menu items */ html[data-theme] body.sidebar-mini .main-sidebar .sidebar-menu > li { display: flex !important; justify-content: center !important; padding: 4px 8px !important; } /* Menu links: centered square */ html[data-theme] body.sidebar-mini .main-sidebar .sidebar-menu > li > a { width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; border-radius: var(--mt-radius) !important; border-left: none !important; } /* Icons centered */ html[data-theme] body.sidebar-mini .main-sidebar .sidebar-menu > li > a i { margin: 0 !important; font-size: 18px !important; width: auto !important; } /* Hide text in mini mode */ html[data-theme] body.sidebar-mini .main-sidebar .sidebar-menu > li > a span:not(.badge) { display: none !important; } /* Active item */ html[data-theme] body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a { background: var(--mt-accent) !important; box-shadow: 0 4px 8px rgba(28,77,141,0.4) !important; border-left: none !important; width: 44px !important; } html[data-theme] body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a i { color: #FFFFFF !important; } /* Sidebar background */ html[data-theme] body.sidebar-mini .main-sidebar { background-color: var(--mt-bg-sidebar) !important; } /* ============================================================ 62. MINI NAV — Fix white active background ============================================================ */ html[data-theme] body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a, html[data-theme] body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a:hover { background-color: var(--mt-accent) !important; background: var(--mt-accent) !important; color: #FFFFFF !important; box-shadow: 0 4px 8px rgba(28,77,141,0.4) !important; } html[data-theme] body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a i { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* Also fix the ::after pseudo element Stisla uses */ html[data-theme] body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a::before, html[data-theme] body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a::after { display: none !important; } /* ============================================================ 62. MINI NAV — Fix white active background ============================================================ */ html[data-theme] body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a, html[data-theme] body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a:hover { background-color: var(--mt-accent) !important; background: var(--mt-accent) !important; color: #FFFFFF !important; box-shadow: 0 4px 8px rgba(28,77,141,0.4) !important; } html[data-theme] body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a i { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* Also fix the ::after pseudo element Stisla uses */ html[data-theme] body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a::before, html[data-theme] body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a::after { display: none !important; } /* ============================================================ 63. MINI NAV — Override Stisla purple active with navy ============================================================ */ body.sidebar-mini html[data-theme] .main-sidebar .sidebar-menu > li.active > a, html[data-theme] body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a { background-color: var(--mt-accent) !important; box-shadow: 0 4px 8px rgba(28,77,141,0.4) !important; color: #fff !important; } /* Also target without html[data-theme] for maximum specificity */ body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a { background-color: #1C4D8D !important; box-shadow: 0 4px 8px rgba(28,77,141,0.4) !important; } /* ============================================================ 64. MINI NAV — Force dark background on entire sidebar ============================================================ */ body.sidebar-mini .main-sidebar, body.sidebar-mini .main-sidebar.sidebar-style-2, body.sidebar-mini #sidebar-wrapper, body.sidebar-mini .main-sidebar aside { background-color: #0F172A !important; background-image: none !important; } /* Mini sidebar after pseudo element (Stisla uses this for bg) */ body.sidebar-mini .main-sidebar::after { background-color: #0F172A !important; } /* Light mode mini sidebar */ [data-theme="light"] body.sidebar-mini .main-sidebar, [data-theme="light"] body.sidebar-mini .main-sidebar::after { background-color: #FFFFFF !important; } /* ============================================================ 65. MINI NAV — Consistent cursor on hover ============================================================ */ body.sidebar-mini .main-sidebar .sidebar-menu > li, body.sidebar-mini .main-sidebar .sidebar-menu > li > a, body.sidebar-mini .main-sidebar .sidebar-menu > li > a *, body.sidebar-mini .main-sidebar .sidebar-menu > li > a i { cursor: pointer !important; } /* ============================================================ 66. MINI NAV — Light mode background fix ============================================================ */ html[data-theme="light"] body.sidebar-mini .main-sidebar, html[data-theme="light"] body.sidebar-mini .main-sidebar.sidebar-style-2, html[data-theme="light"] body.sidebar-mini #sidebar-wrapper, html[data-theme="light"] body.sidebar-mini .main-sidebar aside, html[data-theme="light"] body.sidebar-mini .main-sidebar::after { background-color: #FFFFFF !important; background-image: none !important; } html[data-theme="dark"] body.sidebar-mini .main-sidebar, html[data-theme="dark"] body.sidebar-mini .main-sidebar.sidebar-style-2, html[data-theme="dark"] body.sidebar-mini #sidebar-wrapper, html[data-theme="dark"] body.sidebar-mini .main-sidebar aside, html[data-theme="dark"] body.sidebar-mini .main-sidebar::after { background-color: #0F172A !important; background-image: none !important; } /* ===== Brand Slogan ===== */ .mt-brand-slogan { display: block; font-size: 10px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.6; margin-top: 2px; line-height: 1.2; color: var(--mt-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } /* Hide slogan when sidebar is mini/collapsed */ .sidebar-mini .mt-brand-slogan, .sidebar-brand-sm .mt-brand-slogan { display: none; } /* ===== Brand Section Fix ===== */ .sidebar-brand.mt-2 a { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; overflow: hidden; text-decoration: none; } .sidebar-brand.mt-2 .animate-charcter { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; font-size: 15px; font-weight: 700; letter-spacing: 0.5px; } .sidebar-brand.mt-2 .mt-brand-slogan { display: block; font-size: 9px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; opacity: 0.55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; color: var(--mt-text-primary); margin-top: 0; } /* ===== Brand Section Layout Fix v2 ===== */ .sidebar-brand.mt-2 a { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; padding: 8px 12px !important; overflow: hidden; text-decoration: none; } .sidebar-brand.mt-2 a img { flex-shrink: 0; width: 42px !important; height: 42px !important; border-radius: 8px; object-fit: cover; } .sidebar-brand.mt-2 .brand-text-wrap { display: flex; flex-direction: column; overflow: hidden; } .sidebar-brand.mt-2 .animate-charcter { display: block !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.5px; line-height: 1.3; } .sidebar-brand.mt-2 .mt-brand-slogan { display: block !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 2px !important; text-transform: uppercase !important; opacity: 0.5 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; margin-top: 1px; line-height: 1.2; } /* ===== Brand Section Premium v3 — Centered Stacked ===== */ .sidebar-brand.mt-2 { padding: 16px 12px 14px !important; border-bottom: 0.5px solid rgba(255,255,255,0.07); } .sidebar-brand.mt-2 a { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0 !important; padding: 0 !important; text-decoration: none; } .sidebar-brand.mt-2 a img { width: 52px !important; height: 52px !important; border-radius: 10px !important; object-fit: cover; margin-bottom: 8px; flex-shrink: 0; } .sidebar-brand.mt-2 .animate-charcter { display: block !important; text-align: center; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 1px; color: #E2E8F0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; line-height: 1.3; } .sidebar-brand.mt-2 .brand-text-wrap { display: flex; flex-direction: column; align-items: center; } .sidebar-brand.mt-2 .brand-divider { width: 32px; height: 1.5px; background: #1C4D8D; border-radius: 2px; margin: 6px auto; } .sidebar-brand.mt-2 .mt-brand-slogan { display: block !important; text-align: center; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: #2E6BB8 !important; opacity: 1 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; margin-top: 0; line-height: 1.2; } [data-theme="light"] .sidebar-brand.mt-2 .animate-charcter { color: #0F172A; } /* ===== Brand Section Spacing Fix ===== */ .sidebar-brand.mt-2 { margin-bottom: 0 !important; padding-bottom: 16px !important; } .sidebar-menu .menu-header:first-child { margin-top: 8px !important; } /* ===== Brand Spacing Fix v2 ===== */ .sidebar-brand.mt-2 { padding: 20px 12px 20px !important; margin-bottom: 0 !important; display: block !important; } .sidebar-menu { margin-top: 4px !important; } .sidebar-menu > .menu-header:first-child { padding-top: 12px !important; } /* ===== Brand Section Final Fix ===== */ .main-sidebar .sidebar-brand { height: auto !important; line-height: normal !important; } .main-sidebar .sidebar-brand.mt-2 { padding: 18px 12px 16px !important; border-bottom: 0.5px solid rgba(255,255,255,0.07); margin-bottom: 4px !important; } .main-sidebar .sidebar-brand.mt-2 a { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0 !important; padding: 0 !important; line-height: normal !important; height: auto !important; } /* ===== Brand Section Top Padding ===== */ .main-sidebar .sidebar-brand.mt-2 { padding-top: 24px !important; padding-bottom: 20px !important; } /* ===== Brand Section FINAL OVERRIDE ===== */ html body .main-sidebar .sidebar-brand.mt-2 { height: auto !important; line-height: normal !important; padding: 24px 12px 20px !important; margin-bottom: 4px !important; border-bottom: 0.5px solid rgba(255,255,255,0.07) !important; display: block !important; } html body .main-sidebar .sidebar-brand.mt-2 a { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 0 !important; height: auto !important; line-height: normal !important; gap: 0 !important; } /* ===== Brand Gap Fix ===== */ html body .main-sidebar .sidebar-brand.mt-2 { padding: 16px 12px 12px !important; } html body .main-sidebar .sidebar-menu { margin-top: 0 !important; padding-top: 0 !important; } html body .main-sidebar .sidebar-menu li.menu-header:first-child { padding-top: 8px !important; } /* ===== Brand Card Inset Style ===== */ html body .main-sidebar .sidebar-brand.mt-2 { padding: 12px !important; background: transparent !important; border-bottom: none !important; margin-bottom: 0 !important; } html body .main-sidebar .sidebar-brand.mt-2 a { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 14px 10px !important; height: auto !important; line-height: normal !important; gap: 0 !important; background: #111827 !important; border: 0.5px solid #1C4D8D !important; border-radius: 10px !important; } html body .main-sidebar .sidebar-brand.mt-2 a img { width: 52px !important; height: 52px !important; border-radius: 8px !important; margin-bottom: 8px !important; object-fit: cover !important; } html body .main-sidebar .sidebar-brand.mt-2 .animate-charcter { font-size: 13px !important; font-weight: 500 !important; color: #E2E8F0 !important; letter-spacing: 0.5px !important; text-align: center !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 160px !important; } html body .main-sidebar .sidebar-brand.mt-2 .brand-divider { width: 28px !important; height: 1.5px !important; background: #1C4D8D !important; margin: 5px auto !important; border-radius: 2px !important; } html body .main-sidebar .sidebar-brand.mt-2 .mt-brand-slogan { font-size: 8px !important; letter-spacing: 2px !important; color: #2E6BB8 !important; text-transform: uppercase !important; opacity: 1 !important; text-align: center !important; display: block !important; } [data-theme="light"] html body .main-sidebar .sidebar-brand.mt-2 a { background: #F0F4FF !important; border-color: #1C4D8D !important; } [data-theme="light"] html body .main-sidebar .sidebar-brand.mt-2 .animate-charcter { color: #0F172A !important; } /* ===== Brand Card Size Fix ===== */ html body .main-sidebar .sidebar-brand.mt-2 { padding: 8px 10px !important; } html body .main-sidebar .sidebar-brand.mt-2 a { padding: 10px 8px !important; } html body .main-sidebar .sidebar-brand.mt-2 a img { width: 40px !important; height: 40px !important; margin-bottom: 6px !important; } html body .main-sidebar .sidebar-brand.mt-2 .animate-charcter { font-size: 12px !important; } html body .main-sidebar .sidebar-brand.mt-2 .mt-brand-slogan { font-size: 7px !important; letter-spacing: 1.5px !important; } html body .main-sidebar .sidebar-brand.mt-2 .brand-divider { width: 22px !important; margin: 4px auto !important; } /* ===== Brand Card Final Size ===== */ html body .main-sidebar .sidebar-brand.mt-2 { padding: 6px 16px !important; } html body .main-sidebar .sidebar-brand.mt-2 a { padding: 8px 6px !important; border-radius: 8px !important; } html body .main-sidebar .sidebar-brand.mt-2 a img { width: 56px !important; height: 56px !important; margin-bottom: 6px !important; } html body .main-sidebar .sidebar-brand.mt-2 .animate-charcter { font-size: 15px !important; letter-spacing: 1px !important; } html body .main-sidebar .sidebar-brand.mt-2 .mt-brand-slogan { font-size: 8px !important; letter-spacing: 2px !important; } html body .main-sidebar .sidebar-brand.mt-2 .brand-divider { width: 24px !important; margin: 4px auto !important; } /* ===== Brand Logo Gap Fix ===== */ html body .main-sidebar .sidebar-brand.mt-2 a img { margin-bottom: 2px !important; } html body .main-sidebar .sidebar-brand.mt-2 .brand-text-wrap { gap: 0 !important; margin-top: 0 !important; } html body .main-sidebar .sidebar-brand.mt-2 .animate-charcter { margin-top: 0 !important; line-height: 1.2 !important; } /* ===== Brand Logo Gap Fix v2 ===== */ html body .main-sidebar .sidebar-brand.mt-2 a img { margin-bottom: -4px !important; } /* ===== Brand Glow Separator ===== */ html body .main-sidebar .sidebar-brand.mt-2 { position: relative; } /* ===== Brand Card Polish ===== */ html body .main-sidebar .sidebar-brand.mt-2 { padding: 6px 14px !important; } html body .main-sidebar .sidebar-brand.mt-2 a { padding: 8px 8px !important; border-radius: 8px !important; overflow: visible !important; } html body .main-sidebar .sidebar-brand.mt-2 a img { width: 48px !important; height: 48px !important; border-radius: 8px !important; margin-bottom: 2px !important; object-fit: contain !important; } html body .main-sidebar .sidebar-brand.mt-2 .animate-charcter { font-size: 14px !important; font-weight: 700 !important; letter-spacing: 1px !important; } /* ===== Brand Card Width + Logo Fix ===== */ html body .main-sidebar .sidebar-brand.mt-2 { padding: 6px 20px !important; } html body .main-sidebar .sidebar-brand.mt-2 a { padding: 10px 16px !important; border-radius: 8px !important; } html body .main-sidebar .sidebar-brand.mt-2 a img { width: 70px !important; height: 70px !important; object-fit: contain !important; margin-bottom: 4px !important; } /* ===== Brand Logo Big + Box Narrow ===== */ html body .main-sidebar .sidebar-brand.mt-2 { padding: 6px 30px !important; } html body .main-sidebar .sidebar-brand.mt-2 a { padding: 10px 12px !important; } html body .main-sidebar .sidebar-brand.mt-2 a img { width: 100px !important; height: 100px !important; object-fit: contain !important; margin-bottom: 0px !important; } /* ===== Brand Logo Crop + Size Fix ===== */ html body .main-sidebar .sidebar-brand.mt-2 a img { width: 130px !important; height: 130px !important; object-fit: contain !important; margin-bottom: -20px !important; margin-top: -20px !important; } /* ===== Brand Box Width + Logo Size ===== */ html body .main-sidebar .sidebar-brand.mt-2 { padding: 6px 10px !important; } html body .main-sidebar .sidebar-brand.mt-2 a img { width: 160px !important; height: 160px !important; margin-top: -30px !important; margin-bottom: -30px !important; } /* ===== Brand Logo Scale Fix ===== */ html body .main-sidebar .sidebar-brand.mt-2 a { overflow: hidden !important; padding: 12px 12px !important; } html body .main-sidebar .sidebar-brand.mt-2 a img { width: 90px !important; height: 90px !important; margin-top: 0px !important; margin-bottom: 0px !important; transform: scale(1.8) !important; transform-origin: center center !important; object-fit: contain !important; } /* ===== Brand Logo Spacing Fix ===== */ html body .main-sidebar .sidebar-brand.mt-2 a { padding: 20px 12px 14px !important; } html body .main-sidebar .sidebar-brand.mt-2 a img { margin-bottom: -8px !important; } /* ===== Brand Logo Bigger ===== */ html body .main-sidebar .sidebar-brand.mt-2 a img { transform: scale(2.2) !important; } /* ===== Brand Logo Text Gap ===== */ html body .main-sidebar .sidebar-brand.mt-2 a img { margin-bottom: 10px !important; } /* ===== Brand Logo Bottom Margin Zero ===== */ html body .main-sidebar .sidebar-brand.mt-2 a img { margin-bottom: 0px !important; } /* ===== Brand Text Wrap Fix ===== */ html body .main-sidebar .sidebar-brand.mt-2 .animate-charcter { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; max-width: 100% !important; word-break: break-word !important; } html body .main-sidebar .sidebar-brand.mt-2 .mt-brand-slogan { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; max-width: 100% !important; word-break: break-word !important; } /* ===== Sidebar Scroll + Brand Fix ===== */ html body .main-sidebar { display: flex !important; flex-direction: column !important; overflow: hidden !important; } html body .main-sidebar #sidebar-wrapper { display: flex !important; flex-direction: column !important; height: 100% !important; overflow: hidden !important; } html body .main-sidebar .sidebar-brand.mt-2 { flex-shrink: 0 !important; } html body .main-sidebar .sidebar-menu { flex: 1 !important; overflow-y: auto !important; overflow-x: hidden !important; } html body .main-sidebar .sidebar-menu::-webkit-scrollbar { width: 3px !important; } html body .main-sidebar .sidebar-menu::-webkit-scrollbar-track { background: transparent !important; } html body .main-sidebar .sidebar-menu::-webkit-scrollbar-thumb { background: #1C4D8D !important; border-radius: 3px !important; } /* ===== Mini Sidebar Glow Separator ===== */ html body .main-sidebar .sidebar-brand.sidebar-brand-sm { position: relative !important; padding-bottom: 8px !important; } /* ===== Mini Sidebar Glow Line Fix ===== */ body.sidebar-mini .main-sidebar .sidebar-brand-sm { position: relative !important; display: block !important; padding-bottom: 6px !important; } /* ===== Mini Sidebar Glow Line Stronger ===== */ /* ===== Mini Sidebar Glow Div ===== */ /* ===== Mini Glow Line Layout Fix ===== */ body.sidebar-mini .main-sidebar .sidebar-brand-sm { display: flex !important; flex-direction: column !important; align-items: center !important; } /* ===== Mini Sidebar Final Fix ===== */ body.sidebar-mini .main-sidebar .sidebar-brand-sm { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 8px 0 0 !important; height: auto !important; line-height: normal !important; } body.sidebar-mini .main-sidebar .sidebar-brand-sm a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; } /* ===== Mini Sidebar Double Line + Center Fix ===== */ body.sidebar-mini .main-sidebar .sidebar-brand-sm { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; padding: 8px 0 0 !important; height: auto !important; line-height: normal !important; } body.sidebar-mini .main-sidebar .sidebar-brand-sm a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; text-align: center !important; } /* ===== Mini Sidebar FINAL CLEANUP ===== */ body.sidebar-mini .main-sidebar .sidebar-brand-sm { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 8px 0 0 !important; height: auto !important; line-height: normal !important; } body.sidebar-mini .main-sidebar .sidebar-brand-sm a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; } /* ===== Mini Sidebar Clean ===== */ body.sidebar-mini .main-sidebar .sidebar-brand-sm { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; padding: 8px 0 0 !important; height: auto !important; line-height: normal !important; } body.sidebar-mini .main-sidebar .sidebar-brand-sm a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; } /* ===== Hide Main Brand Glow in Mini Mode ===== */ /* ===== Hide Main Brand Glow in Mini Mode Final ===== */ html body.sidebar-mini .main-sidebar .sidebar-brand.mt-2 { display: none !important; } /* ===== Brand Glow Line - Full Nav Only ===== */ html body:not(.sidebar-mini) .main-sidebar .sidebar-brand.mt-2::after { content: ''; display: block; height: 1.5px; margin-top: 10px; background: linear-gradient(90deg, transparent 0%, #1C4D8D 30%, #4A9EFF 50%, #1C4D8D 70%, transparent 100%); } /* ===== Mini Sidebar Logo Center ===== */ body.sidebar-mini .main-sidebar .sidebar-brand-sm { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; text-align: center !important; } body.sidebar-mini .main-sidebar .sidebar-brand-sm a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; } /* ===== Mini Logo Center FINAL ===== */ html body.sidebar-mini .main-sidebar .sidebar-brand.sidebar-brand-sm, html body.sidebar-mini .main-sidebar .sidebar-brand.sidebar-brand-sm a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; text-align: center !important; padding: 0 !important; margin: 0 auto !important; } /* ===== Mini Sidebar Logo Padding ===== */ html body.sidebar-mini .main-sidebar .sidebar-brand.sidebar-brand-sm { padding: 8.5px 0 8.5px !important; } /* ===== Mini Sidebar Logo Background ===== */ html body.sidebar-mini .main-sidebar .sidebar-brand.sidebar-brand-sm { background: rgba(28, 77, 141, 0.15) !important; border-bottom: 1px solid rgba(28, 77, 141, 0.3) !important; } /* ===== Brand Box Fixed Height ===== */ html body .main-sidebar .sidebar-brand.mt-2 a { min-height: 180px !important; max-height: 180px !important; overflow: hidden !important; } html body .main-sidebar .sidebar-brand.mt-2 a img { max-height: 100px !important; width: auto !important; transform: scale(2.2) !important; } /* ===== Brand Box Fixed Height Smaller ===== */ html body .main-sidebar .sidebar-brand.mt-2 a { min-height: 140px !important; max-height: 140px !important; } /* ===== Brand Box Fixed Size Final ===== */ html body .main-sidebar .sidebar-brand.mt-2 a { min-height: 200px !important; max-height: 200px !important; } html body .main-sidebar .sidebar-brand.mt-2 a img { transform: scale(1.0) !important; max-height: 50px !important; } /* ===== Brand Box Clean Reset ===== */ html body .main-sidebar .sidebar-brand.mt-2 a { min-height: unset !important; max-height: unset !important; padding: 10px 10px 10px !important; } html body .main-sidebar .sidebar-brand.mt-2 a img { width: 65px !important; height: 65px !important; max-height: unset !important; transform: none !important; object-fit: contain !important; margin-bottom: -12px !important; margin-top: 0px !important; } /* ===== Sidebar Width Responsive Fix ===== */ @media (max-width: 768px) { html body .main-sidebar { width: 250px !important; } html body .main-content { margin-left: 0 !important; } html body .navbar.navbar-expand-lg { left: 0 !important; width: 100% !important; } } /* ===== Navbar Mobile Gap Fix ===== */ @media (max-width: 768px) { html body .navbar.navbar-expand-lg, html body .main-navbar { left: 0 !important; width: 100% !important; margin-left: 0 !important; } html body .main-content { margin-left: 0 !important; padding-left: 0 !important; } } /* ===== Brand Layout - Logo Left Text Right ===== */ html body .main-sidebar .sidebar-brand.mt-2 a { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 5px !important; padding: 6px 6px !important; text-align: left !important; } html body .main-sidebar .sidebar-brand.mt-2 a img { width: 60px !important; height: 60px !important; object-fit: contain !important; flex-shrink: 0 !important; margin-bottom: 0 !important; margin-top: 0 !important; transform: none !important; } html body .main-sidebar .sidebar-brand.mt-2 .brand-text-wrap { display: flex !important; flex-direction: column !important; align-items: flex-start !important; overflow: hidden !important; } html body .main-sidebar .sidebar-brand.mt-2 .animate-charcter { text-align: left !important; font-size: 14px !important; font-weight: 700 !important; max-width: 160px !important; } html body .main-sidebar .sidebar-brand.mt-2 .brand-divider { margin: 4px 0 !important; } html body .main-sidebar .sidebar-brand.mt-2 .mt-brand-slogan { text-align: left !important; max-width: 160px !important; } background: rgba(28, 77, 141, 0.08) !important; background-color: rgba(28, 77, 141, 0.08) !important; border: 0.5px solid rgba(46, 107, 184, 0.25) !important; border-radius: 12px !important; color: #CBD5E1 !important; box-shadow: none !important; } /* ===== Page Content Top Gap Fix ===== */ html[data-theme] .main-content { padding-top: 0 !important; } html[data-theme] .section .section-header { margin-bottom: 16px !important; padding-top: 20px !important; } html[data-theme] .section-body { margin-top: 0 !important; padding-top: 0 !important; } html[data-theme] .navbar.main-navbar { margin-bottom: 0 !important; } /* ===== Page Gap Fix v2 ===== */ html[data-theme] .main-content { padding-top: 0 !important; } html[data-theme] .section .section-header { padding: 20px 30px 16px !important; margin-bottom: 0 !important; } html[data-theme] .section-body { padding: 15px 15px 15px !important; } /* ===== Content Below Navbar Fix ===== */ html[data-theme] .main-content { padding-top: 70px !important; } /* ===== Stat Cards Glass Style ===== */ html[data-theme] .card.card-statistic-1, html[data-theme] .card.card-statistic-2 { background: rgba(28, 77, 141, 0.08) !important; border: 0.5px solid rgba(46, 107, 184, 0.25) !important; border-top: 2px solid #1C4D8D !important; border-radius: 10px !important; box-shadow: none !important; } html[data-theme="light"] .card.card-statistic-1, html[data-theme="light"] .card.card-statistic-2 { background: rgba(28, 77, 141, 0.04) !important; border: 0.5px solid rgba(28, 77, 141, 0.2) !important; border-top: 2px solid #1C4D8D !important; } html[data-theme] .card.card-statistic-1 .card-icon, html[data-theme] .card.card-statistic-2 .card-icon { background: rgba(28, 77, 141, 0.2) !important; border-radius: 8px !important; box-shadow: none !important; } html[data-theme] .card.card-statistic-1 .card-icon i, html[data-theme] .card.card-statistic-2 .card-icon i { color: #4A9EFF !important; } html[data-theme] .card.card-statistic-1 .card-header h4, html[data-theme] .card.card-statistic-2 .card-header h4 { color: #4A6FA5 !important; font-size: 10px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; font-weight: 500 !important; } html[data-theme] .card.card-statistic-1 .card-body, html[data-theme] .card.card-statistic-2 .card-body { color: var(--mt-text-primary) !important; font-size: 22px !important; font-weight: 500 !important; } /* Remove colored backgrounds from card icons */ html[data-theme] .card.card-statistic-1 .bg-info, html[data-theme] .card.card-statistic-1 .bg-success, html[data-theme] .card.card-statistic-1 .bg-warning, html[data-theme] .card.card-statistic-1 .bg-danger, html[data-theme] .card.card-statistic-1 .shadow-info, html[data-theme] .card.card-statistic-1 .shadow-success, html[data-theme] .card.card-statistic-1 .shadow-warning, html[data-theme] .card.card-statistic-1 .shadow-danger { background: rgba(28, 77, 141, 0.2) !important; box-shadow: none !important; } /* ===== Stat Cards Force Navy Border ===== */ html[data-theme] .card.card-statistic-1, html[data-theme] .card.card-statistic-1.card-info, html[data-theme] .card.card-statistic-1.card-success, html[data-theme] .card.card-statistic-1.card-warning, html[data-theme] .card.card-statistic-1.card-danger, html[data-theme] .card.card-statistic-2, html[data-theme] .card.card-statistic-2.card-info, html[data-theme] .card.card-statistic-2.card-success, html[data-theme] .card.card-statistic-2.card-warning, html[data-theme] .card.card-statistic-2.card-danger { border-top: 2px solid #1C4D8D !important; border-left: 0.5px solid rgba(46,107,184,0.25) !important; border-right: 0.5px solid rgba(46,107,184,0.25) !important; border-bottom: 0.5px solid rgba(46,107,184,0.25) !important; } /* ===== Force All Stat Cards Navy Border ===== */ html[data-theme] .card.card-success, html[data-theme] .card.card-danger, html[data-theme] .card.card-warning, html[data-theme] .card.card-info, html[data-theme] .card.card-secondary, html[data-theme] .card.card-dark { border-top: 2px solid #1C4D8D !important; } /* ===== Global Card Glass Style ===== */ html[data-theme] .card { background: rgba(17, 24, 39, 0.8) !important; border: 0.5px solid rgba(46, 107, 184, 0.2) !important; border-top: 2px solid #1C4D8D !important; border-radius: 10px !important; box-shadow: none !important; } html[data-theme="light"] .card { background: rgba(255, 255, 255, 0.9) !important; border: 0.5px solid rgba(28, 77, 141, 0.15) !important; border-top: 2px solid #1C4D8D !important; } html[data-theme] .card .card-header { background: transparent !important; border-bottom: 0.5px solid rgba(46, 107, 184, 0.15) !important; } html[data-theme] .card .card-footer { background: transparent !important; border-top: 0.5px solid rgba(46, 107, 184, 0.15) !important; } html[data-theme] .card .card-body { background: transparent !important; } /* ===== Nested Card Fix ===== */ html[data-theme] .card .card { border-top: 0.5px solid rgba(46, 107, 184, 0.2) !important; background: rgba(28, 77, 141, 0.06) !important; } html[data-theme="light"] .card .card { border-top: 0.5px solid rgba(28, 77, 141, 0.15) !important; background: rgba(28, 77, 141, 0.03) !important; } /* ===== Remove Border Top from Nested Cards ===== */ html[data-theme] .card .card, html[data-theme] .card-body .card, html[data-theme] .card .card.card-success, html[data-theme] .card .card.card-info, html[data-theme] .card .card.card-warning, html[data-theme] .card .card.card-danger, html[data-theme] .card .card.card-statistic-1 { border-top: 0.5px solid rgba(46, 107, 184, 0.2) !important; } /* ===== Unified Card Style - All Types ===== */ html[data-theme] .card, html[data-theme] .card.card-primary, html[data-theme] .card.card-secondary, html[data-theme] .card.card-success, html[data-theme] .card.card-danger, html[data-theme] .card.card-warning, html[data-theme] .card.card-info, html[data-theme] .card.card-dark, html[data-theme] .card.card-outline-primary, html[data-theme] .card.card-outline-success, html[data-theme] .card.card-outline-warning, html[data-theme] .card.card-outline-info, html[data-theme] .card.border-primary, html[data-theme] .card.border-success, html[data-theme] .card.border-warning, html[data-theme] .card.border-danger, html[data-theme] .card.border-info, html[data-theme] .card.border-secondary, html[data-theme] .card.bg-light, html[data-theme] .card.shadow-lg, html[data-theme] .card.h-100, html[data-theme] .card.mt-2, html[data-theme] .card.profile-widget, html[data-theme] .card.card-statistic-1, html[data-theme] .card.card-statistic-2 { background: rgba(17, 24, 39, 0.8) !important; border: 0.5px solid rgba(46, 107, 184, 0.2) !important; border-top: 2px solid #1C4D8D !important; border-radius: 10px !important; box-shadow: none !important; } /* Nested cards — no top accent */ html[data-theme] .card .card, html[data-theme] .card .card.card-primary, html[data-theme] .card .card.card-success, html[data-theme] .card .card.card-danger, html[data-theme] .card .card.card-warning, html[data-theme] .card .card.card-info, html[data-theme] .card .card.card-statistic-1, html[data-theme] .card .card.card-statistic-2 { border-top: 0.5px solid rgba(46, 107, 184, 0.2) !important; background: rgba(28, 77, 141, 0.06) !important; } /* Light mode */ html[data-theme="light"] .card { background: #ffffff !important; border: 0.5px solid rgba(28, 77, 141, 0.15) !important; border-top: 2px solid #1C4D8D !important; } html[data-theme="light"] .card .card { background: rgba(28, 77, 141, 0.03) !important; border-top: 0.5px solid rgba(28, 77, 141, 0.15) !important; } /* Card header/body/footer transparent */ html[data-theme] .card .card-header, html[data-theme] .card .card-body, html[data-theme] .card .card-footer { background: transparent !important; } html[data-theme] .card .card-header { border-bottom: 0.5px solid rgba(46, 107, 184, 0.15) !important; } html[data-theme] .card .card-footer { border-top: 0.5px solid rgba(46, 107, 184, 0.15) !important; } /* ===== Activity Icons Theme Fix ===== */ html[data-theme] .activitys-icon { width: 40px !important; height: 40px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; margin-right: 12px !important; background: rgba(28, 77, 141, 0.2) !important; color: #4A9EFF !important; box-shadow: none !important; } html[data-theme] .activitys-icon.bg-warning, html[data-theme] .activitys-icon.bg-success, html[data-theme] .activitys-icon.bg-info, html[data-theme] .activitys-icon.bg-danger, html[data-theme] .activitys-icon.bg-primary, html[data-theme] .activitys-icon.bg-secondary, html[data-theme] .activitys-icon.bg-dark { background: rgba(28, 77, 141, 0.2) !important; color: #4A9EFF !important; box-shadow: none !important; } html[data-theme] .activitys-icon i { color: #4A9EFF !important; font-size: 14px !important; } html[data-theme] li.media { padding: 12px 0 !important; border-bottom: 0.5px solid rgba(46, 107, 184, 0.1) !important; display: flex !important; align-items: center !important; } html[data-theme] li.media:last-child { border-bottom: none !important; } html[data-theme] .media-title { color: var(--mt-text-primary) !important; font-size: 13px !important; font-weight: 500 !important; } html[data-theme] .float-right.text-small { color: #4A6FA5 !important; font-size: 11px !important; } html[data-theme="light"] .activitys-icon, html[data-theme="light"] .activitys-icon.bg-warning, html[data-theme="light"] .activitys-icon.bg-success, html[data-theme="light"] .activitys-icon.bg-info, html[data-theme="light"] .activitys-icon.bg-danger, html[data-theme="light"] .activitys-icon.bg-primary, html[data-theme="light"] .activitys-icon.bg-secondary, html[data-theme="light"] .activitys-icon.bg-dark { background: rgba(28, 77, 141, 0.1) !important; color: #1C4D8D !important; } html[data-theme="light"] .activitys-icon i { color: #1C4D8D !important; } /* ===== Activity Icons Refined Colors ===== */ html[data-theme] .activitys-icon { width: 38px !important; height: 38px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; margin-right: 12px !important; box-shadow: none !important; } html[data-theme] .activitys-icon.bg-warning { background: rgba(245, 158, 11, 0.15) !important; color: #F59E0B !important; box-shadow: none !important; } html[data-theme] .activitys-icon.bg-success { background: rgba(34, 197, 94, 0.15) !important; color: #22C55E !important; box-shadow: none !important; } html[data-theme] .activitys-icon.bg-info { background: rgba(14, 165, 233, 0.15) !important; color: #0EA5E9 !important; box-shadow: none !important; } html[data-theme] .activitys-icon.bg-danger { background: rgba(239, 68, 68, 0.15) !important; color: #EF4444 !important; box-shadow: none !important; } html[data-theme] .activitys-icon.bg-primary { background: rgba(28, 77, 141, 0.15) !important; color: #4A9EFF !important; box-shadow: none !important; } html[data-theme] .activitys-icon.bg-secondary { background: rgba(100, 116, 139, 0.15) !important; color: #94A3B8 !important; box-shadow: none !important; } html[data-theme] .activitys-icon.bg-dark { background: rgba(30, 41, 59, 0.5) !important; color: #94A3B8 !important; box-shadow: none !important; } html[data-theme] .activitys-icon i { font-size: 14px !important; color: inherit !important; } /* ===== Notification Icons Refined Colors ===== */ html[data-theme] .dropdown-item-icon { width: 38px !important; height: 38px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; box-shadow: none !important; color: inherit !important; } html[data-theme] .dropdown-item-icon.bg-primary { background: rgba(28, 77, 141, 0.15) !important; color: #4A9EFF !important; box-shadow: none !important; } html[data-theme] .dropdown-item-icon.bg-warning { background: rgba(245, 158, 11, 0.15) !important; color: #F59E0B !important; box-shadow: none !important; } html[data-theme] .dropdown-item-icon.bg-danger { background: rgba(239, 68, 68, 0.15) !important; color: #EF4444 !important; box-shadow: none !important; } html[data-theme] .dropdown-item-icon.bg-success { background: rgba(34, 197, 94, 0.15) !important; color: #22C55E !important; box-shadow: none !important; } html[data-theme] .dropdown-item-icon.bg-info { background: rgba(14, 165, 233, 0.15) !important; color: #0EA5E9 !important; box-shadow: none !important; } html[data-theme] .dropdown-item-icon.text-white { color: inherit !important; } html[data-theme] .dropdown-item-icon i { font-size: 14px !important; color: inherit !important; } /* ===== Icon Colors More Vibrant ===== */ html[data-theme] .dropdown-item-icon.bg-primary, html[data-theme] .activitys-icon.bg-primary { background: rgba(28, 77, 141, 0.35) !important; color: #60A5FA !important; } html[data-theme] .dropdown-item-icon.bg-warning, html[data-theme] .activitys-icon.bg-warning { background: rgba(245, 158, 11, 0.35) !important; color: #FCD34D !important; } html[data-theme] .dropdown-item-icon.bg-danger, html[data-theme] .activitys-icon.bg-danger { background: rgba(239, 68, 68, 0.35) !important; color: #FCA5A5 !important; } html[data-theme] .dropdown-item-icon.bg-success, html[data-theme] .activitys-icon.bg-success { background: rgba(34, 197, 94, 0.35) !important; color: #86EFAC !important; } html[data-theme] .dropdown-item-icon.bg-info, html[data-theme] .activitys-icon.bg-info { background: rgba(14, 165, 233, 0.35) !important; color: #7DD3FC !important; } html[data-theme] .dropdown-item-icon.bg-secondary, html[data-theme] .activitys-icon.bg-secondary { background: rgba(100, 116, 139, 0.35) !important; color: #CBD5E1 !important; } html[data-theme] .dropdown-item-icon.bg-dark, html[data-theme] .activitys-icon.bg-dark { background: rgba(51, 65, 85, 0.5) !important; color: #94A3B8 !important; } /* ===== Icon Colors - Original Bright Colors, Square Shape ===== */ html[data-theme] .dropdown-item-icon.bg-primary, html[data-theme] .activitys-icon.bg-primary { background: #1C4D8D !important; color: #ffffff !important; } html[data-theme] .dropdown-item-icon.bg-warning, html[data-theme] .activitys-icon.bg-warning { background: #F59E0B !important; color: #ffffff !important; } html[data-theme] .dropdown-item-icon.bg-danger, html[data-theme] .activitys-icon.bg-danger { background: #EF4444 !important; color: #ffffff !important; } html[data-theme] .dropdown-item-icon.bg-success, html[data-theme] .activitys-icon.bg-success { background: #22C55E !important; color: #ffffff !important; } html[data-theme] .dropdown-item-icon.bg-info, html[data-theme] .activitys-icon.bg-info { background: #0EA5E9 !important; color: #ffffff !important; } html[data-theme] .dropdown-item-icon.bg-secondary, html[data-theme] .activitys-icon.bg-secondary { background: #64748B !important; color: #ffffff !important; } html[data-theme] .dropdown-item-icon.bg-dark, html[data-theme] .activitys-icon.bg-dark { background: #1E293B !important; color: #ffffff !important; } html[data-theme] .dropdown-item-icon i, html[data-theme] .activitys-icon i { color: #ffffff !important; } /* ===== Icon Glass Colors Final ===== */ html[data-theme] .dropdown-item-icon, html[data-theme] .activitys-icon { box-shadow: none !important; border-radius: 10px !important; } html[data-theme] .dropdown-item-icon.bg-primary, html[data-theme] .activitys-icon.bg-primary { background: rgba(59, 130, 246, 0.15) !important; border: 1px solid rgba(59, 130, 246, 0.3) !important; color: #60A5FA !important; } html[data-theme] .dropdown-item-icon.bg-warning, html[data-theme] .activitys-icon.bg-warning { background: rgba(245, 158, 11, 0.15) !important; border: 1px solid rgba(245, 158, 11, 0.3) !important; color: #FCD34D !important; } html[data-theme] .dropdown-item-icon.bg-danger, html[data-theme] .activitys-icon.bg-danger { background: rgba(239, 68, 68, 0.15) !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; color: #FCA5A5 !important; } html[data-theme] .dropdown-item-icon.bg-success, html[data-theme] .activitys-icon.bg-success { background: rgba(34, 197, 94, 0.15) !important; border: 1px solid rgba(34, 197, 94, 0.3) !important; color: #86EFAC !important; } html[data-theme] .dropdown-item-icon.bg-info, html[data-theme] .activitys-icon.bg-info { background: rgba(14, 165, 233, 0.15) !important; border: 1px solid rgba(14, 165, 233, 0.3) !important; color: #7DD3FC !important; } html[data-theme] .dropdown-item-icon.bg-secondary, html[data-theme] .activitys-icon.bg-secondary { background: rgba(100, 116, 139, 0.15) !important; border: 1px solid rgba(100, 116, 139, 0.3) !important; color: #CBD5E1 !important; } html[data-theme] .dropdown-item-icon.bg-dark, html[data-theme] .activitys-icon.bg-dark { background: rgba(30, 41, 59, 0.3) !important; border: 1px solid rgba(51, 65, 85, 0.4) !important; color: #94A3B8 !important; } html[data-theme] .dropdown-item-icon.text-white i, html[data-theme] .activitys-icon.text-white i, html[data-theme] .dropdown-item-icon i, html[data-theme] .activitys-icon i { color: inherit !important; } /* ===== Stat Card Icons Glass Colors ===== */ html[data-theme] .card-icon { border-radius: 10px !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-info, html[data-theme] .card-icon.shadow-info { background: rgba(14, 165, 233, 0.15) !important; border: 1px solid rgba(14, 165, 233, 0.3) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-info i { color: #7DD3FC !important; } html[data-theme] .card-icon.bg-success, html[data-theme] .card-icon.shadow-success { background: rgba(34, 197, 94, 0.15) !important; border: 1px solid rgba(34, 197, 94, 0.3) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-success i { color: #86EFAC !important; } html[data-theme] .card-icon.bg-warning, html[data-theme] .card-icon.shadow-warning { background: rgba(245, 158, 11, 0.15) !important; border: 1px solid rgba(245, 158, 11, 0.3) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-warning i { color: #FCD34D !important; } html[data-theme] .card-icon.bg-danger, html[data-theme] .card-icon.shadow-danger { background: rgba(239, 68, 68, 0.15) !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-danger i { color: #FCA5A5 !important; } html[data-theme] .card-icon.bg-primary, html[data-theme] .card-icon.shadow-primary { background: rgba(28, 77, 141, 0.15) !important; border: 1px solid rgba(28, 77, 141, 0.3) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-primary i { color: #60A5FA !important; } /* ===== Stat Card Icons Glass Background ===== */ html[data-theme] .card-icon { border-radius: 10px !important; box-shadow: none !important; border: none !important; } html[data-theme] .card-icon.bg-info { background: rgba(14, 165, 233, 0.2) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-info i { color: #7DD3FC !important; } html[data-theme] .card-icon.bg-success { background: rgba(34, 197, 94, 0.2) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-success i { color: #86EFAC !important; } html[data-theme] .card-icon.bg-warning { background: rgba(245, 158, 11, 0.2) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-warning i { color: #FCD34D !important; } html[data-theme] .card-icon.bg-danger { background: rgba(239, 68, 68, 0.2) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-danger i { color: #FCA5A5 !important; } html[data-theme] .card-icon.bg-primary { background: rgba(28, 77, 141, 0.2) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-primary i { color: #60A5FA !important; } html[data-theme] .card-icon:not([class*="bg-"]) { background: rgba(28, 77, 141, 0.2) !important; } html[data-theme] .card-icon:not([class*="bg-"]) i { color: #60A5FA !important; } /* ===== Stat Card Icons Glass Background ===== */ html[data-theme] .card-icon { border-radius: 10px !important; box-shadow: none !important; border: none !important; } html[data-theme] .card-icon.bg-info { background: rgba(14, 165, 233, 0.2) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-info i { color: #7DD3FC !important; } html[data-theme] .card-icon.bg-success { background: rgba(34, 197, 94, 0.2) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-success i { color: #86EFAC !important; } html[data-theme] .card-icon.bg-warning { background: rgba(245, 158, 11, 0.2) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-warning i { color: #FCD34D !important; } html[data-theme] .card-icon.bg-danger { background: rgba(239, 68, 68, 0.2) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-danger i { color: #FCA5A5 !important; } html[data-theme] .card-icon.bg-primary { background: rgba(28, 77, 141, 0.2) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-primary i { color: #60A5FA !important; } html[data-theme] .card-icon:not([class*="bg-"]) { background: rgba(28, 77, 141, 0.2) !important; } html[data-theme] .card-icon:not([class*="bg-"]) i { color: #60A5FA !important; } /* ===== Stat Card Icons Final Fix ===== */ html[data-theme] .card.card-statistic-1 .card-icon.bg-info, html[data-theme] .card.card-statistic-2 .card-icon.bg-info { background: rgba(14, 165, 233, 0.2) !important; box-shadow: none !important; } html[data-theme] .card.card-statistic-1 .card-icon.bg-info .fas, html[data-theme] .card.card-statistic-1 .card-icon.bg-info .far, html[data-theme] .card.card-statistic-1 .card-icon.bg-info .fab { color: #7DD3FC !important; } html[data-theme] .card.card-statistic-1 .card-icon.bg-success, html[data-theme] .card.card-statistic-2 .card-icon.bg-success { background: rgba(34, 197, 94, 0.2) !important; box-shadow: none !important; } html[data-theme] .card.card-statistic-1 .card-icon.bg-success .fas, html[data-theme] .card.card-statistic-1 .card-icon.bg-success .far, html[data-theme] .card.card-statistic-1 .card-icon.bg-success .fab { color: #86EFAC !important; } html[data-theme] .card.card-statistic-1 .card-icon.bg-warning, html[data-theme] .card.card-statistic-2 .card-icon.bg-warning { background: rgba(245, 158, 11, 0.2) !important; box-shadow: none !important; } html[data-theme] .card.card-statistic-1 .card-icon.bg-warning .fas, html[data-theme] .card.card-statistic-1 .card-icon.bg-warning .far, html[data-theme] .card.card-statistic-1 .card-icon.bg-warning .fab { color: #FCD34D !important; } html[data-theme] .card.card-statistic-1 .card-icon.bg-danger, html[data-theme] .card.card-statistic-2 .card-icon.bg-danger { background: rgba(239, 68, 68, 0.2) !important; box-shadow: none !important; } html[data-theme] .card.card-statistic-1 .card-icon.bg-danger .fas, html[data-theme] .card.card-statistic-1 .card-icon.bg-danger .far, html[data-theme] .card.card-statistic-1 .card-icon.bg-danger .fab { color: #FCA5A5 !important; } html[data-theme] .card.card-statistic-1 .card-icon.bg-primary, html[data-theme] .card.card-statistic-2 .card-icon.bg-primary { background: rgba(28, 77, 141, 0.2) !important; box-shadow: none !important; } html[data-theme] .card.card-statistic-1 .card-icon.bg-primary .fas, html[data-theme] .card.card-statistic-1 .card-icon.bg-primary .far, html[data-theme] .card.card-statistic-1 .card-icon.bg-primary .fab { color: #60A5FA !important; } html[data-theme] .card.card-statistic-1 .card-icon:not([class*="bg-"]) { background: rgba(28, 77, 141, 0.2) !important; box-shadow: none !important; } /* ===== Pending Cards Icon Fix ===== */ html[data-theme] .card.card-statistic-1 .card-icon:not(.bg-info):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-primary):not(.bg-secondary):not(.bg-dark):not(.mt-icon-info):not(.mt-icon-success):not(.mt-icon-warning):not(.mt-icon-danger):not(.mt-icon-primary):not(.mt-icon-purple):not(.mt-icon-teal) { background: rgba(28, 77, 141, 0.2) !important; box-shadow: none !important; } html[data-theme] .card.card-statistic-1 .card-icon:not(.bg-info):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-primary):not(.bg-secondary):not(.bg-dark):not(.mt-icon-info):not(.mt-icon-success):not(.mt-icon-warning):not(.mt-icon-danger):not(.mt-icon-primary):not(.mt-icon-purple):not(.mt-icon-teal) .fas, html[data-theme] .card.card-statistic-1 .card-icon:not(.bg-info):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-primary):not(.bg-secondary):not(.bg-dark):not(.mt-icon-info):not(.mt-icon-success):not(.mt-icon-warning):not(.mt-icon-danger):not(.mt-icon-primary):not(.mt-icon-purple):not(.mt-icon-teal) .far, html[data-theme] .card.card-statistic-1 .card-icon:not(.bg-info):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-primary):not(.bg-secondary):not(.bg-dark):not(.mt-icon-info):not(.mt-icon-success):not(.mt-icon-warning):not(.mt-icon-danger):not(.mt-icon-primary):not(.mt-icon-purple):not(.mt-icon-teal) .fab { color: #60A5FA !important; } /* ===== Pending Icon Force Fix ===== */ html[data-theme] .card.card-statistic-1 .card-icon.bg-primary.shadow-primary { background: rgba(28, 77, 141, 0.2) !important; box-shadow: none !important; } html[data-theme] .card.card-statistic-1 .card-icon.bg-primary.shadow-primary .fas, html[data-theme] .card.card-statistic-1 .card-icon.bg-primary.shadow-primary .far { color: #60A5FA !important; } /* ===== Card Icon BG Override - Match Stisla Specificity ===== */ html[data-theme] .card-icon.bg-primary { background-color: rgba(28, 77, 141, 0.2) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-success { background-color: rgba(34, 197, 94, 0.2) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-info { background-color: rgba(14, 165, 233, 0.2) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-warning { background-color: rgba(245, 158, 11, 0.2) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-danger { background-color: rgba(239, 68, 68, 0.2) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-secondary { background-color: rgba(100, 116, 139, 0.2) !important; box-shadow: none !important; } html[data-theme] .card-icon.bg-primary .fas, html[data-theme] .card-icon.bg-primary .far, html[data-theme] .card-icon.bg-primary .fab { color: #60A5FA !important; } html[data-theme] .card-icon.bg-success .fas, html[data-theme] .card-icon.bg-success .far { color: #86EFAC !important; } html[data-theme] .card-icon.bg-info .fas, html[data-theme] .card-icon.bg-info .far { color: #7DD3FC !important; } html[data-theme] .card-icon.bg-warning .fas, html[data-theme] .card-icon.bg-warning .far { color: #FCD34D !important; } html[data-theme] .card-icon.bg-danger .fas, html[data-theme] .card-icon.bg-danger .far { color: #FCA5A5 !important; } html[data-theme] .card-icon.bg-secondary .fas, html[data-theme] .card-icon.bg-secondary .far { color: #CBD5E1 !important; } /* ===== Card Icon BG Highest Specificity ===== */ html[data-theme] body .card.card-statistic-1 .card-icon.bg-primary, html[data-theme] body .card.card-statistic-2 .card-icon.bg-primary { background-color: rgba(28,77,141,0.2) !important; box-shadow:none !important; } html[data-theme] body .card.card-statistic-1 .card-icon.bg-success, html[data-theme] body .card.card-statistic-2 .card-icon.bg-success { background-color: rgba(34,197,94,0.2) !important; box-shadow:none !important; } html[data-theme] body .card.card-statistic-1 .card-icon.bg-info, html[data-theme] body .card.card-statistic-2 .card-icon.bg-info { background-color: rgba(14,165,233,0.2) !important; box-shadow:none !important; } html[data-theme] body .card.card-statistic-1 .card-icon.bg-warning, html[data-theme] body .card.card-statistic-2 .card-icon.bg-warning { background-color: rgba(245,158,11,0.2) !important; box-shadow:none !important; } html[data-theme] body .card.card-statistic-1 .card-icon.bg-danger, html[data-theme] body .card.card-statistic-2 .card-icon.bg-danger { background-color: rgba(239,68,68,0.2) !important; box-shadow:none !important; } html[data-theme] body .card.card-statistic-1 .card-icon.bg-primary .fas { color: #60A5FA !important; } html[data-theme] body .card.card-statistic-1 .card-icon.bg-success .fas { color: #86EFAC !important; } html[data-theme] body .card.card-statistic-1 .card-icon.bg-info .fas { color: #7DD3FC !important; } html[data-theme] body .card.card-statistic-1 .card-icon.bg-warning .fas { color: #FCD34D !important; } html[data-theme] body .card.card-statistic-1 .card-icon.bg-danger .fas { color: #FCA5A5 !important; } /* ===== Override Global BG Classes for Card Icons ===== */ html[data-theme] .card-icon.bg-primary { background-color: rgba(28,77,141,0.2) !important; } html[data-theme] .card-icon.bg-success { background-color: rgba(34,197,94,0.2) !important; } html[data-theme] .card-icon.bg-info { background-color: rgba(14,165,233,0.2) !important; } html[data-theme] .card-icon.bg-warning { background-color: rgba(245,158,11,0.2) !important; } html[data-theme] .card-icon.bg-danger { background-color: rgba(239,68,68,0.2) !important; } html[data-theme] .card-icon.bg-secondary { background-color: rgba(100,116,139,0.2) !important; } html[data-theme] .card-icon { box-shadow: none !important; } html[data-theme] .card-icon .fas, html[data-theme] .card-icon .far, html[data-theme] .card-icon .fab { color: inherit !important; } html[data-theme] .card-icon.bg-primary { color: #60A5FA !important; } html[data-theme] .card-icon.bg-success { color: #86EFAC !important; } html[data-theme] .card-icon.bg-info { color: #7DD3FC !important; } html[data-theme] .card-icon.bg-warning { color: #FCD34D !important; } html[data-theme] .card-icon.bg-danger { color: #FCA5A5 !important; } html[data-theme] .card-icon.bg-secondary { color: #CBD5E1 !important; } /* ===== Custom Card Icon Classes ===== */ html[data-theme] .card-icon.mt-icon-info { background-color: rgba(14,165,233,0.2) !important; color: #7DD3FC !important; box-shadow: none !important; } html[data-theme] .card-icon.mt-icon-success { background-color: rgba(34,197,94,0.2) !important; color: #86EFAC !important; box-shadow: none !important; } html[data-theme] .card-icon.mt-icon-warning { background-color: rgba(245,158,11,0.2) !important; color: #FCD34D !important; box-shadow: none !important; } html[data-theme] .card-icon.mt-icon-danger { background-color: rgba(239,68,68,0.2) !important; color: #FCA5A5 !important; box-shadow: none !important; } html[data-theme] .card-icon.mt-icon-primary { background-color: rgba(28,77,141,0.2) !important; color: #60A5FA !important; box-shadow: none !important; } html[data-theme] .card-icon.mt-icon-info .fas, html[data-theme] .card-icon.mt-icon-info .far { color: #7DD3FC !important; } html[data-theme] .card-icon.mt-icon-success .fas, html[data-theme] .card-icon.mt-icon-success .far { color: #86EFAC !important; } html[data-theme] .card-icon.mt-icon-warning .fas, html[data-theme] .card-icon.mt-icon-warning .far { color: #FCD34D !important; } html[data-theme] .card-icon.mt-icon-danger .fas, html[data-theme] .card-icon.mt-icon-danger .far { color: #FCA5A5 !important; } html[data-theme] .card-icon.mt-icon-primary .fas, html[data-theme] .card-icon.mt-icon-primary .far { color: #60A5FA !important; } /* ===== Card Icon Colors High Specificity ===== */ html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-info { background-color: rgba(14,165,233,0.2) !important; box-shadow: none !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-success { background-color: rgba(34,197,94,0.2) !important; box-shadow: none !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-warning { background-color: rgba(245,158,11,0.2) !important; box-shadow: none !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-danger { background-color: rgba(239,68,68,0.2) !important; box-shadow: none !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-primary { background-color: rgba(28,77,141,0.2) !important; box-shadow: none !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-info .fas, html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-info .far { color: #7DD3FC !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-success .fas, html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-success .far { color: #86EFAC !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-warning .fas, html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-warning .far { color: #FCD34D !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-danger .fas, html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-danger .far { color: #FCA5A5 !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-primary .fas, html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-primary .far { color: #60A5FA !important; } /* ===== Card Icon Colors No Theme Selector ===== */ .card.card-statistic-1 .card-icon.mt-icon-info, .card.card-statistic-2 .card-icon.mt-icon-info { background-color: rgba(14,165,233,0.2) !important; box-shadow: none !important; } .card.card-statistic-1 .card-icon.mt-icon-success, .card.card-statistic-2 .card-icon.mt-icon-success { background-color: rgba(34,197,94,0.2) !important; box-shadow: none !important; } .card.card-statistic-1 .card-icon.mt-icon-warning, .card.card-statistic-2 .card-icon.mt-icon-warning { background-color: rgba(245,158,11,0.2) !important; box-shadow: none !important; } .card.card-statistic-1 .card-icon.mt-icon-danger, .card.card-statistic-2 .card-icon.mt-icon-danger { background-color: rgba(239,68,68,0.2) !important; box-shadow: none !important; } .card.card-statistic-1 .card-icon.mt-icon-primary, .card.card-statistic-2 .card-icon.mt-icon-primary { background-color: rgba(28,77,141,0.2) !important; box-shadow: none !important; } .card.card-statistic-1 .card-icon.mt-icon-info .fas { color: #7DD3FC !important; } .card.card-statistic-1 .card-icon.mt-icon-success .fas { color: #86EFAC !important; } .card.card-statistic-1 .card-icon.mt-icon-warning .fas { color: #FCD34D !important; } .card.card-statistic-1 .card-icon.mt-icon-danger .fas { color: #FCA5A5 !important; } .card.card-statistic-1 .card-icon.mt-icon-primary .fas { color: #60A5FA !important; } /* ===== Card Icon Distinct Colors ===== */ .card.card-statistic-1 .card-icon.mt-icon-info { background-color: rgba(14,165,233,0.25) !important; } .card.card-statistic-1 .card-icon.mt-icon-success { background-color: rgba(34,197,94,0.25) !important; } .card.card-statistic-1 .card-icon.mt-icon-warning { background-color: rgba(245,158,11,0.25) !important; } .card.card-statistic-1 .card-icon.mt-icon-danger { background-color: rgba(239,68,68,0.25) !important; } .card.card-statistic-1 .card-icon.mt-icon-primary { background-color: rgba(28,77,141,0.35) !important; } .card.card-statistic-1 .card-icon.mt-icon-info .fas { color: #38BDF8 !important; } .card.card-statistic-1 .card-icon.mt-icon-success .fas { color: #4ADE80 !important; } .card.card-statistic-1 .card-icon.mt-icon-warning .fas { color: #FBBF24 !important; } .card.card-statistic-1 .card-icon.mt-icon-danger .fas { color: #F87171 !important; } .card.card-statistic-1 .card-icon.mt-icon-primary .fas { color: #60A5FA !important; } /* ===== Card Icon Colors - Override General Rule ===== */ html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-info { background: rgba(14,165,233,0.25) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-success { background: rgba(34,197,94,0.25) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-warning { background: rgba(245,158,11,0.25) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-danger { background: rgba(239,68,68,0.25) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-primary { background: rgba(28,77,141,0.3) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-info i { color: #38BDF8 !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-success i { color: #4ADE80 !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-warning i { color: #FBBF24 !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-danger i { color: #F87171 !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-primary i { color: #60A5FA !important; } /* ===== Pending Cards Distinct Color ===== */ html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-primary { background: rgba(139, 92, 246, 0.25) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-primary i { color: #C4B5FD !important; } /* ===== 6 Unique Card Icon Colors ===== */ /* Reseller - Blue */ html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-info { background: rgba(14,165,233,0.25) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-info i { color: #38BDF8 !important; } /* Users - Green */ html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-success { background: rgba(34,197,94,0.25) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-success i { color: #4ADE80 !important; } /* Online - Amber */ html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-warning { background: rgba(245,158,11,0.25) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-warning i { color: #FBBF24 !important; } /* Servers - Red */ html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-danger { background: rgba(239,68,68,0.25) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-danger i { color: #F87171 !important; } /* Pending Reseller - Purple */ html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-purple { background: rgba(139,92,246,0.25) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-purple i { color: #C4B5FD !important; } /* Pending User - Teal */ html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-teal { background: rgba(20,184,166,0.25) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-teal i { color: #5EEAD4 !important; } /* ===== Stat Card Icons - Light + Border Style ===== */ html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-info { background: rgba(14,165,233,0.15) !important; border: 1px solid rgba(14,165,233,0.35) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-info i { color: #38BDF8 !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-success { background: rgba(34,197,94,0.15) !important; border: 1px solid rgba(34,197,94,0.35) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-success i { color: #4ADE80 !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-warning { background: rgba(245,158,11,0.15) !important; border: 1px solid rgba(245,158,11,0.35) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-warning i { color: #FBBF24 !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-danger { background: rgba(239,68,68,0.15) !important; border: 1px solid rgba(239,68,68,0.35) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-danger i { color: #F87171 !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-purple { background: rgba(139,92,246,0.15) !important; border: 1px solid rgba(139,92,246,0.35) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-purple i { color: #C4B5FD !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-teal { background: rgba(20,184,166,0.15) !important; border: 1px solid rgba(20,184,166,0.35) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-teal i { color: #5EEAD4 !important; } /* ===== Stat Card Icons More Vibrant ===== */ html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-info { background: rgba(14,165,233,0.18) !important; border: 1px solid rgba(14,165,233,0.4) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-info i { color: #7DD3FC !important; font-size: 24px !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-success { background: rgba(34,197,94,0.18) !important; border: 1px solid rgba(34,197,94,0.4) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-success i { color: #86EFAC !important; font-size: 24px !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-warning { background: rgba(245,158,11,0.18) !important; border: 1px solid rgba(245,158,11,0.4) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-warning i { color: #FDE68A !important; font-size: 24px !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-danger { background: rgba(239,68,68,0.18) !important; border: 1px solid rgba(239,68,68,0.4) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-danger i { color: #FCA5A5 !important; font-size: 24px !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-purple { background: rgba(139,92,246,0.18) !important; border: 1px solid rgba(139,92,246,0.4) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-purple i { color: #DDD6FE !important; font-size: 24px !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-teal { background: rgba(20,184,166,0.18) !important; border: 1px solid rgba(20,184,166,0.4) !important; } html[data-theme] .card.card-statistic-1 .card-icon.mt-icon-teal i { color: #99F6E4 !important; font-size: 24px !important; } /* ===== Notification Icons Glass Style ===== */ html[data-theme] .dropdown-item-icon { border-radius: 10px !important; width: 42px !important; height: 42px !important; min-width: 42px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; } html[data-theme] .dropdown-item-icon.bg-primary { background: rgba(28,77,141,0.15) !important; border: 1px solid rgba(28,77,141,0.4) !important; } html[data-theme] .dropdown-item-icon.bg-primary i, html[data-theme] .dropdown-item-icon.bg-primary .fas { color: #7DD3FC !important; } html[data-theme] .dropdown-item-icon.bg-warning { background: rgba(245,158,11,0.15) !important; border: 1px solid rgba(245,158,11,0.4) !important; } html[data-theme] .dropdown-item-icon.bg-warning i, html[data-theme] .dropdown-item-icon.bg-warning .fas { color: #FDE68A !important; } html[data-theme] .dropdown-item-icon.bg-danger { background: rgba(239,68,68,0.15) !important; border: 1px solid rgba(239,68,68,0.4) !important; } html[data-theme] .dropdown-item-icon.bg-danger i, html[data-theme] .dropdown-item-icon.bg-danger .fas { color: #FCA5A5 !important; } html[data-theme] .dropdown-item-icon.bg-success { background: rgba(34,197,94,0.15) !important; border: 1px solid rgba(34,197,94,0.4) !important; } html[data-theme] .dropdown-item-icon.bg-success i, html[data-theme] .dropdown-item-icon.bg-success .fas { color: #86EFAC !important; } html[data-theme] .dropdown-item-icon.bg-info { background: rgba(14,165,233,0.15) !important; border: 1px solid rgba(14,165,233,0.4) !important; } html[data-theme] .dropdown-item-icon.bg-info i, html[data-theme] .dropdown-item-icon.bg-info .fas { color: #7DD3FC !important; } html[data-theme] .dropdown-item-icon.text-white { color: inherit !important; } html[data-theme] .dropdown-item-icon i { color: inherit !important; } /* ===== Notification Dropdown Icon Final Fix ===== */ html[data-theme] .dropdown-list .dropdown-item-icon, html[data-theme] .notice-dropdown .dropdown-item-icon { border-radius: 10px !important; width: 42px !important; height: 42px !important; min-width: 42px !important; box-shadow: none !important; } html[data-theme] .dropdown-item-icon.bg-primary, html[data-theme] .dropdown-list .dropdown-item-icon.bg-primary { background: rgba(28,77,141,0.15) !important; border: 1px solid rgba(28,77,141,0.4) !important; } html[data-theme] .dropdown-item-icon.bg-warning, html[data-theme] .dropdown-list .dropdown-item-icon.bg-warning { background: rgba(245,158,11,0.15) !important; border: 1px solid rgba(245,158,11,0.4) !important; } html[data-theme] .dropdown-item-icon.bg-danger, html[data-theme] .dropdown-list .dropdown-item-icon.bg-danger { background: rgba(239,68,68,0.15) !important; border: 1px solid rgba(239,68,68,0.4) !important; } html[data-theme] .dropdown-item-icon * { color: inherit !important; } html[data-theme] .dropdown-item-icon.bg-primary * { color: #7DD3FC !important; } html[data-theme] .dropdown-item-icon.bg-warning * { color: #FDE68A !important; } html[data-theme] .dropdown-item-icon.bg-danger * { color: #FCA5A5 !important; } html[data-theme] .dropdown-item-icon.bg-success * { color: #86EFAC !important; } html[data-theme] .dropdown-item-icon.bg-info * { color: #7DD3FC !important; } /* ===== Profile Widget Redesign ===== */ html[data-theme] .card.profile-widget { border-top: 2px solid #1C4D8D !important; } html[data-theme] .profile-widget-header { display: flex !important; align-items: center !important; gap: 16px !important; padding: 16px !important; } html[data-theme] #lic-status-icon { width: 64px !important; height: 64px !important; border-radius: 12px !important; flex-shrink: 0 !important; border: 1.5px solid rgba(46,107,184,0.3) !important; } html[data-theme] .profile-widget-items { display: flex !important; flex: 1 !important; margin-top: 0 !important; gap: 0 !important; } html[data-theme] .profile-widget-item { flex: 1 !important; text-align: center !important; padding: 8px !important; border-right: 0.5px solid rgba(46,107,184,0.15) !important; } html[data-theme] .profile-widget-item:last-child { border-right: none !important; } html[data-theme] .profile-widget-item-label { font-size: 9px !important; letter-spacing: 1.5px !important; font-weight: 500 !important; margin-bottom: 4px !important; color: #4A6FA5 !important; } html[data-theme] .profile-widget-item-label[style*="6777ef"], html[data-theme] .profile-widget-item-label[style*="54ca68"], html[data-theme] .profile-widget-item-label[style*="fc544b"] { color: #4A6FA5 !important; } html[data-theme] .profile-widget-item-value { font-size: 14px !important; font-weight: 600 !important; color: var(--mt-text-primary) !important; } html[data-theme] .stats-expired-date { color: #4A6FA5 !important; font-size: 13px !important; } /* ===== Profile Widget Avatar Fix ===== */ html[data-theme] #lic-status-icon { width: 56px !important; height: 56px !important; min-width: 56px !important; border-radius: 12px !important; overflow: hidden !important; margin: 0 !important; } html[data-theme] #lic-status-icon img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 12px !important; } html[data-theme] .profile-widget-header { padding: 12px 16px !important; margin-top: 0 !important; overflow: visible !important; } /* ===== Profile Widget Spacing Fix ===== */ html[data-theme] .card.profile-widget .card-body, html[data-theme] .card.profile-widget > div:not(.card-header) { padding: 0 !important; } html[data-theme] .profile-widget-header { padding: 16px !important; margin-top: 0 !important; } /* ===== Profile Widget Gap Fix ===== */ html[data-theme] .profile-widget { margin-top: 0 !important; } html[data-theme] .profile-widget .profile-widget-picture { float: none !important; margin: 0 !important; position: relative !important; width: 56px !important; z-index: 1 !important; } html[data-theme] .profile-widget .profile-widget-header { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 0 !important; padding: 16px !important; width: 100% !important; } html[data-theme] .profile-widget .profile-widget-items { flex: 1 !important; margin-top: 0 !important; } html[data-theme] .profile-widget .profile-widget-items::after { display: none !important; } /* ===== Profile Card Header Gap Fix ===== */ html[data-theme] .card.profile-widget > .card-header { padding-bottom: 8px !important; margin-bottom: 0 !important; } html[data-theme] .card.profile-widget > .card-body { padding-top: 0 !important; padding: 0 !important; } /* ===== Profile Widget Inner Card Fix ===== */ html[data-theme] .card-body .card.profile-widget { border-top: none !important; border: none !important; background: transparent !important; box-shadow: none !important; margin-top: 0 !important; border-radius: 0 !important; } html[data-theme] .card-body .profile-widget-header { padding: 0 !important; } /* ===== Profile avatar — single box, state-driven ===== */ .mt-profile-avatar { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; flex-shrink: 0; box-sizing: border-box; } .mt-profile-avatar i { font-size: 28px; line-height: 1; } .mt-avatar-label { font-size: 7px; font-weight: 600; letter-spacing: 1px; margin-top: 3px; } .mt-profile-avatar.is-loading { background: rgba(28, 77, 141, 0.12); border: 1.5px solid rgba(28, 77, 141, 0.35); } .mt-profile-avatar.is-loading i { font-size: 24px; color: var(--mt-accent); } .mt-profile-avatar.is-ok { background: rgba(34, 197, 94, 0.15); border: 1.5px solid rgba(34, 197, 94, 0.45); } .mt-profile-avatar.is-ok i { color: #4ADE80; } .mt-profile-avatar.is-unknown { background: rgba(100, 116, 139, 0.15); border: 1.5px solid rgba(100, 116, 139, 0.4); } .mt-profile-avatar.is-unknown i, .mt-profile-avatar.is-unknown .mt-avatar-label { color: #94A3B8; } /* ===== Profile avatar — position nudge + border priority ===== */ html[data-theme] .profile-widget .profile-widget-header { padding-left: 32px !important; } html[data-theme] #lic-status-icon.mt-profile-avatar.is-ok { border: 1.5px solid rgba(34, 197, 94, 0.45) !important; } html[data-theme] #lic-status-icon.mt-profile-avatar.is-loading { border: 1.5px solid rgba(28, 77, 141, 0.35) !important; } html[data-theme] #lic-status-icon.mt-profile-avatar.is-unknown { border: 1.5px solid rgba(100, 116, 139, 0.4) !important; } /* ===== Profile avatar — recolor is-ok to blue ===== */ html[data-theme] #lic-status-icon.mt-profile-avatar.is-ok { background: rgba(46, 107, 184, 0.15) !important; border: 1.5px solid rgba(46, 107, 184, 0.45) !important; } html[data-theme] #lic-status-icon.mt-profile-avatar.is-ok i { color: #7CC4FF !important; } /* ===== Profile card — Option A centered row ===== */ html[data-theme] .profile-widget .profile-widget-header { justify-content: center !important; } html[data-theme] .profile-widget .profile-widget-items { flex: unset !important; } /* ===== Profile card — remove row bottom border + column dividers ===== */ html[data-theme] .profile-widget .profile-widget-header { border-bottom: none !important; } html[data-theme] .profile-widget .profile-widget-item { border-left: none !important; border-right: none !important; } /* ===== Profile card — remove header divider + vertical center ===== */ html[data-theme] .card.profile-widget .card-header { border-bottom: none !important; } html[data-theme] .card.profile-widget .card-body { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 0 20px 0 !important; } /* ===== Profile card — reduce bottom gap ===== */ html[data-theme] .card.profile-widget .card-body { padding: 0 0 8px 0 !important; } /* ===== Profile card — reduce bottom gap v2 ===== */ html[data-theme] .card.profile-widget .card-body { padding: 0 !important; } /* ===== Profile card — true vertical center ===== */ html[data-theme] .card.profile-widget { display: flex !important; flex-direction: column !important; } html[data-theme] .card.profile-widget .card-header { padding-top: 12px !important; padding-bottom: 12px !important; flex-shrink: 0 !important; } html[data-theme] .card.profile-widget .card-body { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } /* ===== Profile card — kill card-body padding ===== */ html[data-theme] .card.profile-widget > .card-body { padding: 0 !important; margin: 0 !important; } html[data-theme] .card.profile-widget > .card-body > .card.profile-widget { margin: 0 !important; } /* ===== Profile card — override card-body padding with matched specificity ===== */ html[data-theme] .card .card-body.profile-widget, html[data-theme] .card.profile-widget > .card-body, html[data-theme] .card .card-body:has(.profile-widget-header) { padding: 0 !important; margin: 0 !important; } /* ===== Profile card — balanced vertical padding ===== */ html[data-theme] .card .card-body:has(.profile-widget-header) { padding-top: 0px !important; padding-bottom: 45px !important; } /* ===== Statistics rings — center total text + responsive size ===== */ #stat-rings text { dominant-baseline: middle !important; } #stat-total-num { font-size: 18px !important; } /* ===== Add User — glass accent buttons ===== */ html[data-theme] .btn-adduser-single, html[data-theme] .gen-user { background: rgba(28, 77, 141, 0.2) !important; border: 1.5px solid rgba(46, 107, 184, 0.45) !important; color: #7CC4FF !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 500 !important; padding: 6px 18px !important; box-shadow: none !important; } html[data-theme] .btn-adduser-single:hover, html[data-theme] .gen-user:hover { background: rgba(46, 107, 184, 0.35) !important; border-color: rgba(46, 107, 184, 0.7) !important; color: #BDE0FF !important; } /* ===== Add User — outline glass buttons ===== */ html[data-theme] .btn-adduser-single, html[data-theme] .gen-user { background: transparent !important; border: 1.5px solid rgba(46, 107, 184, 0.6) !important; color: #7CC4FF !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 500 !important; padding: 6px 18px !important; box-shadow: none !important; } html[data-theme] .btn-adduser-single:hover, html[data-theme] .gen-user:hover { background: rgba(46, 107, 184, 0.25) !important; border-color: rgba(46, 107, 184, 0.8) !important; color: #BDE0FF !important; } /* ===== Add User — glass transparent + solid hover ===== */ html[data-theme] .btn-adduser-single, html[data-theme] .gen-user { background: rgba(46, 107, 184, 0.08) !important; border: 1.5px solid rgba(46, 107, 184, 0.45) !important; color: #7CC4FF !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 500 !important; padding: 6px 18px !important; box-shadow: none !important; transition: background 0.2s, border-color 0.2s, color 0.2s !important; } html[data-theme] .btn-adduser-single:hover, html[data-theme] .gen-user:hover { background: #1C4D8D !important; border-color: #2E6BB8 !important; color: #ffffff !important; } /* ===== Global buttons — glass transparent + solid hover ===== */ html[data-theme] .btn-primary, html[data-theme] .btn-info, html[data-theme] .btn-success, html[data-theme] .btn-warning, html[data-theme] .btn-danger, html[data-theme] .btn-secondary { background: rgba(46, 107, 184, 0.08) !important; border: 1.5px solid rgba(46, 107, 184, 0.45) !important; color: #7CC4FF !important; border-radius: 10px !important; font-weight: 500 !important; box-shadow: none !important; transition: background 0.2s, border-color 0.2s, color 0.2s !important; } html[data-theme] .btn-primary:hover, html[data-theme] .btn-info:hover, html[data-theme] .btn-success:hover, html[data-theme] .btn-warning:hover, html[data-theme] .btn-danger:hover, html[data-theme] .btn-secondary:hover { background: #1C4D8D !important; border-color: #2E6BB8 !important; color: #ffffff !important; } /* ===== Global buttons — Option C dark fill + bright hover ===== */ html[data-theme] .btn-primary, html[data-theme] .btn-info { background: #0C2A4A !important; border: 1px solid rgba(46,107,184,0.4) !important; color: #7CC4FF !important; border-radius: 10px !important; font-weight: 500 !important; box-shadow: none !important; transition: background 0.2s, border-color 0.2s, color 0.2s !important; } html[data-theme] .btn-primary:hover, html[data-theme] .btn-info:hover { background: #2E6BB8 !important; border-color: #4A9EFF !important; color: #ffffff !important; } html[data-theme] .btn-success { background: #052010 !important; border: 1px solid rgba(34,197,94,0.4) !important; color: #86EFAC !important; border-radius: 10px !important; font-weight: 500 !important; box-shadow: none !important; transition: background 0.2s, border-color 0.2s, color 0.2s !important; } html[data-theme] .btn-success:hover { background: #16A34A !important; border-color: #22C55E !important; color: #ffffff !important; } html[data-theme] .btn-danger { background: #2D0A0A !important; border: 1px solid rgba(239,68,68,0.4) !important; color: #FCA5A5 !important; border-radius: 10px !important; font-weight: 500 !important; box-shadow: none !important; transition: background 0.2s, border-color 0.2s, color 0.2s !important; } html[data-theme] .btn-danger:hover { background: #DC2626 !important; border-color: #EF4444 !important; color: #ffffff !important; } html[data-theme] .btn-warning { background: #2A1A00 !important; border: 1px solid rgba(245,158,11,0.4) !important; color: #FCD34D !important; border-radius: 10px !important; font-weight: 500 !important; box-shadow: none !important; transition: background 0.2s, border-color 0.2s, color 0.2s !important; } html[data-theme] .btn-warning:hover { background: #D97706 !important; border-color: #F59E0B !important; color: #ffffff !important; } html[data-theme] .btn-secondary { background: #111827 !important; border: 1px solid rgba(100,116,139,0.4) !important; color: #94A3B8 !important; border-radius: 10px !important; font-weight: 500 !important; box-shadow: none !important; transition: background 0.2s, border-color 0.2s, color 0.2s !important; } html[data-theme] .btn-secondary:hover { background: #374151 !important; border-color: #6B7280 !important; color: #ffffff !important; } /* ===== Global buttons — Option C FINAL (specificity fix) ===== */ html[data-theme] .btn.btn-primary, html[data-theme] .btn.btn-info { background: #0C2A4A !important; border: 1px solid rgba(46,107,184,0.4) !important; color: #7CC4FF !important; border-radius: 10px !important; font-weight: 500 !important; box-shadow: none !important; transition: background 0.2s, border-color 0.2s, color 0.2s !important; } html[data-theme] .btn.btn-primary:hover, html[data-theme] .btn.btn-info:hover { background: #2E6BB8 !important; border-color: #4A9EFF !important; color: #ffffff !important; } html[data-theme] .btn.btn-success { background: #052010 !important; border: 1px solid rgba(34,197,94,0.4) !important; color: #86EFAC !important; border-radius: 10px !important; font-weight: 500 !important; box-shadow: none !important; transition: background 0.2s, border-color 0.2s, color 0.2s !important; } html[data-theme] .btn.btn-success:hover { background: #16A34A !important; border-color: #22C55E !important; color: #ffffff !important; } html[data-theme] .btn.btn-danger { background: #2D0A0A !important; border: 1px solid rgba(239,68,68,0.4) !important; color: #FCA5A5 !important; border-radius: 10px !important; font-weight: 500 !important; box-shadow: none !important; transition: background 0.2s, border-color 0.2s, color 0.2s !important; } html[data-theme] .btn.btn-danger:hover { background: #DC2626 !important; border-color: #EF4444 !important; color: #ffffff !important; } html[data-theme] .btn.btn-warning { background: #2A1A00 !important; border: 1px solid rgba(245,158,11,0.4) !important; color: #FCD34D !important; border-radius: 10px !important; font-weight: 500 !important; box-shadow: none !important; transition: background 0.2s, border-color 0.2s, color 0.2s !important; } html[data-theme] .btn.btn-warning:hover { background: #D97706 !important; border-color: #F59E0B !important; color: #ffffff !important; } html[data-theme] .btn.btn-secondary { background: #111827 !important; border: 1px solid rgba(100,116,139,0.4) !important; color: #94A3B8 !important; border-radius: 10px !important; font-weight: 500 !important; box-shadow: none !important; transition: background 0.2s, border-color 0.2s, color 0.2s !important; } html[data-theme] .btn.btn-secondary:hover { background: #374151 !important; border-color: #6B7280 !important; color: #ffffff !important; } /* ===== Profile avatar — round shape ===== */ html[data-theme] #lic-status-icon.mt-profile-avatar { border-radius: 50% !important; } /* ===== Statistics — hide This Month box, fix 3-dot button ===== */ html[data-theme] .stat-period-dropdown { display: none !important; } html[data-theme] .btn.btn-light { background: rgba(28,77,141,0.2) !important; border: 1px solid rgba(46,107,184,0.4) !important; color: #7CC4FF !important; box-shadow: none !important; } html[data-theme] .btn.btn-light:hover { background: #1C4D8D !important; border-color: #2E6BB8 !important; color: #ffffff !important; } html[data-theme] .btn.btn-light i { color: #7CC4FF !important; } /* ===== Stat cards — center value and title ===== */ html[data-theme] .card-statistic-1 .card-header, html[data-theme] .card-statistic-2 .card-header { text-align: center !important; justify-content: center !important; } html[data-theme] .card-statistic-1 .card-header h4, html[data-theme] .card-statistic-2 .card-header h4 { text-align: center !important; } html[data-theme] .card-statistic-1 .card-body, html[data-theme] .card-statistic-2 .card-body { text-align: center !important; } html[data-theme] .card-statistic-1 .card-icon, html[data-theme] .card-statistic-2 .card-icon { margin: 0 auto !important; } /* ===== Stat cards — Option B: icon left, text centered ===== */ html[data-theme] .card-statistic-1, html[data-theme] .card-statistic-2 { display: flex !important; align-items: center !important; } html[data-theme] .card-statistic-1 .card-icon, html[data-theme] .card-statistic-2 .card-icon { margin: 0 !important; float: none !important; flex-shrink: 0 !important; } html[data-theme] .card-statistic-1 .card-wrap, html[data-theme] .card-statistic-2 .card-wrap { flex: 1 !important; text-align: center !important; } html[data-theme] .card-statistic-1 .card-wrap .card-header, html[data-theme] .card-statistic-2 .card-wrap .card-header, html[data-theme] .card-statistic-1 .card-wrap .card-body, html[data-theme] .card-statistic-2 .card-wrap .card-body { text-align: center !important; justify-content: center !important; } /* ===== Stat cards — revert to left icon, right text ===== */ html[data-theme] .card-statistic-1, html[data-theme] .card-statistic-2 { display: flex !important; align-items: center !important; flex-direction: row !important; } html[data-theme] .card-statistic-1 .card-icon, html[data-theme] .card-statistic-2 .card-icon { float: none !important; margin: 0 !important; flex-shrink: 0 !important; } html[data-theme] .card-statistic-1 .card-wrap, html[data-theme] .card-statistic-2 .card-wrap { flex: 1 !important; text-align: left !important; padding-left: 16px !important; } html[data-theme] .card-statistic-1 .card-wrap .card-header, html[data-theme] .card-statistic-2 .card-wrap .card-header, html[data-theme] .card-statistic-1 .card-wrap .card-body, html[data-theme] .card-statistic-2 .card-wrap .card-body { text-align: left !important; justify-content: flex-start !important; } /* ===== Stat cards — vertical center align fix ===== */ html[data-theme] .card-statistic-1 .card-wrap, html[data-theme] .card-statistic-2 .card-wrap { display: flex !important; flex-direction: column !important; justify-content: center !important; } html[data-theme] .card-statistic-1 .card-wrap .card-header, html[data-theme] .card-statistic-2 .card-wrap .card-header { padding: 0 !important; margin: 0 !important; } html[data-theme] .card-statistic-1 .card-wrap .card-body, html[data-theme] .card-statistic-2 .card-wrap .card-body { padding: 0 !important; margin: 0 !important; } /* ===== Stat cards — icon left, text block centered ===== */ html[data-theme] .card-statistic-1 .card-wrap, html[data-theme] .card-statistic-2 .card-wrap { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; } html[data-theme] .card-statistic-1 .card-wrap .card-header, html[data-theme] .card-statistic-2 .card-wrap .card-header { padding: 0 !important; margin: 0 0 4px 0 !important; width: 100% !important; text-align: center !important; } html[data-theme] .card-statistic-1 .card-wrap .card-body, html[data-theme] .card-statistic-2 .card-wrap .card-body { padding: 0 !important; margin: 0 !important; width: 100% !important; text-align: center !important; } /* ===== Stat cards — final: icon left, label+value centered right ===== */ html[data-theme] .card-statistic-1, html[data-theme] .card-statistic-2 { display: flex !important; flex-direction: row !important; align-items: center !important; padding: 16px !important; } html[data-theme] .card-statistic-1 .card-icon, html[data-theme] .card-statistic-2 .card-icon { float: none !important; position: relative !important; flex-shrink: 0 !important; margin: 0 !important; } html[data-theme] .card-statistic-1 .card-wrap, html[data-theme] .card-statistic-2 .card-wrap { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 0 !important; margin: 0 !important; } html[data-theme] .card-statistic-1 .card-header, html[data-theme] .card-statistic-2 .card-header { padding: 0 !important; margin: 0 0 2px 0 !important; text-align: center !important; width: 100% !important; } html[data-theme] .card-statistic-1 .card-body, html[data-theme] .card-statistic-2 .card-body { padding: 0 !important; margin: 0 !important; text-align: center !important; width: 100% !important; font-size: 1.5rem !important; font-weight: 600 !important; color: var(--mt-text-primary) !important; } /* ===== Dashboard layout order — FINAL ===== */ @media (min-width: 768px) { html[data-theme] .col-lg-3.col-md-3 { order: 2 !important; } html[data-theme] .col-lg-9.col-md-9 { order: 1 !important; } html[data-theme] #recent-activities-col { order: 2 !important; } html[data-theme] .col-lg-6.col-md-6:not(#recent-activities-col) { order: 1 !important; } } @media (max-width: 767px) { html[data-theme] .col-lg-9.col-md-9 { order: 1 !important; } html[data-theme] .col-lg-3.col-md-3 { order: 2 !important; } html[data-theme] .col-lg-6.col-md-6:not(#recent-activities-col) { order: 3 !important; } html[data-theme] #recent-activities-col { order: 4 !important; } } /* ===== Mobile — stat cards compact fix ===== */ @media (max-width: 576px) { html[data-theme] .card-statistic-1, html[data-theme] .card-statistic-2 { flex-direction: column !important; align-items: center !important; padding: 10px 4px !important; min-height: 100px !important; } html[data-theme] .card-statistic-1 .card-icon, html[data-theme] .card-statistic-2 .card-icon { width: 46px !important; height: 46px !important; margin-bottom: 6px !important; } html[data-theme] .card-statistic-1 .card-icon i, html[data-theme] .card-statistic-2 .card-icon i { font-size: 20px !important; } html[data-theme] .card-statistic-1 .card-wrap .card-header h4, html[data-theme] .card-statistic-2 .card-wrap .card-header h4 { font-size: 8px !important; letter-spacing: 0.5px !important; } html[data-theme] .card-statistic-1 .card-wrap .card-body, html[data-theme] .card-statistic-2 .card-wrap .card-body { font-size: 14px !important; } } /* ===== Mobile — profile avatar center fix ===== */ @media (max-width: 767px) { html[data-theme] .profile-widget .profile-widget-header { align-items: center !important; justify-content: center !important; } html[data-theme] #lic-status-icon.mt-profile-avatar { margin: 0 auto !important; } } /* ===== Mobile — profile avatar center FINAL ===== */ @media (max-width: 767px) { html[data-theme] .profile-widget .profile-widget-header { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 16px !important; } html[data-theme] #lic-status-icon.mt-profile-avatar { margin: 0 auto 12px auto !important; display: flex !important; } html[data-theme] .profile-widget .profile-widget-items { width: 100% !important; justify-content: center !important; margin-top: 0 !important; } } /* ===== Profile card — fix avatar center on all screens ===== */ html[data-theme] .profile-widget-header { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 12px !important; padding: 16px !important; width: 100% !important; } html[data-theme] .profile-widget-items { display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; margin-top: 0 !important; width: 100% !important; } /* ===== Profile widget — full center fix ===== */ html[data-theme] .card.profile-widget { border: none !important; box-shadow: none !important; background: transparent !important; margin: 0 !important; } html[data-theme] .card.profile-widget .profile-widget-header { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 16px !important; border-bottom: none !important; } html[data-theme] .card.profile-widget .profile-widget-items { display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; margin: 0 !important; flex: unset !important; } html[data-theme] .card.profile-widget .profile-widget-items::after { display: none !important; } html[data-theme] .card.profile-widget .profile-widget-item { border-left: none !important; border-right: none !important; text-align: center !important; padding: 0 16px !important; } /* ===== Profile widget — override components.css float/margin ===== */ html[data-theme] .card.profile-widget .profile-widget-picture, html[data-theme] .profile-widget .profile-widget-picture { float: none !important; margin: 0 auto 12px auto !important; position: relative !important; left: auto !important; transform: none !important; width: 64px !important; display: block !important; } html[data-theme] .card.profile-widget .profile-widget-header, html[data-theme] .profile-widget .profile-widget-header { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin-bottom: 0 !important; border-bottom: none !important; padding: 16px !important; } html[data-theme] .card.profile-widget .profile-widget-items, html[data-theme] .profile-widget .profile-widget-items { display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; margin: 0 !important; flex: unset !important; width: 100% !important; } /* ===== Profile widget — remove divider line ===== */ html[data-theme] .card.profile-widget .profile-widget-header, html[data-theme] .profile-widget .profile-widget-header { border-bottom: none !important; } html[data-theme] .card.profile-widget, html[data-theme] .profile-widget { border: none !important; box-shadow: none !important; } /* ===== Profile widget — remove item borders and header line ===== */ html[data-theme] .profile-widget .profile-widget-items .profile-widget-item { border-right: none !important; border-left: none !important; } html[data-theme] .profile-widget .profile-widget-header { background-color: transparent !important; border-bottom: none !important; } /* ===== Profile card — remove header bottom border ===== */ html[data-theme] .card.profile-widget .card-header, html[data-theme] .card .card-header:has(.section-title) { border-bottom: none !important; border-bottom-color: transparent !important; } /* ===== Profile widget — force column layout on all screens ===== */ html[data-theme] .card.profile-widget .profile-widget-header, html[data-theme] .profile-widget .profile-widget-header { flex-direction: column !important; align-items: center !important; justify-content: center !important; } html[data-theme] .card.profile-widget .profile-widget-picture, html[data-theme] .profile-widget .profile-widget-picture { float: none !important; position: static !important; margin: 0 auto 16px auto !important; left: auto !important; transform: none !important; display: block !important; } html[data-theme] .card.profile-widget .profile-widget-items, html[data-theme] .profile-widget .profile-widget-items { justify-content: center !important; width: 100% !important; margin: 0 !important; } /* ===== Remove card header bottom border globally ===== */ html[data-theme] .card .card-header { border-bottom: none !important; border-bottom-color: transparent !important; } /* ===== Profile avatar — center icon inside circle ===== */ html[data-theme] #lic-status-icon.mt-profile-avatar { display: flex !important; align-items: center !important; justify-content: center !important; } html[data-theme] #lic-status-icon.mt-profile-avatar i { display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } /* ===== Profile widget — remove divider lines ===== */ html[data-theme] .profile-widget .profile-widget-items::after { display: none !important; height: 0 !important; } html[data-theme] .profile-widget .profile-widget-items .profile-widget-item { border-right: none !important; border-left: none !important; border-top: none !important; } html[data-theme] .profile-widget .profile-widget-header { border-bottom: none !important; } /* ===== Profile widget — reduce gap between avatar and text ===== */ html[data-theme] .profile-widget .profile-widget-items { margin-top: 0 !important; padding-top: 0 !important; } html[data-theme] .profile-widget .profile-widget-header { gap: 4px !important; padding-bottom: 8px !important; } /* ===== Profile widget — reduce gap between columns ===== */ html[data-theme] .profile-widget .profile-widget-items .profile-widget-item { padding: 4px 8px !important; } /* ===== Profile widget — tighter column gap ===== */ html[data-theme] .profile-widget .profile-widget-items .profile-widget-item { padding: 2px 4px !important; } html[data-theme] .profile-widget .profile-widget-items { gap: 0 !important; } /* ===== Profile widget — vertical divider between columns ===== */ html[data-theme] .profile-widget .profile-widget-items .profile-widget-item:not(:last-child) { border-right: 1px solid rgba(46, 107, 184, 0.3) !important; } /* ===== Mobile — remove right gap ===== */ @media (max-width: 768px) { html body .main-content { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } html body .section-body { padding-left: 8px !important; padding-right: 8px !important; } html body { overflow-x: hidden !important; } } /* ===== Statistics legend cards — mobile text fix ===== */ @media (max-width: 768px) { html[data-theme] .stat_content > div { flex-direction: column !important; } html[data-theme] .stat_content > div > div:first-child { width: 100% !important; display: flex !important; justify-content: center !important; margin-bottom: 12px !important; } html[data-theme] .stat_content > div > div:last-child { width: 100% !important; flex: unset !important; } html[data-theme] .stat_content .stat-trial-pct, html[data-theme] .stat_content .stat-normal-pct, html[data-theme] .stat_content .stat-bulk-pct, html[data-theme] .stat_content .stat-trial-cnt, html[data-theme] .stat_content .stat-normal-cnt, html[data-theme] .stat_content .stat-bulk-cnt { font-size: 12px !important; } } /* ===== Floating action buttons — move down ===== */ .floating-button-wrapper, #floating-button, .floating-btn { bottom: 20px !important; } /* ===== Floating buttons — move lower ===== */ html[data-theme] .faz-lang { bottom: 70px !important; } html[data-theme] .faz { bottom: 15px !important; } /* ===== Floating buttons — move right ===== */ html[data-theme] .faz-lang, html[data-theme] .faz { right: 10px !important; } /* ===== Stat cards — desktop row, mobile column ===== */ html[data-theme] .card.card-statistic-1 .card-wrap .card-header, html[data-theme] .card.card-statistic-2 .card-wrap .card-header { min-height: unset !important; border-bottom: none !important; padding: 0 !important; margin: 0 0 2px 0 !important; } @media (max-width: 576px) { html[data-theme] .card-statistic-1, html[data-theme] .card-statistic-2 { flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 10px 6px !important; } html[data-theme] .card-statistic-1 .card-icon, html[data-theme] .card-statistic-2 .card-icon { width: 50px !important; height: 50px !important; margin: 0 0 6px 0 !important; } html[data-theme] .card-statistic-1 .card-icon i, html[data-theme] .card-statistic-2 .card-icon i { font-size: 20px !important; } html[data-theme] .card-statistic-1 .card-wrap, html[data-theme] .card-statistic-2 .card-wrap { display: flex !important; flex-direction: column !important; align-items: center !important; width: 100% !important; flex: unset !important; } html[data-theme] .card-statistic-1 .card-wrap .card-header, html[data-theme] .card-statistic-2 .card-wrap .card-header { display: block !important; min-height: unset !important; padding: 0 !important; text-align: center !important; } html[data-theme] .card-statistic-1 .card-wrap .card-header h4, html[data-theme] .card-statistic-2 .card-wrap .card-header h4 { font-size: 8px !important; letter-spacing: 0.5px !important; } html[data-theme] .card-statistic-1 .card-wrap .card-body, html[data-theme] .card-statistic-2 .card-wrap .card-body { display: block !important; font-size: 14px !important; text-align: center !important; padding: 0 !important; } } /* ===== Stat cards — center text desktop + equal height mobile ===== */ html[data-theme] .card-statistic-1 .card-wrap, html[data-theme] .card-statistic-2 .card-wrap { text-align: center !important; align-items: center !important; } html[data-theme] .col-4 { display: flex !important; flex-direction: column !important; } html[data-theme] .col-4 .card-statistic-1, html[data-theme] .col-4 .card-statistic-2 { flex: 1 !important; } /* ===== Stat cards — center text after style.css fix ===== */ html[data-theme] .card-statistic-1 .card-wrap, html[data-theme] .card-statistic-2 .card-wrap { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; flex: 1 !important; } /* ===== Stat cards — equal height + vertically centered content ===== */ html[data-theme] .col-4 { display: flex !important; } html[data-theme] .card-statistic-1, html[data-theme] .card-statistic-2 { flex: 1 !important; min-height: 100px !important; align-items: center !important; } html[data-theme] .card-statistic-1 .card-wrap, html[data-theme] .card-statistic-2 .card-wrap { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; flex: 1 !important; height: 100% !important; } html[data-theme] .card-statistic-1 .card-wrap .card-header, html[data-theme] .card-statistic-2 .card-wrap .card-header { padding: 0 !important; margin: 0 0 2px 0 !important; min-height: unset !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; } html[data-theme] .card-statistic-1 .card-wrap .card-body, html[data-theme] .card-statistic-2 .card-wrap .card-body { padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* ===== Stat cards — title center + equal mobile height ===== */ html[data-theme] .card-statistic-1 .card-wrap .card-header h4, html[data-theme] .card-statistic-2 .card-wrap .card-header h4 { text-align: center !important; width: 100% !important; margin: 0 !important; } @media (max-width: 576px) { html[data-theme] .col-4 { display: flex !important; flex-direction: column !important; } html[data-theme] .col-4 .card-statistic-1, html[data-theme] .col-4 .card-statistic-2 { flex: 1 !important; min-height: 130px !important; } } /* ===== Stat cards — group title+value center as unit ===== */ html[data-theme] .card-statistic-1 .card-wrap, html[data-theme] .card-statistic-2 .card-wrap { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 4px !important; } html[data-theme] .card-statistic-1 .card-wrap .card-header, html[data-theme] .card-statistic-2 .card-wrap .card-header { padding: 0 !important; margin: 0 !important; min-height: unset !important; line-height: 1 !important; width: auto !important; display: block !important; text-align: center !important; } html[data-theme] .card-statistic-1 .card-wrap .card-header h4, html[data-theme] .card-statistic-2 .card-wrap .card-header h4 { margin: 0 !important; text-align: center !important; line-height: 1 !important; } html[data-theme] .card-statistic-1 .card-wrap .card-body, html[data-theme] .card-statistic-2 .card-wrap .card-body { padding: 0 !important; margin: 0 !important; text-align: center !important; line-height: 1 !important; } /* ===== Stat cards — DEFINITIVE title+value center ===== */ html[data-theme] .card-statistic-1 .card-wrap, html[data-theme] .card-statistic-2 .card-wrap { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; flex: 1 !important; padding: 0 8px !important; gap: 0 !important; } html[data-theme] .card-statistic-1 .card-wrap .card-header, html[data-theme] .card-statistic-2 .card-wrap .card-header { min-height: unset !important; height: auto !important; padding: 0 !important; margin: 0 0 4px 0 !important; width: 100% !important; text-align: center !important; display: block !important; border: none !important; line-height: 1.2 !important; } html[data-theme] .card-statistic-1 .card-wrap .card-header h4, html[data-theme] .card-statistic-2 .card-wrap .card-header h4 { margin: 0 !important; padding: 0 !important; text-align: center !important; line-height: 1.2 !important; } html[data-theme] .card-statistic-1 .card-wrap .card-body, html[data-theme] .card-statistic-2 .card-wrap .card-body { padding: 0 !important; margin: 0 !important; text-align: center !important; width: 100% !important; line-height: 1.2 !important; } /* ===== Stat cards — fixed title height for consistency ===== */ html[data-theme] .card-statistic-1 .card-wrap .card-header, html[data-theme] .card-statistic-2 .card-wrap .card-header { min-height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; } html[data-theme] .card-statistic-1 .card-wrap .card-header h4, html[data-theme] .card-statistic-2 .card-wrap .card-header h4 { text-align: center !important; line-height: 1.2 !important; } /* ===== Stat cards — fix anchor wrapper stretching ===== */ html[data-theme] .col-4 > a { display: flex !important; flex-direction: column !important; height: 100% !important; width: 100% !important; } html[data-theme] .col-4 > a > .card-statistic-1, html[data-theme] .col-4 > a > .card-statistic-2 { flex: 1 !important; height: 100% !important; } /* ===== Modal — restore close button ===== */ html[data-theme] .normal-modalize .modal-header .close { display: block !important; color: var(--mt-text-primary) !important; opacity: 0.7 !important; font-size: 24px !important; cursor: pointer !important; } html[data-theme] .normal-modalize .modal-header .close:hover { opacity: 1 !important; } /* ===== Modal — fix z-index overlap ===== */ html[data-theme] .modal { z-index: 1050 !important; } html[data-theme] .modal-backdrop { z-index: 1040 !important; } html[data-theme] .modal-dialog { z-index: 1051 !important; } /* ===== Modal — X button only, no footer Close button ===== */ html[data-theme] .normal-modalize .modal-footer { display: none !important; } html[data-theme] .normal-modalize .modal-header .close { display: block !important; color: var(--mt-text-primary) !important; opacity: 0.7 !important; font-size: 24px !important; cursor: pointer !important; } /* ===== Profile Settings Page ===== */ /* Hide email and 2FA fields */ html[data-theme] .profileupdate .data-email, html[data-theme] .profileupdate .data-email ~ *, html[data-theme] .profileupdate #statemail, html[data-theme] .profileupdate .verified-img, html[data-theme] .profileupdate .input-group, html[data-theme] .profileupdate [for="2fa"], html[data-theme] .profileupdate .data-2fa, html[data-theme] .profileupdate #2fa, html[data-theme] .profileupdate .custom-control, html[data-theme] .profileupdate .text-muted.form-text { display: none !important; } html[data-theme] .profileupdate .form-group:has(.data-email), html[data-theme] .profileupdate .form-group:has(.data-2fa) { display: none !important; } /* Profile widget redesign */ html[data-theme] .profile-widget .profile-widget-header { flex-direction: column !important; align-items: center !important; padding: 20px !important; gap: 10px !important; } html[data-theme] .profilepic.profile-widget-picture { width: 90px !important; height: 90px !important; border-radius: 50% !important; border: 2px solid rgba(46,107,184,0.4) !important; background: rgba(46,107,184,0.15) !important; overflow: hidden !important; position: relative !important; margin: 0 auto !important; float: none !important; } html[data-theme] .profile-widget-name { font-size: 15px !important; font-weight: 500 !important; color: var(--mt-text-primary) !important; text-align: center !important; } html[data-theme] .profile-widget-description { padding: 0 20px 16px !important; text-align: center !important; } html[data-theme] .profile-bio-2 { font-size: 12px !important; color: var(--mt-text-muted) !important; line-height: 1.5 !important; } /* Stats grid */ html[data-theme] .profile-widget .profile-widget-items { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 8px !important; padding: 0 16px 16px !important; flex-direction: unset !important; justify-content: unset !important; } html[data-theme] .profile-widget .profile-widget-items .profile-widget-item { background: rgba(28,77,141,0.12) !important; border: 1px solid rgba(46,107,184,0.2) !important; border-radius: 8px !important; padding: 10px 6px !important; text-align: center !important; border-right: none !important; } html[data-theme] .profile-widget .profile-widget-items .profile-widget-item .profile-widget-item-label { font-size: 9px !important; color: #4B6CB7 !important; letter-spacing: 1px !important; text-transform: uppercase !important; margin-top: 4px !important; } html[data-theme] .profile-widget .profile-widget-items .profile-widget-item .profile-widget-item-value { font-size: 18px !important; font-weight: 600 !important; color: #7CC4FF !important; } /* Form inputs */ html[data-theme] .profileupdate .form-control { background: rgba(28,77,141,0.08) !important; border: 1px solid rgba(46,107,184,0.25) !important; border-radius: 8px !important; color: var(--mt-text-primary) !important; padding: 10px 14px !important; } html[data-theme] .profileupdate .form-control:focus { border-color: rgba(46,107,184,0.6) !important; box-shadow: none !important; } html[data-theme] .profileupdate label { font-size: 11px !important; color: #4B6CB7 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; font-weight: 600 !important; } /* Card footer buttons */ html[data-theme] .profileupdate .card-footer { background: transparent !important; border-top: 1px solid var(--mt-border) !important; padding: 16px 20px !important; } html[data-theme] .profileupdate .btn-confirm-submit { width: 100% !important; padding: 10px !important; font-size: 13px !important; } /* ===== Profile Settings — left card styling ===== */ html[data-theme] .col-lg-5 .card.profile-widget { background: var(--mt-bg-card) !important; border: 1px solid var(--mt-border) !important; border-radius: 14px !important; overflow: hidden !important; } html[data-theme] .col-lg-5 .card.profile-widget .card-footer { background: transparent !important; border-top: 1px solid var(--mt-border) !important; padding: 16px 20px !important; } html[data-theme] .col-lg-5 .card.profile-widget .profile-widget-header { background: transparent !important; padding: 24px 20px 16px !important; } /* ===== Profile Settings — hide phone, round avatar ===== */ html[data-theme] .profileupdate .form-group:has(.data-phone) { display: none !important; } html[data-theme] .profilepic.profile-widget-picture { border-radius: 50% !important; overflow: hidden !important; width: 90px !important; height: 90px !important; } html[data-theme] .profilepic.profile-widget-picture img { border-radius: 50% !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } /* ===== Profile avatar — force perfect circle clip ===== */ html[data-theme] .profilepic.profile-widget-picture, html[data-theme] .profilepic { border-radius: 50% !important; overflow: hidden !important; clip-path: circle(50%) !important; width: 90px !important; height: 90px !important; display: block !important; margin: 0 auto !important; } html[data-theme] .profilepic img, html[data-theme] .profilepic svg, html[data-theme] .profilepic > * { border-radius: 50% !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* ===== Profile avatar image — force perfect circle ===== */ html[data-theme] .profilepic__image { width: 90px !important; height: 90px !important; border-radius: 50% !important; object-fit: cover !important; display: block !important; } html[data-theme] .profilepic { width: 90px !important; height: 90px !important; border-radius: 50% !important; overflow: hidden !important; margin: 0 auto !important; clip-path: none !important; } /* ===== Profile avatar — force square container ===== */ html[data-theme] .profilepic { width: 100px !important; height: 100px !important; min-width: 100px !important; min-height: 100px !important; border-radius: 50% !important; overflow: hidden !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; } html[data-theme] .profilepic__image { width: 100px !important; height: 100px !important; min-width: 100px !important; min-height: 100px !important; border-radius: 50% !important; object-fit: cover !important; object-position: center !important; } /* ===== Profile avatar — camera overlay button ===== */ html[data-theme] .profilepic { position: relative !important; cursor: pointer !important; } html[data-theme] .profilepic__content { position: absolute !important; bottom: 0 !important; right: 0 !important; width: 28px !important; height: 28px !important; background: #2E6BB8 !important; border-radius: 50% !important; border: 2px solid var(--mt-bg-card) !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 1 !important; background-color: #2E6BB8 !important; } html[data-theme] .profilepic__content .profilepic__icon { display: block !important; color: #fff !important; font-size: 13px !important; } html[data-theme] .profilepic__content .profilepic__text { display: none !important; } /* ===== Profile avatar — camera button fix ===== */ html[data-theme] .profilepic { position: relative !important; overflow: visible !important; } html[data-theme] .profilepic__image { border-radius: 50% !important; overflow: hidden !important; } html[data-theme] .profilepic__content { position: absolute !important; bottom: 2px !important; right: 2px !important; width: 28px !important; height: 28px !important; background: #2E6BB8 !important; border-radius: 50% !important; border: 2px solid #111827 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; z-index: 10 !important; } html[data-theme] .profilepic__content .profilepic__icon { display: block !important; color: #fff !important; font-size: 12px !important; } html[data-theme] .profilepic__content .profilepic__text { display: none !important; } /* ===== Profile avatar — always show camera button ===== */ html[data-theme] .profilepic__content { opacity: 0 !important; background: rgba(0,0,0,0.5) !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border-radius: 50% !important; } html[data-theme] .profilepic:hover .profilepic__content { opacity: 1 !important; } /* ===== Profile avatar — permanent camera badge below ===== */ html[data-theme] .profilepic { overflow: visible !important; } html[data-theme] .profilepic::after { content: '\f030'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute !important; bottom: -12px !important; left: 50% !important; transform: translateX(-50%) !important; background: #2E6BB8 !important; color: #fff !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 11px !important; cursor: pointer !important; border: 2px solid #111827 !important; z-index: 10 !important; line-height: 24px !important; text-align: center !important; } /* ===== Profile — update photo button hover ===== */ html[data-theme] .profile-widget .btn-update-photo, html[data-theme] #ppcture + button { transition: background 0.2s, border-color 0.2s, color 0.2s !important; } html[data-theme] #ppcture + button:hover { background: #1C4D8D !important; border-color: #2E6BB8 !important; color: #ffffff !important; } /* ===== Profile — reduce gap + bio padding ===== */ html[data-theme] .btn-update-photo { margin-top: 4px !important; margin-bottom: 0 !important; } html[data-theme] .profile-widget-description { padding-left: 24px !important; padding-right: 24px !important; text-align: center !important; } /* ===== Profile settings — button gap + bio padding FINAL ===== */ html[data-theme] .col-lg-5 .profile-widget .profile-widget-header { gap: 6px !important; padding-bottom: 8px !important; } html[data-theme] .col-lg-5 .btn-update-photo { margin: 0 auto !important; } html[data-theme] .col-lg-5 .profile-widget-description { padding: 0 24px 12px 24px !important; text-align: center !important; } html[data-theme] .col-lg-5 .profile-widget-description .profile-bio-2 { display: block !important; padding: 0 8px !important; color: var(--mt-text-muted) !important; font-size: 13px !important; line-height: 1.6 !important; } /* ===== Profile settings — mobile card gap ===== */ @media (max-width: 991px) { html[data-theme] .col-lg-5.col-md-12, html[data-theme] .col-lg-7.col-md-12 { margin-bottom: 16px !important; } html[data-theme] .profileupdate .row.mt-sm-4 { gap: 16px !important; } } /* ===== Profile avatar — force center crop uploaded photo ===== */ html[data-theme] .profilepic { width: 100px !important; height: 100px !important; border-radius: 50% !important; overflow: hidden !important; display: flex !important; align-items: center !important; justify-content: center !important; } html[data-theme] .profilepic__image { width: 100px !important; height: 100px !important; object-fit: cover !important; object-position: center top !important; border-radius: 50% !important; flex-shrink: 0 !important; } /* ===== Profile avatar — FINAL circle + camera button fix ===== */ html[data-theme] .profilepic { position: relative !important; width: 100px !important; height: 100px !important; border-radius: 50% !important; overflow: visible !important; display: block !important; margin: 0 auto !important; } html[data-theme] .profilepic__image { width: 100px !important; height: 100px !important; border-radius: 50% !important; object-fit: cover !important; object-position: center center !important; display: block !important; overflow: hidden !important; } html[data-theme] .profilepic__content { position: absolute !important; top: 0 !important; left: 0 !important; width: 100px !important; height: 100px !important; border-radius: 50% !important; background: rgba(0,0,0,0.5) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; opacity: 0 !important; transition: opacity 0.2s !important; cursor: pointer !important; } html[data-theme] .profilepic:hover .profilepic__content { opacity: 1 !important; } /* ===== Profile avatar — round border ===== */ html[data-theme] #ppcture > div, html[data-theme] .profile-widget-picture > div { border: 2px solid rgba(46, 107, 184, 0.45) !important; box-sizing: border-box !important; } /* ===== Profile settings — bio bottom padding ===== */ html[data-theme] .profile-widget-description { padding-bottom: 16px !important; } /* ===== Profile settings — match card styles ===== */ html[data-theme] .col-lg-5 .card.profile-widget { background: var(--mt-bg-card) !important; border: 1px solid var(--mt-border) !important; border-top: 2px solid #1C4D8D !important; border-radius: 14px !important; } html[data-theme] .col-lg-5 .card.profile-widget .card-footer { background: transparent !important; border-top: 1px solid var(--mt-border) !important; padding: 16px 20px !important; } html[data-theme] .col-lg-5 .profile-widget-description { padding: 8px 24px 20px !important; margin-top: 4px !important; } html[data-theme] .col-lg-5 .profile-bio-2 { display: block !important; padding-bottom: 8px !important; line-height: 1.6 !important; color: var(--mt-text-muted) !important; } /* ===== Profile settings — success alert style ===== */ html[data-theme] .profileupdate .section-error .alert, html[data-theme] .profileupdate .alert-success { background: rgba(28,77,141,0.1) !important; border: 0.5px solid rgba(46,107,184,0.3) !important; border-radius: 12px !important; color: #CBD5E1 !important; box-shadow: none !important; padding: 12px 16px !important; } html[data-theme] .profileupdate .alert .close { color: #86EFAC !important; opacity: 0.7 !important; } html[data-theme] .profileupdate .alert-danger { background: rgba(239,68,68,0.1) !important; border: 1px solid rgba(239,68,68,0.3) !important; border-radius: 10px !important; color: #FCA5A5 !important; box-shadow: none !important; } /* ===== Profile settings — fix alert double box ===== */ html[data-theme] .profileupdate .alert.alert-has-icon { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 16px !important; border-radius: 10px !important; box-shadow: none !important; } html[data-theme] .profileupdate .alert.alert-has-icon .alert-icon { border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; width: auto !important; height: auto !important; flex-shrink: 0 !important; } html[data-theme] .profileupdate .alert.alert-has-icon .alert-body { border: none !important; background: transparent !important; padding: 0 !important; flex: 1 !important; } /* ===== Profile settings — remove double border on alert ===== */ html[data-theme] .profileupdate .card .alert.alert-success, html[data-theme] .profileupdate .card .alert.alert-warning, html[data-theme] .profileupdate .card .alert.alert-danger, html[data-theme] .profileupdate .card .alert.alert-info { border-top: none !important; } html[data-theme] .profileupdate .alert-success { background: rgba(28,77,141,0.1) !important; border: 0.5px solid rgba(46,107,184,0.3) !important; color: #CBD5E1 !important; } /* ===== Profile alert — single clean box, no double border ===== */ html[data-theme] .profileupdate .alert.alert-has-icon { background: transparent !important; border: none !important; padding: 0 !important; } html[data-theme] .profileupdate .alert.alert-has-icon.alert-success { background: rgba(34,197,94,0.1) !important; border: 1px solid rgba(34,197,94,0.3) !important; border-radius: 10px !important; padding: 12px 16px !important; color: var(--mt-text-primary) !important; } html[data-theme] .profileupdate .alert.alert-has-icon.alert-danger { background: rgba(239,68,68,0.1) !important; border: 1px solid rgba(239,68,68,0.3) !important; border-radius: 10px !important; padding: 12px 16px !important; color: var(--mt-text-primary) !important; } html[data-theme] .profileupdate .alert.alert-has-icon .alert-icon, html[data-theme] .profileupdate .alert.alert-has-icon .alert-body { background: transparent !important; border: none !important; padding: 0 !important; } /* ===== Profile alert — kill global alert override ===== */ html[data-theme] .profileupdate .section-error .alert.alert-has-icon, html[data-theme] body .profileupdate .alert.alert-has-icon { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } html[data-theme] .profileupdate .section-error .alert.alert-has-icon.alert-success, html[data-theme] body .profileupdate .alert.alert-has-icon.alert-success { background: rgba(28,77,141,0.1) !important; border: 0.5px solid rgba(46,107,184,0.3) !important; border-radius: 12px !important; padding: 12px 16px !important; color: #CBD5E1 !important; } html[data-theme] .profileupdate .section-error .alert.alert-has-icon.alert-danger, html[data-theme] body .profileupdate .alert.alert-has-icon.alert-danger { background: rgba(239,68,68,0.1) !important; border: 1px solid rgba(239,68,68,0.3) !important; border-radius: 10px !important; padding: 12px 16px !important; } /* ===== Profile alert — remove ::before gradient line ===== */ html[data-theme] .profileupdate .alert::before, html[data-theme] .profileupdate .alert.alert-has-icon::before { display: none !important; content: none !important; } /* ===== Profile alert — remove alert-title inner background ===== */ html[data-theme] .profileupdate .alert-title { background: transparent !important; border: none !important; padding: 0 !important; margin: 0 0 4px 0 !important; font-weight: 600 !important; font-size: 15px !important; } html[data-theme] .profileupdate .alert-body { background: transparent !important; border: none !important; padding: 0 !important; } html[data-theme] .profileupdate .alert-icon { background: transparent !important; border: none !important; } /* ===== Profile alert — match dashboard notice style ===== */ html[data-theme] .profileupdate .alert.alert-has-icon.alert-success, html[data-theme] body .profileupdate .alert.alert-has-icon.alert-success { background: rgba(28, 77, 141, 0.1) !important; border: 0.5px solid rgba(46, 107, 184, 0.3) !important; border-radius: 12px !important; color: #CBD5E1 !important; } html[data-theme] .profileupdate .alert.alert-has-icon.alert-danger, html[data-theme] body .profileupdate .alert.alert-has-icon.alert-danger { background: rgba(239, 68, 68, 0.1) !important; border: 0.5px solid rgba(239, 68, 68, 0.3) !important; border-radius: 12px !important; color: #CBD5E1 !important; } /* ===== Profile alert — MAXIMUM specificity notice style ===== */ html[data-theme] html body .profileupdate .section-error .errors .alert.alert-success.alert-has-icon { background: rgba(28, 77, 141, 0.1) !important; border: 0.5px solid rgba(46, 107, 184, 0.3) !important; border-radius: 12px !important; color: #CBD5E1 !important; } html[data-theme] html body .profileupdate .section-error .errors .alert.alert-danger.alert-has-icon { background: rgba(28, 77, 141, 0.1) !important; border: 0.5px solid rgba(46, 107, 184, 0.3) !important; border-radius: 12px !important; color: #CBD5E1 !important; } /* ===== Number input spinner — dark theme ===== */ html[data-theme] input[type="number"]::-webkit-inner-spin-button, html[data-theme] input[type="number"]::-webkit-outer-spin-button { opacity: 0.4 !important; filter: invert(1) !important; cursor: pointer !important; } html[data-theme] input[type="number"] { -moz-appearance: auto !important; } /* ============================================ /* ============================================ /* ============================================ ALERT — final authoritative block Navy semi-transparent, theme-matched ============================================ */ /* DARK MODE — navy tinted semi-transparent */ [data-theme="dark"] .alert, [data-theme="dark"] div[class*="alert"], [data-theme="dark"] .card .alert, [data-theme="dark"] .card-body .alert, [data-theme="dark"] .card > .card-body > .alert { background: rgba(28, 77, 141, 0.15) !important; background-color: rgba(28, 77, 141, 0.15) !important; background-image: none !important; border: 1px solid rgba(46, 107, 184, 0.45) !important; border-radius: 12px !important; color: #E2E8F0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 16px 20px !important; margin-bottom: 1rem !important; overflow: visible !important; position: relative !important; } /* LIGHT MODE — soft navy tint */ [data-theme="light"] .alert, [data-theme="light"] div[class*="alert"], [data-theme="light"] .card .alert, [data-theme="light"] .card-body .alert, [data-theme="light"] .card > .card-body > .alert { background: rgba(28, 77, 141, 0.06) !important; background-color: rgba(28, 77, 141, 0.06) !important; background-image: none !important; border: 1px solid rgba(28, 77, 141, 0.30) !important; border-radius: 12px !important; color: #0F172A !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 16px 20px !important; margin-bottom: 1rem !important; overflow: visible !important; position: relative !important; } /* kill gradient line */ [data-theme="dark"] .alert::before, [data-theme="dark"] .alert::after, [data-theme="light"] .alert::before, [data-theme="light"] .alert::after, [data-theme="dark"] div[class*="alert"]::before, [data-theme="dark"] div[class*="alert"]::after, [data-theme="light"] div[class*="alert"]::before, [data-theme="light"] div[class*="alert"]::after { display: none !important; content: none !important; background: none !important; } /* bold labels — body color */ [data-theme="dark"] .alert b, [data-theme="dark"] .alert strong { color: #E2E8F0 !important; font-weight: 700 !important; letter-spacing: normal !important; font-size: inherit !important; } [data-theme="light"] .alert b, [data-theme="light"] .alert strong { color: #0F172A !important; font-weight: 700 !important; letter-spacing: normal !important; font-size: inherit !important; } /* dismiss X */ [data-theme="dark"] .alert .close, [data-theme="dark"] .alert .btn-close { color: #E2E8F0 !important; opacity: 0.5 !important; text-shadow: none !important; } [data-theme="light"] .alert .close, [data-theme="light"] .alert .btn-close { color: #0F172A !important; opacity: 0.5 !important; text-shadow: none !important; } [data-theme="dark"] .alert .close:hover, [data-theme="dark"] .alert .btn-close:hover, [data-theme="light"] .alert .close:hover, [data-theme="light"] .alert .btn-close:hover { opacity: 1 !important; } /* links */ [data-theme="dark"] .alert a { color: #4A86C4 !important; } [data-theme="light"] .alert a { color: #1C4D8D !important; } /* ============================================ TABLE BADGES — User List, desaturated theme-matched Matches action button style: dark fill, subtle border ============================================ */ /* BASE badge reset */ [data-theme="dark"] .table-listuser .badge, [data-theme="dark"] .table-listuser span.badge { font-size: 12px !important; font-weight: 500 !important; padding: 5px 10px !important; border-radius: 6px !important; letter-spacing: 0.3px !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; } /* USERNAME / USAGE / EXPIRATION — badge-primary */ [data-theme="dark"] .table-listuser .badge-primary { background: rgba(28, 77, 141, 0.25) !important; color: #93BFE8 !important; border: 1px solid rgba(46, 107, 184, 0.40) !important; box-shadow: none !important; } /* OFFLINE — badge-danger */ [data-theme="dark"] .table-listuser .badge-danger { background: rgba(239, 68, 68, 0.15) !important; color: #FCA5A5 !important; border: 1px solid rgba(239, 68, 68, 0.35) !important; box-shadow: none !important; } /* ONLINE — badge-success */ [data-theme="dark"] .table-listuser .badge-success { background: rgba(16, 185, 129, 0.15) !important; color: #6EE7B7 !important; border: 1px solid rgba(16, 185, 129, 0.35) !important; box-shadow: none !important; } /* LIGHT MODE */ [data-theme="light"] .table-listuser .badge-primary { background: rgba(28, 77, 141, 0.08) !important; color: #1C4D8D !important; border: 1px solid rgba(28, 77, 141, 0.25) !important; box-shadow: none !important; } [data-theme="light"] .table-listuser .badge-danger { background: rgba(239, 68, 68, 0.08) !important; color: #DC2626 !important; border: 1px solid rgba(239, 68, 68, 0.25) !important; box-shadow: none !important; } [data-theme="light"] .table-listuser .badge-success { background: rgba(16, 185, 129, 0.08) !important; color: #059669 !important; border: 1px solid rgba(16, 185, 129, 0.25) !important; box-shadow: none !important; } /* ============================================ TABLE BADGES — specificity fix for badge-primary ============================================ */ [data-theme="dark"] .table-listuser tbody .badge-primary, [data-theme="dark"] .table-listuser tbody span.badge.badge-primary, [data-theme="dark"] .table-listuser td .badge-primary, [data-theme="dark"] .table-listuser td span.badge-primary { background: rgba(28, 77, 141, 0.25) !important; background-color: rgba(28, 77, 141, 0.25) !important; color: #93BFE8 !important; border: 1px solid rgba(46, 107, 184, 0.40) !important; box-shadow: none !important; } [data-theme="light"] .table-listuser tbody .badge-primary, [data-theme="light"] .table-listuser tbody span.badge.badge-primary, [data-theme="light"] .table-listuser td .badge-primary, [data-theme="light"] .table-listuser td span.badge-primary { background: rgba(28, 77, 141, 0.08) !important; background-color: rgba(28, 77, 141, 0.08) !important; color: #1C4D8D !important; border: 1px solid rgba(28, 77, 141, 0.25) !important; box-shadow: none !important; } /* ============================================ TABLE BADGES — match action button colors exactly #0C2A4A fill, rgba(46,107,184,0.4) border, #7CC4FF text ============================================ */ [data-theme="dark"] .table-listuser tbody .badge-primary, [data-theme="dark"] .table-listuser tbody span.badge.badge-primary, [data-theme="dark"] .table-listuser td .badge-primary, [data-theme="dark"] .table-listuser td span.badge-primary { background: #0C2A4A !important; background-color: #0C2A4A !important; color: #7CC4FF !important; border: 1px solid rgba(46, 107, 184, 0.4) !important; box-shadow: none !important; } /* ============================================ RESELLER LIST BADGES — match user list style ============================================ */ /* USERNAME / CREDITS / CLIENTS — badge-primary */ [data-theme="dark"] .table-listreseller tbody .badge-primary, [data-theme="dark"] .table-listreseller td .badge-primary, [data-theme="dark"] .table-listreseller td span.badge-primary { background: #0C2A4A !important; background-color: #0C2A4A !important; color: #7CC4FF !important; border: 1px solid rgba(46, 107, 184, 0.4) !important; box-shadow: none !important; border-radius: 6px !important; } /* ACTIVE — badge-success */ [data-theme="dark"] .table-listreseller tbody .badge-success, [data-theme="dark"] .table-listreseller td .badge-success { background: #052010 !important; background-color: #052010 !important; color: #86EFAC !important; border: 1px solid rgba(34, 197, 94, 0.4) !important; box-shadow: none !important; border-radius: 6px !important; } /* BLOCKED — badge-danger */ [data-theme="dark"] .table-listreseller tbody .badge-danger, [data-theme="dark"] .table-listreseller td .badge-danger { background: #2D0A0A !important; background-color: #2D0A0A !important; color: #FCA5A5 !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; box-shadow: none !important; border-radius: 6px !important; } /* LIGHT MODE */ [data-theme="light"] .table-listreseller tbody .badge-primary, [data-theme="light"] .table-listreseller td .badge-primary { background: rgba(28, 77, 141, 0.08) !important; color: #1C4D8D !important; border: 1px solid rgba(28, 77, 141, 0.25) !important; box-shadow: none !important; border-radius: 6px !important; } [data-theme="light"] .table-listreseller tbody .badge-success, [data-theme="light"] .table-listreseller td .badge-success { background: rgba(16, 185, 129, 0.08) !important; color: #059669 !important; border: 1px solid rgba(16, 185, 129, 0.25) !important; box-shadow: none !important; border-radius: 6px !important; } [data-theme="light"] .table-listreseller tbody .badge-danger, [data-theme="light"] .table-listreseller td .badge-danger { background: rgba(239, 68, 68, 0.08) !important; color: #DC2626 !important; border: 1px solid rgba(239, 68, 68, 0.25) !important; box-shadow: none !important; border-radius: 6px !important; } /* ============================================ RESELLER LIST — copy button match settings button ============================================ */ [data-theme="dark"] .table-listreseller .btn-success, [data-theme="dark"] .table-listreseller .btn.btn-success { background: #0C2A4A !important; background-color: #0C2A4A !important; border: 1px solid rgba(46, 107, 184, 0.4) !important; color: #7CC4FF !important; box-shadow: none !important; } [data-theme="dark"] .table-listreseller .btn-success:hover, [data-theme="dark"] .table-listreseller .btn.btn-success:hover { background: #2E6BB8 !important; border-color: #4A9EFF !important; color: #ffffff !important; } [data-theme="light"] .table-listreseller .btn-success, [data-theme="light"] .table-listreseller .btn.btn-success { background: rgba(28, 77, 141, 0.08) !important; border: 1px solid rgba(28, 77, 141, 0.35) !important; color: #1C4D8D !important; box-shadow: none !important; } /* ============================================ HIDE empty accountalert div ============================================ */ .accountalert:empty { display: none !important; } /* ============================================ ACTIVITY LOG — date badges, header, entries ============================================ */ /* Date badges — match theme */ [data-theme="dark"] .table-activity tbody .badge-primary, [data-theme="dark"] .table-activity td .badge-primary, [data-theme="dark"] .table-activity td span.badge-primary { background: #0C2A4A !important; background-color: #0C2A4A !important; color: #7CC4FF !important; border: 1px solid rgba(46, 107, 184, 0.4) !important; box-shadow: none !important; border-radius: 6px !important; } [data-theme="light"] .table-activity tbody .badge-primary, [data-theme="light"] .table-activity td .badge-primary { background: rgba(28, 77, 141, 0.08) !important; color: #1C4D8D !important; border: 1px solid rgba(28, 77, 141, 0.25) !important; box-shadow: none !important; border-radius: 6px !important; } /* Card header — title and buttons on same line, no gap */ [data-theme] .card-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 20px !important; flex-wrap: wrap !important; gap: 8px !important; } [data-theme] .card-header .section-title { margin: 0 !important; padding: 0 !important; line-height: 1 !important; } [data-theme] .card-header-action { margin: 0 !important; padding: 0 !important; } /* btn-modern — remove animation, match theme, reduce size */ [data-theme] .btn-modern { border-radius: 8px !important; font-weight: 500 !important; padding: 6px 14px !important; margin-right: 4px !important; transform: none !important; transition: background 0.2s, border-color 0.2s !important; box-shadow: none !important; border: 1px solid rgba(46, 107, 184, 0.4) !important; } [data-theme] .btn-modern:hover, [data-theme] .btn-modern:active { transform: none !important; box-shadow: none !important; } /* Show entries — reduce height */ [data-theme] .dataTables_length select, [data-theme] .dataTables_length .form-control { height: 32px !important; padding: 2px 8px !important; min-height: unset !important; line-height: 1.4 !important; } [data-theme] .dataTables_length { display: flex !important; align-items: center !important; gap: 8px !important; line-height: 1 !important; } /* ============================================ BULK LOG TABLE — desaturated theme-matched badges ============================================ */ /* DATE — badge-primary */ [data-theme="dark"] .table-bulk td .badge-primary, [data-theme="dark"] .table-bulk tbody .badge-primary { background: #0C2A4A !important; background-color: #0C2A4A !important; color: #7CC4FF !important; border: 1px solid rgba(46, 107, 184, 0.4) !important; box-shadow: none !important; border-radius: 6px !important; } /* CREATOR — badge-info */ [data-theme="dark"] .table-bulk td .badge-info, [data-theme="dark"] .table-bulk tbody .badge-info { background: #0C2A4A !important; background-color: #0C2A4A !important; color: #7CC4FF !important; border: 1px solid rgba(46, 107, 184, 0.4) !important; box-shadow: none !important; border-radius: 6px !important; } /* PREFIX — badge-warning */ [data-theme="dark"] .table-bulk td .badge-warning, [data-theme="dark"] .table-bulk tbody .badge-warning { background: #2A1F05 !important; background-color: #2A1F05 !important; color: #FCD34D !important; border: 1px solid rgba(245, 158, 11, 0.4) !important; box-shadow: none !important; border-radius: 6px !important; } /* AMOUNT — badge-success */ [data-theme="dark"] .table-bulk td .badge-success, [data-theme="dark"] .table-bulk tbody .badge-success { background: #052010 !important; background-color: #052010 !important; color: #86EFAC !important; border: 1px solid rgba(34, 197, 94, 0.4) !important; box-shadow: none !important; border-radius: 6px !important; } /* ACTION buttons — CSV/TXT match primary, DELETE match danger */ [data-theme="dark"] .table-bulk .btn-primary, [data-theme="dark"] .table-bulk .btn.btn-primary { background: #0C2A4A !important; border: 1px solid rgba(46, 107, 184, 0.4) !important; color: #7CC4FF !important; box-shadow: none !important; } [data-theme="dark"] .table-bulk .btn-danger, [data-theme="dark"] .table-bulk .btn.btn-danger { background: #2D0A0A !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; color: #FCA5A5 !important; box-shadow: none !important; } [data-theme="dark"] .table-bulk .btn-primary:hover { background: #2E6BB8 !important; color: #fff !important; } [data-theme="dark"] .table-bulk .btn-danger:hover { background: #DC2626 !important; color: #fff !important; } /* LIGHT MODE */ [data-theme="light"] .table-bulk td .badge-primary, [data-theme="light"] .table-bulk td .badge-info { background: rgba(28, 77, 141, 0.08) !important; color: #1C4D8D !important; border: 1px solid rgba(28, 77, 141, 0.25) !important; border-radius: 6px !important; } [data-theme="light"] .table-bulk td .badge-warning { background: rgba(245, 158, 11, 0.08) !important; color: #B45309 !important; border: 1px solid rgba(245, 158, 11, 0.25) !important; border-radius: 6px !important; } [data-theme="light"] .table-bulk td .badge-success { background: rgba(16, 185, 129, 0.08) !important; color: #059669 !important; border: 1px solid rgba(16, 185, 129, 0.25) !important; border-radius: 6px !important; } /* ============================================ CREDIT LOG TABLE — date badge ============================================ */ [data-theme="dark"] .table-credits td .badge-primary, [data-theme="dark"] .table-credits tbody .badge-primary { background: #0C2A4A !important; background-color: #0C2A4A !important; color: #7CC4FF !important; border: 1px solid rgba(46, 107, 184, 0.4) !important; box-shadow: none !important; border-radius: 6px !important; } [data-theme="light"] .table-credits td .badge-primary, [data-theme="light"] .table-credits tbody .badge-primary { background: rgba(28, 77, 141, 0.08) !important; color: #1C4D8D !important; border: 1px solid rgba(28, 77, 141, 0.25) !important; box-shadow: none !important; border-radius: 6px !important; } /* ============================================ DELETED LOG TABLE — date badge ============================================ */ [data-theme="dark"] .table-deleted td .badge-primary, [data-theme="dark"] .table-deleted tbody .badge-primary { background: #0C2A4A !important; background-color: #0C2A4A !important; color: #7CC4FF !important; border: 1px solid rgba(46, 107, 184, 0.4) !important; box-shadow: none !important; border-radius: 6px !important; } [data-theme="light"] .table-deleted td .badge-primary, [data-theme="light"] .table-deleted tbody .badge-primary { background: rgba(28, 77, 141, 0.08) !important; color: #1C4D8D !important; border: 1px solid rgba(28, 77, 141, 0.25) !important; box-shadow: none !important; border-radius: 6px !important; } /* ============================================ PAGINATION — single authoritative block ============================================ */ [data-theme="dark"] .dataTables_paginate { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 0 !important; } [data-theme="dark"] .dataTables_paginate span { display: inline-flex !important; flex-wrap: wrap !important; } [data-theme="dark"] .dataTables_paginate .paginate_button, [data-theme="dark"] .dataTables_paginate .paginate_button.previous, [data-theme="dark"] .dataTables_paginate .paginate_button.next, [data-theme="dark"] .dataTables_paginate span .paginate_button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 28px !important; height: 28px !important; padding: 0 8px !important; margin: 0 2px !important; color: #E2E8F0 !important; background: #0C2A4A !important; background-color: #0C2A4A !important; border: 1px solid rgba(46, 107, 184, 0.35) !important; border-radius: 5px !important; font-size: 12px !important; line-height: 1 !important; box-sizing: border-box !important; box-shadow: none !important; } [data-theme="dark"] .dataTables_paginate .paginate_button:hover, [data-theme="dark"] .dataTables_paginate span .paginate_button:hover { background: #1C4D8D !important; background-color: #1C4D8D !important; color: #ffffff !important; border-color: #2E6BB8 !important; } [data-theme="dark"] .dataTables_paginate .paginate_button.current, [data-theme="dark"] .dataTables_paginate .paginate_button.current:hover { background: #1C4D8D !important; background-color: #1C4D8D !important; color: #ffffff !important; border-color: #2E6BB8 !important; font-weight: 600 !important; } [data-theme="dark"] .dataTables_paginate .paginate_button.disabled, [data-theme="dark"] .dataTables_paginate .paginate_button.disabled:hover { color: #4B5563 !important; background: rgba(12, 42, 74, 0.4) !important; background-color: rgba(12, 42, 74, 0.4) !important; border-color: rgba(46, 107, 184, 0.15) !important; cursor: default !important; } /* ============================================ PAGINATION — Bootstrap4 ul.pagination structure ============================================ */ [data-theme="dark"] .dataTables_paginate ul.pagination { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } [data-theme="dark"] .dataTables_paginate ul.pagination .page-item { margin: 0 !important; } [data-theme="dark"] .dataTables_paginate ul.pagination .page-item .page-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 30px !important; height: 30px !important; padding: 0 8px !important; margin: 0 !important; color: #E2E8F0 !important; background: #0C2A4A !important; background-color: #0C2A4A !important; border: 1px solid rgba(46, 107, 184, 0.35) !important; border-radius: 5px !important; font-size: 12px !important; line-height: 1 !important; box-shadow: none !important; } [data-theme="dark"] .dataTables_paginate ul.pagination .page-item .page-link:hover { background: #1C4D8D !important; background-color: #1C4D8D !important; color: #ffffff !important; border-color: #2E6BB8 !important; } [data-theme="dark"] .dataTables_paginate ul.pagination .page-item.active .page-link, [data-theme="dark"] .dataTables_paginate ul.pagination .page-item.active .page-link:hover { background: #1C4D8D !important; background-color: #1C4D8D !important; color: #ffffff !important; border-color: #2E6BB8 !important; font-weight: 600 !important; } [data-theme="dark"] .dataTables_paginate ul.pagination .page-item.disabled .page-link, [data-theme="dark"] .dataTables_paginate ul.pagination .page-item.disabled .page-link:hover { color: #4B5563 !important; background: rgba(12, 42, 74, 0.4) !important; background-color: rgba(12, 42, 74, 0.4) !important; border-color: rgba(46, 107, 184, 0.15) !important; cursor: default !important; } /* ============================================ PAGINATION — fix overlap, zero out paginate_button margins ============================================ */ [data-theme="dark"] .dataTables_paginate .paginate_button, [data-theme="dark"] .dataTables_paginate .paginate_button.previous, [data-theme="dark"] .dataTables_paginate .paginate_button.next, [data-theme="dark"] .dataTables_paginate span .paginate_button { margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; background-color: transparent !important; min-width: unset !important; height: unset !important; display: inline !important; box-shadow: none !important; } /* ul.pagination handles all visual styling */ [data-theme="dark"] .dataTables_paginate ul.pagination { gap: 5px !important; margin: 0 !important; } [data-theme="dark"] .dataTables_paginate ul.pagination .page-item { margin: 0 !important; padding: 0 !important; } [data-theme="dark"] .dataTables_paginate ul.pagination .page-item .page-link { margin: 0 !important; border-radius: 6px !important; min-width: 30px !important; height: 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 10px !important; font-size: 12px !important; color: #E2E8F0 !important; background: #0C2A4A !important; border: 1px solid rgba(46, 107, 184, 0.35) !important; box-shadow: none !important; } /* ============================================ FIX: Hide page scrollbar when modal open ============================================ */ html.modal-html-open, html.modal-html-open body, html.modal-html-open .main-wrapper, html.modal-html-open .main-content { overflow: hidden !important; height: 100% !important; } /* ============================================ RESELLER modal — hide X button, keep Cancel ============================================ */ .view-reseller .normal-modal-header .close, .normal-modal-header .close { display: none !important; } /* ============================================ MODAL fieldset inputs — remove double border ============================================ */ .normal-modal-html fieldset { background: transparent !important; } .normal-modal-html fieldset input, .normal-modal-html fieldset select { border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; color: #E2E8F0 !important; width: 100% !important; } .normal-modal-html fieldset legend { font-size: 11px !important; font-weight: 600 !important; color: #2E6BB8 !important; padding: 0 4px !important; margin: 0 !important; width: auto !important; } /* ============================================ MODAL fieldset — readonly text faded, speed limit border fix ============================================ */ /* Readonly inputs — faded text */ .normal-modal-html fieldset input[readonly], .normal-modal-html fieldset input:read-only { color: #64748B !important; opacity: 1 !important; } /* Editable inputs — full white */ .normal-modal-html fieldset input:not([readonly]), .normal-modal-html fieldset select { color: #E2E8F0 !important; } /* Speed limit fieldset — override pink to red */ .normal-modal-html fieldset[style*="hotpink"], .normal-modal-html fieldset[style*="ff69b4"], .normal-modal-html fieldset[style*="pink"] { border-color: #D64545 !important; } .normal-modal-html fieldset[style*="hotpink"] legend, .normal-modal-html fieldset[style*="pink"] legend { color: #D64545 !important; } /* ============================================ MODAL fieldset — more faded readonly text ============================================ */ .normal-modal-html fieldset input[readonly], .normal-modal-html fieldset input:read-only { color: #4B5563 !important; opacity: 1 !important; } /* ============================================ MODAL fieldset — correct text colors ============================================ */ /* Readonly text fields — muted grey */ .normal-modal-html fieldset input[readonly] { color: #94A3B8 !important; } /* Editable number input (speed limit) — keep white */ .normal-modal-html fieldset input[type="number"] { color: #E2E8F0 !important; } /* Legend labels — navy accent */ .normal-modal-html fieldset legend { color: #2E6BB8 !important; } /* ============================================ SERVER PAGE — installer info card dark theme ============================================ */ [data-theme="dark"] .installer-info-card { background: #0C2A4A !important; background-image: none !important; border: 1px solid rgba(46, 107, 184, 0.4) !important; box-shadow: none !important; color: #E2E8F0 !important; } [data-theme="dark"] .installer-info-card:hover { border-color: rgba(46, 107, 184, 0.7) !important; box-shadow: none !important; } [data-theme="dark"] .installer-header { border-bottom-color: rgba(46, 107, 184, 0.2) !important; } [data-theme="dark"] .installer-info-card * { color: #E2E8F0 !important; } /* ============================================ SERVER PAGE — installer card badges dark theme ============================================ */ [data-theme="dark"] .os-debian { background: rgba(214, 51, 132, 0.15) !important; color: #F9A8D4 !important; } [data-theme="dark"] .os-ubuntu { background: rgba(180, 83, 9, 0.15) !important; color: #FCD34D !important; } [data-theme="dark"] .os-centos { background: rgba(111, 66, 193, 0.15) !important; color: #C4B5FD !important; } [data-theme="dark"] .protocol-badge { background: rgba(46, 107, 184, 0.15) !important; color: #7CC4FF !important; } [data-theme="dark"] .feature-tag { background: rgba(245, 158, 11, 0.15) !important; color: #FCD34D !important; } /* ============================================ SERVER PAGE — reduce badge saturation ============================================ */ [data-theme="dark"] .os-debian { background: rgba(214, 51, 132, 0.08) !important; color: #F9A8D4 !important; border: 1px solid rgba(214, 51, 132, 0.25) !important; } [data-theme="dark"] .os-ubuntu { background: rgba(180, 83, 9, 0.08) !important; color: #FCD34D !important; border: 1px solid rgba(180, 83, 9, 0.25) !important; } [data-theme="dark"] .os-centos { background: rgba(111, 66, 193, 0.08) !important; color: #C4B5FD !important; border: 1px solid rgba(111, 66, 193, 0.25) !important; } [data-theme="dark"] .protocol-badge { background: rgba(46, 107, 184, 0.08) !important; color: #7CC4FF !important; border: 1px solid rgba(46, 107, 184, 0.25) !important; } [data-theme="dark"] .feature-tag { background: rgba(245, 158, 11, 0.08) !important; color: #FCD34D !important; border: 1px solid rgba(245, 158, 11, 0.25) !important; } /* ============================================ SERVER PAGE — installer card match notice box style ============================================ */ [data-theme="dark"] .installer-info-card { background: rgba(28, 77, 141, 0.15) !important; background-image: none !important; border: 1px solid rgba(46, 107, 184, 0.45) !important; border-radius: 12px !important; box-shadow: none !important; } /* ============================================ INPUT GROUP — dark theme fix ============================================ */ [data-theme="dark"] .input-group-text { background: #0C2A4A !important; border: 1px solid rgba(46, 107, 184, 0.4) !important; color: #7CC4FF !important; } [data-theme="light"] .input-group-text { background: rgba(28, 77, 141, 0.06) !important; border: 1px solid rgba(28, 77, 141, 0.25) !important; color: #1C4D8D !important; } /* ============================================ CODE BLOCKS / PRE — dark theme fix ============================================ */ [data-theme="dark"] pre, [data-theme="dark"] code, [data-theme="dark"] .code-block, [data-theme="dark"] pre code { background: #0C2A4A !important; background-color: #0C2A4A !important; color: #7CC4FF !important; border: 1px solid rgba(46, 107, 184, 0.35) !important; border-radius: 8px !important; } [data-theme="light"] pre, [data-theme="light"] code, [data-theme="light"] .code-block, [data-theme="light"] pre code { background: rgba(28, 77, 141, 0.05) !important; color: #1C4D8D !important; border: 1px solid rgba(28, 77, 141, 0.2) !important; border-radius: 8px !important; } /* ============================================ CODE BLOCKS — match alert/notice box style ============================================ */ [data-theme="dark"] pre, [data-theme="dark"] pre code { background: rgba(28, 77, 141, 0.15) !important; background-color: rgba(28, 77, 141, 0.15) !important; color: #E2E8F0 !important; border: 1px solid rgba(46, 107, 184, 0.45) !important; border-radius: 12px !important; padding: 16px 20px !important; } [data-theme="light"] pre, [data-theme="light"] pre code { background: rgba(28, 77, 141, 0.06) !important; color: #0F172A !important; border: 1px solid rgba(28, 77, 141, 0.30) !important; border-radius: 12px !important; padding: 16px 20px !important; } /* ============================================ CODE BLOCKS — fix inner code tag border ============================================ */ [data-theme="dark"] pre code, [data-theme="light"] pre code { background: transparent !important; border: none !important; padding: 0 !important; border-radius: 0 !important; color: inherit !important; } /* ============================================ STAT CARD ICONS — desaturated theme-matched ============================================ */ [data-theme="dark"] .card-icon.bg-primary, [data-theme="dark"] .card-icon.bg-info { background: #0C2A4A !important; box-shadow: none !important; } [data-theme="dark"] .card-icon.bg-success { background: #052010 !important; box-shadow: none !important; } [data-theme="dark"] .card-icon.bg-warning { background: #2A1F05 !important; box-shadow: none !important; } [data-theme="dark"] .card-icon.bg-danger { background: #2D0A0A !important; box-shadow: none !important; } /* Icon colors inside */ [data-theme="dark"] .card-icon.bg-primary i, [data-theme="dark"] .card-icon.bg-info i { color: #7CC4FF !important; } [data-theme="dark"] .card-icon.bg-success i { color: #86EFAC !important; } [data-theme="dark"] .card-icon.bg-warning i { color: #FCD34D !important; } [data-theme="dark"] .card-icon.bg-danger i { color: #FCA5A5 !important; } /* Remove shadow classes */ [data-theme="dark"] .shadow-primary, [data-theme="dark"] .shadow-success, [data-theme="dark"] .shadow-warning, [data-theme="dark"] .shadow-info, [data-theme="dark"] .shadow-danger { box-shadow: none !important; } /* ============================================ STAT CARD ICONS — per-color override, high specificity ============================================ */ [data-theme="dark"] .card.card-statistic-1 .card-icon.bg-success, [data-theme="dark"] .card.card-statistic-2 .card-icon.bg-success, [data-theme="dark"] .card-icon.bg-success { background: #052010 !important; } [data-theme="dark"] .card.card-statistic-1 .card-icon.bg-success i, [data-theme="dark"] .card.card-statistic-2 .card-icon.bg-success i, [data-theme="dark"] .card-icon.bg-success i { color: #86EFAC !important; } [data-theme="dark"] .card.card-statistic-1 .card-icon.bg-warning, [data-theme="dark"] .card.card-statistic-2 .card-icon.bg-warning, [data-theme="dark"] .card-icon.bg-warning { background: #2A1F05 !important; } [data-theme="dark"] .card.card-statistic-1 .card-icon.bg-warning i, [data-theme="dark"] .card.card-statistic-2 .card-icon.bg-warning i, [data-theme="dark"] .card-icon.bg-warning i { color: #FCD34D !important; } [data-theme="dark"] .card.card-statistic-1 .card-icon.bg-danger, [data-theme="dark"] .card.card-statistic-2 .card-icon.bg-danger, [data-theme="dark"] .card-icon.bg-danger { background: #2D0A0A !important; } [data-theme="dark"] .card.card-statistic-1 .card-icon.bg-danger i, [data-theme="dark"] .card.card-statistic-2 .card-icon.bg-danger i, [data-theme="dark"] .card-icon.bg-danger i { color: #FCA5A5 !important; } [data-theme="dark"] .card.card-statistic-1 .card-icon.bg-info, [data-theme="dark"] .card.card-statistic-2 .card-icon.bg-info, [data-theme="dark"] .card-icon.bg-info { background: #051A2A !important; } [data-theme="dark"] .card.card-statistic-1 .card-icon.bg-info i, [data-theme="dark"] .card.card-statistic-2 .card-icon.bg-info i, [data-theme="dark"] .card-icon.bg-info i { color: #7CC4FF !important; } [data-theme="dark"] .card.card-statistic-1 .card-icon.bg-primary, [data-theme="dark"] .card.card-statistic-2 .card-icon.bg-primary, [data-theme="dark"] .card-icon.bg-primary { background: #0C2A4A !important; } [data-theme="dark"] .card.card-statistic-1 .card-icon.bg-primary i, [data-theme="dark"] .card.card-statistic-2 .card-icon.bg-primary i, [data-theme="dark"] .card-icon.bg-primary i { color: #7CC4FF !important; } /* Remove all shadow classes */ [data-theme="dark"] [class*="shadow-"] { box-shadow: none !important; } /* ============================================ TABS — dark theme fix ============================================ */ [data-theme="dark"] .nav-tabs .nav-link { color: #94A3B8 !important; background: transparent !important; border-color: transparent !important; } [data-theme="dark"] .nav-tabs .nav-link.active, [data-theme="dark"] .nav-tabs .nav-item.show .nav-link { background: #0C2A4A !important; color: #7CC4FF !important; border-color: rgba(46, 107, 184, 0.4) !important; border-bottom-color: transparent !important; } [data-theme="dark"] .nav-tabs { border-bottom-color: rgba(46, 107, 184, 0.2) !important; } [data-theme="dark"] .tab-content { background: transparent !important; } /* ============================================ DATE PICKER / CALENDAR — dark theme fix ============================================ */ [data-theme="dark"] .datepicker, [data-theme="dark"] .datepicker-dropdown, [data-theme="dark"] .datepicker table, [data-theme="dark"] .ui-datepicker, [data-theme="dark"] .calendar, [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { background: #111827 !important; color: #E2E8F0 !important; border: 1px solid rgba(46, 107, 184, 0.35) !important; border-radius: 12px !important; } [data-theme="dark"] .datepicker td, [data-theme="dark"] .datepicker th, [data-theme="dark"] .ui-datepicker td, [data-theme="dark"] .ui-datepicker th { color: #E2E8F0 !important; background: transparent !important; } [data-theme="dark"] .datepicker td:hover, [data-theme="dark"] .ui-datepicker td:hover { background: rgba(46, 107, 184, 0.2) !important; border-radius: 6px !important; } [data-theme="dark"] .datepicker td.active, [data-theme="dark"] .datepicker td.today, [data-theme="dark"] .ui-datepicker td.active { background: #1C4D8D !important; color: #ffffff !important; border-radius: 6px !important; } [data-theme="dark"] .datepicker .datepicker-switch, [data-theme="dark"] .datepicker .prev, [data-theme="dark"] .datepicker .next { color: #7CC4FF !important; background: transparent !important; } /* ============================================ NATIVE DATE INPUT — hint browser to use dark mode picker ============================================ */ [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="datetime-local"], [data-theme="dark"] input[type="time"] { color-scheme: dark !important; background: #0F1626 !important; color: #E2E8F0 !important; border: 1px solid rgba(46, 107, 184, 0.4) !important; border-radius: 8px !important; } /* ============================================ EMAIL CAMPAIGNS — icon picker dark theme ============================================ */ [data-theme="dark"] .icon-picker-container { background: #111827 !important; border: 1px solid rgba(46, 107, 184, 0.35) !important; border-radius: 12px !important; } [data-theme="dark"] .icon-grid { background: #111827 !important; } [data-theme="dark"] .icon-grid .icon-item { background: #0C2A4A !important; border: 1px solid rgba(46, 107, 184, 0.2) !important; border-radius: 8px !important; color: #E2E8F0 !important; } [data-theme="dark"] .icon-grid .icon-item:hover { background: #1C4D8D !important; border-color: rgba(46, 107, 184, 0.6) !important; } [data-theme="dark"] .icon-grid .icon-item span { color: #94A3B8 !important; } /* Info bar at top of picker */ [data-theme="dark"] .icon-picker-container > div:first-child, [data-theme="dark"] .icon-picker-info { background: rgba(28, 77, 141, 0.15) !important; border-bottom: 1px solid rgba(46, 107, 184, 0.2) !important; color: #94A3B8 !important; border-radius: 12px 12px 0 0 !important; } /* ============================================ EMAIL CAMPAIGNS — recipient options dark theme ============================================ */ [data-theme="dark"] .recipient-options { background: rgba(28, 77, 141, 0.08) !important; border: 1px solid rgba(46, 107, 184, 0.35) !important; border-radius: 12px !important; } [data-theme="dark"] .recipient-options .form-check { border-radius: 8px !important; } [data-theme="dark"] .recipient-options .form-check:hover { background: rgba(46, 107, 184, 0.1) !important; } [data-theme="dark"] .recipient-options .form-check-label { color: #94A3B8 !important; } [data-theme="dark"] .recipient-options .form-check-input:checked + .form-check-label { color: #7CC4FF !important; font-weight: 600 !important; } /* ============================================ FILE INPUT — dark theme fix ============================================ */ [data-theme="dark"] input[type="file"] { background: #0F1626 !important; color: #94A3B8 !important; border: 1px solid rgba(46, 107, 184, 0.4) !important; border-radius: 8px !important; } [data-theme="dark"] input[type="file"]::file-selector-button { background: #0C2A4A !important; color: #7CC4FF !important; border: none !important; border-right: 1px solid rgba(46, 107, 184, 0.4) !important; padding: 8px 16px !important; cursor: pointer !important; } [data-theme="dark"] input[type="file"]::file-selector-button:hover { background: #1C4D8D !important; color: #ffffff !important; } [data-theme="dark"] .custom-file, [data-theme="dark"] .custom-file-input, [data-theme="dark"] .custom-file-label { background: #0F1626 !important; color: #94A3B8 !important; border-color: rgba(46, 107, 184, 0.4) !important; border-radius: 8px !important; } [data-theme="dark"] .custom-file-label::after { background: #0C2A4A !important; color: #7CC4FF !important; border-left-color: rgba(46, 107, 184, 0.4) !important; } /* ============================================ EMAIL CAMPAIGNS — campaign cards dark theme ============================================ */ /* Campaign icon boxes — white background */ [data-theme="dark"] .campaign-icon, [data-theme="dark"] .template-icon, [data-theme="dark"] .campaign-card img, [data-theme="dark"] .campaign-card .icon-box, [data-theme="dark"] .card .rounded img[style*="background"], [data-theme="dark"] .card div[style*="background: white"], [data-theme="dark"] .card div[style*="background:#fff"], [data-theme="dark"] .card div[style*="background: #fff"] { background: #0C2A4A !important; border: 1px solid rgba(46, 107, 184, 0.3) !important; } /* Active badge — green saturated */ [data-theme="dark"] .badge-success:not(.table-listuser .badge-success):not(.table-listreseller .badge-success) { background: rgba(16, 185, 129, 0.15) !important; color: #86EFAC !important; border: 1px solid rgba(16, 185, 129, 0.35) !important; } /* Category badges — Promotion, Newsletter, Announcement, Welcome, Custom */ [data-theme="dark"] .badge-warning:not(.table-bulk .badge-warning) { background: rgba(245, 158, 11, 0.12) !important; color: #FCD34D !important; border: 1px solid rgba(245, 158, 11, 0.3) !important; } [data-theme="dark"] .badge-danger:not(.table-listuser .badge-danger):not(.table-listreseller .badge-danger):not(.table-bulk .badge-danger) { background: rgba(239, 68, 68, 0.12) !important; color: #FCA5A5 !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; } [data-theme="dark"] .badge-info:not(.table-bulk .badge-info) { background: rgba(46, 107, 184, 0.12) !important; color: #7CC4FF !important; border: 1px solid rgba(46, 107, 184, 0.3) !important; } /* HTML badge */ [data-theme="dark"] .badge-secondary { background: rgba(100, 116, 139, 0.15) !important; color: #94A3B8 !important; border: 1px solid rgba(100, 116, 139, 0.3) !important; } /* ============================================ EMAIL CAMPAIGNS PAGE — override inline white styles ============================================ */ [data-theme="dark"] .card { background: var(--mt-bg-card) !important; color: var(--mt-text-primary) !important; } [data-theme="dark"] .card-body { background: transparent !important; color: var(--mt-text-primary) !important; } [data-theme="dark"] .modal-content { background: #111827 !important; color: #E2E8F0 !important; } [data-theme="dark"] .modal-body { background: transparent !important; color: #E2E8F0 !important; } background: #0F1626 !important; border-bottom: 1px solid rgba(46, 107, 184, 0.2) !important; } background: #0C2A4A !important; border-color: rgba(46, 107, 184, 0.3) !important; color: #7CC4FF !important; } background: #1C4D8D !important; color: #ffffff !important; } background: #0F1626 !important; color: #E2E8F0 !important; border-color: rgba(46, 107, 184, 0.3) !important; } background: #0F1626 !important; color: #E2E8F0 !important; } /* ============================================ EMAIL CAMPAIGNS — icon grid and campaign icon boxes ============================================ */ [data-theme="dark"] .icon-item { background: #0C2A4A !important; border-color: rgba(46, 107, 184, 0.3) !important; } [data-theme="dark"] .icon-item:hover { background: #1C4D8D !important; border-color: rgba(46, 107, 184, 0.6) !important; transform: none !important; } [data-theme="dark"] .icon-grid { background: transparent !important; } [data-theme="dark"] .icon-picker-container { background: rgba(28, 77, 141, 0.1) !important; border-color: rgba(46, 107, 184, 0.3) !important; } /* Campaign template icon boxes in card list */ [data-theme="dark"] .card img[style], [data-theme="dark"] .card .rounded-circle[style*="background"], [data-theme="dark"] div[style*="background: white"], [data-theme="dark"] div[style*="background:white"], [data-theme="dark"] div[style*="background: #fff"], [data-theme="dark"] div[style*="background:#fff"] { background: #0C2A4A !important; } /* ============================================ HIDE theme toggle button — dark mode only ============================================ */ [data-theme-toggle], a[data-theme-toggle], button[data-theme-toggle] { display: none !important; } /* ============================================ HIDE theme toggle — dark only mode ============================================ */ a[data-theme-toggle], .faz[data-theme-toggle], .theme-toggle { display: none !important; } /* ============================================ GLOBE BUTTON — identical to bell, single authoritative block ============================================ */ html[data-theme] .main-navbar .faz-lang { background-color: transparent !important; box-shadow: none !important; outline: none !important; position: static !important; width: auto !important; height: auto !important; border-radius: 0 !important; bottom: auto !important; right: auto !important; z-index: auto !important; } html[data-theme] .main-navbar .faz-lang i { color: #6B7A99 !important; -webkit-text-fill-color: #6B7A99 !important; font-size: 18px !important; transition: color 0.15s ease !important; } html[data-theme] .main-navbar .faz-lang:hover { background-color: transparent !important; box-shadow: none !important; } html[data-theme] .main-navbar .faz-lang:hover i { color: var(--mt-accent) !important; -webkit-text-fill-color: var(--mt-accent) !important; } /* ============================================ GLOBE BUTTON — remove border/outline on hover ============================================ */ html[data-theme] .main-navbar li.dropdown-list-toggle:has(.faz-lang), html[data-theme] .main-navbar li.dropdown-list-toggle:has(.faz-lang):hover, html[data-theme] .main-navbar li.dropdown-list-toggle:has(.faz-lang):focus, html[data-theme] .main-navbar li.dropdown-list-toggle:has(.faz-lang) .faz-lang, html[data-theme] .main-navbar li.dropdown-list-toggle:has(.faz-lang) .faz-lang:hover { border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; } /* ============================================ GLOBE BUTTON — transparent border stroke, keep hover bg ============================================ */ html[data-theme] .main-navbar .faz-lang, html[data-theme] .main-navbar .faz-lang:hover, html[data-theme] .main-navbar .faz-lang:focus, html[data-theme] .main-navbar .faz-lang:active { border: 1px solid transparent !important; outline: none !important; box-shadow: none !important; } /* ============================================ LANG PICKER — dropdown from topnav, search result style ============================================ */ /* ============================================ LANG PICKER — exact notification match, single block ============================================ */ /* Outer popup — same as .dropdown-list */ html[data-theme] #langPickerPopup { background-color: var(--mt-bg-elevated) !important; border: 1px solid var(--mt-border) !important; box-shadow: var(--mt-shadow-md) !important; padding: 8px !important; overflow: hidden !important; scrollbar-width: none !important; width: 320px !important; border-radius: 10px !important; } /* Inner scroll — same as .profile-notifications */ html[data-theme] #langPickerPopup .lang-items-scroll { max-height: 320px !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: thin !important; scrollbar-color: #3D5070 transparent !important; } html[data-theme] #langPickerPopup .lang-items-scroll::-webkit-scrollbar { width: 5px !important; } html[data-theme] #langPickerPopup .lang-items-scroll::-webkit-scrollbar-track { background: transparent !important; } html[data-theme] #langPickerPopup .lang-items-scroll::-webkit-scrollbar-thumb { background: #3D5070 !important; border-radius: 5px !important; } /* Items — same as .dropdown-item */ html[data-theme] #langPickerPopup .lang-item { background-color: var(--mt-bg-card) !important; border: 1px solid var(--mt-border) !important; border-radius: var(--mt-radius) !important; margin-bottom: 4px !important; padding: 10px 12px !important; display: flex !important; align-items: center !important; gap: 12px !important; cursor: pointer !important; color: var(--mt-text-primary) !important; font-size: 13px !important; pointer-events: auto !important; } html[data-theme] #langPickerPopup .lang-item:hover { background-color: var(--mt-bg-hover) !important; border-color: var(--mt-accent) !important; } html[data-theme] #langPickerPopup .lang-item.lang-active { background-color: var(--mt-bg-active) !important; border-color: var(--mt-accent) !important; color: var(--mt-accent-text) !important; font-weight: 600 !important; } /* Fix wildcard rule bleeding into spans/imgs */ html[data-theme] #langPickerPopup .lang-item span { background: transparent !important; background-color: transparent !important; border: none !important; padding: 0 !important; color: var(--mt-text-primary) !important; } html[data-theme] #langPickerPopup .lang-item img { background: transparent !important; border: none !important; padding: 0 !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; flex-shrink: 0 !important; } /* Header */ html[data-theme] #langPickerPopup .dropdown-header { color: var(--mt-text-secondary) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; padding: 4px 4px 8px !important; background: transparent !important; pointer-events: none !important; } /* LANG PICKER — reduced width */ html[data-theme] #langPickerPopup { width: 240px !important; min-width: 240px !important; } /* LANG PICKER — scrollbar at right edge */ html[data-theme] #langPickerPopup .lang-items-scroll { padding-right: 0 !important; margin-right: 0 !important; } /* LANG PICKER — scrollbar position match notification */ html[data-theme] #langPickerPopup .lang-items-scroll { padding-right: 4px !important; } /* ============================================ LANG PICKER — Bootstrap dropdown, matches notification ============================================ */ /* Popup same as notification .dropdown-list */ html[data-theme] #langPickerPopup.dropdown-menu { padding: 8px !important; overflow: hidden !important; min-width: 240px !important; width: 240px !important; } /* Scroll area same as .profile-notifications */ html[data-theme] #langPickerPopup .lang-items-scroll { max-height: 320px !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: thin !important; scrollbar-color: #3D5070 transparent !important; padding-right: 4px !important; } html[data-theme] #langPickerPopup .lang-items-scroll::-webkit-scrollbar { width: 5px !important; } html[data-theme] #langPickerPopup .lang-items-scroll::-webkit-scrollbar-track { background: transparent !important; } html[data-theme] #langPickerPopup .lang-items-scroll::-webkit-scrollbar-thumb { background: #3D5070 !important; border-radius: 5px !important; } /* Items same as .dropdown-item */ html[data-theme] #langPickerPopup .lang-item { background-color: var(--mt-bg-card) !important; border: 1px solid var(--mt-border) !important; border-radius: var(--mt-radius) !important; margin-bottom: 4px !important; padding: 10px 12px !important; display: flex !important; align-items: center !important; gap: 12px !important; cursor: pointer !important; color: var(--mt-text-primary) !important; font-size: 13px !important; pointer-events: auto !important; } html[data-theme] #langPickerPopup .lang-item:hover { background-color: var(--mt-bg-hover) !important; border-color: var(--mt-accent) !important; } html[data-theme] #langPickerPopup .lang-item.lang-active { background-color: var(--mt-bg-active) !important; border-color: var(--mt-accent) !important; font-weight: 600 !important; } html[data-theme] #langPickerPopup .lang-item span { background: transparent !important; border: none !important; padding: 0 !important; color: var(--mt-text-primary) !important; } html[data-theme] #langPickerPopup .lang-item img { background: transparent !important; border: none !important; padding: 0 !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; flex-shrink: 0 !important; } /* ============================================ LANG PICKER — fix arrow visibility ============================================ */ html[data-theme] #langPickerPopup.dropdown-menu { overflow: visible !important; } html[data-theme] #langPickerPopup .dropdown-header, html[data-theme] #langPickerPopup .lang-items-scroll { overflow: hidden !important; } html[data-theme] #langPickerPopup .lang-items-scroll { overflow-y: auto !important; } /* ============================================ NAVBAR ICONS — consistent hover: icon color only, no background ============================================ */ html[data-theme] .main-navbar .navbar-nav .nav-link, html[data-theme] .main-navbar .navbar-nav .nav-link-lg, html[data-theme] .main-navbar .navbar-nav .dropdown-toggle { background-color: transparent !important; box-shadow: none !important; } html[data-theme] .main-navbar .navbar-nav .nav-link:hover, html[data-theme] .main-navbar .navbar-nav .nav-link:focus, html[data-theme] .main-navbar .navbar-nav .nav-link:active, html[data-theme] .main-navbar .navbar-nav .nav-link-lg:hover, html[data-theme] .main-navbar .navbar-nav .dropdown-toggle:hover { background-color: transparent !important; box-shadow: none !important; } html[data-theme] .main-navbar .navbar-nav .nav-link:hover i, html[data-theme] .main-navbar .navbar-nav .nav-link-lg:hover i, html[data-theme] .main-navbar .navbar-nav .dropdown-toggle:hover i { color: var(--mt-accent) !important; -webkit-text-fill-color: var(--mt-accent) !important; } /* Profile avatar hover — subtle only */ html[data-theme] .main-navbar .nav-link-user:hover img { opacity: 0.85 !important; } /* ============================================ NAVBAR — remove globe animation, add search hover ============================================ */ html[data-theme] .main-navbar .faz-lang:hover { transform: none !important; box-shadow: none !important; } /* Search box hover */ html[data-theme] .main-navbar .form-inline:hover .form-control, html[data-theme] .main-navbar .search-element:hover .form-control, html[data-theme] .main-navbar .navbar .form-inline .form-control:hover { border-color: var(--mt-accent) !important; } html[data-theme] .main-navbar .search-element .btn:hover i, html[data-theme] .main-navbar .navbar .btn.btn-primary:hover i { color: var(--mt-accent) !important; -webkit-text-fill-color: var(--mt-accent) !important; } /* ============================================ SEARCH BOX — fast hover transition matching icons ============================================ */ html[data-theme] .main-navbar .form-inline .form-control, html[data-theme] .main-navbar .search-element .form-control, html[data-theme] .navbar .form-inline .form-control { transition: border-color 0.15s ease !important; } /* ============================================ PROFILE NAV — consistent hover with other icons ============================================ */ html[data-theme] .main-navbar .nav-link-user { color: #6B7A99 !important; transition: color 0.15s ease !important; background: transparent !important; } html[data-theme] .main-navbar .nav-link-user:hover, html[data-theme] .main-navbar .nav-link-user:focus { color: var(--mt-accent) !important; background: transparent !important; box-shadow: none !important; } html[data-theme] .main-navbar .nav-link-user:hover .d-sm-none, html[data-theme] .main-navbar .nav-link-user:hover .d-lg-inline-block { color: var(--mt-accent) !important; } html[data-theme] .main-navbar .nav-link-user .d-sm-none, html[data-theme] .main-navbar .nav-link-user .d-lg-inline-block { color: #6B7A99 !important; transition: color 0.15s ease !important; } /* ===== Reseller Settings / Global Content Overlap Fix ===== */ html[data-theme] .main-content { padding-left: 280px !important; } html[data-theme] body.sidebar-mini .main-content { padding-left: 90px !important; } body.sidebar-gone .main-content { padding-left: 0 !important; } @media (max-width: 1024px) { html[data-theme] .main-content { padding-left: 0 !important; } } html[data-theme="dark"] .card { background-color: #111827 !important; border-color: #1F2937 !important; } html[data-theme="dark"] .card-header { background-color: #111827 !important; border-bottom-color: #1F2937 !important; color: #E2E8F0 !important; } html[data-theme="dark"] .card-body { background-color: #111827 !important; color: #E2E8F0 !important; } background-color: #1A2235 !important; border-color: #1F2937 !important; } background-color: #0B1220 !important; color: #E2E8F0 !important; } background-color: #1A2235 !important; border-color: #1F2937 !important; color: #E2E8F0 !important; } background-color: #2E6BB8 !important; color: #fff !important; } background-color: #111827 !important; border-color: #1F2937 !important; } background-color: #1A2235 !important; border-color: #1F2937 !important; } background-color: #0B1220 !important; color: #E2E8F0 !important; } background-color: #1A2235 !important; border-top-color: #1F2937 !important; } background-color: #1A2235 !important; border-color: #1F2937 !important; color: #E2E8F0 !important; } background-color: #2E6BB8 !important; color: #fff !important; } color: #64748B !important; } /* ===== Card background fix — force over Stisla yellow ===== */ html[data-theme="dark"] .card, html[data-theme="dark"] .card-body, html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer { background-color: #111827 !important; background: #111827 !important; border-color: #1F2937 !important; color: #E2E8F0 !important; } html[data-theme="dark"] section.section > .section-body > .row > .col-12 > .card { background-color: #111827 !important; } /* ===== Login Notice — strip inner card/alert, apply our style ===== */ .login-notice-wrap > *, .login-notice-wrap .card, .login-notice-wrap .alert, .login-notice-wrap .card-body, .login-notice-wrap .card-header { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } .login-notice-wrap { background: rgba(28,77,141,0.12) !important; border: 1px solid rgba(46,107,184,0.25) !important; border-radius: 10px !important; padding: 14px 16px !important; margin-bottom: 20px !important; color: #94A3B8 !important; font-size: 13px !important; text-align: center; } .login-notice-wrap * { color: #94A3B8 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* ===== Login notice — nuclear override of inner alert ===== */ background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; color: #94A3B8 !important; } background: rgba(28,77,141,0.15) !important; border: 1px solid rgba(46,107,184,0.3) !important; border-radius: 10px !important; padding: 14px 16px !important; margin-bottom: 20px !important; color: #94A3B8 !important; font-size: 13px !important; text-align: center; } /* ===== Login notice — close button position fix ===== */ position: absolute !important; top: 50% !important; right: 12px !important; transform: translateY(-50%) !important; color: #64748B !important; opacity: 1 !important; font-size: 16px !important; line-height: 1 !important; padding: 0 !important; } position: relative !important; padding-right: 36px !important; } /* ===== Login footer — remove animate-charcter gradient animation ===== */ background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: #64748B !important; animation: none !important; color: #64748B !important; } /* ===== Login page alert/notice styling ===== */ background: rgba(28,77,141,0.15) !important; border: 1px solid rgba(46,107,184,0.3) !important; border-radius: 10px !important; color: #94A3B8 !important; margin-bottom: 20px !important; padding: 10px !important; position: relative !important; } background: transparent !important; border: none !important; padding: 0 !important; } color: #94A3B8 !important; background: transparent !important; } position: absolute !important; top: 10px !important; right: 12px !important; color: #64748B !important; opacity: 1 !important; font-size: 18px !important; line-height: 1 !important; padding: 0 !important; background: transparent !important; } /* ===== Application List button — match panel navy style ===== */ background: rgba(28,77,141,0.15) !important; border: 1px solid rgba(46,107,184,0.3) !important; border-radius: 9px !important; color: #60A5FA !important; font-size: 13px !important; font-weight: 500 !important; padding: 11px !important; transition: background 0.2s, border-color 0.2s !important; } background: rgba(46,107,184,0.25) !important; border-color: #2E6BB8 !important; color: #fff !important; text-decoration: none !important; } /* ===== Login notice — allow inner HTML formatting to show ===== */ color: #E2E8F0 !important; } color: unset !important; background: unset !important; } color: #E2E8F0 !important; } /* Override only the blanket * rule we set earlier */ color: inherit !important; background: inherit !important; } overflow: visible !important; } overflow: visible !important; } background: transparent !important; background-color: transparent !important; } color: #E2E8F0 !important; } /* Editable area */ background-color: #0F1929 !important; color: #E2E8F0 !important; padding: 10px !important; min-height: 200px !important; overflow-y: auto !important; } /* Fix top cut-off — editing area must not overflow hidden */ overflow: auto !important; } overflow: visible !important; display: flex !important; flex-direction: column !important; } /* Toolbar */ background-color: #1A2235 !important; border-bottom: 1px solid #1F2937 !important; flex-shrink: 0 !important; } /* Toolbar buttons */ background-color: #1A2235 !important; border-color: #2D3748 !important; color: #94A3B8 !important; } background-color: #2E6BB8 !important; color: #fff !important; } /* Allow inline color styles from formatting to show correctly */ /* do NOT override — let user formatting show */ } background-color: transparent !important; } /* Statusbar */ background-color: #1A2235 !important; border-top: 1px solid #1F2937 !important; } /* Dropdown menus */ background-color: #1A2235 !important; border-color: #1F2937 !important; } color: #E2E8F0 !important; } background-color: #2E6BB8 !important; } /* Placeholder */ color: #4B5563 !important; } padding-top: 16px !important; } overflow-y: auto !important; overflow-x: hidden !important; } overflow: hidden !important; display: block !important; } position: relative !important; z-index: 10 !important; } /* ===== SUMMERNOTE DARK THEME — SINGLE CLEAN BLOCK ===== */ html[data-theme="dark"] .note-editor.note-frame { border: 1px solid #1F2937 !important; } html[data-theme="dark"] .card-header.note-toolbar, html[data-theme="dark"] .note-toolbar { background-color: #1A2235 !important; border-bottom: 1px solid #1F2937 !important; padding: 4px !important; } html[data-theme="dark"] .note-editor.note-frame .note-editing-area { overflow: auto !important; } html[data-theme="dark"] .note-editor.note-frame .note-editing-area .note-editable { background-color: #0F1929 !important; color: #E2E8F0 !important; padding: 10px !important; } html[data-theme="dark"] .note-editor.note-frame .note-statusbar { background-color: #1A2235 !important; border-top: 1px solid #1F2937 !important; } html[data-theme="dark"] .note-btn, html[data-theme="dark"] .note-btn.btn-default { background-color: #1A2235 !important; border-color: #2D3748 !important; color: #94A3B8 !important; } html[data-theme="dark"] .note-btn:hover, html[data-theme="dark"] .note-btn.active { background-color: #2E6BB8 !important; border-color: #2E6BB8 !important; color: #fff !important; } html[data-theme="dark"] .note-dropdown-menu, html[data-theme="dark"] .note-editor .dropdown-menu { background-color: #1A2235 !important; border: 1px solid #1F2937 !important; } html[data-theme="dark"] .note-editor .dropdown-item, html[data-theme="dark"] .note-editor .dropdown-menu a { color: #E2E8F0 !important; } html[data-theme="dark"] .note-editor .dropdown-item:hover, html[data-theme="dark"] .note-editor .dropdown-menu a:hover { background-color: #2E6BB8 !important; } html[data-theme="dark"] .note-placeholder { color: #4B5563 !important; } html[data-theme="dark"] .note-editable [style*="background-color: rgb(255, 255, 255)"], html[data-theme="dark"] .note-editable [style*="background-color: white"], html[data-theme="dark"] .note-editable [style*="background-color:#fff"], html[data-theme="dark"] .note-editable [style*="background-color: #fff"] { background-color: transparent !important; } html[data-theme="dark"] .note-editable span[style*="color: rgb(0, 0, 0)"], html[data-theme="dark"] .note-editable span[style*="color: black"], html[data-theme="dark"] .note-editable span[style*="color:#000000"] { color: #E2E8F0 !important; } /* ===== Login page — remove section/body background separation ===== */ background: transparent !important; background-color: transparent !important; background-image: none !important; } background: #0B1220 !important; background-image: radial-gradient(ellipse at 20% 20%, rgba(28,77,141,0.35) 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(46,107,184,0.2) 0%, transparent 50%) !important; } /* ===== Login — force entire page same background ===== */ display: none !important; } background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } background: #0B1220 !important; } /* ===== Login notice — close button top-right corner ===== */ position: relative !important; } position: absolute !important; top: 8px !important; right: 10px !important; left: auto !important; bottom: auto !important; transform: none !important; font-size: 18px !important; line-height: 1 !important; color: #64748B !important; opacity: 1 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; z-index: 10 !important; } color: #E2E8F0 !important; } /* ===== Application List button — match navy panel buttons ===== */ background: linear-gradient(135deg, #1C4D8D, #2E6BB8) !important; border: none !important; border-radius: 9px !important; color: #fff !important; font-size: 14px !important; font-weight: 600 !important; padding: 12px !important; box-shadow: 0 4px 15px rgba(28,77,141,0.35) !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-decoration: none !important; } opacity: 0.9 !important; color: #fff !important; text-decoration: none !important; } /* ===== Login form — match panel design ===== */ background: #111827 !important; border: 1px solid #1F2937 !important; border-radius: 8px !important; color: #E2E8F0 !important; padding: 10px 14px !important; font-size: 13px !important; height: auto !important; } border-color: #2E6BB8 !important; box-shadow: 0 0 0 3px rgba(46,107,184,0.15) !important; background: #111827 !important; } border-right: none !important; border-radius: 8px 0 0 8px !important; } background: #111827 !important; border: 1px solid #1F2937 !important; border-left: none !important; border-radius: 0 8px 8px 0 !important; color: #2E6BB8 !important; } /* Login button — match panel navy */ background: #1C4D8D !important; border: none !important; border-radius: 8px !important; padding: 10px !important; font-size: 13px !important; font-weight: 600 !important; color: #fff !important; width: 100% !important; box-shadow: none !important; letter-spacing: 0.3px !important; } background: #2E6BB8 !important; opacity: 1 !important; } /* Application List — subtle secondary style */ background: #111827 !important; border: 1px solid #1F2937 !important; border-radius: 8px !important; color: #64748B !important; font-size: 13px !important; font-weight: 500 !important; padding: 10px !important; box-shadow: none !important; } border-color: #2E6BB8 !important; color: #2E6BB8 !important; background: #111827 !important; opacity: 1 !important; } /* Login card — tighter padding */ padding: 24px 20px !important; } /* Form group spacing */ margin-bottom: 14px !important; } font-size: 11px !important; font-weight: 600 !important; color: #64748B !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; margin-bottom: 5px !important; } /* ===== Login page — match panel form field & button style ===== */ background: rgba(28,77,141,0.08) !important; border: 1px solid rgba(46,107,184,0.2) !important; border-radius: 10px !important; color: #E2E8F0 !important; padding: 12px 16px !important; font-size: 14px !important; height: auto !important; box-shadow: none !important; } border-color: #2E6BB8 !important; box-shadow: 0 0 0 3px rgba(46,107,184,0.15) !important; background: rgba(28,77,141,0.12) !important; } border-right: none !important; border-radius: 10px 0 0 10px !important; } background: rgba(28,77,141,0.08) !important; border: 1px solid rgba(46,107,184,0.2) !important; border-left: none !important; border-radius: 0 10px 10px 0 !important; color: #2E6BB8 !important; box-shadow: none !important; } /* Login button */ background: #1C4D8D !important; border: none !important; border-radius: 10px !important; padding: 12px !important; font-size: 14px !important; font-weight: 600 !important; color: #fff !important; width: 100% !important; box-shadow: none !important; } background: #2E6BB8 !important; opacity: 1 !important; } /* Application List button — secondary style */ background: rgba(28,77,141,0.15) !important; border: 1px solid rgba(46,107,184,0.25) !important; border-radius: 10px !important; color: #60A5FA !important; font-size: 14px !important; font-weight: 500 !important; padding: 12px !important; box-shadow: none !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-decoration: none !important; } background: rgba(46,107,184,0.25) !important; border-color: #2E6BB8 !important; color: #fff !important; opacity: 1 !important; } /* ===== LOGIN PAGE — SINGLE CLEAN BLOCK ===== */ body.login-page-c { background: #0B1220 !important; background-image: radial-gradient(ellipse at 20% 20%, rgba(28,77,141,0.35) 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(46,107,184,0.2) 0%, transparent 50%) !important; min-height: 100vh; margin: 0; padding: 0; } body.login-page-c::before, body.login-page-c::after { display: none !important; } body.login-page-c .section, body.login-page-c .section-header, body.login-page-c .section-body, body.login-page-c #app, body.login-page-c #app > section, body.login-page-c > * { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } .login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px; } .login-logo-wrap { position: relative; margin-bottom: 10px; display: flex; flex-direction: column; align-items: center; } .logo-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 180px; height: 180px; border-radius: 50%; background: rgba(46,107,184,0.18); filter: blur(24px); z-index: 0; } .login-logo-wrap img { position: relative; z-index: 1; width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 4px 20px rgba(46,107,184,0.5)); } .login-site-name { font-size: 18px; font-weight: 700; color: #E2E8F0; letter-spacing: 1px; margin-top: 10px; margin-bottom: 20px; text-align: center; position: relative; z-index: 1; } .login-card { background: rgba(17,24,39,0.92) !important; border: 1px solid rgba(46,107,184,0.3) !important; border-radius: 18px !important; box-shadow: 0 0 40px rgba(28,77,141,0.2), 0 8px 32px rgba(0,0,0,0.4) !important; width: 100%; max-width: 420px; padding: 28px 24px !important; } .login-card .form-group { margin-bottom: 16px !important; } .login-card .form-group label { font-size: 11px !important; font-weight: 600 !important; color: #64748B !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; margin-bottom: 6px !important; display: block !important; } .login-card .form-control { background: rgba(28,77,141,0.08) !important; border: 1px solid rgba(46,107,184,0.2) !important; border-radius: 10px !important; color: #E2E8F0 !important; padding: 12px 16px !important; font-size: 14px !important; height: auto !important; box-shadow: none !important; } .login-card .form-control:focus { border-color: #2E6BB8 !important; box-shadow: 0 0 0 3px rgba(46,107,184,0.15) !important; background: rgba(28,77,141,0.12) !important; } .login-card .input-group .form-control { border-right: none !important; border-radius: 10px 0 0 10px !important; } .login-card .input-group-text { background: rgba(28,77,141,0.08) !important; border: 1px solid rgba(46,107,184,0.2) !important; border-left: none !important; border-radius: 0 10px 10px 0 !important; color: #2E6BB8 !important; box-shadow: none !important; cursor: pointer; } .btn-login { background: #1C4D8D !important; border: none !important; border-radius: 10px !important; padding: 12px !important; font-size: 14px !important; font-weight: 600 !important; color: #fff !important; width: 100% !important; box-shadow: none !important; display: block !important; text-align: center !important; } .btn-login:hover { background: #2E6BB8 !important; color: #fff !important; } .login-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0; } .login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: #1F2937; } .login-divider span { font-size: 11px; color: #374151; } .login-footer { margin-top: 24px; text-align: center; font-size: 12px; color: #374151; background: transparent !important; } .login-footer a { color: #2E6BB8; text-decoration: none; } .faz-lang-login { position: fixed; bottom: 24px; right: 24px; width: 42px; height: 42px; border-radius: 50%; background: rgba(17,24,39,0.9); border: 1px solid rgba(46,107,184,0.3); color: #60A5FA; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 999; text-decoration: none; box-shadow: 0 2px 12px rgba(0,0,0,0.3); font-size: 16px; } .faz-lang-login:hover { border-color: #2E6BB8; color: #fff; text-decoration: none; } .errors:not(:empty) { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 8px; padding: 10px 14px; color: #FCA5A5; font-size: 13px; margin-bottom: 14px; } body.login-page-c .alert { background: rgba(28,77,141,0.15) !important; border: 1px solid rgba(46,107,184,0.3) !important; border-radius: 10px !important; color: #94A3B8 !important; margin-bottom: 20px !important; padding: 14px 40px 14px 16px !important; position: relative !important; } body.login-page-c .alert .alert-body { background: transparent !important; border: none !important; padding: 0 !important; } body.login-page-c .alert * { color: #94A3B8 !important; background: transparent !important; } body.login-page-c .alert .text-white, body.login-page-c .alert .text-white * { color: #E2E8F0 !important; } body.login-page-c .alert .close { position: absolute !important; top: 8px !important; right: 10px !important; color: #64748B !important; opacity: 1 !important; font-size: 18px !important; line-height: 1 !important; padding: 0 !important; background: transparent !important; border: none !important; z-index: 10 !important; } body.login-page-c .animate-charcter { background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: #64748B !important; animation: none !important; color: #64748B !important; } /* ===== Login card fields — beat html[data-theme] specificity ===== */ html[data-theme] .login-card .form-control, html[data-theme] .login-card input[type="text"], html[data-theme] .login-card input[type="password"] { background-color: rgba(28,77,141,0.08) !important; border: 1px solid rgba(46,107,184,0.2) !important; border-radius: 10px !important; color: #E2E8F0 !important; box-shadow: none !important; } html[data-theme] .login-card .form-control:focus, html[data-theme] .login-card input[type="text"]:focus, html[data-theme] .login-card input[type="password"]:focus { border-color: #2E6BB8 !important; box-shadow: 0 0 0 3px rgba(46,107,184,0.15) !important; background-color: rgba(28,77,141,0.12) !important; } html[data-theme] .login-card .input-group .form-control, html[data-theme] .login-card .input-group input[type="password"] { border-right: none !important; border-radius: 10px 0 0 10px !important; } html[data-theme] .login-card .input-group-text { background-color: rgba(28,77,141,0.08) !important; border: 1px solid rgba(46,107,184,0.2) !important; border-left: none !important; border-radius: 0 10px 10px 0 !important; color: #2E6BB8 !important; box-shadow: none !important; } /* ===== Login — fix autofill white background ===== */ html body.login-page-c input:-webkit-autofill, html body.login-page-c input:-webkit-autofill:hover, html body.login-page-c input:-webkit-autofill:focus, html body.login-page-c input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #0F1626 inset !important; -webkit-text-fill-color: #E2E8F0 !important; border-color: rgba(46,107,184,0.2) !important; } /* ===== Login fields — defeat Chrome autofill completely ===== */ html body.login-page-c .login-card input.form-control { background-color: #0F1626 !important; color: #E2E8F0 !important; border: 1px solid #1F2937 !important; border-radius: 10px !important; transition: background-color 999999s ease-in-out 0s, color 999999s ease-in-out 0s !important; } html body.login-page-c .login-card input.form-control:-webkit-autofill, html body.login-page-c .login-card input.form-control:-webkit-autofill:hover, html body.login-page-c .login-card input.form-control:-webkit-autofill:focus, html body.login-page-c .login-card input.form-control:-webkit-autofill:active { transition: background-color 999999s ease-in-out 0s, color 999999s ease-in-out 0s !important; -webkit-text-fill-color: #E2E8F0 !important; caret-color: #E2E8F0 !important; } html body.login-page-c .login-card .input-group-text { background-color: #0F1626 !important; border: 1px solid #1F2937 !important; border-left: none !important; color: #2E6BB8 !important; } /* ===== Login buttons — correct hover ===== */ /* ===== Login buttons — match panel button style exactly ===== */ /* ===== Login button height ===== */ html[data-theme] .login-card button.btn-primary.btn-submit { padding: 12px !important; height: auto !important; } /* ===== Login buttons height fix ===== */ html[data-theme] .login-card button.btn-primary.btn-submit, html[data-theme] .login-card a.btn-primary.btn-block { padding: 12px !important; height: auto !important; line-height: 1.5 !important; } /* ===== Login page lang picker — bottom right near globe ===== */ body.login-page-c #langPickerPopup { top: auto !important; left: auto !important; right: 70px !important; bottom: 16px !important; width: 220px !important; max-height: 400px !important; overflow: hidden !important; } /* ===== Global button click/tap effect ===== */ html[data-theme] .btn:active, html[data-theme] .btn:active:focus { transform: scale(0.96) !important; transition: transform 0.1s ease !important; } html[data-theme] .btn { transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.1s ease !important; } /* ===== Button touch/click feedback — mobile fix ===== */ html[data-theme] .btn { -webkit-tap-highlight-color: rgba(46,107,184,0.2) !important; touch-action: manipulation !important; cursor: pointer !important; } html[data-theme] .btn:active { transform: scale(0.96) !important; opacity: 0.85 !important; } /* ===== Orbit Loading Animation ===== */ html[data-theme] .mt-orbit-loader { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; position: relative; vertical-align: middle; } html[data-theme] .mt-orbit-ring { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(46,107,184,0.2); position: absolute; animation: mtOrbitSpin 1.5s linear infinite; } html[data-theme] .mt-orbit-dot { width: 7px; height: 7px; background: #2E6BB8; border-radius: 50%; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); box-shadow: 0 0 8px #2E6BB8; } @keyframes mtOrbitSpin { to { transform: rotate(360deg); } } /* Hide fa-spinner and replace with orbit */ html[data-theme] .fa-spinner.fa-spin { display: none !important; } html[data-theme] .fa-spinner.fa-spin::before { display: none !important; } /* ===== SweetAlert2 — Navy Dark Theme ===== */ html[data-theme="dark"] .swal2-popup { background: #111827 !important; border: 1px solid #1F2937 !important; border-radius: 16px !important; color: #E2E8F0 !important; box-shadow: 0 0 40px rgba(28,77,141,0.3) !important; } html[data-theme="dark"] .swal2-title { color: #E2E8F0 !important; } html[data-theme="dark"] .swal2-html-container, html[data-theme="dark"] .swal2-content { color: #94A3B8 !important; } html[data-theme="dark"] .swal2-confirm.btn-primary { background: rgba(46,107,184,0.08) !important; border: 1.5px solid rgba(46,107,184,0.45) !important; color: #7CC4FF !important; border-radius: 10px !important; box-shadow: none !important; } html[data-theme="dark"] .swal2-confirm.btn-primary:hover { background: #1C4D8D !important; border-color: #2E6BB8 !important; color: #fff !important; } html[data-theme="dark"] .swal2-cancel.btn-danger { background: rgba(239,68,68,0.08) !important; border: 1.5px solid rgba(239,68,68,0.45) !important; color: #FCA5A5 !important; border-radius: 10px !important; box-shadow: none !important; } html[data-theme="dark"] .swal2-cancel.btn-danger:hover { background: #dc2626 !important; color: #fff !important; } /* Success icon — navy */ html[data-theme="dark"] .swal2-icon.swal2-success { border-color: #2E6BB8 !important; color: #2E6BB8 !important; } html[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(46,107,184,0.3) !important; } html[data-theme="dark"] .swal2-icon.swal2-success [class^=swal2-success-line] { background-color: #2E6BB8 !important; } /* Error icon */ html[data-theme="dark"] .swal2-icon.swal2-error { border-color: #EF4444 !important; color: #EF4444 !important; } html[data-theme="dark"] .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: #EF4444 !important; } /* Warning icon */ html[data-theme="dark"] .swal2-icon.swal2-warning { border-color: #F59E0B !important; color: #F59E0B !important; } /* Info icon */ html[data-theme="dark"] .swal2-icon.swal2-info { border-color: #2E6BB8 !important; color: #2E6BB8 !important; } /* Backdrop */ html[data-theme="dark"] .swal2-backdrop-show { background: rgba(0,0,0,0.6) !important; } /* ===== User table mobile scroll — table only ===== */ @media (max-width: 768px) { html[data-theme] .dataTables_wrapper .dataTables_scroll, html[data-theme] .dataTables_wrapper > .dataTables_scrollBody, html[data-theme] .dataTables_scrollBody { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } html[data-theme] table.table-listuser { min-width: 550px !important; } } /* ===== Prevent DataTables from hiding columns on mobile ===== */ @media (max-width: 768px) { html[data-theme] table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, html[data-theme] table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before { display: none !important; } html[data-theme] table.dataTable td.dtr-hidden, html[data-theme] table.dataTable th.dtr-hidden { display: table-cell !important; } } /* ===== DataTables scrollX — sync header and body ===== */ html[data-theme] .dataTables_scrollHead { overflow: hidden !important; } html[data-theme] .dataTables_scrollBody { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } html[data-theme] .dataTables_scrollBody::-webkit-scrollbar { height: 4px !important; } html[data-theme] .dataTables_scrollBody::-webkit-scrollbar-track { background: transparent !important; } html[data-theme] .dataTables_scrollBody::-webkit-scrollbar-thumb { background: rgba(46,107,184,0.4) !important; border-radius: 4px !important; } /* ===== Mobile topnav logo size ===== */ .d-lg-none a img, .d-lg-none a svg { height: 36px !important; width: auto !important; } /* ===== Prevent white flash on page load ===== */ html, body { background: #0B1220 !important; } /* ===== Loading screen dark background ===== */ #loading { background-color: #0B1220 !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 99999 !important; } /* ===== Remove browser default margin/padding flash ===== */ html, body { margin: 0 !important; padding: 0 !important; background-color: #0B1220 !important; } /* ===== Prevent SweetAlert2 scroll jump ===== */ html.swal2-shown, body.swal2-shown { overflow-y: scroll !important; } body.swal2-shown { padding-right: 0 !important; } /* ===== Remove navbar side padding on mobile ===== */ @media (max-width: 1024px) { html[data-theme] .navbar { left: 0 !important; right: 0 !important; } } /* ===== Fix navbar right gap ===== */ html body .main-navbar.navbar, html body nav.navbar.main-navbar { right: 0 !important; } /* ===== Prevent SweetAlert2 scrollbar shift ===== */ body.swal2-shown { padding-right: 0 !important; overflow: hidden !important; } html.swal2-shown { overflow-y: scroll !important; } /* ===== Swal buttons mobile spacing ===== */ .swal2-actions { flex-wrap: wrap !important; gap: 8px !important; } .swal2-actions .btn, .swal2-actions a.btn { margin: 4px !important; flex: 1 1 auto !important; min-width: 120px !important; } /* ===== Statistics Modal - Dark Theme Card Fix ===== */ [data-theme="dark"] .modal-content { background-color: var(--mt-bg-card) !important; color: var(--mt-text-primary) !important; border-color: var(--mt-border) !important; } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { background-color: var(--mt-bg-card) !important; border-color: var(--mt-border) !important; } [data-theme="dark"] .modal-body .card, [data-theme="dark"] .modal-body .list-group-item, [data-theme="dark"] .modal-body .stat-card, [data-theme="dark"] .modal-body [class*="card"] { background-color: var(--mt-bg-elevated) !important; border-color: var(--mt-border) !important; color: var(--mt-text-primary) !important; } [data-theme="dark"] .modal-body .card .card-body, [data-theme="dark"] .modal-body .card-title, [data-theme="dark"] .modal-body .card-text, [data-theme="dark"] .modal-body p, [data-theme="dark"] .modal-body span, [data-theme="dark"] .modal-body h5, [data-theme="dark"] .modal-body h6 { color: var(--mt-text-primary) !important; } [data-theme="dark"] .modal-body .card:not([class*="bg-"]) { background-color: var(--mt-bg-elevated) !important; } /* ===== Statistics Modal - Dark Theme Fix ===== */ [data-theme="dark"] .modal-content { background-color: var(--mt-bg-card) !important; border-color: var(--mt-border) !important; } [data-theme="dark"] .modal-header { background-color: var(--mt-bg-card) !important; border-bottom-color: var(--mt-border) !important; } [data-theme="dark"] .modal-title { color: var(--mt-text-primary) !important; } /* Protocol status cards */ [data-theme="dark"] .protocol-status-card { background-color: var(--mt-bg-elevated) !important; border-color: var(--mt-border) !important; color: var(--mt-text-primary) !important; } [data-theme="dark"] .protocol-status-card .protocol-name { color: var(--mt-text-primary) !important; } [data-theme="dark"] .protocol-status-card .protocol-port { color: #94a3b8 !important; } /* Stats info cards (uptime, bandwidth, etc.) */ [data-theme="dark"] .stats-info-card { background-color: var(--mt-bg-elevated) !important; border-color: var(--mt-border) !important; } [data-theme="dark"] .stats-info-card .stats-info-label { color: #94a3b8 !important; } [data-theme="dark"] .stats-info-card .stats-info-value { color: var(--mt-text-primary) !important; } /* XRAY/VLESS config cards */ [data-theme="dark"] .xray-config-card { background-color: var(--mt-bg-elevated) !important; border-color: var(--mt-border) !important; color: var(--mt-text-primary) !important; } [data-theme="dark"] .xray-config-card .xray-config-header { color: var(--mt-text-primary) !important; border-bottom-color: var(--mt-border) !important; } [data-theme="dark"] .xray-config-card .xray-config-url { background-color: var(--mt-bg-page) !important; border-color: var(--mt-border) !important; } [data-theme="dark"] .xray-config-card code { color: #60a5fa !important; background-color: transparent !important; } /* ===== End Statistics Modal Fix ===== */ /* ===== Dark Theme Scope Fix - html[data-theme=dark] ===== */ html[data-theme="dark"] { --mt-bg-page: #0B1220; --mt-bg-card: #111827; --mt-bg-elevated: #1A2235; --mt-border: #1F2937; --mt-text-primary: #E2E8F0; --mt-accent: #2E6BB8; } html[data-theme="dark"] .protocol-status-card { background-color: #1A2235 !important; border-color: #1F2937 !important; color: #E2E8F0 !important; } html[data-theme="dark"] .protocol-status-card .protocol-name { color: #E2E8F0 !important; } html[data-theme="dark"] .protocol-status-card .protocol-port { color: #94a3b8 !important; } html[data-theme="dark"] .stats-info-card { background-color: #1A2235 !important; border-color: #1F2937 !important; } html[data-theme="dark"] .stats-info-card .stats-info-label { color: #94a3b8 !important; } html[data-theme="dark"] .stats-info-card .stats-info-value { color: #E2E8F0 !important; } html[data-theme="dark"] .xray-config-card { background-color: #1A2235 !important; border-color: #1F2937 !important; color: #E2E8F0 !important; } html[data-theme="dark"] .xray-config-card .xray-config-header { color: #E2E8F0 !important; border-bottom-color: #1F2937 !important; } html[data-theme="dark"] .xray-config-card .xray-config-url { background-color: #0B1220 !important; border-color: #1F2937 !important; } html[data-theme="dark"] .xray-config-card code { color: #60a5fa !important; background-color: transparent !important; } html[data-theme="dark"] .modal-content { background-color: #111827 !important; border-color: #1F2937 !important; color: #E2E8F0 !important; } html[data-theme="dark"] .modal-header { background-color: #111827 !important; border-bottom-color: #1F2937 !important; } html[data-theme="dark"] .modal-title { color: #E2E8F0 !important; } /* ===== End Dark Theme Scope Fix ===== */ /* ===== Download Landing - Lang Picker Position Fix ===== */ .faz-lang-login ~ #langPickerPopup { position: fixed !important; bottom: 76px !important; right: 24px !important; top: auto !important; left: auto !important; } /* ===== End Download Landing Fix ===== */ /* ===== Dashboard Pulse Dot Loading ===== */ .mt-pulse-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #2E6BB8; animation: mt-pulse 1.2s ease-in-out infinite; } @keyframes mt-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.7); } } /* ===== End Dashboard Pulse Dot ===== */ /* ===== Navy Pulse Dot Loading ===== */ .pulse-dot-navy { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #2E6BB8 !important; animation: pulse-anim 1.2s ease-in-out infinite !important; } /* ===== End Navy Pulse Dot ===== */ /* ===== Pulse Dot Keyframes Fix ===== */ @keyframes pulse-anim { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.4; } } /* ===== End Pulse Dot Keyframes ===== */ /* ===== Global Pulse Animation ===== */ @keyframes pulse-anim { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.4; } } /* ===== End Global Pulse Animation ===== *//* ===== SIDENAV PROFILE BLOCK (BOTTOM) ===== */ .sidebar-profile { display: flex !important; align-items: center; gap: 10px; padding: 12px 16px; margin: 8px 12px 12px; border-radius: 10px; background: rgba(46,107,184,0.15); border: 1px solid rgba(46,107,184,0.25); border-top: 1px solid rgba(255,255,255,0.08); } .sidebar-profile-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(46,107,184,0.3); border: 2px solid rgba(46,107,184,0.6); display: flex !important; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; color: #94a3b8; font-size: 16px; } .sidebar-profile-info { flex: 1; min-width: 0; } .sidebar-profile-name { font-size: 0.85rem; font-weight: 700; color: #E2E8F0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .sidebar-profile-upline { font-size: 0.72rem; color: #94a3b8 !important; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .sidebar-profile-upline-label { color: #64748b !important; } /* ===== SIDENAV PROFILE BLOCK ===== */ .sidebar-profile { display: flex !important; align-items: center !important; gap: 10px; padding: 12px 14px !important; margin: 0 12px 12px 12px !important; border-radius: 10px !important; background: rgba(46,107,184,0.15) !important; border: 1px solid rgba(46,107,184,0.3) !important; box-sizing: border-box; } .sidebar-profile-avatar { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: rgba(46,107,184,0.25) !important; border: 2px solid rgba(46,107,184,0.5) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .sidebar-profile-info { flex: 1; min-width: 0; display: block !important; } .sidebar-profile-name { font-size: 0.85rem !important; font-weight: 700 !important; color: #E2E8F0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block !important; line-height: 1.3; } .sidebar-profile-upline { font-size: 0.72rem !important; color: #94a3b8 !important; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block !important; line-height: 1.3; } .sidebar-profile-upline-label { color: #64748b !important; } /* ===== SIDENAV PROFILE BLOCK FIX ===== */ html body .main-sidebar #sidebar-wrapper { overflow-y: auto !important; } html body .main-sidebar .sidebar-menu { flex: 1 !important; overflow-y: unset !important; } html body .main-sidebar #sidebar-wrapper .sidebar-profile { flex-shrink: 0 !important; display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 14px !important; margin: 0 12px 12px 12px !important; border-radius: 10px !important; background: rgba(46,107,184,0.15) !important; border: 1px solid rgba(46,107,184,0.3) !important; } html body .main-sidebar #sidebar-wrapper .sidebar-profile-avatar { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: rgba(46,107,184,0.25) !important; border: 2px solid rgba(46,107,184,0.5) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } html body .main-sidebar #sidebar-wrapper .sidebar-profile-info { flex: 1 !important; min-width: 0 !important; display: block !important; } html body .main-sidebar #sidebar-wrapper .sidebar-profile-name { font-size: 0.85rem !important; font-weight: 700 !important; color: #E2E8F0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; } html body .main-sidebar #sidebar-wrapper .sidebar-profile-upline { font-size: 0.72rem !important; color: #94a3b8 !important; margin-top: 2px !important; display: block !important; } html body .main-sidebar #sidebar-wrapper .sidebar-profile-upline-label { color: #64748b !important; } /* ===== TOPNAV MOBILE COMPACT ===== */ @media (max-width: 768px) { .navbar-nav.navbar-right .nav-link { padding: 0 6px !important; } .navbar-nav.navbar-right .nav-link-lg { padding: 0 6px !important; } .topnav-credit-item .nav-link { padding: 0 6px !important; gap: 3px !important; } .topnav-credit-item span { font-size: 0.75rem !important; } } /* ===== TOPNAV MOBILE COMPACT ===== */ @media (max-width: 991px) { .navbar .nav-link.nav-link-lg i { font-size: 15px !important; line-height: 24px !important; } .navbar-nav.navbar-right > li > a, .navbar-nav.navbar-right > li > span { padding-left: 5px !important; padding-right: 5px !important; } .topnav-credit-item .nav-link { padding: 0 5px !important; gap: 3px !important; } .topnav-credit-item span.topnav-credits { font-size: 0.75rem !important; } .topnav-credit-item i { font-size: 12px !important; } } /* ===== TOPNAV ICON SPACING FIX MOBILE ===== */ @media (max-width: 991px) { .navbar .nav-link { padding-left: 6px !important; padding-right: 6px !important; } } /* ===== TOPNAV ICON SPACING FIX MOBILE V2 ===== */ @media (max-width: 991px) { html body .navbar .navbar-nav.navbar-right .nav-item .nav-link { padding-left: 6px !important; padding-right: 6px !important; } html body .navbar .navbar-nav.navbar-right .nav-item span.nav-link { padding-left: 6px !important; padding-right: 6px !important; } } /* ===== TOPNAV ICON SPACING FIX MOBILE V3 ===== */ @media (max-width: 991px) { html[data-theme] .main-navbar .navbar-nav.navbar-right .nav-link { padding-left: 6px !important; padding-right: 6px !important; } } /* ===== TOPNAV ALIGNMENT FIX ===== */ .navbar-nav.navbar-right { align-items: center !important; display: flex !important; flex-direction: row !important; } .navbar-nav.navbar-right > li { display: flex !important; align-items: center !important; } /* ===== TOPNAV NAVBAR-RIGHT ALIGN FIX ===== */ html body .navbar .navbar-nav.navbar-right { display: flex !important; flex-direction: row !important; align-items: center !important; height: 70px !important; } html body .navbar .navbar-nav.navbar-right > li { display: flex !important; align-items: center !important; height: 70px !important; } html body .navbar .navbar-nav.navbar-right > li > a, html body .navbar .navbar-nav.navbar-right > li > span { display: flex !important; align-items: center !important; height: 70px !important; } /* ===== TOPNAV NAVBAR-RIGHT ALIGN FIX V2 ===== */ html body .navbar .navbar-nav.navbar-right { display: flex !important; flex-direction: row !important; align-items: center !important; height: 100% !important; } html body .navbar .navbar-nav.navbar-right > li { display: flex !important; align-items: center !important; height: auto !important; } html body .navbar .navbar-nav.navbar-right > li > a, html body .navbar .navbar-nav.navbar-right > li > span { display: flex !important; align-items: center !important; height: auto !important; } /* ===== TOPNAV LEFT ICONS ALIGN ===== */ html body .navbar .form-inline.mr-auto { display: flex !important; align-items: center !important; height: 100% !important; } html body .navbar .navbar-nav.mr-auto { display: flex !important; flex-direction: row !important; align-items: center !important; height: 100% !important; } html body .navbar .navbar-nav.mr-auto > li { display: flex !important; align-items: center !important; height: auto !important; } /* ===== TOPNAV LEFT ICONS GAP FIX ===== */ html body .navbar .navbar-nav.mr-auto > li > a.nav-link { padding-left: 8px !important; padding-right: 8px !important; } html body .navbar .navbar-nav.mr-auto { gap: 0 !important; } /* ===== HIDE TOPNAV LOGO ON DESKTOP ===== */ @media (min-width: 992px) { .navbar-nav.navbar-right .d-lg-none { display: none !important; } } /* ===== HIDE TOPNAV LOGO ON DESKTOP V2 ===== */ @media (min-width: 992px) { html body .navbar .navbar-nav.navbar-right li.d-lg-none { display: none !important; } } /* ===== HIDE SEARCH TOGGLE ON DESKTOP ===== */ @media (min-width: 992px) { html body .navbar .navbar-nav.navbar-right .topnav-search-toggle { display: none !important; } } /* ===== HIDE SEARCH TOGGLE WHEN SEARCH BAR VISIBLE ===== */ @media (min-width: 576px) { html body .navbar .navbar-nav.navbar-right .topnav-search-toggle { display: none !important; } } /* ===== Bulk select — row checkboxes ===== */ .row-select, #select-all-users { width: 15px; height: 15px; cursor: pointer; accent-color: var(--mt-accent, #1C4D8D); vertical-align: middle; flex-shrink: 0; } .table-listuser tbody td:first-child { vertical-align: middle; white-space: nowrap; } #btn-delete-selected-users { white-space: nowrap; } /* ===== Bulk Select — Custom Checkbox Design ===== */ input.row-select, input.row-select-reseller, input#select-all-users, input#select-all-resellers { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; min-width: 16px; border: 2px solid #475569; border-radius: 3px; cursor: pointer; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 10px; vertical-align: middle; position: relative; top: -1px; margin-right: 8px; transition: border-color 0.15s, background-color 0.15s; flex-shrink: 0; } input.row-select:hover, input.row-select-reseller:hover, input#select-all-users:hover, input#select-all-resellers:hover { border-color: var(--mt-accent); } input.row-select:checked, input.row-select-reseller:checked, input#select-all-users:checked, input#select-all-resellers:checked { background-color: var(--mt-accent); border-color: var(--mt-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M2 8l4 4 8-8'/%3E%3C/svg%3E"); } input#select-all-users:indeterminate, input#select-all-resellers:indeterminate { background-color: var(--mt-accent); border-color: var(--mt-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' d='M3 8h10'/%3E%3C/svg%3E"); } /* Row highlight when selected */ .table-listuser tbody tr:has(input.row-select:checked) td, .table-listreseller tbody tr:has(input.row-select-reseller:checked) td { background-color: rgba(28, 77, 141, 0.10) !important; } [data-theme="dark"] .table-listuser tbody tr:has(input.row-select:checked) td, [data-theme="dark"] .table-listreseller tbody tr:has(input.row-select-reseller:checked) td { background-color: rgba(46, 107, 184, 0.13) !important; } /* Alignment */ .table-listuser thead th:first-child, .table-listreseller thead th:first-child, .table-listuser tbody td:first-child, .table-listreseller tbody td:first-child { vertical-align: middle; white-space: nowrap; } /* Ensure avatar stays inline when checkbox is inside the span */ .table-listuser tbody td:first-child figure.avatar, .table-listreseller tbody td:first-child figure.avatar { display: inline-block !important; vertical-align: middle; } /* SweetAlert2 delete confirm — btn-primary visible border */ html[data-theme] .swal-delete-confirm .btn-primary, html[data-theme] .swal-delete-confirm .btn.btn-primary { border: 1.5px solid rgba(74, 158, 255, 0.4) !important; }